[ENG-872] Add ability to change font style and sizing for dn (#551)

trangdoan982 · web-flow · commit 7b4cb5844b84 · 2025-12-17T09:54:47.000-08:00
* current progress

* add font size and styles and recalculate node size

* fix type

* change updating condition

* make sure migration is there when adding new props to shape

* add extra bottom spacing

* change default to match pr comment

* no resize shape
diff --git a/apps/obsidian/src/components/canvas/TldrawViewComponent.tsx b/apps/obsidian/src/components/canvas/TldrawViewComponent.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   defaultShapeUtils,
-  DefaultStylePanel,
   DefaultToolbar,
   DefaultToolbarContent,
   ErrorBoundary,
@@ -13,6 +12,7 @@ import {
   useTools,
   defaultBindingUtils,
   TLPointerEventInfo,
+  DefaultSharePanel,
 } from "tldraw";
 import "tldraw/tldraw.css";
 import {
@@ -408,22 +408,25 @@ export const TldrawPreviewComponent = ({
               ContextMenu: (props) => (
                 <CustomContextMenu canvasFile={file} props={props} />
               ),
-
-              StylePanel: () => {
+              SharePanel: () => {
                 const tools = useTools();
-                const isDiscourseNodeSelected = useIsToolSelected(
+                const isDiscourseNodeToolSelected = useIsToolSelected(
                   tools["discourse-node"],
                 );
-                const isDiscourseRelationSelected = useIsToolSelected(
+                const isDiscourseRelationToolSelected = useIsToolSelected(
                   tools["discourse-relation"],
                 );
-
-                if (!isDiscourseNodeSelected && !isDiscourseRelationSelected) {
-                  return <DefaultStylePanel />;
+                if (
+                  isDiscourseNodeToolSelected ||
+                  isDiscourseRelationToolSelected
+                ) {
+                  return (
+                    <DiscourseToolPanel plugin={plugin} canvasFile={file} />
+                  );
                 }
-
-                return <DiscourseToolPanel plugin={plugin} canvasFile={file} />;
+                return <DefaultSharePanel />;
               },
+
               OnTheCanvas: () => <ToastListener canvasId={file.path} />,
               Toolbar: (props) => {
                 const tools = useTools();
diff --git a/apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx b/apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx
@@ -249,6 +249,8 @@ export const RelationsPanel = ({
         src,
         title: file.basename,
         nodeTypeId: nodeTypeId,
+        size: "m",
+        fontFamily: "sans",
       },
     };
 
diff --git a/apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx b/apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx
@@ -7,6 +7,12 @@ import {
   TLResizeInfo,
   useEditor,
   useValue,
+  DefaultSizeStyle,
+  DefaultFontStyle,
+  TLDefaultSizeStyle,
+  TLDefaultFontStyle,
+  FONT_SIZES,
+  FONT_FAMILIES,
 } from "tldraw";
 import { App, TFile } from "obsidian";
 import { memo, createElement, useEffect } from "react";
@@ -34,6 +40,8 @@ export type DiscourseNodeShape = TLBaseShape<
     title: string;
     nodeTypeId: string;
     imageSrc?: string;
+    size: TLDefaultSizeStyle;
+    fontFamily: TLDefaultFontStyle;
   }
 >;
 
@@ -54,6 +62,8 @@ export class DiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape> {
     title: T.string.optional(),
     nodeTypeId: T.string.nullable().optional(),
     imageSrc: T.string.optional(),
+    size: DefaultSizeStyle,
+    fontFamily: DefaultFontStyle,
   };
 
   getDefaultProps(): DiscourseNodeShape["props"] {
@@ -64,6 +74,8 @@ export class DiscourseNodeUtil extends BaseBoxShapeUtil<DiscourseNodeShape> {
       title: "",
       nodeTypeId: "",
       imageSrc: undefined,
+      size: "s",
+      fontFamily: "sans",
     };
   }
 
@@ -257,13 +269,11 @@ const discourseNodeContent = memo(
             });
           }
 
-          let didImageChange = false;
           let currentImageSrc = shape.props.imageSrc;
           if (nodeType?.keyImage) {
             const imageSrc = await getFirstImageSrcForFile(app, linkedFile);
 
             if (imageSrc && imageSrc !== shape.props.imageSrc) {
-              didImageChange = true;
               currentImageSrc = imageSrc;
               editor.updateShape<DiscourseNodeShape>({
                 id: shape.id,
@@ -275,7 +285,6 @@ const discourseNodeContent = memo(
               });
             }
           } else if (shape.props.imageSrc) {
-            didImageChange = true;
             currentImageSrc = undefined;
             editor.updateShape<DiscourseNodeShape>({
               id: shape.id,
@@ -287,28 +296,29 @@ const discourseNodeContent = memo(
             });
           }
 
-          if (didImageChange) {
-            const { w, h } = await calcDiscourseNodeSize({
-              title: linkedFile.basename,
-              nodeTypeId: shape.props.nodeTypeId,
-              imageSrc: currentImageSrc,
-              plugin,
+          // Recalculate size when title, image, font size, or font family changes
+          const { w, h } = await calcDiscourseNodeSize({
+            title: linkedFile.basename,
+            nodeTypeId: shape.props.nodeTypeId,
+            imageSrc: currentImageSrc,
+            plugin,
+            size: shape.props.size ?? "s",
+            fontFamily: shape.props.fontFamily ?? "draw",
+          });
+          // Only update dimensions if they differ significantly (>1px)
+          if (
+            Math.abs((shape.props.w || 0) - w) > 1 ||
+            Math.abs((shape.props.h || 0) - h) > 1
+          ) {
+            editor.updateShape<DiscourseNodeShape>({
+              id: shape.id,
+              type: "discourse-node",
+              props: {
+                ...shape.props,
+                w,
+                h,
+              },
             });
-            // Only update dimensions if they differ significantly (>1px)
-            if (
-              Math.abs((shape.props.w || 0) - w) > 1 ||
-              Math.abs((shape.props.h || 0) - h) > 1
-            ) {
-              editor.updateShape<DiscourseNodeShape>({
-                id: shape.id,
-                type: "discourse-node",
-                props: {
-                  ...shape.props,
-                  w,
-                  h,
-                },
-              });
-            }
           }
         } catch (error) {
           console.error("Error loading node data", error);
@@ -321,7 +331,7 @@ const discourseNodeContent = memo(
       return () => {
         return;
       };
-      // Only trigger when content changes, not when dimensions change (to avoid fighting manual resizing)
+      // Trigger when content changes
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
       src,
@@ -372,6 +382,8 @@ const discourseNodeContent = memo(
         });
       }
     };
+    const fontSize = FONT_SIZES[shape.props.size];
+    const fontFamily = FONT_FAMILIES[shape.props.fontFamily];
 
     return (
       <div
@@ -418,6 +430,7 @@ const discourseNodeContent = memo(
             </svg>
           </button>
         )}
+
         {shape.props.imageSrc ? (
           <div className="mt-2 flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">
             <img
@@ -429,8 +442,24 @@ const discourseNodeContent = memo(
             />
           </div>
         ) : null}
-        <h1 className="m-0 pt-4 text-base">{title || "..."}</h1>
-        <p className="m-0 text-sm opacity-80">{nodeType?.name || ""}</p>
+        <h1
+          className="m-1"
+          style={{
+            fontSize: `${fontSize}px`,
+            fontFamily,
+          }}
+        >
+          {title || "..."}
+        </h1>
+        <p
+          className="m-0 opacity-80"
+          style={{
+            fontSize: `${fontSize * 0.75}px`,
+            fontFamily,
+          }}
+        >
+          {nodeType?.name || ""}
+        </p>
       </div>
     );
   },
diff --git a/apps/obsidian/src/components/canvas/shapes/discourseNodeMigrations.ts b/apps/obsidian/src/components/canvas/shapes/discourseNodeMigrations.ts
@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  createMigrationSequence,
+  createMigrationIds,
+} from "tldraw";
+
+const SEQUENCE_ID_BASE = "com.discourse-graph.obsidian.discourse-node";
+
+const versions = createMigrationIds(`${SEQUENCE_ID_BASE}`, {
+  addSizeAndFontFamily: 1,
+});
+
+export const discourseNodeMigrations = createMigrationSequence({
+  sequenceId: `${SEQUENCE_ID_BASE}`,
+  sequence: [
+    {
+      id: versions["addSizeAndFontFamily"],
+      scope: "record",
+      filter: (r: any) =>
+        r.typeName === "shape" && r.type === "discourse-node",
+      up: (shape: any) => {
+        // Only add defaults if they don't already exist
+        if (shape.props.size === undefined) {
+          shape.props.size = "s";
+        }
+        if (shape.props.fontFamily === undefined) {
+          shape.props.fontFamily = "draw";
+        }
+      },
+    },
+  ],
+});
+
diff --git a/apps/obsidian/src/components/canvas/shapes/nodeConstants.ts b/apps/obsidian/src/components/canvas/shapes/nodeConstants.ts
@@ -37,6 +37,8 @@ export const FONT_FAMILY =
 // Maximum height for key images
 export const MAX_IMAGE_HEIGHT = 250;
 
+export const EXTRA_BOTTOM_SPACING = 12;
+
 // Gap between image and text
 export const IMAGE_GAP = 4;
 
diff --git a/apps/obsidian/src/components/canvas/utils/tldraw.ts b/apps/obsidian/src/components/canvas/utils/tldraw.ts
@@ -6,6 +6,8 @@ import {
   TldrawFile,
   TLRecord,
   TLStore,
+  loadSnapshot,
+  TLStoreSnapshot,
 } from "tldraw";
 import {
   FRONTMATTER_KEY,
@@ -24,6 +26,7 @@ import {
 } from "~/components/canvas/shapes/DiscourseNodeShape";
 import { DiscourseRelationUtil } from "~/components/canvas/shapes/DiscourseRelationShape";
 import { DiscourseRelationBindingUtil } from "~/components/canvas/shapes/DiscourseRelationBinding";
+import { discourseNodeMigrations } from "~/components/canvas/shapes/discourseNodeMigrations";
 
 export type TldrawPluginMetaData = {
   /* eslint-disable @typescript-eslint/naming-convention */
@@ -70,20 +73,26 @@ export const processInitialData = (
       ) as SerializedStore<TLRecord>)
     : (data.raw.records as SerializedStore<TLRecord>);
 
-  let store: TLStore;
+  // Create store first (this creates the schema with migrations)
+  const store = createTLStore({
+    shapeUtils: customShapeUtils,
+    bindingUtils: [...defaultBindingUtils, DiscourseRelationBindingUtil],
+    assets: assetStore,
+    migrations: [discourseNodeMigrations],
+  });
+
   if (recordsData) {
-    store = createTLStore({
-      shapeUtils: customShapeUtils,
-      bindingUtils: [...defaultBindingUtils, DiscourseRelationBindingUtil],
-      initialData: recordsData,
-      assets: assetStore,
-    });
-  } else {
-    store = createTLStore({
-      shapeUtils: customShapeUtils,
-      bindingUtils: [...defaultBindingUtils, DiscourseRelationBindingUtil],
-      assets: assetStore,
-    });
+    // Create a snapshot with the old schema (if available) or use current schema
+    // The schema from data.raw is typed as any because it's legacy data format
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
+    const oldSchema = data.raw.schema ?? store.schema.serialize();
+    const snapshot: TLStoreSnapshot = {
+      store: recordsData,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      schema: oldSchema,
+    };
+
+    loadSnapshot(store, snapshot, { forceOverwriteSessionState: true });
   }
 
   return {
diff --git a/apps/obsidian/src/constants.ts b/apps/obsidian/src/constants.ts
@@ -1,3 +1,4 @@
+import { TLDefaultSizeStyle } from "tldraw";
 import { DiscourseNode, DiscourseRelationType, Settings } from "~/types";
 import generateUid from "~/utils/generateUid";
 
@@ -80,4 +81,33 @@ export const VIEW_TYPE_MARKDOWN = "markdown";
 export const VIEW_TYPE_TLDRAW_DG_PREVIEW = "tldraw-dg-preview";
 
 export const TLDRAW_VERSION = "3.14.2";
-export const DEFAULT_SAVE_DELAY = 500; // in ms
+export const DEFAULT_SAVE_DELAY = 500; // in ms
+
+// TODO REPLACE WITH TLDRAW DEFAULTS
+// https://github.com/tldraw/tldraw/pull/1580/files
+export const TEXT_PROPS = {
+  lineHeight: 1.35,
+  fontWeight: "normal",
+  fontVariant: "normal",
+  fontStyle: "normal",
+  padding: "0px",
+  maxWidth: "auto",
+};
+export const FONT_SIZES: Record<TLDefaultSizeStyle, number> = {
+  m: 25,
+  l: 38,
+  xl: 48,
+  s: 16,
+};
+// // FONT_FAMILIES.sans or tldraw_sans not working in toSvg()
+// // maybe check getSvg()
+// // in node_modules\@tldraw\tldraw\node_modules\@tldraw\editor\dist\cjs\lib\app\App.js
+// const SVG_FONT_FAMILY = `"Inter", "sans-serif"`;
+
+export const DEFAULT_STYLE_PROPS = {
+  ...TEXT_PROPS,
+  fontSize: 16,
+  fontFamily: "'Inter', sans-serif",
+  width: "fit-content",
+  padding: "40px",
+};
diff --git a/apps/obsidian/src/utils/calcDiscourseNodeSize.ts b/apps/obsidian/src/utils/calcDiscourseNodeSize.ts
diff --git a/apps/obsidian/src/utils/measureNodeText.ts b/apps/obsidian/src/utils/measureNodeText.ts
