alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(react/svelte): use node lookup for perf improvement

Browse Source
This commit is contained in:
moklick
2023-11-13 16:43:57 +01:00
parent 6e1e702cf3
commit a147a20f6e
22 changed files with 127 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/components/ConnectionLine/index.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const ConnectionLine = ({
const { fromNode, handleId, toX, toY, connectionMode } = useStore(
useCallback(
(s: ReactFlowStore) => ({
fromNode: s.nodes.find((n) => n.id === nodeId),
fromNode: s.nodesLookup.get(nodeId),
handleId: s.connectionStartHandle?.handleId,
toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
packages/react/src/components/Edges/wrapEdge.tsx
+3 -3
View File
@@ -53,9 +53,9 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const [updateHover, setUpdateHover] = useState<boolean>(false);
const [updating, setUpdating] = useState<boolean>(false);
const store = useStoreApi();
const edgePosition = useStore((state) => {
const sourceNode = state.nodes.find((n) => n.id === source);
const targetNode = state.nodes.find((n) => n.id === target);
const edgePosition = useStore(function edgeSelector(state) {
const sourceNode = state.nodesLookup.get(source);
const targetNode = state.nodesLookup.get(target);
if (!sourceNode || !targetNode) {
return null;