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
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) =>