From ea6a5a7af66aed153a56f81ec21d097d6b759a00 Mon Sep 17 00:00:00 2001
From: BennyKok <itechbenny@gmail.com>
Date: Thu, 9 Nov 2023 12:19:15 -0800
Subject: [PATCH] update UI

---
 js/AvatarPreview.js | 17 ++++++++++++-----
 js/LayerEditor.js   |  2 +-
 js/state.js         |  2 +-
 js/tw-styles.css    | 12 ++++++++++++
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/js/AvatarPreview.js b/js/AvatarPreview.js
index f1eeb17..a1305bc 100644
--- a/js/AvatarPreview.js
+++ b/js/AvatarPreview.js
@@ -18,7 +18,7 @@ function uploadImage() {
   const widgets = nodes[0].widgets;
   console.log(nodes[0]);
   console.log(nodes[0].widgets);
-  widgets.find((x) => x.value == "image").callback();
+  widgets.find((x) => x.type == "button").callback();
 }
 
 const jsonWorkflowLoading = van.state(true);
@@ -55,10 +55,9 @@ export function AvatarPreview() {
         },
         span({
           class: "iconify text-lg",
-          "data-icon": "ic:baseline-arrow-back",
+          "data-icon": "ic:round-close",
           "data-inline": "false",
         }),
-        div("Back")
       ),
       button(
         {
@@ -154,7 +153,15 @@ export function AvatarPreview() {
             {
               class: () => "btn mt-24 w-96 normal-case",
               onclick: () => {
-                document.getElementById("sam").click();
+                /** @type {import('../../../web/types/litegraph.js').LGraph}*/
+                const graph = app.graph;
+                const nodes = graph.findNodesByType("SAM MultiLayer");
+
+                /** @type {any[]}*/
+                const widgets = nodes[0].widgets;
+                console.log(nodes[0]);
+                console.log(nodes[0].widgets);
+                widgets.find((x) => x.type == "button").callback();
               },
             },
             div({ class: "badge badge-neutral" }, "2"),
@@ -178,7 +185,7 @@ export function AvatarPreview() {
         name: "avatech-viewer-iframe",
         allow: "cross-origin-isolated",
         class: () =>
-          "w-[370px] h-[320px] z-[100] pointer-events-auto flex  border-none " +
+          "w-[401px] h-[400px] z-[100] pointer-events-auto flex  border-none " +
           (showPreview.val ? "" : "hidden"),
         // src: "https://labs.avatech.ai/viewer/default",
         // src: "http://localhost:3000/viewer/default",
diff --git a/js/LayerEditor.js b/js/LayerEditor.js
index 607fd65..e570e9c 100644
--- a/js/LayerEditor.js
+++ b/js/LayerEditor.js
@@ -120,7 +120,7 @@ export function LayerEditor() {
     button(
       {
         class: () =>
-          "btn btn-circle flex flex-row btn-ghost normal-case absolute p-0 rounded-md left-2 top-0 z-[200] w-fit",
+          "btn btn-neutral flex flex-row normal-case absolute mt-4 rounded-md left-2 top-0 z-[200] w-fit",
         onclick: () => {
           console.log("close");
           showImageEditor.val = false;
diff --git a/js/state.js b/js/state.js
index 011b781..2af2d88 100644
--- a/js/state.js
+++ b/js/state.js
@@ -18,7 +18,7 @@ export const iframeSrc = van.state("https://editor.avatech.ai?comfyui=true");
 export const showEditor = van.state(false);
 // localStorage.getItem("showPreview") == 'true'
 export const showPreview = van.state(true);
-export const previewUrl = van.state("https://editor.avatech.ai/viewer?avatarId=default&debug=true&width=300&height=300&hideTrigger=true");
+export const previewUrl = van.state("https://editor.avatech.ai/viewer?avatarId=default&debug=true&width=400&height=400&hideTrigger=true");
 // export const previewUrl = van.state("http://localhost:3006/viewer?avatarId=default&hideUI=true&debug=true&width=300&height=300&showAudioControl=true");
 export const isDirty = van.state(false);
 export const fileName = van.state('');
diff --git a/js/tw-styles.css b/js/tw-styles.css
index e91789f..0c3681d 100644
--- a/js/tw-styles.css
+++ b/js/tw-styles.css
@@ -2353,6 +2353,10 @@ details.collapse summary::-webkit-details-marker{
   height: 100vh;
 }
 
+.h-\[400px\]{
+  height: 400px;
+}
+
 .w-24{
   width: 6rem;
 }
@@ -2390,6 +2394,14 @@ details.collapse summary::-webkit-details-marker{
   width: 100%;
 }
 
+.w-\[400px\]{
+  width: 400px;
+}
+
+.w-\[401px\]{
+  width: 401px;
+}
+
 .max-w-xs{
   max-width: 20rem;
 }