@sequent-org/moodboard 1.4.64 → 1.4.66

package/package.json

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

package/src/core/HistoryManager.js

@@ -41,7 +41,9 @@ export class HistoryManager {
             lastCommand.mergeWith(command);
             this._executeCommandSafely(lastCommand);
             this.eventBus.emit('history:changed', {
-                historySize: this.history.length
+                historySize: this.history.length,
+                canUndo: this.currentIndex >= 0,
+                canRedo: this.currentIndex < this.history.length - 1,
             });
             return;
         }
@@ -67,7 +69,9 @@ export class HistoryManager {
         // Уведомляем об изменении истории
         this.eventBus.emit(Events.History.Changed, {
             historySize: this.history.length,
-            currentCommand: command.toString()
+            currentCommand: command.toString(),
+            canUndo: this.currentIndex >= 0,
+            canRedo: this.currentIndex < this.history.length - 1,
         });
 
 
@@ -107,7 +111,9 @@ export class HistoryManager {
         this.currentIndex = -1;
         
         this.eventBus.emit(Events.History.Changed, {
-            historySize: 0
+            historySize: 0,
+            canUndo: false,
+            canRedo: false,
         });
 
 

package/src/core/index.js

@@ -230,6 +230,12 @@ export class CoreMoodBoard {
                     historySize: data.historySize,
                 });
             }
+            if (data && ('canUndo' in data || 'canRedo' in data)) {
+                this.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                    canUndo: !!data.canUndo,
+                    canRedo: !!data.canRedo,
+                });
+            }
         });
     }
 

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/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/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: 36px;
+    height: 34px;
     padding: 4px 0px;
     font-size: 13px;
     background-color: #fff;
@@ -723,7 +724,7 @@
     border: none;
     border-radius: 4px;
     background-color: #fff;
-    height: 36px;
+    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 {