@sequent-org/moodboard 1.2.80 → 1.2.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.2.80",
+  "version": "1.2.82",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/ui/HtmlHandlesLayer.js

@@ -201,7 +201,7 @@ export class HtmlHandlesLayer {
         if (!this.layer) return;
         // Преобразуем world координаты в CSS-пиксели
         const view = this.core.pixi.app.view;
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
+        const rendererRes = (this.core.pixi.app.renderer?.resolution) || 1;
         const containerRect = this.container.getBoundingClientRect();
         const viewRect = view.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
@@ -227,10 +227,11 @@ export class HtmlHandlesLayer {
         // Вычисляем позицию и размер через математику сцены (toGlobal) и переводим в CSS px
         const tl = world.toGlobal(new PIXI.Point(worldBounds.x, worldBounds.y));
         const br = world.toGlobal(new PIXI.Point(worldBounds.x + worldBounds.width, worldBounds.y + worldBounds.height));
-        const cssX = offsetLeft + (tl.x / res);
-        const cssY = offsetTop + (tl.y / res);
-        const cssWidth = Math.max(1, (br.x - tl.x) / res);
-        const cssHeight = Math.max(1, (br.y - tl.y) / res);
+        // Используем координаты в CSS-пикселях напрямую (Pixi toGlobal выдаёт экранные px)
+        const cssX = offsetLeft + tl.x;
+        const cssY = offsetTop + tl.y;
+        const cssWidth = Math.max(1, (br.x - tl.x));
+        const cssHeight = Math.max(1, (br.y - tl.y));
 
         const left = Math.round(cssX);
         const top = Math.round(cssY);
@@ -391,8 +392,8 @@ export class HtmlHandlesLayer {
     _toWorldScreenInverse(dx, dy) {
         const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
         const s = world?.scale?.x || 1;
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
-        return { dxWorld: (dx * res) / s, dyWorld: (dy * res) / s };
+        // dx, dy приходят в CSS-пикселях; для world делим только на масштаб
+        return { dxWorld: dx / s, dyWorld: dy / s };
     }
 
     _onHandleDown(e, box) {
@@ -404,9 +405,8 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
-        const view = this.core.pixi.app.view;
         const containerRect = this.container.getBoundingClientRect();
+        const view = this.core.pixi.app.view;
         const viewRect = view.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
         const offsetTop = viewRect.top - containerRect.top;
@@ -418,10 +418,10 @@ export class HtmlHandlesLayer {
             height: parseFloat(box.style.height),
         };
         const startScreen = {
-            x: (startCSS.left - offsetLeft) * res,
-            y: (startCSS.top - offsetTop) * res,
-            w: startCSS.width * res,
-            h: startCSS.height * res,
+            x: (startCSS.left - offsetLeft),
+            y: (startCSS.top - offsetTop),
+            w: startCSS.width,
+            h: startCSS.height,
         };
         const startWorld = {
             x: (startScreen.x - tx) / s,
@@ -564,10 +564,10 @@ export class HtmlHandlesLayer {
             this._repositionBoxChildren(box);
 
             // Перевод в мировые координаты
-            const screenX = (newLeft - offsetLeft) * res;
-            const screenY = (newTop - offsetTop) * res;
-            const screenW = newW * res;
-            const screenH = newH * res;
+            const screenX = (newLeft - offsetLeft);
+            const screenY = (newTop - offsetTop);
+            const screenW = newW;
+            const screenH = newH;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -612,10 +612,10 @@ export class HtmlHandlesLayer {
                 width: parseFloat(box.style.width),
                 height: parseFloat(box.style.height),
             };
-            const screenX = (endCSS.left - offsetLeft) * res;
-            const screenY = (endCSS.top - offsetTop) * res;
-            const screenW = endCSS.width * res;
-            const screenH = endCSS.height * res;
+            const screenX = (endCSS.left - offsetLeft);
+            const screenY = (endCSS.top - offsetTop);
+            const screenW = endCSS.width;
+            const screenH = endCSS.height;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -681,9 +681,8 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
-        const res = (this.core.pixi.app.renderer?.resolution) || 1;
-        const view = this.core.pixi.app.view;
         const containerRect = this.container.getBoundingClientRect();
+        const view = this.core.pixi.app.view;
         const viewRect = view.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
         const offsetTop = viewRect.top - containerRect.top;
@@ -696,10 +695,10 @@ export class HtmlHandlesLayer {
             height: parseFloat(box.style.height),
         };
         const startScreen = {
-            x: (startCSS.left - offsetLeft) * res,
-            y: (startCSS.top - offsetTop) * res,
-            w: startCSS.width * res,
-            h: startCSS.height * res,
+            x: (startCSS.left - offsetLeft),
+            y: (startCSS.top - offsetTop),
+            w: startCSS.width,
+            h: startCSS.height,
         };
         const startWorld = {
             x: (startScreen.x - tx) / s,
@@ -827,10 +826,10 @@ export class HtmlHandlesLayer {
             this._repositionBoxChildren(box);
 
             // Перевод в мировые координаты
-            const screenX = (newLeft - offsetLeft) * res;
-            const screenY = (newTop - offsetTop) * res;
-            const screenW = newW * res;
-            const screenH = newH * res;
+            const screenX = (newLeft - offsetLeft);
+            const screenY = (newTop - offsetTop);
+            const screenW = newW;
+            const screenH = newH;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -864,10 +863,10 @@ export class HtmlHandlesLayer {
                 width: parseFloat(box.style.width),
                 height: parseFloat(box.style.height),
             };
-            const screenX = (endCSS.left - offsetLeft) * res;
-            const screenY = (endCSS.top - offsetTop) * res;
-            const screenW = endCSS.width * res;
-            const screenH = endCSS.height * res;
+            const screenX = (endCSS.left - offsetLeft);
+            const screenY = (endCSS.top - offsetTop);
+            const screenW = endCSS.width;
+            const screenH = endCSS.height;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -889,7 +888,7 @@ export class HtmlHandlesLayer {
                             el.style.width = `${Math.max(1, Math.round(endCSS.width))}px`;
                             el.style.height = 'auto';
                             const measured = Math.max(1, Math.round(el.scrollHeight));
-                            finalWorldH = (measured * res) / s;
+                            finalWorldH = (measured) / s;
                         }
                     } catch (_) {}
                 }