[ENG-1080 & ENG-1067] Change key figure behaviors and styles (#574)

* change key figure behaviors and styles

* sm clean up

Author: trangdoan982

apps/obsidian/src/components/canvas/shapes/DiscourseNodeShape.tsx

@@ -308,7 +308,7 @@ const discourseNodeContent = memo(
         style={{
           backgroundColor: nodeType?.color ?? "",
         }}
-         // NOTE: These Tailwind classes (p-2, border-2, rounded-md, m-1, text-base, m-0, text-sm)
+        // NOTE: These Tailwind classes (p-2, border-2, rounded-md, m-1, text-base, m-0, text-sm)
         // correspond to constants in nodeConstants.ts. If you change these classes, update the
         // constants and the measureNodeText function to keep measurements accurate.
         className="relative box-border flex h-full w-full flex-col items-start justify-center rounded-md border-2 p-2"
@@ -348,8 +348,6 @@ const discourseNodeContent = memo(
             </svg>
           </button>
         )}
-        <h1 className="m-0 text-base">{title || "..."}</h1>
-        <p className="m-0 text-sm opacity-80">{nodeType?.name || ""}</p>
         {shape.props.imageSrc ? (
           <div className="mt-2 flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden">
             <img
@@ -361,6 +359,8 @@ 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>
       </div>
     );
   },

apps/obsidian/src/components/canvas/utils/convertToDiscourseNode.ts

@@ -18,6 +18,7 @@ import {
 } from "~/components/canvas/stores/assetStore";
 import { showToast } from "./toastUtils";
 import { CreateNodeModal } from "~/components/CreateNodeModal";
+import { calcDiscourseNodeSize } from "~/utils/calcDiscourseNodeSize";
 
 type ConvertToDiscourseNodeArgs = {
   editor: Editor;
@@ -140,8 +141,10 @@ const convertImageShapeToNode = async ({
           throw new Error("Failed to create discourse node file");
         }
 
+        let imageSrc: string | undefined;
         if (imageFile) {
           await embedImageInNode(createdFile, imageFile, plugin);
+          imageSrc = plugin.app.vault.getResourcePath(imageFile);
         }
 
         shapeId = await createDiscourseNodeShape({
@@ -151,6 +154,7 @@ const convertImageShapeToNode = async ({
           nodeType: selectedNodeType,
           plugin,
           canvasFile,
+          imageSrc,
         });
 
         showToast({
@@ -178,38 +182,44 @@ const createDiscourseNodeShape = async ({
   nodeType,
   plugin,
   canvasFile,
+  imageSrc,
 }: {
   editor: Editor;
   shape: TLShape;
   createdFile: TFile;
   nodeType: DiscourseNode;
   plugin: DiscourseGraphPlugin;
   canvasFile: TFile;
+  imageSrc?: string;
 }): Promise<TLShapeId> => {
   const src = await addWikilinkBlockrefForFile({
     app: plugin.app,
     canvasFile,
     linkedFile: createdFile,
   });
 
-  // Get the position and size of the original shape
   const { x, y } = shape;
-  const width = "w" in shape.props ? Number(shape.props.w) : 200;
-  const height = "h" in shape.props ? Number(shape.props.h) : 100;
+
+  const { w, h } = await calcDiscourseNodeSize({
+    title: createdFile.basename,
+    nodeTypeId: nodeType.id,
+    imageSrc,
+    plugin,
+  });
 
   const shapeId = createShapeId();
-  // TODO: Update the imageSrc, width and height of the shape after the key figure is merged
   editor.createShape({
     id: shapeId,
     type: "discourse-node",
     x,
     y,
     props: {
-      w: Math.max(width, 200),
-      h: Math.max(height, 100),
+      w,
+      h,
       src: src ?? "",
       title: createdFile.basename,
       nodeTypeId: nodeType.id,
+      imageSrc,
     },
   });