@sequent-org/moodboard 1.0.0

package/src/ui/HtmlTextLayer.js

@@ -0,0 +1,279 @@
+import { Events } from '../core/events/Events.js';
+
+/**
+ * HtmlTextLayer — рисует текст как HTML-элементы поверх PIXI для максимальной чёткости
+ * Синхронизирует позицию/размер/масштаб с миром (worldLayer) и состоянием объектов
+ */
+export class HtmlTextLayer {
+    constructor(container, eventBus, core) {
+        this.container = container; // DOM-элемент, где находится canvas
+        this.eventBus = eventBus;
+        this.core = core; // CoreMoodBoard, нужен доступ к pixi/state
+        this.layer = null;
+        this.idToEl = new Map();
+    }
+
+    attach() {
+        // Создаем слой поверх канвы
+        this.layer = document.createElement('div');
+        this.layer.className = 'moodboard-html-layer';
+        Object.assign(this.layer.style, {
+            position: 'absolute',
+            inset: '0',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 10, // выше canvas, ниже тулбаров
+        });
+        // Вставляем рядом с canvas (в том же контейнере)
+        this.container.appendChild(this.layer);
+
+        // Подписки
+        this.eventBus.on(Events.Object.Created, ({ objectId, objectData }) => {
+            if (!objectData) return;
+            if (objectData.type === 'text' || objectData.type === 'simple-text') {
+                this._ensureTextEl(objectId, objectData);
+                this.updateOne(objectId);
+            }
+        });
+        this.eventBus.on(Events.Object.Deleted, ({ objectId }) => {
+            this._removeTextEl(objectId);
+        });
+        this.eventBus.on(Events.Object.TransformUpdated, ({ objectId }) => {
+            this.updateOne(objectId);
+        });
+
+        // Прятать HTML-текст во время редактирования (textarea)
+        this.eventBus.on(Events.UI.TextEditStart, ({ objectId }) => {
+            const el = this.idToEl.get(objectId);
+            if (el) el.style.visibility = 'hidden';
+        });
+        this.eventBus.on(Events.UI.TextEditEnd, ({ objectId }) => {
+            const el = this.idToEl.get(objectId);
+            if (el) el.style.visibility = '';
+        });
+
+        // Обработка событий скрытия/показа текста от SelectTool
+        this.eventBus.on(Events.Tool.HideObjectText, ({ objectId }) => {
+            console.log(`🔍 HtmlTextLayer: скрываю текст для объекта ${objectId}`);
+            const el = this.idToEl.get(objectId);
+            if (el) {
+                el.style.visibility = 'hidden';
+                console.log(`🔍 HtmlTextLayer: текст ${objectId} скрыт (visibility: hidden)`);
+            } else {
+                console.warn(`❌ HtmlTextLayer: HTML-элемент для объекта ${objectId} не найден`);
+            }
+        });
+        this.eventBus.on(Events.Tool.ShowObjectText, ({ objectId }) => {
+            console.log(`🔍 HtmlTextLayer: показываю текст для объекта ${objectId}`);
+            const el = this.idToEl.get(objectId);
+            if (el) {
+                el.style.visibility = '';
+                console.log(`🔍 HtmlTextLayer: текст ${objectId} показан (visibility: visible)`);
+            } else {
+                console.warn(`❌ HtmlTextLayer: HTML-элемент для объекта ${objectId} не найден`);
+            }
+        });
+
+        // Обработка обновления содержимого текста
+        this.eventBus.on(Events.Tool.UpdateObjectContent, ({ objectId, content }) => {
+            console.log(`🔍 HtmlTextLayer: обновляю содержимое для объекта ${objectId}:`, content);
+            const el = this.idToEl.get(objectId);
+            if (el && typeof content === 'string') {
+                el.textContent = content;
+                console.log(`🔍 HtmlTextLayer: содержимое обновлено для ${objectId}:`, content);
+            } else {
+                console.warn(`❌ HtmlTextLayer: не удалось обновить содержимое для ${objectId}:`, { el: !!el, content });
+            }
+        });
+
+        // Обработка изменения состояния объекта (для fontFamily и других свойств)
+        this.eventBus.on(Events.Object.StateChanged, ({ objectId, updates }) => {
+            const el = this.idToEl.get(objectId);
+            if (el && updates) {
+                if (updates.fontFamily) {
+                    el.style.fontFamily = updates.fontFamily;
+                    console.log(`🔍 HtmlTextLayer: обновлен шрифт для ${objectId}:`, updates.fontFamily);
+                }
+                if (updates.fontSize) {
+                    el.style.fontSize = `${updates.fontSize}px`;
+                    console.log(`🔍 HtmlTextLayer: обновлен размер шрифта для ${objectId}:`, updates.fontSize);
+                }
+                if (updates.color) {
+                    el.style.color = updates.color;
+                    console.log(`🔍 HtmlTextLayer: обновлен цвет для ${objectId}:`, updates.color);
+                }
+                if (updates.backgroundColor !== undefined) {
+                    el.style.backgroundColor = updates.backgroundColor === 'transparent' ? '' : updates.backgroundColor;
+                    console.log(`🔍 HtmlTextLayer: обновлен фон для ${objectId}:`, updates.backgroundColor);
+                }
+                // Здесь можно добавить обработку других свойств текста
+            }
+        });
+
+        // На все операции зума/пэна — полное обновление
+        this.eventBus.on(Events.UI.ZoomPercent, () => this.updateAll());
+        this.eventBus.on(Events.Tool.PanUpdate, () => this.updateAll());
+        // Обновления в реальном времени при перетаскивании/ресайзе/повороте
+        this.eventBus.on(Events.Tool.DragUpdate, ({ object }) => this.updateOne(object));
+        this.eventBus.on(Events.Tool.ResizeUpdate, ({ object }) => this.updateOne(object));
+        this.eventBus.on(Events.Tool.RotateUpdate, ({ object }) => this.updateOne(object));
+        this.eventBus.on(Events.Tool.GroupDragUpdate, ({ objects }) => {
+            const ids = Array.isArray(objects) ? objects : [];
+            ids.forEach(id => this.updateOne(id));
+        });
+        this.eventBus.on(Events.Tool.GroupResizeUpdate, ({ objects }) => {
+            const ids = Array.isArray(objects) ? objects : [];
+            ids.forEach(id => this.updateOne(id));
+        });
+        this.eventBus.on(Events.Tool.GroupRotateUpdate, ({ objects }) => {
+            const ids = Array.isArray(objects) ? objects : [];
+            ids.forEach(id => this.updateOne(id));
+        });
+
+        // Первичная отрисовка
+        this.rebuildFromState();
+        this.updateAll();
+
+        // Хелпер: при каждом обновлении ручек — обновляем HTML блок
+        const world = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
+        if (world) {
+            world.on('child:updated', () => this.updateAll()); // на случай внешних обновлений
+        }
+    }
+
+    destroy() {
+        if (this.layer) this.layer.remove();
+        this.layer = null;
+        this.idToEl.clear();
+    }
+
+    rebuildFromState() {
+        if (!this.core?.state) return;
+        const objs = this.core.state.state.objects || [];
+        console.log(`🔍 HtmlTextLayer: rebuildFromState, найдено объектов:`, objs.length);
+        
+        objs.forEach((o) => {
+            if (o.type === 'text' || o.type === 'simple-text') {
+                console.log(`🔍 HtmlTextLayer: создаю HTML-элемент для текстового объекта:`, o);
+                this._ensureTextEl(o.id, o);
+            }
+        });
+        this.updateAll();
+    }
+
+    _ensureTextEl(objectId, objectData) {
+        if (!this.layer || !objectId) return;
+        if (this.idToEl.has(objectId)) return;
+        
+        console.log(`🔍 HtmlTextLayer: создаю HTML-элемент для текста ${objectId}:`, objectData);
+        
+        const el = document.createElement('div');
+        el.className = 'mb-text';
+        el.dataset.id = objectId;
+        // Получаем свойства из properties объекта
+        const fontFamily = objectData.fontFamily || objectData.properties?.fontFamily || 'Arial, sans-serif';
+        const color = objectData.color || objectData.properties?.color || '#000000';
+        const backgroundColor = objectData.backgroundColor || objectData.properties?.backgroundColor || 'transparent';
+        
+        Object.assign(el.style, {
+            position: 'absolute',
+            transformOrigin: 'top left',
+            color: color,
+            whiteSpace: 'pre-wrap',
+            pointerEvents: 'none', // всё взаимодействие остаётся на PIXI
+            userSelect: 'none',
+            fontFamily: fontFamily,
+            backgroundColor: backgroundColor === 'transparent' ? '' : backgroundColor
+        });
+        const content = objectData.content || objectData.properties?.content || '';
+        el.textContent = content;
+        // Базовые размеры сохраняем в dataset
+        const fs = objectData.fontSize || objectData.properties?.fontSize || 16;
+        const bw = Math.max(1, objectData.width || objectData.properties?.baseW || 160);
+        const bh = Math.max(1, objectData.height || objectData.properties?.baseH || 36);
+        el.dataset.baseFontSize = String(fs);
+        el.dataset.baseW = String(bw);
+        el.dataset.baseH = String(bh);
+        this.layer.appendChild(el);
+        this.idToEl.set(objectId, el);
+        
+        console.log(`🔍 HtmlTextLayer: HTML-элемент создан и добавлен в DOM:`, el);
+    }
+
+    _removeTextEl(objectId) {
+        const el = this.idToEl.get(objectId);
+        if (el) el.remove();
+        this.idToEl.delete(objectId);
+    }
+
+    updateAll() {
+        if (!this.core?.pixi) return;
+        for (const id of this.idToEl.keys()) this.updateOne(id);
+    }
+
+    updateOne(objectId) {
+        const el = this.idToEl.get(objectId);
+        if (!el || !this.core) return;
+        
+        console.log(`🔍 HtmlTextLayer: обновляю позицию для текста ${objectId}`);
+        
+        const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+        const s = world?.scale?.x || 1;
+        const tx = world?.x || 0;
+        const ty = world?.y || 0;
+        const res = (this.core?.pixi?.app?.renderer?.resolution) || 1;
+        const obj = (this.core.state.state.objects || []).find(o => o.id === objectId);
+        if (!obj) return;
+        const x = obj.position?.x || 0;
+        const y = obj.position?.y || 0;
+        const w = obj.width || 0;
+        const h = obj.height || 0;
+        const angle = obj.rotation || obj.transform?.rotation || 0;
+
+        // Чёткая отрисовка: меняем реальный font-size, учитывая зум и изменение размеров
+        const baseFS = parseFloat(el.dataset.baseFontSize || '16') || 16;
+        const baseW = parseFloat(el.dataset.baseW || '160') || 160;
+        const baseH = parseFloat(el.dataset.baseH || '36') || 36;
+        const scaleX = w && baseW ? (w / baseW) : 1;
+        const scaleY = h && baseH ? (h / baseH) : 1;
+        const sObj = Math.min(scaleX, scaleY);
+        const sCss = s / res;
+        const fontSizePx = Math.max(1, baseFS * sObj * sCss);
+        el.style.fontSize = `${fontSizePx}px`;
+
+        // Позиция и габариты в экранных координатах
+        const left = (tx + s * x) / res;
+        const top = (ty + s * y) / res;
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
+        if (w && h) {
+            el.style.width = `${Math.max(1, (w * s) / res)}px`;
+            el.style.height = `${Math.max(1, (h * s) / res)}px`;
+        }
+        // Поворот вокруг top-left
+        if (angle) {
+            el.style.transform = `rotate(${angle}deg)`;
+        } else {
+            el.style.transform = '';
+        }
+        // Текст
+        const content = obj.content || obj.properties?.content;
+        if (typeof content === 'string') {
+            el.textContent = content;
+            console.log(`🔍 HtmlTextLayer: содержимое обновлено в updateOne для ${objectId}:`, content);
+        }
+        
+        console.log(`🔍 HtmlTextLayer: позиция обновлена для ${objectId}:`, {
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${Math.max(1, (w * s) / res)}px`,
+            height: `${Math.max(1, (h * s) / res)}px`,
+            fontSize: `${fontSizePx}px`,
+            content: content,
+            visibility: el.style.visibility,
+            textContent: el.textContent
+        });
+    }
+}
+
+

package/src/ui/MapPanel.js

@@ -0,0 +1,290 @@
+import { Events } from '../core/events/Events.js';
+
+export class MapPanel {
+    constructor(container, eventBus) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.element = null;
+        this.popupEl = null;
+        this.create();
+        this.attach();
+    }
+
+    create() {
+        this.element = document.createElement('div');
+        this.element.className = 'moodboard-mapbar';
+
+        const btn = document.createElement('button');
+        btn.className = 'moodboard-mapbar__button';
+        btn.title = 'Карта';
+        btn.textContent = '🗺️';
+        btn.dataset.action = 'toggle-map';
+
+        this.element.appendChild(btn);
+        this.container.appendChild(this.element);
+    }
+
+    attach() {
+        // Клик по кнопке — открыть/закрыть всплывающую панель
+        this.element.addEventListener('click', (e) => {
+            const btn = e.target.closest('.moodboard-mapbar__button');
+            if (!btn) return;
+            e.stopPropagation();
+            if (this.popupEl) this.hidePopup();
+            else this.showPopup();
+            this.eventBus.emit(Events.UI.MapToggle);
+        });
+
+        // Закрытие по клику вне панели
+        document.addEventListener('mousedown', (e) => {
+            if (!this.popupEl) return;
+            if (this.element.contains(e.target)) return;
+            this.hidePopup();
+        });
+
+        // Колесо для зума внутри миникарты
+        this.element.addEventListener('wheel', (e) => {
+            if (!this.popupEl) return;
+            if (!this.popupEl.contains(e.target)) return;
+            e.preventDefault();
+            // Масштабируем вокруг точки под курсором в миникарте
+            const rect = this.canvas.getBoundingClientRect();
+            const mx = e.clientX - rect.left;
+            const my = e.clientY - rect.top;
+            // Переводим в мировые координаты
+            const { worldX, worldY } = this.miniToWorld(mx, my);
+            // Переводим мировые координаты в экранные, чтобы использовать существующий зум ядра
+            const req = {};
+            this.eventBus.emit(Events.UI.MinimapGetData, req);
+            const { world } = req;
+            const screenX = worldX * (world.scale || 1) + world.x;
+            const screenY = worldY * (world.scale || 1) + world.y;
+            const delta = e.deltaY;
+            this.eventBus.emit(Events.Tool.WheelZoom, { x: screenX, y: screenY, delta });
+        }, { passive: false });
+    }
+
+    destroy() {
+        if (this.element) this.element.remove();
+        this.element = null;
+    }
+
+    // Показ всплывающей панели (20% ширины/высоты экрана, над кнопкой)
+    showPopup() {
+        if (this.popupEl) return;
+        const popup = document.createElement('div');
+        popup.className = 'moodboard-mapbar__popup';
+
+        // Canvas миникарты
+        const canvas = document.createElement('canvas');
+        canvas.className = 'moodboard-minimap-canvas';
+        popup.appendChild(canvas);
+
+        this.element.appendChild(popup);
+        this.popupEl = popup;
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+
+        this.layoutCanvas();
+        this.renderMinimap();
+
+        // Перерисовка при ресайзе окна
+        this._onResize = () => {
+            this.layoutCanvas();
+            this.renderMinimap();
+        };
+        window.addEventListener('resize', this._onResize);
+
+        // Интеракция: клик/перетаскивание
+        this._dragging = false;
+        this.canvas.addEventListener('mousedown', (e) => {
+            this._dragging = true;
+            this.handlePointer(e);
+        });
+        document.addEventListener('mousemove', this._onMove = (e) => {
+            if (!this._dragging) return;
+            this.handlePointer(e);
+        });
+        document.addEventListener('mouseup', this._onUp = () => {
+            this._dragging = false;
+        });
+
+        // Регулярно обновлять представление (можно оптимизировать на событиях)
+        this._raf = () => {
+            if (!this.popupEl) return;
+            this.renderMinimap();
+            this._rafId = requestAnimationFrame(this._raf);
+        };
+        this._rafId = requestAnimationFrame(this._raf);
+    }
+
+    // Скрыть всплывающую панель
+    hidePopup() {
+        if (!this.popupEl) return;
+        this.popupEl.remove();
+        this.popupEl = null;
+        this.canvas = null;
+        this.ctx = null;
+        window.removeEventListener('resize', this._onResize);
+        document.removeEventListener('mousemove', this._onMove);
+        document.removeEventListener('mouseup', this._onUp);
+        if (this._rafId) cancelAnimationFrame(this._rafId);
+    }
+
+    layoutCanvas() {
+        if (!this.popupEl || !this.canvas) return;
+        const rect = this.popupEl.getBoundingClientRect();
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = Math.max(10, Math.floor(rect.width * dpr));
+        this.canvas.height = Math.max(10, Math.floor(rect.height * dpr));
+        this.canvas.style.width = rect.width + 'px';
+        this.canvas.style.height = rect.height + 'px';
+        this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+
+    // Обратное преобразование: миникарта -> мир (используем bbox объектов)
+    miniToWorld(miniX, miniY) {
+        const req = {};
+        this.eventBus.emit(Events.UI.MinimapGetData, req);
+        const { view, objects } = req;
+        // Рассчитываем bbox по объектам
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        if (objects && objects.length > 0) {
+            for (const o of objects) {
+                minX = Math.min(minX, o.x);
+                minY = Math.min(minY, o.y);
+                maxX = Math.max(maxX, o.x + (o.width || 0));
+                maxY = Math.max(maxY, o.y + (o.height || 0));
+            }
+        } else {
+            minX = 0; minY = 0; maxX = view.width; maxY = view.height;
+        }
+        const bboxW = Math.max(1, maxX - minX);
+        const bboxH = Math.max(1, maxY - minY);
+        const scale = Math.min(this.canvas.clientWidth / bboxW, this.canvas.clientHeight / bboxH);
+        const offsetX = (this.canvas.clientWidth - bboxW * scale) / 2;
+        const offsetY = (this.canvas.clientHeight - bboxH * scale) / 2;
+        const worldX = minX + (miniX - offsetX) / scale;
+        const worldY = minY + (miniY - offsetY) / scale;
+        return { worldX, worldY };
+    }
+
+    handlePointer(e) {
+        if (!this.canvas) return;
+        const rect = this.canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        // Центрируем основной вид на точке
+        const { worldX, worldY } = this.miniToWorld(x, y);
+        this.eventBus.emit(Events.UI.MinimapCenterOn, { worldX, worldY });
+        this.renderMinimap();
+    }
+
+    renderMinimap() {
+        if (!this.canvas || !this.ctx) return;
+        const ctx = this.ctx;
+        const { width, height } = this.canvas;
+        ctx.save();
+        // canvas.width/height в CSS-пикселях уже учтены через setTransform
+        ctx.clearRect(0, 0, width, height);
+
+        // Получаем данные
+        const req = {};
+        this.eventBus.emit(Events.UI.MinimapGetData, req);
+        const { world, view, objects } = req;
+        if (!view || !world) return;
+        // Вычисляем bbox объектов
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        if (objects && objects.length > 0) {
+            for (const o of objects) {
+                minX = Math.min(minX, o.x);
+                minY = Math.min(minY, o.y);
+                maxX = Math.max(maxX, o.x + (o.width || 0));
+                maxY = Math.max(maxY, o.y + (o.height || 0));
+            }
+        } else {
+            minX = 0; minY = 0; maxX = view.width; maxY = view.height;
+        }
+        const bboxW = Math.max(1, maxX - minX);
+        const bboxH = Math.max(1, maxY - minY);
+        const scale = Math.min(this.canvas.clientWidth / bboxW, this.canvas.clientHeight / bboxH);
+        const offsetX = (this.canvas.clientWidth - bboxW * scale) / 2;
+        const offsetY = (this.canvas.clientHeight - bboxH * scale) / 2;
+
+        // Фон
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+
+        // Объекты в мировых координатах, приведенные по bbox
+        ctx.save();
+        ctx.translate(offsetX, offsetY);
+        ctx.scale(scale, scale);
+        // Подготовим множество выделенных объектов
+        const selReq = { selection: [] };
+        this.eventBus.emit(Events.Tool.GetSelection, selReq);
+        const selectedSet = new Set(selReq.selection || []);
+
+        // Сначала рисуем все объекты бледным
+        ctx.strokeStyle = '#7b8794';
+        ctx.lineWidth = Math.max(0.5, 1 / Math.max(scale, 0.0001));
+        for (const o of objects) {
+            const x = o.x - minX;
+            const y = o.y - minY;
+            const w = Math.max(2, o.width);
+            const h = Math.max(2, o.height);
+            if (o.rotation) {
+                ctx.save();
+                const cx = x + w / 2;
+                const cy = y + h / 2;
+                ctx.translate(cx, cy);
+                ctx.rotate((o.rotation * Math.PI) / 180);
+                ctx.strokeRect(-w / 2, -h / 2, w, h);
+                ctx.restore();
+            } else {
+                ctx.strokeRect(x, y, w, h);
+            }
+        }
+
+        // Поверх подсвечиваем выделенные объекты
+        if (selectedSet.size > 0) {
+            ctx.strokeStyle = '#3B82F6';
+            ctx.lineWidth = Math.max(1.5, 2 / Math.max(scale, 0.0001));
+            for (const o of objects) {
+                if (!selectedSet.has(o.id)) continue;
+                const x = o.x - minX;
+                const y = o.y - minY;
+                const w = Math.max(2, o.width);
+                const h = Math.max(2, o.height);
+                if (o.rotation) {
+                    ctx.save();
+                    const cx = x + w / 2;
+                    const cy = y + h / 2;
+                    ctx.translate(cx, cy);
+                    ctx.rotate((o.rotation * Math.PI) / 180);
+                    ctx.strokeRect(-w / 2, -h / 2, w, h);
+                    ctx.restore();
+                } else {
+                    ctx.strokeRect(x, y, w, h);
+                }
+            }
+        }
+        ctx.restore();
+
+        // Рамка видимой области: конвертируем текущий экран в мировые координаты и затем в миникарту
+        const s = world.scale || 1;
+        const worldLeft = -world.x / s;
+        const worldTop = -world.y / s;
+        const worldRight = (view.width - world.x) / s;
+        const worldBottom = (view.height - world.y) / s;
+        const rx = offsetX + (worldLeft - minX) * scale;
+        const ry = offsetY + (worldTop - minY) * scale;
+        const rw = (worldRight - worldLeft) * scale;
+        const rh = (worldBottom - worldTop) * scale;
+        ctx.strokeStyle = '#1e90ff';
+        ctx.lineWidth = 2;
+        ctx.strokeRect(rx, ry, rw, rh);
+        ctx.restore();
+    }
+}
+
+