@sequent-org/moodboard 1.4.58 → 1.4.60

package/package.json

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

package/src/core/ApiClient.js

@@ -241,7 +241,30 @@ export class ApiClient {
                 }
                 return cleanedObj;
             }
-            
+
+            if (obj.type === 'video') {
+                const topSrcRaw = typeof obj.src === 'string' ? obj.src : '';
+                const propSrcRaw = typeof obj.properties?.src === 'string' ? obj.properties.src : '';
+                const normalizedSrc = topSrcRaw.trim() || propSrcRaw.trim();
+
+                if (!normalizedSrc) {
+                    throw new Error(`Video object "${obj.id || 'unknown'}" has no src. Save is blocked.`);
+                }
+                if (/^data:/i.test(normalizedSrc) || /^blob:/i.test(normalizedSrc)) {
+                    throw new Error(`Video object "${obj.id || 'unknown'}" contains forbidden data/blob src. Save is blocked.`);
+                }
+
+                const cleanedObj = {
+                    ...obj,
+                    src: normalizedSrc
+                };
+                if (cleanedObj.properties?.src) {
+                    cleanedObj.properties = { ...cleanedObj.properties };
+                    delete cleanedObj.properties.src;
+                }
+                return cleanedObj;
+            }
+
             return obj;
         });
 
@@ -296,7 +319,23 @@ export class ApiClient {
                     }
                     return restoredObj;
                 }
-                
+
+                if (obj.type === 'video') {
+                    const topSrc = typeof obj.src === 'string' ? obj.src.trim() : '';
+                    const propSrc = typeof obj.properties?.src === 'string' ? obj.properties.src.trim() : '';
+                    const normalizedSrc = topSrc || propSrc;
+                    if (!normalizedSrc) return obj;
+                    const restoredObj = {
+                        ...obj,
+                        src: normalizedSrc
+                    };
+                    if (restoredObj.properties?.src) {
+                        restoredObj.properties = { ...restoredObj.properties };
+                        delete restoredObj.properties.src;
+                    }
+                    return restoredObj;
+                }
+
                 return obj;
             })
         );

package/src/core/PixiEngine.js

@@ -248,7 +248,23 @@ export class PixiEngine {
         const pixiObject = this.objects.get(objectId);
         if (pixiObject) {
             console.log('🗑️ PixiEngine: удаляем объект из сцены:', objectId);
-            
+
+            const mbMeta = pixiObject._mb;
+            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;
+                }
+            }
+
             // Удаляем из родительского контейнера
             if (this.worldLayer) {
                 this.worldLayer.removeChild(pixiObject);
@@ -257,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/core/events/Events.js

@@ -63,6 +63,7 @@ export const Events = {
 		PasteAt: 'ui:paste-at',
         PasteImage: 'ui:paste-image',
         PasteImageAt: 'ui:paste-image-at',
+        PasteVideoAt: 'ui:paste-video-at',
 		ZoomIn: 'ui:zoom:in',
 		ZoomOut: 'ui:zoom:out',
 		ZoomReset: 'ui:zoom:reset',

package/src/core/flows/ClipboardFlow.js

@@ -380,6 +380,54 @@ export function setupClipboardFlow(core) {
         }
     });
 
+    core.eventBus.on(Events.UI.PasteVideoAt, ({ x, y, src, mimeType, poster, aiMessageId, skipUpload = true }) => {
+        if (!src) return;
+        const world = core.pixi.worldLayer || core.pixi.app.stage;
+        const s = world?.scale?.x || 1;
+        const worldX = (x - (world?.x || 0)) / s;
+        const worldY = (y - (world?.y || 0)) / s;
+
+        const placeVideo = (natW, natH) => {
+            const ar = (natW > 0 && natH > 0) ? natW / natH : (16 / 9);
+            const w = 300;
+            const h = Math.max(1, Math.round(w / ar));
+            const created = core.createObject(
+                'video',
+                { x: Math.round(worldX - Math.round(w / 2)), y: Math.round(worldY - Math.round(h / 2)) },
+                {
+                    src,
+                    width: w,
+                    height: h,
+                    mimeType: mimeType || 'video/mp4',
+                    poster: poster || null,
+                    loop: true,
+                    muted: true,
+                    ...(aiMessageId ? { aiMessageId } : {})
+                }
+            );
+            // Видео не проходит через SaveManager до подтверждения — раскрываем сразу,
+            // как для AI-картинок и 3D-скринов.
+            if (skipUpload && created?.id) {
+                core._pendingPersistAckVisibilityIds?.delete(created.id);
+                core._setObjectVisibility?.(created.id, true);
+            }
+        };
+
+        // Узнаём натуральные пропорции из метаданных видео (для aspect-ratio).
+        try {
+            const probe = document.createElement('video');
+            probe.preload = 'metadata';
+            probe.muted = true;
+            probe.addEventListener('loadedmetadata', () => {
+                placeVideo(probe.videoWidth || 0, probe.videoHeight || 0);
+            }, { once: true });
+            probe.addEventListener('error', () => placeVideo(0, 0), { once: true });
+            probe.src = src;
+        } catch (_) {
+            placeVideo(0, 0);
+        }
+    });
+
     core.eventBus.on(Events.Tool.DuplicateRequest, (data) => {
         const { originalId, position } = data || {};
         if (!originalId) return;

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/objects/ObjectFactory.js

@@ -4,6 +4,7 @@ import { DrawingObject } from './DrawingObject.js';
 import { TextObject } from './TextObject.js';
 import { EmojiObject } from './EmojiObject.js';
 import { ImageObject } from './ImageObject.js';
+import { VideoObject } from './VideoObject.js';
 import { RevitScreenshotImageObject } from './RevitScreenshotImageObject.js';
 import { Model3dScreenshotImageObject } from './Model3dScreenshotImageObject.js';
 import { CommentObject } from './CommentObject.js';
@@ -25,6 +26,7 @@ export class ObjectFactory {
         ['simple-text', TextObject],
         ['emoji', EmojiObject],
         ['image', ImageObject],
+        ['video', VideoObject],
         ['revit-screenshot-img', RevitScreenshotImageObject],
         ['model3d-screenshot-img', Model3dScreenshotImageObject],
         ['comment', CommentObject],

package/src/objects/VideoObject.js

@@ -0,0 +1,171 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * VideoObject — отображение видео как спрайт с видео-текстурой.
+ *
+ * MVP: спрайт с muted-видео, клик по телу переключает play/pause.
+ * Трансформации (resize/rotate/move/z-order) переиспользуют конвейер ImageObject:
+ * единственный display-object — Sprite с anchor(0.5).
+ */
+export class VideoObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        let src = objectData.src || objectData.properties?.src;
+        // blob: недолговечны — не используем (ERR_FILE_NOT_FOUND после перезагрузки)
+        if (typeof src === 'string' && src.startsWith('blob:')) {
+            src = null;
+        }
+        this.src = src;
+        this.width = Math.max(1, Math.round(objectData.width || objectData.properties?.width || 300));
+        this.height = Math.max(1, Math.round(objectData.height || objectData.properties?.height || 169));
+
+        this.videoEl = null;
+        let texture = PIXI.Texture.WHITE;
+        if (src) {
+            const video = document.createElement('video');
+            video.src = src;
+            video.muted = true;
+            video.loop = objectData.properties?.loop ?? true;
+            video.playsInline = true;
+            video.crossOrigin = 'anonymous';
+            video.preload = 'auto';
+            this.videoEl = video;
+            // autoPlay:false — стартуем на паузе, первый кадр показываем после loadeddata
+            texture = PIXI.Texture.from(video, { resourceOptions: { autoPlay: false } });
+        }
+
+        this.sprite = new PIXI.Sprite(texture);
+        this.sprite.anchor.set(0.5, 0.5);
+        if (!src) {
+            this.sprite.tint = 0xcccccc;
+        }
+
+        this._fitToSize = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            this.sprite._mb = {
+                ...(this.sprite._mb || {}),
+                type: this.objectData?.type || 'video',
+                properties: {
+                    ...((this.sprite._mb || {}).properties || {}),
+                    src,
+                    baseW: texW,
+                    baseH: texH
+                }
+            };
+            this.sprite.scale.set(this.width / texW, this.height / texH);
+        };
+
+        const onError = () => {
+            this.sprite.texture = PIXI.Texture.WHITE;
+            this.sprite.tint = 0xcccccc;
+            this._fitToSize();
+        };
+
+        if (this.videoEl) {
+            // Показать первый кадр на паузе: после loadeddata толкнуть кадр в GPU
+            this.videoEl.addEventListener('loadeddata', () => {
+                try { this.sprite.texture.update(); } catch (_) {}
+                this._fitToSize();
+            }, { once: true });
+            this.videoEl.addEventListener('error', onError, { once: true });
+        }
+
+        if (this.sprite.texture.baseTexture?.valid) {
+            this._fitToSize();
+        } else if (this.sprite.texture.baseTexture) {
+            this.sprite.texture.baseTexture.once('loaded', this._fitToSize);
+        }
+
+        this._setupPlaybackToggle();
+    }
+
+    /**
+     * Клик по телу видео (без перетаскивания) переключает play/pause.
+     * Порог движения отсекает drag, чтобы перемещение не триггерило тоггл.
+     */
+    _setupPlaybackToggle() {
+        this.sprite.eventMode = 'static';
+        let down = null;
+        this._onDown = (e) => { down = { x: e.global.x, y: e.global.y }; };
+        this._onUp = (e) => {
+            if (!down) return;
+            const dx = e.global.x - down.x;
+            const dy = e.global.y - down.y;
+            down = null;
+            if (Math.hypot(dx, dy) < 5) {
+                this.toggle();
+            }
+        };
+        this.sprite.on('pointerdown', this._onDown);
+        this.sprite.on('pointerup', this._onUp);
+        this.sprite.on('pointerupoutside', () => { down = null; });
+    }
+
+    play() {
+        if (!this.videoEl) return;
+        const p = this.videoEl.play();
+        if (p && typeof p.catch === 'function') {
+            p.catch(() => {});
+        }
+    }
+
+    pause() {
+        if (this.videoEl) {
+            this.videoEl.pause();
+        }
+    }
+
+    toggle() {
+        if (!this.videoEl) return;
+        if (this.videoEl.paused) {
+            this.play();
+        } else {
+            this.pause();
+        }
+    }
+
+    getPixi() {
+        return this.sprite;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        this.width = Math.max(1, Math.round(size.width || 1));
+        this.height = Math.max(1, Math.round(size.height || 1));
+        const apply = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            this.sprite.scale.set(this.width / texW, this.height / texH);
+        };
+        if (this.sprite.texture.baseTexture?.valid) {
+            apply();
+        } else {
+            this.sprite.texture.baseTexture?.once('loaded', apply);
+        }
+    }
+
+    /**
+     * Остановить видео и освободить ресурсы (вызывается при удалении объекта).
+     * Без этого HTMLVideoElement продолжает жить и тикать текстуру — утечка.
+     */
+    destroy() {
+        if (this.videoEl) {
+            try {
+                this.videoEl.pause();
+                this.videoEl.removeAttribute('src');
+                this.videoEl.load();
+            } catch (_) {}
+            this.videoEl = null;
+        }
+        try {
+            this.sprite?.off('pointerdown', this._onDown);
+            this.sprite?.off('pointerup', this._onUp);
+        } catch (_) {}
+        try {
+            if (this.sprite?.texture && this.sprite.texture !== PIXI.Texture.WHITE) {
+                this.sprite.texture.destroy(true);
+            }
+        } catch (_) {}
+    }
+}

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, иначе она станет невидимой.