@sequent-org/moodboard 1.3.4 → 1.4.0

package/src/mindmap/MindmapCompoundContract.js

@@ -0,0 +1,235 @@
+const ROOT_ROLE = 'root';
+const CHILD_ROLE = 'child';
+const LEFT_SIDE = 'left';
+const RIGHT_SIDE = 'right';
+const BOTTOM_SIDE = 'bottom';
+const DEBUG_STORAGE_KEY = 'mb:mindmap:compound:debug';
+const BRANCH_COLOR_HEX = Object.freeze([
+    'EF9A9A', 'CE93D8', '90CAF9',
+    '80DEEA', 'A5D6A7', 'E6EE9C',
+    'FFE082', 'BCAAA4', 'B0BEC5',
+]);
+export const MINDMAP_BRANCH_COLOR_PALETTE = Object.freeze(
+    BRANCH_COLOR_HEX.map((hex) => Number.parseInt(hex, 16))
+);
+
+function asObject(value) {
+    return value && typeof value === 'object' ? value : {};
+}
+
+function asNonEmptyString(value) {
+    return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
+}
+
+function asValidRole(value) {
+    return value === ROOT_ROLE || value === CHILD_ROLE ? value : null;
+}
+
+function asValidSide(value) {
+    return value === LEFT_SIDE || value === RIGHT_SIDE || value === BOTTOM_SIDE ? value : null;
+}
+
+function asOrder(value) {
+    if (!Number.isFinite(value)) return null;
+    const normalized = Math.floor(value);
+    return normalized >= 0 ? normalized : null;
+}
+
+function asBranchOrder(value) {
+    if (!Number.isFinite(value)) return null;
+    return Number(value);
+}
+
+function asOptionalNodeId(value) {
+    return asNonEmptyString(value);
+}
+
+function asBranchColor(value) {
+    if (!Number.isFinite(value)) return null;
+    const normalized = Math.floor(Number(value));
+    if (normalized < 0 || normalized > 0xFFFFFF) return null;
+    return normalized;
+}
+
+export function pickRandomMindmapBranchColor(randomFn = Math.random) {
+    const rand = typeof randomFn === 'function' ? randomFn : Math.random;
+    const palette = MINDMAP_BRANCH_COLOR_PALETTE;
+    if (!Array.isArray(palette) || palette.length === 0) return null;
+    const raw = Number(rand());
+    const safe = Number.isFinite(raw) ? raw : 0;
+    const idx = Math.max(0, Math.min(palette.length - 1, Math.floor(safe * palette.length)));
+    return palette[idx];
+}
+
+export function pickRandomMindmapBranchColorExcluding({
+    excludedColors = [],
+    randomFn = Math.random,
+} = {}) {
+    const excluded = new Set(
+        (Array.isArray(excludedColors) ? excludedColors : [])
+            .filter((value) => Number.isFinite(value))
+            .map((value) => Math.floor(Number(value)))
+    );
+    const palette = MINDMAP_BRANCH_COLOR_PALETTE.filter((color) => !excluded.has(color));
+    if (palette.length === 0) return pickRandomMindmapBranchColor(randomFn);
+    const rand = typeof randomFn === 'function' ? randomFn : Math.random;
+    const raw = Number(rand());
+    const safe = Number.isFinite(raw) ? raw : 0;
+    const idx = Math.max(0, Math.min(palette.length - 1, Math.floor(safe * palette.length)));
+    return palette[idx];
+}
+
+function getMindmapMetadataFromProperties(properties) {
+    const props = asObject(properties);
+    return asObject(props.mindmap);
+}
+
+function getCompoundIdFromObject(objectData) {
+    const meta = getMindmapMetadataFromProperties(objectData?.properties);
+    return asNonEmptyString(meta.compoundId);
+}
+
+function nextChildOrder(existingObjects, compoundId) {
+    if (!Array.isArray(existingObjects)) return 0;
+    let maxOrder = -1;
+    for (const obj of existingObjects) {
+        if (!obj || obj.type !== 'mindmap') continue;
+        const meta = getMindmapMetadataFromProperties(obj.properties);
+        if (asNonEmptyString(meta.compoundId) !== compoundId) continue;
+        if (asValidRole(meta.role) !== CHILD_ROLE) continue;
+        const order = asOrder(meta.order);
+        if (order !== null && order > maxOrder) {
+            maxOrder = order;
+        }
+    }
+    return maxOrder + 1;
+}
+
+export function createRootMindmapIntentMetadata() {
+    return {
+        compoundId: null,
+        role: ROOT_ROLE,
+        parentId: null,
+        side: null,
+        order: 0,
+        branchOrder: 0,
+        branchColor: null,
+    };
+}
+
+export function createChildMindmapIntentMetadata({ sourceObjectId, sourceProperties, side }) {
+    const sourceMeta = getMindmapMetadataFromProperties(sourceProperties);
+    const sourceId = asNonEmptyString(sourceObjectId);
+    const sourceCompoundId = asNonEmptyString(sourceMeta.compoundId);
+    const sourceRole = asValidRole(sourceMeta.role);
+    const inheritedColor = asBranchColor(sourceMeta.branchColor)
+        ?? asBranchColor(sourceProperties?.strokeColor);
+    const branchColor = sourceRole === ROOT_ROLE
+        ? pickRandomMindmapBranchColor()
+        : inheritedColor;
+    return {
+        compoundId: sourceCompoundId || sourceId,
+        role: CHILD_ROLE,
+        parentId: sourceId,
+        side: asValidSide(side),
+        order: null,
+        branchOrder: null,
+        branchColor,
+    };
+}
+
+export function normalizeMindmapPropertiesForCreate({
+    type,
+    objectId,
+    properties,
+    existingObjects = [],
+}) {
+    const props = asObject(properties);
+    if (type !== 'mindmap') return props;
+
+    const meta = getMindmapMetadataFromProperties(props);
+    let role = asValidRole(meta.role);
+    const parentIdRaw = asNonEmptyString(meta.parentId);
+    const branchRootIdRaw = asOptionalNodeId(meta.branchRootId);
+    const sideRaw = asValidSide(meta.side);
+    let compoundId = asNonEmptyString(meta.compoundId);
+    let order = asOrder(meta.order);
+    const branchOrder = asBranchOrder(meta.branchOrder);
+    let branchColor = asBranchColor(meta.branchColor)
+        ?? asBranchColor(props.strokeColor);
+
+    if (!role) {
+        role = parentIdRaw ? CHILD_ROLE : ROOT_ROLE;
+    }
+
+    let parentId = parentIdRaw;
+    if (role === ROOT_ROLE) {
+        parentId = null;
+    } else if (!parentId) {
+        // Invalid child payload must degrade to root-safe mode.
+        role = ROOT_ROLE;
+        parentId = null;
+    }
+
+    if (!compoundId) {
+        if (role === CHILD_ROLE && parentId) {
+            const parent = Array.isArray(existingObjects)
+                ? existingObjects.find((obj) => obj && obj.id === parentId && obj.type === 'mindmap')
+                : null;
+            compoundId = getCompoundIdFromObject(parent) || parentId;
+        } else {
+            compoundId = asNonEmptyString(objectId);
+        }
+    }
+
+    if (!compoundId) {
+        compoundId = asNonEmptyString(objectId);
+    }
+
+    if (order === null) {
+        order = role === ROOT_ROLE ? 0 : nextChildOrder(existingObjects, compoundId);
+    }
+
+    if (role === CHILD_ROLE && branchColor === null && parentId) {
+        const parent = Array.isArray(existingObjects)
+            ? existingObjects.find((obj) => obj && obj.id === parentId && obj.type === 'mindmap')
+            : null;
+        const parentMeta = getMindmapMetadataFromProperties(parent?.properties);
+        branchColor = asBranchColor(parentMeta.branchColor)
+            ?? asBranchColor(parent?.properties?.strokeColor);
+        if (branchColor === null && asValidRole(parentMeta.role) === ROOT_ROLE) {
+            branchColor = pickRandomMindmapBranchColor();
+        }
+    }
+
+    return {
+        ...props,
+        mindmap: {
+            compoundId,
+            role,
+            parentId: role === ROOT_ROLE ? null : parentId,
+            side: role === CHILD_ROLE ? sideRaw : null,
+            order,
+            branchOrder: role === CHILD_ROLE ? branchOrder : 0,
+            branchRootId: role === CHILD_ROLE
+                ? (branchRootIdRaw || asNonEmptyString(objectId) || null)
+                : null,
+            branchColor: role === CHILD_ROLE ? branchColor : null,
+        },
+    };
+}
+
+export function isMindmapCompoundDebugEnabled() {
+    if (typeof window === 'undefined') return false;
+    if (window.__MB_MINDMAP_COMPOUND_DEBUG__ === true) return true;
+    try {
+        return window.localStorage?.getItem(DEBUG_STORAGE_KEY) === '1';
+    } catch (_) {
+        return false;
+    }
+}
+
+export function logMindmapCompoundDebug(eventName, payload) {
+    if (!isMindmapCompoundDebugEnabled()) return;
+    console.log(`[mindmap:compound] ${eventName}`, payload);
+}

package/src/moodboard/ActionHandler.js

@@ -23,6 +23,7 @@ export class ActionHandler {
             case 'revit-screenshot-img':
             case 'comment':
             case 'file':
+            case 'mindmap':
                 // Передаем imageId как extraData для изображений, fileId для файлов
                 const extraData = action.imageId ? { imageId: action.imageId } : 
                                  action.fileId ? { fileId: action.fileId } : {};

package/src/moodboard/DataManager.js

@@ -1,16 +1,51 @@
 /**
  * Управляет загрузкой и сохранением данных MoodBoard
  */
+import { logMindmapCompoundDebug } from '../mindmap/MindmapCompoundContract.js';
 export class DataManager {
     constructor(coreMoodboard) {
         this.coreMoodboard = coreMoodboard;
     }
+
+    /**
+     * Проверяет, нужно ли блокировать подозрительную пустую загрузку.
+     * Блокируем только когда на доске уже есть объекты, а входящий snapshot пуст.
+     * Для явного разрешения пустой загрузки используем data.meta.allowEmptyLoad === true.
+     */
+    _shouldBlockSuspiciousEmptyLoad(data) {
+        const incomingObjects = Array.isArray(data?.objects) ? data.objects : [];
+        const incomingCount = incomingObjects.length;
+        const currentCount = Array.isArray(this.coreMoodboard?.objects) ? this.coreMoodboard.objects.length : 0;
+        const allowEmptyLoad = data?.meta?.allowEmptyLoad === true;
+
+        return incomingCount === 0 && currentCount > 0 && !allowEmptyLoad;
+    }
     
     /**
      * Загружает данные в MoodBoard
      */
     loadData(data) {
         if (!data) return;
+        if (this._shouldBlockSuspiciousEmptyLoad(data)) {
+            console.warn('⚠️ DataManager.loadData: пустой snapshot заблокирован защитой (доска не очищена).');
+            return;
+        }
+        const incomingMindmap = Array.isArray(data?.objects)
+            ? data.objects
+                .filter((obj) => obj?.type === 'mindmap')
+                .map((obj) => ({
+                    id: obj.id || null,
+                    compoundId: obj.properties?.mindmap?.compoundId || null,
+                    role: obj.properties?.mindmap?.role || null,
+                    parentId: obj.properties?.mindmap?.parentId || null,
+                }))
+            : [];
+        if (incomingMindmap.length > 0) {
+            logMindmapCompoundDebug('load:roundtrip:input', {
+                totalMindmapNodes: incomingMindmap.length,
+                sample: incomingMindmap.slice(0, 5),
+            });
+        }
         
 
         
@@ -61,6 +96,21 @@ export class DataManager {
                 }
             });
         }
+        if (incomingMindmap.length > 0) {
+            const stateObjects = this.coreMoodboard?.state?.state?.objects || [];
+            const loadedMindmap = stateObjects
+                .filter((obj) => obj?.type === 'mindmap')
+                .map((obj) => ({
+                    id: obj.id || null,
+                    compoundId: obj.properties?.mindmap?.compoundId || null,
+                    role: obj.properties?.mindmap?.role || null,
+                    parentId: obj.properties?.mindmap?.parentId || null,
+                }));
+            logMindmapCompoundDebug('load:roundtrip:state-after-load', {
+                totalMindmapNodes: loadedMindmap.length,
+                sample: loadedMindmap.slice(0, 5),
+            });
+        }
         
         // Загружаем viewport
         if (data.viewport) {
@@ -76,6 +126,13 @@ export class DataManager {
                 window.moodboardHtmlTextLayer.rebuildFromState();
                 window.moodboardHtmlTextLayer.updateAll();
             }
+            if (window.moodboardMindmapHtmlTextLayer) {
+                window.moodboardMindmapHtmlTextLayer.rebuildFromState();
+                window.moodboardMindmapHtmlTextLayer.updateAll();
+            }
+            if (window.moodboardMindmapConnectionLayer) {
+                window.moodboardMindmapConnectionLayer.updateAll();
+            }
         }, 100);
 
     }

package/src/moodboard/bootstrap/MoodBoardUiFactory.js

@@ -3,8 +3,11 @@ import { SaveStatus } from '../../ui/SaveStatus.js';
 import { Topbar } from '../../ui/Topbar.js';
 import { ZoomPanel } from '../../ui/ZoomPanel.js';
 import { MapPanel } from '../../ui/MapPanel.js';
+import { DotGridDebugPanel } from '../../ui/DotGridDebugPanel.js';
 import { ContextMenu } from '../../ui/ContextMenu.js';
 import { HtmlTextLayer } from '../../ui/HtmlTextLayer.js';
+import { MindmapHtmlTextLayer } from '../../ui/mindmap/MindmapHtmlTextLayer.js';
+import { MindmapConnectionLayer } from '../../ui/mindmap/MindmapConnectionLayer.js';
 import { HtmlHandlesLayer } from '../../ui/HtmlHandlesLayer.js';
 import { CommentPopover } from '../../ui/CommentPopover.js';
 import { TextPropertiesPanel } from '../../ui/TextPropertiesPanel.js';
@@ -69,6 +72,13 @@ function initMapbar(board) {
     );
 }
 
+function initDotGridDebugPanel(board) {
+    board.dotGridDebugPanel = new DotGridDebugPanel(
+        board.workspaceElement,
+        board.coreMoodboard
+    );
+}
+
 function initContextMenu(board) {
     board.contextMenu = new ContextMenu(
         board.canvasContainer,
@@ -79,12 +89,18 @@ function initContextMenu(board) {
 function initHtmlLayersAndPanels(board) {
     board.htmlTextLayer = new HtmlTextLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
     board.htmlTextLayer.attach();
+    board.mindmapHtmlTextLayer = new MindmapHtmlTextLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.mindmapHtmlTextLayer.attach();
+    board.mindmapConnectionLayer = new MindmapConnectionLayer(board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.mindmapConnectionLayer.attach();
 
     board.htmlHandlesLayer = new HtmlHandlesLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
     board.htmlHandlesLayer.attach();
 
     if (typeof window !== 'undefined') {
         window.moodboardHtmlTextLayer = board.htmlTextLayer;
+        window.moodboardMindmapHtmlTextLayer = board.mindmapHtmlTextLayer;
+        window.moodboardMindmapConnectionLayer = board.mindmapConnectionLayer;
         window.moodboardHtmlHandlesLayer = board.htmlHandlesLayer;
     }
 
@@ -104,6 +120,11 @@ export function createMoodBoardUi(board) {
     initTopbar(board);
     initZoombar(board);
     initMapbar(board);
+    // Debug-панель сетки оставляем в проекте, но не показываем по умолчанию.
+    // Для включения: передать showGridDebugPanel: true в options MoodBoard.
+    if (board?.options?.showGridDebugPanel === true) {
+        initDotGridDebugPanel(board);
+    }
     initContextMenu(board);
     initHtmlLayersAndPanels(board);
 }

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -1,8 +1,33 @@
 import { Events } from '../../core/events/Events.js';
+import { logMindmapCompoundDebug } from '../../mindmap/MindmapCompoundContract.js';
 
 export function bindToolbarEvents(board) {
     board.coreMoodboard.eventBus.on(Events.UI.ToolbarAction, (action) => {
-        board.actionHandler.handleToolbarAction(action);
+        if (action?.type === 'mindmap') {
+            logMindmapCompoundDebug('toolbar:action', {
+                type: action.type,
+                position: action.position || null,
+                mindmap: action.properties?.mindmap || null,
+            });
+        }
+        const createdObject = board.actionHandler.handleToolbarAction(action);
+        if (action?.type === 'mindmap' && createdObject?.id) {
+            const content = String(createdObject?.properties?.content || '');
+            if (content.trim().length === 0) {
+                setTimeout(() => {
+                    board.coreMoodboard.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+                    board.coreMoodboard.eventBus.emit(Events.Tool.ObjectEdit, {
+                        object: {
+                            id: createdObject.id,
+                            type: 'mindmap',
+                            position: createdObject.position || null,
+                            properties: createdObject.properties || {},
+                        },
+                        create: true,
+                    });
+                }, 20);
+            }
+        }
     });
 }
 

package/src/moodboard/lifecycle/MoodBoardDestroyer.js

@@ -49,6 +49,12 @@ export function destroyMoodBoard(board) {
     safeDestroy(board.htmlTextLayer, 'htmlTextLayer');
     board.htmlTextLayer = null;
 
+    safeDestroy(board.mindmapHtmlTextLayer, 'mindmapHtmlTextLayer');
+    board.mindmapHtmlTextLayer = null;
+
+    safeDestroy(board.mindmapConnectionLayer, 'mindmapConnectionLayer');
+    board.mindmapConnectionLayer = null;
+
     safeDestroy(board.htmlHandlesLayer, 'htmlHandlesLayer');
     board.htmlHandlesLayer = null;
 
@@ -64,6 +70,9 @@ export function destroyMoodBoard(board) {
     safeDestroy(board.mapbar, 'mapbar');
     board.mapbar = null;
 
+    safeDestroy(board.dotGridDebugPanel, 'dotGridDebugPanel');
+    board.dotGridDebugPanel = null;
+
     safeDestroy(board.coreMoodboard, 'coreMoodboard');
     board.coreMoodboard = null;
 
@@ -82,6 +91,12 @@ export function destroyMoodBoard(board) {
         if (window.moodboardHtmlTextLayer === board.htmlTextLayer) {
             window.moodboardHtmlTextLayer = null;
         }
+        if (window.moodboardMindmapHtmlTextLayer === board.mindmapHtmlTextLayer) {
+            window.moodboardMindmapHtmlTextLayer = null;
+        }
+        if (window.moodboardMindmapConnectionLayer === board.mindmapConnectionLayer) {
+            window.moodboardMindmapConnectionLayer = null;
+        }
         if (window.moodboardHtmlHandlesLayer === board.htmlHandlesLayer) {
             window.moodboardHtmlHandlesLayer = null;
         }

package/src/objects/MindmapObject.js

@@ -0,0 +1,76 @@
+import * as PIXI from 'pixi.js';
+import { MINDMAP_LAYOUT } from '../ui/mindmap/MindmapLayoutConfig.js';
+
+/**
+ * Простой объект mindmap: прямоугольник с синей обводкой и полупрозрачной синей заливкой.
+ */
+export class MindmapObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        this.width = objectData.width || objectData.properties?.width || MINDMAP_LAYOUT.width;
+        this.height = objectData.height || objectData.properties?.height || MINDMAP_LAYOUT.height;
+        const props = objectData.properties || {};
+        this.strokeColor = (typeof props.strokeColor === 'number') ? props.strokeColor : 0x2563EB;
+        this.fillColor = (typeof props.fillColor === 'number') ? props.fillColor : 0x3B82F6;
+        this.fillAlpha = (typeof props.fillAlpha === 'number') ? props.fillAlpha : 0.25;
+        this.strokeWidth = (typeof props.strokeWidth === 'number') ? props.strokeWidth : 1;
+        this.capsuleBaseHeight = (typeof props.capsuleBaseHeight === 'number')
+            ? Math.max(1, Math.round(props.capsuleBaseHeight))
+            : Math.max(1, Math.round(Math.min(this.height, MINDMAP_LAYOUT.height)));
+
+        this.graphics = new PIXI.Graphics();
+        this.graphics.roundPixels = true;
+        this._draw();
+    }
+
+    getPixi() {
+        return this.graphics;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        this.width = Math.max(1, size.width || this.width);
+        this.height = Math.max(1, size.height || this.height);
+        this._redrawPreserveTransform();
+    }
+
+    _redrawPreserveTransform() {
+        const g = this.graphics;
+        const centerX = g.x;
+        const centerY = g.y;
+        const rot = g.rotation || 0;
+
+        this._draw();
+        g.pivot.set(Math.floor(this.width / 2), Math.floor(this.height / 2));
+        g.x = Math.round(centerX);
+        g.y = Math.round(centerY);
+        g.rotation = rot;
+    }
+
+    _draw() {
+        const g = this.graphics;
+        g.clear();
+        const dynamicRadius = Math.max(0, Math.floor(Math.min(this.width, this.height) / 2));
+        const fixedBaseRadius = Math.max(0, Math.floor(this.capsuleBaseHeight / 2));
+        const capsuleRadius = Math.min(dynamicRadius, fixedBaseRadius);
+
+        g.beginFill(this.fillColor, this.fillAlpha);
+        g.drawRoundedRect(0, 0, this.width, this.height, capsuleRadius);
+        g.endFill();
+
+        try {
+            g.lineStyle({
+                width: this.strokeWidth,
+                color: this.strokeColor,
+                alpha: 1,
+                alignment: 0,
+                cap: 'round',
+                join: 'round',
+                miterLimit: 2,
+            });
+        } catch (_) {
+            g.lineStyle(this.strokeWidth, this.strokeColor, 1, 0);
+        }
+        g.drawRoundedRect(0, 0, this.width, this.height, capsuleRadius);
+    }
+}

package/src/objects/ObjectFactory.js

@@ -8,6 +8,7 @@ import { RevitScreenshotImageObject } from './RevitScreenshotImageObject.js';
 import { CommentObject } from './CommentObject.js';
 import { NoteObject } from './NoteObject.js';
 import { FileObject } from './FileObject.js';
+import { MindmapObject } from './MindmapObject.js';
 
 /**
  * Фабрика объектов холста
@@ -25,7 +26,8 @@ export class ObjectFactory {
         ['revit-screenshot-img', RevitScreenshotImageObject],
         ['comment', CommentObject],
         ['note', NoteObject],
-        ['file', FileObject]
+        ['file', FileObject],
+        ['mindmap', MindmapObject]
     ]);
 
     /**