@sequent-org/moodboard 1.2.60 → 1.2.62

package/package.json

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

package/src/moodboard/DataManager.js

@@ -17,46 +17,33 @@ export class DataManager {
         // Очищаем доску перед загрузкой
         this.clearBoard();
 
-        // Восстанавливаем тип сетки и её параметры до загрузки объектов
+        // Применяем settings централизованно (если есть апплаер), иначе — старым способом
         try {
-            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;
-                if (opts && typeof opts === 'object') {
-                    payload.options = opts;
+            if (this.coreMoodboard?.settingsApplier && data.settings) {
+                this.coreMoodboard.settingsApplier.apply(data.settings);
+            } else {
+                // fallback оставлен для совместимости (если где-то аплеер не создан)
+                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;
+                    if (opts && typeof opts === 'object') payload.options = opts;
+                    this.coreMoodboard.eventBus.emit(this.coreMoodboard.Events?.UI?.GridChange || 'ui:grid:change', payload);
+                }
+                const settings = data.settings || {};
+                const bg = settings.backgroundColor;
+                if (bg && this.coreMoodboard?.pixi?.app?.renderer) {
+                    const s = typeof bg === 'string' ? (bg.startsWith('#') ? bg.slice(1) : bg) : null;
+                    const bgInt = typeof bg === 'number' ? bg : (s ? parseInt(s, 16) : null);
+                    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 (_) {}
                 }
-                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 (_) {}
         

package/src/moodboard/MoodBoard.js

@@ -18,6 +18,7 @@ import { NotePropertiesPanel } from '../ui/NotePropertiesPanel.js';
 import { FilePropertiesPanel } from '../ui/FilePropertiesPanel.js';
 import { AlignmentGuides } from '../tools/AlignmentGuides.js';
 import { ImageUploadService } from '../services/ImageUploadService.js';
+import { SettingsApplier } from '../services/SettingsApplier.js';
 
 /**
  * Готовый MoodBoard с UI - главный класс пакета
@@ -84,6 +85,15 @@ export class MoodBoard {
             // Инициализируем CoreMoodBoard
             await this.initCoreMoodBoard();
             
+            // Настройки (единая точка применения)
+            this.settingsApplier = new SettingsApplier(
+                this.coreMoodboard.eventBus,
+                this.coreMoodboard.pixi,
+                this.coreMoodboard.boardService || null
+            );
+            // Делаем доступным для других подсистем
+            this.coreMoodboard.settingsApplier = this.settingsApplier;
+            
             // Создаем менеджеры
             this.dataManager = new DataManager(this.coreMoodboard);
             this.actionHandler = new ActionHandler(this.dataManager, this.workspaceManager);
@@ -131,6 +141,10 @@ export class MoodBoard {
             
             // Предоставляем доступ к сервису через core
             this.coreMoodboard.imageUploadService = this.imageUploadService;
+            // Передаем ссылку на topbar в апплаер настроек для синхронизации UI
+            if (this.settingsApplier && this.topbar) {
+                this.settingsApplier.setUI({ topbar: this.topbar });
+            }
             
             // Настраиваем коллбеки событий
             this.setupEventCallbacks();

package/src/services/SettingsApplier.js

@@ -0,0 +1,97 @@
+import { Events } from '../core/events/Events.js';
+
+export class SettingsApplier {
+    constructor(eventBus, pixi, boardService = null, uiRefs = {}) {
+        this.eventBus = eventBus;
+        this.pixi = pixi;
+        this.boardService = boardService;
+        this.ui = uiRefs || {};
+        this.settings = {};
+    }
+
+    setUI(uiRefs = {}) {
+        this.ui = { ...this.ui, ...uiRefs };
+    }
+
+    set(partial) {
+        this.settings = { ...this.settings, ...(partial || {}) };
+        this.apply(this.settings);
+    }
+
+    get() {
+        return { ...this.settings };
+    }
+
+    apply(settings = {}) {
+        this.settings = { ...this.settings, ...settings };
+        const s = this.settings;
+
+        // 1) Фон
+        if (s.backgroundColor && this.pixi?.app?.renderer) {
+            const bgInt = this._toIntColor(s.backgroundColor);
+            if (bgInt != null) this.pixi.app.renderer.backgroundColor = bgInt;
+            // Синхронизация UI цвета (если доступен topbar)
+            if (this.ui.topbar) {
+                try {
+                    const boardHex = this._toHex(bgInt);
+                    this.ui.topbar.setCurrentBoardHex(boardHex);
+                } catch (_) {}
+            }
+        }
+
+        // 2) Сетка
+        if (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;
+                this.eventBus.emit(Events.UI.GridChange, payload);
+                if (this.ui.topbar && s.grid.type) {
+                    this.ui.topbar.setActive(s.grid.type);
+                }
+            } catch (_) {}
+        }
+
+        // 3) Зум
+        if (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));
+                world.scale.set(z);
+                try { this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(z * 100) }); } catch (_) {}
+            }
+        }
+    }
+
+    _toIntColor(hexOrInt) {
+        if (typeof hexOrInt === 'number') return hexOrInt;
+        if (typeof hexOrInt === 'string') {
+            const s = hexOrInt.startsWith('#') ? hexOrInt.slice(1) : hexOrInt;
+            const n = parseInt(s, 16);
+            return Number.isFinite(n) ? n : null;
+        }
+        return null;
+    }
+
+    _maybeInt(v) {
+        if (v == null) return v;
+        if (typeof v === 'number') return v;
+        if (typeof v === 'string') {
+            const s = v.startsWith('#') ? v.slice(1) : v;
+            const n = parseInt(s, 16);
+            return Number.isFinite(n) ? n : v;
+        }
+        return v;
+    }
+
+    _toHex(intColor) {
+        try { return `#${(intColor >>> 0).toString(16).padStart(6, '0')}`.toLowerCase(); } catch (_) { return '#f5f5f5'; }
+    }
+}
+
+

package/src/ui/Topbar.js

@@ -37,7 +37,7 @@ export class Topbar {
         this.createTopbar();
         this.attachEvents();
         // Активируем дефолтную кнопку (line) до прихода события из ядра
-        this.setActive('line');
+        // не подсвечиваем дефолт до прихода актуального типа из ядра
 
         // Синхронизация активного состояния по событию из ядра
         this.eventBus.on(Events.UI.GridCurrent, ({ type }) => {
@@ -50,11 +50,13 @@ export class Topbar {
             this.setPaintButtonHex(btnHex);
         });
 
-        // Инициализация цвета кнопки "краска" из текущего фона доски, если доступен
+        // Инициализация цвета кнопки "краска" из настроек (или фона рендерера)
         try {
-            const bgHex = this._getCurrentBoardBackgroundHex();
+            const ap = window?.moodboard?.coreMoodboard?.settingsApplier;
+            const bgHex = (ap && ap.get && ap.get().backgroundColor) || this._getCurrentBoardBackgroundHex();
             if (bgHex) {
-                const mapped = this.mapBoardToBtnHex(bgHex);
+                this._currentBoardHex = String(bgHex).toLowerCase();
+                const mapped = this.mapBoardToBtnHex(this._currentBoardHex);
                 this.setPaintButtonHex(mapped);
             }
         } catch (_) {}
@@ -178,7 +180,7 @@ export class Topbar {
     /** Возвращает текущий цвет фона канваса как hex-строку #RRGGBB */
     _getCurrentBoardBackgroundHex() {
         try {
-            const app = window?.moodboard?.core?.pixi?.app;
+            const app = window?.moodboard?.coreMoodboard?.pixi?.app || window?.moodboard?.core?.pixi?.app;
             const colorInt = app?.renderer?.background?.color ?? app?.renderer?.backgroundColor;
             if (typeof colorInt !== 'number') return null;
             const hex = `#${colorInt.toString(16).padStart(6, '0')}`;
@@ -255,8 +257,9 @@ export class Topbar {
             b.style.borderColor = darken(c.hex, 0.35);
             // Цвет галочки — чёрный для максимальной видимости
             b.style.color = '#111';
-            // Для надёжного сравнения — сохраняем исходный hex в dataset
+            // Для надёжного сравнения — сохраняем оба значения в dataset
             b.dataset.hex = String(c.hex).toLowerCase();
+            b.dataset.board = String(c.board).toLowerCase();
             // Галочка по центру
             const tick = document.createElement('i');
             tick.className = 'moodboard-topbar__paint-tick';
@@ -279,11 +282,16 @@ export class Topbar {
         });
         pop.appendChild(grid);
 
-        // Выделяем активный цвет галочкой
+        // Выделяем активный цвет галочкой по фактическому boardHex
         try {
-            const boardHex = this._getCurrentBoardBackgroundHex();
-            const targetHex = (this.mapBoardToBtnHex(boardHex) || '#B3E5FC').toLowerCase();
-            const match = grid.querySelector(`[data-hex="${targetHex}"]`);
+            const ap = window?.moodboard?.coreMoodboard?.settingsApplier;
+            const boardHex = (
+                (ap && ap.get && ap.get().backgroundColor) ||
+                this._currentBoardHex ||
+                this._getCurrentBoardBackgroundHex() ||
+                ''
+            ).toLowerCase();
+            const match = boardHex ? grid.querySelector(`[data-board="${boardHex}"]`) : null;
             if (match) match.classList.add('is-active');
         } catch (_) {}
 
@@ -293,16 +301,7 @@ export class Topbar {
         pop.style.left = `${rect.left - this.element.getBoundingClientRect().left}px`;
         pop.style.top = `${rect.bottom - this.element.getBoundingClientRect().top + 6}px`;
 
-        // Подсветить текущий активный кружок (с галочкой)
-        try {
-            const currentBtnHex = (this._paintBtn && getComputedStyle(this._paintBtn).getPropertyValue('--paint-btn-color')) || '';
-            const normalized = currentBtnHex.trim() || '#B3E5FC';
-            const match = Array.from(grid.children).find((el) => {
-                const bg = el && el.style && el.style.background ? el.style.background.toLowerCase() : '';
-                return bg === normalized.toLowerCase();
-            });
-            if (match) match.classList.add('is-active');
-        } catch (_) {}
+        // (дополнительная подсветка не требуется — см. блок выше)
 
         this.element.appendChild(pop);
         this._paintPopover = pop;