ENG-1496 Canvas editor/store instance stale (#872)

* working fix for Canvas editor/store instance stale

* comment

* ENG-13-- Update pnpm-lock and pnpm-workspace to include patch for @tldraw/state@2.4.6 (#873)

Author: mdroidian

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

@@ -52,9 +52,6 @@ import {
   StateNode,
   DefaultSpinner,
   Box,
-  MigrationSequence,
-  TLAnyBindingUtilConstructor,
-  TLAnyShapeUtilConstructor,
 } from "tldraw";
 import "tldraw/tldraw.css";
 import tldrawStyles from "./tldrawStyles";
@@ -71,7 +68,6 @@ import {
   BaseDiscourseNodeUtil,
   DiscourseNodeShape,
   createNodeShapeTools,
-  createNodeShapeUtils,
 } from "./DiscourseNodeUtil";
 import { useRoamStore } from "./useRoamStore";
 import {
@@ -87,21 +83,12 @@ import isLiveBlock from "roamjs-components/queries/isLiveBlock";
 import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import renderToast from "roamjs-components/components/Toast";
-import {
-  createAllReferencedNodeUtils,
-  createAllRelationShapeUtils,
-} from "./DiscourseRelationShape/DiscourseRelationUtil";
 import {
   AddReferencedNodeType,
   createAllReferencedNodeTools,
   createAllRelationShapeTools,
 } from "./DiscourseRelationShape/DiscourseRelationTool";
-import {
-  createAllReferencedNodeBindings,
-  createAllRelationBindings,
-} from "./DiscourseRelationShape/DiscourseRelationBindings";
 import ConvertToDialog from "./ConvertToDialog";
-import { createMigrations } from "./DiscourseRelationShape/discourseRelationMigrations";
 import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import { CanvasDrawerPanel } from "./CanvasDrawer";
 import { ClipboardPanel, ClipboardProvider } from "./Clipboard";
@@ -121,6 +108,10 @@ import {
   getEffectiveCanvasSyncMode,
   setCanvasSyncMode,
 } from "./canvasSyncMode";
+import {
+  CanvasStoreAdapterArgs,
+  useCanvasStoreAdapterArgs,
+} from "./useCanvasStoreAdapterArgs";
 import posthog from "posthog-js";
 
 declare global {
@@ -269,15 +260,6 @@ const TldrawCanvas = ({ title }: { title: string }) => {
   );
 };
 
-type CanvasStoreAdapterArgs = {
-  pageUid: string;
-  migrations: MigrationSequence[];
-  customShapeUtils: readonly TLAnyShapeUtilConstructor[];
-  customBindingUtils: readonly TLAnyBindingUtilConstructor[];
-  customShapeTypes: string[];
-  customBindingTypes: string[];
-};
-
 type CanvasStoreAdapterResult = {
   store: TLStore | TLStoreWithStatus | null;
   needsUpgrade: boolean;
@@ -715,17 +697,19 @@ const TldrawCanvasShared = ({
     onCanvasSyncModeChange,
   });
 
-  // UTILS
-  const discourseNodeUtils = createNodeShapeUtils(allNodes);
-  const discourseRelationUtils = createAllRelationShapeUtils(allRelationIds);
-  const referencedNodeUtils = createAllReferencedNodeUtils(
+  const storeAdapterArgs = useCanvasStoreAdapterArgs({
+    pageUid,
+    isCloudflareSync,
+    allNodes,
+    allRelationIds,
     allAddReferencedNodeByAction,
-  );
-  const customShapeUtils = [
-    ...discourseNodeUtils,
-    ...discourseRelationUtils,
-    ...referencedNodeUtils,
-  ];
+  });
+  const {
+    customShapeUtils,
+    customBindingUtils,
+    customShapeTypes,
+    customBindingTypes,
+  } = storeAdapterArgs;
 
   // TOOLS
   const discourseGraphTool = class DiscourseGraphTool extends StateNode {
@@ -744,19 +728,6 @@ const TldrawCanvasShared = ({
     ...referencedNodeTools,
   ];
 
-  // BINDINGS
-  const relationBindings = createAllRelationBindings(allRelationIds);
-  const referencedNodeBindings = createAllReferencedNodeBindings(
-    allAddReferencedNodeByAction,
-  );
-  const customBindingUtils = [...relationBindings, ...referencedNodeBindings];
-  const customShapeTypes = customShapeUtils
-    .map((s) => (s as unknown as { type?: string }).type)
-    .filter((t): t is string => !!t);
-  const customBindingTypes = customBindingUtils
-    .map((b) => (b as unknown as { type?: string }).type)
-    .filter((t): t is string => !!t);
-
   // UI OVERRIDES
   const uiOverrides = createUiOverrides({
     allNodes,
@@ -774,26 +745,8 @@ const TldrawCanvasShared = ({
       inSidebar: !!containerRef.current?.closest(".rm-sidebar-outline"),
     });
   }, [pageUid]);
-  const arrowShapeMigrations = useMemo(
-    () =>
-      createMigrations({
-        allRelationIds,
-        allAddReferencedNodeActions,
-        allNodeTypes: allNodes.map((node) => node.type),
-      }),
-    [allRelationIds, allAddReferencedNodeActions, allNodes],
-  );
-
-  const migrations = [arrowShapeMigrations];
   const { store, needsUpgrade, performUpgrade, error, isLoading } =
-    useStoreAdapter({
-      migrations,
-      customShapeUtils,
-      customBindingUtils,
-      customShapeTypes,
-      customBindingTypes,
-      pageUid,
-    });
+    useStoreAdapter(storeAdapterArgs);
 
   // ASSETS
   const assetLoading = usePreloadAssets(defaultEditorAssetUrls);

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React from "react";
+import React, { ReactElement } from "react";
 import {
   TLImageShape,
   TLShape,
@@ -16,10 +16,10 @@ import {
   TldrawUiMenuItem,
   DefaultMainMenu,
   TldrawUiMenuGroup,
-  // TldrawUiDropdownMenuItem,
-  // TldrawUiButton,
-  // TldrawUiButtonLabel,
-  // TldrawUiIcon,
+  TldrawUiDropdownMenuItem,
+  TldrawUiButton,
+  TldrawUiButtonLabel,
+  TldrawUiIcon,
   useActions,
   DefaultContextMenu,
   DefaultContextMenuContent,
@@ -52,39 +52,39 @@ import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
 import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
 import { CanvasSyncMode } from "./canvasSyncMode";
 
-// const SyncModeMenuSwitchItem = ({
-//   checked,
-//   disabled,
-//   label,
-//   onToggle,
-// }: {
-//   checked: boolean;
-//   disabled?: boolean;
-//   label: string;
-//   onToggle: () => void;
-// }): React.ReactElement => {
-//   return (
-//     <TldrawUiDropdownMenuItem>
-//       <TldrawUiButton
-//         type="menu"
-//         title={label}
-//         disabled={disabled}
-//         onClick={onToggle}
-//       >
-//         <TldrawUiButtonLabel>{label}</TldrawUiButtonLabel>
-//         <span
-//           style={{
-//             marginLeft: "auto",
-//             display: "inline-flex",
-//             alignItems: "center",
-//           }}
-//         >
-//           <TldrawUiIcon icon={checked ? "toggle-on" : "toggle-off"} small />
-//         </span>
-//       </TldrawUiButton>
-//     </TldrawUiDropdownMenuItem>
-//   );
-// };
+const SyncModeMenuSwitchItem = ({
+  checked,
+  disabled,
+  label,
+  onToggle,
+}: {
+  checked: boolean;
+  disabled?: boolean;
+  label: string;
+  onToggle: () => void;
+}): ReactElement => {
+  return (
+    <TldrawUiDropdownMenuItem>
+      <TldrawUiButton
+        type="menu"
+        title={label}
+        disabled={disabled}
+        onClick={onToggle}
+      >
+        <TldrawUiButtonLabel>{label}</TldrawUiButtonLabel>
+        <span
+          style={{
+            marginLeft: "auto",
+            display: "inline-flex",
+            alignItems: "center",
+          }}
+        >
+          <TldrawUiIcon icon={checked ? "toggle-on" : "toggle-off"} small />
+        </span>
+      </TldrawUiButton>
+    </TldrawUiDropdownMenuItem>
+  );
+};
 
 export const getOnSelectForShape = ({
   shape,
@@ -224,8 +224,8 @@ export const createUiComponents = ({
   allNodes,
   allAddReferencedNodeActions,
   allRelationNames,
-  // canvasSyncMode,
-  // onCanvasSyncModeChange,
+  canvasSyncMode,
+  onCanvasSyncModeChange,
 }: {
   allNodes: DiscourseNode[];
   allRelationNames: string[];
@@ -277,21 +277,21 @@ export const createUiComponents = ({
           </TldrawUiMenuSubmenu>
         );
       };
-      // const onToggleSyncMode = (): void => {
-      //   const nextMode: CanvasSyncMode =
-      //     canvasSyncMode === "sync" ? "local" : "sync";
-      //   onCanvasSyncModeChange(nextMode);
-      // };
+      const onToggleSyncMode = (): void => {
+        const nextMode: CanvasSyncMode =
+          canvasSyncMode === "sync" ? "local" : "sync";
+        onCanvasSyncModeChange(nextMode);
+      };
 
       return (
         <DefaultMainMenu>
-          {/* <TldrawUiMenuGroup id="sync-mode"> */}
-          {/* <SyncModeMenuSwitchItem
+          <TldrawUiMenuGroup id="sync-mode">
+            <SyncModeMenuSwitchItem
               label="(Beta) Use cloud canvas"
               checked={canvasSyncMode === "sync"}
               onToggle={onToggleSyncMode}
-            /> */}
-          {/* </TldrawUiMenuGroup> */}
+            />
+          </TldrawUiMenuGroup>
           <EditSubmenu />
           <CustomViewMenu /> {/* Replaced <ViewSubmenu /> */}
           <ExportFileContentSubMenu />