ENG 581 Add ability to change size/font in Discourse Shape (#348)

mdroidian · web-flow · commit 0c2dc536f338 · 2025-08-23T21:31:34.000-06:00
* Enhance DiscourseNodeUtil with size and font properties

* Introduced FONT_SIZES and updated props to include size and fontFamily for DiscourseNodeShape.
* Updated rendering logic to apply font styles based on new properties.
* Refactored default values for size and fontFamily in the BaseDiscourseNodeUtil class.

* Migration WIP

* Refactor discourse migrations and update default properties

* Consolidated migration functions into a single createMigrations function for better maintainability.
* Updated default size and fontFamily properties in BaseDiscourseNodeUtil to "m" and "draw" respectively.
* Adjusted migration logic to apply new properties consistently across node types.
diff --git a/apps/roam/src/components/Export.tsx b/apps/roam/src/components/Export.tsx
@@ -345,7 +345,15 @@ const ExportDialog: ExportDialogComponent = ({
         rotation: 0,
         isLocked: false,
         type: nodeType,
-        props: { w, h, uid: r.uid, title: String(r[firstColumnKey]), imageUrl },
+        props: {
+          w,
+          h,
+          uid: r.uid,
+          title: String(r[firstColumnKey]),
+          imageUrl,
+          size: "m",
+          fontFamily: "draw",
+        },
         parentId: pageKey,
         y: shapeY,
         id: newShapeId,
diff --git a/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx b/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx
@@ -15,6 +15,12 @@ import {
   FileHelpers,
   StateNode,
   TLStateNodeConstructor,
+  TLDefaultSizeStyle,
+  DefaultSizeStyle,
+  T,
+  FONT_FAMILIES,
+  TLDefaultFontStyle,
+  DefaultFontStyle,
 } from "tldraw";
 import React, { useState, useEffect, useRef } from "react";
 import { useExtensionAPI } from "roamjs-components/components/ExtensionApiContext";
@@ -43,6 +49,12 @@ const TEXT_PROPS = {
   padding: "0px",
   maxWidth: "auto",
 };
+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
@@ -133,6 +145,8 @@ export type DiscourseNodeShape = TLBaseShape<
     uid: string;
     title: string;
     imageUrl?: string;
+    size: TLDefaultSizeStyle;
+    fontFamily: TLDefaultFontStyle;
   }
 >;
 export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
@@ -143,6 +157,17 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
     this.type = type;
   }
 
+  static override props = {
+    w: T.number,
+    h: T.number,
+    // opacity: T.number,
+    uid: T.string,
+    title: T.string,
+    imageUrl: T.optional(T.string),
+    size: DefaultSizeStyle,
+    fontFamily: DefaultFontStyle,
+  };
+
   override isAspectRatioLocked = () => false;
   override canResize = () => true;
   override canBind = () => true;
@@ -162,6 +187,8 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
       h: 64,
       uid: window.roamAlphaAPI.util.generateUID(),
       title: "",
+      size: "m",
+      fontFamily: "draw",
     };
   }
 
@@ -476,7 +503,12 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
 
           <div
             ref={contentRef}
-            style={{ ...DEFAULT_STYLE_PROPS, maxWidth: "" }}
+            style={{
+              ...DEFAULT_STYLE_PROPS,
+              maxWidth: "",
+              fontFamily: FONT_FAMILIES[shape.props.fontFamily],
+              fontSize: FONT_SIZES[shape.props.size],
+            }}
           >
             {alias
               ? new RegExp(alias).exec(shape.props.title)?.[1] ||
diff --git a/apps/roam/src/components/canvas/DiscourseRelationShape/discourseRelationMigrations.ts b/apps/roam/src/components/canvas/DiscourseRelationShape/discourseRelationMigrations.ts
@@ -1,3 +1,6 @@
+/* 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/naming-convention */
 import {
@@ -13,118 +16,133 @@ import { getRelationColor } from "./DiscourseRelationUtil";
 
 const SEQUENCE_ID_BASE = "com.roam-research.discourse-graphs";
 
-export const createArrowShapeMigrations = ({
+export const createMigrations = ({
   allRelationIds,
   allAddReferencedNodeActions,
+  allNodeTypes,
 }: {
   allRelationIds: string[];
   allAddReferencedNodeActions: string[];
+  allNodeTypes: string[];
 }) => {
-  const allShapeIds = [...allRelationIds, ...allAddReferencedNodeActions];
-  return allShapeIds.map((shapeId) => {
-    const versions = createMigrationIds(`${SEQUENCE_ID_BASE}.${shapeId}`, {
-      ExtractBindings: 1,
-      "2.3.0": 2,
-    });
-    return createMigrationSequence({
-      sequenceId: `${SEQUENCE_ID_BASE}.${shapeId}`,
-      sequence: [
-        {
-          id: versions["ExtractBindings"],
-          scope: "store",
-          up: (oldStore) => {
-            type OldArrowTerminal =
-              | { type: "point"; x: number; y: number }
-              | {
-                  type: "binding";
-                  boundShapeId: TLShapeId;
-                  normalizedAnchor: VecModel;
-                  isExact: boolean;
-                  isPrecise: boolean;
-                }
-              // new type:
-              | { type?: undefined; x: number; y: number };
+  const allRelationShapeIds = [
+    ...allRelationIds,
+    ...allAddReferencedNodeActions,
+  ];
+  const versions = createMigrationIds(`${SEQUENCE_ID_BASE}`, {
+    ExtractBindings: 1,
+    "2.3.0": 2,
+    AddSizeAndFontFamily: 3,
+  });
+  return createMigrationSequence({
+    sequenceId: `${SEQUENCE_ID_BASE}`,
+    sequence: [
+      {
+        id: versions["ExtractBindings"],
+        scope: "store",
+        up: (oldStore) => {
+          type OldArrowTerminal =
+            | { type: "point"; x: number; y: number }
+            | {
+                type: "binding";
+                boundShapeId: TLShapeId;
+                normalizedAnchor: VecModel;
+                isExact: boolean;
+                isPrecise: boolean;
+              }
+            // new type:
+            | { type?: undefined; x: number; y: number };
 
-            type OldArrow = TLBaseShape<
-              string,
-              { start: OldArrowTerminal; end: OldArrowTerminal }
-            >;
+          type OldArrow = TLBaseShape<
+            string,
+            { start: OldArrowTerminal; end: OldArrowTerminal }
+          >;
 
-            const arrows = Object.values(oldStore).filter(
-              (r: any): r is OldArrow =>
-                r.typeName === "shape" &&
-                "type" in r &&
-                (allRelationIds.includes(r.type) ||
-                  allAddReferencedNodeActions.includes(r.type)),
-            );
+          const arrows = Object.values(oldStore).filter(
+            (r: any): r is OldArrow =>
+              r.typeName === "shape" &&
+              "type" in r &&
+              allRelationShapeIds.includes(r.type),
+          );
 
-            for (const a of arrows) {
-              const arrow = a as unknown as OldArrow;
-              const { start, end } = arrow.props;
+          for (const a of arrows) {
+            const arrow = a as unknown as OldArrow;
+            const { start, end } = arrow.props;
 
-              // TODO: do we have any that are not binding?
-              if (start.type === "binding") {
-                const id = createBindingId();
-                const binding: RelationBinding = {
-                  typeName: "binding",
-                  id,
-                  type: arrow.type,
-                  fromId: arrow.id,
-                  toId: start.boundShapeId,
-                  meta: {},
-                  props: {
-                    terminal: "start",
-                    normalizedAnchor: start.normalizedAnchor,
-                    isExact: start.isExact || false,
-                    isPrecise: start.isPrecise || false,
-                  },
-                };
-                oldStore[id] = binding;
-              } else {
-                delete arrow.props.start.type;
-              }
+            // TODO: do we have any that are not binding?
+            if (start.type === "binding") {
+              const id = createBindingId();
+              const binding: RelationBinding = {
+                typeName: "binding",
+                id,
+                type: arrow.type,
+                fromId: arrow.id,
+                toId: start.boundShapeId,
+                meta: {},
+                props: {
+                  terminal: "start",
+                  normalizedAnchor: start.normalizedAnchor,
+                  isExact: start.isExact || false,
+                  isPrecise: start.isPrecise || false,
+                },
+              };
+              oldStore[id] = binding;
+            } else {
+              delete arrow.props.start.type;
+            }
 
-              // TODO: do we have any that are not binding?
-              if (end.type === "binding") {
-                const id = createBindingId();
-                const binding: RelationBinding = {
-                  typeName: "binding",
-                  id,
-                  type: arrow.type,
-                  fromId: arrow.id,
-                  toId: end.boundShapeId,
-                  meta: {},
-                  props: {
-                    terminal: "end",
-                    normalizedAnchor: end.normalizedAnchor,
-                    isExact: end.isExact || false,
-                    isPrecise: end.isPrecise || false,
-                  },
-                };
+            // TODO: do we have any that are not binding?
+            if (end.type === "binding") {
+              const id = createBindingId();
+              const binding: RelationBinding = {
+                typeName: "binding",
+                id,
+                type: arrow.type,
+                fromId: arrow.id,
+                toId: end.boundShapeId,
+                meta: {},
+                props: {
+                  terminal: "end",
+                  normalizedAnchor: end.normalizedAnchor,
+                  isExact: end.isExact || false,
+                  isPrecise: end.isPrecise || false,
+                },
+              };
 
-                oldStore[id] = binding;
-              } else {
-                delete arrow.props.end.type;
-              }
+              oldStore[id] = binding;
+            } else {
+              delete arrow.props.end.type;
             }
-          },
+          }
+        },
+      },
+      {
+        id: versions["2.3.0"],
+        scope: "record",
+        filter: (r: any) => {
+          return r.typeName === "shape" && allRelationShapeIds.includes(r.type);
         },
-        {
-          id: versions["2.3.0"],
-          scope: "record",
-          filter: (r: any) => r.type === shapeId && r.typeName === "shape",
-          up: (arrow: any) => {
-            arrow.props.start = { x: 0, y: 0 };
-            arrow.props.end = { x: 0, y: 0 };
-            arrow.props.labelPosition = 0.5;
-            arrow.props.scale = 1;
+        up: (arrow: any) => {
+          arrow.props.start = { x: 0, y: 0 };
+          arrow.props.end = { x: 0, y: 0 };
+          arrow.props.labelPosition = 0.5;
+          arrow.props.scale = 1;
 
-            const color = getRelationColor(arrow.props.text || "");
-            arrow.props.color = color;
-            arrow.props.labelColor = color;
-          },
+          const color = getRelationColor(arrow.props.text || "");
+          arrow.props.color = color;
+          arrow.props.labelColor = color;
+        },
+      },
+      {
+        id: versions["AddSizeAndFontFamily"],
+        scope: "record",
+        filter: (r: any) =>
+          r.typeName === "shape" && allNodeTypes.includes(r.type),
+        up: (shape: any) => {
+          shape.props.size = "m";
+          shape.props.fontFamily = "draw";
         },
-      ],
-    });
+      },
+    ],
   });
 };
diff --git a/apps/roam/src/components/canvas/Tldraw.tsx b/apps/roam/src/components/canvas/Tldraw.tsx
@@ -78,7 +78,7 @@ import {
   createAllRelationBindings,
 } from "./DiscourseRelationShape/DiscourseRelationBindings";
 import ConvertToDialog from "./ConvertToDialog";
-import { createArrowShapeMigrations } from "./DiscourseRelationShape/discourseRelationMigrations";
+import { createMigrations } from "./DiscourseRelationShape/discourseRelationMigrations";
 import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import sendErrorEmail from "~/utils/sendErrorEmail";
 import { TLDRAW_DATA_ATTRIBUTE } from "./tldrawStyles";
@@ -348,13 +348,15 @@ const TldrawCanvas = ({ title }: { title: string }) => {
   const pageUid = useMemo(() => getPageUidByPageTitle(title), [title]);
   const arrowShapeMigrations = useMemo(
     () =>
-      createArrowShapeMigrations({
+      createMigrations({
         allRelationIds,
         allAddReferencedNodeActions,
+        allNodeTypes: allNodes.map((node) => node.type),
       }),
-    [allRelationIds, allAddReferencedNodeActions],
+    [allRelationIds, allAddReferencedNodeActions, allNodes],
   );
-  const migrations = [...arrowShapeMigrations];
+
+  const migrations = [arrowShapeMigrations];
   const { store, needsUpgrade, performUpgrade, error } = useRoamStore({
     migrations,
     customShapeUtils,
@@ -415,7 +417,12 @@ const TldrawCanvas = ({ title }: { title: string }) => {
           {
             type: nodeType.type,
             id: createShapeId(),
-            props: { uid: e.detail.uid, title: e.detail.val },
+            props: {
+              uid: e.detail.uid,
+              title: e.detail.val,
+              size: "m",
+              fontFamily: "draw",
+            },
             ...position,
           },
         ]);
