@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/moodboard/bootstrap/MoodBoardInitializer.js

@@ -2,6 +2,73 @@ import { CoreMoodBoard } from '../../core/index.js';
 import { createMoodBoardManagers, wireMoodBoardServices } from './MoodBoardManagersFactory.js';
 import { createMoodBoardUi } from './MoodBoardUiFactory.js';
 import { bindSaveCallbacks } from '../integration/MoodBoardEventBindings.js';
+import { CommentService } from '../../services/comments/CommentService.js';
+import { CommentPinLayer } from '../../ui/comments/CommentPinLayer.js';
+import { CommentsBar } from '../../ui/CommentsBar.js';
+import { CommentThreadPopover } from '../../ui/comments/CommentThreadPopover.js';
+import { CommentTool } from '../../tools/object-tools/CommentTool.js';
+import { CommentListPanel } from '../../ui/comments/CommentListPanel.js';
+
+export async function wireCommentsSubsystem(board) {
+    if (!board.options.enableComments || !board.options.comments) return;
+
+    const core = board.coreMoodboard;
+    const boardId = board.options.boardId || 'workspace-board';
+
+    board.commentService = new CommentService({
+        eventBus: core.eventBus,
+        boardId,
+        adapter: board.options.comments,
+        currentUser: board.options.currentUser || null,
+    });
+    board.commentService.attach();
+
+    board.commentThreadPopover = new CommentThreadPopover(
+        board.canvasContainer,
+        core.eventBus,
+        core,
+        board.commentService
+    );
+    board.commentThreadPopover.attach();
+
+    board.commentPinLayer = new CommentPinLayer(
+        board.canvasContainer,
+        core.eventBus,
+        core,
+        board.commentService
+    );
+    board.commentPinLayer.attach();
+
+    board.commentsBar = new CommentsBar(board.workspaceElement, core.eventBus);
+    board.commentsBar.attach();
+
+    board.commentListPanel = new CommentListPanel(board.workspaceElement, core.eventBus, core, board.commentService);
+    board.commentListPanel.attach();
+
+    const commentTool = new CommentTool(
+        core.eventBus,
+        core,
+        board.commentService,
+        board.commentThreadPopover
+    );
+    core.toolManager.registerTool(commentTool);
+
+    board.comments = {
+        applyRemote: (event) => board.commentService.applyRemote(event),
+        openThread: (threadId) => board.commentService.openThread(threadId),
+    };
+
+    try {
+        await board.commentService.loadInitial();
+        board.commentPinLayer.rebuild();
+        const initialThreadId = board.options.initialThreadId;
+        if (initialThreadId != null) {
+            board.commentService.openThread(Number(initialThreadId));
+        }
+    } catch (err) {
+        console.error('Comments load failed:', err);
+    }
+}
 
 export async function initCoreMoodBoard(board) {
     const canvasSize = board.workspaceManager.getCanvasSize();
@@ -10,7 +77,7 @@ export async function initCoreMoodBoard(board) {
         boardId: board.options.boardId || 'workspace-board',
         width: canvasSize.width,
         height: canvasSize.height,
-        backgroundColor: board.options.theme === 'dark' ? 0x2a2a2a : 0xF7FBFF,
+        backgroundColor: board.options.theme === 'dark' ? 0x2a2a2a : 0xDAEEFB,
         saveEndpoint: board.options.saveEndpoint,
         loadEndpoint: board.options.loadEndpoint,
     };
@@ -34,6 +101,7 @@ export async function initializeMoodBoard(board) {
         await initCoreMoodBoard(board);
         createMoodBoardManagers(board);
         createMoodBoardUi(board);
+        await wireCommentsSubsystem(board);
         wireMoodBoardServices(board);
         bindSaveCallbacks(board);
 

package/src/moodboard/bootstrap/MoodBoardUiFactory.js

@@ -10,13 +10,17 @@ import { MindmapHtmlTextLayer } from '../../ui/mindmap/MindmapHtmlTextLayer.js';
 import { MindmapConnectionLayer } from '../../ui/mindmap/MindmapConnectionLayer.js';
 import { MindmapCollapseLayer } from '../../ui/mindmap/MindmapCollapseLayer.js';
 import { ConnectorLayer } from '../../ui/connectors/ConnectorLayer.js';
+import { ConnectorLabelLayer } from '../../ui/connectors/ConnectorLabelLayer.js';
 import { ConnectionAnchorsLayer } from '../../ui/connectors/ConnectionAnchorsLayer.js';
+import { ConnectorHandlesLayer } from '../../ui/connectors/ConnectorHandlesLayer.js';
 import { HtmlHandlesLayer } from '../../ui/HtmlHandlesLayer.js';
-import { CommentPopover } from '../../ui/CommentPopover.js';
 import { TextPropertiesPanel } from '../../ui/TextPropertiesPanel.js';
 import { FramePropertiesPanel } from '../../ui/FramePropertiesPanel.js';
 import { NotePropertiesPanel } from '../../ui/NotePropertiesPanel.js';
 import { FilePropertiesPanel } from '../../ui/FilePropertiesPanel.js';
+import { ConnectorPropertiesPanel } from '../../ui/ConnectorPropertiesPanel.js';
+import { ShapePropertiesPanel } from '../../ui/ShapePropertiesPanel.js';
+import { DrawingPropertiesPanel } from '../../ui/DrawingPropertiesPanel.js';
 import { ChatWindow } from '../../ui/chat/ChatWindow.js';
 import { bindToolbarEvents, bindTopbarEvents } from '../integration/MoodBoardEventBindings.js';
 
@@ -29,6 +33,7 @@ function initToolbar(board) {
             emojiBasePath: board.options.emojiBasePath || null,
         }
     );
+    board.toolbar.enableComments = !!board.options.enableComments;
 
     if (typeof window !== 'undefined') {
         window.reloadIcon = (iconName) => board.toolbar.reloadToolbarIcon(iconName);
@@ -88,6 +93,9 @@ function initContextMenu(board) {
         board.canvasContainer,
         board.coreMoodboard.eventBus
     );
+    if (board.options.enableComments) {
+        board.contextMenu.setEnableComments(true);
+    }
 }
 
 function initChatWindow(board) {
@@ -110,10 +118,18 @@ function initHtmlLayersAndPanels(board) {
 
     board.connectorLayer = new ConnectorLayer(board.coreMoodboard.eventBus, board.coreMoodboard);
     board.connectorLayer.attach();
+    board.coreMoodboard.connectorLayer = board.connectorLayer;
+
+    board.connectorLabelLayer = new ConnectorLabelLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.connectorLabelLayer.attach();
+    board.coreMoodboard.connectorLabelLayer = board.connectorLabelLayer;
 
     board.connectionAnchorsLayer = new ConnectionAnchorsLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
     board.connectionAnchorsLayer.attach();
 
+    board.connectorHandlesLayer = new ConnectorHandlesLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.connectorHandlesLayer.attach();
+
     board.htmlHandlesLayer = new HtmlHandlesLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
     board.htmlHandlesLayer.attach();
 
@@ -123,19 +139,21 @@ function initHtmlLayersAndPanels(board) {
         window.moodboardMindmapConnectionLayer = board.mindmapConnectionLayer;
         window.moodboardMindmapCollapseLayer = board.mindmapCollapseLayer;
         window.moodboardConnectorLayer = board.connectorLayer;
+        window.moodboardConnectorLabelLayer = board.connectorLabelLayer;
         window.moodboardConnectionAnchorsLayer = board.connectionAnchorsLayer;
+        window.moodboardConnectorHandlesLayer = board.connectorHandlesLayer;
         window.moodboardHtmlHandlesLayer = board.htmlHandlesLayer;
     }
 
-    board.commentPopover = new CommentPopover(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
-    board.commentPopover.attach();
-
     board.textPropertiesPanel = new TextPropertiesPanel(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
     board.textPropertiesPanel.attach();
 
     board.framePropertiesPanel = new FramePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
     board.notePropertiesPanel = new NotePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
     board.filePropertiesPanel = new FilePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
+    board.connectorPropertiesPanel = new ConnectorPropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
+    board.shapePropertiesPanel = new ShapePropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
+    board.drawingPropertiesPanel = new DrawingPropertiesPanel(board.coreMoodboard.eventBus, board.canvasContainer, board.coreMoodboard);
 }
 
 export function createMoodBoardUi(board) {

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -54,7 +54,11 @@ export function bindToolbarEvents(board) {
         }
         const createdObject = board.actionHandler.handleToolbarAction(action);
         if (createdObject?.id) {
-            focusCreatedObject(board, createdObject);
+            // Рисунки карандашом/кистью не выделяем и не переключаем инструмент:
+            // пользователь должен сразу продолжить рисовать следующий штрих.
+            if (action?.type !== 'drawing') {
+                focusCreatedObject(board, createdObject);
+            }
         }
     });
 

package/src/moodboard/integration/MoodBoardLoadApi.js

@@ -1,7 +1,16 @@
 import { Events } from '../../core/events/Events.js';
 
+const BOARD_DEFAULTS = {
+    backgroundColor: '#daeefb',
+    grid: { type: 'cross' },
+};
+
 function getSeedData(board) {
-    return board.data || { objects: [] };
+    const data = board.data || { objects: [] };
+    if (!data.settings) {
+        return { ...data, settings: { ...BOARD_DEFAULTS } };
+    }
+    return data;
 }
 
 function invokeOnLoad(board, payload) {

package/src/moodboard/lifecycle/MoodBoardDestroyer.js

@@ -41,6 +41,9 @@ export function destroyMoodBoard(board) {
     safeDestroy(board.filePropertiesPanel, 'filePropertiesPanel');
     board.filePropertiesPanel = null;
 
+    safeDestroy(board.drawingPropertiesPanel, 'drawingPropertiesPanel');
+    board.drawingPropertiesPanel = null;
+
     safeDestroy(board.alignmentGuides, 'alignmentGuides');
     board.alignmentGuides = null;
 
@@ -64,6 +67,9 @@ export function destroyMoodBoard(board) {
     safeDestroy(board.connectionAnchorsLayer, 'connectionAnchorsLayer');
     board.connectionAnchorsLayer = null;
 
+    safeDestroy(board.connectorHandlesLayer, 'connectorHandlesLayer');
+    board.connectorHandlesLayer = null;
+
     safeDestroy(board.htmlHandlesLayer, 'htmlHandlesLayer');
     board.htmlHandlesLayer = null;
 
@@ -118,6 +124,9 @@ export function destroyMoodBoard(board) {
         if (window.moodboardConnectionAnchorsLayer === board.connectionAnchorsLayer) {
             window.moodboardConnectionAnchorsLayer = null;
         }
+        if (window.moodboardConnectorHandlesLayer === board.connectorHandlesLayer) {
+            window.moodboardConnectorHandlesLayer = null;
+        }
         if (window.moodboardHtmlHandlesLayer === board.htmlHandlesLayer) {
             window.moodboardHtmlHandlesLayer = null;
         }

package/src/objects/ConnectorObject.js

@@ -29,8 +29,8 @@ export class ConnectorObject {
             stroke: 0x2563EB,
             width:  2,
             dash:   false,
-            head: { start: false, end: true },
-            route: 'straight',
+            head: { start: 'none', end: 'arrow' },
+            route: 'elbow',
             ...(props.style || {}),
         };
 

package/src/objects/FrameObject.js

@@ -40,22 +40,28 @@ export class FrameObject {
         this.graphics = new PIXI.Graphics();
         this.container.addChild(this.graphics);
         
-        // Текст заголовка
-        this.baseFontSize = 14; // Сохраняем оригинальный размер шрифта
-        this.currentWorldScale = 1.0; // Текущий масштаб мира
-        this.originalTitle = this.title; // Сохраняем оригинальный заголовок
+        // Заголовок фрейма — слой над верхней границей с собственной подложкой
+        this.baseFontSize = 14;
+        this.currentWorldScale = 1.0;
+        this.originalTitle = this.title;
+
+        // Под-контейнер: масштаб компенсирует зум, поэтому заголовок всегда одного размера на экране
+        this.titleLayer = new PIXI.Container();
+        this.titleLayer.eventMode = 'none'; // не перехватывать указатель
+
+        this.titleBg = new PIXI.Graphics();
+        this.titleLayer.addChild(this.titleBg);
+
         this.titleText = new PIXI.Text(this.title, {
-            fontFamily: 'Arial, sans-serif',
+            fontFamily: 'Inter, Arial, sans-serif',
             fontSize: this.baseFontSize,
             fill: 0x333333,
-            fontWeight: 'bold'
+            fontWeight: '500'
         });
-        // Размещаем заголовок внутри верхней части фрейма, чтобы не влиять на внешние границы
         this.titleText.anchor.set(0, 0);
-        this.titleText.scale.set(1); // Инициализируем базовый масштаб
-        this.titleText.x = 8;
-        this.titleText.y = 4;
-        this.container.addChild(this.titleText);
+        this.titleLayer.addChild(this.titleText);
+
+        this.container.addChild(this.titleLayer);
         
         // Подписываемся на события зума для компенсации масштабирования заголовка
         if (this.eventBus) {
@@ -69,6 +75,24 @@ export class FrameObject {
             this.eventBus.on(Events.Tool.SelectionClear, this._boundOnSelectionClear);
         }
 
+        // Логические габариты фрейма = только прямоугольник, без плавающего
+        // заголовка над верхней границей. Заголовок — отдельный слой с
+        // отрицательным y, и по умолчанию он раздул бы getLocalBounds вверх.
+        // Через него width/height контейнера считает GetObjectPosition
+        // (position.y = centerY - height/2) — лишняя высота сверху уводила
+        // рамку выделения вверх. Переопределяем getLocalBounds, чтобы
+        // width/height отражали именно прямоугольник. getBounds НЕ трогаем:
+        // hover-lift DropShadowFilter берёт область из getBounds, и заголовок
+        // не должен обрезаться фильтром.
+        this.container.getLocalBounds = (rect) => {
+            const b = rect || new PIXI.Rectangle();
+            b.x = 0;
+            b.y = 0;
+            b.width = this.width;
+            b.height = this.height;
+            return b;
+        };
+
         this._draw(this.width, this.height, this.fillColor);
         // Применяем начальный масштаб и обрезку заголовка
         this._updateTitleScale();
@@ -116,6 +140,27 @@ export class FrameObject {
         if (data?.objects?.includes(myId)) this.setBorderVisible(true);
     }
 
+    /**
+     * Применить текущий масштаб мира к заголовку.
+     * Нужно при создании объекта: viewport-зум восстанавливается раньше,
+     * чем фрейм успевает подписаться на ZoomPercent, поэтому стартовый зум
+     * до него не доходит и заголовок остаётся в мировом масштабе (мелкий).
+     * @param {number} worldScale Текущий масштаб мира (world.scale.x)
+     */
+    applyWorldScale(worldScale) {
+        if (typeof worldScale !== 'number' || !(worldScale > 0)) return;
+        this.currentWorldScale = worldScale;
+        this._updateTitleScale();
+    }
+
+    hideTitle() {
+        if (this.titleLayer) this.titleLayer.visible = false;
+    }
+
+    showTitle() {
+        if (this.titleLayer) this.titleLayer.visible = true;
+    }
+
     /**
      * Установить заголовок фрейма
      * @param {string} title Новый заголовок
@@ -213,98 +258,113 @@ export class FrameObject {
     }
 
     /**
-     * Обновить масштаб заголовка для компенсации зума
+     * Масштаб и позиция слоя заголовка — компенсируем зум, держим постоянный экранный размер
      */
     _updateTitleScale() {
-        if (!this.titleText) return;
-        
-        // Компенсируем зум мира обратным масштабированием заголовка
+        if (!this.titleLayer) return;
+
         const compensationScale = 1 / this.currentWorldScale;
-        
-        // Используем scale вместо fontSize для избежания размытия
-        this.titleText.scale.set(compensationScale);
-        
-        // Корректируем позицию заголовка с учетом изменения масштаба
-        this.titleText.x = 8 * compensationScale;
-        this.titleText.y = 4 * compensationScale;
-        
-        // Обновляем текст с учетом нового масштаба
+
+        // Весь слой масштабируется обратно → содержимое выглядит одинаково на любом зуме
+        this.titleLayer.scale.set(compensationScale);
+
+        // Высота подложки в базовых пикселях: baseFontSize + 4px сверху + 4px снизу
+        const labelBaseH = this.baseFontSize + 8;
+        const gap = 4; // зазор между нижним краем подписи и верхней границей фрейма
+
+        // Позиционируем над фреймом (y=0 — верхний край фрейма в локальных координатах контейнера)
+        this.titleLayer.x = 0;
+        this.titleLayer.y = -Math.round((labelBaseH + gap) * compensationScale);
+
         this._updateTitleText();
     }
 
     /**
-     * Обновить текст заголовка с учетом доступной ширины
+     * Обновить текст заголовка и перерисовать подложку
      */
     _updateTitleText() {
         if (!this.titleText) return;
 
         const truncatedText = this._truncateTextToFit(this.originalTitle);
         this.titleText.text = truncatedText;
+        this._redrawTitleBg();
     }
 
     /**
-     * Обрезать текст до доступной ширины с добавлением многоточия
+     * Нарисовать скруглённую подложку под текущую ширину текста
+     */
+    _redrawTitleBg() {
+        if (!this.titleBg || !this.titleText) return;
+
+        const padH = 8; // горизонтальный отступ с каждой стороны
+        const padV = 4; // вертикальный отступ с каждой стороны
+
+        // Измеряем текст в базовых единицах
+        const style = new PIXI.TextStyle({
+            fontFamily: this.titleText.style.fontFamily,
+            fontSize: this.baseFontSize,
+            fontWeight: this.titleText.style.fontWeight
+        });
+        const metrics = PIXI.TextMetrics.measureText(this.titleText.text || '', style);
+
+        const bgW = Math.max(1, Math.round(metrics.width + padH * 2));
+        const bgH = Math.round(this.baseFontSize + padV * 2);
+
+        const g = this.titleBg;
+        g.clear();
+        try {
+            g.lineStyle({ width: 1, color: this.strokeColor, alpha: 1 });
+        } catch (_) {
+            g.lineStyle(1, this.strokeColor, 1);
+        }
+        g.beginFill(0xFFFFFF, 1);
+        g.drawRoundedRect(0, 0, bgW, bgH, 6);
+        g.endFill();
+
+        // Текст внутри подложки
+        this.titleText.x = padH;
+        this.titleText.y = padV;
+    }
+
+    /**
+     * Обрезать текст до ширины фрейма (потолок) с добавлением многоточия.
+     * Сравниваем в базовых пикселях — слой уже компенсирует зум отдельно.
      * @param {string} text Исходный текст
-     * @returns {string} Обрезанный текст с многоточием или оригинальный текст
+     * @returns {string} Обрезанный текст или оригинал
      */
     _truncateTextToFit(text) {
         if (!text || !this.titleText) return text;
 
-        // Компенсация масштаба для правильного расчета размеров
-        const compensationScale = 1 / this.currentWorldScale;
-        
-        // Доступная ширина = ширина фрейма - отступы слева и справа (с учетом масштаба)
-        const leftPadding = 8 * compensationScale;
-        const rightPadding = 8 * compensationScale;
-        const availableWidth = this.width - leftPadding - rightPadding;
+        // Подложка не должна быть шире самого фрейма (8px паддинг с каждой стороны)
+        const availableWidth = Math.max(1, this.width - 16);
 
-        // Создаем временный стиль для измерения текста
-        // Используем базовый размер шрифта, а масштаб учтем отдельно
         const style = new PIXI.TextStyle({
             fontFamily: this.titleText.style.fontFamily,
             fontSize: this.baseFontSize,
             fontWeight: this.titleText.style.fontWeight
         });
 
-        // Измеряем ширину оригинального текста с учетом масштаба
         const textMetrics = PIXI.TextMetrics.measureText(text, style);
-        const scaledTextWidth = textMetrics.width * compensationScale;
-        
-        // Если текст помещается, возвращаем его как есть
-        if (scaledTextWidth <= availableWidth) {
-            return text;
-        }
+        if (textMetrics.width <= availableWidth) return text;
 
-        // Измеряем ширину многоточия с учетом масштаба
         const ellipsisMetrics = PIXI.TextMetrics.measureText('...', style);
-        const ellipsisWidth = ellipsisMetrics.width * compensationScale;
-        
-        // Доступная ширина для текста без многоточия
-        const textAvailableWidth = availableWidth - ellipsisWidth;
-        
-        if (textAvailableWidth <= 0) {
-            return '...';
-        }
+        const textAvailableWidth = availableWidth - ellipsisMetrics.width;
+        if (textAvailableWidth <= 0) return '...';
 
-        // Бинарный поиск оптимальной длины текста
         let left = 0;
         let right = text.length;
         let result = '';
-
         while (left <= right) {
             const mid = Math.floor((left + right) / 2);
             const subText = text.substring(0, mid);
-            const subTextMetrics = PIXI.TextMetrics.measureText(subText, style);
-            const scaledSubTextWidth = subTextMetrics.width * compensationScale;
-
-            if (scaledSubTextWidth <= textAvailableWidth) {
+            const subMetrics = PIXI.TextMetrics.measureText(subText, style);
+            if (subMetrics.width <= textAvailableWidth) {
                 result = subText;
                 left = mid + 1;
             } else {
                 right = mid - 1;
             }
         }
-
         return result + '...';
     }