Merge pull request #332 from wbkd/develop

Develop

README.md

@@ -91,10 +91,12 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `nodesDraggable`: default: `true`
 - `nodesConnectable`: default: `true`
 - `elementsSelectable`: default: `true`
+- `zoomOnScroll`: default: `true`
 - `selectNodesOnDrag`: default: `true`
 - `minZoom`: default: `0.5`
 - `maxZoom`: default: `2`
 - `defaultZoom`: default: `1`
+- `arrowHeadColor`: default: `#bbb`
 
 ## React Flow Instance
 
@@ -247,6 +249,8 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
 - `labelStyle`: css properties for the text
 - `labelShowBg`: boolean - default: `true`
 - `labelBgStyle`: css properties for the text background
+- `arrowHeadType`: 'arrow' or 'arrowclosed' - defines the arrowhead of the edge
+- `markerEndId`: custom marker end url - if this is used `arrowHeadType` gets ignored
 
 You can find an example with lots of different edges in the [edges example](https://react-flow.netlify.app/edges).
 

example/src/Edges/index.js

@@ -25,13 +25,21 @@ const initialElements = [
   { 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-6', source: '5', target: '6', label: 'styled label', labelStyle: { fill: 'red', fontWeight: 700 } },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    label: 'styled label',
+    labelStyle: { fill: 'red', fontWeight: 700 },
+    arrowHeadType: 'arrow',
+  },
   {
     id: 'e5-7',
     source: '5',
     target: '7',
     label: 'label with styled bg',
     labelBgStyle: { fill: '#eee', fillOpacity: 0.7 },
+    arrowHeadType: 'arrowclosed',
   },
   { id: 'e5-8', source: '5', target: '8', type: 'custom', label: 'custom edge' },
 ];

example/src/Interaction/index.js

@@ -18,6 +18,7 @@ const InteractionFlow = () => {
   const [isSelectable, setIsSelectable] = useState(false);
   const [isDraggable, setIsDraggable] = useState(false);
   const [isConnectable, setIsConnectable] = useState(false);
+  const [zoomOnScroll, setZoomOnScroll] = useState(true);
 
   return (
     <ReactFlow
@@ -25,6 +26,7 @@ const InteractionFlow = () => {
       elementsSelectable={isSelectable}
       nodesConnectable={isConnectable}
       nodesDraggable={isDraggable}
+      zoomOnScroll={zoomOnScroll}
       onConnect={onConnect}
     >
       <MiniMap />
@@ -67,6 +69,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="zoomonscroll">
+            zoom on scroll
+            <input
+              id="zoomonscroll"
+              type="checkbox"
+              checked={zoomOnScroll}
+              onChange={(evt) => setZoomOnScroll(evt.target.checked)}
+              className="react-flow__zoomonscroll"
+            />
+          </label>
+        </div>
       </div>
     </ReactFlow>
   );

example/src/Overview/index.js

@@ -70,7 +70,7 @@ const initialElements = [
         </>
       ),
     },
-    position: { x: 250, y: 300 },
+    position: { x: 250, y: 325 },
   },
   {
     id: '6',
@@ -88,7 +88,7 @@ const initialElements = [
   { 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' },
+  { id: 'e4-5', source: '4', target: '5', arrowHeadType: 'arrowclosed', label: 'edge with arrow head' },
   { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
   {
     id: 'e5-7',

package-lock.json

@@ -6177,6 +6177,11 @@
       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
       "dev": true
     },
+    "classcat": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-4.1.0.tgz",
+      "integrity": "sha512-RA8O5oCi1I1CF6rR4cRBROh8MtZzM4w7xKLm0jd+S6UN2G4FIto+9DVOeFc46JEZFN5PVe/EZWLQO1VU/AUH4A=="
+    },
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",

package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@welldone-software/why-did-you-render": "^4.2.5",
-    "classnames": "^2.2.6",
+    "classcat": "^4.1.0",
     "d3-selection": "^1.4.1",
     "d3-zoom": "^1.8.3",
     "easy-peasy": "^3.3.1",

src/additional-components/Background/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, HTMLAttributes } from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
 import { BackgroundVariant } from '../../types';
@@ -25,7 +25,7 @@ const Background = memo(
     const height = useStoreState((s) => s.height);
     const [x, y, scale] = useStoreState((s) => s.transform);
 
-    const bgClasses = classnames('react-flow__background', className);
+    const bgClasses = cc(['react-flow__background', className]);
     const bgColor = color ? color : defaultColors[variant];
     const scaledGap = gap * scale;
     const xOffset = x % scaledGap;

src/additional-components/Controls/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
 
@@ -24,7 +24,7 @@ const Controls = ({ style, showZoom = true, showFitView = true, showInteractive
   const zoomOut = useStoreActions((actions) => actions.zoomOut);
 
   const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
-  const mapClasses = classnames('react-flow__controls', className);
+  const mapClasses = cc(['react-flow__controls', className]);
 
   return (
     <div className={mapClasses} style={style}>

src/additional-components/MiniMap/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
@@ -31,7 +31,7 @@ const MiniMap = ({
   const [tX, tY, tScale] = useStoreState((s) => s.transform);
   const nodes = useStoreState((s) => s.nodes);
 
-  const mapClasses = classnames('react-flow__minimap', className);
+  const mapClasses = cc(['react-flow__minimap', className]);
   const elementWidth = (style.width || defaultWidth)! as number;
   const elementHeight = (style.height || defaultHeight)! as number;
   const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;

src/components/ConnectionLine/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getStepPath } from '../Edges/StepEdge';
@@ -46,7 +46,7 @@ export default ({
     return null;
   }
 
-  const connectionLineClasses: string = cx('react-flow__connection', className);
+  const connectionLineClasses: string = cc(['react-flow__connection', className]);
 
   const sourceHandle = handleId
     ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)

src/components/Edges/BezierEdge.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeBezierProps, Position } from '../../types';
 
 interface GetBezierPathParams {
@@ -52,6 +53,8 @@ export default memo(
     labelShowBg,
     labelBgStyle,
     style,
+    arrowHeadType,
+    markerEndId,
   }: EdgeBezierProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
@@ -81,9 +84,11 @@ export default memo(
       />
     ) : null;
 
+    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+
     return (
       <>
-        <path style={style} d={path} className="react-flow__edge-path" />
+        <path style={style} d={path} className="react-flow__edge-path" markerEnd={markerEnd} />
         {text}
       </>
     );

src/components/Edges/SmoothStepEdge.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeBezierProps, Position } from '../../types';
 
 // These are some helper methods for drawing the round corners
@@ -138,6 +139,8 @@ export default memo(
     style,
     sourcePosition = Position.Bottom,
     targetPosition = Position.Top,
+    arrowHeadType,
+    markerEndId,
   }: EdgeBezierProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
@@ -158,6 +161,8 @@ export default memo(
       targetPosition,
     });
 
+    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+
     const text = label ? (
       <EdgeText
         x={centerX}
@@ -171,7 +176,7 @@ export default memo(
 
     return (
       <>
-        <path style={style} className="react-flow__edge-path" d={path} />
+        <path style={style} className="react-flow__edge-path" d={path} markerEnd={markerEnd} />
         {text}
       </>
     );

src/components/Edges/StepEdge.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeProps } from '../../types';
 
 interface GetStepPathParams {
@@ -16,7 +17,19 @@ export function getStepPath({ centerY, sourceX, sourceY, targetX, targetY }: Get
 }
 
 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    style,
+    arrowHeadType,
+    markerEndId,
+  }: EdgeProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 
@@ -25,6 +38,8 @@ export default memo(
 
     const path = getStepPath({ centerY, sourceX, sourceY, targetX, targetY });
 
+    const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+
     const text = label ? (
       <EdgeText
         x={centerX}
@@ -38,7 +53,7 @@ export default memo(
 
     return (
       <>
-        <path style={style} className="react-flow__edge-path" d={path} />
+        <path style={style} className="react-flow__edge-path" d={path} markerEnd={markerEnd} />
         {text}
       </>
     );

src/components/Edges/StraightEdge.tsx

@@ -1,15 +1,29 @@
 import React, { memo } from 'react';
 
 import EdgeText from './EdgeText';
+import { getMarkerEnd } from './utils';
 import { EdgeProps } from '../../types';
 
 export default memo(
-  ({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, style }: EdgeProps) => {
+  ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    style,
+    arrowHeadType,
+    markerEndId,
+  }: 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
@@ -24,7 +38,12 @@ export default memo(
 
     return (
       <>
-        <path style={style} className="react-flow__edge-path" d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`} />
+        <path
+          style={style}
+          className="react-flow__edge-path"
+          d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
+          markerEnd={markerEnd}
+        />
         {text}
       </>
     );

src/components/Edges/index.ts

@@ -0,0 +1,4 @@
+export { default as BezierEdge } from './BezierEdge';
+export { default as StepEdge } from './StepEdge';
+export { default as SmoothStepEdge } from './SmoothStepEdge';
+export { default as StraightEdge } from './StraightEdge';

src/components/Edges/utils.ts

@@ -0,0 +1,9 @@
+import { ArrowHeadType } from '../../types';
+
+export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
+  if (typeof markerEndId !== 'undefined' && markerEndId) {
+    return `url(#${markerEndId})`;
+  }
+
+  return typeof arrowHeadType !== 'undefined' ? `url(#react-flow__${arrowHeadType})` : 'none';
+};

src/components/Edges/wrapEdge.tsx

@@ -1,5 +1,5 @@
 import React, { memo, ComponentType, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
 import { ElementId, Edge, EdgeCompProps } from '../../types';
@@ -39,7 +39,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       ...rest
     }: EdgeWrapperProps) => {
       const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
-      const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
+      const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
       const edgeGroupStyle: CSSProperties = {
         pointerEvents: elementsSelectable ? 'all' : 'none',
       };

src/components/Handle/BaseHandle.tsx

@@ -1,5 +1,5 @@
 import React, { memo, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection, SetConnectionId } from '../../types';
 
@@ -144,10 +144,16 @@ const BaseHandle = memo(
     ...rest
   }: BaseHandleProps) => {
     const isTarget = type === 'target';
-    const handleClasses = cx('react-flow__handle', `react-flow__handle-${position}`, 'nodrag', className, {
+    const handleClasses = cc([
-      source: !isTarget,
+      'react-flow__handle',
-      target: isTarget,
+      `react-flow__handle-${position}`,
-    });
+      'nodrag',
+      className,
+      {
+        source: !isTarget,
+        target: isTarget,
+      },
+    ]);
 
     const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
 

src/components/Handle/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
 import BaseHandle from './BaseHandle';
@@ -26,7 +26,7 @@ const Handle = memo(
       onConnectAction(params);
       onConnect(params);
     };
-    const handleClasses = classnames(className, { connectable: isConnectable });
+    const handleClasses = cc([className, { connectable: isConnectable }]);
 
     return (
       <BaseHandle

src/components/Nodes/wrapNode.tsx

@@ -10,7 +10,8 @@ import React, {
   useCallback,
 } from 'react';
 import { DraggableCore } from 'react-draggable';
-import cx from 'classnames';
+import cc from 'classcat';
+
 import { ResizeObserver } from 'resize-observer';
 import { useStoreActions } from '../../store/hooks';
 
@@ -192,10 +193,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       const [offset, setOffset] = useState({ x: 0, y: 0 });
       const [isDragging, setDragging] = useState(false);
       const position = { x: xPos, y: yPos };
-      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, {
+      const nodeClasses = cc([
-        selected,
+        'react-flow__node',
-        selectable: isSelectable,
+        `react-flow__node-${type}`,
-      });
+        className,
+        {
+          selected,
+          selectable: isSelectable,
+        },
+      ]);
       const node = { id, type, position, data };
       const onMouseEnterHandler = useMemo(() => {
         if (!onMouseEnter || isDragging) {

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -0,0 +1,56 @@
+import React, { ReactNode } from 'react';
+
+interface MarkerProps {
+  id: string;
+  children: ReactNode;
+}
+
+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 {
+  color: string;
+}
+
+const MarkerDefinitions = ({ color }: MarkerDefinitionsProps) => {
+  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>
+    </defs>
+  );
+};
+
+MarkerDefinitions.displayName = 'MarkerDefinitions';
+
+export default MarkerDefinitions;

src/container/EdgeRenderer/index.tsx

@@ -3,6 +3,7 @@ import React, { memo, CSSProperties } from 'react';
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
+import MarkerDefinitions from './MarkerDefinitions';
 import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements, ConnectionLineType } from '../../types';
 
 interface EdgeRendererProps {
@@ -12,6 +13,8 @@ interface EdgeRendererProps {
   connectionLineType: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   onElementClick?: (element: Node | Edge) => void;
+  arrowHeadColor: string;
+  markerEndId?: string;
 }
 
 interface EdgePositions {
@@ -171,6 +174,7 @@ function renderEdge(
       labelShowBg={edge.labelShowBg}
       labelBgStyle={edge.labelBgStyle}
       style={edge.style}
+      arrowHeadType={edge.arrowHeadType}
       source={sourceId}
       target={targetId}
       sourceHandleId={sourceHandleId}
@@ -182,6 +186,7 @@ function renderEdge(
       sourcePosition={sourcePosition}
       targetPosition={targetPosition}
       elementsSelectable={elementsSelectable}
+      markerEndId={props.markerEndId}
     />
   );
 }
@@ -197,7 +202,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
   const nodesConnectable = useStoreState((s) => s.nodesConnectable);
   const elementsSelectable = useStoreState((s) => s.elementsSelectable);
 
-  const { width, height, connectionLineStyle, connectionLineType } = props;
+  const { width, height, connectionLineStyle, connectionLineType, arrowHeadColor } = props;
 
   if (!width) {
     return null;
@@ -208,6 +213,7 @@ const EdgeRenderer = memo((props: EdgeRendererProps) => {
 
   return (
     <svg width={width} height={height} className="react-flow__edges">
+      <MarkerDefinitions color={arrowHeadColor} />
       <g transform={transformStyle}>
         {edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements, elementsSelectable))}
         {renderConnectionLine && (

src/container/EdgeRenderer/utils.ts

@@ -1,9 +1,6 @@
 import { ComponentType } from 'react';
 
-import StraightEdge from '../../components/Edges/StraightEdge';
+import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
-import BezierEdge from '../../components/Edges/BezierEdge';
-import StepEdge from '../../components/Edges/StepEdge';
-import SmoothStepEdge from '../../components/Edges/SmoothStepEdge';
 import wrapEdge from '../../components/Edges/wrapEdge';
 
 import { EdgeTypesType, EdgeCompProps } from '../../types';

src/container/GraphView/index.tsx

@@ -52,6 +52,9 @@ export interface GraphViewProps {
   minZoom: number;
   maxZoom: number;
   defaultZoom: number;
+  arrowHeadColor: string;
+  markerEndId?: string;
+  zoomOnScroll: boolean;
 }
 
 const GraphView = memo(
@@ -84,6 +87,9 @@ const GraphView = memo(
     minZoom,
     maxZoom,
     defaultZoom,
+    arrowHeadColor,
+    markerEndId,
+    zoomOnScroll,
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
@@ -154,7 +160,7 @@ const GraphView = memo(
       };
     }, []);
 
-    useD3Zoom({ zoomPane, onMove, selectionKeyPressed });
+    useD3Zoom({ zoomPane, onMove, selectionKeyPressed, zoomOnScroll });
 
     useEffect(() => {
       if (d3Initialised && onLoad) {
@@ -212,6 +218,8 @@ const GraphView = memo(
           onElementClick={onElementClick}
           connectionLineType={connectionLineType}
           connectionLineStyle={connectionLineStyle}
+          arrowHeadColor={arrowHeadColor}
+          markerEndId={markerEndId}
         />
         <UserSelection selectionKeyPressed={selectionKeyPressed} />
         {nodesSelectionActive && <NodesSelection />}

src/container/ReactFlow/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
 
@@ -14,10 +14,7 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import { createNodeTypes } from '../NodeRenderer/utils';
 import SelectionListener from '../../components/SelectionListener';
-import BezierEdge from '../../components/Edges/BezierEdge';
+import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../components/Edges';
-import StraightEdge from '../../components/Edges/StraightEdge';
-import StepEdge from '../../components/Edges/StepEdge';
-import SmoothStepEdge from '../../components/Edges/SmoothStepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import Wrapper from './Wrapper';
 import {
@@ -63,6 +60,9 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   minZoom: number;
   maxZoom: number;
   defaultZoom: number;
+  arrowHeadColor: string;
+  markerEndId?: string;
+  zoomOnScroll: boolean
 }
 
 const ReactFlow = ({
@@ -98,12 +98,16 @@ const ReactFlow = ({
   minZoom,
   maxZoom,
   defaultZoom,
+  arrowHeadColor,
+  markerEndId,
+  zoomOnScroll
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
+  const reactFlowClasses = cc(['react-flow', className]);
 
   return (
-    <div style={style} className={cx('react-flow', className)}>
+    <div style={style} className={reactFlowClasses}>
       <Wrapper>
         <GraphView
           onLoad={onLoad}
@@ -134,6 +138,9 @@ const ReactFlow = ({
           minZoom={minZoom}
           maxZoom={maxZoom}
           defaultZoom={defaultZoom}
+          arrowHeadColor={arrowHeadColor}
+          markerEndId={markerEndId}
+          zoomOnScroll={zoomOnScroll}
         />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
@@ -169,6 +176,8 @@ ReactFlow.defaultProps = {
   minZoom: 0.5,
   maxZoom: 2,
   defaultZoom: 1,
+  arrowHeadColor: '#bbb',
+  zoomOnScroll: true
 };
 
 export default ReactFlow;

src/hooks/useD3Zoom.ts

@@ -6,10 +6,11 @@ import { useStoreState, useStoreActions } from '../store/hooks';
 interface UseD3ZoomParams {
   zoomPane: MutableRefObject<Element | null>;
   selectionKeyPressed: boolean;
+  zoomOnScroll: boolean;
   onMove?: () => void;
 }
 
-export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
+export default ({ zoomPane, onMove, zoomOnScroll, selectionKeyPressed }: UseD3ZoomParams): void => {
   const d3Zoom = useStoreState((s) => s.d3Zoom);
 
   const initD3 = useStoreActions((actions) => actions.initD3);
@@ -31,6 +32,10 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
             return;
           }
 
+          if (!zoomOnScroll && event.sourceEvent.type === 'wheel') {
+            return;
+          }
+
           updateTransform(event.transform);
 
           if (onMove) {
@@ -39,5 +44,5 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
         });
       }
     }
-  }, [selectionKeyPressed, d3Zoom]);
+  }, [selectionKeyPressed, zoomOnScroll, d3Zoom]);
 };

src/types/index.ts

@@ -42,6 +42,11 @@ export interface Node {
   sourcePosition?: Position;
 }
 
+export enum ArrowHeadType {
+  Arrow = 'arrow',
+  ArrowClosed = 'arrowclosed',
+}
+
 export interface Edge {
   id: ElementId;
   type?: string;
@@ -53,6 +58,7 @@ export interface Edge {
   labelBgStyle?: CSSProperties;
   style?: CSSProperties;
   animated?: boolean;
+  arrowHeadType?: ArrowHeadType;
 }
 
 export enum BackgroundVariant {
@@ -82,6 +88,8 @@ export interface EdgeProps {
   labelShowBg?: boolean;
   labelBgStyle?: CSSProperties;
   style?: CSSProperties;
+  arrowHeadType?: ArrowHeadType;
+  markerEndId?: string;
 }
 
 export interface EdgeBezierProps extends EdgeProps {