refactor(stlyes): use react-flow__container helper

2021-11-04 15:13:14 +01:00
parent 31ad12ec9c
commit 72f1d8b4e3
12 changed files with 108 additions and 190 deletions
@@ -2,7 +2,7 @@ import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
 import shallow from 'zustand/shallow';

 import { useStore } from '../../store';
-import { Node, NodeTypesType, ReactFlowState, WrapNodeProps, SnapGrid, NodeRendererNode } from '../../types';
+import { Node, NodeTypesType, ReactFlowState, WrapNodeProps } from '../../types';
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import useNodeLookupRef from '../../hooks/useNodeLookupRef';

@@ -22,7 +22,7 @@ interface NodeRendererProps {
 }

 const selector = (s: ReactFlowState) => ({
-  transform: s.transform,
+  scale: s.transform[2],
  nodesDraggable: s.nodesDraggable,
  nodesConnectable: s.nodesConnectable,
  elementsSelectable: s.elementsSelectable,
@@ -31,107 +31,9 @@ const selector = (s: ReactFlowState) => ({
  snapToGrid: s.snapToGrid,
 });

-interface NodeProps extends NodeRendererProps {
-  node: Node;
-  nodeType: string;
-  childNodes?: NodeRendererNode[];
-  xPos?: number;
-  yPos?: number;
-  isDraggable?: boolean;
-  resizeObserver: ResizeObserver | null;
-  scale: number;
-  snapToGrid: boolean;
-  snapGrid: SnapGrid;
-  nodesDraggable: boolean;
-  nodesConnectable: boolean;
-  elementsSelectable: boolean;
-  treeLevel?: number;
-  isParentNode?: boolean;
-}
-
-function Node({
-  node,
-  childNodes,
-  nodeType,
-  isDraggable,
-  resizeObserver,
-  scale,
-  snapToGrid,
-  snapGrid,
-  nodesDraggable,
-  nodesConnectable,
-  elementsSelectable,
-  treeLevel = 0,
-  xPos,
-  yPos,
-  isParentNode = false,
-  ...props
-}: NodeProps) {
-  // const onNodesChange = useStore((s) => s.onNodesChange);
-  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
-  const isNodeDraggable =
-    typeof isDraggable !== 'undefined'
-      ? isDraggable
-      : !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
-  const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
-  const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
-  const isInitialized =
-    node.width !== null &&
-    node.height !== null &&
-    typeof node.width !== 'undefined' &&
-    typeof node.height !== 'undefined';
-
-  return (
-    <NodeComponent
-      id={node.id}
-      className={node.className}
-      style={node.style}
-      type={nodeType}
-      data={node.data}
-      sourcePosition={node.sourcePosition}
-      targetPosition={node.targetPosition}
-      isHidden={node.isHidden}
-      xPos={xPos || 0}
-      yPos={yPos || 0}
-      width={node.width}
-      height={node.height}
-      isDragging={node.isDragging}
-      isInitialized={isInitialized}
-      snapGrid={snapGrid}
-      snapToGrid={snapToGrid}
-      selectNodesOnDrag={props.selectNodesOnDrag}
-      onClick={props.onNodeClick}
-      onMouseEnter={props.onNodeMouseEnter}
-      onMouseMove={props.onNodeMouseMove}
-      onMouseLeave={props.onNodeMouseLeave}
-      onContextMenu={props.onNodeContextMenu}
-      onNodeDoubleClick={props.onNodeDoubleClick}
-      onNodeDragStart={props.onNodeDragStart}
-      onNodeDrag={props.onNodeDrag}
-      onNodeDragStop={props.onNodeDragStop}
-      scale={scale}
-      isSelected={!!node.isSelected}
-      isDraggable={isNodeDraggable}
-      isSelectable={isSelectable}
-      isConnectable={isConnectable}
-      resizeObserver={resizeObserver}
-      dragHandle={node.dragHandle}
-      zIndex={treeLevel}
-      isParentNode={isParentNode}
-    />
-  );
-}
-
 const NodeRenderer = (props: NodeRendererProps) => {
-  const {
-    transform,
-    nodesDraggable,
-    nodesConnectable,
-    elementsSelectable,
-    updateNodeDimensions,
-    snapGrid,
-    snapToGrid,
-  } = useStore(selector, shallow);
+  const { scale, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions, snapGrid, snapToGrid } =
+    useStore(selector, shallow);
  const nodeLookup = useNodeLookupRef();
  const nodes = useVisibleNodes(props.onlyRenderVisibleElements);

@@ -151,7 +53,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
  }, []);

  return (
-    <div className="react-flow__nodes">
+    <div className="react-flow__nodes react-flow__container">
      {nodes.map((node) => {
        const nodeType = node.type || 'default';
        const lookupNode = nodeLookup.current.get(node.id);
@@ -160,23 +62,51 @@ const NodeRenderer = (props: NodeRendererProps) => {
          console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
        }

+        const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
+        const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
+        const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
+        const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
+        const isInitialized =
+          node.width !== null &&
+          node.height !== null &&
+          typeof node.width !== 'undefined' &&
+          typeof node.height !== 'undefined';
+
        return (
-          <Node
-            key={node.id}
-            node={node}
-            nodeType={nodeType}
-            snapToGrid={snapToGrid}
+          <NodeComponent
+            id={node.id}
+            className={node.className}
+            style={node.style}
+            type={nodeType}
+            data={node.data}
+            sourcePosition={node.sourcePosition}
+            targetPosition={node.targetPosition}
+            isHidden={node.isHidden}
+            xPos={lookupNode?.positionAbsolute?.x || 0}
+            yPos={lookupNode?.positionAbsolute?.y || 0}
+            isDragging={node.isDragging}
+            isInitialized={isInitialized}
            snapGrid={snapGrid}
-            nodesDraggable={nodesDraggable}
-            nodesConnectable={nodesConnectable}
+            snapToGrid={snapToGrid}
+            selectNodesOnDrag={props.selectNodesOnDrag}
+            onClick={props.onNodeClick}
+            onMouseEnter={props.onNodeMouseEnter}
+            onMouseMove={props.onNodeMouseMove}
+            onMouseLeave={props.onNodeMouseLeave}
+            onContextMenu={props.onNodeContextMenu}
+            onNodeDoubleClick={props.onNodeDoubleClick}
+            onNodeDragStart={props.onNodeDragStart}
+            onNodeDrag={props.onNodeDrag}
+            onNodeDragStop={props.onNodeDragStop}
+            scale={scale}
+            isSelected={!!node.isSelected}
+            isDraggable={isDraggable}
+            isSelectable={isSelectable}
+            isConnectable={isConnectable}
            resizeObserver={resizeObserver}
-            elementsSelectable={elementsSelectable}
-            scale={transform[2]}
-            xPos={lookupNode?.positionAbsolute?.x}
-            yPos={lookupNode?.positionAbsolute?.y}
-            treeLevel={lookupNode?.treeLevel}
-            isParentNode={lookupNode?.isParentNode}
-            {...props}
+            dragHandle={node.dragHandle}
+            zIndex={lookupNode?.treeLevel || 0}
+            isParentNode={!!lookupNode?.isParentNode}
          />
        );
      })}