@likec4/diagram 1.19.2 → 1.20.0

package/dist/likec4diagram/state/actorContext.js

@@ -0,0 +1,12 @@
+import { createActorContext } from "@xstate/react";
+import { diagramMachine } from "./machine.js";
+const {
+  Provider: LikeC4ViewMachineContextProvider,
+  useSelector,
+  useActorRef
+} = createActorContext(diagramMachine);
+export {
+  LikeC4ViewMachineContextProvider,
+  useActorRef,
+  useSelector
+};

package/dist/{state → likec4diagram/state}/aligners.d.ts

@@ -1,6 +1,7 @@
-import { Rect, XYPosition } from '@xyflow/react';
+import { InternalNode, Rect, XYPosition } from '@xyflow/react';
 export type GridAlignmentMode = 'Column' | 'Row';
 export type LinearAlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom';
+export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode;
 export declare abstract class Aligner {
     abstract computeLayout(nodes: NodeRect[]): void;
     abstract applyPosition(node: NodeRect): Partial<XYPosition>;
@@ -40,3 +41,5 @@ export declare class GridAligner extends Aligner {
     private getNodePositions;
 }
 export declare function getLinearAligner(mode: LinearAlignmentMode): Aligner;
+export declare function toNodeRect(node: InternalNode): NodeRect;
+export declare function getAligner(mode: AlignmentMode): Aligner;

package/dist/{state → likec4diagram/state}/aligners.js

@@ -1,7 +1,8 @@
 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 { nonexhaustive, invariant } from "@likec4/core";
+import { getNodeDimensions } from "@xyflow/system";
 import { pipe, sortBy, map, pick, reduce } from "remeda";
 class Aligner {
 }
@@ -101,9 +102,7 @@ class GridAligner extends Aligner {
         continue;
       }
     }
-    layers.forEach(
-      (l) => l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord])
-    );
+    layers.forEach((l) => l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord]));
     return layers;
   }
   buildLayout(layers, layoutRect, nodeRects) {
@@ -341,9 +340,36 @@ function getLinearAligner(mode) {
       );
   }
 }
+function toNodeRect(node) {
+  const { width, height } = getNodeDimensions(node);
+  return {
+    ...node.internals.positionAbsolute,
+    id: node.id,
+    width,
+    height
+  };
+}
+function getAligner(mode) {
+  switch (mode) {
+    case "Left":
+    case "Right":
+    case "Top":
+    case "Bottom":
+    case "Center":
+    case "Middle":
+      return getLinearAligner(mode);
+    case "Column":
+    case "Row":
+      return new GridAligner(mode);
+    default:
+      nonexhaustive(mode);
+  }
+}
 export {
   Aligner,
   GridAligner,
   LinearAligner,
-  getLinearAligner
+  getAligner,
+  getLinearAligner,
+  toNodeRect
 };

package/dist/likec4diagram/state/assign.d.ts

@@ -0,0 +1,18 @@
+import { Types } from '../types';
+import { ActionArg, DiagramContext } from './machine';
+export declare function lastClickedNode(params: {
+    context: DiagramContext;
+    event: {
+        node: Types.Node;
+    };
+}): DiagramContext['lastClickedNode'];
+export declare function mergeXYNodesEdges({ context, event }: ActionArg): Partial<DiagramContext>;
+export declare function focusNodesEdges(params: ActionArg): Partial<DiagramContext>;
+export declare function unfocusNodesEdges({ context }: ActionArg): Partial<DiagramContext>;
+export declare function updateNavigationHistory({ context, event }: ActionArg): Partial<DiagramContext>;
+export declare function navigateBack({ context }: ActionArg): Partial<DiagramContext>;
+export declare function navigateForward({ context }: ActionArg): Partial<DiagramContext>;
+export declare function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext>;
+export declare function updateEdgeData({ context, event }: ActionArg): Partial<DiagramContext>;
+export declare function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramContext>;
+export declare function updateActiveWalkthrough({ context }: ActionArg): Partial<DiagramContext>;

package/dist/likec4diagram/state/assign.js

@@ -0,0 +1,343 @@
+import { nonNullable, invariant } from "@likec4/core";
+import { getNodeDimensions } from "@xyflow/system";
+import { deepEqual } from "fast-equals";
+import { omit, mergeDeep, isEmpty } from "remeda";
+import { assertEvent } from "xstate";
+import { VectorImpl, vector } from "../../utils/vector.js";
+import { Base } from "../../base/types.js";
+function lastClickedNode(params) {
+  const { lastClickedNode: lastClickedNode2 } = params.context;
+  if (!lastClickedNode2 || lastClickedNode2.id !== params.event.node.id) {
+    return {
+      id: params.event.node.id,
+      clicks: 1,
+      timestamp: Date.now()
+    };
+  }
+  return {
+    id: lastClickedNode2.id,
+    clicks: lastClickedNode2.clicks + 1,
+    timestamp: Date.now()
+  };
+}
+function mergeXYNodesEdges({ context, event }) {
+  assertEvent(event, "update.view");
+  const nextView = event.view;
+  const isSameView = context.view.id === nextView.id;
+  const currentNodes = context.xynodes;
+  const xynodes = event.xynodes.map((update) => {
+    const existing = currentNodes.find((n) => n.id === update.id);
+    if (existing) {
+      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
+      if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null)) {
+        return existing;
+      }
+      return {
+        ...omit(existing, ["measured", "parentId"]),
+        ...update,
+        // Force dimensions from update
+        width: update.initialWidth,
+        height: update.initialHeight,
+        data: {
+          ...existing.data,
+          ...update.data
+        }
+      };
+    }
+    return update;
+  });
+  let xyedges = event.xyedges;
+  if (isSameView && !nextView.hasLayoutDrift) {
+    const currentEdges = context.xyedges;
+    xyedges = event.xyedges.map((update) => {
+      const existing = currentEdges.find((n) => n.id === update.id);
+      if (existing) {
+        if (deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.data, update.data)) {
+          return existing;
+        }
+        return {
+          ...existing,
+          ...update,
+          data: {
+            ...existing.data,
+            ...update.data
+          }
+        };
+      }
+      return update;
+    });
+  }
+  if (!isSameView) {
+    for (const node of xynodes) {
+      node.data = {
+        ...node.data,
+        dimmed: false,
+        hovered: false
+      };
+    }
+    for (const edge of xyedges) {
+      edge.data = {
+        ...edge.data,
+        dimmed: false,
+        hovered: false,
+        active: false
+      };
+    }
+  }
+  return {
+    xynodes,
+    xyedges,
+    view: nextView
+  };
+}
+function focusNodesEdges(params) {
+  const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = params.context;
+  if (!focusedNode) {
+    return {};
+  }
+  const focused = /* @__PURE__ */ new Set([focusedNode]);
+  const xyedges = _xyedges.map((edge) => {
+    if (edge.source === focusedNode || edge.target === focusedNode) {
+      focused.add(edge.source);
+      focused.add(edge.target);
+      return Base.setData(edge, {
+        dimmed: false,
+        active: true
+      });
+    }
+    return Base.setData(edge, {
+      dimmed: true,
+      active: false
+    });
+  });
+  return {
+    xynodes: _xynodes.map((n) => Base.setDimmed(n, !focused.has(n.id))),
+    xyedges
+  };
+}
+function unfocusNodesEdges({ context }) {
+  const { xynodes, xyedges } = context;
+  return {
+    xynodes: xynodes.map(Base.setDimmed(false)),
+    xyedges: xyedges.map(Base.setData({
+      dimmed: false,
+      active: false
+    }))
+  };
+}
+function updateNavigationHistory({ context, event }) {
+  assertEvent(event, "update.view");
+  let {
+    view,
+    navigationHistory: {
+      currentIndex,
+      history
+    },
+    lastOnNavigate,
+    viewport
+  } = context;
+  const stepCurrent = nonNullable(history[currentIndex]);
+  if (stepCurrent.viewId !== event.view.id) {
+    if (!lastOnNavigate) {
+      const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;
+      if (stepBack && stepBack.viewId === event.view.id) {
+        return {
+          navigationHistory: {
+            currentIndex: currentIndex - 1,
+            history
+          },
+          lastOnNavigate: {
+            fromView: stepCurrent.viewId,
+            toView: stepBack.viewId,
+            fromNode: stepCurrent.fromNode
+          }
+        };
+      }
+      const stepForward = currentIndex < history.length - 1 ? nonNullable(history[currentIndex + 1]) : null;
+      if (stepForward && stepForward.viewId === event.view.id) {
+        return {
+          navigationHistory: {
+            currentIndex: currentIndex + 1,
+            history
+          },
+          lastOnNavigate: {
+            fromView: stepCurrent.viewId,
+            toView: stepForward.viewId,
+            fromNode: stepForward.fromNode
+          }
+        };
+      }
+    }
+    history = [
+      ...history.slice(0, currentIndex + 1),
+      {
+        viewId: event.view.id,
+        fromNode: (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode) ?? null,
+        viewport: { ...viewport }
+      }
+    ];
+    currentIndex = history.length - 1;
+    return {
+      navigationHistory: {
+        currentIndex,
+        history
+      }
+    };
+  }
+  return {};
+}
+function navigateBack({ context }) {
+  const {
+    navigationHistory: {
+      currentIndex,
+      history
+    }
+  } = context;
+  invariant(currentIndex > 0, "Cannot navigate back");
+  const stepCurrent = history[currentIndex];
+  const stepBack = history[currentIndex - 1];
+  return {
+    navigationHistory: {
+      currentIndex: currentIndex - 1,
+      history
+    },
+    lastOnNavigate: {
+      fromView: stepCurrent.viewId,
+      toView: stepBack.viewId,
+      fromNode: stepCurrent.fromNode
+    }
+  };
+}
+function navigateForward({ context }) {
+  const {
+    navigationHistory: {
+      currentIndex,
+      history
+    }
+  } = context;
+  invariant(currentIndex < history.length - 1, "Cannot navigate forward");
+  const stepCurrent = history[currentIndex];
+  const stepForward = history[currentIndex + 1];
+  return {
+    navigationHistory: {
+      currentIndex: currentIndex + 1,
+      history
+    },
+    lastOnNavigate: {
+      fromView: stepCurrent.viewId,
+      toView: stepForward.viewId,
+      fromNode: stepForward.fromNode
+    }
+  };
+}
+function updateNodeData({ context, event }) {
+  assertEvent(event, "update.nodeData");
+  const xynodes = context.xynodes.map(
+    (node) => node.id !== event.nodeId ? node : {
+      ...node,
+      data: mergeDeep(node.data, event.data)
+    }
+  );
+  return { xynodes };
+}
+function updateEdgeData({ context, event }) {
+  assertEvent(event, "update.edgeData");
+  const xyedges = context.xyedges.map(
+    (edge) => edge.id !== event.edgeId ? edge : {
+      ...edge,
+      data: mergeDeep(edge.data, event.data)
+    }
+  );
+  return { xyedges };
+}
+function resetEdgeControlPoints({ context }) {
+  const { xynodes } = context;
+  function getNodeCenter(node, nodes) {
+    const dimensions = vector({ x: node.width || 0, y: node.height || 0 });
+    let position = vector(node.position).add(dimensions.mul(0.5));
+    let currentNode = node;
+    do {
+      const parent = currentNode.parentId && nodes.find((x) => x.id == currentNode.parentId);
+      if (!parent) {
+        break;
+      }
+      currentNode = parent;
+      position = position.add(parent.position);
+    } while (true);
+    return position;
+  }
+  function getControlPointForEdge(edge) {
+    const source = xynodes.find((x) => x.id == edge.source);
+    const target = xynodes.find((x) => x.id == edge.target);
+    if (!source || !target) {
+      return [];
+    }
+    const sourceCenter = getNodeCenter(source, xynodes);
+    const targetCenter = getNodeCenter(target, xynodes);
+    if (!sourceCenter || !targetCenter) {
+      return [];
+    }
+    if (source == target) {
+      const loopSize = 80;
+      const centerOfTopBoundary = new VectorImpl(0, source.height || 0).mul(-0.5).add(sourceCenter);
+      return [
+        centerOfTopBoundary.add(new VectorImpl(-loopSize / 2.5, -loopSize)),
+        centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -loopSize))
+      ];
+    }
+    const sourceToTargetVector = targetCenter.sub(sourceCenter);
+    const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
+    const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1));
+    return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))];
+  }
+  function getBorderPointOnVector(node, nodeCenter, v) {
+    const xScale = (node.width || 0) / 2 / v.x;
+    const yScale = (node.height || 0) / 2 / v.y;
+    const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+    return vector(v).mul(scale).add(nodeCenter);
+  }
+  return {
+    xyedges: context.xyedges.map((edge) => {
+      if (!edge.data.controlPoints || isEmpty(edge.data.controlPoints)) {
+        return edge;
+      }
+      return {
+        ...edge,
+        data: {
+          ...edge.data,
+          controlPoints: getControlPointForEdge(edge)
+        }
+      };
+    })
+  };
+}
+function updateActiveWalkthrough({ context }) {
+  const { stepId, parallelPrefix } = nonNullable(context.activeWalkthrough, "activeWalkthrough is null");
+  const step = nonNullable(context.xyedges.find((x) => x.id === stepId));
+  return {
+    xyedges: context.xyedges.map((edge) => {
+      const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
+      return Base.setData(edge, {
+        active,
+        dimmed: !active
+      });
+    }),
+    xynodes: context.xynodes.map((node) => {
+      const active = step.source === node.id || step.target === node.id;
+      return Base.setDimmed(node, !active);
+    })
+  };
+}
+export {
+  focusNodesEdges,
+  lastClickedNode,
+  mergeXYNodesEdges,
+  navigateBack,
+  navigateForward,
+  resetEdgeControlPoints,
+  unfocusNodesEdges,
+  updateActiveWalkthrough,
+  updateEdgeData,
+  updateNavigationHistory,
+  updateNodeData
+};

package/dist/likec4diagram/state/hotkeyActor.d.ts

@@ -0,0 +1,5 @@
+import { AnyEventObject, NonReducibleUnknown, CallbackActorLogic } from 'xstate';
+export type HotKeyEvent = {
+    type: 'key.esc' | `key.arrow.${'left' | 'right'}`;
+};
+export declare const hotkeyActor: CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent>;

package/dist/likec4diagram/state/hotkeyActor.js

@@ -0,0 +1,18 @@
+import { getHotkeyHandler } from "@mantine/hooks";
+import { fromCallback } from "xstate";
+const hotkeyActor = fromCallback(({ sendBack }) => {
+  const handler = getHotkeyHandler([
+    ["Escape", () => sendBack({ type: "key.esc" }), {
+      preventDefault: true
+    }],
+    ["ArrowLeft", () => sendBack({ type: "key.arrow.left" })],
+    ["ArrowRight", () => sendBack({ type: "key.arrow.right" })]
+  ]);
+  document.body.addEventListener("keydown", handler, { capture: true });
+  return () => {
+    document.body.removeEventListener("keydown", handler, { capture: true });
+  };
+});
+export {
+  hotkeyActor
+};

package/dist/likec4diagram/state/inspector.d.ts

@@ -0,0 +1,5 @@
+import { InspectionEvent, Observer } from 'xstate';
+declare const useInspector: () => {
+    inspect?: Observer<InspectionEvent>;
+};
+export { useInspector };