Manage canvas element in Vue (#255)

* Manage canvas element in Vue

* nit

* Fix unittest

src/App.vue

@@ -1,22 +1,11 @@
 <template>
   <ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
-  <div v-else>
-    <NodeSearchboxPopover v-if="nodeSearchEnabled" />
-    <teleport to=".graph-canvas-container">
-      <LiteGraphCanvasSplitterOverlay v-if="betaMenuEnabled">
-        <template #side-bar-panel>
-          <SideToolBar />
-        </template>
-      </LiteGraphCanvasSplitterOverlay>
-    </teleport>
-  </div>
+  <GraphCanvas v-else />
 </template>
 
 <script setup lang="ts">
-import { computed, markRaw, onMounted, onUnmounted, ref, watch } from 'vue'
-import NodeSearchboxPopover from '@/components/NodeSearchBoxPopover.vue'
-import SideToolBar from '@/components/sidebar/SideToolBar.vue'
-import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
+import { computed, markRaw, onMounted, ref, watch } from 'vue'
+import GraphCanvas from '@/components/graph/GraphCanvas.vue'
 import QueueSideBarTab from '@/components/sidebar/tabs/QueueSideBarTab.vue'
 import ProgressSpinner from 'primevue/progressspinner'
 import { app } from './scripts/app'
@@ -24,13 +13,8 @@ import { useSettingStore } from './stores/settingStore'
 import { useI18n } from 'vue-i18n'
 import { useWorkspaceStore } from './stores/workspaceStateStore'
 import NodeLibrarySideBarTab from './components/sidebar/tabs/NodeLibrarySideBarTab.vue'
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
-import { useNodeDefStore } from './stores/nodeDefStore'
 
 const isLoading = ref(true)
-const nodeSearchEnabled = computed<boolean>(
-  () => useSettingStore().get('Comfy.NodeSearchBoxImpl') === 'default'
-)
 const theme = computed<string>(() =>
   useSettingStore().get('Comfy.ColorPalette')
 )
@@ -47,15 +31,10 @@ watch(
   },
   { immediate: true }
 )
-const betaMenuEnabled = computed(
-  () => useSettingStore().get('Comfy.UseNewMenu') !== 'Disabled'
-)
 
 const { t } = useI18n()
-let dropTargetCleanup = () => {}
 const init = () => {
   useSettingStore().addSettings(app.ui.settings)
-  app.vueAppReady = true
   app.extensionManager = useWorkspaceStore()
   app.extensionManager.registerSidebarTab({
     id: 'queue',
@@ -73,21 +52,6 @@ const init = () => {
     component: markRaw(NodeLibrarySideBarTab),
     type: 'vue'
   })
-
-  dropTargetCleanup = dropTargetForElements({
-    element: document.querySelector('.graph-canvas-container'),
-    onDrop: (event) => {
-      const loc = event.location.current.input
-      // Add an offset on x to make sure after adding the node, the cursor
-      // is on the node (top left corner)
-      const pos = app.clientPosToCanvasPos([loc.clientX - 20, loc.clientY])
-      const comfyNodeName = event.source.element.getAttribute(
-        'data-comfy-node-name'
-      )
-      const nodeDef = useNodeDefStore().nodeDefsByName[comfyNodeName]
-      app.addNodeOnGraph(nodeDef, { pos })
-    }
-  })
 }
 
 onMounted(() => {
@@ -99,10 +63,6 @@ onMounted(() => {
     isLoading.value = false
   }
 })
-
-onUnmounted(() => {
-  dropTargetCleanup()
-})
 </script>
 
 <style scoped>