@sequent-org/moodboard 1.3.4 → 1.4.0

package/src/ui/handles/HandlesEventBridge.js

@@ -5,6 +5,7 @@ export class HandlesEventBridge {
         this.host = host;
         this.subscriptions = [];
         this.isAttached = false;
+        this._mindmapDragSnapshot = null;
     }
 
     attach() {
@@ -18,6 +19,7 @@ export class HandlesEventBridge {
                 this.host._endGroupRotationPreview();
                 this.host.hide();
             }],
+            [Events.Object.Created, () => this.host.update()],
             [Events.Tool.DragUpdate, () => this.host.update()],
             [Events.Object.Deleted, (data) => {
                 const objectId = data?.objectId || data;
@@ -28,9 +30,27 @@ export class HandlesEventBridge {
                     this.host.update();
                 }, 10);
             }],
-            [Events.Tool.DragStart, () => { this.host._handlesSuppressed = true; this.host._setHandlesVisibility(false); }],
-            [Events.Tool.DragEnd, () => { this.host._handlesSuppressed = false; this.host._setHandlesVisibility(true); }],
-            [Events.Tool.ResizeUpdate, () => this.host.update()],
+            [Events.Tool.DragStart, () => {
+                this._mindmapDragSnapshot = this.host.domRenderer?.captureMindmapSnapshot?.() || null;
+                this.host._handlesSuppressed = true;
+                this.host._setHandlesVisibility(false);
+            }],
+            [Events.Tool.DragEnd, (data) => {
+                this.host.domRenderer?.enforceMindmapAutoLayoutAfterDragEnd?.({
+                    draggedIds: [data?.object].filter(Boolean),
+                    snapshot: this._mindmapDragSnapshot,
+                });
+                this._mindmapDragSnapshot = null;
+                this.host._handlesSuppressed = false;
+                this.host._setHandlesVisibility(true);
+                this.host.update();
+            }],
+            [Events.Tool.ResizeUpdate, (data) => {
+                this.host.domRenderer?.relayoutMindmapAfterResize?.({
+                    objectId: data?.object || null,
+                });
+                this.host.update();
+            }],
             [Events.Tool.ResizeStart, () => { this.host._handlesSuppressed = true; this.host._setHandlesVisibility(false); }],
             [Events.Tool.ResizeEnd, () => { this.host._handlesSuppressed = false; this.host._setHandlesVisibility(true); }],
             [Events.Tool.RotateUpdate, () => this.host.update()],
@@ -40,9 +60,29 @@ export class HandlesEventBridge {
                 this.host._syncGroupRotationPreviewTranslation();
                 this.host.update();
             }],
-            [Events.Tool.GroupDragStart, () => { this.host._handlesSuppressed = true; this.host._setHandlesVisibility(false); }],
-            [Events.Tool.GroupDragEnd, () => { this.host._handlesSuppressed = false; this.host._setHandlesVisibility(true); }],
+            [Events.Tool.GroupDragStart, () => {
+                this._mindmapDragSnapshot = this.host.domRenderer?.captureMindmapSnapshot?.() || null;
+                this.host._handlesSuppressed = true;
+                this.host._setHandlesVisibility(false);
+            }],
+            [Events.Tool.GroupDragEnd, (data) => {
+                const draggedIds = Array.isArray(data?.objects) ? data.objects : [];
+                this.host.domRenderer?.enforceMindmapAutoLayoutAfterDragEnd?.({
+                    draggedIds,
+                    snapshot: this._mindmapDragSnapshot,
+                });
+                this._mindmapDragSnapshot = null;
+                this.host._handlesSuppressed = false;
+                this.host._setHandlesVisibility(true);
+                this.host.update();
+            }],
             [Events.Tool.GroupResizeUpdate, (data) => {
+                const resizedIds = Array.isArray(data?.objects) ? data.objects : [];
+                resizedIds.forEach((id) => {
+                    this.host.domRenderer?.relayoutMindmapAfterResize?.({
+                        objectId: id,
+                    });
+                });
                 this.host._updateGroupResizePreview(data);
                 this.host.update();
             }],
@@ -76,6 +116,10 @@ export class HandlesEventBridge {
             [Events.History.Changed, (data) => {
                 if (data?.lastUndone || data?.lastRedone) {
                     this.host._endGroupRotationPreview();
+                    this.host.domRenderer?.relayoutAllMindmapCompounds?.();
+                    setTimeout(() => {
+                        this.host.domRenderer?.relayoutAllMindmapCompounds?.();
+                    }, 0);
                     this.host.update();
                 }
             }],

package/src/ui/handles/HandlesInteractionController.js

@@ -318,10 +318,10 @@ export class HandlesInteractionController {
                 } catch (_) {}
             }
 
-            box.style.left = `${Math.round(newLeft)}px`;
-            box.style.top = `${Math.round(newTop)}px`;
-            box.style.width = `${Math.round(newW)}px`;
-            box.style.height = `${Math.round(newH)}px`;
+            box.style.left = `${newLeft}px`;
+            box.style.top = `${newTop}px`;
+            box.style.width = `${newW}px`;
+            box.style.height = `${newH}px`;
             this.host._repositionBoxChildren(box);
 
             const screenX = (newLeft - offsetLeft);

package/src/ui/mindmap/MindmapConnectionLayer.js

@@ -0,0 +1,239 @@
+import * as PIXI from 'pixi.js';
+import { Events } from '../../core/events/Events.js';
+
+const MINDMAP_TYPE = 'mindmap';
+const SIDE_LEFT = 'left';
+const SIDE_RIGHT = 'right';
+const SIDE_BOTTOM = 'bottom';
+
+function asArray(value) {
+    return Array.isArray(value) ? value : [];
+}
+
+function asMindmapMeta(obj) {
+    return obj?.properties?.mindmap || {};
+}
+
+function isMindmap(obj) {
+    return obj?.type === MINDMAP_TYPE;
+}
+
+function asNumber(value, fallback = 0) {
+    return Number.isFinite(value) ? value : fallback;
+}
+
+function getNodeRect(node) {
+    const x = asNumber(node?.position?.x, 0);
+    const y = asNumber(node?.position?.y, 0);
+    const width = Math.max(1, Math.round(asNumber(node?.width, asNumber(node?.properties?.width, 1))));
+    const height = Math.max(1, Math.round(asNumber(node?.height, asNumber(node?.properties?.height, 1))));
+    return { x, y, width, height };
+}
+
+function getAnchorPoint(node, side) {
+    const rect = getNodeRect(node);
+    if (side === SIDE_LEFT) {
+        return { x: rect.x, y: rect.y + rect.height / 2 };
+    }
+    if (side === SIDE_RIGHT) {
+        return { x: rect.x + rect.width, y: rect.y + rect.height / 2 };
+    }
+    if (side === SIDE_BOTTOM) {
+        return { x: rect.x + rect.width / 2, y: rect.y + rect.height };
+    }
+    return { x: rect.x + rect.width / 2, y: rect.y };
+}
+
+function nudgeStartOutsideNode(point, side) {
+    const px = 1;
+    if (side === SIDE_LEFT) return { x: point.x - px, y: point.y };
+    if (side === SIDE_RIGHT) return { x: point.x + px, y: point.y };
+    if (side === SIDE_BOTTOM) return { x: point.x, y: point.y + px };
+    return point;
+}
+
+function getChildAttachSide(parentSide) {
+    if (parentSide === SIDE_LEFT) return SIDE_RIGHT;
+    if (parentSide === SIDE_RIGHT) return SIDE_LEFT;
+    if (parentSide === SIDE_BOTTOM) return 'top';
+    return 'top';
+}
+
+function getBezierControls(start, end, side) {
+    if (side === SIDE_BOTTOM) {
+        const spanY = Math.max(30, Math.round(Math.abs(end.y - start.y) * 0.35));
+        return {
+            cp1: { x: start.x, y: start.y + spanY },
+            cp2: { x: end.x, y: end.y - spanY },
+        };
+    }
+    const dir = side === SIDE_LEFT ? -1 : 1;
+    const spanX = Math.max(30, Math.round(Math.abs(end.x - start.x) * 0.35));
+    return {
+        cp1: { x: start.x + spanX * dir, y: start.y },
+        cp2: { x: end.x - spanX * dir, y: end.y },
+    };
+}
+
+function resolveLegacyLink(child, byId, rootByCompoundId) {
+    const childMeta = asMindmapMeta(child);
+    const compoundId = childMeta?.compoundId || null;
+    let parentId = childMeta?.parentId || null;
+    let side = childMeta?.side || null;
+    const childId = child?.id || null;
+
+    if (!parentId || parentId === childId) {
+        parentId = childMeta?.branchRootId || null;
+    }
+
+    let parent = parentId ? byId.get(parentId) : null;
+    if (!parent && compoundId) {
+        parentId = rootByCompoundId.get(compoundId) || null;
+        parent = parentId ? byId.get(parentId) : null;
+    }
+
+    if (![SIDE_LEFT, SIDE_RIGHT, SIDE_BOTTOM].includes(side)) {
+        side = SIDE_RIGHT;
+    }
+    if (parentId === childId && compoundId) {
+        const rootId = rootByCompoundId.get(compoundId) || null;
+        if (rootId && rootId !== childId) parentId = rootId;
+    }
+    return { parentId, side };
+}
+
+export class MindmapConnectionLayer {
+    constructor(eventBus, core) {
+        this.eventBus = eventBus;
+        this.core = core;
+        this.graphics = null;
+        this.subscriptions = [];
+        this._lastSegments = [];
+    }
+
+    attach() {
+        if (!this.core?.pixi) return;
+        if (this.graphics) return;
+        this.graphics = new PIXI.Graphics();
+        this.graphics.name = 'mindmap-connection-layer';
+        this.graphics.zIndex = 2;
+        const world = this.core.pixi.worldLayer || this.core.pixi.app?.stage;
+        world?.addChild?.(this.graphics);
+        this._attachEvents();
+        this.updateAll();
+    }
+
+    destroy() {
+        this._detachEvents();
+        if (this.graphics) {
+            this.graphics.clear();
+            this.graphics.removeFromParent();
+            this.graphics.destroy();
+            this.graphics = null;
+        }
+        this._lastSegments = [];
+    }
+
+    _attachEvents() {
+        const bindings = [
+            [Events.Object.Created, () => this.updateAll()],
+            [Events.Object.Deleted, () => this.updateAll()],
+            [Events.Object.Updated, () => this.updateAll()],
+            [Events.Object.StateChanged, () => this.updateAll()],
+            [Events.Tool.DragUpdate, () => this.updateAll()],
+            [Events.Tool.DragEnd, () => this.updateAll()],
+            [Events.Tool.ResizeUpdate, () => this.updateAll()],
+            [Events.Tool.ResizeEnd, () => this.updateAll()],
+            [Events.Tool.GroupDragUpdate, () => this.updateAll()],
+            [Events.Tool.GroupResizeUpdate, () => this.updateAll()],
+            [Events.Tool.RotateUpdate, () => this.updateAll()],
+            [Events.Tool.PanUpdate, () => this.updateAll()],
+            [Events.UI.ZoomPercent, () => this.updateAll()],
+            [Events.History.Changed, () => this.updateAll()],
+            [Events.Board.Loaded, () => this.updateAll()],
+        ];
+        bindings.forEach(([event, handler]) => {
+            this.eventBus.on(event, handler);
+            this.subscriptions.push([event, handler]);
+        });
+    }
+
+    _detachEvents() {
+        if (typeof this.eventBus?.off !== 'function') {
+            this.subscriptions = [];
+            return;
+        }
+        this.subscriptions.forEach(([event, handler]) => this.eventBus.off(event, handler));
+        this.subscriptions = [];
+    }
+
+    updateAll() {
+        if (!this.graphics) return;
+        const objects = asArray(this.core?.state?.state?.objects);
+        const mindmaps = objects.filter(isMindmap);
+        const byId = new Map(mindmaps.map((obj) => [obj.id, obj]));
+        const rootByCompoundId = new Map();
+        mindmaps.forEach((obj) => {
+            const meta = asMindmapMeta(obj);
+            if (meta?.role === 'root' && typeof meta?.compoundId === 'string' && meta.compoundId.length > 0) {
+                rootByCompoundId.set(meta.compoundId, obj.id);
+            }
+        });
+        const children = mindmaps.filter((obj) => {
+            const meta = asMindmapMeta(obj);
+            return meta.role === 'child' && typeof meta.parentId === 'string' && meta.parentId.length > 0;
+        });
+
+        const g = this.graphics;
+        g.clear();
+        this._lastSegments = [];
+
+        children.forEach((child) => {
+            const childMeta = asMindmapMeta(child);
+            const { parentId, side } = resolveLegacyLink(child, byId, rootByCompoundId);
+            const parent = parentId ? byId.get(parentId) : null;
+            if (!parent || ![SIDE_LEFT, SIDE_RIGHT, SIDE_BOTTOM].includes(side)) return;
+
+            const parentMeta = asMindmapMeta(parent);
+            if (parentMeta.compoundId && childMeta.compoundId && parentMeta.compoundId !== childMeta.compoundId) {
+                return;
+            }
+
+            const startBase = getAnchorPoint(parent, side);
+            const start = nudgeStartOutsideNode(startBase, side);
+            const end = getAnchorPoint(child, getChildAttachSide(side));
+            const { cp1, cp2 } = getBezierControls(start, end, side);
+            const color = Number(child?.properties?.strokeColor || parent?.properties?.strokeColor || 0x2563EB);
+
+            try {
+                g.lineStyle({
+                    width: 1,
+                    color,
+                    alpha: 0.95,
+                    alignment: 0,
+                    cap: 'round',
+                    join: 'round',
+                    miterLimit: 2,
+                });
+            } catch (_) {
+                g.lineStyle(1, color, 0.95, 0);
+            }
+            g.moveTo(Math.round(start.x), Math.round(start.y));
+            g.bezierCurveTo(
+                Math.round(cp1.x),
+                Math.round(cp1.y),
+                Math.round(cp2.x),
+                Math.round(cp2.y),
+                Math.round(end.x),
+                Math.round(end.y)
+            );
+            this._lastSegments.push({
+                parentId: parent.id,
+                childId: child.id,
+                side,
+                start: { x: Math.round(start.x), y: Math.round(start.y) },
+                end: { x: Math.round(end.x), y: Math.round(end.y) },
+            });
+        });
+    }
+}

package/src/ui/mindmap/MindmapHtmlTextLayer.js

@@ -0,0 +1,285 @@
+import { Events } from '../../core/events/Events.js';
+import * as PIXI from 'pixi.js';
+import { MindmapTextOverlayAdapter } from './MindmapTextOverlayAdapter.js';
+import { MINDMAP_LAYOUT } from './MindmapLayoutConfig.js';
+
+const MINDMAP_PLACEHOLDER = 'Напишите что-нибудь';
+const MINDMAP_MAX_LINE_CHARS = MINDMAP_LAYOUT.maxLineChars;
+
+function normalizeMindmapLineLength(value, maxLineChars = MINDMAP_MAX_LINE_CHARS) {
+    const text = (typeof value === 'string')
+        ? value.replace(/\r/g, '').replace(/\n/g, '')
+        : '';
+    const chunks = [];
+    if (text.length === 0) return '';
+    for (let i = 0; i < text.length; i += maxLineChars) {
+        chunks.push(text.slice(i, i + maxLineChars));
+    }
+    return chunks.join('\n');
+}
+
+/**
+ * Отдельный HTML-слой только для текста mindmap-объектов.
+ * Изолирован от общего HtmlTextLayer (text/simple-text).
+ */
+export class MindmapHtmlTextLayer {
+    constructor(container, eventBus, core) {
+        this.container = container;
+        this.eventBus = eventBus;
+        this.core = core;
+        this.layer = null;
+        this.idToEl = new Map();
+        this.idToCleanup = new Map();
+        this.idToContentEl = new Map();
+        this.overlayAdapter = new MindmapTextOverlayAdapter();
+    }
+
+    attach() {
+        this.layer = document.createElement('div');
+        this.layer.className = 'moodboard-html-layer moodboard-html-layer--mindmap';
+        Object.assign(this.layer.style, {
+            position: 'absolute',
+            inset: '0',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            zIndex: 10,
+        });
+        this.container.appendChild(this.layer);
+
+        this.eventBus.on(Events.Object.Created, ({ objectId, objectData }) => {
+            if (!this.overlayAdapter.supportsObject(objectData)) return;
+            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);
+        });
+
+        this.eventBus.on(Events.Tool.HideObjectText, ({ objectId }) => {
+            const el = this.idToEl.get(objectId);
+            if (el) el.style.visibility = 'hidden';
+        });
+        this.eventBus.on(Events.Tool.ShowObjectText, ({ objectId }) => {
+            const el = this.idToEl.get(objectId);
+            if (el) el.style.visibility = '';
+        });
+
+        this.eventBus.on(Events.Tool.UpdateObjectContent, ({ objectId, content }) => {
+            const contentEl = this.idToContentEl.get(objectId);
+            const containerEl = this.idToEl.get(objectId);
+            if (contentEl && containerEl && typeof content === 'string') {
+                this._applyContentValue(containerEl, contentEl, content);
+            }
+        });
+
+        this.eventBus.on(Events.Object.StateChanged, ({ objectId, updates }) => {
+            const el = this.idToEl.get(objectId);
+            if (!el || !updates) return;
+            const nextFont = updates.fontFamily || updates.properties?.fontFamily;
+            if (nextFont) {
+                el.style.fontFamily = nextFont;
+            }
+            if (updates.fontSize) {
+                el.dataset.baseFontSize = String(updates.fontSize);
+            }
+            if (updates.color || updates.properties?.textColor) {
+                el.style.color = updates.color || updates.properties?.textColor;
+            }
+            this.updateOne(objectId);
+        });
+
+        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 }) => {
+            (Array.isArray(objects) ? objects : []).forEach((id) => this.updateOne(id));
+        });
+        this.eventBus.on(Events.Tool.GroupResizeUpdate, ({ objects }) => {
+            (Array.isArray(objects) ? objects : []).forEach((id) => this.updateOne(id));
+        });
+        this.eventBus.on(Events.Tool.GroupRotateUpdate, ({ objects }) => {
+            (Array.isArray(objects) ? objects : []).forEach((id) => this.updateOne(id));
+        });
+
+        this.rebuildFromState();
+        this.updateAll();
+    }
+
+    destroy() {
+        if (this.layer) this.layer.remove();
+        this.layer = null;
+        this.idToEl.clear();
+        this.idToCleanup.clear();
+        this.idToContentEl.clear();
+    }
+
+    rebuildFromState() {
+        if (!this.core?.state) return;
+        const objects = this.core.state.state.objects || [];
+        objects.forEach((objectData) => {
+            if (!this.overlayAdapter.supportsObject(objectData)) return;
+            this._ensureTextEl(objectData.id, objectData);
+        });
+        this.updateAll();
+    }
+
+    _ensureTextEl(objectId, objectData) {
+        if (!this.layer || !objectId) return;
+        if (this.idToEl.has(objectId)) return;
+
+        const el = document.createElement('div');
+        el.className = 'mb-text';
+        el.dataset.id = objectId;
+        const contentEl = document.createElement('span');
+        contentEl.className = 'mb-text--mindmap-content';
+
+        const fontFamily = this.overlayAdapter.getDefaultFontFamily(objectData);
+        const color = objectData.color || objectData.properties?.color || objectData.properties?.textColor || '#212121';
+        const baseFontSize = objectData.fontSize || objectData.properties?.fontSize || MINDMAP_LAYOUT.fontSize;
+        const baseLineHeight = Math.round(baseFontSize * 1.24);
+        const paddingX = Math.max(0, Math.round(objectData.properties?.paddingX ?? MINDMAP_LAYOUT.paddingX));
+        const paddingY = Math.max(0, Math.round(objectData.properties?.paddingY ?? MINDMAP_LAYOUT.paddingY));
+        const maxLineChars = Math.max(1, Math.round(objectData.properties?.maxLineChars || MINDMAP_LAYOUT.maxLineChars));
+
+        el.style.color = color;
+        el.style.fontFamily = fontFamily;
+        el.style.lineHeight = `${baseLineHeight}px`;
+        el.style.paddingTop = `${paddingY}px`;
+        el.style.paddingBottom = `${paddingY}px`;
+        el.style.paddingLeft = `${paddingX}px`;
+        el.style.paddingRight = `${paddingX}px`;
+        el.style.whiteSpace = 'pre';
+        el.style.wordBreak = 'normal';
+        el.style.overflowWrap = 'normal';
+        el.style.overflow = 'hidden';
+        el.style.letterSpacing = '0px';
+        el.style.fontKerning = 'normal';
+        el.style.textRendering = 'optimizeLegibility';
+
+        this.overlayAdapter.applyElementStyles(el);
+
+        const initialContent = objectData.content || objectData.properties?.content || '';
+        this._applyContentValue(el, contentEl, initialContent);
+        el.dataset.baseFontSize = String(baseFontSize);
+        el.dataset.baseW = String(Math.max(1, objectData.width || objectData.properties?.width || MINDMAP_LAYOUT.width));
+        el.dataset.baseH = String(Math.max(1, objectData.height || objectData.properties?.height || MINDMAP_LAYOUT.height));
+        el.dataset.basePaddingX = String(paddingX);
+        el.dataset.basePaddingY = String(paddingY);
+        el.dataset.maxLineChars = String(maxLineChars);
+
+        const cleanup = this.overlayAdapter.attachEditOnClick({
+            el,
+            targetEl: contentEl,
+            objectId,
+            objectData,
+            eventBus: this.eventBus,
+        });
+        this.idToCleanup.set(objectId, cleanup);
+
+        el.appendChild(contentEl);
+        this.layer.appendChild(el);
+        this.idToEl.set(objectId, el);
+        this.idToContentEl.set(objectId, contentEl);
+    }
+
+    _removeTextEl(objectId) {
+        const el = this.idToEl.get(objectId);
+        const cleanup = this.idToCleanup.get(objectId);
+        if (typeof cleanup === 'function') cleanup();
+        if (el) el.remove();
+        this.idToEl.delete(objectId);
+        this.idToCleanup.delete(objectId);
+        this.idToContentEl.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;
+
+        const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+        const res = (this.core?.pixi?.app?.renderer?.resolution) || 1;
+        const objectData = (this.core.state.state.objects || []).find((o) => o.id === objectId);
+        if (!objectData || objectData.type !== 'mindmap') return;
+
+        const x = objectData.position?.x || 0;
+        const y = objectData.position?.y || 0;
+        const w = objectData.width || 0;
+        const h = objectData.height || 0;
+
+        const pixiObject = this.core?.pixi?.objects?.get ? this.core.pixi.objects.get(objectId) : null;
+        const angle = (pixiObject && typeof pixiObject.rotation === 'number')
+            ? (pixiObject.rotation * 180 / Math.PI)
+            : (objectData.rotation || objectData.transform?.rotation || 0);
+
+        const baseFS = parseFloat(el.dataset.baseFontSize || `${MINDMAP_LAYOUT.fontSize}`) || MINDMAP_LAYOUT.fontSize;
+        const worldScale = world?.scale?.x || 1;
+        const sCss = worldScale / res;
+        const fontSizePx = Math.max(1, baseFS * sCss);
+        el.style.fontSize = `${fontSizePx}px`;
+        el.style.lineHeight = `${Math.round(fontSizePx * 1.24)}px`;
+        const basePaddingX = Math.max(
+            0,
+            Math.round(objectData.properties?.paddingX ?? parseFloat(el.dataset.basePaddingX || `${MINDMAP_LAYOUT.paddingX}`))
+        );
+        const basePaddingY = Math.max(
+            0,
+            Math.round(objectData.properties?.paddingY ?? parseFloat(el.dataset.basePaddingY || `${MINDMAP_LAYOUT.paddingY}`))
+        );
+        const paddingXCss = Math.max(0, Math.round(basePaddingX * sCss));
+        const paddingYCss = Math.max(0, Math.round(basePaddingY * sCss));
+        el.style.paddingTop = `${paddingYCss}px`;
+        el.style.paddingBottom = `${paddingYCss}px`;
+        el.style.paddingLeft = `${paddingXCss}px`;
+        el.style.paddingRight = `${paddingXCss}px`;
+
+        const worldLayer = this.core.pixi.worldLayer || this.core.pixi.app.stage;
+        const view = this.core.pixi.app.view;
+        if (worldLayer && view && view.parentElement) {
+            const containerRect = view.parentElement.getBoundingClientRect();
+            const viewRect = view.getBoundingClientRect();
+            const offsetLeft = viewRect.left - containerRect.left;
+            const offsetTop = viewRect.top - containerRect.top;
+            const tl = worldLayer.toGlobal(new PIXI.Point(x, y));
+            const br = worldLayer.toGlobal(new PIXI.Point(x + w, y + h));
+            el.style.left = `${offsetLeft + tl.x}px`;
+            el.style.top = `${offsetTop + tl.y}px`;
+            el.style.width = `${Math.max(1, br.x - tl.x)}px`;
+            el.style.height = `${Math.max(1, br.y - tl.y)}px`;
+        }
+
+        const content = objectData.content || objectData.properties?.content;
+        if (typeof content === 'string') {
+            const contentEl = this.idToContentEl.get(objectId);
+            if (contentEl) {
+                this._applyContentValue(el, contentEl, content);
+            }
+        }
+
+        el.style.transformOrigin = 'center center';
+        el.style.transform = angle ? `rotate(${angle}deg)` : '';
+    }
+
+    _applyContentValue(containerEl, contentEl, rawContent) {
+        const maxLineChars = Math.max(
+            1,
+            parseInt(containerEl?.dataset?.maxLineChars || `${MINDMAP_LAYOUT.maxLineChars}`, 10) || MINDMAP_LAYOUT.maxLineChars
+        );
+        const actual = normalizeMindmapLineLength((typeof rawContent === 'string') ? rawContent : '', maxLineChars);
+        const isPlaceholder = actual.trim().length === 0;
+        containerEl.dataset.mbContent = actual;
+        contentEl.textContent = isPlaceholder ? MINDMAP_PLACEHOLDER : actual;
+        contentEl.classList.toggle('is-placeholder', isPlaceholder);
+    }
+}

package/src/ui/mindmap/MindmapLayoutConfig.js

@@ -0,0 +1,29 @@
+const MINDMAP_COMPACT_SCALE = 0.8;
+const MINDMAP_ROOT_SIZE_FACTOR = 0.5;
+const MINDMAP_ROOT_WIDTH_FACTOR = 0.73;
+const MINDMAP_ROOT_FONT_FACTOR = 0.85;
+const MINDMAP_ROOT_PADDING_FACTOR = 0.5;
+
+const MINDMAP_BASE_LAYOUT = Object.freeze({
+    width: 306,
+    height: 100,
+    fontSize: 20,
+    paddingX: 50,
+    paddingY: 50,
+    maxLineChars: 50,
+});
+
+function scaleInt(value) {
+    return Math.max(1, Math.round(value * MINDMAP_COMPACT_SCALE));
+}
+
+export const MINDMAP_LAYOUT = Object.freeze({
+    scale: MINDMAP_COMPACT_SCALE,
+    width: Math.max(1, Math.round(scaleInt(MINDMAP_BASE_LAYOUT.width) * MINDMAP_ROOT_WIDTH_FACTOR)),
+    height: Math.max(1, Math.round(scaleInt(MINDMAP_BASE_LAYOUT.height) * MINDMAP_ROOT_SIZE_FACTOR)),
+    fontSize: Math.max(1, Math.round(scaleInt(MINDMAP_BASE_LAYOUT.fontSize) * MINDMAP_ROOT_FONT_FACTOR)),
+    paddingX: Math.max(1, Math.round(scaleInt(MINDMAP_BASE_LAYOUT.paddingX) * MINDMAP_ROOT_PADDING_FACTOR)),
+    paddingY: Math.max(1, Math.round(scaleInt(MINDMAP_BASE_LAYOUT.paddingY) * MINDMAP_ROOT_PADDING_FACTOR)),
+    maxLineChars: MINDMAP_BASE_LAYOUT.maxLineChars,
+});
+