@sequent-org/moodboard 1.2.95 → 1.2.97

package/package.json

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

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

@@ -1847,9 +1847,21 @@ export class SelectTool extends BaseTool {
         const toScreen = (wx, wy) => {
             const worldLayer = this.textEditor.world || (this.app?.stage);
             if (!worldLayer) return { x: wx, y: wy };
+            
+            // Используем тот же подход, что в HtmlHandlesLayer для рамки выделения
+            const containerRect = view.parentElement.getBoundingClientRect();
+            const viewRect = view.getBoundingClientRect();
+            const offsetLeft = viewRect.left - containerRect.left;
+            const offsetTop = viewRect.top - containerRect.top;
+            
+            // Преобразуем мировые координаты в экранные через toGlobal
             const global = worldLayer.toGlobal(new PIXI.Point(wx, wy));
-            const viewRes = (this.app?.renderer?.resolution) || (view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
-            return { x: global.x / viewRes, y: global.y / viewRes };
+            
+            // Возвращаем CSS координаты с учетом offset
+            return { 
+                x: offsetLeft + global.x, 
+                y: offsetTop + global.y 
+            };
         };
         const screenPos = toScreen(position.x, position.y);
         
@@ -2676,21 +2688,31 @@ export class SelectTool extends BaseTool {
                     try {
                         const view = this.app?.view;
                         const worldLayerRef = this.textEditor.world || (this.app?.stage);
-                        const viewRes = (this.app?.renderer?.resolution) || (view && view.width && view.clientWidth ? (view.width / view.clientWidth) : 1);
                         const cssLeft = this.textEditor._cssLeftPx;
                         const cssTop = this.textEditor._cssTopPx;
-                        if (isFinite(cssLeft) && isFinite(cssTop) && worldLayerRef) {
+                        if (isFinite(cssLeft) && isFinite(cssTop) && worldLayerRef && view && view.parentElement) {
                             // Ждем один тик, чтобы HtmlTextLayer успел обновить DOM
                             setTimeout(() => {
                                 try {
-                                    const desiredGlobal = new PIXI.Point(Math.round(cssLeft * viewRes), Math.round(cssTop * viewRes));
-                                    const desiredWorld = worldLayerRef.toLocal(desiredGlobal);
+                                    // Используем тот же подход что в toScreen, но в обратном направлении
+                                    const containerRect = view.parentElement.getBoundingClientRect();
+                                    const viewRect = view.getBoundingClientRect();
+                                    const offsetLeft = viewRect.left - containerRect.left;
+                                    const offsetTop = viewRect.top - containerRect.top;
+                                    
+                                    // Преобразуем CSS координаты в экранные (учитывая offset)
+                                    const screenX = cssLeft - offsetLeft;
+                                    const screenY = cssTop - offsetTop;
+                                    
+                                    // Преобразуем экранные координаты в мировые
+                                    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, newPos });
+                                    console.log('🧭 Text post-show align', { objectId, cssLeft, cssTop, screenX, screenY, newPos });
                                 } catch (_) {}
                             }, 0);
                         }

package/src/ui/HtmlTextLayer.js

@@ -305,14 +305,42 @@ export class HtmlTextLayer {
             el.style.lineHeight = newLH;
         }
 
-        // Позиция и габариты в экранных координатах
-        const left = (tx + s * x) / res;
-        const top = (ty + s * y) / res;
-        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`;
+        // Позиция и габариты в CSS координатах - используем тот же подход что в HtmlHandlesLayer
+        const worldLayer = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+        const view = this.core.pixi.app.view;
+        
+        if (worldLayer && view && view.parentElement) {
+            const containerRect = view.parentElement.getBoundingClientRect();
+            const viewRect = view.getBoundingClientRect();
+            const offsetLeft = viewRect.left - containerRect.left;
+            const offsetTop = viewRect.top - containerRect.top;
+            
+            // Преобразуем мировые координаты в экранные через toGlobal
+            const tl = worldLayer.toGlobal(new PIXI.Point(x, y));
+            const br = worldLayer.toGlobal(new PIXI.Point(x + w, y + h));
+            
+            // CSS координаты с учетом offset
+            const left = offsetLeft + tl.x;
+            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`;
+            }
+        } else {
+            // Fallback к старому методу
+            const left = (tx + s * x) / res;
+            const top = (ty + s * y) / res;
+            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`;
+            }
         }
         // Поворот вокруг центра (как у PIXI и HTML-ручек)
         el.style.transformOrigin = 'center center';