From 216e0e270fbd4fb283020a95a9399f0d85ca1f31 Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Mon, 8 Feb 2021 20:11:06 -0500
Subject: [PATCH] Fix selection+textbox ghost inverty effect

---
 src/$Handles.js          | 14 +++++++-------
 src/OnCanvasSelection.js |  2 +-
 src/OnCanvasTextBox.js   |  2 +-
 src/app.js               |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/$Handles.js b/src/$Handles.js
index b948d6c..66b63bf 100644
--- a/src/$Handles.js
+++ b/src/$Handles.js
@@ -1,5 +1,5 @@
 
-function $Handles($container, options){
+function $Handles($handles_container, $ghost_container, options){
 	const outset = options.outset || 0;
 	const get_offset_left = options.get_offset_left || (() => 0);
 	const get_offset_top = options.get_offset_top || (() => 0);
@@ -23,7 +23,7 @@ function $Handles($container, options){
 		const x_axis = pos[1];
 		
 		const $h = $(E("div")).addClass("handle");
-		$h.appendTo($container);
+		$h.appendTo($handles_container);
 		
 		$h.attr("touch-action", "none");
 		
@@ -57,7 +57,7 @@ function $Handles($container, options){
 			$h.css({cursor});
 			
 			const drag = (event) => {
-				$resize_ghost.appendTo($container);
+				$resize_ghost.appendTo($ghost_container);
 				dragged = true;
 				
 				rect = options.get_rect();
@@ -103,8 +103,8 @@ function $Handles($container, options){
 				const inset = options.thick ? 3 : 0;
 				$resize_ghost.css({
 					position: "absolute",
-					left: magnification * (new_rect.x - rect.x) + inset,
-					top: magnification * (new_rect.y - rect.y) + inset,
+					left: magnification * new_rect.x + inset,
+					top: magnification * new_rect.y + inset,
 					width: magnification * new_rect.width - inset * 2,
 					height: magnification * new_rect.height - inset * 2,
 				});
@@ -124,7 +124,7 @@ function $Handles($container, options){
 					if(dragged){
 						options.set_rect(rect);
 					}
-					$container.trigger("update");
+					$handles_container.trigger("update");
 				});
 			});
 			$h.on("mousedown selectstart", event => {
@@ -155,7 +155,7 @@ function $Handles($container, options){
 			});
 		};
 		
-		$container.on("update resize scroll", update_handle);
+		$handles_container.on("update resize scroll", update_handle);
 		$G.on("resize theme-load", update_handle);
 		setTimeout(update_handle, 50);
 		
diff --git a/src/OnCanvasSelection.js b/src/OnCanvasSelection.js
index 414c6f3..25960a4 100644
--- a/src/OnCanvasSelection.js
+++ b/src/OnCanvasSelection.js
@@ -56,7 +56,7 @@ class OnCanvasSelection extends OnCanvasObject {
 				this.cut_out_background();
 			}
 			this.$el.append(this.canvas);
-			this.$handles = $Handles(this.$el, {
+			this.$handles = $Handles(this.$el, $canvas_area, {
 				outset: 2,
 				get_rect: ()=> ({x: this.x, y: this.y, width: this.width, height: this.height}),
 				set_rect: ({x, y, width, height}) => {
diff --git a/src/OnCanvasTextBox.js b/src/OnCanvasTextBox.js
index d6dd1ff..e0dcde2 100644
--- a/src/OnCanvasTextBox.js
+++ b/src/OnCanvasTextBox.js
@@ -132,7 +132,7 @@ class OnCanvasTextBox extends OnCanvasObject {
 		
 		this.$el.append(this.$editor);
 		this.$editor[0].focus();
-		this.$handles = $Handles(this.$el, {
+		this.$handles = $Handles(this.$el, $canvas_area, {
 			outset: 2,
 			thick: true,
 			get_rect: ()=> ({x: this.x, y: this.y, width: this.width, height: this.height}),
diff --git a/src/app.js b/src/app.js
index ac8b671..ebad3a9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -309,7 +309,7 @@ const $canvas_area = $(E("div")).addClass("canvas-area").appendTo($H);
 const $canvas = $(canvas).appendTo($canvas_area);
 $canvas.attr("touch-action", "none");
 let canvas_bounding_client_rect = canvas.getBoundingClientRect(); // cached for performance, updated later
-const $canvas_handles = $Handles($canvas_area, {
+const $canvas_handles = $Handles($canvas_area, $canvas_area, {
 	get_rect: ()=> ({x: 0, y: 0, width: canvas.width, height: canvas.height}),
 	set_rect: ({width, height})=> resize_canvas_and_save_dimensions(width, height),
 	outset: 4,