@eventcatalog/visualiser 5.0.0-beta.1 → 5.0.0-beta.3

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   useState as useState15,
   useCallback as useCallback13,
   useRef as useRef9,
-  memo as memo45
+  memo as memo46
 } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -1019,10 +1019,13 @@ function TruncatedResourceName({
     const updateTruncation = () => {
       setIsTruncated(element.scrollWidth > element.clientWidth);
     };
-    updateTruncation();
     if (typeof ResizeObserver === "undefined") {
+      const frame = requestAnimationFrame(updateTruncation);
       window.addEventListener("resize", updateTruncation);
-      return () => window.removeEventListener("resize", updateTruncation);
+      return () => {
+        cancelAnimationFrame(frame);
+        window.removeEventListener("resize", updateTruncation);
+      };
     }
     const observer = new ResizeObserver(updateTruncation);
     observer.observe(element);
@@ -4239,7 +4242,8 @@ var DomainCard_default = memo17(function DomainCardNode({ data }) {
     systemsCount = 0,
     servicesCount = 0,
     entitiesCount = 0,
-    subdomain = false
+    subdomain = false,
+    navigable = true
   } = data;
   const { id, version, name, summary } = domain;
   const stats = [
@@ -4251,14 +4255,16 @@ var DomainCard_default = memo17(function DomainCardNode({ data }) {
   return /* @__PURE__ */ jsxs17(
     "div",
     {
-      role: "button",
-      tabIndex: 0,
-      onClick: goToDiagram,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") goToDiagram();
-      },
-      title: `Open the ${name} diagram`,
-      className: "relative min-w-48 max-w-60 rounded-xl border-2 border-yellow-400 overflow-visible cursor-pointer",
+      ...navigable ? {
+        role: "button",
+        tabIndex: 0,
+        onClick: goToDiagram,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") goToDiagram();
+        },
+        title: `Open the ${name} diagram`
+      } : {},
+      className: `relative min-w-48 max-w-60 rounded-xl border-2 border-yellow-400 overflow-visible${navigable ? " cursor-pointer" : ""}`,
       style: CARD_STYLE,
       children: [
         /* @__PURE__ */ jsx19(
@@ -6026,12 +6032,14 @@ var System_default = memo27(function SystemNode({ data }) {
     entitiesCount = 0,
     containersCount = 0,
     messagesCount = 0,
-    isFocused = false
+    isFocused = false,
+    navigable = true
   } = data;
   const { id, version, name, summary, scope } = system;
   const isExternal = scope === "external";
   const isDark = useDarkMode();
   const isFlowStep = Boolean(data.step);
+  const opensMap = navigable && !isFlowStep;
   const stats = [
     { icon: ServerIcon3, label: "Services", count: servicesCount },
     { icon: MessageSquareIcon, label: "Messages", count: messagesCount },
@@ -6045,7 +6053,7 @@ var System_default = memo27(function SystemNode({ data }) {
   return /* @__PURE__ */ jsxs28(
     "div",
     {
-      ...isFlowStep ? {} : {
+      ...!opensMap ? {} : {
         role: "button",
         tabIndex: 0,
         onClick: goToMap,
@@ -6056,7 +6064,7 @@ var System_default = memo27(function SystemNode({ data }) {
       },
       className: classNames18(
         "relative min-w-48 max-w-60 rounded-xl border-2 overflow-visible",
-        !isFlowStep && "cursor-pointer",
+        opensMap && "cursor-pointer",
         isExternal ? "border-dashed border-violet-400" : "border-violet-500"
       ),
       style: {
@@ -11256,6 +11264,7 @@ var animateLayout = ({
   toEdges,
   setNodes,
   setEdges,
+  getCurrentNodes,
   morphs = [],
   nodeOrigin = [0, 0],
   onDone
@@ -11325,7 +11334,18 @@ var animateLayout = ({
     );
     return [...nodes, ...exitingNodes];
   };
-  setNodes(frame(0));
+  const setNodesKeepingSize = (nodes) => {
+    const measured = new Map(
+      getCurrentNodes().map((node) => [node.id, node.measured])
+    );
+    setNodes(
+      nodes.map((node) => {
+        const measuredSize = measured.get(node.id);
+        return measuredSize ? { ...node, measured: measuredSize } : node;
+      })
+    );
+  };
+  setNodesKeepingSize(frame(0));
   setEdges([
     ...toEdges.map(
       (edge) => fromEdgeIds.has(edge.id) ? edge : { ...edge, className: "ec-enter" }
@@ -11336,11 +11356,11 @@ var animateLayout = ({
   let animationFrame = requestAnimationFrame(function tick(now) {
     const t = Math.min(1, (now - start) / LAYOUT_ANIMATION_DURATION);
     if (t < 1) {
-      setNodes(frame(easeInOut(t)));
+      setNodesKeepingSize(frame(easeInOut(t)));
       animationFrame = requestAnimationFrame(tick);
       return;
     }
-    setNodes(toNodes);
+    setNodesKeepingSize(toNodes);
     setEdges(
       (edges) => edges.filter((edge) => toEdgeIds.has(edge.id)).map(
         (edge) => edge.className === "ec-enter" ? { ...edge, className: void 0 } : edge
@@ -11571,6 +11591,7 @@ var useNodeVisibility = ({
         toEdges: target.edges,
         setNodes,
         setEdges,
+        getCurrentNodes: () => nodesRef.current,
         // When switching graphs, systems expand into their group (or back), e.g.
         // a system in its context diagram
         morphs: from ? getSystemMorphs(from.nodes, target.nodes) : [],
@@ -12076,6 +12097,23 @@ var NodeContextMenu_default = memo44(function NodeContextMenu({
   ] });
 });
 
+// src/utils/node-memo.ts
+import { memo as memo45 } from "react";
+var POSITION_PROPS = /* @__PURE__ */ new Set(["positionAbsoluteX", "positionAbsoluteY"]);
+var equalExceptPosition = (previous, next) => {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)]);
+  for (const key of keys) {
+    if (POSITION_PROPS.has(key)) continue;
+    if (!Object.is(
+      previous[key],
+      next[key]
+    ))
+      return false;
+  }
+  return true;
+};
+var memoNode = (Component) => memo45(Component, equalExceptPosition);
+
 // src/utils/export-image.ts
 import { getViewportForBounds } from "@xyflow/react";
 var MIN_IMAGE_WIDTH = 1024;
@@ -13365,7 +13403,7 @@ var LEGEND_ICONS = {
   field: { Icon: Box, colorClass: "text-cyan-600" }
 };
 var getLegendIcon = (key) => LEGEND_ICONS[key];
-var LegendPanel = memo45(function LegendPanel2({
+var LegendPanel = memo46(function LegendPanel2({
   legend,
   hiddenKeys,
   showMinimap,
@@ -13527,15 +13565,17 @@ var NodeGraphBuilder = ({
   }, []);
   const nodeTypes = useMemo17(() => {
     const wrapWithContextMenu = (Component) => {
-      const Wrapped = memo45((props) => {
+      const Wrapped = (props) => {
         const items = props.data?.contextMenu;
         if (!items?.length) return /* @__PURE__ */ jsx56(Component, { ...props });
         return /* @__PURE__ */ jsx56(NodeContextMenu_default, { items, children: /* @__PURE__ */ jsx56(Component, { ...props }) });
-      });
+      };
       Wrapped.displayName = `WithContextMenu(${Component.displayName || Component.name || "Component"})`;
       return Wrapped;
     };
-    return {
+    const ReadOnlyNoteNode = (props) => /* @__PURE__ */ jsx56(NoteNode_default, { ...props, readOnly: true });
+    ReadOnlyNoteNode.displayName = "ReadOnlyNoteNode";
+    const types = {
       service: wrapWithContextMenu(ServiceNode_default),
       services: wrapWithContextMenu(ServiceNode_default),
       agent: wrapWithContextMenu(Agent_default),
@@ -13574,13 +13614,19 @@ var NodeGraphBuilder = ({
       "system-group": SystemGroupNode_default,
       "domain-group": SystemGroupNode_default,
       "context-domain": DomainCard_default,
-      note: memo45((props) => /* @__PURE__ */ jsx56(NoteNode_default, { ...props, readOnly: true })),
+      note: ReadOnlyNoteNode,
       field: wrapWithContextMenu(FieldNode_default),
       messageGroup: MessageGroupNode_default,
       messageGroupExpanded: MessageGroupExpandedNode_default,
       flowExpanded: FlowExpandedNode_default,
       swimlane: SwimlaneNode_default
     };
+    return Object.fromEntries(
+      Object.entries(types).map(([type, Component]) => [
+        type,
+        memoNode(Component)
+      ])
+    );
   }, []);
   const edgeTypes2 = useMemo17(
     () => ({
@@ -15618,6 +15664,7 @@ export {
   DATA,
   DataNode_default as Data,
   DataProduct_default as DataProductNode,
+  DomainCard_default as DomainCardNode,
   Domain_default as DomainNode,
   ENTITY_TARGET_HANDLE_ID,
   EVENT,