Merge branch 'v10' into refactor/nodes-edges-state

src/components/Edges/BezierEdge.tsx

@@ -1,7 +1,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 {
@@ -36,9 +36,9 @@ export function getBezierPath({
   if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
     path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(targetPosition)) {
-    path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
+    path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
   } else if (leftAndRight.includes(sourcePosition)) {
-    path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
+    path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
   }
 
   return path;
@@ -59,8 +59,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({
@@ -85,11 +85,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

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

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

@@ -6,6 +6,7 @@ import { useStore, useStoreApi } from '../../store';
 import { Edge, EdgeProps, WrapEdgeProps, ReactFlowState } from '../../types';
 import { onMouseDown } from '../../components/Handle/handler';
 import { EdgeAnchor } from './EdgeAnchor';
+import { getMarkerId } from '../../utils/graph';
 
 const selector = (s: ReactFlowState) => ({
   addSelectedElements: s.addSelectedElements,
@@ -32,7 +33,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     labelBgPadding,
     labelBgBorderRadius,
     style,
-    arrowHeadType,
     source,
     target,
     sourceX,
@@ -42,7 +42,6 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     sourcePosition,
     targetPosition,
     elementsSelectable,
-    markerEndId,
     isHidden,
     sourceHandleId,
     targetHandleId,
@@ -55,6 +54,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     edgeUpdaterRadius,
     onEdgeUpdateStart,
     onEdgeUpdateEnd,
+    markerEnd,
+    markerStart,
   }: WrapEdgeProps): JSX.Element | null => {
     const store = useStoreApi();
     const { addSelectedElements, setConnectionNodeId, unsetNodesSelection, setPosition, connectionMode } = useStore(
@@ -200,6 +201,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;
@@ -229,16 +232,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