@sequent-org/moodboard 1.4.61 → 1.4.63

package/package.json

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

package/src/core/SaveManager.js

@@ -23,6 +23,9 @@ export class SaveManager {
         this.retryCount = 0;
         this.lastSavedData = null;
         this.hasUnsavedChanges = false;
+        // Если изменение пришло, пока предыдущий запрос ещё в полёте, помечаем
+        // необходимость дозаписи: иначе последняя правка перед выходом теряется.
+        this._pendingResave = false;
         this._listenersAttached = false;
         this._handlers = {};
         
@@ -76,6 +79,25 @@ export class SaveManager {
         };
 
         this.eventBus.on(Events.History.Changed, this._handlers.onHistoryChanged);
+
+        // Flush при выходе: закрытие вкладки (pagehide) и сворачивание/скрытие
+        // (visibilitychange → hidden). Асинхронный fetch на unload не успевает,
+        // поэтому используем navigator.sendBeacon в _flushViaBeacon().
+        this._handlers.onPageHide = () => {
+            this._flushViaBeacon();
+        };
+        this._handlers.onVisibilityChange = () => {
+            if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
+                this._flushViaBeacon();
+            }
+        };
+
+        if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+            window.addEventListener('pagehide', this._handlers.onPageHide);
+        }
+        if (typeof document !== 'undefined' && typeof document.addEventListener === 'function') {
+            document.addEventListener('visibilitychange', this._handlers.onVisibilityChange);
+        }
     }
     
     /**
@@ -83,6 +105,12 @@ export class SaveManager {
      */
     markAsChanged() {
         this.hasUnsavedChanges = true;
+        // Если запрос уже выполняется, нельзя терять это изменение: помечаем
+        // дозапись, она запустится в finally текущего сохранения.
+        if (this.isRequestInProgress) {
+            this._pendingResave = true;
+            return;
+        }
         this.saveImmediately();
     }
     
@@ -97,8 +125,15 @@ export class SaveManager {
      * Немедленное сохранение
      */
     async saveImmediately(data = null) {
-        if (this.isRequestInProgress) return;
-        
+        // Флаг ставится синхронно, до любого await: между проверкой и установкой
+        // не должно быть yield-точки, иначе два подряд идущих markAsChanged()
+        // проходят guard и читают один baseVersion → второй ловит 409 stale_base_version.
+        if (this.isRequestInProgress) {
+            this._pendingResave = true;
+            return;
+        }
+        this.isRequestInProgress = true;
+
         try {
             // Получаем данные для сохранения
             const saveData = data || await this.getBoardData();
@@ -141,7 +176,6 @@ export class SaveManager {
                 return; // Данные не изменились
             }
             
-            this.isRequestInProgress = true;
             this.updateSaveStatus('saving');
             
             // Отправляем данные на сервер
@@ -215,6 +249,74 @@ export class SaveManager {
             this.handleSaveError(error, data);
         } finally {
             this.isRequestInProgress = false;
+            // Изменение, пришедшее во время этого запроса, ещё не сохранено —
+            // запускаем повторное сохранение со свежими данными доски.
+            // Дедуп по lastSavedData отфильтрует случай "данные не менялись".
+            if (this._pendingResave) {
+                this._pendingResave = false;
+                this.saveImmediately();
+            }
+        }
+    }
+
+    /**
+     * Синхронно получает данные доски (для отправки через sendBeacon на выходе).
+     * Обработчик Save.GetBoardData заполняет requestData.data синхронно.
+     */
+    _getBoardDataSync() {
+        const requestData = { data: null };
+        try {
+            this.eventBus.emit(Events.Save.GetBoardData, requestData);
+        } catch (_) {
+            // no-op
+        }
+        return requestData.data;
+    }
+
+    /**
+     * Финальное сохранение при выходе через navigator.sendBeacon.
+     * Гарантирует доставку последней правки при закрытии вкладки/модалки/панели,
+     * когда обычный async fetch не успевает завершиться. Эндпоинт публичный
+     * (middleware moodboard.cors, без CSRF), поэтому токен не требуется.
+     */
+    _flushViaBeacon() {
+        try {
+            if (!this.hasUnsavedChanges) return;
+            if (typeof navigator === 'undefined' || typeof navigator.sendBeacon !== 'function') return;
+
+            const data = this._getBoardDataSync();
+            if (!data || typeof data !== 'object') return;
+
+            const boardId = data.id || 'default';
+            // Бэкенд и загрузка ожидают state в форме внутреннего boardData
+            // ({ name, objects, description }). core.getBoardData() оборачивает
+            // его в { id, settings, boardData }, а ApiClient.saveBoard разворачивает
+            // обратно перед отправкой — повторяем это здесь, иначе сохранится
+            // неверная форма и доска откроется пустой.
+            const stateForSave = (data.boardData && typeof data.boardData === 'object')
+                ? data.boardData
+                : data;
+            const baseVersion = typeof this._versionGetter === 'function'
+                ? this._versionGetter()
+                : null;
+            const validBaseVersion = (baseVersion !== null && Number.isFinite(Number(baseVersion)) && Number(baseVersion) > 0)
+                ? Number(baseVersion)
+                : null;
+
+            const payload = {
+                moodboardId: boardId,
+                state: stateForSave,
+                actionType: 'command_execute',
+                ...(validBaseVersion !== null ? { baseVersion: validBaseVersion } : {})
+            };
+
+            const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
+            const queued = navigator.sendBeacon(this.options.saveEndpoint, blob);
+            if (queued) {
+                this.hasUnsavedChanges = false;
+            }
+        } catch (_) {
+            // Flush на выходе не должен бросать исключения.
         }
     }
     
@@ -499,6 +601,10 @@ export class SaveManager {
      * Очистка ресурсов
      */
     destroy() {
+        // Финальный flush перед снятием слушателей: покрывает закрытие модалки/панели,
+        // когда событие pagehide не срабатывает (SPA, без выгрузки документа).
+        this._flushViaBeacon();
+
         if (this.saveTimer) {
             clearTimeout(this.saveTimer);
             this.saveTimer = null;
@@ -506,6 +612,12 @@ export class SaveManager {
 
         // Удаляем обработчики событий, передавая исходные callback-ссылки.
         if (this._handlers.onHistoryChanged) this.eventBus.off(Events.History.Changed, this._handlers.onHistoryChanged);
+        if (this._handlers.onPageHide && typeof window !== 'undefined' && typeof window.removeEventListener === 'function') {
+            window.removeEventListener('pagehide', this._handlers.onPageHide);
+        }
+        if (this._handlers.onVisibilityChange && typeof document !== 'undefined' && typeof document.removeEventListener === 'function') {
+            document.removeEventListener('visibilitychange', this._handlers.onVisibilityChange);
+        }
 
         this._listenersAttached = false;
         this._handlers = {};

package/src/ui/handles/HandlesInteractionController.js

@@ -1,4 +1,9 @@
 import { Events } from '../../core/events/Events.js';
+import { computeTextRightPadPx, TEXT_BOX_BOTTOM_PAD_PX } from '../../services/text/TextBoxMetrics.js';
+
+// Границы кегля (в мировых единицах) при масштабировании текста угловой ручкой.
+const TEXT_CORNER_MIN_FONT = 6;
+const TEXT_CORNER_MAX_FONT = 512;
 
 export class HandlesInteractionController {
     constructor(host) {
@@ -226,7 +231,77 @@ export class HandlesInteractionController {
             isVerticalResizeTarget = ['frame', 'text', 'simple-text', 'image'].includes(mbType);
         }
 
+        // Угловая ручка текста масштабирует кегль (текст растёт/уменьшается, рамка облегает).
+        // Боковые ручки текста сохраняют прежнее поведение (только высота).
+        const isTextCornerScale = !isGroup && isTextTarget && ['nw', 'ne', 'sw', 'se'].includes(dir);
+        let startFontWorld = 16;
+        let textCornerEl = null;
+        let lastFontEmitted = null;
+        if (isTextCornerScale) {
+            const obj = this.host.core?.state?.state?.objects?.find((o) => o.id === id);
+            startFontWorld = (obj && (obj.fontSize || obj.properties?.fontSize)) || 16;
+            const textLayer = (typeof window !== 'undefined') ? window.moodboardHtmlTextLayer : null;
+            textCornerEl = textLayer?.idToEl?.get ? textLayer.idToEl.get(id) : null;
+            if (!obj?.fontSize && textCornerEl && typeof window.getComputedStyle === 'function') {
+                const csF = parseFloat(window.getComputedStyle(textCornerEl).fontSize);
+                if (csF) startFontWorld = Math.max(1, Math.round(csF * rendererRes / s));
+            }
+        }
+
         const onMove = (ev) => {
+            if (isTextCornerScale) {
+                const dx = ev.clientX - startMouse.x;
+                const dy = ev.clientY - startMouse.y;
+                const candW = Math.max(1, startCSS.width + (dir.includes('e') ? dx : -dx));
+                const candH = Math.max(1, startCSS.height + (dir.includes('s') ? dy : -dy));
+                const startDiag = Math.max(1, Math.hypot(startCSS.width, startCSS.height));
+                const k = Math.hypot(candW, candH) / startDiag;
+                let newFont = Math.round(startFontWorld * k);
+                newFont = Math.max(TEXT_CORNER_MIN_FONT, Math.min(TEXT_CORNER_MAX_FONT, newFont));
+                if (newFont !== lastFontEmitted) {
+                    lastFontEmitted = newFont;
+                    this.host.eventBus.emit(Events.Object.StateChanged, {
+                        objectId: id,
+                        updates: { fontSize: newFont },
+                    });
+                }
+
+                // Истинный размер контента при новом кегле, без учёта нижней границы width в updateOne.
+                let cssW = startCSS.width;
+                let cssH = startCSS.height;
+                if (textCornerEl) {
+                    const fontCss = (typeof window.getComputedStyle === 'function')
+                        ? (parseFloat(window.getComputedStyle(textCornerEl).fontSize) || (newFont * s / rendererRes))
+                        : (newFont * s / rendererRes);
+                    textCornerEl.style.width = 'auto';
+                    cssW = Math.max(1, Math.ceil(textCornerEl.scrollWidth) + computeTextRightPadPx(fontCss));
+                    textCornerEl.style.width = `${cssW}px`;
+                    textCornerEl.style.height = 'auto';
+                    cssH = Math.max(1, Math.ceil(textCornerEl.scrollHeight) + TEXT_BOX_BOTTOM_PAD_PX);
+                    textCornerEl.style.height = `${cssH}px`;
+                }
+                const worldW = Math.max(1, cssW / s);
+                const worldH = Math.max(1, cssH / s);
+
+                // Закреплён противоположный перетаскиваемому углу: он остаётся на месте.
+                const anchorX = dir.includes('w') ? (startWorld.x + startWorld.width) : startWorld.x;
+                const anchorY = dir.includes('n') ? (startWorld.y + startWorld.height) : startWorld.y;
+                const newX = dir.includes('w') ? (anchorX - worldW) : anchorX;
+                const newY = dir.includes('n') ? (anchorY - worldH) : anchorY;
+
+                this.host.eventBus.emit(Events.Tool.ResizeUpdate, {
+                    object: id,
+                    size: { width: worldW, height: worldH },
+                    position: { x: newX, y: newY },
+                });
+
+                box.style.left = `${offsetLeft + tx + newX * s}px`;
+                box.style.top = `${offsetTop + ty + newY * s}px`;
+                box.style.width = `${Math.max(1, worldW * s)}px`;
+                box.style.height = `${Math.max(1, worldH * s)}px`;
+                this.host._repositionBoxChildren(box);
+                return;
+            }
             const maintainAspectRatio = !!ev.shiftKey;
             if (isGroup && maintainAspectRatio !== previousMaintainAspectRatio) {
                 startCSS = this._readBoxCss(box);
@@ -394,6 +469,23 @@ export class HandlesInteractionController {
         const onUp = () => {
             document.removeEventListener('pointermove', onMove);
             document.removeEventListener('pointerup', onUp);
+
+            if (isTextCornerScale) {
+                // Кегль уже сохранён слитой UpdateTextStyleCommand из onMove.
+                // Финализируем геометрию (размер/позиция) для undo через ResizeEnd.
+                const obj = this.host.core?.state?.state?.objects?.find((o) => o.id === id);
+                const finalSize = { width: obj?.width || startWorld.width, height: obj?.height || startWorld.height };
+                const finalPos = { x: obj?.position?.x ?? startWorld.x, y: obj?.position?.y ?? startWorld.y };
+                this.host.eventBus.emit(Events.Tool.ResizeEnd, {
+                    object: id,
+                    oldSize: { width: startWorld.width, height: startWorld.height },
+                    newSize: finalSize,
+                    oldPosition: { x: startWorld.x, y: startWorld.y },
+                    newPosition: finalPos,
+                });
+                return;
+            }
+
             const endCSS = {
                 left: parseFloat(box.style.left),
                 top: parseFloat(box.style.top),