@sequent-org/moodboard 1.4.63 → 1.4.65

package/package.json

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

package/src/services/text/TextBoxMetrics.js

@@ -111,6 +111,16 @@ try {
 const _vCenterCache = new Map();
 const _VCENTER_CACHE_LIMIT = 512;
 
+/**
+ * Сбрасывает кеш дельт вертикального центрирования. Нужен после подгрузки веб-шрифтов:
+ * до swap measureText считает по fallback-шрифту (например Arial вместо Caveat) и даёт
+ * другую дельту. Ключ кеша не включает состояние загрузки шрифта, поэтому без сброса
+ * fallback-значение «залипает» и одиночная строка остаётся смещённой вниз.
+ */
+export function clearSingleLineCenterDeltaCache() {
+    _vCenterCache.clear();
+}
+
 /**
  * Дельта высоты (px) для вертикального центрирования видимых глифов в однострочном
  * текстовом боксе.

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

@@ -229,7 +229,10 @@ export function bindTextEditorInteractions(controller, {
 
             const value = (textarea.value || '').trim();
             if (isNewCreation && value.length === 0) {
-                finalize(false);
+                // Записка и фигура остаются на доске пустыми: finalize(true) при пустом
+                // значении не коммитит контент, но и не запускает удаление нового объекта
+                // (см. shouldDeleteEmptyNewCreation). Для текста — прежнее удаление.
+                finalize(isNote || isShape);
                 return;
             }
             finalize(true);
@@ -457,7 +460,10 @@ export function closeTextEditorFromState(controller, commit) {
     const properties = controller.textEditor.properties;
     const isNewCreation = controller.textEditor.isNewCreation;
     const initialContent = controller.textEditor.initialContent ?? '';
-    const shouldDeleteEmptyNewCreation = !commitValue && !!isNewCreation && !!objectId;
+    // Записку и фигуру не удаляем при закрытии редактора пустыми (клик вне объекта):
+    // элемент должен оставаться на доске даже без текста. Текст — прежнее поведение.
+    const shouldDeleteEmptyNewCreation = !commitValue && !!isNewCreation && !!objectId
+        && objectType !== 'note' && objectType !== 'shape';
 
     if (objectId) {
         if (typeof window !== 'undefined' && window.moodboardHtmlTextLayer) {

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

@@ -4,6 +4,8 @@ import { registerEditorListeners } from './InlineEditorListenersRegistry.js';
 import {
     computeTextRightPadPx,
     resolveLineHeightRatio,
+    computeSingleLineCenterDelta,
+    TEXT_BOX_BOTTOM_PAD_PX,
 } from '../../../services/text/TextBoxMetrics.js';
 
 // Максимальное число визуальных строк в записке. По достижении лимита ввод
@@ -186,14 +188,36 @@ export function createRegularTextAutoSize({
         // число визуальных строк = число переводов строки.
         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));
+        // Вертикальная геометрия должна совпадать со статическим .mb-text
+        // (HtmlTextLayer.updateOne): высота = line-box + extra, где extra для одиночной
+        // строки — дельта центрирования глифов, иначе нижний запас TEXT_BOX_BOTTOM_PAD_PX.
+        // Паддинги textarea/backdrop обнуляем: статический слой кладёт весь запас снизу
+        // (padding 0), поэтому прежний 1px сверху уводил текст в редакторе ниже, чем после
+        // блюра, и менял высоту рамки. Backdrop делит кеш дельты со статикой (один ключ),
+        // поэтому высота поля совпадает со статикой пиксель в пиксель.
+        textarea.style.paddingTop = '0px';
+        textarea.style.paddingBottom = '0px';
+        if (backdrop) {
+            backdrop.style.paddingTop = '0px';
+            backdrop.style.paddingBottom = '0px';
+        }
+        let naturalH;
+        if (lineCount === 1 && backdrop) {
+            // Одиночную строку считаем ровно как статический .mb-text
+            // (HtmlTextLayer.updateOne): height auto → scrollHeight → + центр-дельта.
+            // Детерминированная формула round(fontPx*lhRatio) расходилась со scrollHeight
+            // на 1px при дробном devicePixelRatio (масштаб Windows 110/125/150%), из-за чего
+            // высота рамки ввода отличалась от статики. Общий scrollHeight + общий кеш дельты
+            // гарантируют совпадение при любом dpr.
+            backdrop.style.height = 'auto';
+            const sh = backdrop.scrollHeight;
+            const d = computeSingleLineCenterDelta(backdrop);
+            const extra = (d === null) ? TEXT_BOX_BOTTOM_PAD_PX : d;
+            naturalH = Math.max(1, Math.round(sh + extra));
+        } else {
+            naturalH = Math.max(1, lineCount * Math.round(fontPx * lhRatio) + TEXT_BOX_BOTTOM_PAD_PX);
+        }
         const targetH = Math.round(Math.max(bounds.minH, naturalH));
         textarea.style.height = `${targetH}px`;
         wrapper.style.height = `${targetH}px`;
@@ -366,7 +390,11 @@ export function createRegularTextEditorUpdater(controller, {
             } catch (_) {}
 
             const leftPx = Math.round(baseLeft - padLeft);
-            const topPx = Math.round(baseTop + staticPadTop - padTop + 1);
+            // Текст в редакторе выровнен по верху (padding 0, как статический .mb-text),
+            // поэтому верх обёртки = верх объекта + статический верхний отступ. Прежний
+            // «+1» компенсировал убранный теперь 1px верхнего паддинга textarea и опускал
+            // строку ниже статики.
+            const topPx = Math.round(baseTop + staticPadTop - padTop);
             wrapper.style.left = `${leftPx}px`;
             wrapper.style.top = `${topPx}px`;
             controller.textEditor._cssLeftPx = leftPx;

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

@@ -510,8 +510,12 @@ export function openTextEditor(object, create = false) {
         ? ({ widthPx, heightPx }) => {
             try {
                 const scaleX = (worldLayerRef?.scale?.x) || 1;
-                const widthWorld = Math.max(1, Math.ceil(widthPx * viewRes / scaleX));
-                const heightWorld = Math.max(1, Math.round(heightPx * viewRes / scaleX));
+                // Мировой размер resolution-независим: CSS = world × scale (как toGlobal),
+                // без множителя renderer.resolution. Прежний × viewRes раздувал obj.height
+                // при браузерном зуме/HiDPI (res ≠ 1), и рамка выделения во время
+                // редактирования была в res раз выше текста.
+                const widthWorld = Math.max(1, Math.ceil(widthPx / scaleX));
+                const heightWorld = Math.max(1, Math.round(heightPx / scaleX));
                 const posReq = { objectId, position: null };
                 this.eventBus.emit(Events.Tool.GetObjectPosition, posReq);
                 this.eventBus.emit(Events.Tool.ResizeUpdate, {

package/src/ui/HtmlTextLayer.js

@@ -10,6 +10,7 @@ import {
     computeTextRightPadPx,
     resolveStaticTextPadding,
     computeSingleLineCenterDelta,
+    clearSingleLineCenterDeltaCache,
     TEXT_BOX_BOTTOM_PAD_PX,
 } from '../services/text/TextBoxMetrics.js';
 
@@ -364,12 +365,23 @@ export class HtmlTextLayer {
         // Отслеживаем выделение, чтобы не показывать hover у выделенных объектов
         this._onSelectionAdd = (data) => {
             const id = data?.object ?? data?.objectId ?? data?.id ?? data;
-            if (id) {
-                this._selectedIds.add(String(id));
-                if (this._hoveredTextId === String(id)) {
-                    this._hoveredTextId = null;
-                    this._animTextHoverOut(String(id));
-                }
+            if (!id) return;
+            const sid = String(id);
+            this._selectedIds.add(sid);
+            if (this._hoveredTextId === sid) this._hoveredTextId = null;
+            // Рамку выделения слой ручек строит по getBoundingClientRect .mb-text,
+            // который включает CSS-transform hover-lift (translateY/scale). Если выделение
+            // происходит на приподнятом hover-тексте, рамка снимается со смещённого/
+            // увеличенного бокса, а после анимированного отката hover текст возвращается —
+            // рамка же остаётся смещённой (её никто не пересчитывает). Поэтому сбрасываем
+            // hover МГНОВЕННО (без твина) и форсируем пересчёт рамки по осевшему боксу.
+            const state = this._hoverStates.get(sid);
+            if (state && (Math.abs(state.ty) > 0.001 || Math.abs(state.sc - 1) > 0.001)) {
+                gsap.killTweensOf(state);
+                state.ty = 0;
+                state.sc = 1;
+                this._applyHoverTransform(sid);
+                this.eventBus.emit(Events.Object.TransformUpdated, { objectId: id });
             }
         };
         this._onSelectionRemove = (data) => {
@@ -386,9 +398,22 @@ export class HtmlTextLayer {
         this.updateAll();
 
         // После загрузки веб-шрифтов переизмеряем все боксы: до swap шрифта scrollHeight
-        // фиксируется по fallback-метрикам, после — по реальным глифам.
-        if (typeof document !== 'undefined' && document.fonts && document.fonts.ready) {
-            document.fonts.ready.then(() => this.updateAll()).catch(() => {});
+        // и метрики глифов фиксируются по fallback-шрифту, после — по реальным глифам.
+        // Кеш вертикального центрирования сбрасываем ПЕРЕД updateAll, иначе одиночная
+        // строка остаётся смещённой вниз: дельта, посчитанная на fallback-шрифте,
+        // залипает (ключ кеша не зависит от состояния загрузки шрифта).
+        if (typeof document !== 'undefined' && document.fonts) {
+            const refitAfterFonts = () => {
+                clearSingleLineCenterDeltaCache();
+                this.updateAll();
+            };
+            if (document.fonts.ready) {
+                document.fonts.ready.then(refitAfterFonts).catch(() => {});
+            }
+            if (typeof document.fonts.addEventListener === 'function') {
+                this._onFontsLoadingDone = refitAfterFonts;
+                document.fonts.addEventListener('loadingdone', this._onFontsLoadingDone);
+            }
         }
 
         // Хелпер: при каждом обновлении ручек — обновляем HTML блок
@@ -399,6 +424,13 @@ export class HtmlTextLayer {
     }
 
     destroy() {
+        if (this._onFontsLoadingDone
+            && typeof document !== 'undefined'
+            && document.fonts
+            && typeof document.fonts.removeEventListener === 'function') {
+            document.fonts.removeEventListener('loadingdone', this._onFontsLoadingDone);
+            this._onFontsLoadingDone = null;
+        }
         if (this.layer) this.layer.remove();
         this.layer = null;
         this.idToEl.clear();
@@ -918,20 +950,37 @@ export class HtmlTextLayer {
             // а форма (квадрат остаётся квадратом) не подгоняется под высоту текста.
             const obj = (this.core.state.state.objects || []).find(o => o.id === objectId);
             if (obj?.type === 'shape') return;
-            // Измеряем фактическую высоту HTML-текста
+            // Измеряем фактическую высоту HTML-текста ровно так же, как updateOne
+            // (scrollHeight + extra): иначе _autoFitTextHeight фиксирует высоту без
+            // центр-дельты, шлёт ResizeUpdate с завышенным боксом, рамка выделения
+            // снимается по нему, а следующий updateOne досаживает финальную (меньшую)
+            // высоту уже без обновления рамки — рамка остаётся выше текста.
             el.style.height = 'auto';
-            const measured = Math.max(1, Math.round(el.scrollHeight));
+            const props = obj?.properties || {};
+            const content = obj?.content || props.content;
+            const useList = !!(props.listType && props.listType !== 'none');
+            const isMarkdown = !useList && resolveMarkdown(obj?.properties, content);
+            const centerDelta = (!isMarkdown && !useList)
+                ? computeSingleLineCenterDelta(el)
+                : null;
+            const extra = (centerDelta === null) ? TEXT_BOX_BOTTOM_PAD_PX : centerDelta;
+            const measured = Math.max(1, Math.round(el.scrollHeight + extra));
             
             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_auto = (measured * res) / s;
+            // Мировой размер обязан быть resolution-независимым: позиции и ширина текста
+            // конвертируются через toGlobal как CSS = world × scale, без множителя
+            // renderer.resolution. Раньше высота писалась как measured × res / s, поэтому
+            // при браузерном зуме/HiDPI (res ≠ 1) obj.height оказывался в res раз больше
+            // ширины, и рамка выделения (строится по obj.height через toGlobal, без res)
+            // получалась в res раз выше реального текста — буквы прижимались к верху рамки.
+            const worldH_auto = measured / s;
             
             const currentWorldH = obj?.height || 0;
             // Высота объекта всегда подгоняется под контент (и вверх, и вниз): без сжатия
             // единожды завышенная высота залипала и давала пустой зазор под текстом.
             const finalWorldH = worldH_auto;
-            const finalCssH = Math.round((finalWorldH * s) / res);
+            const finalCssH = Math.round(finalWorldH * s);
             
             el.style.height = `${finalCssH}px`;
             

package/src/ui/TextPropertiesPanel.js

@@ -527,7 +527,7 @@ export class TextPropertiesPanel {
             : getFallbackControlValues();
 
         this.fontSelect.value = values.fontFamily;
-        this.fontSizeSelect.value = values.fontSize;
+        this._setFontSizeValue(values.fontSize);
         this._updateCurrentColorButton(values.color);
         this._updateCurrentHighlightButton(values.highlightColor);
         this._updateCurrentBgColorButton(values.backgroundColor);
@@ -547,6 +547,45 @@ export class TextPropertiesPanel {
         }
     }
 
+    // Нативный <select> отрисовывается пустым, если присвоить ему value, которого
+    // нет среди <option> (selectedIndex становится -1). Размер текста после ресайза
+    // может выходить за пределы пресет-списка, поэтому для нестандартного значения
+    // вставляем временный <option> в позицию по возрастанию — поле всегда показывает
+    // фактический размер, а степперы продолжают двигаться по соседним значениям.
+    _setFontSizeValue(rawValue) {
+        const select = this.fontSizeSelect;
+        if (!select) {
+            return;
+        }
+
+        const value = String(rawValue);
+
+        const prevDynamic = select.querySelector('option[data-dynamic="true"]');
+        if (prevDynamic) {
+            prevDynamic.remove();
+        }
+
+        const hasOption = Array.from(select.options).some((opt) => opt.value === value);
+        if (!hasOption) {
+            const option = document.createElement('option');
+            option.value = value;
+            option.textContent = value;
+            option.dataset.dynamic = 'true';
+
+            const numeric = parseFloat(value);
+            const insertBeforeIndex = Array.from(select.options).findIndex(
+                (opt) => parseFloat(opt.value) > numeric,
+            );
+            if (insertBeforeIndex === -1) {
+                select.appendChild(option);
+            } else {
+                select.insertBefore(option, select.options[insertBeforeIndex]);
+            }
+        }
+
+        select.value = value;
+    }
+
     reposition() {
         if (!this.panel || !this.currentId || this.panel.style.display === 'none') {
             return;

package/src/ui/connectors/ConnectionAnchorsLayer.js

@@ -124,23 +124,6 @@ export class ConnectionAnchorsLayer {
         this._eventsAttached = false;
     }
 
-    _getSingleSelectionWorldBounds(id) {
-        const positionData = { objectId: id, position: null };
-        const sizeData = { objectId: id, size: null };
-        this.eventBus.emit(Events.Tool.GetObjectPosition, positionData);
-        this.eventBus.emit(Events.Tool.GetObjectSize, sizeData);
-        
-        if (positionData.position && sizeData.size) {
-            return {
-                x: positionData.position.x,
-                y: positionData.position.y,
-                width: sizeData.size.width,
-                height: sizeData.size.height,
-            };
-        }
-        return null;
-    }
-
     update() {
         if (!this.layer) return;
         if (this._commentPopoverOpen) return;
@@ -174,7 +157,11 @@ export class ConnectionAnchorsLayer {
             return;
         }
 
-        const worldBounds = this._getSingleSelectionWorldBounds(id);
+        // Границы считаем тем же сервисом, что и рамка выделения
+        // (HandlesPositioningService.getSingleSelectionWorldBounds): для текста это
+        // реальный DOM-бокс .mb-text, а не state-размер. Иначе якоря смещены
+        // относительно рамки, т.к. у текста DOM-бокс ≠ сохранённый width/height.
+        const worldBounds = this.positioningService.getSingleSelectionWorldBounds(id, req.pixiObject);
         if (!worldBounds) return;
 
         const cssRect = this.positioningService.worldBoundsToCssRect(worldBounds);

package/src/ui/styles/panels.css

@@ -189,6 +189,7 @@
 .moodboard-minimap-canvas { display: block; width: 280px; height: 180px; border-radius: 8px; }
 
 .text-properties-panel {
+    box-sizing: border-box;
     position: absolute;
     pointer-events: auto;
     display: flex;
@@ -634,7 +635,7 @@
     box-sizing: border-box;
     min-width: 70px;
     width: 70px;
-    height: 38px;
+    height: 34px;
     padding: 4px 0px;
     font-size: 13px;
     background-color: #fff;
@@ -723,7 +724,7 @@
     border: none;
     border-radius: 4px;
     background-color: #fff;
-    height: 38px;
+    height: 34px;
     box-sizing: border-box;
 }
 
@@ -739,6 +740,16 @@
     padding: 0 4px 0 8px;
     font-size: 13px;
     cursor: pointer;
+    /* Панель — светлая поверхность. Хост может форсить color-scheme: dark
+       (как futurello), из-за чего нативный select и его опции рендерятся белым
+       текстом на белом фоне. Фиксируем светлую схему и явные цвета. */
+    color-scheme: light;
+    color: #111827;
+}
+
+.text-properties-panel .font-size-select option {
+    color: #111827;
+    background-color: #fff;
 }
 
 .text-properties-panel .font-size-steppers {