refactor(app): folder structure, components cleanup

src/components/Edges/BezierEdge.js

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+
+export default memo(({
+  sourceX, sourceY, targetX, targetY,
+  sourcePosition, targetPosition, style = {}
+}) => {
+  const yOffset = Math.abs(targetY - sourceY) / 2;
+  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+
+  let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
+
+  if (['left', 'right'].includes(sourcePosition) && ['left', 'right'].includes(targetPosition)) {
+    const xOffset = Math.abs(targetX - sourceX) / 2;
+    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+
+    dAttr = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
+  } else if (['left', 'right'].includes(sourcePosition) || ['left', 'right'].includes(targetPosition)) {
+    dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
+  }
+
+  return (
+    <path
+      {...style}
+      d={dAttr}
+    />
+  );
+});

src/components/Edges/StepEdge.js

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+export default memo((props) => {
+  const {
+    sourceX, sourceY, targetX, targetY, style = {}
+  } = props;
+
+  const yOffset = Math.abs(targetY - sourceY) / 2;
+  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+
+  return (
+    <path
+      {...style}
+      d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
+    />
+  );
+});

src/components/Edges/StraightEdge.js

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+
+export default memo((props) => {
+  const {
+    sourceX, sourceY, targetX, targetY, style = {}
+  } = props;
+
+  return (
+    <path
+      {...style}
+      d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
+    />
+  );
+});

src/components/Edges/wrapEdge.js

@@ -0,0 +1,37 @@
+import React, {  memo } from 'react';
+import cx from 'classnames';
+
+import { isInputNode } from '../../utils';
+import store from '../../store';
+
+export default EdgeComponent => {
+  const EdgeWrapper = memo((props) => {
+    const {
+      id, source, target, type,
+      animated, selected, onClick
+    } = props;
+    const edgeClasses = cx('react-graph__edge', { selected, animated });
+    const onEdgeClick = (evt) => {
+      if (isInputNode(evt)) {
+        return false;
+      }
+
+      store.dispatch.setSelectedElements({ id, source, target });
+      onClick({ id, source, target, type });
+    };
+
+    return (
+      <g
+        className={edgeClasses}
+        onClick={onEdgeClick}
+      >
+        <EdgeComponent {...props} />
+      </g>
+    );
+  });
+
+  EdgeWrapper.displayName = 'EdgeWrapper';
+  EdgeWrapper.whyDidYouRender = false;
+
+  return EdgeWrapper;
+};