@sequent-org/moodboard 1.2.57 → 1.2.60

package/package.json

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

package/src/moodboard/MoodBoard.js

@@ -223,10 +223,6 @@ export class MoodBoard {
                 : color;
             if (this.coreMoodboard?.pixi?.app?.renderer) {
                 this.coreMoodboard.pixi.app.renderer.backgroundColor = hex;
-                // Сигнализируем, что настройки доски изменились (для автосохранения)
-                try {
-                    this.coreMoodboard.eventBus.emit(Events.Grid.BoardDataChanged, { settings: { backgroundColor: color } });
-                } catch (_) {}
             }
         });
     }

package/src/services/ZoomPanController.js

@@ -32,12 +32,7 @@ export class ZoomPanController {
 			world.scale.set(newScale);
 			world.x = x - worldX * newScale;
 			world.y = y - worldY * newScale;
-			const pct = Math.round(newScale * 100);
-			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: pct });
-			// Сигнализируем об изменении настроек (чтобы сохранить текущий зум)
-			try {
-				this.eventBus.emit(Events.Grid.BoardDataChanged, { settings: { zoom: { current: newScale, percentage: pct } } });
-			} catch (_) {}
+			this.eventBus.emit(Events.UI.ZoomPercent, { percentage: Math.round(newScale * 100) });
 		});
 
 		// Кнопки зума из UI

package/src/ui/Topbar.js

@@ -11,7 +11,6 @@ export class Topbar {
         this.theme = theme;
         this.element = null;
         this._paintPopover = null;
-        this._currentBoardHex = null; // фактический цвет фона доски (#rrggbb)
         // Загружаем иконки
         this.iconLoader = new TopbarIconLoader();
         this.icons = this.iconLoader.icons;
@@ -37,37 +36,26 @@ export class Topbar {
         
         this.createTopbar();
         this.attachEvents();
+        // Активируем дефолтную кнопку (line) до прихода события из ядра
+        this.setActive('line');
 
         // Синхронизация активного состояния по событию из ядра
         this.eventBus.on(Events.UI.GridCurrent, ({ type }) => {
             this.setActive(type);
         });
 
-        // Обновляем цвет кнопки "краски" и текущий board-hex при выборе цвета фона
-        this.eventBus.on(Events.UI.PaintPick, ({ btnHex, color }) => {
-            // color — фактический цвет фона доски (может быть #rrggbb или number)
-            const normalizeHex = (v) => {
-                if (!v) return null;
-                if (typeof v === 'number') {
-                    return `#${v.toString(16).padStart(6,'0')}`.toLowerCase();
-                }
-                if (typeof v === 'string') {
-                    const s = v.startsWith('#') ? v : `#${v}`;
-                    return s.toLowerCase();
-                }
-                return null;
-            };
-            const boardHex = normalizeHex(color);
-            if (boardHex) this._currentBoardHex = boardHex;
-            const mapped = btnHex || this.mapBoardToBtnHex(boardHex);
-            if (mapped) this.setPaintButtonHex(mapped);
+        // Обновляем цвет кнопки "краски" при выборе цвета фона
+        this.eventBus.on(Events.UI.PaintPick, ({ btnHex }) => {
+            if (!btnHex) return;
+            this.setPaintButtonHex(btnHex);
         });
 
         // Инициализация цвета кнопки "краска" из текущего фона доски, если доступен
         try {
             const bgHex = this._getCurrentBoardBackgroundHex();
             if (bgHex) {
-                this.setCurrentBoardHex(bgHex);
+                const mapped = this.mapBoardToBtnHex(bgHex);
+                this.setPaintButtonHex(mapped);
             }
         } catch (_) {}
     }
@@ -190,8 +178,7 @@ export class Topbar {
     /** Возвращает текущий цвет фона канваса как hex-строку #RRGGBB */
     _getCurrentBoardBackgroundHex() {
         try {
-            // Предпочтительно из CoreMoodBoard (актуальный путь в проекте)
-            const app = window?.moodboard?.coreMoodboard?.pixi?.app || window?.moodboard?.core?.pixi?.app;
+            const 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')}`;
@@ -216,15 +203,6 @@ export class Topbar {
         }
     }
 
-    /** Задать текущий фактический цвет фона и синхронизировать кнопку */
-    setCurrentBoardHex(boardHex) {
-        if (!boardHex) return;
-        const v = String(boardHex).toLowerCase();
-        this._currentBoardHex = v.startsWith('#') ? v : `#${v}`;
-        const mapped = this.mapBoardToBtnHex(this._currentBoardHex) || this._currentBoardHex;
-        this.setPaintButtonHex(mapped);
-    }
-
     setActive(type) {
         const buttons = this.element.querySelectorAll('.moodboard-topbar__button');
         buttons.forEach((b) => b.classList.remove('moodboard-topbar__button--active'));
@@ -277,9 +255,8 @@ export class Topbar {
             b.style.borderColor = darken(c.hex, 0.35);
             // Цвет галочки — чёрный для максимальной видимости
             b.style.color = '#111';
-            // Для надёжного сравнения — сохраняем оба значения в dataset
-            b.dataset.hex = String(c.hex).toLowerCase();     // цвет кружка-кнопки
-            b.dataset.board = String(c.board).toLowerCase(); // фактический цвет фона доски
+            // Для надёжного сравнения — сохраняем исходный hex в dataset
+            b.dataset.hex = String(c.hex).toLowerCase();
             // Галочка по центру
             const tick = document.createElement('i');
             tick.className = 'moodboard-topbar__paint-tick';
@@ -302,37 +279,11 @@ export class Topbar {
         });
         pop.appendChild(grid);
 
-        // Выделяем активный цвет галочкой (надежно — по data-board, с fallback ближайшего)
+        // Выделяем активный цвет галочкой
         try {
-            // Текущий цвет фона доски (#rrggbb)
-            const currentBoardHex = (this._currentBoardHex || this._getCurrentBoardBackgroundHex() || '').toLowerCase();
-            // Пытаемся найти точное совпадение по data-board
-            let match = currentBoardHex ? grid.querySelector(`[data-board="${currentBoardHex}"]`) : null;
-            // Если точного совпадения нет — выбираем ближайший по евклидовой дистанции в RGB
-            if (!match) {
-                const hexToRgb = (hex) => {
-                    try {
-                        const h = hex.replace('#','');
-                        return {
-                            r: parseInt(h.substring(0,2), 16),
-                            g: parseInt(h.substring(2,4), 16),
-                            b: parseInt(h.substring(4,6), 16)
-                        };
-                    } catch (_) { return { r: 0, g: 0, b: 0 }; }
-                };
-                const dist2 = (a, b) => {
-                    const dr = a.r - b.r, dg = a.g - b.g, db = a.b - b.b;
-                    return dr*dr + dg*dg + db*db;
-                };
-                const target = hexToRgb(currentBoardHex || '#f7fbff');
-                let best = null, bestD = Infinity;
-                Array.from(grid.children).forEach((el) => {
-                    const boardHex = el.dataset.board || '';
-                    const d = dist2(target, hexToRgb(boardHex));
-                    if (d < bestD) { bestD = d; best = el; }
-                });
-                match = best;
-            }
+            const boardHex = this._getCurrentBoardBackgroundHex();
+            const targetHex = (this.mapBoardToBtnHex(boardHex) || '#B3E5FC').toLowerCase();
+            const match = grid.querySelector(`[data-hex="${targetHex}"]`);
             if (match) match.classList.add('is-active');
         } catch (_) {}
 
@@ -342,7 +293,16 @@ export class Topbar {
         pop.style.left = `${rect.left - this.element.getBoundingClientRect().left}px`;
         pop.style.top = `${rect.bottom - this.element.getBoundingClientRect().top + 6}px`;
 
-        // (дополнительная подсветка не требуется — активируем по data-hex выше)
+        // Подсветить текущий активный кружок (с галочкой)
+        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;