@likec4/diagram 1.39.4 → 1.40.0

package/dist/likec4diagram/xyflow-sequence/layouter.js

@@ -0,0 +1,408 @@
+import { nonNullable, invariant, nonexhaustive } from '@likec4/core/utils';
+import * as kiwi from '@lume/kiwi';
+import { last, map, only } from 'remeda';
+import { FIRST_STEP_OFFSET, ACTOR_GAP, COLUMN_GAP, PORT_HEIGHT, STEP_LABEL_MARGIN, MIN_ROW_HEIGHT } from './const.js';
+import { findParallelRects } from './utils.js';
+
+class SequenceViewLayouter {
+  #solver = new kiwi.Solver();
+  #actors;
+  #compounds = [];
+  #viewportRight;
+  #viewportBottom;
+  #rowsTop;
+  #rows = [];
+  #parallelBoxes = [];
+  constructor({
+    actors,
+    steps,
+    compounds
+  }) {
+    this.#rowsTop = this.newVar(FIRST_STEP_OFFSET);
+    this.#viewportRight = this.newVar(0);
+    this.#viewportBottom = this.newVar(0);
+    this.#actors = this.addActors(actors);
+    for (const compound of compounds) {
+      const result = this.addCompound(compound);
+      const toplevel = result[0];
+      this.constraint(toplevel.y1, "==", 0, kiwi.Strength.strong);
+      this.put(this.#viewportBottom).after(toplevel.bottom);
+      this.put(this.#rowsTop).after(toplevel.y2);
+      this.#compounds.push(...result);
+    }
+    for (const step of steps) {
+      this.addStep(step);
+    }
+    for (const parallelRect of findParallelRects(steps)) {
+      this.addParallelRect(parallelRect);
+    }
+    const firstActor = this.#actors[0];
+    this.constraint(firstActor.offset.left, "==", 0, kiwi.Strength.strong);
+    const lastActor = this.#actors.reduce((prev, actor) => {
+      this.put(actor.x).after(prev.right, ACTOR_GAP);
+      this.put(actor.offset.left, kiwi.Strength.strong).after(prev.offset.right, COLUMN_GAP);
+      this.constraint(actor.centerY, "==", prev.centerY, kiwi.Strength.strong);
+      this.put(this.#rowsTop).after(actor.offset.bottom);
+      return actor;
+    });
+    this.put(this.#viewportRight).after(lastActor.offset.right);
+    this.put(this.#viewportBottom).after(last(this.#rows)?.bottom ?? this.#rowsTop);
+    if (compounds.length > 0) {
+      for (const compound of this.#compounds) {
+        const from = compound.from.column;
+        const to = compound.to.column;
+        let maxRow = Math.max(compound.from.maxRow, compound.to.maxRow);
+        for (let i = from + 1; i < to; i++) {
+          const actorBox = this.actorBox(i);
+          maxRow = Math.max(maxRow, actorBox.maxRow);
+        }
+        const lastRow = nonNullable(this.#rows[maxRow], `row ${maxRow} not found`);
+        this.put(compound.bottom).after(lastRow.bottom, 16);
+        this.put(this.#viewportBottom).after(compound.bottom);
+      }
+    }
+    this.#solver.updateVariables();
+  }
+  getParallelBoxes() {
+    return this.#parallelBoxes.map(({ parallelPrefix, x1, y1, x2, y2 }) => ({
+      parallelPrefix,
+      x: x1.value(),
+      y: y1.value(),
+      width: x2.value() - x1.value(),
+      height: y2.value() - y1.value()
+    }));
+  }
+  getActorBox(actor) {
+    const actorBox = this.actorBox(actor);
+    return {
+      x: actorBox.x.value(),
+      y: actorBox.y.value(),
+      width: actorBox.width,
+      height: actorBox.height
+    };
+  }
+  getCompoundBoxes() {
+    return this.#compounds.map(({ node, depth, x1, y1, x2, y2, bottom }) => ({
+      node,
+      depth,
+      x: x1.value(),
+      y: y1.value(),
+      width: x2.value() - x1.value(),
+      height: bottom.value() - y1.value()
+    }));
+  }
+  getPortCenter(step, type) {
+    const { column, row } = type === "source" ? step.from : step.to;
+    const x = this.actorBox(column).centerX;
+    const { y } = nonNullable(this.#rows[row]);
+    return {
+      cx: x.value(),
+      cy: y.value() + PORT_HEIGHT / 2 + step.offset,
+      height: type === "source" ? 40 : 24
+    };
+  }
+  getViewBounds() {
+    return {
+      x: 0,
+      y: 0,
+      width: this.#viewportRight.value(),
+      height: this.#viewportBottom.value()
+      // Max Y,
+    };
+  }
+  actorBox(actor) {
+    if (typeof actor !== "number") {
+      const id = typeof actor === "string" ? actor : actor.id;
+      actor = this.#actors.findIndex((a) => a.actor.id === id);
+      invariant(actor >= 0, `actor ${id} not found`);
+    }
+    return nonNullable(this.#actors[actor], `actor at index ${actor} not found`);
+  }
+  addActors(actors) {
+    let accX = 0;
+    return map(actors, (actor, column) => {
+      const x = this.newVar(accX);
+      accX += actor.width + ACTOR_GAP;
+      const y = this.newVar(0);
+      const actorBox = {
+        column,
+        actor,
+        x,
+        y,
+        centerX: x.plus(Math.round(actor.width / 2)),
+        centerY: y.plus(Math.round(actor.height / 2)),
+        width: actor.width,
+        height: actor.height,
+        right: x.plus(actor.width),
+        bottom: y.plus(actor.height),
+        minRow: Infinity,
+        maxRow: -Infinity
+      };
+      const top = this.newVar(0), left = this.newVar(0), right = this.newVar(0), bottom = this.newVar(0);
+      this.put(top, kiwi.Strength.strong).before(y);
+      this.put(left, kiwi.Strength.strong).before(x);
+      this.put(right, kiwi.Strength.strong).after(actorBox.right);
+      this.put(bottom, kiwi.Strength.strong).after(actorBox.bottom);
+      return {
+        ...actorBox,
+        offset: {
+          top,
+          left,
+          right,
+          bottom
+        }
+      };
+    });
+  }
+  addStep(step) {
+    const source = this.actorBox(step.source);
+    const target = this.actorBox(step.target);
+    source.minRow = Math.min(source.minRow, step.from.row);
+    source.maxRow = Math.max(source.maxRow, step.from.row);
+    target.minRow = Math.min(target.minRow, step.to.row);
+    target.maxRow = Math.max(target.maxRow, step.to.row);
+    const [left, right] = source.column <= target.column ? [source, target] : [target, source];
+    const width = (step.label?.width ?? 100) + STEP_LABEL_MARGIN;
+    if (left !== right) {
+      this.constraint(left.centerX.plus(width), "<=", right.centerX);
+    } else {
+      this.constraint(left.centerX.plus(width), "<=", left.offset.right);
+    }
+    let height = step.label?.height ? step.label.height + STEP_LABEL_MARGIN + PORT_HEIGHT / 2 : MIN_ROW_HEIGHT;
+    height = Math.max(height, MIN_ROW_HEIGHT) + step.offset;
+    this.ensureRow(step.from.row, height);
+    if (step.isSelfLoop) {
+      this.ensureRow(step.to.row, MIN_ROW_HEIGHT);
+    }
+    return this;
+  }
+  addParallelRect({
+    parallelPrefix,
+    min,
+    max
+  }) {
+    const x1 = this.actorBox(min.column).centerX.minus(30);
+    const x2 = this.actorBox(max.column).centerX.plus(30);
+    const firstRow = this.#rows[min.row];
+    const lastRow = this.#rows[max.row];
+    invariant(firstRow && lastRow, `parallel box invalid x1${x1} x2${x2} y1${firstRow} y2${lastRow}`);
+    const y1 = this.newVar(0);
+    this.put(y1).before(firstRow.y, 40);
+    const y2 = lastRow.bottom;
+    const rowBefore = min.row > 0 && this.#rows[min.row - 1];
+    if (rowBefore) {
+      this.put(y1).after(rowBefore.bottom, 16);
+    }
+    const rowAfter = max.row < this.#rows.length - 1 && this.#rows[max.row + 1];
+    if (rowAfter) {
+      this.put(y2).before(rowAfter.y, 16);
+    }
+    this.#parallelBoxes.push({
+      parallelPrefix,
+      x1,
+      y1,
+      x2,
+      y2
+    });
+  }
+  addCompound(compound) {
+    const PADDING = 32;
+    const PADDING_TOP = 40;
+    const PADDING_TOP_FROM_ACTOR = 52;
+    const children = [];
+    const nested = compound.nested.flatMap((c) => {
+      const result = this.addCompound(c);
+      children.push(result[0]);
+      return result;
+    });
+    const depth = Math.max(...nested.map((c) => c.depth + 1), 0);
+    const from = this.actorBox(compound.from);
+    const to = this.actorBox(compound.to);
+    const x1 = from.offset.left.minus(PADDING);
+    from.offset.left = x1;
+    const x2 = to.offset.right.plus(PADDING);
+    to.offset.right = x2;
+    const bottom = this.newVar(0);
+    const onlyChild = only(children);
+    let y1, y2;
+    switch (true) {
+      case !!onlyChild: {
+        y1 = onlyChild.y1.minus(PADDING_TOP);
+        y2 = onlyChild.y2.plus(PADDING);
+        this.put(bottom).after(onlyChild.bottom, PADDING);
+        break;
+      }
+      // Compound with single actor
+      case to === from: {
+        y1 = this.newVar(0);
+        y2 = this.newVar(0);
+        this.put(y1).before(from.offset.top, PADDING_TOP_FROM_ACTOR);
+        this.put(y2).after(from.offset.bottom, PADDING);
+        this.put(bottom).after(y2);
+        break;
+      }
+      // Compound nested compound, offset from it
+      case children.length > 0: {
+        y1 = this.newVar(0);
+        y2 = this.newVar(0);
+        for (const child of children) {
+          this.put(y1).before(child.y1, PADDING);
+          this.put(y2).after(child.y2, PADDING);
+          this.put(bottom).after(child.bottom, PADDING);
+        }
+        break;
+      }
+      default: {
+        y1 = this.newVar(0);
+        y2 = this.newVar(0);
+        for (var col = from.column; col <= to.column; col++) {
+          const offset = this.actorBox(col).offset;
+          this.put(y1).before(offset.top, PADDING_TOP_FROM_ACTOR);
+          this.put(y2).after(offset.bottom, PADDING);
+        }
+        this.put(bottom).after(y2);
+        break;
+      }
+    }
+    for (var col = from.column; col <= to.column; col++) {
+      const offset = this.actorBox(col).offset;
+      offset.top = y1;
+      offset.bottom = y2;
+    }
+    return [
+      {
+        node: compound.node,
+        depth,
+        from,
+        to,
+        x1,
+        y1,
+        x2,
+        y2,
+        bottom
+      },
+      ...nested
+    ];
+  }
+  ensureRow(row, rowHeight) {
+    while (row >= this.#rows.length) {
+      const prevRowY = this.#rows.length > 0 && this.#rows[this.#rows.length - 1]?.bottom || this.#rowsTop.plus(FIRST_STEP_OFFSET);
+      const y = this.newVar(this.#rows.length * MIN_ROW_HEIGHT);
+      this.put(y).after(prevRowY);
+      const height = this.newVar(MIN_ROW_HEIGHT);
+      this.require(height, ">=", MIN_ROW_HEIGHT);
+      this.#rows.push({
+        y,
+        height,
+        bottom: y.plus(height),
+        lastHeight: MIN_ROW_HEIGHT
+      });
+    }
+    const rowVar = nonNullable(this.#rows[row]);
+    if (rowHeight > rowVar.lastHeight) {
+      rowVar.lastHeight = rowHeight;
+      this.require(rowVar.height, ">=", rowHeight);
+      this.#solver.suggestValue(rowVar.height, rowHeight);
+    }
+  }
+  newVar(initialValue) {
+    const v = new kiwi.Variable();
+    this.#solver.addEditVariable(v, kiwi.Strength.weak);
+    if (initialValue) {
+      this.#solver.suggestValue(v, initialValue);
+      this.constraint(v, ">=", 0, kiwi.Strength.strong);
+    }
+    return v;
+  }
+  /**
+   * Adds a required constraint:
+   * Also adds a weak constraint == if the operator is <= or >=
+   */
+  require(left, op, right = void 0) {
+    this.constraint(left, op, right, kiwi.Strength.required);
+    switch (op) {
+      case "<=":
+      case ">=":
+        this.constraint(left, "==", right, kiwi.Strength.weak);
+        break;
+      case "<= 0":
+      case ">= 0":
+        this.constraint(left, "== 0", void 0, kiwi.Strength.weak);
+        break;
+    }
+  }
+  /**
+   * Adds a constraint with medium strength by default
+   */
+  constraint(left, op, right = void 0, strength = kiwi.Strength.medium) {
+    let operator;
+    switch (op) {
+      case "==":
+        operator = kiwi.Operator.Eq;
+        break;
+      case ">=":
+        operator = kiwi.Operator.Ge;
+        break;
+      case "<=":
+        operator = kiwi.Operator.Le;
+        break;
+      case "== 0": {
+        operator = kiwi.Operator.Eq;
+        right = 0;
+        break;
+      }
+      case ">= 0": {
+        operator = kiwi.Operator.Ge;
+        right = 0;
+        break;
+      }
+      case "<= 0": {
+        operator = kiwi.Operator.Le;
+        right = 0;
+        break;
+      }
+      default:
+        nonexhaustive(op);
+    }
+    this.#solver.addConstraint(new kiwi.Constraint(left, operator, right ?? 0, strength));
+  }
+  put(variable, strength = kiwi.Strength.required) {
+    const eqStrength = strength === kiwi.Strength.required ? kiwi.Strength.medium : kiwi.Strength.weak;
+    return {
+      before: (other, gap) => {
+        if (gap) {
+          other = other.minus(gap);
+        }
+        this.constraint(variable, "<=", other, strength);
+        this.constraint(variable, "==", other, eqStrength);
+      },
+      after: (other, gap) => {
+        if (gap) {
+          other = other.plus(gap);
+        }
+        this.constraint(variable, ">=", other, strength);
+        this.constraint(variable, "==", other, eqStrength);
+      }
+    };
+  }
+  // private recalcActorsRect() {
+  //   this.#actorsRect = this.#columnRects.reduce((acc, rect, index, all) => {
+  //     if (index === 0) {
+  //       acc.minX = rect.min.x.value()
+  //     }
+  //     if (index === all.length - 1) {
+  //       acc.maxX = rect.max.x.value()
+  //     }
+  //     acc.minY = Math.min(acc.minY, rect.min.y.value())
+  //     acc.maxY = Math.max(acc.maxY, rect.max.y.value())
+  //     return acc
+  //   }, {
+  //     minX: Infinity,
+  //     minY: Infinity,
+  //     maxX: -Infinity,
+  //     maxY: -Infinity,
+  //   })
+  // }
+}
+
+export { SequenceViewLayouter };

package/dist/likec4diagram/xyflow-sequence/sequence-view.d.ts

@@ -0,0 +1,7 @@
+import { BBox, LayoutedDynamicView } from '@likec4/core/types';
+import { Types } from '../types';
+export declare function sequenceViewToXY(view: LayoutedDynamicView): {
+    bounds: BBox;
+    xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.ViewGroupNode>;
+    xyedges: Array<Types.SequenceStepEdge>;
+};

package/dist/likec4diagram/xyflow-sequence/sequence-view.js

@@ -0,0 +1,273 @@
+import { isStepEdgeId, getParallelStepsPrefix, RichText } from '@likec4/core/types';
+import { DefaultMap, nonNullable, invariant } from '@likec4/core/utils';
+import { hasAtLeast } from 'remeda';
+import { CONTINUOUS_OFFSET, SeqZIndex, SeqParallelAreaColor } from './const.js';
+import { SequenceViewLayouter } from './layouter.js';
+import { buildCompounds } from './utils.js';
+
+function sequenceViewToXY(view) {
+  const actors = [];
+  const actorPorts = new DefaultMap(() => []);
+  const steps = [];
+  const getNode = (id) => nonNullable(view.nodes.find((n) => n.id === id));
+  const parentsLookup = new DefaultMap(
+    (key) => {
+      const parent = key.parent ? getNode(key.parent) : null;
+      if (parent) {
+        return [parent, ...parentsLookup.get(parent)];
+      }
+      return [];
+    }
+  );
+  const addActor = (...[source, target]) => {
+    if (!actors.includes(source)) {
+      const indexOfTarget = actors.indexOf(target);
+      if (indexOfTarget > 0) {
+        actors.splice(indexOfTarget, 0, source);
+      } else {
+        actors.push(source);
+      }
+    }
+    if (!actors.includes(target)) {
+      actors.push(target);
+    }
+  };
+  let row = 0;
+  for (const edge of view.edges.filter((e) => isStepEdgeId(e.id))) {
+    const prevStep = steps.at(-1);
+    const source = getNode(edge.source);
+    const target = getNode(edge.target);
+    if (source.children.length || target.children.length) {
+      console.error("Sequence view does not support nested actors");
+      continue;
+    }
+    let sourceColumn = actors.indexOf(source);
+    let targetColumn = actors.indexOf(target);
+    const alreadyAdded = sourceColumn >= 0 && targetColumn >= 0;
+    if (!alreadyAdded) {
+      if (edge.dir === "back") {
+        addActor(target, source);
+      } else {
+        addActor(source, target);
+      }
+      sourceColumn = actors.indexOf(source);
+      targetColumn = actors.indexOf(target);
+    }
+    const isSelfLoop = source === target;
+    const isBack = sourceColumn > targetColumn;
+    const parallelPrefix = getParallelStepsPrefix(edge.id);
+    let isContinuing = false;
+    if (prevStep && prevStep.target == source && prevStep.parallelPrefix === parallelPrefix) {
+      isContinuing = prevStep.isSelfLoop !== isSelfLoop || prevStep.isBack === isBack;
+    }
+    if (!isContinuing) {
+      row++;
+    }
+    const step = {
+      id: edge.id,
+      from: {
+        column: sourceColumn,
+        row
+      },
+      to: {
+        column: targetColumn,
+        row: isSelfLoop ? ++row : row
+      },
+      edge,
+      isSelfLoop,
+      isBack,
+      parallelPrefix,
+      offset: isContinuing ? (prevStep?.offset ?? 0) + CONTINUOUS_OFFSET : 0,
+      source,
+      target,
+      label: edge.labelBBox ? {
+        height: edge.labelBBox.height + 8 + (edge.navigateTo ? 20 : 0),
+        width: edge.labelBBox.width + 16,
+        text: edge.label
+      } : null
+    };
+    steps.push(step);
+    actorPorts.get(source).push({ step, row, type: "source", position: isBack && !isSelfLoop ? "left" : "right" });
+    actorPorts.get(target).push({ step, row, type: "target", position: isBack || isSelfLoop ? "right" : "left" });
+  }
+  for (const step of steps) {
+    step.from.column = actors.indexOf(step.source);
+    step.to.column = actors.indexOf(step.target);
+  }
+  invariant(hasAtLeast(actors, 1), "actors array must not be empty");
+  const layout = new SequenceViewLayouter({
+    actors,
+    steps,
+    compounds: buildCompounds(actors, view.nodes)
+  });
+  const bounds = layout.getViewBounds();
+  return {
+    bounds,
+    xynodes: [
+      ...layout.getCompoundBoxes().map((box, i) => toCompoundArea(box, i, view)),
+      ...layout.getParallelBoxes().map((box) => toSeqParallelArea(box, view)),
+      ...actors.map(
+        (actor) => toSeqActorNode({
+          actor,
+          ports: actorPorts.get(actor),
+          bounds,
+          layout,
+          view
+        })
+      )
+    ],
+    xyedges: steps.map(({ id, edge, ...step }) => ({
+      id,
+      type: "seq-step",
+      data: {
+        id,
+        label: step.label?.text ?? null,
+        technology: edge.technology,
+        notes: RichText.from(edge.notes),
+        navigateTo: edge.navigateTo,
+        controlPoints: edge.controlPoints ?? null,
+        labelBBox: {
+          x: 0,
+          y: 0,
+          width: step.label?.width ?? edge.labelBBox?.width ?? 32,
+          height: step.label?.height ?? edge.labelBBox?.height ?? 32
+        },
+        labelXY: null,
+        points: edge.points,
+        color: edge.color ?? "gray",
+        line: edge.line ?? "solid",
+        dir: "forward",
+        head: "normal",
+        tail: "none"
+      },
+      selectable: true,
+      focusable: false,
+      zIndex: 20,
+      interactionWidth: 40,
+      source: step.source.id,
+      sourceHandle: id + "_source",
+      target: step.target.id,
+      targetHandle: id + "_target"
+    }))
+  };
+}
+function toCompoundArea({ node, x, y, width, height, depth }, index, view) {
+  return {
+    id: `${node.id}-${index}`,
+    type: "view-group",
+    data: {
+      id: node.id,
+      title: node.title,
+      color: node.color ?? "gray",
+      shape: node.shape,
+      style: node.style,
+      tags: node.tags,
+      position: [x, y],
+      viewId: view.id,
+      depth,
+      isViewGroup: true
+    },
+    // zIndex: SeqZIndex.compound,
+    position: {
+      x,
+      y
+    },
+    draggable: false,
+    selectable: false,
+    focusable: false,
+    style: {
+      pointerEvents: "none"
+    },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height
+  };
+}
+function toSeqParallelArea({ parallelPrefix, x, y, width, height }, view) {
+  return {
+    id: `seq-parallel-${parallelPrefix}`,
+    type: "seq-parallel",
+    data: {
+      id: `seq-parallel-${parallelPrefix}`,
+      title: "PARALLEL",
+      technology: null,
+      color: SeqParallelAreaColor.default,
+      shape: "rectangle",
+      style: {},
+      tags: [],
+      position: [x, y],
+      level: 0,
+      icon: null,
+      width,
+      height,
+      description: RichText.EMPTY,
+      viewId: view.id,
+      parallelPrefix
+    },
+    zIndex: SeqZIndex.parallel,
+    position: {
+      x,
+      y
+    },
+    draggable: false,
+    deletable: false,
+    selectable: false,
+    focusable: false,
+    style: {
+      pointerEvents: "none"
+    },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height
+  };
+}
+function toSeqActorNode({ actor, ports, bounds, layout, view }) {
+  const { x, y, width, height } = layout.getActorBox(actor);
+  return {
+    id: actor.id,
+    type: "seq-actor",
+    data: {
+      id: actor.id,
+      position: [x, y],
+      level: 0,
+      icon: actor.icon ?? null,
+      isMultiple: actor.style.multiple ?? false,
+      title: actor.title,
+      width,
+      height,
+      color: actor.color,
+      navigateTo: actor.navigateTo ?? null,
+      shape: actor.shape,
+      style: actor.style,
+      tags: actor.tags,
+      modelFqn: actor.modelRef ?? null,
+      technology: actor.technology,
+      description: RichText.from(actor.description),
+      viewHeight: bounds.height,
+      viewId: view.id,
+      ports: ports.map((p) => {
+        const bbox = layout.getPortCenter(p.step, p.type);
+        return {
+          id: p.step.id + "_" + p.type,
+          cx: bbox.cx - x,
+          cy: bbox.cy - y,
+          height: bbox.height,
+          type: p.type,
+          position: p.position
+        };
+      })
+    },
+    deletable: false,
+    selectable: true,
+    zIndex: SeqZIndex.actor,
+    position: { x, y },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height
+  };
+}
+
+export { sequenceViewToXY };

package/dist/likec4diagram/xyflow-sequence/utils.d.ts

@@ -0,0 +1,14 @@
+import { DiagramNode } from '@likec4/core/types';
+import { Compound, ParallelRect, Step } from './_types';
+/**
+ * From steps find boxes that must be marked as parallel on the layout
+ */
+export declare function findParallelRects(steps: Array<Step>): Array<ParallelRect>;
+/**
+ * Builds a tree of compounds from actors and nodes.
+ * @param actors the actors in the sequence view
+ * @param nodes the nodes in likec4 diagram
+ * @returns an array of compounds where each compound is a node in the sequence view
+ * that is an ancestor of one of the actors
+ */
+export declare function buildCompounds(actors: Array<DiagramNode>, nodes: Array<DiagramNode>): Array<Compound>;