diff --git a/js/initalize/layers.populate.js b/js/initalize/layers.populate.js index b867f0f..7237035 100644 --- a/js/initalize/layers.populate.js +++ b/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; } diff --git a/js/lib/layers.js b/js/lib/layers.js index 7c32372..9e4c8d6 100644 --- a/js/lib/layers.js +++ b/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; diff --git a/js/ui/tool/dream.js b/js/ui/tool/dream.js index b466e33..e8b57aa 100644 --- a/js/ui/tool/dream.js +++ b/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);