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

example/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/src_oldapi

example/package-lock.json

@@ -27,7 +27,7 @@
     },
     "..": {
       "name": "react-flow-renderer",
-      "version": "9.6.7",
+      "version": "9.6.8",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.15.4",

example/src/FloatingEdges/FloatingConnectionLine.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { getBezierPath, ConnectionLineComponentProps, Node } from 'react-flow-renderer';
+
+import { getEdgeParams } from './utils';
+
+const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  sourceNode,
+}) => {
+  if (!sourceNode) {
+    return null;
+  }
+
+  const targetNode = {
+    id: 'connection-target',
+    width: 1,
+    height: 1,
+    position: { x: targetX, y: targetY },
+  } as Node;
+
+  const { sx, sy } = getEdgeParams(sourceNode, targetNode);
+  const d = getBezierPath({
+    sourceX: sx,
+    sourceY: sy,
+    sourcePosition,
+    targetPosition,
+    targetX,
+    targetY,
+  });
+
+  return (
+    <g>
+      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
+      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
+    </g>
+  );
+};
+
+export default FloatingConnectionLine;

example/src/FloatingEdges/FloatingEdge.tsx

@@ -0,0 +1,36 @@
+import { FC, useMemo, CSSProperties } from 'react';
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'react-flow-renderer';
+
+import { getEdgeParams } from './utils';
+
+const nodeSelector = (s: ReactFlowState) => s.nodes;
+
+const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
+  const nodes = useStore(nodeSelector);
+
+  const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]);
+  const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]);
+
+  if (!sourceNode || !targetNode) {
+    return null;
+  }
+
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+
+  const d = getBezierPath({
+    sourceX: sx,
+    sourceY: sy,
+    sourcePosition: sourcePos,
+    targetPosition: targetPos,
+    targetX: tx,
+    targetY: ty,
+  });
+
+  return (
+    <g className="react-flow__connection">
+      <path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
+    </g>
+  );
+};
+
+export default FloatingEdge;

example/src/FloatingEdges/index.tsx

@@ -0,0 +1,65 @@
+import { useState, useCallback } from 'react';
+
+import ReactFlow, {
+  addEdge,
+  Background,
+  OnLoadParams,
+  EdgeTypesType,
+  Node,
+  Connection,
+  Edge,
+  applyNodeChanges,
+  applyEdgeChanges,
+  NodeChange,
+  EdgeChange,
+} from 'react-flow-renderer';
+
+import './style.css';
+
+import FloatingEdge from './FloatingEdge';
+import FloatingConnectionLine from './FloatingConnectionLine';
+import { createElements } from './utils';
+
+const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+
+const { nodes: initialNodes, edges: initialEdges } = createElements();
+
+const edgeTypes: EdgeTypesType = {
+  floating: FloatingEdge,
+};
+
+const FloatingEdges = () => {
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+
+  const onConnect = useCallback((params: Edge | Connection) => {
+    setEdges((eds) => addEdge(params, eds));
+  }, []);
+
+  const onNodesChange = useCallback((changes: NodeChange[]) => {
+    setNodes((ns) => applyNodeChanges(changes, ns));
+  }, []);
+
+  const onEdgesChange = useCallback((changes: EdgeChange[]) => {
+    setEdges((es) => applyEdgeChanges(changes, es));
+  }, []);
+
+  return (
+    <div className="floatingedges">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onLoad={onLoad}
+        edgeTypes={edgeTypes}
+        connectionLineComponent={FloatingConnectionLine}
+      >
+        <Background />
+      </ReactFlow>
+    </div>
+  );
+};
+
+export default FloatingEdges;

example/src/FloatingEdges/style.css

@@ -0,0 +1,9 @@
+.floatingedges {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.floatingedges .react-flow__handle {
+  opacity: 0;
+}

example/src/FloatingEdges/utils.ts

@@ -0,0 +1,106 @@
+import { Position, ArrowHeadType, 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
+function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight,
+    position: intersectionNodePosition,
+  } = intersectionNode;
+  const targetPosition = targetNode.position;
+
+  const w = (intersectionNodeWidth ?? 0) / 2;
+  const h = (intersectionNodeHeight ?? 0) / 2;
+
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x + w;
+  const y1 = targetPosition.y + h;
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
+  const xx3 = a * xx1;
+  const yy3 = a * yy1;
+  const x = w * (xx3 + yy3) + x2;
+  const y = h * (-xx3 + yy3) + y2;
+
+  return { x, y };
+}
+
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
+  const n = { ...node.position, ...node };
+  const nx = Math.round(n.x);
+  const ny = Math.round(n.y);
+  const px = Math.round(intersectionPoint.x);
+  const py = Math.round(intersectionPoint.y);
+
+  if (px <= nx + 1) {
+    return Position.Left;
+  }
+  if (px >= nx + (n.width ?? 0) - 1) {
+    return Position.Right;
+  }
+  if (py <= ny + 1) {
+    return Position.Top;
+  }
+  if (py >= n.y + (n.height ?? 0) - 1) {
+    return Position.Bottom;
+  }
+
+  return Position.Top;
+}
+
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source: Node, target: Node) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target);
+  const targetIntersectionPoint = getNodeIntersection(target, source);
+
+  const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
+  const targetPos = getEdgePosition(target, targetIntersectionPoint);
+
+  return {
+    sx: sourceIntersectionPoint.x,
+    sy: sourceIntersectionPoint.y,
+    tx: targetIntersectionPoint.x,
+    ty: targetIntersectionPoint.y,
+    sourcePos,
+    targetPos,
+  };
+}
+
+type NodesAndEdges = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export function createElements(): NodesAndEdges {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+
+  nodes.push({ id: 'target', data: { label: 'Target' }, position: center });
+
+  for (let i = 0; i < 8; i++) {
+    const degrees = i * (360 / 8);
+    const radians = degrees * (Math.PI / 180);
+    const x = 250 * Math.cos(radians) + center.x;
+    const y = 250 * Math.sin(radians) + center.y;
+
+    nodes.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });
+
+    edges.push({
+      id: `edge-${i}`,
+      target: 'target',
+      source: `${i}`,
+      type: 'floating',
+    });
+  }
+
+  return { nodes, edges };
+}

example/src/index.tsx

@@ -6,6 +6,7 @@ import Basic from './Basic';
 import UpdateNode from './UpdateNode';
 import Stress from './Stress';
 import CustomNode from './CustomNode';
+import FloatingEdges from './FloatingEdges';
 
 import './index.css';
 
@@ -26,6 +27,10 @@ const routes = [
     path: '/custom-node',
     component: CustomNode,
   },
+  {
+    path: '/floating-edges',
+    component: FloatingEdges,
+  },
 ];
 
 const Header = withRouter(({ history, location }) => {

example/src_oldapi/Edges/CustomEdge.tsx

@@ -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_oldapi/Edges/CustomEdge2.tsx

@@ -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_oldapi/Edges/index.tsx

@@ -41,6 +41,32 @@ const initialElements: Elements = [
   { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
   { id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
   { id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    label: 'label with styled bg',
+    labelBgPadding: [8, 4],
+    labelBgBorderRadius: 4,
+    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    markerEnd: {
+      type: ArrowHeadType.ArrowClosed,
+    },
+  },
+  {
+    id: 'e5-8',
+    source: '5',
+    target: '8',
+    type: 'custom',
+    data: { text: 'custom edge' },
+  },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
   {
     id: 'e5-6',
     source: '5',
@@ -54,32 +80,23 @@ const initialElements: Elements = [
       </>
     ),
     labelStyle: { fill: 'red', fontWeight: 700 },
-    arrowHeadType: ArrowHeadType.Arrow,
-  },
-  {
-    id: 'e5-7',
-    source: '5',
-    target: '7',
-    label: 'label with styled bg',
-    labelBgPadding: [8, 4],
-    labelBgBorderRadius: 4,
-    labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
-  },
-  {
-    id: 'e5-8',
-    source: '5',
-    target: '8',
-    type: 'custom',
-    data: { text: 'custom edge' },
-    arrowHeadType: ArrowHeadType.ArrowClosed,
-  },
-  {
-    id: 'e5-9',
-    source: '5',
-    target: '9',
-    type: 'custom2',
-    data: { text: 'custom edge 2' },
+    style: { stroke: '#ffcc00' },
+    markerEnd: {
+      type: ArrowHeadType.Arrow,
+      color: '#FFCC00',
+      units: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+      strokeWidth: 2,
+    },
+    markerStart: {
+      type: ArrowHeadType.ArrowClosed,
+      color: '#FFCC00',
+      orient: 'auto-start-reverse',
+      units: 'userSpaceOnUse',
+      width: 20,
+      height: 20,
+    },
   },
 ];
 

example/src_oldapi/Overview/index.tsx

@@ -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_oldapi/Undirectional/index.tsx

@@ -12,7 +12,6 @@ import ReactFlow, {
   ConnectionLineType,
   ConnectionMode,
   updateEdge,
-  ArrowHeadType,
 } from 'react-flow-renderer';
 import CustomNode from './CustomNode';
 
@@ -68,8 +67,7 @@ const initialElements: Elements = [
     target: '01',
     sourceHandle: 'left',
     targetHandle: 'bottom',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-1b',
@@ -77,8 +75,7 @@ const initialElements: Elements = [
     target: '01',
     sourceHandle: 'top',
     targetHandle: 'right',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-2a',
@@ -86,8 +83,7 @@ const initialElements: Elements = [
     target: '02',
     sourceHandle: 'top',
     targetHandle: 'left',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-2b',
@@ -95,8 +91,7 @@ const initialElements: Elements = [
     target: '02',
     sourceHandle: 'right',
     targetHandle: 'bottom',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-3a',
@@ -104,8 +99,7 @@ const initialElements: Elements = [
     target: '03',
     sourceHandle: 'right',
     targetHandle: 'top',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-3b',
@@ -113,8 +107,7 @@ const initialElements: Elements = [
     target: '03',
     sourceHandle: 'bottom',
     targetHandle: 'left',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-4a',
@@ -122,8 +115,7 @@ const initialElements: Elements = [
     target: '04',
     sourceHandle: 'bottom',
     targetHandle: 'right',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-4b',
@@ -131,8 +123,7 @@ const initialElements: Elements = [
     target: '04',
     sourceHandle: 'left',
     targetHandle: 'top',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-10',
@@ -140,8 +131,7 @@ const initialElements: Elements = [
     target: '10',
     sourceHandle: 'top',
     targetHandle: 'bottom',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-20',
@@ -149,8 +139,7 @@ const initialElements: Elements = [
     target: '20',
     sourceHandle: 'right',
     targetHandle: 'left',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-30',
@@ -158,8 +147,7 @@ const initialElements: Elements = [
     target: '30',
     sourceHandle: 'bottom',
     targetHandle: 'top',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
   {
     id: 'e0-40',
@@ -167,8 +155,7 @@ const initialElements: Elements = [
     target: '40',
     sourceHandle: 'left',
     targetHandle: 'right',
-    type: 'smoothstep',
-    arrowHeadType: ArrowHeadType.Arrow,
+    type: 'default',
   },
 ];
 
@@ -181,8 +168,7 @@ const getId = (): ElementId => `${id++}`;
 
 const UpdateNodeInternalsFlow = () => {
   const [elements, setElements] = useState<Elements>(initialElements);
-  const onConnect = (params: Connection | Edge) =>
-    setElements((els) => addEdge({ ...params, type: 'smoothstep' }, els));
+  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'default' }, els));
   const { project } = useZoomPanHelper();
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setElements((els) => updateEdge(oldEdge, newConnection, els));