Michael,
OK, that explains the issue better. So here is the code fix.
The issue was an on click event was being added each time a screen shot was being made (thus multiple event being fired).
- Add line 10 to startup
- Add new downloadClick function lines 13-30
- Line 86 is where the on click for the download button use to be. It has been removed and replaced with the single line on 86.
startup: function () {
this.inherited(arguments);
this.element = document.createElement("div");
this.element.setAttribute('class', 'hide screenshotCursor maskDiv');
this.sceneView.container.appendChild(this.element);
on(this.closeBtn, "click", lang.hitch(this, function () {
this.screenshotDiv.classList.add("hide");
}));
on(this.screenshotBtn, "click", lang.hitch(this, this.captureScene));
on(this.downloadBtn, "click", lang.hitch(this, this.downloadClick));
},
downloadClick: function(){
const text = this.textInput.value;
if (text) {
const dataUrl = this.getImageWithText(this.screenshot, text);
this.downloadImage(
this.sceneView.map.portalItem.title + ".png",
dataUrl
);
}
else {
this.downloadImage(
this.sceneView.map.portalItem.title + ".png",
this.screenshot.dataUrl
);
}
},
captureScene: function(){
this.screenshotBtn.classList.add("active");
this.sceneView.container.classList.add("screenshotCursor");
let area = null;
const dragHandler = this.sceneView.on("drag", lang.hitch(this, function (event) {
event.stopPropagation();
if (event.action !== "end") {
const xmin = clamp(
Math.min(event.origin.x, event.x),
0,
this.sceneView.width
);
const xmax = clamp(
Math.max(event.origin.x, event.x),
0,
this.sceneView.width
);
const ymin = clamp(
Math.min(event.origin.y, event.y),
0,
this.sceneView.height
);
const ymax = clamp(
Math.max(event.origin.y, event.y),
0,
this.sceneView.height
);
area = {
x: xmin,
y: ymin,
width: xmax - xmin,
height: ymax - ymin
};
setMaskPosition(area, this.element);
}
else {
dragHandler.remove();
this.sceneView
.takeScreenshot({
area: area,
format: "png"
})
.then(lang.hitch(this, function (screenshot) {
this.screenshot = screenshot;
this.showPreview(screenshot);
this.sceneView.container.classList.remove("screenshotCursor");
setMaskPosition(null, this.element);
}));
}
}));
