Replace locking/unlocking of canvas with select/pan mode (#1050)

* Add dragging canvas state

* Change icon

* Add playwright test

* tooltip change

* Enable for legacy menu

* Update litegraph

* Hide canvas menu for test

src/components/graph/GraphCanvas.vue

@@ -9,6 +9,7 @@
       </template>
     </LiteGraphCanvasSplitterOverlay>
     <TitleEditor />
+    <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
   </teleport>
   <NodeSearchboxPopover />
@@ -99,6 +100,22 @@ watchEffect(() => {
   })
 })
 
+watchEffect(() => {
+  if (!canvasStore.canvas) return
+
+  if (canvasStore.draggingCanvas) {
+    canvasStore.canvas.canvas.style.cursor = 'grabbing'
+    return
+  }
+
+  if (canvasStore.readOnly) {
+    canvasStore.canvas.canvas.style.cursor = 'grab'
+    return
+  }
+
+  canvasStore.canvas.canvas.style.cursor = 'default'
+})
+
 let dropTargetCleanup = () => {}
 
 onMounted(async () => {

src/components/graph/GraphCanvasMenu.vue

@@ -25,15 +25,17 @@
     <Button
       severity="secondary"
       v-tooltip.left="
-        t('graphCanvasMenu.' + (canvasStore.readOnly ? 'unlock' : 'lock'))
+        t(
+          'graphCanvasMenu.' + (canvasStore.readOnly ? 'panMode' : 'selectMode')
+        ) + ' (Space)'
       "
       @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 />
+        <i-material-symbols:pan-tool-outline v-if="canvasStore.readOnly" />
+        <i-simple-line-icons:cursor v-else />
       </template>
     </Button>
   </ButtonGroup>