@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/DiagramXYFlow.mjs

@@ -0,0 +1,287 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { IS_SERVER } from "../base/const.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.mjs";
+import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.mjs";
+import { BaseXYFlow } from "../base/BaseXYFlow.mjs";
+import { useRootContainer } from "../context/RootContainerContext.mjs";
+import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.mjs";
+import { selectDiagramSnapshot, useDiagram, useDiagramSelector } from "../hooks/safeContext.mjs";
+import { viewBounds } from "./state/utils.mjs";
+import { deriveToggledFeatures } from "./state/machine.setup.mjs";
+import { useEditorActorStateHasTag } from "../hooks/useEditorActor.mjs";
+import { BuiltinEdges, BuiltinNodes } from "./custom/index.mjs";
+import { useLayoutConstraints } from "./useLayoutConstraints.mjs";
+import { useGraphForceSimulation } from "./xyflow-graph/useGraphForceSimulation.mjs";
+import { cx } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCustomCompareMemo } from "@react-hookz/web";
+import { Controls } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import { isEmpty } from "remeda";
+import { nonNullable } from "@likec4/core";
+import { useDebouncedCallback as useDebouncedCallback$1, useTimeout } from "@mantine/hooks";
+
+//#region src/likec4diagram/DiagramXYFlow.tsx
+const edgeTypes = {
+	relationship: BuiltinEdges.RelationshipEdge,
+	"seq-step": BuiltinEdges.SequenceStepEdge
+};
+const builtinNodes = {
+	element: BuiltinNodes.ElementNode,
+	deployment: BuiltinNodes.DeploymentNode,
+	"compound-element": BuiltinNodes.CompoundElementNode,
+	"compound-deployment": BuiltinNodes.CompoundDeploymentNode,
+	"view-group": BuiltinNodes.ViewGroupNode,
+	"seq-actor": BuiltinNodes.SequenceActorNode,
+	"seq-parallel": BuiltinNodes.SequenceParallelArea,
+	"seq-subflow": BuiltinNodes.SequenceSubflowArea,
+	"graph-element": BuiltinNodes.GraphElementNode
+};
+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"],
+		"seq-subflow": nodeTypes.seqSubflow ?? builtinNodes["seq-subflow"],
+		"graph-element": nodeTypes.graphElement ?? builtinNodes["graph-element"]
+	};
+}
+function resolveControlledViewport(enableFitView, initialZoom, bounds) {
+	if (enableFitView || initialZoom !== void 0) return;
+	return {
+		x: -bounds.x,
+		y: -bounds.y,
+		zoom: 1
+	};
+}
+function resolveInteractionEnabled(enabled, override, isEditorBusy) {
+	return (override ?? enabled) && !isEditorBusy;
+}
+const selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
+	const { enableReadOnly } = deriveToggledFeatures(ctx);
+	const controlledViewport = resolveControlledViewport(ctx.features.enableFitView, ctx.initialZoom, viewBounds(ctx));
+	const editorSnapshot = enableReadOnly ? null : children.editor?.getSnapshot();
+	const isNotEditingEdge = enableReadOnly || editorSnapshot?.context.editing?.subject !== "edge";
+	const isGraphVariant = ctx.elementViewVariant === "graph" && ctx.view._type === "element";
+	let nodesDraggable = !enableReadOnly && ctx.nodesDraggable;
+	if (ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic") nodesDraggable = false;
+	if (isGraphVariant) nodesDraggable = ctx.nodesDraggable;
+	return {
+		enableReadOnly,
+		isGraphVariant,
+		initialized: IS_SERVER || ctx.initialized.xydata && ctx.initialized.xyflow,
+		nodes: ctx.xynodes,
+		edges: ctx.xyedges,
+		pannable: ctx.pannable,
+		zoomable: ctx.zoomable,
+		minZoom: ctx.minZoom,
+		maxZoom: ctx.maxZoom,
+		nodesDraggable,
+		nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
+		fitViewPadding: ctx.fitViewPadding,
+		enableFitView: ctx.features.enableFitView,
+		enableControls: ctx.features.enableControls,
+		...controlledViewport && { viewport: controlledViewport }
+	};
+}, ({ nodes: aNodes, edges: aEdges, ...a }, { nodes: bNodes, edges: bEdges, ...b }) => {
+	return shallowEqual(a, b) && shallowEqual(aNodes, bNodes) && shallowEqual(aEdges, bEdges);
+});
+function LikeC4DiagramXYFlow({ background = "dots", reactFlowProps = {}, children, renderNodes }) {
+	const { nodesDraggable: nodesDraggableOverride, elementsSelectable: nodesSelectableOverride, ...safeReactFlowProps } = reactFlowProps;
+	const diagram = useDiagram();
+	let { enableReadOnly, isGraphVariant, initialized, nodes, edges, enableFitView, nodesDraggable, nodesSelectable, enableControls, ...props } = useDiagramSelector(selectXYProps);
+	const isEditorBusy = useEditorActorStateHasTag("busy");
+	nodesDraggable = resolveInteractionEnabled(nodesDraggable, nodesDraggableOverride, isEditorBusy);
+	nodesSelectable = resolveInteractionEnabled(nodesSelectable, nodesSelectableOverride, isEditorBusy);
+	const { onNodeContextMenu, onCanvasContextMenu, onEdgeContextMenu, onNodeClick, onEdgeClick, onCanvasClick, onCanvasDblClick } = useDiagramEventHandlers();
+	const { reducedGraphics, $panning } = useRootContainer();
+	const isReducedGraphics = reducedGraphics;
+	const layoutConstraints = useLayoutConstraints();
+	const graphForceHandlers = useGraphForceSimulation({
+		enabled: isGraphVariant,
+		nodes,
+		edges
+	});
+	const $isPanning = $panning;
+	const isPanning = useTimeout(() => {
+		$isPanning.set(true);
+	}, isReducedGraphics ? 200 : 1e3);
+	const notPanning = useDebouncedCallback$1(() => {
+		isPanning.clear();
+		$isPanning.set(false);
+	}, 200);
+	const onMove = useCallbackRef$1((event) => {
+		if (!event) {
+			$isPanning.set(false);
+			isPanning.clear();
+			return;
+		}
+		if (!$isPanning.get()) isPanning.start();
+		else notPanning();
+	});
+	const onMoveEnd = useCallbackRef$1((event, viewport) => {
+		if (!event) {
+			$isPanning.set(false);
+			isPanning.clear();
+			notPanning.cancel();
+		} else 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__ */ jsxs(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) => {
+			if (e.isPropagationStopped()) return;
+			e.stopPropagation();
+			diagram.send({
+				type: "xyflow.nodeClick",
+				node
+			});
+			onNodeClick?.(diagram.findDiagramNode(node.id), e);
+		}),
+		onEdgeClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
+			e.stopPropagation();
+			diagram.send({
+				type: "xyflow.edgeClick",
+				edge
+			});
+			onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
+		}),
+		onEdgeDoubleClick: useCallbackRef$1((e, edge) => {
+			if (e.isPropagationStopped()) return;
+			e.stopPropagation();
+			diagram.send({
+				type: "xyflow.edgeDoubleClick",
+				edge
+			});
+		}),
+		onDelete: useCallbackRef$1(({ nodes, edges }) => {
+			if (enableReadOnly) return;
+			diagram.editorActor().send({
+				type: "delete.nodes-edges",
+				nodeIds: nodes.map((node) => node.data.id),
+				edgeIds: edges.map((edge) => edge.data.id)
+			});
+		}),
+		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 = diagram.findDiagramNode(node.data.id);
+			if (diagramNode) 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 },
+		nodesFocusable: true,
+		edgesFocusable: true,
+		elevateEdgesOnSelect: !enableReadOnly,
+		zIndexMode: "manual",
+		...nodesDraggable && (isGraphVariant ? graphForceHandlers : layoutConstraints),
+		...props,
+		...safeReactFlowProps,
+		nodesDraggable,
+		nodesSelectable,
+		children: [enableControls && /* @__PURE__ */ jsx(Controls$1, {
+			fitViewPadding: props.fitViewPadding,
+			minZoom: props.minZoom,
+			maxZoom: props.maxZoom
+		}), children]
+	});
+}
+const Controls$1 = /* @__PURE__ */ __name(({ fitViewPadding, minZoom, maxZoom }) => /* @__PURE__ */ jsx(Controls, {
+	showInteractive: false,
+	fitViewOptions: {
+		padding: fitViewPadding,
+		minZoom,
+		maxZoom: Math.min(maxZoom, 1),
+		duration: 350
+	},
+	position: "bottom-left"
+}), "Controls");
+
+//#endregion
+export { LikeC4DiagramXYFlow, resolveControlledViewport, resolveInteractionEnabled };

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

@@ -0,0 +1,55 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { diagramToXY } from "./xyflow-diagram/diagram-view.mjs";
+import { graphViewToXY } from "./xyflow-graph/graph-view-to-xy.mjs";
+import { sequenceLayoutToXY } from "./xyflow-sequence/sequence-view-to-xy.mjs";
+
+//#region src/likec4diagram/convert-to-xyflow.ts
+function convertToXYFlow({ dynamicViewVariant, elementViewVariant, ...params }) {
+	const view = params.view;
+	const isDynamic = view._type === "dynamic";
+	const isElement = view._type === "element";
+	if (isDynamic && dynamicViewVariant !== "sequence") {
+		const { xynodes, xyedges } = diagramToXY(params);
+		return {
+			view: view.variant !== "diagram" ? {
+				...view,
+				variant: "diagram"
+			} : view,
+			xynodes,
+			xyedges
+		};
+	}
+	if (isDynamic && dynamicViewVariant === "sequence") {
+		const { xynodes, xyedges, layout } = sequenceLayoutToXY({
+			view,
+			currentViewId: params.currentViewId,
+			collapsedFlows: params.collapsedSequenceFlows
+		});
+		return {
+			view: {
+				...view,
+				sequenceLayout: layout,
+				variant: dynamicViewVariant
+			},
+			xynodes,
+			xyedges
+		};
+	}
+	if (isElement && elementViewVariant === "graph") {
+		const { xynodes, xyedges } = graphViewToXY(params);
+		return {
+			view,
+			xynodes,
+			xyedges
+		};
+	}
+	const { xynodes, xyedges } = diagramToXY(params);
+	return {
+		view,
+		xynodes,
+		xyedges
+	};
+}
+
+//#endregion
+export { convertToXYFlow };

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

@@ -0,0 +1,26 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+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.outline",
+			fill: "none",
+			strokeWidth: {
+				base: "[8px]",
+				_whenHovered: "[12px]"
+			},
+			strokeOpacity: "0.5"
+		})),
+		d: svgPath,
+		strokeLinecap: "round"
+	});
+}
+
+//#endregion
+export { EdgeDrifts };