@likec4/diagram 1.55.1 → 1.57.0

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -1,124 +1,99 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ElementActions } from './ElementActions.js';
-import { Handle } from '@xyflow/react';
-import { Position } from '@xyflow/system';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
-import { useDiagram } from '../../../hooks/safeContext.js';
-import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
-import { memoNode } from '../../../base-primitives/memoNode.js';
-import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
-import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';
-import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
-import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
-import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
-import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
-
+import "../../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.js";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { CompoundNodeContainer } from "../../../base-primitives/compound/CompoundNodeContainer.js";
+import { CompoundTitle } from "../../../base-primitives/compound/CompoundTitle.js";
+import { ElementData } from "../../../base-primitives/element/ElementData.js";
+import { ElementDetailsButton } from "../../../base-primitives/element/ElementDetailsButton.js";
+import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
+import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.js";
+import { ElementActions } from "./ElementActions.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Handle } from "@xyflow/react";
+import { Position as Position$1 } from "@xyflow/system";
+//#region src/overlays/relationship-details/custom/nodeTypes.tsx
 function ElementTags(props) {
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsx(
-    ElementTags$1,
-    {
-      onTagClick: useCallbackRef((tag) => {
-        diagram.openSearch(tag);
-      }),
-      ...props
-    }
-  );
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementTags$1, {
+		onTagClick: useCallbackRef((tag) => {
+			diagram.openSearch(tag);
+		}),
+		...props
+	});
 }
-const ElementDetailsButtonWithHandler = (props) => {
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsx(
-    ElementDetailsButton,
-    {
-      ...props,
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openElementDetails(props.data.fqn);
-      }
-    }
-  );
+var ElementDetailsButtonWithHandler = (props) => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementDetailsButton, {
+		...props,
+		onClick: (e) => {
+			e.stopPropagation();
+			diagram.openElementDetails(props.data.fqn);
+		}
+	});
 };
-const ElementNode = memoNode((props) => {
-  const { enableElementTags } = useEnabledFeatures();
-  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementData, { ...props }),
-    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
-    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-    /* @__PURE__ */ jsx(ElementActions, { ...props }),
-    /* @__PURE__ */ jsx(ElementPorts, { ...props })
-  ] });
-});
-const CompoundNode = memoNode(
-  (props) => {
-    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-      /* @__PURE__ */ jsx(CompoundPorts, { ...props })
-    ] });
-  }
-);
-const ElementPorts = ({ data: { ports, height: h } }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    ports.in.map((id, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id,
-        type: "target",
-        position: Position.Left,
-        style: {
-          visibility: "hidden",
-          top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
-        }
-      },
-      id
-    )),
-    ports.out.map((id, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id,
-        type: "source",
-        position: Position.Right,
-        style: {
-          visibility: "hidden",
-          top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
-        }
-      },
-      id
-    ))
-  ] });
-};
-const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  data.ports.in.map((id, i) => /* @__PURE__ */ jsx(
-    Handle,
-    {
-      id,
-      type: "target",
-      position: Position.Left,
-      style: {
-        visibility: "hidden",
-        top: `${20 * (i + 1)}px`
-      }
-    },
-    id
-  )),
-  data.ports.out.map((id, i) => /* @__PURE__ */ jsx(
-    Handle,
-    {
-      id,
-      type: "source",
-      position: Position.Right,
-      style: {
-        visibility: "hidden",
-        top: `${20 * (i + 1)}px`
-      }
-    },
-    id
-  ))
-] });
-
-export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };
+function ElementNode(props) {
+	const { enableElementTags } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
+			/* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+			/* @__PURE__ */ jsx(ElementActions, { ...props }),
+			/* @__PURE__ */ jsx(ElementPorts, { ...props })
+		]
+	});
+}
+function CompoundNode(props) {
+	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundPorts, { ...props })
+		]
+	});
+}
+function ElementPorts({ data: { ports, height: h } }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "target",
+		position: Position$1.Left,
+		style: {
+			visibility: "hidden",
+			top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
+		}
+	}, id)), ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "source",
+		position: Position$1.Right,
+		style: {
+			visibility: "hidden",
+			top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
+		}
+	}, id))] });
+}
+function CompoundPorts({ data }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [data.ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "target",
+		position: Position$1.Left,
+		style: {
+			visibility: "hidden",
+			top: `${20 * (i + 1)}px`
+		}
+	}, id)), data.ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "source",
+		position: Position$1.Right,
+		style: {
+			visibility: "hidden",
+			top: `${20 * (i + 1)}px`
+		}
+	}, id))] });
+}
+//#endregion
+export { CompoundNode, ElementNode };

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

@@ -1,45 +1,51 @@
-import { nonNullable } from '@likec4/core';
-import { useSelector } from '@xstate/react';
-import { shallowEqual } from 'fast-equals';
-import { createContext, useMemo, useContext } from 'react';
-import { useCallbackRef } from '../../hooks/useCallbackRef.js';
-
-const RelationshipDetailsActorContext = createContext(null);
+import "../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../../hooks/useCallbackRef.js";
+import { createContext, useContext, useMemo } from "react";
+import { shallowEqual } from "fast-equals";
+import { nonNullable } from "@likec4/core";
+import { useSelector } from "@xstate/react";
+//#region src/overlays/relationship-details/hooks.ts
+var RelationshipDetailsActorContext = createContext(null);
 function useRelationshipDetailsActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
+	return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
 }
 function useRelationshipDetailsState(selector, compare = shallowEqual) {
-  const select = useCallbackRef(selector);
-  const actor = useRelationshipDetailsActor();
-  return useSelector(actor, select, compare);
+	const select = useCallbackRef(selector);
+	return useSelector(useRelationshipDetailsActor(), select, compare);
 }
 function useRelationshipDetails() {
-  const actor = useRelationshipDetailsActor();
-  return useMemo(() => ({
-    actor,
-    get rootElementId() {
-      return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
-    },
-    getState: () => actor.getSnapshot().context,
-    send: actor.send,
-    navigateTo: (...params) => {
-      if (params.length === 1) {
-        actor.send({ type: "navigate.to", params: { edgeId: params[0] } });
-      } else {
-        actor.send({ type: "navigate.to", params: { source: params[0], target: params[1] } });
-      }
-    },
-    fitDiagram: () => {
-      actor.send({ type: "fitDiagram" });
-    },
-    close: () => {
-      if (actor._parent) {
-        actor._parent?.send({ type: "close", actorId: actor.id });
-      } else {
-        actor.send({ type: "close" });
-      }
-    }
-  }), [actor]);
+	const actor = useRelationshipDetailsActor();
+	return useMemo(() => ({
+		actor,
+		get rootElementId() {
+			return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
+		},
+		getState: () => actor.getSnapshot().context,
+		send: actor.send,
+		navigateTo: (...params) => {
+			if (params.length === 1) actor.send({
+				type: "navigate.to",
+				params: { edgeId: params[0] }
+			});
+			else actor.send({
+				type: "navigate.to",
+				params: {
+					source: params[0],
+					target: params[1]
+				}
+			});
+		},
+		fitDiagram: () => {
+			actor.send({ type: "fitDiagram" });
+		},
+		close: () => {
+			if (actor._parent) actor._parent?.send({
+				type: "close",
+				actorId: actor.id
+			});
+			else actor.send({ type: "close" });
+		}
+	}), [actor]);
 }
-
+//#endregion
 export { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState };

package/dist/overlays/relationship-details/layout-to-xyflow.js

@@ -1,144 +1,122 @@
-import { Queue, nonNullable } from '@likec4/core';
-import { hasAtLeast } from 'remeda';
-import { ZIndexes } from '../../base/const.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { ZIndexes } from "../../base/const.js";
+import { hasAtLeast } from "remeda";
+import { Queue, nonNullable } from "@likec4/core";
+//#region src/overlays/relationship-details/layout-to-xyflow.ts
 function layoutResultToXYFlow(layout) {
-  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
-  const queue = Queue.from(layout.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);
-    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,
-      draggable: false,
-      deletable: false,
-      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;
-    const navigateTo = { navigateTo: node.navigateTo ?? null };
-    switch (true) {
-      case isCompound: {
-        xynodes.push(
-          {
-            ...base,
-            type: "compound",
-            data: {
-              id,
-              column: node.column,
-              title: node.title,
-              color: node.color,
-              style: node.style,
-              depth: node.depth ?? 0,
-              icon: node.icon ?? "none",
-              ports: node.ports,
-              fqn,
-              ...navigateTo
-            }
-          }
-        );
-        break;
-      }
-      default: {
-        xynodes.push(
-          {
-            ...base,
-            type: "element",
-            data: {
-              id,
-              column: node.column,
-              fqn,
-              title: node.title,
-              technology: node.technology,
-              description: node.description ?? null,
-              height: node.height,
-              width: node.width,
-              color: node.color,
-              shape: node.shape,
-              icon: node.icon ?? "none",
-              ports: node.ports,
-              style: node.style,
-              tags: node.tags,
-              ...navigateTo
-            }
-          }
-        );
-      }
-    }
-  }
-  for (const {
-    source,
-    target,
-    relationId,
-    label,
-    technology,
-    description,
-    navigateTo = null,
-    color = "gray",
-    line = "dashed",
-    ...edge
-  } of layout.edges) {
-    const id = edge.id;
-    xyedges.push({
-      id,
-      type: "relationship",
-      source,
-      target,
-      sourceHandle: edge.sourceHandle,
-      targetHandle: edge.targetHandle,
-      // selectable: selectable,
-      // hidden: !visiblePredicate(edge),
-      deletable: false,
-      data: {
-        relationId,
-        label,
-        color,
-        navigateTo,
-        line,
-        description: description ?? null,
-        ...technology && { technology }
-      }
-    });
-  }
-  return {
-    xynodes,
-    xyedges,
-    bounds: layout.bounds
-  };
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	const queue = Queue.from(layout.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);
+		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,
+			draggable: false,
+			deletable: false,
+			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;
+		const navigateTo = { navigateTo: node.navigateTo ?? null };
+		switch (true) {
+			case isCompound:
+				xynodes.push({
+					...base,
+					type: "compound",
+					data: {
+						id,
+						column: node.column,
+						title: node.title,
+						color: node.color,
+						style: node.style,
+						depth: node.depth ?? 0,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						fqn,
+						...navigateTo
+					}
+				});
+				break;
+			default: xynodes.push({
+				...base,
+				type: "element",
+				data: {
+					id,
+					column: node.column,
+					fqn,
+					title: node.title,
+					technology: node.technology,
+					description: node.description ?? null,
+					height: node.height,
+					width: node.width,
+					color: node.color,
+					shape: node.shape,
+					icon: node.icon ?? "none",
+					ports: node.ports,
+					style: node.style,
+					tags: node.tags,
+					...navigateTo
+				}
+			});
+		}
+	}
+	for (const { source, target, relationId, label, technology, description, navigateTo = null, color = "gray", line = "dashed", ...edge } of layout.edges) {
+		const id = edge.id;
+		xyedges.push({
+			id,
+			type: "relationship",
+			source,
+			target,
+			sourceHandle: edge.sourceHandle,
+			targetHandle: edge.targetHandle,
+			deletable: false,
+			data: {
+				relationId,
+				label,
+				color,
+				navigateTo,
+				line,
+				description: description ?? null,
+				...technology && { technology }
+			}
+		});
+	}
+	return {
+		xynodes,
+		xyedges,
+		bounds: layout.bounds
+	};
 }
-
+//#endregion
 export { layoutResultToXYFlow };