From 35fb6378d172344d42ff7fd825cec116fed45cff Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 4 Mar 2025 17:06:44 -0700
Subject: [PATCH] add webview store

---
 src/components/actionbar/ComfyActionbar.vue   |   3 +
 src/components/graph/GraphCanvas.vue          |   9 +-
 src/components/graph/GraphCanvasMenu.vue      |   3 +
 .../topbar/BottomPanelToggleButton.vue        |   7 +-
 src/components/topbar/WorkflowTabs.vue        |   3 +
 src/components/webviews/WebviewContainer.vue  |  29 +++++
 src/stores/webviewStore.ts                    | 101 ++++++++++++++++++
 src/views/GraphView.vue                       |   8 ++
 8 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 src/components/webviews/WebviewContainer.vue
 create mode 100644 src/stores/webviewStore.ts

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 8c150a32c..a6a7e3730 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -1,5 +1,6 @@
 <template>
   <Panel
+    v-if="!webviewStore.hasActiveWebview"
     class="actionbar w-fit"
     :style="style"
     :class="{ 'is-dragging': isDragging, 'is-docked': isDocked }"
@@ -26,10 +27,12 @@ import Panel from 'primevue/panel'
 import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useSettingStore } from '@/stores/settingStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
 const settingsStore = useSettingStore()
+const webviewStore = useWebviewStore()
 
 const visible = computed(
   () => settingsStore.get('Comfy.UseNewMenu') !== 'Disabled'
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 5961070d5..d802ac96c 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -3,7 +3,12 @@
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
   <LiteGraphCanvasSplitterOverlay
-    v-if="comfyAppReady && betaMenuEnabled && !workspaceStore.focusMode"
+    v-if="
+      comfyAppReady &&
+      betaMenuEnabled &&
+      !workspaceStore.focusMode &&
+      !webviewStore.hasActiveWebview
+    "
   >
     <template #side-bar-panel>
       <SideToolbar />
@@ -69,6 +74,7 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
@@ -78,6 +84,7 @@ const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
+const webviewStore = useWebviewStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index 060efb356..6ad7b0256 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -1,5 +1,6 @@
 <template>
   <ButtonGroup
+    v-if="!webviewStore.hasActiveWebview"
     class="p-buttongroup-vertical absolute bottom-[10px] right-[10px] z-[1000]"
   >
     <Button
@@ -69,11 +70,13 @@ import { useI18n } from 'vue-i18n'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const settingStore = useSettingStore()
+const webviewStore = useWebviewStore()
 
 const linkHidden = computed(
   () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
diff --git a/src/components/topbar/BottomPanelToggleButton.vue b/src/components/topbar/BottomPanelToggleButton.vue
index 605f71884..472bfd522 100644
--- a/src/components/topbar/BottomPanelToggleButton.vue
+++ b/src/components/topbar/BottomPanelToggleButton.vue
@@ -1,6 +1,9 @@
 <template>
   <Button
-    v-show="bottomPanelStore.bottomPanelTabs.length > 0"
+    v-show="
+      bottomPanelStore.bottomPanelTabs.length > 0 &&
+      !webviewStore.hasActiveWebview
+    "
     severity="secondary"
     text
     :aria-label="$t('menu.toggleBottomPanel')"
@@ -19,7 +22,9 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 
+import { useWebviewStore } from '@/stores/webviewStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 
 const bottomPanelStore = useBottomPanelStore()
+const webviewStore = useWebviewStore()
 </script>
diff --git a/src/components/topbar/WorkflowTabs.vue b/src/components/topbar/WorkflowTabs.vue
index 741b14735..623e96068 100644
--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -19,6 +19,7 @@
       >
         <template #option="{ option }">
           <WorkflowTab
+            @click="() => webviewStore.hideActiveWebview()"
             @contextmenu="showContextMenu($event, option)"
             @click.middle="onCloseWorkflow(option)"
             :workflow-option="option"
@@ -50,6 +51,7 @@ import { useI18n } from 'vue-i18n'
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 import { ComfyWorkflow, useWorkflowBookmarkStore } from '@/stores/workflowStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -68,6 +70,7 @@ const workspaceStore = useWorkspaceStore()
 const workflowStore = useWorkflowStore()
 const workflowService = useWorkflowService()
 const workflowBookmarkStore = useWorkflowBookmarkStore()
+const webviewStore = useWebviewStore()
 const rightClickedTab = ref<WorkflowOption>(null)
 const menu = ref()
 
diff --git a/src/components/webviews/WebviewContainer.vue b/src/components/webviews/WebviewContainer.vue
new file mode 100644
index 000000000..c22dc04cd
--- /dev/null
+++ b/src/components/webviews/WebviewContainer.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="w-full h-full relative pointer-events-auto">
+    <KeepAlive>
+      <component
+        v-if="
+          webviewStore.activeWebviewId && webviewStore.activeWebview.keepAlive
+        "
+        :is="webviewStore.activeWebview.component"
+        :key="webviewStore.activeWebviewId"
+        v-bind="webviewStore.activeWebview.props || {}"
+      />
+    </KeepAlive>
+
+    <component
+      v-if="
+        webviewStore.activeWebviewId && !webviewStore.activeWebview.keepAlive
+      "
+      :is="webviewStore.activeWebview.component"
+      :key="webviewStore.activeWebviewId"
+      v-bind="webviewStore.activeWebview.props || {}"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useWebviewStore } from '@/stores/webviewStore'
+
+const webviewStore = useWebviewStore()
+</script>
diff --git a/src/stores/webviewStore.ts b/src/stores/webviewStore.ts
new file mode 100644
index 000000000..4c30c4b7e
--- /dev/null
+++ b/src/stores/webviewStore.ts
@@ -0,0 +1,101 @@
+import { defineStore } from 'pinia'
+import { Component, computed, markRaw, ref } from 'vue'
+
+export interface Webview {
+  id: string
+  component: Component
+  props?: Record<string, any>
+  keepAlive?: boolean
+}
+
+/**
+ * Store used to manage webview canvases
+ */
+export const useWebviewStore = defineStore('webview', () => {
+  const registeredWebviews = ref<Record<string, Webview>>({})
+  const activeWebviewId = ref<string | null>(null)
+
+  const activeWebview = computed(() =>
+    activeWebviewId.value
+      ? registeredWebviews.value[activeWebviewId.value]
+      : null
+  )
+  const hasActiveWebview = computed(() => activeWebviewId.value !== null)
+
+  /**
+   * Register a new webview
+   * @param webview The webview to register
+   */
+  const registerWebview = (webview: Webview) => {
+    registeredWebviews.value[webview.id] = {
+      ...webview,
+      component: markRaw(webview.component),
+      props: webview.props
+    }
+  }
+
+  /**
+   * Unregister a webview
+   * @param id The ID of the webview to unregister
+   */
+  const unregisterWebview = (id: string) => {
+    const webview = registeredWebviews.value[id]
+    if (!webview) return
+
+    // If this is the active webview, clear the active webview
+    if (activeWebviewId.value === id) {
+      activeWebviewId.value = null
+    }
+
+    delete registeredWebviews.value[id]
+  }
+
+  /**
+   * Show a webview and make it active
+   * @param id The ID of the webview to show
+   * @param props Optional props to pass to the webview component
+   */
+  const showWebview = (id: string, props?: Record<string, any>) => {
+    const webview = registeredWebviews.value[id]
+    if (!webview) return
+
+    if (props) {
+      webview.props = {
+        ...webview.props,
+        ...props
+      }
+    }
+
+    activeWebviewId.value = id
+  }
+
+  /**
+   * Hide a webview
+   * @param id The ID of the webview to hide
+   */
+  const hideWebview = (id: string) => {
+    if (activeWebviewId.value === id) {
+      activeWebviewId.value = null
+    }
+  }
+
+  /**
+   * Hide the active webview
+   */
+  const hideActiveWebview = () => {
+    activeWebviewId.value = null
+  }
+
+  return {
+    registeredWebviews,
+    activeWebviewId,
+    activeWebview,
+    hasActiveWebview,
+
+    registerWebview,
+    unregisterWebview,
+    showWebview,
+    hideWebview,
+    hideActiveWebview
+  }
+})
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index cf08c2bee..a7d9a452e 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -10,6 +10,12 @@
     <div class="comfyui-body-right" id="comfyui-body-right" />
     <div class="graph-canvas-container" id="graph-canvas-container">
       <GraphCanvas @ready="onGraphReady" />
+      <div
+        class="absolute inset-0 isolation z-50 pointer-events-none bg-[var(--p-dialog-background)]"
+        :class="{ hidden: !webviewStore.hasActiveWebview }"
+      >
+        <WebviewContainer />
+      </div>
     </div>
   </div>
 
@@ -52,6 +58,7 @@ import {
 } from '@/stores/queueStore'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWebviewStore } from '@/stores/webviewStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -66,6 +73,7 @@ const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
 const colorPaletteStore = useColorPaletteStore()
 const queueStore = useQueueStore()
+const webviewStore = useWebviewStore()
 
 watch(
   () => colorPaletteStore.completedActivePalette,