refactor: Change Position into enum (#48)

src/components/Edges/BezierEdge.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { EdgeBezierProps } from '../../types';
+import { EdgeBezierProps, Position } from '../../types';
 
 export default memo(
   ({
@@ -8,8 +8,8 @@ export default memo(
     sourceY,
     targetX,
     targetY,
-    sourcePosition = 'bottom',
-    targetPosition = 'top',
+    sourcePosition = Position.Bottom,
+    targetPosition = Position.Top,
     style = {},
   }: EdgeBezierProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
@@ -17,18 +17,13 @@ export default memo(
 
     let dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
 
-    if (
-      ['left', 'right'].includes(sourcePosition) &&
-      ['left', 'right'].includes(targetPosition)
-    ) {
+    const leftAndRight = [Position.Left, Position.Right];
+    if (leftAndRight.includes(sourcePosition) && leftAndRight.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)
-    ) {
+    } else if (leftAndRight.includes(sourcePosition) || leftAndRight.includes(targetPosition)) {
       dAttr = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
     }
 

src/components/Handle/index.tsx

@@ -23,7 +23,7 @@ const Handle = memo(
   ({
     onConnect = _ => {},
     type = 'source',
-    position = 'top',
+    position = Position.Top,
     isValidConnection = () => true,
     ...rest
   }: HandleProps) => {

src/components/Nodes/DefaultNode.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 
 import Handle from '../../components/Handle';
-import { NodeProps } from '../../types';
+import { NodeProps, Position } from '../../types';
 
 const nodeStyles: CSSProperties = {
   background: '#ff6060',
@@ -12,8 +12,8 @@ const nodeStyles: CSSProperties = {
 
 export default ({ data, style }: NodeProps) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle type="target" position="top" />
+    <Handle type="target" position={Position.Top} />
     {data.label}
-    <Handle type="source" position="bottom" />
+    <Handle type="source" position={Position.Bottom} />
   </div>
 );

src/components/Nodes/InputNode.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 
 import Handle from '../../components/Handle';
-import { NodeProps } from '../../types';
+import { NodeProps, Position } from '../../types';
 
 const nodeStyles: CSSProperties = {
   background: '#9999ff',
@@ -13,6 +13,6 @@ const nodeStyles: CSSProperties = {
 export default ({ data, style }: NodeProps) => (
   <div style={{ ...nodeStyles, ...style }}>
     {data.label}
-    <Handle type="source" position="bottom" />
+    <Handle type="source" position={Position.Bottom} />
   </div>
 );

src/components/Nodes/OutputNode.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 
 import Handle from '../../components/Handle';
-import { NodeProps } from '../../types';
+import { NodeProps, Position } from '../../types';
 
 const nodeStyles: CSSProperties = {
   background: '#55dd99',
@@ -12,7 +12,7 @@ const nodeStyles: CSSProperties = {
 
 export default ({ data, style }: NodeProps) => (
   <div style={{ ...nodeStyles, ...style }}>
-    <Handle type="target" position="top" />
+    <Handle type="target" position={Position.Top} />
     {data.label}
   </div>
 );