@likec4/diagram 1.55.1 → 1.57.0

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -1,264 +1,281 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { invariant, nonNullable, isAncestor } from '@likec4/core';
-import { cx } from '@likec4/styles/css';
-import { ActionIcon, Group } from '@mantine/core';
-import { useCallbackRef, useStateHistory } from '@mantine/hooks';
-import { useSelector } from '@xstate/react';
-import { ReactFlowProvider, Panel, useStoreApi, useReactFlow } from '@xyflow/react';
-import { deepEqual } from 'fast-equals';
-import { LayoutGroup, AnimatePresence, m } from 'motion/react';
-import { useRef, memo, useMemo, useEffect } from 'react';
-import { isTruthy, find } from 'remeda';
-import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from './compute.js';
-import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsState, useRelationshipDetailsActor } from './hooks.js';
-import { layoutRelationshipDetails } from './layout.js';
-import { SelectEdge } from './SelectEdge.js';
-import { RelationshipEdge } from './custom/edgeTypes.js';
-import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode
-};
-const edgeTypes = {
-  relationship: RelationshipEdge
+import "../../_virtual/_rolldown/runtime.js";
+import { BaseXYFlow } from "../../base/BaseXYFlow.js";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from "./compute.js";
+import { RelationshipEdge } from "./custom/edgeTypes.js";
+import { CompoundNode, ElementNode } from "./custom/nodeTypes.js";
+import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState } from "./hooks.js";
+import { layoutRelationshipDetails } from "./layout.js";
+import { SelectEdge } from "./SelectEdge.js";
+import { cx } from "@likec4/styles/css";
+import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from "@xyflow/react";
+import { deepEqual } from "fast-equals";
+import { find, isTruthy } from "remeda";
+import { invariant, isAncestor, nonNullable } from "@likec4/core";
+import { ActionIcon, Group } from "@mantine/core";
+import { AnimatePresence, LayoutGroup, m } from "motion/react";
+import { useSelector } from "@xstate/react";
+import { useCallbackRef, useStateHistory } from "@mantine/hooks";
+//#region src/overlays/relationship-details/RelationshipDetails.tsx
+var nodeTypes = {
+	element: ElementNode,
+	compound: CompoundNode
 };
+var edgeTypes = { relationship: RelationshipEdge };
 function RelationshipDetails({ actorRef }) {
-  const initialRef = useRef(null);
-  if (initialRef.current == null) {
-    initialRef.current = {
-      defaultNodes: [],
-      defaultEdges: []
-    };
-  }
-  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    /* @__PURE__ */ jsx(RelationshipDetailsInner, {}, "xyflow"),
-    /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {}, "sync")
-  ] }) }) }) });
+	const initialRef = useRef(null);
+	if (initialRef.current == null) initialRef.current = {
+		defaultNodes: [],
+		defaultEdges: []
+	};
+	return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, {
+		value: actorRef,
+		children: /* @__PURE__ */ jsx(ReactFlowProvider, {
+			...initialRef.current,
+			children: /* @__PURE__ */ jsx(LayoutGroup, {
+				id: actorRef.sessionId,
+				inherit: false,
+				children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [/* @__PURE__ */ jsx(RelationshipDetailsInner, {}, "xyflow"), /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {}, "sync")] })
+			})
+		})
+	});
 }
-const selectSubject = (state) => ({
-  ...state.context.subject,
-  viewId: state.context.viewId
+var selectSubject = (state) => ({
+	...state.context.subject,
+	viewId: state.context.viewId
 });
-const SyncRelationshipDetailsXYFlow = memo(() => {
-  const actor = useRelationshipDetailsActor();
-  const subject = useSelector(actor, selectSubject, deepEqual);
-  const likec4model = useLikeC4Model();
-  const view = likec4model.findView(subject.viewId) ?? null;
-  const data = useMemo(() => {
-    let data2;
-    if ("edgeId" in subject && isTruthy(subject.edgeId)) {
-      invariant(view, `view ${subject.viewId} not found`);
-      const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
-      data2 = computeEdgeDetailsViewData([edge.id], view);
-    } else if (!!subject.source && !!subject.target) {
-      data2 = computeRelationshipDetailsViewData({
-        source: likec4model.element(subject.source),
-        target: likec4model.element(subject.target)
-      });
-    } else {
-      return null;
-    }
-    return layoutRelationshipDetails(data2, view);
-  }, [
-    subject,
-    view,
-    likec4model
-  ]);
-  const store = useStoreApi();
-  const instance = useReactFlow();
-  useEffect(() => {
-    if (instance.viewportInitialized) {
-      actor.send({ type: "xyflow.init", instance, store });
-    }
-  }, [store, instance.viewportInitialized, actor]);
-  useEffect(() => {
-    if (data !== null) {
-      actor.send({ type: "update.layoutData", data });
-    }
-  }, [data, actor]);
-  return null;
+var SyncRelationshipDetailsXYFlow = memo(() => {
+	const actor = useRelationshipDetailsActor();
+	const subject = useSelector(actor, selectSubject, deepEqual);
+	const likec4model = useLikeC4Model();
+	const view = likec4model.findView(subject.viewId) ?? null;
+	const data = useMemo(() => {
+		let data;
+		if ("edgeId" in subject && isTruthy(subject.edgeId)) {
+			invariant(view, `view ${subject.viewId} not found`);
+			data = computeEdgeDetailsViewData([nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`).id], view);
+		} else if (!!subject.source && !!subject.target) data = computeRelationshipDetailsViewData({
+			source: likec4model.element(subject.source),
+			target: likec4model.element(subject.target)
+		});
+		else return null;
+		return layoutRelationshipDetails(data, view);
+	}, [
+		subject,
+		view,
+		likec4model
+	]);
+	const store = useStoreApi();
+	const instance = useReactFlow();
+	useEffect(() => {
+		if (instance.viewportInitialized) actor.send({
+			type: "xyflow.init",
+			instance,
+			store
+		});
+	}, [
+		store,
+		instance.viewportInitialized,
+		actor
+	]);
+	useEffect(() => {
+		if (data !== null) actor.send({
+			type: "update.layoutData",
+			data
+		});
+	}, [data, actor]);
+	return null;
 });
-const selector = ({ context }) => ({
-  // subject: context.subject,
-  // view: state.context.view,
-  initialized: context.initialized.xydata && context.initialized.xyflow,
-  nodes: context.xynodes,
-  edges: context.xyedges
+var selector = ({ context }) => ({
+	initialized: context.initialized.xydata && context.initialized.xyflow,
+	nodes: context.xynodes,
+	edges: context.xyedges
 });
-const RelationshipDetailsInner = memo(() => {
-  const browser = useRelationshipDetails();
-  const {
-    initialized,
-    nodes,
-    edges
-  } = useRelationshipDetailsState(selector, deepEqual);
-  return /* @__PURE__ */ jsxs(
-    BaseXYFlow,
-    {
-      id: browser.rootElementId,
-      nodes,
-      edges,
-      className: cx(
-        initialized ? "initialized" : "not-initialized",
-        "likec4-relationship-details"
-      ),
-      nodeTypes,
-      edgeTypes,
-      onNodesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyNodeChanges", changes });
-      }),
-      onEdgesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyEdgeChanges", changes });
-      }),
-      fitViewPadding: 0.05,
-      onNodeClick: useCallbackRef((e, node) => {
-        e.stopPropagation();
-        browser.send({ type: "xyflow.nodeClick", node });
-      }),
-      onEdgeClick: useCallbackRef((e, edge) => {
-        e.stopPropagation();
-        browser.send({ type: "xyflow.edgeClick", edge });
-      }),
-      onPaneClick: useCallbackRef(() => {
-        browser.send({ type: "xyflow.paneClick" });
-      }),
-      onDoubleClick: useCallbackRef(() => {
-        browser.send({ type: "xyflow.paneDblClick" });
-      }),
-      onViewportResize: useCallbackRef(() => {
-        browser.send({ type: "xyflow.resized" });
-      }),
-      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-        if (!edge.data.hovered) {
-          browser.send({ type: "xyflow.edgeMouseEnter", edge });
-        }
-      }),
-      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-        if (edge.data.hovered) {
-          browser.send({ type: "xyflow.edgeMouseLeave", edge });
-        }
-      }),
-      onSelectionChange: useCallbackRef((params) => {
-        browser.send({ type: "xyflow.selectionChange", ...params });
-      }),
-      nodesDraggable: false,
-      nodesSelectable: true,
-      fitView: false,
-      pannable: true,
-      zoomable: true,
-      children: [
-        /* @__PURE__ */ jsx(TopLeftPanel, {}),
-        /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "default",
-            color: "gray",
-            onClick: (e) => {
-              e.stopPropagation();
-              browser.close();
-            },
-            children: /* @__PURE__ */ jsx(IconX, {})
-          }
-        ) })
-      ]
-    }
-  );
+var RelationshipDetailsInner = memo(() => {
+	const browser = useRelationshipDetails();
+	const { initialized, nodes, edges } = useRelationshipDetailsState(selector, deepEqual);
+	return /* @__PURE__ */ jsxs(BaseXYFlow, {
+		id: browser.rootElementId,
+		nodes,
+		edges,
+		className: cx(initialized ? "initialized" : "not-initialized", "likec4-relationship-details"),
+		nodeTypes,
+		edgeTypes,
+		onNodesChange: useCallbackRef((changes) => {
+			browser.send({
+				type: "xyflow.applyNodeChanges",
+				changes
+			});
+		}),
+		onEdgesChange: useCallbackRef((changes) => {
+			browser.send({
+				type: "xyflow.applyEdgeChanges",
+				changes
+			});
+		}),
+		fitViewPadding: .05,
+		onNodeClick: useCallbackRef((e, node) => {
+			e.stopPropagation();
+			browser.send({
+				type: "xyflow.nodeClick",
+				node
+			});
+		}),
+		onEdgeClick: useCallbackRef((e, edge) => {
+			e.stopPropagation();
+			browser.send({
+				type: "xyflow.edgeClick",
+				edge
+			});
+		}),
+		onPaneClick: useCallbackRef(() => {
+			browser.send({ type: "xyflow.paneClick" });
+		}),
+		onDoubleClick: useCallbackRef(() => {
+			browser.send({ type: "xyflow.paneDblClick" });
+		}),
+		onViewportResize: useCallbackRef(() => {
+			browser.send({ type: "xyflow.resized" });
+		}),
+		onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+			if (!edge.data.hovered) browser.send({
+				type: "xyflow.edgeMouseEnter",
+				edge
+			});
+		}),
+		onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+			if (edge.data.hovered) browser.send({
+				type: "xyflow.edgeMouseLeave",
+				edge
+			});
+		}),
+		onSelectionChange: useCallbackRef((params) => {
+			browser.send({
+				type: "xyflow.selectionChange",
+				...params
+			});
+		}),
+		nodesDraggable: false,
+		nodesSelectable: true,
+		fitView: false,
+		pannable: true,
+		zoomable: true,
+		children: [/* @__PURE__ */ jsx(TopLeftPanel, {}), /* @__PURE__ */ jsx(Panel, {
+			position: "top-right",
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				variant: "default",
+				color: "gray",
+				onClick: (e) => {
+					e.stopPropagation();
+					browser.close();
+				},
+				children: /* @__PURE__ */ jsx(IconX, {})
+			})
+		})]
+	});
 });
-const topLeftPanelselector = ({ context }) => ({
-  subject: context.subject,
-  viewId: context.viewId
+var topLeftPanelselector = ({ context }) => ({
+	subject: context.subject,
+	viewId: context.viewId
 });
-const TopLeftPanel = memo(() => {
-  const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual);
-  const likec4model = useLikeC4Model();
-  const view = likec4model.findView(viewId);
-  if (!view || !view.isDiagram()) {
-    return null;
-  }
-  const edges = [...view.edges()];
-  let edge = "edgeId" in subject && isTruthy(subject.edgeId) ? edges.find((e) => e.id === subject.edgeId) : find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) || find(edges, (e) => {
-    return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "__", subject.source ?? "__")) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "__", subject.target ?? "__"));
-  });
-  if (!edge) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(TopLeftPanelInner, { edge: edge.$edge, view: view.$view });
+var TopLeftPanel = memo(() => {
+	const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual);
+	const view = useLikeC4Model().findView(viewId);
+	if (!view || !view.isDiagram()) return null;
+	const edges = [...view.edges()];
+	let edge = "edgeId" in subject && isTruthy(subject.edgeId) ? edges.find((e) => e.id === subject.edgeId) : find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) || find(edges, (e) => {
+		return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "__", subject.source ?? "__")) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "__", subject.target ?? "__"));
+	});
+	if (!edge) return null;
+	return /* @__PURE__ */ jsx(TopLeftPanelInner, {
+		edge: edge.$edge,
+		view: view.$view
+	});
 });
-const TopLeftPanelInner = ({ edge, view }) => {
-  const browser = useRelationshipDetails();
-  const edgeId = edge.id;
-  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
-  useEffect(() => {
-    if (historyEdgeId !== edgeId) {
-      historyOps.set(edgeId);
-    }
-  }, [edgeId]);
-  useEffect(() => {
-    if (historyEdgeId !== edgeId) {
-      browser.navigateTo(historyEdgeId);
-    }
-  }, [historyEdgeId]);
-  const hasStepBack = current > 0;
-  const hasStepForward = current + 1 < history.length;
-  return /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsx(Group, { gap: 4, wrap: "nowrap", children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
-    hasStepBack && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        layout: true,
-        initial: { opacity: 0.05, transform: "translateX(-5px)" },
-        animate: { opacity: 1, transform: "translateX(0)" },
-        exit: {
-          opacity: 0.05,
-          transform: "translateX(-10px)"
-        },
-        children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "default",
-            color: "gray",
-            onClick: (e) => {
-              e.stopPropagation();
-              historyOps.back();
-            },
-            children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-          }
-        )
-      },
-      "back"
-    ),
-    hasStepForward && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        layout: true,
-        initial: { opacity: 0.05, transform: "translateX(5px)" },
-        animate: { opacity: 1, transform: "translateX(0)" },
-        exit: {
-          opacity: 0,
-          transform: "translateX(5px)"
-        },
-        children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "default",
-            color: "gray",
-            onClick: (e) => {
-              e.stopPropagation();
-              historyOps.forward();
-            },
-            children: /* @__PURE__ */ jsx(IconChevronRight, {})
-          }
-        )
-      },
-      "forward"
-    ),
-    /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", ml: "sm", children: /* @__PURE__ */ jsx(SelectEdge, { edge, view }) })
-  ] }) }) });
+var TopLeftPanelInner = ({ edge, view }) => {
+	const browser = useRelationshipDetails();
+	const edgeId = edge.id;
+	const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
+	useEffect(() => {
+		if (historyEdgeId !== edgeId) historyOps.set(edgeId);
+	}, [edgeId]);
+	useEffect(() => {
+		if (historyEdgeId !== edgeId) browser.navigateTo(historyEdgeId);
+	}, [historyEdgeId]);
+	const hasStepBack = current > 0;
+	const hasStepForward = current + 1 < history.length;
+	return /* @__PURE__ */ jsx(Panel, {
+		position: "top-left",
+		children: /* @__PURE__ */ jsx(Group, {
+			gap: 4,
+			wrap: "nowrap",
+			children: /* @__PURE__ */ jsxs(AnimatePresence, {
+				mode: "popLayout",
+				children: [
+					hasStepBack && /* @__PURE__ */ jsx(m.div, {
+						layout: true,
+						initial: {
+							opacity: .05,
+							transform: "translateX(-5px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateX(0)"
+						},
+						exit: {
+							opacity: .05,
+							transform: "translateX(-10px)"
+						},
+						children: /* @__PURE__ */ jsx(ActionIcon, {
+							variant: "default",
+							color: "gray",
+							onClick: (e) => {
+								e.stopPropagation();
+								historyOps.back();
+							},
+							children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+						})
+					}, "back"),
+					hasStepForward && /* @__PURE__ */ jsx(m.div, {
+						layout: true,
+						initial: {
+							opacity: .05,
+							transform: "translateX(5px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateX(0)"
+						},
+						exit: {
+							opacity: 0,
+							transform: "translateX(5px)"
+						},
+						children: /* @__PURE__ */ jsx(ActionIcon, {
+							variant: "default",
+							color: "gray",
+							onClick: (e) => {
+								e.stopPropagation();
+								historyOps.forward();
+							},
+							children: /* @__PURE__ */ jsx(IconChevronRight, {})
+						})
+					}, "forward"),
+					/* @__PURE__ */ jsx(Group, {
+						gap: "xs",
+						wrap: "nowrap",
+						ml: "sm",
+						children: /* @__PURE__ */ jsx(SelectEdge, {
+							edge,
+							view
+						})
+					})
+				]
+			})
+		})
+	});
 };
-
+//#endregion
 export { RelationshipDetails };