feat: add draghandle prop to node

* specify a drag handle on the node

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/EdgeText.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { CSSProperties, HTMLAttributes } from 'vue'
+import { Component, CSSProperties, DefineComponent } from 'vue'
 
-interface EdgeTextProps extends HTMLAttributes {
+interface EdgeTextProps {
   x: number
   y: number
   label?:
     | string
     | {
-        component: any
+        component: Component | DefineComponent
-        props?: any
+        props?: Record<string, any>
       }
   labelStyle?: CSSProperties
   labelShowBg?: boolean

src/components/Nodes/NodeWrapper.vue

@@ -160,6 +160,7 @@ export default {
 <template>
   <DraggableCore
     cancel=".nodrag"
+    :handle="props.node.dragHandle"
     :disabled="!draggable"
     :scale="scale"
     :grid="props.snapGrid"

src/types/components.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue'
+import { Component, CSSProperties, DefineComponent } from 'vue'
 import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
 import { Connection } from './connection'
 import { Node } from './node'
@@ -56,3 +56,19 @@ export interface MiniMapNodeProps {
   strokeColor?: string
   strokeWidth?: number
 }
+
+export interface EdgeTextProps {
+  x: number
+  y: number
+  label?:
+    | string
+    | {
+        component: Component | DefineComponent
+        props?: Record<string, any>
+      }
+  labelStyle?: CSSProperties
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+}

src/types/node.ts

@@ -26,6 +26,7 @@ export interface Node<T = any> {
   draggable?: boolean
   selectable?: boolean
   connectable?: boolean
+  dragHandle?: string
 }
 
 export interface GraphNode<T = any> extends Node<T> {