refactor(nodewrapper): use offsetWidth

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -3,9 +3,9 @@ import ReactDraggable from 'react-draggable';
 import cx from 'classnames';
 
 import { updateNodeData, updateNodePos, setSelectedElements } from '../../state/actions';
+import { getDimensions, isInputNode } from '../../utils';
 import { Provider } from '../NodeIdContext';
 
-const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 const isHandle = e => (
   e.target.className &&
   e.target.className.includes &&
@@ -20,29 +20,27 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   }
 
   const bounds = handle.getBoundingClientRect();
-  const unscaledWith = Math.round(bounds.width * (1 / k));
-  const unscaledHeight = Math.round(bounds.height * (1 / k));
+  const dimensions = getDimensions(handle);
 
   return {
     x: (bounds.x - parentBounds.x) * (1 / k),
     y: (bounds.y - parentBounds.y) * (1 / k),
-    width: unscaledWith,
-    height: unscaledHeight
+    ...dimensions
   };
 };
 
 const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position, transform }) => {
-  if (isInput(evt) || isHandle(evt)) {
+  if (isInputNode(evt) || isHandle(evt)) {
     return false;
   }
 
   const scaledClient = {
     x: evt.clientX * (1 / [transform[2]]),
     y: evt.clientY * (1 / [transform[2]])
-  }
-  const offsetX = scaledClient.x - position.x - [transform[0]];
-  const offsetY = scaledClient.y - position.y - [transform[1]];
-  const node = { id, type, position, data }
+  };
+  const offsetX = scaledClient.x - position.x - transform[0];
+  const offsetY = scaledClient.y - position.y - transform[1];
+  const node = { id, type, position, data };
 
   dispatch(setSelectedElements({ id, type }));
   setOffset({ x: offsetX, y: offsetY });
@@ -51,14 +49,14 @@ const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position,
 
 const onDrag = (evt, { dispatch, setDragging, id, offset, transform }) => {
   const scaledClient = {
-    x: evt.clientX * (1 / [transform[2]]),
-    y: evt.clientY * (1 / [transform[2]])
+    x: evt.clientX * (1 / transform[2]),
+    y: evt.clientY * (1 / transform[2])
   };
 
   setDragging(true);
   dispatch(updateNodePos(id, {
-    x: scaledClient.x - [transform[0]] - offset.x,
-    y: scaledClient.y - [transform[1]] - offset.y
+    x: scaledClient.x - transform[0] - offset.x,
+    y: scaledClient.y - transform[1] - offset.y
   }));
 };
 
@@ -74,7 +72,7 @@ const onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, d
 };
 
 export default NodeComponent => {
-  const WrappedComp = memo((props) => {
+  const NodeWrapper = memo((props) => {
     const nodeElement = useRef(null);
     const [offset, setOffset] = useState({ x: 0, y: 0 });
     const [isDragging, setDragging] = useState(false);
@@ -89,14 +87,13 @@ export default NodeComponent => {
 
     useEffect(() => {
       const bounds = nodeElement.current.getBoundingClientRect();
-      const unscaledWith = Math.round(bounds.width * (1 / transform[2]));
-      const unscaledHeight = Math.round(bounds.height * (1 / transform[2]));
+      const dimensions = getDimensions(nodeElement.current);
       const handleBounds = {
         source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
         target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
       };
 
-      dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));
+      dispatch(updateNodeData(id, { ...dimensions, handleBounds }));
     }, []);
 
     return (
@@ -125,8 +122,8 @@ export default NodeComponent => {
     );
   });
 
-  WrappedComp.displayName = 'Wrapped Node';
-  WrappedComp.whyDidYouRender = false;
+  NodeWrapper.displayName = 'NodeWrapper';
+  NodeWrapper.whyDidYouRender = false;
 
-  return WrappedComp;
+  return NodeWrapper;
 };