feat(selection): draggable

.postcssrc

@@ -0,0 +1,6 @@
+{
+  plugins: {
+    "postcss-nested": {},
+    "autoprefixer": {}
+  }
+}

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 {

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({
+			postcss(),
-				plugins: [
-					postCssNested(),
-					autoprefixer()
-				]
-			}),
 			resolve(),
 			babel({
 				exclude: 'node_modules/**'

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 offsetX = scaledClientX.x - position.x - x;
-        const offsetY = unscaledPos.y - position.y - y;
+        const offsetY = scaledClientX.y - position.y - y;
 
         setOffset({ x: offsetX, y: offsetY });
       }}
-      onDrag={(e, d) => {
+      onDrag={(e) => {
-        const unscaledPos = {
+        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,
+          x: scaledClientX.x - x - offset.x,
-          y: unscaledPos.y - y - offset.y
+          y: scaledClientX.y - y - offset.y
         }));
       }}
       scale={k}

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
+      <ReactDraggable
-        className="react-graph__nodesselection-rect"
+        scale={k}
-        style={{
+        onStart={onStart}
-          width: state.selectedNodesBbox.width,
+        onDrag={onDrag}
-          height: state.selectedNodesBbox.height,
+      >
-          top: state.selectedNodesBbox.y,
+        <div
-          left: state.selectedNodesBbox.x
+          className="react-graph__nodesselection-rect"
-        }}
+          style={{
-      />
+            width: state.selectedNodesBbox.width,
+            height: state.selectedNodesBbox.height,
+            top: state.selectedNodesBbox.y,
+            left: state.selectedNodesBbox.x
+          }}
+        />
+      </ReactDraggable>
     </div>
   );
 };

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)) {

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;
   }
 }