@sequent-org/moodboard 1.2.45 → 1.2.48

package/package.json

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

package/src/core/index.js

@@ -1854,6 +1854,17 @@ export class CoreMoodBoard {
             requestData.data = this.getBoardData();
         });
 
+        // Обновляем состояние board.grid при смене сетки
+        this.eventBus.on(Events.Grid.BoardDataChanged, ({ grid }) => {
+            try {
+                if (grid) {
+                    if (!this.state.state.board) this.state.state.board = {};
+                    this.state.state.board.grid = grid;
+                    this.state.markDirty();
+                }
+            } catch (_) {}
+        });
+
         // Обработка статуса сохранения
         this.eventBus.on(Events.Save.StatusChanged, (data) => {
             // Можно добавить UI индикатор статуса сохранения

package/src/grid/CrossGrid.js

@@ -24,19 +24,28 @@ export class CrossGrid extends BaseGrid {
      */
     createVisual() {
         const g = this.graphics;
-        // Прозрачность задаем через graphics.alpha из BaseGrid; штрих рисуем с полным альфа
-        g.lineStyle(this.crossLineWidth, this.color, 1);
+        // Прозрачность — через alpha графики (как у линейной сетки)
+        g.alpha = this.opacity;
+        // Тонкие чёткие линии как у линейной сетки: alignment = 0.5
+        try {
+            g.lineStyle({ width: Math.max(0.5, this.crossLineWidth), color: this.color, alpha: 1, alignment: 0.5 });
+        } catch (_) {
+            g.lineStyle(Math.max(0.5, this.crossLineWidth), this.color, 1);
+        }
 
         const hs = this.crossHalfSize;
 
         for (let x = 0; x <= this.width; x += this.size) {
             for (let y = 0; y <= this.height; y += this.size) {
+                // Выравниваем к полу-пикселю для чётких 1px линий
+                const px = Math.round(x) + 0.5;
+                const py = Math.round(y) + 0.5;
                 // Горизонтальная часть креста
-                g.moveTo(x - hs, y);
-                g.lineTo(x + hs, y);
+                g.moveTo(px - hs, py);
+                g.lineTo(px + hs, py);
                 // Вертикальная часть креста
-                g.moveTo(x, y - hs);
-                g.lineTo(x, y + hs);
+                g.moveTo(px, py - hs);
+                g.lineTo(px, py + hs);
             }
         }
     }

package/src/grid/GridFactory.js

@@ -76,19 +76,19 @@ export class GridFactory {
             },
             dot: {
                 enabled: true,
-                size: 20,
+                size: 30,
                 color: 0x6a6aff,
-                opacity: 0.5,
-                dotSize: 2,
+                opacity: 0.7,
+                dotSize: 1,
                 dotStyle: 'circle',
                 highlightIntersections: true
             },
             cross: {
                 enabled: true,
-                size: 40,
+                size: 90,
                 color: 0x6a6aff,
-                opacity: 0.5,
-                crossHalfSize: 4,
+                opacity: 0.3,
+                crossHalfSize: 30,
                 crossLineWidth: 1
             }
         };

package/src/moodboard/DataManager.js

@@ -16,6 +16,19 @@ export class DataManager {
         
         // Очищаем доску перед загрузкой
         this.clearBoard();
+
+        // Восстанавливаем тип сетки и её параметры до загрузки объектов
+        try {
+            const grid = data.grid || (data.board && data.board.grid);
+            if (grid && grid.type) {
+                const payload = { type: grid.type };
+                const opts = grid.options || null;
+                if (opts && typeof opts === 'object') {
+                    payload.options = opts;
+                }
+                this.coreMoodboard.eventBus.emit(this.coreMoodboard.Events?.UI?.GridChange || 'ui:grid:change', payload);
+            }
+        } catch (_) {}
         
         // Загружаем объекты
         if (data.objects && Array.isArray(data.objects)) {

package/src/services/BoardService.js

@@ -24,31 +24,51 @@ export class BoardService {
 		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 (_) {}
 
 		this._attachEvents();
 	}
 
 	_attachEvents() {
 		// Смена вида сетки из UI
-		this.eventBus.on(Events.UI.GridChange, ({ type }) => {
+		this.eventBus.on(Events.UI.GridChange, ({ type, options: overrideOptions }) => {
 			const size = this._getCanvasSize?.() || { width: 800, height: 600 };
 			if (type === 'off') {
 				this.grid?.setEnabled(false);
 				this.grid?.updateVisual();
 				this.pixi.setGrid(this.grid);
+				// Обновляем сохранённые данные
+				try {
+					this.eventBus.emit(Events.Grid.BoardDataChanged, {
+						grid: { type: 'off', options: this.grid?.serialize ? this.grid.serialize() : {} }
+					});
+				} catch (_) {}
 				return;
 			}
-			const options = {
+			const gridOptions = {
 				...GridFactory.getDefaultOptions(type),
 				enabled: true,
 				width: size.width,
-				height: size.height
+				height: size.height,
+				// Перекрываем входящими опциями (если пришли из сохранения)
+				...(overrideOptions || {})
 			};
 			try {
-				this.grid = GridFactory.createGrid(type, options);
+				this.grid = GridFactory.createGrid(type, gridOptions);
 				this.grid.updateVisual();
 				this.pixi.setGrid(this.grid);
 				this.eventBus.emit(Events.UI.GridCurrent, { type });
+				// Сообщаем об обновлении данных сетки для сохранения в boardData
+				try {
+					this.eventBus.emit(Events.Grid.BoardDataChanged, {
+						grid: { type, options: this.grid.serialize ? this.grid.serialize() : gridOptions }
+					});
+				} catch (_) {}
 			} catch (e) {
 				console.warn('Unknown grid type:', type);
 			}