@sequent-org/moodboard 1.2.50 → 1.2.52

package/package.json

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

package/src/core/ApiClient.js

@@ -42,8 +42,12 @@ export class ApiClient {
 
     async saveBoard(boardId, boardData) {
         try {
+            // Поддержка нового формата: { boardData: {...}, settings: {...} }
+            let payloadBoardData = boardData && boardData.boardData ? boardData.boardData : boardData;
+            let payloadSettings = boardData && boardData.settings ? boardData.settings : undefined;
+
             // Фильтруем объекты изображений и файлов - убираем избыточные данные
-            const cleanedData = this._cleanObjectData(boardData);
+            const cleanedData = this._cleanObjectData(payloadBoardData);
 
             const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
 
@@ -58,7 +62,8 @@ export class ApiClient {
                 credentials: 'same-origin',
                 body: JSON.stringify({
                     boardId: boardId,
-                    boardData: cleanedData
+                    boardData: cleanedData,
+                    settings: payloadSettings
                 })
             });
 

package/src/core/index.js

@@ -2151,7 +2151,52 @@ export class CoreMoodBoard {
      * Получение данных доски для сохранения
      */
     getBoardData() {
-        return this.state.serialize();
+        // Базовые данные доски (объекты и метаданные из state)
+        const s = this.state.serialize();
+        const boardData = {
+            objects: Array.isArray(s.objects) ? s.objects : [],
+            name: s.name || s.title || 'Untitled Board',
+            description: s.description || null
+        };
+
+        // Настройки (settings): фон, сетка, зум, размеры канваса
+        const app = this.pixi?.app;
+        const rendererBg = app?.renderer?.background?.color ?? app?.renderer?.backgroundColor;
+        const toHex = (num) => {
+            try { return '#' + Number(num >>> 0).toString(16).padStart(6, '0'); } catch (_) { return '#F5F5F5'; }
+        };
+        const world = this.pixi?.worldLayer || app?.stage;
+        const currentZoom = Math.max(0.1, Math.min(5, world?.scale?.x || 1));
+        const canvasW = app?.view?.clientWidth || app?.view?.width || 0;
+        const canvasH = app?.view?.clientHeight || app?.view?.height || 0;
+
+        // Сетка: берём то, что накапливается в state.board.grid через BoardService
+        const gridState = (this.state?.state?.board && this.state.state.board.grid) ? this.state.state.board.grid : null;
+        const gridSettings = (() => {
+            if (gridState && gridState.type) {
+                // Если храним полные options от serialize(), извлекаем ключевые
+                const opts = gridState.options || {};
+                // Унификация ключей под формат из задачи
+                return {
+                    type: gridState.type,
+                    size: opts.size || 20,
+                    visible: opts.enabled !== false,
+                    color: toHex(opts.color ?? 0xE0E0E0)
+                };
+            }
+            return null;
+        })();
+
+        const settings = {
+            backgroundColor: toHex(rendererBg ?? 0xF5F5F5),
+            grid: gridSettings || undefined,
+            zoom: { min: 0.1, max: 5.0, default: 1.0, current: currentZoom },
+            canvas: { width: canvasW, height: canvasH }
+        };
+
+        const boardId = (this.state?.state?.board && this.state.state.board.id) || this.options?.boardId || null;
+
+        return { id: boardId, boardData, settings };
     }
 
     /**

package/src/moodboard/DataManager.js

@@ -19,7 +19,7 @@ export class DataManager {
 
         // Восстанавливаем тип сетки и её параметры до загрузки объектов
         try {
-            const grid = data.grid || (data.board && data.board.grid);
+            const grid = (data.settings && data.settings.grid) || data.grid || (data.board && data.board.grid);
             if (grid && grid.type) {
                 const payload = { type: grid.type };
                 const opts = grid.options || null;
@@ -29,6 +29,36 @@ export class DataManager {
                 this.coreMoodboard.eventBus.emit(this.coreMoodboard.Events?.UI?.GridChange || 'ui:grid:change', payload);
             }
         } catch (_) {}
+
+        // Восстановим фон и зум из settings, если есть
+        try {
+            const settings = data.settings || {};
+            // Фон
+            const bg = settings.backgroundColor;
+            if (bg && this.coreMoodboard?.pixi?.app?.renderer) {
+                const parseHex = (v) => {
+                    if (typeof v === 'number') return v;
+                    if (typeof v === 'string') {
+                        const s = v.startsWith('#') ? v.slice(1) : v;
+                        const n = parseInt(s, 16);
+                        if (Number.isFinite(n)) return n;
+                    }
+                    return null;
+                };
+                const bgInt = parseHex(bg);
+                if (bgInt != null) this.coreMoodboard.pixi.app.renderer.backgroundColor = bgInt;
+            }
+            // Зум
+            const z = settings.zoom && (settings.zoom.current || settings.zoom.default);
+            const world = this.coreMoodboard?.pixi?.worldLayer || this.coreMoodboard?.pixi?.app?.stage;
+            if (world && Number.isFinite(z) && z > 0) {
+                world.scale.set(z);
+                const percent = Math.round(z * 100);
+                try {
+                    this.coreMoodboard.eventBus.emit('ui:zoom:percent', { percentage: percent });
+                } catch (_) {}
+            }
+        } catch (_) {}
         
         // Загружаем объекты
         if (data.objects && Array.isArray(data.objects)) {

package/src/services/BoardService.js

@@ -11,25 +11,9 @@ export class BoardService {
 
 	async init(getCanvasSize) {
 		this._getCanvasSize = getCanvasSize;
-		// Инициализируем сетку (по умолчанию линейная)
-		const canvasSize = (this._getCanvasSize?.() || {});
-		this.grid = GridFactory.createGrid('line', {
-			enabled: true,
-			size: 32,
-			width: canvasSize.width || 800,
-			height: canvasSize.height || 600,
-			color: 0x6a6aff,
-			opacity: 0.4
-		});
-		this.grid.updateVisual();
-		this.pixi.setGrid(this.grid);
-		this.eventBus.emit(Events.UI.GridCurrent, { type: 'line' });
-		// Сообщаем о текущих данных сетки для сохранения в boardData
-		try {
-			this.eventBus.emit(Events.Grid.BoardDataChanged, {
-				grid: { type: 'line', options: this.grid.serialize ? this.grid.serialize() : {} }
-			});
-		} catch (_) {}
+		// Не создаём сетку по умолчанию, чтобы избежать визуального переключения.
+		// Сетка будет установлена из сохранённых настроек через Events.UI.GridChange.
+		this.grid = null;
 
 		this._attachEvents();
 	}