From 70d1fda23dad34634a6fbfa2edd4bd6b63854c71 Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Fri, 25 Nov 2022 00:34:34 -0300 Subject: [PATCH] a big commit with the selection and stamping tools Signed-off-by: Victor Seiji Hariki Former-commit-id: b3f849f3fdb334916f1a4ee6c81ac6bdf42a8f52 --- css/index.css | 28 ++- css/ui/tool/stamp.css | 77 ++++++++ css/ui/toolbar.css | 23 +++ index.html | 13 +- js/commands.js | 22 ++- js/input.js | 8 +- js/shortcuts.js | 6 + js/ui/tool/select.js | 399 +++++++++++++++++++++++++++++++++++++++--- js/ui/tool/stamp.js | 269 ++++++++++++++++++++++++++++ js/ui/toolbar.js | 16 +- res/icons/file-up.svg | 7 + res/icons/lock.svg | 5 + 12 files changed, 830 insertions(+), 43 deletions(-) create mode 100644 css/ui/tool/stamp.css create mode 100644 js/ui/tool/stamp.js create mode 100644 res/icons/file-up.svg create mode 100644 res/icons/lock.svg diff --git a/css/index.css b/css/index.css index d32ed36..9c6b916 100644 --- a/css/index.css +++ b/css/index.css @@ -30,20 +30,27 @@ body { grid-row-gap: 5px; } -.toolbar { +.button-array { display: flex; - justify-content: space-between; + justify-content: stretch; } -.toolbar > .tool { +.button-array > .button.tool { flex: 1; + border-radius: 0; } -.toolbar > .tool:not(:last-child) { - margin-right: 10px; +.button-array > .button.tool:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; } -button.tool { +.button-array > .button.tool:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.button.tool { background-color: rgb(0, 0, 50); color: rgb(255, 255, 255); border-radius: 5px; @@ -57,8 +64,11 @@ button.tool { margin-bottom: 5px; } -button.tool:hover { - background-color: #667; +.button.tool:hover { + background-color: rgb(30, 30, 80); +} +.button.tool:active { + background-color: rgb(60, 60, 130); } .collapsible { @@ -100,7 +110,7 @@ button.tool:hover { font-size: medium; text-align: left; max-height: fit-content; - overflow: auto; + overflow: visible; cursor: auto; } diff --git a/css/ui/tool/stamp.css b/css/ui/tool/stamp.css new file mode 100644 index 0000000..2dc9a2d --- /dev/null +++ b/css/ui/tool/stamp.css @@ -0,0 +1,77 @@ +.resource-manager { + position: relative; + border-radius: 5px; +} + +.resource-manager { + user-select: none; +} +.resource-manager > .preview-pane { + display: none; + + position: absolute; + + height: 200px; + width: 200px; + + right: -200px; + top: 0px; + + background-color: white; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + + border-radius: 2px; +} + +.resource-manager > .resource-list { + height: 200px; + + background-color: #ffffff66; + + border-top-left-radius: 5px; + border-top-right-radius: 5px; + + overflow-y: scroll; + overflow-x: hidden; +} + +.resource-manager > .resource-list > * { + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.resource-manager > .resource-list > *:hover { + background-color: #ffff; +} +.resource-manager > .resource-list > .selected { + background-color: #fff6; +} + +.resource-manager > .resource-list.dragging { + background-color: #ffffff88; + transition-duration: 0.3s; +} + +.resource-manager > .upload-button { + display: block; + width: 100%; + + padding-left: 0; + padding-right: 0; + + margin-top: 0; + + text-align: center; + + border-top-left-radius: 0px; + border-top-right-radius: 0px; + + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + + border: 0px; +} diff --git a/css/ui/toolbar.css b/css/ui/toolbar.css index 631a3ed..bb69d01 100644 --- a/css/ui/toolbar.css +++ b/css/ui/toolbar.css @@ -32,6 +32,29 @@ filter: invert(90%); } +/* Toolbar lock indicator */ +#ui-toolbar .lock-indicator { + position: absolute; + display: none; + + padding: 0; + + background-color: var(--c-text); + + right: 2px; + top: 10px; + + width: 15px; + height: 15px; + + background-color: red; + + -webkit-mask-image: url("/res/icons/lock.svg"); + -webkit-mask-size: contain; + mask-image: url("/res/icons/lock.svg"); + mask-size: contain; +} + /* The separator */ #ui-toolbar .separator { width: 80%; diff --git a/index.html b/index.html index 28e2ff7..1c7eba5 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,9 @@ + + + @@ -165,11 +168,11 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
History
-
- -
@@ -179,11 +182,12 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba
+
@@ -296,6 +300,7 @@ people, person, humans, human, divers, diver, glitch, error, text, watermark, ba + diff --git a/js/commands.js b/js/commands.js index 2d2a30d..d63923d 100644 --- a/js/commands.js +++ b/js/commands.js @@ -133,7 +133,7 @@ commands.createCommand( options.x === undefined || options.y === undefined ) - throw "Command drawImage requires options in the format: {image, x, y, ctx?}"; + throw "Command drawImage requires options in the format: {image, x, y, w?, h?, ctx?}"; // Check if we have state if (!state.context) { @@ -144,14 +144,14 @@ commands.createCommand( const imgData = context.getImageData( options.x, options.y, - options.image.width, - options.image.height + options.w || options.image.width, + options.h || options.image.height ); state.box = { x: options.x, y: options.y, - w: options.image.width, - h: options.image.height, + w: options.w || options.image.width, + h: options.h || options.image.height, }; // Create Image const cutout = document.createElement("canvas"); @@ -163,7 +163,17 @@ commands.createCommand( } // Apply command - state.context.drawImage(options.image, state.box.x, state.box.y); + state.context.drawImage( + options.image, + 0, + 0, + options.image.width, + options.image.height, + state.box.x, + state.box.y, + state.box.w, + state.box.h + ); }, (title, state) => { // Clear destination area diff --git a/js/input.js b/js/input.js index 684f777..2141b73 100644 --- a/js/input.js +++ b/js/input.js @@ -392,7 +392,13 @@ const keyboard = { callback, }); }, - deleteShortcut(id) { + deleteShortcut(id, key = null) { + if (key) { + this.shortcuts[key] = this.shortcuts[key].filter( + (v) => v.id !== id && v.callback !== id + ); + return; + } this.shortcuts.keys().forEach((key) => { this.shortcuts[key] = this.shortcuts[key].filter( (v) => v.id !== id && v.callback !== id diff --git a/js/shortcuts.js b/js/shortcuts.js index a877b2f..8846ded 100644 --- a/js/shortcuts.js +++ b/js/shortcuts.js @@ -17,3 +17,9 @@ keyboard.onShortcut({key: "KeyM"}, () => { keyboard.onShortcut({key: "KeyI"}, () => { tools.img2img.enable(); }); +keyboard.onShortcut({key: "KeyS"}, () => { + tools.selecttransform.enable(); +}); +keyboard.onShortcut({key: "KeyU"}, () => { + tools.stamp.enable(); +}); diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index df46a9b..791a121 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -8,33 +8,152 @@ const selectTransformTool = () => state.movecb({...mouse.coords.canvas.pos, target: {id: "overlayCanvas"}}); mouse.listen.canvas.onmousemove.on(state.movecb); + mouse.listen.canvas.left.onclick.on(state.clickcb); mouse.listen.canvas.left.ondragstart.on(state.dragstartcb); mouse.listen.canvas.left.ondragend.on(state.dragendcb); mouse.listen.canvas.right.onclick.on(state.cancelcb); + + keyboard.listen.onkeyclick.on(state.keyclickcb); + keyboard.listen.onkeydown.on(state.keydowncb); + keyboard.onShortcut({ctrl: true, key: "KeyC"}, state.ctrlccb); + keyboard.onShortcut({ctrl: true, key: "KeyV"}, state.ctrlvcb); + keyboard.onShortcut({ctrl: true, key: "KeyX"}, state.ctrlxcb); + keyboard.onShortcut({ctrl: true, key: "KeyS"}, state.ctrlscb); }, (state, opt) => { mouse.listen.canvas.onmousemove.clear(state.movecb); + mouse.listen.canvas.left.onclick.clear(state.clickcb); mouse.listen.canvas.left.ondragstart.clear(state.dragstartcb); mouse.listen.canvas.left.ondragend.clear(state.dragendcb); mouse.listen.canvas.right.onclick.clear(state.cancelcb); + + keyboard.listen.onkeyclick.clear(state.keyclickcb); + keyboard.listen.onkeydown.clear(state.keydowncb); + keyboard.deleteShortcut(state.ctrlccb, "KeyC"); + keyboard.deleteShortcut(state.ctrlvcb, "KeyV"); + keyboard.deleteShortcut(state.ctrlxcb, "KeyX"); + keyboard.deleteShortcut(state.ctrlscb, "KeyS"); + + state.reset(); + + ovCanvas.style.cursor = "auto"; }, { init: (state) => { + state.clipboard = {}; + state.snapToGrid = true; + state.keepAspectRatio = true; + state.useClipboard = !!navigator.clipboard.write; // Use it by default if supported + + state.original = null; state.dragging = null; + state.selected = null; + state.moving = null; + + state.lastMouseTarget = null; + state.lastMouseMove = null; + + const redraw = () => { + ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + state.movecb(state.lastMouseMove); + }; + + state.reset = () => { + if (state.dragging) state.dragging = null; + else state.selected = null; + + redraw(); + }; const selectionBB = (x1, y1, x2, y2) => { return { + original: { + x: Math.min(x1, x2), + y: Math.min(y1, y2), + w: Math.abs(x1 - x2), + h: Math.abs(y1 - y2), + }, x: Math.min(x1, x2), y: Math.min(y1, y2), w: Math.abs(x1 - x2), h: Math.abs(y1 - y2), + contains(x, y) { + return ( + this.x <= x && + x <= this.x + this.w && + this.y <= y && + y <= this.y + this.h + ); + }, + handles() { + const _createHandle = (x, y, originOffset = null, size = 10) => { + return { + x: x - size / 2, + y: y - size / 2, + w: size, + h: size, + contains(x, y) { + return ( + this.x <= x && + x <= this.x + this.w && + this.y <= y && + y <= this.y + this.h + ); + }, + scaleTo: (tx, ty, keepAspectRatio = true) => { + const origin = { + x: this.original.x + this.original.w / 2, + y: this.original.y + this.original.h / 2, + }; + let nx = tx; + let ny = ty; + + let xRatio = (nx - origin.x) / (x - origin.x); + let yRatio = (ny - origin.y) / (y - origin.y); + if (keepAspectRatio) + xRatio = yRatio = Math.min(xRatio, yRatio); + + if (Number.isFinite(xRatio)) { + let left = this.original.x; + let right = this.original.x + this.original.w; + + left = (left - origin.x) * xRatio + origin.x; + right = (right - origin.x) * xRatio + origin.x; + + this.x = left; + this.w = right - left; + } + + if (Number.isFinite(yRatio)) { + let top = this.original.y; + let bottom = this.original.y + this.original.h; + + top = (top - origin.y) * yRatio + origin.y; + bottom = (bottom - origin.y) * yRatio + origin.y; + + this.y = top; + this.h = bottom - top; + } + }, + }; + }; + return [ + _createHandle(this.x, this.y), + _createHandle(this.x + this.w, this.y), + _createHandle(this.x, this.y + this.h), + _createHandle(this.x + this.w, this.y + this.h), + ]; + }, }; }; state.movecb = (evn) => { + ovCanvas.style.cursor = "auto"; + state.lastMouseTarget = evn.target; + state.lastMouseMove = evn; if (evn.target.id === "overlayCanvas") { let x = evn.x; let y = evn.y; @@ -43,6 +162,17 @@ const selectTransformTool = () => y += snap(evn.y, true, 64); } + // Update scale + if (state.scaling) { + state.scaling.scaleTo(x, y); + } + + // Update position + if (state.moving) { + state.selected.x = x - state.moving.offset.x; + state.selected.y = y - state.moving.offset.y; + } + // Draw dragging box if (state.dragging) { ovCtx.setLineDash([2, 2]); @@ -58,22 +188,68 @@ const selectTransformTool = () => ovCtx.setLineDash([]); } - // Draw selection box if (state.selected) { ovCtx.lineWidth = 1; ovCtx.strokeStyle = "#FFF"; - ovCtx.setLineDash([4, 2]); - ovCtx.strokeRect( + const bb = { + x: state.selected.x, + y: state.selected.y, + w: state.selected.w, + h: state.selected.h, + }; + + // Draw Image + ovCtx.drawImage( + state.selected.image, + 0, + 0, + state.selected.image.width, + state.selected.image.height, state.selected.x, state.selected.y, state.selected.w, state.selected.h ); + + // Draw selection box + ovCtx.setLineDash([4, 2]); + ovCtx.strokeRect(bb.x, bb.y, bb.w, bb.h); ovCtx.setLineDash([]); + + // Draw Scaling/Rotation Origin + ovCtx.beginPath(); + ovCtx.arc( + state.selected.x + state.selected.w / 2, + state.selected.y + state.selected.h / 2, + 5, + 0, + 2 * Math.PI + ); + ovCtx.stroke(); + + // Draw Scaling Handles + let cursorInHandle = false; + state.selected.handles().forEach((handle) => { + if (handle.contains(evn.x, evn.y)) { + cursorInHandle = true; + ovCtx.strokeRect( + handle.x - 1, + handle.y - 1, + handle.w + 2, + handle.h + 2 + ); + } else { + ovCtx.strokeRect(handle.x, handle.y, handle.w, handle.h); + } + }); + + // Change cursor + if (cursorInHandle || state.selected.contains(evn.x, evn.y)) + ovCanvas.style.cursor = "pointer"; } - // Draw cuttent cursor location + // Draw current cursor location ovCtx.lineWidth = 3; ovCtx.strokeStyle = "#FFF"; @@ -86,6 +262,29 @@ 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; + + redraw(); + } + }; state.dragstartcb = (evn) => { if (evn.target.id === "overlayCanvas") { let ix = evn.ix; @@ -95,12 +294,27 @@ const selectTransformTool = () => iy += snap(evn.iy, true, 64); } - state.dragging = {ix, iy}; + if (state.selected) { + const handles = state.selected.handles(); + + const activeHandle = handles.find((v) => + v.contains(evn.ix, evn.iy) + ); + if (activeHandle) { + state.scaling = activeHandle; + } else if (state.selected.contains(ix, iy)) { + state.moving = { + offset: {x: ix - state.selected.x, y: iy - state.selected.y}, + }; + } + } else { + state.dragging = {ix, iy}; + } } }; state.dragendcb = (evn) => { - if (evn.target.id === "overlayCanvas" && state.dragging) { + if (evn.target.id === "overlayCanvas") { let x = evn.x; let y = evn.y; if (state.snapToGrid) { @@ -108,33 +322,154 @@ const selectTransformTool = () => y += snap(evn.y, true, 64); } - state.selected = selectionBB( - state.dragging.ix, - state.dragging.iy, - x, - y - ); - state.dragging = null; + if (state.scaling) { + state.scaling = null; + } else if (state.moving) { + state.moving = null; + } else if (state.dragging) { + state.original = selectionBB( + state.dragging.ix, + state.dragging.iy, + x, + y + ); + state.selected = selectionBB( + state.dragging.ix, + state.dragging.iy, + x, + y + ); + + // Cut out selected portion of the image for manipulation + const cvs = document.createElement("canvas"); + cvs.width = state.selected.w; + cvs.height = state.selected.h; + const ctx = cvs.getContext("2d"); + + ctx.drawImage( + imgCanvas, + state.selected.x, + state.selected.y, + state.selected.w, + state.selected.h, + 0, + 0, + state.selected.w, + state.selected.h + ); + + imgCtx.clearRect( + state.selected.x, + state.selected.y, + state.selected.w, + state.selected.h + ); + state.selected.image = cvs; + state.original.image = cvs; + + if (state.selected.w === 0 || state.selected.h === 0) + state.selected = null; + + state.dragging = null; + } + redraw(); } }; state.cancelcb = (evn) => { if (evn.target.id === "overlayCanvas") { - if (state.dragging) state.dragging = null; - else state.selected = null; - - ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); - state.movecb(evn); + state.reset(); } }; // Keyboard callbacks - state.keydowncb = (evn) => { - console.debug(evn); - }; + state.keydowncb = (evn) => {}; state.keyclickcb = (evn) => { - console.debug(evn); + if (state.lastMouseTarget.id === "overlayCanvas") { + switch (evn.code) { + case "Delete": + state.selected && + commands.runCommand( + "eraseImage", + "Erase Area", + state.selected + ); + state.selected = null; + redraw(); + } + } + }; + + // Register Ctrl-C/V Shortcut + state.ctrlccb = (evn) => { + if (state.selected && state.lastMouseTarget.id === "overlayCanvas") { + state.clipboard.copy = document.createElement("canvas"); + + state.clipboard.copy.width = state.selected.w; + state.clipboard.copy.height = state.selected.h; + + 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 + ); + + // Because firefox needs manual activation of the feature + if (state.useClipboard) { + state.clipboard.copy.toBlob((blob) => { + const item = new ClipboardItem({"image/png": blob}); + navigator.clipboard.write([item]).catch((e) => { + console.warn("Error sending to clipboard"); + console.warn(e); + }); + }); + } + } + }; + state.ctrlvcb = (evn) => { + if (state.useClipboard) { + navigator.clipboard.read().then((items) => { + console.info(items[0]); + for (const item of items) { + for (const type of item.types) { + if (type.startsWith("image/")) { + item.getType(type).then((blob) => { + // Converts blob to image + const url = window.URL || window.webkitURL; + const image = document.createElement("img"); + image.src = url.createObjectURL(file); + tools.stamp.enable({ + image, + back: tools.selecttransform.enable, + }); + }); + } + } + } + }); + } else if (state.clipboard.copy) { + const image = document.createElement("img"); + image.src = state.clipboard.copy.toDataURL(); + + tools.stamp.enable({ + image, + back: tools.selecttransform.enable, + }); + } + }; + state.ctrlxcb = (evn) => {}; + state.ctrlscb = (evn) => { + evn.evn.preventDefault(); }; }, populateContextMenu: (menu, state) => { @@ -146,8 +481,28 @@ const selectTransformTool = () => "snapToGrid", "Snap To Grid" ).label; + // Keep Aspect Ratio + state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox( + state, + "keepAspectRatio", + "Keep Aspect Ratio" + ).label; + // Use Clipboard + const clipboardCheckbox = _toolbar_input.checkbox( + state, + "useClipboard", + "Use clipboard" + ); + state.ctxmenu.useClipboardLabel = clipboardCheckbox.label; + if (!navigator.clipboard.write) + clipboardCheckbox.checkbox.disabled = true; // Disable if not available } menu.appendChild(state.ctxmenu.snapToGridLabel); + menu.appendChild(document.createElement("br")); + menu.appendChild(state.ctxmenu.keepAspectRatioLabel); + menu.appendChild(document.createElement("br")); + menu.appendChild(state.ctxmenu.useClipboardLabel); }, + shortcut: "S", } ); diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js new file mode 100644 index 0000000..e5187e0 --- /dev/null +++ b/js/ui/tool/stamp.js @@ -0,0 +1,269 @@ +const stampTool = () => + toolbar.registerTool( + "res/icons/file-up.svg", + "Stamp Image", + (state, opt) => { + // Draw new cursor immediately + ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + state.movecb({...mouse.coords.canvas.pos, target: {id: "overlayCanvas"}}); + + // Start Listeners + mouse.listen.canvas.onmousemove.on(state.movecb); + mouse.listen.canvas.left.onclick.on(state.drawcb); + + // For calls from other tools to paste image + if (opt && opt.image) { + state.selected = state.addResource( + opt.name || "Clipboard", + opt.image, + opt.temporary === undefined ? true : opt.temporary + ); + console.debug(state.selected); + state.ctxmenu.uploadButton.disabled = true; + state.back = opt.back || null; + } else if (opt) { + throw Error( + "Pasting from other tools must be in format {image, name?, temporary?, back?}" + ); + } else { + state.ctxmenu.uploadButton.disabled = ""; + } + }, + (state, opt) => { + // Clear Listeners + mouse.listen.canvas.onmousemove.clear(state.movecb); + mouse.listen.canvas.left.onclick.clear(state.drawcb); + }, + { + init: (state) => { + state.snapToGrid = true; + state.resources = []; + state.selected = null; + state.back = null; + + const syncResources = () => { + state.resources.forEach((resource) => { + if (!document.getElementById(`resource-${resource.id}`)) { + const resourceWrapper = document.createElement("div"); + resourceWrapper.id = `resource-${resource.id}`; + resourceWrapper.textContent = resource.name; + resourceWrapper.classList.add("resource"); + + resourceWrapper.addEventListener("click", () => { + state.selected = resource; + Array.from(state.ctxmenu.resourceList.children).forEach( + (child) => { + child.classList.remove("selected"); + } + ); + + resourceWrapper.classList.add("selected"); + }); + + resourceWrapper.addEventListener("mouseover", () => { + state.ctxmenu.previewPane.style.display = "block"; + state.ctxmenu.previewPane.style.backgroundImage = `url(${resource.image.src})`; + }); + resourceWrapper.addEventListener("mouseleave", () => { + state.ctxmenu.previewPane.style.display = "none"; + }); + + state.ctxmenu.resourceList.appendChild(resourceWrapper); + } + }); + + const elements = Array.from(state.ctxmenu.resourceList.children); + + 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); + }); + }; + + state.addResource = (name, image, temporary = false) => { + const id = guid(); + const resource = { + id, + name, + image, + temporary, + }; + state.resources.push(resource); + syncResources(); + return resource; + }; + state.deleteResource = (id) => { + state.resources = state.resources.filter((v) => v.id !== id); + + syncResources(); + }; + + state.movecb = (evn) => { + if (evn.target.id === "overlayCanvas") { + let x = evn.x; + let y = evn.y; + if (state.snapToGrid) { + x += snap(evn.x, true, 64); + y += snap(evn.y, true, 64); + } + + // Draw selected image + if (state.selected) { + ovCtx.drawImage(state.selected.image, x, y); + } + + // Draw current cursor location + ovCtx.lineWidth = 3; + ovCtx.strokeStyle = "#FFF"; + + ovCtx.beginPath(); + ovCtx.moveTo(x, y + 10); + ovCtx.lineTo(x, y - 10); + ovCtx.moveTo(x + 10, y); + ovCtx.lineTo(x - 10, y); + ovCtx.stroke(); + } + }; + + state.drawcb = (evn) => { + if (evn.target.id === "overlayCanvas") { + let x = evn.x; + let y = evn.y; + if (state.snapToGrid) { + x += snap(evn.x, true, 64); + y += snap(evn.y, true, 64); + } + + const resource = state.selected; + + if (resource) { + commands.runCommand("drawImage", "Image Stamp", { + image: resource.image, + x, + y, + }); + + if (resource.temporary) state.deleteResource(resource.id); + } + + if (state.back) { + toolbar.unlock(); + state.back({message: "Returning from stamp", pasted: true}); + } + } + }; + state.cancelcb = (evn) => { + if (evn.target.id === "overlayCanvas") { + if (state.back) { + toolbar.unlock(); + state.back({message: "Returning from stamp", pasted: false}); + } + } + }; + }, + populateContextMenu: (menu, state) => { + if (!state.ctxmenu) { + state.ctxmenu = {}; + // Snap To Grid Checkbox + state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox( + state, + "snapToGrid", + "Snap To Grid" + ).label; + + // Create resource list + const uploadButtonId = `upload-btn-${guid()}`; + + const resourceManager = document.createElement("div"); + resourceManager.classList.add("resource-manager"); + const resourceList = document.createElement("div"); + resourceList.classList.add("resource-list"); + + const previewPane = document.createElement("div"); + previewPane.classList.add("preview-pane"); + + const uploadLabel = document.createElement("label"); + uploadLabel.classList.add("upload-button"); + uploadLabel.classList.add("button"); + uploadLabel.classList.add("tool"); + uploadLabel.textContent = "Upload Image"; + uploadLabel.htmlFor = uploadButtonId; + const uploadButton = document.createElement("input"); + uploadButton.id = uploadButtonId; + uploadButton.type = "file"; + uploadButton.accept = "image/*"; + uploadButton.multiple = true; + uploadButton.style.display = "none"; + + uploadButton.addEventListener("change", (evn) => { + [...uploadButton.files].forEach((file) => { + if (file.type.startsWith("image/")) { + console.info("Uploading Image " + file.name); + const url = window.URL || window.webkitURL; + const image = document.createElement("img"); + image.src = url.createObjectURL(file); + + state.selected = state.addResource(file.name, image, false); + } + }); + + uploadButton.value = null; + }); + + uploadLabel.appendChild(uploadButton); + resourceManager.appendChild(resourceList); + resourceManager.appendChild(uploadLabel); + resourceManager.appendChild(previewPane); + + resourceManager.addEventListener( + "drop", + (evn) => { + evn.preventDefault(); + resourceManager.classList.remove("dragging"); + + if (evn.dataTransfer.items) { + Array.from(evn.dataTransfer.items).forEach((item) => { + if (item.kind === "file" && item.type.startsWith("image/")) { + const file = item.getAsFile(); + const url = window.URL || window.webkitURL; + const image = document.createElement("img"); + image.src = url.createObjectURL(file); + + state.addResource(file.name, image, false); + } + }); + } + }, + {passive: false} + ); + resourceManager.addEventListener( + "dragover", + (evn) => { + evn.preventDefault(); + }, + {passive: false} + ); + + resourceManager.addEventListener("dragover", (evn) => { + resourceManager.classList.add("dragging"); + }); + + resourceManager.addEventListener("dragover", (evn) => { + resourceManager.classList.remove("dragging"); + }); + + state.ctxmenu.uploadButton = uploadButton; + state.ctxmenu.previewPane = previewPane; + state.ctxmenu.resourceManager = resourceManager; + state.ctxmenu.resourceList = resourceList; + } + + menu.appendChild(state.ctxmenu.snapToGridLabel); + menu.appendChild(state.ctxmenu.resourceManager); + }, + shortcut: "U", + } + ); diff --git a/js/ui/toolbar.js b/js/ui/toolbar.js index b290606..ff315b9 100644 --- a/js/ui/toolbar.js +++ b/js/ui/toolbar.js @@ -3,10 +3,21 @@ */ const toolbar = { + _locked: false, _toolbar: document.getElementById("ui-toolbar"), + _toolbar_lock_indicator: document.getElementById("toolbar-lock-indicator"), tools: [], + lock() { + toolbar._locked = true; + toolbar._toolbar_lock_indicator.style.display = "block"; + }, + unlock() { + toolbar._locked = false; + toolbar._toolbar_lock_indicator.style.display = "none"; + }, + _makeToolbarEntry: (tool) => { const toolTitle = document.createElement("img"); toolTitle.classList.add("tool-icon"); @@ -78,6 +89,8 @@ const toolbar = { state: {}, options, enable: (opt = null) => { + if (toolbar._locked) return; + this.tools.filter((t) => t.enabled).forEach((t) => t.disable()); while (contextMenuEl.lastChild) { @@ -201,5 +214,6 @@ tools.maskbrush = maskBrushTool(); toolbar.addSeparator(); tools.selecttransform = selectTransformTool(); +tools.stamp = stampTool(); -toolbar.tools[0].enable(); +toolbar.tools[toolbar.tools.length - 1].enable(); diff --git a/res/icons/file-up.svg b/res/icons/file-up.svg new file mode 100644 index 0000000..5bba64d --- /dev/null +++ b/res/icons/file-up.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/res/icons/lock.svg b/res/icons/lock.svg new file mode 100644 index 0000000..ab991c1 --- /dev/null +++ b/res/icons/lock.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file