Make handles work in the Modern theme

src/$Handles.js

@@ -1,7 +1,8 @@
 
 function $Handles($container, element, options){
 	var outset = options.outset || 0;
-	var offset = options.offset || 0;
+	var get_offset_left = options.get_offset_left || function(){ return 0; };
+	var get_offset_top = options.get_offset_top || function(){ return 0; };
 	var size_only = options.size_only || false;
 	var el = element;
 	$container.on("new-element", function(e, element){
@@ -84,8 +85,8 @@ function $Handles($container, element, options){
 				}
 				$resize_ghost.css({
 					position: "absolute",
-					left: magnification * delta_x + offset,
-					top: magnification * delta_y + offset,
+					left: magnification * delta_x + get_offset_left(),
+					top: magnification * delta_y + get_offset_top(),
 					width: magnification * width,
 					height: magnification * height,
 				});
@@ -116,18 +117,18 @@ function $Handles($container, element, options){
 			var rect = el.getBoundingClientRect();
 			var hs = $h.width();
 			if(x_axis === "middle"){
-				$h.css({ left: offset + (rect.width - hs) / 2 });
+				$h.css({ left: get_offset_left() + (rect.width - hs) / 2 });
 			}else if(x_axis === "left"){
-				$h.css({ left: offset - outset });
+				$h.css({ left: get_offset_left() - outset });
 			}else if(x_axis === "right"){
-				$h.css({ left: offset + (rect.width - hs/2) });
+				$h.css({ left: get_offset_left() + (rect.width - hs/2) });
 			}
 			if(y_axis === "middle"){
-				$h.css({ top: offset + (rect.height - hs) / 2 });
+				$h.css({ top: get_offset_top() + (rect.height - hs) / 2 });
 			}else if(y_axis === "top"){
-				$h.css({ top: offset - outset });
+				$h.css({ top: get_offset_top() - outset });
 			}else if(y_axis === "bottom"){
-				$h.css({ top: offset + (rect.height - hs/2) });
+				$h.css({ top: get_offset_top() + (rect.height - hs/2) });
 			}
 		};
 

src/OnCanvasObject.js

@@ -11,10 +11,12 @@ function OnCanvasObject(x, y, width, height){
 }
 
 OnCanvasObject.prototype.position = function(){
+	var offset_left = parseFloat($canvas_area.css("padding-left"));
+	var offset_top = parseFloat($canvas_area.css("padding-top"));
 	this.$el.css({
 		position: "absolute",
-		left: magnification * this.x + 3,
-		top: magnification * this.y + 3,
+		left: magnification * this.x + offset_left,
+		top: magnification * this.y + offset_top,
 		width: magnification * this.width,
 		height: magnification * this.height,
 	});

src/app.js

@@ -62,7 +62,12 @@ $canvas_area.attr("touch-action", "pan-x pan-y");
 var $canvas = $(canvas).appendTo($canvas_area);
 $canvas.attr("touch-action", "none");
 
-var $canvas_handles = $Handles($canvas_area, canvas, {outset: 4, offset: 4, size_only: true});
+var $canvas_handles = $Handles($canvas_area, canvas, {
+	outset: 4,
+	get_offset_left: function(){ return parseFloat($canvas_area.css("padding-left")) + 1; },
+	get_offset_top: function(){ return parseFloat($canvas_area.css("padding-top")) + 1; },
+	size_only: true
+});
 
 var $top = $(E("div")).addClass("component-area").prependTo($V);
 var $bottom = $(E("div")).addClass("component-area").appendTo($V);

styles/layout.css

@@ -341,3 +341,7 @@ html, body, .jspaint {
 ::before, ::after {
 	pointer-events: none;
 }
+
+.cursor-bully * {
+	cursor: inherit !important;
+}

styles/themes/classic.css

@@ -39,9 +39,6 @@
 	/*outline: 1px dotted invert;*/
 	/* I want this to be inverty, but in chrome this makes it invisible */
 }
-.cursor-bully * {
-	cursor: inherit !important;
-}
 
 .menus *,
 .menu-popup * {

styles/themes/modern.css

@@ -18,6 +18,32 @@ body {
 	image-rendering: pixelated;
 }
 
+.selection:after,
+.textbox:after {
+	content: '';
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	right: 0px;
+	bottom: 0px;
+	border: 1px dashed black;
+}
+.handle {
+	background: #000080;
+	/* TODO: enlarge handles for usability (need to update code to handle it though) */
+	/* width: 5px;
+	height: 5px; */
+}
+.useless-handle {
+	background: #fff;
+	box-shadow: 1px 1px 0 #000080 inset;
+}
+.resize-ghost {
+	outline: 1px dotted black;
+	/*outline: 1px dotted invert;*/
+	/* I want this to be inverty, but in chrome this makes it invisible */
+}
+
 .window,
 .menu-popup {
 	border-radius: 2px;