refactor(examples): switch examples from cra to nextjs

examples/nextjs/pages/Layouting/index.tsx

@@ -0,0 +1,117 @@
+import React, { useCallback } from 'react';
+import ReactFlow, {
+  ReactFlowProvider,
+  addEdge,
+  Controls,
+  Connection,
+  CoordinateExtent,
+  Position,
+  useNodesState,
+  useEdgesState,
+  MarkerType,
+  EdgeMarker,
+} from '@react-flow/core';
+import dagre from 'dagre';
+
+import initialItems from './initial-elements';
+
+import styles from './layouting.module.css';
+
+const dagreGraph = new dagre.graphlib.Graph();
+dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+const nodeExtent: CoordinateExtent = [
+  [0, 0],
+  [1000, 1000],
+];
+
+const LayoutFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges);
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) => addEdge(connection, eds));
+    },
+    [setEdges]
+  );
+
+  const onLayout = (direction: string) => {
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({ rankdir: direction });
+
+    nodes.forEach((node) => {
+      dagreGraph.setNode(node.id, { width: 150, height: 50 });
+    });
+
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target);
+    });
+
+    dagre.layout(dagreGraph);
+
+    const layoutedNodes = nodes.map((node) => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+      node.targetPosition = isHorizontal ? Position.Left : Position.Top;
+      node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+      // we need to pass a slightly different position in order to notify react flow about the change
+      // @TODO how can we change the position handling so that we dont need this hack?
+      node.position = {
+        x: nodeWithPosition.x + Math.random() / 1000,
+        y: nodeWithPosition.y,
+      };
+
+      return node;
+    });
+
+    setNodes(layoutedNodes);
+  };
+
+  const unselect = () => {
+    setNodes((nds) => nds.map((n) => ({ ...n, selected: false })));
+  };
+
+  const changeMarker = () => {
+    setEdges((eds) =>
+      eds.map((e) => ({
+        ...e,
+        markerEnd: {
+          type:
+            (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow
+              ? MarkerType.ArrowClosed
+              : MarkerType.Arrow,
+        },
+      }))
+    );
+  };
+
+  return (
+    <div className={styles.layoutflow}>
+      <ReactFlowProvider>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onConnect={onConnect}
+          nodeExtent={nodeExtent}
+          onInit={() => onLayout('TB')}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+        >
+          <Controls />
+        </ReactFlow>
+        <div className={styles.controls}>
+          <button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
+            vertical layout
+          </button>
+          <button onClick={() => onLayout('LR')} style={{ marginRight: 10 }}>
+            horizontal layout
+          </button>
+          <button onClick={() => unselect()}>unselect nodes</button>
+          <button onClick={() => changeMarker()}>change marker</button>
+        </div>
+      </ReactFlowProvider>
+    </div>
+  );
+};
+
+export default LayoutFlow;

examples/nextjs/pages/Layouting/initial-elements.ts

@@ -0,0 +1,135 @@
+import { Node, Edge, XYPosition, MarkerType } from '@react-flow/core';
+
+const position: XYPosition = { x: 0, y: 0 };
+
+const nodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'input' },
+    position,
+  },
+  {
+    id: '2',
+    data: { label: 'node 2' },
+    position,
+  },
+  {
+    id: '2a',
+    data: { label: 'node 2a' },
+    position,
+  },
+  {
+    id: '2b',
+    data: { label: 'node 2b' },
+    position,
+  },
+  {
+    id: '2c',
+    data: { label: 'node 2c' },
+    position,
+  },
+  {
+    id: '2d',
+    data: { label: 'node 2d' },
+    position,
+  },
+  {
+    id: '3',
+    data: { label: 'node 3' },
+    position,
+  },
+  {
+    id: '4',
+    data: { label: 'node 4' },
+    position,
+  },
+  {
+    id: '5',
+    data: { label: 'node 5' },
+    position,
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: { label: 'output' },
+    position,
+  },
+  {
+    id: '7',
+    type: 'output',
+    data: { label: 'output' },
+    position: { x: 400, y: 450 },
+  },
+];
+
+const edges: Edge[] = [
+  {
+    id: 'e12',
+    source: '1',
+    target: '2',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+  {
+    id: 'e13',
+    source: '1',
+    target: '3',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+  {
+    id: 'e22a',
+    source: '2',
+    target: '2a',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+  {
+    id: 'e22b',
+    source: '2',
+    target: '2b',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+  {
+    id: 'e22c',
+    source: '2',
+    target: '2c',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+  {
+    id: 'e2c2d',
+    source: '2c',
+    target: '2d',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+
+  {
+    id: 'e45',
+    source: '4',
+    target: '5',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+  {
+    id: 'e56',
+    source: '5',
+    target: '6',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+  {
+    id: 'e57',
+    source: '5',
+    target: '7',
+    type: 'smoothstep',
+    markerEnd: { type: MarkerType.Arrow },
+  },
+];
+
+const nodesAndEdges = { nodes, edges };
+
+export default nodesAndEdges;

examples/nextjs/pages/Layouting/layouting.module.css

@@ -0,0 +1,11 @@
+.layoutflow {
+  flex-grow: 1;
+  position: relative;
+}
+
+.controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 10;
+}