fix: viewer

js/AvatarPreview.js

@@ -17,8 +17,10 @@ export function AvatarPreview() {
       class: () =>
         "w-full h-full flex pointer-events-auto rounded-2xl border-none " +
         (!showEditor.val ? "" : "hidden"),
-      src: "https://labs.avatech.ai/viewer/default",
-      // src: 'http://localhost:3000/viewer/default',
+      // src: "https://labs.avatech.ai/viewer/default",
+      // src: "http://localhost:3000/viewer/default",
+      src: previewUrl,
+    }),
     })
   );
 }

js/ShapeFlowEditor.js

@@ -1,6 +1,6 @@
 import { iframeSrc, showEditor } from "./state.js";
 import { van } from "./van.js";
-const { button, iframe, div, img, span } = van.tags;
+const { button, iframe, div, img, span, dialog, form } = van.tags;
 
 export function ShapeFlowEditor() {
   return div(
@@ -14,14 +14,7 @@ export function ShapeFlowEditor() {
           (showEditor.val ? "" : "hidden"),
         onclick: () => {
           console.log("close");
-          const editor = document.getElementById("avatech-editor-iframe");
-          editor.contentWindow.postMessage(
-            {
-              method: "back",
-            },
-            "*"
-          );
-          showEditor.val = false;
+          document.getElementById("alert-dialog").showModal();
         },
       },
       span({
@@ -39,6 +32,51 @@ export function ShapeFlowEditor() {
       class: () =>
         "w-full h-full pointer-events-auto " + (showEditor.val ? "" : "hidden"),
       src: iframeSrc,
-    })
+    }),
+    dialog(
+      {
+        id: "alert-dialog",
+        class: "modal modal-bottom sm:modal-middle",
+      },
+      div(
+        {
+          class: "modal-box",
+        },
+        div({ class: "text-black" }, "This is a dialog"),
+        div(
+          { class: "modal-action" },
+          form(
+            { method: "dialog", class: "flex flex-row gap-4" },
+            button(
+              {
+                class: "btn",
+                onclick: () => {
+                  showEditor.val = false;
+                },
+              },
+              "Discard"
+            ),
+            button(
+              {
+                class: "btn",
+                onclick: () => {
+                  const editor = document.getElementById(
+                    "avatech-editor-iframe"
+                  );
+                  editor.contentWindow.postMessage(
+                    {
+                      method: "back",
+                    },
+                    "*"
+                  );
+                  showEditor.val = false;
+                },
+              },
+              "Save & Close"
+            )
+          )
+        )
+      )
+    )
   );
 }

js/state.js

@@ -16,7 +16,9 @@ import { van } from "./van.js";
 
 export const iframeSrc = van.state("https://editor.avatech.ai?comfyui=true");
 export const showEditor = van.state(false);
-export const fileName = van.state("");
+export const previewUrl = van.state("https://editor.avatech.ai/viewer/default");
+export const isDirty = van.state(false);
+export const fileName = van.state('');
 export const showImageEditor = van.state(false);
 export const showLoading = van.state(false);
 export const alertDialog = van.state({

js/tw-styles.css

@@ -968,6 +968,12 @@ html {
   opacity: 1;
 }
 
+.modal-action {
+  display: flex;
+  margin-top: 1.5rem;
+  justify-content: flex-end;
+}
+
 :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
   overflow: hidden;
 }
@@ -1417,6 +1423,12 @@ details.collapse summary::-webkit-details-marker {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.modal-action > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 @keyframes modal-pop {
   0% {
     opacity: 0;
@@ -1562,6 +1574,10 @@ details.collapse summary::-webkit-details-marker {
   padding: 0px;
 }
 
+.modal-bottom {
+  place-items: end;
+}
+
 .btn-group .btn:not(:first-child):not(:last-child) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -1764,6 +1780,10 @@ details.collapse summary::-webkit-details-marker {
   margin-top: 0.5rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1851,6 +1871,10 @@ details.collapse summary::-webkit-details-marker {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .place-self-end {
   place-self: end;
 }
@@ -1963,6 +1987,11 @@ details.collapse summary::-webkit-details-marker {
   color: hsl(var(--bc) / var(--tw-text-opacity));
 }
 
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-orange-700 {
   --tw-text-opacity: 1;
   color: rgb(194 65 12 / var(--tw-text-opacity));
@@ -1976,6 +2005,25 @@ details.collapse summary::-webkit-details-marker {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+@media (min-width: 640px) {
+  .sm\:modal-middle {
+    place-items: center;
+  }
+
+  .sm\:modal-middle :where(.modal-box) {
+    width: 91.666667%;
+    max-width: 32rem;
+    --tw-translate-y: 0px;
+    --tw-scale-x: .9;
+    --tw-scale-y: .9;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    border-top-left-radius: var(--rounded-box, 1rem);
+    border-top-right-radius: var(--rounded-box, 1rem);
+    border-bottom-left-radius: var(--rounded-box, 1rem);
+    border-bottom-right-radius: var(--rounded-box, 1rem);
+  }
+}
+
 .hover\:text-red-500:hover {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));