From 4a3a6a3a629b249e94d8a1db1335e319d323a6bf Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 30 Mar 2021 12:20:44 +0200
Subject: [PATCH] refactor(lib): forward ref closes #1050

---
 src/container/ReactFlow/index.tsx | 309 +++++++++++++++---------------
 1 file changed, 158 insertions(+), 151 deletions(-)

diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 809fef98..e91ae27f 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent } from 'react';
+import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent, forwardRef } from 'react';
 import cc from 'classcat';
 
 import GraphView from '../GraphView';
@@ -119,157 +119,164 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   edgeTypesId?: string;
 }
 
-const ReactFlow = ({
-  elements = [],
-  className,
-  nodeTypes = defaultNodeTypes,
-  edgeTypes = defaultEdgeTypes,
-  onElementClick,
-  onLoad,
-  onMove,
-  onMoveStart,
-  onMoveEnd,
-  onElementsRemove,
-  onConnect,
-  onConnectStart,
-  onConnectStop,
-  onConnectEnd,
-  onNodeMouseEnter,
-  onNodeMouseMove,
-  onNodeMouseLeave,
-  onNodeContextMenu,
-  onNodeDoubleClick,
-  onNodeDragStart,
-  onNodeDrag,
-  onNodeDragStop,
-  onSelectionChange,
-  onSelectionDragStart,
-  onSelectionDrag,
-  onSelectionDragStop,
-  onSelectionContextMenu,
-  connectionMode = ConnectionMode.Strict,
-  connectionLineType = ConnectionLineType.Bezier,
-  connectionLineStyle,
-  connectionLineComponent,
-  deleteKeyCode = 'Backspace',
-  selectionKeyCode = 'Shift',
-  multiSelectionKeyCode = 'Meta',
-  zoomActivationKeyCode = 'Meta',
-  snapToGrid = false,
-  snapGrid = [15, 15],
-  onlyRenderVisibleElements = true,
-  selectNodesOnDrag = true,
-  nodesDraggable,
-  nodesConnectable,
-  elementsSelectable,
-  minZoom,
-  maxZoom,
-  defaultZoom = 1,
-  defaultPosition = [0, 0],
-  translateExtent,
-  nodeExtent,
-  arrowHeadColor = '#b1b1b7',
-  markerEndId,
-  zoomOnScroll = true,
-  zoomOnPinch = true,
-  panOnScroll = false,
-  panOnScrollSpeed = 0.5,
-  panOnScrollMode = PanOnScrollMode.Free,
-  zoomOnDoubleClick = true,
-  paneMoveable = true,
-  onPaneClick,
-  onPaneScroll,
-  onPaneContextMenu,
-  children,
-  onEdgeUpdate,
-  onEdgeContextMenu,
-  onEdgeMouseEnter,
-  onEdgeMouseMove,
-  onEdgeMouseLeave,
-  edgeUpdaterRadius = 10,
-  nodeTypesId = '1',
-  edgeTypesId = '1',
-  ...rest
-}: ReactFlowProps) => {
-  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
-  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), [edgeTypesId]);
-  const reactFlowClasses = cc(['react-flow', className]);
+export type ReactFlowRefType = HTMLDivElement;
 
-  return (
-    <div {...rest} className={reactFlowClasses}>
-      <Wrapper>
-        <GraphView
-          onLoad={onLoad}
-          onMove={onMove}
-          onMoveStart={onMoveStart}
-          onMoveEnd={onMoveEnd}
-          onElementClick={onElementClick}
-          onNodeMouseEnter={onNodeMouseEnter}
-          onNodeMouseMove={onNodeMouseMove}
-          onNodeMouseLeave={onNodeMouseLeave}
-          onNodeContextMenu={onNodeContextMenu}
-          onNodeDoubleClick={onNodeDoubleClick}
-          onNodeDragStart={onNodeDragStart}
-          onNodeDrag={onNodeDrag}
-          onNodeDragStop={onNodeDragStop}
-          nodeTypes={nodeTypesParsed}
-          edgeTypes={edgeTypesParsed}
-          connectionMode={connectionMode}
-          connectionLineType={connectionLineType}
-          connectionLineStyle={connectionLineStyle}
-          connectionLineComponent={connectionLineComponent}
-          selectionKeyCode={selectionKeyCode}
-          onElementsRemove={onElementsRemove}
-          deleteKeyCode={deleteKeyCode}
-          multiSelectionKeyCode={multiSelectionKeyCode}
-          zoomActivationKeyCode={zoomActivationKeyCode}
-          onConnect={onConnect}
-          onConnectStart={onConnectStart}
-          onConnectStop={onConnectStop}
-          onConnectEnd={onConnectEnd}
-          snapToGrid={snapToGrid}
-          snapGrid={snapGrid}
-          onlyRenderVisibleElements={onlyRenderVisibleElements}
-          nodesDraggable={nodesDraggable}
-          nodesConnectable={nodesConnectable}
-          elementsSelectable={elementsSelectable}
-          selectNodesOnDrag={selectNodesOnDrag}
-          minZoom={minZoom}
-          maxZoom={maxZoom}
-          defaultZoom={defaultZoom}
-          defaultPosition={defaultPosition}
-          translateExtent={translateExtent}
-          nodeExtent={nodeExtent}
-          arrowHeadColor={arrowHeadColor}
-          markerEndId={markerEndId}
-          zoomOnScroll={zoomOnScroll}
-          zoomOnPinch={zoomOnPinch}
-          zoomOnDoubleClick={zoomOnDoubleClick}
-          panOnScroll={panOnScroll}
-          panOnScrollSpeed={panOnScrollSpeed}
-          panOnScrollMode={panOnScrollMode}
-          paneMoveable={paneMoveable}
-          onPaneClick={onPaneClick}
-          onPaneScroll={onPaneScroll}
-          onPaneContextMenu={onPaneContextMenu}
-          onSelectionDragStart={onSelectionDragStart}
-          onSelectionDrag={onSelectionDrag}
-          onSelectionDragStop={onSelectionDragStop}
-          onSelectionContextMenu={onSelectionContextMenu}
-          onEdgeUpdate={onEdgeUpdate}
-          onEdgeContextMenu={onEdgeContextMenu}
-          onEdgeMouseEnter={onEdgeMouseEnter}
-          onEdgeMouseMove={onEdgeMouseMove}
-          onEdgeMouseLeave={onEdgeMouseLeave}
-          edgeUpdaterRadius={edgeUpdaterRadius}
-        />
-        <ElementUpdater elements={elements} />
-        {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
-        {children}
-      </Wrapper>
-    </div>
-  );
-};
+const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
+  (
+    {
+      elements = [],
+      className,
+      nodeTypes = defaultNodeTypes,
+      edgeTypes = defaultEdgeTypes,
+      onElementClick,
+      onLoad,
+      onMove,
+      onMoveStart,
+      onMoveEnd,
+      onElementsRemove,
+      onConnect,
+      onConnectStart,
+      onConnectStop,
+      onConnectEnd,
+      onNodeMouseEnter,
+      onNodeMouseMove,
+      onNodeMouseLeave,
+      onNodeContextMenu,
+      onNodeDoubleClick,
+      onNodeDragStart,
+      onNodeDrag,
+      onNodeDragStop,
+      onSelectionChange,
+      onSelectionDragStart,
+      onSelectionDrag,
+      onSelectionDragStop,
+      onSelectionContextMenu,
+      connectionMode = ConnectionMode.Strict,
+      connectionLineType = ConnectionLineType.Bezier,
+      connectionLineStyle,
+      connectionLineComponent,
+      deleteKeyCode = 'Backspace',
+      selectionKeyCode = 'Shift',
+      multiSelectionKeyCode = 'Meta',
+      zoomActivationKeyCode = 'Meta',
+      snapToGrid = false,
+      snapGrid = [15, 15],
+      onlyRenderVisibleElements = true,
+      selectNodesOnDrag = true,
+      nodesDraggable,
+      nodesConnectable,
+      elementsSelectable,
+      minZoom,
+      maxZoom,
+      defaultZoom = 1,
+      defaultPosition = [0, 0],
+      translateExtent,
+      nodeExtent,
+      arrowHeadColor = '#b1b1b7',
+      markerEndId,
+      zoomOnScroll = true,
+      zoomOnPinch = true,
+      panOnScroll = false,
+      panOnScrollSpeed = 0.5,
+      panOnScrollMode = PanOnScrollMode.Free,
+      zoomOnDoubleClick = true,
+      paneMoveable = true,
+      onPaneClick,
+      onPaneScroll,
+      onPaneContextMenu,
+      children,
+      onEdgeUpdate,
+      onEdgeContextMenu,
+      onEdgeMouseEnter,
+      onEdgeMouseMove,
+      onEdgeMouseLeave,
+      edgeUpdaterRadius = 10,
+      nodeTypesId = '1',
+      edgeTypesId = '1',
+      ...rest
+    },
+    ref
+  ) => {
+    const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);
+    const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), [edgeTypesId]);
+    const reactFlowClasses = cc(['react-flow', className]);
+
+    return (
+      <div {...rest} ref={ref} className={reactFlowClasses}>
+        <Wrapper>
+          <GraphView
+            onLoad={onLoad}
+            onMove={onMove}
+            onMoveStart={onMoveStart}
+            onMoveEnd={onMoveEnd}
+            onElementClick={onElementClick}
+            onNodeMouseEnter={onNodeMouseEnter}
+            onNodeMouseMove={onNodeMouseMove}
+            onNodeMouseLeave={onNodeMouseLeave}
+            onNodeContextMenu={onNodeContextMenu}
+            onNodeDoubleClick={onNodeDoubleClick}
+            onNodeDragStart={onNodeDragStart}
+            onNodeDrag={onNodeDrag}
+            onNodeDragStop={onNodeDragStop}
+            nodeTypes={nodeTypesParsed}
+            edgeTypes={edgeTypesParsed}
+            connectionMode={connectionMode}
+            connectionLineType={connectionLineType}
+            connectionLineStyle={connectionLineStyle}
+            connectionLineComponent={connectionLineComponent}
+            selectionKeyCode={selectionKeyCode}
+            onElementsRemove={onElementsRemove}
+            deleteKeyCode={deleteKeyCode}
+            multiSelectionKeyCode={multiSelectionKeyCode}
+            zoomActivationKeyCode={zoomActivationKeyCode}
+            onConnect={onConnect}
+            onConnectStart={onConnectStart}
+            onConnectStop={onConnectStop}
+            onConnectEnd={onConnectEnd}
+            snapToGrid={snapToGrid}
+            snapGrid={snapGrid}
+            onlyRenderVisibleElements={onlyRenderVisibleElements}
+            nodesDraggable={nodesDraggable}
+            nodesConnectable={nodesConnectable}
+            elementsSelectable={elementsSelectable}
+            selectNodesOnDrag={selectNodesOnDrag}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
+            defaultZoom={defaultZoom}
+            defaultPosition={defaultPosition}
+            translateExtent={translateExtent}
+            nodeExtent={nodeExtent}
+            arrowHeadColor={arrowHeadColor}
+            markerEndId={markerEndId}
+            zoomOnScroll={zoomOnScroll}
+            zoomOnPinch={zoomOnPinch}
+            zoomOnDoubleClick={zoomOnDoubleClick}
+            panOnScroll={panOnScroll}
+            panOnScrollSpeed={panOnScrollSpeed}
+            panOnScrollMode={panOnScrollMode}
+            paneMoveable={paneMoveable}
+            onPaneClick={onPaneClick}
+            onPaneScroll={onPaneScroll}
+            onPaneContextMenu={onPaneContextMenu}
+            onSelectionDragStart={onSelectionDragStart}
+            onSelectionDrag={onSelectionDrag}
+            onSelectionDragStop={onSelectionDragStop}
+            onSelectionContextMenu={onSelectionContextMenu}
+            onEdgeUpdate={onEdgeUpdate}
+            onEdgeContextMenu={onEdgeContextMenu}
+            onEdgeMouseEnter={onEdgeMouseEnter}
+            onEdgeMouseMove={onEdgeMouseMove}
+            onEdgeMouseLeave={onEdgeMouseLeave}
+            edgeUpdaterRadius={edgeUpdaterRadius}
+          />
+          <ElementUpdater elements={elements} />
+          {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
+          {children}
+        </Wrapper>
+      </div>
+    );
+  }
+);
 
 ReactFlow.displayName = 'ReactFlow';