From d7e20f87dc8783d2a2aab1f7caacfb8e994f2549 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Wed, 11 Jan 2023 00:36:14 -0300
Subject: [PATCH] putting back selection 1

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html            |  6 ++--
 js/lib/util.js        |  5 +++
 js/ui/tool/generic.js | 59 ++++++++++++++++++++++++++++-------
 js/ui/tool/select.js  | 71 ++++++++++++++++++++++++++++++++++---------
 4 files changed, 113 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index 0462b61..e608e25 100644
--- a/index.html
+++ b/index.html
@@ -341,7 +341,7 @@
 		<script src="js/global.js?v=5ee46bd" type="text/javascript"></script>
 
 		<!-- Base Libs -->
-		<script src="js/lib/util.js?v=25f0dbb" type="text/javascript"></script>
+		<script src="js/lib/util.js?v=39564fb" type="text/javascript"></script>
 		<script src="js/lib/events.js?v=2ab7933" type="text/javascript"></script>
 		<script src="js/lib/input.js?v=09298ac" type="text/javascript"></script>
 		<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
@@ -370,7 +370,7 @@
 
 		<!-- Load Tools -->
 		<script
-			src="js/ui/tool/generic.js?v=cd4ae12"
+			src="js/ui/tool/generic.js?v=d63d268"
 			type="text/javascript"></script>
 
 		<script src="js/ui/tool/dream.js?v=76bc565" type="text/javascript"></script>
@@ -381,7 +381,7 @@
 			src="js/ui/tool/colorbrush.js?v=3f8c01a"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=7db1d0c"
+			src="js/ui/tool/select.js?v=44e8ec4"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
diff --git a/js/lib/util.js b/js/lib/util.js
index a7a31d5..9e2fa94 100644
--- a/js/lib/util.js
+++ b/js/lib/util.js
@@ -42,6 +42,11 @@ class BoundingBox {
 		return {x: this.x + this.w, y: this.y + this.h};
 	}
 
+	/** @type {Point} */
+	get center() {
+		return {x: this.x + this.w / 2, y: this.y + this.h / 2};
+	}
+
 	constructor({x, y, w, h} = {x: 0, y: 0, w: 0, h: 0}) {
 		this.x = x;
 		this.y = y;
diff --git a/js/ui/tool/generic.js b/js/ui/tool/generic.js
index 5786d05..c39707d 100644
--- a/js/ui/tool/generic.js
+++ b/js/ui/tool/generic.js
@@ -27,10 +27,7 @@ const _tool = {
 			reticleStyle: global.hasActiveInput ? "#BBF" : "#FFF",
 		});
 
-		const bbvp = BoundingBox.fromStartEnd(
-			viewport.canvasToView(bb.tl),
-			viewport.canvasToView(bb.br)
-		);
+		const bbvp = bb.transform(viewport.c2v);
 
 		uiCtx.save();
 
@@ -322,7 +319,7 @@ const _tool = {
 		 * @type {Point}
 		 */
 		position = {x: 0, y: 0};
-		scale = 1;
+		scale = {x: 1, y: 1};
 		rotation = 0;
 
 		/**
@@ -334,6 +331,31 @@ const _tool = {
 			this.position = position;
 		}
 
+		get matrix() {
+			const m = new DOMMatrix();
+
+			m.scaleSelf(this.scale.x, this.scale.y);
+			m.rotateSelf((this.rotation * 180) / Math.PI);
+			m.translateSelf(this.position.x, this.position.y);
+
+			return m;
+		}
+
+		/**
+		 * If the main marquee box contains a given point
+		 *
+		 * @param {number} x X coordinate of the point
+		 * @param {number} y Y coordinate of the point
+		 */
+		contains(x, y) {
+			const p = this.matrix.invertSelf().transformPoint({x, y});
+
+			return (
+				Math.abs(p.x) < this.canvas.width / 2 &&
+				Math.abs(p.y) < this.canvas.height / 2
+			);
+		}
+
 		/**
 		 * Draws the marquee selector box
 		 *
@@ -342,17 +364,16 @@ const _tool = {
 		 */
 		drawBox(context, transform = new DOMMatrix()) {
 			context.save();
-			context.setTransform(transform);
 
-			context.scale(this.scale, this.scale);
-			context.rotate((this.rotation * 180) / Math.PI);
-			context.translate(this.position.x, this.position.y);
+			const m = transform.multiply(this.matrix);
 
-			// Line Color
-			context.strokeStyle = "#FFF";
+			context.setTransform(m);
 
 			// Draw the box itself
 			context.save();
+
+			// Line Style
+			context.strokeStyle = "#FFF";
 			context.lineWidth = 2;
 			context.setLineDash([4, 2]);
 
@@ -363,10 +384,26 @@ const _tool = {
 				this.canvas.width,
 				this.canvas.height
 			);
+			context.stroke();
 
 			context.restore();
 
 			context.restore();
+
+			return () => {
+				context.save();
+
+				context.setTransform(m);
+
+				context.clearRect(
+					-this.canvas.width / 2 - 10,
+					-this.canvas.height / 2 - 10,
+					this.canvas.width + 20,
+					this.canvas.height + 20
+				);
+
+				context.restore();
+			};
 		}
 
 		/**
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 9205d6a..4a6ea0b 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -15,6 +15,7 @@ const selectTransformTool = () =>
 			mouse.listen.world.onmousemove.on(state.movecb);
 			mouse.listen.world.btn.left.onclick.on(state.clickcb);
 			mouse.listen.world.btn.left.ondragstart.on(state.dragstartcb);
+			mouse.listen.world.btn.left.ondrag.on(state.dragcb);
 			mouse.listen.world.btn.left.ondragend.on(state.dragendcb);
 
 			// Canvas right mouse handler
@@ -39,6 +40,7 @@ const selectTransformTool = () =>
 			mouse.listen.world.onmousemove.clear(state.movecb);
 			mouse.listen.world.btn.left.onclick.clear(state.clickcb);
 			mouse.listen.world.btn.left.ondragstart.clear(state.dragstartcb);
+			mouse.listen.world.btn.left.ondrag.clear(state.dragcb);
 			mouse.listen.world.btn.left.ondragend.clear(state.dragendcb);
 
 			mouse.listen.world.btn.right.onclick.clear(state.cancelcb);
@@ -124,48 +126,89 @@ const selectTransformTool = () =>
 
 				// Selection Handlers
 				const selection = _tool._draggable_selection(state);
-				state.dragstartcb = (evn) => selection.dragstartcb(evn);
-				state.dragcb = (evn) => selection.dragcb(evn);
-				state.dragendcb = (evn) => selection.dragendcb(evn);
 
 				// Mouse Move Handler
+				let eraseSelectedBox = () => null;
 				let eraseCursor = () => null;
+				let eraseSelection = () => null;
 				state.movecb = (evn) => {
 					// Get cursor positions
 					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
 
-					// Draw cursor
+					// Erase Cursor
+					eraseSelectedBox();
+					eraseSelection();
 					eraseCursor();
-					eraseCursor = _tool._cursor_draw(sx, sy);
+					imageCollection.inputElement.style.cursor = "default";
 
 					// Draw Box and Selected Image
 					if (state.selected) {
-						state.selected.drawBox(uiCtx);
+						eraseSelectedBox = state.selected.drawBox(uiCtx, viewport.c2v);
 					}
 
 					// Draw Selection
 					if (selection.exists) {
+						uiCtx.save();
 						uiCtx.setLineDash([2, 2]);
-						uiCtx.lineWidth = 1;
+						uiCtx.lineWidth = 2;
 						uiCtx.strokeStyle = "#FFF";
 
-						const vpbb = selection.bb.transform(viewport.matrix);
+						const bbvp = selection.bb.transform(viewport.c2v);
+						uiCtx.beginPath();
+						uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h);
+						uiCtx.stroke();
+
+						eraseSelection = () =>
+							uiCtx.clearRect(
+								bbvp.x - 10,
+								bbvp.y - 10,
+								bbvp.w + 20,
+								bbvp.h + 20
+							);
+
+						uiCtx.restore();
+					}
+
+					// Draw cursor
+					eraseCursor = _tool._cursor_draw(sx, sy);
+
+					// Pointer
+					if (state.selected && state.selected.contains(x, y)) {
+						imageCollection.inputElement.style.cursor = "pointer";
 					}
 				};
 
 				// Handles left mouse clicks
 				state.clickcb = (evn) => {};
 
-				// Handles left mouse drag events
+				// Handles left mouse drag start events
 				state.dragstartcb = (evn) => {
-					if (state.selected && state.selected.hasCursor()) {
-					} else {
-						state.selection;
-					}
+					selection.dragstartcb(evn);
+				};
+
+				// Handles left mouse drag events
+				state.dragcb = (evn) => {
+					selection.dragcb(evn);
 				};
 
 				// Handles left mouse drag end events
-				state.dragendcb = (evn) => {};
+				state.dragendcb = (evn) => {
+					selection.dragendcb(evn);
+
+					if (selection.exists) {
+						if (selection.bb.w !== 0 && selection.bb.h !== 0) {
+							// TODO: CHANGE THIS
+							state.selected = new _tool.MarqueeSelection(
+								uil.getVisible(selection.bb),
+								selection.bb.center
+							);
+						}
+
+						selection.deselect();
+					}
+
+					state.redraw();
+				};
 
 				// Handler for right clicks. Basically resets everything
 				state.cancelcb = (evn) => {