@sequent-org/moodboard 1.4.53 → 1.4.54

package/package.json

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

package/src/grid/BaseGrid.js

@@ -20,6 +20,9 @@ export class BaseGrid {
         this.color = options.color;
         this.opacity = options.opacity;
         this.lineWidth = options.lineWidth;
+        // Эфемерный override цвета сетки (производный от фона доски, не сериализуется).
+        // null — используется штатный цвет/бэнды типа сетки.
+        this.colorOverride = null;
         
         // Размеры области отрисовки
         this.width = options.width || 1920;
@@ -169,6 +172,15 @@ export class BaseGrid {
         this.color = color;
         this.updateVisual();
     }
+
+    /**
+     * Устанавливает override-цвет сетки (производный от фона доски).
+     * @param {number|null} color — int-цвет либо null для сброса к штатному.
+     */
+    setColorOverride(color) {
+        this.colorOverride = (typeof color === 'number' && Number.isFinite(color)) ? color : null;
+        this.updateVisual();
+    }
     
     /**
      * Устанавливает прозрачность

package/src/grid/CrossGrid.js

@@ -38,7 +38,7 @@ export class CrossGrid extends BaseGrid {
         const g = this.graphics;
         // Строго без прозрачности.
         g.alpha = 1;
-        const lineColor = getCrossColor(this._zoom, this.color);
+        const lineColor = this.colorOverride != null ? this.colorOverride : getCrossColor(this._zoom, this.color);
         g.beginFill(lineColor, 1);
 
         const checkpoint = getCrossCheckpointForZoom(this._zoom);

package/src/grid/DotGrid.js

@@ -105,7 +105,7 @@ export class DotGrid extends BaseGrid {
         const zoomPct = checkpoint?.zoomPercent ?? 100;
         const use1px = DOT_1PX_CHECKPOINTS.has(zoomPct);
         const dotSize = use1px ? 0.4 : rawDotSize;
-        const dotColor = getDotColor(this._zoom, this.color);
+        const dotColor = this.colorOverride != null ? this.colorOverride : getDotColor(this._zoom, this.color);
 
         this.graphics.beginFill(dotColor, alpha);
         for (let x = startX; x <= endX; x += stepPx) {

package/src/grid/LineGrid.js

@@ -44,15 +44,21 @@ export class LineGrid extends BaseGrid {
             this.graphics.alpha = this.opacity;
         }
         const state = this.getScreenGridState();
+        // Miro-профиль: по умолчанию нативная пара цветов. Если из палитры пришёл colorOverride
+        // (например светлый фон #f0f6fc с gridColor #d4d4d4), используем его — иначе мелкая сетка
+        // сливается с фоном.
+        const mainColor = (typeof this.colorOverride === 'number' && Number.isFinite(this.colorOverride))
+            ? this._deriveMinorColor(this.colorOverride)
+            : this.color;
         try {
             this.graphics.lineStyle({
                 width: Math.max(1, Math.round(this.lineWidth || 1)),
-                color: this.color,
+                color: mainColor,
                 alpha: 1,
                 alignment: 0
             });
         } catch (_) {
-            this.graphics.lineStyle(Math.max(1, Math.round(this.lineWidth || 1)), this.color, 1);
+            this.graphics.lineStyle(Math.max(1, Math.round(this.lineWidth || 1)), mainColor, 1);
         }
         
         // Основные линии сетки
@@ -160,15 +166,18 @@ export class LineGrid extends BaseGrid {
         const { secondGridStep } = this.getScreenGridState();
         const step = Math.max(1, Math.round(secondGridStep || 0));
         if (step <= 0) return;
+        const bigColor = (typeof this.colorOverride === 'number' && Number.isFinite(this.colorOverride))
+            ? this.colorOverride
+            : this.bigGridColor;
         try {
             this.graphics.lineStyle({
                 width: 1,
-                color: this.bigGridColor,
+                color: bigColor,
                 alpha: this.bigGridOpacity,
                 alignment: 0
             });
         } catch (_) {
-            this.graphics.lineStyle(1, this.bigGridColor, this.bigGridOpacity);
+            this.graphics.lineStyle(1, bigColor, this.bigGridOpacity);
         }
         const b = this.getDrawBounds();
         const worldX = this.viewportTransform?.worldX || 0;
@@ -198,6 +207,18 @@ export class LineGrid extends BaseGrid {
         }
     }
 
+    /**
+     * Цвет мелкой сетки из цвета крупной: на 20 светлее на канал, чтобы крупная (override)
+     * читалась как заметный якорь, а мелкая была тоньше/бледнее. Для #d4d4d4 даёт #e8e8e8.
+     */
+    _deriveMinorColor(bigColor) {
+        const delta = 0x14;
+        const r = Math.min(0xFF, ((bigColor >> 16) & 0xFF) + delta);
+        const g = Math.min(0xFF, ((bigColor >> 8) & 0xFF) + delta);
+        const b = Math.min(0xFF, (bigColor & 0xFF) + delta);
+        return (r << 16) | (g << 8) | b;
+    }
+
     _normalizeAnchor(anchor, stepPx) {
         const step = Math.max(1, Math.round(stepPx));
         return ((Math.round(anchor) % step) + step) % step;

package/src/services/BoardService.js

@@ -16,6 +16,20 @@ export class BoardService {
 		this._destroyed = false;
 		this._lastZoomCursor = null;
 		this._consumeZoomCursorAnchor = false;
+		// Override цвета сетки, производный от фона доски (null — штатный цвет типа сетки).
+		this._gridColorOverride = null;
+	}
+
+	/**
+	 * Устанавливает override цвета сетки от фона доски и применяет к текущей сетке.
+	 * Сохраняется, чтобы переехать на новую сетку при смене её типа.
+	 * @param {number|null} color
+	 */
+	setGridColorOverride(color) {
+		this._gridColorOverride = (typeof color === 'number' && Number.isFinite(color)) ? color : null;
+		if (this.grid && typeof this.grid.setColorOverride === 'function') {
+			this.grid.setColorOverride(this._gridColorOverride);
+		}
 	}
 
 	async init(getCanvasSize) {
@@ -57,6 +71,9 @@ export class BoardService {
 			};
 			try {
 				this.grid = GridFactory.createGrid(type, gridOptions);
+				if (this._gridColorOverride != null && typeof this.grid.setColorOverride === 'function') {
+					this.grid.setColorOverride(this._gridColorOverride);
+				}
 				this.pixi.setGrid(this.grid);
 				this.refreshGridViewport();
 				this.eventBus.emit(Events.UI.GridCurrent, { type });

package/src/services/SettingsApplier.js

@@ -1,4 +1,5 @@
 import { Events } from '../core/events/Events.js';
+import { BOARD_PALETTE } from '../ui/boardPalette.js';
 
 export class SettingsApplier {
     constructor(eventBus, pixi, boardService = null, uiRefs = {}) {
@@ -43,6 +44,12 @@ export class SettingsApplier {
                     this.ui.topbar.setPaintButtonHex(this.ui.topbar.mapBoardToBtnHex(boardHex));
                 } catch (_) {}
             }
+            // Цвет сетки производный от фона: для палитры с заданным gridColor — override, иначе сброс.
+            try {
+                if (this.boardService && typeof this.boardService.setGridColorOverride === 'function') {
+                    this.boardService.setGridColorOverride(this._resolveGridColorOverride(bgInt));
+                }
+            } catch (_) {}
         }
 
         // 2) Сетка — применяем только если grid пришёл в partial
@@ -114,6 +121,21 @@ export class SettingsApplier {
     _toHex(intColor) {
         try { return `#${(intColor >>> 0).toString(16).padStart(6, '0')}`.toLowerCase(); } catch (_) { return '#f5f5f5'; }
     }
+
+    /**
+     * Возвращает int-цвет сетки для фона из палитры (если задан gridColor), иначе null.
+     * @param {number|null} bgInt
+     * @returns {number|null}
+     */
+    _resolveGridColorOverride(bgInt) {
+        if (bgInt == null) return null;
+        const hex = this._toHex(bgInt);
+        const entry = BOARD_PALETTE.find((p) => String(p.board).toLowerCase() === hex);
+        if (entry && entry.gridColor) {
+            return this._toIntColor(entry.gridColor);
+        }
+        return null;
+    }
 }
 
 

package/src/ui/boardPalette.js

@@ -4,7 +4,7 @@
  * btnHex — цвет кнопки в Topbar; board — реальный цвет фона canvas.
  */
 export const BOARD_PALETTE = [
-    { id: 1, name: 'default-light', btnHex: '#d6e8f7', board: '#f0f6fc' },
+    { id: 1, name: 'default-light', btnHex: '#d6e8f7', board: '#f0f6fc', gridColor: '#d4d4d4' },
     { id: 2, name: 'mint-light',    btnHex: '#E8F5E9', board: '#f8fff7' },
     { id: 3, name: 'peach-light',   btnHex: '#FFF3E0', board: '#fffcf7' },
     { id: 4, name: 'gray-light',    btnHex: '#f5f5f5', board: '#f5f5f5' },