@sequent-org/moodboard 1.2.118 → 1.3.0

package/src/tools/board-tools/PanTool.js

@@ -4,8 +4,7 @@ import { BaseTool } from '../BaseTool.js';
 export class PanTool extends BaseTool {
     constructor(eventBus) {
         super('pan', eventBus);
-        // По умолчанию курсор для панорамирования — системный move
-        this.cursor = 'move';
+        this.cursor = 'grab'; // курсор-рука (открытая) когда инструмент выбран
         this.isDragging = false;
         this.last = { x: 0, y: 0 };
         this.app = null;
@@ -18,19 +17,16 @@ export class PanTool extends BaseTool {
     activate(app) {
         super.activate();
         this.app = app || this.app;
-        // При активации сразу показываем курсор move
-        this.cursor = 'move';
+        this.cursor = 'grab';
         this.setCursor();
     }
 
     onMouseDown(event) {
-        // ЛКМ или средняя кнопка
+        // ЛКМ или средняя кнопка (или пробел+ЛКМ — aux pan)
         if (event.button === 0 || event.button === 1) {
             this.isDragging = true;
             this.last = { x: event.x, y: event.y };
-            // Во время активного drag оставляем курсор move,
-            // чтобы пользователь всегда видел иконку перемещения
-            this.cursor = 'move';
+            this.cursor = 'grabbing'; // сжатая рука (хватает) во время drag
             this.setCursor();
         }
     }
@@ -46,15 +42,13 @@ export class PanTool extends BaseTool {
     onMouseUp(event) {
         if (this.isDragging) {
             this.isDragging = false;
-            // После завершения drag возвращаем курсор move
-            this.cursor = 'move';
+            this.cursor = 'grab';
             this.setCursor();
         }
     }
 
     onDeactivate() {
         this.isDragging = false;
-        // Сбрасываем курсор на стандартный для canvas
         this.cursor = '';
         this.setCursor();
         super.onDeactivate();

package/src/tools/manager/ToolActivationController.js

@@ -0,0 +1,49 @@
+export class ToolActivationController {
+    constructor(manager) {
+        this.manager = manager;
+    }
+
+    activateTool(toolName) {
+        const tool = this.manager.registry.get(toolName);
+        if (!tool) {
+            console.warn(`Tool "${toolName}" not found`);
+            return false;
+        }
+
+        if (this.manager.activeTool) {
+            this.manager.activeTool.deactivate();
+        }
+
+        this.manager.activeTool = tool;
+
+        if (typeof this.manager.activeTool.activate === 'function') {
+            this.manager.activeTool.activate(this.manager.pixiApp);
+        }
+        this.manager.syncActiveToolCursor();
+
+        return true;
+    }
+
+    activateTemporaryTool(toolName) {
+        if (this.manager.activeTool) {
+            this.manager.previousTool = this.manager.activeTool.name;
+        }
+
+        this.activateTool(toolName);
+        this.manager.temporaryTool = toolName;
+    }
+
+    returnToPreviousTool() {
+        if (this.manager.temporaryTool && this.manager.previousTool) {
+            this.activateTool(this.manager.previousTool);
+            this.manager.temporaryTool = null;
+            this.manager.previousTool = null;
+        }
+    }
+
+    activateDefaultTool() {
+        if (this.manager.defaultTool) {
+            this.activateTool(this.manager.defaultTool);
+        }
+    }
+}

package/src/tools/manager/ToolEventRouter.js

@@ -0,0 +1,396 @@
+import { Events } from '../../core/events/Events.js';
+import { ToolManagerGuards } from './ToolManagerGuards.js';
+
+function createPointerEvent(manager, event, extras = {}) {
+    const rect = manager.container.getBoundingClientRect();
+
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+        originalEvent: event,
+        ...extras
+    };
+}
+
+function rememberCursorPosition(manager, event) {
+    manager.lastMousePos = { x: event.x, y: event.y };
+    manager.eventBus.emit(Events.UI.CursorMove, { x: event.x, y: event.y });
+}
+
+export class ToolEventRouter {
+    static handleMouseDown(manager, event) {
+        if (!manager.activeTool) return;
+        manager.isMouseDown = true;
+
+        if (manager.spacePressed && event.button === 0) {
+            this.handleAuxPanStart(manager, event);
+            return;
+        }
+        if (event.button === 1) {
+            this.handleAuxPanStart(manager, event);
+            return;
+        }
+
+        const toolEvent = createPointerEvent(manager, event, {
+            button: event.button,
+            target: event.target
+        });
+
+        rememberCursorPosition(manager, toolEvent);
+        manager.activeTool.onMouseDown(toolEvent);
+    }
+
+    static handleAuxPanStart(manager, event) {
+        if (!ToolManagerGuards.isAuxPanStart(manager, event)) return;
+
+        if (manager.hasActiveTool('pan')) {
+            manager.previousTool = manager.activeTool?.name || null;
+            manager.activateTemporaryTool('pan');
+
+            const toolEvent = createPointerEvent(manager, event, {
+                button: 0,
+                target: event.target
+            });
+
+            rememberCursorPosition(manager, toolEvent);
+            manager.activeTool.onMouseDown(toolEvent);
+        }
+    }
+
+    static handleAuxPanEnd(manager, event) {
+        if (ToolManagerGuards.isTemporaryPanActive(manager)) {
+            const toolEvent = createPointerEvent(manager, event, {
+                button: 0,
+                target: event.target
+            });
+
+            rememberCursorPosition(manager, toolEvent);
+            manager.activeTool.onMouseUp(toolEvent);
+            manager.returnToPreviousTool();
+        }
+    }
+
+    static handleMouseMove(manager, event) {
+        if (!manager.activeTool) return;
+
+        const toolEvent = createPointerEvent(manager, event, {
+            target: event.target
+        });
+
+        rememberCursorPosition(manager, toolEvent);
+
+        if (ToolManagerGuards.isTemporaryPanActive(manager) && manager.activeTool?.name === 'pan') {
+            manager.activeTool.onMouseMove(toolEvent);
+            manager.syncActiveToolCursor();
+            return;
+        }
+
+        manager.activeTool.onMouseMove(toolEvent);
+        manager.syncActiveToolCursor();
+    }
+
+    static handleMouseUp(manager, event) {
+        if (!manager.activeTool) return;
+        manager.isMouseDown = false;
+
+        const toolEvent = createPointerEvent(manager, event, {
+            button: event.button,
+            target: event.target
+        });
+
+        rememberCursorPosition(manager, toolEvent);
+        if (ToolManagerGuards.isTemporaryPanActive(manager)) {
+            manager.handleAuxPanEnd(event);
+            return;
+        }
+
+        manager.activeTool.onMouseUp(toolEvent);
+        manager.syncActiveToolCursor();
+    }
+
+    static handleDoubleClick(manager, event) {
+        if (!manager.activeTool) return;
+
+        const toolEvent = createPointerEvent(manager, event, {
+            target: event.target
+        });
+
+        rememberCursorPosition(manager, toolEvent);
+
+        console.log('🔧 ToolManager: Double click event, active tool:', manager.activeTool.constructor.name);
+        manager.activeTool.onDoubleClick(toolEvent);
+    }
+
+    static handleMouseWheel(manager, event) {
+        if (!manager.activeTool) return;
+
+        const toolEvent = createPointerEvent(manager, event, {
+            delta: event.deltaY,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey
+        });
+
+        rememberCursorPosition(manager, toolEvent);
+
+        manager.eventBus.emit(Events.Tool.WheelZoom, { x: toolEvent.x, y: toolEvent.y, delta: event.deltaY });
+        event.preventDefault();
+
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }
+
+    static async handleDrop(manager, event) {
+        event.preventDefault();
+
+        const rect = manager.container.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        manager.lastMousePos = { x, y };
+        manager.eventBus.emit(Events.UI.CursorMove, { x, y });
+
+        const dt = event.dataTransfer;
+        if (!dt) return;
+
+        const emitAt = (src, name, imageId = null, offsetIndex = 0) => {
+            const offset = 25 * offsetIndex;
+            manager.eventBus.emit(Events.UI.PasteImageAt, {
+                x: x + offset,
+                y: y + offset,
+                src,
+                name,
+                imageId
+            });
+        };
+
+        const files = dt.files ? Array.from(dt.files) : [];
+        const imageFiles = files.filter((file) => file.type && file.type.startsWith('image/'));
+        if (imageFiles.length > 0) {
+            let index = 0;
+            for (const file of imageFiles) {
+                try {
+                    if (manager.core && manager.core.imageUploadService) {
+                        const uploadResult = await manager.core.imageUploadService.uploadImage(file, file.name || 'image');
+                        emitAt(uploadResult.url, uploadResult.name, uploadResult.imageId || uploadResult.id, index++);
+                    } else {
+                        await new Promise((resolve) => {
+                            const reader = new FileReader();
+                            reader.onload = () => {
+                                emitAt(reader.result, file.name || 'image', null, index++);
+                                resolve();
+                            };
+                            reader.readAsDataURL(file);
+                        });
+                    }
+                } catch (error) {
+                    console.warn('Ошибка загрузки изображения через drag-and-drop:', error);
+                    await new Promise((resolve) => {
+                        const reader = new FileReader();
+                        reader.onload = () => {
+                            emitAt(reader.result, file.name || 'image', null, index++);
+                            resolve();
+                        };
+                        reader.readAsDataURL(file);
+                    });
+                }
+            }
+            return;
+        }
+
+        const nonImageFiles = files.filter((file) => !file.type || !file.type.startsWith('image/'));
+        if (nonImageFiles.length > 0) {
+            let index = 0;
+            for (const file of nonImageFiles) {
+                const offset = 25 * index++;
+                const position = { x: x + offset, y: y + offset };
+                const fallbackProps = {
+                    fileName: file.name || 'file',
+                    fileSize: file.size || 0,
+                    mimeType: file.type || 'application/octet-stream',
+                    formattedSize: null,
+                    url: null,
+                    width: 120,
+                    height: 140
+                };
+                try {
+                    if (manager.core && manager.core.fileUploadService) {
+                        const uploadResult = await manager.core.fileUploadService.uploadFile(file, file.name || 'file');
+                        manager.eventBus.emit(Events.UI.ToolbarAction, {
+                            type: 'file',
+                            id: 'file',
+                            position,
+                            properties: {
+                                fileName: uploadResult.name,
+                                fileSize: uploadResult.size,
+                                mimeType: uploadResult.mimeType,
+                                formattedSize: uploadResult.formattedSize,
+                                url: uploadResult.url,
+                                width: 120,
+                                height: 140
+                            },
+                            fileId: uploadResult.fileId || uploadResult.id || null
+                        });
+                    } else {
+                        manager.eventBus.emit(Events.UI.ToolbarAction, {
+                            type: 'file',
+                            id: 'file',
+                            position,
+                            properties: fallbackProps
+                        });
+                    }
+                } catch (error) {
+                    console.warn('Ошибка загрузки файла через drag-and-drop:', error);
+                    manager.eventBus.emit(Events.UI.ToolbarAction, {
+                        type: 'file',
+                        id: 'file',
+                        position,
+                        properties: fallbackProps
+                    });
+                }
+            }
+            return;
+        }
+
+        const html = dt.getData('text/html');
+        if (html && html.includes('<img')) {
+            const match = html.match(/<img[^>]*src\s*=\s*"([^"]+)"/i);
+            if (match && match[1]) {
+                const url = match[1];
+                if (/^data:image\//i.test(url)) {
+                    emitAt(url, 'clipboard-image.png');
+                    return;
+                }
+                if (/^https?:\/\//i.test(url)) {
+                    try {
+                        const response = await fetch(url, { mode: 'cors' });
+                        const blob = await response.blob();
+                        const dataUrl = await new Promise((resolve) => {
+                            const reader = new FileReader();
+                            reader.onload = () => resolve(reader.result);
+                            reader.readAsDataURL(blob);
+                        });
+                        emitAt(dataUrl, url.split('/').pop() || 'image');
+                    } catch (_) {
+                        emitAt(url, url.split('/').pop() || 'image');
+                    }
+                    return;
+                }
+            }
+        }
+
+        const uriList = dt.getData('text/uri-list') || '';
+        if (uriList) {
+            const lines = uriList.split('\n').filter((line) => !!line && !line.startsWith('#'));
+            const urls = lines.filter((line) => /^https?:\/\//i.test(line));
+            let index = 0;
+            for (const url of urls) {
+                const isImage = /(png|jpe?g|gif|webp|bmp|svg)(\?.*)?$/i.test(url);
+                if (!isImage) continue;
+                try {
+                    const response = await fetch(url, { mode: 'cors' });
+                    const blob = await response.blob();
+                    const dataUrl = await new Promise((resolve) => {
+                        const reader = new FileReader();
+                        reader.onload = () => resolve(reader.result);
+                        reader.readAsDataURL(blob);
+                    });
+                    emitAt(dataUrl, url.split('/').pop() || 'image', index++);
+                } catch (_) {
+                    emitAt(url, url.split('/').pop() || 'image', index++);
+                }
+            }
+            if (index > 0) return;
+        }
+
+        const text = dt.getData('text/plain') || '';
+        if (text) {
+            const trimmed = text.trim();
+            const isDataUrl = /^data:image\//i.test(trimmed);
+            const isHttpUrl = /^https?:\/\//i.test(trimmed);
+            const looksLikeImage = /(png|jpe?g|gif|webp|bmp|svg)(\?.*)?$/i.test(trimmed);
+            if (isDataUrl) {
+                emitAt(trimmed, 'clipboard-image.png');
+                return;
+            }
+            if (isHttpUrl && looksLikeImage) {
+                try {
+                    const response = await fetch(trimmed, { mode: 'cors' });
+                    const blob = await response.blob();
+                    const dataUrl = await new Promise((resolve) => {
+                        const reader = new FileReader();
+                        reader.onload = () => resolve(reader.result);
+                        reader.readAsDataURL(blob);
+                    });
+                    emitAt(dataUrl, trimmed.split('/').pop() || 'image');
+                } catch (_) {
+                    emitAt(trimmed, trimmed.split('/').pop() || 'image');
+                }
+            }
+        }
+    }
+
+    static handleKeyDown(manager, event) {
+        this.handleHotkeys(manager, event);
+
+        if (!manager.activeTool) return;
+
+        const toolEvent = {
+            key: event.key,
+            code: event.code,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            originalEvent: event
+        };
+
+        manager.activeTool.onKeyDown(toolEvent);
+
+        if (event.key === ' ' && !event.repeat) {
+            manager.spacePressed = true;
+        }
+    }
+
+    static handleKeyUp(manager, event) {
+        if (!manager.activeTool) return;
+
+        const toolEvent = {
+            key: event.key,
+            code: event.code,
+            originalEvent: event
+        };
+
+        manager.activeTool.onKeyUp(toolEvent);
+
+        if (event.key === ' ') {
+            manager.spacePressed = false;
+            if (ToolManagerGuards.isTemporaryPanActive(manager)) {
+                if (manager.activeTool?.name === 'pan' && manager.isMouseDown) {
+                    manager.activeTool.onMouseUp({ x: 0, y: 0, button: 0, target: manager.container, originalEvent: event });
+                }
+                manager.returnToPreviousTool();
+            }
+        }
+    }
+
+    static handleHotkeys(manager, event) {
+        if (ToolManagerGuards.shouldIgnoreHotkeys(event)) {
+            return;
+        }
+
+        const tools = manager.registry ? manager.registry.values() : manager.tools.values();
+        for (const tool of tools) {
+            if (tool.hotkey === event.key.toLowerCase()) {
+                manager.activateTool(tool.name);
+                event.preventDefault();
+                break;
+            }
+        }
+
+        switch (event.key) {
+            case 'Escape':
+                manager.activateDefaultTool();
+                event.preventDefault();
+                break;
+        }
+    }
+}

package/src/tools/manager/ToolManagerGuards.js

@@ -0,0 +1,33 @@
+export class ToolManagerGuards {
+    static isCursorLockedToActiveTool(manager) {
+        return !!manager.activeTool && manager.activeTool.name !== 'select';
+    }
+
+    static getPixiCursorStyles(manager) {
+        const renderer = manager.pixiApp && manager.pixiApp.renderer;
+        if (!renderer) return null;
+
+        const events = renderer.events || (renderer.plugins && renderer.plugins.interaction);
+        return events && events.cursorStyles ? events.cursorStyles : null;
+    }
+
+    static getActiveToolCursor(manager, defaultCursor = '') {
+        const cursor = manager.activeTool && manager.activeTool.cursor;
+        if (typeof cursor === 'string' && cursor.length > 0) return cursor;
+        return defaultCursor;
+    }
+
+    static shouldIgnoreHotkeys(event) {
+        return event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA';
+    }
+
+    static isAuxPanStart(manager, event) {
+        const isMiddle = event.button === 1;
+        const isSpaceLeft = event.button === 0 && manager.spacePressed;
+        return isMiddle || isSpaceLeft;
+    }
+
+    static isTemporaryPanActive(manager) {
+        return manager.temporaryTool === 'pan';
+    }
+}

package/src/tools/manager/ToolManagerLifecycle.js

@@ -0,0 +1,110 @@
+const PASSIVE_FALSE = { passive: false };
+
+export class ToolManagerLifecycle {
+    static initEventListeners(manager, defaultCursor) {
+        if (!manager.container) return;
+
+        manager.container.addEventListener('mousedown', (event) => manager.handleMouseDown(event));
+        manager.container.addEventListener('mousemove', (event) => manager.handleMouseMove(event));
+        manager.container.addEventListener('mouseup', (event) => manager.handleMouseUp(event));
+        manager.container.addEventListener('mouseenter', () => {
+            manager.isMouseOverContainer = true;
+            if (!manager.activeTool) {
+                manager.container.style.cursor = defaultCursor;
+                return;
+            }
+            manager.syncActiveToolCursor();
+        });
+        manager.container.addEventListener('mouseleave', () => {
+            manager.isMouseOverContainer = false;
+        });
+
+        manager.container.addEventListener('dragenter', (event) => {
+            event.preventDefault();
+        });
+        manager.container.addEventListener('dragover', (event) => {
+            event.preventDefault();
+            if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+        });
+        manager.container.addEventListener('dragleave', () => {
+            // можно снимать подсветку, если добавим в будущем
+        });
+        manager.container.addEventListener('drop', (event) => manager.handleDrop(event));
+
+        document.addEventListener('mousemove', (event) => manager.handleMouseMove(event));
+        document.addEventListener('mouseup', (event) => {
+            manager.handleMouseUp(event);
+            if (manager.temporaryTool === 'pan') {
+                manager.handleAuxPanEnd(event);
+            }
+        });
+        manager.container.addEventListener('dblclick', (event) => manager.handleDoubleClick(event));
+        manager.container.addEventListener('wheel', (event) => manager.handleMouseWheel(event), PASSIVE_FALSE);
+
+        manager._onWindowWheel = (event) => {
+            try {
+                if (event && event.ctrlKey && manager.isMouseOverContainer) {
+                    event.preventDefault();
+                }
+            } catch (_) {}
+        };
+        window.addEventListener('wheel', manager._onWindowWheel, PASSIVE_FALSE);
+
+        document.addEventListener('keydown', (event) => manager.handleKeyDown(event));
+        document.addEventListener('keyup', (event) => manager.handleKeyUp(event));
+
+        manager.container.addEventListener('contextmenu', (event) => {
+            event.preventDefault();
+            if (!manager.activeTool) return;
+            const rect = manager.container.getBoundingClientRect();
+            const toolEvent = {
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+                originalEvent: event
+            };
+            if (typeof manager.activeTool.onContextMenu === 'function') {
+                manager.activeTool.onContextMenu(toolEvent);
+            }
+        });
+    }
+
+    static destroy(manager) {
+        for (const tool of manager.registry.values()) {
+            tool.destroy();
+        }
+
+        manager.registry.clear();
+        manager.activeTool = null;
+
+        if (manager.container) {
+            manager.container.removeEventListener('mousedown', manager.handleMouseDown);
+            manager.container.removeEventListener('mousemove', manager.handleMouseMove);
+            manager.container.removeEventListener('mouseup', manager.handleMouseUp);
+            manager.container.removeEventListener('dblclick', manager.handleDoubleClick);
+            manager.container.removeEventListener('wheel', manager.handleMouseWheel);
+            manager.container.removeEventListener('contextmenu', (event) => event.preventDefault());
+            manager.container.removeEventListener('dragenter', (event) => event.preventDefault());
+            manager.container.removeEventListener('dragover', (event) => event.preventDefault());
+            manager.container.removeEventListener('dragleave', () => {});
+            manager.container.removeEventListener('drop', manager.handleDrop);
+        }
+        document.removeEventListener('mousemove', manager.handleMouseMove);
+        document.removeEventListener('mouseup', manager.handleMouseUp);
+
+        document.removeEventListener('keydown', manager.handleKeyDown);
+        document.removeEventListener('keyup', manager.handleKeyUp);
+        if (manager._onWindowWheel) {
+            try {
+                window.removeEventListener('wheel', manager._onWindowWheel);
+            } catch (_) {}
+            manager._onWindowWheel = null;
+        }
+
+        const cursorStyles = manager.getPixiCursorStyles();
+        if (cursorStyles && manager._originalPixiCursorStyles) {
+            cursorStyles.pointer = manager._originalPixiCursorStyles.pointer;
+            cursorStyles.default = manager._originalPixiCursorStyles.default;
+        }
+        manager._originalPixiCursorStyles = null;
+    }
+}

package/src/tools/manager/ToolRegistry.js

@@ -0,0 +1,33 @@
+export class ToolRegistry {
+    constructor(manager) {
+        this.manager = manager;
+    }
+
+    register(tool) {
+        this.manager.tools.set(tool.name, tool);
+
+        if (!this.manager.defaultTool) {
+            this.manager.defaultTool = tool.name;
+        }
+    }
+
+    get(toolName) {
+        return this.manager.tools.get(toolName);
+    }
+
+    has(toolName) {
+        return this.manager.tools.has(toolName);
+    }
+
+    getAll() {
+        return Array.from(this.manager.tools.values());
+    }
+
+    values() {
+        return this.manager.tools.values();
+    }
+
+    clear() {
+        this.manager.tools.clear();
+    }
+}