From b1be0eb4d02d985d2dc150622619fe671b6df5cd Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 13 Sep 2019 17:01:56 +0200
Subject: [PATCH] feat(nodes): automatic resize

---
 src/NodeRenderer/NodeTypes/wrapNode.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js
index 1d7ecd94..0b077f7b 100644
--- a/src/NodeRenderer/NodeTypes/wrapNode.js
+++ b/src/NodeRenderer/NodeTypes/wrapNode.js
@@ -98,14 +98,33 @@ export default NodeComponent => {
     const nodeClasses = cx('react-graph__node', { selected });
     const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
 
-    useEffect(() => {
+    const updateNode = () => {
+      const storeState = store.getState()
       const bounds = nodeElement.current.getBoundingClientRect();
       const dimensions = getDimensions(nodeElement.current);
       const handleBounds = {
-        source: getHandleBounds('.source', nodeElement.current, bounds, transform[2]),
-        target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
+        source: getHandleBounds('.source', nodeElement.current, bounds, storeState.transform[2]),
+        target: getHandleBounds('.target', nodeElement.current, bounds, storeState.transform[2])
       };
       store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
+    }
+
+    useEffect(() => {
+      updateNode();
+
+      if (ResizeObserver) {
+        const resizeObserver = new ResizeObserver(entries => {
+          for (let entry of entries) {
+            updateNode();
+          }
+        });
+
+        resizeObserver.observe(nodeElement.current);
+      }
+
+      return () => {
+        resizeObserver.unobserve(nodeElement.current);
+      }
     }, []);
 
     return (