feat(edges): add Bezier Edge

src/EdgeRenderer/EdgeTypes/BezierEdge.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default (props) => {
+  const { targetNode, sourceNode } = props;
+  const style = props.data ? props.data.style : {};
+
+  const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
+  const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
+
+  const targetX = targetNode.__rg.position.x + (targetNode.__rg.width / 2);
+  const targetY = targetNode.__rg.position.y;
+
+  const yOffset = Math.abs(targetY - sourceY) / 2;
+  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+  const dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+
+  return (
+    <path
+      {...style}
+      d={dAttr}
+    />
+  );
+};

src/EdgeRenderer/EdgeTypes/DefaultEdge.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 export default (props) => {
   const { targetNode, sourceNode } = props;
+  const style = props.data ? props.data.style : {};
 
   const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
   const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
@@ -11,6 +12,7 @@ export default (props) => {
 
   return (
     <path
+      {...style}
       d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
     />
   );

src/EdgeRenderer/utils.js

@@ -1,14 +1,16 @@
 import DefaultEdge from './EdgeTypes/DefaultEdge';
+import BezierEdge from './EdgeTypes/BezierEdge';
 import wrapEdge from './EdgeTypes/wrapEdge';
 
 export function createEdgeTypes(edgeTypes) {
   const standardTypes = {
     default: wrapEdge(edgeTypes.default || DefaultEdge),
+    bezier: wrapEdge(edgeTypes.bezier || BezierEdge)
   };
 
   const specialTypes = Object
     .keys(DefaultEdge)
-    .filter(k => !['default'].includes(k))
+    .filter(k => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
       res[key] = wrapEdge(nodeTypes[key] || DefaultEdge);
 

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -33,25 +33,25 @@ export default NodeComponent => memo((props) => {
       return false;
     }
 
-    const scaledClientX = {
+    const scaledClient = {
       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 offsetX = scaledClient.x - position.x - x;
+    const offsetY = scaledClient.y - position.y - y;
 
     setOffset({ x: offsetX, y: offsetY });
   };
 
   const onDrag = (evt) => {
-    const scaledClientX = {
+    const scaledClient = {
       x: evt.clientX * (1 / k),
       y: evt.clientY * (1 / k)
     };
 
     dispatch(updateNodePos(id, {
-      x: scaledClientX.x - x - offset.x,
-      y: scaledClientX.y - y - offset.y
+      x: scaledClient.x - x - offset.x,
+      y: scaledClient.y - y - offset.y
     }));
   };
 

src/NodesSelection/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, memo } from 'react';
+import React, { useContext, useState, useCallback, memo } from 'react';
 import ReactDraggable from 'react-draggable';
 
 import { GraphContext } from '../GraphContext';
@@ -29,12 +29,12 @@ export default memo(() => {
   const position = state.selectedNodesBbox;
 
   const onStart = (evt) => {
-    const scaledClientX = {
+    const scaledClient = {
       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 offsetX = scaledClient.x - position.x - x;
+    const offsetY = scaledClient.y - position.y - y;
     const startPositions = getStartPositions(state.selectedElements);
 
     setOffset({ x: offsetX, y: offsetY });
@@ -42,15 +42,15 @@ export default memo(() => {
   };
 
   const onDrag = (evt) => {
-    const scaledClientX = {
+    const scaledClient = {
       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
+        x: startPositions[node.data.id].x + scaledClient.x - position.x - offset.x - x ,
+        y: startPositions[node.data.id].y + scaledClient.y - position.y - offset.y - y
       }));
     });
   };