@sequent-org/moodboard 1.4.30 → 1.4.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.30",
+  "version": "1.4.31",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",
@@ -40,7 +40,9 @@
     "deploy:prod": "NODE_ENV=production npm run build && NODE_ENV=production npm run start"
   },
   "dependencies": {
+    "@pixi/filter-drop-shadow": "^5.2.0",
     "axios": "^1.0.0",
+    "gsap": "^3.15.0",
     "lucide-static": "^1.16.0",
     "pixi.js": "^7.0.0"
   },

package/src/core/PixiEngine.js

@@ -2,6 +2,7 @@ import * as PIXI from 'pixi.js';
 import { ObjectFactory } from '../objects/ObjectFactory.js';
 import { ObjectRenderer } from './rendering/ObjectRenderer.js';
 import { Events } from './events/Events.js';
+import { HoverLiftController } from '../ui/animation/HoverLiftController.js';
 
 export class PixiEngine {
     constructor(container, eventBus, options) {
@@ -41,6 +42,9 @@ export class PixiEngine {
         // Инициализируем ObjectRenderer
         this.renderer = new ObjectRenderer(this.objects, this.eventBus);
 
+        // Hover-lift анимация для всех объектов
+        this.hoverLift = new HoverLiftController(this.eventBus, this.app);
+
         // Поддержка чёткости текстов записок при зуме: подписка на событие зума
         if (this.eventBus) {
             const onZoom = ({ percentage }) => {
@@ -53,6 +57,9 @@ export class PixiEngine {
                         if (mb && mb.type === 'note' && mb.instance && typeof mb.instance.updateCrispnessForZoom === 'function') {
                             mb.instance.updateCrispnessForZoom(s, res);
                         }
+                        if (mb && mb.type === 'mindmap' && mb.instance && typeof mb.instance.redrawForZoom === 'function') {
+                            mb.instance.redrawForZoom(s);
+                        }
                     }
                 } catch (e) {
                     console.warn('PixiEngine: zoom crispness update failed', e);
@@ -75,14 +82,17 @@ export class PixiEngine {
                 type: objectData.type,
                 instance: instance // Сохраняем ссылку на сам объект
             };
-            // Первичная установка чёткости для записок по текущему масштабу/резолюции
+            // Первичная установка чёткости/масштаба по текущему зуму
             try {
-                if (pixiObject && pixiObject._mb && pixiObject._mb.type === 'note' && pixiObject._mb.instance && typeof pixiObject._mb.instance.updateCrispnessForZoom === 'function') {
-                    const world = this.worldLayer || this.app.stage;
-                    const s = world?.scale?.x || 1;
-                    const res = this.app?.renderer?.resolution || 1;
+                const world = this.worldLayer || this.app.stage;
+                const s = world?.scale?.x || 1;
+                const res = this.app?.renderer?.resolution || 1;
+                if (pixiObject._mb.type === 'note' && pixiObject._mb.instance && typeof pixiObject._mb.instance.updateCrispnessForZoom === 'function') {
                     pixiObject._mb.instance.updateCrispnessForZoom(s, res);
                 }
+                if (pixiObject._mb.type === 'mindmap' && pixiObject._mb.instance && typeof pixiObject._mb.instance.redrawForZoom === 'function') {
+                    pixiObject._mb.instance.redrawForZoom(s);
+                }
             } catch (_) {}
         } else {
             console.warn(`Unknown object type: ${objectData.type}`);
@@ -159,6 +169,17 @@ export class PixiEngine {
             this.worldLayer.addChild(pixiObject);
             this.objects.set(objectData.id, pixiObject);
 
+            // Hover-lift: подключаем упругую анимацию
+            if (this.hoverLift) {
+                this.hoverLift.attach(pixiObject, objectData);
+                // Если текстура ещё не загружена (ImageObject, EmojiObject),
+                // baseScale в attach зафиксирован как 1. Синхронизируем после загрузки.
+                const bt = pixiObject.texture?.baseTexture;
+                if (bt && !bt.valid) {
+                    bt.once('loaded', () => { this.hoverLift?.syncBase(pixiObject); });
+                }
+            }
+
 
         }
     }
@@ -222,6 +243,11 @@ export class PixiEngine {
                     }
                 }
                 
+                // Отключаем hover-lift перед очисткой listeners
+                if (this.hoverLift) {
+                    this.hoverLift.detach(pixiObject);
+                }
+
                 // Очищаем все события
                 pixiObject.removeAllListeners();
                 
@@ -229,6 +255,9 @@ export class PixiEngine {
                 pixiObject.destroy({ children: true, texture: false, baseTexture: false });
             } else {
                 // Для других типов объектов - стандартная очистка
+                if (this.hoverLift) {
+                    this.hoverLift.detach(pixiObject);
+                }
                 if (pixiObject.destroy) {
                     pixiObject.destroy({ children: true });
                 }

package/src/core/bootstrap/CoreInitializer.js

@@ -55,6 +55,10 @@ export async function initializeCoreTools(core) {
     const textTool = new textToolModule.TextTool(core.eventBus);
     core.toolManager.registerTool(textTool);
 
+    const connectorToolModule = await import('../../tools/object-tools/ConnectorTool.js');
+    const connectorTool = new connectorToolModule.ConnectorTool(core.eventBus, core);
+    core.toolManager.registerTool(connectorTool);
+
     core.selectTool = selectTool;
     core.toolManager.activateTool('select');
 

package/src/core/commands/CreateConnectorCommand.js

@@ -0,0 +1,25 @@
+import { BaseCommand } from './BaseCommand.js';
+
+/**
+ * Команда создания коннектора.
+ * execute() добавляет connector-объект через ядро (аналог создания других объектов).
+ */
+export class CreateConnectorCommand extends BaseCommand {
+    /**
+     * @param {Object} core  Экземпляр CoreMoodBoard
+     * @param {Object} connectorData  Полные данные объекта типа 'connector' (включая id)
+     */
+    constructor(core, connectorData) {
+        super('create_connector', 'Создать коннектор');
+        this.core = core;
+        this.connectorData = connectorData;
+    }
+
+    execute() {
+        this.core.createObjectFromData(this.connectorData);
+    }
+
+    undo() {
+        // Локальный undo отключен: история состояния загружается с сервера по версиям.
+    }
+}

package/src/core/commands/GroupMoveCommand.js

@@ -22,7 +22,7 @@ export class GroupMoveCommand extends BaseCommand {
         for (const item of this.moves) {
             if (this.coordinatesAreTopLeft) {
                 // Координаты уже левый-верх (Frame перемещение)
-                this.core.updateObjectPositionDirect(item.id, item.to);
+                this.core.updateObjectPositionDirect(item.id, item.to, { snap: false });
                 this.emit(Events.Object.TransformUpdated, {
                     objectId: item.id,
                     type: 'position',
@@ -35,7 +35,7 @@ export class GroupMoveCommand extends BaseCommand {
                     const halfW = (pixiObject.width || 0) / 2;
                     const halfH = (pixiObject.height || 0) / 2;
                     const topLeft = { x: item.to.x - halfW, y: item.to.y - halfH };
-                    this.core.updateObjectPositionDirect(item.id, topLeft);
+                    this.core.updateObjectPositionDirect(item.id, topLeft, { snap: false });
                     this.emit(Events.Object.TransformUpdated, {
                         objectId: item.id,
                         type: 'position',

package/src/core/commands/MoveObjectCommand.js

@@ -29,7 +29,7 @@ export class MoveObjectCommand extends BaseCommand {
     _setPosition(position) {
         // Используем готовую функцию из ядра - она правильно обрабатывает все типы объектов
         // position уже является координатами левого-верхнего угла
-        this.coreMoodboard.updateObjectPositionDirect(this.objectId, position);
+        this.coreMoodboard.updateObjectPositionDirect(this.objectId, position, { snap: false });
         
         // Уведомляем о том, что объект был изменен (для обновления ручек)
         if (this.eventBus) {

package/src/core/commands/UpdateConnectorCommand.js

@@ -0,0 +1,38 @@
+import { BaseCommand } from './BaseCommand.js';
+
+/**
+ * Команда обновления терминалов и/или стиля коннектора.
+ * execute() применяет изменения к существующему connector-объекту в state.
+ */
+export class UpdateConnectorCommand extends BaseCommand {
+    /**
+     * @param {Object} core         Экземпляр CoreMoodBoard
+     * @param {string} connectorId  id коннектора в state.objects
+     * @param {Object} updates      { start?, end?, style? }
+     */
+    constructor(core, connectorId, updates) {
+        super('update_connector', 'Обновить коннектор');
+        this.core        = core;
+        this.connectorId = connectorId;
+        this.updates     = updates;
+    }
+
+    execute() {
+        const objects = this.core?.state?.state?.objects;
+        if (!Array.isArray(objects)) return;
+
+        const obj = objects.find(o => o.id === this.connectorId);
+        if (!obj) return;
+
+        if (!obj.properties) obj.properties = {};
+        if (this.updates.start !== undefined) obj.properties.start = this.updates.start;
+        if (this.updates.end   !== undefined) obj.properties.end   = this.updates.end;
+        if (this.updates.style !== undefined) {
+            obj.properties.style = { ...(obj.properties.style || {}), ...this.updates.style };
+        }
+    }
+
+    undo() {
+        // Локальный undo отключен: история состояния загружается с сервера по версиям.
+    }
+}

package/src/core/events/Events.js

@@ -109,6 +109,7 @@ export const Events = {
 		StateChanged: 'state:changed',
 		FileNameChange: 'object:filename:change',
 		ContentChange: 'object:content:change',
+		Hover: 'object:hover',
 	},
 
 	History: {

package/src/mindmap/MindmapCompoundContract.js

@@ -215,6 +215,7 @@ export function normalizeMindmapPropertiesForCreate({
                 ? (branchRootIdRaw || asNonEmptyString(objectId) || null)
                 : null,
             branchColor: role === CHILD_ROLE ? branchColor : null,
+            collapsed: meta.collapsed === true,
         },
     };
 }

package/src/moodboard/bootstrap/MoodBoardUiFactory.js

@@ -8,6 +8,9 @@ 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 { MindmapCollapseLayer } from '../../ui/mindmap/MindmapCollapseLayer.js';
+import { ConnectorLayer } from '../../ui/connectors/ConnectorLayer.js';
+import { ConnectionAnchorsLayer } from '../../ui/connectors/ConnectionAnchorsLayer.js';
 import { HtmlHandlesLayer } from '../../ui/HtmlHandlesLayer.js';
 import { CommentPopover } from '../../ui/CommentPopover.js';
 import { TextPropertiesPanel } from '../../ui/TextPropertiesPanel.js';
@@ -102,6 +105,14 @@ function initHtmlLayersAndPanels(board) {
     board.mindmapHtmlTextLayer.attach();
     board.mindmapConnectionLayer = new MindmapConnectionLayer(board.coreMoodboard.eventBus, board.coreMoodboard);
     board.mindmapConnectionLayer.attach();
+    board.mindmapCollapseLayer = new MindmapCollapseLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.mindmapCollapseLayer.attach();
+
+    board.connectorLayer = new ConnectorLayer(board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.connectorLayer.attach();
+
+    board.connectionAnchorsLayer = new ConnectionAnchorsLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
+    board.connectionAnchorsLayer.attach();
 
     board.htmlHandlesLayer = new HtmlHandlesLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
     board.htmlHandlesLayer.attach();
@@ -110,6 +121,9 @@ function initHtmlLayersAndPanels(board) {
         window.moodboardHtmlTextLayer = board.htmlTextLayer;
         window.moodboardMindmapHtmlTextLayer = board.mindmapHtmlTextLayer;
         window.moodboardMindmapConnectionLayer = board.mindmapConnectionLayer;
+        window.moodboardMindmapCollapseLayer = board.mindmapCollapseLayer;
+        window.moodboardConnectorLayer = board.connectorLayer;
+        window.moodboardConnectionAnchorsLayer = board.connectionAnchorsLayer;
         window.moodboardHtmlHandlesLayer = board.htmlHandlesLayer;
     }
 

package/src/moodboard/lifecycle/MoodBoardDestroyer.js

@@ -55,6 +55,15 @@ export function destroyMoodBoard(board) {
     safeDestroy(board.mindmapConnectionLayer, 'mindmapConnectionLayer');
     board.mindmapConnectionLayer = null;
 
+    safeDestroy(board.mindmapCollapseLayer, 'mindmapCollapseLayer');
+    board.mindmapCollapseLayer = null;
+
+    safeDestroy(board.connectorLayer, 'connectorLayer');
+    board.connectorLayer = null;
+
+    safeDestroy(board.connectionAnchorsLayer, 'connectionAnchorsLayer');
+    board.connectionAnchorsLayer = null;
+
     safeDestroy(board.htmlHandlesLayer, 'htmlHandlesLayer');
     board.htmlHandlesLayer = null;
 
@@ -100,6 +109,15 @@ export function destroyMoodBoard(board) {
         if (window.moodboardMindmapConnectionLayer === board.mindmapConnectionLayer) {
             window.moodboardMindmapConnectionLayer = null;
         }
+        if (window.moodboardMindmapCollapseLayer === board.mindmapCollapseLayer) {
+            window.moodboardMindmapCollapseLayer = null;
+        }
+        if (window.moodboardConnectorLayer === board.connectorLayer) {
+            window.moodboardConnectorLayer = null;
+        }
+        if (window.moodboardConnectionAnchorsLayer === board.connectionAnchorsLayer) {
+            window.moodboardConnectionAnchorsLayer = null;
+        }
         if (window.moodboardHtmlHandlesLayer === board.htmlHandlesLayer) {
             window.moodboardHtmlHandlesLayer = null;
         }

package/src/objects/ConnectorObject.js

@@ -0,0 +1,85 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * ConnectorObject — универсальный коннектор (стрелка/линия с привязкой к объектам).
+ *
+ * Визуальный рендер делегирован ConnectorLayer; здесь только тип, дефолты и сериализация.
+ *
+ * properties:
+ *   start  — { boundId, anchor:{x,y}, isPrecise, isExact } | { point:{x,y} }
+ *   end    — то же
+ *   style  — { stroke, width, dash, head:{start,end}, route }
+ *
+ * position/size номинальны (bounding box линии); реальная геометрия — из терминалов.
+ */
+export class ConnectorObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+
+        // Номинальные размеры (bbox); реальная геометрия — из терминалов
+        this.width  = objectData.width  ?? 0;
+        this.height = objectData.height ?? 0;
+
+        const props = objectData.properties || {};
+
+        this.start = props.start || { point: { x: 0, y: 0 } };
+        this.end   = props.end   || { point: { x: 100, y: 0 } };
+
+        this.style = {
+            stroke: 0x2563EB,
+            width:  2,
+            dash:   false,
+            head: { start: false, end: true },
+            route: 'straight',
+            ...(props.style || {}),
+        };
+
+        // Невидимый контейнер-заглушка: реальный рендер в ConnectorLayer
+        this._container = new PIXI.Container();
+        this._container.visible = false;
+        this._container.eventMode = 'none';
+
+        this._container._mb = {
+            type:       'connector',
+            instance:   this,
+            properties: this._buildProperties(),
+        };
+    }
+
+    _buildProperties() {
+        return {
+            start: this.start,
+            end:   this.end,
+            style: { ...this.style, head: { ...this.style.head } },
+        };
+    }
+
+    getPixi() {
+        return this._container;
+    }
+
+    /** Обновляет терминалы и/или стиль; синхронизирует _mb.properties */
+    setProperties({ start, end, style } = {}) {
+        if (start !== undefined) this.start = start;
+        if (end   !== undefined) this.end   = end;
+        if (style !== undefined) this.style = { ...this.style, ...style };
+
+        if (this._container?._mb) {
+            this._container._mb.properties = this._buildProperties();
+        }
+    }
+
+    /** Обновляет номинальные размеры (используется ядром при resize) */
+    updateSize(size) {
+        if (!size) return;
+        if (size.width  != null) this.width  = size.width;
+        if (size.height != null) this.height = size.height;
+    }
+
+    destroy() {
+        if (this._container) {
+            try { this._container.destroy(); } catch (_) {}
+            this._container = null;
+        }
+    }
+}

package/src/objects/DrawingObject.js

@@ -1,4 +1,5 @@
 import * as PIXI from 'pixi.js';
+import { GeometryUtils } from '../core/rendering/GeometryUtils.js';
 
 /**
  * Класс объекта «Рисунок» (карандаш/маркер)
@@ -27,6 +28,13 @@ export class DrawingObject {
         this.graphics = new PIXI.Graphics();
         this._draw(this.points, this.color, this.strokeWidth, this.mode);
 
+        // PIXI v7 Graphics.containsPoint учитывает только заливку (fillStyle),
+        // а рисунок состоит лишь из обводки (lineStyle) — поэтому штатный hit-test
+        // линии всегда «мимо», и событийная система не шлёт pointerover/pointerout
+        // (от них зависит hover-подсветка). Переопределяем containsPoint на проверку
+        // расстояния до сегментов, чтобы наведение ловилось на любом участке линии.
+        this.graphics.containsPoint = (globalPoint) => this._containsPoint(globalPoint);
+
         // Сохраняем мета для hit-test/resize
         this.graphics._mb = {
             ...(this.graphics._mb || {}),
@@ -46,6 +54,45 @@ export class DrawingObject {
         return this.graphics;
     }
 
+    /**
+     * Hit-test линии по расстоянию до её сегментов.
+     * Вызывается событийной системой PIXI с ГЛОБАЛЬНОЙ точкой.
+     * @param {PIXI.IPointData} globalPoint
+     * @returns {boolean}
+     */
+    _containsPoint(globalPoint) {
+        const g = this.graphics;
+        const pts = this.points;
+        if (!pts || pts.length < 2 || !g.toLocal) return false;
+
+        // Локальные координаты курсора в системе геометрии линии.
+        const local = g.toLocal(globalPoint);
+
+        // Геометрия могла быть перерисована под новый размер (updateSize),
+        // тогда как this.points хранит базовые точки. Масштаб берём из
+        // ЛОКАЛЬНЫХ границ (не зависят от zoom), чтобы совпасть с local.
+        const lb = g.getLocalBounds();
+        const baseW = this.baseWidth || 1;
+        const baseH = this.baseHeight || 1;
+        const scaleX = baseW ? (lb.width / baseW) : 1;
+        const scaleY = baseH ? (lb.height / baseH) : 1;
+
+        // Полоса попадания: половина толщины линии + запас на «любой участок».
+        const lineWidth = this.mode === 'marker' ? this.strokeWidth * 2 : this.strokeWidth;
+        const threshold = Math.max(8, lineWidth / 2 + 6);
+
+        for (let j = 0; j < pts.length - 1; j++) {
+            const ax = pts[j].x * scaleX;
+            const ay = pts[j].y * scaleY;
+            const bx = pts[j + 1].x * scaleX;
+            const by = pts[j + 1].y * scaleY;
+            if (GeometryUtils.distancePointToSegment(local.x, local.y, ax, ay, bx, by) <= threshold) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     /** Обновить визуал без изменения точек */
     setStyle({ mode, strokeColor, strokeWidth } = {}) {
         if (mode) this.mode = mode;

package/src/objects/MindmapObject.js

@@ -1,6 +1,9 @@
 import * as PIXI from 'pixi.js';
 import { MINDMAP_LAYOUT } from '../ui/mindmap/MindmapLayoutConfig.js';
 
+// Толщина обводки в экранных пикселях — совпадает с толщиной веток MindmapConnectionLayer.
+const STROKE_SCREEN_PX = 2;
+
 /**
  * Простой объект mindmap: прямоугольник с синей обводкой и полупрозрачной синей заливкой.
  */
@@ -18,8 +21,10 @@ export class MindmapObject {
             ? Math.max(1, Math.round(props.capsuleBaseHeight))
             : Math.max(1, Math.round(Math.min(this.height, MINDMAP_LAYOUT.height)));
 
+        // Текущий масштаб мирового слоя; обновляется через redrawForZoom при каждом зуме.
+        this._worldScale = 1;
+
         this.graphics = new PIXI.Graphics();
-        this.graphics.roundPixels = true;
         this._draw();
     }
 
@@ -34,6 +39,16 @@ export class MindmapObject {
         this._redrawPreserveTransform();
     }
 
+    /**
+     * Перерисовать пилюлю под текущий масштаб мира.
+     * Вызывается из PixiEngine на каждый зум — пересчитывает толщину обводки и
+     * число сегментов дуги, чтобы фаски оставались гладкими без зазубрин.
+     */
+    redrawForZoom(worldScale) {
+        this._worldScale = Math.max(0.01, worldScale || 1);
+        this._redrawPreserveTransform();
+    }
+
     _redrawPreserveTransform() {
         const g = this.graphics;
         const centerX = g.x;
@@ -54,13 +69,16 @@ export class MindmapObject {
         const fixedBaseRadius = Math.max(0, Math.floor(this.capsuleBaseHeight / 2));
         const capsuleRadius = Math.min(dynamicRadius, fixedBaseRadius);
 
+        // Толщина в мировых единицах: 3 экранных пикселя ÷ масштаб — совпадает с ветками.
+        const strokeW = STROKE_SCREEN_PX / this._worldScale;
+
         g.beginFill(this.fillColor, this.fillAlpha);
         g.drawRoundedRect(0, 0, this.width, this.height, capsuleRadius);
         g.endFill();
 
         try {
             g.lineStyle({
-                width: this.strokeWidth,
+                width: strokeW,
                 color: this.strokeColor,
                 alpha: 1,
                 alignment: 0,
@@ -69,7 +87,7 @@ export class MindmapObject {
                 miterLimit: 2,
             });
         } catch (_) {
-            g.lineStyle(this.strokeWidth, this.strokeColor, 1, 0);
+            g.lineStyle(strokeW, this.strokeColor, 1, 0);
         }
         g.drawRoundedRect(0, 0, this.width, this.height, capsuleRadius);
     }

package/src/objects/NoteObject.js

@@ -83,24 +83,26 @@ export class NoteObject {
         this.textField.mask = this.textMask;
 
         this._redraw(); // Сначала рисуем фон
-        // Прячем текст до загрузки шрифта Caveat, чтобы не показывать системный
         this.textField.visible = false;
         this.container.addChild(this.textField); // Затем добавляем текст поверх
-        this._updateTextPosition();
-        // Если шрифт уже загружен — показываем сразу, иначе подождём загрузки
+        // Если шрифт уже загружен — позиционируем и показываем сразу.
+        // Если нет — НЕ вызываем _updateTextPosition(), чтобы не отравить кэш
+        // PIXI.TextMetrics метриками fallback-шрифта (Arial). Позиционирование
+        // произойдёт в _ensureWebFontApplied после реальной загрузки шрифта.
         if (this._isFontLoaded(fontFamily, this.fontSize)) {
+            this._updateTextPosition();
             this.textField.visible = true;
         } else {
-            this._ensureWebFontApplied(fontFamily, this.fontSize);
-            // Фолбэк на случай отсутствия Font Loading API — короткая задержка
+            // Фолбэк на случай отсутствия Font Loading API — показываем без позиционирования
             try {
                 if (!(typeof document !== 'undefined' && document.fonts && typeof document.fonts.load === 'function')) {
+                    this._updateTextPosition();
                     setTimeout(() => { try { this.textField.visible = true; } catch (_) {} }, 300);
                 }
             } catch (_) {}
         }
 
-        // Гарантируем применение web-font (например, Caveat) при первом создании
+        // Загружаем web-font и применяем корректные метрики
         this._ensureWebFontApplied(fontFamily, this.fontSize);
         
         // Отладочная информация
@@ -290,7 +292,9 @@ export class NoteObject {
     }
 
     /**
-     * Дожидается загрузки веб-шрифта и обновляет PIXI.Text, чтобы применились корректные метрики
+     * Дожидается загрузки веб-шрифта и обновляет PIXI.Text с правильными метриками.
+     * Сбрасывает кэш PIXI.TextMetrics перед позиционированием — это гарантирует,
+     * что PIXI не будет использовать ранее закэшированные метрики fallback-шрифта.
      */
     _ensureWebFontApplied(fontFamily, fontSizePx) {
         try {
@@ -299,9 +303,13 @@ export class NoteObject {
             const size = Math.max(1, Number(fontSizePx) || 32);
             const spec = `normal ${size}px ${primary}`;
             document.fonts.load(spec).then(() => {
-                // Обновляем текст после загрузки шрифта и сразу подгоняем без мерцания
                 try {
                     if (this.textField) this.textField.visible = false;
+                    // Сбрасываем кэш метрик шрифтов PIXI, чтобы Caveat переизмерился
+                    // с реальными метриками, а не с ранее закэшированными от Arial
+                    if (PIXI.TextMetrics?.clearMetrics) {
+                        PIXI.TextMetrics.clearMetrics();
+                    }
                     this.textField.style.fontFamily = fontFamily;
                     this._updateTextPosition();
                     if (this.textField) this.textField.visible = true;

package/src/objects/ObjectFactory.js

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

package/src/objects/ShapeObject.js

@@ -16,7 +16,7 @@ export class ShapeObject {
         this.objectData = objectData;
         this.width = objectData.width || 100;
         this.height = objectData.height || 100;
-        this.fillColor = objectData.color ?? 0x3b82f6;
+        this.fillColor = objectData.color ?? 0xffffff;
         const props = objectData.properties || {};
         this.kind = props.kind || 'square';
         this.cornerRadius = props.cornerRadius || 10;