@likec4/diagram 1.59.3 → 1.60.0

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,267 +0,0 @@
-import { __name } from "../_virtual/_rolldown/runtime.js";
-import { useCallbackRef as useCallbackRef$1 } from "../hooks/useCallbackRef.js";
-import { depsShallowEqual, useUpdateEffect as useUpdateEffect$1 } from "../hooks/useUpdateEffect.js";
-import { MinZoom } from "../base/const.js";
-import { BaseXYFlow } from "../base/BaseXYFlow.js";
-import { useRootContainer } from "../context/RootContainerContext.js";
-import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { selectDiagramSnapshot, useDiagram, useDiagramSelector } from "../hooks/safeContext.js";
-import { viewBounds } from "./state/utils.js";
-import { deriveToggledFeatures } from "./state/machine.setup.js";
-import { useEditorActorStateHasTag } from "../hooks/useEditorActor.js";
-import { BuiltinEdges, BuiltinNodes } from "./custom/index.js";
-import { useLayoutConstraints } from "./useLayoutConstraints.js";
-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
-var edgeTypes = {
-	relationship: BuiltinEdges.RelationshipEdge,
-	"seq-step": BuiltinEdges.SequenceStepEdge
-};
-var 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
-};
-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"]
-	};
-}
-var viewportToTopLeft = (ctx) => {
-	const bounds = viewBounds(ctx);
-	return {
-		x: -bounds.x,
-		y: -bounds.y,
-		zoom: 1
-	};
-};
-function resolveInteractionEnabled(enabled, override, isEditorBusy) {
-	return (override ?? enabled) && !isEditorBusy;
-}
-var selectXYProps = selectDiagramSnapshot(({ context: ctx, children }) => {
-	const { enableReadOnly } = deriveToggledFeatures(ctx);
-	const editorSnapshot = enableReadOnly ? null : children.editor?.getSnapshot();
-	const isNotEditingEdge = enableReadOnly || editorSnapshot?.context.editing?.subject !== "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,
-		enableControls: ctx.features.enableControls && ctx.features.enableFitView,
-		...!ctx.features.enableFitView && { viewport: viewportToTopLeft(ctx) }
-	};
-}, ({ 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, 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 $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 && layoutConstraints,
-		...props,
-		...safeReactFlowProps,
-		nodesDraggable,
-		nodesSelectable,
-		children: [enableControls && /* @__PURE__ */ jsx(Controls$1, { padding: props.fitViewPadding }), children]
-	});
-}
-var Controls$1 = /* @__PURE__ */ __name(({ padding }) => /* @__PURE__ */ jsx(Controls, {
-	showInteractive: false,
-	fitViewOptions: {
-		padding,
-		minZoom: MinZoom,
-		maxZoom: 1,
-		duration: 350
-	},
-	position: "bottom-left"
-}), "Controls");
-//#endregion
-export { LikeC4DiagramXYFlow, resolveInteractionEnabled };

package/dist/likec4diagram/convert-to-xyflow.d.ts

@@ -1,12 +0,0 @@
-import { LayoutedView, ViewId } from '@likec4/core/types';
-import { DiagramContext } from './state/types';
-import { Types } from './types';
-type ConvertToXYFlowInput = Pick<DiagramContext, 'view' | 'where' | 'dynamicViewVariant' | 'collapsedSequenceFlows'> & {
-    currentViewId: ViewId | undefined;
-};
-export declare function convertToXYFlow({ dynamicViewVariant, ...params }: ConvertToXYFlowInput): {
-    view: LayoutedView;
-    xynodes: Types.Node[];
-    xyedges: Types.Edge[];
-};
-export {};

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

@@ -1,43 +0,0 @@
-import "../_virtual/_rolldown/runtime.js";
-import { diagramToXY } from "./xyflow-diagram/diagram-view.js";
-import { sequenceLayoutToXY } from "./xyflow-sequence/sequence-view-to-xy.js";
-//#region src/likec4diagram/convert-to-xyflow.ts
-function convertToXYFlow({ dynamicViewVariant, ...params }) {
-	const view = params.view;
-	const isDynamic = view._type === "dynamic";
-	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
-		};
-	}
-	const { xynodes, xyedges } = diagramToXY(params);
-	return {
-		view,
-		xynodes,
-		xyedges
-	};
-}
-//#endregion
-export { convertToXYFlow };

package/dist/likec4diagram/custom/edges/EdgeDrifts.d.ts

@@ -1,6 +0,0 @@
-import { Types } from '../../types';
-export type EdgeDriftsProps = {
-    edgeProps: Types.EdgeProps;
-    svgPath: string;
-};
-export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react").JSX.Element | null;

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

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

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -1,3 +0,0 @@
-import { Types } from '../../types';
-import { FunctionComponent } from 'react';
-export declare const RelationshipEdge: FunctionComponent<Types.EdgeProps<"relationship">>;