From 3bb83990d6b2c95d7fde5a3177e991d9b5073a00 Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 6 Aug 2024 17:42:21 -0400
Subject: [PATCH] Make dialog maximizable

---
 src/components/dialog/GlobalDialog.vue             | 12 +++++++++++-
 .../dialog/content/LoadWorkflowWarning.vue         | 14 +++++++++-----
 src/scripts/app.ts                                 |  6 +++++-
 src/services/dialogService.ts                      | 12 +++++-------
 src/stores/dialogStore.ts                          |  3 +++
 5 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index 8175827e..e64e2b57 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -6,19 +6,29 @@
     closable
     closeOnEscape
     dismissableMask
+    :maximizable="dialogStore.props.maximizable ?? false"
     @hide="dialogStore.closeDialog"
+    @maximize="maximized = true"
+    @unmaximize="maximized = false"
   >
     <template #header v-if="dialogStore.title">
       <h3>{{ dialogStore.title }}</h3>
     </template>
 
-    <component :is="dialogStore.component" v-bind="dialogStore.props" />
+    <component
+      :is="dialogStore.component"
+      v-bind="dialogStore.props"
+      :maximized="maximized"
+    />
   </Dialog>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
 
 const dialogStore = useDialogStore()
+
+const maximized = ref(false)
 </script>
diff --git a/src/components/dialog/content/LoadWorkflowWarning.vue b/src/components/dialog/content/LoadWorkflowWarning.vue
index badb1006..d4306d5e 100644
--- a/src/components/dialog/content/LoadWorkflowWarning.vue
+++ b/src/components/dialog/content/LoadWorkflowWarning.vue
@@ -7,7 +7,8 @@
     <ListBox
       :options="uniqueNodes"
       optionLabel="label"
-      class="missing-nodes-list"
+      scrollHeight="100%"
+      :class="'missing-nodes-list' + (props.maximized ? ' maximized' : '')"
       :pt="{
         list: { class: 'border-none' }
       }"
@@ -50,6 +51,7 @@ interface NodeType {
 const props = defineProps<{
   missingNodeTypes: (string | NodeType)[]
   hasAddedNodes: boolean
+  maximized: boolean
 }>()
 
 const uniqueNodes = computed(() => {
@@ -82,8 +84,8 @@ const uniqueNodes = computed(() => {
 
 <style scoped>
 .comfy-missing-nodes {
-  font-family: var(--font-family);
-  color: var(--text-color);
+  font-family: monospace;
+  color: var(--red-600);
   padding: 1.5rem;
   background-color: var(--surface-ground);
   border-radius: var(--border-radius);
@@ -91,7 +93,6 @@ const uniqueNodes = computed(() => {
 }
 
 .warning-title {
-  color: var(--red-600);
   margin-top: 0;
   margin-bottom: 1rem;
 }
@@ -105,6 +106,10 @@ const uniqueNodes = computed(() => {
   overflow-y: auto;
 }
 
+.missing-nodes-list.maximized {
+  max-height: unset;
+}
+
 .missing-node-item {
   display: flex;
   align-items: center;
@@ -129,6 +134,5 @@ const uniqueNodes = computed(() => {
 .added-nodes-warning {
   margin-top: 1rem;
   font-style: italic;
-  color: var(--red-600);
 }
 </style>
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 90885893..bbcd1290 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -2125,7 +2125,11 @@ export class ComfyApp {
 
   showMissingNodesError(missingNodeTypes, hasAddedNodes = true) {
     if (this.vueAppReady)
-      showLoadWorkflowWarning(missingNodeTypes, hasAddedNodes)
+      showLoadWorkflowWarning({
+        missingNodeTypes,
+        hasAddedNodes,
+        maximizable: true
+      })
 
     this.logging.addEntry('Comfy.App', 'warn', {
       MissingNodes: missingNodeTypes
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 5822b3d9..305b1545 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -2,16 +2,14 @@ import { useDialogStore } from '@/stores/dialogStore'
 import LoadWorkflowWarning from '@/components/dialog/content/LoadWorkflowWarning.vue'
 import { markRaw } from 'vue'
 
-export function showLoadWorkflowWarning(
-  missingNodeTypes: any[],
+export function showLoadWorkflowWarning(props: {
+  missingNodeTypes: any[]
   hasAddedNodes: boolean
-) {
+  [key: string]: any
+}) {
   const dialogStore = useDialogStore()
   dialogStore.showDialog({
     component: markRaw(LoadWorkflowWarning),
-    props: {
-      missingNodeTypes,
-      hasAddedNodes
-    }
+    props
   })
 }
diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts
index 7000da52..8395c608 100644
--- a/src/stores/dialogStore.ts
+++ b/src/stores/dialogStore.ts
@@ -1,3 +1,6 @@
+// We should consider moving to https://primevue.org/dynamicdialog/ once everything is in Vue.
+// Currently we need to bridge between legacy app code and Vue app with a Pinia store.
+
 import { defineStore } from 'pinia'
 import { Component } from 'vue'