expand input field relative to drawable canvas

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

js/initalize/layers.populate.js

@@ -63,8 +63,8 @@ mouse.registerContext(
 		ctx.coords.prev.y = ctx.coords.pos.y;
 
 		if (evn.layerX !== evn.clientX || evn.layerY !== evn.clientY) {
-			ctx.coords.pos.x = evn.layerX;
-			ctx.coords.pos.y = evn.layerY;
+			ctx.coords.pos.x = Math.round(evn.layerX + imageCollection.inputOffset.x);
+			ctx.coords.pos.y = Math.round(evn.layerY + imageCollection.inputOffset.y);
 			return;
 		}
 

js/lib/layers.js

@@ -28,6 +28,9 @@ const layers = {
 				options: {},
 			},
 
+			// Input multiplier (Size of the input element div)
+			inputSizeMultiplier: 999,
+
 			// Target
 			targetElement: document.getElementById("layer-render"),
 
@@ -35,6 +38,8 @@ const layers = {
 			resolution: size,
 		});
 
+		if (options.inputSizeMultiplier % 2 === 0) options.inputSizeMultiplier++;
+
 		// Path used for logging purposes
 		const _logpath = "layers.collections." + key;
 
@@ -51,8 +56,6 @@ const layers = {
 		// Input element (overlay element for input handling)
 		const inputel = document.createElement("div");
 		inputel.id = `collection-input-${id}`;
-		inputel.style.width = `${size.w}px`;
-		inputel.style.height = `${size.h}px`;
 		inputel.addEventListener("mouseover", (evn) => {
 			document.activeElement.blur();
 		});
@@ -73,6 +76,28 @@ const layers = {
 				name: options.name,
 				element,
 				inputElement: inputel,
+				_inputOffset: null,
+				get inputOffset() {
+					return this._inputOffset;
+				},
+
+				_resizeInputDiv() {
+					// Set offset
+					this._inputOffset = {
+						x: -Math.floor(options.inputSizeMultiplier / 2) * size.w,
+						y: -Math.floor(options.inputSizeMultiplier / 2) * size.h,
+					};
+
+					// Resize the input element
+					this.inputElement.style.left = `${this.inputOffset.x}px`;
+					this.inputElement.style.top = `${this.inputOffset.y}px`;
+					this.inputElement.style.width = `${
+						size.w * options.inputSizeMultiplier
+					}px`;
+					this.inputElement.style.height = `${
+						size.h * options.inputSizeMultiplier
+					}px`;
+				},
 
 				size,
 				resolution: options.resolution,
@@ -278,9 +303,12 @@ const layers = {
 					else console.debug(`[layers] Anonymous layer '${lobj.id}' deleted`);
 				},
 			},
-			_logpath
+			_logpath,
+			["_inputOffset"]
 		);
 
+		collection._resizeInputDiv();
+
 		layers._collections.push(collection);
 		layers.collections[key] = collection;
 

js/ui/tool/dream.js

@@ -135,8 +135,8 @@ const _generate = async (
 	const makeElement = (type, x, y) => {
 		const el = document.createElement(type);
 		el.style.position = "absolute";
-		el.style.left = `${x}px`;
-		el.style.top = `${y}px`;
+		el.style.left = `${x - imageCollection.inputOffset.x}px`;
+		el.style.top = `${y - imageCollection.inputOffset.y}px`;
 
 		// We can use the input element to add interactible html elements in the world
 		imageCollection.inputElement.appendChild(el);