@sequent-org/moodboard 1.2.83 → 1.2.85

package/package.json

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

package/src/grid/BaseGrid.js

@@ -7,10 +7,12 @@ export class BaseGrid {
     constructor(options = {}) {
         this.type = 'base';
         this.enabled = options.enabled ?? false;
-        this.size = options.size || 20;
-        this.color = options.color || 0xE0E0E0;
-        this.opacity = options.opacity || 0.5;
-        this.lineWidth = options.lineWidth || 1;
+        // Значения параметров визуала не задаём по умолчанию здесь.
+        // Они должны приходить из GridFactory.getDefaultOptions(type).
+        this.size = options.size;
+        this.color = options.color;
+        this.opacity = options.opacity;
+        this.lineWidth = options.lineWidth;
         
         // Размеры области отрисовки
         this.width = options.width || 1920;
@@ -18,7 +20,9 @@ export class BaseGrid {
         
         // PIXI графика
         this.graphics = new PIXI.Graphics();
-        this.graphics.alpha = this.opacity;
+        if (typeof this.opacity === 'number') {
+            this.graphics.alpha = this.opacity;
+        }
         
         // Настройки привязки
         this.snapEnabled = options.snapEnabled ?? true;

package/src/grid/LineGrid.js

@@ -9,14 +9,14 @@ export class LineGrid extends BaseGrid {
         this.type = 'line';
         
         // Дополнительные настройки для линейной сетки
-        this.showSubGrid = options.showSubGrid ?? false;
-        this.subGridDivisions = options.subGridDivisions || 4;
-        this.subGridColor = options.subGridColor || 0xE3E3E3;
-        this.subGridOpacity = options.subGridOpacity || 0.45;
-        // Более тонкие основные линии и более контрастные
-        this.lineWidth = Math.max(0.5, (options.lineWidth || this.lineWidth) / 2);
-        this.color = options.color || 0xB0B0B0;
-        this.opacity = options.opacity || 0.9;
+        // Параметры не задаём по умолчанию здесь — их поставляет GridFactory.
+        this.showSubGrid = options.showSubGrid;
+        this.subGridDivisions = options.subGridDivisions;
+        this.subGridColor = options.subGridColor;
+        this.subGridOpacity = options.subGridOpacity;
+        this.lineWidth = options.lineWidth;
+        this.color = options.color;
+        this.opacity = options.opacity;
     }
     
     /**
@@ -24,7 +24,9 @@ export class LineGrid extends BaseGrid {
      */
     createVisual() {
         // Применяем непрозрачность на графику (умножится на alpha линий)
-        this.graphics.alpha = this.opacity;
+        if (typeof this.opacity === 'number') {
+            this.graphics.alpha = this.opacity;
+        }
         try {
             // В новых версиях можно указать alignment для большей чёткости
             this.graphics.lineStyle({ width: this.lineWidth, color: this.color, alpha: 1, alignment: 0.5 });

package/src/moodboard/MoodBoard.js

@@ -19,6 +19,7 @@ import { FilePropertiesPanel } from '../ui/FilePropertiesPanel.js';
 import { AlignmentGuides } from '../tools/AlignmentGuides.js';
 import { ImageUploadService } from '../services/ImageUploadService.js';
 import { SettingsApplier } from '../services/SettingsApplier.js';
+import { GridFactory } from '../grid/GridFactory.js';
 
 /**
  * Готовый MoodBoard с UI - главный класс пакета
@@ -101,13 +102,6 @@ export class MoodBoard {
             // Инициализируем UI
             this.initToolbar();
             this.initTopbar();
-            // Включаем дефолтную сетку (вариант 1 — line), если у доски нет сохранённой
-            try {
-                const savedGridType = this.coreMoodboard?.state?.state?.board?.grid?.type;
-                if (!savedGridType && this.settingsApplier) {
-                    this.settingsApplier.apply({ grid: { type: 'line' } });
-                }
-            } catch (_) {}
             this.initZoombar();
             this.initMapbar();
             this.initContextMenu();

package/src/services/SettingsApplier.js

@@ -15,7 +15,8 @@ export class SettingsApplier {
 
     set(partial) {
         this.settings = { ...this.settings, ...(partial || {}) };
-        this.apply(this.settings);
+        // Применяем только изменённые части, чтобы не трогать сетку при смене фона и наоборот
+        this.apply(partial || {});
         // Сообщаем системе об изменении настроек для автосохранения
         try {
             this.eventBus && this.eventBus.emit(Events.Grid.BoardDataChanged, { settings: this.get() });
@@ -26,12 +27,13 @@ export class SettingsApplier {
         return { ...this.settings };
     }
 
-    apply(settings = {}) {
-        this.settings = { ...this.settings, ...settings };
+    apply(partial = {}) {
+        // Копим полные настройки, но применяем только то, что пришло в partial
+        this.settings = { ...this.settings, ...partial };
         const s = this.settings;
 
         // 1) Фон
-        if (s.backgroundColor && this.pixi?.app?.renderer) {
+        if (partial.backgroundColor && this.pixi?.app?.renderer) {
             const bgInt = this._toIntColor(s.backgroundColor);
             if (bgInt != null) this.pixi.app.renderer.backgroundColor = bgInt;
             // Синхронизация UI цвета (если доступен topbar)
@@ -43,17 +45,22 @@ export class SettingsApplier {
             }
         }
 
-        // 2) Сетка
-        if (s.grid && s.grid.type) {
+        // 2) Сетка — применяем только если grid пришёл в partial
+        if (partial.grid && s.grid && s.grid.type) {
             try {
                 const payload = { type: s.grid.type };
-                // Пробрасываем дополнительные опции, если есть
-                const options = s.grid.options || {
-                    size: s.grid.size,
-                    color: this._maybeInt(s.grid.color),
-                    enabled: s.grid.visible !== false
-                };
-                if (options) payload.options = options;
+                // Пробрасываем только явно заданные опции, чтобы не затирать дефолты фабрики
+                const overrides = {};
+                if (s.grid.options && typeof s.grid.options === 'object') {
+                    Object.keys(s.grid.options).forEach((k) => {
+                        const v = s.grid.options[k];
+                        if (v !== undefined) overrides[k] = k === 'color' ? this._maybeInt(v) : v;
+                    });
+                }
+                if (s.grid.size !== undefined) overrides.size = s.grid.size;
+                if (s.grid.color !== undefined) overrides.color = this._maybeInt(s.grid.color);
+                if (s.grid.visible !== undefined) overrides.enabled = s.grid.visible !== false;
+                if (Object.keys(overrides).length > 0) payload.options = overrides;
                 this.eventBus.emit(Events.UI.GridChange, payload);
                 if (this.ui.topbar && s.grid.type) {
                     this.ui.topbar.setActive(s.grid.type);
@@ -62,7 +69,7 @@ export class SettingsApplier {
         }
 
         // 3) Зум
-        if (s.zoom && (typeof s.zoom.current === 'number')) {
+        if (partial.zoom && s.zoom && (typeof s.zoom.current === 'number')) {
             const world = this.pixi?.worldLayer || this.pixi?.app?.stage;
             if (world) {
                 const z = Math.max(0.1, Math.min(5, s.zoom.current));
@@ -72,7 +79,7 @@ export class SettingsApplier {
         }
 
         // 4) Панорамирование (позиция мира)
-        if (s.pan && typeof s.pan.x === 'number' && typeof s.pan.y === 'number') {
+        if (partial.pan && s.pan && typeof s.pan.x === 'number' && typeof s.pan.y === 'number') {
             const world = this.pixi?.worldLayer || this.pixi?.app?.stage;
             if (world) {
                 world.x = s.pan.x;