ENG-636 Add auto canvas relations setting to user preferences (#363)

* Add auto canvas relations setting to user preferences

* .

* Update auto canvas relations setting to default to false

* Refactor relation deletion logic in BaseDiscourseNodeUtil to ensure relations are deleted before creating existing relations when auto canvas relations are enabled.

Author: mdroidian

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

@@ -38,6 +38,8 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import { createTextJsxFromSpans } from "./DiscourseRelationShape/helpers";
 import { loadImage } from "~/utils/loadImage";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
+import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
+import { getSetting } from "~/utils/extensionSettings";
 
 // TODO REPLACE WITH TLDRAW DEFAULTS
 // https://github.com/tldraw/tldraw/pull/1580/files
@@ -544,13 +546,19 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
               this.updateProps(shape.id, shape.type, { title: text, uid });
 
               // Update Shape Relations
-              const relationIds = getRelationIds();
-              this.deleteRelationsInCanvas({ shape, relationIds });
-              await this.createExistingRelations({
-                shape,
-                relationIds,
-                finalUid: uid,
-              });
+              const autoCanvasRelations = getSetting<boolean>(
+                AUTO_CANVAS_RELATIONS_KEY,
+                false,
+              );
+              if (autoCanvasRelations) {
+                const relationIds = getRelationIds();
+                this.deleteRelationsInCanvas({ shape, relationIds });
+                await this.createExistingRelations({
+                  shape,
+                  relationIds,
+                  finalUid: uid,
+                });
+              }
 
               editor.setEditingShape(null);
             }}

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

@@ -82,6 +82,8 @@ import { createMigrations } from "./DiscourseRelationShape/discourseRelationMigr
 import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import sendErrorEmail from "~/utils/sendErrorEmail";
 import { TLDRAW_DATA_ATTRIBUTE } from "./tldrawStyles";
+import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
+import { getSetting } from "~/utils/extensionSettings";
 
 declare global {
   interface Window {
@@ -829,9 +831,15 @@ const InsideEditorAndUiContext = ({
         editor.sideEffects.registerAfterCreateHandler("shape", (shape) => {
           const util = editor.getShapeUtil(shape);
           if (util instanceof BaseDiscourseNodeUtil) {
-            void util.createExistingRelations({
-              shape: shape as DiscourseNodeShape,
-            });
+            const autoCanvasRelations = getSetting<boolean>(
+              AUTO_CANVAS_RELATIONS_KEY,
+              false,
+            );
+            if (autoCanvasRelations) {
+              void util.createExistingRelations({
+                shape: shape as DiscourseNodeShape,
+              });
+            }
           }
         });
 

apps/roam/src/components/settings/HomePersonalSettings.tsx

@@ -13,6 +13,7 @@ import {
   hideDiscourseFloatingMenu,
 } from "~/components/DiscourseFloatingMenu";
 import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
+import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
 
 const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const extensionAPI = onloadArgs.extensionAPI;
@@ -143,6 +144,28 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           </>
         }
       />
+      <Checkbox
+        defaultChecked={
+          extensionAPI.settings.get(AUTO_CANVAS_RELATIONS_KEY) === true
+        }
+        onChange={(e) => {
+          const target = e.target as HTMLInputElement;
+          void extensionAPI.settings.set(
+            AUTO_CANVAS_RELATIONS_KEY,
+            target.checked,
+          );
+        }}
+        labelElement={
+          <>
+            Auto Canvas Relations
+            <Description
+              description={
+                "Automatically add discourse relations to canvas when a node is added"
+              }
+            />
+          </>
+        }
+      />
     </div>
   );
 };

apps/roam/src/data/userSettings.ts

@@ -3,3 +3,4 @@ export const DEFAULT_CANVAS_PAGE_FORMAT_KEY = "default-canvas-page-format";
 export const HIDE_METADATA_KEY = "hide-metadata";
 export const DEFAULT_FILTERS_KEY = "default-filters";
 export const QUERY_BUILDER_SETTINGS_KEY = "query-builder-settings";
+export const AUTO_CANVAS_RELATIONS_KEY = "auto-canvas-relations";