From 207921978b12631a96ee6df38cecc92f10d1178e Mon Sep 17 00:00:00 2001 From: Victor Seiji Hariki Date: Tue, 6 Dec 2022 12:25:06 -0300 Subject: [PATCH] selection now uses ui canvas Signed-off-by: Victor Seiji Hariki --- js/initalize/layers.populate.js | 3 ++ js/lib/toolbar.js | 15 +++++- js/ui/tool/select.js | 91 +++++++++++++++++++++------------ 3 files changed, 76 insertions(+), 33 deletions(-) diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js index d6ee370..9263dfe 100644 --- a/js/initalize/layers.populate.js +++ b/js/initalize/layers.populate.js @@ -153,6 +153,7 @@ viewport.transform(imageCollection.element); mouse.listen.window.onwheel.on((evn) => { if (evn.evn.ctrlKey) { evn.evn.preventDefault(); + const pcx = viewport.cx; const pcy = viewport.cy; if (evn.delta < 0) { @@ -166,6 +167,8 @@ mouse.listen.window.onwheel.on((evn) => { viewport.transform(imageCollection.element); + toolbar.currentTool.redraw(); + if (debug) { debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height); debugCtx.fillStyle = "#F0F"; diff --git a/js/lib/toolbar.js b/js/lib/toolbar.js index beda095..670dfd6 100644 --- a/js/lib/toolbar.js +++ b/js/lib/toolbar.js @@ -8,6 +8,10 @@ const toolbar = { _toolbar_lock_indicator: document.getElementById("toolbar-lock-indicator"), tools: [], + _current_tool: null, + get currentTool() { + return this._current_tool; + }, lock() { toolbar._locked = true; @@ -88,6 +92,12 @@ const toolbar = { _element: null, state: {}, options, + /** + * If the tool has a redraw() function in its state, then run it + */ + redraw: () => { + tool.state.redraw && tool.state.redraw(); + }, enable: (opt = null) => { if (toolbar._locked) return; @@ -100,12 +110,15 @@ const toolbar = { tool._element && tool._element.classList.add("using"); tool.enabled = true; + + this._current_tool = tool; enable(tool.state, opt); }, disable: (opt = null) => { tool._element && tool._element.classList.remove("using"); - disable(tool.state, opt); + this._current_tool = null; tool.enabled = false; + disable(tool.state, opt); }, }; diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js index e133797..ed90d7b 100644 --- a/js/ui/tool/select.js +++ b/js/ui/tool/select.js @@ -46,6 +46,9 @@ const selectTransformTool = () => state.reset(); // Resets cursor + ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + + // Clears overlay imageCollection.inputElement.style.cursor = "auto"; }, { @@ -76,7 +79,7 @@ const selectTransformTool = () => state.lastMouseTarget = null; state.lastMouseMove = null; - const redraw = () => { + state.redraw = () => { ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); state.movecb(state.lastMouseMove); }; @@ -93,7 +96,7 @@ const selectTransformTool = () => if (state.dragging) state.dragging = null; else state.selected = null; - redraw(); + state.redraw(); }; // Selection bounding box object. Has some witchery to deal with handles. @@ -188,6 +191,7 @@ const selectTransformTool = () => // Mouse move handler. As always, also renders cursor state.movecb = (evn) => { ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height); + uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height); imageCollection.inputElement.style.cursor = "auto"; state.lastMouseTarget = evn.target; state.lastMouseMove = evn; @@ -198,6 +202,10 @@ const selectTransformTool = () => y += snap(evn.y, 0, 64); } + const vpc = viewport.canvasToView(x, y); + + uiCtx.save(); + // Update scale if (state.scaling) { state.scaling.scaleTo(x, y, state.keepAspectRatio); @@ -212,17 +220,23 @@ const selectTransformTool = () => // Draw dragging box if (state.dragging) { - ovCtx.setLineDash([2, 2]); - ovCtx.lineWidth = 1; - ovCtx.strokeStyle = "#FFF"; + uiCtx.setLineDash([2, 2]); + uiCtx.lineWidth = 1; + uiCtx.strokeStyle = "#FFF"; const ix = state.dragging.ix; const iy = state.dragging.iy; const bb = selectionBB(ix, iy, x, y); - ovCtx.strokeRect(bb.x, bb.y, bb.w, bb.h); - ovCtx.setLineDash([]); + const bbvp = { + ...viewport.canvasToView(bb.x, bb.y), + w: viewport.zoom * bb.w, + h: viewport.zoom * bb.h, + }; + + uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h); + uiCtx.setLineDash([]); } if (state.selected) { @@ -236,6 +250,12 @@ const selectTransformTool = () => h: state.selected.h, }; + const bbvp = { + ...viewport.canvasToView(bb.x, bb.y), + w: viewport.zoom * bb.w, + h: viewport.zoom * bb.h, + }; + // Draw Image ovCtx.drawImage( state.selected.image, @@ -250,34 +270,39 @@ const selectTransformTool = () => ); // Draw selection box - ovCtx.setLineDash([4, 2]); - ovCtx.strokeRect(bb.x, bb.y, bb.w, bb.h); - ovCtx.setLineDash([]); + uiCtx.setLineDash([4, 2]); + uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h); + uiCtx.setLineDash([]); // Draw Scaling/Rotation Origin - ovCtx.beginPath(); - ovCtx.arc( - state.selected.x + state.selected.w / 2, - state.selected.y + state.selected.h / 2, + uiCtx.beginPath(); + uiCtx.arc( + bbvp.x + bbvp.w / 2, + bbvp.y + bbvp.h / 2, 5, 0, 2 * Math.PI ); - ovCtx.stroke(); + uiCtx.stroke(); // Draw Scaling Handles let cursorInHandle = false; state.selected.handles().forEach((handle) => { + const bbvph = { + ...viewport.canvasToView(handle.x, handle.y), + w: viewport.zoom * handle.w, + h: viewport.zoom * handle.h, + }; if (handle.contains(evn.x, evn.y)) { cursorInHandle = true; - ovCtx.strokeRect( - handle.x - 1, - handle.y - 1, - handle.w + 2, - handle.h + 2 + uiCtx.strokeRect( + bbvph.x - 1, + bbvph.y - 1, + bbvph.w + 2, + bbvph.h + 2 ); } else { - ovCtx.strokeRect(handle.x, handle.y, handle.w, handle.h); + uiCtx.strokeRect(bbvph.x, bbvph.y, bbvph.w, bbvph.h); } }); @@ -287,15 +312,17 @@ const selectTransformTool = () => } // Draw current cursor location - ovCtx.lineWidth = 3; - ovCtx.strokeStyle = "#FFF"; + uiCtx.lineWidth = 3; + uiCtx.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(); + uiCtx.beginPath(); + uiCtx.moveTo(vpc.x, vpc.y + 10); + uiCtx.lineTo(vpc.x, vpc.y - 10); + uiCtx.moveTo(vpc.x + 10, vpc.y); + uiCtx.lineTo(vpc.x - 10, vpc.y); + uiCtx.stroke(); + + uiCtx.restore(); }; // Handles left mouse clicks @@ -330,7 +357,7 @@ const selectTransformTool = () => state.original = null; state.selected = null; - redraw(); + state.redraw(); } }; @@ -431,7 +458,7 @@ const selectTransformTool = () => state.dragging = null; } - redraw(); + state.redraw(); }; // Handler for right clicks. Basically resets everything @@ -449,7 +476,7 @@ const selectTransformTool = () => state.selected && commands.runCommand("eraseImage", "Erase Area", state.selected); state.selected = null; - redraw(); + state.redraw(); } };