Retour à la documentation
/**
* @class spw.widgets.SpwPrint
*/
define(["dojo/_base/declare", "spw/api/SpwBaseTemplatedWidget",
"dojo/text!./templates/SpwPrint.html", "spw/api/Printer",
"dojo/_base/lang", "esri/request", "dojo/_base/array",
"dojo/dom-construct", "dojo/dnd/Moveable", "dojo/dnd/Mover",
"dojo/_base/event", "dojo/dom-geometry", "dojo/on", "dojo/mouse",
"dojo/dom-style", "dojo/window", "dojo/Evented", "dojo/Stateful",
"dijit/Destroyable", "esri/geometry/Extent", "dojo/Deferred",
"dojo/promise/all", "spw/api/Utils", "dojo/request/iframe",
"dojo/query", "dojo/_base/config",
"dijit/form/SimpleTextarea", "dijit/form/TextBox", "dijit/form/Button",
"dijit/form/RadioButton"],
function(declare, SpwBaseTemplatedWidget, template, Printer,
lang, request, array, domConstruct, Moveable, Mover,
dojoEvent, domGeometry, on, mouse, domStyle, win, Evented,
Stateful, Destroyable, Extent, Deferred, all, Utils, iframe, query, dojoConfig){
var PreviewFrame = declare([], {
// var PreviewFrame = declare([Evented, Stateful, Destroyable], {
map: null,
printWidget: null,
reportInfo: null,
ratio: null,
left: null,
right: null,
top: null,
bottom: null,
cross: null,
items: ['box', 'cross'],
rosaceUrl: "",
resizing: false,
moving: false,
w: null,
h: null,
x: 0,
y: 0,
crossWidth: 100,
crossHeight: 100,
borderWidth: 5,
constructor: function(opts) {
lang.mixin(this, opts);
this.buildBox();
},
destroy: function() {
this.inherited(arguments);
this.destroyBox();
},
destroyBox: function() {
domConstruct.destroy(this.box);
domConstruct.destroy(this.cross);
},
buildBox: function() {
this.ratio = this.reportInfo.imageWidth / this.reportInfo.imageHeight;
var vs = {
w: this.printWidget.spwViewer.get('spwMap').getWidth(),
h: this.printWidget.spwViewer.get('spwMap').getHeight()
};
var h = this.h = this.reportInfo.imageHeight;
var w = this.w = this.reportInfo.imageWidth;
var centerX = 0.5 * vs.w;
var centerY = 0.5 * vs.h;
this.x = centerX - (this.crossWidth / 2);
this.y = centerY - (this.crossHeight / 2);
this.cross = domConstruct.create('div', {
'class': 'SpwPrintV3Cross'
}, this.map.domNode);
domStyle.set(this.cross, {
width: this.crossWidth + 'px',
height: this.crossHeight + 'px',
top: this.y + 'px',
left: this.x + 'px'
});
this.box = domConstruct.create('div', {
'class': 'SpwPrintV3Preview'
}, this.map.domNode);
domStyle.set(this.box, {
width: w + 'px',
height: h + 'px',
top: centerY - (h/2) + 'px',
left: centerX - (w/2) + 'px'
});
},
update: function(reportInfo) {
if (reportInfo.imageWidth === this.reportInfo.imageWidth && reportInfo.imageHeight === this.reportInfo.imageHeight) {
return;
}
var ratio = reportInfo.imageWidth / reportInfo.imageHeight;
var diffW = ratio / this.ratio;
var deltaW = (this.w * diffW) - this.w;
this.reportInfo = reportInfo;
this.ratio = ratio;
this.destroyBox();
this.buildBox();
},
show: function() {
array.forEach(this.items, lang.hitch(this, function(key) {
domStyle.set(this[key], 'display', '');
}));
},
hide: function() {
array.forEach(this.items, lang.hitch(this, function(key) {
domStyle.set(this[key], 'display', 'none');
}));
},
getExtent: function() {
var min = this.map.pointToExtent(this.x, this.y);
var max = this.map.pointToExtent(this.x + this.w, this.y + this.h);
return new Extent(min.x, min.y, max.x, max.y, this.map.getSpatialReference());
}
});
return declare("spw.widgets.SpwPrint", [SpwBaseTemplatedWidget], /** @lends spw.widgets.SpwPrint.prototype */{
infoMessage: 'Avant d\'imprimer, recadrez la carte en vous aidant du cadre (redimensionnable).<br/>En cliquant sur <i>Imprimer</i>, vous générez un fichier que vous pourrez ensuite imprimer.',
templateString: template,
defaultReport: {
a4_portrait: 'tmpl_A4_portrait',
a4_paysage: 'tmpl_A4_paysage',
a3_portrait: 'tmpl_A3_portrait',
a3_paysage: 'tmpl_A3_paysage'
},
reportParams: {
logoWallon: 'images/templates/logoWallon2.png',
header1: 'Géoportail de la Wallonie'
},
templates: {
tmpl_A4_portrait: {
url: "reportA4Portrait.jrxml",
"default": true,
imageWidth: 555*1.4,
imageHeight: 732*1.4
},
tmpl_A4_paysage: {
url: "reportA4Landscape.jrxml",
imageWidth: 802*1.4,
imageHeight: 489*1.4,
data: null
},
tmpl_A4_portrait_docx: {
url: "reportA4PortraitDocx.jrxml",
imageWidth: 555*1.4,
imageHeight: 732*1.4,
data: {
logoWallon: "images/templates/logoWallon2.png"
}
},
tmpl_A4_paysage_docx: {
url: "reportA4LandscapeDocx.jrxml",
imageWidth: 802*1.4,
imageHeight: 489*1.4,
data: {
logoWallon: "images/templates/logoWallon2.png"
}
},
tmpl_A3_portrait: {
url: "reportA3Portrait.jrxml",
imageWidth: 802*1.4,
imageHeight: 1080*1.4,
data: null
},
tmpl_A3_portrait_docx: {
url: "reportA3PortraitDocx.jrxml",
imageWidth: 802*1.4,
imageHeight: 1080*1.4,
data: {
logoWallon: "images/templates/logoWallon2.png"
}
},
tmpl_A3_paysage: {
url: "reportA3Landscape.jrxml",
imageWidth: 1150*1.4,
imageHeight: 736*1.4,
data: null
},
tmpl_A3_paysage_docx: {
url: "reportA3LandscapeDocx.jrxml",
imageWidth: 1150*1.4,
imageHeight: 736*1.4,
data: {
logoWallon: "images/templates/logoWallon2.png"
}
}
},
selectedTemplate: "",
// _enterHandler: null,
// _leaveHandler: null,
// _mapDomNodeHover: false,
nodesToReposition: ['.esriControlsBR'],
nodesOriginalPosition: null,
"widgetTitle": "Imprimer cette vue",
"reportUrl": dojoConfig.geoviewerApiUrl + "/Report",
"useCors": true,
"iconClass": "printIcon",
"style": {
"padding": "8px"
},
"position": "panel-light",
"height": "auto",
"right": "15px",
"top": "85px",
"width": "350px",
/**
* @constructs
* @param config
*/
constructor: function() {
},
postCreate: function() {
this.inherited(arguments);
this.infoNode.innerHTML = this.infoMessage;
if(this.spwViewer.isSideWindow() && !this.spwViewer.get('localSpwMap') && window.opener.require("spw/api/SpwViewer").getInstance().get('localSpwMap')){
window.opener.require(["spw/api/Printer"], function(PrinterParent){
this.printer = new PrinterParent();
}.bind(this))
} else {
this.printer = new Printer({nodesToReposition: this.nodesToReposition});
}
},
_getUrlAttr: function() {
if (this.useCors !== true) {
if (/^(http|https):\/\//.test(this.reportUrl) && this.spwViewer.get('proxyPageUrl')) {
if (this.reportUrl.indexOf(this.spwViewer.get('proxyPageUrl')) < 0) {
return this.spwViewer.get('proxyPageUrl') + '?' + this.reportUrl;
}
}
}
return this.reportUrl;
},
onActivate: function(){
this.inherited(arguments);
this.formatA4Hdl = this.formatA4.on('change', lang.hitch(this, this.createPreviewZone));
this.formatA3Hdl = this.formatA3.on('change', lang.hitch(this, this.createPreviewZone));
this.formatPortaitHdl = this.formatPortait.on('change', lang.hitch(this, this.createPreviewZone));
this.formatLandscapeHdl = this.formatLandscape.on('change', lang.hitch(this, this.createPreviewZone));
this.pngChanged = this.pngType.on('change', lang.hitch(this, this.createPreviewZone));
this.docxChanged = this.docxType.on('change', lang.hitch(this, this.createPreviewZone));
this.pdfChanged = this.pngType.on('change', lang.hitch(this, this.createPreviewZone));
this.createPreviewZone();
// the code bellow is used when the widget is set "integrated" in a Toolbar
// in order to block the menu while the user manipulates the map
// this should be improved with a test on position + done in the SpwBaseWidget class
// var mapDomNode = this.spwViewer.get('spwMap').domNode, _this = this;
// this.own(
// this._enterHandler = on(mapDomNode, mouse.enter, lang.hitch(this, function() {
// this._mapDomNodeHover = true;
// })),
// this._leaveHandler = on(mapDomNode, mouse.leave, lang.hitch(this, function() {
// this._mapDomNodeHover = false;
// }))
// );
// require(["dojo/aspect", "dijit/popup"], function(aspect, popup){
// tp = popup.getTopPopup();
// if(tp){
// aspect.around(tp.parent, "closeDropDown", function(originalCloseDropDown){
// return function(method, args){
// if(!_this._mapDomNodeHover){
// originalCloseDropDown.apply(this,arguments);
// } else {
// tp.parent._focusManager.focus(_this.domNode);
// }
// }
// });
// }
// });
},
onDeactivate: function(){
this.inherited(arguments);
this.destroyPreviewZone();
if (this._enterHandler) {
this._enterHandler.remove();
this._enterHandler = null;
}
if (this._leaveHandler) {
this._leaveHandler.remove();
this._leaveHandler = null;
}
if(this.formatA4Hdl) this.formatA4Hdl.remove();
if(this.formatA3Hdl) this.formatA3Hdl.remove();
if(this.formatPortaitHdl) this.formatPortaitHdl.remove();
if(this.formatLandscapeHdl) this.formatLandscapeHdl.remove();
if(this.pngChanged) this.pngChanged.remove();
if(this.docxChanged) this.docxChanged.remove();
if(this.pdfChanged) this.pdfChanged.remove();
},
createPreviewZone: function() {
if (this.previewZone == null) {
this.previewZone = new PreviewFrame({
map: this.spwViewer.get('spwMap'),
printWidget: this,
reportInfo: this.getChosenTemplate()
});
}
else {
this.previewZone.update(this.getChosenTemplate());
}
},
destroyPreviewZone: function() {
if(this.previewZone){
this.previewZone.destroy();
this.previewZone = null;
}
},
// repositionWidgets: function(template) {
// var spwMap = this.spwViewer.get('spwMap');
//
// var overflowW = (template.imageWidth - spwMap.getWidth()) / 2;
// var overflowH = (template.imageHeight - spwMap.getHeight()) / 2;
//
// array.forEach(this.ws, lang.hitch(this, function(w) {
// w.hideOnPrint && domStyle.set(w.domNode, 'display', 'none');
//
// var mapPosition = w.mapPosition;
//
// if (mapPosition) {
// var top = parseInt(mapPosition.top);
// var bottom = parseInt(mapPosition.bottom);
// var right = parseInt(mapPosition.right);
// var left = parseInt(mapPosition.left);
//
// var style = {
// top: isNaN(top) ? null : top + 'px',
// left: isNaN(left) ? null : left + 'px',
// right: isNaN(right) ? null : right + 'px',
// bottom: isNaN(bottom) ? null : bottom + 'px'
// };
//
// if (overflowH < 0) {
// if (!isNaN(bottom)) {
// style.bottom = (bottom - overflowH) + 'px';
// }
// else if (!isNaN(top)) {
// style.top = (top - overflowH) + 'px';
// }
// }
//
// if (overflowW < 0) {
// if (!isNaN(right)) {
// style.right = (right - overflowW) + 'px';
// }
// else if (!isNaN(left)) {
// style.left = (left - overflowW) + 'px';
// }
// }
//
// domStyle.set(w.domNode, style);
// }
// }));
//
// this.nodesOriginalPosition = {};
//
// array.forEach(this.nodesToReposition, lang.hitch(this, function(nodeToReposition) {
// var node = query(nodeToReposition)[0];
//
// if (node) {
// var top = parseInt(domStyle.get(node, 'top'));
// var bottom = parseInt(domStyle.get(node, 'bottom'));
// var right = parseInt(domStyle.get(node, 'right'));
// var left = parseInt(domStyle.get(node, 'left'));
//
// var style = {
// top: isNaN(top) ? null : top + 'px',
// left: isNaN(left) ? null : left + 'px',
// right: isNaN(right) ? null : right + 'px',
// bottom: isNaN(bottom) ? null : bottom + 'px'
// };
//
// if (style.top && style.bottom) {
// delete style.top;
// }
//
// if (style.left && style.right) {
// delete style.left;
// }
//
// this.nodesOriginalPosition[nodeToReposition] = lang.clone(style);
//
// if (overflowH < 0) {
// if (!isNaN(bottom)) {
// style.bottom = (bottom - overflowH) + 'px';
// }
// else if (!isNaN(top)) {
// style.top = (top - overflowH) + 'px';
// }
// }
//
// if (overflowW < 0) {
// if (!isNaN(right)) {
// style.right = (right - overflowW) + 'px';
// delete style.left;
// }
// else if (!isNaN(left)) {
// style.left = (left - overflowW) + 'px';
// }
// }
//
// domStyle.set(node, style);
// }
// }));
// },
printClicked: function(args) {
var printComesFromIdentify = args.fromIdentify != null && args.fromIdentify;
var callback = args.callbackPrint || this.createPNG;
if (this.spwViewer.get('spwMap').isUpdating()) {
this.spwViewer.get('spwMap').esriMap.emit('update-end', {error: null});
}
this.ws = this.spwViewer.spwWidgetsManager.getWidgets({
activated: true,
position: 'map'
});
this.oldExtent = this.spwViewer.get('spwMap').getCurrentExtent();
this.previewZone.hide();
var extent = this.previewZone.getExtent();
if(this.pngType.get('checked')){
var template = this.getChosenTemplate();
// this.repositionWidgets(template);
if(this.formatA4.get('checked') && this.formatPortait.get('checked')){
this.printer.getImage(this.spwViewer.get('spwMap').domNode, template.imageWidth, template.imageHeight, true, extent, lang.hitch(this, callback), printComesFromIdentify ? args.rosaceUrl : this.rosaceUrl, printComesFromIdentify);
}else if(this.formatA4.get('checked') && this.formatLandscape.get('checked')){
this.printer.getImage(this.spwViewer.get('spwMap').domNode, template.imageWidth, template.imageHeight, true, extent, lang.hitch(this, callback), this.rosaceUrl);
}else if(this.formatA3.get('checked') && this.formatPortait.get('checked')){
this.printer.getImage(this.spwViewer.get('spwMap').domNode, template.imageWidth, template.imageHeight, true, extent, lang.hitch(this, callback), this.rosaceUrl);
}else if(this.formatA3.get('checked') && this.formatLandscape.get('checked')){
this.printer.getImage(this.spwViewer.get('spwMap').domNode, template.imageWidth, template.imageHeight, true, extent, lang.hitch(this, callback), this.rosaceUrl);
}
}
else {
this.getTemplate(extent);
}
},
getChosenTemplate: function(){
var template;
if(this.formatA4.get('checked') && this.formatPortait.get('checked') && this.pdfType.get('checked')){
template = this.templates.tmpl_A4_portrait;
}else if(this.formatA4.get('checked') && this.formatLandscape.get('checked') && this.pdfType.get('checked')){
template = this.templates.tmpl_A4_paysage;
}else if(this.formatA3.get('checked') && this.formatPortait.get('checked') && this.pdfType.get('checked')){
template = this.templates.tmpl_A3_portrait;
}else if(this.formatA3.get('checked') && this.formatLandscape.get('checked') && this.pdfType.get('checked')){
template = this.templates.tmpl_A3_paysage;
}else if(this.formatA3.get('checked') && this.formatPortait.get('checked') && this.docxType.get('checked')){
template = this.templates.tmpl_A3_portrait_docx;
}else if(this.formatA3.get('checked') && this.formatLandscape.get('checked') && this.docxType.get('checked')){
template = this.templates.tmpl_A3_paysage_docx;
}else if(this.formatA4.get('checked') && this.formatPortait.get('checked') && this.docxType.get('checked')){
template = this.templates.tmpl_A4_portrait_docx;
}else if(this.formatA4.get('checked') && this.formatLandscape.get('checked') && this.docxType.get('checked')){
template = this.templates.tmpl_A4_paysage_docx;
}
else if (this.formatA4.get('checked')) {
if (this.formatPortait.get('checked')) {
template = this.templates[this.defaultReport.a4_portrait];
}
else {
template = this.templates[this.defaultReport.a4_paysage];
}
}
else if (this.formatA3.get('checked')) {
if (this.formatPortait.get('checked')) {
template = this.templates[this.defaultReport.a3_portrait];
}
else {
template = this.templates[this.defaultReport.a3_paysage];
}
}
else {
template = this.templates[this.defaultReport.a4_portrait];
}
return template;
},
getTemplate: function(extent) {
var template = this.getChosenTemplate();
request({
url: template.url,
handleAs: 'text'
}).then(
lang.hitch(this, function(response) {
this.selectedTemplate = lang.mixin(template, {
rawTemplate: response
});
//this.destroyPreviewZone();
this.printer.getImage(this.spwViewer.get('spwMap').domNode, template.imageWidth, template.imageHeight, true, extent, lang.hitch(this, this.createReport), this.rosaceUrl);
}), lang.hitch(this, function(error) {
//dans ce cas, url contient la valeur par défaut qui correspond au fichier template par défaut sur le serveur
this.selectedTemplate = "defaultFileName:" + template.url;
console.log("Template d'impression non trouvé, utilisation du template serveur par défaut : " + template.url);
//this.destroyPreviewZone();
this.printer.getImage(this.spwViewer.get('spwMap').domNode, template.imageWidth, template.imageHeight, true, extent, lang.hitch(this, this.createReport), this.rosaceUrl);
}));
},
createReport: function(canvas){
this.createPreviewZone();
var img = canvas.toDataURL();
img = img.substring(img.indexOf(",") + 1);
var Data = {
Data: []
};
var Properties = {};
var promise = new Deferred();
if(this.legend.get('checked')) {
var mapServices = this.spwViewer.get('spwMap').getMapServices({
isBaseMap: false,
visible: true
});
var recurseLayers = function(layer, level){
if(layer.subLayers.length > 0){
var l = [];
array.forEach(layer.subLayers, function(subLayer){
l = l.concat(recurseLayers(subLayer, level + 1));
});
return l;
} else {
if (layer.get('inTOC')) {
var legs = [{level: level, label: layer.get('name'), symbol: ""}];
array.forEach(layer.get('legends'), function (leg) {
legs.push({
level: level + 1,
label: (leg.label ? leg.label : layer.get('name')),
symbol: leg.imageData
});
});
return legs;
}
else {
return [];
}
}
};
var legPromises = array.map(mapServices, lang.hitch(this, function(mapService){
var p = new Deferred();
Data.Data.push({
level: 0,
label: mapService.get('label'),
symbol: ""
});
var loopThroughLayers = function() {
array.forEach(mapService.get('mapServiceLayers'), function(subLayer){
if(!subLayer.parentLayer) {
Data.Data = Data.Data.concat(recurseLayers(subLayer, 1));
}
});
p.resolve();
};
if (!mapService.get('legendLoaded')) {
this.own(on.once(mapService, mapService.events.MapServiceLegendLoaded, lang.hitch(this, loopThroughLayers)));
mapService.loadLegend();
}
else {
loopThroughLayers();
}
return p;
}));
all(legPromises).then(lang.hitch(this, function() {
promise.resolve();
}));
}
else {
promise.resolve();
}
promise.then(lang.hitch(this, function() {
if (typeof(this.selectedTemplate) === 'string') {
this.sendReport(this.get('url'), this.selectedTemplate, img, Data, Properties);
}
else {
var promises = [];
for (var key in this.reportParams) {
var templateData = this.selectedTemplate.data || {};
if (this.reportParams.hasOwnProperty(key)) {
var p = new Deferred();
promises.push(p);
var value = templateData[key] || this.reportParams[key];
if ((/\.(gif|jpg|jpeg|tiff|png)$/i).test(value)) {
var splitted = value.split('.');
var ext = splitted[splitted.length - 1];
(function(tmp, k) {
Utils.imgToBase64(value, ext, function(image) {
Properties[k] = image.substring(image.indexOf(",") + 1);
tmp.resolve();
});
})(p, key);
}
else {
Properties[key] = value;
p.resolve();
}
}
}
all(promises).then(lang.hitch(this, function() {
this.sendReport(this.get('url'), this.selectedTemplate.rawTemplate, img, Data, Properties);
}));
}
// this.resetWidgets();
// this.resetNodes();
}));
},
sendReport: function(url, template, mapImage, data, properties) {
this.Data.value = JSON.stringify(data);
this.Properties.value = JSON.stringify(properties);
this.FileName.value = "rapport-" + new Date().toLocaleDateString().replace(/\//gim,'-').replace(/ /gim,'-');
this.Template.value = encodeURIComponent(template);
this.MapImage.value = mapImage;
this.formDownload.action = url;
this.formDownload.submit();
// iframe._currentDfd = null;
// iframe(url, {
// method: 'POST',
// form: this.formDownload
// });
//this.formDownload.submit();
this.previewZone.show();
},
// resetWidgets: function() {
// array.forEach(this.ws, lang.hitch(this, function(w) {
// w.hideOnPrint && domStyle.set(w.domNode, 'display', '');
//
// if (w.mapPosition) {
// domStyle.set(w.domNode, w.mapPosition);
// }
// }));
// },
// resetNodes: function() {
// array.forEach(this.nodesToReposition, lang.hitch(this, function(nodeToReposition) {
// var node = query(nodeToReposition)[0];
//
// if (node && this.nodesOriginalPosition[nodeToReposition]) {
// domStyle.set(node, this.nodesOriginalPosition[nodeToReposition]);
// }
// }));
// },
createPNG: function(canvas){
// this.resetWidgets();
// this.resetNodes();
var newWindow = window.open('');
newWindow.document.body.innerHTML = '<html><head></head><body><img src="' + canvas.toDataURL() + '"/></body></html>';
this.previewZone.show();
},
hideWidget: function() {
domStyle.set(this.domNode, 'display', 'none');
domStyle.set(this.domNode.parentElement.parentElement.parentElement, 'display', 'none');
},
showWidget: function() {
domStyle.set(this.domNode, 'display', '');
domStyle.set(this.domNode.parentElement.parentElement.parentElement, 'display', '');
},
typeChanged: function(){
if(this.legend && this.pngType){
this.legend.set('disabled', this.pngType.checked);
}
}
// resetWidgetsAndNodes: function() {
// this.resetWidgets();
//// this.resetNodes();
// }
});
});