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

feat(markers): implement more generic api for markerEnd and markerStart handling

Browse Source
This commit is contained in:
Christopher Möller
2021-10-14 17:53:50 +02:00
parent eed5717821
commit d3b1148bca
18 changed files with 192 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Edges/CustomEdge.tsx
+2 -5
View File
@@ -1,5 +1,5 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath, getMarkerEnd } from 'react-flow-renderer';
import { EdgeProps, getBezierPath } from 'react-flow-renderer';
const CustomEdge: FC<EdgeProps> = ({
id,
@@ -10,15 +10,12 @@ const CustomEdge: FC<EdgeProps> = ({
sourcePosition,
targetPosition,
data,
arrowHeadType,
markerEndId,
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
<path id={id} className="react-flow__edge-path" d={edgePath} />
<text>
<textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
{data.text}
example/src/Edges/CustomEdge2.tsx
+2 -5
View File
@@ -1,5 +1,5 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath, getMarkerEnd, EdgeText, getEdgeCenter } from 'react-flow-renderer';
import { EdgeProps, getBezierPath, EdgeText, getEdgeCenter } from 'react-flow-renderer';
const CustomEdge: FC<EdgeProps> = ({
id,
@@ -10,11 +10,8 @@ const CustomEdge: FC<EdgeProps> = ({
sourcePosition,
targetPosition,
data,
arrowHeadType,
markerEndId,
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
const [centerX, centerY] = getEdgeCenter({
sourceX,
sourceY,
@@ -24,7 +21,7 @@ const CustomEdge: FC<EdgeProps> = ({
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
<path id={id} className="react-flow__edge-path" d={edgePath} />
<EdgeText
x={centerX}
y={centerY}
example/src/Edges/index.tsx
+12 -3
View File
@@ -54,7 +54,14 @@ const initialElements: Elements = [
</>
),
labelStyle: { fill: 'red', fontWeight: 700 },
arrowHeadType: ArrowHeadType.Arrow,
style: { stroke: '#ffcc00' },
markerEnd: {
type: ArrowHeadType.ArrowClosed,
},
markerStart: {
type: ArrowHeadType.Arrow,
color: '#FFCC00',
},
},
{
id: 'e5-7',
@@ -64,7 +71,10 @@ const initialElements: Elements = [
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
arrowHeadType: ArrowHeadType.ArrowClosed,
markerEnd: {
type: ArrowHeadType.ArrowClosed,
color: '#FFCC00',
},
},
{
id: 'e5-8',
@@ -72,7 +82,6 @@ const initialElements: Elements = [
target: '8',
type: 'custom',
data: { text: 'custom edge' },
arrowHeadType: ArrowHeadType.ArrowClosed,
},
{
id: 'e5-9',
example/src/FloatingEdges/FloatingEdge.tsx
+3 -4
View File
@@ -1,11 +1,10 @@
import { FC, useMemo, CSSProperties } from 'react';
import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer';
import { EdgeProps, useStoreState, getBezierPath } from 'react-flow-renderer';
import { getEdgeParams } from './utils';
const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, markerEndId, style }) => {
const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
const nodes = useStoreState((state) => state.nodes);
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]);
const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]);
@@ -27,7 +26,7 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, marker
return (
<g className="react-flow__connection">
<path id={id} className="react-flow__edge-path" d={d} markerEnd={markerEnd} style={style as CSSProperties} />
<path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
</g>
);
};
example/src/FloatingEdges/index.tsx
+1 -3
View File
@@ -9,7 +9,6 @@ import ReactFlow, {
Elements,
Connection,
Edge,
ArrowHeadType,
} from 'react-flow-renderer';
import './style.css';
@@ -31,8 +30,7 @@ const NodeAsHandleFlow = () => {
const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params: Connection | Edge) =>
setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els));
const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'floating' }, els));
return (
<div className="floatingedges">
example/src/Overview/index.tsx
+1 -2
View File
@@ -13,7 +13,6 @@ import ReactFlow, {
OnLoadParams,
FlowTransform,
SnapGrid,
ArrowHeadType,
Connection,
Edge,
} from 'react-flow-renderer';
@@ -125,7 +124,7 @@ const initialElements: Elements = [
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
{ id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
{ id: 'e4-5', source: '4', target: '5', label: 'edge with arrow head' },
{ id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
{
id: 'e5-7',
example/src/Undirectional/index.tsx
-13
View File
@@ -12,7 +12,6 @@ import ReactFlow, {
ConnectionLineType,
ConnectionMode,
updateEdge,
ArrowHeadType,
} from 'react-flow-renderer';
import CustomNode from './CustomNode';
@@ -69,7 +68,6 @@ const initialElements: Elements = [
sourceHandle: 'left',
targetHandle: 'bottom',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-1b',
@@ -78,7 +76,6 @@ const initialElements: Elements = [
sourceHandle: 'top',
targetHandle: 'right',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-2a',
@@ -87,7 +84,6 @@ const initialElements: Elements = [
sourceHandle: 'top',
targetHandle: 'left',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-2b',
@@ -96,7 +92,6 @@ const initialElements: Elements = [
sourceHandle: 'right',
targetHandle: 'bottom',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-3a',
@@ -105,7 +100,6 @@ const initialElements: Elements = [
sourceHandle: 'right',
targetHandle: 'top',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-3b',
@@ -114,7 +108,6 @@ const initialElements: Elements = [
sourceHandle: 'bottom',
targetHandle: 'left',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-4a',
@@ -123,7 +116,6 @@ const initialElements: Elements = [
sourceHandle: 'bottom',
targetHandle: 'right',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-4b',
@@ -132,7 +124,6 @@ const initialElements: Elements = [
sourceHandle: 'left',
targetHandle: 'top',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-10',
@@ -141,7 +132,6 @@ const initialElements: Elements = [
sourceHandle: 'top',
targetHandle: 'bottom',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-20',
@@ -150,7 +140,6 @@ const initialElements: Elements = [
sourceHandle: 'right',
targetHandle: 'left',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-30',
@@ -159,7 +148,6 @@ const initialElements: Elements = [
sourceHandle: 'bottom',
targetHandle: 'top',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e0-40',
@@ -168,7 +156,6 @@ const initialElements: Elements = [
sourceHandle: 'left',
targetHandle: 'right',
type: 'default',
arrowHeadType: ArrowHeadType.Arrow,
},
];
src/components/Edges/BezierEdge.tsx
+10 -6
View File
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
import EdgeText from './EdgeText';
import { getMarkerEnd, getCenter } from './utils';
import { getCenter } from './utils';
import { EdgeProps, Position } from '../../types';
interface GetBezierPathParams {
@@ -60,8 +60,8 @@ export default memo(
labelBgPadding,
labelBgBorderRadius,
style,
arrowHeadType,
markerEndId,
markerEnd,
markerStart,
}: EdgeProps) => {
const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
const path = getBezierPath({
@@ -86,11 +86,15 @@ export default memo(
/>
) : null;
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
return (
<>
<path style={style} d={path} className="react-flow__edge-path" markerEnd={markerEnd} />
<path
style={style}
d={path}
className="react-flow__edge-path"
markerEnd={markerEnd}
markerStart={markerStart}
/>
{text}
</>
);
src/components/Edges/SmoothStepEdge.tsx
+12 -8
View File
@@ -1,7 +1,7 @@
import React, { memo } from 'react';
import EdgeText from './EdgeText';
import { getMarkerEnd, getCenter } from './utils';
import { getCenter } from './utils';
import { EdgeSmoothStepProps, Position } from '../../types';
// These are some helper methods for drawing the round corners
@@ -73,8 +73,8 @@ export function getSmoothStepPath({
sourceY <= targetY ? rightTopCorner(cX, sourceY, cornerSize) : rightBottomCorner(cX, sourceY, cornerSize);
secondCornerPath =
sourceY <= targetY ? bottomLeftCorner(cX, targetY, cornerSize) : topLeftCorner(cX, targetY, cornerSize);
} else if (sourcePosition === Position.Right && targetPosition === Position.Left){
// and sourceX > targetX
} else if (sourcePosition === Position.Right && targetPosition === Position.Left) {
// and sourceX > targetX
firstCornerPath =
sourceY <= targetY ? leftTopCorner(cX, sourceY, cornerSize) : leftBottomCorner(cX, sourceY, cornerSize);
secondCornerPath =
@@ -126,8 +126,8 @@ export default memo(
style,
sourcePosition = Position.Bottom,
targetPosition = Position.Top,
arrowHeadType,
markerEndId,
markerEnd,
markerStart,
borderRadius = 5,
}: EdgeSmoothStepProps) => {
const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
@@ -142,8 +142,6 @@ export default memo(
borderRadius,
});
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
const text = label ? (
<EdgeText
x={centerX}
@@ -159,7 +157,13 @@ export default memo(
return (
<>
<path style={style} className="react-flow__edge-path" d={path} markerEnd={markerEnd} />
<path
style={style}
className="react-flow__edge-path"
d={path}
markerEnd={markerEnd}
markerStart={markerStart}
/>
{text}
</>
);
src/components/Edges/StraightEdge.tsx
+3 -4
View File
@@ -1,7 +1,6 @@
import React, { memo } from 'react';
import EdgeText from './EdgeText';
import { getMarkerEnd } from './utils';
import { EdgeProps } from '../../types';
export default memo(
@@ -17,15 +16,14 @@ export default memo(
labelBgPadding,
labelBgBorderRadius,
style,
arrowHeadType,
markerEndId,
markerEnd,
markerStart,
}: EdgeProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
const xOffset = Math.abs(targetX - sourceX) / 2;
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
const text = label ? (
<EdgeText
@@ -47,6 +45,7 @@ export default memo(
className="react-flow__edge-path"
d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
markerEnd={markerEnd}
markerStart={markerStart}
/>
{text}
</>
src/components/Edges/wrapEdge.tsx
+19 -5
View File
@@ -5,6 +5,7 @@ import { useStoreActions, useStoreState } from '../../store/hooks';
import { Edge, EdgeProps, WrapEdgeProps } from '../../types';
import { onMouseDown } from '../../components/Handle/handler';
import { EdgeAnchor } from './EdgeAnchor';
import { getMarkerId } from '../../utils/graph';
export default (EdgeComponent: ComponentType<EdgeProps>) => {
const EdgeWrapper = ({
@@ -23,7 +24,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
labelBgPadding,
labelBgBorderRadius,
style,
arrowHeadType,
source,
target,
sourceX,
@@ -33,7 +33,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
sourcePosition,
targetPosition,
elementsSelectable,
markerEndId,
isHidden,
sourceHandleId,
targetHandleId,
@@ -46,6 +45,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
edgeUpdaterRadius,
onEdgeUpdateStart,
onEdgeUpdateEnd,
markerEnd,
markerStart,
}: WrapEdgeProps): JSX.Element | null => {
const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
const setConnectionNodeId = useStoreActions((actions) => actions.setConnectionNodeId);
@@ -160,7 +161,18 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
_onEdgeUpdate
);
},
[id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement, onConnectEdge]
[
id,
source,
target,
type,
sourceHandleId,
targetHandleId,
setConnectionNodeId,
setPosition,
edgeElement,
onConnectEdge,
]
);
const onEdgeUpdaterSourceMouseDown = useCallback(
@@ -179,6 +191,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const onEdgeUpdaterMouseEnter = useCallback(() => setUpdating(true), [setUpdating]);
const onEdgeUpdaterMouseOut = useCallback(() => setUpdating(false), [setUpdating]);
const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart)})`, [markerStart]);
const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd)})`, [markerEnd]);
if (isHidden) {
return null;
@@ -208,16 +222,16 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
labelBgBorderRadius={labelBgBorderRadius}
data={data}
style={style}
arrowHeadType={arrowHeadType}
sourceX={sourceX}
sourceY={sourceY}
targetX={targetX}
targetY={targetY}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
markerEndId={markerEndId}
sourceHandleId={sourceHandleId}
targetHandleId={targetHandleId}
markerStart={markerStartUrl}
markerEnd={markerEndUrl}
/>
{handleEdgeUpdate && (
<g
src/container/EdgeRenderer/MarkerDefinitions.tsx
+86 -40
View File
@@ -1,52 +1,98 @@
import React, { ReactNode } from 'react';
import React, { useMemo } from 'react';
import { useStoreState } from '../../store/hooks';
import { EdgeMarker, ArrowHeadType } from '../../types';
import { getMarkerId } from '../../utils/graph';
interface MarkerProps {
id: string;
children: ReactNode;
type: ArrowHeadType;
color: string;
}
interface MarkerDefinitionsProps {
defaultColor: string;
}
const Marker = ({ id, children }: MarkerProps) => (
<marker
className="react-flow__arrowhead"
id={id}
markerWidth="12.5"
markerHeight="12.5"
viewBox="-10 -10 20 20"
orient="auto"
refX="0"
refY="0"
>
{children}
</marker>
);
interface MarkerDefinitionsProps {
interface SymbolProps {
color: string;
}
const MarkerDefinitions = ({ color }: MarkerDefinitionsProps) => {
interface EdgeMarkerExtended extends EdgeMarker {
id: string;
}
const ArrowSymbol = ({ color }: SymbolProps) => {
return (
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
fill={color}
points="-5,-4 0,0 -5,4 -5,-4"
/>
);
};
const ArrowClosedSymbol = ({ color }: SymbolProps) => {
return (
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
fill={color}
points="-5,-4 0,0 -5,4 -5,-4"
/>
);
};
const markerSymbols = {
[ArrowHeadType.Arrow]: ArrowSymbol,
[ArrowHeadType.ArrowClosed]: ArrowClosedSymbol,
};
const Marker = ({ id, type, color }: MarkerProps) => {
const Symbol = markerSymbols[type];
return (
<marker
className="react-flow__arrowhead"
id={id}
markerWidth="12.5"
markerHeight="12.5"
viewBox="-10 -10 20 20"
orient="auto"
refX="0"
refY="0"
>
<Symbol color={color} />
</marker>
);
};
const MarkerDefinitions = ({ defaultColor }: MarkerDefinitionsProps) => {
const edges = useStoreState((state) => state.edges);
const markers = useMemo(() => {
const ids: string[] = [];
return edges.reduce<EdgeMarkerExtended[]>((markers, edge) => {
[edge.markerStart, edge.markerEnd].forEach((marker) => {
if (marker && typeof marker === 'object') {
const markerId = getMarkerId(marker);
if (!ids.includes(markerId)) {
markers.push({ id: markerId, ...marker });
ids.push(markerId);
}
}
});
return markers.sort((a, b) => a.id.localeCompare(b.id));
}, []);
}, [edges]);
return (
<defs>
<Marker id="react-flow__arrowclosed">
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
fill={color}
points="-5,-4 0,0 -5,4 -5,-4"
/>
</Marker>
<Marker id="react-flow__arrow">
<polyline
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
fill="none"
points="-5,-4 0,0 -5,4"
/>
</Marker>
{markers.map((marker: EdgeMarkerExtended) => (
<Marker id={marker.id} key={marker.id} type={marker.type} color={marker.color || defaultColor} />
))}
</defs>
);
};
src/container/EdgeRenderer/index.tsx
+5 -6
View File
@@ -26,8 +26,7 @@ interface EdgeRendererProps {
connectionMode?: ConnectionMode;
onElementClick?: (event: React.MouseEvent, element: Node | Edge) => void;
onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
arrowHeadColor: string;
markerEndId?: string;
defaultMarkerColor: string;
onlyRenderVisibleElements: boolean;
onEdgeUpdate?: OnEdgeUpdateFunc;
onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
@@ -155,7 +154,8 @@ const Edge = ({
labelBgPadding={edge.labelBgPadding}
labelBgBorderRadius={edge.labelBgBorderRadius}
style={edge.style}
arrowHeadType={edge.arrowHeadType}
markerEnd={edge.markerEnd}
markerStart={edge.markerStart}
source={edge.source}
target={edge.target}
sourceHandleId={sourceHandleId}
@@ -167,7 +167,6 @@ const Edge = ({
sourcePosition={sourcePosition}
targetPosition={targetPosition}
elementsSelectable={elementsSelectable}
markerEndId={props.markerEndId}
isHidden={edge.isHidden}
onConnectEdge={onConnectEdge}
handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
@@ -203,7 +202,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
const {
connectionLineType,
arrowHeadColor,
defaultMarkerColor,
connectionLineStyle,
connectionLineComponent,
onlyRenderVisibleElements,
@@ -213,7 +212,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
return (
<svg width={width} height={height} className="react-flow__edges">
<MarkerDefinitions color={arrowHeadColor} />
<MarkerDefinitions defaultColor={defaultMarkerColor} />
<g transform={transformStyle}>
{edges.map((edge: Edge) => (
<Edge
src/container/FlowRenderer/index.tsx
+1
View File
@@ -21,6 +21,7 @@ interface FlowRendererProps
| 'arrowHeadColor'
| 'onlyRenderVisibleElements'
| 'selectNodesOnDrag'
| 'defaultMarkerColor'
> {
children: ReactNode;
}
src/container/GraphView/index.tsx
+3 -5
View File
@@ -23,7 +23,7 @@ export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange'
onlyRenderVisibleElements: boolean;
defaultZoom: number;
defaultPosition: [number, number];
arrowHeadColor: string;
defaultMarkerColor: string;
selectNodesOnDrag: boolean;
}
@@ -75,8 +75,7 @@ const GraphView = ({
translateExtent,
preventScrolling,
nodeExtent,
arrowHeadColor,
markerEndId,
defaultMarkerColor,
zoomOnScroll,
zoomOnPinch,
panOnScroll,
@@ -271,8 +270,7 @@ const GraphView = ({
connectionLineStyle={connectionLineStyle}
connectionLineComponent={connectionLineComponent}
connectionMode={connectionMode}
arrowHeadColor={arrowHeadColor}
markerEndId={markerEndId}
defaultMarkerColor={defaultMarkerColor}
onEdgeUpdate={onEdgeUpdate}
onlyRenderVisibleElements={onlyRenderVisibleElements}
onEdgeContextMenu={onEdgeContextMenu}
src/container/ReactFlow/index.tsx
+3 -6
View File
@@ -109,8 +109,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
translateExtent?: TranslateExtent;
preventScrolling?: boolean;
nodeExtent?: NodeExtent;
arrowHeadColor?: string;
markerEndId?: string;
defaultMarkerColor?: string;
zoomOnScroll?: boolean;
zoomOnPinch?: boolean;
panOnScroll?: boolean;
@@ -184,8 +183,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
translateExtent,
preventScrolling = true,
nodeExtent,
arrowHeadColor = '#b1b1b7',
markerEndId,
defaultMarkerColor = '#b1b1b7',
zoomOnScroll = true,
zoomOnPinch = true,
panOnScroll = false,
@@ -262,8 +260,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
translateExtent={translateExtent}
preventScrolling={preventScrolling}
nodeExtent={nodeExtent}
arrowHeadColor={arrowHeadColor}
markerEndId={markerEndId}
defaultMarkerColor={defaultMarkerColor}
zoomOnScroll={zoomOnScroll}
zoomOnPinch={zoomOnPinch}
zoomOnDoubleClick={zoomOnDoubleClick}
src/types/index.ts
+13 -5
View File
@@ -57,6 +57,13 @@ export enum ArrowHeadType {
ArrowClosed = 'arrowclosed',
}
export interface EdgeMarker {
type: ArrowHeadType;
color?: string;
}
export type EdgeMarkerType = string | EdgeMarker;
export interface Edge<T = any> {
id: ElementId;
type?: string;
@@ -72,10 +79,11 @@ export interface Edge<T = any> {
labelBgBorderRadius?: number;
style?: CSSProperties;
animated?: boolean;
arrowHeadType?: ArrowHeadType;
isHidden?: boolean;
data?: T;
className?: string;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
}
export enum BackgroundVariant {
@@ -111,7 +119,6 @@ export interface WrapEdgeProps<T = any> {
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
style?: CSSProperties;
arrowHeadType?: ArrowHeadType;
source: ElementId;
target: ElementId;
sourceHandleId: ElementId | null;
@@ -123,7 +130,6 @@ export interface WrapEdgeProps<T = any> {
sourcePosition: Position;
targetPosition: Position;
elementsSelectable?: boolean;
markerEndId?: string;
isHidden?: boolean;
handleEdgeUpdate: boolean;
onConnectEdge: OnConnectFunc;
@@ -134,6 +140,8 @@ export interface WrapEdgeProps<T = any> {
edgeUpdaterRadius?: number;
onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge) => void;
onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge) => void;
markerStart?: EdgeMarkerType;
markerEnd?: EdgeMarkerType;
}
export interface EdgeProps<T = any> {
@@ -155,11 +163,11 @@ export interface EdgeProps<T = any> {
labelBgPadding?: [number, number];
labelBgBorderRadius?: number;
style?: CSSProperties;
arrowHeadType?: ArrowHeadType;
markerEndId?: string;
data?: T;
sourceHandleId?: ElementId | null;
targetHandleId?: ElementId | null;
markerStart?: string;
markerEnd?: string;
}
export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
borderRadius?: number;
src/utils/graph.ts
+16
View File
@@ -15,6 +15,7 @@ import {
FlowExportObject,
ReactFlowState,
NodeExtent,
EdgeMarkerType,
} from '../types';
export const isEdge = (element: Node | Connection | Edge): element is Edge =>
@@ -57,6 +58,21 @@ export const removeElements = (elementsToRemove: Elements, elements: Elements):
const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection): ElementId =>
`reactflow__edge-${source}${sourceHandle}-${target}${targetHandle}`;
export const getMarkerId = (marker: EdgeMarkerType | undefined): string => {
if (typeof marker === 'undefined') {
return '';
}
if (typeof marker === 'string') {
return marker;
}
return Object.keys(marker)
.sort()
.map((key: string) => `${key}=${(marker as any)[key]}`)
.join('&');
};
const connectionExists = (edge: Edge, elements: Elements) => {
return elements.some(
(el) =>