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

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);
@@ -11256,6 +11259,7 @@ var animateLayout = ({
   toEdges,
   setNodes,
   setEdges,
+  getCurrentNodes,
   morphs = [],
   nodeOrigin = [0, 0],
   onDone
@@ -11325,7 +11329,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 +11351,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 +11586,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 +12092,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 +13398,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 +13560,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 +13609,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(
     () => ({