fix: Switch to using single viewbox size [PT-187321121]

src/components/drawing.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { nanoid } from "nanoid";
 
 import { DrawingMode, Graph, Point, RubberBand } from "./graph";
@@ -36,18 +36,25 @@
   const [firstEdgeNode, setFirstEdgeNode] = useState<Node|undefined>(undefined);
   const [rubberBand, setRubberBand] = useState<RubberBand|undefined>(undefined);
   const [selectedNodeForModal, setSelectedNodeForModal] = useState<Node|undefined>(undefined);
+  const widthRef = useRef(0);
+  const heightRef = useRef(0);
 
   const setSelectedNodeId = useCallback((id?: string, skipToggle?: boolean) => {
     if (drawingMode === "select") {
       _setSelectedNodeId(id, skipToggle);
     }
   }, [drawingMode, _setSelectedNodeId]);
 
+  const handleDimensionChange = ({width, height}: {width: number, height: number}) => {
+    widthRef.current = width;
+    heightRef.current = height;
+  };
+
   const translateToGraphPoint = (e: MouseEvent|React.MouseEvent<HTMLDivElement>): Point => {
     // the offsets were determined visually to put the state centered on the mouse
     return {
-      x: e.clientX - 50,
-      y: e.clientY - 12,
+      x: e.clientX - 50 - (widthRef.current / 2),
+      y: e.clientY - 10 - (heightRef.current / 2),
     };
   };
 
@@ -99,7 +106,7 @@
   */
 
   const addNode = useCallback(({x, y}: {x: number, y: number}) => {
     console.log("ADD NODE");
     setGraph(prev => {
       const id = nanoid();
       const label = `State ${prev.nodes.length + 1}`;
@@ -271,6 +278,7 @@
         onEdgeClick={handleEdgeClicked}
         onDragStop={handleDragStop}
         setSelectedNodeId={setSelectedNodeId}
+        onDimensions={handleDimensionChange}
       />
       <DragIcon drawingMode={drawingMode} />
       <NodeModal

src/components/graph.tsx

@@ -58,6 +58,7 @@ type Props = {
   onNodeDoubleClick?: (id: string) => void;
   onEdgeClick?: (options: {from: string, to: string}) => void;
   onDragStop?: (id: string, pos: Point) => void;
+  onDimensions?: (dimensions: {width: number, height: number}) => void;
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
 };
 
@@ -234,9 +235,9 @@ const lineDashArray = (edge: D3Edge) => edge.value ? "" : "4";
 
 export const Graph = (props: Props) => {
   const {graph, highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
-         allowDragging, autoArrange, mode, rubberBand, drawingMode,
+         allowDragging, autoArrange, rubberBand, drawingMode,
          onClick, onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop,
-         selectedNodeId, setSelectedNodeId, animating} = props;
+         selectedNodeId, setSelectedNodeId, animating, onDimensions} = props;
   const svgRef = useRef<SVGSVGElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const dimensions = useResizeObserver(wrapperRef);
@@ -317,9 +318,10 @@ export const Graph = (props: Props) => {
   useEffect(() => {
     if (dimensions) {
       setWidth(dimensions.width);
-      setHeight(dimensions.height - 5);
+      setHeight(dimensions.height);
+      onDimensions?.({width: dimensions.width, height: dimensions.height});
     }
-  }, [dimensions]);
+  }, [dimensions, onDimensions]);
 
   // create the d3 graph info
   useEffect(() => {
@@ -759,14 +761,12 @@ export const Graph = (props: Props) => {
     }
   }, [autoArrange, onClick]);
 
-  const viewBox = mode === "drawing" ? `0 0 ${width} ${height}` : `${-width / 2} ${-height / 2} ${width} ${height}`;
-
   return (
     <div className="graph" ref={wrapperRef} onClick={handleClick}>
       <svg
         width="100%"
         height="calc(100vh - 20px)"
-        viewBox={viewBox}
+        viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
         ref={svgRef}
       />
     </div>