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] 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();