diff --git a/js/AvatarPreview.js b/js/AvatarPreview.js index 79631ec..1fe0e0a 100644 --- a/js/AvatarPreview.js +++ b/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, - }), + }) ); } diff --git a/js/index.js b/js/index.js index ab21589..568c82d 100644 --- a/js/index.js +++ b/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); diff --git a/js/tw-styles.css b/js/tw-styles.css index 224e5b5..de0ab8e 100644 --- a/js/tw-styles.css +++ b/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; }