diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx
index 11d5f8d3..d7636d4f 100644
--- a/src/components/Edges/BezierEdge.tsx
+++ b/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}`;
}
diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx
index 47f41e29..f7c2b9ca 100644
--- a/src/components/Handle/index.tsx
+++ b/src/components/Handle/index.tsx
@@ -23,7 +23,7 @@ const Handle = memo(
({
onConnect = _ => {},
type = 'source',
- position = 'top',
+ position = Position.Top,
isValidConnection = () => true,
...rest
}: HandleProps) => {
diff --git a/src/components/Nodes/DefaultNode.tsx b/src/components/Nodes/DefaultNode.tsx
index 5e96a0e3..7bf911ae 100644
--- a/src/components/Nodes/DefaultNode.tsx
+++ b/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) => (
-
+
{data.label}
-
+
);
diff --git a/src/components/Nodes/InputNode.tsx b/src/components/Nodes/InputNode.tsx
index 59f815a0..5b42e7af 100644
--- a/src/components/Nodes/InputNode.tsx
+++ b/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) => (
{data.label}
-
+
);
diff --git a/src/components/Nodes/OutputNode.tsx b/src/components/Nodes/OutputNode.tsx
index e2dc8cc9..1ecf5f72 100644
--- a/src/components/Nodes/OutputNode.tsx
+++ b/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) => (
-
+
{data.label}
);
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index 97d92cec..b0afa378 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/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 (
-
- );
+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 (
+
+ );
+});
EdgeRenderer.displayName = 'EdgeRenderer';
diff --git a/src/types/index.ts b/src/types/index.ts
index b126093d..bf1f6ad0 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -6,7 +6,12 @@ export type Elements = Array;
export type Transform = [number, number, number];
-export type Position = 'left' | 'top' | 'right' | 'bottom';
+export enum Position {
+ Left = 'left',
+ Top = 'top',
+ Right = 'right',
+ Bottom = 'bottom',
+}
export type XYPosition = {
x: number;