refactor: Change Position into enum (#48)

src/container/EdgeRenderer/index.tsx

@@ -3,15 +3,7 @@ import React, { memo, SVGAttributes } from 'react';
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
-import {
-  XYPosition,
-  Position,
-  Edge,
-  Node,
-  ElementId,
-  Transform,
-  HandleElement,
-} from '../../types';
+import { XYPosition, Position, Edge, Node, ElementId, Transform, HandleElement } from '../../types';
 
 interface EdgeRendererProps {
   width: number;
@@ -38,29 +30,25 @@ interface EdgePositions {
   targetY: number;
 }
 
-function getHandlePosition(
-  position: Position,
-  node: Node,
-  handle: any | null = null
-): XYPosition {
+function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
   if (!handle) {
     switch (position) {
-      case 'top':
+      case Position.Top:
         return {
           x: node.__rg.width / 2,
           y: 0,
         };
-      case 'right':
+      case Position.Right:
         return {
           x: node.__rg.width,
           y: node.__rg.height / 2,
         };
-      case 'bottom':
+      case Position.Bottom:
         return {
           x: node.__rg.width / 2,
           y: node.__rg.height,
         };
-      case 'left':
+      case Position.Left:
         return {
           x: 0,
           y: node.__rg.height / 2,
@@ -69,22 +57,22 @@ function getHandlePosition(
   }
 
   switch (position) {
-    case 'top':
+    case Position.Top:
       return {
         x: handle.x + handle.width / 2,
         y: handle.y,
       };
-    case 'right':
+    case Position.Right:
       return {
         x: handle.x + handle.width,
         y: handle.y + handle.height / 2,
       };
-    case 'bottom':
+    case Position.Bottom:
       return {
         x: handle.x + handle.width / 2,
         y: handle.y + handle.height,
       };
-    case 'left':
+    case Position.Left:
       return {
         x: handle.x,
         y: handle.y + handle.height / 2,
@@ -92,10 +80,7 @@ function getHandlePosition(
   }
 }
 
-function getHandle(
-  bounds: HandleElement[],
-  handleId: ElementId | null
-): HandleElement | null | undefined {
+function getHandle(bounds: HandleElement[], handleId: ElementId | null): HandleElement | null | undefined {
   let handle = null;
 
   if (!bounds) {
@@ -121,19 +106,11 @@ function getEdgePositions(
   targetHandle: HandleElement | unknown,
   targetPosition: Position
 ): EdgePositions {
-  const sourceHandlePos = getHandlePosition(
-    sourcePosition,
-    sourceNode,
-    sourceHandle
-  );
+  const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
   const sourceX = sourceNode.__rg.position.x + sourceHandlePos.x;
   const sourceY = sourceNode.__rg.position.y + sourceHandlePos.y;
 
-  const targetHandlePos = getHandlePosition(
-    targetPosition,
-    targetNode,
-    targetHandle
-  );
+  const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
   const targetX = targetNode.__rg.position.x + targetHandlePos.x;
   const targetY = targetNode.__rg.position.y + targetHandlePos.y;
 
@@ -145,11 +122,7 @@ function getEdgePositions(
   };
 }
 
-function renderEdge(
-  edge: Edge,
-  props: EdgeRendererProps,
-  state: EdgeRendererState
-) {
+function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererState) {
   const edgeType = edge.type || 'default';
 
   const hasSourceHandleId = edge.source.includes('__');
@@ -173,16 +146,10 @@ function renderEdge(
   }
 
   const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
-  const sourceHandle = getHandle(
-    sourceNode.__rg.handleBounds.source,
-    sourceHandleId
-  );
-  const targetHandle = getHandle(
-    targetNode.__rg.handleBounds.target,
-    targetHandleId
-  );
-  const sourcePosition = sourceHandle ? sourceHandle.position : 'bottom';
-  const targetPosition = targetHandle ? targetHandle.position : 'top';
+  const sourceHandle = getHandle(sourceNode.__rg.handleBounds.source, sourceHandleId);
+  const targetHandle = getHandle(targetNode.__rg.handleBounds.target, targetHandleId);
+  const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
+  const targetPosition = targetHandle ? targetHandle.position : Position.Top;
 
   const { sourceX, sourceY, targetX, targetY } = getEdgePositions(
     sourceNode,
@@ -219,61 +186,53 @@ function renderEdge(
   );
 }
 
-const EdgeRenderer = memo(
-  ({
-    width,
-    height,
-    connectionLineStyle,
-    connectionLineType,
-    ...rest
-  }: EdgeRendererProps) => {
-    const state: EdgeRendererState = useStoreState(s => ({
-      nodes: s.nodes,
-      edges: s.edges,
-      transform: s.transform,
-      selectedElements: s.selectedElements,
-      connectionSourceId: s.connectionSourceId,
-      position: s.connectionPosition,
-    }));
-    if (!width) {
-      return null;
-    }
-
-    const { transform, edges, nodes, connectionSourceId, position } = state;
-    const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
-
-    return (
-      <svg width={width} height={height} className="react-flow__edges">
-        <g transform={transformStyle}>
-          {edges.map((e: Edge) =>
-            renderEdge(
-              e,
-              {
-                width,
-                height,
-                connectionLineStyle,
-                connectionLineType,
-                ...rest,
-              },
-              state
-            )
-          )}
-          {connectionSourceId && (
-            <ConnectionLine
-              nodes={nodes}
-              connectionSourceId={connectionSourceId}
-              connectionPositionX={position.x}
-              connectionPositionY={position.y}
-              transform={transform}
-              connectionLineStyle={connectionLineStyle}
-              connectionLineType={connectionLineType}
-            />
-          )}
-        </g>
-      </svg>
-    );
+const EdgeRenderer = memo(({ width, height, connectionLineStyle, connectionLineType, ...rest }: EdgeRendererProps) => {
+  const state: EdgeRendererState = useStoreState(s => ({
+    nodes: s.nodes,
+    edges: s.edges,
+    transform: s.transform,
+    selectedElements: s.selectedElements,
+    connectionSourceId: s.connectionSourceId,
+    position: s.connectionPosition,
+  }));
+  if (!width) {
+    return null;
   }
-);
+
+  const { transform, edges, nodes, connectionSourceId, position } = state;
+  const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
+
+  return (
+    <svg width={width} height={height} className="react-flow__edges">
+      <g transform={transformStyle}>
+        {edges.map((e: Edge) =>
+          renderEdge(
+            e,
+            {
+              width,
+              height,
+              connectionLineStyle,
+              connectionLineType,
+              ...rest,
+            },
+            state
+          )
+        )}
+        {connectionSourceId && (
+          <ConnectionLine
+            nodes={nodes}
+            connectionSourceId={connectionSourceId}
+            connectionPositionX={position.x}
+            connectionPositionY={position.y}
+            transform={transform}
+            connectionLineStyle={connectionLineStyle}
+            connectionLineType={connectionLineType}
+          />
+        )}
+      </g>
+    </svg>
+  );
+});
 
 EdgeRenderer.displayName = 'EdgeRenderer';