@sequent-org/moodboard 1.2.81 → 1.2.83

package/package.json

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

package/src/moodboard/MoodBoard.js

@@ -101,6 +101,13 @@ export class MoodBoard {
             // Инициализируем UI
             this.initToolbar();
             this.initTopbar();
+            // Включаем дефолтную сетку (вариант 1 — line), если у доски нет сохранённой
+            try {
+                const savedGridType = this.coreMoodboard?.state?.state?.board?.grid?.type;
+                if (!savedGridType && this.settingsApplier) {
+                    this.settingsApplier.apply({ grid: { type: 'line' } });
+                }
+            } catch (_) {}
             this.initZoombar();
             this.initMapbar();
             this.initContextMenu();

package/src/ui/HtmlHandlesLayer.js

@@ -227,12 +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));
-        // Отношение пикселей 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);
+        // Используем координаты в 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);
@@ -393,10 +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 view = this.core.pixi.app.view;
-        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 };
+        // dx, dy приходят в CSS-пикселях; для world делим только на масштаб
+        return { dxWorld: dx / s, dyWorld: dy / s };
     }
 
     _onHandleDown(e, box) {
@@ -408,10 +405,9 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
+        const containerRect = this.container.getBoundingClientRect();
         const view = this.core.pixi.app.view;
         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;
 
@@ -422,10 +418,10 @@ export class HtmlHandlesLayer {
             height: parseFloat(box.style.height),
         };
         const startScreen = {
-            x: (startCSS.left - offsetLeft) * pxPerCss,
-            y: (startCSS.top - offsetTop) * pxPerCss,
-            w: startCSS.width * pxPerCss,
-            h: startCSS.height * pxPerCss,
+            x: (startCSS.left - offsetLeft),
+            y: (startCSS.top - offsetTop),
+            w: startCSS.width,
+            h: startCSS.height,
         };
         const startWorld = {
             x: (startScreen.x - tx) / s,
@@ -568,10 +564,10 @@ export class HtmlHandlesLayer {
             this._repositionBoxChildren(box);
 
             // Перевод в мировые координаты
-            const screenX = (newLeft - offsetLeft) * pxPerCss;
-            const screenY = (newTop - offsetTop) * pxPerCss;
-            const screenW = newW * pxPerCss;
-            const screenH = newH * pxPerCss;
+            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;
@@ -616,10 +612,10 @@ export class HtmlHandlesLayer {
                 width: parseFloat(box.style.width),
                 height: parseFloat(box.style.height),
             };
-            const screenX = (endCSS.left - offsetLeft) * pxPerCss;
-            const screenY = (endCSS.top - offsetTop) * pxPerCss;
-            const screenW = endCSS.width * pxPerCss;
-            const screenH = endCSS.height * pxPerCss;
+            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;
@@ -685,10 +681,9 @@ export class HtmlHandlesLayer {
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
         const ty = world?.y || 0;
+        const containerRect = this.container.getBoundingClientRect();
         const view = this.core.pixi.app.view;
         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;
 
@@ -700,10 +695,10 @@ export class HtmlHandlesLayer {
             height: parseFloat(box.style.height),
         };
         const startScreen = {
-            x: (startCSS.left - offsetLeft) * pxPerCss,
-            y: (startCSS.top - offsetTop) * pxPerCss,
-            w: startCSS.width * pxPerCss,
-            h: startCSS.height * pxPerCss,
+            x: (startCSS.left - offsetLeft),
+            y: (startCSS.top - offsetTop),
+            w: startCSS.width,
+            h: startCSS.height,
         };
         const startWorld = {
             x: (startScreen.x - tx) / s,
@@ -831,10 +826,10 @@ export class HtmlHandlesLayer {
             this._repositionBoxChildren(box);
 
             // Перевод в мировые координаты
-            const screenX = (newLeft - offsetLeft) * pxPerCss;
-            const screenY = (newTop - offsetTop) * pxPerCss;
-            const screenW = newW * pxPerCss;
-            const screenH = newH * pxPerCss;
+            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;
@@ -868,10 +863,10 @@ export class HtmlHandlesLayer {
                 width: parseFloat(box.style.width),
                 height: parseFloat(box.style.height),
             };
-            const screenX = (endCSS.left - offsetLeft) * pxPerCss;
-            const screenY = (endCSS.top - offsetTop) * pxPerCss;
-            const screenW = endCSS.width * pxPerCss;
-            const screenH = endCSS.height * pxPerCss;
+            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;
@@ -893,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 * pxPerCss) / s;
+                            finalWorldH = (measured) / s;
                         }
                     } catch (_) {}
                 }