@sequent-org/moodboard 1.4.59 → 1.4.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.59",
+  "version": "1.4.60",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/PixiEngine.js

@@ -249,13 +249,20 @@ export class PixiEngine {
         if (pixiObject) {
             console.log('🗑️ PixiEngine: удаляем объект из сцены:', objectId);
 
-            // Видео: останавливаем HTMLVideoElement и снимаем listeners до уничтожения
-            // спрайта. Без этого видео продолжает играть и тикать текстуру — утечка.
-            // Хук сужен до 'video', чтобы не задеть destroy() фреймов/коннекторов,
-            // у которых контейнер уничтожается общим путём ниже (иначе двойной destroy).
             const mbMeta = pixiObject._mb;
-            if (mbMeta?.type === 'video' && typeof mbMeta.instance?.destroy === 'function') {
-                try { mbMeta.instance.destroy(); } catch (_) {}
+            const mbInstance = mbMeta?.instance;
+
+            // Видео: останавливаем HTMLVideoElement и снимаем listeners до уничтожения спрайта.
+            // Фрейм и другие объекты с instance.destroy(): снимаем подписки с EventBus ДО того,
+            // как PIXI-контейнер будет уничтожен. FrameObject.destroy() сам уничтожает контейнер,
+            // поэтому после него ручной pixiObject.destroy() не нужен — флаг handledByInstance.
+            let handledByInstance = false;
+            if (typeof mbInstance?.destroy === 'function') {
+                try { mbInstance.destroy(); } catch (_) {}
+                // Типы, чей instance.destroy() полностью берёт на себя PIXI-cleanup
+                if (mbMeta.type === 'frame') {
+                    handledByInstance = true;
+                }
             }
 
             // Удаляем из родительского контейнера
@@ -266,7 +273,12 @@ export class PixiEngine {
             }
             
             // ИСПРАВЛЕНИЕ: Полная очистка для изображений/эмоджи
-            if (pixiObject instanceof PIXI.Sprite) {
+            if (handledByInstance) {
+                // instance.destroy() уже уничтожил PIXI-контейнер и снял все подписки
+                if (this.hoverLift) {
+                    try { this.hoverLift.detach(pixiObject); } catch (_) {}
+                }
+            } else if (pixiObject instanceof PIXI.Sprite) {
                 console.log('🗑️ PixiEngine: очищаем ресурсы изображения/эмоджи');
                 
                 // Очищаем текстуру (data URL, blob URL — освобождаем память)

package/src/objects/FrameObject.js

@@ -138,6 +138,7 @@ export class FrameObject {
 
     /** Скрыть/показать серую рамку (при выделении скрываем, чтобы не накладывалась на синюю) */
     setBorderVisible(visible) {
+        if (this._destroyed || !this.container) return;
         if (this._borderVisible === visible) return;
         this._borderVisible = visible;
         this._redrawPreserveTransform(this.width, this.height, this.fillColor);
@@ -332,6 +333,7 @@ export class FrameObject {
      */
     _onZoomChange(data) {
         if (!data || typeof data.percentage !== 'number') return;
+        if (!this.titleLayer || this.container?.destroyed) return;
         
         const worldScale = data.percentage / 100;
         this.currentWorldScale = worldScale;
@@ -342,7 +344,7 @@ export class FrameObject {
      * Масштаб и позиция слоя заголовка — компенсируем зум, держим постоянный экранный размер
      */
     _updateTitleScale() {
-        if (!this.titleLayer) return;
+        if (!this.titleLayer || this.titleLayer.destroyed || this.container?.destroyed) return;
 
         const compensationScale = 1 / this.currentWorldScale;
 
@@ -590,9 +592,13 @@ export class FrameObject {
     }
 
     /**
-     * Метод для отписки от событий при уничтожении объекта
+     * Метод для отписки от событий при уничтожении объекта.
+     * Идемпотентен: повторный вызов безопасен.
      */
     destroy() {
+        if (this._destroyed) return;
+        this._destroyed = true;
+
         if (this.eventBus) {
             if (this._boundOnZoomChange) {
                 this.eventBus.off(Events.UI.ZoomPercent, this._boundOnZoomChange);
@@ -605,9 +611,16 @@ export class FrameObject {
                 this._boundOnSelectionAdd = this._boundOnSelectionRemove = this._boundOnSelectionClear = null;
             }
         }
-        if (this.container) {
+
+        if (this.container && !this.container.destroyed) {
             this.container.destroy({ children: true });
         }
+
+        this.container = null;
+        this.titleLayer = null;
+        this.titleText = null;
+        this.titleBg = null;
+        this.graphics = null;
     }
 }
 

package/src/services/text/TextBoxMetrics.js

@@ -98,6 +98,92 @@ export function applyTextStyles(el, { fontSizePx, baseFontSizePx, fontFamily, pr
     el.style.textRendering = 'optimizeLegibility';
 }
 
+// Канвас и кеш для измерения видимых границ глифов (см. computeSingleLineCenterDelta).
+// getContext оборачиваем в try/catch: в jsdom (тесты) он не реализован и иначе шумит в stderr.
+let _vCenterCtx = null;
+try {
+    if (typeof document !== 'undefined') {
+        _vCenterCtx = document.createElement('canvas').getContext('2d');
+    }
+} catch (_) {
+    _vCenterCtx = null;
+}
+const _vCenterCache = new Map();
+const _VCENTER_CACHE_LIMIT = 512;
+
+/**
+ * Дельта высоты (px) для вертикального центрирования видимых глифов в однострочном
+ * текстовом боксе.
+ *
+ * Проблема: line-box шрифта резервирует сверху место под прописные и верхние выносные,
+ * которого строчный текст не занимает. Из-за этого буквы визуально прижаты к низу рамки
+ * (сверху пустого места больше, снизу меньше), и на отдельных стадиях зума перекос
+ * усиливается округлением. Возвращаем «верхний резерв − нижний резерв»: добавив это к
+ * высоте бокса, уравниваем зазоры сверху и снизу вокруг реальных букв.
+ *
+ * Измеряем по фактически отрисованному элементу (его computed-стили, baseline и
+ * округление на текущем зуме), поэтому остаточная асимметрия не превышает 1px на любой
+ * стадии. Результат кешируется по сигнатуре «шрифт+размер+контент», чтобы не запускать
+ * измерение на каждый кадр пана/зума.
+ *
+ * @param {HTMLElement} el — элемент .mb-text с уже выставленной height:auto
+ * @returns {number|null} целочисленная дельта (может быть отрицательной), либо null,
+ *   если центрирование неприменимо (пустой/многострочный текст, окружение без layout/canvas)
+ */
+export function computeSingleLineCenterDelta(el) {
+    if (!el || !_vCenterCtx || typeof el.getBoundingClientRect !== 'function' || typeof window === 'undefined') {
+        return null;
+    }
+    const text = el.textContent || '';
+    if (!text.trim() || text.includes('\n')) {
+        return null;
+    }
+    let cs;
+    try {
+        cs = window.getComputedStyle(el);
+    } catch (_) {
+        return null;
+    }
+    const key = `${cs.fontFamily}|${cs.fontWeight}|${cs.fontStyle}|${cs.lineHeight}|${cs.fontSize}|${text}`;
+    const cached = _vCenterCache.get(key);
+    if (cached !== undefined) {
+        return cached;
+    }
+
+    let delta = null;
+    try {
+        const elRect = el.getBoundingClientRect();
+        const lineBoxHeight = el.scrollHeight;
+        // Базовая линия строки: inline-block нулевой высоты, выровненный по baseline,
+        // верхней гранью садится ровно на базовую линию текста.
+        const marker = document.createElement('span');
+        marker.style.cssText = 'display:inline-block;width:0;height:0;vertical-align:baseline;';
+        el.appendChild(marker);
+        const baselineRel = marker.getBoundingClientRect().top - elRect.top;
+        el.removeChild(marker);
+
+        _vCenterCtx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+        const m = _vCenterCtx.measureText(text);
+        const ascent = m.actualBoundingBoxAscent;
+        const descent = m.actualBoundingBoxDescent;
+        if (Number.isFinite(ascent) && Number.isFinite(descent) && lineBoxHeight > 0) {
+            const inkTop = baselineRel - ascent;
+            const inkBottom = baselineRel + descent;
+            const topReserve = inkTop;
+            const bottomReserve = lineBoxHeight - inkBottom;
+            delta = Math.round(topReserve - bottomReserve);
+        }
+    } catch (_) {
+        delta = null;
+    }
+
+    if (_vCenterCache.size >= _VCENTER_CACHE_LIMIT) {
+        _vCenterCache.clear();
+    }
+    _vCenterCache.set(key, delta);
+    return delta;
+}
+
 /**
  * Применяет параметры размера поля для inline-редактора (textarea/backdrop).
  * Отдельно от applyTextStyles, чтобы не дублировать логику в статическом слое.

package/src/tools/manager/ToolManagerLifecycle.js

@@ -1,3 +1,5 @@
+import { Events } from '../../core/events/Events.js';
+
 const PASSIVE_FALSE = { passive: false };
 
 export class ToolManagerLifecycle {
@@ -70,12 +72,49 @@ export class ToolManagerLifecycle {
 
         manager._onWindowWheel = (event) => {
             try {
-                if (event && event.ctrlKey && manager.isMouseOverContainer) {
-                    event.preventDefault();
+                if (!event || !(event.ctrlKey || event.metaKey)) return;
+                // Гасим браузерный зум страницы при Ctrl/Cmd+колесо в пределах мудборда,
+                // независимо от того, над холстом курсор или над HTML-панелью
+                event.preventDefault();
+
+                // _onWheel (на canvas) ловит зум, когда цель события — сам canvas.
+                // HTML-оверлеи (textarea редактора текста, ручки и т.п.) — соседи canvas,
+                // а не его потомки, поэтому их wheel-события не всплывают через canvas.
+                // Ловим их здесь: эмитируем WheelZoom, если событие пришло изнутри
+                // контейнера мудборда, но НЕ с самого canvas (чтобы не дублировать).
+                if (event.target !== manager.container) {
+                    const parent = manager.container && manager.container.parentElement;
+                    if (parent && parent.contains(event.target)) {
+                        const canvasRect = manager.container.getBoundingClientRect();
+                        const x = event.clientX - canvasRect.left;
+                        const y = event.clientY - canvasRect.top;
+                        manager.eventBus.emit(Events.Tool.WheelZoom, { x, y, delta: event.deltaY });
+                    }
                 }
             } catch (_) {}
         };
         window.addEventListener('wheel', manager._onWindowWheel, PASSIVE_FALSE);
+
+        // Перехватываем браузерный зум страницы (Ctrl +/-/0) и масштабируем только холст
+        manager._onWindowZoomKeys = (event) => {
+            try {
+                if (!event || !(event.ctrlKey || event.metaKey) || event.altKey) return;
+                const key = event.key;
+                let zoomEvent = null;
+                if (key === '=' || key === '+') {
+                    zoomEvent = Events.UI.ZoomIn;
+                } else if (key === '-' || key === '_') {
+                    zoomEvent = Events.UI.ZoomOut;
+                } else if (key === '0') {
+                    zoomEvent = Events.UI.ZoomReset;
+                }
+                if (!zoomEvent) return;
+                event.preventDefault();
+                event.stopPropagation();
+                manager.eventBus.emit(zoomEvent);
+            } catch (_) {}
+        };
+        window.addEventListener('keydown', manager._onWindowZoomKeys, true);
     }
 
     static destroy(manager) {
@@ -112,6 +151,13 @@ export class ToolManagerLifecycle {
             manager._onWindowWheel = null;
         }
 
+        if (manager._onWindowZoomKeys) {
+            try {
+                window.removeEventListener('keydown', manager._onWindowZoomKeys, true);
+            } catch (_) {}
+            manager._onWindowZoomKeys = null;
+        }
+
         if (manager.gestures) {
             manager.gestures.destroy();
         }

package/src/tools/object-tools/connector/ConnectorDragController.js

@@ -101,6 +101,34 @@ export class ConnectorDragController {
         return { x: posData.position.x, y: posData.position.y, ...sizeData.size };
     }
 
+    /**
+     * Визуальные габариты объекта с учётом hover-трансформации (scale + подъём).
+     * Подсветка коннектора должна совпадать с тем, что видит пользователь, а не
+     * с логическими bounds из состояния. Привязка коннектора при этом остаётся
+     * на логических bounds — трансформируется только прямоугольник подсветки.
+     */
+    _visualBounds(objectId, bounds) {
+        const hoverLift = this.core?.pixi?.hoverLift;
+        if (!hoverLift) return bounds;
+
+        const pixiReq = { objectId, pixiObject: null };
+        this.eventBus.emit(Events.Tool.GetObjectPixi, pixiReq);
+        const pixiObject = pixiReq.pixiObject;
+        if (!pixiObject) return bounds;
+
+        const t = hoverLift.getVisualTransform(pixiObject);
+        if (!t) return bounds;
+
+        const width  = bounds.width  * t.scaleMulX;
+        const height = bounds.height * t.scaleMulY;
+        return {
+            x: t.centerX - width  / 2,
+            y: t.centerY - height / 2,
+            width,
+            height,
+        };
+    }
+
     /**
      * Возвращает ближайший якорь из TARGET_ANCHORS в пределах ANCHOR_SNAP_CSS от worldPt,
      * иначе null. Приоритет выше грани — вызывать в _resolveEnd первым.
@@ -192,8 +220,9 @@ export class ConnectorDragController {
         if (objectId && objectId !== this._sourceTerminal?.boundId) {
             const bounds = this._objectBounds(objectId);
             if (bounds) {
+                const visual = this._visualBounds(objectId, bounds);
                 this._highlightGraphics.lineStyle({ width: 2, color: 0x2563EB, alpha: 0.85 });
-                this._highlightGraphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
+                this._highlightGraphics.drawRect(visual.x, visual.y, visual.width, visual.height);
                 // Подводим превью к коннектору, если курсор в зоне магнита
                 const snapAnchor = this._snapToAnchor(bounds, worldPt);
                 if (snapAnchor) {

package/src/tools/object-tools/selection/NoteInlineEditorController.js

@@ -58,8 +58,14 @@ export function setupNoteInlineEditor(controller, params) {
     wrapper.style.width = `${editorWidthPx}px`;
     wrapper.style.height = `${editorHeightPx}px`;
 
-    // Для записок: авто-ресайз редактора под содержимое с сохранением центрирования
+    // Для записок: авто-ресайз редактора под содержимое с сохранением центрирования.
+    // backdrop (видимые глифы) обязан повторять выравнивание textarea, иначе каретка,
+    // позиционируемая по center-align textarea, уходит вправо от прижатого влево текста.
     textarea.style.textAlign = 'center';
+    const backdrop = wrapper.querySelector('.moodboard-text-backdrop');
+    if (backdrop) {
+        backdrop.style.textAlign = 'center';
+    }
     const maxEditorWidthPx = Math.max(1, Math.round((noteWidth - (horizontalPadding * 2)) * sCssLocal));
     const maxEditorHeightPx = Math.max(1, Math.round((noteHeight - (horizontalPadding * 2)) * sCssLocal));
     const MIN_NOTE_EDITOR_W = 20;

package/src/tools/object-tools/selection/TextEditorCaretService.js

@@ -84,8 +84,10 @@ export function updateCustomCaret(textarea, caretEl) {
     // Calculate width based on font size to match stroke thickness
     const computed = window.getComputedStyle(textarea);
     const fontSize = parseFloat(computed.fontSize) || 16;
-    // Caveat has thicker strokes, Arial is standard. A good heuristic is ~0.06 to 0.08 of font size, min 2px.
-    const caretWidth = Math.max(2, Math.round(fontSize * 0.07));
+    // Толщина каретки пропорциональна шрифту (≈7% размера). Минимум 1px — при сильном
+    // отдалении каретка остаётся видимой и не нарушает пропорцию. Жёсткий пол 2px убран,
+    // чтобы при уменьшении масштаба каретка масштабировалась вместе с текстом.
+    const caretWidth = Math.max(1, Math.round(fontSize * 0.07));
 
     // Цвет текста в textarea теперь прозрачный (видимый текст рисует backdrop-слой),
     // поэтому цвет каретки берём из backdrop, иначе она станет невидимой.

package/src/tools/object-tools/selection/TextEditorInteractionController.js

@@ -8,6 +8,7 @@ import {
     showStaticTextAfterEditing,
     updateGlobalTextEditorHandlesLayer,
 } from './TextEditorLifecycleRegistry.js';
+import { unregisterEditorListeners } from './InlineEditorListenersRegistry.js';
 
 export function applyTextEditorCaretFromClick({ create, objectId, object, textarea }) {
     try {
@@ -286,6 +287,12 @@ export function bindTextEditorInteractions(controller, {
     const keydownHandler = (e) => {
         const isList = listType && listType !== 'none';
         if (e.key === 'Enter') {
+            // В записке Enter переносит каретку на новую строку (нативное поведение
+            // textarea), а не завершает ввод. Завершение — по клику вне записки (blur)
+            // или по Escape. Высота поля пересчитывается через 'input' → updateNoteEditor.
+            if (isNote) {
+                return;
+            }
             if (isList && !e.shiftKey) {
                 e.preventDefault();
                 const start = textarea.selectionStart;
@@ -359,6 +366,10 @@ export function bindTextEditorInteractions(controller, {
     };
 
     const caretUpdateHandler = () => {
+        // _caretSuppressed выставляется registerRegularTextEditorSync на время зума:
+        // не перерисовываем каретку, пока она должна быть скрыта (избегаем мигания
+        // каретки старого размера в промежуточных кадрах при Ctrl±).
+        if (controller.textEditor && controller.textEditor._caretSuppressed) return;
         if (controller.textEditor && controller.textEditor.caret) {
             updateCustomCaret(textarea, controller.textEditor.caret);
         }
@@ -444,6 +455,9 @@ export function closeTextEditorFromState(controller, commit) {
         }
     }
 
+    if (Array.isArray(controller.textEditor._listeners)) {
+        try { unregisterEditorListeners(controller.eventBus, controller.textEditor._listeners); } catch (_) {}
+    }
     if (typeof removeDomListeners === 'function') {
         try { removeDomListeners(); } catch (_) {}
     }

package/src/tools/object-tools/selection/TextEditorLifecycleRegistry.js

@@ -71,6 +71,13 @@ export function cleanupActiveTextEditor(controller, wrapper) {
             unregisterEditorListeners(controller.eventBus, controller.textEditor._listeners);
         }
     } catch (_) {}
+    // Снимаем таймер дебаунса и флаг подавления каретки (редактор мог закрыться в процессе зума)
+    try {
+        if (typeof controller.textEditor?._caretHideTimer === 'function') {
+            controller.textEditor._caretHideTimer();
+        }
+        if (controller.textEditor) controller.textEditor._caretSuppressed = false;
+    } catch (_) {}
 
     wrapper.remove();
     controller.textEditor = {

package/src/tools/object-tools/selection/TextEditorPositioningService.js

@@ -71,9 +71,10 @@ export function positionRegularTextEditor({
     } catch (_) {}
 
     const leftPx = Math.round(baseLeftPx - padLeft);
-    const topPx = create
-        ? Math.round(baseTopPx - padTop - (lineHeightPx / 2))
-        : Math.round(baseTopPx + staticPadTop - padTop + 1);
+    // Верх текста редактора привязываем к точке клика (= верх рамки ручек и будущего
+    // статического текста). Прежний create-якорь `- lineHeightPx/2` (центрирование каретки
+    // по клику) поднимал текст на пол-строки выше рамки mb-handles-box-obj_.
+    const topPx = Math.round(baseTopPx + staticPadTop - padTop + 1);
 
     wrapper.style.left = `${leftPx}px`;
     wrapper.style.top = `${topPx}px`;