diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index a42b5ad..409a25d 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -87,6 +87,12 @@ const selectTransformTool = () => y: Math.min(y1, y2), w: Math.abs(x1 - x2), h: Math.abs(y1 - y2), + updateOriginal() { + this.original.x = this.x; + this.original.y = this.y; + this.original.w = this.w; + this.original.h = this.h; + }, contains(x, y) { return ( this.x <= x && @@ -171,13 +177,14 @@ const selectTransformTool = () => // Update scale if (state.scaling) { - state.scaling.scaleTo(x, y); + state.scaling.scaleTo(x, y, state.keepAspectRatio); } // Update position if (state.moving) { state.selected.x = x - state.moving.offset.x; state.selected.y = y - state.moving.offset.y; + state.selected.updateOriginal(); } // Draw dragging box @@ -271,25 +278,27 @@ const selectTransformTool = () => state.clickcb = (evn) => { if (evn.target.id === "overlayCanvas") { - imgCtx.drawImage( - state.selected.image, - state.original.x, - state.original.y - ); - commands.runCommand( - "eraseImage", - "Image Transform Erase", - state.original - ); - commands.runCommand( - "drawImage", - "Image Transform Draw", - state.selected - ); - state.original = null; - state.selected = null; + if (state.selected) { + imgCtx.drawImage( + state.selected.image, + state.original.x, + state.original.y + ); + commands.runCommand( + "eraseImage", + "Image Transform Erase", + state.original + ); + commands.runCommand( + "drawImage", + "Image Transform Draw", + state.selected + ); + state.original = null; + state.selected = null; - redraw(); + redraw(); + } } }; state.dragstartcb = (evn) => { @@ -330,6 +339,7 @@ const selectTransformTool = () => } if (state.scaling) { + state.selected.updateOriginal(); state.scaling = null; } else if (state.moving) { state.moving = null; @@ -419,17 +429,7 @@ const selectTransformTool = () => const ctx = state.clipboard.copy.getContext("2d"); ctx.clearRect(0, 0, state.selected.w, state.selected.h); - ctx.drawImage( - imgCanvas, - state.selected.x, - state.selected.y, - state.selected.w, - state.selected.h, - 0, - 0, - state.selected.w, - state.selected.h - ); + ctx.drawImage(state.selected.image, 0, 0); // Because firefox needs manual activation of the feature if (state.useClipboard) { diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js index 344fa5a..44efcb3 100644 --- a/js/ui/tool/stamp.js +++ b/js/ui/tool/stamp.js @@ -13,11 +13,13 @@ const stampTool = () => // For calls from other tools to paste image if (opt && opt.image) { - state.selected = state.addResource( + const resource = state.addResource( opt.name || "Clipboard", opt.image, opt.temporary === undefined ? true : opt.temporary ); + state.selected = resource; + document.getElementById(`resource-${resource.id}`).click(); state.ctxmenu.uploadButton.disabled = true; state.back = opt.back || null; toolbar.lock(); @@ -33,6 +35,12 @@ const stampTool = () => // Clear Listeners mouse.listen.canvas.onmousemove.clear(state.movecb); mouse.listen.canvas.left.onclick.clear(state.drawcb); + + // Deselect + state.selected = null; + Array.from(state.ctxmenu.resourceList.children).forEach((child) => { + child.classList.remove("selected"); + }); }, { init: (state) => { @@ -50,6 +58,7 @@ const stampTool = () => resourceWrapper.classList.add("resource"); resourceWrapper.addEventListener("click", () => { + if (state.ctxmenu.uploadButton.disabled) return; state.selected = resource; Array.from(state.ctxmenu.resourceList.children).forEach( (child) => { @@ -76,10 +85,13 @@ const stampTool = () => if (elements.length > state.resources.length) elements.forEach((element) => { - for (let resource in state.resources) { - if (element.id.endsWith(resource.id)) return; - } - state.ctxmenu.resourceList.removeChild(element); + let remove = true; + state.resources.some((resource) => { + console.debug(element.id, resource.id); + if (element.id.endsWith(resource.id)) remove = false; + }); + + if (remove) state.ctxmenu.resourceList.removeChild(element); }); };