@sequent-org/moodboard 1.2.79 → 1.2.81

package/package.json

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

package/src/ui/HtmlHandlesLayer.js

@@ -201,11 +201,7 @@ export class HtmlHandlesLayer {
         if (!this.layer) return;
         // Преобразуем world координаты в CSS-пиксели
         const view = this.core.pixi.app.view;
-        // Динамически вычисляем фактическое соотношение пикселей canvas/CSS,
-        // чтобы корректно работать при зуме браузера
-        const res = (view && view.width && view.clientWidth) 
-            ? (view.width / view.clientWidth) 
-            : (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;
@@ -228,11 +224,15 @@ export class HtmlHandlesLayer {
             isFrameTarget = mbType === 'frame';
         }
 
-        // Вычисляем позицию и размер в CSS координатах, округляем до целых px
-        const cssX = offsetLeft + (worldX + worldBounds.x * worldScale) / res;
-        const cssY = offsetTop + (worldY + worldBounds.y * worldScale) / res;
-        const cssWidth = Math.max(1, (worldBounds.width * worldScale) / res);
-        const cssHeight = Math.max(1, (worldBounds.height * worldScale) / res);
+        // Вычисляем позицию и размер через математику сцены (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));
+        // Отношение пикселей canvas к CSS-пикселям (устойчиво к зуму браузера и autoDensity)
+        const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : rendererRes;
+        const cssX = offsetLeft + (tl.x / pxPerCss);
+        const cssY = offsetTop + (tl.y / pxPerCss);
+        const cssWidth = Math.max(1, (br.x - tl.x) / pxPerCss);
+        const cssHeight = Math.max(1, (br.y - tl.y) / pxPerCss);
 
         const left = Math.round(cssX);
         const top = Math.round(cssY);
@@ -394,10 +394,9 @@ export class HtmlHandlesLayer {
         const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
         const s = world?.scale?.x || 1;
         const view = this.core.pixi.app.view;
-        const res = (view && view.width && view.clientWidth) 
-            ? (view.width / view.clientWidth) 
-            : (this.core.pixi.app.renderer?.resolution || 1);
-        return { dxWorld: (dx * res) / s, dyWorld: (dy * res) / s };
+        const viewRect = view.getBoundingClientRect();
+        const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : ((this.core.pixi.app.renderer?.resolution) || 1);
+        return { dxWorld: (dx * pxPerCss) / s, dyWorld: (dy * pxPerCss) / s };
     }
 
     _onHandleDown(e, box) {
@@ -410,11 +409,9 @@ export class HtmlHandlesLayer {
         const tx = world?.x || 0;
         const ty = world?.y || 0;
         const view = this.core.pixi.app.view;
-        const res = (view && view.width && view.clientWidth) 
-            ? (view.width / view.clientWidth) 
-            : (this.core.pixi.app.renderer?.resolution || 1);
-        const containerRect = this.container.getBoundingClientRect();
         const viewRect = view.getBoundingClientRect();
+        const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : ((this.core.pixi.app.renderer?.resolution) || 1);
+        const containerRect = this.container.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
         const offsetTop = viewRect.top - containerRect.top;
 
@@ -425,10 +422,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) * pxPerCss,
+            y: (startCSS.top - offsetTop) * pxPerCss,
+            w: startCSS.width * pxPerCss,
+            h: startCSS.height * pxPerCss,
         };
         const startWorld = {
             x: (startScreen.x - tx) / s,
@@ -571,10 +568,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) * pxPerCss;
+            const screenY = (newTop - offsetTop) * pxPerCss;
+            const screenW = newW * pxPerCss;
+            const screenH = newH * pxPerCss;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -619,10 +616,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) * pxPerCss;
+            const screenY = (endCSS.top - offsetTop) * pxPerCss;
+            const screenW = endCSS.width * pxPerCss;
+            const screenH = endCSS.height * pxPerCss;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -689,11 +686,9 @@ export class HtmlHandlesLayer {
         const tx = world?.x || 0;
         const ty = world?.y || 0;
         const view = this.core.pixi.app.view;
-        const res = (view && view.width && view.clientWidth) 
-            ? (view.width / view.clientWidth) 
-            : (this.core.pixi.app.renderer?.resolution || 1);
-        const containerRect = this.container.getBoundingClientRect();
         const viewRect = view.getBoundingClientRect();
+        const pxPerCss = (view && view.width && viewRect.width) ? (view.width / viewRect.width) : ((this.core.pixi.app.renderer?.resolution) || 1);
+        const containerRect = this.container.getBoundingClientRect();
         const offsetLeft = viewRect.left - containerRect.left;
         const offsetTop = viewRect.top - containerRect.top;
 
@@ -705,10 +700,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) * pxPerCss,
+            y: (startCSS.top - offsetTop) * pxPerCss,
+            w: startCSS.width * pxPerCss,
+            h: startCSS.height * pxPerCss,
         };
         const startWorld = {
             x: (startScreen.x - tx) / s,
@@ -836,10 +831,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) * pxPerCss;
+            const screenY = (newTop - offsetTop) * pxPerCss;
+            const screenW = newW * pxPerCss;
+            const screenH = newH * pxPerCss;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -873,10 +868,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) * pxPerCss;
+            const screenY = (endCSS.top - offsetTop) * pxPerCss;
+            const screenW = endCSS.width * pxPerCss;
+            const screenH = endCSS.height * pxPerCss;
             const worldX = (screenX - tx) / s;
             const worldY = (screenY - ty) / s;
             const worldW = screenW / s;
@@ -898,7 +893,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 * pxPerCss) / s;
                         }
                     } catch (_) {}
                 }