@sequent-org/moodboard 1.4.0 → 1.4.2

package/package.json

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

package/src/core/ApiClient.js

@@ -7,7 +7,7 @@ export class ApiClient {
 
     async getBoard(boardId) {
         try {
-            const response = await fetch(`/api/moodboard/${boardId}`, {
+            const response = await fetch(`/api/v2/moodboard/${boardId}`, {
                 method: 'GET',
                 headers: {
                     'Accept': 'application/json',
@@ -23,7 +23,22 @@ export class ApiClient {
             const result = await response.json();
             
             if (result.success) {
-                return { data: result.data };
+                const payload = result.data || {};
+                const state = (payload.state && typeof payload.state === 'object')
+                    ? payload.state
+                    : {};
+                return {
+                    data: {
+                        ...state,
+                        objects: Array.isArray(state.objects) ? state.objects : [],
+                        moodboardId: payload.moodboardId || boardId,
+                        name: payload.name || null,
+                        description: payload.description || null,
+                        settings: payload.settings || {},
+                        version: payload.version || null,
+                        meta: { allowEmptyLoad: true },
+                    }
+                };
             } else {
                 throw new Error(result.message || 'Ошибка загрузки доски');
             }
@@ -40,18 +55,46 @@ export class ApiClient {
         }
     }
 
-    async saveBoard(boardId, boardData) {
+    async saveBoard(boardId, boardData, options = {}) {
         try {
-            // Поддержка нового формата: { boardData: {...}, settings: {...} }
-            let payloadBoardData = boardData && boardData.boardData ? boardData.boardData : boardData;
-            let payloadSettings = boardData && boardData.settings ? boardData.settings : undefined;
+            const actionType = options?.actionType || 'command_execute';
+            // Поддержка формата core.getBoardData(): { id, boardData, settings }
+            const payloadBoardData = boardData && boardData.boardData ? boardData.boardData : boardData;
+            const payloadSettings = boardData && boardData.settings ? boardData.settings : {};
 
             // Фильтруем объекты изображений и файлов - убираем избыточные данные
             const cleanedData = this._cleanObjectData(payloadBoardData);
 
             const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
 
-            const response = await fetch('/api/moodboard/save', {
+            // 1) Метаданные moodboard (settings/name/description) сохраняем отдельно.
+            // Ошибка метаданных не должна блокировать сохранение контента в истории.
+            try {
+                const metadataResponse = await fetch('/api/v2/moodboard/metadata/save', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json',
+                        'X-CSRF-TOKEN': csrfToken,
+                        'X-Requested-With': 'XMLHttpRequest'
+                    },
+                    credentials: 'same-origin',
+                    body: JSON.stringify({
+                        moodboardId: boardId,
+                        name: cleanedData?.name || null,
+                        description: cleanedData?.description ?? null,
+                        settings: payloadSettings || {}
+                    })
+                });
+                if (!metadataResponse.ok) {
+                    console.warn(`ApiClient: metadata/save вернул HTTP ${metadataResponse.status}`);
+                }
+            } catch (metadataError) {
+                console.warn('ApiClient: metadata/save завершился с ошибкой:', metadataError);
+            }
+
+            // 2) Контент (state) сохраняем append-only в history.
+            const response = await fetch('/api/v2/moodboard/history/save', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -61,9 +104,9 @@ export class ApiClient {
                 },
                 credentials: 'same-origin',
                 body: JSON.stringify({
-                    boardId: boardId,
-                    boardData: cleanedData,
-                    settings: payloadSettings
+                    moodboardId: boardId,
+                    state: cleanedData,
+                    actionType
                 })
             });
 
@@ -74,9 +117,15 @@ export class ApiClient {
             const result = await response.json();
             
             if (result.success) {
-                return { success: true, data: result };
+                return {
+                    success: true,
+                    deduplicated: !!result.deduplicated,
+                    historyVersion: result.historyVersion,
+                    moodboardId: result.moodboardId || boardId,
+                    data: result
+                };
             } else {
-                throw new Error(result.message || 'Ошибка сохранения доски');
+                throw new Error(result.message || 'Ошибка сохранения истории moodboard');
             }
         } catch (error) {
             console.error('ApiClient: Ошибка сохранения доски:', error);

package/src/core/SaveManager.js

@@ -8,22 +8,14 @@ export class SaveManager {
         this.eventBus = eventBus;
         this.apiClient = null; // Будет установлен позже через setApiClient
         this.options = {
-            // Фиксированные настройки автосохранения данных
+            // Сохранение выполняется только по событиям изменения контента.
             autoSave: true,
-            // Уменьшенная задержка, чтобы изменения чаще успевали сохраняться
-            // (раньше было 1500 мс)
-            saveDelay: 400,
             maxRetries: 3,
             retryDelay: 1000,
-            periodicSaveInterval: 30000, // Периодическое сохранение каждые 30 сек
-
-            // Фоновая отправка при закрытии вкладки/перезагрузке страницы
-            // (используется navigator.sendBeacon при поддержке браузером)
-            useBeaconOnUnload: true,
 
             // Настраиваемые эндпоинты (берем из options)
-            saveEndpoint: options.saveEndpoint || '/api/moodboard/save',
-            loadEndpoint: options.loadEndpoint || '/api/moodboard/load'
+            saveEndpoint: options.saveEndpoint || '/api/v2/moodboard/history/save',
+            loadEndpoint: options.loadEndpoint || '/api/v2/moodboard'
         };
         
         this.saveTimer = null;
@@ -31,10 +23,8 @@ export class SaveManager {
         this.retryCount = 0;
         this.lastSavedData = null;
         this.hasUnsavedChanges = false;
-        this.periodicSaveTimer = null;
         this._listenersAttached = false;
         this._handlers = {};
-        this._domHandlers = {};
         
         // Состояния сохранения
         this.saveStatus = 'idle'; // idle, saving, saved, error
@@ -56,95 +46,13 @@ export class SaveManager {
         if (!this.options.autoSave || this._listenersAttached) return;
         this._listenersAttached = true;
 
-        this._handlers.onGridBoardDataChanged = () => {
-            this.markAsChanged();
-        };
-        this._handlers.onObjectCreated = () => {
-            this.markAsChanged();
-        };
-        this._handlers.onObjectUpdated = () => {
+        // Единый триггер сохранения: любое изменение истории команд.
+        // Это покрывает execute/undo/redo и исключает "лишние" save-триггеры.
+        this._handlers.onHistoryChanged = () => {
             this.markAsChanged();
         };
-        this._handlers.onObjectDeleted = () => {
-            this.markAsChanged();
-        };
-        this._handlers.onObjectStateChanged = () => {
-            this.markAsChanged();
-        };
-        
-        // Отслеживаем изменения сетки: не передаём частичные данные в сохранение,
-        // чтобы собрать полный snapshot через getBoardData()
-        this.eventBus.on(Events.Grid.BoardDataChanged, this._handlers.onGridBoardDataChanged);
-        
-        // Отслеживаем создание объектов
-        this.eventBus.on(Events.Object.Created, this._handlers.onObjectCreated);
-        
-        // Отслеживаем изменения объектов
-        this.eventBus.on(Events.Object.Updated, this._handlers.onObjectUpdated);
-        
-        // Отслеживаем удаление объектов
-        this.eventBus.on(Events.Object.Deleted, this._handlers.onObjectDeleted);
-        
-        // Отслеживаем прямые изменения состояния (для Undo/Redo)
-        this.eventBus.on(Events.Object.StateChanged, this._handlers.onObjectStateChanged);
-        
-        // Отслеживание перемещений теперь происходит через команды и state:changed
-        
-        // Сохранение при закрытии страницы (в том числе при резком закрытии окна)
-        this._domHandlers.beforeUnload = (e) => {
-            if (!this.hasUnsavedChanges) return;
-            try {
-                if (this.options.useBeaconOnUnload) {
-                    this._flushOnUnload();
-                } else {
-                    this._flushSyncFallback();
-                }
-            } catch (_) { /* игнорируем, чтобы не блокировать закрытие */ }
 
-            // Сообщаем браузеру, что есть незафиксированные изменения
-            // (текст может быть проигнорирован, но событие задержит закрытие на доли секунды)
-            e.preventDefault();
-            e.returnedValue = '';
-            e.returnValue = '';
-            return '';
-        };
-        window.addEventListener('beforeunload', this._domHandlers.beforeUnload, { capture: true });
-
-        // Дополнительно: обработка быстрого ухода со страницы (pagehide надёжнее в части браузеров)
-        this._domHandlers.pageHide = () => {
-            if (!this.hasUnsavedChanges) return;
-            try {
-                if (!this.options || this.options.useBeaconOnUnload) {
-                    this._flushOnUnload();
-                } else {
-                    this._flushSyncFallback();
-                }
-            } catch (_) { /* игнорируем */ }
-        };
-        window.addEventListener('pagehide', this._domHandlers.pageHide, { capture: true });
-
-        // Подстраховка на случай, когда вкладка просто уходит в фон без beforeunload/pagehide
-        this._domHandlers.visibilityChange = () => {
-            if (document.visibilityState !== 'hidden') return;
-            if (!this.hasUnsavedChanges) return;
-            try {
-                if (!this.options || this.options.useBeaconOnUnload) {
-                    this._flushOnUnload();
-                } else {
-                    this._flushSyncFallback();
-                }
-            } catch (_) { /* игнорируем */ }
-        };
-        document.addEventListener('visibilitychange', this._domHandlers.visibilityChange);
-        
-        // Периодическое автосохранение
-        if (this.options.autoSave) {
-            this.periodicSaveTimer = setInterval(() => {
-                if (this.hasUnsavedChanges && !this.isRequestInProgress) {
-                    this.saveImmediately();
-                }
-            }, this.options.periodicSaveInterval);
-        }
+        this.eventBus.on(Events.History.Changed, this._handlers.onHistoryChanged);
     }
     
     /**
@@ -152,27 +60,14 @@ export class SaveManager {
      */
     markAsChanged() {
         this.hasUnsavedChanges = true;
-        this.scheduleAutoSave();
+        this.saveImmediately();
     }
     
     /**
-     * Запланировать автоматическое сохранение с задержкой
+     * Метод сохранён для совместимости; таймеры больше не используются.
      */
     scheduleAutoSave(data = null) {
-        if (!this.options.autoSave) return;
-        
-        // Отменяем предыдущий таймер
-        if (this.saveTimer) {
-            clearTimeout(this.saveTimer);
-        }
-        
-        // Устанавливаем новый таймер
-        this.saveTimer = setTimeout(() => {
-            this.saveImmediately(data);
-        }, this.options.saveDelay);
-        
-        // Обновляем статус
-        this.updateSaveStatus('pending');
+        this.saveImmediately(data);
     }
     
     /**
@@ -284,8 +179,9 @@ export class SaveManager {
         }
 
         const requestBody = {
-            boardId,
-            boardData: data
+            moodboardId: boardId,
+            state: data,
+            actionType: 'command_execute'
         };
 
         const response = await fetch(this.options.saveEndpoint, {
@@ -324,15 +220,11 @@ export class SaveManager {
         return await response.json();
     }
 
-    /**
-     * Строит единый payload сохранения для всех каналов отправки
-     * (обычный save, beacon, sync XHR fallback).
-     */
     _buildSavePayload(boardId, data, csrfToken = undefined) {
         return {
-            boardId,
-            boardData: data,
-            settings: data?.settings || undefined,
+            moodboardId: boardId,
+            state: data,
+            actionType: 'command_execute',
             _token: csrfToken || undefined
         };
     }
@@ -381,16 +273,18 @@ export class SaveManager {
             const result = await response.json();
             
             if (result.success) {
-                this.lastSavedData = result.data;
+                const payload = result.data || {};
+                const state = payload.state || payload;
+                this.lastSavedData = state;
                 this.hasUnsavedChanges = false;
                 
                 // Эмитируем событие загрузки
                 this.eventBus.emit(Events.Save.Loaded, {
-                    data: result.data,
+                    data: state,
                     timestamp: new Date().toISOString()
                 });
                 
-                return result.data;
+                return state;
             } else {
                 throw new Error(result.message || 'Ошибка загрузки');
             }
@@ -454,76 +348,6 @@ export class SaveManager {
         };
     }
     
-    /**
-     * Синхронно собирает текущие данные для сохранения через EventBus.
-     * Используется в обработчиках закрытия вкладки, где нет времени на ожидание async.
-     */
-    _collectCurrentDataSync() {
-        try {
-            const requestData = { data: null };
-            this.eventBus && this.eventBus.emit(Events.Save.GetBoardData, requestData);
-            return requestData.data || null;
-        } catch (_) {
-            return null;
-        }
-    }
-
-    /**
-     * Отправляет данные в фоне при закрытии вкладки (navigator.sendBeacon),
-     * а при отсутствии поддержки — выполняет синхронный XHR как запасной вариант.
-     */
-    _flushOnUnload() {
-        const data = this._collectCurrentDataSync();
-        if (!data) return;
-
-        const boardId = data.id || 'default';
-        // CSRF токен добавим в тело (для серверов, которые принимают _token из JSON)
-        const csrfToken = (typeof document !== 'undefined')
-            ? (document.querySelector('meta[name="csrf-token"]')?.value || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'))
-            : undefined;
-        const payload = this._buildSavePayload(boardId, data, csrfToken);
-
-        const body = JSON.stringify(payload);
-
-        let sent = false;
-        try {
-            if (typeof navigator !== 'undefined' && typeof navigator.sendBeacon === 'function') {
-                const blob = new Blob([body], { type: 'application/json' });
-                sent = navigator.sendBeacon(this.options.saveEndpoint, blob);
-            }
-        } catch (_) { /* игнорируем */ }
-
-        if (!sent) {
-            // Фолбэк: синхронный XHR (доступен в beforeunload, но может быть заблокирован политиками браузера)
-            this._flushSyncFallback(data);
-        }
-
-        // Считаем, что попытались сохранить; снимаем флаг, чтобы не спамить повторно
-        this.hasUnsavedChanges = false;
-    }
-
-    /**
-     * Синхронная отправка запроса на сохранение (fallback для устаревших браузеров).
-     */
-    _flushSyncFallback(existingData) {
-        try {
-            const data = existingData || this._collectCurrentDataSync();
-            if (!data) return;
-
-            const boardId = data.id || 'default';
-            const csrfToken = (typeof document !== 'undefined') ? (document.querySelector('meta[name="csrf-token"]').getAttribute('content')) : null;
-
-            const xhr = new XMLHttpRequest();
-            xhr.open('POST', this.options.saveEndpoint, false); // синхронно
-            xhr.setRequestHeader('Content-Type', 'application/json');
-            xhr.setRequestHeader('Accept', 'application/json');
-            if (csrfToken) xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
-
-            const payload = this._buildSavePayload(boardId, data, csrfToken || undefined);
-            try { xhr.send(JSON.stringify(payload)); } catch (_) { /* игнорируем */ }
-        } catch (_) { /* игнорируем */ }
-    }
-
     /**
      * Очистка ресурсов
      */
@@ -532,29 +356,11 @@ export class SaveManager {
             clearTimeout(this.saveTimer);
             this.saveTimer = null;
         }
-        if (this.periodicSaveTimer) {
-            clearInterval(this.periodicSaveTimer);
-            this.periodicSaveTimer = null;
-        }
-        
-        // Финальное сохранение перед уничтожением
-        if (this.hasUnsavedChanges && this.options.autoSave) {
-            this.saveImmediately();
-        }
-        
-        // Удаляем обработчики событий, передавая исходные callback-ссылки.
-        if (this._handlers.onGridBoardDataChanged) this.eventBus.off(Events.Grid.BoardDataChanged, this._handlers.onGridBoardDataChanged);
-        if (this._handlers.onObjectCreated) this.eventBus.off(Events.Object.Created, this._handlers.onObjectCreated);
-        if (this._handlers.onObjectUpdated) this.eventBus.off(Events.Object.Updated, this._handlers.onObjectUpdated);
-        if (this._handlers.onObjectDeleted) this.eventBus.off(Events.Object.Deleted, this._handlers.onObjectDeleted);
-        if (this._handlers.onObjectStateChanged) this.eventBus.off(Events.Object.StateChanged, this._handlers.onObjectStateChanged);
 
-        if (this._domHandlers.beforeUnload) window.removeEventListener('beforeunload', this._domHandlers.beforeUnload, { capture: true });
-        if (this._domHandlers.pageHide) window.removeEventListener('pagehide', this._domHandlers.pageHide, { capture: true });
-        if (this._domHandlers.visibilityChange) document.removeEventListener('visibilitychange', this._domHandlers.visibilityChange);
+        // Удаляем обработчики событий, передавая исходные callback-ссылки.
+        if (this._handlers.onHistoryChanged) this.eventBus.off(Events.History.Changed, this._handlers.onHistoryChanged);
 
         this._listenersAttached = false;
         this._handlers = {};
-        this._domHandlers = {};
     }
 }

package/src/core/events/Events.js

@@ -51,6 +51,8 @@ export const Events = {
 	UI: {
 		ToolbarAction: 'toolbar:action',
 		UpdateHistoryButtons: 'ui:update-history-buttons',
+		LoadPrevVersion: 'ui:load-prev-version',
+		LoadNextVersion: 'ui:load-next-version',
 		ContextMenuShow: 'ui:contextmenu:show',
 		GridChange: 'ui:grid:change',
 		GridCurrent: 'ui:grid:current',

package/src/moodboard/DataManager.js

@@ -49,8 +49,9 @@ export class DataManager {
         
 
         
-        // Очищаем доску перед загрузкой
-        this.clearBoard();
+        // Очищаем доску перед загрузкой без команд истории:
+        // загрузка снапшота не должна порождать новые записи истории.
+        this.clearBoard({ silent: true });
 
         // Применяем settings централизованно (если есть апплаер), иначе — старым способом
         try {
@@ -167,8 +168,41 @@ export class DataManager {
     /**
      * Очищает все объекты на доске
      */
-    clearBoard() {
+    clearBoard(options = {}) {
         if (!this.coreMoodboard) return;
+        const silent = options?.silent === true;
+
+        if (silent) {
+            try {
+                const objects = this.coreMoodboard?.state?.state?.objects || [];
+                const ids = objects.map((obj) => obj?.id).filter(Boolean);
+
+                ids.forEach((id) => {
+                    try { this.coreMoodboard.pixi?.removeObject?.(id); } catch (_) {}
+                });
+
+                // Страховка: убрать возможные "висячие" PIXI-объекты.
+                const pixiObjects = this.coreMoodboard?.pixi?.objects;
+                if (pixiObjects && pixiObjects.size > 0) {
+                    for (const [objectId] of pixiObjects) {
+                        try { this.coreMoodboard.pixi.removeObject(objectId); } catch (_) {}
+                    }
+                }
+
+                if (this.coreMoodboard?.state?.state) {
+                    this.coreMoodboard.state.state.objects = [];
+                    this.coreMoodboard.state.state.selectedObjects = [];
+                    this.coreMoodboard.state.state.isDirty = false;
+                }
+
+                if (this.coreMoodboard?.selectTool?.clearSelection) {
+                    this.coreMoodboard.selectTool.clearSelection();
+                }
+                return ids.length;
+            } catch (_) {
+                // fallback на командный путь ниже
+            }
+        }
         
         // 1) Удаляем все объекты, известные состоянию
         const objects = this.coreMoodboard.objects || [];

package/src/moodboard/MoodBoard.js

@@ -37,7 +37,7 @@ export class MoodBoard {
         this.options = {
             theme: 'light',
             boardId: null,
-            apiUrl: '/api/moodboard',
+            apiUrl: '/api/v2/moodboard',
             autoLoad: true,
             onSave: null,
             onLoad: null,
@@ -203,8 +203,8 @@ export class MoodBoard {
     /**
      * Публичный метод для загрузки данных из API
      */
-    async loadFromApi(boardId = null) {
-        await loadMoodBoardFromApi(this, boardId);
+    async loadFromApi(boardId = null, version = null, options = {}) {
+        await loadMoodBoardFromApi(this, boardId, version, options);
     }
     
     /**

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -1,6 +1,21 @@
 import { Events } from '../../core/events/Events.js';
 import { logMindmapCompoundDebug } from '../../mindmap/MindmapCompoundContract.js';
 
+function getSelectTool(board) {
+    const toolManager = board?.coreMoodboard?.toolManager;
+    if (!toolManager) return null;
+    return toolManager?.tools?.get?.('select')
+        || toolManager?.registry?.get?.('select')
+        || null;
+}
+
+function hasOpenTextEditorInDom(board) {
+    const doc = board?.workspaceElement?.ownerDocument
+        || (typeof document !== 'undefined' ? document : null);
+    if (!doc || typeof doc.querySelector !== 'function') return false;
+    return Boolean(doc.querySelector('.moodboard-text-input'));
+}
+
 export function bindToolbarEvents(board) {
     board.coreMoodboard.eventBus.on(Events.UI.ToolbarAction, (action) => {
         if (action?.type === 'mindmap') {
@@ -13,8 +28,49 @@ export function bindToolbarEvents(board) {
         const createdObject = board.actionHandler.handleToolbarAction(action);
         if (action?.type === 'mindmap' && createdObject?.id) {
             const content = String(createdObject?.properties?.content || '');
-            if (content.trim().length === 0) {
+            const createdMeta = createdObject?.properties?.mindmap || {};
+            const isRootMindmap = createdMeta?.role === 'root';
+            const mindmapObjects = (board?.coreMoodboard?.state?.state?.objects || [])
+                .filter((obj) => obj?.type === 'mindmap');
+            const rootCount = mindmapObjects.filter((obj) => (obj?.properties?.mindmap?.role || null) === 'root').length;
+            const shouldAutoOpenForRoot = !isRootMindmap || rootCount <= 1;
+            const selectTool = getSelectTool(board);
+            const hasActiveEditor = Boolean(selectTool?.textEditor?.active);
+            const hasEditorDom = hasOpenTextEditorInDom(board);
+            const shouldBlockAutoOpen = hasActiveEditor && hasEditorDom;
+            if (content.trim().length === 0 && !shouldBlockAutoOpen && shouldAutoOpenForRoot) {
+                const doc = board?.workspaceElement?.ownerDocument
+                    || (typeof document !== 'undefined' ? document : null);
+                const closeSeqAtSchedule = Number(selectTool?._mindmapEditorCloseSeq || 0);
+                let cancelledByPointer = false;
+                const cancelOnPointerDown = () => {
+                    cancelledByPointer = true;
+                };
+                const cancelOnEscape = (event) => {
+                    if (event?.key === 'Escape') {
+                        cancelledByPointer = true;
+                    }
+                };
+                if (doc && typeof doc.addEventListener === 'function') {
+                    doc.addEventListener('pointerdown', cancelOnPointerDown, true);
+                    doc.addEventListener('keydown', cancelOnEscape, true);
+                }
                 setTimeout(() => {
+                    if (doc && typeof doc.removeEventListener === 'function') {
+                        doc.removeEventListener('pointerdown', cancelOnPointerDown, true);
+                        doc.removeEventListener('keydown', cancelOnEscape, true);
+                    }
+                    if (cancelledByPointer) return;
+                    const latestSelectTool = getSelectTool(board);
+                    const latestCloseSeq = Number(latestSelectTool?._mindmapEditorCloseSeq || 0);
+                    if (latestCloseSeq !== closeSeqAtSchedule) return;
+
+                    const nextSelectTool = getSelectTool(board);
+                    const nextHasActiveEditor = Boolean(nextSelectTool?.textEditor?.active);
+                    const nextHasEditorDom = hasOpenTextEditorInDom(board);
+                    if (nextHasActiveEditor || nextHasEditorDom) {
+                        return;
+                    }
                     board.coreMoodboard.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
                     board.coreMoodboard.eventBus.emit(Events.Tool.ObjectEdit, {
                         object: {
@@ -25,9 +81,51 @@ export function bindToolbarEvents(board) {
                         },
                         create: true,
                     });
-                }, 20);
+                }, 0);
+            }
+        }
+    });
+
+    const loadVersion = async (targetVersion) => {
+        const moodboardId = board.options.boardId;
+        if (!moodboardId) return;
+        if (!Number.isFinite(targetVersion) || targetVersion < 1) return;
+        try {
+            await board.loadFromApi(moodboardId, targetVersion, { fallbackToSeedOnError: false });
+
+            // В append-only модели откат/переход по версии фиксируем новой записью,
+            // чтобы дальнейшие изменения шли от нового head и не теряли "будущее".
+            const restoreSnapshot = board.coreMoodboard?.getBoardData?.();
+            if (restoreSnapshot && board.coreMoodboard?.apiClient) {
+                const saveResult = await board.coreMoodboard.apiClient.saveBoard(
+                    moodboardId,
+                    restoreSnapshot,
+                    { actionType: 'history_restore' }
+                );
+                const restoredVersion = Number(saveResult?.historyVersion);
+                if (Number.isFinite(restoredVersion) && restoredVersion > 0) {
+                    board.currentLoadedVersion = restoredVersion;
+                    board.coreMoodboard.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                        canUndo: restoredVersion > 1,
+                        canRedo: false,
+                    });
+                }
             }
+        } catch (error) {
+            console.warn(`⚠️ Не удалось загрузить версию ${targetVersion}:`, error?.message || error);
         }
+    };
+
+    board.coreMoodboard.eventBus.on(Events.UI.LoadPrevVersion, () => {
+        const current = Number(board.currentLoadedVersion);
+        if (!Number.isFinite(current) || current <= 1) return;
+        loadVersion(current - 1);
+    });
+
+    board.coreMoodboard.eventBus.on(Events.UI.LoadNextVersion, () => {
+        const current = Number(board.currentLoadedVersion);
+        if (!Number.isFinite(current)) return;
+        loadVersion(current + 1);
     });
 }
 

package/src/moodboard/integration/MoodBoardLoadApi.js

@@ -1,3 +1,5 @@
+import { Events } from '../../core/events/Events.js';
+
 function getSeedData(board) {
     return board.data || { objects: [] };
 }
@@ -15,7 +17,25 @@ export function getCsrfToken(board) {
         || '';
 }
 
-export async function loadExistingBoard(board) {
+function normalizeLoadedPayload(payload, moodboardIdFallback) {
+    const state = (payload?.state && typeof payload.state === 'object')
+        ? payload.state
+        : {};
+    return {
+        ...state,
+        objects: Array.isArray(state.objects) ? state.objects : [],
+        moodboardId: payload?.moodboardId || moodboardIdFallback,
+        name: payload?.name || null,
+        description: payload?.description || null,
+        settings: payload?.settings || {},
+        version: payload?.version || null,
+        // Это загрузка с сервера, поэтому пустое состояние допустимо.
+        meta: { allowEmptyLoad: true },
+    };
+}
+
+export async function loadExistingBoard(board, version = null, options = {}) {
+    const fallbackToSeedOnError = options?.fallbackToSeedOnError !== false;
     try {
         const boardId = board.options.boardId;
 
@@ -29,9 +49,10 @@ export async function loadExistingBoard(board) {
 
         console.log(`📦 MoodBoard: загружаем доску ${boardId} с ${board.options.apiUrl}`);
 
-        const loadUrl = board.options.apiUrl.endsWith('/')
-            ? `${board.options.apiUrl}load/${boardId}`
-            : `${board.options.apiUrl}/load/${boardId}`;
+        const baseUrl = board.options.apiUrl.endsWith('/')
+            ? `${board.options.apiUrl}${boardId}`
+            : `${board.options.apiUrl}/${boardId}`;
+        const loadUrl = Number.isFinite(version) ? `${baseUrl}/${version}` : baseUrl;
 
         const response = await fetch(loadUrl, {
             method: 'GET',
@@ -45,19 +66,38 @@ export async function loadExistingBoard(board) {
             throw new Error(`HTTP ${response.status}: ${response.statusText}`);
         }
 
-        const boardData = await response.json();
+        const apiResponse = await response.json();
+        const payload = apiResponse?.data || null;
 
-        if (boardData && boardData.data) {
-            console.log('✅ MoodBoard: данные загружены с сервера', boardData.data);
-            board.dataManager.loadData(boardData.data);
-            invokeOnLoad(board, { success: true, data: boardData.data });
+        if (apiResponse?.success && payload) {
+            const normalizedData = normalizeLoadedPayload(payload, boardId);
+            board.currentLoadedVersion = Number(normalizedData.version) || null;
+            console.log('✅ MoodBoard: данные загружены с сервера', normalizedData);
+            board.dataManager.loadData(normalizedData);
+            if (board?.coreMoodboard?.eventBus) {
+                board.coreMoodboard.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                    canUndo: Number(board.currentLoadedVersion) > 1,
+                    // Верхнюю границу версий backend не возвращает, поэтому оставляем переход вперед доступным.
+                    canRedo: true,
+                });
+            }
+            invokeOnLoad(board, { success: true, data: normalizedData });
         } else {
             console.log('📦 MoodBoard: нет данных с сервера, загружаем пустую доску');
             const seedData = getSeedData(board);
             board.dataManager.loadData(seedData);
+            if (board?.coreMoodboard?.eventBus) {
+                board.coreMoodboard.eventBus.emit(Events.UI.UpdateHistoryButtons, {
+                    canUndo: false,
+                    canRedo: false,
+                });
+            }
             invokeOnLoad(board, { success: true, data: seedData });
         }
     } catch (error) {
+        if (!fallbackToSeedOnError) {
+            throw error;
+        }
         console.warn('⚠️ MoodBoard: ошибка загрузки доски, создаем новую:', error.message);
         const seedData = getSeedData(board);
         board.dataManager.loadData(seedData);
@@ -65,7 +105,7 @@ export async function loadExistingBoard(board) {
     }
 }
 
-export async function loadFromApi(board, boardId = null) {
+export async function loadFromApi(board, boardId = null, version = null, options = {}) {
     const targetBoardId = boardId || board.options.boardId;
     if (!targetBoardId) {
         throw new Error('boardId не указан');
@@ -75,7 +115,7 @@ export async function loadFromApi(board, boardId = null) {
     board.options.boardId = targetBoardId;
 
     try {
-        await loadExistingBoard(board);
+        await loadExistingBoard(board, version, options);
     } finally {
         board.options.boardId = originalBoardId;
     }

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

@@ -175,7 +175,12 @@ export function openMindmapEditor(object, create = false) {
 
     this.eventBus.emit(Events.UI.TextEditStart, { objectId: objectId || null });
     if (objectId && typeof this.setSelection === 'function') {
-        this.setSelection([objectId]);
+        this._selectionSyncFromEditor = true;
+        try {
+            this.setSelection([objectId]);
+        } finally {
+            this._selectionSyncFromEditor = false;
+        }
     }
     updateGlobalTextEditorHandlesLayer();
 
@@ -496,6 +501,36 @@ export function openMindmapEditor(object, create = false) {
 
     hideStaticTextDuringEditing(this, objectId);
 
+    const ownerDoc = view?.ownerDocument || (typeof document !== 'undefined' ? document : null);
+    const onOutsideDocumentPointerDown = (event) => {
+        if (!this.textEditor?.active || this.textEditor.objectType !== 'mindmap') return;
+        const target = event?.target;
+        if (!target) return;
+        if (wrapper.contains(target)) return;
+        const sideButton = (typeof target.closest === 'function')
+            ? target.closest('.mb-mindmap-side-btn')
+            : null;
+        if (sideButton?.dataset?.side === 'bottom') return;
+        finalize(true);
+        if (typeof this.clearSelection === 'function') {
+            this.clearSelection();
+        }
+    };
+    const onEscapeDocumentKeyDown = (event) => {
+        if (!this.textEditor?.active || this.textEditor.objectType !== 'mindmap') return;
+        if (event?.key !== 'Escape') return;
+        if (typeof event.preventDefault === 'function') event.preventDefault();
+        if (typeof event.stopPropagation === 'function') event.stopPropagation();
+        finalize(false);
+        if (typeof this.clearSelection === 'function') {
+            this.clearSelection();
+        }
+    };
+    if (ownerDoc && typeof ownerDoc.addEventListener === 'function') {
+        ownerDoc.addEventListener('pointerdown', onOutsideDocumentPointerDown, true);
+        ownerDoc.addEventListener('keydown', onEscapeDocumentKeyDown, true);
+    }
+
     const syncEditorBoundsToObject = () => {
         if (!objectId || !wrapper || !view || !view.parentElement || !world) return;
         const staticEl = (typeof window !== 'undefined')
@@ -561,8 +596,14 @@ export function openMindmapEditor(object, create = false) {
     const finalize = (commit) => {
         if (finalized) return;
         finalized = true;
+        this._mindmapEditorLastClosedAt = Date.now();
+        this._mindmapEditorCloseSeq = Number(this._mindmapEditorCloseSeq || 0) + 1;
 
         unregisterEditorListeners(this.eventBus, editorListeners);
+        if (ownerDoc && typeof ownerDoc.removeEventListener === 'function') {
+            ownerDoc.removeEventListener('pointerdown', onOutsideDocumentPointerDown, true);
+            ownerDoc.removeEventListener('keydown', onEscapeDocumentKeyDown, true);
+        }
 
         textarea.removeEventListener('blur', onBlur);
         textarea.removeEventListener('keydown', onKeyDown);

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

@@ -250,7 +250,20 @@ export function onContextMenu(event) {
 export function onKeyDown(event) {
     // Проверяем, не активен ли текстовый редактор (редактирование названия файла или текста)
     if (this.textEditor && this.textEditor.active) {
-        return; // Не обрабатываем клавиши во время редактирования
+        if (event.key === 'Escape') {
+            if (this.textEditor.objectType === 'file') {
+                this._closeFileNameEditor(false);
+            } else {
+                this._closeTextEditor(false);
+            }
+            if (this.textEditor.objectType === 'mindmap') {
+                this.clearSelection();
+            }
+            if (event?.originalEvent?.preventDefault) {
+                event.originalEvent.preventDefault();
+            }
+        }
+        return; // Не обрабатываем остальные клавиши во время редактирования
     }
 
     switch (event.key) {

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

@@ -48,6 +48,13 @@ export function hasSelection() {
 }
 
 export function setSelection(objectIds) {
+    if (this.textEditor?.active && !this._selectionSyncFromEditor) {
+        if (this.textEditor.objectType === 'file' && typeof this._closeFileNameEditor === 'function') {
+            this._closeFileNameEditor(true);
+        } else if (typeof this._closeTextEditor === 'function') {
+            this._closeTextEditor(true);
+        }
+    }
     const prev = this.selection.toArray();
     this.selection.clear();
     this.selection.addMany(objectIds);

package/src/ui/mindmap/MindmapConnectionLayer.js

@@ -109,17 +109,14 @@ export class MindmapConnectionLayer {
         this.graphics = null;
         this.subscriptions = [];
         this._lastSegments = [];
+        this._eventsAttached = false;
     }
 
     attach() {
         if (!this.core?.pixi) return;
-        if (this.graphics) return;
-        this.graphics = new PIXI.Graphics();
-        this.graphics.name = 'mindmap-connection-layer';
-        this.graphics.zIndex = 2;
-        const world = this.core.pixi.worldLayer || this.core.pixi.app?.stage;
-        world?.addChild?.(this.graphics);
-        this._attachEvents();
+        if (!this._eventsAttached) {
+            this._attachEvents();
+        }
         this.updateAll();
     }
 
@@ -135,6 +132,7 @@ export class MindmapConnectionLayer {
     }
 
     _attachEvents() {
+        if (this._eventsAttached) return;
         const bindings = [
             [Events.Object.Created, () => this.updateAll()],
             [Events.Object.Deleted, () => this.updateAll()],
@@ -156,6 +154,7 @@ export class MindmapConnectionLayer {
             this.eventBus.on(event, handler);
             this.subscriptions.push([event, handler]);
         });
+        this._eventsAttached = true;
     }
 
     _detachEvents() {
@@ -165,10 +164,10 @@ export class MindmapConnectionLayer {
         }
         this.subscriptions.forEach(([event, handler]) => this.eventBus.off(event, handler));
         this.subscriptions = [];
+        this._eventsAttached = false;
     }
 
     updateAll() {
-        if (!this.graphics) return;
         const objects = asArray(this.core?.state?.state?.objects);
         const mindmaps = objects.filter(isMindmap);
         const byId = new Map(mindmaps.map((obj) => [obj.id, obj]));
@@ -184,6 +183,22 @@ export class MindmapConnectionLayer {
             return meta.role === 'child' && typeof meta.parentId === 'string' && meta.parentId.length > 0;
         });
 
+        if (children.length === 0) {
+            if (this.graphics) {
+                this.graphics.clear();
+            }
+            this._lastSegments = [];
+            return;
+        }
+
+        if (!this.graphics) {
+            this.graphics = new PIXI.Graphics();
+            this.graphics.name = 'mindmap-connection-layer';
+            this.graphics.zIndex = 2;
+            const world = this.core?.pixi?.worldLayer || this.core?.pixi?.app?.stage;
+            world?.addChild?.(this.graphics);
+        }
+
         const g = this.graphics;
         g.clear();
         this._lastSegments = [];

package/src/ui/toolbar/ToolbarActionRouter.js

@@ -9,13 +9,13 @@ export class ToolbarActionRouter {
 
     routeToolbarAction(button, toolType, toolId) {
         if (toolType === 'undo') {
-            this.toolbar.eventBus.emit(Events.Keyboard.Undo);
+            this.toolbar.eventBus.emit(Events.UI.LoadPrevVersion);
             this.toolbar.animateButton(button);
             return true;
         }
 
         if (toolType === 'redo') {
-            this.toolbar.eventBus.emit(Events.Keyboard.Redo);
+            this.toolbar.eventBus.emit(Events.UI.LoadNextVersion);
             this.toolbar.animateButton(button);
             return true;
         }