@likec4/diagram 1.41.0 → 1.42.1

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.js

@@ -1,67 +0,0 @@
-import { css } from '@likec4/styles/css';
-
-const container = css({
-  position: "absolute",
-  bottom: "xxs",
-  left: "[50%]",
-  transform: "translateX(-50%)",
-  padding: "[0px]",
-  margin: "[0px]",
-  display: "flex",
-  flexDirection: "column",
-  gap: "[0.4rem]",
-  alignItems: "center",
-  md: {
-    gap: "[0.6rem]"
-  }
-});
-const tablerIcons = {
-  "& .tabler-icon": {
-    width: "0.85em",
-    height: "0.85em"
-  }
-};
-const buttons = css({
-  backdropFilter: "blur(8px)",
-  transition: "all 175ms ease-in",
-  _hover: {
-    transitionTimingFunction: "out",
-    transform: "scale(1.1)"
-  },
-  _active: {
-    transitionDuration: "100ms",
-    transform: "scale(0.98) translateY(3px)"
-  },
-  ...tablerIcons
-});
-const btn = css({
-  transition: "all 175ms ease-in",
-  background: "mantine.colors.primary.filled/65",
-  _hover: {
-    background: "mantine.colors.primary.filledHover/65"
-  },
-  _light: {
-    background: "mantine.colors.primary.filled/85",
-    _hover: {
-      background: "mantine.colors.primary.filledHover/85"
-    }
-  },
-  ...tablerIcons
-});
-const parallelStateFrame = css({
-  position: "absolute",
-  margin: "0",
-  padding: "0",
-  top: "0",
-  left: "0",
-  width: "100%",
-  height: "100%",
-  border: `2px solid`,
-  borderColor: "mantine.colors.orange[6]",
-  pointerEvents: "none",
-  md: {
-    borderWidth: 4
-  }
-});
-
-export { btn, buttons, container, parallelStateFrame };

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.d.ts

@@ -1 +0,0 @@
-export declare function DynamicViewWalkthrough(): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -1,124 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { Box, Button, Badge, ButtonGroup } from '@mantine/core';
-import { AnimatePresence, m } from 'motion/react';
-import { isTruthy, isNonNull } from 'remeda';
-import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
-import { parallelStateFrame, btn, buttons, container } from './DynamicViewWalkthrough.css.js';
-import { useXYStore } from '../../../hooks/useXYFlow.js';
-import IconPlayerPlayFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
-import IconPlayerSkipBackFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
-import IconPlayerStopFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
-import IconPlayerSkipForwardFilled from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
-
-function DynamicViewWalkthrough() {
-  const isMobile = useXYStore((s) => s.width <= 750);
-  const {
-    isActive,
-    isParallel,
-    hasNext,
-    hasPrevious
-  } = useDiagramContext((s) => ({
-    isActive: isNonNull(s.activeWalkthrough),
-    isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
-    hasNext: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) < s.xyedges.length - 1,
-    hasPrevious: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) > 0
-  }));
-  const diagram = useDiagram();
-  const buttonProps = {
-    className: btn,
-    size: isMobile ? "compact-md" : "lg",
-    radius: isMobile ? "lg" : "xl"
-  };
-  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    isParallel && /* @__PURE__ */ jsx(
-      Box,
-      {
-        layout: true,
-        component: m.div,
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        className: cx("react-flow__panel", parallelStateFrame)
-      },
-      "parallel-frame"
-    ),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        className: cx("react-flow__panel", container),
-        onClick: (e) => e.stopPropagation(),
-        onDoubleClick: (e) => e.stopPropagation(),
-        children: [
-          !isActive && /* @__PURE__ */ jsx(
-            Button,
-            {
-              ...buttonProps,
-              className: cx(buttons, btn),
-              rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
-              onClick: () => diagram.startWalkthrough(),
-              px: "xl",
-              children: "Start"
-            }
-          ),
-          isParallel && /* @__PURE__ */ jsx(
-            Badge,
-            {
-              component: m.div,
-              initial: { opacity: 0.05, transform: "translateY(20px)" },
-              animate: { opacity: 1, transform: "translateY(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateY(20px)"
-              },
-              variant: "gradient",
-              size: isMobile ? "xs" : "md",
-              gradient: { from: "red", to: "orange", deg: 90 },
-              radius: "sm",
-              children: "parallel"
-            },
-            "parallel-badge"
-          ),
-          isActive && /* @__PURE__ */ jsxs(ButtonGroup, { className: buttons, children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                ...buttonProps,
-                pl: "lg",
-                disabled: !hasPrevious,
-                onClick: () => diagram.walkthroughStep("previous"),
-                children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                ...buttonProps,
-                px: hasNext ? "md" : "xl",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  diagram.stopWalkthrough();
-                },
-                children: [
-                  hasNext && /* @__PURE__ */ jsx(IconPlayerStopFilled, {}),
-                  !hasNext && "End"
-                ]
-              }
-            ),
-            hasNext && /* @__PURE__ */ jsx(
-              Button,
-              {
-                ...buttonProps,
-                pr: "lg",
-                onClick: () => diagram.walkthroughStep("next"),
-                children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-
-export { DynamicViewWalkthrough };

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

@@ -1,408 +0,0 @@
-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 };