Moves resize observer to app level so it detects window resize

concord-consortium · Apr 2, 2024 · 4c7a6da · 4c7a6da
1 parent 9756928
commit 4c7a6da
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 23 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { clsx } from "clsx";
-
+import { useResizeObserver } from "../hooks/use-resize-observer";
 import { useCODAP } from "../hooks/use-codap";
 import { useGraph } from "../hooks/use-graph";
 import { Graph, orangeColor } from "./graph";
@@ -70,6 +70,8 @@ export const App = () => {
   const prevSequences = useRef<Node[][]>([]);
   const currentSequence = useRef<Node[]>([]);
   const currentSequenceIndex = useRef(0);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const dimensions = useResizeObserver(wrapperRef);
   const animationInterval = useRef<number>();
   const { graph, updateGraph, setGraph } = useGraph();
   const { dragging, outputToDataset, viewMode, setViewMode, notifyStateIsDirty, loadState } = useCODAP({
@@ -79,6 +81,14 @@ export const App = () => {
   });
   const { generate } = useGenerator();
   const innerOutputRef = useRef<HTMLDivElement | null>(null);
+  const [appDimensions, setAppDimensions] = useState({width: 0, height: 0});
+
+  // calculate the app dimensions
+  useEffect(() => {
+    if (dimensions) {
+      setAppDimensions({width: dimensions.width, height: dimensions.height});
+    }
+  }, [dimensions]);
 
   useEffect(() => {
     if (viewMode === "drawing") {
@@ -398,7 +408,7 @@ export const App = () => {
   }
 
   return (
-    <div className={clsx("app", { dragging })}>
+    <div className={clsx("app", { dragging })} ref={wrapperRef}>
       <div className="split">
         <div className="left">
           {viewMode === "drawing"
@@ -415,16 +425,17 @@ export const App = () => {
               />
             :
               <Graph
-              mode="dataset"
-              graph={graph}
-              highlightNode={highlightNode}
-              highlightLoopOnNode={highlightLoopOnNode}
-              highlightEdge={highlightEdge}
-              highlightColor={highlightColor}
-              highlightAllNextNodes={highlightAllNextNodes}
-              allowDragging={true}
-              autoArrange={true}
-            />
+                mode="dataset"
+                graph={graph}
+                highlightNode={highlightNode}
+                highlightLoopOnNode={highlightLoopOnNode}
+                highlightEdge={highlightEdge}
+                highlightColor={highlightColor}
+                highlightAllNextNodes={highlightAllNextNodes}
+                allowDragging={true}
+                autoArrange={true}
+                appDimensions={appDimensions}
+              />
           }
         </div>
         <div className="right">

diff --git a/src/components/graph.tsx b/src/components/graph.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import * as d3 from "d3";
 
-import { useResizeObserver } from "../hooks/use-resize-observer";
 import { Edge, GraphData, Node } from "../type";
 import { ViewMode } from "../hooks/use-codap";
 
@@ -34,6 +33,7 @@ type Props = {
   autoArrange: boolean;
   rubberBand?: RubberBand;
   drawingMode?: DrawingMode;
+  appDimensions?: {width: number, height: number};
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
   onNodeClick?: (id: string, onLoop?: boolean) => void;
@@ -217,23 +217,21 @@ const lineDashArray = (edge: D3Edge) => edge.value ? "" : "4";
 
 export const Graph = (props: Props) => {
   const {graph, highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
-         highlightColor, allowDragging, autoArrange, mode, rubberBand, drawingMode,
+         highlightColor, allowDragging, autoArrange, mode, rubberBand, drawingMode, appDimensions,
          onClick, onMouseUp, onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop} = props;
   const svgRef = useRef<SVGSVGElement | null>(null);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const dimensions = useResizeObserver(wrapperRef);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(appDimensions?.width || 0);
+  const [height, setHeight] = useState(appDimensions?.height || 0);
   const [d3Graph, setD3Graph] = useState<D3Graph>({nodes: [], edges: []});
   const waitForDoubleRef = useRef<number|undefined>(undefined);
 
   // calculate the svg dimensions
   useEffect(() => {
-    if (dimensions) {
-      setWidth(dimensions.width);
-      setHeight(dimensions.height - 5);
+    if (appDimensions) {
+      setWidth(appDimensions.width);
+      setHeight(appDimensions.height - 5);
     }
-  }, [dimensions]);
+  }, [appDimensions]);
 
   // create the d3 graph info
   useEffect(() => {
@@ -668,7 +666,7 @@ export const Graph = (props: Props) => {
   const viewBox = mode === "drawing" ? `0 0 ${width} ${height}` : `${-width / 2} ${-height / 2} ${width} ${height}`;
 
   return (
-    <div className="graph" ref={wrapperRef} onClick={handleClick} onMouseUp={handleMouseUp}>
+    <div className="graph" onClick={handleClick} onMouseUp={handleMouseUp}>
       <svg
         width={width}
         height={height}