@sequent-org/moodboard 1.4.59 → 1.4.60

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

@@ -1,7 +1,33 @@
+import * as PIXI from 'pixi.js';
 import { Events } from '../../../core/events/Events.js';
 import { registerEditorListeners } from './InlineEditorListenersRegistry.js';
 import { computeTextRightPadPx } from '../../../services/text/TextBoxMetrics.js';
 
+// Измеряет ширину текста textarea по реальным глифам через скрытый span.
+// Возвращает ширину самой длинной строки в CSS-px (white-space: pre — без переносов),
+// либо 0, если измерение невозможно (jsdom без layout).
+function measureTextareaContentWidth(textarea, value) {
+    if (!value) return 0;
+    try {
+        if (typeof document === 'undefined' || !window.getComputedStyle) return 0;
+        const cs = window.getComputedStyle(textarea);
+        const m = document.createElement('span');
+        m.style.cssText = 'position:absolute;visibility:hidden;white-space:pre;top:-9999px;left:-9999px;padding:0;margin:0;';
+        m.style.fontFamily = cs.fontFamily;
+        m.style.fontSize = cs.fontSize;
+        m.style.fontWeight = cs.fontWeight;
+        m.style.fontStyle = cs.fontStyle;
+        m.style.letterSpacing = cs.letterSpacing;
+        m.textContent = value;
+        document.body.appendChild(m);
+        const w = m.getBoundingClientRect().width;
+        m.remove();
+        return Number.isFinite(w) ? w : 0;
+    } catch (_) {
+        return 0;
+    }
+}
+
 export function createRegularTextAutoSize({
     textarea,
     wrapper,
@@ -9,27 +35,75 @@ export function createRegularTextAutoSize({
     minHBound,
     onSizeChange,
 }) {
-    return () => {
+    // Минимальные границы хранятся в мутабельном объекте: при зуме они
+    // пересчитываются (см. createRegularTextEditorUpdater), чтобы рамка
+    // редактора масштабировалась так же, как статический .mb-text.
+    const bounds = { minW: minWBound, minH: minHBound };
+    // Видимый текст рисует backdrop. applyEditorSizing проставляет ему фиксированную
+    // высоту в px на момент открытия; без пересчёта при зуме увеличенные глифы
+    // обрезаются снизу (overflow: hidden). Держим размеры backdrop равными textarea.
+    const backdrop = wrapper.querySelector('.moodboard-text-backdrop');
+
+    const autoSize = () => {
         textarea.style.width = 'auto';
         textarea.style.height = 'auto';
 
         const fontPx = parseFloat(textarea.style.fontSize) || 16;
         const rightPad = computeTextRightPadPx(fontPx);
-        const naturalW = Math.max(1, Math.ceil(textarea.scrollWidth + rightPad));
-        const targetW = Math.round(Math.max(minWBound, naturalW));
+        const value = typeof textarea.value === 'string' ? textarea.value : '';
+        // Ширину контента меряем отдельным скрытым span, а НЕ textarea.scrollWidth:
+        // у textarea при width:auto ширина определяется атрибутом cols (~20 символов),
+        // поэтому scrollWidth не сжимается до реального текста и рамка остаётся широкой.
+        // span с white-space:pre отдаёт ширину самой длинной строки по тем же глифам.
+        const contentW = measureTextareaContentWidth(textarea, value);
+        const naturalW = Math.max(1, Math.ceil(contentW + rightPad));
+        // bounds.minW (ширина плейсхолдера/исходного бокса) применяется только к пустому
+        // полю, чтобы плейсхолдер не обрезался. Как только введён текст — рамка облегает
+        // контент; иначе ширина залипает на ширине плейсхолдера и не совпадает со
+        // статическим .mb-text после выхода из редактора (рамка скачком сужается).
+        const widthFloor = value.length ? 1 : bounds.minW;
+        const targetW = Math.round(Math.max(widthFloor, naturalW));
         textarea.style.width = `${targetW}px`;
         wrapper.style.width = `${targetW}px`;
 
-        textarea.style.height = 'auto';
-        const naturalH = Math.max(1, Math.ceil(textarea.scrollHeight));
-        const targetH = Math.round(Math.max(minHBound, naturalH));
+        // Высоту считаем ДЕТЕРМИНИРОВАННО — число строк × line-height + вертикальные
+        // паддинги — а НЕ через textarea.scrollHeight. При быстром zoom-out Chromium
+        // держит устаревшую (бо́льшую) высоту строки в scrollHeight даже после
+        // форсированного reflow, и последний autoSize за серию колёс фиксировал
+        // завышенную высоту: под текстом оставался пустой зазор, не уходивший до blur.
+        // Текст в поле не переносится (white-space: pre, ширина по контенту), поэтому
+        // число визуальных строк = число переводов строки.
+        let lhRatio = parseFloat(textarea.style.lineHeight);
+        if (!isFinite(lhRatio) || lhRatio <= 0 || lhRatio > 4) lhRatio = 1.2;
+        const cs = (typeof window !== 'undefined' && window.getComputedStyle)
+            ? window.getComputedStyle(textarea)
+            : null;
+        const padV = cs
+            ? ((parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0))
+            : 0;
+        const lineCount = value.length ? (value.split('\n').length) : 1;
+        const naturalH = Math.max(1, Math.ceil(lineCount * fontPx * lhRatio + padV));
+        const targetH = Math.round(Math.max(bounds.minH, naturalH));
         textarea.style.height = `${targetH}px`;
         wrapper.style.height = `${targetH}px`;
 
+        if (backdrop) {
+            backdrop.style.width = `${targetW}px`;
+            backdrop.style.height = `${targetH}px`;
+        }
+
         if (typeof onSizeChange === 'function') {
             onSizeChange({ widthPx: targetW, heightPx: targetH });
         }
     };
+
+    autoSize.getBounds = () => ({ minW: bounds.minW, minH: bounds.minH });
+    autoSize.setBounds = ({ minW, minH }) => {
+        if (typeof minW === 'number' && isFinite(minW)) bounds.minW = minW;
+        if (typeof minH === 'number' && isFinite(minH)) bounds.minH = minH;
+    };
+
+    return autoSize;
 }
 
 export function createNoteEditorUpdater(controller, {
@@ -76,6 +150,15 @@ export function createNoteEditorUpdater(controller, {
             textarea.style.height = `${heightPx}px`;
             wrapper.style.height = `${heightPx}px`;
 
+            // backdrop рисует видимые глифы и имеет фиксированную высоту в px с момента
+            // открытия (applyEditorSizing — одна строка). Без синхронизации с textarea
+            // многострочный ввод (Enter) обрезается снизу (overflow: hidden).
+            const backdrop = wrapper.querySelector('.moodboard-text-backdrop');
+            if (backdrop) {
+                backdrop.style.width = `${widthPx}px`;
+                backdrop.style.height = `${heightPx}px`;
+            }
+
             const left = Math.round(screenNow.x + (sizeNow.width * scaleCss) / 2 - (widthPx / 2));
             const top = Math.round(screenNow.y + (sizeNow.height * scaleCss) / 2 - (heightPx / 2));
             wrapper.style.left = `${left}px`;
@@ -86,6 +169,177 @@ export function createNoteEditorUpdater(controller, {
     };
 }
 
+// Держит inline-редактор обычного текста выровненным по объекту при зуме/пэне.
+// Позиция считается напрямую от мирового трансформа (как в HtmlTextLayer.updateOne),
+// поэтому не зависит от порядка обработчиков событий относительно статического слоя.
+// Шрифт и line-height масштабируются пропорционально текущему зуму от значений на момент
+// открытия редактора (baseFontPxAtOpen / sCssAtOpen) — сохраняется вертикальное выравнивание.
+export function createRegularTextEditorUpdater(controller, {
+    objectId,
+    position,
+    view,
+    textarea,
+    wrapper,
+    autoSize,
+    baseFontPxAtOpen,
+    sCssAtOpen,
+}) {
+    const baseWorldFont = (baseFontPxAtOpen && sCssAtOpen) ? (baseFontPxAtOpen / sCssAtOpen) : null;
+    // Базовые минимальные границы рамки на момент открытия редактора (в CSS-px при sCssAtOpen).
+    // Захватываются лениво при первом обновлении и масштабируются под текущий зум.
+    let baseBounds = null;
+
+    return () => {
+        try {
+            const worldLayer = controller.textEditor.world || (controller.app?.stage);
+            if (!worldLayer || !view || !view.parentElement) {
+                return;
+            }
+            const res = (controller.app?.renderer?.resolution) || 1;
+            const scaleX = worldLayer.scale?.x || 1;
+            const sCssNow = scaleX / res;
+
+            const backdrop = wrapper.querySelector('.moodboard-text-backdrop');
+            const getCs = (typeof window !== 'undefined' && window.getComputedStyle)
+                ? window.getComputedStyle.bind(window)
+                : null;
+
+            // Актуальная мировая позиция (top-left); fallback на исходную для нового текста.
+            const posReq = { objectId, position: null };
+            controller.eventBus.emit(Events.Tool.GetObjectPosition, posReq);
+            const pos = posReq.position || position;
+
+            const containerRect = view.parentElement.getBoundingClientRect();
+            const viewRect = view.getBoundingClientRect();
+            const offsetLeft = viewRect.left - containerRect.left;
+            const offsetTop = viewRect.top - containerRect.top;
+            const tl = worldLayer.toGlobal(new PIXI.Point(pos.x, pos.y));
+            const baseLeft = Math.round(offsetLeft + tl.x);
+            const baseTop = Math.round(offsetTop + tl.y);
+
+            // Перемасштабируем только font-size. line-height задан безразмерным
+            // коэффициентом (applyTextStyles, например "1.34") и масштабируется браузером
+            // вместе с font-size без округления — точно как в статическом HtmlTextLayer.
+            // Прежний код читал этот коэффициент как пиксели (parseFloat → 1.34) и
+            // схлопывал строку до ~1px, из-за чего текст «уезжал» вверх при зуме.
+            const prevFont = parseFloat(textarea.style.fontSize) || baseFontPxAtOpen || 16;
+            const fontSizePx = baseWorldFont
+                ? Math.max(1, Math.round(baseWorldFont * sCssNow))
+                : prevFont;
+            textarea.style.fontSize = `${fontSizePx}px`;
+            if (backdrop) {
+                backdrop.style.fontSize = `${fontSizePx}px`;
+            }
+
+            // Пересчитываем min-height по текущему шрифту. applyEditorSizing проставляет
+            // фиксированный min-height в px на момент открытия; без пересчёта при отдалении
+            // scrollHeight не может стать меньше него, и высота рамки не уменьшается вслед
+            // за текстом (рамка остаётся высокой при мелком шрифте).
+            let lhRatio = parseFloat(textarea.style.lineHeight);
+            if (!isFinite(lhRatio) || lhRatio <= 0 || lhRatio > 4) lhRatio = 1.2;
+            const lineMinPx = Math.max(1, Math.round(fontSizePx * lhRatio));
+            textarea.style.minHeight = `${lineMinPx}px`;
+            if (backdrop) {
+                backdrop.style.minHeight = `${lineMinPx}px`;
+            }
+
+            // Смещение обёртки на паддинги textarea + паддинг статического .mb-text (для list/markdown).
+            const taCs = getCs ? getCs(textarea) : null;
+            const padTop = taCs ? (parseFloat(taCs.paddingTop) || 0) : 0;
+            const padLeft = taCs ? (parseFloat(taCs.paddingLeft) || 0) : 0;
+            let staticPadTop = 0;
+            try {
+                const layer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+                const el = (layer && objectId) ? layer.idToEl.get(objectId) : null;
+                if (el && getCs) {
+                    const sp = parseFloat(getCs(el).paddingTop);
+                    if (isFinite(sp) && sp > 0) staticPadTop = sp;
+                }
+            } catch (_) {}
+
+            const leftPx = Math.round(baseLeft - padLeft);
+            const topPx = Math.round(baseTop + staticPadTop - padTop + 1);
+            wrapper.style.left = `${leftPx}px`;
+            wrapper.style.top = `${topPx}px`;
+            controller.textEditor._cssLeftPx = leftPx;
+            controller.textEditor._cssTopPx = topPx;
+
+            if (typeof autoSize === 'function') {
+                // Масштабируем минимальные границы рамки пропорционально зуму, чтобы
+                // при отдалении поле уменьшалось вместе с текстом (как статический слой),
+                // а не оставалось зафиксированным в px на момент открытия.
+                if (sCssAtOpen
+                    && typeof autoSize.getBounds === 'function'
+                    && typeof autoSize.setBounds === 'function') {
+                    if (!baseBounds) baseBounds = autoSize.getBounds();
+                    const zoomRatio = sCssNow / sCssAtOpen;
+                    if (isFinite(zoomRatio) && zoomRatio > 0) {
+                        autoSize.setBounds({
+                            minW: Math.max(1, Math.round(baseBounds.minW * zoomRatio)),
+                            minH: Math.max(1, Math.round(baseBounds.minH * zoomRatio)),
+                        });
+                    }
+                }
+                autoSize();
+            }
+        } catch (_) {}
+    };
+}
+
+export function registerRegularTextEditorSync(controller, { updateEditor, updateCaret }) {
+    // Таймер дебаунса: скрываем каретку на время зума, показываем через 150 мс тишины.
+    // Во время серии событий ZoomPercent/Viewport.Changed каретка остаётся скрытой,
+    // что убирает артефакт «каретка осталась старого размера» при промежуточных кадрах.
+    let caretHideTimer = null;
+    const CARET_SHOW_DELAY_MS = 150;
+
+    const onZoom = () => {
+        updateEditor();
+        if (typeof updateCaret === 'function') {
+            if (caretHideTimer !== null) {
+                clearTimeout(caretHideTimer);
+                caretHideTimer = null;
+            }
+            // Скрываем каретку и блокируем caretUpdateHandler через флаг,
+            // чтобы selectionchange не перерисовал её в промежуточных кадрах.
+            try {
+                if (controller.textEditor) controller.textEditor._caretSuppressed = true;
+                const caret = controller.textEditor && controller.textEditor.caret;
+                if (caret) caret.style.display = 'none';
+            } catch (_) {}
+            // Показываем и пересчитываем после завершения серии зума
+            caretHideTimer = setTimeout(() => {
+                caretHideTimer = null;
+                try {
+                    if (controller.textEditor) controller.textEditor._caretSuppressed = false;
+                    updateCaret();
+                } catch (_) {}
+            }, CARET_SHOW_DELAY_MS);
+        }
+    };
+
+    const onViewportChange = () => updateEditor();
+
+    // Только зум/пэн/вьюпорт: ResizeUpdate сюда подключать нельзя — autoSize внутри
+    // updateEditor эмитит ResizeUpdate, что создало бы рекурсивную петлю.
+    const listeners = [
+        [Events.UI.ZoomPercent, onZoom],
+        [Events.Tool.PanUpdate, onViewportChange],
+        [Events.Viewport.Changed, onViewportChange],
+    ];
+
+    registerEditorListeners(controller.eventBus, listeners);
+    controller.textEditor._listeners = listeners;
+    // Сохраняем ссылку на таймер для очистки при закрытии редактора
+    controller.textEditor._caretHideTimer = () => {
+        if (caretHideTimer !== null) {
+            clearTimeout(caretHideTimer);
+            caretHideTimer = null;
+        }
+    };
+    return listeners;
+}
+
 export function registerNoteEditorSync(controller, { objectId, updateNoteEditor }) {
     const onZoom = () => updateNoteEditor();
     const onPan = () => updateNoteEditor();

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

@@ -24,7 +24,12 @@ import {
     measureTextEditorPlaceholderWidth,
 } from './TextEditorDomFactory.js';
 import { setupNoteInlineEditor } from './NoteInlineEditorController.js';
-import { createRegularTextAutoSize } from './TextEditorSyncService.js';
+import {
+    createRegularTextAutoSize,
+    createRegularTextEditorUpdater,
+    registerRegularTextEditorSync,
+} from './TextEditorSyncService.js';
+import { updateCustomCaret } from './TextEditorCaretService.js';
 import { TEXT_BOX_BOTTOM_PAD_PX } from '../../../services/text/TextBoxMetrics.js';
 import { buildHtmlWithRanges } from '../../../ui/HtmlTextLayer.js';
 
@@ -441,10 +446,14 @@ export function openTextEditor(object, create = false) {
     // Синхронизируем стартовый размер шрифта textarea с текущим зумом (как HtmlTextLayer)
     // Используем ранее вычисленный effectiveFontPx (до вставки в DOM), если он есть в замыкании
     textarea.style.fontSize = `${effectiveFontPx}px`;
-    const initialWpx = regularEditorVisualBox?.width
-        || (initialSize ? Math.max(1, (initialSize.width || 0) * s / viewRes) : null);
-    const initialHpx = regularEditorVisualBox?.height
-        || (initialSize ? Math.max(1, (initialSize.height || 0) * s / viewRes) : null);
+    // Высоту/ширину поля при входе в редактор берём как максимум из видимого DOM-бокса
+    // и размера в состоянии объекта. DOM-бокс .mb-text к этому моменту может быть схлопнут
+    // до высоты контента (auto), тогда как в состоянии хранится вручную заданная высота рамки —
+    // её и нужно сохранить, иначе поле ввода схлопывается до одной строки.
+    const stateWpx = initialSize ? Math.max(1, (initialSize.width || 0) * s / viewRes) : 0;
+    const stateHpx = initialSize ? Math.max(1, (initialSize.height || 0) * s / viewRes) : 0;
+    const initialWpx = Math.max(regularEditorVisualBox?.width || 0, stateWpx) || null;
+    const initialHpx = Math.max(regularEditorVisualBox?.height || 0, stateHpx) || null;
 
     // Определяем минимальные границы для всех типов объектов
     let minWBound = initialWpx || 120; // базово близко к призраку
@@ -477,6 +486,12 @@ export function openTextEditor(object, create = false) {
             wrapper.style.width = `${initialWpx}px`;
         }
         if (initialHpx) {
+            // Стартовую высоту ставим, чтобы не было вспышки при открытии, но minHBound НЕ
+            // поднимаем до obj.height: высота поля авто-подгоняется под контент (как статический
+            // .mb-text). Прежнее `minHBound = max(minHBound, initialHpx)` фиксировало рамку на
+            // высоте obj.height; при завышенном obj.height поле оставалось высоким (пустой зазор
+            // под текстом), особенно при зуме — baseBounds кэшировал завышенный minH и масштабировал
+            // его. Обычный текст не имеет ручной высоты, поэтому фиксировать её не нужно.
             textarea.style.height = `${initialHpx}px`;
             wrapper.style.height = `${initialHpx}px`;
         }
@@ -576,6 +591,30 @@ export function openTextEditor(object, create = false) {
         finalize,
         listType: properties.listType || 'none',
     });
+
+    // Обычный текст: держим редактор выровненным по объекту и масштабируем шрифт при зуме/пэне.
+    // Вертикальный якорь редактора унифицирован (см. positionRegularTextEditor), поэтому sync
+    // безопасен и для сессии создания — без него только что созданный текст не масштабировался при зуме.
+    // Записки используют собственный registerNoteEditorSync, фигуре синхронизация не нужна.
+    if (!isNote && !isShape && objectId) {
+        const updateRegularTextEditor = createRegularTextEditorUpdater(this, {
+            objectId,
+            position,
+            view,
+            textarea,
+            wrapper,
+            autoSize,
+            baseFontPxAtOpen: effectiveFontPx,
+            sCssAtOpen: s / viewRes,
+        });
+        const updateCaretAfterZoom = () => {
+            updateCustomCaret(textarea, this.textEditor && this.textEditor.caret);
+        };
+        registerRegularTextEditorSync(this, {
+            updateEditor: updateRegularTextEditor,
+            updateCaret: updateCaretAfterZoom,
+        });
+    }
 }
 
 export function closeTextEditor(commit) {

package/src/ui/HtmlTextLayer.js

@@ -9,6 +9,7 @@ import {
     resolveLineHeightRatio,
     computeTextRightPadPx,
     resolveStaticTextPadding,
+    computeSingleLineCenterDelta,
     TEXT_BOX_BOTTOM_PAD_PX,
 } from '../services/text/TextBoxMetrics.js';
 
@@ -761,16 +762,26 @@ export class HtmlTextLayer {
             }
         } catch (_) {}
 
-        // Гарантируем, что высота соответствует контенту (особенно после смены font-size)
+        // Высота текстового бокса всегда равна высоте контента: рамка облегает строки,
+        // под текстом нет пустого зазора. Высоту объекта (logHeight = round(h*s)) здесь
+        // НЕ учитываем — иначе единожды завышенный obj.height (дефолт при создании или
+        // остаток от прежнего многострочного текста) залипал, и появлялся зазор после зума.
         try {
             el.style.height = 'auto';
-            // Добавим небольшой нижний отступ для хвостов букв, чтобы не отсекались (например, у «з»)
-            const hCss = Math.max(1, Math.round(el.scrollHeight + TEXT_BOX_BOTTOM_PAD_PX));
+            // Для обычного однострочного текста центрируем видимые буквы по вертикали:
+            // line-box резервирует сверху место под прописные/выносные, которого строчный
+            // текст не занимает, поэтому буквы кажутся прижатыми к низу рамки. centerDelta
+            // уравнивает верхний и нижний зазоры вокруг глифов. Для markdown/списков и в
+            // окружении без layout (jsdom) дельта = null → сохраняем прежний нижний отступ
+            // TEXT_BOX_BOTTOM_PAD_PX под хвосты букв (например, «з», «у»).
+            const centerDelta = (!isMarkdown && !useList)
+                ? computeSingleLineCenterDelta(el)
+                : null;
+            const extra = (centerDelta === null) ? TEXT_BOX_BOTTOM_PAD_PX : centerDelta;
+            const hCss = Math.max(1, Math.round(el.scrollHeight + extra));
             el.style.height = `${hCss}px`;
-            // Обновим высоту для лога, если её ещё не устанавливали
-            if (!logHeight) {
-                logHeight = hCss;
-            }
+            // Обновим высоту для лога
+            logHeight = hCss;
         } catch (_) {}
         
         console.log(`🔍 HtmlTextLayer: позиция обновлена для ${objectId}:`, {
@@ -910,19 +921,26 @@ export class HtmlTextLayer {
             // Измеряем фактическую высоту HTML-текста
             el.style.height = 'auto';
             const measured = Math.max(1, Math.round(el.scrollHeight));
-            el.style.height = `${measured}px`;
-            // Пересчитываем мировую высоту и отправляем обновление размера через события ResizeUpdate
+            
             const world = this.core.pixi.worldLayer || this.core.pixi.app.stage;
             const s = world?.scale?.x || 1;
             const res = (this.core?.pixi?.app?.renderer?.resolution) || 1;
-            const worldH = (measured * res) / s;
-            // Узнаём текущую ширину в мире
+            const worldH_auto = (measured * res) / s;
+            
+            const currentWorldH = obj?.height || 0;
+            // Высота объекта всегда подгоняется под контент (и вверх, и вниз): без сжатия
+            // единожды завышенная высота залипала и давала пустой зазор под текстом.
+            const finalWorldH = worldH_auto;
+            const finalCssH = Math.round((finalWorldH * s) / res);
+            
+            el.style.height = `${finalCssH}px`;
+            
             const worldW = obj?.width || 0;
             const position = obj?.position || null;
-            if (worldW > 0 && position) {
+            if (worldW > 0 && position && finalWorldH !== currentWorldH) {
                 this.core.eventBus.emit(Events.Tool.ResizeUpdate, {
                     object: objectId,
-                    size: { width: worldW, height: worldH },
+                    size: { width: worldW, height: finalWorldH },
                     position
                 });
             }

package/src/ui/animation/HoverLiftController.js

@@ -172,6 +172,26 @@ export class HoverLiftController {
         this._entries.delete(pixiObject);
     }
 
+    /**
+     * Текущая визуальная hover-трансформация объекта относительно его базы.
+     * Нужна, чтобы внешние оверлеи (подсветка коннектора) совпадали с
+     * масштабированным/приподнятым на hover объектом.
+     * @param {import('pixi.js').DisplayObject} pixiObject
+     * @returns {{ scaleMulX: number, scaleMulY: number, centerX: number, centerY: number } | null}
+     */
+    getVisualTransform(pixiObject) {
+        const entry = this._entries.get(pixiObject);
+        if (!entry) return null;
+        const baseScaleX = entry.baseScaleX || 1;
+        const baseScaleY = entry.baseScaleY || 1;
+        return {
+            scaleMulX: (pixiObject.scale?.x ?? baseScaleX) / baseScaleX,
+            scaleMulY: (pixiObject.scale?.y ?? baseScaleY) / baseScaleY,
+            centerX: pixiObject.x,
+            centerY: pixiObject.y,
+        };
+    }
+
     /** Обновить базовые значения после внешнего resize/move */
     syncBase(pixiObject) {
         const entry = this._entries.get(pixiObject);

package/src/ui/handles/HandlesDomRenderer.js

@@ -9,6 +9,15 @@ import { MINDMAP_LAYOUT } from '../mindmap/MindmapLayoutConfig.js';
 import { MindmapStatePatchCommand } from '../../core/commands/MindmapStatePatchCommand.js';
 
 const HANDLES_ACCENT_COLOR = '#80D8FF';
+const VERTICAL_RESIZE_CURSOR_COLOR = '#6B7280';
+const VERTICAL_RESIZE_CURSOR = 'url("/icons/move-vertical.svg") 12 12, ns-resize';
+const VERTICAL_RESIZE_CURSOR_TYPES = new Set(['frame', 'text', 'simple-text', 'image']);
+const VERTICAL_RESIZE_CORNER_CURSOR_ANGLES = {
+    nw: -45,
+    se: -45,
+    ne: 45,
+    sw: 45,
+};
 const REVIT_SHOW_IN_MODEL_ICON_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg>';
 const MODEL3D_SHOW_IN_VIEWER_ICON_SVG = REVIT_SHOW_IN_MODEL_ICON_SVG;
 const MINDMAP_CHILD_WIDTH_FACTOR = 0.9;
@@ -39,6 +48,19 @@ function resolveBottomSiblingParentId(sourceObjectId, sourceMeta) {
     return sourceMeta?.parentId || null;
 }
 
+function shouldUseVerticalResizeCursor(mbType, handleName) {
+    return VERTICAL_RESIZE_CURSOR_TYPES.has(mbType)
+        && (handleName === 'handle' || handleName === 'top' || handleName === 'bottom');
+}
+
+function createVerticalResizeCornerCursor(dir, rotation) {
+    const baseAngle = VERTICAL_RESIZE_CORNER_CURSOR_ANGLES[dir] || 0;
+    const totalAngle = baseAngle + (rotation || 0);
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g transform="rotate(${totalAngle} 12 12)"><path d="M12 2v20" stroke="${VERTICAL_RESIZE_CURSOR_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m8 18 4 4 4-4" stroke="${VERTICAL_RESIZE_CURSOR_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m8 6 4-4 4 4" stroke="${VERTICAL_RESIZE_CURSOR_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`;
+    const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+    return `url("${dataUrl}") 12 12, nwse-resize`;
+}
+
 function relayoutMindmapBranchLevel({ core, eventBus, parentId, side }) {
     if (!core || !eventBus || !parentId || (side !== 'left' && side !== 'right')) return;
     const objects = core?.state?.state?.objects || [];
@@ -1166,10 +1188,11 @@ export class HandlesDomRenderer {
         let sourceMindmapProperties = null;
         const occupiedOutgoingSides = new Set();
         const hiddenIncomingSide = { value: null };
+        let mbType = null;
         if (id !== '__group__') {
             const req = { objectId: id, pixiObject: null };
             this.host.eventBus.emit('tool:get:object:pixi', req);
-            const mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
+            mbType = req.pixiObject && req.pixiObject._mb && req.pixiObject._mb.type;
             isFileTarget = mbType === 'file';
             isFrameTarget = mbType === 'frame';
             isMindmapTarget = mbType === 'mindmap';
@@ -1244,7 +1267,9 @@ export class HandlesDomRenderer {
         }
 
         const mkCorner = (dir, x, y) => {
-            const cursor = createRotatedResizeCursor(dir, rotation);
+            const cursor = shouldUseVerticalResizeCursor(mbType, 'handle')
+                ? createVerticalResizeCornerCursor(dir, rotation)
+                : createRotatedResizeCursor(dir, rotation);
             const h = document.createElement('div');
             h.dataset.dir = dir;
             h.dataset.id = id;
@@ -1288,7 +1313,9 @@ export class HandlesDomRenderer {
 
         const edgeSize = 10;
         const makeEdge = (name, style, cursorHandleType) => {
-            const cursor = createRotatedResizeCursor(cursorHandleType, rotation);
+            const cursor = shouldUseVerticalResizeCursor(mbType, name)
+                ? VERTICAL_RESIZE_CURSOR
+                : createRotatedResizeCursor(cursorHandleType, rotation);
             const e = document.createElement('div');
             e.dataset.edge = name;
             e.dataset.id = id;