feat(useZoomPanHelper): add project function #910

2021-02-17 21:27:05 +01:00
parent fb5d57f97e
commit 5ca8184eb8
4 changed files with 73 additions and 2 deletions
@@ -0,0 +1,60 @@
+import React, { useState, useCallback } from 'react';
+
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  Background,
+  MiniMap,
+  useZoomPanHelper,
+  ReactFlowProvider,
+} from 'react-flow-renderer';
+
+const initialElements = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+let id = 5;
+const getId = () => `${id++}`;
+
+const UseZoomPanHelperFlow = () => {
+  const [elements, setElements] = useState(initialElements);
+  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const { project } = useZoomPanHelper();
+
+  const onPaneClick = useCallback(
+    (evt) => {
+      const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 });
+
+      setElements((els) =>
+        els.concat({
+          id: getId(),
+          position: projectedPosition,
+          data: {
+            label: `${projectedPosition.x}-${projectedPosition.y}`,
+          },
+        })
+      );
+    },
+    [project]
+  );
+  console.log(elements);
+
+  return (
+    <ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect} onPaneClick={onPaneClick}>
+      <Background />
+      <MiniMap />
+    </ReactFlow>
+  );
+};
+
+export default () => (
+  <ReactFlowProvider>
+    <UseZoomPanHelperFlow />
+  </ReactFlowProvider>
+);