feat(example): Add edge types example (stress tests)

* Remove a lot of computed functions or merge them into existing ones
*

examples/EdgeTypes/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * Example for checking the different edge types and source and target positions
+ */
+import RevueFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  OnLoadParams,
+  Connection,
+  Edge,
+  Elements
+} from '../../src';
+import { getElements } from './utils';
+import { defineComponent, ref } from 'vue';
+
+const onLoad = (reactFlowInstance: OnLoadParams) => {
+  reactFlowInstance.fitView();
+  console.log(reactFlowInstance.getElements());
+};
+
+const initialElements = getElements();
+
+const EdgeTypesFlow = defineComponent({
+  setup() {
+    const elements = ref<Elements>(initialElements);
+    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}
+        onLoad={onLoad}
+        onElementsRemove={onElementsRemove}
+        onConnect={onConnect}
+        minZoom={0.2}
+      ></RevueFlow>
+    );
+  }
+});
+
+export default EdgeTypesFlow;

examples/EdgeTypes/utils.ts

@@ -0,0 +1,106 @@
+import { ElementId, Elements, Position } from '../../src';
+
+const nodeWidth = 80;
+const nodeGapWidth = nodeWidth * 2;
+const nodeStyle = { width: nodeWidth, fontSize: 11, color: 'white' };
+
+const sourceTargetPositions = [
+  { source: Position.Bottom, target: Position.Top },
+  { source: Position.Right, target: Position.Left }
+];
+const nodeColors = [
+  ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
+  ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8']
+];
+const edgeTypes = ['default', 'step', 'smoothstep', 'straight'];
+const offsets = [
+  {
+    x: 0,
+    y: -nodeGapWidth
+  },
+  {
+    x: nodeGapWidth,
+    y: -nodeGapWidth
+  },
+  {
+    x: nodeGapWidth,
+    y: 0
+  },
+  {
+    x: nodeGapWidth,
+    y: nodeGapWidth
+  },
+  {
+    x: 0,
+    y: nodeGapWidth
+  },
+  {
+    x: -nodeGapWidth,
+    y: nodeGapWidth
+  },
+  {
+    x: -nodeGapWidth,
+    y: 0
+  },
+  {
+    x: -nodeGapWidth,
+    y: -nodeGapWidth
+  }
+];
+
+let id = 0;
+const getNodeId = (): ElementId => (id++).toString();
+
+export function getElements(): Elements {
+  const initialElements = [];
+
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
+    const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
+
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
+      const currEdgeType = edgeTypes[edgeTypeIndex];
+
+      for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
+        const currOffset = offsets[offsetIndex];
+
+        const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] };
+        const sourcePosition = {
+          x: offsetIndex * nodeWidth * 4,
+          y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300
+        };
+        const sourceId = getNodeId();
+        const sourceData = { label: `Source ${sourceId}` };
+        const sourceNode = {
+          id: sourceId,
+          style,
+          data: sourceData,
+          position: sourcePosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target
+        };
+
+        const targetId = getNodeId();
+        const targetData = { label: `Target ${targetId}` };
+        const targetPosition = {
+          x: sourcePosition.x + currOffset.x,
+          y: sourcePosition.y + currOffset.y
+        };
+        const targetNode = {
+          id: targetId,
+          style,
+          data: targetData,
+          position: targetPosition,
+          sourcePosition: currSourceTargetPos.source,
+          targetPosition: currSourceTargetPos.target
+        };
+
+        initialElements.push(sourceNode);
+        initialElements.push(targetNode);
+
+        initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType });
+      }
+    }
+  }
+
+  return initialElements as Elements;
+}