@sequent-org/moodboard 1.2.55 → 1.2.56

package/package.json

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

package/src/ui/Topbar.js

@@ -11,6 +11,7 @@ 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;
@@ -42,18 +43,31 @@ export class Topbar {
             this.setActive(type);
         });
 
-        // Обновляем цвет кнопки "краски" при выборе цвета фона
-        this.eventBus.on(Events.UI.PaintPick, ({ btnHex }) => {
-            if (!btnHex) return;
-            this.setPaintButtonHex(btnHex);
+        // Обновляем цвет кнопки "краски" и текущий 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);
         });
 
         // Инициализация цвета кнопки "краска" из текущего фона доски, если доступен
         try {
             const bgHex = this._getCurrentBoardBackgroundHex();
             if (bgHex) {
-                const mapped = this.mapBoardToBtnHex(bgHex);
-                this.setPaintButtonHex(mapped);
+                this.setCurrentBoardHex(bgHex);
             }
         } catch (_) {}
     }
@@ -201,6 +215,15 @@ 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'));
@@ -281,7 +304,7 @@ export class Topbar {
         // Выделяем активный цвет галочкой (надежно — по data-board, с fallback ближайшего)
         try {
             // Текущий цвет фона доски (#rrggbb)
-            const currentBoardHex = (this._getCurrentBoardBackgroundHex() || '').toLowerCase();
+            const currentBoardHex = (this._currentBoardHex || this._getCurrentBoardBackgroundHex() || '').toLowerCase();
             // Пытаемся найти точное совпадение по data-board
             let match = currentBoardHex ? grid.querySelector(`[data-board="${currentBoardHex}"]`) : null;
             // Если точного совпадения нет — выбираем ближайший по евклидовой дистанции в RGB