refactor(examples): hide old api examples

example/src/EdgeTypes/index.tsx

@@ -1,54 +0,0 @@
-/**
- * Example for checking the different edge types and source and target positions
- */
-import React, { useState } from 'react';
-
-import ReactFlow, {
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  OnLoadParams,
-  Connection,
-  Edge,
-  Elements,
-} from 'react-flow-renderer';
-import { getElements } from './utils';
-
-const onLoad = (reactFlowInstance: OnLoadParams) => {
-  reactFlowInstance.fitView();
-  console.log(reactFlowInstance.getElements());
-};
-
-const initialElements = getElements();
-
-const multiSelectionKeyCode = ['ShiftLeft', 'ShiftRight'];
-const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];
-
-const EdgeTypesFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-
-  return (
-    <ReactFlow
-      elements={elements}
-      onLoad={onLoad}
-      onElementsRemove={onElementsRemove}
-      onConnect={onConnect}
-      minZoom={0.2}
-      zoomOnScroll={false}
-      selectionKeyCode="a+s"
-      multiSelectionKeyCode={multiSelectionKeyCode}
-      deleteKeyCode={deleteKeyCode}
-      zoomActivationKeyCode="z"
-    >
-      <MiniMap />
-      <Controls />
-      <Background />
-    </ReactFlow>
-  );
-};
-
-export default EdgeTypesFlow;

example/src/EdgeTypes/utils.ts

@@ -1,106 +0,0 @@
-import { ElementId, Elements, Position } from 'react-flow-renderer';
-
-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;
-}