feat(example): Add custom edge example

update(example): fit view on custom node example
* node selection to use hooks
* dev script to use vue-tsc

examples/CustomNode/CustomNode.vue

@@ -45,7 +45,10 @@ const CustomNodeFlow = defineComponent({
       selectorNode: ColorSelectorNode
     };
 
-    const onLoad = (revueFlowInstance: OnLoadParams) => console.log('flow loaded:', revueFlowInstance);
+    const onLoad = (revueFlowInstance: OnLoadParams) => {
+      revueFlowInstance.fitView();
+      console.log('flow loaded:', revueFlowInstance);
+    };
     const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
     const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
     const nodeStroke = (n: Node): string => {

examples/Edges/CustomEdge.tsx

@@ -0,0 +1,31 @@
+import { EdgeProps, getBezierPath, getMarkerEnd } from '../../src';
+import { FunctionalComponent } from 'vue';
+
+const CustomEdge: FunctionalComponent<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  arrowHeadType,
+  markerEndId
+}) => {
+  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+
+  return () => (
+    <>
+      <path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
+      <text>
+        <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
+          {data.text}
+        </textPath>
+      </text>
+    </>
+  );
+};
+
+export default CustomEdge;

examples/Edges/CustomEdge2.tsx

@@ -0,0 +1,44 @@
+import { FunctionalComponent } from 'vue';
+import { EdgeProps, EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
+
+const CustomEdge: FunctionalComponent<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  arrowHeadType,
+  markerEndId
+}) => {
+  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+  const [centerX, centerY] = getEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY
+  });
+
+  return () => (
+    <>
+      <path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
+      <EdgeText
+        x={centerX}
+        y={centerY}
+        label={data.text}
+        labelStyle={{ fill: 'white' }}
+        labelShowBg
+        labelBgStyle={{ fill: 'red' }}
+        labelBgPadding={[2, 4]}
+        labelBgBorderRadius={2}
+        onClick={() => console.log(data)}
+      />
+      ;
+    </>
+  );
+};
+
+export default CustomEdge;

examples/Edges/index.tsx

@@ -0,0 +1,112 @@
+import { FunctionalComponent, ref } from 'vue';
+import CustomEdge from './CustomEdge';
+import CustomEdge2 from './CustomEdge2';
+import RevueFlow, {
+  Elements,
+  FlowElement,
+  OnLoadParams,
+  ArrowHeadType,
+  Background,
+  Controls,
+  MiniMap,
+  addEdge,
+  Connection,
+  Edge,
+  EdgeProps,
+  removeElements
+} from '../../src';
+
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
+
+const initialElements = [
+  { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
+  { id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
+  { id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
+  { id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
+  { id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } },
+  { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
+  { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
+  { id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' },
+  { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
+  { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
+  { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
+  { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
+  { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: (
+      <>
+        <tspan>i am using</tspan>
+        <tspan dy={10} x={0}>
+          {'<tspan>'}
+        </tspan>
+      </>
+    ),
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    arrowHeadType: ArrowHeadType.Arrow
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    arrowHeadType: ArrowHeadType.ArrowClosed
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+    arrowHeadType: ArrowHeadType.ArrowClosed
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' }
+  }
+];
+
+const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
+  custom: CustomEdge,
+  custom2: CustomEdge2
+};
+
+const EdgesFlow = () => {
+  const elements = ref<Elements>(initialElements as Elements);
+
+  const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
+  const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
+
+  return (
+    <RevueFlow
+      v-model={elements.value}
+      onElementClick={onElementClick}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      onLoad={onLoad}
+      snapToGrid={true}
+      edgeTypes={edgeTypes}
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+    </RevueFlow>
+  );
+};
+
+export default EdgesFlow;

examples/index.css

@@ -1,10 +1,10 @@
 body {
-  font-family: sans-serif;
   color: #111;
 }
 
 #root {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

examples/router.ts

@@ -16,6 +16,10 @@ export const routes = [
   {
     path: '/drag-n-drop',
     component: () => import('./DragNDrop/DnD.vue')
+  },
+  {
+    path: '/edges',
+    component: () => import('./Edges')
   }
 ];