@sequent-org/moodboard 1.0.24 → 1.1.0

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

@@ -36,6 +36,8 @@ export class PlacementTool extends BaseTool {
                         this.showEmojiGhost();
                     } else if (this.pending.type === 'frame') {
                         this.showFrameGhost();
+                    } else if (this.pending.type === 'frame-draw') {
+                        this.startFrameDrawMode();
                     } else if (this.pending.type === 'shape') {
                         this.showShapeGhost();
                     }
@@ -143,22 +145,50 @@ export class PlacementTool extends BaseTool {
         }
         
         if (!this.pending) return;
+        // Если включен режим рисования фрейма — инициируем рамку
+        if (this.pending.type === 'frame-draw') {
+            const start = this._toWorld(event.x, event.y);
+            this._frameDrawState = { startX: start.x, startY: start.y, graphics: null };
+            if (this.world) {
+                const g = new PIXI.Graphics();
+                g.zIndex = 3000;
+                this.world.addChild(g);
+                this._frameDrawState.graphics = g;
+            }
+            // Вешаем временные обработчики движения/отпускания
+            this._onFrameDrawMoveBound = (ev) => this._onFrameDrawMove(ev);
+            this._onFrameDrawUpBound = (ev) => this._onFrameDrawUp(ev);
+            this.app.view.addEventListener('mousemove', this._onFrameDrawMoveBound);
+            this.app.view.addEventListener('mouseup', this._onFrameDrawUpBound, { once: true });
+            return;
+        }
 
         const worldPoint = this._toWorld(event.x, event.y);
-        const halfW = (this.pending.size?.width ?? 100) / 2;
-        const halfH = (this.pending.size?.height ?? 100) / 2;
-        const position = { x: Math.round(worldPoint.x - halfW), y: Math.round(worldPoint.y - halfH) };
+        // Базовая позиция (может быть переопределена для конкретных типов)
+        let 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 || {};
+        let props = this.pending.properties || {};
         const isTextWithEditing = this.pending.type === 'text' && props.editOnCreate;
         const isImage = this.pending.type === 'image';
         const isFile = this.pending.type === 'file';
         const presetSize = {
-            width: (this.pending.size && this.pending.size.width) ? this.pending.size.width : 200,
-            height: (this.pending.size && this.pending.size.height) ? this.pending.size.height : 150,
+            width: (this.pending.size && this.pending.size.width) ? this.pending.size.width : (props.width || 200),
+            height: (this.pending.size && this.pending.size.height) ? this.pending.size.height : (props.height || 150),
         };
 
         if (isTextWithEditing) {
+            // Для текста используем те же размеры, что и у "призрака",
+            // чтобы позиция совпадала пиксель-в-пиксель
+            const fontSize = props.fontSize || 18;
+            const ghostWidth = 120;
+            const ghostHeight = fontSize + 20;
+            position = {
+                x: Math.round(worldPoint.x - ghostWidth / 2),
+                y: Math.round(worldPoint.y - ghostHeight / 2)
+            };
             // Слушаем событие создания объекта, чтобы получить его ID
             const handleObjectCreated = (objectData) => {
                 if (objectData.type === 'text') {
@@ -202,6 +232,20 @@ export class PlacementTool extends BaseTool {
                     backgroundColor: 'transparent' // Дефолтный фон (прозрачный)
                 }
             });
+        } else if (this.pending.type === 'frame') {
+            // Для фрейма центр привязываем к курсору так же, как у призрака
+            const width = props.width || presetSize.width || 200;
+            const height = props.height || presetSize.height || 300;
+            position = {
+                x: Math.round(worldPoint.x - width / 2),
+                y: Math.round(worldPoint.y - height / 2)
+            };
+            this.eventBus.emit(Events.UI.ToolbarAction, {
+                type: 'frame',
+                id: 'frame',
+                position,
+                properties: { ...props, width, height }
+            });
         } else if (isImage && props.selectFileOnPlace) {
             const input = document.createElement('input');
             input.type = 'file';
@@ -314,6 +358,16 @@ export class PlacementTool extends BaseTool {
             }, { once: true });
             input.click();
         } 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 };
+                position = {
+                    x: Math.round(worldPoint.x - noteW / 2),
+                    y: Math.round(worldPoint.y - noteH / 2)
+                };
+            }
             // Обычное размещение через общий канал
             this.eventBus.emit(Events.UI.ToolbarAction, {
                 type: this.pending.type,
@@ -331,6 +385,57 @@ export class PlacementTool extends BaseTool {
         }
     }
 
+    startFrameDrawMode() {
+        // Курсор при рисовании фрейма
+        if (this.app && this.app.view) this.app.view.style.cursor = 'crosshair';
+    }
+
+    _onFrameDrawMove(event) {
+        if (!this._frameDrawState || !this._frameDrawState.graphics) return;
+        const p = this._toWorld(event.offsetX, event.offsetY);
+        const x = Math.min(this._frameDrawState.startX, p.x);
+        const y = Math.min(this._frameDrawState.startY, p.y);
+        const w = Math.abs(p.x - this._frameDrawState.startX);
+        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);
+        g.endFill();
+    }
+
+    _onFrameDrawUp(event) {
+        const g = this._frameDrawState?.graphics;
+        if (!this._frameDrawState || !g) return;
+        const p = this._toWorld(event.offsetX, event.offsetY);
+        const x = Math.min(this._frameDrawState.startX, p.x);
+        const y = Math.min(this._frameDrawState.startY, p.y);
+        const w = Math.abs(p.x - this._frameDrawState.startX);
+        const h = Math.abs(p.y - this._frameDrawState.startY);
+        // Удаляем временную графику
+        if (g.parent) g.parent.removeChild(g);
+        g.destroy();
+        this._frameDrawState = null;
+        // Создаем фрейм, если размер достаточный
+        if (w >= 2 && h >= 2) {
+            this.eventBus.emit(Events.UI.ToolbarAction, {
+                type: 'frame',
+                id: 'frame',
+                position: { x, y },
+                properties: { width: Math.round(w), height: Math.round(h), title: 'Произвольный', lockedAspect: false, isArbitrary: true }
+            });
+        }
+        // Сбрасываем pending и выходим из режима place → select
+        this.pending = null;
+        this.hideGhost();
+        if (this.app && this.app.view) {
+            this.app.view.removeEventListener('mousemove', this._onFrameDrawMoveBound);
+            this.app.view.style.cursor = '';
+        }
+        this.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+    }
+
     _toWorld(x, y) {
         if (!this.world) return { x, y };
         const global = new PIXI.Point(x, y);
@@ -366,41 +471,57 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6; // Полупрозрачность
         
-        // Создаем визуальное представление файла (аналогично FileObject)
-        const graphics = new PIXI.Graphics();
+        // Размеры
         const width = this.selectedFile.properties.width || 120;
         const height = this.selectedFile.properties.height || 140;
-        
-        // Фон файла
-        graphics.beginFill(0xF8F9FA, 0.8);
-        graphics.lineStyle(2, 0xDEE2E6, 0.8);
-        graphics.drawRoundedRect(0, 0, width, height, 8);
-        graphics.endFill();
-        
-        // Иконка файла (простой прямоугольник)
-        graphics.beginFill(0x6C757D, 0.6);
-        graphics.drawRoundedRect(width * 0.2, height * 0.15, width * 0.6, height * 0.3, 4);
-        graphics.endFill();
-        
+
+        // Размытая тень (как у FileObject)
+        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(0xFFFFFF, 1);
+        background.drawRect(0, 0, width, height);
+        background.endFill();
+
+        // Иконка-заглушка файла наверху
+        const icon = new PIXI.Graphics();
+        const iconSize = Math.min(48, width * 0.4);
+        const iconX = (width - iconSize) / 2;
+        const iconY = 16;
+        icon.beginFill(0x6B7280, 1);
+        icon.drawRect(iconX, iconY, iconSize * 0.8, iconSize);
+        icon.endFill();
+
         // Текст названия файла
         const fileName = this.selectedFile.fileName || 'File';
         const displayName = fileName.length > 15 ? fileName.substring(0, 12) + '...' : fileName;
-        
         const nameText = new PIXI.Text(displayName, {
-            fontFamily: 'Arial, sans-serif',
+            fontFamily: 'system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif',
             fontSize: 12,
-            fill: 0x495057,
+            fill: 0x333333,
             align: 'center',
             wordWrap: true,
-            wordWrapWidth: width - 10
+            wordWrapWidth: width - 8
         });
-        
         nameText.x = (width - nameText.width) / 2;
-        nameText.y = height * 0.55;
-        
-        this.ghostContainer.addChild(graphics);
+        nameText.y = height - 40;
+
+        // Добавляем в контейнер в правильном порядке
+        this.ghostContainer.addChild(shadow);
+        this.ghostContainer.addChild(background);
+        this.ghostContainer.addChild(icon);
         this.ghostContainer.addChild(nameText);
-        
+
         // Центрируем контейнер относительно курсора
         this.ghostContainer.pivot.x = width / 2;
         this.ghostContainer.pivot.y = height / 2;
@@ -651,43 +772,63 @@ export class PlacementTool extends BaseTool {
         this.ghostContainer = new PIXI.Container();
         this.ghostContainer.alpha = 0.6; // Полупрозрачность
         
-        // Размеры призрака записки (из настроек NoteObject)
+        // Размеры и стили, синхронизированные с 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 || 'Новая записка';
-        
-        // Фон записки (как в NoteObject)
-        const background = new PIXI.Graphics();
-        background.beginFill(0xFFF9C4, 0.8); // Светло-желтый с прозрачностью
-        background.lineStyle(2, 0xF9A825, 0.8); // Золотистая граница
-        background.drawRoundedRect(0, 0, width, height, 8);
-        background.endFill();
-        
-        // Добавляем небольшую тень для реалистичности
+        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;
+        const textColor = (typeof this.pending.properties?.textColor === 'number')
+            ? this.pending.properties.textColor
+            : 0x1A1A1A;
+
+        // Тень (размытая) под запиской
         const shadow = new PIXI.Graphics();
-        shadow.beginFill(0x000000, 0.1);
-        shadow.drawRoundedRect(2, 2, width, height, 8);
+        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.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: 0x1A1A1A, // Темный цвет как в NoteObject
+            fill: textColor,
             align: 'center',
             wordWrap: true,
-            wordWrapWidth: width - 16, // Отступы по 8px с каждой стороны
+            wordWrapWidth: width - 16,
             lineHeight: fontSize * 1.2
         });
-        
-        // Центрируем текст в записке
-        noteText.x = (width - noteText.width) / 2;
-        noteText.y = (height - noteText.height) / 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);
         
         // Центрируем контейнер относительно курсора