add webview store

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'

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'
 )

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

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>

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()
 

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>

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
+  }
+})

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,