From fa08b237d8b004e8b0adcbfa57ab566fc53f3bd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20G=C3=B6decken?= Date: Tue, 20 Jul 2021 11:40:50 +0200 Subject: [PATCH] Add ResizeObserver to correctly size graph Add container to visualize --- pages/app.js | 24 +++++++++++++++++++----- pages/index.html | 6 ++++++ pages/index.js | 2 +- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/pages/app.js b/pages/app.js index 9f6b1fb..f934af1 100755 --- a/pages/app.js +++ b/pages/app.js @@ -143,13 +143,27 @@ export default function() { graph.paint() bindEvents() + + const resizeGraph = (entries) => { + if (!graph || graph.get("destroyed")) return + graph.changeSize(entries[0].contentRect.width, entries[0].contentRect.height) + } + const ro = new ResizeObserver(resizeGraph) + ro.observe(ref.current) + + return () => { + graph = null + ro.unobserve(ref.current) + }; }, []) return ( -
- { showEdgeTooltip && } - { showNodeTooltip && } - { showNodeContextMenu && } -
+
+
+ {showEdgeTooltip && } + {showNodeTooltip && } + {showNodeContextMenu && } +
+
); } diff --git a/pages/index.html b/pages/index.html index 5a2b575..0ecb52c 100644 --- a/pages/index.html +++ b/pages/index.html @@ -2,6 +2,12 @@ G6 & React +
diff --git a/pages/index.js b/pages/index.js index dfb3b8b..8068b09 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,5 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './tutorital.jsx'; +import App from './app.js'; ReactDOM.render(, document.getElementById('container'));