feat(selection): draggable

xyflow · Jul 25, 2019 · 562eddf · 562eddf
1 parent 71c357d
commit 562eddf
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 27 deletions.
diff --git a/.postcssrc b/.postcssrc
@@ -0,0 +1,6 @@
+{
+  plugins: {
+    "postcss-nested": {},
+    "autoprefixer": {}
+  }
+}
diff --git a/example/index.html b/example/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <!-- <link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css"> -->
+  <link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css">
   <title>Document</title>
   <style>
     html, body {

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,8 +2,6 @@ import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import postcss from 'rollup-plugin-postcss';
-import postCssNested from 'postcss-nested';
-import autoprefixer from 'autoprefixer';
 import bundleSize from 'rollup-plugin-bundle-size';
 
 import pkg from './package.json';
@@ -28,12 +26,7 @@ export default [{
 		},
 		plugins: [
 			bundleSize(),
-			postcss({
-				plugins: [
-					postCssNested(),
-					autoprefixer()
-				]
-			}),
+			postcss(),
 			resolve(),
 			babel({
 				exclude: 'node_modules/**'

diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js
@@ -36,17 +36,17 @@ export default NodeComponent => (props) => {
           return false;
         }
 
-        const unscaledPos = {
+        const scaledClientX = {
           x: e.clientX * (1 / k),
           y: e.clientY * (1 / k)
         }
-        const offsetX = unscaledPos.x - position.x - x;
-        const offsetY = unscaledPos.y - position.y - y;
+        const offsetX = scaledClientX.x - position.x - x;
+        const offsetY = scaledClientX.y - position.y - y;
 
         setOffset({ x: offsetX, y: offsetY });
       }}
-      onDrag={(e, d) => {
-        const unscaledPos = {
+      onDrag={(e) => {
+        const scaledClientX = {
           x: e.clientX * (1 / k),
           y: e.clientY * (1 / k)
         }
@@ -55,8 +55,8 @@ export default NodeComponent => (props) => {
         e.stopPropagation();
 
         dispatch(updateNodePos(id, {
-          x: unscaledPos.x - x - offset.x,
-          y: unscaledPos.y - y - offset.y
+          x: scaledClientX.x - x - offset.x,
+          y: scaledClientX.y - y - offset.y
         }));
       }}
       scale={k}

diff --git a/src/NodesSelection/index.js b/src/NodesSelection/index.js
@@ -1,10 +1,59 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
+import ReactDraggable from 'react-draggable';
 
 import { GraphContext } from '../GraphContext';
+import { isNode } from '../graph-utils';
+import {  updateNodePos } from '../state/actions';
+
+function getStartPositions(elements) {
+  return elements
+    .filter(isNode)
+    .reduce((res, node) => {
+      const startPosition = {
+        x: node.__rg.position.x || node.position.x,
+        y: node.__rg.position.y || node.position.x
+      };
+
+      res[node.data.id] = startPosition;
+
+      return res;
+  }, {});
+}
 
 export default () => {
   const graphContext = useContext(GraphContext);
-  const { state } = graphContext;
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [startPositions, setStartPositions] = useState({});
+  const { state, dispatch } = graphContext;
+  const [x, y, k] = state.transform;
+  const position = state.selectedNodesBbox;
+
+  const onStart = (evt) => {
+    const scaledClientX = {
+      x: evt.clientX * (1 / k),
+      y: evt.clientY * (1 / k)
+    };
+    const offsetX = scaledClientX.x - position.x - x;
+    const offsetY = scaledClientX.y - position.y - y;
+    const startPositions = getStartPositions(state.selectedElements);
+
+    setOffset({ x: offsetX, y: offsetY });
+    setStartPositions(startPositions);
+  };
+
+  const onDrag = (evt) => {
+    const scaledClientX = {
+      x: evt.clientX * (1 / k),
+      y: evt.clientY * (1 / k)
+    };
+
+    state.selectedElements.filter(isNode).forEach(node => {
+      dispatch(updateNodePos(node.data.id, {
+        x: startPositions[node.data.id].x + scaledClientX.x - position.x - offset.x - x ,
+        y: startPositions[node.data.id].y + scaledClientX.y - position.y - offset.y - y
+      }));
+    });
+  }
 
   return (
     <div
@@ -13,15 +62,21 @@ export default () => {
         transform: `translate(${state.transform[0]}px,${state.transform[1]}px) scale(${state.transform[2]})`
       }}
     >
-      <div
-        className="react-graph__nodesselection-rect"
-        style={{
-          width: state.selectedNodesBbox.width,
-          height: state.selectedNodesBbox.height,
-          top: state.selectedNodesBbox.y,
-          left: state.selectedNodesBbox.x
-        }}
-      />
+      <ReactDraggable
+        scale={k}
+        onStart={onStart}
+        onDrag={onDrag}
+      >
+        <div
+          className="react-graph__nodesselection-rect"
+          style={{
+            width: state.selectedNodesBbox.width,
+            height: state.selectedNodesBbox.height,
+            top: state.selectedNodesBbox.y,
+            left: state.selectedNodesBbox.x
+          }}
+        />
+      </ReactDraggable>
     </div>
   );
 };
diff --git a/src/graph-utils.js b/src/graph-utils.js
@@ -1,4 +1,5 @@
 export const isEdge = element => element.data && element.data.source && element.data.target;
+export const isNode = element => element.data && !element.data.source && !element.data.target;
 
 export const parseElements = e => {
   if (isEdge(e)) {

diff --git a/src/style.css b/src/style.css
@@ -109,5 +109,6 @@
     position: absolute;
     background: rgba(0, 89, 220, 0.08);
     border: 1px dotted rgba(0, 89, 220, 0.8);
+    pointer-events: all;
   }
 }