Fix dragndrop subgraph widgets sticking to cursor (#8114)

Under some circumstances, subgraph widgets in the properties panel would
have incorrect drag state
- Debouncing list state would cause a race condition where a double
click would initiate a drag on an element that no longer exists
  - This is solved by removing the debounce.
- Right clicking on widgets would initiate a drag
  - Dragging now explicity requires a primary button click.
Additionally, drag is now ended on `pointercancel`. This is purely for
safety and may not actually be required.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8114-Fix-dragndrop-subgraph-widgets-sticking-to-cursor-2ea6d73d365081f08515e8231bd87bdc)
by [Unito](https://www.unito.io)

src/components/rightSidePanel/subgraph/SubgraphEditor.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { watchDebounced } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import {
   computed,
@@ -7,7 +6,8 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
-  triggerRef
+  triggerRef,
+  watch
 } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
@@ -225,13 +225,10 @@ function setDraggableState() {
     activeWidgets.value = aw
   }
 }
-watchDebounced(
-  filteredActive,
-  () => {
-    setDraggableState()
-  },
-  { debounce: 100 }
-)
+watch(filteredActive, () => {
+  setDraggableState()
+})
+
 onMounted(() => {
   setDraggableState()
   if (activeNode.value) pruneDisconnected(activeNode.value)

src/scripts/ui/draggableList.ts

@@ -72,6 +72,8 @@ export class DraggableList extends EventTarget {
     this.off.push(this.on(document, 'mouseup', this.dragEnd))
     // @ts-expect-error fixme ts strict error
     this.off.push(this.on(document, 'touchend', this.dragEnd))
+    // @ts-expect-error fixme ts strict error
+    this.off.push(this.on(document, 'pointercancel', this.dragEnd))
   }
 
   getAllItems() {
@@ -113,6 +115,8 @@ export class DraggableList extends EventTarget {
 
   // @ts-expect-error fixme ts strict error
   dragStart(e) {
+    if (e.button > 0) return
+
     if (e.target.classList.contains(this.handleClass)) {
       this.draggableItem = e.target.closest(this.itemSelector)
     }