@sequent-org/moodboard 1.2.114 → 1.2.115

package/package.json

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

package/src/tools/ToolManager.js

@@ -34,6 +34,7 @@ export class ToolManager {
         // Последняя позиция курсора относительно контейнера (CSS-пиксели)
         this.lastMousePos = null;
         this.isMouseOverContainer = false;
+        this._originalPixiCursorStyles = null;
         
         // Устанавливаем курсор по умолчанию на контейнер, если инструмент ещё не активирован
         if (this.container) {
@@ -77,6 +78,7 @@ export class ToolManager {
         if (typeof this.activeTool.activate === 'function') {
             this.activeTool.activate(this.pixiApp);
         }
+        this.syncActiveToolCursor();
         
         return true;
     }
@@ -148,7 +150,9 @@ export class ToolManager {
             this.isMouseOverContainer = true; 
             if (!this.activeTool) {
                 this.container.style.cursor = DEFAULT_CURSOR;
+                return;
             }
+            this.syncActiveToolCursor();
         });
         this.container.addEventListener('mouseleave', () => { this.isMouseOverContainer = false; });
         // Убираем отдельные слушатели aux-pan на контейнере, чтобы не дублировать mousedown/mouseup
@@ -305,9 +309,55 @@ export class ToolManager {
         // Если временно активирован pan, проксируем движение именно ему
         if (this.temporaryTool === 'pan' && this.activeTool?.name === 'pan') {
             this.activeTool.onMouseMove(event);
+            this.syncActiveToolCursor();
             return;
         }
         this.activeTool.onMouseMove(event);
+        this.syncActiveToolCursor();
+    }
+
+    isCursorLockedToActiveTool() {
+        return !!this.activeTool && this.activeTool.name !== 'select';
+    }
+
+    getPixiCursorStyles() {
+        const renderer = this.pixiApp && this.pixiApp.renderer;
+        if (!renderer) return null;
+        const events = renderer.events || (renderer.plugins && renderer.plugins.interaction);
+        return events && events.cursorStyles ? events.cursorStyles : null;
+    }
+
+    getActiveToolCursor() {
+        const cursor = this.activeTool && this.activeTool.cursor;
+        if (typeof cursor === 'string' && cursor.length > 0) return cursor;
+        return DEFAULT_CURSOR;
+    }
+
+    syncActiveToolCursor() {
+        const cursorStyles = this.getPixiCursorStyles();
+        const lockCursor = this.isCursorLockedToActiveTool();
+        const activeCursor = this.getActiveToolCursor();
+
+        if (cursorStyles && !this._originalPixiCursorStyles) {
+            this._originalPixiCursorStyles = {
+                pointer: cursorStyles.pointer,
+                default: cursorStyles.default
+            };
+        }
+
+        if (cursorStyles) {
+            if (lockCursor) {
+                cursorStyles.pointer = activeCursor;
+                cursorStyles.default = activeCursor;
+            } else if (this._originalPixiCursorStyles) {
+                cursorStyles.pointer = this._originalPixiCursorStyles.pointer;
+                cursorStyles.default = this._originalPixiCursorStyles.default;
+            }
+        }
+
+        if (lockCursor && this.pixiApp && this.pixiApp.view) {
+            this.pixiApp.view.style.cursor = activeCursor;
+        }
     }
     
     handleMouseUp(e) {
@@ -329,6 +379,7 @@ export class ToolManager {
             return;
         }
         this.activeTool.onMouseUp(event);
+        this.syncActiveToolCursor();
     }
     
     handleDoubleClick(e) {
@@ -614,5 +665,12 @@ export class ToolManager {
             try { window.removeEventListener('wheel', this._onWindowWheel); } catch (_) {}
             this._onWindowWheel = null;
         }
+
+        const cursorStyles = this.getPixiCursorStyles();
+        if (cursorStyles && this._originalPixiCursorStyles) {
+            cursorStyles.pointer = this._originalPixiCursorStyles.pointer;
+            cursorStyles.default = this._originalPixiCursorStyles.default;
+        }
+        this._originalPixiCursorStyles = null;
     }
 }

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

@@ -8,8 +8,9 @@ import * as PIXI from 'pixi.js';
 export class DrawingTool extends BaseTool {
     constructor(eventBus) {
         super('draw', eventBus);
-        this.cursor = 'crosshair';
         this.hotkey = 'd';
+        const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 20 L20 4 L28 12 L12 28 L4 28 Z' fill='black'/></svg>`;
+        this.cursor = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}") 4 28, crosshair`;
 
         // Состояние рисования
         this.isDrawing = false;
@@ -50,12 +51,7 @@ export class DrawingTool extends BaseTool {
         super.activate();
         this.app = app;
         this.world = this._getWorldLayer();
-        // Кастомный курсор-карандаш (SVG)
-        const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 20 L20 4 L28 12 L12 28 L4 28 Z' fill='black'/></svg>`;
-        // Горячая точка ставим в реальный нижний левый угол фигуры (x=4, y=28),
-        // чтобы линия выходила прямо из карандаша без зазора.
-        const url = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}") 4 28, crosshair`;
-        if (this.app && this.app.view) this.app.view.style.cursor = url;
+        this.setCursor();
     }
 
     deactivate() {
@@ -70,6 +66,12 @@ export class DrawingTool extends BaseTool {
         this.world = null;
     }
 
+    setCursor() {
+        if (this.app && this.app.view) {
+            this.app.view.style.cursor = this.cursor;
+        }
+    }
+
     onMouseDown(event) {
         super.onMouseDown(event);
         if (!this.world) this.world = this._getWorldLayer();

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

@@ -47,6 +47,7 @@ export class PlacementTool extends BaseTool {
                 // Обновляем курсор в зависимости от pending
                 if (this.app && this.app.view) {
                     const cur = this._getPendingCursor();
+                    this.cursor = cur;
                     this.app.view.style.cursor = (cur === 'default') ? '' : cur;
                 }
                 // При выборе текста заставляем pointer вести себя как текстовый курсор
@@ -147,7 +148,8 @@ export class PlacementTool extends BaseTool {
         this.world = this._getWorldLayer();
         // Курсор в зависимости от типа размещаемого объекта
         if (this.app && this.app.view) {
-            this.app.view.style.cursor = this._getPendingCursor();
+            this.cursor = this._getPendingCursor();
+            this.app.view.style.cursor = this.cursor;
             // Добавляем обработчик движения мыши для "призрака"
             this.app.view.addEventListener('mousemove', this._onMouseMove.bind(this));
         }
@@ -492,7 +494,8 @@ export class PlacementTool extends BaseTool {
 
     startFrameDrawMode() {
         // Курсор при рисовании фрейма
-        if (this.app && this.app.view) this.app.view.style.cursor = 'crosshair';
+        this.cursor = 'crosshair';
+        if (this.app && this.app.view) this.app.view.style.cursor = this.cursor;
     }
 
     _onFrameDrawMove(event) {
@@ -941,13 +944,15 @@ export class PlacementTool extends BaseTool {
                     const cursorSize = 24;
                     const url = encodeURI(src);
                     // Используем CSS cursor с изображением, если поддерживается
-                    this.app.view.style.cursor = `url(${url}) ${Math.floor(cursorSize/2)} ${Math.floor(cursorSize/2)}, default`;
+                    this.cursor = `url(${url}) ${Math.floor(cursorSize/2)} ${Math.floor(cursorSize/2)}, default`;
+                    this.app.view.style.cursor = this.cursor;
                 }
             } catch (_) {}
         } else {
             // Для эмоджи используем стандартный курсор
             if (this.app && this.app.view) {
-                this.app.view.style.cursor = 'crosshair';
+                this.cursor = 'crosshair';
+                this.app.view.style.cursor = this.cursor;
             }
         }
     }