@likec4/diagram 1.55.0 → 1.56.0

package/dist/overlays/relationships-browser/useViewToNodesEdges.js

@@ -1,160 +1,144 @@
-import { Queue, GroupElementKind, invariant, nonNullable } from '@likec4/core';
-import '@react-hookz/web';
-import { hasAtLeast } from 'remeda';
-import { ZIndexes } from '../../base/const.js';
-import { LayoutRelationshipsViewResult } from './layout.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { ZIndexes } from "../../base/const.js";
+import { LayoutRelationshipsViewResult } from "./layout.js";
+import "@react-hookz/web";
+import { hasAtLeast } from "remeda";
+import { GroupElementKind, Queue, invariant, nonNullable } from "@likec4/core";
+//#region src/overlays/relationships-browser/useViewToNodesEdges.ts
 function viewToNodesEdge(view) {
-  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
-  const queue = Queue.from(view.nodes.reduce(
-    (acc, node) => {
-      nodeLookup.set(node.id, node);
-      if (!node.parent) {
-        acc.push({ node, parent: null });
-      }
-      return acc;
-    },
-    []
-  ));
-  const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
-  let next;
-  while (next = queue.dequeue()) {
-    const { node, parent } = next;
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
-    if (isCompound) {
-      for (const child of node.children) {
-        queue.enqueue({ node: nodeById(child), parent: node });
-      }
-    }
-    const position = {
-      x: node.x,
-      y: node.y
-    };
-    if (parent) {
-      position.x -= parent.x;
-      position.y -= parent.y;
-    }
-    const id = node.id;
-    const base = {
-      id,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      style: {
-        width: node.width,
-        height: node.height
-      },
-      initialWidth: node.width,
-      initialHeight: node.height,
-      ...parent && {
-        parentId: parent.id
-      }
-    };
-    const fqn = node.modelRef ?? null;
-    const navigateTo = { navigateTo: node.navigateTo ?? null };
-    switch (true) {
-      case node.kind === LayoutRelationshipsViewResult.Empty: {
-        xynodes.push(
-          {
-            ...base,
-            type: "empty",
-            data: {
-              column: node.column
-            }
-          }
-        );
-        break;
-      }
-      case (isCompound && !!fqn): {
-        xynodes.push(
-          {
-            ...base,
-            type: "compound",
-            data: {
-              id,
-              column: node.column,
-              title: node.title,
-              color: node.color,
-              shape: node.shape,
-              style: node.style,
-              depth: node.depth ?? 0,
-              icon: node.icon ?? "none",
-              ports: node.ports,
-              existsInCurrentView: node.existsInCurrentView,
-              fqn,
-              ...navigateTo
-            }
-          }
-        );
-        break;
-      }
-      default: {
-        invariant(fqn, "Element should have either modelRef or deploymentRef");
-        xynodes.push(
-          {
-            ...base,
-            type: "element",
-            data: {
-              id,
-              column: node.column,
-              fqn,
-              title: node.title,
-              technology: node.technology,
-              description: node.description,
-              height: node.height,
-              width: node.width,
-              color: node.color,
-              shape: node.shape,
-              icon: node.icon ?? "none",
-              ports: node.ports,
-              style: node.style,
-              existsInCurrentView: node.existsInCurrentView,
-              tags: node.tags,
-              ...navigateTo
-            }
-          }
-        );
-      }
-    }
-  }
-  for (const edge of view.edges) {
-    const source = edge.source;
-    const target = edge.target;
-    const id = edge.id;
-    if (!hasAtLeast(edge.points, 2)) {
-      console.error("edge should have at least 2 points", edge);
-      continue;
-    }
-    if (!hasAtLeast(edge.relations, 1)) {
-      console.error("edge should have at least 1 relation", edge);
-      continue;
-    }
-    xyedges.push({
-      id,
-      type: "relationship",
-      source,
-      target,
-      sourceHandle: edge.sourceHandle,
-      targetHandle: edge.targetHandle,
-      // selectable: selectable,
-      // hidden: !visiblePredicate(edge),
-      // deletable: false,
-      data: {
-        sourceFqn: edge.sourceFqn,
-        targetFqn: edge.targetFqn,
-        relations: edge.relations,
-        color: edge.color ?? "gray",
-        label: edge.label,
-        navigateTo: edge.navigateTo ?? null,
-        line: edge.line ?? "dashed",
-        existsInCurrentView: edge.existsInCurrentView
-      },
-      interactionWidth: 20
-    });
-  }
-  return {
-    xynodes,
-    xyedges
-  };
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	const queue = Queue.from(view.nodes.reduce((acc, node) => {
+		nodeLookup.set(node.id, node);
+		if (!node.parent) acc.push({
+			node,
+			parent: null
+		});
+		return acc;
+	}, []));
+	const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+	let next;
+	while (next = queue.dequeue()) {
+		const { node, parent } = next;
+		const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
+		if (isCompound) for (const child of node.children) queue.enqueue({
+			node: nodeById(child),
+			parent: node
+		});
+		const position = {
+			x: node.x,
+			y: node.y
+		};
+		if (parent) {
+			position.x -= parent.x;
+			position.y -= parent.y;
+		}
+		const id = node.id;
+		const base = {
+			id,
+			position,
+			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+			style: {
+				width: node.width,
+				height: node.height
+			},
+			initialWidth: node.width,
+			initialHeight: node.height,
+			...parent && { parentId: parent.id }
+		};
+		const fqn = node.modelRef ?? null;
+		const navigateTo = { navigateTo: node.navigateTo ?? null };
+		switch (true) {
+			case node.kind === LayoutRelationshipsViewResult.Empty:
+				xynodes.push({
+					...base,
+					type: "empty",
+					data: { column: node.column }
+				});
+				break;
+			case isCompound && !!fqn:
+				xynodes.push({
+					...base,
+					type: "compound",
+					data: {
+						id,
+						column: node.column,
+						title: node.title,
+						color: node.color,
+						shape: node.shape,
+						style: node.style,
+						depth: node.depth ?? 0,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						existsInCurrentView: node.existsInCurrentView,
+						fqn,
+						...navigateTo
+					}
+				});
+				break;
+			default:
+				invariant(fqn, "Element should have either modelRef or deploymentRef");
+				xynodes.push({
+					...base,
+					type: "element",
+					data: {
+						id,
+						column: node.column,
+						fqn,
+						title: node.title,
+						technology: node.technology,
+						description: node.description,
+						height: node.height,
+						width: node.width,
+						color: node.color,
+						shape: node.shape,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						style: node.style,
+						existsInCurrentView: node.existsInCurrentView,
+						tags: node.tags,
+						...navigateTo
+					}
+				});
+		}
+	}
+	for (const edge of view.edges) {
+		const source = edge.source;
+		const target = edge.target;
+		const id = edge.id;
+		if (!hasAtLeast(edge.points, 2)) {
+			console.error("edge should have at least 2 points", edge);
+			continue;
+		}
+		if (!hasAtLeast(edge.relations, 1)) {
+			console.error("edge should have at least 1 relation", edge);
+			continue;
+		}
+		xyedges.push({
+			id,
+			type: "relationship",
+			source,
+			target,
+			sourceHandle: edge.sourceHandle,
+			targetHandle: edge.targetHandle,
+			data: {
+				sourceFqn: edge.sourceFqn,
+				targetFqn: edge.targetFqn,
+				relations: edge.relations,
+				color: edge.color ?? "gray",
+				label: edge.label,
+				navigateTo: edge.navigateTo ?? null,
+				line: edge.line ?? "dashed",
+				existsInCurrentView: edge.existsInCurrentView
+			},
+			interactionWidth: 20
+		});
+	}
+	return {
+		xynodes,
+		xyedges
+	};
 }
-
+//#endregion
 export { viewToNodesEdge };

package/dist/projects-overview/ProjectsOverview.js

@@ -1,57 +1,58 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useSyncedRef } from '@react-hookz/web';
-import { useActorRef } from '@xstate/react';
-import { ReactFlowProvider } from '@xyflow/react';
-import { LayoutGroup } from 'motion/react';
-import { useEffect, useRef } from 'react';
-import { projectOverviewLogic } from './actor.js';
-import { ProjectsOverviewActorContextProvider } from './context.js';
-import { ProjectsOverviewPanel } from './panel/ProjectsOverviewPanel.js';
-import { ProjectsOverviewXY } from './ProjectsOverviewXY.js';
-
-function ProjectsOverview({
-  view,
-  onNavigateToProject,
-  fitViewPadding = {
-    top: "50px",
-    bottom: "32px",
-    left: "32px",
-    right: "32px"
-  },
-  ...props
-}) {
-  const actorRef = useActorRef(
-    projectOverviewLogic,
-    {
-      input: { view, fitViewPadding }
-    }
-  );
-  useEffect(() => {
-    actorRef.send({ type: "update.view", view });
-  }, [actorRef, view]);
-  const onNavigateToProjectRef = useSyncedRef(onNavigateToProject);
-  useEffect(() => {
-    const subs = [
-      actorRef.on("navigate.to", ({ projectId }) => {
-        onNavigateToProjectRef.current?.(projectId);
-      })
-    ];
-    return () => {
-      subs.forEach((sub) => sub.unsubscribe());
-    };
-  }, [actorRef]);
-  const bounds = view.bounds;
-  const initialRef = useRef({
-    initialNodes: [],
-    initialEdges: [],
-    initialWidth: bounds.width,
-    initialHeight: bounds.height,
-    fitView: false
-  });
-  return /* @__PURE__ */ jsx(ProjectsOverviewActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
-    /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(ProjectsOverviewXY, { ...props }) }),
-    /* @__PURE__ */ jsx(ProjectsOverviewPanel, {})
-  ] }) });
+import "../_virtual/_rolldown/runtime.js";
+import { projectOverviewLogic } from "./actor.js";
+import { ProjectsOverviewActorContextProvider } from "./context.js";
+import { ProjectsOverviewPanel } from "./panel/ProjectsOverviewPanel.js";
+import { ProjectsOverviewXY } from "./ProjectsOverviewXY.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSyncedRef } from "@react-hookz/web";
+import { ReactFlowProvider } from "@xyflow/react";
+import { LayoutGroup } from "motion/react";
+import { useActorRef } from "@xstate/react";
+//#region src/projects-overview/ProjectsOverview.tsx
+function ProjectsOverview({ view, onNavigateToProject, fitViewPadding = {
+	top: "50px",
+	bottom: "32px",
+	left: "32px",
+	right: "32px"
+}, ...props }) {
+	const actorRef = useActorRef(projectOverviewLogic, { input: {
+		view,
+		fitViewPadding
+	} });
+	useEffect(() => {
+		actorRef.send({
+			type: "update.view",
+			view
+		});
+	}, [actorRef, view]);
+	const onNavigateToProjectRef = useSyncedRef(onNavigateToProject);
+	useEffect(() => {
+		const subs = [actorRef.on("navigate.to", ({ projectId }) => {
+			onNavigateToProjectRef.current?.(projectId);
+		})];
+		return () => {
+			subs.forEach((sub) => sub.unsubscribe());
+		};
+	}, [actorRef]);
+	const bounds = view.bounds;
+	return /* @__PURE__ */ jsx(ProjectsOverviewActorContextProvider, {
+		value: actorRef,
+		children: /* @__PURE__ */ jsxs(ReactFlowProvider, {
+			...useRef({
+				initialNodes: [],
+				initialEdges: [],
+				initialWidth: bounds.width,
+				initialHeight: bounds.height,
+				fitView: false
+			}).current,
+			children: [/* @__PURE__ */ jsx(LayoutGroup, {
+				id: actorRef.sessionId,
+				inherit: false,
+				children: /* @__PURE__ */ jsx(ProjectsOverviewXY, { ...props })
+			}), /* @__PURE__ */ jsx(ProjectsOverviewPanel, {})]
+		})
+	});
 }
-
+//#endregion
 export { ProjectsOverview };

package/dist/projects-overview/ProjectsOverviewXY.js

@@ -1,98 +1,109 @@
-import { jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { shallowEqual } from 'fast-equals';
-import { memo } from 'react';
-import { BaseXYFlow } from '../base/BaseXYFlow.js';
-import { useCallbackRef } from '../hooks/useCallbackRef.js';
-import { useProjectsOverviewActor } from './context.js';
-import { useProjectsOverviewState, useProjectsOverviewXYStoreApi } from './hooks.js';
-import { RelationshipEdge } from './custom/edgeTypes.js';
-import { ProjectNode } from './custom/nodeTypes.js';
-
-const nodeTypes = {
-  project: ProjectNode
-};
-const edgeTypes = {
-  relationship: RelationshipEdge
-};
-const selector = (state) => ({
-  isActive: state.hasTag("active"),
-  nodes: state.context.xynodes,
-  edges: state.context.xyedges
+import "../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../hooks/useCallbackRef.js";
+import { BaseXYFlow } from "../base/BaseXYFlow.js";
+import { useProjectsOverviewActor } from "./context.js";
+import { RelationshipEdge } from "./custom/edgeTypes.js";
+import { ProjectNode } from "./custom/nodeTypes.js";
+import { useProjectsOverviewState, useProjectsOverviewXYStoreApi } from "./hooks.js";
+import { cx } from "@likec4/styles/css";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { shallowEqual } from "fast-equals";
+//#region src/projects-overview/ProjectsOverviewXY.tsx
+var nodeTypes = { project: ProjectNode };
+var edgeTypes = { relationship: RelationshipEdge };
+var selector = (state) => ({
+	isActive: state.hasTag("active"),
+	nodes: state.context.xynodes,
+	edges: state.context.xyedges
 });
-const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
-const ProjectsOverviewXY = memo(({
-  background = "dots",
-  ...props
-}) => {
-  const actorRef = useProjectsOverviewActor();
-  const {
-    isActive,
-    nodes,
-    edges
-  } = useProjectsOverviewState(
-    selector,
-    selectorEq
-  );
-  const xystore = useProjectsOverviewXYStoreApi();
-  return /* @__PURE__ */ jsx(
-    BaseXYFlow,
-    {
-      nodes,
-      edges,
-      className: cx(
-        isActive ? "initialized" : "not-initialized",
-        "projects-overview"
-      ),
-      nodeTypes,
-      edgeTypes,
-      fitView: false,
-      onNodeClick: useCallbackRef((_e, node) => {
-        _e.stopPropagation();
-        actorRef.send({ type: "xyflow.click.node", node });
-      }),
-      onEdgeClick: useCallbackRef((_e, edge) => {
-        _e.stopPropagation();
-        actorRef.send({ type: "xyflow.click.edge", edge });
-      }),
-      onPaneClick: useCallbackRef((_e) => {
-        _e.stopPropagation();
-        actorRef.send({ type: "xyflow.click.pane" });
-      }),
-      onDoubleClick: useCallbackRef((_e) => {
-        _e.stopPropagation();
-        actorRef.send({ type: "xyflow.click.double" });
-      }),
-      onNodesChange: useCallbackRef((changes) => {
-        actorRef.send({ type: "xyflow.applyNodeChanges", changes });
-      }),
-      onEdgesChange: useCallbackRef((changes) => {
-        actorRef.send({ type: "xyflow.applyEdgeChanges", changes });
-      }),
-      onEdgeMouseEnter: useCallbackRef((event, edge) => {
-        actorRef.send({ type: "xyflow.mouse.enter.edge", edge, event });
-      }),
-      onEdgeMouseLeave: useCallbackRef((event, edge) => {
-        actorRef.send({ type: "xyflow.mouse.leave.edge", edge, event });
-      }),
-      onNodeMouseEnter: useCallbackRef((event, node) => {
-        actorRef.send({ type: "xyflow.mouse.enter.node", node });
-      }),
-      onNodeMouseLeave: useCallbackRef((event, node) => {
-        actorRef.send({ type: "xyflow.mouse.leave.node", node });
-      }),
-      onInit: useCallbackRef((xyflow) => {
-        actorRef.send({ type: "xyflow.init", xyflow, xystore });
-      }),
-      nodesDraggable: false,
-      nodesSelectable: true,
-      pannable: true,
-      zoomable: true,
-      background,
-      ...props
-    }
-  );
+var selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
+var ProjectsOverviewXY = memo(({ background = "dots", ...props }) => {
+	const actorRef = useProjectsOverviewActor();
+	const { isActive, nodes, edges } = useProjectsOverviewState(selector, selectorEq);
+	const xystore = useProjectsOverviewXYStoreApi();
+	return /* @__PURE__ */ jsx(BaseXYFlow, {
+		nodes,
+		edges,
+		className: cx(isActive ? "initialized" : "not-initialized", "projects-overview"),
+		nodeTypes,
+		edgeTypes,
+		fitView: false,
+		onNodeClick: useCallbackRef((_e, node) => {
+			_e.stopPropagation();
+			actorRef.send({
+				type: "xyflow.click.node",
+				node
+			});
+		}),
+		onEdgeClick: useCallbackRef((_e, edge) => {
+			_e.stopPropagation();
+			actorRef.send({
+				type: "xyflow.click.edge",
+				edge
+			});
+		}),
+		onPaneClick: useCallbackRef((_e) => {
+			_e.stopPropagation();
+			actorRef.send({ type: "xyflow.click.pane" });
+		}),
+		onDoubleClick: useCallbackRef((_e) => {
+			_e.stopPropagation();
+			actorRef.send({ type: "xyflow.click.double" });
+		}),
+		onNodesChange: useCallbackRef((changes) => {
+			actorRef.send({
+				type: "xyflow.applyNodeChanges",
+				changes
+			});
+		}),
+		onEdgesChange: useCallbackRef((changes) => {
+			actorRef.send({
+				type: "xyflow.applyEdgeChanges",
+				changes
+			});
+		}),
+		onEdgeMouseEnter: useCallbackRef((event, edge) => {
+			actorRef.send({
+				type: "xyflow.mouse.enter.edge",
+				edge,
+				event
+			});
+		}),
+		onEdgeMouseLeave: useCallbackRef((event, edge) => {
+			actorRef.send({
+				type: "xyflow.mouse.leave.edge",
+				edge,
+				event
+			});
+		}),
+		onNodeMouseEnter: useCallbackRef((event, node) => {
+			actorRef.send({
+				type: "xyflow.mouse.enter.node",
+				node
+			});
+		}),
+		onNodeMouseLeave: useCallbackRef((event, node) => {
+			actorRef.send({
+				type: "xyflow.mouse.leave.node",
+				node
+			});
+		}),
+		onInit: useCallbackRef((xyflow) => {
+			actorRef.send({
+				type: "xyflow.init",
+				xyflow,
+				xystore
+			});
+		}),
+		nodesDraggable: false,
+		nodesSelectable: true,
+		pannable: true,
+		zoomable: true,
+		background,
+		...props
+	});
 });
 ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
-
+//#endregion
 export { ProjectsOverviewXY };