alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Change Position into enum (#48)

Browse Source
This commit is contained in:
AndyLnd
2019-10-22 16:37:47 +02:00
committed by Moritz
parent 59caff6505
commit 8ca5c0f84b
7 changed files with 84 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Edges/BezierEdge.tsx
View File

@@ -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}`;
}

2
src/components/Handle/index.tsx
View File

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

6
src/components/Nodes/DefaultNode.tsx
View File

@@ -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>
);

4
src/components/Nodes/InputNode.tsx
View File

@@ -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>
);

4
src/components/Nodes/OutputNode.tsx
View File

@@ -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>
);

169
src/container/EdgeRenderer/index.tsx
View File

@@ -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';

7
src/types/index.ts
View File

@@ -6,7 +6,12 @@ export type Elements = Array<Node | Edge>;
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;