refactor(edge-updater): rename example

example/src/DraggableEdge/index.js

@@ -1,89 +0,0 @@
-import React, { useState } from 'react';
-
-import ReactFlow, { MiniMap, Controls, Background, updateEdge, addEdge } from 'react-flow-renderer';
-
-const onLoad = (reactFlowInstance) => {
-  console.log('flow loaded:', reactFlowInstance);
-  reactFlowInstance.fitView();
-};
-
-const initialElements = [
-  {
-    id: '1',
-    type: 'input',
-    data: {
-      label: (
-        <>
-          Node <strong>A</strong>
-        </>
-      ),
-    },
-    position: { x: 250, y: 0 },
-  },
-  {
-    id: '2',
-    data: {
-      label: (
-        <>
-          Node <strong>B</strong>
-        </>
-      ),
-    },
-    position: { x: 100, y: 100 },
-  },
-  {
-    id: '3',
-    data: {
-      label: (
-        <>
-          Node <strong>C</strong>
-        </>
-      ),
-    },
-    position: { x: 400, y: 100 },
-    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
-  },
-  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
-];
-
-const snapGrid = [16, 16];
-
-const DragEdge = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onEdgeUpdate = (oldEdge, newConnection) => {
-    setElements((els) => updateEdge(oldEdge, newConnection, els));
-  };
-  const onConnect = (params) => setElements((els) => addEdge(params, els));
-
-  return (
-    <ReactFlow
-      elements={elements}
-      onLoad={onLoad}
-      snapToGrid={true}
-      snapGrid={snapGrid}
-      onEdgeUpdate={onEdgeUpdate}
-      onConnect={onConnect}
-    >
-      <MiniMap
-        nodeStrokeColor={(n) => {
-          if (n.style?.background) return n.style.background;
-          if (n.type === 'input') return '#0041d0';
-          if (n.type === 'output') return '#ff0072';
-          if (n.type === 'default') return '#1a192b';
-
-          return '#eee';
-        }}
-        nodeColor={(n) => {
-          if (n.style?.background) return n.style.background;
-
-          return '#fff';
-        }}
-        borderRadius={2}
-      />
-      <Controls />
-      <Background color="#aaa" gap={16} />
-    </ReactFlow>
-  );
-};
-
-export default DragEdge;

example/src/UpdatableEdge/index.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import ReactFlow, { Controls, updateEdge, addEdge } from 'react-flow-renderer';
+
+const initialElements = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: (
+        <>
+          Node <strong>A</strong>
+        </>
+      ),
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: (
+        <>
+          Node <strong>B</strong>
+        </>
+      ),
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: (
+        <>
+          Node <strong>C</strong>
+        </>
+      ),
+    },
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
+];
+
+const onLoad = (reactFlowInstance) => reactFlowInstance.fitView();
+
+const UpdatableEdge = () => {
+  const [elements, setElements] = useState(initialElements);
+  const onEdgeUpdate = (oldEdge, newConnection) => setElements((els) => updateEdge(oldEdge, newConnection, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
+
+  return (
+    <ReactFlow elements={elements} onLoad={onLoad} snapToGrid={true} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect}>
+      <Controls />
+    </ReactFlow>
+  );
+};
+
+export default UpdatableEdge;

example/src/index.js

@@ -15,7 +15,7 @@ import Hidden from './Hidden';
 import EdgeTypes from './EdgeTypes';
 import CustomConnectionLine from './CustomConnectionLine';
 import NodeTypeChange from './NodeTypeChange';
-import DraggableEdge from './DraggableEdge';
+import UpdatableEdge from './UpdatableEdge';
 
 import './index.css';
 
@@ -80,9 +80,9 @@ const routes = [
     component: NodeTypeChange,
   },
   {
-    path: '/draggable-edge',
-    component: DraggableEdge,
-    label: 'Draggable Edge',
+    path: '/updatable-edge',
+    component: UpdatableEdge,
+    label: 'Updatable Edge',
   },
 ];