Add litegraph canvas splitter overlay

src/App.vue

@@ -2,9 +2,7 @@
   <ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
   <div v-else>
     <NodeSearchboxPopover v-if="nodeSearchEnabled" />
-    <teleport to=".comfyui-body-left">
-      <SideToolBar />
-    </teleport>
+    <SideToolBar />
   </div>
 </template>
 

src/assets/css/style.css

@@ -87,12 +87,18 @@ body {
 	z-index: 10;
 }
 
-#graph-canvas {
+#graph-canvas-container {
 	width: 100%;
 	height: 100%;
 	order: 2;
 	grid-column: 2;
   grid-row: 2;
+	position: relative;
+}
+
+#graph-canvas {
+	width: 100%;
+	height: 100%;
 }
 
 .comfyui-body-right {

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -0,0 +1,38 @@
+<template>
+  <Splitter class="splitter-overlay">
+    <SplitterPanel class="side-bar-panel" :minSize="10" :size="20">
+      <slot name="side-bar-panel"></slot>
+    </SplitterPanel>
+    <SplitterPanel class="graph-canvas-panel" :size="100">
+      <div></div>
+    </SplitterPanel>
+  </Splitter>
+</template>
+
+<script setup lang="ts">
+import Splitter from "primevue/splitter";
+import SplitterPanel from "primevue/splitterpanel";
+</script>
+
+<style>
+.p-splitter-gutter {
+  pointer-events: auto;
+}
+</style>
+<style scoped>
+.side-bar-panel {
+  background-color: var(--bg-color);
+  pointer-events: auto;
+}
+
+.splitter-overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  pointer-events: none;
+  z-index: 10;
+}
+</style>

src/components/sidebar/SideToolBar.vue

@@ -1,25 +1,39 @@
 <template>
-  <nav class="side-tool-bar-container">
-    <SideBarIcon
-      v-for="item in items"
-      :icon="item.icon"
-      :selected="item === selectedItem"
-      @click="onItemClick(item)"
-    />
-    <div class="side-tool-bar-end">
-      <SideBarThemeToggleIcon />
-      <!-- TODO: Maybe moving the setting button to side bar? -->
-      <!-- <SideBarIcon icon="pi pi-cog" /> -->
-    </div>
-  </nav>
+  <teleport to=".comfyui-body-left">
+    <nav class="side-tool-bar-container">
+      <SideBarIcon
+        v-for="item in items"
+        :icon="item.icon"
+        :selected="item === selectedItem"
+        @click="onItemClick(item)"
+      />
+      <div class="side-tool-bar-end">
+        <SideBarThemeToggleIcon />
+        <!-- TODO: Maybe moving the setting button to side bar? -->
+        <!-- <SideBarIcon icon="pi pi-cog" /> -->
+      </div>
+    </nav>
+  </teleport>
+  <teleport to="#graph-canvas-container">
+    <LiteGraphCanvasSplitterOverlay v-show="selectedItem !== null">
+      <template #side-bar-panel>
+        <component :is="selectedItem?.component" />
+      </template>
+    </LiteGraphCanvasSplitterOverlay>
+  </teleport>
 </template>
 
 <script setup lang="ts">
 import SideBarIcon from "./SideBarIcon.vue";
 import SideBarThemeToggleIcon from "./SideBarThemeToggleIcon.vue";
-import { ref } from "vue";
+import LiteGraphCanvasSplitterOverlay from "@/components/LiteGraphCanvasSplitterOverlay.vue";
+import NodeDetailSideBarItem from "./items/NodeDetailSideBarItem.vue";
+import { markRaw, ref } from "vue";
 
-const items = ref([{ icon: "pi pi-plus" }, { icon: "pi pi-search" }]);
+const items = ref([
+  { icon: "pi pi-map", component: markRaw(NodeDetailSideBarItem) },
+  { icon: "pi pi-search" },
+]);
 const selectedItem = ref(null);
 const onItemClick = (item) => {
   if (selectedItem.value === item) {

src/components/sidebar/items/NodeDetailSideBarItem.vue

@@ -0,0 +1,20 @@
+<template>
+  <Accordion>
+    <AccordionPanel v-for="node in nodes" :key="node.id">
+      <AccordionHeader>
+        <div>{{ node.id }} - {{ node.type }}</div>
+      </AccordionHeader>
+    </AccordionPanel>
+  </Accordion>
+</template>
+
+<script setup lang="ts">
+import { defaultGraph } from "@/scripts/defaultGraph";
+import Accordion from "primevue/accordion";
+import AccordionHeader from "primevue/accordionheader";
+import AccordionPanel from "primevue/accordionpanel";
+
+/* Placeholder workflow display */
+const workflow = defaultGraph;
+const nodes = workflow.nodes.sort((a, b) => a.id - b.id);
+</script>

src/scripts/app.ts

@@ -1845,13 +1845,18 @@ export class ComfyApp {
     await this.#setUser();
 
     // Create and mount the LiteGraph in the DOM
+    const canvasContainer = document.createElement("div");
+    canvasContainer.id = "graph-canvas-container";
+
     const mainCanvas = document.createElement("canvas");
     mainCanvas.style.touchAction = "none";
     const canvasEl = (this.canvasEl = Object.assign(mainCanvas, {
       id: "graph-canvas",
     }));
     canvasEl.tabIndex = 1;
-    document.body.prepend(canvasEl);
+    canvasContainer.prepend(canvasEl);
+    document.body.prepend(canvasContainer);
+
     this.resizeCanvas();
 
     await Promise.all([

src/scripts/ui/menu/menu.css

@@ -133,6 +133,10 @@
   font-size: 0.8em;
   display: flex;
   padding: 4px 8px;
+  /* Chromium based browser randomly shifts the bar up by 4px on first interaction with canvas.
+  Compensate this by adding 4px to padding top. */
+  /* Firefox does not have this issue. */
+  padding-top: 8px;
   align-items: center;
   gap: 8px;
   box-sizing: border-box;