@sequent-org/moodboard 1.4.32 → 1.4.34

package/src/objects/ShapeObject.js

@@ -1,28 +1,46 @@
 import * as PIXI from 'pixi.js';
+import { drawShape } from './shape/ShapeDrawer.js';
+
+const DEFAULTS = {
+    borderColor: 0xd4d4d4,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderOpacity: 1,
+};
 
 /**
  * Класс объекта «Фигура»
  * Отвечает за создание и перерисовку фигур разных типов с сохранением формы при ресайзе.
+ *
+ * State-контракт:
+ *   color: <number>                   — заливка
+ *   properties.kind                   — square|rounded|circle|triangle|diamond|parallelogram|arrow
+ *   properties.cornerRadius           — радиус скругления (применяется к square тоже, 0..N)
+ *   properties.borderColor            — цвет обводки (PIXI number), дефолт 0xD4D4D4
+ *   properties.borderWidth            — толщина обводки (world px), дефолт 1
+ *   properties.borderStyle            — 'solid'|'dashed'|'dotted', дефолт 'solid'
+ *   properties.borderOpacity          — 0..1, дефолт 1
  */
 export class ShapeObject {
     /**
      * @param {Object} objectData Полные данные объекта из состояния
-     *  - width, height
-     *  - color
-     *  - properties.kind: 'square' | 'rounded' | 'circle' | 'triangle' | 'diamond' | 'parallelogram' | 'arrow'
-     *  - properties.cornerRadius?: number (для rounded)
      */
     constructor(objectData = {}) {
         this.objectData = objectData;
         this.width = objectData.width || 100;
         this.height = objectData.height || 100;
         this.fillColor = objectData.color ?? 0xffffff;
+
         const props = objectData.properties || {};
         this.kind = props.kind || 'square';
-        this.cornerRadius = props.cornerRadius || 10;
+        this.cornerRadius = props.cornerRadius ?? (this.kind === 'rounded' ? 10 : 0);
+        this.borderColor = props.borderColor ?? DEFAULTS.borderColor;
+        this.borderWidth = props.borderWidth ?? DEFAULTS.borderWidth;
+        this.borderStyle = props.borderStyle ?? DEFAULTS.borderStyle;
+        this.borderOpacity = props.borderOpacity ?? DEFAULTS.borderOpacity;
 
         this.graphics = new PIXI.Graphics();
-        this._draw(this.width, this.height, this.fillColor, this.kind, this.cornerRadius);
+        this._draw(this.width, this.height);
     }
 
     /** Возвращает PIXI-объект */
@@ -34,15 +52,25 @@ export class ShapeObject {
     setColor(color) {
         if (typeof color === 'number') {
             this.fillColor = color;
-            this._redrawPreserveTransform(this.width, this.height, this.fillColor, this.kind, this.cornerRadius);
+            this._redrawPreserveTransform(this.width, this.height);
         }
     }
 
-    /** Обновить свойства фигуры (тип, радиус скругления) */
-    setProperties({ kind, cornerRadius } = {}) {
+    /** Обновить параметры обводки */
+    setStroke({ borderColor, borderWidth, borderStyle, borderOpacity } = {}) {
+        if (typeof borderColor === 'number') this.borderColor = borderColor;
+        if (typeof borderWidth === 'number') this.borderWidth = borderWidth;
+        if (borderStyle !== undefined) this.borderStyle = borderStyle;
+        if (typeof borderOpacity === 'number') this.borderOpacity = borderOpacity;
+        this._redrawPreserveTransform(this.width, this.height);
+    }
+
+    /** Обновить свойства фигуры (тип, радиус скругления, стиль обводки) */
+    setProperties({ kind, cornerRadius, borderStyle } = {}) {
         if (kind) this.kind = kind;
         if (typeof cornerRadius === 'number') this.cornerRadius = cornerRadius;
-        this._redrawPreserveTransform(this.width, this.height, this.fillColor, this.kind, this.cornerRadius);
+        if (borderStyle !== undefined) this.borderStyle = borderStyle;
+        this._redrawPreserveTransform(this.width, this.height);
     }
 
     /** Обновить размер фигуры */
@@ -52,84 +80,31 @@ export class ShapeObject {
         const h = Math.max(0, size.height || 0);
         this.width = w;
         this.height = h;
-        this._redrawPreserveTransform(w, h, this.fillColor, this.kind, this.cornerRadius);
+        this._redrawPreserveTransform(w, h);
     }
 
     /** Перерисовать с сохранением трансформаций */
-    _redrawPreserveTransform(width, height, color, kind, cornerRadius) {
+    _redrawPreserveTransform(width, height) {
         const g = this.graphics;
-        // Сохраняем текущий центр и поворот
         const centerX = g.x;
         const centerY = g.y;
         const rot = g.rotation || 0;
 
-        this._draw(width, height, color, kind, cornerRadius);
-        // ВАЖНО: для согласованности с ядром (позиция — левый-верх, PIXI — центр)
-        // pivot должен всегда быть в центре объекта (w/2, h/2)
+        this._draw(width, height);
+        // pivot — всегда центр, чтобы согласовываться с ядром (top-left → center)
         g.pivot.set(width / 2, height / 2);
-        // Восстанавливаем центр
         g.x = centerX;
         g.y = centerY;
         g.rotation = rot;
     }
 
     /** Непосредственная отрисовка фигуры */
-    _draw(w, h, color, kind, cornerRadius) {
-        const g = this.graphics;
-        g.clear();
-        g.beginFill(color, 1);
-        switch (kind) {
-            case 'circle': {
-                const r = Math.min(w, h) / 2;
-                g.drawCircle(w / 2, h / 2, r);
-                break;
-            }
-            case 'rounded': {
-                const r = cornerRadius || 10;
-                g.drawRoundedRect(0, 0, w, h, r);
-                break;
-            }
-            case 'triangle': {
-                g.moveTo(w / 2, 0);
-                g.lineTo(w, h);
-                g.lineTo(0, h);
-                g.lineTo(w / 2, 0);
-                break;
-            }
-            case 'diamond': {
-                g.moveTo(w / 2, 0);
-                g.lineTo(w, h / 2);
-                g.lineTo(w / 2, h);
-                g.lineTo(0, h / 2);
-                g.lineTo(w / 2, 0);
-                break;
-            }
-            case 'parallelogram': {
-                const skew = Math.min(w * 0.25, 20);
-                g.moveTo(skew, 0);
-                g.lineTo(w, 0);
-                g.lineTo(w - skew, h);
-                g.lineTo(0, h);
-                g.lineTo(skew, 0);
-                break;
-            }
-            case 'arrow': {
-                const shaftH = Math.max(6, h * 0.3);
-                const shaftY = (h - shaftH) / 2;
-                g.drawRect(0, shaftY, w * 0.6, shaftH);
-                g.moveTo(w * 0.6, 0);
-                g.lineTo(w, h / 2);
-                g.lineTo(w * 0.6, h);
-                g.lineTo(w * 0.6, 0);
-                break;
-            }
-            case 'square':
-            default: {
-                g.drawRect(0, 0, w, h);
-                break;
-            }
-        }
-        g.endFill();
+    _draw(w, h) {
+        drawShape(this.graphics, w, h, this.fillColor, this.kind, this.cornerRadius, {
+            borderColor: this.borderColor,
+            borderWidth: this.borderWidth,
+            borderStyle: this.borderStyle,
+            borderOpacity: this.borderOpacity,
+        });
     }
 }
-

package/src/objects/shape/ShapeDrawer.js

@@ -0,0 +1,210 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Рисует сегменты пунктирного контура вдоль пути из точек (замкнутый полигон).
+ * PIXI v7 не поддерживает dash natively — имитируем сегментами moveTo/lineTo.
+ * @param {PIXI.Graphics} g
+ * @param {Array<{x:number,y:number}>} pts — вершины замкнутого полигона
+ * @param {number} dash — длина штриха (px world)
+ * @param {number} gap  — длина пробела (px world)
+ */
+function drawDashedPolygon(g, pts, dash, gap) {
+    const n = pts.length;
+    let offset = 0;
+    let drawing = true;
+
+    for (let i = 0; i < n; i++) {
+        const a = pts[i];
+        const b = pts[(i + 1) % n];
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const segLen = Math.sqrt(dx * dx + dy * dy);
+        const ux = dx / segLen;
+        const uy = dy / segLen;
+        let pos = 0;
+
+        while (pos < segLen) {
+            const rem = drawing ? dash - offset : gap - offset;
+            const step = Math.min(rem, segLen - pos);
+            if (drawing) {
+                g.moveTo(a.x + ux * pos, a.y + uy * pos);
+                g.lineTo(a.x + ux * (pos + step), a.y + uy * (pos + step));
+            }
+            pos += step;
+            offset += step;
+            const period = drawing ? dash : gap;
+            if (offset >= period) {
+                offset = 0;
+                drawing = !drawing;
+            }
+        }
+    }
+}
+
+/**
+ * Рисует пунктирный прямоугольник (замкнутый).
+ * @param {PIXI.Graphics} g
+ * @param {number} x @param {number} y @param {number} w @param {number} h
+ * @param {number} dash @param {number} gap
+ */
+function drawDashedRect(g, x, y, w, h, dash, gap) {
+    const pts = [
+        { x, y },
+        { x: x + w, y },
+        { x: x + w, y: y + h },
+        { x, y: y + h },
+    ];
+    drawDashedPolygon(g, pts, dash, gap);
+}
+
+/**
+ * Рисует пунктирную окружность сегментами дуги.
+ * @param {PIXI.Graphics} g
+ * @param {number} cx @param {number} cy @param {number} r
+ * @param {number} dash @param {number} gap
+ */
+function drawDashedCircle(g, cx, cy, r, dash, gap) {
+    const circum = 2 * Math.PI * r;
+    const total = dash + gap;
+    const steps = Math.round(circum / total) || 1;
+    const dashAngle = (dash / circum) * 2 * Math.PI;
+    const gapAngle = (gap / circum) * 2 * Math.PI;
+
+    for (let i = 0; i < steps; i++) {
+        const startAngle = i * (dashAngle + gapAngle) - Math.PI / 2;
+        const endAngle = startAngle + dashAngle;
+        g.arc(cx, cy, r, startAngle, endAngle);
+    }
+}
+
+/**
+ * Применяет lineStyle к Graphics-объекту.
+ * При borderWidth === 0 выключает контур.
+ */
+export function applyLineStyle(g, borderWidth, borderColor, borderOpacity) {
+    if (borderWidth === 0) {
+        g.lineStyle(0);
+    } else {
+        g.lineStyle(borderWidth, borderColor, borderOpacity);
+    }
+}
+
+/**
+ * Настройки штриха.
+ * @param {'solid'|'dashed'|'dotted'} style
+ * @returns {{ dash: number, gap: number }}
+ */
+function dashParams(style) {
+    if (style === 'dotted') return { dash: 2, gap: 4 };
+    if (style === 'dashed') return { dash: 8, gap: 6 };
+    return { dash: 0, gap: 0 };
+}
+
+/**
+ * Рисует фигуру в Graphics с учётом обводки, заливки и borderStyle.
+ *
+ * @param {PIXI.Graphics} g
+ * @param {number} w         ширина (world px)
+ * @param {number} h         высота (world px)
+ * @param {number} color     заливка (PIXI color number)
+ * @param {string} kind      тип фигуры
+ * @param {number} cornerRadius
+ * @param {object} stroke
+ *   @param {number}  stroke.borderColor
+ *   @param {number}  stroke.borderWidth
+ *   @param {'solid'|'dashed'|'dotted'} stroke.borderStyle
+ *   @param {number}  stroke.borderOpacity
+ */
+export function drawShape(g, w, h, color, kind, cornerRadius, stroke) {
+    const { borderColor, borderWidth, borderStyle, borderOpacity } = stroke;
+    const isDash = borderWidth > 0 && (borderStyle === 'dashed' || borderStyle === 'dotted');
+    const { dash, gap } = dashParams(borderStyle);
+
+    g.clear();
+
+    // --- заливка (всегда solid через beginFill/endFill) ---
+    g.lineStyle(0);
+    g.beginFill(color, 1);
+    _drawFillShape(g, w, h, kind, cornerRadius);
+    g.endFill();
+
+    // --- обводка ---
+    if (borderWidth === 0) return;
+
+    if (!isDash || (kind !== 'square' && kind !== 'rounded' && kind !== 'circle')) {
+        // solid или форма без поддержки dash — одна линия через lineStyle
+        applyLineStyle(g, borderWidth, borderColor, borderOpacity);
+        g.beginFill(0, 0);
+        _drawFillShape(g, w, h, kind, cornerRadius);
+        g.endFill();
+        // TODO: dashed/dotted для triangle/diamond/parallelogram/arrow — следующая фаза
+    } else {
+        // dash/dotted для rect/rounded/circle: рисуем сегменты без fill
+        applyLineStyle(g, borderWidth, borderColor, borderOpacity);
+        if (kind === 'circle') {
+            const r = Math.min(w, h) / 2;
+            drawDashedCircle(g, w / 2, h / 2, r, dash, gap);
+        } else {
+            // square и rounded — прямоугольный периметр
+            drawDashedRect(g, 0, 0, w, h, dash, gap);
+        }
+    }
+}
+
+/**
+ * Рисует замкнутую форму для заливки (без lineStyle).
+ * Используется внутри beginFill/endFill.
+ */
+function _drawFillShape(g, w, h, kind, cornerRadius) {
+    switch (kind) {
+        case 'circle': {
+            const r = Math.min(w, h) / 2;
+            g.drawCircle(w / 2, h / 2, r);
+            break;
+        }
+        case 'rounded': {
+            const r = cornerRadius || 10;
+            g.drawRoundedRect(0, 0, w, h, r);
+            break;
+        }
+        case 'triangle': {
+            g.moveTo(w / 2, 0);
+            g.lineTo(w, h);
+            g.lineTo(0, h);
+            g.lineTo(w / 2, 0);
+            break;
+        }
+        case 'diamond': {
+            g.moveTo(w / 2, 0);
+            g.lineTo(w, h / 2);
+            g.lineTo(w / 2, h);
+            g.lineTo(0, h / 2);
+            g.lineTo(w / 2, 0);
+            break;
+        }
+        case 'parallelogram': {
+            const skew = Math.min(w * 0.25, 20);
+            g.moveTo(skew, 0);
+            g.lineTo(w, 0);
+            g.lineTo(w - skew, h);
+            g.lineTo(0, h);
+            g.lineTo(skew, 0);
+            break;
+        }
+        case 'arrow': {
+            const shaftH = Math.max(6, h * 0.3);
+            const shaftY = (h - shaftH) / 2;
+            g.drawRect(0, shaftY, w * 0.6, shaftH);
+            g.moveTo(w * 0.6, 0);
+            g.lineTo(w, h / 2);
+            g.lineTo(w * 0.6, h);
+            g.lineTo(w * 0.6, 0);
+            break;
+        }
+        case 'square':
+        default: {
+            g.drawRect(0, 0, w, h);
+            break;
+        }
+    }
+}

package/src/services/ConnectorBindingResolver.js

@@ -73,6 +73,26 @@ function clipRayToAABB(from, to, hw, hh) {
     };
 }
 
+/**
+ * Грань и единичная внешняя нормаль из нормализованного якоря [0..1].
+ * Возвращает локальные координаты (центр объекта = 0,0): на какой кромке сидит якорь
+ * и куда смотрит нормаль. Координата вдоль кромки сохраняется из якоря.
+ *
+ * @returns {{ dir: {x:number,y:number}, point: {x:number,y:number} }}
+ */
+function faceFromAnchor(anchor, width, height, hw, hh) {
+    const ax  = Math.max(0, Math.min(1, anchor?.x ?? 0.5));
+    const ay  = Math.max(0, Math.min(1, anchor?.y ?? 0.5));
+    const lax = ax * width  - hw;
+    const lay = ay * height - hh;
+    const dTop = ay, dBottom = 1 - ay, dLeft = ax, dRight = 1 - ax;
+    const min = Math.min(dTop, dBottom, dLeft, dRight);
+    if (min === dTop)    return { dir: { x: 0,  y: -1 }, point: { x: lax,  y: -hh } };
+    if (min === dBottom) return { dir: { x: 0,  y: 1  }, point: { x: lax,  y: hh  } };
+    if (min === dLeft)   return { dir: { x: -1, y: 0  }, point: { x: -hw,  y: lay } };
+    return                      { dir: { x: 1,  y: 0  }, point: { x: hw,   y: lay } };
+}
+
 // ---------------------------------------------------------------------------
 
 export class ConnectorBindingResolver {
@@ -171,6 +191,98 @@ export class ConnectorBindingResolver {
 
         return worldExit;
     }
+
+    /**
+     * Разрешает терминал в дескриптор {point, dir} — точку на грани и внешнюю нормаль.
+     * Используется для elbow и bezier, где выход обязан быть перпендикулярен грани.
+     *
+     * @param {Object} terminal
+     *   Привязанный:  { boundId, anchor:{x,y}, isPrecise, isExact }
+     *   Свободный:    { point:{x,y} }
+     * @param {Object|null} target
+     * @param {{ x: number, y: number }|null} otherCenter
+     *   Центр другого объекта (или свободная точка другого конца) для выбора стороны.
+     * @returns {{ point: {x:number,y:number}, dir: {x:number,y:number} }}
+     */
+    static resolveWithSide(terminal, target, otherCenter = null) {
+        // Свободный терминал: точка как есть, dir — к другому концу
+        if (!terminal?.boundId) {
+            const pt = { x: terminal?.point?.x ?? 0, y: terminal?.point?.y ?? 0 };
+            const dx = otherCenter ? otherCenter.x - pt.x : 0;
+            const dy = otherCenter ? otherCenter.y - pt.y : 0;
+            const len = Math.hypot(dx, dy);
+            const dir = len > 1e-6 ? { x: dx / len, y: dy / len } : { x: 1, y: 0 };
+            return { point: pt, dir };
+        }
+
+        if (!target) {
+            return { point: { x: 0, y: 0 }, dir: { x: 1, y: 0 } };
+        }
+
+        const left   = target.position?.x ?? 0;
+        const top    = target.position?.y ?? 0;
+        const width  = target.width  ?? target.properties?.width  ?? 0;
+        const height = target.height ?? target.properties?.height ?? 0;
+        const angle  = target.rotation ?? target.properties?.rotation ?? 0;
+
+        const cx = left + width  / 2;
+        const cy = top  + height / 2;
+        const hw = width  / 2;
+        const hh = height / 2;
+
+        // Вектор к другому объекту в локальных координатах цели
+        const rawDx = (otherCenter?.x ?? cx) - cx;
+        const rawDy = (otherCenter?.y ?? cy) - cy;
+        const localD = angle !== 0
+            ? rotateVector({ x: rawDx, y: rawDy }, -angle)
+            : { x: rawDx, y: rawDy };
+
+        let localDir;
+        let facePoint;
+
+        // Привязка к конкретной точке-коннектору (isPrecise): грань и нормаль берём
+        // из самого якоря — коннектор обязан выходить именно из той точки, куда привязан,
+        // а не из геометрически ближайшей грани.
+        if (terminal.isPrecise && hw > 0 && hh > 0) {
+            const face = faceFromAnchor(terminal.anchor, width, height, hw, hh);
+            localDir  = face.dir;
+            facePoint = face.point;
+        } else if (Math.abs(localD.x) >= Math.abs(localD.y)) {
+            // Привязка к центру → выбор грани по доминирующей оси к другому объекту
+            if (localD.x >= 0) {
+                localDir  = { x: 1, y: 0 };
+                facePoint = { x: hw, y: 0 };
+            } else {
+                localDir  = { x: -1, y: 0 };
+                facePoint = { x: -hw, y: 0 };
+            }
+        } else if (localD.y >= 0) {
+            localDir  = { x: 0, y: 1 };
+            facePoint = { x: 0, y: hh };
+        } else {
+            localDir  = { x: 0, y: -1 };
+            facePoint = { x: 0, y: -hh };
+        }
+
+        // Перевод в world-space
+        const worldFace = angle !== 0
+            ? {
+                x: cx + rotateVector(facePoint, angle).x,
+                y: cy + rotateVector(facePoint, angle).y,
+              }
+            : { x: cx + facePoint.x, y: cy + facePoint.y };
+
+        const worldDirRaw = angle !== 0 ? rotateVector(localDir, angle) : localDir;
+        const dLen = Math.hypot(worldDirRaw.x, worldDirRaw.y);
+        const dir  = dLen > 1e-6
+            ? { x: worldDirRaw.x / dLen, y: worldDirRaw.y / dLen }
+            : { x: 1, y: 0 };
+
+        return {
+            point: { x: Math.round(worldFace.x), y: Math.round(worldFace.y) },
+            dir,
+        };
+    }
 }
 
 // ---------------------------------------------------------------------------