refactor(store): rename nodeLookup to nodeInternals

xyflow · Nov 4, 2021 · 996b1b5 · 996b1b5
1 parent cc7debf
commit 996b1b5
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 128 deletions.
diff --git a/example/src/Basic/index.tsx b/example/src/Basic/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, MouseEvent, useCallback } from 'react';
+import { useState, MouseEvent, useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,

diff --git a/src/additional-components/MiniMap/index.tsx b/src/additional-components/MiniMap/index.tsx
@@ -29,7 +29,7 @@ const selector = (s: ReactFlowState) => ({
   height: s.height,
   transform: s.transform,
   nodes: s.nodes,
-  nodeLookup: s.nodeLookup,
+  nodeInternals: s.nodeInternals,
 });
 
 const MiniMap = ({
@@ -42,7 +42,13 @@ const MiniMap = ({
   nodeStrokeWidth = 2,
   maskColor = 'rgb(240, 242, 243, 0.7)',
 }: MiniMapProps) => {
-  const { width: containerWidth, height: containerHeight, transform, nodes, nodeLookup } = useStore(selector, shallow);
+  const {
+    width: containerWidth,
+    height: containerHeight,
+    transform,
+    nodes,
+    nodeInternals,
+  } = useStore(selector, shallow);
   const [tX, tY, tScale] = transform;
 
   const mapClasses = cc(['react-flow__minimap', className]);
@@ -85,7 +91,7 @@ const MiniMap = ({
       {nodes
         .filter((node) => !node.isHidden && node.width && node.height)
         .map((node) => {
-          const positionAbsolute = nodeLookup.get(node.id)?.positionAbsolute;
+          const positionAbsolute = nodeInternals.get(node.id)?.positionAbsolute;
 
           return (
             <MiniMapNode

diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx
@@ -6,7 +6,7 @@ import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import {
   ElementId,
-  NodeLookupItem,
+  NodeInternalsItem,
   HandleElement,
   Position,
   ConnectionLineType,
@@ -28,7 +28,7 @@ interface ConnectionLineProps {
   CustomConnectionLineComponent?: ConnectionLineComponent;
 }
 
-const selector = (s: ReactFlowState) => ({ nodeLookup: s.nodeLookup, nodes: s.nodes, transform: s.transform });
+const selector = (s: ReactFlowState) => ({ nodeInternals: s.nodeInternals, nodes: s.nodes, transform: s.transform });
 
 export default ({
   connectionNodeId,
@@ -44,8 +44,8 @@ export default ({
   const nodeId = connectionNodeId;
   const handleId = connectionHandleId;
 
-  const { nodeLookup, nodes, transform } = useStore(selector, shallow);
-  const sourceNodeInternals = useRef<NodeLookupItem | undefined>(nodeLookup.get(nodeId));
+  const { nodeInternals, nodes, transform } = useStore(selector, shallow);
+  const sourceNodeInternals = useRef<NodeInternalsItem | undefined>(nodeInternals.get(nodeId));
   const sourceNode = useRef<Node | undefined>(nodes.find((n) => n.id === nodeId));
 
   if (

diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
@@ -66,12 +66,11 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     const nodeStyle: CSSProperties = useMemo(
       () => ({
         zIndex,
-        // zIndex: isSelected ? zIndex + 1 : zIndex,
         transform: `translate(${xPos}px,${yPos}px)`,
         pointerEvents:
           isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',
         // prevents jumping of nodes on start
-        // opacity: isInitialized ? 1 : 0,
+        opacity: isInitialized ? 1 : 0,
         ...style,
       }),
       [
@@ -87,6 +86,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         onMouseMove,
         onMouseLeave,
         isParentNode,
+        zIndex,
       ]
     );
 

diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
@@ -216,7 +216,7 @@ const selector = (s: ReactFlowState) => ({
   width: s.width,
   height: s.height,
   connectionMode: s.connectionMode,
-  nodeLookup: s.nodeLookup,
+  nodeInternals: s.nodeInternals,
 });
 
 const EdgeRenderer = (props: EdgeRendererProps) => {
@@ -230,9 +230,9 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     width,
     height,
     connectionMode,
-    nodeLookup,
+    nodeInternals,
   } = useStore(selector, shallow);
-  const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeLookup);
+  const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeInternals);
 
   if (!width) {
     return null;
@@ -254,8 +254,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
           {isMaxLevel && <MarkerDefinitions defaultColor={defaultMarkerColor} />}
           <g>
             {edges.map((edge: Edge) => {
-              const sourceNode = nodeLookup.get(edge.source);
-              const targetNode = nodeLookup.get(edge.target);
+              const sourceNode = nodeInternals.get(edge.source);
+              const targetNode = nodeInternals.get(edge.target);
 
               return (
                 <Edge

diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
 import { useStore } from '../../store';
 import { Node, NodeTypesType, ReactFlowState, WrapNodeProps } from '../../types';
 import useVisibleNodes from '../../hooks/useVisibleNodes';
-import useNodeLookupRef from '../../hooks/useNodeLookupRef';
+import useNodeInternalsRef from '../../hooks/useNodeInternalsRef';
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
@@ -34,7 +34,7 @@ const selector = (s: ReactFlowState) => ({
 const NodeRenderer = (props: NodeRendererProps) => {
   const { scale, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions, snapGrid, snapToGrid } =
     useStore(selector, shallow);
-  const nodeLookup = useNodeLookupRef();
+  const nodeInternals = useNodeInternalsRef();
   const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
 
   const resizeObserver = useMemo(() => {
@@ -56,7 +56,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
     <div className="react-flow__nodes react-flow__container">
       {nodes.map((node) => {
         const nodeType = node.type || 'default';
-        const lookupNode = nodeLookup.current.get(node.id);
+        const internals = nodeInternals.current.get(node.id);
 
         if (!props.nodeTypes[nodeType]) {
           console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
@@ -83,8 +83,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
             sourcePosition={node.sourcePosition}
             targetPosition={node.targetPosition}
             isHidden={node.isHidden}
-            xPos={lookupNode?.positionAbsolute?.x || 0}
-            yPos={lookupNode?.positionAbsolute?.y || 0}
+            xPos={internals?.positionAbsolute?.x || 0}
+            yPos={internals?.positionAbsolute?.y || 0}
             isDragging={node.isDragging}
             isInitialized={isInitialized}
             snapGrid={snapGrid}
@@ -106,8 +106,8 @@ const NodeRenderer = (props: NodeRendererProps) => {
             isConnectable={isConnectable}
             resizeObserver={resizeObserver}
             dragHandle={node.dragHandle}
-            zIndex={lookupNode?.treeLevel || 0}
-            isParentNode={!!lookupNode?.isParentNode}
+            zIndex={internals?.treeLevel || 0}
+            isParentNode={!!internals?.isParentNode}
           />
         );
       })}

diff --git a/src/hooks/useNodeInternalsRef.ts b/src/hooks/useNodeInternalsRef.ts
@@ -0,0 +1,14 @@
+import { useRef, useEffect } from 'react';
+
+import { useStoreApi } from '../store';
+
+function useNodeInternalsRef() {
+  const store = useStoreApi();
+  const nodeInternals = useRef(store.getState().nodeInternals);
+
+  useEffect(() => store.subscribe((state) => (nodeInternals.current = state.nodeInternals)), []);
+
+  return nodeInternals;
+}
+
+export default useNodeInternalsRef;
diff --git a/src/hooks/useNodeLookupRef.ts b/src/hooks/useNodeLookupRef.ts
diff --git a/src/hooks/useVisibleEdges.ts b/src/hooks/useVisibleEdges.ts
@@ -2,15 +2,15 @@ import { useCallback } from 'react';
 
 import { useStore } from '../store';
 import { isEdgeVisible } from '../container/EdgeRenderer/utils';
-import { ReactFlowState, NodeLookup, Edge } from '../types';
+import { ReactFlowState, NodeInternals, Edge } from '../types';
 
-function groupEdgesByTreeLevel(edges: Edge[], nodeLookup: NodeLookup) {
+function groupEdgesByTreeLevel(edges: Edge[], nodeInternals: NodeInternals) {
   let maxLevel = -1;
 
   const levelLookup = edges.reduce<Record<string, Edge[]>>((tree, edge) => {
     const treeLevel = Math.max(
-      nodeLookup.get(edge.source)?.treeLevel || 0,
-      nodeLookup.get(edge.target)?.treeLevel || 0
+      nodeInternals.get(edge.source)?.treeLevel || 0,
+      nodeInternals.get(edge.target)?.treeLevel || 0
     );
     if (tree[treeLevel]) {
       tree[treeLevel].push(edge);
@@ -34,7 +34,7 @@ function groupEdgesByTreeLevel(edges: Edge[], nodeLookup: NodeLookup) {
   });
 }
 
-function useVisibleEdges(onlyRenderVisible: boolean, nodeLookup: NodeLookup) {
+function useVisibleEdges(onlyRenderVisible: boolean, nodeInternals: NodeInternals) {
   const edges = useStore(
     useCallback(
       (s: ReactFlowState) => {
@@ -43,8 +43,8 @@ function useVisibleEdges(onlyRenderVisible: boolean, nodeLookup: NodeLookup) {
         }
 
         return s.edges.filter((e) => {
-          const sourceNode = nodeLookup.get(e.source);
-          const targetNode = nodeLookup.get(e.target);
+          const sourceNode = nodeInternals.get(e.source);
+          const targetNode = nodeInternals.get(e.target);
 
           return (
             sourceNode?.width &&
@@ -65,11 +65,11 @@ function useVisibleEdges(onlyRenderVisible: boolean, nodeLookup: NodeLookup) {
           );
         });
       },
-      [onlyRenderVisible, nodeLookup]
+      [onlyRenderVisible, nodeInternals]
     )
   );
 
-  return groupEdgesByTreeLevel(edges, nodeLookup);
+  return groupEdgesByTreeLevel(edges, nodeInternals);
 }
 
 export default useVisibleEdges;