@likec4/diagram 1.18.0 → 1.19.0

package/dist/state/DiagramContext.js

@@ -0,0 +1,101 @@
+import { jsx } from "react/jsx-runtime";
+import { invariant } from "@likec4/core";
+import { Box } from "@mantine/core";
+import { useReducedMotion, useMergedRef } from "@mantine/hooks";
+import { shallowEqual, deepEqual } from "fast-equals";
+import { useAnimate } from "framer-motion";
+import { createContext, useRef, useCallback, useEffect } from "react";
+import { clone } from "remeda";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
+import { useXYStoreApi, useXYFlow } from "../hooks/useXYFlow.js";
+import { createDiagramStore } from "./diagramStore.js";
+const DiagramContext = createContext(null);
+function DiagramContextProvider({
+  children,
+  view,
+  className,
+  keepAspectRatio,
+  whereFilter,
+  ...props
+}) {
+  const isMotionReduced = useReducedMotion() ?? false;
+  const [scope, animate] = useAnimate();
+  const containerRef = useRef(null);
+  const ref = useMergedRef(scope, containerRef);
+  const xystore = useXYStoreApi();
+  const xyflow = useXYFlow();
+  const store = useRef();
+  const getContainer = useCallback(() => containerRef.current, [containerRef]);
+  if (!store.current) {
+    store.current = createDiagramStore({
+      xystore,
+      xyflow,
+      view,
+      getContainer,
+      whereFilter: clone(whereFilter),
+      ...props
+    });
+  }
+  useUpdateEffect(
+    () => {
+      var _a;
+      return (_a = store.current) == null ? void 0 : _a.setState({ xyflow, xystore, getContainer }, false, "update xyflow and xystore");
+    },
+    [xyflow, xystore, getContainer]
+  );
+  useUpdateEffect(
+    () => {
+      var _a;
+      return (_a = store.current) == null ? void 0 : _a.setState(props, false, "update incoming props");
+    },
+    [props]
+  );
+  useUpdateEffect(
+    () => {
+      const current = store.current;
+      invariant(current, "DiagramContext.store.current is not defined");
+      if (!deepEqual(whereFilter, current.getState().whereFilter)) {
+        current.setState({ whereFilter: clone(whereFilter) }, false, "update where filter");
+      }
+      current.getState().updateView(view);
+    },
+    [view, whereFilter],
+    (a, b) => shallowEqual(a[0], b[0]) && deepEqual(a[1], b[1])
+  );
+  const api = store.current;
+  useEffect(() => {
+    if (isMotionReduced) {
+      return;
+    }
+    return api.subscribe((s) => !!s.activeOverlay, (isActiveOverlay) => {
+      animate(".likec4-diagram .react-flow__renderer", {
+        opacity: isActiveOverlay ? 0.7 : 1,
+        filter: isActiveOverlay ? "grayscale(1)" : "grayscale(0)",
+        transform: isActiveOverlay ? `perspective(300px) translateZ(-10px) translateY(2px)` : `translateY(0)`
+      }, {
+        duration: isActiveOverlay ? 0.4 : 0.2
+      });
+    }, {
+      fireImmediately: true
+    });
+  }, [api, isMotionReduced]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      className,
+      ...keepAspectRatio && {
+        style: {
+          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
+          maxHeight: Math.ceil(view.bounds.height)
+        }
+      },
+      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: api, children })
+    }
+  );
+}
+DiagramContextProvider.displayName = "DiagramContextProvider";
+export {
+  DiagramContext,
+  DiagramContextProvider
+};

package/dist/state/aligners.d.ts

@@ -0,0 +1,42 @@
+import { Rect, XYPosition } from '@xyflow/react';
+export type GridAlignmentMode = 'Column' | 'Row';
+export type LinearAlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom';
+export declare abstract class Aligner {
+    abstract computeLayout(nodes: NodeRect[]): void;
+    abstract applyPosition(node: NodeRect): Partial<XYPosition>;
+}
+export declare class LinearAligner extends Aligner {
+    private getEdgePosition;
+    private computePosition;
+    private propertyToEdit;
+    private alignTo;
+    constructor(getEdgePosition: (nodes: NodeRect[]) => number, computePosition: (alignTo: number, node: NodeRect) => number, propertyToEdit: keyof XYPosition);
+    computeLayout(nodes: NodeRect[]): void;
+    applyPosition(node: NodeRect): Partial<XYPosition>;
+}
+export type NodeRect = Rect & {
+    id: string;
+};
+export declare class GridAligner extends Aligner {
+    private layout;
+    private axisPreset;
+    private get primaryAxisCoord();
+    private get secondaryAxisCoord();
+    private get primaryAxisDimension();
+    private get secondaryAxisDimension();
+    constructor(alignmentMode: GridAlignmentMode);
+    applyPosition(node: NodeRect): Partial<XYPosition>;
+    computeLayout(nodes: NodeRect[]): void;
+    private getLayoutRect;
+    private getLayers;
+    private buildLayout;
+    private buildLayerLayout;
+    private spaceBetween;
+    private spaceAround;
+    private placeInGaps;
+    private placeInCells;
+    private scoreLayout;
+    private getGapsPositions;
+    private getNodePositions;
+}
+export declare function getLinearAligner(mode: LinearAlignmentMode): Aligner;

package/dist/state/aligners.js

@@ -0,0 +1,349 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { invariant } from "@likec4/core";
+import { pipe, sortBy, map, pick, reduce } from "remeda";
+class Aligner {
+}
+class LinearAligner extends Aligner {
+  constructor(getEdgePosition, computePosition, propertyToEdit) {
+    super();
+    __publicField(this, "alignTo");
+    this.getEdgePosition = getEdgePosition;
+    this.computePosition = computePosition;
+    this.propertyToEdit = propertyToEdit;
+  }
+  computeLayout(nodes) {
+    this.alignTo = this.getEdgePosition(nodes);
+  }
+  applyPosition(node) {
+    return {
+      [this.propertyToEdit]: this.computePosition(this.alignTo, node)
+    };
+  }
+}
+class GridAligner extends Aligner {
+  constructor(alignmentMode) {
+    super();
+    __publicField(this, "layout", /* @__PURE__ */ new Map());
+    __publicField(this, "axisPreset");
+    this.axisPreset = alignmentMode === "Column" ? {
+      primaryAxisDimension: "width",
+      secondaryAxisDimension: "height",
+      primaryAxisCoord: "x",
+      secondaryAxisCoord: "y"
+    } : {
+      primaryAxisDimension: "height",
+      secondaryAxisDimension: "width",
+      primaryAxisCoord: "y",
+      secondaryAxisCoord: "x"
+    };
+  }
+  get primaryAxisCoord() {
+    return this.axisPreset.primaryAxisCoord;
+  }
+  get secondaryAxisCoord() {
+    return this.axisPreset.secondaryAxisCoord;
+  }
+  get primaryAxisDimension() {
+    return this.axisPreset.primaryAxisDimension;
+  }
+  get secondaryAxisDimension() {
+    return this.axisPreset.secondaryAxisDimension;
+  }
+  applyPosition(node) {
+    var _a;
+    return ((_a = this.layout) == null ? void 0 : _a.get(node.id)) ?? {};
+  }
+  computeLayout(nodes) {
+    const sortedNodeRects = pipe(
+      nodes,
+      sortBy((r) => r[this.primaryAxisCoord])
+    );
+    const layoutRect = this.getLayoutRect(sortedNodeRects);
+    const layers = this.getLayers(sortedNodeRects);
+    this.layout = this.buildLayout(layers, layoutRect, sortedNodeRects);
+  }
+  getLayoutRect(nodeRects) {
+    const x = Math.min(...nodeRects.map((n) => n.x));
+    const y = Math.min(...nodeRects.map((n) => n.y));
+    const right = Math.max(...nodeRects.map((n) => n.x + n.width));
+    const bottom = Math.max(...nodeRects.map((n) => n.y + n.height));
+    return {
+      x,
+      y,
+      width: right - x,
+      height: bottom - y
+    };
+  }
+  getLayers(sortedNodeRects) {
+    const layers = [];
+    let layerEnd = 0;
+    let layer = null;
+    for (let node of sortedNodeRects) {
+      if (!!layer && node[this.primaryAxisCoord] < layerEnd) {
+        layer.nodes.push(node);
+        layer.primaryAxisSize = Math.max(layer.primaryAxisSize, node[this.primaryAxisDimension]);
+        layer.occupiedSpace += node[this.secondaryAxisDimension];
+        layerEnd = Math.max(
+          node[this.primaryAxisCoord] + node[this.primaryAxisDimension],
+          layerEnd
+        );
+      } else {
+        layer = {
+          primaryAxisSize: node[this.primaryAxisDimension],
+          nodes: [node],
+          occupiedSpace: node[this.secondaryAxisDimension],
+          layout: null
+        };
+        layers.push(layer);
+        layerEnd = node[this.primaryAxisCoord] + node[this.primaryAxisDimension];
+        continue;
+      }
+    }
+    layers.forEach(
+      (l) => l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord])
+    );
+    return layers;
+  }
+  buildLayout(layers, layoutRect, nodeRects) {
+    const nodeMap = new Map(nodeRects.map((n) => [n.id, n]));
+    const layout = [];
+    const occupiedSpace = layers.reduce((a, b) => a + b.primaryAxisSize, 0);
+    const rowMargin = layers.length > 1 ? (layoutRect[this.primaryAxisDimension] - occupiedSpace) / (layers.length - 1) : 0;
+    const baseLayerIndex = layers.reduce(
+      (widestLayerIndex, layer, i) => layers[widestLayerIndex].occupiedSpace < layer.occupiedSpace ? i : widestLayerIndex,
+      0
+    );
+    const baseLayer = layers[baseLayerIndex];
+    const baseLayerPosition = layers.slice(0, baseLayerIndex).reduce(
+      (a, layer) => a + layer.primaryAxisSize + rowMargin,
+      layoutRect[this.primaryAxisCoord]
+    );
+    const baseLayerLayout = this.buildLayerLayout(
+      baseLayer,
+      layoutRect,
+      baseLayerPosition,
+      nodeMap,
+      null
+    );
+    baseLayer.layout = baseLayerLayout;
+    layout.push(...baseLayerLayout.nodePositions);
+    let placeNextLayerAt = baseLayerPosition + baseLayer.primaryAxisSize + rowMargin;
+    let refLayer = baseLayer;
+    for (let i = baseLayerIndex + 1; i < layers.length; i++) {
+      const layer = layers[i];
+      layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer);
+      layout.push(...layer.layout.nodePositions);
+      refLayer = layer.layout.refLayer ?? layer;
+      placeNextLayerAt += layer.primaryAxisSize + rowMargin;
+    }
+    placeNextLayerAt = baseLayerPosition;
+    refLayer = baseLayer;
+    for (let i = baseLayerIndex - 1; i >= 0; i--) {
+      const layer = layers[i];
+      placeNextLayerAt -= layer.primaryAxisSize + rowMargin;
+      layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer);
+      layout.push(...layer.layout.nodePositions);
+      refLayer = layer.layout.refLayer ?? layer;
+    }
+    return new Map(layout);
+  }
+  buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer) {
+    let bestLayerLayout = this.scoreLayout(
+      this.spaceAround(layer, layoutRect, placeNextLayerAt),
+      nodeMap
+    );
+    if (layer.nodes.length != 1) {
+      const currentlayerLayout = this.scoreLayout(
+        this.spaceBetween(layer, layoutRect, placeNextLayerAt),
+        nodeMap
+      );
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+    }
+    if (refLayer && refLayer.nodes.length - 1 >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInGaps(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      );
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+    }
+    if (refLayer && refLayer.nodes.length >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInCells(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      );
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout;
+    }
+    return bestLayerLayout[1];
+  }
+  spaceBetween(layer, layoutRect, placeNextLayerAt) {
+    const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace;
+    const margin = freeSpace / (layer.nodes.length - 1);
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord];
+    const result = /* @__PURE__ */ new Map();
+    for (let node of layer.nodes) {
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      });
+      placeNextNodeAt += node[this.secondaryAxisDimension] + margin;
+    }
+    return { nodePositions: result, refLayer: null };
+  }
+  spaceAround(layer, layoutRect, placeNextLayerAt) {
+    const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace;
+    const margin = freeSpace / (layer.nodes.length + 1);
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord] + margin;
+    const result = /* @__PURE__ */ new Map();
+    for (let node of sortBy(layer.nodes, (n) => n[this.secondaryAxisCoord])) {
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      });
+      placeNextNodeAt += node[this.secondaryAxisDimension] + margin;
+    }
+    return { nodePositions: result, refLayer: null };
+  }
+  placeInGaps(layer, placeNextLayerAt, refLayer) {
+    const result = /* @__PURE__ */ new Map();
+    const nodes = layer.nodes;
+    const placementOptions = this.getGapsPositions(refLayer);
+    let optionIndex = 0;
+    for (let i = 0, node = nodes[i]; i < nodes.length; i++, node = nodes[i]) {
+      const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2;
+      let bestOffset = Infinity;
+      while (optionIndex - i <= placementOptions.length - nodes.length) {
+        let position = placementOptions[optionIndex];
+        const offset = position - nodeCenter;
+        if (Math.abs(offset) < Math.abs(bestOffset)) {
+          bestOffset = offset;
+          optionIndex++;
+        } else {
+          break;
+        }
+      }
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      });
+    }
+    return { nodePositions: result, refLayer };
+  }
+  placeInCells(layer, placeNextLayerAt, refLayer) {
+    const result = /* @__PURE__ */ new Map();
+    const nodes = layer.nodes;
+    const placementOptions = this.getNodePositions(refLayer);
+    let optionIndex = 0;
+    for (let i = 0, node = nodes[i]; i < nodes.length; i++, node = nodes[i]) {
+      const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2;
+      let bestOffset = Infinity;
+      while (optionIndex - i <= placementOptions.length - nodes.length) {
+        let position = placementOptions[optionIndex];
+        const offset = position - nodeCenter;
+        if (Math.abs(offset) < Math.abs(bestOffset)) {
+          bestOffset = offset;
+          optionIndex++;
+        } else {
+          break;
+        }
+      }
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      });
+    }
+    return { nodePositions: result, refLayer };
+  }
+  scoreLayout(layout, originalRects) {
+    return [
+      pipe(
+        Array.from(layout.nodePositions),
+        map(([id, position]) => {
+          const originalRect = originalRects.get(id);
+          invariant(originalRect, `Could not find original rect for node ${id}`);
+          return [pick(originalRect, ["x", "y"]), position];
+        }),
+        map(
+          ([original, suggested]) => Math.abs(original[this.secondaryAxisCoord] - suggested[this.secondaryAxisCoord])
+        ),
+        reduce((a, b) => a + b, 0)
+      ),
+      layout
+    ];
+  }
+  getGapsPositions(layer) {
+    const result = [];
+    const { layout, nodes } = layer;
+    invariant(layout, "Layout of the layer must be computed before calling getGapsPositions");
+    for (let i = 1; i < nodes.length; i++) {
+      const previousNode = nodes[i - 1];
+      const currentNode = nodes[i];
+      const previousNodePosition = layout.nodePositions.get(previousNode.id);
+      const currentNodePosition = layout.nodePositions.get(currentNode.id);
+      result.push(
+        (currentNodePosition[this.secondaryAxisCoord] + previousNodePosition[this.secondaryAxisCoord] + previousNode[this.secondaryAxisDimension]) / 2
+      );
+    }
+    return result;
+  }
+  getNodePositions(layer) {
+    const result = [];
+    const { layout, nodes } = layer;
+    invariant(layout, "Layout of the layer must be computed before calling getGapsPositions");
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      const nodePosition = layout.nodePositions.get(node.id);
+      result.push(
+        nodePosition[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2
+      );
+    }
+    return result;
+  }
+}
+function getLinearAligner(mode) {
+  switch (mode) {
+    case "Left":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n) => n.x)),
+        (alignTo, _) => Math.floor(alignTo),
+        "x"
+      );
+    case "Top":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n) => n.y)),
+        (alignTo, _) => Math.floor(alignTo),
+        "y"
+      );
+    case "Right":
+      return new LinearAligner(
+        (nodes) => Math.max(...nodes.map((n) => n.x + n.width)),
+        (alignTo, node) => Math.floor(alignTo - node.width),
+        "x"
+      );
+    case "Bottom":
+      return new LinearAligner(
+        (nodes) => Math.max(...nodes.map((n) => n.y + n.height)),
+        (alignTo, node) => Math.floor(alignTo - node.height),
+        "y"
+      );
+    case "Center":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n) => n.x + n.width / 2)),
+        (alignTo, node) => Math.floor(alignTo - node.width / 2),
+        "x"
+      );
+    case "Middle":
+      return new LinearAligner(
+        (nodes) => Math.min(...nodes.map((n) => n.y + n.height / 2)),
+        (alignTo, node) => Math.floor(alignTo - node.height / 2),
+        "y"
+      );
+  }
+}
+export {
+  Aligner,
+  GridAligner,
+  LinearAligner,
+  getLinearAligner
+};

package/dist/state/diagram-to-xyflow.d.ts

@@ -0,0 +1,11 @@
+import { DiagramView } from '@likec4/core';
+import { WhereOperator } from '../LikeC4Diagram.props';
+import { DiagramFlowTypes } from '../xyflow/types';
+export declare function diagramViewToXYFlowData(view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>, opts: {
+    where: WhereOperator<string, string> | null;
+    draggable: boolean;
+    selectable: boolean;
+}): {
+    xynodes: DiagramFlowTypes.Node[];
+    xyedges: DiagramFlowTypes.Edge[];
+};

package/dist/state/diagram-to-xyflow.js

@@ -0,0 +1,113 @@
+import { whereOperatorAsPredicate, ElementKind, nonNullable } from "@likec4/core";
+import { hasAtLeast } from "remeda";
+import { ZIndexes } from "../xyflow/const.js";
+function diagramViewToXYFlowData(view, opts) {
+  view.__ === "dynamic";
+  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  const traverse = view.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node);
+      if (!node.parent) {
+        acc.push({ node, parent: null });
+      }
+      return acc;
+    },
+    new Array()
+  );
+  let visiblePredicate = (_nodeOrEdge) => true;
+  if (opts.where) {
+    try {
+      visiblePredicate = whereOperatorAsPredicate(opts.where);
+    } catch (e) {
+      console.error("Error in where filter:", e);
+    }
+  }
+  const ns = "";
+  const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+  let next;
+  while (next = traverse.shift()) {
+    const { node, parent } = next;
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group;
+    if (isCompound) {
+      traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
+    }
+    const position = {
+      x: node.position[0],
+      y: node.position[1]
+    };
+    if (parent) {
+      position.x -= parent.position[0];
+      position.y -= parent.position[1];
+    }
+    const id = ns + node.id;
+    const base = {
+      id,
+      draggable: opts.draggable,
+      selectable: opts.selectable && node.kind !== ElementKind.Group,
+      focusable: opts.selectable && !isCompound,
+      deletable: false,
+      position,
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+      width: node.width,
+      height: node.height,
+      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
+      ...parent && {
+        parentId: ns + parent.id
+      }
+    };
+    xynodes.push(
+      isCompound ? {
+        ...base,
+        type: "compound",
+        data: {
+          fqn: node.id,
+          isViewGroup: node.kind === ElementKind.Group,
+          element: node
+        },
+        dragHandle: ".likec4-compound-title"
+      } : {
+        ...base,
+        type: "element",
+        data: {
+          fqn: node.id,
+          element: node
+        }
+      }
+    );
+  }
+  for (const edge of view.edges) {
+    const source = edge.source;
+    const target = edge.target;
+    const id = ns + edge.id;
+    if (!hasAtLeast(edge.points, 2)) {
+      console.error("edge should have at least 2 points", edge);
+      continue;
+    }
+    xyedges.push({
+      id,
+      type: "relationship",
+      source: ns + source,
+      target: ns + target,
+      zIndex: ZIndexes.Edge,
+      selectable: opts.selectable,
+      hidden: !visiblePredicate(edge),
+      deletable: false,
+      data: {
+        edge,
+        controlPoints: edge.controlPoints || null,
+        label: !!edge.labelBBox ? {
+          bbox: edge.labelBBox,
+          text: edge.label ?? ""
+        } : null
+      },
+      interactionWidth: 20
+    });
+  }
+  return {
+    xynodes,
+    xyedges
+  };
+}
+export {
+  diagramViewToXYFlowData
+};