From a73c448edcf61fb2b231354e5dbcb3fbafe07024 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 3 Jun 2020 23:10:57 +0200
Subject: [PATCH] feat(renderer): detect dimension changes and adjust container
 closes #279

---
 src/container/GraphView/index.tsx | 17 +++++++++++++++++
 src/store/index.ts                |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 77bf666d..000265b6 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, memo, CSSProperties } from 'react';
 import classnames from 'classnames';
+import { ResizeObserver } from 'resize-observer';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
 import NodeRenderer from '../NodeRenderer';
@@ -108,6 +109,8 @@ const GraphView = memo(
     };
 
     useEffect(() => {
+      let resizeObserver: ResizeObserver;
+
       updateDimensions();
       window.onresize = updateDimensions;
 
@@ -119,8 +122,22 @@ const GraphView = memo(
         updateTransform({ x: 0, y: 0, k: defaultZoom });
       }
 
+      if (rendererNode.current) {
+        resizeObserver = new ResizeObserver((entries) => {
+          for (let _ of entries) {
+            updateDimensions();
+          }
+        });
+
+        resizeObserver.observe(rendererNode.current);
+      }
+
       return () => {
         window.onresize = null;
+
+        if (resizeObserver && rendererNode.current) {
+          resizeObserver.unobserve(rendererNode.current!);
+        }
       };
     }, []);
 
diff --git a/src/store/index.ts b/src/store/index.ts
index ca68b3d0..5d843a83 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -161,7 +161,7 @@ export const storeModel: StoreModel = {
 
   isInteractive: true,
 
-  reactFlowVersion: __REACT_FLOW_VERSION__,
+  reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-',
 
   onConnect: () => {},