feat: toggle avatar preview

js/AvatarPreview.js

@@ -1,25 +1,22 @@
 import { van } from "./van.js";
 const { button, iframe, div, img } = van.tags;
-import { showEditor, previewUrl } from "./state.js";
+import { showEditor, previewUrl, showPreview } from "./state.js";
 
 export function AvatarPreview() {
+
   return div(
-    {
-      class: () =>
-        "w-[320px] h-[370px] absolute right-0 top-0 z-[100] pointer-events-auto mt-4 mr-4 " +
-        (!showEditor.val ? "" : "hidden"),
-    },
+    { class: () => (!showEditor.val ? "" : "hidden") },
     iframe({
       id: "avatech-viewer-iframe",
       title: "avatech-viewer-iframe",
       name: "avatech-viewer-iframe",
       allow: "cross-origin-isolated",
       class: () =>
-        "w-full h-full flex pointer-events-auto rounded-2xl border-none " +
-        (!showEditor.val ? "" : "hidden"),
+        "w-[320px] h-[370px] absolute right-0 top-0 z-[100] pointer-events-auto flex mt-4 mr-4 rounded-2xl border-none " +
+        (showPreview.val ? "" : "hidden"),
       // src: "https://labs.avatech.ai/viewer/default",
       // src: "http://localhost:3000/viewer/default",
       src: previewUrl,
-    }),
+    })
   );
 }

js/index.js

@@ -12,6 +12,7 @@ import {
   showLoading,
   loadingCaption,
   alertDialog,
+  showPreview,
 } from "./state.js";
 import { van } from "./van.js";
 import { app } from "./app.js";
@@ -393,6 +394,7 @@ const ext = {
 
       node.computeParentGroupResize();
     };
+    injectUIComponentToComfyuimenu();
   },
 
   async setup() {
@@ -616,4 +618,14 @@ const ext = {
   },
 };
 
+function injectUIComponentToComfyuimenu() {
+  const menu = document.querySelector(".comfy-menu");
+  const avatarPreview = document.createElement("button");
+  avatarPreview.textContent = "Avatar Preview";
+  avatarPreview.onclick = () => {
+    showPreview.val = !showPreview.val;
+  };
+  menu.append(avatarPreview);
+}
+
 app.registerExtension(ext);

js/tw-styles.css

@@ -1780,10 +1780,6 @@ details.collapse summary::-webkit-details-marker {
   margin-top: 0.5rem;
 }
 
-.mt-20 {
-  margin-top: 5rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1974,6 +1970,11 @@ details.collapse summary::-webkit-details-marker {
   line-height: 1.75rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }