ENG-831 - Refactor tldraw maximize to stop canvas jumping around (#423)

* Refactor Tldraw component to handle maximization state and viewport updates

- Introduced `handleMaximizedChange` to manage fullscreen toggling and DOM manipulation.
- Added `updateViewportScreenBounds` for viewport updates using Tldraw's built-in methods.
- Updated styles to support maximized state in Tldraw canvas.
- Removed unnecessary `maximized` state from props in `createUiOverrides`.

* - Renamed `setMaximized` to `toggleMaximized` for clarity in both Tldraw and uiOverrides components.

* Optimize viewport updates in Tldraw component by wrapping DOM measurements in requestAnimationFrame for smoother performance.

Author: mdroidian

apps/roam/src/components/canvas/Tldraw.tsx

@@ -42,6 +42,7 @@ import {
   usePreloadAssets,
   StateNode,
   DefaultSpinner,
+  Box,
 } from "tldraw";
 import "tldraw/tldraw.css";
 import tldrawStyles from "./tldrawStyles";
@@ -129,9 +130,39 @@ const TldrawCanvas = ({ title }: { title: string }) => {
     discourseContext.lastActions,
   );
 
-  const [maximized, setMaximized] = useState(false);
   const [isConvertToDialogOpen, setConvertToDialogOpen] = useState(false);
 
+  const updateViewportScreenBounds = (el: HTMLDivElement) => {
+    // Use tldraw's built-in viewport bounds update with centering
+    requestAnimationFrame(() => {
+      const rect = el.getBoundingClientRect();
+      appRef.current?.updateViewportScreenBounds(
+        new Box(rect.left, rect.top, rect.width, rect.height),
+        true,
+      );
+    });
+  };
+  const handleMaximizedChange = () => {
+    // Direct DOM manipulation to avoid React re-renders
+    if (!containerRef.current) return;
+    const tldrawEl = containerRef.current;
+    const wrapper = tldrawEl.closest(".roam-article, .rm-sidebar-outline");
+
+    if (tldrawEl.classList.contains("relative")) {
+      // Going to fullscreen
+      if (wrapper) wrapper.classList.add("dg-tldraw-maximized");
+      tldrawEl.classList.add("absolute", "inset-0");
+      tldrawEl.classList.remove("relative");
+      updateViewportScreenBounds(tldrawEl);
+    } else {
+      // Going back to normal
+      if (wrapper) wrapper.classList.remove("dg-tldraw-maximized");
+      tldrawEl.classList.add("relative");
+      tldrawEl.classList.remove("absolute", "inset-0");
+      updateViewportScreenBounds(tldrawEl);
+    }
+  };
+
   // Workaround to avoid a race condition when loading a canvas page directly
   // Start false to avoid noisy warnings on first render if timer isn't initialized yet
   const [isPluginReady, setIsPluginReady] = useState(false);
@@ -390,8 +421,7 @@ const TldrawCanvas = ({ title }: { title: string }) => {
     allNodes,
     allRelationNames,
     allAddReferencedNodeByAction,
-    maximized,
-    setMaximized,
+    toggleMaximized: handleMaximizedChange,
     setConvertToDialogOpen,
     discourseContext,
   });
@@ -528,16 +558,11 @@ const TldrawCanvas = ({ title }: { title: string }) => {
 
   return (
     <div
-      className={`roamjs-tldraw-canvas-container z-10 h-full w-full overflow-hidden rounded-md border border-gray-300 bg-white ${maximized ? "absolute inset-0" : "relative"}`}
+      className="roamjs-tldraw-canvas-container relative z-10 h-full w-full overflow-hidden rounded-md border border-gray-300 bg-white"
       ref={containerRef}
       tabIndex={-1}
     >
       <style>{tldrawStyles}</style>
-      <style>
-        {maximized
-          ? "div.roam-body div.roam-app div.roam-main div.roam-article { position: inherit; }"
-          : ""}
-      </style>
 
       {needsUpgrade ? (
         <div className="flex h-full items-center justify-center">

apps/roam/src/components/canvas/tldrawStyles.ts

@@ -1,6 +1,6 @@
 // tldrawStyles.ts because some of these styles need to be inlined
 export const TLDRAW_DATA_ATTRIBUTE = "dg-tldraw-canvas-wrapper";
-export default `
+export default /* css */ `
   /* Hide Roam Blocks only when canvas is present */
   .roam-article[${TLDRAW_DATA_ATTRIBUTE}="true"] .rm-block-children  {
     display: none;
@@ -76,4 +76,11 @@ export default `
   background-size: contain;
   background-repeat: no-repeat;
 }
+
+/* Maximize Tldraw Canvas */
+/* Used in conjunction with tailwind classes on the canvas container */
+.roam-body .roam-app .roam-main .roam-article.dg-tldraw-maximized,
+.roam-body .roam-app .roam-main .rm-sidebar-outline.dg-tldraw-maximized {
+  position: static;
+}
 `;

apps/roam/src/components/canvas/uiOverrides.tsx

@@ -317,16 +317,14 @@ export const createUiOverrides = ({
   allRelationNames,
   allAddReferencedNodeByAction,
   discourseContext,
-  maximized,
-  setMaximized,
+  toggleMaximized,
   setConvertToDialogOpen,
 }: {
   allNodes: DiscourseNode[];
   allRelationNames: string[];
   allAddReferencedNodeByAction: AddReferencedNodeType;
   discourseContext: DiscourseContextType;
-  maximized: boolean;
-  setMaximized: (maximized: boolean) => void;
+  toggleMaximized: () => void;
   setConvertToDialogOpen: (open: boolean) => void;
 }): TLUiOverrides => ({
   tools: (editor, tools) => {
@@ -423,7 +421,7 @@ export const createUiOverrides = ({
       id: "toggle-full-screen",
       label: "action.toggle-full-screen" as TLUiTranslationKey,
       kbd: "!3",
-      onSelect: () => setMaximized(!maximized),
+      onSelect: () => toggleMaximized(),
       readonlyOk: true,
     };