Modified getDimensions to use getBoundingClientRect

pjaspinski · Aug 18, 2021 · b36c0e0 · b36c0e0
1 parent fc090a8
commit b36c0e0
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/dist/ReactFlow.esm.js b/dist/ReactFlow.esm.js
diff --git a/dist/ReactFlow.esm.js.map b/dist/ReactFlow.esm.js.map
diff --git a/dist/ReactFlow.js b/dist/ReactFlow.js
diff --git a/dist/ReactFlow.js.map b/dist/ReactFlow.js.map
diff --git a/dist/utils/index.d.ts b/dist/utils/index.d.ts
@@ -1,5 +1,5 @@
-import { DraggableEvent } from 'react-draggable';
 import { MouseEvent as ReactMouseEvent } from 'react';
+import { DraggableEvent } from 'react-draggable';
 import { Dimensions, XYPosition } from '../types';
 export declare const isInputDOMNode: (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => boolean;
 export declare const getDimensions: (node: HTMLDivElement) => Dimensions;

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,7 +1,7 @@
-import { DraggableEvent } from 'react-draggable';
 import { MouseEvent as ReactMouseEvent } from 'react';
+import { DraggableEvent } from 'react-draggable';
+import { Dimensions, NodeExtent, XYPosition } from '../types';
 
-import { Dimensions, XYPosition, NodeExtent } from '../types';
 
 export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEvent) => {
   const target = e?.target as HTMLElement;
@@ -11,10 +11,15 @@ export const isInputDOMNode = (e: ReactMouseEvent | DraggableEvent | KeyboardEve
   );
 };
 
-export const getDimensions = (node: HTMLDivElement): Dimensions => ({
-  width: node.offsetWidth,
-  height: node.offsetHeight,
-});
+export const getDimensions = (node: HTMLDivElement): Dimensions => {
+  const rect = node.getBoundingClientRect();
+  return {width: rect.width, height: rect.height}
+}
+// ({
+//   width: node.offsetWidth,
+//   height: node.offsetHeight,
+// })
+;
 
 export const clamp = (val: number, min: number = 0, max: number = 1): number => Math.min(Math.max(val, min), max);