From 2c9eea4ce63123df4bba0e2eaa7f4af741288a2d Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sun, 8 Jan 2023 01:54:37 -0300
Subject: [PATCH 01/21] rotation working, broke scale

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html           |   4 +-
 js/config.js         |  10 ++
 js/ui/tool/select.js | 369 ++++++++++++++++++++++++++++++-------------
 3 files changed, 267 insertions(+), 116 deletions(-)

diff --git a/index.html b/index.html
index dcbf766..e084746 100644
--- a/index.html
+++ b/index.html
@@ -353,7 +353,7 @@
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
-		<script src="js/config.js?v=8da6a43" type="text/javascript"></script>
+		<script src="js/config.js?v=f903401" type="text/javascript"></script>
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
@@ -379,7 +379,7 @@
 			src="js/ui/tool/colorbrush.js?v=8acb4f6"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=ade791e"
+			src="js/ui/tool/select.js?v=3a96068"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
diff --git a/js/config.js b/js/config.js
index a6f7ba6..40b916b 100644
--- a/js/config.js
+++ b/js/config.js
@@ -8,6 +8,16 @@ const config = makeReadOnly(
 		// Scroll Tick Limit (How much must scroll to reach next tick)
 		wheelTickSize: 50,
 
+		/** Select Tool */
+		// Handle Draw Size
+		handleDrawSize: 12,
+		// Handle Draw Hover Scale
+		handleDrawHoverScale: 1.3,
+		// Handle Detect Size
+		handleDetectSize: 20,
+		// Rotate Handle Distance (from selection)
+		rotateHandleDistance: 32,
+
 		// Endpoint
 		api: makeReadOnly({path: "/sdapi/v1/"}),
 	},
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 11eb700..c35eecd 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -1,3 +1,7 @@
+/**
+ * TODO: REFACTOR THIS WHOLE THING
+ */
+
 const selectTransformTool = () =>
 	toolbar.registerTool(
 		"./res/icons/box-select.svg",
@@ -70,6 +74,7 @@ const selectTransformTool = () =>
 
 				state.original = null;
 				state.dragging = null;
+				state.rotation = 0;
 				state._selected = null;
 				Object.defineProperty(state, "selected", {
 					get: () => state._selected,
@@ -114,6 +119,9 @@ const selectTransformTool = () =>
 					if (state.dragging) state.dragging = null;
 					else state.selected = null;
 
+					state.rotation = 0;
+					state.original = null;
+
 					state.redraw();
 				};
 
@@ -148,56 +156,49 @@ const selectTransformTool = () =>
 								y <= this.y + this.h
 							);
 						},
-						handles() {
-							const _createHandle = (x, y, originOffset = null) => {
-								return {
-									x,
-									y,
-									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;
+						center() {
+							return {x: this.x + this.w / 2, y: this.y + this.h / 2};
+						},
+						createHandle(x, y, originOffset = null) {
+							return {
+								x,
+								y,
+								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);
+									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;
+									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;
+										left = (left - origin.x) * xRatio + origin.x;
+										right = (right - origin.x) * xRatio + origin.x;
 
-											this.x = left;
-											this.w = right - left;
-										}
+										this.x = left;
+										this.w = right - left;
+									}
 
-										if (Number.isFinite(yRatio)) {
-											let top = this.original.y;
-											let bottom = this.original.y + this.original.h;
+									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;
+										top = (top - origin.y) * yRatio + origin.y;
+										bottom = (bottom - origin.y) * yRatio + origin.y;
 
-											this.y = top;
-											this.h = bottom - top;
-										}
-									},
-								};
+										this.y = top;
+										this.h = bottom - top;
+									}
+								},
 							};
-
-							const size = viewport.zoom * 10;
-							return [
-								_createHandle(this.x, this.y, size),
-								_createHandle(this.x + this.w, this.y, size),
-								_createHandle(this.x, this.y + this.h, size),
-								_createHandle(this.x + this.w, this.y + this.h, size),
-							];
 						},
 					};
 				};
@@ -217,8 +218,6 @@ const selectTransformTool = () =>
 						y += snap(evn.y, 0, 64);
 					}
 
-					const vpc = viewport.canvasToView(x, y);
-
 					uiCtx.save();
 
 					// Update scale
@@ -226,6 +225,12 @@ const selectTransformTool = () =>
 						state.scaling.scaleTo(x, y, state.keepAspectRatio);
 					}
 
+					// Update rotation
+					if (state.rotating) {
+						const center = state.selected.center();
+						state.rotation = Math.atan2(evn.x - center.x, center.y - evn.y);
+					}
+
 					// Update position
 					if (state.moving) {
 						state.selected.x = Math.round(x - state.moving.offset.x);
@@ -254,16 +259,17 @@ const selectTransformTool = () =>
 						uiCtx.setLineDash([]);
 					}
 
+					// Draw selected box
 					if (state.selected) {
 						ovCtx.lineWidth = 1;
 						ovCtx.strokeStyle = "#FFF";
 
-						const bb = {
+						const bb = new BoundingBox({
 							x: state.selected.x,
 							y: state.selected.y,
 							w: state.selected.w,
 							h: state.selected.h,
-						};
+						});
 
 						const bbvp = {
 							...viewport.canvasToView(bb.x, bb.y),
@@ -271,17 +277,32 @@ const selectTransformTool = () =>
 							h: viewport.zoom * bb.h,
 						};
 
+						const scenter = state.selected.center();
+
 						// Draw Image
 						ovCtx.save();
+
 						ovCtx.filter = `opacity(${state.selectionPeekOpacity}%)`;
+
+						ovCtx.translate(scenter.x, scenter.y);
+						ovCtx.rotate(state.rotation);
+
+						const matrix = ovCtx.getTransform();
+						const imatrix = matrix.invertSelf();
+
+						const cursor = imatrix.transformPoint({
+							x: evn.x,
+							y: evn.y,
+						});
+
 						ovCtx.drawImage(
 							state.selected.image,
 							0,
 							0,
 							state.selected.image.width,
 							state.selected.image.height,
-							state.selected.x,
-							state.selected.y,
+							-state.selected.w / 2,
+							-state.selected.h / 2,
 							state.selected.w,
 							state.selected.h
 						);
@@ -289,69 +310,122 @@ const selectTransformTool = () =>
 
 						state.originalDisplayLayer.clear();
 						state.originalDisplayLayer.ctx.save();
+
+						state.originalDisplayLayer.ctx.translate(scenter.x, scenter.y);
+						state.originalDisplayLayer.ctx.rotate(state.rotation);
+
 						state.originalDisplayLayer.ctx.drawImage(
 							state.selected.image,
 							0,
 							0,
 							state.selected.image.width,
 							state.selected.image.height,
-							state.selected.x,
-							state.selected.y,
+							-state.selected.w / 2,
+							-state.selected.h / 2,
 							state.selected.w,
 							state.selected.h
 						);
 						state.originalDisplayLayer.ctx.restore();
 
+						uiCtx.save();
+						const centerx = bbvp.x + bbvp.w / 2;
+						const centery = bbvp.y + bbvp.h / 2;
+
+						uiCtx.translate(centerx, centery);
+						uiCtx.rotate(state.rotation);
+
+						const matrixvp = uiCtx.getTransform();
+						const imatrixvp = matrixvp.invertSelf();
+
+						const cursorvp = imatrixvp.transformPoint({
+							x: evn.evn.clientX,
+							y: evn.evn.clientY,
+						});
+
 						// Draw selection box
 						uiCtx.strokeStyle = "#FFF";
 						uiCtx.setLineDash([4, 2]);
-						uiCtx.strokeRect(bbvp.x, bbvp.y, bbvp.w, bbvp.h);
+						uiCtx.strokeRect(-bbvp.w / 2, -bbvp.h / 2, bbvp.w, bbvp.h);
 						uiCtx.setLineDash([]);
 
 						// Draw Scaling/Rotation Origin
 						uiCtx.beginPath();
-						uiCtx.arc(
-							bbvp.x + bbvp.w / 2,
-							bbvp.y + bbvp.h / 2,
-							5,
-							0,
-							2 * Math.PI
-						);
+						uiCtx.arc(0, 0, 5, 0, 2 * Math.PI);
 						uiCtx.stroke();
 
-						// Draw Scaling Handles
-						let cursorInHandle = false;
-						state.selected.handles().forEach((handle) => {
-							const bbvph = {
-								...viewport.canvasToView(handle.x, handle.y),
-								w: 10,
-								h: 10,
-							};
+						// Draw Rotation Handle
+						let cursorInAnyHandle = false;
+						{
+							let radius = config.handleDrawSize / 2;
 
-							bbvph.x -= 5;
-							bbvph.y -= 5;
+							const dx = cursorvp.x;
+							const dy =
+								cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
+							const dmax = config.handleDetectSize / 2;
 
-							const inhandle =
-								evn.evn.clientX > bbvph.x &&
-								evn.evn.clientX < bbvph.x + bbvph.w &&
-								evn.evn.clientY > bbvph.y &&
-								evn.evn.clientY < bbvph.y + bbvph.h;
-
-							if (inhandle) {
-								cursorInHandle = true;
-								uiCtx.strokeRect(
-									bbvph.x - 1,
-									bbvph.y - 1,
-									bbvph.w + 2,
-									bbvph.h + 2
-								);
-							} else {
-								uiCtx.strokeRect(bbvph.x, bbvph.y, bbvph.w, bbvph.h);
+							if (dx * dx + dy * dy < dmax * dmax) {
+								cursorInAnyHandle ||= true;
+								radius *= config.handleDrawHoverScale;
 							}
-						});
+
+							uiCtx.beginPath();
+							uiCtx.moveTo(0, -bbvp.h / 2);
+							uiCtx.lineTo(
+								0,
+								-bbvp.h / 2 - config.rotateHandleDistance + radius
+							);
+							uiCtx.stroke();
+
+							uiCtx.beginPath();
+							uiCtx.arc(
+								0,
+								-bbvp.h / 2 - config.rotateHandleDistance,
+								radius,
+								0,
+								Math.PI * 2
+							);
+							uiCtx.stroke();
+						}
+
+						// Draw Scaling Handles
+						const drawHandle = (hx, hy) => {
+							// Handle Draw Range
+							let hs = config.handleDrawSize;
+
+							// Handle Detection Range
+							let dhs = config.handleDetectSize;
+
+							const handleBB = new BoundingBox({
+								x: hx - dhs / 2,
+								y: hy - dhs / 2,
+								w: dhs,
+								h: dhs,
+							});
+
+							const cursorInHandle = handleBB.contains(cursorvp.x, cursorvp.y);
+
+							cursorInAnyHandle ||= cursorInHandle;
+
+							if (cursorInHandle) hs *= config.handleDrawHoverScale;
+
+							uiCtx.strokeRect(hx - hs / 2, hy - hs / 2, hs, hs);
+						};
+
+						drawHandle(-bbvp.w / 2, -bbvp.h / 2);
+						drawHandle(bbvp.w / 2, -bbvp.h / 2);
+						drawHandle(-bbvp.w / 2, bbvp.h / 2);
+						drawHandle(bbvp.w / 2, bbvp.h / 2);
+
+						uiCtx.restore();
 
 						// Change cursor
-						if (cursorInHandle || state.selected.contains(evn.x, evn.y))
+						if (
+							cursorInAnyHandle ||
+							(-bb.w / 2 < cursor.x &&
+								bb.w / 2 > cursor.x &&
+								-bb.h / 2 < cursor.y &&
+								bb.h / 2 > cursor.y)
+						)
 							imageCollection.inputElement.style.cursor = "pointer";
 					}
 
@@ -369,7 +443,8 @@ const selectTransformTool = () =>
 							state.original.x === state.selected.x &&
 							state.original.y === state.selected.y &&
 							state.original.w === state.selected.w &&
-							state.original.h === state.selected.h)
+							state.original.h === state.selected.h &&
+							state.rotation === 0)
 					) {
 						state.reset();
 						return;
@@ -386,12 +461,13 @@ const selectTransformTool = () =>
 							...state.original,
 							ctx: state.originalLayer.ctx,
 						});
+
+						// Use display layer as source
+						const {canvas, bb} = cropCanvas(state.originalDisplayLayer.canvas);
+
 						commands.runCommand("drawImage", "Image Transform Draw", {
-							image: state.selected.image,
-							x: Math.round(state.selected.x),
-							y: Math.round(state.selected.y),
-							w: Math.round(state.selected.w),
-							h: Math.round(state.selected.h),
+							image: canvas,
+							...bb,
 						});
 						state.reset(true);
 					}
@@ -408,35 +484,96 @@ const selectTransformTool = () =>
 
 					// If is selected, check if drag is in handles/body and act accordingly
 					if (state.selected) {
-						const handles = state.selected.handles();
+						// Get transformation matrices
+						const bb = {
+							x: state.selected.x,
+							y: state.selected.y,
+							w: state.selected.w,
+							h: state.selected.h,
+						};
 
-						const activeHandle = handles.find((v) => {
-							const vpc = viewport.canvasToView(v.x, v.y);
-							const tlc = viewport.viewToCanvas(vpc.x - 5, vpc.y - 5);
-							const brc = viewport.viewToCanvas(vpc.x + 5, vpc.y + 5);
-							const bb = {
-								x: tlc.x,
-								y: tlc.y,
-								w: brc.x - tlc.x,
-								h: brc.y - tlc.y,
-							};
+						const bbvp = {
+							...viewport.canvasToView(bb.x, bb.y),
+							w: viewport.zoom * bb.w,
+							h: viewport.zoom * bb.h,
+						};
+
+						const ivp = viewport.canvasToView(evn.ix, evn.iy);
+
+						// Viewport Coordinates
+						uiCtx.save();
+						const centerx = bbvp.x + bbvp.w / 2;
+						const centery = bbvp.y + bbvp.h / 2;
+
+						uiCtx.translate(centerx, centery);
+						uiCtx.rotate(state.rotation);
+
+						const matrixvp = uiCtx.getTransform();
+						const imatrixvp = matrixvp.invertSelf();
+
+						const cursorvp = imatrixvp.transformPoint(ivp);
+
+						uiCtx.restore();
+
+						// World Coordinates
+						const scenter = state.selected.center();
+
+						ovCtx.save();
+
+						ovCtx.translate(scenter.x, scenter.y);
+						ovCtx.rotate(state.rotation);
+
+						const matrix = ovCtx.getTransform();
+						const imatrix = matrix.invertSelf();
+
+						ovCtx.restore();
+
+						// Check rotation handle
+						let rotationHandle = false;
+
+						const dx = cursorvp.x;
+						const dy = cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
+						const dmax = config.handleDetectSize / 2;
+
+						if (dx * dx + dy * dy < dmax * dmax) rotationHandle = true;
+
+						// Check handles
+						let activeHandle = null;
+						const testHandle = (hx, hy, hwx, hwy) => {
+							// Handle Detection Range
+							let dhs = config.handleDetectSize;
+
+							const handleBB = new BoundingBox({
+								x: hx - dhs / 2,
+								y: hy - dhs / 2,
+								w: dhs,
+								h: dhs,
+							});
+
+							if (handleBB.contains(cursorvp.x, cursorvp.y)) {
+								activeHandle = state.selected.createHandle(hx, hy);
+							}
+						};
+
+						testHandle(-bbvp.w / 2, -bbvp.h / 2);
+						testHandle(bbvp.w / 2, -bbvp.h / 2);
+						testHandle(-bbvp.w / 2, bbvp.h / 2);
+						testHandle(bbvp.w / 2, bbvp.h / 2);
 
-							return (
-								evn.ix > bb.x &&
-								evn.ix < bb.x + bb.w &&
-								evn.iy > bb.y &&
-								evn.iy < bb.y + bb.h
-							);
-						});
 						if (activeHandle) {
 							state.scaling = activeHandle;
-							return;
-						} else if (state.selected.contains(ix, iy)) {
+						} else if (rotationHandle) {
+							state.rotating = true;
+						} else if (state.selected.contains(evn.ix, evn.iy)) {
 							state.moving = {
-								offset: {x: ix - state.selected.x, y: iy - state.selected.y},
+								snapOffset: {x: evn.ix - ix, y: evn.iy - iy},
+								offset: {
+									x: ix - state.selected.x,
+									y: iy - state.selected.y,
+								},
 							};
-							return;
 						}
+						return;
 					}
 					// If it is not, just create new selection
 					state.reset();
@@ -457,6 +594,8 @@ const selectTransformTool = () =>
 						state.selected.updateOriginal();
 						state.scaling = null;
 						// If we are moving the selection, just... stop
+					} else if (state.rotating) {
+						state.rotating = false;
 					} else if (state.moving) {
 						state.moving = null;
 						/**
@@ -482,6 +621,8 @@ const selectTransformTool = () =>
 							category: "select-display",
 						});
 
+						state.rotation = 0;
+
 						// Cut out selected portion of the image for manipulation
 						const cvs = document.createElement("canvas");
 						cvs.width = state.selected.w;

From b056f81155df189827a999542a28d597c371d4e4 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sun, 8 Jan 2023 18:21:08 -0300
Subject: [PATCH 02/21] test

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/layers.css                  |   2 +-
 index.html                      |  17 +-
 js/config.js                    |   3 +
 js/initalize/debug.populate.js  |   2 +
 js/initalize/layers.populate.js |  73 +--
 js/lib/util.js                  |  12 +
 js/ui/tool/generic.js           | 135 +++++
 js/ui/tool/select.bkp.js        | 908 ++++++++++++++++++++++++++++++++
 js/ui/tool/select.js            | 541 +------------------
 pages/configuration.html        |   2 +-
 10 files changed, 1139 insertions(+), 556 deletions(-)
 create mode 100644 js/ui/tool/select.bkp.js

diff --git a/css/layers.css b/css/layers.css
index a4f2ee7..bb9b460 100644
--- a/css/layers.css
+++ b/css/layers.css
@@ -45,7 +45,7 @@
 	right: 0;
 }
 
-#layer-overlay {
+.overlay-canvas {
 	position: fixed;
 
 	top: 0;
diff --git a/index.html b/index.html
index e084746..5244d23 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 		<link href="css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="css/index.css?v=5b8d4d6" rel="stylesheet" />
-		<link href="css/layers.css?v=b4fbf61" rel="stylesheet" />
+		<link href="css/layers.css?v=a94b43d" rel="stylesheet" />
 
 		<link href="css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 
@@ -319,7 +319,8 @@
 		<div id="layer-render" class="layer-render-target"></div>
 
 		<!-- Overlay -->
-		<canvas id="layer-overlay" class="layer-overlay"></canvas>
+		<canvas id="layer-overlay" class="overlay-canvas"></canvas>
+		<canvas id="layer-debug-overlay" class="overlay-canvas"></canvas>
 
 		<!-- Page Overlay -->
 		<div id="page-overlay-wrapper" class="page-overlay invisible">
@@ -339,7 +340,7 @@
 		<script src="js/global.js?v=3a1cde6" type="text/javascript"></script>
 
 		<!-- Base Libs -->
-		<script src="js/lib/util.js?v=7f6847c" type="text/javascript"></script>
+		<script src="js/lib/util.js?v=c7cdf59" 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>
@@ -349,11 +350,11 @@
 		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
-			src="js/initalize/layers.populate.js?v=c81f0a5"
+			src="js/initalize/layers.populate.js?v=23c4cf4"
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
-		<script src="js/config.js?v=f903401" type="text/javascript"></script>
+		<script src="js/config.js?v=664f6ee" type="text/javascript"></script>
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
@@ -368,7 +369,7 @@
 
 		<!-- Load Tools -->
 		<script
-			src="js/ui/tool/generic.js?v=2bcd36d"
+			src="js/ui/tool/generic.js?v=11c9556"
 			type="text/javascript"></script>
 
 		<script src="js/ui/tool/dream.js?v=18e3b66" type="text/javascript"></script>
@@ -379,7 +380,7 @@
 			src="js/ui/tool/colorbrush.js?v=8acb4f6"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=3a96068"
+			src="js/ui/tool/select.js?v=7db1d0c"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
@@ -394,7 +395,7 @@
 			src="js/initalize/toolbar.populate.js?v=c1ca438"
 			type="text/javascript"></script>
 		<script
-			src="js/initalize/debug.populate.js?v=64ad17f"
+			src="js/initalize/debug.populate.js?v=76f8c89"
 			type="text/javascript"></script>
 		<script
 			src="js/initalize/ui.populate.js?v=b59b288"
diff --git a/js/config.js b/js/config.js
index 40b916b..6b49e15 100644
--- a/js/config.js
+++ b/js/config.js
@@ -5,6 +5,9 @@
  */
 const config = makeReadOnly(
 	{
+		// Grid Size
+		gridSize: 64,
+
 		// Scroll Tick Limit (How much must scroll to reach next tick)
 		wheelTickSize: 50,
 
diff --git a/js/initalize/debug.populate.js b/js/initalize/debug.populate.js
index 0843bf7..4ca3f8f 100644
--- a/js/initalize/debug.populate.js
+++ b/js/initalize/debug.populate.js
@@ -31,3 +31,5 @@ mouse.listen.world.onmousemove.on((evn) => {
 		debugCtx.fill();
 	}
 });
+
+window.addEventListener("DOMContentLoaded", () => (global.debug = true));
diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js
index 66a1a4b..9efd861 100644
--- a/js/initalize/layers.populate.js
+++ b/js/initalize/layers.populate.js
@@ -65,6 +65,12 @@ uiCanvas.width = uiCanvas.clientWidth;
 uiCanvas.height = uiCanvas.clientHeight;
 const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
 
+/** @type {HTMLCanvasElement} */
+const uiDebugCanvas = document.getElementById("layer-debug-overlay"); // where mouse cursor renders
+uiDebugCanvas.width = uiDebugCanvas.clientWidth;
+uiDebugCanvas.height = uiDebugCanvas.clientHeight;
+const uiDebugCtx = uiDebugCanvas.getContext("2d", {desynchronized: true});
+
 /**
  * Here we setup canvas dynamic scaling
  */
@@ -160,54 +166,68 @@ debugLayer.hide(); // Hidden by default
  * The global viewport object (may be modularized in the future). All
  * coordinates given are of the center of the viewport
  *
- * cx and cy are the viewport's world coordinates, scaled to zoom level.
- * _x and _y are actual coordinates in the DOM space
+ * cx and cy are the viewport's world coordinates.
  *
  * The transform() function does some transforms and writes them to the
  * provided element.
  */
 const viewport = {
-	get cx() {
-		return this._x * this.zoom;
-	},
-
-	set cx(v) {
-		return (this._x = v / this.zoom);
-	},
-	_x: 0,
-	get cy() {
-		return this._y * this.zoom;
-	},
-	set cy(v) {
-		return (this._y = v / this.zoom);
-	},
-	_y: 0,
+	cx: 0,
+	cy: 0,
 	zoom: 1,
 	rotation: 0,
 	get w() {
-		return (window.innerWidth * 1) / this.zoom;
+		return window.innerWidth * 1;
 	},
 	get h() {
-		return (window.innerHeight * 1) / this.zoom;
+		return window.innerHeight * 1;
 	},
 	viewToCanvas(x, y) {
+		return this.matrix.transformPoint({x, y});
 		return {
 			x: this.cx + this.w * (x / window.innerWidth - 0.5),
 			y: this.cy + this.h * (y / window.innerHeight - 0.5),
 		};
 	},
 	canvasToView(x, y) {
+		return this.imatrix.transformPoint({x, y});
 		return {
 			x: window.innerWidth * ((x - this.cx) / this.w) + window.innerWidth / 2,
 			y: window.innerHeight * ((y - this.cy) / this.h) + window.innerHeight / 2,
 		};
 	},
+
+	/**
+	 * The transformation matrix (vp to world)
+	 *
+	 * @type {DOMMatrix}
+	 */
+	get matrix() {
+		const matrix = new DOMMatrix();
+
+		matrix.scaleSelf(1 / this.zoom);
+		matrix.translateSelf(this.cx - this.w / 2, this.cy - this.h / 2);
+
+		return matrix;
+	},
+
+	/**
+	 * The transformation matrix (world to vp)
+	 *
+	 * @type {DOMMatrix}
+	 */
+	get imatrix() {
+		return this.matrix.invertSelf();
+	},
+
 	/**
 	 * Apply transformation
 	 *
 	 * @param {HTMLElement} el Element to apply CSS transform to
 	 */
 	transform(el) {
+		el.style.transform = this.imatrix;
+		return;
 		el.style.transformOrigin = `${this.cx}px ${this.cy}px`;
 		el.style.transform = `scale(${this.zoom}) translate(${-(
 			this._x -
@@ -216,8 +236,8 @@ const viewport = {
 	},
 };
 
-viewport.cx = imageCollection.size.w / 2;
-viewport.cy = imageCollection.size.h / 2;
+//viewport.cx = imageCollection.size.w / 2;
+//viewport.cy = imageCollection.size.h / 2;
 
 let worldInit = null;
 
@@ -320,8 +340,8 @@ const cameraPaintStart = (evn) => {
 
 const cameraPaint = (evn) => {
 	if (worldInit) {
-		viewport.cx = worldInit.x + (evn.ix - evn.x) / viewport.zoom;
-		viewport.cy = worldInit.y + (evn.iy - evn.y) / viewport.zoom;
+		viewport.cx = worldInit.x + (evn.ix - evn.x);
+		viewport.cy = worldInit.y + (evn.iy - evn.y);
 
 		// Limits
 		viewport.cx = Math.max(
@@ -337,13 +357,6 @@ const cameraPaint = (evn) => {
 	}
 
 	viewport.transform(imageCollection.element);
-	if (global.debug) {
-		debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
-		debugCtx.fillStyle = "#F0F";
-		debugCtx.beginPath();
-		debugCtx.arc(viewport.cx, viewport.cy, 5, 0, Math.PI * 2);
-		debugCtx.fill();
-	}
 };
 
 const cameraPaintEnd = (evn) => {
diff --git a/js/lib/util.js b/js/lib/util.js
index 850b346..bd97fa1 100644
--- a/js/lib/util.js
+++ b/js/lib/util.js
@@ -64,6 +64,18 @@ class BoundingBox {
 			h: maxy - miny,
 		});
 	}
+
+	/**
+	 * Returns a transformed bounding box (using top-left, bottom-right points)
+	 *
+	 * @param {DOMMatrix} transform Transformation matrix to transform points
+	 */
+	transform(transform) {
+		return BoundingBox.fromStartEnd(
+			transform.transformPoint({x: this.x, y: this.y}),
+			transform.transformPoint({x: this.x + this.w, y: this.y + this.h})
+		);
+	}
 }
 
 /**
diff --git a/js/ui/tool/generic.js b/js/ui/tool/generic.js
index c9be07f..1701d90 100644
--- a/js/ui/tool/generic.js
+++ b/js/ui/tool/generic.js
@@ -174,6 +174,8 @@ const _tool = {
 
 			/**
 			 * Gets the selection bounding box
+			 *
+			 * @returns {BoundingBox}
 			 */
 			get bb() {
 				if (this._dirty_bb && this._selected) {
@@ -273,4 +275,137 @@ const _tool = {
 
 		return selection;
 	},
+
+	/**
+	 * Processes cursor position
+	 *
+	 * @param {Point} wpoint World coordinate of the cursor
+	 * @param {boolean} snapToGrid Snap to grid
+	 */
+	_process_cursor(wpoint, snapToGrid) {
+		// Get cursor positions
+		let x = wpoint.x;
+		let y = wpoint.y;
+		let sx = x;
+		let sy = y;
+
+		if (snapToGrid) {
+			sx += snap(x, 0, config.gridSize);
+			sy += snap(y, 0, config.gridSize);
+		}
+
+		const vpc = viewport.canvasToView(x, y);
+		const vpsc = viewport.canvasToView(sx, sy);
+
+		return {
+			// World Coordinates
+			x,
+			y,
+			sx,
+			sy,
+
+			// Viewport Coordinates
+			vpx: vpc.x,
+			vpy: vpc.y,
+			vpsx: vpsc.x,
+			vpsy: vpsc.y,
+		};
+	},
+
+	/**
+	 * Represents a marquee selection with an image
+	 */
+	MarqueeSelection: class {
+		/** @type {HTMLCanvasElement} */
+		canvas;
+
+		/**
+		 * @type {Point}
+		 */
+		position = {x: 0, y: 0};
+		scale = 1;
+		rotation = 0;
+
+		/**
+		 * @param {HTMLCanvasElement} canvas Selected image canvas
+		 * @param {Point} position Initial position of the selection
+		 */
+		constructor(canvas, position = {x: 0, y: 0}) {
+			this.canvas = canvas;
+			this.position = position;
+		}
+
+		/**
+		 * Draws the marquee selector box
+		 *
+		 * @param {CanvasRenderingContext2D} context A context for rendering the box to
+		 * @param {DOMMatrix} transform A transformation matrix to transform the position by
+		 */
+		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);
+
+			// Line Color
+			context.strokeStyle = "#FFF";
+
+			// Draw the box itself
+			context.save();
+			context.lineWidth = 2;
+			context.setLineDash([4, 2]);
+
+			context.beginPath();
+			context.strokeRect(
+				-this.canvas.width / 2,
+				-this.canvas.height / 2,
+				this.canvas.width,
+				this.canvas.height
+			);
+
+			context.restore();
+
+			context.restore();
+		}
+
+		/**
+		 * Draws the selected images
+		 *
+		 * @param {CanvasRenderingContext2D} context A context for rendering the box to
+		 * @param {DOMMatrix} transform A transformation matrix to transform the position by
+		 */
+		drawImage(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);
+
+			context.restore();
+		}
+	},
+
+	/**
+	 * Marquee Selection with an image
+	 */
+	_marquee_selection(state) {
+		return {
+			// Location of the origin of the selection
+			position: {x: 0, y: 0},
+			// Scale of the selection
+			scale: 1,
+			// Angle of the selection (radians)
+			rotation: 0,
+
+			/**
+			 * Draws the selection
+			 */
+			draw() {},
+		};
+	},
 };
+
+name;
diff --git a/js/ui/tool/select.bkp.js b/js/ui/tool/select.bkp.js
new file mode 100644
index 0000000..a6e0e9c
--- /dev/null
+++ b/js/ui/tool/select.bkp.js
@@ -0,0 +1,908 @@
+/**
+ * TODO: REFACTOR THIS WHOLE THING
+ */
+
+const selectTransformTool = () =>
+	toolbar.registerTool(
+		"./res/icons/box-select.svg",
+		"Select Image",
+		(state, opt) => {
+			// Draw new cursor immediately
+			ovLayer.clear();
+			state.movecb(mouse.coords.world.pos);
+
+			// Canvas left mouse handlers
+			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.ondragend.on(state.dragendcb);
+
+			// Canvas right mouse handler
+			mouse.listen.world.btn.right.onclick.on(state.cancelcb);
+
+			// Keyboard click handlers
+			keyboard.listen.onkeyclick.on(state.keyclickcb);
+			keyboard.listen.onkeydown.on(state.keydowncb);
+
+			// Layer system handlers
+			uil.onactive.on(state.uilayeractivecb);
+
+			// Registers keyboard shortcuts
+			keyboard.onShortcut({ctrl: true, key: "KeyC"}, state.ctrlccb);
+			keyboard.onShortcut({ctrl: true, key: "KeyV"}, state.ctrlvcb);
+			keyboard.onShortcut({ctrl: true, key: "KeyX"}, state.ctrlxcb);
+
+			state.selected = null;
+		},
+		(state, opt) => {
+			// Clear all those listeners and shortcuts we set up
+			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.ondragend.clear(state.dragendcb);
+
+			mouse.listen.world.btn.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");
+
+			uil.onactive.clear(state.uilayeractivecb);
+
+			// Clear any selections
+			state.reset();
+
+			// Resets cursor
+			ovLayer.clear();
+
+			// Clears overlay
+			imageCollection.inputElement.style.cursor = "auto";
+		},
+		{
+			init: (state) => {
+				state.clipboard = {};
+
+				state.snapToGrid = true;
+				state.keepAspectRatio = true;
+				state.block_res_change = true;
+				state.useClipboard = !!(
+					navigator.clipboard && navigator.clipboard.write
+				); // Use it by default if supported
+				state.selectionPeekOpacity = 40;
+
+				state.original = null;
+				state.dragging = null;
+				state.rotation = 0;
+				state._selected = null;
+				Object.defineProperty(state, "selected", {
+					get: () => state._selected,
+					set: (v) => {
+						if (v) state.ctxmenu.enableButtons();
+						else state.ctxmenu.disableButtons();
+
+						return (state._selected = v);
+					},
+				});
+				state.moving = null;
+
+				// Some things to easy request for a redraw
+				state.lastMouseTarget = null;
+				state.lastMouseMove = {x: 0, y: 0};
+
+				state.redraw = () => {
+					ovLayer.clear();
+					state.movecb(state.lastMouseMove);
+				};
+
+				state.uilayeractivecb = ({uilayer}) => {
+					if (state.originalDisplayLayer) {
+						state.originalDisplayLayer.moveAfter(uilayer.layer);
+					}
+				};
+
+				// Clears selection and make things right
+				state.reset = (erase = false) => {
+					if (state.selected && !erase)
+						state.originalLayer.ctx.drawImage(
+							state.original.image,
+							state.original.x,
+							state.original.y
+						);
+
+					if (state.originalDisplayLayer) {
+						imageCollection.deleteLayer(state.originalDisplayLayer);
+						state.originalDisplayLayer = null;
+					}
+
+					if (state.dragging) state.dragging = null;
+					else state.selected = null;
+
+					state.rotation = 0;
+					state.original = null;
+
+					state.redraw();
+				};
+
+				// Selection bounding box object. Has some witchery to deal with handles.
+				const selectionBB = (x1, y1, x2, y2) => {
+					x1 = Math.round(x1);
+					y1 = Math.round(y1);
+					x2 = Math.round(x2);
+					y2 = Math.round(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),
+						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 &&
+								x <= this.x + this.w &&
+								this.y <= y &&
+								y <= this.y + this.h
+							);
+						},
+						center() {
+							return {x: this.x + this.w / 2, y: this.y + this.h / 2};
+						},
+						createHandle(x, y, originOffset = null) {
+							return {
+								x,
+								y,
+								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;
+									}
+								},
+							};
+						},
+					};
+				};
+
+				// Mouse move handler. As always, also renders cursor
+				state.movecb = (evn) => {
+					ovLayer.clear();
+					uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
+					state.erasePrevCursor && state.erasePrevCursor();
+					imageCollection.inputElement.style.cursor = "auto";
+					state.lastMouseTarget = evn.target;
+					state.lastMouseMove = evn;
+					let x = evn.x;
+					let y = evn.y;
+					if (state.snapToGrid) {
+						x += snap(evn.x, 0, 64);
+						y += snap(evn.y, 0, 64);
+					}
+
+					uiCtx.save();
+
+					// Update scale
+					if (state.scaling) {
+						state.scaling.scaleTo(x, y, state.keepAspectRatio);
+					}
+
+					// Update rotation
+					if (state.rotating) {
+						const center = state.selected.center();
+						state.rotation = Math.atan2(evn.x - center.x, center.y - evn.y);
+					}
+
+					// Update position
+					if (state.moving) {
+						state.selected.x = Math.round(x - state.moving.offset.x);
+						state.selected.y = Math.round(y - state.moving.offset.y);
+						state.selected.updateOriginal();
+					}
+
+					// Draw dragging box
+					if (state.dragging) {
+						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);
+
+						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([]);
+					}
+
+					// Draw selected box
+					if (state.selected) {
+						state.selected.drawBox(uiCtx);
+					}
+					if (state.selected && false) {
+						ovCtx.lineWidth = 1;
+						ovCtx.strokeStyle = "#FFF";
+
+						const bb = new BoundingBox({
+							x: state.selected.x,
+							y: state.selected.y,
+							w: state.selected.w,
+							h: state.selected.h,
+						});
+
+						const bbvp = {
+							...viewport.canvasToView(bb.x, bb.y),
+							w: viewport.zoom * bb.w,
+							h: viewport.zoom * bb.h,
+						};
+
+						const scenter = state.selected.center();
+
+						// Draw Image
+						ovCtx.save();
+
+						ovCtx.filter = `opacity(${state.selectionPeekOpacity}%)`;
+
+						ovCtx.translate(scenter.x, scenter.y);
+						ovCtx.rotate(state.rotation);
+
+						const matrix = ovCtx.getTransform();
+						const imatrix = matrix.invertSelf();
+
+						const cursor = imatrix.transformPoint({
+							x: evn.x,
+							y: evn.y,
+						});
+
+						ovCtx.drawImage(
+							state.selected.image,
+							0,
+							0,
+							state.selected.image.width,
+							state.selected.image.height,
+							-state.selected.w / 2,
+							-state.selected.h / 2,
+							state.selected.w,
+							state.selected.h
+						);
+						ovCtx.restore();
+
+						state.originalDisplayLayer.clear();
+						state.originalDisplayLayer.ctx.save();
+
+						state.originalDisplayLayer.ctx.translate(scenter.x, scenter.y);
+						state.originalDisplayLayer.ctx.rotate(state.rotation);
+
+						state.originalDisplayLayer.ctx.drawImage(
+							state.selected.image,
+							0,
+							0,
+							state.selected.image.width,
+							state.selected.image.height,
+							-state.selected.w / 2,
+							-state.selected.h / 2,
+							state.selected.w,
+							state.selected.h
+						);
+						state.originalDisplayLayer.ctx.restore();
+
+						const centerx = bbvp.x + bbvp.w / 2;
+						const centery = bbvp.y + bbvp.h / 2;
+
+						uiCtx.save();
+
+						uiCtx.translate(centerx, centery);
+						uiCtx.rotate(state.rotation);
+
+						const matrixvp = uiCtx.getTransform();
+						const imatrixvp = matrixvp.invertSelf();
+
+						const cursorvp = imatrixvp.transformPoint({
+							x: evn.evn.clientX,
+							y: evn.evn.clientY,
+						});
+
+						// Draw selection box
+						uiCtx.strokeStyle = "#FFF";
+						uiCtx.setLineDash([4, 2]);
+						uiCtx.strokeRect(-bbvp.w / 2, -bbvp.h / 2, bbvp.w, bbvp.h);
+						uiCtx.setLineDash([]);
+
+						// Draw Scaling/Rotation Origin
+						uiCtx.beginPath();
+						uiCtx.arc(0, 0, 5, 0, 2 * Math.PI);
+						uiCtx.stroke();
+
+						// Draw Rotation Handle
+						let cursorInAnyHandle = false;
+						{
+							let radius = config.handleDrawSize / 2;
+
+							const dx = cursorvp.x;
+							const dy =
+								cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
+							const dmax = config.handleDetectSize / 2;
+
+							if (dx * dx + dy * dy < dmax * dmax) {
+								cursorInAnyHandle ||= true;
+								radius *= config.handleDrawHoverScale;
+							}
+
+							uiCtx.beginPath();
+							uiCtx.moveTo(0, -bbvp.h / 2);
+							uiCtx.lineTo(
+								0,
+								-bbvp.h / 2 - config.rotateHandleDistance + radius
+							);
+							uiCtx.stroke();
+
+							uiCtx.beginPath();
+							uiCtx.arc(
+								0,
+								-bbvp.h / 2 - config.rotateHandleDistance,
+								radius,
+								0,
+								Math.PI * 2
+							);
+							uiCtx.stroke();
+						}
+
+						// Draw Scaling Handles
+						const drawHandle = (hx, hy) => {
+							// Handle Draw Range
+							let hs = config.handleDrawSize;
+
+							// Handle Detection Range
+							let dhs = config.handleDetectSize;
+
+							const handleBB = new BoundingBox({
+								x: hx - dhs / 2,
+								y: hy - dhs / 2,
+								w: dhs,
+								h: dhs,
+							});
+
+							const cursorInHandle = handleBB.contains(cursorvp.x, cursorvp.y);
+
+							cursorInAnyHandle ||= cursorInHandle;
+
+							if (cursorInHandle) hs *= config.handleDrawHoverScale;
+
+							uiCtx.strokeRect(hx - hs / 2, hy - hs / 2, hs, hs);
+						};
+
+						drawHandle(-bbvp.w / 2, -bbvp.h / 2);
+						drawHandle(bbvp.w / 2, -bbvp.h / 2);
+						drawHandle(-bbvp.w / 2, bbvp.h / 2);
+						drawHandle(bbvp.w / 2, bbvp.h / 2);
+
+						uiCtx.restore();
+
+						// Change cursor
+						if (
+							cursorInAnyHandle ||
+							(-bb.w / 2 < cursor.x &&
+								bb.w / 2 > cursor.x &&
+								-bb.h / 2 < cursor.y &&
+								bb.h / 2 > cursor.y)
+						)
+							imageCollection.inputElement.style.cursor = "pointer";
+					}
+
+					// Draw current cursor location
+					state.erasePrevCursor = _tool._cursor_draw(x, y);
+
+					uiCtx.restore();
+				};
+
+				// Handles left mouse clicks
+				state.clickcb = (evn) => {
+					if (
+						!state.original ||
+						(state.originalLayer === uil.layer &&
+							state.original.x === state.selected.x &&
+							state.original.y === state.selected.y &&
+							state.original.w === state.selected.w &&
+							state.original.h === state.selected.h &&
+							state.rotation === 0)
+					) {
+						state.reset();
+						return;
+					}
+
+					// If something is selected, commit changes to the canvas
+					if (state.selected) {
+						state.originalLayer.ctx.drawImage(
+							state.selected.image,
+							state.original.x,
+							state.original.y
+						);
+						commands.runCommand("eraseImage", "Image Transform Erase", {
+							...state.original,
+							ctx: state.originalLayer.ctx,
+						});
+
+						// Use display layer as source
+						const {canvas, bb} = cropCanvas(state.originalDisplayLayer.canvas);
+
+						commands.runCommand("drawImage", "Image Transform Draw", {
+							image: canvas,
+							...bb,
+						});
+						state.reset(true);
+					}
+				};
+
+				// Handles left mouse drag events
+				state.dragstartcb = (evn) => {
+					let ix = evn.ix;
+					let iy = evn.iy;
+					if (state.snapToGrid) {
+						ix += snap(evn.ix, 0, 64);
+						iy += snap(evn.iy, 0, 64);
+					}
+
+					// If is selected, check if drag is in handles/body and act accordingly
+					if (state.selected) {
+						// Get transformation matrices
+						const bb = {
+							x: state.selected.x,
+							y: state.selected.y,
+							w: state.selected.w,
+							h: state.selected.h,
+						};
+
+						const bbvp = {
+							...viewport.canvasToView(bb.x, bb.y),
+							w: viewport.zoom * bb.w,
+							h: viewport.zoom * bb.h,
+						};
+
+						const ivp = viewport.canvasToView(evn.ix, evn.iy);
+
+						// Viewport Coordinates
+						const centerx = bbvp.x + bbvp.w / 2;
+						const centery = bbvp.y + bbvp.h / 2;
+
+						const matrixvp = new DOMMatrix();
+						matrixvp.translateSelf(centerx, centery);
+						matrixvp.rotateSelf((state.rotation * 180) / Math.PI);
+
+						const imatrixvp = matrixvp.inverse();
+						const cursorvp = imatrixvp.transformPoint(ivp);
+
+						// Check rotation handle
+						let rotationHandle = false;
+
+						const dx = cursorvp.x;
+						const dy = cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
+						const dmax = config.handleDetectSize / 2;
+
+						if (dx * dx + dy * dy < dmax * dmax) rotationHandle = true;
+
+						// Check handles
+						let activeHandle = null;
+						const testHandle = (hx, hy, hwx, hwy) => {
+							// Handle Detection Range
+							let dhs = config.handleDetectSize;
+
+							const handleBB = new BoundingBox({
+								x: hx - dhs / 2,
+								y: hy - dhs / 2,
+								w: dhs,
+								h: dhs,
+							});
+
+							if (handleBB.contains(cursorvp.x, cursorvp.y)) {
+								activeHandle = state.selected.createHandle(hx, hy);
+							}
+						};
+
+						testHandle(-bbvp.w / 2, -bbvp.h / 2);
+						testHandle(bbvp.w / 2, -bbvp.h / 2);
+						testHandle(-bbvp.w / 2, bbvp.h / 2);
+						testHandle(bbvp.w / 2, bbvp.h / 2);
+
+						if (activeHandle) {
+							state.scaling = activeHandle;
+						} else if (rotationHandle) {
+							state.rotating = true;
+						} else if (state.selected.contains(evn.ix, evn.iy)) {
+							state.moving = {
+								snapOffset: {x: evn.ix - ix, y: evn.iy - iy},
+								offset: {
+									x: ix - state.selected.x,
+									y: iy - state.selected.y,
+								},
+							};
+						}
+						return;
+					}
+					// If it is not, just create new selection
+					state.reset();
+					state.dragging = {ix, iy};
+				};
+
+				// Handles left mouse drag end events
+				state.dragendcb = (evn) => {
+					let x = evn.x;
+					let y = evn.y;
+					if (state.snapToGrid) {
+						x += snap(evn.x, 0, 64);
+						y += snap(evn.y, 0, 64);
+					}
+
+					// If we are scaling, stop scaling and do some handler magic
+					if (state.scaling) {
+						state.selected.updateOriginal();
+						state.scaling = null;
+						// If we are moving the selection, just... stop
+					} else if (state.rotating) {
+						state.rotating = false;
+					} else if (state.moving) {
+						state.moving = null;
+						/**
+						 * If we are dragging, create a cutout selection area and save to an auxiliar image
+						 * We will be rendering the image to the overlay, so it will not be noticeable
+						 */
+					} 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
+						);
+						state.originalLayer = uil.layer;
+						state.originalDisplayLayer = imageCollection.registerLayer(null, {
+							after: uil.layer,
+							category: "select-display",
+						});
+
+						state.rotation = 0;
+
+						// 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(
+							uil.canvas,
+							state.selected.x,
+							state.selected.y,
+							state.selected.w,
+							state.selected.h,
+							0,
+							0,
+							state.selected.w,
+							state.selected.h
+						);
+
+						uil.ctx.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;
+
+						state.selected = new _tool.MarqueeSelection(cvs);
+					}
+					state.redraw();
+				};
+
+				// Handler for right clicks. Basically resets everything
+				state.cancelcb = (evn) => {
+					state.reset();
+				};
+
+				// Keyboard callbacks (For now, they just handle the "delete" key)
+				state.keydowncb = (evn) => {};
+
+				state.keyclickcb = (evn) => {
+					switch (evn.code) {
+						case "Delete":
+							// Deletes selected area
+							state.selected &&
+								commands.runCommand("eraseImage", "Erase Area", state.selected);
+							state.selected = null;
+							state.redraw();
+					}
+				};
+
+				// Register Ctrl-C/V Shortcut
+
+				// Handles copying
+				state.ctrlccb = (evn, cut = false) => {
+					// We create a new canvas to store the data
+					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(
+						state.selected.image,
+						0,
+						0,
+						state.selected.image.width,
+						state.selected.image.height,
+						0,
+						0,
+						state.selected.w,
+						state.selected.h
+					);
+
+					// If cutting, we reverse the selection and erase the selection area
+					if (cut) {
+						const aux = state.original;
+						state.reset();
+
+						commands.runCommand("eraseImage", "Cut Image", aux);
+					}
+
+					// Because firefox needs manual activation of the feature
+					if (state.useClipboard) {
+						// Send to clipboard
+						state.clipboard.copy.toBlob((blob) => {
+							const item = new ClipboardItem({"image/png": blob});
+							navigator.clipboard &&
+								navigator.clipboard.write([item]).catch((e) => {
+									console.warn("Error sending to clipboard");
+									console.warn(e);
+								});
+						});
+					}
+				};
+
+				// Handles pasting
+				state.ctrlvcb = (evn) => {
+					if (state.useClipboard) {
+						// If we use the clipboard, do some proccessing of clipboard data (ugly but kind of minimum required)
+						navigator.clipboard &&
+							navigator.clipboard.read().then((items) => {
+								for (const item of items) {
+									for (const type of item.types) {
+										if (type.startsWith("image/")) {
+											item.getType(type).then(async (blob) => {
+												// Converts blob to image
+												const url = window.URL || window.webkitURL;
+												const image = document.createElement("img");
+												image.src = url.createObjectURL(blob);
+												await image.decode();
+												tools.stamp.enable({
+													image,
+													back: tools.selecttransform.enable,
+												});
+											});
+										}
+									}
+								}
+							});
+					} else if (state.clipboard.copy) {
+						// Use internal clipboard
+						const image = document.createElement("img");
+						image.src = state.clipboard.copy.toDataURL();
+
+						// Send to stamp, as clipboard temporary data
+						tools.stamp.enable({
+							image,
+							back: tools.selecttransform.enable,
+						});
+					}
+				};
+
+				// Cut shortcut. Basically, send to copy handler
+				state.ctrlxcb = (evn) => {
+					state.ctrlccb(evn, true);
+				};
+			},
+			populateContextMenu: (menu, state) => {
+				if (!state.ctxmenu) {
+					state.ctxmenu = {};
+
+					// Snap To Grid Checkbox
+					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
+						state,
+						"snapToGrid",
+						"Snap To Grid",
+						"icon-grid"
+					).checkbox;
+
+					// Keep Aspect Ratio
+					state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox(
+						state,
+						"keepAspectRatio",
+						"Keep Aspect Ratio",
+						"icon-maximize"
+					).checkbox;
+
+					// Use Clipboard
+					const clipboardCheckbox = _toolbar_input.checkbox(
+						state,
+						"useClipboard",
+						"Use clipboard",
+						"icon-clipboard-list"
+					);
+					state.ctxmenu.useClipboardLabel = clipboardCheckbox.checkbox;
+					if (!(navigator.clipboard && navigator.clipboard.write))
+						clipboardCheckbox.checkbox.disabled = true; // Disable if not available
+
+					// Selection Peek Opacity
+					state.ctxmenu.selectionPeekOpacitySlider = _toolbar_input.slider(
+						state,
+						"selectionPeekOpacity",
+						"Peek Opacity",
+						{
+							min: 0,
+							max: 100,
+							step: 10,
+							textStep: 1,
+							cb: () => {
+								state.redraw();
+							},
+						}
+					).slider;
+
+					// Some useful actions to do with selection
+					const actionArray = document.createElement("div");
+					actionArray.classList.add("button-array");
+
+					// Save button
+					const saveSelectionButton = document.createElement("button");
+					saveSelectionButton.classList.add("button", "tool");
+					saveSelectionButton.textContent = "Save Sel.";
+					saveSelectionButton.title = "Saves Selection";
+					saveSelectionButton.onclick = () => {
+						downloadCanvas({
+							cropToContent: false,
+							canvas: state.selected.image,
+						});
+					};
+
+					// Save as Resource Button
+					const createResourceButton = document.createElement("button");
+					createResourceButton.classList.add("button", "tool");
+					createResourceButton.textContent = "Resource";
+					createResourceButton.title = "Saves Selection as a Resource";
+					createResourceButton.onclick = () => {
+						const image = document.createElement("img");
+						image.src = state.selected.image.toDataURL();
+						image.onload = () => {
+							tools.stamp.state.addResource("Selection Resource", image);
+							tools.stamp.enable();
+						};
+					};
+
+					actionArray.appendChild(saveSelectionButton);
+					actionArray.appendChild(createResourceButton);
+
+					// Some useful actions to do with selection
+					const visibleActionArray = document.createElement("div");
+					visibleActionArray.classList.add("button-array");
+
+					// Save Visible button
+					const saveVisibleSelectionButton = document.createElement("button");
+					saveVisibleSelectionButton.classList.add("button", "tool");
+					saveVisibleSelectionButton.textContent = "Save Vis.";
+					saveVisibleSelectionButton.title = "Saves Visible Selection";
+					saveVisibleSelectionButton.onclick = () => {
+						const canvas = uil.getVisible(state.selected, {
+							categories: ["image", "user", "select-display"],
+						});
+						downloadCanvas({
+							cropToContent: false,
+							canvas,
+						});
+					};
+
+					// Save Visible as Resource Button
+					const createVisibleResourceButton = document.createElement("button");
+					createVisibleResourceButton.classList.add("button", "tool");
+					createVisibleResourceButton.textContent = "Vis. to Res.";
+					createVisibleResourceButton.title =
+						"Saves Visible Selection as a Resource";
+					createVisibleResourceButton.onclick = () => {
+						const canvas = uil.getVisible(state.selected, {
+							categories: ["image", "user", "select-display"],
+						});
+						const image = document.createElement("img");
+						image.src = canvas.toDataURL();
+						image.onload = () => {
+							tools.stamp.state.addResource("Selection Resource", image);
+							tools.stamp.enable();
+						};
+					};
+
+					visibleActionArray.appendChild(saveVisibleSelectionButton);
+					visibleActionArray.appendChild(createVisibleResourceButton);
+
+					// Disable buttons (if nothing is selected)
+					state.ctxmenu.disableButtons = () => {
+						saveSelectionButton.disabled = true;
+						createResourceButton.disabled = true;
+						saveVisibleSelectionButton.disabled = true;
+						createVisibleResourceButton.disabled = true;
+					};
+
+					// Disable buttons (if something is selected)
+					state.ctxmenu.enableButtons = () => {
+						saveSelectionButton.disabled = "";
+						createResourceButton.disabled = "";
+						saveVisibleSelectionButton.disabled = "";
+						createVisibleResourceButton.disabled = "";
+					};
+					state.ctxmenu.actionArray = actionArray;
+					state.ctxmenu.visibleActionArray = visibleActionArray;
+				}
+				const array = document.createElement("div");
+				array.classList.add("checkbox-array");
+				array.appendChild(state.ctxmenu.snapToGridLabel);
+				array.appendChild(state.ctxmenu.keepAspectRatioLabel);
+				array.appendChild(state.ctxmenu.useClipboardLabel);
+				menu.appendChild(array);
+				menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);
+				menu.appendChild(state.ctxmenu.actionArray);
+				menu.appendChild(state.ctxmenu.visibleActionArray);
+			},
+			shortcut: "S",
+		}
+	);
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index c35eecd..9205d6a 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -73,8 +73,6 @@ const selectTransformTool = () =>
 				state.selectionPeekOpacity = 40;
 
 				state.original = null;
-				state.dragging = null;
-				state.rotation = 0;
 				state._selected = null;
 				Object.defineProperty(state, "selected", {
 					get: () => state._selected,
@@ -85,7 +83,6 @@ const selectTransformTool = () =>
 						return (state._selected = v);
 					},
 				});
-				state.moving = null;
 
 				// Some things to easy request for a redraw
 				state.lastMouseTarget = null;
@@ -125,538 +122,50 @@ const selectTransformTool = () =>
 					state.redraw();
 				};
 
-				// Selection bounding box object. Has some witchery to deal with handles.
-				const selectionBB = (x1, y1, x2, y2) => {
-					x1 = Math.round(x1);
-					y1 = Math.round(y1);
-					x2 = Math.round(x2);
-					y2 = Math.round(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),
-						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 &&
-								x <= this.x + this.w &&
-								this.y <= y &&
-								y <= this.y + this.h
-							);
-						},
-						center() {
-							return {x: this.x + this.w / 2, y: this.y + this.h / 2};
-						},
-						createHandle(x, y, originOffset = null) {
-							return {
-								x,
-								y,
-								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;
+				// 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);
 
-									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;
-									}
-								},
-							};
-						},
-					};
-				};
-
-				// Mouse move handler. As always, also renders cursor
+				// Mouse Move Handler
+				let eraseCursor = () => null;
 				state.movecb = (evn) => {
-					ovLayer.clear();
-					uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
-					state.erasePrevCursor && state.erasePrevCursor();
-					imageCollection.inputElement.style.cursor = "auto";
-					state.lastMouseTarget = evn.target;
-					state.lastMouseMove = evn;
-					let x = evn.x;
-					let y = evn.y;
-					if (state.snapToGrid) {
-						x += snap(evn.x, 0, 64);
-						y += snap(evn.y, 0, 64);
+					// Get cursor positions
+					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
+
+					// Draw cursor
+					eraseCursor();
+					eraseCursor = _tool._cursor_draw(sx, sy);
+
+					// Draw Box and Selected Image
+					if (state.selected) {
+						state.selected.drawBox(uiCtx);
 					}
 
-					uiCtx.save();
-
-					// Update scale
-					if (state.scaling) {
-						state.scaling.scaleTo(x, y, state.keepAspectRatio);
-					}
-
-					// Update rotation
-					if (state.rotating) {
-						const center = state.selected.center();
-						state.rotation = Math.atan2(evn.x - center.x, center.y - evn.y);
-					}
-
-					// Update position
-					if (state.moving) {
-						state.selected.x = Math.round(x - state.moving.offset.x);
-						state.selected.y = Math.round(y - state.moving.offset.y);
-						state.selected.updateOriginal();
-					}
-
-					// Draw dragging box
-					if (state.dragging) {
+					// Draw Selection
+					if (selection.exists) {
 						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);
-
-						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([]);
+						const vpbb = selection.bb.transform(viewport.matrix);
 					}
-
-					// Draw selected box
-					if (state.selected) {
-						ovCtx.lineWidth = 1;
-						ovCtx.strokeStyle = "#FFF";
-
-						const bb = new BoundingBox({
-							x: state.selected.x,
-							y: state.selected.y,
-							w: state.selected.w,
-							h: state.selected.h,
-						});
-
-						const bbvp = {
-							...viewport.canvasToView(bb.x, bb.y),
-							w: viewport.zoom * bb.w,
-							h: viewport.zoom * bb.h,
-						};
-
-						const scenter = state.selected.center();
-
-						// Draw Image
-						ovCtx.save();
-
-						ovCtx.filter = `opacity(${state.selectionPeekOpacity}%)`;
-
-						ovCtx.translate(scenter.x, scenter.y);
-						ovCtx.rotate(state.rotation);
-
-						const matrix = ovCtx.getTransform();
-						const imatrix = matrix.invertSelf();
-
-						const cursor = imatrix.transformPoint({
-							x: evn.x,
-							y: evn.y,
-						});
-
-						ovCtx.drawImage(
-							state.selected.image,
-							0,
-							0,
-							state.selected.image.width,
-							state.selected.image.height,
-							-state.selected.w / 2,
-							-state.selected.h / 2,
-							state.selected.w,
-							state.selected.h
-						);
-						ovCtx.restore();
-
-						state.originalDisplayLayer.clear();
-						state.originalDisplayLayer.ctx.save();
-
-						state.originalDisplayLayer.ctx.translate(scenter.x, scenter.y);
-						state.originalDisplayLayer.ctx.rotate(state.rotation);
-
-						state.originalDisplayLayer.ctx.drawImage(
-							state.selected.image,
-							0,
-							0,
-							state.selected.image.width,
-							state.selected.image.height,
-							-state.selected.w / 2,
-							-state.selected.h / 2,
-							state.selected.w,
-							state.selected.h
-						);
-						state.originalDisplayLayer.ctx.restore();
-
-						uiCtx.save();
-						const centerx = bbvp.x + bbvp.w / 2;
-						const centery = bbvp.y + bbvp.h / 2;
-
-						uiCtx.translate(centerx, centery);
-						uiCtx.rotate(state.rotation);
-
-						const matrixvp = uiCtx.getTransform();
-						const imatrixvp = matrixvp.invertSelf();
-
-						const cursorvp = imatrixvp.transformPoint({
-							x: evn.evn.clientX,
-							y: evn.evn.clientY,
-						});
-
-						// Draw selection box
-						uiCtx.strokeStyle = "#FFF";
-						uiCtx.setLineDash([4, 2]);
-						uiCtx.strokeRect(-bbvp.w / 2, -bbvp.h / 2, bbvp.w, bbvp.h);
-						uiCtx.setLineDash([]);
-
-						// Draw Scaling/Rotation Origin
-						uiCtx.beginPath();
-						uiCtx.arc(0, 0, 5, 0, 2 * Math.PI);
-						uiCtx.stroke();
-
-						// Draw Rotation Handle
-						let cursorInAnyHandle = false;
-						{
-							let radius = config.handleDrawSize / 2;
-
-							const dx = cursorvp.x;
-							const dy =
-								cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
-							const dmax = config.handleDetectSize / 2;
-
-							if (dx * dx + dy * dy < dmax * dmax) {
-								cursorInAnyHandle ||= true;
-								radius *= config.handleDrawHoverScale;
-							}
-
-							uiCtx.beginPath();
-							uiCtx.moveTo(0, -bbvp.h / 2);
-							uiCtx.lineTo(
-								0,
-								-bbvp.h / 2 - config.rotateHandleDistance + radius
-							);
-							uiCtx.stroke();
-
-							uiCtx.beginPath();
-							uiCtx.arc(
-								0,
-								-bbvp.h / 2 - config.rotateHandleDistance,
-								radius,
-								0,
-								Math.PI * 2
-							);
-							uiCtx.stroke();
-						}
-
-						// Draw Scaling Handles
-						const drawHandle = (hx, hy) => {
-							// Handle Draw Range
-							let hs = config.handleDrawSize;
-
-							// Handle Detection Range
-							let dhs = config.handleDetectSize;
-
-							const handleBB = new BoundingBox({
-								x: hx - dhs / 2,
-								y: hy - dhs / 2,
-								w: dhs,
-								h: dhs,
-							});
-
-							const cursorInHandle = handleBB.contains(cursorvp.x, cursorvp.y);
-
-							cursorInAnyHandle ||= cursorInHandle;
-
-							if (cursorInHandle) hs *= config.handleDrawHoverScale;
-
-							uiCtx.strokeRect(hx - hs / 2, hy - hs / 2, hs, hs);
-						};
-
-						drawHandle(-bbvp.w / 2, -bbvp.h / 2);
-						drawHandle(bbvp.w / 2, -bbvp.h / 2);
-						drawHandle(-bbvp.w / 2, bbvp.h / 2);
-						drawHandle(bbvp.w / 2, bbvp.h / 2);
-
-						uiCtx.restore();
-
-						// Change cursor
-						if (
-							cursorInAnyHandle ||
-							(-bb.w / 2 < cursor.x &&
-								bb.w / 2 > cursor.x &&
-								-bb.h / 2 < cursor.y &&
-								bb.h / 2 > cursor.y)
-						)
-							imageCollection.inputElement.style.cursor = "pointer";
-					}
-
-					// Draw current cursor location
-					state.erasePrevCursor = _tool._cursor_draw(x, y);
-
-					uiCtx.restore();
 				};
 
 				// Handles left mouse clicks
-				state.clickcb = (evn) => {
-					if (
-						!state.original ||
-						(state.originalLayer === uil.layer &&
-							state.original.x === state.selected.x &&
-							state.original.y === state.selected.y &&
-							state.original.w === state.selected.w &&
-							state.original.h === state.selected.h &&
-							state.rotation === 0)
-					) {
-						state.reset();
-						return;
-					}
-
-					// If something is selected, commit changes to the canvas
-					if (state.selected) {
-						state.originalLayer.ctx.drawImage(
-							state.selected.image,
-							state.original.x,
-							state.original.y
-						);
-						commands.runCommand("eraseImage", "Image Transform Erase", {
-							...state.original,
-							ctx: state.originalLayer.ctx,
-						});
-
-						// Use display layer as source
-						const {canvas, bb} = cropCanvas(state.originalDisplayLayer.canvas);
-
-						commands.runCommand("drawImage", "Image Transform Draw", {
-							image: canvas,
-							...bb,
-						});
-						state.reset(true);
-					}
-				};
+				state.clickcb = (evn) => {};
 
 				// Handles left mouse drag events
 				state.dragstartcb = (evn) => {
-					let ix = evn.ix;
-					let iy = evn.iy;
-					if (state.snapToGrid) {
-						ix += snap(evn.ix, 0, 64);
-						iy += snap(evn.iy, 0, 64);
+					if (state.selected && state.selected.hasCursor()) {
+					} else {
+						state.selection;
 					}
-
-					// If is selected, check if drag is in handles/body and act accordingly
-					if (state.selected) {
-						// Get transformation matrices
-						const bb = {
-							x: state.selected.x,
-							y: state.selected.y,
-							w: state.selected.w,
-							h: state.selected.h,
-						};
-
-						const bbvp = {
-							...viewport.canvasToView(bb.x, bb.y),
-							w: viewport.zoom * bb.w,
-							h: viewport.zoom * bb.h,
-						};
-
-						const ivp = viewport.canvasToView(evn.ix, evn.iy);
-
-						// Viewport Coordinates
-						uiCtx.save();
-						const centerx = bbvp.x + bbvp.w / 2;
-						const centery = bbvp.y + bbvp.h / 2;
-
-						uiCtx.translate(centerx, centery);
-						uiCtx.rotate(state.rotation);
-
-						const matrixvp = uiCtx.getTransform();
-						const imatrixvp = matrixvp.invertSelf();
-
-						const cursorvp = imatrixvp.transformPoint(ivp);
-
-						uiCtx.restore();
-
-						// World Coordinates
-						const scenter = state.selected.center();
-
-						ovCtx.save();
-
-						ovCtx.translate(scenter.x, scenter.y);
-						ovCtx.rotate(state.rotation);
-
-						const matrix = ovCtx.getTransform();
-						const imatrix = matrix.invertSelf();
-
-						ovCtx.restore();
-
-						// Check rotation handle
-						let rotationHandle = false;
-
-						const dx = cursorvp.x;
-						const dy = cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
-						const dmax = config.handleDetectSize / 2;
-
-						if (dx * dx + dy * dy < dmax * dmax) rotationHandle = true;
-
-						// Check handles
-						let activeHandle = null;
-						const testHandle = (hx, hy, hwx, hwy) => {
-							// Handle Detection Range
-							let dhs = config.handleDetectSize;
-
-							const handleBB = new BoundingBox({
-								x: hx - dhs / 2,
-								y: hy - dhs / 2,
-								w: dhs,
-								h: dhs,
-							});
-
-							if (handleBB.contains(cursorvp.x, cursorvp.y)) {
-								activeHandle = state.selected.createHandle(hx, hy);
-							}
-						};
-
-						testHandle(-bbvp.w / 2, -bbvp.h / 2);
-						testHandle(bbvp.w / 2, -bbvp.h / 2);
-						testHandle(-bbvp.w / 2, bbvp.h / 2);
-						testHandle(bbvp.w / 2, bbvp.h / 2);
-
-						if (activeHandle) {
-							state.scaling = activeHandle;
-						} else if (rotationHandle) {
-							state.rotating = true;
-						} else if (state.selected.contains(evn.ix, evn.iy)) {
-							state.moving = {
-								snapOffset: {x: evn.ix - ix, y: evn.iy - iy},
-								offset: {
-									x: ix - state.selected.x,
-									y: iy - state.selected.y,
-								},
-							};
-						}
-						return;
-					}
-					// If it is not, just create new selection
-					state.reset();
-					state.dragging = {ix, iy};
 				};
 
 				// Handles left mouse drag end events
-				state.dragendcb = (evn) => {
-					let x = evn.x;
-					let y = evn.y;
-					if (state.snapToGrid) {
-						x += snap(evn.x, 0, 64);
-						y += snap(evn.y, 0, 64);
-					}
-
-					// If we are scaling, stop scaling and do some handler magic
-					if (state.scaling) {
-						state.selected.updateOriginal();
-						state.scaling = null;
-						// If we are moving the selection, just... stop
-					} else if (state.rotating) {
-						state.rotating = false;
-					} else if (state.moving) {
-						state.moving = null;
-						/**
-						 * If we are dragging, create a cutout selection area and save to an auxiliar image
-						 * We will be rendering the image to the overlay, so it will not be noticeable
-						 */
-					} 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
-						);
-						state.originalLayer = uil.layer;
-						state.originalDisplayLayer = imageCollection.registerLayer(null, {
-							after: uil.layer,
-							category: "select-display",
-						});
-
-						state.rotation = 0;
-
-						// 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(
-							uil.canvas,
-							state.selected.x,
-							state.selected.y,
-							state.selected.w,
-							state.selected.h,
-							0,
-							0,
-							state.selected.w,
-							state.selected.h
-						);
-
-						uil.ctx.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;
-					}
-					state.redraw();
-				};
+				state.dragendcb = (evn) => {};
 
 				// Handler for right clicks. Basically resets everything
 				state.cancelcb = (evn) => {
diff --git a/pages/configuration.html b/pages/configuration.html
index ac40172..e44756c 100644
--- a/pages/configuration.html
+++ b/pages/configuration.html
@@ -8,7 +8,7 @@
 		<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" />
-		<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
+		<link href="../css/layers.css?v=a94b43d" rel="stylesheet" />
 
 		<link href="../css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 

From 857cb29c121eb7a556ed2f58f783e02856a00c07 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Tue, 10 Jan 2023 01:02:19 -0300
Subject: [PATCH 03/21] migrates vp to DOMMatrix implementation

breaks select, but it was broken anyway.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/layers.css                  |   1 +
 index.html                      |  17 +++---
 js/initalize/layers.populate.js | 105 ++++++++++++++++++--------------
 js/lib/util.js                  |  10 +++
 js/ui/tool/colorbrush.js        |   4 +-
 js/ui/tool/dream.js             |   9 ++-
 js/ui/tool/generic.js           |   9 ++-
 pages/configuration.html        |   2 +-
 8 files changed, 89 insertions(+), 68 deletions(-)

diff --git a/css/layers.css b/css/layers.css
index a4f2ee7..6b616f9 100644
--- a/css/layers.css
+++ b/css/layers.css
@@ -25,6 +25,7 @@
 
 .layer-render-target .collection {
 	position: absolute;
+	transform-origin: 0px 0px;
 }
 
 .layer-render-target .collection > .collection-input-overlay {
diff --git a/index.html b/index.html
index 2494d65..929997e 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
 		<link href="css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="css/index.css?v=5b8d4d6" rel="stylesheet" />
-		<link href="css/layers.css?v=b4fbf61" rel="stylesheet" />
+		<link href="css/layers.css?v=604f140" rel="stylesheet" />
 
 		<link href="css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 
@@ -49,6 +49,7 @@
 						</div>
 					</div>
 				</label>
+
 				<!-- Prompts section -->
 				<button type="button" class="collapsible">Prompts</button>
 				<div class="content prompt">
@@ -331,15 +332,15 @@
 				<div class="ui separator"></div>
 				<iframe
 					id="page-overlay"
-					src="pages/configuration.html?v=3d710ce"></iframe>
+					src="pages/configuration.html?v=7fca00b"></iframe>
 			</div>
 		</div>
 
 		<!-- Basics -->
-		<script src="js/global.js?v=3a1cde6" type="text/javascript"></script>
+		<script src="js/global.js?v=5ee46bd" type="text/javascript"></script>
 
 		<!-- Base Libs -->
-		<script src="js/lib/util.js?v=7f6847c" type="text/javascript"></script>
+		<script src="js/lib/util.js?v=d0a24f7" 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>
@@ -349,7 +350,7 @@
 		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
-			src="js/initalize/layers.populate.js?v=c81f0a5"
+			src="js/initalize/layers.populate.js?v=938a1b2"
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
@@ -368,15 +369,15 @@
 
 		<!-- Load Tools -->
 		<script
-			src="js/ui/tool/generic.js?v=2bcd36d"
+			src="js/ui/tool/generic.js?v=d605457"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=a2932df" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=76bc565" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/colorbrush.js?v=8acb4f6"
+			src="js/ui/tool/colorbrush.js?v=3f8c01a"
 			type="text/javascript"></script>
 		<script
 			src="js/ui/tool/select.js?v=ade791e"
diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js
index 66a1a4b..dd88b1c 100644
--- a/js/initalize/layers.populate.js
+++ b/js/initalize/layers.populate.js
@@ -160,61 +160,72 @@ debugLayer.hide(); // Hidden by default
  * The global viewport object (may be modularized in the future). All
  * coordinates given are of the center of the viewport
  *
- * cx and cy are the viewport's world coordinates, scaled to zoom level.
- * _x and _y are actual coordinates in the DOM space
+ * cx and cy are the viewport's world coordinates.
  *
  * The transform() function does some transforms and writes them to the
  * provided element.
  */
-const viewport = {
-	get cx() {
-		return this._x * this.zoom;
-	},
+class Viewport {
+	cx = 0;
+	cy = 0;
 
-	set cx(v) {
-		return (this._x = v / this.zoom);
-	},
-	_x: 0,
-	get cy() {
-		return this._y * this.zoom;
-	},
-	set cy(v) {
-		return (this._y = v / this.zoom);
-	},
-	_y: 0,
-	zoom: 1,
-	rotation: 0,
+	zoom = 1;
+
+	/**
+	 * Gets viewport width in canvas coordinates
+	 */
 	get w() {
-		return (window.innerWidth * 1) / this.zoom;
-	},
+		return window.innerWidth * this.zoom;
+	}
+
+	/**
+	 * Gets viewport height in canvas coordinates
+	 */
 	get h() {
-		return (window.innerHeight * 1) / this.zoom;
-	},
+		return window.innerHeight * this.zoom;
+	}
+
+	constructor(x, y) {
+		this.x = x;
+		this.y = y;
+	}
+
+	get v2c() {
+		const m = new DOMMatrix();
+
+		m.translateSelf(-this.w / 2, -this.h / 2);
+		m.translateSelf(this.cx, this.cy);
+		m.scaleSelf(this.zoom);
+
+		return m;
+	}
+
+	get c2v() {
+		return this.v2c.invertSelf();
+	}
+
 	viewToCanvas(x, y) {
-		return {
-			x: this.cx + this.w * (x / window.innerWidth - 0.5),
-			y: this.cy + this.h * (y / window.innerHeight - 0.5),
-		};
-	},
+		if (x.x !== undefined) return this.v2c.transformPoint(x);
+		return this.v2c.transformPoint({x, y});
+	}
+
 	canvasToView(x, y) {
-		return {
-			x: window.innerWidth * ((x - this.cx) / this.w) + window.innerWidth / 2,
-			y: window.innerHeight * ((y - this.cy) / this.h) + window.innerHeight / 2,
-		};
-	},
+		if (x.x !== undefined) return this.c2v.transformPoint(x);
+		return this.c2v.transformPoint({x, y});
+	}
+
 	/**
 	 * Apply transformation
 	 *
 	 * @param {HTMLElement} el Element to apply CSS transform to
 	 */
 	transform(el) {
-		el.style.transformOrigin = `${this.cx}px ${this.cy}px`;
-		el.style.transform = `scale(${this.zoom}) translate(${-(
-			this._x -
-			this.w / 2
-		)}px, ${-(this._y - this.h / 2)}px)`;
-	},
-};
+		el.style.transformOrigin = "0px 0px";
+		el.style.transform = this.c2v;
+	}
+}
+
+const viewport = new Viewport(0, 0);
 
 viewport.cx = imageCollection.size.w / 2;
 viewport.cy = imageCollection.size.h / 2;
@@ -296,7 +307,7 @@ mouse.listen.camera.onwheel.on((evn) => {
 	const pcy = viewport.cy;
 
 	// Apply zoom
-	viewport.zoom *= 1 - evn.delta * 0.0002;
+	viewport.zoom *= 1 + evn.delta * 0.0002;
 
 	// Apply normal zoom (center of viewport)
 	viewport.cx = pcx;
@@ -305,11 +316,11 @@ mouse.listen.camera.onwheel.on((evn) => {
 	viewport.transform(imageCollection.element);
 
 	// Calculate new viewport center and move
-	const newCursorPosition = viewport.viewToCanvas(evn.x, evn.y);
-	viewport.cx = pcx - (newCursorPosition.x - cursorPosition.x);
-	viewport.cy = pcy - (newCursorPosition.y - cursorPosition.y);
+	//const newCursorPosition = viewport.viewToCanvas(evn.x, evn.y);
+	//viewport.cx = pcx - (newCursorPosition.x - cursorPosition.x);
+	//viewport.cy = pcy - (newCursorPosition.y - cursorPosition.y);
 
-	viewport.transform(imageCollection.element);
+	//viewport.transform(imageCollection.element);
 
 	toolbar.currentTool.redraw();
 });
@@ -320,8 +331,8 @@ const cameraPaintStart = (evn) => {
 
 const cameraPaint = (evn) => {
 	if (worldInit) {
-		viewport.cx = worldInit.x + (evn.ix - evn.x) / viewport.zoom;
-		viewport.cy = worldInit.y + (evn.iy - evn.y) / viewport.zoom;
+		viewport.cx = worldInit.x + (evn.ix - evn.x) * viewport.zoom;
+		viewport.cy = worldInit.y + (evn.iy - evn.y) * viewport.zoom;
 
 		// Limits
 		viewport.cx = Math.max(
diff --git a/js/lib/util.js b/js/lib/util.js
index 850b346..3d4c766 100644
--- a/js/lib/util.js
+++ b/js/lib/util.js
@@ -32,6 +32,16 @@ class BoundingBox {
 	w = 0;
 	h = 0;
 
+	/** @type {Point} */
+	get tl() {
+		return {x: this.x, y: this.y};
+	}
+
+	/** @type {Point} */
+	get br() {
+		return {x: this.x + this.w, y: this.y + this.h};
+	}
+
 	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/colorbrush.js b/js/ui/tool/colorbrush.js
index dc1d190..46e82f4 100644
--- a/js/ui/tool/colorbrush.js
+++ b/js/ui/tool/colorbrush.js
@@ -176,7 +176,7 @@ const colorBrushTool = () =>
 					uiCtx.arc(
 						vcp.x,
 						vcp.y,
-						(state.eyedropper ? 50 : state.brushSize / 2) * viewport.zoom,
+						(state.eyedropper ? 50 : state.brushSize / 2) / viewport.zoom,
 						0,
 						2 * Math.PI,
 						true
@@ -197,7 +197,7 @@ const colorBrushTool = () =>
 						uiCtx.arc(
 							vcp.x,
 							vcp.y,
-							(state.brushSize / 2) * viewport.zoom,
+							state.brushSize / (2 * viewport.zoom),
 							0,
 							2 * Math.PI,
 							true
diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index daa0670..7e98d3a 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -1918,11 +1918,10 @@ const img2imgTool = () =>
 						return;
 					}
 
-					const bbvp = {
-						...viewport.canvasToView(bb.x, bb.y),
-						w: viewport.zoom * bb.w,
-						h: viewport.zoom * bb.h,
-					};
+					const bbvp = BoundingBox.fromStartEnd(
+						viewport.canvasToView(bb.tl),
+						viewport.canvasToView(bb.br)
+					);
 
 					// For displaying border mask
 					const bbCanvas = document.createElement("canvas");
diff --git a/js/ui/tool/generic.js b/js/ui/tool/generic.js
index c9be07f..c710a05 100644
--- a/js/ui/tool/generic.js
+++ b/js/ui/tool/generic.js
@@ -27,11 +27,10 @@ const _tool = {
 			reticleStyle: global.hasActiveInput ? "#BBF" : "#FFF",
 		});
 
-		const bbvp = {
-			...viewport.canvasToView(bb.x, bb.y),
-			w: viewport.zoom * bb.w,
-			h: viewport.zoom * bb.h,
-		};
+		const bbvp = BoundingBox.fromStartEnd(
+			viewport.canvasToView(bb.tl),
+			viewport.canvasToView(bb.br)
+		);
 
 		uiCtx.save();
 
diff --git a/pages/configuration.html b/pages/configuration.html
index ac40172..240875c 100644
--- a/pages/configuration.html
+++ b/pages/configuration.html
@@ -8,7 +8,7 @@
 		<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
 
 		<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" />
-		<link href="../css/layers.css?v=b4fbf61" rel="stylesheet" />
+		<link href="../css/layers.css?v=604f140" rel="stylesheet" />
 
 		<link href="../css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
 

From d3cc6ea8dae57ed734134a433608eb5f90f8ba91 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Tue, 10 Jan 2023 01:05:59 -0300
Subject: [PATCH 04/21] revert layers

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html                      |  2 +-
 js/initalize/layers.populate.js | 73 ++++++++++++++-------------------
 2 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/index.html b/index.html
index 5244d23..9721e5b 100644
--- a/index.html
+++ b/index.html
@@ -350,7 +350,7 @@
 		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
-			src="js/initalize/layers.populate.js?v=23c4cf4"
+			src="js/initalize/layers.populate.js?v=c81f0a5"
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js
index 9efd861..66a1a4b 100644
--- a/js/initalize/layers.populate.js
+++ b/js/initalize/layers.populate.js
@@ -65,12 +65,6 @@ uiCanvas.width = uiCanvas.clientWidth;
 uiCanvas.height = uiCanvas.clientHeight;
 const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
 
-/** @type {HTMLCanvasElement} */
-const uiDebugCanvas = document.getElementById("layer-debug-overlay"); // where mouse cursor renders
-uiDebugCanvas.width = uiDebugCanvas.clientWidth;
-uiDebugCanvas.height = uiDebugCanvas.clientHeight;
-const uiDebugCtx = uiDebugCanvas.getContext("2d", {desynchronized: true});
-
 /**
  * Here we setup canvas dynamic scaling
  */
@@ -166,68 +160,54 @@ debugLayer.hide(); // Hidden by default
  * The global viewport object (may be modularized in the future). All
  * coordinates given are of the center of the viewport
  *
- * cx and cy are the viewport's world coordinates.
+ * cx and cy are the viewport's world coordinates, scaled to zoom level.
+ * _x and _y are actual coordinates in the DOM space
  *
  * The transform() function does some transforms and writes them to the
  * provided element.
  */
 const viewport = {
-	cx: 0,
-	cy: 0,
+	get cx() {
+		return this._x * this.zoom;
+	},
+
+	set cx(v) {
+		return (this._x = v / this.zoom);
+	},
+	_x: 0,
+	get cy() {
+		return this._y * this.zoom;
+	},
+	set cy(v) {
+		return (this._y = v / this.zoom);
+	},
+	_y: 0,
 	zoom: 1,
 	rotation: 0,
 	get w() {
-		return window.innerWidth * 1;
+		return (window.innerWidth * 1) / this.zoom;
 	},
 	get h() {
-		return window.innerHeight * 1;
+		return (window.innerHeight * 1) / this.zoom;
 	},
 	viewToCanvas(x, y) {
-		return this.matrix.transformPoint({x, y});
 		return {
 			x: this.cx + this.w * (x / window.innerWidth - 0.5),
 			y: this.cy + this.h * (y / window.innerHeight - 0.5),
 		};
 	},
 	canvasToView(x, y) {
-		return this.imatrix.transformPoint({x, y});
 		return {
 			x: window.innerWidth * ((x - this.cx) / this.w) + window.innerWidth / 2,
 			y: window.innerHeight * ((y - this.cy) / this.h) + window.innerHeight / 2,
 		};
 	},
-
-	/**
-	 * The transformation matrix (vp to world)
-	 *
-	 * @type {DOMMatrix}
-	 */
-	get matrix() {
-		const matrix = new DOMMatrix();
-
-		matrix.scaleSelf(1 / this.zoom);
-		matrix.translateSelf(this.cx - this.w / 2, this.cy - this.h / 2);
-
-		return matrix;
-	},
-
-	/**
-	 * The transformation matrix (world to vp)
-	 *
-	 * @type {DOMMatrix}
-	 */
-	get imatrix() {
-		return this.matrix.invertSelf();
-	},
-
 	/**
 	 * Apply transformation
 	 *
 	 * @param {HTMLElement} el Element to apply CSS transform to
 	 */
 	transform(el) {
-		el.style.transform = this.imatrix;
-		return;
 		el.style.transformOrigin = `${this.cx}px ${this.cy}px`;
 		el.style.transform = `scale(${this.zoom}) translate(${-(
 			this._x -
@@ -236,8 +216,8 @@ const viewport = {
 	},
 };
 
-//viewport.cx = imageCollection.size.w / 2;
-//viewport.cy = imageCollection.size.h / 2;
+viewport.cx = imageCollection.size.w / 2;
+viewport.cy = imageCollection.size.h / 2;
 
 let worldInit = null;
 
@@ -340,8 +320,8 @@ const cameraPaintStart = (evn) => {
 
 const cameraPaint = (evn) => {
 	if (worldInit) {
-		viewport.cx = worldInit.x + (evn.ix - evn.x);
-		viewport.cy = worldInit.y + (evn.iy - evn.y);
+		viewport.cx = worldInit.x + (evn.ix - evn.x) / viewport.zoom;
+		viewport.cy = worldInit.y + (evn.iy - evn.y) / viewport.zoom;
 
 		// Limits
 		viewport.cx = Math.max(
@@ -357,6 +337,13 @@ const cameraPaint = (evn) => {
 	}
 
 	viewport.transform(imageCollection.element);
+	if (global.debug) {
+		debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
+		debugCtx.fillStyle = "#F0F";
+		debugCtx.beginPath();
+		debugCtx.arc(viewport.cx, viewport.cy, 5, 0, Math.PI * 2);
+		debugCtx.fill();
+	}
 };
 
 const cameraPaintEnd = (evn) => {

From 487f3bed0c78180804dc1fa3e227936c6252feff Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Tue, 10 Jan 2023 14:30:09 -0300
Subject: [PATCH 05/21] implements #164

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html          |  2 +-
 js/ui/tool/dream.js | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 2494d65..aa35115 100644
--- a/index.html
+++ b/index.html
@@ -371,7 +371,7 @@
 			src="js/ui/tool/generic.js?v=2bcd36d"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=a2932df" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=0d639fe" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>
diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index daa0670..3713d0a 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -775,6 +775,20 @@ const _generate = async (endpoint, request, bb, options = {}) => {
 	});
 	imageSelectMenu.appendChild(resourcebtn);
 
+	const deletebtn = document.createElement("button");
+	deletebtn.textContent = "D";
+	deletebtn.title = "Delete Image";
+	deletebtn.addEventListener("click", async () => {
+		images.splice(at, 1);
+		seeds.splice(at, 1);
+
+		at = Math.min(at, images.length - 1);
+
+		imageindextxt.textContent = `${at}/${images.length - 1}`;
+		redraw();
+	});
+	imageSelectMenu.appendChild(deletebtn);
+
 	const savebtn = document.createElement("button");
 	savebtn.textContent = "S";
 	savebtn.title = "Download image to computer";

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 06/21] 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) => {

From 35a62ae9fe2e8356651313918badd692f6c9bb2b Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 12 Jan 2023 01:00:06 -0300
Subject: [PATCH 07/21] back to original transform tool state

But way more flexible implementation

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html                      |  10 +-
 js/initalize/layers.populate.js |   6 +-
 js/lib/toolbar.js               |   8 +-
 js/lib/util.js                  |  10 ++
 js/ui/tool/generic.js           | 289 +++++++++++++++++++++++++-------
 js/ui/tool/select.js            | 263 ++++++++++++++++++++++++++---
 6 files changed, 499 insertions(+), 87 deletions(-)

diff --git a/index.html b/index.html
index e608e25..4a9f5eb 100644
--- a/index.html
+++ b/index.html
@@ -341,17 +341,17 @@
 		<script src="js/global.js?v=5ee46bd" type="text/javascript"></script>
 
 		<!-- Base Libs -->
-		<script src="js/lib/util.js?v=39564fb" type="text/javascript"></script>
+		<script src="js/lib/util.js?v=49a78a6" 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>
 		<script src="js/lib/commands.js?v=bf23c83" type="text/javascript"></script>
 
-		<script src="js/lib/toolbar.js?v=ca3fccf" type="text/javascript"></script>
+		<script src="js/lib/toolbar.js?v=b3ffbff" type="text/javascript"></script>
 		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
-			src="js/initalize/layers.populate.js?v=938a1b2"
+			src="js/initalize/layers.populate.js?v=fcca23e"
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
@@ -370,7 +370,7 @@
 
 		<!-- Load Tools -->
 		<script
-			src="js/ui/tool/generic.js?v=d63d268"
+			src="js/ui/tool/generic.js?v=9f1f84e"
 			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=44e8ec4"
+			src="js/ui/tool/select.js?v=080237c"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js
index dd88b1c..cda7d89 100644
--- a/js/initalize/layers.populate.js
+++ b/js/initalize/layers.populate.js
@@ -322,7 +322,8 @@ mouse.listen.camera.onwheel.on((evn) => {
 
 	//viewport.transform(imageCollection.element);
 
-	toolbar.currentTool.redraw();
+	toolbar._current_tool.state.redrawui &&
+		toolbar._current_tool.state.redrawui();
 });
 
 const cameraPaintStart = (evn) => {
@@ -348,6 +349,9 @@ const cameraPaint = (evn) => {
 	}
 
 	viewport.transform(imageCollection.element);
+	toolbar._current_tool.state.redrawui &&
+		toolbar._current_tool.state.redrawui();
+
 	if (global.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 4a82f0f..47be1e8 100644
--- a/js/lib/toolbar.js
+++ b/js/lib/toolbar.js
@@ -90,14 +90,20 @@ const toolbar = {
 			name: toolname,
 			enabled: false,
 			_element: null,
-			state: {},
+			state: {
+				redrawui: () => tool.redraw(),
+			},
 			options,
 			/**
 			 * If the tool has a redraw() function in its state, then run it
 			 */
 			redraw: () => {
+				tool.state.redrawui && tool.state.redrawui();
 				tool.state.redraw && tool.state.redraw();
 			},
+			redrawui: () => {
+				tool.state.redrawui && tool.state.redrawui();
+			},
 			enable: (opt = null) => {
 				if (toolbar._locked) return;
 
diff --git a/js/lib/util.js b/js/lib/util.js
index 9e2fa94..06ac99a 100644
--- a/js/lib/util.js
+++ b/js/lib/util.js
@@ -37,6 +37,16 @@ class BoundingBox {
 		return {x: this.x, y: this.y};
 	}
 
+	/** @type {Point} */
+	get tr() {
+		return {x: this.x + this.w, y: this.y};
+	}
+
+	/** @type {Point} */
+	get bl() {
+		return {x: this.x, y: this.y + this.h};
+	}
+
 	/** @type {Point} */
 	get br() {
 		return {x: this.x + this.w, y: this.y + this.h};
diff --git a/js/ui/tool/generic.js b/js/ui/tool/generic.js
index c39707d..b4ee0d4 100644
--- a/js/ui/tool/generic.js
+++ b/js/ui/tool/generic.js
@@ -315,12 +315,40 @@ const _tool = {
 		/** @type {HTMLCanvasElement} */
 		canvas;
 
+		_dirty = false;
+		_position = {x: 0, y: 0};
 		/**
 		 * @type {Point}
 		 */
-		position = {x: 0, y: 0};
-		scale = {x: 1, y: 1};
-		rotation = 0;
+		get position() {
+			return this._position;
+		}
+		set position(v) {
+			this._dirty = true;
+			this._position = v;
+		}
+
+		_scale = {x: 1, y: 1};
+		/**
+		 * @type {Point}
+		 */
+		get scale() {
+			return this._scale;
+		}
+		set scale(v) {
+			if (v.x === 0 || v.y === 0) return;
+			this._dirty = true;
+			this._scale = v;
+		}
+
+		_rotation = 0;
+		get rotation() {
+			return this._rotation;
+		}
+		set rotation(v) {
+			this._dirty = true;
+			this._rotation = v;
+		}
 
 		/**
 		 * @param {HTMLCanvasElement} canvas Selected image canvas
@@ -331,14 +359,28 @@ const _tool = {
 			this.position = position;
 		}
 
+		/** @type {DOMMatrix} */
+		_rtmatrix = null;
+		get rtmatrix() {
+			if (!this._rtmatrix || this._dirty) {
+				const m = new DOMMatrix();
+
+				m.translateSelf(this.position.x, this.position.y);
+				m.rotateSelf((this.rotation * 180) / Math.PI);
+
+				this._rtmatrix = m;
+			}
+
+			return this._rtmatrix;
+		}
+
+		/** @type {DOMMatrix} */
+		_matrix = null;
 		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 (!this._matrix || this._dirty) {
+				this._matrix = this.rtmatrix.scaleSelf(this.scale.x, this.scale.y);
+			}
+			return this._matrix;
 		}
 
 		/**
@@ -356,44 +398,201 @@ const _tool = {
 			);
 		}
 
+		hoveringHandle(x, y) {
+			const localbb = new BoundingBox({
+				x: -this.canvas.width / 2,
+				y: -this.canvas.height / 2,
+				w: this.canvas.width,
+				h: this.canvas.height,
+			});
+
+			const localc = this.matrix.inverse().transformPoint({x, y});
+			const ontl =
+				Math.max(
+					Math.abs(localc.x - localbb.tl.x),
+					Math.abs(localc.y - localbb.tl.y)
+				) <
+				config.handleDetectSize / 2;
+			const ontr =
+				Math.max(
+					Math.abs(localc.x - localbb.tr.x),
+					Math.abs(localc.y - localbb.tr.y)
+				) <
+				config.handleDetectSize / 2;
+			const onbl =
+				Math.max(
+					Math.abs(localc.x - localbb.bl.x),
+					Math.abs(localc.y - localbb.bl.y)
+				) <
+				config.handleDetectSize / 2;
+			const onbr =
+				Math.max(
+					Math.abs(localc.x - localbb.br.x),
+					Math.abs(localc.y - localbb.br.y)
+				) <
+				config.handleDetectSize / 2;
+
+			return {onHandle: ontl || ontr || onbl || onbr, ontl, ontr, onbl, onbr};
+		}
+
+		hoveringBox(x, y) {
+			const localbb = new BoundingBox({
+				x: -this.canvas.width / 2,
+				y: -this.canvas.height / 2,
+				w: this.canvas.width,
+				h: this.canvas.height,
+			});
+
+			const localc = this.matrix.inverse().transformPoint({x, y});
+
+			return (
+				!this.hoveringHandle(x, y).onHandle &&
+				localbb.contains(localc.x, localc.y)
+			);
+		}
+
 		/**
 		 * Draws the marquee selector box
 		 *
 		 * @param {CanvasRenderingContext2D} context A context for rendering the box to
+		 * @param {Point} cursor Cursor position
 		 * @param {DOMMatrix} transform A transformation matrix to transform the position by
 		 */
-		drawBox(context, transform = new DOMMatrix()) {
-			context.save();
-
+		drawBox(context, cursor, transform = new DOMMatrix()) {
 			const m = transform.multiply(this.matrix);
 
-			context.setTransform(m);
-
-			// Draw the box itself
 			context.save();
 
+			const localbb = new BoundingBox({
+				x: -this.canvas.width / 2,
+				y: -this.canvas.height / 2,
+				w: this.canvas.width,
+				h: this.canvas.height,
+			});
+
 			// Line Style
 			context.strokeStyle = "#FFF";
 			context.lineWidth = 2;
-			context.setLineDash([4, 2]);
+
+			const tl = m.transformPoint(localbb.tl);
+			const tr = m.transformPoint(localbb.tr);
+			const bl = m.transformPoint(localbb.bl);
+			const br = m.transformPoint(localbb.br);
+
+			const bbc = m.transformPoint({x: 0, y: 0});
 
 			context.beginPath();
-			context.strokeRect(
+			context.arc(bbc.x, bbc.y, 5, 0, Math.PI * 2);
+			context.stroke();
+
+			context.setLineDash([4, 2]);
+
+			// Draw main rectangle
+			context.beginPath();
+			context.moveTo(tl.x, tl.y);
+			context.lineTo(tr.x, tr.y);
+			context.lineTo(br.x, br.y);
+			context.lineTo(bl.x, bl.y);
+			context.lineTo(tl.x, tl.y);
+			context.stroke();
+
+			// Draw handles
+			const drawHandle = (pt, hover) => {
+				let hsz = config.handleDrawSize / 2;
+				if (hover) hsz *= config.handleDrawHoverScale;
+
+				const hm = new DOMMatrix().rotateSelf(this.rotation);
+
+				const htl = hm.transformPoint({x: -hsz, y: -hsz});
+				const htr = hm.transformPoint({x: hsz, y: -hsz});
+				const hbr = hm.transformPoint({x: hsz, y: hsz});
+				const hbl = hm.transformPoint({x: -hsz, y: hsz});
+
+				context.beginPath();
+				context.moveTo(htl.x + pt.x, htl.y + pt.y);
+				context.lineTo(htr.x + pt.x, htr.y + pt.y);
+				context.lineTo(hbr.x + pt.x, hbr.y + pt.y);
+				context.lineTo(hbl.x + pt.x, hbl.y + pt.y);
+				context.lineTo(htl.x + pt.x, htl.y + pt.y);
+				context.stroke();
+			};
+
+			context.strokeStyle = "#FFF";
+			context.lineWidth = 2;
+			context.setLineDash([]);
+
+			const {ontl, ontr, onbl, onbr} = this.hoveringHandle(cursor.x, cursor.y);
+
+			drawHandle(tl, ontl);
+			drawHandle(tr, ontr);
+			drawHandle(bl, onbl);
+			drawHandle(br, onbr);
+
+			context.restore();
+
+			return () => {
+				const border = config.handleDrawSize * config.handleDrawHoverScale;
+
+				const minx = Math.min(tl.x, tr.x, bl.x, br.x) - border;
+				const maxx = Math.max(tl.x, tr.x, bl.x, br.x) + border;
+				const miny = Math.min(tl.y, tr.y, bl.y, br.y) - border;
+				const maxy = Math.max(tl.y, tr.y, bl.y, br.y) + border;
+
+				context.clearRect(minx, miny, maxx - minx, maxy - miny);
+			};
+		}
+
+		/**
+		 * Draws the selected image
+		 *
+		 * @param {CanvasRenderingContext2D} context A context for rendering the image to
+		 * @param {CanvasRenderingContext2D} peekctx A context for rendering the layer peeking to
+		 * @param {object} options
+		 * @param {DOMMatrix} options.transform A transformation matrix to transform the position by
+		 * @param {number} options.opacity Opacity of the peek display
+		 */
+		drawImage(context, peekctx, options = {}) {
+			defaultOpt(options, {
+				transform: new DOMMatrix(),
+				opacity: 0.4,
+			});
+
+			context.save();
+			peekctx.save();
+
+			const m = options.transform.multiply(this.matrix);
+
+			// Draw image
+			context.setTransform(m);
+			context.drawImage(
+				this.canvas,
 				-this.canvas.width / 2,
 				-this.canvas.height / 2,
 				this.canvas.width,
 				this.canvas.height
 			);
-			context.stroke();
 
-			context.restore();
+			// Draw peek
+			peekctx.filter = `opacity(${options.opacity * 100}%)`;
+			peekctx.setTransform(m);
+			peekctx.drawImage(
+				this.canvas,
+				-this.canvas.width / 2,
+				-this.canvas.height / 2,
+				this.canvas.width,
+				this.canvas.height
+			);
 
+			peekctx.restore();
 			context.restore();
 
 			return () => {
-				context.save();
+				// Here we only save transform for performance
+				const pt = context.getTransform();
+				const ppt = context.getTransform();
 
 				context.setTransform(m);
+				peekctx.setTransform(m);
 
 				context.clearRect(
 					-this.canvas.width / 2 - 10,
@@ -402,46 +601,16 @@ const _tool = {
 					this.canvas.height + 20
 				);
 
-				context.restore();
+				peekctx.clearRect(
+					-this.canvas.width / 2 - 10,
+					-this.canvas.height / 2 - 10,
+					this.canvas.width + 20,
+					this.canvas.height + 20
+				);
+
+				context.setTransform(pt);
+				peekctx.setTransform(ppt);
 			};
 		}
-
-		/**
-		 * Draws the selected images
-		 *
-		 * @param {CanvasRenderingContext2D} context A context for rendering the box to
-		 * @param {DOMMatrix} transform A transformation matrix to transform the position by
-		 */
-		drawImage(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);
-
-			context.restore();
-		}
-	},
-
-	/**
-	 * Marquee Selection with an image
-	 */
-	_marquee_selection(state) {
-		return {
-			// Location of the origin of the selection
-			position: {x: 0, y: 0},
-			// Scale of the selection
-			scale: 1,
-			// Angle of the selection (radians)
-			rotation: 0,
-
-			/**
-			 * Draws the selection
-			 */
-			draw() {},
-		};
 	},
 };
-
-name;
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 4a6ea0b..4540a26 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -34,6 +34,12 @@ const selectTransformTool = () =>
 			keyboard.onShortcut({ctrl: true, key: "KeyX"}, state.ctrlxcb);
 
 			state.selected = null;
+
+			// Register Layer
+			state.originalDisplayLayer = imageCollection.registerLayer(null, {
+				after: uil.layer,
+				category: "select-display",
+			});
 		},
 		(state, opt) => {
 			// Clear all those listeners and shortcuts we set up
@@ -61,6 +67,10 @@ const selectTransformTool = () =>
 
 			// Clears overlay
 			imageCollection.inputElement.style.cursor = "auto";
+
+			// Delete Layer
+			imageCollection.deleteLayer(state.originalDisplayLayer);
+			state.originalDisplayLayer = null;
 		},
 		{
 			init: (state) => {
@@ -104,15 +114,14 @@ const selectTransformTool = () =>
 				// Clears selection and make things right
 				state.reset = (erase = false) => {
 					if (state.selected && !erase)
-						state.originalLayer.ctx.drawImage(
-							state.original.image,
+						state.original.layer.ctx.drawImage(
+							state.selected.canvas,
 							state.original.x,
 							state.original.y
 						);
 
 					if (state.originalDisplayLayer) {
-						imageCollection.deleteLayer(state.originalDisplayLayer);
-						state.originalDisplayLayer = null;
+						state.originalDisplayLayer.clear();
 					}
 
 					if (state.dragging) state.dragging = null;
@@ -120,6 +129,7 @@ const selectTransformTool = () =>
 
 					state.rotation = 0;
 					state.original = null;
+					state.moving = false;
 
 					state.redraw();
 				};
@@ -127,23 +137,70 @@ const selectTransformTool = () =>
 				// Selection Handlers
 				const selection = _tool._draggable_selection(state);
 
-				// Mouse Move Handler
+				/** @type {{selected: Point, offset: Point} | null} */
+				let moving = null;
+				/** @type {{handle: Point} | null} */
+				let scaling = null;
+
+				// UI Erasers
 				let eraseSelectedBox = () => null;
+				let eraseSelectedImage = () => null;
 				let eraseCursor = () => null;
 				let eraseSelection = () => null;
+
+				// Redraw UI
+				state.redrawui = () => {
+					// Get cursor positions
+					const {x, y, sx, sy} = _tool._process_cursor(
+						state.lastMouseMove,
+						state.snapToGrid
+					);
+
+					eraseSelectedBox();
+
+					if (state.selected) {
+						eraseSelectedBox = state.selected.drawBox(
+							uiCtx,
+							{x, y},
+							viewport.c2v
+						);
+					}
+				};
+
+				// Mouse Move Handler
 				state.movecb = (evn) => {
+					state.lastMouseMove = evn;
+
 					// Get cursor positions
 					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
 
 					// Erase Cursor
 					eraseSelectedBox();
+					eraseSelectedImage();
 					eraseSelection();
 					eraseCursor();
 					imageCollection.inputElement.style.cursor = "default";
 
 					// Draw Box and Selected Image
 					if (state.selected) {
-						eraseSelectedBox = state.selected.drawBox(uiCtx, viewport.c2v);
+						eraseSelectedBox = state.selected.drawBox(
+							uiCtx,
+							{x, y},
+							viewport.c2v
+						);
+
+						if (
+							state.selected.hoveringBox(x, y) ||
+							state.selected.hoveringHandle(x, y).onHandle
+						) {
+							imageCollection.inputElement.style.cursor = "pointer";
+						}
+
+						eraseSelectedImage = state.selected.drawImage(
+							state.originalDisplayLayer.ctx,
+							ovCtx,
+							{opacity: state.selectionPeekOpacity / 100}
+						);
 					}
 
 					// Draw Selection
@@ -171,42 +228,208 @@ const selectTransformTool = () =>
 
 					// 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) => {};
+				state.clickcb = (evn) => {
+					if (
+						state.selected &&
+						!(
+							state.selected.rotation === 0 &&
+							state.selected.scale.x === 1 &&
+							state.selected.scale.y === 1 &&
+							state.selected.position.x === state.original.sx &&
+							state.selected.position.y === state.original.sy &&
+							state.original.layer === uil.layer
+						)
+					) {
+						// Put original image back
+						state.original.layer.ctx.drawImage(
+							state.selected.canvas,
+							state.original.x,
+							state.original.y
+						);
+
+						// Erase Original Selection Area
+						commands.runCommand("eraseImage", "Transform Tool Erase", {
+							ctx: state.original.layer.ctx,
+							x: state.original.x,
+							y: state.original.y,
+							w: state.selected.canvas.width,
+							h: state.selected.canvas.height,
+						});
+
+						// Draw Image
+						const {canvas, bb} = cropCanvas(state.originalDisplayLayer.canvas, {
+							border: 10,
+						});
+						commands.runCommand("drawImage", "Transform Tool Apply", {
+							image: canvas,
+							...bb,
+						});
+					}
+					state.reset(true);
+				};
 
 				// Handles left mouse drag start events
 				state.dragstartcb = (evn) => {
+					const {
+						x: ix,
+						y: iy,
+						sx: six,
+						sy: siy,
+					} = _tool._process_cursor({x: evn.ix, y: evn.iy}, state.snapToGrid);
+					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
+
+					if (state.selected) {
+						const hoveringBox = state.selected.hoveringBox(ix, iy);
+						const hoveringHandle = state.selected.hoveringHandle(ix, iy);
+
+						const localc = state.selected.matrix
+							.inverse()
+							.transformPoint({x: ix, y: iy});
+
+						if (hoveringBox) {
+							// Start dragging
+							moving = {
+								selected: state.selected.position,
+								offset: {
+									x: six - state.selected.position.x,
+									y: siy - state.selected.position.y,
+								},
+							};
+							return;
+						} else if (hoveringHandle.onHandle) {
+							// Start scaling
+							let handle = {x: 0, y: 0};
+
+							const lbb = new BoundingBox({
+								x: -state.selected.canvas.width / 2,
+								y: -state.selected.canvas.height / 2,
+								w: state.selected.canvas.width,
+								h: state.selected.canvas.height,
+							});
+
+							if (hoveringHandle.ontl) {
+								handle = lbb.tl;
+							} else if (hoveringHandle.ontr) {
+								handle = lbb.tr;
+							} else if (hoveringHandle.onbl) {
+								handle = lbb.bl;
+							} else {
+								handle = lbb.br;
+							}
+
+							scaling = {
+								handle,
+							};
+							return;
+						}
+					}
 					selection.dragstartcb(evn);
 				};
 
 				// Handles left mouse drag events
 				state.dragcb = (evn) => {
-					selection.dragcb(evn);
+					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
+
+					if (state.selected) {
+						if (moving) {
+							state.selected.position = {
+								x: sx - moving.offset.x,
+								y: sy - moving.offset.y,
+							};
+						}
+
+						if (scaling) {
+							/** @type {DOMMatrix} */
+							const m = state.selected.rtmatrix.invertSelf();
+							const lscursor = m.transformPoint({x: sx, y: sy});
+
+							const xs = lscursor.x / scaling.handle.x;
+							const xy = lscursor.y / scaling.handle.y;
+
+							if (!state.keepAspectRatio) state.selected.scale = {x: xs, y: xy};
+							else {
+								const scale = Math.max(xs, xy);
+								state.selected.scale = {x: scale, y: scale};
+							}
+						}
+					}
+
+					if (selection.exists) selection.dragcb(evn);
 				};
 
 				// Handles left mouse drag end events
 				state.dragendcb = (evn) => {
-					selection.dragendcb(evn);
+					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
 
 					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.dragendcb(evn);
+
+						const bb = selection.bb;
+
+						state.reset();
+
+						if (selection.exists && bb.w !== 0 && bb.h !== 0) {
+							const canvas = document.createElement("canvas");
+							canvas.width = bb.w;
+							canvas.height = bb.h;
+							canvas
+								.getContext("2d")
+								.drawImage(
+									uil.canvas,
+									bb.x,
+									bb.y,
+									bb.w,
+									bb.h,
+									0,
+									0,
+									bb.w,
+									bb.h
+								);
+
+							uil.ctx.clearRect(bb.x, bb.y, bb.w, bb.h);
+
+							state.original = {
+								...bb,
+								sx: selection.bb.center.x,
+								sy: selection.bb.center.y,
+								layer: uil.layer,
+							};
+							state.selected = new _tool.MarqueeSelection(canvas, bb.center);
 						}
 
 						selection.deselect();
 					}
 
+					if (state.selected) {
+						if (moving) {
+							state.selected.position = {
+								x: sx - moving.offset.x,
+								y: sy - moving.offset.y,
+							};
+						}
+
+						if (scaling) {
+							/** @type {DOMMatrix} */
+							const m = state.selected.rtmatrix.invertSelf();
+							const lscursor = m.transformPoint({x: sx, y: sy});
+
+							const xs = lscursor.x / scaling.handle.x;
+							const xy = lscursor.y / scaling.handle.y;
+
+							if (!state.keepAspectRatio) state.selected.scale = {x: xs, y: xy};
+							else {
+								const scale = Math.max(xs, xy);
+								state.selected.scale = {x: scale, y: scale};
+							}
+						}
+					}
+
+					moving = null;
+					scaling = null;
+
 					state.redraw();
 				};
 

From e2afee3432d8ca24bea43b75fdaf2db018c12644 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 12 Jan 2023 01:04:59 -0300
Subject: [PATCH 08/21] fix send to buttons

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html               |   2 +-
 js/ui/tool/select.bkp.js | 908 ---------------------------------------
 js/ui/tool/select.js     |  10 +-
 3 files changed, 6 insertions(+), 914 deletions(-)
 delete mode 100644 js/ui/tool/select.bkp.js

diff --git a/index.html b/index.html
index 8e8192b..d5a3b04 100644
--- a/index.html
+++ b/index.html
@@ -381,7 +381,7 @@
 			src="js/ui/tool/colorbrush.js?v=3f8c01a"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=080237c"
+			src="js/ui/tool/select.js?v=2ba26f1"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
diff --git a/js/ui/tool/select.bkp.js b/js/ui/tool/select.bkp.js
deleted file mode 100644
index a6e0e9c..0000000
--- a/js/ui/tool/select.bkp.js
+++ /dev/null
@@ -1,908 +0,0 @@
-/**
- * TODO: REFACTOR THIS WHOLE THING
- */
-
-const selectTransformTool = () =>
-	toolbar.registerTool(
-		"./res/icons/box-select.svg",
-		"Select Image",
-		(state, opt) => {
-			// Draw new cursor immediately
-			ovLayer.clear();
-			state.movecb(mouse.coords.world.pos);
-
-			// Canvas left mouse handlers
-			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.ondragend.on(state.dragendcb);
-
-			// Canvas right mouse handler
-			mouse.listen.world.btn.right.onclick.on(state.cancelcb);
-
-			// Keyboard click handlers
-			keyboard.listen.onkeyclick.on(state.keyclickcb);
-			keyboard.listen.onkeydown.on(state.keydowncb);
-
-			// Layer system handlers
-			uil.onactive.on(state.uilayeractivecb);
-
-			// Registers keyboard shortcuts
-			keyboard.onShortcut({ctrl: true, key: "KeyC"}, state.ctrlccb);
-			keyboard.onShortcut({ctrl: true, key: "KeyV"}, state.ctrlvcb);
-			keyboard.onShortcut({ctrl: true, key: "KeyX"}, state.ctrlxcb);
-
-			state.selected = null;
-		},
-		(state, opt) => {
-			// Clear all those listeners and shortcuts we set up
-			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.ondragend.clear(state.dragendcb);
-
-			mouse.listen.world.btn.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");
-
-			uil.onactive.clear(state.uilayeractivecb);
-
-			// Clear any selections
-			state.reset();
-
-			// Resets cursor
-			ovLayer.clear();
-
-			// Clears overlay
-			imageCollection.inputElement.style.cursor = "auto";
-		},
-		{
-			init: (state) => {
-				state.clipboard = {};
-
-				state.snapToGrid = true;
-				state.keepAspectRatio = true;
-				state.block_res_change = true;
-				state.useClipboard = !!(
-					navigator.clipboard && navigator.clipboard.write
-				); // Use it by default if supported
-				state.selectionPeekOpacity = 40;
-
-				state.original = null;
-				state.dragging = null;
-				state.rotation = 0;
-				state._selected = null;
-				Object.defineProperty(state, "selected", {
-					get: () => state._selected,
-					set: (v) => {
-						if (v) state.ctxmenu.enableButtons();
-						else state.ctxmenu.disableButtons();
-
-						return (state._selected = v);
-					},
-				});
-				state.moving = null;
-
-				// Some things to easy request for a redraw
-				state.lastMouseTarget = null;
-				state.lastMouseMove = {x: 0, y: 0};
-
-				state.redraw = () => {
-					ovLayer.clear();
-					state.movecb(state.lastMouseMove);
-				};
-
-				state.uilayeractivecb = ({uilayer}) => {
-					if (state.originalDisplayLayer) {
-						state.originalDisplayLayer.moveAfter(uilayer.layer);
-					}
-				};
-
-				// Clears selection and make things right
-				state.reset = (erase = false) => {
-					if (state.selected && !erase)
-						state.originalLayer.ctx.drawImage(
-							state.original.image,
-							state.original.x,
-							state.original.y
-						);
-
-					if (state.originalDisplayLayer) {
-						imageCollection.deleteLayer(state.originalDisplayLayer);
-						state.originalDisplayLayer = null;
-					}
-
-					if (state.dragging) state.dragging = null;
-					else state.selected = null;
-
-					state.rotation = 0;
-					state.original = null;
-
-					state.redraw();
-				};
-
-				// Selection bounding box object. Has some witchery to deal with handles.
-				const selectionBB = (x1, y1, x2, y2) => {
-					x1 = Math.round(x1);
-					y1 = Math.round(y1);
-					x2 = Math.round(x2);
-					y2 = Math.round(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),
-						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 &&
-								x <= this.x + this.w &&
-								this.y <= y &&
-								y <= this.y + this.h
-							);
-						},
-						center() {
-							return {x: this.x + this.w / 2, y: this.y + this.h / 2};
-						},
-						createHandle(x, y, originOffset = null) {
-							return {
-								x,
-								y,
-								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;
-									}
-								},
-							};
-						},
-					};
-				};
-
-				// Mouse move handler. As always, also renders cursor
-				state.movecb = (evn) => {
-					ovLayer.clear();
-					uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
-					state.erasePrevCursor && state.erasePrevCursor();
-					imageCollection.inputElement.style.cursor = "auto";
-					state.lastMouseTarget = evn.target;
-					state.lastMouseMove = evn;
-					let x = evn.x;
-					let y = evn.y;
-					if (state.snapToGrid) {
-						x += snap(evn.x, 0, 64);
-						y += snap(evn.y, 0, 64);
-					}
-
-					uiCtx.save();
-
-					// Update scale
-					if (state.scaling) {
-						state.scaling.scaleTo(x, y, state.keepAspectRatio);
-					}
-
-					// Update rotation
-					if (state.rotating) {
-						const center = state.selected.center();
-						state.rotation = Math.atan2(evn.x - center.x, center.y - evn.y);
-					}
-
-					// Update position
-					if (state.moving) {
-						state.selected.x = Math.round(x - state.moving.offset.x);
-						state.selected.y = Math.round(y - state.moving.offset.y);
-						state.selected.updateOriginal();
-					}
-
-					// Draw dragging box
-					if (state.dragging) {
-						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);
-
-						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([]);
-					}
-
-					// Draw selected box
-					if (state.selected) {
-						state.selected.drawBox(uiCtx);
-					}
-					if (state.selected && false) {
-						ovCtx.lineWidth = 1;
-						ovCtx.strokeStyle = "#FFF";
-
-						const bb = new BoundingBox({
-							x: state.selected.x,
-							y: state.selected.y,
-							w: state.selected.w,
-							h: state.selected.h,
-						});
-
-						const bbvp = {
-							...viewport.canvasToView(bb.x, bb.y),
-							w: viewport.zoom * bb.w,
-							h: viewport.zoom * bb.h,
-						};
-
-						const scenter = state.selected.center();
-
-						// Draw Image
-						ovCtx.save();
-
-						ovCtx.filter = `opacity(${state.selectionPeekOpacity}%)`;
-
-						ovCtx.translate(scenter.x, scenter.y);
-						ovCtx.rotate(state.rotation);
-
-						const matrix = ovCtx.getTransform();
-						const imatrix = matrix.invertSelf();
-
-						const cursor = imatrix.transformPoint({
-							x: evn.x,
-							y: evn.y,
-						});
-
-						ovCtx.drawImage(
-							state.selected.image,
-							0,
-							0,
-							state.selected.image.width,
-							state.selected.image.height,
-							-state.selected.w / 2,
-							-state.selected.h / 2,
-							state.selected.w,
-							state.selected.h
-						);
-						ovCtx.restore();
-
-						state.originalDisplayLayer.clear();
-						state.originalDisplayLayer.ctx.save();
-
-						state.originalDisplayLayer.ctx.translate(scenter.x, scenter.y);
-						state.originalDisplayLayer.ctx.rotate(state.rotation);
-
-						state.originalDisplayLayer.ctx.drawImage(
-							state.selected.image,
-							0,
-							0,
-							state.selected.image.width,
-							state.selected.image.height,
-							-state.selected.w / 2,
-							-state.selected.h / 2,
-							state.selected.w,
-							state.selected.h
-						);
-						state.originalDisplayLayer.ctx.restore();
-
-						const centerx = bbvp.x + bbvp.w / 2;
-						const centery = bbvp.y + bbvp.h / 2;
-
-						uiCtx.save();
-
-						uiCtx.translate(centerx, centery);
-						uiCtx.rotate(state.rotation);
-
-						const matrixvp = uiCtx.getTransform();
-						const imatrixvp = matrixvp.invertSelf();
-
-						const cursorvp = imatrixvp.transformPoint({
-							x: evn.evn.clientX,
-							y: evn.evn.clientY,
-						});
-
-						// Draw selection box
-						uiCtx.strokeStyle = "#FFF";
-						uiCtx.setLineDash([4, 2]);
-						uiCtx.strokeRect(-bbvp.w / 2, -bbvp.h / 2, bbvp.w, bbvp.h);
-						uiCtx.setLineDash([]);
-
-						// Draw Scaling/Rotation Origin
-						uiCtx.beginPath();
-						uiCtx.arc(0, 0, 5, 0, 2 * Math.PI);
-						uiCtx.stroke();
-
-						// Draw Rotation Handle
-						let cursorInAnyHandle = false;
-						{
-							let radius = config.handleDrawSize / 2;
-
-							const dx = cursorvp.x;
-							const dy =
-								cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
-							const dmax = config.handleDetectSize / 2;
-
-							if (dx * dx + dy * dy < dmax * dmax) {
-								cursorInAnyHandle ||= true;
-								radius *= config.handleDrawHoverScale;
-							}
-
-							uiCtx.beginPath();
-							uiCtx.moveTo(0, -bbvp.h / 2);
-							uiCtx.lineTo(
-								0,
-								-bbvp.h / 2 - config.rotateHandleDistance + radius
-							);
-							uiCtx.stroke();
-
-							uiCtx.beginPath();
-							uiCtx.arc(
-								0,
-								-bbvp.h / 2 - config.rotateHandleDistance,
-								radius,
-								0,
-								Math.PI * 2
-							);
-							uiCtx.stroke();
-						}
-
-						// Draw Scaling Handles
-						const drawHandle = (hx, hy) => {
-							// Handle Draw Range
-							let hs = config.handleDrawSize;
-
-							// Handle Detection Range
-							let dhs = config.handleDetectSize;
-
-							const handleBB = new BoundingBox({
-								x: hx - dhs / 2,
-								y: hy - dhs / 2,
-								w: dhs,
-								h: dhs,
-							});
-
-							const cursorInHandle = handleBB.contains(cursorvp.x, cursorvp.y);
-
-							cursorInAnyHandle ||= cursorInHandle;
-
-							if (cursorInHandle) hs *= config.handleDrawHoverScale;
-
-							uiCtx.strokeRect(hx - hs / 2, hy - hs / 2, hs, hs);
-						};
-
-						drawHandle(-bbvp.w / 2, -bbvp.h / 2);
-						drawHandle(bbvp.w / 2, -bbvp.h / 2);
-						drawHandle(-bbvp.w / 2, bbvp.h / 2);
-						drawHandle(bbvp.w / 2, bbvp.h / 2);
-
-						uiCtx.restore();
-
-						// Change cursor
-						if (
-							cursorInAnyHandle ||
-							(-bb.w / 2 < cursor.x &&
-								bb.w / 2 > cursor.x &&
-								-bb.h / 2 < cursor.y &&
-								bb.h / 2 > cursor.y)
-						)
-							imageCollection.inputElement.style.cursor = "pointer";
-					}
-
-					// Draw current cursor location
-					state.erasePrevCursor = _tool._cursor_draw(x, y);
-
-					uiCtx.restore();
-				};
-
-				// Handles left mouse clicks
-				state.clickcb = (evn) => {
-					if (
-						!state.original ||
-						(state.originalLayer === uil.layer &&
-							state.original.x === state.selected.x &&
-							state.original.y === state.selected.y &&
-							state.original.w === state.selected.w &&
-							state.original.h === state.selected.h &&
-							state.rotation === 0)
-					) {
-						state.reset();
-						return;
-					}
-
-					// If something is selected, commit changes to the canvas
-					if (state.selected) {
-						state.originalLayer.ctx.drawImage(
-							state.selected.image,
-							state.original.x,
-							state.original.y
-						);
-						commands.runCommand("eraseImage", "Image Transform Erase", {
-							...state.original,
-							ctx: state.originalLayer.ctx,
-						});
-
-						// Use display layer as source
-						const {canvas, bb} = cropCanvas(state.originalDisplayLayer.canvas);
-
-						commands.runCommand("drawImage", "Image Transform Draw", {
-							image: canvas,
-							...bb,
-						});
-						state.reset(true);
-					}
-				};
-
-				// Handles left mouse drag events
-				state.dragstartcb = (evn) => {
-					let ix = evn.ix;
-					let iy = evn.iy;
-					if (state.snapToGrid) {
-						ix += snap(evn.ix, 0, 64);
-						iy += snap(evn.iy, 0, 64);
-					}
-
-					// If is selected, check if drag is in handles/body and act accordingly
-					if (state.selected) {
-						// Get transformation matrices
-						const bb = {
-							x: state.selected.x,
-							y: state.selected.y,
-							w: state.selected.w,
-							h: state.selected.h,
-						};
-
-						const bbvp = {
-							...viewport.canvasToView(bb.x, bb.y),
-							w: viewport.zoom * bb.w,
-							h: viewport.zoom * bb.h,
-						};
-
-						const ivp = viewport.canvasToView(evn.ix, evn.iy);
-
-						// Viewport Coordinates
-						const centerx = bbvp.x + bbvp.w / 2;
-						const centery = bbvp.y + bbvp.h / 2;
-
-						const matrixvp = new DOMMatrix();
-						matrixvp.translateSelf(centerx, centery);
-						matrixvp.rotateSelf((state.rotation * 180) / Math.PI);
-
-						const imatrixvp = matrixvp.inverse();
-						const cursorvp = imatrixvp.transformPoint(ivp);
-
-						// Check rotation handle
-						let rotationHandle = false;
-
-						const dx = cursorvp.x;
-						const dy = cursorvp.y - (-bbvp.h / 2 - config.rotateHandleDistance);
-						const dmax = config.handleDetectSize / 2;
-
-						if (dx * dx + dy * dy < dmax * dmax) rotationHandle = true;
-
-						// Check handles
-						let activeHandle = null;
-						const testHandle = (hx, hy, hwx, hwy) => {
-							// Handle Detection Range
-							let dhs = config.handleDetectSize;
-
-							const handleBB = new BoundingBox({
-								x: hx - dhs / 2,
-								y: hy - dhs / 2,
-								w: dhs,
-								h: dhs,
-							});
-
-							if (handleBB.contains(cursorvp.x, cursorvp.y)) {
-								activeHandle = state.selected.createHandle(hx, hy);
-							}
-						};
-
-						testHandle(-bbvp.w / 2, -bbvp.h / 2);
-						testHandle(bbvp.w / 2, -bbvp.h / 2);
-						testHandle(-bbvp.w / 2, bbvp.h / 2);
-						testHandle(bbvp.w / 2, bbvp.h / 2);
-
-						if (activeHandle) {
-							state.scaling = activeHandle;
-						} else if (rotationHandle) {
-							state.rotating = true;
-						} else if (state.selected.contains(evn.ix, evn.iy)) {
-							state.moving = {
-								snapOffset: {x: evn.ix - ix, y: evn.iy - iy},
-								offset: {
-									x: ix - state.selected.x,
-									y: iy - state.selected.y,
-								},
-							};
-						}
-						return;
-					}
-					// If it is not, just create new selection
-					state.reset();
-					state.dragging = {ix, iy};
-				};
-
-				// Handles left mouse drag end events
-				state.dragendcb = (evn) => {
-					let x = evn.x;
-					let y = evn.y;
-					if (state.snapToGrid) {
-						x += snap(evn.x, 0, 64);
-						y += snap(evn.y, 0, 64);
-					}
-
-					// If we are scaling, stop scaling and do some handler magic
-					if (state.scaling) {
-						state.selected.updateOriginal();
-						state.scaling = null;
-						// If we are moving the selection, just... stop
-					} else if (state.rotating) {
-						state.rotating = false;
-					} else if (state.moving) {
-						state.moving = null;
-						/**
-						 * If we are dragging, create a cutout selection area and save to an auxiliar image
-						 * We will be rendering the image to the overlay, so it will not be noticeable
-						 */
-					} 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
-						);
-						state.originalLayer = uil.layer;
-						state.originalDisplayLayer = imageCollection.registerLayer(null, {
-							after: uil.layer,
-							category: "select-display",
-						});
-
-						state.rotation = 0;
-
-						// 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(
-							uil.canvas,
-							state.selected.x,
-							state.selected.y,
-							state.selected.w,
-							state.selected.h,
-							0,
-							0,
-							state.selected.w,
-							state.selected.h
-						);
-
-						uil.ctx.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;
-
-						state.selected = new _tool.MarqueeSelection(cvs);
-					}
-					state.redraw();
-				};
-
-				// Handler for right clicks. Basically resets everything
-				state.cancelcb = (evn) => {
-					state.reset();
-				};
-
-				// Keyboard callbacks (For now, they just handle the "delete" key)
-				state.keydowncb = (evn) => {};
-
-				state.keyclickcb = (evn) => {
-					switch (evn.code) {
-						case "Delete":
-							// Deletes selected area
-							state.selected &&
-								commands.runCommand("eraseImage", "Erase Area", state.selected);
-							state.selected = null;
-							state.redraw();
-					}
-				};
-
-				// Register Ctrl-C/V Shortcut
-
-				// Handles copying
-				state.ctrlccb = (evn, cut = false) => {
-					// We create a new canvas to store the data
-					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(
-						state.selected.image,
-						0,
-						0,
-						state.selected.image.width,
-						state.selected.image.height,
-						0,
-						0,
-						state.selected.w,
-						state.selected.h
-					);
-
-					// If cutting, we reverse the selection and erase the selection area
-					if (cut) {
-						const aux = state.original;
-						state.reset();
-
-						commands.runCommand("eraseImage", "Cut Image", aux);
-					}
-
-					// Because firefox needs manual activation of the feature
-					if (state.useClipboard) {
-						// Send to clipboard
-						state.clipboard.copy.toBlob((blob) => {
-							const item = new ClipboardItem({"image/png": blob});
-							navigator.clipboard &&
-								navigator.clipboard.write([item]).catch((e) => {
-									console.warn("Error sending to clipboard");
-									console.warn(e);
-								});
-						});
-					}
-				};
-
-				// Handles pasting
-				state.ctrlvcb = (evn) => {
-					if (state.useClipboard) {
-						// If we use the clipboard, do some proccessing of clipboard data (ugly but kind of minimum required)
-						navigator.clipboard &&
-							navigator.clipboard.read().then((items) => {
-								for (const item of items) {
-									for (const type of item.types) {
-										if (type.startsWith("image/")) {
-											item.getType(type).then(async (blob) => {
-												// Converts blob to image
-												const url = window.URL || window.webkitURL;
-												const image = document.createElement("img");
-												image.src = url.createObjectURL(blob);
-												await image.decode();
-												tools.stamp.enable({
-													image,
-													back: tools.selecttransform.enable,
-												});
-											});
-										}
-									}
-								}
-							});
-					} else if (state.clipboard.copy) {
-						// Use internal clipboard
-						const image = document.createElement("img");
-						image.src = state.clipboard.copy.toDataURL();
-
-						// Send to stamp, as clipboard temporary data
-						tools.stamp.enable({
-							image,
-							back: tools.selecttransform.enable,
-						});
-					}
-				};
-
-				// Cut shortcut. Basically, send to copy handler
-				state.ctrlxcb = (evn) => {
-					state.ctrlccb(evn, true);
-				};
-			},
-			populateContextMenu: (menu, state) => {
-				if (!state.ctxmenu) {
-					state.ctxmenu = {};
-
-					// Snap To Grid Checkbox
-					state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
-						state,
-						"snapToGrid",
-						"Snap To Grid",
-						"icon-grid"
-					).checkbox;
-
-					// Keep Aspect Ratio
-					state.ctxmenu.keepAspectRatioLabel = _toolbar_input.checkbox(
-						state,
-						"keepAspectRatio",
-						"Keep Aspect Ratio",
-						"icon-maximize"
-					).checkbox;
-
-					// Use Clipboard
-					const clipboardCheckbox = _toolbar_input.checkbox(
-						state,
-						"useClipboard",
-						"Use clipboard",
-						"icon-clipboard-list"
-					);
-					state.ctxmenu.useClipboardLabel = clipboardCheckbox.checkbox;
-					if (!(navigator.clipboard && navigator.clipboard.write))
-						clipboardCheckbox.checkbox.disabled = true; // Disable if not available
-
-					// Selection Peek Opacity
-					state.ctxmenu.selectionPeekOpacitySlider = _toolbar_input.slider(
-						state,
-						"selectionPeekOpacity",
-						"Peek Opacity",
-						{
-							min: 0,
-							max: 100,
-							step: 10,
-							textStep: 1,
-							cb: () => {
-								state.redraw();
-							},
-						}
-					).slider;
-
-					// Some useful actions to do with selection
-					const actionArray = document.createElement("div");
-					actionArray.classList.add("button-array");
-
-					// Save button
-					const saveSelectionButton = document.createElement("button");
-					saveSelectionButton.classList.add("button", "tool");
-					saveSelectionButton.textContent = "Save Sel.";
-					saveSelectionButton.title = "Saves Selection";
-					saveSelectionButton.onclick = () => {
-						downloadCanvas({
-							cropToContent: false,
-							canvas: state.selected.image,
-						});
-					};
-
-					// Save as Resource Button
-					const createResourceButton = document.createElement("button");
-					createResourceButton.classList.add("button", "tool");
-					createResourceButton.textContent = "Resource";
-					createResourceButton.title = "Saves Selection as a Resource";
-					createResourceButton.onclick = () => {
-						const image = document.createElement("img");
-						image.src = state.selected.image.toDataURL();
-						image.onload = () => {
-							tools.stamp.state.addResource("Selection Resource", image);
-							tools.stamp.enable();
-						};
-					};
-
-					actionArray.appendChild(saveSelectionButton);
-					actionArray.appendChild(createResourceButton);
-
-					// Some useful actions to do with selection
-					const visibleActionArray = document.createElement("div");
-					visibleActionArray.classList.add("button-array");
-
-					// Save Visible button
-					const saveVisibleSelectionButton = document.createElement("button");
-					saveVisibleSelectionButton.classList.add("button", "tool");
-					saveVisibleSelectionButton.textContent = "Save Vis.";
-					saveVisibleSelectionButton.title = "Saves Visible Selection";
-					saveVisibleSelectionButton.onclick = () => {
-						const canvas = uil.getVisible(state.selected, {
-							categories: ["image", "user", "select-display"],
-						});
-						downloadCanvas({
-							cropToContent: false,
-							canvas,
-						});
-					};
-
-					// Save Visible as Resource Button
-					const createVisibleResourceButton = document.createElement("button");
-					createVisibleResourceButton.classList.add("button", "tool");
-					createVisibleResourceButton.textContent = "Vis. to Res.";
-					createVisibleResourceButton.title =
-						"Saves Visible Selection as a Resource";
-					createVisibleResourceButton.onclick = () => {
-						const canvas = uil.getVisible(state.selected, {
-							categories: ["image", "user", "select-display"],
-						});
-						const image = document.createElement("img");
-						image.src = canvas.toDataURL();
-						image.onload = () => {
-							tools.stamp.state.addResource("Selection Resource", image);
-							tools.stamp.enable();
-						};
-					};
-
-					visibleActionArray.appendChild(saveVisibleSelectionButton);
-					visibleActionArray.appendChild(createVisibleResourceButton);
-
-					// Disable buttons (if nothing is selected)
-					state.ctxmenu.disableButtons = () => {
-						saveSelectionButton.disabled = true;
-						createResourceButton.disabled = true;
-						saveVisibleSelectionButton.disabled = true;
-						createVisibleResourceButton.disabled = true;
-					};
-
-					// Disable buttons (if something is selected)
-					state.ctxmenu.enableButtons = () => {
-						saveSelectionButton.disabled = "";
-						createResourceButton.disabled = "";
-						saveVisibleSelectionButton.disabled = "";
-						createVisibleResourceButton.disabled = "";
-					};
-					state.ctxmenu.actionArray = actionArray;
-					state.ctxmenu.visibleActionArray = visibleActionArray;
-				}
-				const array = document.createElement("div");
-				array.classList.add("checkbox-array");
-				array.appendChild(state.ctxmenu.snapToGridLabel);
-				array.appendChild(state.ctxmenu.keepAspectRatioLabel);
-				array.appendChild(state.ctxmenu.useClipboardLabel);
-				menu.appendChild(array);
-				menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);
-				menu.appendChild(state.ctxmenu.actionArray);
-				menu.appendChild(state.ctxmenu.visibleActionArray);
-			},
-			shortcut: "S",
-		}
-	);
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 4540a26..77c381f 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -466,11 +466,11 @@ const selectTransformTool = () =>
 
 					ctx.clearRect(0, 0, state.selected.w, state.selected.h);
 					ctx.drawImage(
-						state.selected.image,
+						state.selected.canvas,
 						0,
 						0,
-						state.selected.image.width,
-						state.selected.image.height,
+						state.selected.canvas.width,
+						state.selected.canvas.height,
 						0,
 						0,
 						state.selected.w,
@@ -600,7 +600,7 @@ const selectTransformTool = () =>
 					saveSelectionButton.onclick = () => {
 						downloadCanvas({
 							cropToContent: false,
-							canvas: state.selected.image,
+							canvas: state.selected.canvas,
 						});
 					};
 
@@ -611,7 +611,7 @@ const selectTransformTool = () =>
 					createResourceButton.title = "Saves Selection as a Resource";
 					createResourceButton.onclick = () => {
 						const image = document.createElement("img");
-						image.src = state.selected.image.toDataURL();
+						image.src = state.selected.canvas.toDataURL();
 						image.onload = () => {
 							tools.stamp.state.addResource("Selection Resource", image);
 							tools.stamp.enable();

From 5078265d1485331643477799766982a6415c398f Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 12 Jan 2023 20:32:53 -0300
Subject: [PATCH 09/21] fix select click

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html           | 2 +-
 js/ui/tool/select.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index d5a3b04..48a63c1 100644
--- a/index.html
+++ b/index.html
@@ -381,7 +381,7 @@
 			src="js/ui/tool/colorbrush.js?v=3f8c01a"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=2ba26f1"
+			src="js/ui/tool/select.js?v=26b80dd"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 77c381f..9071e41 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -267,8 +267,11 @@ const selectTransformTool = () =>
 							image: canvas,
 							...bb,
 						});
+
+						state.reset(true);
+					} else {
+						state.reset();
 					}
-					state.reset(true);
 				};
 
 				// Handles left mouse drag start events

From d764221d63be31533a556aaf244cea8299d42151 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 12 Jan 2023 21:49:06 -0300
Subject: [PATCH 10/21] support select tool rotation

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html            |   6 +--
 js/config.js          |  15 ++++++
 js/ui/tool/generic.js |  75 ++++++++++++++++++++------
 js/ui/tool/select.js  | 122 ++++++++++++++++++++++--------------------
 4 files changed, 140 insertions(+), 78 deletions(-)

diff --git a/index.html b/index.html
index 48a63c1..8ff9d89 100644
--- a/index.html
+++ b/index.html
@@ -355,7 +355,7 @@
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
-		<script src="js/config.js?v=664f6ee" type="text/javascript"></script>
+		<script src="js/config.js?v=36739c9" type="text/javascript"></script>
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
@@ -370,7 +370,7 @@
 
 		<!-- Load Tools -->
 		<script
-			src="js/ui/tool/generic.js?v=9f1f84e"
+			src="js/ui/tool/generic.js?v=f5ad9d7"
 			type="text/javascript"></script>
 
 		<script src="js/ui/tool/dream.js?v=95c916d" 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=26b80dd"
+			src="js/ui/tool/select.js?v=fae1b04"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
 		<script
diff --git a/js/config.js b/js/config.js
index 6b49e15..8133dab 100644
--- a/js/config.js
+++ b/js/config.js
@@ -21,6 +21,21 @@ const config = makeReadOnly(
 		// Rotate Handle Distance (from selection)
 		rotateHandleDistance: 32,
 
+		// Rotation Snapping Distance
+		rotationSnappingDistance: (10 * Math.PI) / 180,
+		// Rotation Snapping Angles
+		rotationSnappingAngles: [
+			0,
+			Math.PI / 4,
+			Math.PI / 2,
+			(Math.PI * 3) / 4,
+			Math.PI,
+			(Math.PI * 5) / 4,
+			(Math.PI * 6) / 4,
+			(Math.PI * 7) / 4,
+			Math.PI * 2,
+		],
+
 		// Endpoint
 		api: makeReadOnly({path: "/sdapi/v1/"}),
 	},
diff --git a/js/ui/tool/generic.js b/js/ui/tool/generic.js
index b4ee0d4..62d19f1 100644
--- a/js/ui/tool/generic.js
+++ b/js/ui/tool/generic.js
@@ -398,39 +398,55 @@ const _tool = {
 			);
 		}
 
-		hoveringHandle(x, y) {
+		hoveringRotateHandle(x, y, scale = 1) {
+			const localc = this.matrix.inverse().transformPoint({x, y});
+			const localrh = {
+				x: 0,
+				y: -this.canvas.height / 2 - config.rotateHandleDistance * scale,
+			};
+
+			const dx = Math.abs(localc.x - localrh.x);
+			const dy = Math.abs(localc.y - localrh.y);
+
+			return (
+				dx * dx + dy * dy <
+				(scale * scale * config.handleDetectSize * config.handleDetectSize) / 4
+			);
+		}
+
+		hoveringHandle(x, y, scale = 1) {
 			const localbb = new BoundingBox({
-				x: -this.canvas.width / 2,
-				y: -this.canvas.height / 2,
-				w: this.canvas.width,
-				h: this.canvas.height,
+				x: (this.scale.x * -this.canvas.width) / 2,
+				y: (this.scale.y * -this.canvas.height) / 2,
+				w: this.canvas.width * this.scale.x,
+				h: this.canvas.height * this.scale.y,
 			});
 
-			const localc = this.matrix.inverse().transformPoint({x, y});
+			const localc = this.rtmatrix.inverse().transformPoint({x, y});
 			const ontl =
 				Math.max(
 					Math.abs(localc.x - localbb.tl.x),
 					Math.abs(localc.y - localbb.tl.y)
 				) <
-				config.handleDetectSize / 2;
+				(config.handleDetectSize / 2) * scale;
 			const ontr =
 				Math.max(
 					Math.abs(localc.x - localbb.tr.x),
 					Math.abs(localc.y - localbb.tr.y)
 				) <
-				config.handleDetectSize / 2;
+				(config.handleDetectSize / 2) * scale;
 			const onbl =
 				Math.max(
 					Math.abs(localc.x - localbb.bl.x),
 					Math.abs(localc.y - localbb.bl.y)
 				) <
-				config.handleDetectSize / 2;
+				(config.handleDetectSize / 2) * scale;
 			const onbr =
 				Math.max(
 					Math.abs(localc.x - localbb.br.x),
 					Math.abs(localc.y - localbb.br.y)
 				) <
-				config.handleDetectSize / 2;
+				(config.handleDetectSize / 2) * scale;
 
 			return {onHandle: ontl || ontr || onbl || onbr, ontl, ontr, onbl, onbr};
 		}
@@ -459,6 +475,8 @@ const _tool = {
 		 * @param {DOMMatrix} transform A transformation matrix to transform the position by
 		 */
 		drawBox(context, cursor, transform = new DOMMatrix()) {
+			const drawscale =
+				1 / Math.sqrt(transform.a * transform.a + transform.b * transform.b);
 			const m = transform.multiply(this.matrix);
 
 			context.save();
@@ -496,13 +514,32 @@ const _tool = {
 			context.lineTo(tl.x, tl.y);
 			context.stroke();
 
+			// Draw rotation handle
+			context.setLineDash([]);
+
+			const hm = new DOMMatrix().rotateSelf((this.rotation * 180) / Math.PI);
+			const tm = m.transformPoint({x: 0, y: -this.canvas.height / 2});
+			const rho = hm.transformPoint({x: 0, y: -config.rotateHandleDistance});
+			const rh = {x: tm.x + rho.x, y: tm.y + rho.y};
+
+			let handleRadius = config.handleDrawSize / 2;
+			if (this.hoveringRotateHandle(cursor.x, cursor.y, drawscale))
+				handleRadius *= config.handleDrawHoverScale;
+
+			context.beginPath();
+			context.moveTo(tm.x, tm.y);
+			context.lineTo(rh.x, rh.y);
+			context.stroke();
+
+			context.beginPath();
+			context.arc(rh.x, rh.y, handleRadius, 0, 2 * Math.PI);
+			context.stroke();
+
 			// Draw handles
 			const drawHandle = (pt, hover) => {
 				let hsz = config.handleDrawSize / 2;
 				if (hover) hsz *= config.handleDrawHoverScale;
 
-				const hm = new DOMMatrix().rotateSelf(this.rotation);
-
 				const htl = hm.transformPoint({x: -hsz, y: -hsz});
 				const htr = hm.transformPoint({x: hsz, y: -hsz});
 				const hbr = hm.transformPoint({x: hsz, y: hsz});
@@ -521,7 +558,11 @@ const _tool = {
 			context.lineWidth = 2;
 			context.setLineDash([]);
 
-			const {ontl, ontr, onbl, onbr} = this.hoveringHandle(cursor.x, cursor.y);
+			const {ontl, ontr, onbl, onbr} = this.hoveringHandle(
+				cursor.x,
+				cursor.y,
+				drawscale
+			);
 
 			drawHandle(tl, ontl);
 			drawHandle(tr, ontr);
@@ -533,10 +574,10 @@ const _tool = {
 			return () => {
 				const border = config.handleDrawSize * config.handleDrawHoverScale;
 
-				const minx = Math.min(tl.x, tr.x, bl.x, br.x) - border;
-				const maxx = Math.max(tl.x, tr.x, bl.x, br.x) + border;
-				const miny = Math.min(tl.y, tr.y, bl.y, br.y) - border;
-				const maxy = Math.max(tl.y, tr.y, bl.y, br.y) + border;
+				const minx = Math.min(tl.x, tr.x, bl.x, br.x, rh.x) - border;
+				const maxx = Math.max(tl.x, tr.x, bl.x, br.x, rh.x) + border;
+				const miny = Math.min(tl.y, tr.y, bl.y, br.y, rh.y) - border;
+				const maxy = Math.max(tl.y, tr.y, bl.y, br.y, rh.y) + border;
 
 				context.clearRect(minx, miny, maxx - minx, maxy - miny);
 			};
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 9071e41..eac3c29 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -111,6 +111,12 @@ const selectTransformTool = () =>
 					}
 				};
 
+				/** @type {{selected: Point, offset: Point} | null} */
+				let moving = null;
+				/** @type {{handle: Point} | null} */
+				let scaling = null;
+				let rotating = false;
+
 				// Clears selection and make things right
 				state.reset = (erase = false) => {
 					if (state.selected && !erase)
@@ -129,7 +135,9 @@ const selectTransformTool = () =>
 
 					state.rotation = 0;
 					state.original = null;
-					state.moving = false;
+					moving = null;
+					scaling = null;
+					rotating = null;
 
 					state.redraw();
 				};
@@ -137,11 +145,6 @@ const selectTransformTool = () =>
 				// Selection Handlers
 				const selection = _tool._draggable_selection(state);
 
-				/** @type {{selected: Point, offset: Point} | null} */
-				let moving = null;
-				/** @type {{handle: Point} | null} */
-				let scaling = null;
-
 				// UI Erasers
 				let eraseSelectedBox = () => null;
 				let eraseSelectedImage = () => null;
@@ -191,7 +194,8 @@ const selectTransformTool = () =>
 
 						if (
 							state.selected.hoveringBox(x, y) ||
-							state.selected.hoveringHandle(x, y).onHandle
+							state.selected.hoveringHandle(x, y, viewport.zoom).onHandle ||
+							state.selected.hoveringRotateHandle(x, y, viewport.zoom)
 						) {
 							imageCollection.inputElement.style.cursor = "pointer";
 						}
@@ -286,11 +290,16 @@ const selectTransformTool = () =>
 
 					if (state.selected) {
 						const hoveringBox = state.selected.hoveringBox(ix, iy);
-						const hoveringHandle = state.selected.hoveringHandle(ix, iy);
-
-						const localc = state.selected.matrix
-							.inverse()
-							.transformPoint({x: ix, y: iy});
+						const hoveringHandle = state.selected.hoveringHandle(
+							ix,
+							iy,
+							viewport.zoom
+						);
+						const hoveringRotateHandle = state.selected.hoveringRotateHandle(
+							ix,
+							iy,
+							viewport.zoom
+						);
 
 						if (hoveringBox) {
 							// Start dragging
@@ -327,38 +336,56 @@ const selectTransformTool = () =>
 								handle,
 							};
 							return;
+						} else if (hoveringRotateHandle) {
+							rotating = true;
+							return;
 						}
 					}
 					selection.dragstartcb(evn);
 				};
 
+				const transform = (evn, x, y, sx, sy) => {
+					if (moving) {
+						state.selected.position = {
+							x: sx - moving.offset.x,
+							y: sy - moving.offset.y,
+						};
+					}
+
+					if (scaling) {
+						/** @type {DOMMatrix} */
+						const m = state.selected.rtmatrix.invertSelf();
+						const lscursor = m.transformPoint({x: sx, y: sy});
+
+						const xs = lscursor.x / scaling.handle.x;
+						const xy = lscursor.y / scaling.handle.y;
+
+						if (!state.keepAspectRatio) state.selected.scale = {x: xs, y: xy};
+						else {
+							const scale = Math.max(xs, xy);
+							state.selected.scale = {x: scale, y: scale};
+						}
+					}
+
+					if (rotating) {
+						const center = state.selected.matrix.transformPoint({x: 0, y: 0});
+						let angle = Math.atan2(x - center.x, center.y - y);
+
+						if (evn.evn.shiftKey)
+							angle =
+								config.rotationSnappingAngles.find(
+									(v) => Math.abs(v - angle) < config.rotationSnappingDistance
+								) || angle;
+
+						state.selected.rotation = angle;
+					}
+				};
+
 				// Handles left mouse drag events
 				state.dragcb = (evn) => {
 					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
 
-					if (state.selected) {
-						if (moving) {
-							state.selected.position = {
-								x: sx - moving.offset.x,
-								y: sy - moving.offset.y,
-							};
-						}
-
-						if (scaling) {
-							/** @type {DOMMatrix} */
-							const m = state.selected.rtmatrix.invertSelf();
-							const lscursor = m.transformPoint({x: sx, y: sy});
-
-							const xs = lscursor.x / scaling.handle.x;
-							const xy = lscursor.y / scaling.handle.y;
-
-							if (!state.keepAspectRatio) state.selected.scale = {x: xs, y: xy};
-							else {
-								const scale = Math.max(xs, xy);
-								state.selected.scale = {x: scale, y: scale};
-							}
-						}
-					}
+					if (state.selected) transform(evn, x, y, sx, sy);
 
 					if (selection.exists) selection.dragcb(evn);
 				};
@@ -406,32 +433,11 @@ const selectTransformTool = () =>
 						selection.deselect();
 					}
 
-					if (state.selected) {
-						if (moving) {
-							state.selected.position = {
-								x: sx - moving.offset.x,
-								y: sy - moving.offset.y,
-							};
-						}
-
-						if (scaling) {
-							/** @type {DOMMatrix} */
-							const m = state.selected.rtmatrix.invertSelf();
-							const lscursor = m.transformPoint({x: sx, y: sy});
-
-							const xs = lscursor.x / scaling.handle.x;
-							const xy = lscursor.y / scaling.handle.y;
-
-							if (!state.keepAspectRatio) state.selected.scale = {x: xs, y: xy};
-							else {
-								const scale = Math.max(xs, xy);
-								state.selected.scale = {x: scale, y: scale};
-							}
-						}
-					}
+					if (state.selected) transform(evn, x, y, sx, sy);
 
 					moving = null;
 					scaling = null;
+					rotating = false;
 
 					state.redraw();
 				};

From b2e28e77c0e76609d435743541e36d1a0ef712bc Mon Sep 17 00:00:00 2001
From: seijihariki <seijihariki@users.noreply.github.com>
Date: Fri, 13 Jan 2023 00:54:29 +0000
Subject: [PATCH 11/21] Fixed resource hashes

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 0594b19..49b4fb5 100644
--- a/index.html
+++ b/index.html
@@ -338,7 +338,7 @@
 		</div>
 
 		<!-- Basics -->
-		<script src="js/global.js?v=5ee46bd" type="text/javascript"></script>
+		<script src="js/global.js?v=3a1cde6" type="text/javascript"></script>
 
 		<!-- Base Libs -->
 		<script src="js/lib/util.js?v=49a78a6" type="text/javascript"></script>

From e198cf9af4967b25063d5236ecccd123ff99d5a4 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 12 Jan 2023 23:00:34 -0300
Subject: [PATCH 12/21] allow stamp rotation(drag) and scaling(wheel)

also adds shift as a 'finetune' for wheel. works for dream and stamp. if
shift is pressed, wheel will scale slower (not snapping to 128 for
dream, or 0.1 for stamp)

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html           |   8 +--
 js/config.js         |  14 ++---
 js/ui/tool/dream.js  |  18 +++++-
 js/ui/tool/select.js |   2 +-
 js/ui/tool/stamp.js  | 142 ++++++++++++++++++++++++++++++++++++-------
 5 files changed, 147 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index 49b4fb5..7795d08 100644
--- a/index.html
+++ b/index.html
@@ -355,7 +355,7 @@
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
-		<script src="js/config.js?v=36739c9" type="text/javascript"></script>
+		<script src="js/config.js?v=e0345e0" type="text/javascript"></script>
 
 		<!-- Content -->
 		<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
@@ -373,7 +373,7 @@
 			src="js/ui/tool/generic.js?v=f5ad9d7"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=3db7d6c" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=f20dd01" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>
@@ -381,9 +381,9 @@
 			src="js/ui/tool/colorbrush.js?v=3f8c01a"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=fae1b04"
+			src="js/ui/tool/select.js?v=95eba41"
 			type="text/javascript"></script>
-		<script src="js/ui/tool/stamp.js?v=3c07ac8" type="text/javascript"></script>
+		<script src="js/ui/tool/stamp.js?v=1bba5f4" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/interrogate.js?v=e579ff1"
 			type="text/javascript"></script>
diff --git a/js/config.js b/js/config.js
index 8133dab..5f55a75 100644
--- a/js/config.js
+++ b/js/config.js
@@ -25,15 +25,15 @@ const config = makeReadOnly(
 		rotationSnappingDistance: (10 * Math.PI) / 180,
 		// Rotation Snapping Angles
 		rotationSnappingAngles: [
+			(-Math.PI * 4) / 4,
+			(-Math.PI * 3) / 4,
+			(-Math.PI * 2) / 4,
+			(-Math.PI * 1) / 4,
 			0,
-			Math.PI / 4,
-			Math.PI / 2,
+			(Math.PI * 1) / 4,
+			(Math.PI * 2) / 4,
 			(Math.PI * 3) / 4,
-			Math.PI,
-			(Math.PI * 5) / 4,
-			(Math.PI * 6) / 4,
-			(Math.PI * 7) / 4,
-			Math.PI * 2,
+			(Math.PI * 4) / 4,
 		],
 
 		// Endpoint
diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index bfab2c5..c90e022 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -1255,10 +1255,16 @@ const _dream_onwheel = (evn, state) => {
 		return;
 	}
 
-	// A simple but (I hope) effective fix for mouse wheel behavior
-	_dream_wheel_accum += evn.delta;
+	let delta = evn.delta;
+	if (evn.evn.shiftKey) delta *= 0.01;
 
-	if (Math.abs(_dream_wheel_accum) > config.wheelTickSize) {
+	// A simple but (I hope) effective fix for mouse wheel behavior
+	_dream_wheel_accum += delta;
+
+	if (
+		!evn.evn.shiftKey &&
+		Math.abs(_dream_wheel_accum) > config.wheelTickSize
+	) {
 		// Snap to next or previous position
 		const v =
 			state.cursorSize -
@@ -1267,6 +1273,12 @@ const _dream_onwheel = (evn, state) => {
 		state.cursorSize = state.setCursorSize(v + snap(v, 0, 128));
 		state.mousemovecb(evn);
 
+		_dream_wheel_accum = 0; // Zero accumulation
+	} else if (evn.evn.shiftKey && Math.abs(_dream_wheel_accum) >= 1) {
+		const v = state.cursorSize - _dream_wheel_accum;
+		state.cursorSize = state.setCursorSize(v);
+		state.mousemovecb(evn);
+
 		_dream_wheel_accum = 0; // Zero accumulation
 	}
 };
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index eac3c29..32d1a5a 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -375,7 +375,7 @@ const selectTransformTool = () =>
 							angle =
 								config.rotationSnappingAngles.find(
 									(v) => Math.abs(v - angle) < config.rotationSnappingDistance
-								) || angle;
+								) ?? angle;
 
 						state.selected.rotation = angle;
 					}
diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js
index fc1cb89..31cd054 100644
--- a/js/ui/tool/stamp.js
+++ b/js/ui/tool/stamp.js
@@ -1,3 +1,41 @@
+/**
+ * Generic wheel handler
+ */
+let _stamp_wheel_accum = 0;
+
+const _stamp_onwheel = (evn, state) => {
+	if (evn.mode !== WheelEvent.DOM_DELTA_PIXEL) {
+		// We don't really handle non-pixel scrolling
+		return;
+	}
+
+	let delta = evn.delta;
+	if (evn.evn.shiftKey) delta *= 0.01;
+
+	// A simple but (I hope) effective fix for mouse wheel behavior
+	_stamp_wheel_accum += delta;
+
+	if (
+		!evn.evn.shiftKey &&
+		Math.abs(_stamp_wheel_accum) > config.wheelTickSize
+	) {
+		// Snap to next or previous position
+		const v =
+			state.scale - 0.1 * (_stamp_wheel_accum / Math.abs(_stamp_wheel_accum));
+
+		state.setScale(v + snap(v, 0, 0.1));
+		state.redraw(evn);
+
+		_stamp_wheel_accum = 0; // Zero accumulation
+	} else if (evn.evn.shiftKey && Math.abs(_stamp_wheel_accum) >= 1) {
+		const v = state.scale - _stamp_wheel_accum * 0.01;
+		state.setScale(v);
+		state.redraw(evn);
+
+		_stamp_wheel_accum = 0; // Zero accumulation
+	}
+};
+
 const stampTool = () =>
 	toolbar.registerTool(
 		"./res/icons/file-up.svg",
@@ -14,6 +52,12 @@ const stampTool = () =>
 			mouse.listen.world.btn.left.onclick.on(state.drawcb);
 			mouse.listen.world.btn.right.onclick.on(state.cancelcb);
 
+			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);
+
+			mouse.listen.world.onwheel.on(state.onwheelcb);
+
 			// For calls from other tools to paste image
 			if (opt && opt.image) {
 				state.addResource(
@@ -41,6 +85,12 @@ const stampTool = () =>
 			mouse.listen.world.btn.left.onclick.clear(state.drawcb);
 			mouse.listen.world.btn.right.onclick.clear(state.cancelcb);
 
+			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.onwheel.clear(state.onwheelcb);
+
 			ovLayer.clear();
 		},
 		{
@@ -54,7 +104,15 @@ const stampTool = () =>
 				state.lastMouseMove = {x: 0, y: 0};
 				state.block_res_change = true;
 
+				// Current Rotation
+				let rotation = 0;
+				let rotating = null;
+				// Current Scale
+				state.scale = 1;
+
 				state.selectResource = (resource, nolock = true, deselect = true) => {
+					rotation = 0;
+					state.setScale(1);
 					if (nolock && state.ctxmenu.uploadButton.disabled) return;
 
 					console.debug(
@@ -290,32 +348,65 @@ const stampTool = () =>
 					syncResources();
 				};
 
-				state.movecb = (evn) => {
-					let x = evn.x;
-					let y = evn.y;
-					if (state.snapToGrid) {
-						x += snap(evn.x, 0, 64);
-						y += snap(evn.y, 0, 64);
+				state.onwheelcb = (evn) => {
+					_stamp_onwheel(evn, state);
+				};
+
+				state.dragstartcb = (evn) => {
+					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
+					rotating = {x: sx, y: sy};
+				};
+
+				state.dragcb = (evn) => {
+					if (rotating) {
+						rotation = Math.atan2(rotating.x - evn.x, evn.y - rotating.y);
+
+						if (evn.evn.shiftKey)
+							rotation =
+								config.rotationSnappingAngles.find(
+									(v) =>
+										Math.abs(v - rotation) < config.rotationSnappingDistance
+								) ?? rotation;
 					}
+				};
 
-					const vpc = viewport.canvasToView(x, y);
-					uiCtx.clearRect(0, 0, uiCanvas.width, uiCanvas.height);
-					state.erasePrevCursor && state.erasePrevCursor();
+				state.dragendcb = (evn) => {
+					rotating = null;
+				};
 
-					uiCtx.save();
+				let erasePrevCursor = () => null;
+
+				state.movecb = (evn) => {
+					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
+
+					// Erase Previous Cursors
+					erasePrevCursor();
 
 					state.lastMouseMove = evn;
 
 					ovLayer.clear();
 
+					let px = sx;
+					let py = sy;
+
+					if (rotating) {
+						px = rotating.x;
+						py = rotating.y;
+					}
+
 					// Draw selected image
 					if (state.selected) {
-						ovCtx.drawImage(state.selected.image, x, y);
+						ovCtx.save();
+						ovCtx.translate(px, py);
+						ovCtx.scale(state.scale, state.scale);
+						ovCtx.rotate(rotation);
+
+						ovCtx.drawImage(state.selected.image, 0, 0);
+						ovCtx.restore();
 					}
 
 					// Draw current cursor location
-					state.erasePrevCursor = _tool._cursor_draw(x, y);
-					uiCtx.restore();
+					erasePrevCursor = _tool._cursor_draw(px, py);
 				};
 
 				state.redraw = () => {
@@ -323,20 +414,16 @@ const stampTool = () =>
 				};
 
 				state.drawcb = (evn) => {
-					let x = evn.x;
-					let y = evn.y;
-					if (state.snapToGrid) {
-						x += snap(evn.x, 0, 64);
-						y += snap(evn.y, 0, 64);
-					}
+					const {x, y, sx, sy} = _tool._process_cursor(evn, state.snapToGrid);
 
 					const resource = state.selected;
 
 					if (resource) {
+						const {canvas, bb} = cropCanvas(ovCanvas, {border: 10});
 						commands.runCommand("drawImage", "Image Stamp", {
-							image: resource.image,
-							x,
-							y,
+							image: canvas,
+							x: bb.x,
+							y: bb.y,
 						});
 
 						if (resource.temporary) {
@@ -380,6 +467,16 @@ const stampTool = () =>
 					);
 					state.ctxmenu.snapToGridLabel = array;
 
+					// Scale Slider
+					const scaleSlider = _toolbar_input.slider(state, "scale", "Scale", {
+						min: 0.01,
+						max: 10,
+						step: 0.1,
+						textStep: 0.01,
+					});
+					state.ctxmenu.scaleSlider = scaleSlider.slider;
+					state.setScale = scaleSlider.setValue;
+
 					// Create resource list
 					const uploadButtonId = `upload-btn-${guid()}`;
 
@@ -528,6 +625,7 @@ const stampTool = () =>
 			},
 			populateContextMenu: (menu, state) => {
 				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				menu.appendChild(state.ctxmenu.scaleSlider);
 				menu.appendChild(state.ctxmenu.resourceManager);
 			},
 			shortcut: "U",

From b590b6d124c7ac41989c5cce530dd203ca588cdd Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 12 Jan 2023 23:03:15 -0300
Subject: [PATCH 13/21] remove debugging by default

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html                     | 2 +-
 js/initalize/debug.populate.js | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 7795d08..9cc895f 100644
--- a/index.html
+++ b/index.html
@@ -396,7 +396,7 @@
 			src="js/initalize/toolbar.populate.js?v=c1ca438"
 			type="text/javascript"></script>
 		<script
-			src="js/initalize/debug.populate.js?v=76f8c89"
+			src="js/initalize/debug.populate.js?v=64ad17f"
 			type="text/javascript"></script>
 		<script
 			src="js/initalize/ui.populate.js?v=b59b288"
diff --git a/js/initalize/debug.populate.js b/js/initalize/debug.populate.js
index 4ca3f8f..0843bf7 100644
--- a/js/initalize/debug.populate.js
+++ b/js/initalize/debug.populate.js
@@ -31,5 +31,3 @@ mouse.listen.world.onmousemove.on((evn) => {
 		debugCtx.fill();
 	}
 });
-
-window.addEventListener("DOMContentLoaded", () => (global.debug = true));

From 51095160f1cb17b1d8226dc4de04fdbc64aaffa8 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Thu, 12 Jan 2023 23:41:01 -0300
Subject: [PATCH 14/21] fix scaled rotate handle

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html            | 4 ++--
 js/ui/tool/generic.js | 6 ++++--
 js/ui/tool/stamp.js   | 2 +-
 pages/embed.test.html | 4 ++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 9cc895f..e4fc4b4 100644
--- a/index.html
+++ b/index.html
@@ -370,7 +370,7 @@
 
 		<!-- Load Tools -->
 		<script
-			src="js/ui/tool/generic.js?v=f5ad9d7"
+			src="js/ui/tool/generic.js?v=3e678e0"
 			type="text/javascript"></script>
 
 		<script src="js/ui/tool/dream.js?v=f20dd01" type="text/javascript"></script>
@@ -383,7 +383,7 @@
 		<script
 			src="js/ui/tool/select.js?v=95eba41"
 			type="text/javascript"></script>
-		<script src="js/ui/tool/stamp.js?v=1bba5f4" type="text/javascript"></script>
+		<script src="js/ui/tool/stamp.js?v=4a86ff8" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/interrogate.js?v=e579ff1"
 			type="text/javascript"></script>
diff --git a/js/ui/tool/generic.js b/js/ui/tool/generic.js
index 62d19f1..04073b8 100644
--- a/js/ui/tool/generic.js
+++ b/js/ui/tool/generic.js
@@ -399,10 +399,12 @@ const _tool = {
 		}
 
 		hoveringRotateHandle(x, y, scale = 1) {
-			const localc = this.matrix.inverse().transformPoint({x, y});
+			const localc = this.rtmatrix.inverse().transformPoint({x, y});
 			const localrh = {
 				x: 0,
-				y: -this.canvas.height / 2 - config.rotateHandleDistance * scale,
+				y:
+					(-this.scale.y * this.canvas.height) / 2 -
+					config.rotateHandleDistance * scale,
 			};
 
 			const dx = Math.abs(localc.x - localrh.x);
diff --git a/js/ui/tool/stamp.js b/js/ui/tool/stamp.js
index 31cd054..2ac60bd 100644
--- a/js/ui/tool/stamp.js
+++ b/js/ui/tool/stamp.js
@@ -472,7 +472,7 @@ const stampTool = () =>
 						min: 0.01,
 						max: 10,
 						step: 0.1,
-						textStep: 0.01,
+						textStep: 0.001,
 					});
 					state.ctxmenu.scaleSlider = scaleSlider.slider;
 					state.setScale = scaleSlider.setValue;
diff --git a/pages/embed.test.html b/pages/embed.test.html
index 729eacd..b4ac0ab 100644
--- a/pages/embed.test.html
+++ b/pages/embed.test.html
@@ -8,8 +8,8 @@
 		<iframe
 			id="openoutpaint"
 			style="width: 100%; height: 800px"
-			src="../index.html?v=95a96ad"
-			src="../index.html?v=95a96ad"
+			src="../index.html?v=daf18de"
+			src="../index.html?v=daf18de"
 			frameborder="0"></iframe>
 		<button id="add-res">Add Resource</button>
 		<script>

From 4f73aba5c27f2655974ad9023da93a97db547a1f Mon Sep 17 00:00:00 2001
From: tim h <zero01101@gmail.com>
Date: Sat, 14 Jan 2023 09:47:50 -0600
Subject: [PATCH 15/21] lmao you are really making me feel guilty about not
 merging your version ;)

---
 js/ui/tool/dream.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js
index c90e022..bce7e3b 100644
--- a/js/ui/tool/dream.js
+++ b/js/ui/tool/dream.js
@@ -799,20 +799,6 @@ const _generate = async (endpoint, request, bb, options = {}) => {
 	});
 	imageSelectMenu.appendChild(resourcebtn);
 
-	const deletebtn = document.createElement("button");
-	deletebtn.textContent = "D";
-	deletebtn.title = "Delete Image";
-	deletebtn.addEventListener("click", async () => {
-		images.splice(at, 1);
-		seeds.splice(at, 1);
-
-		at = Math.min(at, images.length - 1);
-
-		imageindextxt.textContent = `${at}/${images.length - 1}`;
-		redraw();
-	});
-	imageSelectMenu.appendChild(deletebtn);
-
 	const savebtn = document.createElement("button");
 	savebtn.textContent = "S";
 	savebtn.title = "Download image to computer";

From 90e637380e8a36b839ac38822e6f6dda6154b0cb Mon Sep 17 00:00:00 2001
From: zero01101 <zero01101@users.noreply.github.com>
Date: Sat, 14 Jan 2023 15:48:16 +0000
Subject: [PATCH 16/21] Fixed resource hashes

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index e4fc4b4..29dd5dc 100644
--- a/index.html
+++ b/index.html
@@ -373,7 +373,7 @@
 			src="js/ui/tool/generic.js?v=3e678e0"
 			type="text/javascript"></script>
 
-		<script src="js/ui/tool/dream.js?v=f20dd01" type="text/javascript"></script>
+		<script src="js/ui/tool/dream.js?v=eb98dc9" type="text/javascript"></script>
 		<script
 			src="js/ui/tool/maskbrush.js?v=1e8a893"
 			type="text/javascript"></script>

From 4bbffb82aab5667fb37397be33e2c1662e0dff8a Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sat, 14 Jan 2023 18:42:43 -0300
Subject: [PATCH 17/21] fix giant check for chrome (again)

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/ui/generic.css       | 1 +
 index.html               | 2 +-
 pages/configuration.html | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/css/ui/generic.css b/css/ui/generic.css
index 801e2ba..09eb6ea 100644
--- a/css/ui/generic.css
+++ b/css/ui/generic.css
@@ -231,6 +231,7 @@ div.autocomplete > .autocomplete-list {
 }
 
 div.autocomplete > .autocomplete-list > .autocomplete-option {
+	position: relative;
 	cursor: pointer;
 
 	overflow: hidden;
diff --git a/index.html b/index.html
index 29dd5dc..53b8b87 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 		<link href="css/index.css?v=5b8d4d6" rel="stylesheet" />
 		<link href="css/layers.css?v=92c0352" rel="stylesheet" />
 
-		<link href="css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
+		<link href="css/ui/generic.css?v=802bd41" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
diff --git a/pages/configuration.html b/pages/configuration.html
index 3243ab6..583721f 100644
--- a/pages/configuration.html
+++ b/pages/configuration.html
@@ -10,7 +10,7 @@
 		<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" />
 		<link href="../css/layers.css?v=92c0352" rel="stylesheet" />
 
-		<link href="../css/ui/generic.css?v=4b9afe2" rel="stylesheet" />
+		<link href="../css/ui/generic.css?v=802bd41" rel="stylesheet" />
 
 		<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
 		<link href="../css/ui/layers.css?v=4fd95fe" rel="stylesheet" />

From dcb84a8de8bdb62f696b7b586b84b38b616fa96d Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sat, 14 Jan 2023 18:44:31 -0300
Subject: [PATCH 18/21] fix fancy checkbox icons

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/icons.css            | 2 ++
 index.html               | 2 +-
 pages/configuration.html | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/css/icons.css b/css/icons.css
index e808b3b..d1c89d7 100644
--- a/css/icons.css
+++ b/css/icons.css
@@ -17,7 +17,9 @@
 	bottom: 15%;
 
 	mask-size: contain;
+	-webkit-mask-size: contain;
 	mask-repeat: no-repeat;
+	-webkit-mask-repeat: no-repeat;
 
 	max-height: 70%;
 	aspect-ratio: 1;
diff --git a/index.html b/index.html
index 53b8b87..543ee99 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="css/colors.css?v=3f81e80" rel="stylesheet" />
-		<link href="css/icons.css?v=caa702e" rel="stylesheet" />
+		<link href="css/icons.css?v=9ae0466" rel="stylesheet" />
 
 		<link href="css/index.css?v=5b8d4d6" rel="stylesheet" />
 		<link href="css/layers.css?v=92c0352" rel="stylesheet" />
diff --git a/pages/configuration.html b/pages/configuration.html
index 583721f..0dd887e 100644
--- a/pages/configuration.html
+++ b/pages/configuration.html
@@ -5,7 +5,7 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
-		<link href="../css/icons.css?v=caa702e" rel="stylesheet" />
+		<link href="../css/icons.css?v=9ae0466" rel="stylesheet" />
 
 		<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" />
 		<link href="../css/layers.css?v=92c0352" rel="stylesheet" />

From c30314b2ac14beb759f03613457d43261afb9c74 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sat, 14 Jan 2023 18:46:01 -0300
Subject: [PATCH 19/21] remove now irrelevant TODO

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html           | 2 +-
 js/ui/tool/select.js | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 543ee99..be27d75 100644
--- a/index.html
+++ b/index.html
@@ -381,7 +381,7 @@
 			src="js/ui/tool/colorbrush.js?v=3f8c01a"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=95eba41"
+			src="js/ui/tool/select.js?v=e27bbdf"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=4a86ff8" type="text/javascript"></script>
 		<script
diff --git a/js/ui/tool/select.js b/js/ui/tool/select.js
index 32d1a5a..794ff7a 100644
--- a/js/ui/tool/select.js
+++ b/js/ui/tool/select.js
@@ -1,7 +1,3 @@
-/**
- * TODO: REFACTOR THIS WHOLE THING
- */
-
 const selectTransformTool = () =>
 	toolbar.registerTool(
 		"./res/icons/box-select.svg",

From a591b209140a5a5ed9d8eaa9573f5f8ddf46b105 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sat, 14 Jan 2023 18:53:46 -0300
Subject: [PATCH 20/21] fix infinite recursion on zoom

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 index.html                      | 4 ++--
 js/initalize/layers.populate.js | 3 +--
 js/lib/toolbar.js               | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index be27d75..e159383 100644
--- a/index.html
+++ b/index.html
@@ -347,11 +347,11 @@
 		<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
 		<script src="js/lib/commands.js?v=bf23c83" type="text/javascript"></script>
 
-		<script src="js/lib/toolbar.js?v=b3ffbff" type="text/javascript"></script>
+		<script src="js/lib/toolbar.js?v=306d637" type="text/javascript"></script>
 		<script src="js/lib/ui.js?v=76ede2b" type="text/javascript"></script>
 
 		<script
-			src="js/initalize/layers.populate.js?v=fcca23e"
+			src="js/initalize/layers.populate.js?v=39785ac"
 			type="text/javascript"></script>
 
 		<!-- Configuration -->
diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js
index cda7d89..296d087 100644
--- a/js/initalize/layers.populate.js
+++ b/js/initalize/layers.populate.js
@@ -322,8 +322,7 @@ mouse.listen.camera.onwheel.on((evn) => {
 
 	//viewport.transform(imageCollection.element);
 
-	toolbar._current_tool.state.redrawui &&
-		toolbar._current_tool.state.redrawui();
+	toolbar._current_tool.redrawui && toolbar._current_tool.redrawui();
 });
 
 const cameraPaintStart = (evn) => {
diff --git a/js/lib/toolbar.js b/js/lib/toolbar.js
index 47be1e8..6706410 100644
--- a/js/lib/toolbar.js
+++ b/js/lib/toolbar.js
@@ -91,7 +91,7 @@ const toolbar = {
 			enabled: false,
 			_element: null,
 			state: {
-				redrawui: () => tool.redraw(),
+				redrawui: () => tool.state.redraw && tool.state.redraw(),
 			},
 			options,
 			/**

From b5c72392d81ab56272de390dff2f547ad52959b8 Mon Sep 17 00:00:00 2001
From: Victor Seiji Hariki <victorseijih@gmail.com>
Date: Sat, 14 Jan 2023 18:54:58 -0300
Subject: [PATCH 21/21] fix expand canvas icons

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
---
 css/ui/layers.css        | 2 ++
 index.html               | 2 +-
 pages/configuration.html | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/css/ui/layers.css b/css/ui/layers.css
index c433b9c..385498d 100644
--- a/css/ui/layers.css
+++ b/css/ui/layers.css
@@ -158,7 +158,9 @@
 
 	background-color: #293d3d77;
 
+	-webkit-mask-image: url("../../res/icons/chevron-up.svg");
 	mask-image: url("../../res/icons/chevron-up.svg");
+	-webkit-mask-size: contain;
 	mask-size: contain;
 
 	width: 60px;
diff --git a/index.html b/index.html
index e159383..c5fbb50 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
 		<link href="css/ui/generic.css?v=802bd41" rel="stylesheet" />
 
 		<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
-		<link href="css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
+		<link href="css/ui/layers.css?v=ae472cd" rel="stylesheet" />
 		<link href="css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
 
 		<!-- Tool Specific CSS -->
diff --git a/pages/configuration.html b/pages/configuration.html
index 0dd887e..a182188 100644
--- a/pages/configuration.html
+++ b/pages/configuration.html
@@ -13,7 +13,7 @@
 		<link href="../css/ui/generic.css?v=802bd41" rel="stylesheet" />
 
 		<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
-		<link href="../css/ui/layers.css?v=4fd95fe" rel="stylesheet" />
+		<link href="../css/ui/layers.css?v=ae472cd" rel="stylesheet" />
 		<link href="../css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
 
 		<!-- Tool Specific CSS -->