@sequent-org/moodboard 1.1.0 → 1.2.1

package/src/tools/object-tools/PlacementTool.js

@@ -1,4 +1,21 @@
 import { BaseTool } from '../BaseTool.js';
+import iCursorSvg from '../../assets/icons/i-cursor.svg?raw';
+
+// Масштабируем I-курсор в 2 раза меньше
+const _scaledICursorSvg = (() => {
+    try {
+        if (!/\bwidth="/i.test(iCursorSvg)) {
+            return iCursorSvg.replace('<svg ', '<svg width="16px" height="32px" ');
+        }
+        return iCursorSvg
+            .replace(/width="[^"]+"/i, 'width="16px"')
+            .replace(/height="[^"]+"/i, 'height="32px"');
+    } catch (_) {
+        return iCursorSvg;
+    }
+})();
+
+const TEXT_CURSOR = `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(_scaledICursorSvg)}") 0 0, text`;
 import { Events } from '../../core/events/Events.js';
 import * as PIXI from 'pixi.js';
 
@@ -9,7 +26,7 @@ import * as PIXI from 'pixi.js';
 export class PlacementTool extends BaseTool {
     constructor(eventBus, core = null) {
         super('place', eventBus);
-        this.cursor = 'crosshair';
+        this.cursor = 'default';
         this.hotkey = null;
         this.app = null;
         this.world = null;
@@ -25,6 +42,11 @@ export class PlacementTool extends BaseTool {
         if (this.eventBus) {
             this.eventBus.on(Events.Place.Set, (cfg) => {
                 this.pending = cfg ? { ...cfg } : null;
+                // Обновляем курсор в зависимости от pending
+                if (this.app && this.app.view) {
+                    const cur = this._getPendingCursor();
+                    this.app.view.style.cursor = (cur === 'default') ? '' : cur;
+                }
                 
                 // Показываем призрак для текста, записки, эмоджи, фрейма или фигур, если они активны
                 if (this.pending && this.app && this.world) {
@@ -34,6 +56,8 @@ export class PlacementTool extends BaseTool {
                         this.showNoteGhost();
                     } else if (this.pending.type === 'emoji') {
                         this.showEmojiGhost();
+                    } else if (this.pending.type === 'image') {
+                        this.showImageUrlGhost();
                     } else if (this.pending.type === 'frame') {
                         this.showFrameGhost();
                     } else if (this.pending.type === 'frame-draw') {
@@ -41,6 +65,29 @@ export class PlacementTool extends BaseTool {
                     } else if (this.pending.type === 'shape') {
                         this.showShapeGhost();
                     }
+                    // Поддержка сценария перетаскивания из панели: отпускание без предварительного mousedown на канвасе
+                    if (this.pending.placeOnMouseUp && this.app && this.app.view) {
+                        const onUp = (ev) => {
+                            this.app.view.removeEventListener('mouseup', onUp);
+                            if (!this.pending) return;
+                            const worldPoint = this._toWorld(ev.x, ev.y);
+                            const position = {
+                                x: Math.round(worldPoint.x - (this.pending.size?.width ?? 100) / 2),
+                                y: Math.round(worldPoint.y - (this.pending.size?.height ?? 100) / 2)
+                            };
+                            const props = { ...(this.pending.properties || {}) };
+                            this.eventBus.emit(Events.UI.ToolbarAction, {
+                                type: this.pending.type,
+                                id: this.pending.type,
+                                position,
+                                properties: props
+                            });
+                            this.pending = null;
+                            this.hideGhost();
+                            this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+                        };
+                        this.app.view.addEventListener('mouseup', onUp, { once: true });
+                    }
                 }
             });
             
@@ -90,9 +137,9 @@ export class PlacementTool extends BaseTool {
         super.activate();
         this.app = app;
         this.world = this._getWorldLayer();
-        // Курсор указывает на размещение (прицел)
+        // Курсор в зависимости от типа размещаемого объекта
         if (this.app && this.app.view) {
-            this.app.view.style.cursor = 'crosshair';
+            this.app.view.style.cursor = this._getPendingCursor();
             // Добавляем обработчик движения мыши для "призрака"
             this.app.view.addEventListener('mousemove', this._onMouseMove.bind(this));
         }
@@ -145,6 +192,31 @@ export class PlacementTool extends BaseTool {
         }
         
         if (!this.pending) return;
+        // Если включен режим "перетянуть и отпустить" из панели (placeOnMouseUp),
+        // то размещение выполняем на mouseup, а здесь только показываем призрак и запоминаем старт
+        if (this.pending.placeOnMouseUp) {
+            const onUp = (ev) => {
+                this.app.view.removeEventListener('mouseup', onUp);
+                // Имитация обычного place по текущему положению курсора
+                const worldPoint = this._toWorld(ev.x, ev.y);
+                const position = {
+                    x: Math.round(worldPoint.x - (this.pending.size?.width ?? 100) / 2),
+                    y: Math.round(worldPoint.y - (this.pending.size?.height ?? 100) / 2)
+                };
+                const props = { ...(this.pending.properties || {}) };
+                this.eventBus.emit(Events.UI.ToolbarAction, {
+                    type: this.pending.type,
+                    id: this.pending.type,
+                    position,
+                    properties: props
+                });
+                this.pending = null;
+                this.hideGhost();
+                this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+            };
+            this.app.view.addEventListener('mouseup', onUp, { once: true });
+            return;
+        }
         // Если включен режим рисования фрейма — инициируем рамку
         if (this.pending.type === 'frame-draw') {
             const start = this._toWorld(event.x, event.y);
@@ -360,12 +432,14 @@ export class PlacementTool extends BaseTool {
         } else {
             // Для записки: выставляем фактические габариты и центрируем по курсору
             if (this.pending.type === 'note') {
-                const noteW = (typeof props.width === 'number') ? props.width : 160;
-                const noteH = (typeof props.height === 'number') ? props.height : 100;
-                props = { ...props, width: noteW, height: noteH };
+                const base = 250; // квадрат 250x250
+                const noteW = (typeof props.width === 'number') ? props.width : base;
+                const noteH = (typeof props.height === 'number') ? props.height : base;
+                const side = Math.max(noteW, noteH);
+                props = { ...props, width: side, height: side };
                 position = {
-                    x: Math.round(worldPoint.x - noteW / 2),
-                    y: Math.round(worldPoint.y - noteH / 2)
+                    x: Math.round(worldPoint.x - side / 2),
+                    y: Math.round(worldPoint.y - side / 2)
                 };
             }
             // Обычное размещение через общий канал
@@ -399,9 +473,14 @@ export class PlacementTool extends BaseTool {
         const h = Math.abs(p.y - this._frameDrawState.startY);
         const g = this._frameDrawState.graphics;
         g.clear();
-        g.lineStyle(1, 0x3B82F6, 1);
-        g.beginFill(0x3B82F6, 0.08);
-        g.drawRect(x, y, w, h);
+        // Снапим к полупикселю и используем внутреннее выравнивание линии для чётких 1px краёв
+        const x0 = Math.floor(x) + 0.5;
+        const y0 = Math.floor(y) + 0.5;
+        const w0 = Math.max(1, Math.round(w));
+        const h0 = Math.max(1, Math.round(h));
+        g.lineStyle(1, 0x3B82F6, 1, 1 /* alignment: inner */);
+        g.beginFill(0xFFFFFF, 0.6);
+        g.drawRect(x0, y0, w0, h0);
         g.endFill();
     }
 
@@ -454,6 +533,11 @@ export class PlacementTool extends BaseTool {
      */
     _onMouseMove(event) {
         if ((this.selectedFile || this.selectedImage || this.pending) && this.ghostContainer) {
+            // Сохраним последние координаты мыши (в экранных координатах) — пригодится для первичной позиции призрака
+            if (this.app && this.app.view) {
+                this.app.view._lastMouseX = event.x;
+                this.app.view._lastMouseY = event.y;
+            }
             const worldPoint = this._toWorld(event.offsetX, event.offsetY);
             this.updateGhostPosition(worldPoint.x, worldPoint.y);
         }
@@ -470,6 +554,17 @@ export class PlacementTool extends BaseTool {
         // Создаем контейнер для призрака
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6; // Полупрозрачность
+        // Сразу ставим контейнер в позицию курсора, чтобы он не мигал в левом верхнем углу
+        if (this.app && this.app.view) {
+            const rect = this.app.view.getBoundingClientRect();
+            const cursorX = (typeof this.app.view._lastMouseX === 'number') ? this.app.view._lastMouseX : (rect.left + rect.width / 2);
+            const cursorY = (typeof this.app.view._lastMouseY === 'number') ? this.app.view._lastMouseY : (rect.top + rect.height / 2);
+            const worldPoint = this._toWorld(cursorX, cursorY);
+            this.updateGhostPosition(worldPoint.x, worldPoint.y);
+        }
+        // Попробуем дождаться загрузки веб-шрифта Caveat до отрисовки
+        const pendingFont = (this.pending.properties?.fontFamily) || 'Caveat, Arial, cursive';
+        const primaryFont = String(pendingFont).split(',')[0].trim().replace(/^['"]|['"]$/g, '') || 'Caveat';
         
         // Размеры
         const width = this.selectedFile.properties.width || 120;
@@ -708,6 +803,67 @@ export class PlacementTool extends BaseTool {
         this.world.addChild(this.ghostContainer);
     }
 
+    /**
+     * Показать "призрак" изображения по URL (для выбора из панели эмоджи)
+     */
+    async showImageUrlGhost() {
+        if (!this.pending || this.pending.type !== 'image' || !this.world) return;
+        const src = this.pending.properties?.src;
+        if (!src) return;
+
+        this.hideGhost();
+
+        this.ghostContainer = new PIXI.Container();
+        this.ghostContainer.alpha = 0.6;
+
+        const maxWidth = this.pending.size?.width || this.pending.properties?.width || 56;
+        const maxHeight = this.pending.size?.height || this.pending.properties?.height || 56;
+
+        try {
+            const texture = await PIXI.Texture.fromURL(src);
+            const imageAspect = (texture.width || 1) / (texture.height || 1);
+            let width = maxWidth;
+            let height = maxWidth / imageAspect;
+            if (height > maxHeight) {
+                height = maxHeight;
+                width = maxHeight * imageAspect;
+            }
+
+            const sprite = new PIXI.Sprite(texture);
+            sprite.width = Math.max(1, Math.round(width));
+            sprite.height = Math.max(1, Math.round(height));
+
+            const border = new PIXI.Graphics();
+            try { border.lineStyle({ width: 2, color: 0xDEE2E6, alpha: 0.8 }); }
+            catch (_) { border.lineStyle(2, 0xDEE2E6, 0.8); }
+            border.drawRoundedRect(-2, -2, sprite.width + 4, sprite.height + 4, 4);
+
+            this.ghostContainer.addChild(border);
+            this.ghostContainer.addChild(sprite);
+            this.ghostContainer.pivot.set(sprite.width / 2, sprite.height / 2);
+        } catch (e) {
+            const g = new PIXI.Graphics();
+            g.beginFill(0xF0F0F0, 0.8);
+            g.lineStyle(2, 0xDEE2E6, 0.8);
+            g.drawRoundedRect(0, 0, maxWidth, maxHeight, 8);
+            g.endFill();
+            this.ghostContainer.addChild(g);
+            this.ghostContainer.pivot.set(maxWidth / 2, maxHeight / 2);
+        }
+
+        this.world.addChild(this.ghostContainer);
+
+        // Кастомный курсор: мини-превью иконки рядом с курсором
+        try {
+            if (this.app && this.app.view && src) {
+                const cursorSize = 24;
+                const url = encodeURI(src);
+                // Используем CSS cursor с изображением, если поддерживается
+                this.app.view.style.cursor = `url(${url}) ${Math.floor(cursorSize/2)} ${Math.floor(cursorSize/2)}, default`;
+            }
+        } catch (_) {}
+    }
+
     /**
      * Показать "призрак" текста
      */
@@ -772,70 +928,36 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6; // Полупрозрачность
         
-        // Размеры и стили, синхронизированные с NoteObject
-        const width = this.pending.properties?.width || 160;
-        const height = this.pending.properties?.height || 100;
-        const fontSize = this.pending.properties?.fontSize || 16;
-        const content = this.pending.properties?.content || 'Новая записка';
+        // Размеры и стили (без текста у призрака)
+        const width = this.pending.properties?.width || 250;
+        const height = this.pending.properties?.height || 250;
         const backgroundColor = (typeof this.pending.properties?.backgroundColor === 'number')
             ? this.pending.properties.backgroundColor
-            : 0xFFF9C4;
-        const borderColor = (typeof this.pending.properties?.borderColor === 'number')
-            ? this.pending.properties.borderColor
-            : 0xF9A825;
+            : 0xFFF9C4; // желтый как у записки
         const textColor = (typeof this.pending.properties?.textColor === 'number')
             ? this.pending.properties.textColor
             : 0x1A1A1A;
 
-        // Тень (размытая) под запиской
-        const shadow = new PIXI.Graphics();
-        try {
-            shadow.filters = [new PIXI.filters.BlurFilter(6)];
-        } catch (e) {}
-        shadow.beginFill(0x000000, 1);
-        shadow.drawRect(0, 0, width, height);
-        shadow.endFill();
-        shadow.x = 2;
-        shadow.y = 3;
-        shadow.alpha = 0.18;
+        // Тени для призрака отключены по требованию (без тени)
 
-        // Основной фон записки (прямоугольник без рамки)
+        // Основной фон записки (желтый как у оригинала)
         const background = new PIXI.Graphics();
         background.beginFill(backgroundColor, 1);
-        background.drawRect(0, 0, width, height);
+        background.drawRoundedRect(0, 0, width, height, 2);
         background.endFill();
 
-        // Прямоугольная шапка сверху, цвет рамки
-        const header = new PIXI.Graphics();
-        header.beginFill(borderColor, 1);
-        header.drawRect(0, 0, width, 8);
-        header.endFill();
-
-        // Текст записки, выровнен как в NoteObject (центр по X, отступ сверху)
-        const noteText = new PIXI.Text(content, {
-            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
-            fontSize: fontSize,
-            fill: textColor,
-            align: 'center',
-            wordWrap: true,
-            wordWrapWidth: width - 16,
-            lineHeight: fontSize * 1.2
-        });
-        noteText.anchor.set(0.5, 0);
-        noteText.x = Math.round(width / 2);
-        noteText.y = 20; // как в NoteObject topMargin
+        // У призрака текста нет — только фон записки
 
         // Порядок добавления: тень → фон → шапка → текст
-        this.ghostContainer.addChild(shadow);
+        // Без тени
         this.ghostContainer.addChild(background);
-        this.ghostContainer.addChild(header);
-        this.ghostContainer.addChild(noteText);
         
         // Центрируем контейнер относительно курсора
         this.ghostContainer.pivot.x = width / 2;
         this.ghostContainer.pivot.y = height / 2;
         
         this.world.addChild(this.ghostContainer);
+        // Текст убран — дополнительная загрузка шрифтов для призрака не требуется
     }
 
     /**
@@ -911,15 +1033,33 @@ export class PlacementTool extends BaseTool {
         // Получаем параметры фрейма из pending
         const width = this.pending.properties?.width || 200;
         const height = this.pending.properties?.height || 300;
-        const fillColor = this.pending.properties?.fillColor || 0xFFFFFF;
-        const borderColor = this.pending.properties?.borderColor || 0x333333;
+        const fillColor = (this.pending.properties?.backgroundColor ?? this.pending.properties?.fillColor) ?? 0xFFFFFF;
         const title = this.pending.properties?.title || 'Новый';
+
+        // Читаем стили рамки как у реального фрейма (FrameObject)
+        const rootStyles = (typeof window !== 'undefined') ? getComputedStyle(document.documentElement) : null;
+        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '4') : 4;
+        const cssCornerRadius = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-corner-radius') || '6') : 6;
+        const cssBorderColor = rootStyles ? rootStyles.getPropertyValue('--frame-border-color').trim() : '';
+        const borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
+        const cornerRadius = Number.isFinite(cssCornerRadius) ? cssCornerRadius : 6;
+        let strokeColor;
+        if (cssBorderColor && cssBorderColor.startsWith('#')) {
+            strokeColor = parseInt(cssBorderColor.slice(1), 16);
+        } else {
+            strokeColor = (typeof this.pending.properties?.borderColor === 'number') ? this.pending.properties.borderColor : 0xE0E0E0;
+        }
         
-        // Создаем фон фрейма (как в FrameObject)
+        // Создаем фон фрейма (как в FrameObject) — повторяем стили рамки
         const frameGraphics = new PIXI.Graphics();
-        frameGraphics.beginFill(fillColor, 0.8); // Полупрозрачная заливка
-        frameGraphics.lineStyle(2, borderColor, 0.8); // Граница
-        frameGraphics.drawRect(0, 0, width, height);
+        try {
+            frameGraphics.lineStyle({ width: borderWidth, color: strokeColor, alpha: 1, alignment: 1 });
+        } catch (e) {
+            frameGraphics.lineStyle(borderWidth, strokeColor, 1);
+        }
+        // Заливка как у фрейма, прозрачность задаётся через контейнер (alpha)
+        frameGraphics.beginFill(fillColor, 1);
+        frameGraphics.drawRoundedRect(0, 0, width, height, cornerRadius);
         frameGraphics.endFill();
         
         // Создаем заголовок фрейма (как в FrameObject)
@@ -929,41 +1069,13 @@ export class PlacementTool extends BaseTool {
             fill: 0x333333,
             fontWeight: 'bold'
         });
-        titleText.anchor.set(0, 1); // Левый нижний угол текста
-        titleText.y = -5; // Немного выше фрейма
-        
-        // Добавляем пунктирную рамку для лучшей видимости призрака
-        const dashedBorder = new PIXI.Graphics();
-        dashedBorder.lineStyle(1, 0x007BFF, 0.6);
-        // Создаем пунктирную линию вручную
-        for (let i = 0; i <= width; i += 10) {
-            if ((i / 10) % 2 === 0) {
-                dashedBorder.moveTo(i, -2);
-                dashedBorder.lineTo(Math.min(i + 5, width), -2);
-            }
-        }
-        for (let i = 0; i <= height; i += 10) {
-            if ((i / 10) % 2 === 0) {
-                dashedBorder.moveTo(-2, i);
-                dashedBorder.lineTo(-2, Math.min(i + 5, height));
-            }
-        }
-        for (let i = 0; i <= width; i += 10) {
-            if ((i / 10) % 2 === 0) {
-                dashedBorder.moveTo(i, height + 2);
-                dashedBorder.lineTo(Math.min(i + 5, width), height + 2);
-            }
-        }
-        for (let i = 0; i <= height; i += 10) {
-            if ((i / 10) % 2 === 0) {
-                dashedBorder.moveTo(width + 2, i);
-                dashedBorder.lineTo(width + 2, Math.min(i + 5, height));
-            }
-        }
+        // Размещаем заголовок внутри верхней части фрейма
+        titleText.anchor.set(0, 0);
+        titleText.x = 8;
+        titleText.y = 4;
         
         this.ghostContainer.addChild(frameGraphics);
         this.ghostContainer.addChild(titleText);
-        this.ghostContainer.addChild(dashedBorder);
         
         // Центрируем контейнер относительно курсора
         this.ghostContainer.pivot.x = width / 2;
@@ -1143,4 +1255,12 @@ export class PlacementTool extends BaseTool {
     }
 }
 
+// Возвращает подходящий курсор для текущего pending состояния
+PlacementTool.prototype._getPendingCursor = function() {
+    if (!this.pending) return 'crosshair';
+    if (this.pending.type === 'text') return TEXT_CURSOR;
+    if (this.pending.type === 'frame-draw') return 'crosshair';
+    return 'crosshair';
+};
+