@sequent-org/moodboard 1.3.4 → 1.4.0

package/src/services/BoardService.js

@@ -1,5 +1,9 @@
 import { GridFactory } from '../grid/GridFactory.js';
 import { Events } from '../core/events/Events.js';
+import {
+	incrementGridDiagnosticCounter,
+	logGridDiagnostic,
+} from '../grid/GridDiagnostics.js';
 
 export class BoardService {
 	constructor(eventBus, pixi) {
@@ -7,9 +11,17 @@ export class BoardService {
 		this.pixi = pixi;
 		this.grid = null;
 		this._getCanvasSize = null;
+		this._eventsAttached = false;
+		this._handlers = null;
+		this._destroyed = false;
+		this._lastZoomCursor = null;
+		this._consumeZoomCursorAnchor = false;
 	}
 
 	async init(getCanvasSize) {
+		if (this._destroyed) {
+			this._destroyed = false;
+		}
 		this._getCanvasSize = getCanvasSize;
 		// Не создаём сетку по умолчанию, чтобы избежать визуального переключения.
 		// Сетка будет установлена из сохранённых настроек через Events.UI.GridChange.
@@ -18,9 +30,9 @@ export class BoardService {
 		this._attachEvents();
 	}
 
-	_attachEvents() {
-		// Смена вида сетки из UI
-		this.eventBus.on(Events.UI.GridChange, ({ type, options: overrideOptions }) => {
+	_buildHandlers() {
+		const onGridChange = ({ type, options: overrideOptions }) => {
+			incrementGridDiagnosticCounter('boardService.gridChange.calls');
 			const size = this._getCanvasSize?.() || { width: 800, height: 600 };
 			if (type === 'off') {
 				this.grid?.setEnabled(false);
@@ -31,6 +43,7 @@ export class BoardService {
 						grid: { type: 'off', options: this.grid?.serialize ? this.grid.serialize() : {} }
 					});
 				} catch (_) {}
+				logGridDiagnostic('BoardService', 'grid switched off', { hasGrid: !!this.grid });
 				return;
 			}
 			this.grid?.destroy?.();
@@ -53,34 +66,75 @@ export class BoardService {
 						grid: { type, options: this.grid.serialize ? this.grid.serialize() : gridOptions }
 					});
 				} catch (_) {}
+				logGridDiagnostic('BoardService', 'grid switched on', {
+					type,
+					options: gridOptions,
+				});
 			} catch (e) {
 				console.warn('Unknown grid type:', type);
 			}
-		});
+		};
 
-		// Миникарта: данные и управление
-		this.eventBus.on(Events.UI.MinimapGetData, (req) => {
+		const onMinimapGetData = (req) => {
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const viewEl = this.pixi.app.view;
-			const objects = (this.pixi?.objects ? Array.from(this.pixi.objects.keys()) : []).map((id) => id);
 			req.world = { x: world.x, y: world.y, scale: world.scale?.x || 1 };
 			req.view = { width: viewEl.clientWidth, height: viewEl.clientHeight };
 			// Прокидываем только метаданные объектов через ядро (сам список формирует Core)
-		});
-		this.eventBus.on(Events.Viewport.Changed, () => this.refreshGridViewport());
-		this.eventBus.on(Events.UI.MinimapCenterOn, ({ worldX, worldY }) => {
+		};
+
+		const onViewportChanged = () => this.refreshGridViewport();
+		const onWheelZoom = ({ x, y } = {}) => {
+			if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+			this._lastZoomCursor = { x: Math.round(x), y: Math.round(y) };
+			this._consumeZoomCursorAnchor = true;
+		};
+		const onMinimapCenterOn = ({ worldX, worldY }) => {
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const viewW = this.pixi.app.view.clientWidth;
 			const viewH = this.pixi.app.view.clientHeight;
 			const s = world.scale?.x || 1;
-			world.x = viewW / 2 - worldX * s;
-			world.y = viewH / 2 - worldY * s;
-			if (this.pixi.gridLayer) {
-				this.pixi.gridLayer.x = world.x;
-				this.pixi.gridLayer.y = world.y;
-			}
+			world.x = Math.round(viewW / 2 - worldX * s);
+			world.y = Math.round(viewH / 2 - worldY * s);
 			this.refreshGridViewport();
-		});
+		};
+
+		return {
+			onGridChange,
+			onMinimapGetData,
+			onViewportChanged,
+			onWheelZoom,
+			onMinimapCenterOn,
+		};
+	}
+
+	_attachEvents() {
+		if (this._eventsAttached) return;
+		this._handlers = this._handlers || this._buildHandlers();
+
+		// Смена вида сетки из UI
+		this.eventBus.on(Events.UI.GridChange, this._handlers.onGridChange);
+
+		// Миникарта: данные и управление
+		this.eventBus.on(Events.UI.MinimapGetData, this._handlers.onMinimapGetData);
+		this.eventBus.on(Events.Viewport.Changed, this._handlers.onViewportChanged);
+		this.eventBus.on(Events.Tool.WheelZoom, this._handlers.onWheelZoom);
+		this.eventBus.on(Events.UI.MinimapCenterOn, this._handlers.onMinimapCenterOn);
+		this._eventsAttached = true;
+		incrementGridDiagnosticCounter('boardService.lifecycle.attach');
+		logGridDiagnostic('BoardService', 'events attached');
+	}
+
+	_detachEvents() {
+		if (!this._eventsAttached || !this._handlers) return;
+		this.eventBus.off(Events.UI.GridChange, this._handlers.onGridChange);
+		this.eventBus.off(Events.UI.MinimapGetData, this._handlers.onMinimapGetData);
+		this.eventBus.off(Events.Viewport.Changed, this._handlers.onViewportChanged);
+		this.eventBus.off(Events.Tool.WheelZoom, this._handlers.onWheelZoom);
+		this.eventBus.off(Events.UI.MinimapCenterOn, this._handlers.onMinimapCenterOn);
+		this._eventsAttached = false;
+		incrementGridDiagnosticCounter('boardService.lifecycle.detach');
+		logGridDiagnostic('BoardService', 'events detached');
 	}
 
 	resize() {
@@ -93,9 +147,10 @@ export class BoardService {
 	}
 
 	/**
-	 * Синхронизирует gridLayer с world (позиция + масштаб) и перерисовывает сетку.
+	 * Обновляет screen-grid слой по viewport состоянию.
 	 */
 	refreshGridViewport() {
+		incrementGridDiagnosticCounter('boardService.refreshGridViewport.calls');
 		if (!this.grid?.enabled || !this.pixi?.gridLayer) return;
 		const view = this.pixi.app?.view;
 		if (!view) return;
@@ -103,26 +158,67 @@ export class BoardService {
 		const gl = this.pixi.gridLayer;
 		const scale = world.scale?.x ?? 1;
 
-		// Синхронизация gridLayer с world — сетка зуммируется вместе с доской
-		gl.x = world.x;
-		gl.y = world.y;
+		// Screen-grid всегда рендерится в координатах экрана.
+		gl.x = 0;
+		gl.y = 0;
 		if (gl.scale) {
-			gl.scale.set(scale);
+			gl.scale.set(1);
+		}
+		if ((gl.x || 0) !== 0 || (gl.y || 0) !== 0 || (gl.scale?.x || 1) !== 1 || (gl.scale?.y || 1) !== 1) {
+			logGridDiagnostic('BoardService', 'gridLayer normalization mismatch', {
+				x: gl.x || 0,
+				y: gl.y || 0,
+				scaleX: gl.scale?.x || 1,
+				scaleY: gl.scale?.y || 1,
+			});
 		}
 
-		// DotGrid: передаём zoom до setVisibleBounds (чтобы createVisual видел актуальный zoom)
-		if (this.grid.type === 'dot' && typeof this.grid.setZoom === 'function') {
+		if (typeof this.grid.setZoom === 'function') {
 			this.grid.setZoom(scale);
 		}
+		if (typeof this.grid.setViewportTransform === 'function') {
+			const zoomCursor = this._lastZoomCursor;
+			const useCursorAnchor = this._consumeZoomCursorAnchor && !!zoomCursor;
+			this.grid.setViewportTransform({
+				worldX: world.x || 0,
+				worldY: world.y || 0,
+				scale,
+				viewWidth: view.clientWidth,
+				viewHeight: view.clientHeight,
+				zoomCursorX: zoomCursor?.x ?? null,
+				zoomCursorY: zoomCursor?.y ?? null,
+				useCursorAnchor,
+			});
+			this._consumeZoomCursorAnchor = false;
+		}
 
-		// Видимая область в мировых координатах (с учётом scale)
-		const gridSize = this.grid._getEffectiveSize?.() ?? this.grid.size;
-		const pad = Math.max(100, (gridSize || 20) * 4);
-		const left = (-gl.x - pad) / scale;
-		const top = (-gl.y - pad) / scale;
-		const right = (view.clientWidth - gl.x + pad) / scale;
-		const bottom = (view.clientHeight - gl.y + pad) / scale;
+		// Видимая область в screen-координатах.
+		const pad = 32;
+		const left = -pad;
+		const top = -pad;
+		const right = view.clientWidth + pad;
+		const bottom = view.clientHeight + pad;
 		this.grid.setVisibleBounds(left, top, right, bottom);
+		logGridDiagnostic('BoardService', 'viewport refreshed', {
+			gridType: this.grid?.type || 'unknown',
+			scale,
+			worldX: world.x || 0,
+			worldY: world.y || 0,
+			bounds: { left, top, right, bottom },
+		});
+	}
+
+	destroy() {
+		if (this._destroyed) return;
+		this._destroyed = true;
+		this._detachEvents();
+		this.grid?.destroy?.();
+		this.grid = null;
+		if (this.pixi?.setGrid) {
+			this.pixi.setGrid(null);
+		}
+		incrementGridDiagnosticCounter('boardService.lifecycle.destroy');
+		logGridDiagnostic('BoardService', 'destroy');
 	}
 }
 

package/src/services/GridSnapResolver.js

@@ -0,0 +1,60 @@
+import { incrementGridDiagnosticCounter, logGridDiagnostic } from '../grid/GridDiagnostics.js';
+
+export class GridSnapResolver {
+    constructor(core) {
+        this.core = core;
+    }
+
+    _getGrid() {
+        return this.core?.boardService?.grid || null;
+    }
+
+    _isEnabled() {
+        const grid = this._getGrid();
+        return !!(grid && grid.enabled && grid.snapEnabled !== false);
+    }
+
+    snapWorldTopLeft(position, size = null) {
+        incrementGridDiagnosticCounter('gridSnapResolver.snapWorldTopLeft.calls');
+        if (!position || typeof position.x !== 'number' || typeof position.y !== 'number') {
+            return position;
+        }
+        if (!this._isEnabled()) {
+            logGridDiagnostic('GridSnapResolver', 'snap skipped: grid disabled', { position, size });
+            return position;
+        }
+        const grid = this._getGrid();
+        const halfW = size ? (size.width || 0) / 2 : 0;
+        const halfH = size ? (size.height || 0) / 2 : 0;
+        const center = {
+            x: position.x + halfW,
+            y: position.y + halfH,
+        };
+        if (typeof grid.snapWorldPoint === 'function') {
+            const snappedCenter = grid.snapWorldPoint(center.x, center.y);
+            const snapped = {
+                x: snappedCenter.x - halfW,
+                y: snappedCenter.y - halfH,
+            };
+            logGridDiagnostic('GridSnapResolver', 'snap via snapWorldPoint', {
+                type: grid.type || 'unknown',
+                position,
+                size,
+                snapped,
+            });
+            return snapped;
+        }
+        const fallback = grid.snapToGrid(center.x, center.y);
+        const snapped = {
+            x: fallback.x - halfW,
+            y: fallback.y - halfH,
+        };
+        logGridDiagnostic('GridSnapResolver', 'snap via snapToGrid fallback', {
+            type: grid.type || 'unknown',
+            position,
+            size,
+            snapped,
+        });
+        return snapped;
+    }
+}

package/src/services/MiroZoomLevels.js

@@ -0,0 +1,39 @@
+/**
+ * Наблюдаемые шаги Miro при zoom-out от 400%.
+ * Оригинальная последовательность содержит дубликаты на низком zoom.
+ */
+export const MIRO_ZOOM_DOWN_FROM_400 = [
+    400, 357, 319, 285, 254, 227, 203, 181, 162, 144, 129, 115, 103, 92, 82,
+    73, 65, 58, 52, 46, 41, 37,
+];
+
+/**
+ * Наблюдаемые шаги Miro при zoom-in от 100%.
+ */
+export const MIRO_ZOOM_UP_FROM_100 = [
+    100, 112, 125, 140, 157, 176, 197, 221, 248, 277, 311, 348, 390, 400,
+];
+
+/**
+ * Наблюдаемые шаги Miro при zoom-out от 100%.
+ */
+export const MIRO_ZOOM_DOWN_FROM_100 = [
+    // Дубли (8, 5) представлены разными zoom-value, но одинаковой label после округления.
+    100, 92, 82, 73, 65, 58, 52, 46, 41, 37, 33, 30, 26, 24, 21, 19, 17, 15, 13,
+    12, 11, 10, 8.4, 7.6, 7, 6, 5.4, 4.6, 4.0, 3.6, 3.4, 3.0, 2.6, 2.4, 2.2, 2.0,
+    1.8, 1.6, 1.4,
+];
+
+const uniqueSorted = new Set([
+    ...MIRO_ZOOM_DOWN_FROM_400,
+    ...MIRO_ZOOM_UP_FROM_100,
+    ...MIRO_ZOOM_DOWN_FROM_100,
+]);
+
+/**
+ * Общий справочник checkpoint'ов для аналитики/тестов.
+ */
+export const MIRO_ZOOM_LEVELS = Array.from(uniqueSorted).sort((a, b) => a - b);
+
+export const MIRO_ZOOM_UP_TO_100 = Array.from(new Set(MIRO_ZOOM_DOWN_FROM_100)).sort((a, b) => a - b);
+

package/src/services/SettingsApplier.js

@@ -85,10 +85,6 @@ export class SettingsApplier {
             if (world) {
                 world.x = s.pan.x;
                 world.y = s.pan.y;
-                if (this.pixi?.gridLayer) {
-                    this.pixi.gridLayer.x = s.pan.x;
-                    this.pixi.gridLayer.y = s.pan.y;
-                }
                 try { this.eventBus.emit(Events.Viewport.Changed); } catch (_) {}
             }
         }

package/src/services/ZoomPanController.js

@@ -1,12 +1,19 @@
 import { Events } from '../core/events/Events.js';
+import {
+	MIRO_ZOOM_DOWN_FROM_100,
+	MIRO_ZOOM_DOWN_FROM_400,
+	MIRO_ZOOM_UP_FROM_100,
+	MIRO_ZOOM_UP_TO_100,
+} from './MiroZoomLevels.js';
 
 /**
- * Уровни зума, выровненные под профиль Miro.
- * Верхняя граница — 500%.
+ * Направленные zoom-последовательности, выровненные под наблюдения Miro.
  */
-const ZOOM_LEVELS = [
-	2, 5, 10, 15, 20, 25, 33, 50, 75, 100, 125, 150, 200, 250, 300, 400, 500
-];
+const ZOOM_UP_TO_100 = MIRO_ZOOM_UP_TO_100;
+const ZOOM_UP_FROM_100 = MIRO_ZOOM_UP_FROM_100;
+const ZOOM_DOWN_FROM_100 = MIRO_ZOOM_DOWN_FROM_100;
+const ZOOM_DOWN_FROM_400 = MIRO_ZOOM_DOWN_FROM_400;
+const EPSILON = 1e-6;
 
 export class ZoomPanController {
 	constructor(eventBus, pixi) {
@@ -14,17 +21,34 @@ export class ZoomPanController {
 		this.pixi = pixi;
 	}
 
-	_nearestLevelIndex(percent) {
-		let best = 0;
-		let bestDist = Math.abs(ZOOM_LEVELS[0] - percent);
-		for (let i = 1; i < ZOOM_LEVELS.length; i++) {
-			const d = Math.abs(ZOOM_LEVELS[i] - percent);
-			if (d < bestDist) {
-				bestDist = d;
-				best = i;
+	_nextAscendingLevel(percent, levels) {
+		for (let i = 0; i < levels.length; i += 1) {
+			if (levels[i] > percent + EPSILON) return levels[i];
+		}
+		return levels[levels.length - 1];
+	}
+
+	_nextDescendingLevel(percent, levels) {
+		for (let i = 0; i < levels.length; i += 1) {
+			if (levels[i] < percent - EPSILON) return levels[i];
+		}
+		return levels[levels.length - 1];
+	}
+
+	_pickTargetPercent(oldPercent, delta) {
+		if (delta < 0) {
+			if (oldPercent >= 100) {
+				return this._nextAscendingLevel(oldPercent, ZOOM_UP_FROM_100);
 			}
+			return this._nextAscendingLevel(oldPercent, ZOOM_UP_TO_100);
 		}
-		return best;
+		if (delta > 0) {
+			if (oldPercent > 100) {
+				return this._nextDescendingLevel(oldPercent, ZOOM_DOWN_FROM_400);
+			}
+			return this._nextDescendingLevel(oldPercent, ZOOM_DOWN_FROM_100);
+		}
+		return oldPercent;
 	}
 
 	attach() {
@@ -32,25 +56,20 @@ export class ZoomPanController {
 		this.eventBus.on(Events.Tool.WheelZoom, ({ x, y, delta }) => {
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const oldScale = world.scale.x || 1;
-			const oldPercent = Math.round(oldScale * 100);
-			const idx = this._nearestLevelIndex(oldPercent);
-			let targetPercent;
-			if (delta < 0) {
-				targetPercent = ZOOM_LEVELS[Math.min(ZOOM_LEVELS.length - 1, idx + 1)];
-			} else if (delta > 0) {
-				targetPercent = ZOOM_LEVELS[Math.max(0, idx - 1)];
-			} else {
-				return;
-			}
-			const newScale = Math.max(0.02, Math.min(5, targetPercent / 100));
+			const oldPercent = oldScale * 100;
+			if (!(delta < 0 || delta > 0)) return;
+
+			const targetPercent = this._pickTargetPercent(oldPercent, delta);
+			const newScale = Math.max(0.01, Math.min(5, targetPercent / 100));
 			if (Math.abs(newScale - oldScale) < 0.0001) return;
+
 			// Вычисляем мировые координаты точки под курсором до изменения скейла
 			const worldX = (x - world.x) / oldScale;
 			const worldY = (y - world.y) / oldScale;
 			// Применяем новый скейл и пересчитываем позицию, чтобы точка под курсором осталась на месте
 			world.scale.set(newScale);
-			world.x = x - worldX * newScale;
-			world.y = y - worldY * newScale;
+			world.x = Math.round(x - worldX * newScale);
+			world.y = Math.round(y - worldY * newScale);
 			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
 			this.eventBus.emit(Events.Viewport.Changed);
 		});
@@ -76,8 +95,8 @@ export class ZoomPanController {
 			const worldX = (centerX - world.x) / oldScale;
 			const worldY = (centerY - world.y) / oldScale;
 			world.scale.set(1);
-			world.x = centerX - worldX * 1;
-			world.y = centerY - worldY * 1;
+			world.x = Math.round(centerX - worldX);
+			world.y = Math.round(centerY - worldY);
 			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: 100 });
 			this.eventBus.emit(Events.Viewport.Changed);
 		});
@@ -99,13 +118,13 @@ export class ZoomPanController {
 			const padding = 40;
 			const scaleX = (viewW - padding) / bboxW;
 			const scaleY = (viewH - padding) / bboxH;
-			const newScale = Math.max(0.02, Math.min(5, Math.min(scaleX, scaleY)));
+			const newScale = Math.max(0.01, Math.min(5, Math.min(scaleX, scaleY)));
 			const world = this.pixi.worldLayer || this.pixi.app.stage;
 			const worldCenterX = minX + bboxW / 2;
 			const worldCenterY = minY + bboxH / 2;
 			world.scale.set(newScale);
-			world.x = viewW / 2 - worldCenterX * newScale;
-			world.y = viewH / 2 - worldCenterY * newScale;
+			world.x = Math.round(viewW / 2 - worldCenterX * newScale);
+			world.y = Math.round(viewH / 2 - worldCenterY * newScale);
 			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
 			this.eventBus.emit(Events.Viewport.Changed);
 		});

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

@@ -81,6 +81,8 @@ export class PlacementTool extends BaseTool {
                 this.showFrameGhost();
             } else if (this.pending.type === 'shape') {
                 this.showShapeGhost();
+            } else if (this.pending.type === 'mindmap') {
+                this.showMindmapGhost();
             }
         }
     }
@@ -292,6 +294,13 @@ export class PlacementTool extends BaseTool {
         return this.ghostController.showShapeGhost();
     }
 
+    /**
+     * Показать "призрак" mindmap-объекта
+     */
+    showMindmapGhost() {
+        return this.ghostController.showMindmapGhost();
+    }
+
     /**
      * Разместить выбранное изображение на холсте
      */
@@ -360,10 +369,10 @@ export class PlacementTool extends BaseTool {
 
 // Возвращает подходящий курсор для текущего pending состояния
 PlacementTool.prototype._getPendingCursor = function() {
-    if (!this.pending) return 'crosshair';
+    if (!this.pending) return 'default';
     if (this.pending.type === 'text') return 'text';
-    if (this.pending.type === 'frame-draw') return 'crosshair';
-    return 'crosshair';
+    if (this.pending.type === 'frame-draw') return 'default';
+    return 'default';
 };
 
 

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

@@ -24,9 +24,11 @@ import {
 } from './selection/CloneFlowController.js';
 import {
     openTextEditor as openTextEditorViaController,
+    openMindmapEditor as openMindmapEditorViaController,
     openFileNameEditor as openFileNameEditorViaController,
     closeFileNameEditor as closeFileNameEditorViaController,
-    closeTextEditor as closeTextEditorViaController
+    closeTextEditor as closeTextEditorViaController,
+    closeMindmapEditor as closeMindmapEditorViaController
 } from './selection/InlineEditorController.js';
 import {
     hitTest as hitTestViaService,
@@ -325,6 +327,10 @@ export class SelectTool extends BaseTool {
         return openTextEditorViaController.call(this, object, create);
     }
 
+    _openMindmapEditor(object, create = false) {
+        return openMindmapEditorViaController.call(this, object, create);
+    }
+
     _openFileNameEditor(object, create = false) {
         return openFileNameEditorViaController.call(this, object, create);
     }
@@ -336,6 +342,10 @@ export class SelectTool extends BaseTool {
         return closeTextEditorViaController.call(this, commit);
     }
 
+    _closeMindmapEditor(commit) {
+        return closeMindmapEditorViaController.call(this, commit);
+    }
+
     destroy() {
         return destroySelectTool.call(this, () => super.destroy());
     }

package/src/tools/object-tools/placement/GhostController.js

@@ -1,4 +1,5 @@
 import * as PIXI from 'pixi.js';
+import { MINDMAP_LAYOUT } from '../../../ui/mindmap/MindmapLayoutConfig.js';
 
 export class GhostController {
     constructor(host) {
@@ -233,7 +234,7 @@ export class GhostController {
                 }
             } catch (_) {}
         } else if (host.app && host.app.view) {
-            host.cursor = 'crosshair';
+            host.cursor = 'default';
             host.app.view.style.cursor = host.cursor;
         }
     }
@@ -501,4 +502,102 @@ export class GhostController {
 
         host.world.addChild(host.ghostContainer);
     }
+
+    showMindmapGhost() {
+        const host = this.host;
+        if (!host.pending || host.pending.type !== 'mindmap' || !host.world) return;
+
+        this.hideGhost();
+
+        host.ghostContainer = new PIXI.Container();
+        host.ghostContainer.alpha = 0.75;
+
+        const width = Math.max(1, Math.round(host.pending.properties?.width || MINDMAP_LAYOUT.width));
+        const height = Math.max(1, Math.round(host.pending.properties?.height || MINDMAP_LAYOUT.height));
+        const strokeColor = (typeof host.pending.properties?.strokeColor === 'number')
+            ? host.pending.properties.strokeColor
+            : 0x2563EB;
+        const fillColor = (typeof host.pending.properties?.fillColor === 'number')
+            ? host.pending.properties.fillColor
+            : 0x3B82F6;
+        const fillAlpha = (typeof host.pending.properties?.fillAlpha === 'number')
+            ? host.pending.properties.fillAlpha
+            : 0.25;
+        const strokeWidth = (typeof host.pending.properties?.strokeWidth === 'number')
+            ? host.pending.properties.strokeWidth
+            : 1;
+        const fontSize = Math.max(1, Math.round(host.pending.properties?.fontSize || MINDMAP_LAYOUT.fontSize));
+        const fontFamily = host.pending.properties?.fontFamily || 'Roboto, Arial, sans-serif';
+        const textColor = host.pending.properties?.textColor || 0x212121;
+        const paddingX = Math.max(0, Math.round(host.pending.properties?.paddingX ?? MINDMAP_LAYOUT.paddingX));
+        const placeholderText = 'Напишите что-нибудь';
+        const dynamicRadius = Math.max(0, Math.floor(Math.min(width, height) / 2));
+        const baseHeight = Math.max(
+            1,
+            Math.round(host.pending.properties?.capsuleBaseHeight || host.pending.properties?.height || MINDMAP_LAYOUT.height)
+        );
+        const baseRadius = Math.max(0, Math.floor(baseHeight / 2));
+        const cornerRadius = Math.min(dynamicRadius, baseRadius);
+
+        const graphics = new PIXI.Graphics();
+        const drawGhostCapsule = (lineWidth, alpha = 1) => {
+            try {
+                graphics.lineStyle({
+                    width: lineWidth,
+                    color: strokeColor,
+                    alpha,
+                    alignment: 0,
+                    cap: 'round',
+                    join: 'round',
+                    miterLimit: 2,
+                });
+            } catch (_) {
+                graphics.lineStyle(lineWidth, strokeColor, alpha, 0);
+            }
+            graphics.drawRoundedRect(0, 0, width, height, cornerRadius);
+        };
+
+        try {
+            graphics.beginFill(fillColor, fillAlpha);
+            graphics.drawRoundedRect(0, 0, width, height, cornerRadius);
+            graphics.endFill();
+        } catch (_) {
+            graphics.beginFill(fillColor, fillAlpha);
+            graphics.drawRoundedRect(0, 0, width, height, cornerRadius);
+            graphics.endFill();
+        }
+
+        drawGhostCapsule(strokeWidth, 1);
+
+        host.ghostContainer.addChild(graphics);
+
+        try {
+            const lineHeight = Math.max(1, Math.round(fontSize * 1.24));
+            const rendererRes = Math.max(1, host.app?.renderer?.resolution || 1);
+            const textScale = 1 / rendererRes;
+            const placeholder = new PIXI.Text(placeholderText, {
+                fontFamily,
+                fontSize,
+                fontWeight: '400',
+                fill: textColor,
+                align: 'left',
+                lineHeight,
+                wordWrap: false,
+                breakWords: false,
+            });
+            placeholder.alpha = 0.45;
+            placeholder.scale.set(textScale);
+            placeholder.x = paddingX;
+            const localBounds = placeholder.getLocalBounds();
+            const measuredHeight = Math.max(1, Number.isFinite(localBounds?.height) ? localBounds.height : lineHeight);
+            const scaledMeasuredHeight = measuredHeight * textScale;
+            const targetY = (height - scaledMeasuredHeight) / 2;
+            placeholder.y = (Math.round(targetY * 2) / 2) - 2;
+            host.ghostContainer.addChild(placeholder);
+        } catch (_) {}
+
+        host.ghostContainer.pivot.x = width / 2;
+        host.ghostContainer.pivot.y = height / 2;
+        host.world.addChild(host.ghostContainer);
+    }
 }

package/src/tools/object-tools/placement/PlacementEventsBridge.js

@@ -32,6 +32,8 @@ export class PlacementEventsBridge {
                     this.host.startFrameDrawMode();
                 } else if (this.host.pending.type === 'shape') {
                     this.host.showShapeGhost();
+                } else if (this.host.pending.type === 'mindmap') {
+                    this.host.showMindmapGhost();
                 }
                 if (this.host.pending.placeOnMouseUp && this.host.app && this.host.app.view) {
                     const onUp = (ev) => {