[New Feature] Selection Toolbox (#2608)

Co-authored-by: github-actions <github-actions@github.com>

src/stores/graphStore.ts

@@ -1,6 +1,7 @@
-import { LGraphCanvas, LGraphGroup, LGraphNode } from '@comfyorg/litegraph'
+import type { LGraphCanvas, LGraphGroup, LGraphNode } from '@comfyorg/litegraph'
+import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import { defineStore } from 'pinia'
-import { shallowRef } from 'vue'
+import { markRaw, ref, shallowRef } from 'vue'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -17,8 +18,18 @@ export const useCanvasStore = defineStore('canvas', () => {
    * The root LGraphCanvas object is shallow reactive.
    */
   const canvas = shallowRef<LGraphCanvas | null>(null)
+  /**
+   * The selected items on the canvas. All stored items are raw.
+   */
+  const selectedItems = ref<Positionable[]>([])
+  const updateSelectedItems = () => {
+    const items = Array.from(canvas.value?.selectedItems ?? [])
+    selectedItems.value = items.map((item) => markRaw(item))
+  }
 
   return {
-    canvas
+    canvas,
+    selectedItems,
+    updateSelectedItems
   }
 })