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/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">