@sequent-org/moodboard 1.2.114 → 1.2.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.2.114",
+  "version": "1.2.116",
   "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();
@@ -320,6 +322,12 @@ export class DrawingTool extends BaseTool {
         return { x: local.x, y: local.y };
     }
 
+    _worldToGlobal(x, y) {
+        if (!this.world || typeof this.world.toGlobal !== 'function') return { x, y };
+        const global = this.world.toGlobal(new PIXI.Point(x, y));
+        return { x: global.x, y: global.y };
+    }
+
     _getWorldLayer() {
         if (!this.app || !this.app.stage) return null;
         const world = this.app.stage.getChildByName && this.app.stage.getChildByName('worldLayer');
@@ -331,12 +339,14 @@ export class DrawingTool extends BaseTool {
         const req = { objects: [] };
         this.emit('get:all:objects', req);
         const objects = req.objects || [];
+        const prevGlobal = this._worldToGlobal(prev.x, prev.y);
+        const currGlobal = this._worldToGlobal(p.x, p.y);
         // Радиус воздействия ластика (связан с отображаемой толщиной)
         const radius = 8;
-        const segMinX = Math.min(prev.x, p.x) - radius;
-        const segMaxX = Math.max(prev.x, p.x) + radius;
-        const segMinY = Math.min(prev.y, p.y) - radius;
-        const segMaxY = Math.max(prev.y, p.y) + radius;
+        const segMinX = Math.min(prevGlobal.x, currGlobal.x) - radius;
+        const segMaxX = Math.max(prevGlobal.x, currGlobal.x) + radius;
+        const segMinY = Math.min(prevGlobal.y, currGlobal.y) - radius;
+        const segMaxY = Math.max(prevGlobal.y, currGlobal.y) + radius;
 
         for (const item of objects) {
             const id = item.id;
@@ -366,8 +376,8 @@ export class DrawingTool extends BaseTool {
                     const scaleY = baseH ? (b.height / baseH) : 1;
                     const eraserThresh = Math.max(6, (props.strokeWidth || 2) / 2 + radius);
                     // трансформируем сегмент ластика в локальные координаты фигуры
-                    const localPrev = pixi.toLocal(new PIXI.Point(prev.x, prev.y));
-                    const localCurr = pixi.toLocal(new PIXI.Point(p.x, p.y));
+                    const localPrev = pixi.toLocal(new PIXI.Point(prevGlobal.x, prevGlobal.y));
+                    const localCurr = pixi.toLocal(new PIXI.Point(currGlobal.x, currGlobal.y));
                     // Проверяем пересечение с каждым отрезком рисунка
                     for (let i = 0; i < pts.length - 1 && !intersects; i++) {
                         const ax = pts[i].x * scaleX;

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;
             }
         }
     }