diff --git a/src/components/app.tsx b/src/components/app.tsx index 5b984e0..cffeaf2 100644 --- 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([]); const currentSequence = useRef([]); const currentSequenceIndex = useRef(0); + const wrapperRef = useRef(null); + const dimensions = useResizeObserver(wrapperRef); const animationInterval = useRef(); 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(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 ( -
+
{viewMode === "drawing" @@ -415,16 +425,17 @@ export const App = () => { /> : + mode="dataset" + graph={graph} + highlightNode={highlightNode} + highlightLoopOnNode={highlightLoopOnNode} + highlightEdge={highlightEdge} + highlightColor={highlightColor} + highlightAllNextNodes={highlightAllNextNodes} + allowDragging={true} + autoArrange={true} + appDimensions={appDimensions} + /> }
diff --git a/src/components/graph.tsx b/src/components/graph.tsx index 8413a74..6e6142e 100644 --- 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) => void; onMouseUp?: (e: React.MouseEvent) => 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(null); - const wrapperRef = useRef(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({nodes: [], edges: []}); const waitForDoubleRef = useRef(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 ( -
+