@sequent-org/moodboard 1.4.52 → 1.4.54

package/package.json

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

package/src/core/index.js

@@ -39,7 +39,7 @@ export class CoreMoodBoard {
             autoSave: false,
             width: this.container.clientWidth || 800,
             height: this.container.clientHeight || 600,
-            backgroundColor: 0xF5F5F5,
+            backgroundColor: 0xFFFFFF,
             ...options
         };
 
@@ -624,7 +624,7 @@ export class CoreMoodBoard {
         const app = this.pixi?.app;
         const rendererBg = app?.renderer?.background?.color ?? app?.renderer?.backgroundColor;
         const toHex = (num) => {
-            try { return '#' + Number(num >>> 0).toString(16).padStart(6, '0'); } catch (_) { return '#F5F5F5'; }
+            try { return '#' + Number(num >>> 0).toString(16).padStart(6, '0'); } catch (_) { return '#FFFFFF'; }
         };
         const world = this.pixi?.worldLayer || app?.stage;
         const currentZoom = Math.max(0.02, Math.min(5, world?.scale?.x || 1));
@@ -653,7 +653,7 @@ export class CoreMoodBoard {
         })();
 
         const settings = {
-            backgroundColor: toHex(rendererBg ?? 0xF5F5F5),
+            backgroundColor: toHex(rendererBg ?? 0xFFFFFF),
             grid: gridSettings || undefined,
             zoom: { min: 0.1, max: 5.0, default: 1.0, current: currentZoom },
             pan: currentPan,

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/initNoBundler.js

@@ -59,7 +59,7 @@ export function injectCriticalStyles() {
             width: 100%;
             height: 100%;
             overflow: hidden;
-            background: #f0f6fc;
+            background: #ffffff;
         }
         
         .moodboard-workspace__toolbar {

package/src/moodboard/integration/MoodBoardLoadApi.js

@@ -1,7 +1,7 @@
 import { Events } from '../../core/events/Events.js';
 
 const BOARD_DEFAULTS = {
-    backgroundColor: '#daeefb',
+    backgroundColor: '#ffffff',
     grid: { type: 'cross' },
 };
 

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/ConnectorPropertiesPanel.js

@@ -10,6 +10,7 @@ import {
     getSelectedConnectorId,
     getConnectorData,
     getConnectorMidpointScreen,
+    getConnectorTopScreen,
     getConnectorStyle,
     buildStyleUpdate,
 } from './connector-properties/ConnectorPropertiesPanelMapper.js';
@@ -62,18 +63,21 @@ export class ConnectorPropertiesPanel {
         const stillSelected = getSelectedConnectorId(this.core) === this.currentId;
         if (!stillSelected) { this.hide(); return; }
 
-        const mid = getConnectorMidpointScreen(this.core, this.currentId);
-        if (!mid) return;
+        const top = getConnectorTopScreen(this.core, this.currentId);
+        if (!top) return;
 
         const panelW = this.panel.offsetWidth || 480;
         const panelH = this.panel.offsetHeight || 40;
-        const GAP    = 18;
+        const GAP    = 20;
 
-        let px = mid.x - Math.round(panelW / 2);
-        let py = mid.y - panelH - GAP;
+        let px = top.x - Math.round(panelW / 2);
+        let py = top.topY - panelH - GAP;
 
-        // Если уходит вверх за контейнер — переносим ниже середины
-        if (py < 0) py = mid.y + GAP;
+        // Если уходит вверх за контейнер — переносим ниже наивысшей точки
+        if (py < 0) {
+            const mid = getConnectorMidpointScreen(this.core, this.currentId);
+            py = (mid?.y ?? top.topY) + GAP;
+        }
 
         // Clamp по ширине контейнера
         const cw = this.container.offsetWidth || window.innerWidth;

package/src/ui/Topbar.js

@@ -176,10 +176,18 @@ export class Topbar {
     _getCurrentBoardBackgroundHex() {
         try {
             const app = window?.moodboard?.coreMoodboard?.pixi?.app || window?.moodboard?.core?.pixi?.app;
-            const colorInt = app?.renderer?.background?.color ?? app?.renderer?.backgroundColor;
+            const renderer = app?.renderer;
+            if (!renderer) return null;
+            const bg = renderer.background;
+            // PIXI v7+: bg.color — экземпляр Color с методом toHex()
+            if (bg?.color && typeof bg.color.toHex === 'function') {
+                return String(bg.color.toHex()).toLowerCase();
+            }
+            const colorInt = (typeof bg?.color === 'number')
+                ? bg.color
+                : (typeof renderer.backgroundColor === 'number' ? renderer.backgroundColor : null);
             if (typeof colorInt !== 'number') return null;
-            const hex = `#${colorInt.toString(16).padStart(6, '0')}`;
-            return hex.toLowerCase();
+            return `#${colorInt.toString(16).padStart(6, '0')}`.toLowerCase();
         } catch (_) { return null; }
     }
 
@@ -288,14 +296,20 @@ export class Topbar {
         // Выделяем активный цвет галочкой по фактическому boardHex
         try {
             const ap = window?.moodboard?.coreMoodboard?.settingsApplier;
-            const boardHex = (
-                (ap && ap.get && ap.get().backgroundColor) ||
-                this._currentBoardHex ||
-                this._getCurrentBoardBackgroundHex() ||
-                ''
-            ).toLowerCase();
+            const raw = (ap && ap.get && ap.get().backgroundColor)
+                || this._currentBoardHex
+                || this._getCurrentBoardBackgroundHex()
+                || '';
+            let boardHex = '';
+            if (typeof raw === 'number') {
+                boardHex = `#${raw.toString(16).padStart(6, '0')}`;
+            } else if (typeof raw === 'string') {
+                boardHex = raw;
+            }
+            boardHex = boardHex.toLowerCase();
             const match = boardHex ? grid.querySelector(`[data-board="${boardHex}"]`) : null;
-            if (match) match.classList.add('is-active');
+            const toActivate = match || grid.querySelector('[data-board="#ffffff"]');
+            if (toActivate) toActivate.classList.add('is-active');
         } catch (_) {}
 
         // позиционируем поповер

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' },

package/src/ui/connector-properties/ConnectorPropertiesPanelMapper.js

@@ -119,6 +119,45 @@ export function getConnectorMidpointScreen(core, connectorId) {
     };
 }
 
+/**
+ * Возвращает наивысшую экранную точку коннектора (минимальный y) и горизонтальный центр.
+ * Координаты — целые числа (screen-space integer contract).
+ * @returns {{ x: number, topY: number } | null}
+ */
+export function getConnectorTopScreen(core, connectorId) {
+    const segments = core?.connectorLayer?._lastSegments;
+    if (!segments) return null;
+    const seg = segments.find(s => s.id === connectorId);
+    if (!seg) return null;
+
+    const worldLayer = core?.pixi?.worldLayer;
+    const scale  = worldLayer?.scale?.x ?? 1;
+    const worldX = worldLayer?.x ?? 0;
+    const worldY = worldLayer?.y ?? 0;
+
+    let pts;
+    if (seg.points && seg.points.length >= 2) {
+        pts = seg.points;
+    } else if (seg.start && seg.end) {
+        pts = [seg.start, seg.end];
+    } else {
+        return null;
+    }
+
+    let minWorldY = Infinity;
+    let sumWorldX = 0;
+    for (const p of pts) {
+        if (p.y < minWorldY) minWorldY = p.y;
+        sumWorldX += p.x;
+    }
+    const avgWorldX = sumWorldX / pts.length;
+
+    return {
+        x:    Math.round(avgWorldX * scale + worldX),
+        topY: Math.round(minWorldY * scale + worldY),
+    };
+}
+
 /**
  * Формирует updates.properties.style для StateChanged-эмита.
  */

package/src/ui/styles/workspace.css

@@ -731,7 +731,7 @@
 
 /* Light Theme */
 .moodboard-workspace--light {
-    background: #f8f9fa;
+    background: #ffffff;
     color: #333;
 }