From e909bdebbe24a04503bb62de31f220cc61d4f386 Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.a.c.collaris@uu.nl>
Date: Wed, 14 Aug 2024 08:45:21 +0000
Subject: [PATCH] fix: ensure matrix vis is properly resized to its parent view
---
.../matrixvis/components/MatrixPixi.tsx | 17 ++++++-----------
1 file changed, 6 insertions(+), 11 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
index a6d98b55f..e1e82846d 100644
--- a/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/matrixvis/components/MatrixPixi.tsx
@@ -91,10 +91,9 @@ export const MatrixPixi = (props: Props) => {
let app: Application;
function resize() {
- if (app == null) return;
-
const width = ref?.current?.clientWidth || 1000;
const height = ref?.current?.clientHeight || 1000;
+
app.renderer.resize(width, height);
if (viewport.current) {
viewport.current.screenWidth = width;
@@ -110,15 +109,6 @@ export const MatrixPixi = (props: Props) => {
app.render();
}
- useEffect(() => {
- if (!ref.current) return;
- const resizeObserver = new ResizeObserver(() => {
- resize();
- });
- resizeObserver.observe(ref.current);
- return () => resizeObserver.disconnect(); // clean up
- }, []);
-
useEffect(() => {
// console.log('graph changed', props.graph, ref.current, ref.current.children.length > 0, imperative.current);
if (props.graph && ref.current && ref.current.children.length > 0) {
@@ -280,6 +270,11 @@ export const MatrixPixi = (props: Props) => {
resolution: window.devicePixelRatio || 1,
view: canvas.current as HTMLCanvasElement,
});
+
+ const resizeObserver = new ResizeObserver(() => {
+ resize();
+ });
+ resizeObserver.observe(ref.current as HTMLDivElement);
}
if (svg.current != null) {
--
GitLab