@sequent-org/moodboard 1.2.118 → 1.3.0

package/src/core/keyboard/KeyboardClipboardImagePaste.js

@@ -0,0 +1,190 @@
+import { Events } from '../events/Events.js';
+
+export class KeyboardClipboardImagePaste {
+    constructor(eventBus, core = null) {
+        this.eventBus = eventBus;
+        this.core = core;
+    }
+
+    async handleImageUpload(dataUrl, fileName) {
+        try {
+            if (this.core && this.core.imageUploadService) {
+                const uploadResult = await this.core.imageUploadService.uploadFromDataUrl(dataUrl, fileName);
+                this.eventBus.emit(Events.UI.PasteImage, {
+                    src: uploadResult.url,
+                    name: uploadResult.name,
+                    imageId: uploadResult.imageId || uploadResult.id
+                });
+            } else {
+                this.eventBus.emit(Events.UI.PasteImage, { src: dataUrl, name: fileName });
+            }
+        } catch (error) {
+            console.error('Ошибка загрузки изображения:', error);
+            this.eventBus.emit(Events.UI.PasteImage, { src: dataUrl, name: fileName });
+        }
+    }
+
+    async handleImageFileUpload(file, fileName) {
+        try {
+            if (this.core && this.core.imageUploadService) {
+                const uploadResult = await this.core.imageUploadService.uploadImage(file, fileName);
+                this.eventBus.emit(Events.UI.PasteImage, {
+                    src: uploadResult.url,
+                    name: uploadResult.name,
+                    imageId: uploadResult.imageId || uploadResult.id
+                });
+            } else {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    this.eventBus.emit(Events.UI.PasteImage, {
+                        src: reader.result,
+                        name: fileName
+                    });
+                };
+                reader.readAsDataURL(file);
+            }
+        } catch (error) {
+            console.error('Ошибка загрузки файла изображения:', error);
+            try {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    this.eventBus.emit(Events.UI.PasteImage, {
+                        src: reader.result,
+                        name: fileName
+                    });
+                };
+                reader.readAsDataURL(file);
+            } catch (fallbackError) {
+                console.error('Критическая ошибка при чтении файла:', fallbackError);
+            }
+        }
+    }
+
+    createPasteHandler() {
+        return async (e) => {
+            try {
+                const cd = e.clipboardData;
+                if (!cd) return;
+                let handled = false;
+
+                const items = cd.items ? Array.from(cd.items) : [];
+                const imageItem = items.find(i => i.type && i.type.startsWith('image/'));
+                if (imageItem) {
+                    e.preventDefault();
+                    const file = imageItem.getAsFile();
+                    if (file) {
+                        await this.handleImageFileUpload(file, file.name || 'clipboard-image.png');
+                        handled = true;
+                    }
+                }
+                if (handled) return;
+
+                const files = cd.files ? Array.from(cd.files) : [];
+                const imgFile = files.find(f => f.type && f.type.startsWith('image/'));
+                if (imgFile) {
+                    e.preventDefault();
+                    await this.handleImageFileUpload(imgFile, imgFile.name || 'clipboard-image.png');
+                    return;
+                }
+
+                const html = cd.getData && cd.getData('text/html');
+                if (html && html.includes('<img')) {
+                    const match = html.match(/<img[^>]*src\s*=\s*"([^"]+)"/i);
+                    if (match && match[1]) {
+                        const srcInHtml = match[1];
+                        if (/^data:image\//i.test(srcInHtml)) {
+                            e.preventDefault();
+                            this.handleImageUpload(srcInHtml, 'clipboard-image.png');
+                            return;
+                        }
+                        if (/^https?:\/\//i.test(srcInHtml)) {
+                            e.preventDefault();
+                            try {
+                                const resp = await fetch(srcInHtml, { mode: 'cors' });
+                                const blob = await resp.blob();
+                                const dataUrl = await this._blobToDataUrl(blob);
+                                this.handleImageUpload(dataUrl, srcInHtml.split('/').pop() || 'image');
+                            } catch (_) {
+                                this.eventBus.emit(Events.UI.PasteImage, {
+                                    src: srcInHtml,
+                                    name: srcInHtml.split('/').pop() || 'image'
+                                });
+                            }
+                            return;
+                        }
+                        if (/^blob:/i.test(srcInHtml)) {
+                            try {
+                                if (navigator.clipboard && navigator.clipboard.read) {
+                                    const itemsFromAPI = await navigator.clipboard.read();
+                                    for (const item of itemsFromAPI) {
+                                        const imgType = (item.types || []).find(t => t.startsWith('image/'));
+                                        if (!imgType) continue;
+                                        const blob = await item.getType(imgType);
+                                        const dataUrl = await this._blobToDataUrl(blob);
+                                        e.preventDefault();
+                                        this.handleImageUpload(dataUrl, `clipboard.${imgType.split('/')[1] || 'png'}`);
+                                        return;
+                                    }
+                                }
+                            } catch (_) {}
+                        }
+                    }
+                }
+
+                const text = cd.getData && cd.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) {
+                        e.preventDefault();
+                        this.handleImageUpload(trimmed, 'clipboard-image.png');
+                        return;
+                    }
+                    if (isHttpUrl && looksLikeImage) {
+                        e.preventDefault();
+                        try {
+                            const resp = await fetch(trimmed, { mode: 'cors' });
+                            const blob = await resp.blob();
+                            const dataUrl = await this._blobToDataUrl(blob);
+                            this.handleImageUpload(dataUrl, trimmed.split('/').pop() || 'image');
+                            return;
+                        } catch (_) {
+                            this.eventBus.emit(Events.UI.PasteImage, {
+                                src: trimmed,
+                                name: trimmed.split('/').pop() || 'image'
+                            });
+                            return;
+                        }
+                    }
+                }
+
+                try {
+                    if (!handled && navigator.clipboard && navigator.clipboard.read) {
+                        const itemsFromAPI = await navigator.clipboard.read();
+                        for (const item of itemsFromAPI) {
+                            const imgType = (item.types || []).find(t => t.startsWith('image/'));
+                            if (!imgType) continue;
+                            const blob = await item.getType(imgType);
+                            const dataUrl = await this._blobToDataUrl(blob);
+                            e.preventDefault();
+                            this.handleImageUpload(dataUrl, `clipboard.${imgType.split('/')[1] || 'png'}`);
+                            return;
+                        }
+                    }
+                } catch (_) {}
+            } catch (err) {
+                console.error('Error in paste handler:', err);
+            }
+        };
+    }
+
+    _blobToDataUrl(blob) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.readAsDataURL(blob);
+        });
+    }
+}

package/src/core/keyboard/KeyboardContextGuards.js

@@ -0,0 +1,35 @@
+export function isInputElement(element) {
+    if (!element || !element.tagName) {
+        return false;
+    }
+
+    const inputTags = ['input', 'textarea', 'select'];
+    const isInput = inputTags.includes(element.tagName.toLowerCase());
+    const isContentEditable = element.contentEditable === 'true';
+
+    return isInput || isContentEditable;
+}
+
+export function isTextEditorActive(doc = document) {
+    const activeElement = doc.activeElement;
+
+    if (activeElement && (
+        activeElement.tagName === 'INPUT' ||
+        activeElement.tagName === 'TEXTAREA' ||
+        activeElement.contentEditable === 'true'
+    )) {
+        return true;
+    }
+
+    const fileNameEditor = doc.querySelector('.moodboard-file-name-editor');
+    if (fileNameEditor && fileNameEditor.style.display !== 'none') {
+        return true;
+    }
+
+    const textEditor = doc.querySelector('.moodboard-text-editor');
+    if (textEditor && textEditor.style.display !== 'none') {
+        return true;
+    }
+
+    return false;
+}

package/src/core/keyboard/KeyboardEventRouter.js

@@ -0,0 +1,92 @@
+import { Events } from '../events/Events.js';
+
+export class KeyboardEventRouter {
+    constructor(eventBus, shortcuts, isInputElementGuard) {
+        this.eventBus = eventBus;
+        this.shortcuts = shortcuts;
+        this.isInputElementGuard = isInputElementGuard;
+    }
+
+    handleKeyDown(event) {
+        if (this.isInputElementGuard(event.target)) {
+            return;
+        }
+
+        const combination = this.eventToShortcut(event);
+        const handlers = this.shortcuts.get(combination);
+
+        if (handlers && handlers.length > 0) {
+            handlers.forEach(({ handler, preventDefault, stopPropagation }) => {
+                if (preventDefault) event.preventDefault();
+                if (stopPropagation) event.stopPropagation();
+
+                handler(event);
+            });
+        }
+    }
+
+    handleKeyUp(event) {
+        const combination = this.eventToShortcut(event, 'keyup');
+
+        this.eventBus.emit(Events.Keyboard.KeyUp, {
+            key: event.key,
+            code: event.code,
+            combination,
+            originalEvent: event
+        });
+    }
+
+    normalizeShortcut(combination) {
+        return combination
+            .toLowerCase()
+            .split('+')
+            .map(key => key.trim())
+            .sort((a, b) => {
+                const order = ['ctrl', 'alt', 'shift', 'meta'];
+                const aIndex = order.indexOf(a);
+                const bIndex = order.indexOf(b);
+
+                if (aIndex !== -1 && bIndex !== -1) {
+                    return aIndex - bIndex;
+                }
+                if (aIndex !== -1) return -1;
+                if (bIndex !== -1) return 1;
+                return a.localeCompare(b);
+            })
+            .join('+');
+    }
+
+    eventToShortcut(event, eventType = 'keydown') {
+        const parts = [];
+
+        if (event.ctrlKey) parts.push('ctrl');
+        if (event.altKey) parts.push('alt');
+        if (event.shiftKey) parts.push('shift');
+        if (event.metaKey) parts.push('meta');
+
+        let key = event.key.toLowerCase();
+
+        const specialKeys = {
+            ' ': 'space',
+            'enter': 'enter',
+            'escape': 'escape',
+            'backspace': 'backspace',
+            'delete': 'delete',
+            'tab': 'tab',
+            'arrowup': 'arrowup',
+            'arrowdown': 'arrowdown',
+            'arrowleft': 'arrowleft',
+            'arrowright': 'arrowright'
+        };
+
+        if (specialKeys[key]) {
+            key = specialKeys[key];
+        }
+
+        if (!['control', 'alt', 'shift', 'meta'].includes(key)) {
+            parts.push(key);
+        }
+
+        return parts.join('+');
+    }
+}

package/src/core/keyboard/KeyboardSelectionActions.js

@@ -0,0 +1,103 @@
+import { Events } from '../events/Events.js';
+
+export class KeyboardSelectionActions {
+    constructor(eventBus, isTextEditorActive) {
+        this.eventBus = eventBus;
+        this.isTextEditorActive = isTextEditorActive;
+    }
+
+    createHandler(actionId) {
+        switch (actionId) {
+            case 'undo':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.Undo);
+                };
+            case 'redo':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.Redo);
+                };
+            case 'select-all':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.SelectAll);
+                };
+            case 'copy':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.Copy);
+                };
+            case 'paste':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.Paste);
+                };
+            case 'layer-bring-to-front':
+                return () => {
+                    const data = { selection: [] };
+                    this.eventBus.emit(Events.Tool.GetSelection, data);
+                    const id = data.selection?.[0];
+                    if (id) this.eventBus.emit(Events.UI.LayerBringToFront, { objectId: id });
+                };
+            case 'layer-bring-forward':
+                return () => {
+                    const data = { selection: [] };
+                    this.eventBus.emit(Events.Tool.GetSelection, data);
+                    const id = data.selection?.[0];
+                    if (id) this.eventBus.emit(Events.UI.LayerBringForward, { objectId: id });
+                };
+            case 'layer-send-to-back':
+                return () => {
+                    const data = { selection: [] };
+                    this.eventBus.emit(Events.Tool.GetSelection, data);
+                    const id = data.selection?.[0];
+                    if (id) this.eventBus.emit(Events.UI.LayerSendToBack, { objectId: id });
+                };
+            case 'layer-send-backward':
+                return () => {
+                    const data = { selection: [] };
+                    this.eventBus.emit(Events.Tool.GetSelection, data);
+                    const id = data.selection?.[0];
+                    if (id) this.eventBus.emit(Events.UI.LayerSendBackward, { objectId: id });
+                };
+            case 'delete':
+                return () => {
+                    if (this.isTextEditorActive()) {
+                        console.log('🔒 KeyboardManager: Текстовый редактор активен, пропускаем удаление объектов');
+                        return;
+                    }
+                    this.eventBus.emit(Events.Keyboard.Delete);
+                };
+            case 'escape':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.Escape);
+                };
+            case 'move-up':
+                return (event) => {
+                    this.eventBus.emit(Events.Keyboard.Move, {
+                        direction: 'up',
+                        step: event.shiftKey ? 10 : 1
+                    });
+                };
+            case 'move-down':
+                return (event) => {
+                    this.eventBus.emit(Events.Keyboard.Move, {
+                        direction: 'down',
+                        step: event.shiftKey ? 10 : 1
+                    });
+                };
+            case 'move-left':
+                return (event) => {
+                    this.eventBus.emit(Events.Keyboard.Move, {
+                        direction: 'left',
+                        step: event.shiftKey ? 10 : 1
+                    });
+                };
+            case 'move-right':
+                return (event) => {
+                    this.eventBus.emit(Events.Keyboard.Move, {
+                        direction: 'right',
+                        step: event.shiftKey ? 10 : 1
+                    });
+                };
+            default:
+                return null;
+        }
+    }
+}

package/src/core/keyboard/KeyboardShortcutMap.js

@@ -0,0 +1,31 @@
+export const DEFAULT_KEYBOARD_SHORTCUTS = [
+    { combination: 'ctrl+z', actionId: 'undo', description: 'Отменить действие', preventDefault: true },
+    { combination: 'ctrl+я', actionId: 'undo', description: 'Отменить действие (рус)', preventDefault: true },
+    { combination: 'ctrl+shift+z', actionId: 'redo', description: 'Повторить действие', preventDefault: true },
+    { combination: 'ctrl+shift+я', actionId: 'redo', description: 'Повторить действие (рус)', preventDefault: true },
+    { combination: 'ctrl+y', actionId: 'redo', description: 'Повторить действие (альтернативный)', preventDefault: true },
+    { combination: 'ctrl+н', actionId: 'redo', description: 'Повторить действие (рус альт)', preventDefault: true },
+    { combination: 'ctrl+a', actionId: 'select-all', description: 'Выделить все', preventDefault: true },
+    { combination: 'ctrl+ф', actionId: 'select-all', description: 'Выделить все (рус)', preventDefault: true },
+    { combination: 'ctrl+c', actionId: 'copy', description: 'Копировать', preventDefault: true },
+    { combination: 'ctrl+с', actionId: 'copy', description: 'Копировать (рус)', preventDefault: true },
+    { combination: 'ctrl+v', actionId: 'paste', description: 'Вставить', preventDefault: false },
+    { combination: 'ctrl+м', actionId: 'paste', description: 'Вставить (рус)', preventDefault: false },
+    { combination: ']', actionId: 'layer-bring-to-front', description: 'На передний план', preventDefault: true },
+    { combination: 'ctrl+]', actionId: 'layer-bring-forward', description: 'Перенести вперёд', preventDefault: true },
+    { combination: '[', actionId: 'layer-send-to-back', description: 'На задний план', preventDefault: true },
+    { combination: 'ctrl+[', actionId: 'layer-send-backward', description: 'Перенести назад', preventDefault: true },
+    { combination: 'delete', actionId: 'delete', description: 'Удалить объект', preventDefault: true },
+    { combination: 'backspace', actionId: 'delete', description: 'Удалить объект', preventDefault: true },
+    { combination: 'escape', actionId: 'escape', description: 'Отменить выделение', preventDefault: true },
+    { combination: 'v', actionId: 'tool-select', description: 'Выбрать инструмент выделения' },
+    { combination: 'м', actionId: 'tool-select', description: 'Выбрать инструмент выделения (рус)' },
+    { combination: 't', actionId: 'tool-text', description: 'Выбрать инструмент текста' },
+    { combination: 'е', actionId: 'tool-text', description: 'Выбрать инструмент текста (рус)' },
+    { combination: 'r', actionId: 'tool-frame', description: 'Выбрать инструмент рамки' },
+    { combination: 'к', actionId: 'tool-frame', description: 'Выбрать инструмент рамки (рус)' },
+    { combination: 'arrowup', actionId: 'move-up', description: 'Переместить вверх', preventDefault: true },
+    { combination: 'arrowdown', actionId: 'move-down', description: 'Переместить вниз', preventDefault: true },
+    { combination: 'arrowleft', actionId: 'move-left', description: 'Переместить влево', preventDefault: true },
+    { combination: 'arrowright', actionId: 'move-right', description: 'Переместить вправо', preventDefault: true },
+];

package/src/core/keyboard/KeyboardToolSwitching.js

@@ -0,0 +1,26 @@
+import { Events } from '../events/Events.js';
+
+export class KeyboardToolSwitching {
+    constructor(eventBus) {
+        this.eventBus = eventBus;
+    }
+
+    createHandler(actionId) {
+        switch (actionId) {
+            case 'tool-select':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+                };
+            case 'tool-text':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'text' });
+                };
+            case 'tool-frame':
+                return () => {
+                    this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'frame' });
+                };
+            default:
+                return null;
+        }
+    }
+}

package/src/core/rendering/ObjectRenderer.js

@@ -327,14 +327,10 @@ export class ObjectRenderer {
      */
     setFrameFill(objectId, width, height, fillColor = 0xFFFFFF) {
         const pixiObject = this.objects.get(objectId);
-        if (!pixiObject || !(pixiObject instanceof PIXI.Graphics)) return;
-        
+        if (!pixiObject) return;
         const meta = pixiObject._mb || {};
-        if (meta.type !== 'frame') return;
-        
-        if (meta.instance) {
-            meta.instance.setFill(fillColor);
-        }
+        if (meta.type !== 'frame' || !meta.instance) return;
+        meta.instance.setFill(fillColor);
     }
 
     /**

package/src/grid/BaseGrid.js

@@ -17,6 +17,8 @@ export class BaseGrid {
         // Размеры области отрисовки
         this.width = options.width || 1920;
         this.height = options.height || 1080;
+        /** @type {{ left: number, top: number, right: number, bottom: number } | null} */
+        this.viewportBounds = null;
         
         // PIXI графика
         this.graphics = new PIXI.Graphics();
@@ -133,8 +135,32 @@ export class BaseGrid {
     resize(width, height) {
         this.width = width;
         this.height = height;
+        this.viewportBounds = null;
         this.updateVisual();
     }
+
+    /**
+     * Устанавливает видимую область для непрерывной отрисовки при паннинге.
+     * @param {number} left
+     * @param {number} top
+     * @param {number} right
+     * @param {number} bottom
+     */
+    setVisibleBounds(left, top, right, bottom) {
+        this.viewportBounds = { left, top, right, bottom };
+        this.updateVisual();
+    }
+
+    /**
+     * Возвращает границы отрисовки: viewportBounds или (0,0,width,height)
+     * @returns {{ left: number, top: number, right: number, bottom: number }}
+     */
+    getDrawBounds() {
+        if (this.viewportBounds) {
+            return this.viewportBounds;
+        }
+        return { left: 0, top: 0, right: this.width, bottom: this.height };
+    }
     
     /**
      * Возвращает PIXI объект для рендеринга

package/src/grid/CrossGrid.js

@@ -34,16 +34,17 @@ export class CrossGrid extends BaseGrid {
         }
 
         const hs = this.crossHalfSize;
-
-        for (let x = 0; x <= this.width; x += this.size) {
-            for (let y = 0; y <= this.height; y += this.size) {
-                // Выравниваем к полу-пикселю для чётких 1px линий
+        const b = this.getDrawBounds();
+        const startX = Math.floor(b.left / this.size) * this.size;
+        const startY = Math.floor(b.top / this.size) * this.size;
+        const endX = Math.ceil(b.right / this.size) * this.size;
+        const endY = Math.ceil(b.bottom / this.size) * this.size;
+        for (let x = startX; x <= endX; x += this.size) {
+            for (let y = startY; y <= endY; y += this.size) {
                 const px = Math.round(x) + 0.5;
                 const py = Math.round(y) + 0.5;
-                // Горизонтальная часть креста
                 g.moveTo(px - hs, py);
                 g.lineTo(px + hs, py);
-                // Вертикальная часть креста
                 g.moveTo(px, py - hs);
                 g.lineTo(px, py + hs);
             }