@sequent-org/moodboard 1.2.97 → 1.2.99

package/package.json

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

package/src/tools/object-tools/SelectTool.js

@@ -2690,29 +2690,27 @@ export class SelectTool extends BaseTool {
                         const worldLayerRef = this.textEditor.world || (this.app?.stage);
                         const cssLeft = this.textEditor._cssLeftPx;
                         const cssTop = this.textEditor._cssTopPx;
-                        if (isFinite(cssLeft) && isFinite(cssTop) && worldLayerRef && view && view.parentElement) {
+                        if (view && view.parentElement && isFinite(cssLeft) && isFinite(cssTop) && worldLayerRef) {
                             // Ждем один тик, чтобы HtmlTextLayer успел обновить DOM
                             setTimeout(() => {
                                 try {
-                                    // Используем тот же подход что в toScreen, но в обратном направлении
+                                    // Инвертируем ту же трансформацию, что использует HtmlHandlesLayer/HtmlTextLayer:
+                                    // world → toGlobal → offset → CSS px
                                     const containerRect = view.parentElement.getBoundingClientRect();
                                     const viewRect = view.getBoundingClientRect();
                                     const offsetLeft = viewRect.left - containerRect.left;
                                     const offsetTop = viewRect.top - containerRect.top;
-                                    
-                                    // Преобразуем CSS координаты в экранные (учитывая offset)
+                                    // CSS → экранные координаты внутри canvas
                                     const screenX = cssLeft - offsetLeft;
                                     const screenY = cssTop - offsetTop;
-                                    
-                                    // Преобразуем экранные координаты в мировые
+                                    // Экранные → мировые координаты через toLocal
                                     const desiredWorld = worldLayerRef.toLocal(new PIXI.Point(screenX, screenY));
                                     const newPos = { x: Math.round(desiredWorld.x), y: Math.round(desiredWorld.y) };
-                                    
                                     this.eventBus.emit(Events.Object.StateChanged, {
                                         objectId,
                                         updates: { position: newPos }
                                     });
-                                    console.log('🧭 Text post-show align', { objectId, cssLeft, cssTop, screenX, screenY, newPos });
+                                    console.log('🧭 Text post-show align', { objectId, cssLeft, cssTop, newPos });
                                 } catch (_) {}
                             }, 0);
                         }

package/src/ui/HtmlTextLayer.js

@@ -1,4 +1,5 @@
 import { Events } from '../core/events/Events.js';
+import * as PIXI from 'pixi.js';
 
 /**
  * HtmlTextLayer — рисует текст как HTML-элементы поверх PIXI для максимальной чёткости
@@ -258,7 +259,7 @@ export class HtmlTextLayer {
         if (!el || !this.core) return;
         
         console.log(`🔍 HtmlTextLayer: обновляю позицию для текста ${objectId}`);
-        
+
         const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
         const s = world?.scale?.x || 1;
         const tx = world?.x || 0;
@@ -308,7 +309,12 @@ export class HtmlTextLayer {
         // Позиция и габариты в CSS координатах - используем тот же подход что в HtmlHandlesLayer
         const worldLayer = this.core.pixi.worldLayer || this.core.pixi.app.stage;
         const view = this.core.pixi.app.view;
-        
+        // Эти переменные нужны и для лога ниже, поэтому задаём их тут
+        let logLeft = 0;
+        let logTop = 0;
+        let logWidth = 0;
+        let logHeight = 0;
+
         if (worldLayer && view && view.parentElement) {
             const containerRect = view.parentElement.getBoundingClientRect();
             const viewRect = view.getBoundingClientRect();
@@ -324,13 +330,20 @@ export class HtmlTextLayer {
             const top = offsetTop + tl.y;
             const width = Math.max(1, br.x - tl.x);
             const height = Math.max(1, br.y - tl.y);
-            
+
+            // Применяем к элементу
             el.style.left = `${left}px`;
             el.style.top = `${top}px`;
             if (w && h) {
                 el.style.width = `${width}px`;
                 el.style.height = `${height}px`;
             }
+
+            // Значения для лога
+            logLeft = left;
+            logTop = top;
+            logWidth = width;
+            logHeight = height;
         } else {
             // Fallback к старому методу
             const left = (tx + s * x) / res;
@@ -338,9 +351,15 @@ export class HtmlTextLayer {
             el.style.left = `${left}px`;
             el.style.top = `${top}px`;
             if (w && h) {
-                el.style.width = `${Math.max(1, (w * s) / res)}px`;
-                el.style.height = `${Math.max(1, (h * s) / res)}px`;
+                const cssW = Math.max(1, (w * s) / res);
+                const cssH = Math.max(1, (h * s) / res);
+                el.style.width = `${cssW}px`;
+                el.style.height = `${cssH}px`;
+                logWidth = cssW;
+                logHeight = cssH;
             }
+            logLeft = left;
+            logTop = top;
         }
         // Поворот вокруг центра (как у PIXI и HTML-ручек)
         el.style.transformOrigin = 'center center';
@@ -356,15 +375,19 @@ export class HtmlTextLayer {
         try {
             el.style.height = 'auto';
             // Добавим небольшой нижний отступ для хвостов букв, чтобы не отсекались (например, у «з»)
-            const h = Math.max(1, Math.round(el.scrollHeight + 2));
-            el.style.height = `${h}px`;
+            const hCss = Math.max(1, Math.round(el.scrollHeight + 2));
+            el.style.height = `${hCss}px`;
+            // Обновим высоту для лога, если её ещё не устанавливали
+            if (!logHeight) {
+                logHeight = hCss;
+            }
         } catch (_) {}
         
         console.log(`🔍 HtmlTextLayer: позиция обновлена для ${objectId}:`, {
-            left: `${left}px`,
-            top: `${top}px`,
-            width: `${Math.max(1, (w * s) / res)}px`,
-            height: `${Math.max(1, (h * s) / res)}px`,
+            left: `${logLeft}px`,
+            top: `${logTop}px`,
+            width: `${logWidth}px`,
+            height: `${logHeight}px`,
             fontSize: `${fontSizePx}px`,
             content: content,
             visibility: el.style.visibility,