@sequent-org/moodboard 1.2.119 → 1.3.0

package/src/ui/toolbar/ToolbarRenderer.js

@@ -0,0 +1,97 @@
+import { Events } from '../../core/events/Events.js';
+
+export class ToolbarRenderer {
+    constructor(toolbar) {
+        this.toolbar = toolbar;
+    }
+
+    createToolbar() {
+        this.toolbar.element = document.createElement('div');
+        this.toolbar.element.className = `moodboard-toolbar moodboard-toolbar--${this.toolbar.theme}`;
+
+        const newTools = [
+            { id: 'select', iconName: 'select', title: 'Инструмент выделения (V)', type: 'activate-select' },
+            { id: 'pan', iconName: 'pan', title: 'Панорамирование (Пробел)', type: 'activate-pan' },
+            { id: 'divider', type: 'divider' },
+            { id: 'text-add', iconName: 'text-add', title: 'Добавить текст', type: 'text-add' },
+            { id: 'note', iconName: 'note', title: 'Добавить записку', type: 'note-add' },
+            { id: 'image', iconName: 'image', title: 'Добавить картинку', type: 'image-add' },
+            // { id: 'image2', iconName: 'image', title: 'Добавить картинку', type: 'image2-add' },
+            { id: 'shapes', iconName: 'shapes', title: 'Фигуры', type: 'custom-shapes' },
+            { id: 'pencil', iconName: 'pencil', title: 'Рисование', type: 'custom-draw' },
+            { id: 'attachments', iconName: 'attachments', title: 'Файлы', type: 'custom-attachments' },
+            { id: 'emoji', iconName: 'emoji', title: 'Эмоджи', type: 'custom-emoji' }
+        ];
+
+        const existingTools = [
+            { id: 'frame', iconName: 'frame', title: 'Добавить фрейм', type: 'frame' },
+            { id: 'divider', type: 'divider' },
+            { id: 'undo', iconName: 'undo', title: 'Отменить (Ctrl+Z)', type: 'undo', disabled: true },
+            { id: 'redo', iconName: 'redo', title: 'Повторить (Ctrl+Y)', type: 'redo', disabled: true }
+        ];
+
+        [...newTools, ...existingTools].forEach((tool) => {
+            if (tool.type === 'divider') {
+                const divider = document.createElement('div');
+                divider.className = 'moodboard-toolbar__divider';
+                this.toolbar.element.appendChild(divider);
+            } else {
+                const button = this.createButton(tool);
+                this.toolbar.element.appendChild(button);
+            }
+        });
+
+        this.toolbar.container.appendChild(this.toolbar.element);
+        this.toolbar.createShapesPopup();
+        this.toolbar.createDrawPopup();
+        this.toolbar.createEmojiPopup();
+        this.toolbar.createFramePopup();
+
+        this.toolbar.eventBus.on(Events.Tool.Activated, this.toolbar._toolActivatedHandler);
+
+        this.toolbar.currentDrawTool = 'pencil';
+    }
+
+    createButton(tool) {
+        const button = document.createElement('button');
+        button.className = `moodboard-toolbar__button moodboard-toolbar__button--${tool.id}`;
+        button.dataset.tool = tool.type;
+        button.dataset.toolId = tool.id;
+
+        if (tool.disabled) {
+            button.disabled = true;
+            button.classList.add('moodboard-toolbar__button--disabled');
+        }
+
+        if (tool.title) {
+            this.toolbar.createTooltip(button, tool.title);
+        }
+
+        if (tool.iconName) {
+            this.createSvgIcon(button, tool.iconName);
+        }
+
+        return button;
+    }
+
+    createSvgIcon(button, iconName) {
+        if (this.toolbar.icons[iconName]) {
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = this.toolbar.icons[iconName];
+            const svg = tempDiv.querySelector('svg');
+
+            if (svg) {
+                svg.removeAttribute('width');
+                svg.removeAttribute('height');
+                svg.style.display = 'block';
+                button.appendChild(svg);
+            }
+        } else {
+            const fallbackIcon = document.createElement('span');
+            fallbackIcon.textContent = iconName.charAt(0).toUpperCase();
+            fallbackIcon.style.fontSize = '14px';
+            fallbackIcon.style.fontWeight = 'bold';
+            button.appendChild(fallbackIcon);
+        }
+    }
+}

package/src/ui/toolbar/ToolbarStateController.js

@@ -0,0 +1,79 @@
+import { Events } from '../../core/events/Events.js';
+
+export class ToolbarStateController {
+    constructor(toolbar) {
+        this.toolbar = toolbar;
+    }
+
+    setActiveToolbarButton(toolName) {
+        if (!this.toolbar.element) return;
+
+        this.toolbar.element.querySelectorAll('.moodboard-toolbar__button--active').forEach((el) => {
+            el.classList.remove('moodboard-toolbar__button--active');
+        });
+
+        const map = {
+            select: 'select',
+            pan: 'pan',
+            draw: 'pencil',
+            text: 'text-add'
+        };
+
+        let btnId = map[toolName];
+
+        if (!btnId && toolName === 'place') {
+            const placeButtonMap = {
+                text: 'text-add',
+                note: 'note',
+                frame: 'frame',
+                'frame-tool': 'frame',
+                comments: 'comments',
+                attachments: 'attachments',
+                shapes: 'shapes',
+                emoji: 'emoji',
+                null: 'image'
+            };
+            btnId = placeButtonMap[this.toolbar.placeSelectedButtonId] || 'shapes';
+        }
+
+        if (!btnId) return;
+
+        const btn = this.toolbar.element.querySelector(`.moodboard-toolbar__button--${btnId}`);
+        if (btn) {
+            btn.classList.add('moodboard-toolbar__button--active');
+        }
+    }
+
+    setupHistoryEvents() {
+        this.toolbar.eventBus.on(Events.UI.UpdateHistoryButtons, (data) => {
+            this.updateHistoryButtons(data.canUndo, data.canRedo);
+        });
+    }
+
+    updateHistoryButtons(canUndo, canRedo) {
+        const undoButton = this.toolbar.element.querySelector('[data-tool="undo"]');
+        const redoButton = this.toolbar.element.querySelector('[data-tool="redo"]');
+
+        if (undoButton) {
+            undoButton.disabled = !canUndo;
+            if (canUndo) {
+                undoButton.classList.remove('moodboard-toolbar__button--disabled');
+                undoButton.title = 'Отменить последнее действие (Ctrl+Z)';
+            } else {
+                undoButton.classList.add('moodboard-toolbar__button--disabled');
+                undoButton.title = 'Нет действий для отмены';
+            }
+        }
+
+        if (redoButton) {
+            redoButton.disabled = !canRedo;
+            if (canRedo) {
+                redoButton.classList.remove('moodboard-toolbar__button--disabled');
+                redoButton.title = 'Повторить отмененное действие (Ctrl+Y)';
+            } else {
+                redoButton.classList.add('moodboard-toolbar__button--disabled');
+                redoButton.title = 'Нет действий для повтора';
+            }
+        }
+    }
+}

package/src/ui/toolbar/ToolbarTooltipController.js

@@ -0,0 +1,52 @@
+export class ToolbarTooltipController {
+    constructor(toolbar) {
+        this.toolbar = toolbar;
+    }
+
+    createTooltip(button, text) {
+        const tooltip = document.createElement('div');
+        tooltip.className = 'moodboard-tooltip';
+        tooltip.textContent = text;
+        document.body.appendChild(tooltip);
+
+        let showTimeout;
+        let hideTimeout;
+
+        button.addEventListener('mouseenter', () => {
+            clearTimeout(hideTimeout);
+            showTimeout = setTimeout(() => {
+                this.showTooltip(tooltip, button);
+            }, 300);
+        });
+
+        button.addEventListener('mouseleave', () => {
+            clearTimeout(showTimeout);
+            hideTimeout = setTimeout(() => {
+                this.hideTooltip(tooltip);
+            }, 100);
+        });
+
+        button.addEventListener('click', () => {
+            clearTimeout(showTimeout);
+            this.hideTooltip(tooltip);
+        });
+
+        button._tooltip = tooltip;
+    }
+
+    showTooltip(tooltip, button) {
+        const buttonRect = button.getBoundingClientRect();
+        const left = buttonRect.right + 8;
+        const top = buttonRect.top + (buttonRect.height / 2) - (tooltip.offsetHeight / 2);
+        const maxLeft = window.innerWidth - tooltip.offsetWidth - 8;
+        const adjustedLeft = Math.min(left, maxLeft);
+
+        tooltip.style.left = `${adjustedLeft}px`;
+        tooltip.style.top = `${top}px`;
+        tooltip.classList.add('moodboard-tooltip--show');
+    }
+
+    hideTooltip(tooltip) {
+        tooltip.classList.remove('moodboard-tooltip--show');
+    }
+}

package/src/utils/emojiLoaderNoBundler.js

@@ -99,7 +99,7 @@ export class EmojiLoaderNoBundler {
     async generateEmojiIndex() {
         // Эта функция может быть вызвана только в dev среде с bundler
         if (typeof import.meta !== 'undefined' && import.meta.glob) {
-            const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG}', { eager: true, as: 'url' });
+            const modules = import.meta.glob('../assets/emodji/**/*.{png,PNG}', { eager: true, query: '?url', import: 'default' });
             const index = {};
             
             Object.keys(modules).forEach(path => {