From 5547b0d6ccc11f99b1ee2d777f26e0aeec97fd49 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 4 Nov 2021 14:03:22 +0100 Subject: [PATCH] refactor(nodelookup): use as normale store item --- src/components/ConnectionLine/index.tsx | 8 ++++++-- src/container/EdgeRenderer/index.tsx | 5 ++--- src/container/NodeRenderer/index.tsx | 4 ++-- src/hooks/useNodeLookup.ts | 12 ------------ src/store/index.ts | 25 ++++++++++++++++--------- 5 files changed, 26 insertions(+), 28 deletions(-) delete mode 100644 src/hooks/useNodeLookup.ts diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx index 59aac550..24a0f57b 100644 --- a/src/components/ConnectionLine/index.tsx +++ b/src/components/ConnectionLine/index.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState, CSSProperties } from 'react'; +import { useStore } from '../../store'; import { getBezierPath } from '../Edges/BezierEdge'; import { getSmoothStepPath } from '../Edges/SmoothStepEdge'; import { @@ -12,8 +13,9 @@ import { ConnectionLineComponent, HandleType, Node, + ReactFlowState, } from '../../types'; -import useNodeLookup from '../../hooks/useNodeLookup'; + interface ConnectionLineProps { connectionNodeId: ElementId; connectionHandleId: ElementId | null; @@ -27,6 +29,8 @@ interface ConnectionLineProps { CustomConnectionLineComponent?: ConnectionLineComponent; } +const selector = (s: ReactFlowState) => s.nodeLookup; + export default ({ connectionNodeId, connectionHandleId, @@ -39,7 +43,7 @@ export default ({ isConnectable, CustomConnectionLineComponent, }: ConnectionLineProps) => { - const nodeLookup = useNodeLookup(); + const nodeLookup = useStore(selector); const [sourceNode, setSourceNode] = useState(null); const nodeId = connectionNodeId; const handleId = connectionHandleId; diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 6e8ba9c9..66b24aa4 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -17,7 +17,6 @@ import { NodeHandleBounds, } from '../../types'; import useVisibleEdges from '../../hooks/useVisibleEdges'; -import useNodeLookup from '../../hooks/useNodeLookup'; interface EdgeRendererProps { edgeTypes: any; @@ -218,7 +217,7 @@ const selector = (s: ReactFlowState) => ({ width: s.width, height: s.height, connectionMode: s.connectionMode, - nodes: s.nodes, + nodeLookup: s.nodeLookup, }); const EdgeRenderer = (props: EdgeRendererProps) => { @@ -233,8 +232,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => { width, height, connectionMode, + nodeLookup, } = useStore(selector, shallow); - const nodeLookup = useNodeLookup(); const edgeTree = useVisibleEdges(props.onlyRenderVisibleElements, nodeLookup); if (!width) { diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index f4b5fb92..9f8c2880 100644 --- 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, SnapGrid, NodeRendererNode } from '../../types'; import useVisibleNodes from '../../hooks/useVisibleNodes'; -import useNodeLookup from '../../hooks/useNodeLookup'; + interface NodeRendererProps { nodeTypes: NodeTypesType; selectNodesOnDrag: boolean; @@ -131,9 +131,9 @@ const NodeRenderer = (props: NodeRendererProps) => { updateNodeDimensions, snapGrid, snapToGrid, + nodeLookup, } = useStore(selector, shallow); - const nodeLookup = useNodeLookup(); const nodes = useVisibleNodes(props.onlyRenderVisibleElements); const resizeObserver = useMemo(() => { diff --git a/src/hooks/useNodeLookup.ts b/src/hooks/useNodeLookup.ts deleted file mode 100644 index 2d9d695c..00000000 --- a/src/hooks/useNodeLookup.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useRef } from 'react'; - -import { useStoreApi } from '../store'; - -function useNodeLookup() { - const store = useStoreApi(); - const nodeLookup = useRef(store.getState().nodeLookup); - - return nodeLookup.current; -} - -export default useNodeLookup; diff --git a/src/store/index.ts b/src/store/index.ts index 63038415..d139d124 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -28,6 +28,7 @@ import { NodeDimensionChange, NodeLookup, NodeLookupItem, + ElementId, } from '../types'; import { isNode, isEdge, getRectOfNodes, getNodesInside, getConnectedEdges } from '../utils/graph'; import { getHandleBounds } from '../components/Nodes/utils'; @@ -128,9 +129,10 @@ const createStore = () => setNodes: (nodes: Node[]) => { const { nodeLookup } = get(); + const nextNodeLookup = new Map(); nodes.forEach((node) => { - const lookupNode = { + const lookupNode: NodeLookupItem = { ...nodeLookup.get(node.id), width: node.width || null, height: node.height || null, @@ -141,24 +143,24 @@ const createStore = () => if (node.parentNode) { lookupNode.parentNode = node.parentNode; } - nodeLookup.set(node.id, lookupNode); + nextNodeLookup.set(node.id, lookupNode); }); nodes .filter((node) => node.parentNode) .forEach((node) => { - const positionAbsoluteAndTreeLevel = getAbsolutePositionAndTreeLevel(node, nodeLookup, { + const positionAbsoluteAndTreeLevel = getAbsolutePositionAndTreeLevel(node, nextNodeLookup, { ...node.position, treeLevel: node.zIndex || 0, }); - nodeLookup.set(node.parentNode!, { ...nodeLookup.get(node.parentNode!), isParentNode: true }); + nextNodeLookup.set(node.parentNode!, { ...nextNodeLookup.get(node.parentNode!), isParentNode: true }); if (positionAbsoluteAndTreeLevel) { const { treeLevel, x, y } = positionAbsoluteAndTreeLevel; - nodeLookup.set(node.id, { - ...nodeLookup.get(node.id), + nextNodeLookup.set(node.id, { + ...nextNodeLookup.get(node.id), positionAbsolute: { x, y, @@ -168,7 +170,7 @@ const createStore = () => } }); - set({ nodes }); + set({ nodes, nodeLookup: nextNodeLookup }); }, setEdges: (edges: Edge[]) => { set({ edges }); @@ -188,13 +190,16 @@ const createStore = () => if (doUpdate) { const handleBounds = getHandleBounds(update.nodeElement, transform[2]); - nodeLookup.set(node.id, { ...nodeLookup.get(node.id), handleBounds }); + nodeLookup.set(node.id, { + ...nodeLookup.get(node.id), + handleBounds, + ...dimensions, + }); const change = { id: node.id, type: 'dimensions', dimensions, - handleBounds, } as NodeChange; res.push(change); } @@ -203,6 +208,8 @@ const createStore = () => return res; }, []); + set({ nodeLookup: new Map(nodeLookup) }); + onNodesChange?.(nodesToChange); }, updateNodePosition: ({ id, diff, isDragging }: NodeDiffUpdate) => {