@sequent-org/moodboard 1.4.52 → 1.4.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.52",
+  "version": "1.4.53",
   "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/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/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/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;
 }