From 5e28762f53eba2f4f28271c014856b7357e414ea Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 10 Nov 2020 17:06:18 +0100
Subject: [PATCH] refactor(nodes): don't re-render on pan #677

---
 src/components/Nodes/wrapNode.tsx    | 4 ++--
 src/container/NodeRenderer/index.tsx | 8 ++++----
 src/types/index.ts                   | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 5e69704b..4e8bfba6 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -12,7 +12,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     id,
     type,
     data,
-    transform,
+    scale,
     xPos,
     yPos,
     selected,
@@ -199,7 +199,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         onStart={onDragStart}
         onDrag={onDrag}
         onStop={onDragStop}
-        scale={transform[2]}
+        scale={scale}
         disabled={!isDraggable}
         cancel=".nodrag"
         nodeRef={nodeElement}
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 66125c1d..8faf9cb6 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -2,7 +2,7 @@ import React, { memo, ComponentType, MouseEvent } from 'react';
 
 import { useStoreState } from '../../store/hooks';
 import { getNodesInside } from '../../utils/graph';
-import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '../../types';
+import { Node, NodeTypesType, WrapNodeProps, Elements, Edge } from '../../types';
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
@@ -22,7 +22,7 @@ interface NodeRendererProps {
 function renderNode(
   node: Node,
   props: NodeRendererProps,
-  transform: Transform,
+  scale: number,
   selectedElements: Elements | null,
   nodesDraggable: boolean,
   nodesConnectable: boolean,
@@ -57,7 +57,7 @@ function renderNode(
       onContextMenu={props.onNodeContextMenu}
       onNodeDragStart={props.onNodeDragStart}
       onNodeDragStop={props.onNodeDragStop}
-      transform={transform}
+      scale={scale}
       selected={isSelected}
       style={node.style}
       className={node.className}
@@ -93,7 +93,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
   return (
     <div className="react-flow__nodes" style={transformStyle}>
       {renderNodes.map((node) =>
-        renderNode(node, props, transform, selectedElements, nodesDraggable, nodesConnectable, elementsSelectable)
+        renderNode(node, props, transform[2], selectedElements, nodesDraggable, nodesConnectable, elementsSelectable)
       )}
     </div>
   );
diff --git a/src/types/index.ts b/src/types/index.ts
index d0aba74a..9f428d2f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -201,7 +201,7 @@ export interface WrapNodeProps {
   type: string;
   data: any;
   selected: boolean;
-  transform: Transform;
+  scale: number;
   xPos: number;
   yPos: number;
   isSelectable: boolean;