From 0f480444f2433926c67dc7bb77ec1f1673230859 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Wed, 24 Nov 2021 12:02:09 +0100 Subject: [PATCH] chore(markers): cleanup marker api --- example/src/Basic/index.tsx | 8 ++- example/src/FloatingEdges/utils.ts | 2 +- src/components/Edges/utils.ts | 6 +-- .../EdgeRenderer/MarkerDefinitions.tsx | 44 +++------------- src/container/EdgeRenderer/MarkerSymbols.tsx | 51 +++++++++++++++++++ src/types/edges.ts | 6 +-- 6 files changed, 71 insertions(+), 46 deletions(-) create mode 100644 src/container/EdgeRenderer/MarkerSymbols.tsx diff --git a/example/src/Basic/index.tsx b/example/src/Basic/index.tsx index 2335443f..c5e44eab 100644 --- a/example/src/Basic/index.tsx +++ b/example/src/Basic/index.tsx @@ -13,6 +13,7 @@ import ReactFlow, { EdgeChange, OnLoadParams, Connection, + MarkerType, } from 'react-flow-renderer'; import DebugNode from './DebugNode'; @@ -86,7 +87,12 @@ const initialNodes: Node[] = [ ]; const initialEdges: Edge[] = [ - { id: 'e1-2', source: '1', target: '2', animated: true }, + { + id: 'e1-2', + source: '1', + target: '2', + markerEnd: { type: MarkerType.Arrow, strokeWidth: 2, width: 15, height: 15, color: '#f00' }, + }, { id: 'e1-3', source: '1', target: '3' }, { id: 'e3-4', source: '3', target: '4', zIndex: 100 }, { id: 'e3-4b', source: '3', target: '4b' }, diff --git a/example/src/FloatingEdges/utils.ts b/example/src/FloatingEdges/utils.ts index eb8797d2..faeec83f 100644 --- a/example/src/FloatingEdges/utils.ts +++ b/example/src/FloatingEdges/utils.ts @@ -1,4 +1,4 @@ -import { Position, ArrowHeadType, XYPosition, Node, Edge } from 'react-flow-renderer'; +import { Position, XYPosition, Node, Edge } from 'react-flow-renderer'; // this helper function returns the intersection point // of the line between the center of the intersectionNode and the target node diff --git a/src/components/Edges/utils.ts b/src/components/Edges/utils.ts index 912fd58f..eb4f5127 100644 --- a/src/components/Edges/utils.ts +++ b/src/components/Edges/utils.ts @@ -1,11 +1,11 @@ -import { ArrowHeadType, Position } from '../../types'; +import { MarkerType, Position } from '../../types'; -export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => { +export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => { if (typeof markerEndId !== 'undefined' && markerEndId) { return `url(#${markerEndId})`; } - return typeof arrowHeadType !== 'undefined' ? `url(#react-flow__${arrowHeadType})` : 'none'; + return typeof markerType !== 'undefined' ? `url(#react-flow__${markerType})` : 'none'; }; export interface GetCenterParams { diff --git a/src/container/EdgeRenderer/MarkerDefinitions.tsx b/src/container/EdgeRenderer/MarkerDefinitions.tsx index 2cdf6203..dcae27bf 100644 --- a/src/container/EdgeRenderer/MarkerDefinitions.tsx +++ b/src/container/EdgeRenderer/MarkerDefinitions.tsx @@ -1,8 +1,9 @@ import React, { useMemo } from 'react'; import { useStore } from '../../store'; -import { EdgeMarker, ArrowHeadType, ReactFlowState } from '../../types'; +import { EdgeMarker, ReactFlowState } from '../../types'; import { getMarkerId } from '../../utils/graph'; +import { useMarkerSymbol } from './MarkerSymbols'; interface MarkerProps extends EdgeMarker { id: string; } @@ -10,59 +11,26 @@ interface MarkerDefinitionsProps { defaultColor: string; } -type SymbolProps = Omit; - -const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => { - return ( - - ); -}; - -const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => { - return ( - - ); -}; - -const markerSymbols = { - [ArrowHeadType.Arrow]: ArrowSymbol, - [ArrowHeadType.ArrowClosed]: ArrowClosedSymbol, -}; - const Marker = ({ id, type, color, width = 12.5, height = 12.5, - units = 'strokeWidth', + markerUnits = 'strokeWidth', strokeWidth, orient = 'auto', }: MarkerProps) => { - const Symbol = markerSymbols[type]; + const Symbol = useMarkerSymbol(type); return ( { color={marker.color} width={marker.width} height={marker.height} - units={marker.units} + markerUnits={marker.markerUnits} strokeWidth={marker.strokeWidth} orient={marker.orient} /> diff --git a/src/container/EdgeRenderer/MarkerSymbols.tsx b/src/container/EdgeRenderer/MarkerSymbols.tsx new file mode 100644 index 00000000..b9f47a81 --- /dev/null +++ b/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -0,0 +1,51 @@ +import React, { useMemo } from 'react'; +import { MarkerType, EdgeMarker } from '../../types'; + +type SymbolProps = Omit; + +const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => { + return ( + + ); +}; + +const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => { + return ( + + ); +}; + +export const MarkerSymbols = { + [MarkerType.Arrow]: ArrowSymbol, + [MarkerType.ArrowClosed]: ArrowClosedSymbol, +}; + +export function useMarkerSymbol(type: MarkerType) { + const symbol = useMemo(() => { + const symbolExists = MarkerSymbols.hasOwnProperty(type); + + if (!symbolExists) { + console.warn(`marker type "${type}" doesn't exist.`); + return () => null; + } + + return MarkerSymbols[type]; + }, [type]); + return symbol; +} + +export default MarkerSymbols; diff --git a/src/types/edges.ts b/src/types/edges.ts index 21ea21e2..c2b98ec3 100644 --- a/src/types/edges.ts +++ b/src/types/edges.ts @@ -142,18 +142,18 @@ export type ConnectionLineComponent = React.ComponentType = (oldEdge: Edge, newConnection: Connection) => void; export interface EdgeMarker { - type: ArrowHeadType; + type: MarkerType; color?: string; width?: number; height?: number; - units?: string; + markerUnits?: string; orient?: string; strokeWidth?: number; } export type EdgeMarkerType = string | EdgeMarker; -export enum ArrowHeadType { +export enum MarkerType { Arrow = 'arrow', ArrowClosed = 'arrowclosed', }