@sequent-org/moodboard 1.2.85 → 1.2.87

package/package.json

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

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

@@ -1,21 +1,4 @@
 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`;
 
 /**
  * Инструмент для создания и редактирования текстовых объектов
@@ -23,7 +6,7 @@ const TEXT_CURSOR = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(
 export class TextTool extends BaseTool {
     constructor(eventBus) {
         super('text', eventBus);
-		this.cursor = 'text';
+        this.cursor = 'text';
         this.hotkey = 't';
         this.container = null;
         
@@ -49,13 +32,35 @@ 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(event.x, event.y);
+        const hitObject = this.getTextObjectAt(correctedX, correctedY);
         
         if (hitObject) {
             this.startEditing(hitObject, event);
         } else {
-            this.createNewText(event.x, event.y);
+            this.createNewText(worldPoint.x, worldPoint.y);
         }
     }
     
@@ -132,10 +137,19 @@ export class TextTool extends BaseTool {
     /**
      * Создание HTML input для редактирования текста
      */
-    createTextInput(x, y, initialText) {
+    createTextInput(worldX, worldY, 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;
@@ -144,8 +158,8 @@ export class TextTool extends BaseTool {
         // Стили input
         Object.assign(this.textInput.style, {
             position: 'absolute',
-            left: `${x}px`,
-            top: `${y}px`,
+            left: `${screenPos.x}px`,
+            top: `${screenPos.y}px`,
             border: '2px solid #007bff',
             borderRadius: '4px',
             padding: '4px 8px',
@@ -401,14 +415,15 @@ 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 = (this.cursor && this.cursor !== 'default') ? this.cursor : '';
+            pixiApp.view.style.cursor = 'text';
         }
     }
 
@@ -421,6 +436,50 @@ 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)); // Ограничиваем разумными пределами
+    }
+    
     /**
      * Установка настроек текста по умолчанию
      */