From 87267019b3598cc7fb083fc4f93dd4e281830ea9 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 18 Dec 2020 13:12:15 +0100
Subject: [PATCH] chore(examples): add dnd

---
 example/src/DragNDrop/Sidebar.js | 23 ++++++++++++
 example/src/DragNDrop/dnd.css    | 56 +++++++++++++++++++++++++++++
 example/src/DragNDrop/index.js   | 62 ++++++++++++++++++++++++++++++++
 example/src/index.js             |  5 +++
 4 files changed, 146 insertions(+)
 create mode 100644 example/src/DragNDrop/Sidebar.js
 create mode 100644 example/src/DragNDrop/dnd.css
 create mode 100644 example/src/DragNDrop/index.js

diff --git a/example/src/DragNDrop/Sidebar.js b/example/src/DragNDrop/Sidebar.js
new file mode 100644
index 00000000..73e51200
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/example/src/DragNDrop/dnd.css b/example/src/DragNDrop/dnd.css
new file mode 100644
index 00000000..9067f699
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/example/src/DragNDrop/index.js b/example/src/DragNDrop/index.js
new file mode 100644
index 00000000..5159c189
--- /dev/null
+++ b/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;
diff --git a/example/src/index.js b/example/src/index.js
index 15b19453..6a1011c7 100644
--- a/example/src/index.js
+++ b/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 }) => {