ENG-1494 - Split 3 sync ui (#839)

* fix(roam): harden setHintingShapes against atom reaction cycle errors

* feat(sync-worker): add Cloudflare tldraw sync worker foundation

* feat(roam): add persisted canvas sync mode toggle plumbing

* re-add custom view menu

* .

* order

Author: mdroidian

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

@@ -104,6 +104,12 @@ import { TLRecord } from "@tldraw/tlschema";
 import { WHITE_LOGO_SVG } from "~/icons";
 import { BLOCK_REF_REGEX } from "roamjs-components/dom";
 import { defaultHandleExternalTextContent } from "./defaultHandleExternalTextContent";
+import {
+  CanvasSyncMode,
+  ensureCanvasSyncMode,
+  getEffectiveCanvasSyncMode,
+  setCanvasSyncMode,
+} from "./canvasSyncMode";
 import posthog from "posthog-js";
 
 declare global {
@@ -507,6 +513,22 @@ const TldrawCanvas = ({ title }: { title: string }) => {
     });
   };
 
+  const pageUid = useMemo(() => getPageUidByPageTitle(title), [title]);
+  const [canvasSyncMode, setCanvasSyncModeState] = useState<CanvasSyncMode>(
+    () => getEffectiveCanvasSyncMode({ pageUid }),
+  );
+  useEffect(() => {
+    setCanvasSyncModeState(ensureCanvasSyncMode({ pageUid }));
+  }, [pageUid]);
+
+  const onCanvasSyncModeChange = useCallback(
+    (mode: CanvasSyncMode) => {
+      setCanvasSyncMode({ pageUid, mode });
+      setCanvasSyncModeState(mode);
+    },
+    [pageUid],
+  );
+
   // COMPONENTS
   const defaultEditorComponents: TLEditorComponents = {
     Scribble: TldrawScribble,
@@ -523,6 +545,8 @@ const TldrawCanvas = ({ title }: { title: string }) => {
     allNodes,
     allRelationNames,
     allAddReferencedNodeActions,
+    canvasSyncMode,
+    onCanvasSyncModeChange,
   });
 
   // UTILS
@@ -572,7 +596,6 @@ const TldrawCanvas = ({ title }: { title: string }) => {
   });
 
   // STORE
-  const pageUid = useMemo(() => getPageUidByPageTitle(title), [title]);
   useEffect(() => {
     posthog.capture("Canvas: Opened", {
       pageUid,

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

@@ -0,0 +1,65 @@
+import getBlockProps, { json } from "~/utils/getBlockProps";
+import setBlockProps from "~/utils/setBlockProps";
+
+export type CanvasSyncMode = "local" | "sync";
+
+const QUERY_BUILDER_PROP_KEY = "roamjs-query-builder";
+const CANVAS_SYNC_MODE_KEY = "canvasSyncMode";
+const DEFAULT_CANVAS_SYNC_MODE: CanvasSyncMode = "local";
+
+const isCanvasSyncMode = (value: unknown): value is CanvasSyncMode =>
+  value === "local" || value === "sync";
+
+const getRoamJsQueryBuilderProps = (pageUid: string): Record<string, json> => {
+  const props = getBlockProps(pageUid);
+  const value = props[QUERY_BUILDER_PROP_KEY];
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return value;
+  }
+  return {};
+};
+
+export const getPersistedCanvasSyncMode = ({
+  pageUid,
+}: {
+  pageUid: string;
+}): CanvasSyncMode | null => {
+  const rjsqb = getRoamJsQueryBuilderProps(pageUid);
+  const mode = rjsqb[CANVAS_SYNC_MODE_KEY];
+  return isCanvasSyncMode(mode) ? mode : null;
+};
+
+export const getEffectiveCanvasSyncMode = ({
+  pageUid,
+}: {
+  pageUid: string;
+}): CanvasSyncMode => {
+  return getPersistedCanvasSyncMode({ pageUid }) ?? DEFAULT_CANVAS_SYNC_MODE;
+};
+
+export const setCanvasSyncMode = ({
+  pageUid,
+  mode,
+}: {
+  pageUid: string;
+  mode: CanvasSyncMode;
+}): void => {
+  const rjsqb = getRoamJsQueryBuilderProps(pageUid);
+  setBlockProps(pageUid, {
+    [QUERY_BUILDER_PROP_KEY]: {
+      ...rjsqb,
+      [CANVAS_SYNC_MODE_KEY]: mode,
+    },
+  });
+};
+
+export const ensureCanvasSyncMode = ({
+  pageUid,
+}: {
+  pageUid: string;
+}): CanvasSyncMode => {
+  const mode = getPersistedCanvasSyncMode({ pageUid });
+  if (mode) return mode;
+  setCanvasSyncMode({ pageUid, mode: DEFAULT_CANVAS_SYNC_MODE });
+  return DEFAULT_CANVAS_SYNC_MODE;
+};

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

@@ -16,6 +16,10 @@ import {
   TldrawUiMenuItem,
   DefaultMainMenu,
   TldrawUiMenuGroup,
+  TldrawUiDropdownMenuItem,
+  TldrawUiButton,
+  TldrawUiButtonLabel,
+  TldrawUiIcon,
   useActions,
   DefaultContextMenu,
   DefaultContextMenuContent,
@@ -46,6 +50,41 @@ import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
 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>
+  );
+};
 
 export const getOnSelectForShape = ({
   shape,
@@ -185,10 +224,14 @@ export const createUiComponents = ({
   allNodes,
   allAddReferencedNodeActions,
   allRelationNames,
+  canvasSyncMode,
+  onCanvasSyncModeChange,
 }: {
   allNodes: DiscourseNode[];
   allRelationNames: string[];
   allAddReferencedNodeActions: string[];
+  canvasSyncMode: CanvasSyncMode;
+  onCanvasSyncModeChange: (mode: CanvasSyncMode) => void;
 }): TLUiComponents => {
   return {
     Toolbar: (props) => {
@@ -234,9 +277,21 @@ export const createUiComponents = ({
           </TldrawUiMenuSubmenu>
         );
       };
+      const onToggleSyncMode = (): void => {
+        const nextMode: CanvasSyncMode =
+          canvasSyncMode === "sync" ? "local" : "sync";
+        onCanvasSyncModeChange(nextMode);
+      };
 
       return (
         <DefaultMainMenu>
+          <TldrawUiMenuGroup id="sync-mode">
+            <SyncModeMenuSwitchItem
+              label="Use cloud canvas"
+              checked={canvasSyncMode === "sync"}
+              onToggle={onToggleSyncMode}
+            />
+          </TldrawUiMenuGroup>
           <EditSubmenu />
           <CustomViewMenu /> {/* Replaced <ViewSubmenu /> */}
           <ExportFileContentSubMenu />