Skip to content

Commit 82a46da

Browse files
mdroidianmdroidian
authored
ENG-1497 - Canvas editor/store instance stale hotfix (#841)
* remove useMemos and sync flag * .
1 parent 1004336 commit 82a46da

2 files changed

Lines changed: 108 additions & 181 deletions

File tree

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

Lines changed: 60 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -695,146 +695,76 @@ const TldrawCanvasShared = ({
695695
};
696696

697697
// COMPONENTS
698-
const defaultEditorComponents: TLEditorComponents = useMemo(
699-
() => ({
700-
Scribble: TldrawScribble,
701-
CollaboratorScribble: TldrawScribble,
702-
SelectionForeground: TldrawSelectionForeground,
703-
SelectionBackground: TldrawSelectionBackground,
704-
Handles: TldrawHandles,
705-
}),
706-
[],
707-
);
708-
const editorComponents: TLEditorComponents = useMemo(
709-
() => ({
710-
...defaultEditorComponents,
711-
OnTheCanvas: ToastListener,
712-
}),
713-
[defaultEditorComponents],
714-
);
715-
const customUiComponents: TLUiComponents = useMemo(
716-
() =>
717-
createUiComponents({
718-
allNodes,
719-
allRelationNames,
720-
allAddReferencedNodeActions,
721-
canvasSyncMode,
722-
onCanvasSyncModeChange,
723-
}),
724-
[
725-
allNodes,
726-
allRelationNames,
727-
allAddReferencedNodeActions,
728-
canvasSyncMode,
729-
onCanvasSyncModeChange,
730-
],
731-
);
698+
const defaultEditorComponents: TLEditorComponents = {
699+
Scribble: TldrawScribble,
700+
CollaboratorScribble: TldrawScribble,
701+
SelectionForeground: TldrawSelectionForeground,
702+
SelectionBackground: TldrawSelectionBackground,
703+
Handles: TldrawHandles,
704+
};
705+
const editorComponents: TLEditorComponents = {
706+
...defaultEditorComponents,
707+
OnTheCanvas: ToastListener,
708+
};
709+
const customUiComponents: TLUiComponents = createUiComponents({
710+
allNodes,
711+
allRelationNames,
712+
allAddReferencedNodeActions,
713+
canvasSyncMode,
714+
onCanvasSyncModeChange,
715+
});
732716

733717
// UTILS
734-
const discourseNodeUtils = useMemo(
735-
() => createNodeShapeUtils(allNodes),
736-
[allNodes],
737-
);
738-
const discourseRelationUtils = useMemo(
739-
() => createAllRelationShapeUtils(allRelationIds),
740-
[allRelationIds],
741-
);
742-
const referencedNodeUtils = useMemo(
743-
() => createAllReferencedNodeUtils(allAddReferencedNodeByAction),
744-
[allAddReferencedNodeByAction],
745-
);
746-
const customShapeUtils = useMemo(
747-
() => [
748-
...discourseNodeUtils,
749-
...discourseRelationUtils,
750-
...referencedNodeUtils,
751-
],
752-
[discourseNodeUtils, discourseRelationUtils, referencedNodeUtils],
718+
const discourseNodeUtils = createNodeShapeUtils(allNodes);
719+
const discourseRelationUtils = createAllRelationShapeUtils(allRelationIds);
720+
const referencedNodeUtils = createAllReferencedNodeUtils(
721+
allAddReferencedNodeByAction,
753722
);
723+
const customShapeUtils = [
724+
...discourseNodeUtils,
725+
...discourseRelationUtils,
726+
...referencedNodeUtils,
727+
];
754728

755729
// TOOLS
756-
const discourseGraphTool = useMemo(
757-
() =>
758-
class DiscourseGraphTool extends StateNode {
759-
static override id = "discourse-tool";
760-
static override initial = "idle";
761-
},
762-
[],
763-
);
764-
const discourseNodeTools = useMemo(
765-
() => createNodeShapeTools(allNodes),
766-
[allNodes],
767-
);
768-
const discourseRelationTools = useMemo(
769-
() => createAllRelationShapeTools(allRelationNames),
770-
[allRelationNames],
771-
);
772-
const referencedNodeTools = useMemo(
773-
() => createAllReferencedNodeTools(allAddReferencedNodeByAction),
774-
[allAddReferencedNodeByAction],
775-
);
776-
const customTools = useMemo(
777-
() => [
778-
discourseGraphTool,
779-
...discourseNodeTools,
780-
...discourseRelationTools,
781-
...referencedNodeTools,
782-
],
783-
[
784-
discourseGraphTool,
785-
discourseNodeTools,
786-
discourseRelationTools,
787-
referencedNodeTools,
788-
],
730+
const discourseGraphTool = class DiscourseGraphTool extends StateNode {
731+
static override id = "discourse-tool";
732+
static override initial = "idle";
733+
};
734+
const discourseNodeTools = createNodeShapeTools(allNodes);
735+
const discourseRelationTools = createAllRelationShapeTools(allRelationNames);
736+
const referencedNodeTools = createAllReferencedNodeTools(
737+
allAddReferencedNodeByAction,
789738
);
739+
const customTools = [
740+
discourseGraphTool,
741+
...discourseNodeTools,
742+
...discourseRelationTools,
743+
...referencedNodeTools,
744+
];
790745

791746
// BINDINGS
792-
const relationBindings = useMemo(
793-
() => createAllRelationBindings(allRelationIds),
794-
[allRelationIds],
795-
);
796-
const referencedNodeBindings = useMemo(
797-
() => createAllReferencedNodeBindings(allAddReferencedNodeByAction),
798-
[allAddReferencedNodeByAction],
799-
);
800-
const customBindingUtils = useMemo(
801-
() => [...relationBindings, ...referencedNodeBindings],
802-
[relationBindings, referencedNodeBindings],
803-
);
804-
const customShapeTypes = useMemo(
805-
() =>
806-
customShapeUtils
807-
.map((s) => (s as unknown as { type?: string }).type)
808-
.filter((t): t is string => !!t),
809-
[customShapeUtils],
810-
);
811-
const customBindingTypes = useMemo(
812-
() =>
813-
customBindingUtils
814-
.map((b) => (b as unknown as { type?: string }).type)
815-
.filter((t): t is string => !!t),
816-
[customBindingUtils],
747+
const relationBindings = createAllRelationBindings(allRelationIds);
748+
const referencedNodeBindings = createAllReferencedNodeBindings(
749+
allAddReferencedNodeByAction,
817750
);
751+
const customBindingUtils = [...relationBindings, ...referencedNodeBindings];
752+
const customShapeTypes = customShapeUtils
753+
.map((s) => (s as unknown as { type?: string }).type)
754+
.filter((t): t is string => !!t);
755+
const customBindingTypes = customBindingUtils
756+
.map((b) => (b as unknown as { type?: string }).type)
757+
.filter((t): t is string => !!t);
818758

819759
// UI OVERRIDES
820-
const uiOverrides = useMemo(
821-
() =>
822-
createUiOverrides({
823-
allNodes,
824-
allRelationNames,
825-
allAddReferencedNodeByAction,
826-
toggleMaximized: handleMaximizedChange,
827-
setConvertToDialogOpen,
828-
discourseContext,
829-
}),
830-
[
831-
allNodes,
832-
allRelationNames,
833-
allAddReferencedNodeByAction,
834-
handleMaximizedChange,
835-
setConvertToDialogOpen,
836-
],
837-
);
760+
const uiOverrides = createUiOverrides({
761+
allNodes,
762+
allRelationNames,
763+
allAddReferencedNodeByAction,
764+
toggleMaximized: handleMaximizedChange,
765+
setConvertToDialogOpen,
766+
discourseContext,
767+
});
838768

839769
// STORE
840770
useEffect(() => {
@@ -853,10 +783,7 @@ const TldrawCanvasShared = ({
853783
[allRelationIds, allAddReferencedNodeActions, allNodes],
854784
);
855785

856-
const migrations = useMemo(
857-
() => [arrowShapeMigrations],
858-
[arrowShapeMigrations],
859-
);
786+
const migrations = [arrowShapeMigrations];
860787
const { store, needsUpgrade, performUpgrade, error, isLoading } =
861788
useStoreAdapter({
862789
migrations,

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

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ import {
1616
TldrawUiMenuItem,
1717
DefaultMainMenu,
1818
TldrawUiMenuGroup,
19-
TldrawUiDropdownMenuItem,
20-
TldrawUiButton,
21-
TldrawUiButtonLabel,
22-
TldrawUiIcon,
19+
// TldrawUiDropdownMenuItem,
20+
// TldrawUiButton,
21+
// TldrawUiButtonLabel,
22+
// TldrawUiIcon,
2323
useActions,
2424
DefaultContextMenu,
2525
DefaultContextMenuContent,
@@ -52,39 +52,39 @@ import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
5252
import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
5353
import { CanvasSyncMode } from "./canvasSyncMode";
5454

55-
const SyncModeMenuSwitchItem = ({
56-
checked,
57-
disabled,
58-
label,
59-
onToggle,
60-
}: {
61-
checked: boolean;
62-
disabled?: boolean;
63-
label: string;
64-
onToggle: () => void;
65-
}): React.ReactElement => {
66-
return (
67-
<TldrawUiDropdownMenuItem>
68-
<TldrawUiButton
69-
type="menu"
70-
title={label}
71-
disabled={disabled}
72-
onClick={onToggle}
73-
>
74-
<TldrawUiButtonLabel>{label}</TldrawUiButtonLabel>
75-
<span
76-
style={{
77-
marginLeft: "auto",
78-
display: "inline-flex",
79-
alignItems: "center",
80-
}}
81-
>
82-
<TldrawUiIcon icon={checked ? "toggle-on" : "toggle-off"} small />
83-
</span>
84-
</TldrawUiButton>
85-
</TldrawUiDropdownMenuItem>
86-
);
87-
};
55+
// const SyncModeMenuSwitchItem = ({
56+
// checked,
57+
// disabled,
58+
// label,
59+
// onToggle,
60+
// }: {
61+
// checked: boolean;
62+
// disabled?: boolean;
63+
// label: string;
64+
// onToggle: () => void;
65+
// }): React.ReactElement => {
66+
// return (
67+
// <TldrawUiDropdownMenuItem>
68+
// <TldrawUiButton
69+
// type="menu"
70+
// title={label}
71+
// disabled={disabled}
72+
// onClick={onToggle}
73+
// >
74+
// <TldrawUiButtonLabel>{label}</TldrawUiButtonLabel>
75+
// <span
76+
// style={{
77+
// marginLeft: "auto",
78+
// display: "inline-flex",
79+
// alignItems: "center",
80+
// }}
81+
// >
82+
// <TldrawUiIcon icon={checked ? "toggle-on" : "toggle-off"} small />
83+
// </span>
84+
// </TldrawUiButton>
85+
// </TldrawUiDropdownMenuItem>
86+
// );
87+
// };
8888

8989
export const getOnSelectForShape = ({
9090
shape,
@@ -224,8 +224,8 @@ export const createUiComponents = ({
224224
allNodes,
225225
allAddReferencedNodeActions,
226226
allRelationNames,
227-
canvasSyncMode,
228-
onCanvasSyncModeChange,
227+
// canvasSyncMode,
228+
// onCanvasSyncModeChange,
229229
}: {
230230
allNodes: DiscourseNode[];
231231
allRelationNames: string[];
@@ -277,21 +277,21 @@ export const createUiComponents = ({
277277
</TldrawUiMenuSubmenu>
278278
);
279279
};
280-
const onToggleSyncMode = (): void => {
281-
const nextMode: CanvasSyncMode =
282-
canvasSyncMode === "sync" ? "local" : "sync";
283-
onCanvasSyncModeChange(nextMode);
284-
};
280+
// const onToggleSyncMode = (): void => {
281+
// const nextMode: CanvasSyncMode =
282+
// canvasSyncMode === "sync" ? "local" : "sync";
283+
// onCanvasSyncModeChange(nextMode);
284+
// };
285285

286286
return (
287287
<DefaultMainMenu>
288-
<TldrawUiMenuGroup id="sync-mode">
289-
<SyncModeMenuSwitchItem
288+
{/* <TldrawUiMenuGroup id="sync-mode"> */}
289+
{/* <SyncModeMenuSwitchItem
290290
label="(Beta) Use cloud canvas"
291291
checked={canvasSyncMode === "sync"}
292292
onToggle={onToggleSyncMode}
293-
/>
294-
</TldrawUiMenuGroup>
293+
/> */}
294+
{/* </TldrawUiMenuGroup> */}
295295
<EditSubmenu />
296296
<CustomViewMenu /> {/* Replaced <ViewSubmenu /> */}
297297
<ExportFileContentSubMenu />

0 commit comments

Comments
 (0)