@likec4/diagram 1.55.1 → 1.56.0

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,232 +1,223 @@
-import { jsx } from 'react/jsx-runtime';
-import { nonNullable } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
-import { useTimeout, useDebouncedCallback } from '@mantine/hooks';
-import { useCustomCompareMemo } from '@react-hookz/web';
-import { isEmpty } from 'remeda';
-import { memoNode } from '../base-primitives/memoNode.js';
-import { BaseXYFlow } from '../base/BaseXYFlow.js';
-import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerContext.js';
-import { useDiagramSnapshot, selectDiagramActor } from '../hooks/useDiagram.js';
-import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
-import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
-import { deriveToggledFeatures } from './state/machine.setup.js';
-import { viewBounds } from './state/utils.js';
-import { useLayoutConstraints } from './useLayoutConstraints.js';
-import { useDiagram } from '../hooks/safeContext.js';
-import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-
-const edgeTypes = {
-  relationship: BuiltinEdges.RelationshipEdge,
-  "seq-step": BuiltinEdges.SequenceStepEdge
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
+import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.js";
+import { BaseXYFlow } from "../base/BaseXYFlow.js";
+import { useIsReducedGraphics, usePanningAtom } from "../context/RootContainerContext.js";
+import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
+import { useDiagram } from "../hooks/safeContext.js";
+import { selectDiagramActor, useDiagramSnapshot } from "../hooks/useDiagram.js";
+import { viewBounds } from "./state/utils.js";
+import { deriveToggledFeatures } from "./state/machine.setup.js";
+import { memoNode } from "../base-primitives/memoNode.js";
+import { BuiltinEdges, BuiltinNodes } from "./custom/index.js";
+import { useLayoutConstraints } from "./useLayoutConstraints.js";
+import { cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+import { useCustomCompareMemo } from "@react-hookz/web";
+import { isEmpty } from "remeda";
+import { nonNullable } from "@likec4/core";
+import { useDebouncedCallback as useDebouncedCallback$1, useTimeout } from "@mantine/hooks";
+//#region src/likec4diagram/DiagramXYFlow.tsx
+var edgeTypes = {
+	relationship: BuiltinEdges.RelationshipEdge,
+	"seq-step": BuiltinEdges.SequenceStepEdge
 };
-const builtinNodes = {
-  element: memoNode(BuiltinNodes.ElementNode),
-  deployment: memoNode(BuiltinNodes.DeploymentNode),
-  "compound-element": memoNode(BuiltinNodes.CompoundElementNode),
-  "compound-deployment": memoNode(BuiltinNodes.CompoundDeploymentNode),
-  "view-group": memoNode(BuiltinNodes.ViewGroupNode),
-  "seq-actor": memoNode(BuiltinNodes.SequenceActorNode),
-  "seq-parallel": memoNode(BuiltinNodes.SequenceParallelArea)
+var builtinNodes = {
+	element: memoNode(BuiltinNodes.ElementNode),
+	deployment: memoNode(BuiltinNodes.DeploymentNode),
+	"compound-element": memoNode(BuiltinNodes.CompoundElementNode),
+	"compound-deployment": memoNode(BuiltinNodes.CompoundDeploymentNode),
+	"view-group": memoNode(BuiltinNodes.ViewGroupNode),
+	"seq-actor": memoNode(BuiltinNodes.SequenceActorNode),
+	"seq-parallel": memoNode(BuiltinNodes.SequenceParallelArea)
 };
 function prepareNodeTypes(nodeTypes) {
-  if (!nodeTypes || isEmpty(nodeTypes)) {
-    return builtinNodes;
-  }
-  return {
-    element: nodeTypes.element ?? builtinNodes.element,
-    deployment: nodeTypes.deployment ?? builtinNodes.deployment,
-    "compound-element": nodeTypes.compoundElement ?? builtinNodes["compound-element"],
-    "compound-deployment": nodeTypes.compoundDeployment ?? builtinNodes["compound-deployment"],
-    "view-group": nodeTypes.viewGroup ?? builtinNodes["view-group"],
-    "seq-actor": nodeTypes.seqActor ?? builtinNodes["seq-actor"],
-    "seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"]
-  };
+	if (!nodeTypes || isEmpty(nodeTypes)) return builtinNodes;
+	return {
+		element: nodeTypes.element ?? builtinNodes.element,
+		deployment: nodeTypes.deployment ?? builtinNodes.deployment,
+		"compound-element": nodeTypes.compoundElement ?? builtinNodes["compound-element"],
+		"compound-deployment": nodeTypes.compoundDeployment ?? builtinNodes["compound-deployment"],
+		"view-group": nodeTypes.viewGroup ?? builtinNodes["view-group"],
+		"seq-actor": nodeTypes.seqActor ?? builtinNodes["seq-actor"],
+		"seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"]
+	};
 }
-const viewportToTopLeft = (ctx) => {
-  const bounds = viewBounds(ctx);
-  return {
-    x: -bounds.x,
-    y: -bounds.y,
-    zoom: 1
-  };
+var viewportToTopLeft = (ctx) => {
+	const bounds = viewBounds(ctx);
+	return {
+		x: -bounds.x,
+		y: -bounds.y,
+		zoom: 1
+	};
 };
-const selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
-  const { enableReadOnly } = deriveToggledFeatures(ctx);
-  const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
-  let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
-  if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") {
-    nodesDraggable = false;
-  }
-  return {
-    enableReadOnly,
-    initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
-    nodes: ctx.xynodes,
-    edges: ctx.xyedges,
-    pannable: ctx.pannable,
-    zoomable: ctx.zoomable,
-    nodesDraggable,
-    nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
-    fitViewPadding: ctx.fitViewPadding,
-    enableFitView: ctx.features.enableFitView,
-    ...!ctx.features.enableFitView && {
-      viewport: viewportToTopLeft(ctx)
-    }
-  };
+var selectXYProps = selectDiagramActor(({ context: ctx, children }) => {
+	const { enableReadOnly } = deriveToggledFeatures(ctx);
+	const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
+	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
+	if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") nodesDraggable = false;
+	return {
+		enableReadOnly,
+		initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
+		nodes: ctx.xynodes,
+		edges: ctx.xyedges,
+		pannable: ctx.pannable,
+		zoomable: ctx.zoomable,
+		nodesDraggable,
+		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
+		fitViewPadding: ctx.fitViewPadding,
+		enableFitView: ctx.features.enableFitView,
+		...!ctx.features.enableFitView && { viewport: viewportToTopLeft(ctx) }
+	};
 });
-function LikeC4DiagramXYFlow({
-  background = "dots",
-  reactFlowProps = {},
-  children,
-  renderNodes
-}) {
-  const diagram = useDiagram();
-  let {
-    enableReadOnly,
-    initialized,
-    nodes,
-    edges,
-    enableFitView,
-    nodesDraggable,
-    nodesSelectable,
-    ...props
-  } = useDiagramSnapshot(selectXYProps);
-  const {
-    onNodeContextMenu,
-    onCanvasContextMenu,
-    onEdgeContextMenu,
-    onNodeClick,
-    onEdgeClick,
-    onCanvasClick,
-    onCanvasDblClick
-  } = useDiagramEventHandlers();
-  const isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    $isPanning.set(true);
-  }, isReducedGraphics ? 200 : 800), notPanning = useDebouncedCallback(() => {
-    isPanning.clear();
-    $isPanning.set(false);
-  }, 200), onMove = useCallbackRef((event) => {
-    if (!event) {
-      isPanning.clear();
-      return;
-    }
-    if (!$isPanning.get()) {
-      isPanning.start();
-    } else {
-      notPanning();
-    }
-  }), onMoveEnd = useCallbackRef((event, viewport) => {
-    if (event) {
-      notPanning();
-    }
-    diagram.send({
-      type: "xyflow.viewportMoved",
-      viewport,
-      manually: !!event
-    });
-  }), onViewportResize = useCallbackRef(() => {
-    diagram.send({ type: "xyflow.resized" });
-  }), nodeTypes = useCustomCompareMemo(
-    () => prepareNodeTypes(renderNodes),
-    [renderNodes],
-    depsShallowEqual
-  );
-  useUpdateEffect(() => {
-    console.warn("renderNodes changed - this might degrade performance");
-  }, [nodeTypes]);
-  return /* @__PURE__ */ jsx(
-    BaseXYFlow,
-    {
-      nodes,
-      edges,
-      className: cx(initialized ? "initialized" : "not-initialized"),
-      nodeTypes,
-      edgeTypes,
-      onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyChanges", nodes: changes });
-      }),
-      onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyChanges", edges: changes });
-      }),
-      background: initialized ? background : "transparent",
-      fitView: false,
-      onNodeClick: useCallbackRef((e, node) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.nodeClick", node });
-        onNodeClick?.(diagram.findDiagramNode(node.id), e);
-      }),
-      onEdgeClick: useCallbackRef((e, edge) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.edgeClick", edge });
-        onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
-      }),
-      onEdgeDoubleClick: useCallbackRef((e, edge) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.edgeDoubleClick", edge });
-      }),
-      onPaneClick: useCallbackRef((e) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.paneClick" });
-        onCanvasClick?.(e);
-      }),
-      onDoubleClick: useCallbackRef((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        diagram.send({ type: "xyflow.paneDblClick" });
-        onCanvasDblClick?.(e);
-      }),
-      onNodeMouseEnter: useCallbackRef((event, node) => {
-        event.stopPropagation();
-        diagram.send({ type: "xyflow.nodeMouseEnter", node });
-      }),
-      onNodeMouseLeave: useCallbackRef((event, node) => {
-        event.stopPropagation();
-        diagram.send({ type: "xyflow.nodeMouseLeave", node });
-      }),
-      onEdgeMouseEnter: useCallbackRef((event, edge) => {
-        event.stopPropagation();
-        diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
-      }),
-      onEdgeMouseLeave: useCallbackRef((event, edge) => {
-        event.stopPropagation();
-        diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
-      }),
-      onMove,
-      onMoveEnd,
-      onInit: useCallbackRef((instance) => {
-        diagram.send({ type: "xyflow.init", instance });
-      }),
-      onNodeContextMenu: useCallbackRef((event, node) => {
-        const diagramNode = nonNullable(
-          diagram.findDiagramNode(node.id),
-          `diagramNode ${node.id} not found`
-        );
-        onNodeContextMenu?.(diagramNode, event);
-      }),
-      onEdgeContextMenu: useCallbackRef((event, edge) => {
-        const diagramEdge = nonNullable(
-          diagram.findDiagramEdge(edge.id),
-          `diagramEdge ${edge.id} not found`
-        );
-        onEdgeContextMenu?.(diagramEdge, event);
-      }),
-      ...onCanvasContextMenu && {
-        onPaneContextMenu: onCanvasContextMenu
-      },
-      ...enableFitView && {
-        onViewportResize
-      },
-      nodesDraggable,
-      nodesSelectable,
-      elevateEdgesOnSelect: !enableReadOnly,
-      zIndexMode: "manual",
-      ...nodesDraggable && layoutConstraints,
-      ...props,
-      ...reactFlowProps,
-      children
-    }
-  );
+function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, children, renderNodes }) {
+	const diagram = useDiagram();
+	let { enableReadOnly, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, ...props } = useDiagramSnapshot(selectXYProps);
+	const { onNodeContextMenu, onCanvasContextMenu, onEdgeContextMenu, onNodeClick, onEdgeClick, onCanvasClick, onCanvasDblClick } = useDiagramEventHandlers();
+	const isReducedGraphics = useIsReducedGraphics();
+	const layoutConstraints = useLayoutConstraints();
+	const $isPanning = usePanningAtom();
+	const isPanning = useTimeout(() => {
+		$isPanning.set(true);
+	}, isReducedGraphics ? 200 : 800);
+	const notPanning = useDebouncedCallback$1(() => {
+		isPanning.clear();
+		$isPanning.set(false);
+	}, 200);
+	const onMove = useCallbackRef$1((event) => {
+		if (!event) {
+			isPanning.clear();
+			return;
+		}
+		if (!$isPanning.get()) isPanning.start();
+		else notPanning();
+	});
+	const onMoveEnd = useCallbackRef$1((event, viewport) => {
+		if (event) notPanning();
+		diagram.send({
+			type: "xyflow.viewportMoved",
+			viewport,
+			manually: !!event
+		});
+	});
+	const onViewportResize = useCallbackRef$1(() => {
+		diagram.send({ type: "xyflow.resized" });
+	});
+	const nodeTypes = useCustomCompareMemo(() => prepareNodeTypes(renderNodes), [renderNodes], depsShallowEqual);
+	useUpdateEffect$1(() => {
+		console.warn("renderNodes changed - this might degrade performance");
+	}, [nodeTypes]);
+	return /* @__PURE__ */ jsx(BaseXYFlow, {
+		nodes,
+		edges,
+		className: cx(initialized ? "initialized" : "not-initialized"),
+		nodeTypes,
+		edgeTypes,
+		onNodesChange: useCallbackRef$1((changes) => {
+			diagram.send({
+				type: "xyflow.applyChanges",
+				nodes: changes
+			});
+		}),
+		onEdgesChange: useCallbackRef$1((changes) => {
+			diagram.send({
+				type: "xyflow.applyChanges",
+				edges: changes
+			});
+		}),
+		background: initialized ? background : "transparent",
+		fitView: false,
+		onNodeClick: useCallbackRef$1((e, node) => {
+			e.stopPropagation();
+			diagram.send({
+				type: "xyflow.nodeClick",
+				node
+			});
+			onNodeClick?.(diagram.findDiagramNode(node.id), e);
+		}),
+		onEdgeClick: useCallbackRef$1((e, edge) => {
+			e.stopPropagation();
+			diagram.send({
+				type: "xyflow.edgeClick",
+				edge
+			});
+			onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
+		}),
+		onEdgeDoubleClick: useCallbackRef$1((e, edge) => {
+			e.stopPropagation();
+			diagram.send({
+				type: "xyflow.edgeDoubleClick",
+				edge
+			});
+		}),
+		onPaneClick: useCallbackRef$1((e) => {
+			e.stopPropagation();
+			diagram.send({ type: "xyflow.paneClick" });
+			onCanvasClick?.(e);
+		}),
+		onDoubleClick: useCallbackRef$1((e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			diagram.send({ type: "xyflow.paneDblClick" });
+			onCanvasDblClick?.(e);
+		}),
+		onNodeMouseEnter: useCallbackRef$1((event, node) => {
+			event.stopPropagation();
+			diagram.send({
+				type: "xyflow.nodeMouseEnter",
+				node
+			});
+		}),
+		onNodeMouseLeave: useCallbackRef$1((event, node) => {
+			event.stopPropagation();
+			diagram.send({
+				type: "xyflow.nodeMouseLeave",
+				node
+			});
+		}),
+		onEdgeMouseEnter: useCallbackRef$1((event, edge) => {
+			event.stopPropagation();
+			diagram.send({
+				type: "xyflow.edgeMouseEnter",
+				edge,
+				event
+			});
+		}),
+		onEdgeMouseLeave: useCallbackRef$1((event, edge) => {
+			event.stopPropagation();
+			diagram.send({
+				type: "xyflow.edgeMouseLeave",
+				edge,
+				event
+			});
+		}),
+		onMove,
+		onMoveEnd,
+		onInit: useCallbackRef$1((instance) => {
+			diagram.send({
+				type: "xyflow.init",
+				instance
+			});
+		}),
+		onNodeContextMenu: useCallbackRef$1((event, node) => {
+			const diagramNode = nonNullable(diagram.findDiagramNode(node.id), `diagramNode ${node.id} not found`);
+			onNodeContextMenu?.(diagramNode, event);
+		}),
+		onEdgeContextMenu: useCallbackRef$1((event, edge) => {
+			const diagramEdge = nonNullable(diagram.findDiagramEdge(edge.id), `diagramEdge ${edge.id} not found`);
+			onEdgeContextMenu?.(diagramEdge, event);
+		}),
+		...onCanvasContextMenu && { onPaneContextMenu: onCanvasContextMenu },
+		...enableFitView && { onViewportResize },
+		nodesDraggable,
+		nodesSelectable,
+		elevateEdgesOnSelect: !enableReadOnly,
+		zIndexMode: "manual",
+		...nodesDraggable && layoutConstraints,
+		...props,
+		...reactFlowProps,
+		children
+	});
 }
-
+//#endregion
 export { LikeC4DiagramXYFlow };

package/dist/likec4diagram/convert-to-xyflow.js

@@ -1,25 +1,24 @@
-import { diagramToXY } from './xyflow-diagram/diagram-view.js';
-import { sequenceLayoutToXY } from './xyflow-sequence/sequence-layout.js';
-
+import "../_virtual/_rolldown/runtime.js";
+import { diagramToXY } from "./xyflow-diagram/diagram-view.js";
+import { sequenceLayoutToXY } from "./xyflow-sequence/sequence-layout.js";
+//#region src/likec4diagram/convert-to-xyflow.ts
 function convertToXYFlow({ dynamicViewVariant, ...params }) {
-  const view = params.view;
-  const isDynamic = view._type === "dynamic";
-  const { xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view, params.currentViewId) : diagramToXY({ ...params });
-  if (isDynamic && view.variant !== dynamicViewVariant) {
-    return {
-      view: {
-        ...view,
-        variant: dynamicViewVariant
-      },
-      xynodes,
-      xyedges
-    };
-  }
-  return {
-    view,
-    xynodes,
-    xyedges
-  };
+	const view = params.view;
+	const isDynamic = view._type === "dynamic";
+	const { xynodes, xyedges } = isDynamic && dynamicViewVariant === "sequence" ? sequenceLayoutToXY(view, params.currentViewId) : diagramToXY({ ...params });
+	if (isDynamic && view.variant !== dynamicViewVariant) return {
+		view: {
+			...view,
+			variant: dynamicViewVariant
+		},
+		xynodes,
+		xyedges
+	};
+	return {
+		view,
+		xynodes,
+		xyedges
+	};
 }
-
+//#endregion
 export { convertToXYFlow };

package/dist/likec4diagram/custom/edges/EdgeDrifts.js

@@ -1,34 +1,24 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-
-function EdgeDrifts({
-  edgeProps: { data },
-  svgPath
-}) {
-  const drifts = data.drifts;
-  if (!drifts || drifts.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "path",
-    {
-      className: cx(
-        "react-flow__edge-path",
-        css({
-          pointerEvents: "none",
-          stroke: "likec4.compare.manual.outline",
-          fill: "none",
-          strokeWidth: {
-            base: "8px",
-            _whenHovered: "12px"
-          },
-          strokeOpacity: 0.5
-        })
-      ),
-      d: svgPath,
-      strokeLinecap: "round"
-    }
-  );
+import "../../../_virtual/_rolldown/runtime.js";
+import { css, cx } from "@likec4/styles/css";
+import { jsx } from "react/jsx-runtime";
+//#region src/likec4diagram/custom/edges/EdgeDrifts.tsx
+function EdgeDrifts({ edgeProps: { data }, svgPath }) {
+	const drifts = data.drifts;
+	if (!drifts || drifts.length === 0) return null;
+	return /* @__PURE__ */ jsx("path", {
+		className: cx("react-flow__edge-path", css({
+			pointerEvents: "none",
+			stroke: "likec4.compare.manual.outline",
+			fill: "none",
+			strokeWidth: {
+				base: "8px",
+				_whenHovered: "12px"
+			},
+			strokeOpacity: .5
+		})),
+		d: svgPath,
+		strokeLinecap: "round"
+	});
 }
-
+//#endregion
 export { EdgeDrifts };