selection now uses ui canvas

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

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";

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);
 			},
 		};
 

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]);
+						uiCtx.setLineDash([2, 2]);
-						ovCtx.lineWidth = 1;
+						uiCtx.lineWidth = 1;
-						ovCtx.strokeStyle = "#FFF";
+						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);
+						const bbvp = {
-						ovCtx.setLineDash([]);
+							...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]);
+						uiCtx.setLineDash([4, 2]);
-						ovCtx.strokeRect(bb.x, bb.y, bb.w, bb.h);
+						uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h);
-						ovCtx.setLineDash([]);
+						uiCtx.setLineDash([]);
 
 						// Draw Scaling/Rotation Origin
-						ovCtx.beginPath();
+						uiCtx.beginPath();
-						ovCtx.arc(
+						uiCtx.arc(
-							state.selected.x + state.selected.w / 2,
+							bbvp.x + bbvp.w / 2,
-							state.selected.y + state.selected.h / 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(
+								uiCtx.strokeRect(
-									handle.x - 1,
+									bbvph.x - 1,
-									handle.y - 1,
+									bbvph.y - 1,
-									handle.w + 2,
+									bbvph.w + 2,
-									handle.h + 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;
+					uiCtx.lineWidth = 3;
-					ovCtx.strokeStyle = "#FFF";
+					uiCtx.strokeStyle = "#FFF";
 
-					ovCtx.beginPath();
+					uiCtx.beginPath();
-					ovCtx.moveTo(x, y + 10);
+					uiCtx.moveTo(vpc.x, vpc.y + 10);
-					ovCtx.lineTo(x, y - 10);
+					uiCtx.lineTo(vpc.x, vpc.y - 10);
-					ovCtx.moveTo(x + 10, y);
+					uiCtx.moveTo(vpc.x + 10, vpc.y);
-					ovCtx.lineTo(x - 10, y);
+					uiCtx.lineTo(vpc.x - 10, vpc.y);
-					ovCtx.stroke();
+					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();
 					}
 				};