@sequent-org/moodboard 1.2.54 → 1.2.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.2.54",
+  "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'));
@@ -253,8 +276,9 @@ export class Topbar {
             b.style.borderColor = darken(c.hex, 0.35);
             // Цвет галочки — чёрный для максимальной видимости
             b.style.color = '#111';
-            // Для надёжного сравнения — сохраняем исходный hex в dataset
-            b.dataset.hex = String(c.hex).toLowerCase();
+            // Для надёжного сравнения — сохраняем оба значения в 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';
@@ -277,21 +301,37 @@ export class Topbar {
         });
         pop.appendChild(grid);
 
-        // Выделяем активный цвет галочкой (надежно — по data-hex)
+        // Выделяем активный цвет галочкой (надежно — по data-board, с fallback ближайшего)
         try {
-            // 1) Пытаемся получить текущий цвет фона канваса
-            const boardHex = this._getCurrentBoardBackgroundHex();
-            // 2) Маппим к hex кнопки палитры
-            let targetHex = this.mapBoardToBtnHex(boardHex || '') || '';
-            // 3) Если не удалось — пробуем взять цвет с кнопки (custom prop)
-            if (!targetHex && this._paintBtn) {
-                const prop = getComputedStyle(this._paintBtn).getPropertyValue('--paint-btn-color') || '';
-                targetHex = prop.trim();
+            // Текущий цвет фона доски (#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;
             }
-            // 4) Фолбэк — первый цвет из палитры
-            if (!targetHex) targetHex = '#B3E5FC';
-            const normalized = String(targetHex).trim().toLowerCase();
-            const match = grid.querySelector(`[data-hex="${normalized}"]`);
             if (match) match.classList.add('is-active');
         } catch (_) {}