@sequent-org/moodboard 1.0.0

package/src/ui/ContextMenu.js

@@ -0,0 +1,340 @@
+import { Events } from '../core/events/Events.js';
+
+export class ContextMenu {
+    constructor(container, eventBus) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.element = null;
+        this.isVisible = false;
+        this.lastX = 0;
+        this.lastY = 0;
+        this.currentGridType = 'line';
+
+        this.createElement();
+        this.attachEvents();
+    }
+
+    createElement() {
+        this.element = document.createElement('div');
+        this.element.className = 'moodboard-contextmenu';
+        this.element.style.position = 'absolute';
+        this.element.style.minWidth = '160px';
+        this.element.style.background = '#ffffff';
+        this.element.style.border = '1px solid rgba(0,0,0,0.1)';
+        this.element.style.borderRadius = '8px';
+        this.element.style.boxShadow = '0 8px 24px rgba(0,0,0,0.12)';
+        this.element.style.padding = '8px 0';
+        this.element.style.zIndex = '2000';
+        this.element.style.display = 'none';
+        this.element.style.userSelect = 'none';
+        this.element.style.pointerEvents = 'auto';
+        this.container.appendChild(this.element);
+
+        // Пустое содержимое на сейчас
+        this.element.innerHTML = '<div style="padding:8px 12px; color:#888;">(пусто)</div>';
+    }
+
+    attachEvents() {
+        // Показ по событию из ядра
+        this.eventBus.on(Events.UI.ContextMenuShow, ({ x, y, context, targetId }) => {
+            this.show(x, y, context, targetId);
+        });
+
+        // Синхронизация активного типа сетки
+        this.eventBus.on(Events.UI.GridCurrent, ({ type }) => {
+            if (type) this.currentGridType = type;
+        });
+
+        // Скрывать при клике вне меню или по Esc
+        document.addEventListener('mousedown', (e) => {
+            if (!this.isVisible) return;
+            if (!this.element.contains(e.target)) {
+                this.hide();
+            }
+        });
+        document.addEventListener('keydown', (e) => {
+            if (!this.isVisible) return;
+            if (e.key === 'Escape') this.hide();
+        });
+        window.addEventListener('resize', () => this.hide());
+        window.addEventListener('scroll', () => this.hide(), true);
+    }
+
+    show(x, y, context = 'canvas', targetId = null) {
+        this.lastX = x;
+        this.lastY = y;
+        this.renderItems(context, targetId);
+        this.element.style.left = `${x}px`;
+        this.element.style.top = `${y}px`;
+        this.element.style.display = 'block';
+        this.isVisible = true;
+        this.ensureInViewport();
+    }
+
+    hide() {
+        this.element.style.display = 'none';
+        this.isVisible = false;
+    }
+
+    ensureInViewport() {
+        const rect = this.element.getBoundingClientRect();
+        let dx = 0, dy = 0;
+        if (rect.right > window.innerWidth) dx = window.innerWidth - rect.right - 8;
+        if (rect.bottom > window.innerHeight) dy = window.innerHeight - rect.bottom - 8;
+        if (dx !== 0 || dy !== 0) {
+            const left = parseInt(this.element.style.left || '0', 10) + dx;
+            const top = parseInt(this.element.style.top || '0', 10) + dy;
+            this.element.style.left = `${left}px`;
+            this.element.style.top = `${top}px`;
+        }
+    }
+
+    renderItems(context, targetId) {
+        // Пока только для объекта: Копировать / Вставить
+        if (context === 'object') {
+            this.element.innerHTML = '';
+            const list = document.createElement('div');
+            list.className = 'moodboard-contextmenu__list';
+
+            const mkItem = (label, shortcut, onClick) => {
+                const item = document.createElement('div');
+                item.className = 'moodboard-contextmenu__item';
+                const left = document.createElement('span');
+                left.className = 'moodboard-contextmenu__label';
+                left.textContent = label;
+                const right = document.createElement('span');
+                right.className = 'moodboard-contextmenu__shortcut';
+                right.textContent = shortcut || '';
+                item.appendChild(left);
+                item.appendChild(right);
+                item.addEventListener('click', () => {
+                    this.hide();
+                    onClick();
+                });
+                return item;
+            };
+
+            // Копировать — копируем конкретный объект
+            list.appendChild(mkItem('Копировать', 'Ctrl+C', () => {
+                if (targetId) {
+                    this.eventBus.emit(Events.UI.CopyObject, { objectId: targetId });
+                }
+            }));
+
+            // Вставить — используем текущий буфер (объект/группа)
+            list.appendChild(mkItem('Вставить', 'Ctrl+V', () => {
+                this.eventBus.emit(Events.UI.PasteAt, { x: this.lastX, y: this.lastY });
+            }));
+
+            // Слойность
+            list.appendChild(mkItem('На передний план', ']', () => {
+                if (targetId) this.eventBus.emit(Events.UI.LayerBringToFront, { objectId: targetId });
+            }));
+            list.appendChild(mkItem('Перенести вперёд', 'Ctrl+]', () => {
+                if (targetId) this.eventBus.emit(Events.UI.LayerBringForward, { objectId: targetId });
+            }));
+            list.appendChild(mkItem('Перенести назад', 'Ctrl+[', () => {
+                if (targetId) this.eventBus.emit(Events.UI.LayerSendBackward, { objectId: targetId });
+            }));
+            list.appendChild(mkItem('На задний план', '[', () => {
+                if (targetId) this.eventBus.emit(Events.UI.LayerSendToBack, { objectId: targetId });
+            }));
+
+            this.element.appendChild(list);
+            return;
+        }
+
+        if (context === 'group') {
+            this.element.innerHTML = '';
+            const list = document.createElement('div');
+            list.className = 'moodboard-contextmenu__list';
+
+            const mkItem = (label, shortcut, onClick) => {
+                const item = document.createElement('div');
+                item.className = 'moodboard-contextmenu__item';
+                const left = document.createElement('span');
+                left.className = 'moodboard-contextmenu__label';
+                left.textContent = label;
+                const right = document.createElement('span');
+                right.className = 'moodboard-contextmenu__shortcut';
+                right.textContent = shortcut || '';
+                item.appendChild(left);
+                item.appendChild(right);
+                item.addEventListener('click', () => {
+                    this.hide();
+                    onClick();
+                });
+                return item;
+            };
+
+            // Копировать группу — берём текущее выделение
+            list.appendChild(mkItem('Копировать', 'Ctrl+C', () => {
+                this.eventBus.emit(Events.UI.CopyGroup);
+            }));
+
+            // Вставить — вставляет из group/object буфера в точку клика
+            list.appendChild(mkItem('Вставить', 'Ctrl+V', () => {
+                this.eventBus.emit(Events.UI.PasteAt, { x: this.lastX, y: this.lastY });
+            }));
+
+            // Слойность для группы (двигаем все выбранные объекты)
+            list.appendChild(mkItem('На передний план', ']', () => {
+                this.eventBus.emit(Events.UI.LayerGroupBringToFront);
+            }));
+            list.appendChild(mkItem('Перенести вперёд', 'Ctrl+]', () => {
+                this.eventBus.emit(Events.UI.LayerGroupBringForward);
+            }));
+            list.appendChild(mkItem('Перенести назад', 'Ctrl+[', () => {
+                this.eventBus.emit(Events.UI.LayerGroupSendBackward);
+            }));
+            list.appendChild(mkItem('На задний план', '[', () => {
+                this.eventBus.emit(Events.UI.LayerGroupSendToBack);
+            }));
+
+            this.element.appendChild(list);
+            return;
+        }
+
+        if (context === 'canvas') {
+            this.element.innerHTML = '';
+            const list = document.createElement('div');
+            list.className = 'moodboard-contextmenu__list';
+            const item = document.createElement('div');
+            item.className = 'moodboard-contextmenu__item';
+            const left = document.createElement('span');
+            left.className = 'moodboard-contextmenu__label';
+            left.textContent = 'Вставить';
+            const right = document.createElement('span');
+            right.className = 'moodboard-contextmenu__shortcut';
+            right.textContent = 'Ctrl+V';
+            item.appendChild(left);
+            item.appendChild(right);
+            item.addEventListener('click', () => {
+                this.hide();
+                this.eventBus.emit(Events.UI.PasteAt, { x: this.lastX, y: this.lastY });
+            });
+            list.appendChild(item);
+
+            // Вставить картинку из буфера обмена (если есть)
+            const itemImg = document.createElement('div');
+            itemImg.className = 'moodboard-contextmenu__item';
+            const leftImg = document.createElement('span');
+            leftImg.className = 'moodboard-contextmenu__label';
+            leftImg.textContent = 'Вставить картинку';
+            const rightImg = document.createElement('span');
+            rightImg.className = 'moodboard-contextmenu__shortcut';
+            rightImg.textContent = 'Ctrl+V';
+            itemImg.appendChild(leftImg);
+            itemImg.appendChild(rightImg);
+            itemImg.addEventListener('click', async () => {
+                this.hide();
+                try {
+                    const items = (navigator.clipboard && navigator.clipboard.read) ? await navigator.clipboard.read() : [];
+                    let src = null;
+                    let name = 'clipboard-image.png';
+                    for (const it of items) {
+                        const types = it.types || [];
+                        const imgType = types.find(t => t.startsWith('image/'));
+                        if (!imgType) continue;
+                        const blob = await it.getType(imgType);
+                        src = await new Promise((res) => { const r = new FileReader(); r.onload = () => res(r.result); r.readAsDataURL(blob); });
+                        name = `clipboard.${imgType.split('/')[1] || 'png'}`;
+                        break;
+                    }
+                    // Fallback: попробовать текст с URL
+                    if (!src && navigator.clipboard && navigator.clipboard.readText) {
+                        const text = (await navigator.clipboard.readText())?.trim();
+                        if (text) {
+                            const isData = /^data:image\//i.test(text);
+                            const isHttp = /^https?:\/\//i.test(text) && /(png|jpe?g|gif|webp|bmp|svg)(\?.*)?$/i.test(text);
+                            if (isData) {
+                                src = text;
+                                name = 'clipboard-image.png';
+                            } else if (isHttp) {
+                                try {
+                                    const resp = await fetch(text, { mode: 'cors' });
+                                    const blob = await resp.blob();
+                                    src = await new Promise((res) => { const r = new FileReader(); r.onload = () => res(r.result); r.readAsDataURL(blob); });
+                                    name = text.split('/').pop() || 'image';
+                                } catch (_) {
+                                    // как крайний случай, отдадим прямой URL — если CORS запрещает, объект может не загрузиться
+                                    src = text;
+                                    name = text.split('/').pop() || 'image';
+                                }
+                            }
+                        }
+                    }
+                    // Fallback: диалог выбора файла
+                    if (!src) {
+                        await new Promise((resolve) => setTimeout(resolve, 0));
+                        const input = document.createElement('input');
+                        input.type = 'file';
+                        input.accept = 'image/*';
+                        input.style.position = 'fixed';
+                        input.style.left = '-9999px';
+                        document.body.appendChild(input);
+                        input.addEventListener('change', () => {
+                            const file = input.files && input.files[0];
+                            if (file) {
+                                const reader = new FileReader();
+                                reader.onload = () => {
+                                    const dataUrl = reader.result;
+                                    this.eventBus.emit(Events.UI.PasteImageAt, { x: this.lastX, y: this.lastY, src: dataUrl, name: file.name });
+                                    document.body.removeChild(input);
+                                };
+                                reader.readAsDataURL(file);
+                            } else {
+                                document.body.removeChild(input);
+                            }
+                        }, { once: true });
+                        input.click();
+                        return;
+                    }
+                    if (src) this.eventBus.emit(Events.UI.PasteImageAt, { x: this.lastX, y: this.lastY, src, name });
+                } catch (err) {
+                    // no-op (браузер мог запретить доступ к буферу)
+                }
+            });
+            list.appendChild(itemImg);
+
+            // Разделитель
+            const divider = document.createElement('div');
+            divider.className = 'moodboard-contextmenu__divider';
+            list.appendChild(divider);
+
+            // Ряд кнопок сетки
+            const gridRow = document.createElement('div');
+            gridRow.className = 'moodboard-contextmenu__grid-row';
+            const buttons = [
+                { icon: '▦', type: 'line', title: 'Сетка: линии' },
+                { icon: '⋯', type: 'dot', title: 'Сетка: точки' },
+                { icon: '+', type: 'cross', title: 'Сетка: крестики' },
+                { icon: '⊘', type: 'off', title: 'Сетка: выкл' }
+            ];
+            buttons.forEach(cfg => {
+                const b = document.createElement('button');
+                b.className = 'moodboard-contextmenu__grid-button';
+                b.textContent = cfg.icon;
+                b.title = cfg.title;
+                b.dataset.grid = cfg.type;
+                if (cfg.type === this.currentGridType) {
+                    b.classList.add('moodboard-contextmenu__grid-button--active');
+                }
+                b.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.hide();
+                    this.eventBus.emit(Events.UI.GridChange, { type: cfg.type });
+                });
+                gridRow.appendChild(b);
+            });
+            list.appendChild(gridRow);
+            this.element.appendChild(list);
+            return;
+        }
+
+        // По умолчанию — пусто
+        this.element.innerHTML = '<div style="padding:8px 12px; color:#888;">(пусто)</div>';
+    }
+}
+
+

package/src/ui/FilePropertiesPanel.js

@@ -0,0 +1,298 @@
+import { Events } from '../core/events/Events.js';
+
+/**
+ * Панель свойств файла
+ * Отображается над выделенным файлом
+ */
+export class FilePropertiesPanel {
+    constructor(eventBus, container, core = null) {
+        this.eventBus = eventBus;
+        this.container = container;
+        this.core = core;
+        this.panel = null;
+        this.currentId = null;
+        
+        this._attachEvents();
+        this._createPanel();
+    }
+
+    _attachEvents() {
+        // Показываем панель при изменении выделения
+        this.eventBus.on(Events.Tool.SelectionAdd, () => this.updateFromSelection());
+        this.eventBus.on(Events.Tool.SelectionRemove, () => this.updateFromSelection());
+        this.eventBus.on(Events.Tool.SelectionClear, () => this.hide());
+
+        // Скрываем панель при удалении объекта
+        this.eventBus.on(Events.Object.Deleted, (data) => {
+            const objectId = data?.objectId || data;
+            if (this.currentId && objectId === this.currentId) this.hide();
+        });
+
+        // Обновляем позицию при любых изменениях
+        this.eventBus.on(Events.Tool.DragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.GroupDragUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.ResizeUpdate, () => this.reposition());
+        this.eventBus.on(Events.Tool.RotateUpdate, () => this.reposition());
+
+        // Обновляем позицию при зуме/пане
+        this.eventBus.on(Events.UI.ZoomPercent, () => {
+            if (this.currentId) this.reposition();
+        });
+
+        this.eventBus.on(Events.Tool.PanUpdate, () => {
+            if (this.currentId) this.reposition();
+        });
+
+        // Скрываем панель при активации других инструментов
+        this.eventBus.on(Events.Tool.Activated, ({ tool }) => {
+            if (tool !== 'select') {
+                this.hide();
+            }
+        });
+    }
+
+    updateFromSelection() {
+        // Показываем только для одиночного выделения файла
+        const ids = this.core?.selectTool ? Array.from(this.core.selectTool.selectedObjects || []) : [];
+        
+        if (!ids || ids.length !== 1) { 
+            this.hide(); 
+            return; 
+        }
+        
+        const id = ids[0];
+        
+        // Избегаем дублирования - если уже показываем панель для этого объекта
+        if (this.currentId === id && this.panel && this.panel.style.display !== 'none') {
+            return;
+        }
+        
+        const pixi = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(id) : null;
+        const isFile = !!(pixi && pixi._mb && pixi._mb.type === 'file');
+        
+        console.log('📎 FilePropertiesPanel: updateFromSelection - id=', id, 'isFile=', isFile);
+        
+        if (isFile) {
+            this.showFor(id);
+        } else {
+            this.hide();
+        }
+    }
+
+    showFor(objectId) {
+        console.log('📎 FilePropertiesPanel: Showing panel for objectId:', objectId);
+        this.currentId = objectId;
+        if (this.panel) {
+            this.panel.style.display = 'flex';
+            this.reposition();
+        }
+        
+        // Обновляем кнопки в соответствии с текущими свойствами файла
+        this._updateButtonsFromObject();
+    }
+
+    hide() {
+        this.currentId = null;
+        if (this.panel) {
+            this.panel.style.display = 'none';
+        }
+    }
+
+    _createPanel() {
+        if (this.panel) return;
+
+        // Создаем основную панель
+        this.panel = document.createElement('div');
+        this.panel.className = 'moodboard-file-properties-panel';
+        this.panel.style.cssText = `
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: white;
+            border: 1px solid #E5E7EB;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            display: none;
+            flex-direction: row;
+            align-items: center;
+            padding: 8px 12px;
+            gap: 8px;
+            z-index: 1000;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            font-size: 14px;
+            pointer-events: auto;
+            user-select: none;
+        `;
+
+        // Кнопка скачивания
+        this.downloadButton = document.createElement('button');
+        this.downloadButton.className = 'moodboard-file-panel-download';
+        this.downloadButton.style.cssText = `
+            background: #3B82F6;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            padding: 6px 12px;
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: background-color 0.2s;
+        `;
+        this.downloadButton.innerHTML = `
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                <polyline points="7,10 12,15 17,10"/>
+                <line x1="12" y1="15" x2="12" y2="3"/>
+            </svg>
+            Скачать
+        `;
+
+        // Обработчики событий
+        this.downloadButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this._handleDownload();
+        });
+
+        // Hover эффекты
+        this.downloadButton.addEventListener('mouseenter', () => {
+            this.downloadButton.style.backgroundColor = '#2563EB';
+        });
+        this.downloadButton.addEventListener('mouseleave', () => {
+            this.downloadButton.style.backgroundColor = '#3B82F6';
+        });
+
+        this.panel.appendChild(this.downloadButton);
+        this.container.appendChild(this.panel);
+    }
+
+    async _handleDownload() {
+        if (!this.currentId || !this.core?.fileUploadService) {
+            console.warn('FilePropertiesPanel: не могу скачать файл - нет currentId или fileUploadService');
+            return;
+        }
+
+        try {
+            // Получаем данные файла
+            const objects = this.core.state.getObjects();
+            const fileObject = objects.find(obj => obj.id === this.currentId);
+            
+            console.log('📎 FilePropertiesPanel: Скачивание файла:', {
+                currentId: this.currentId,
+                fileObject: fileObject,
+                hasFileUploadService: !!this.core?.fileUploadService
+            });
+            
+            if (!fileObject || fileObject.type !== 'file') {
+                console.warn('FilePropertiesPanel: объект не найден или не является файлом');
+                return;
+            }
+
+            const fileId = fileObject.fileId;
+            const fileName = fileObject.properties?.fileName || 'file';
+
+            console.log('📎 FilePropertiesPanel: Данные файла для скачивания:', {
+                fileId,
+                fileName,
+                downloadUrl: this.core.fileUploadService.getDownloadUrl(fileId)
+            });
+
+            if (!fileId) {
+                console.warn('FilePropertiesPanel: у файла нет fileId');
+                alert('Ошибка: файл не имеет ID для скачивания');
+                return;
+            }
+
+            // Показываем состояние загрузки
+            const originalText = this.downloadButton.innerHTML;
+            this.downloadButton.innerHTML = `
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <path d="M8 12l2 2 4-4"/>
+                </svg>
+                Скачивание...
+            `;
+            this.downloadButton.disabled = true;
+
+            // Скачиваем файл
+            await this.core.fileUploadService.downloadFile(fileId, fileName);
+            console.log('✅ Файл скачан:', fileName);
+
+            // Восстанавливаем кнопку
+            setTimeout(() => {
+                this.downloadButton.innerHTML = originalText;
+                this.downloadButton.disabled = false;
+            }, 1000);
+
+        } catch (error) {
+            console.error('Ошибка скачивания файла:', error);
+            alert('Ошибка скачивания файла: ' + error.message);
+            
+            // Восстанавливаем кнопку
+            this.downloadButton.innerHTML = `
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                    <polyline points="7,10 12,15 17,10"/>
+                    <line x1="12" y1="15" x2="12" y2="3"/>
+                </svg>
+                Скачать
+            `;
+            this.downloadButton.disabled = false;
+        }
+    }
+
+    _updateButtonsFromObject() {
+        if (!this.currentId) return;
+
+        // Получаем данные файла для обновления состояния кнопок
+        const objects = this.core.state.getObjects();
+        const fileObject = objects.find(obj => obj.id === this.currentId);
+        
+        if (fileObject && fileObject.type === 'file') {
+            const hasFileId = !!(fileObject.fileId);
+            
+            // Показываем/скрываем кнопку скачивания в зависимости от наличия fileId
+            if (this.downloadButton) {
+                this.downloadButton.style.display = hasFileId ? 'flex' : 'none';
+            }
+        }
+    }
+
+    reposition() {
+        if (!this.currentId || !this.panel || this.panel.style.display === 'none') return;
+
+        const pixiObject = this.core?.pixi?.objects?.get(this.currentId);
+        if (!pixiObject) return;
+
+        try {
+            // Получаем границы объекта в world координатах
+            const bounds = pixiObject.getBounds();
+            
+            // Преобразуем в screen координаты
+            const worldToScreen = this.core.pixi.app.stage.worldTransform;
+            const screenX = bounds.x * worldToScreen.a + worldToScreen.tx;
+            const screenY = bounds.y * worldToScreen.d + worldToScreen.ty;
+            
+            // Позиционируем панель сверху по центру объекта
+            const panelWidth = this.panel.offsetWidth || 120;
+            const centerX = screenX + (bounds.width * worldToScreen.a) / 2;
+            
+            this.panel.style.left = `${centerX - panelWidth / 2}px`;
+            this.panel.style.top = `${screenY - 65}px`; // 65px выше объекта (было 45px)
+            
+        } catch (error) {
+            console.warn('FilePropertiesPanel: ошибка позиционирования:', error);
+        }
+    }
+
+    destroy() {
+        if (this.panel && this.panel.parentNode) {
+            this.panel.parentNode.removeChild(this.panel);
+        }
+        this.panel = null;
+        this.currentId = null;
+    }
+}