chore(examples): add dnd

example/src/DragNDrop/Sidebar.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default () => {
+  const onDragStart = (event, nodeType) => {
+    event.dataTransfer.setData('application/reactflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  return (
+    <aside>
+      <div className="description">You can drag these nodes to the pane on the right.</div>
+      <div className="dndnode input" onDragStart={(event) => onDragStart(event, 'input')} draggable>
+        Input Node
+      </div>
+      <div className="dndnode" onDragStart={(event) => onDragStart(event, 'default')} draggable>
+        Default Node
+      </div>
+      <div className="dndnode output" onDragStart={(event) => onDragStart(event, 'output')} draggable>
+        Output Node
+      </div>
+    </aside>
+  );
+};

example/src/DragNDrop/dnd.css

@@ -0,0 +1,56 @@
+.dndflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.dndflow aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.dndflow aside .description {
+  margin-bottom: 10px;
+}
+
+.dndflow .dndnode {
+  height: 20px;
+  padding: 4px;
+  border: 1px solid #1a192b;
+  border-radius: 2px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: grab;
+}
+
+.dndflow .dndnode.input {
+  border-color: #0041d0;
+}
+
+.dndflow .dndnode.output {
+  border-color: #ff0072;
+}
+
+.dndflow .reactflow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+.dndflow .selectall {
+  margin-top: 10px;
+}
+
+@media screen and (min-width: 768px) {
+  .dndflow {
+    flex-direction: row;
+  }
+
+  .dndflow aside {
+    width: 20%;
+    max-width: 250px;
+  }
+}

example/src/DragNDrop/index.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls } from 'react-flow-renderer';
+
+import Sidebar from './Sidebar';
+
+import './dnd.css';
+
+const initialElements = [{ id: '1', type: 'input', data: { label: 'input node' }, position: { x: 250, y: 5 } }];
+
+let id = 0;
+const getId = () => `dndnode_${id++}`;
+
+const DnDFlow = () => {
+  const [reactFlowInstance, setReactFlowInstance] = useState(null);
+  const [elements, setElements] = useState(initialElements);
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
+
+  const onLoad = (_reactFlowInstance) => setReactFlowInstance(_reactFlowInstance);
+
+  const onDragOver = (event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  };
+
+  const onDrop = (event) => {
+    event.preventDefault();
+
+    const type = event.dataTransfer.getData('application/reactflow');
+    const position = reactFlowInstance.project({ x: event.clientX, y: event.clientY - 40 });
+    const newNode = {
+      id: getId(),
+      type,
+      position,
+      data: { label: `${type} node` },
+    };
+
+    setElements((es) => es.concat(newNode));
+  };
+
+  return (
+    <div className="dndflow">
+      <ReactFlowProvider>
+        <div className="reactflow-wrapper">
+          <ReactFlow
+            elements={elements}
+            onConnect={onConnect}
+            onElementsRemove={onElementsRemove}
+            onLoad={onLoad}
+            onDrop={onDrop}
+            onDragOver={onDragOver}
+          >
+            <Controls />
+          </ReactFlow>
+        </div>
+        <Sidebar />
+      </ReactFlowProvider>
+    </div>
+  );
+};
+
+export default DnDFlow;

example/src/index.js

@@ -18,6 +18,7 @@ import NodeTypeChange from './NodeTypeChange';
 import UpdatableEdge from './UpdatableEdge';
 import UpdateNode from './UpdateNode';
 import SaveRestore from './SaveRestore';
+import DragNDrop from './DragNDrop';
 
 import './index.css';
 
@@ -86,6 +87,10 @@ const routes = [
     path: '/save-restore',
     component: SaveRestore,
   },
+  {
+    path: '/drag-and-drop',
+    component: DragNDrop,
+  },
 ];
 
 const Header = withRouter(({ history, location }) => {