@eventcatalog/core 2.3.3 → 2.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.3.4
+
+### Patch Changes
+
+- a99057e: feat(core): added ability to drag nodes in visualizer
+
 ## 2.3.3
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "publishConfig": {
     "access": "public"
   },
@@ -55,7 +55,7 @@
     "rapidoc": "^9.3.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "reactflow": "^11.11.3",
+    "reactflow": "^11.11.4",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "tailwindcss": "^3.4.3",

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -1,6 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import ReactFlow, { Background, ConnectionLineType, Controls, Panel, ReactFlowProvider, type Edge, type Node } from 'reactflow';
+import ReactFlow, {
+  Background,
+  ConnectionLineType,
+  Controls,
+  Panel,
+  ReactFlowProvider,
+  useNodesState,
+  type Edge,
+  type Node,
+} from 'reactflow';
 import 'reactflow/dist/style.css';
 import ServiceNode from './Nodes/Service';
 import EventNode from './Nodes/Event';
@@ -29,21 +38,18 @@ const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<Collectio
 };
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
-const NodeGraphBuilder = ({ nodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
-  // const { fitView, viewportInitialized } = useReactFlow();
+const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
+  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
 
-  // const nodeTypes = useMemo(() => ({ service: ServiceNode, event: EventNode, command: CommandNode }), []);
   const nodeTypes = useMemo(() => ({ services: ServiceNode, events: EventNode, commands: CommandNode }), []);
   const nodeOrigin = [0.5, 0.5];
 
   const handleNodeClick = (_: any, node: Node) => {
     if (node.type === 'events' || node.type === 'commands') {
-      // return (window.location.href = linkTo === 'docs' ? getDocUrlForCollection(node.data.message) : getVisualiserUrlForCollection(node.data.message));
       navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.message) : getVisualiserUrlForCollection(node.data.message));
     }
     if (node.type === 'services') {
       navigate(linkTo === 'docs' ? getDocUrlForCollection(node.data.service) : getVisualiserUrlForCollection(node.data.service));
-      // return (window.location.href = linkTo === 'docs' ? getDocUrlForCollection(node.data.service) : getVisualiserUrlForCollection(node.data.service));
     }
   };
 
@@ -55,6 +61,7 @@ const NodeGraphBuilder = ({ nodes, edges, title, includeBackground = true, linkT
       edges={edges}
       fitView
       nodesDraggable
+      onNodesChange={onNodesChange}
       connectionLineType={ConnectionLineType.SmoothStep}
       // @ts-ignore
       nodeOrigin={nodeOrigin}

package/src/utils/commands/node-graph.ts

@@ -13,7 +13,7 @@ interface Props {
 }
 
 export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 180, nodesep: 50 });
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,
     edges = [] as any;
 

package/src/utils/events/node-graph.ts

@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 180, nodesep: 50 });
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,
     edges = [] as any;
 

package/src/utils/services/node-graph.ts

@@ -15,7 +15,7 @@ interface Props {
 }
 
 export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simple', renderAllEdges = false }: Props) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 200, nodesep: 50 });
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
   const nodes = [] as any,
     edges = [] as any;