Graph canvas menu (#1023)

* add graph canvas menu

* Move to corner

* Remove action bar reset zoom button

* nit

* Add setting

---------

Co-authored-by: huchenlei <chenlei.hu@mail.utoronto.ca>

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -9,8 +9,8 @@
     >
       <slot name="side-bar-panel"></slot>
     </SplitterPanel>
-    <SplitterPanel class="graph-canvas-panel" :size="100">
-      <div></div>
+    <SplitterPanel class="graph-canvas-panel relative" :size="100">
+      <slot name="graph-canvas-panel"></slot>
     </SplitterPanel>
     <SplitterPanel
       class="side-bar-panel"

src/components/appMenu/AppMenu.vue

@@ -61,12 +61,6 @@
               commandStore.getCommandFunction('Comfy.RefreshNodeDefinitions')()
           "
         />
-        <Button
-          v-tooltip.bottom="$t('menu.resetView')"
-          icon="pi pi-expand"
-          severity="secondary"
-          @click="() => commandStore.getCommandFunction('Comfy.ResetView')()"
-        />
       </ButtonGroup>
     </div>
   </Panel>

src/components/graph/GraphCanvas.vue

@@ -4,6 +4,9 @@
       <template #side-bar-panel>
         <SideToolbar />
       </template>
+      <template #graph-canvas-panel>
+        <GraphCanvasMenu v-if="canvasMenuEnabled" />
+      </template>
     </LiteGraphCanvasSplitterOverlay>
     <TitleEditor />
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
@@ -44,6 +47,7 @@ import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyModelDef } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -55,6 +59,9 @@ const modelToNodeStore = useModelToNodeStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
+const canvasMenuEnabled = computed(() =>
+  settingStore.get('Comfy.Graph.CanvasMenu')
+)
 
 watchEffect(() => {
   const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')

src/components/graph/GraphCanvasMenu.vue

@@ -0,0 +1,81 @@
+<template>
+  <ButtonGroup
+    class="p-buttongroup-vertical absolute bottom-[10px] right-[10px] z-[1000] pointer-events-auto"
+  >
+    <Button
+      severity="secondary"
+      icon="pi pi-plus"
+      v-tooltip.left="t('graphCanvasMenu.zoomIn')"
+      @mousedown="repeat('Comfy.Canvas.ZoomIn')"
+      @mouseup="stopRepeat"
+    />
+    <Button
+      severity="secondary"
+      icon="pi pi-minus"
+      v-tooltip.left="t('graphCanvasMenu.zoomOut')"
+      @mousedown="repeat('Comfy.Canvas.ZoomOut')"
+      @mouseup="stopRepeat"
+    />
+    <Button
+      severity="secondary"
+      icon="pi pi-expand"
+      v-tooltip.left="t('graphCanvasMenu.resetView')"
+      @click="() => commandStore.getCommandFunction('Comfy.Canvas.ResetView')()"
+    />
+    <Button
+      severity="secondary"
+      v-tooltip.left="
+        t('graphCanvasMenu.' + (canvasStore.readOnly ? 'unlock' : 'lock'))
+      "
+      @click="
+        () => commandStore.getCommandFunction('Comfy.Canvas.ToggleLock')()
+      "
+    >
+      <template #icon>
+        <i-material-symbols:lock-outline v-if="canvasStore.readOnly" />
+        <i-material-symbols:lock-open-outline v-else />
+      </template>
+    </Button>
+  </ButtonGroup>
+</template>
+
+<script setup lang="ts">
+import ButtonGroup from 'primevue/buttongroup'
+import Button from 'primevue/button'
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+let interval: number | null = null
+const repeat = (command: string) => {
+  if (interval) return
+  const cmd = commandStore.getCommandFunction(command)
+  cmd()
+  interval = window.setInterval(cmd, 100)
+}
+const stopRepeat = () => {
+  if (interval) {
+    clearInterval(interval)
+    interval = null
+  }
+}
+</script>
+
+<style scoped>
+.p-buttongroup-vertical {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--p-button-border-radius);
+  overflow: hidden;
+  border: 1px solid var(--p-panel-border-color);
+}
+
+.p-buttongroup-vertical .p-button {
+  margin: 0;
+  border-radius: 0;
+}
+</style>