@sequent-org/moodboard 1.2.94 → 1.2.96

package/package.json

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

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

@@ -530,7 +530,6 @@ export class PlacementTool extends BaseTool {
         const world = this.app.stage.getChildByName && this.app.stage.getChildByName('worldLayer');
         return world || this.app.stage;
     }
-    
 
     /**
      * Обработчик движения мыши для обновления позиции "призрака"

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);
         
@@ -2032,30 +2044,10 @@ export class SelectTool extends BaseTool {
                 }
             } catch (_) {}
 
-            // Учитываем масштаб браузера для позиционирования формы редактирования
-            const zoomFactor = this._getBrowserZoomFactor();
-            const correctedBaseLeftPx = baseLeftPx / zoomFactor;
-            const correctedBaseTopPx = baseTopPx / zoomFactor;
-            
-            console.log('🔍 Browser zoom detection:', { 
-                zoomFactor, 
-                basePos: { left: baseLeftPx, top: baseTopPx },
-                correctedPos: { left: correctedBaseLeftPx, top: correctedBaseTopPx },
-                screenPos,
-                window: {
-                    innerWidth: window.innerWidth,
-                    outerWidth: window.outerWidth,
-                    visualViewport: window.visualViewport ? {
-                        width: window.visualViewport.width,
-                        height: window.visualViewport.height
-                    } : null
-                }
-            });
-            
-            const leftPx = Math.round(correctedBaseLeftPx - padLeft);
+            const leftPx = Math.round(baseLeftPx - padLeft);
             const topPx = create
-                ? Math.round(correctedBaseTopPx - padTop - (lineHeightPx / 2)) // по клику совмещаем центр строки с точкой клика
-                : Math.round(correctedBaseTopPx - padTop); // при редактировании совмещаем верх контента
+                ? Math.round(baseTopPx - padTop - (lineHeightPx / 2)) // по клику совмещаем центр строки с точкой клика
+                : Math.round(baseTopPx - padTop); // при редактировании совмещаем верх контента
             wrapper.style.left = `${leftPx}px`;
             wrapper.style.top = `${topPx}px`;
             // Сохраняем CSS-позицию редактора для точной синхронизации при закрытии
@@ -2824,84 +2816,5 @@ export class SelectTool extends BaseTool {
         // Обновляем ручки
         this.updateResizeHandles();
     }
-    
-    /**
-     * Получение коэффициента масштабирования браузера
-     */
-    _getBrowserZoomFactor() {
-        // Новый подход: через измерение canvas размеров
-        try {
-            if (this.app && this.app.view) {
-                const canvas = this.app.view;
-                
-                // Получаем CSS размеры и реальные размеры canvas
-                const cssWidth = canvas.clientWidth;
-                const cssHeight = canvas.clientHeight;
-                const realWidth = canvas.width;
-                const realHeight = canvas.height;
-                
-                // Проверяем device pixel ratio
-                const dpr = window.devicePixelRatio || 1;
-                
-                // Вычисляем ожидаемые реальные размеры с учетом DPR
-                const expectedRealWidth = cssWidth * dpr;
-                const expectedRealHeight = cssHeight * dpr;
-                
-                // Если реальные размеры отличаются от ожидаемых, значит есть zoom
-                let zoomFactorW = 1.0;
-                let zoomFactorH = 1.0;
-                
-                if (expectedRealWidth > 0) {
-                    zoomFactorW = realWidth / expectedRealWidth;
-                }
-                if (expectedRealHeight > 0) {
-                    zoomFactorH = realHeight / expectedRealHeight;
-                }
-                
-                // Берем среднее значение или наиболее близкое к 1.0
-                const avgZoom = (zoomFactorW + zoomFactorH) / 2;
-                
-                console.log('🔍 Canvas zoom detection:', {
-                    css: { width: cssWidth, height: cssHeight },
-                    real: { width: realWidth, height: realHeight },
-                    dpr,
-                    expected: { width: expectedRealWidth, height: expectedRealHeight },
-                    zoom: { width: zoomFactorW, height: zoomFactorH, avg: avgZoom }
-                });
-                
-                // Если обнаружили разумное отклонение от 1.0, используем его
-                if (isFinite(avgZoom) && avgZoom > 0.1 && avgZoom < 10 && Math.abs(avgZoom - 1.0) > 0.01) {
-                    return avgZoom;
-                }
-            }
-        } catch (_) {}
-        
-        // Fallback: простой метод через screen размеры
-        try {
-            // Сравниваем screen.width с window.innerWidth
-            const screenRatio = screen.width / window.innerWidth;
-            const dpr = window.devicePixelRatio || 1;
-            const expectedRatio = dpr;
-            
-            if (Math.abs(screenRatio - expectedRatio) > 0.1) {
-                const zoomFactor = screenRatio / expectedRatio;
-                
-                console.log('🔍 Screen zoom detection:', {
-                    screen: { width: screen.width, height: screen.height },
-                    window: { innerWidth: window.innerWidth, innerHeight: window.innerHeight },
-                    screenRatio,
-                    expectedRatio,
-                    zoomFactor
-                });
-                
-                if (isFinite(zoomFactor) && zoomFactor > 0.1 && zoomFactor < 10) {
-                    return zoomFactor;
-                }
-            }
-        } catch (_) {}
-        
-        console.log('🔍 Zoom detection: using fallback (no zoom correction)');
-        return 1.0; // Fallback: без коррекции
-    }
 
 }

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

@@ -1,4 +1,21 @@
 import { BaseTool } from '../BaseTool.js';
+import iCursorSvg from '../../assets/icons/i-cursor.svg?raw';
+
+// Масштабируем I-курсор в 2 раза меньше (примерно 16x32 с сохранением пропорций 1:2)
+const _scaledICursorSvg = (() => {
+    try {
+        if (!/\bwidth="/i.test(iCursorSvg)) {
+            return iCursorSvg.replace('<svg ', '<svg width="16px" height="32px" ');
+        }
+        return iCursorSvg
+            .replace(/width="[^"]+"/i, 'width="16px"')
+            .replace(/height="[^"]+"/i, 'height="32px"');
+    } catch (_) {
+        return iCursorSvg;
+    }
+})();
+
+const TEXT_CURSOR = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(_scaledICursorSvg)}") 0 0, text`;
 
 /**
  * Инструмент для создания и редактирования текстовых объектов
@@ -6,7 +23,7 @@ import { BaseTool } from '../BaseTool.js';
 export class TextTool extends BaseTool {
     constructor(eventBus) {
         super('text', eventBus);
-        this.cursor = 'text';
+		this.cursor = 'text';
         this.hotkey = 't';
         this.container = null;
         
@@ -32,35 +49,13 @@ export class TextTool extends BaseTool {
     onMouseDown(event) {
         super.onMouseDown(event);
         
-        // Учитываем масштаб браузера для корректных координат
-        const zoomFactor = this._getBrowserZoomFactor();
-        const correctedX = event.x * zoomFactor;
-        const correctedY = event.y * zoomFactor;
-        
-        // Диагностика координат для решения проблемы с масштабом браузера
-        console.log('🔍 TextTool onMouseDown диагностика:', {
-            'исходные event.x/y': { x: event.x, y: event.y },
-            'zoomFactor': zoomFactor,
-            'исправленные x/y': { x: correctedX, y: correctedY },
-            'window.devicePixelRatio': window.devicePixelRatio,
-            'масштаб браузера': window.outerWidth / window.innerWidth
-        });
-        
-        // Преобразуем экранные координаты в мировые координаты PIXI
-        const worldPoint = this._toWorld(correctedX, correctedY);
-        
-        console.log('🔍 Преобразование координат:', {
-            'исправленные': { x: correctedX, y: correctedY },
-            'мировые': worldPoint
-        });
-        
         // Проверяем, кликнули ли на существующий текстовый объект
-        const hitObject = this.getTextObjectAt(correctedX, correctedY);
+        const hitObject = this.getTextObjectAt(event.x, event.y);
         
         if (hitObject) {
             this.startEditing(hitObject, event);
         } else {
-            this.createNewText(worldPoint.x, worldPoint.y);
+            this.createNewText(event.x, event.y);
         }
     }
     
@@ -137,19 +132,10 @@ export class TextTool extends BaseTool {
     /**
      * Создание HTML input для редактирования текста
      */
-    createTextInput(worldX, worldY, initialText) {
+    createTextInput(x, y, initialText) {
         // Удаляем предыдущий input если есть
         this.removeTextInput();
         
-        // Преобразуем мировые координаты в экранные для HTML элемента
-        const screenPos = this._toScreen(worldX, worldY);
-        
-        console.log('🔍 Позиционирование input:', {
-            'мировые координаты': { x: worldX, y: worldY },
-            'экранные координаты': screenPos,
-            'container': this.getContainer()
-        });
-        
         // Создаем новый input
         this.textInput = document.createElement('textarea');
         this.textInput.value = initialText;
@@ -158,8 +144,8 @@ export class TextTool extends BaseTool {
         // Стили input
         Object.assign(this.textInput.style, {
             position: 'absolute',
-            left: `${screenPos.x}px`,
-            top: `${screenPos.y}px`,
+            left: `${x}px`,
+            top: `${y}px`,
             border: '2px solid #007bff',
             borderRadius: '4px',
             padding: '4px 8px',
@@ -415,15 +401,14 @@ export class TextTool extends BaseTool {
      */
     activate(pixiApp) {
         super.activate();
-        this.pixiApp = pixiApp;
         
         // Устанавливаем контейнер для размещения input
         if (pixiApp && pixiApp.view && pixiApp.view.parentElement) {
             this.setContainer(pixiApp.view.parentElement);
         }
-        // Устанавливаем стандартный текстовый курсор
+        // Устанавливаем кастомный курсор на холст
         if (pixiApp && pixiApp.view) {
-            pixiApp.view.style.cursor = 'text';
+            pixiApp.view.style.cursor = (this.cursor && this.cursor !== 'default') ? this.cursor : '';
         }
     }
 
@@ -436,50 +421,6 @@ export class TextTool extends BaseTool {
         }
     }
     
-    /**
-     * Преобразование экранных координат в мировые (worldLayer)
-     */
-    _toWorld(x, y) {
-        if (!this.pixiApp || !this.pixiApp.stage) return { x, y };
-        const world = this.pixiApp.stage.getChildByName && this.pixiApp.stage.getChildByName('worldLayer');
-        if (!world || !world.toLocal) return { x, y };
-        const p = new PIXI.Point(x, y);
-        const local = world.toLocal(p);
-        return { x: local.x, y: local.y };
-    }
-    
-    /**
-     * Преобразование мировых координат в экранные для HTML элементов
-     */
-    _toScreen(worldX, worldY) {
-        if (!this.pixiApp || !this.pixiApp.stage) return { x: worldX, y: worldY };
-        const world = this.pixiApp.stage.getChildByName && this.pixiApp.stage.getChildByName('worldLayer');
-        if (!world || !world.toGlobal) return { x: worldX, y: worldY };
-        const p = new PIXI.Point(worldX, worldY);
-        const global = world.toGlobal(p);
-        
-        // Обратная коррекция для HTML элементов с учетом масштаба браузера
-        const zoomFactor = this._getBrowserZoomFactor();
-        return { 
-            x: global.x / zoomFactor, 
-            y: global.y / zoomFactor 
-        };
-    }
-    
-    /**
-     * Получение коэффициента масштабирования браузера
-     */
-    _getBrowserZoomFactor() {
-        // Определяем масштаб браузера разными способами
-        const outerInnerRatio = window.outerWidth / window.innerWidth;
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        
-        // Используемый подход: соотношение размеров окна браузера
-        const zoomFactor = outerInnerRatio;
-        
-        return Math.max(0.1, Math.min(5, zoomFactor)); // Ограничиваем разумными пределами
-    }
-    
     /**
      * Установка настроек текста по умолчанию
      */

package/src/ui/HtmlTextLayer.js

@@ -305,15 +305,42 @@ export class HtmlTextLayer {
             el.style.lineHeight = newLH;
         }
 
-        // Позиция и габариты в экранных координатах с учетом масштаба браузера
-        const zoomFactor = this._getBrowserZoomFactor();
-        const left = ((tx + s * x) / res) / zoomFactor;
-        const top = ((ty + s * y) / res) / zoomFactor;
-        el.style.left = `${left}px`;
-        el.style.top = `${top}px`;
-        if (w && h) {
-            el.style.width = `${Math.max(1, ((w * s) / res) / zoomFactor)}px`;
-            el.style.height = `${Math.max(1, ((h * s) / res) / zoomFactor)}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';
@@ -369,68 +396,7 @@ export class HtmlTextLayer {
                     position
                 });
             }
-        } catch (_) {        }
-    }
-    
-    /**
-     * Получение коэффициента масштабирования браузера
-     */
-    _getBrowserZoomFactor() {
-        // Новый подход: через измерение canvas размеров
-        try {
-            if (this.core && this.core.pixi && this.core.pixi.app && this.core.pixi.app.view) {
-                const canvas = this.core.pixi.app.view;
-                
-                // Получаем CSS размеры и реальные размеры canvas
-                const cssWidth = canvas.clientWidth;
-                const cssHeight = canvas.clientHeight;
-                const realWidth = canvas.width;
-                const realHeight = canvas.height;
-                
-                // Проверяем device pixel ratio
-                const dpr = window.devicePixelRatio || 1;
-                
-                // Вычисляем ожидаемые реальные размеры с учетом DPR
-                const expectedRealWidth = cssWidth * dpr;
-                const expectedRealHeight = cssHeight * dpr;
-                
-                // Если реальные размеры отличаются от ожидаемых, значит есть zoom
-                let zoomFactorW = 1.0;
-                let zoomFactorH = 1.0;
-                
-                if (expectedRealWidth > 0) {
-                    zoomFactorW = realWidth / expectedRealWidth;
-                }
-                if (expectedRealHeight > 0) {
-                    zoomFactorH = realHeight / expectedRealHeight;
-                }
-                
-                // Берем среднее значение
-                const avgZoom = (zoomFactorW + zoomFactorH) / 2;
-                
-                // Если обнаружили разумное отклонение от 1.0, используем его
-                if (isFinite(avgZoom) && avgZoom > 0.1 && avgZoom < 10 && Math.abs(avgZoom - 1.0) > 0.01) {
-                    return avgZoom;
-                }
-            }
         } catch (_) {}
-        
-        // Fallback: простой метод через screen размеры  
-        try {
-            const screenRatio = screen.width / window.innerWidth;
-            const dpr = window.devicePixelRatio || 1;
-            const expectedRatio = dpr;
-            
-            if (Math.abs(screenRatio - expectedRatio) > 0.1) {
-                const zoomFactor = screenRatio / expectedRatio;
-                
-                if (isFinite(zoomFactor) && zoomFactor > 0.1 && zoomFactor < 10) {
-                    return zoomFactor;
-                }
-            }
-        } catch (_) {}
-        
-        return 1.0; // Fallback: без коррекции
     }
 }