Changed updatable prop from boolean to type

Updatable

Wrapper.ts now checks for either true, 'target' or 'source'
true enables both markers on edge to be draggable
'target' enables target
'source' enables source

packages/vue-flow/src/components/Edges/Wrapper.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, Component, FunctionalComponent, VNode } from 'vue'
 import EdgeAnchor from './EdgeAnchor'
-import type { EdgeComponent, EdgeEventsOn, EdgeMarkerType, EdgeTextProps, GraphNode } from '~/types'
+import type { EdgeComponent, EdgeEventsOn, EdgeMarkerType, EdgeTextProps, GraphNode, Updatable } from '~/types'
 import { ConnectionMode, Position } from '~/types'
 import { getEdgePositions, getHandle, getMarkerId } from '~/utils'
 
@@ -15,7 +15,7 @@ interface Props {
   targetHandleId?: string | null
   sourceHandleId?: string | null
   selectable?: boolean
-  updatable?: boolean
+  updatable?: Updatable
   label?: string | VNode | Component<EdgeTextProps> | Object
   data?: any
   events: EdgeEventsOn
@@ -155,38 +155,36 @@ const Wrapper: FunctionalComponent<Props> = function (
         sourceHandleId,
         targetHandleId,
       }),
-      updatable
+      [
-        ? [
+        updatable == 'source' || updatable == true ? [ h(
-            h(
+            'g',
-              'g',
+            {
-              {
+              onMousedown: onEdgeUpdaterSourceMouseDown,
-                onMousedown: onEdgeUpdaterSourceMouseDown,
+              onMouseenter: onEdgeUpdaterMouseEnter,
-                onMouseenter: onEdgeUpdaterMouseEnter,
+              onMouseout: onEdgeUpdaterMouseOut,
-                onMouseout: onEdgeUpdaterMouseOut,
+            },
-              },
+            h(EdgeAnchor, {
-              h(EdgeAnchor, {
+              position: sourcePosition,
-                position: sourcePosition,
+              centerX: sourceX,
-                centerX: sourceX,
+              centerY: sourceY,
-                centerY: sourceY,
+              radius: edgeUpdaterRadius,
-                radius: edgeUpdaterRadius,
+            }),
-              }),
+          )] : null,
-            ),
+          updatable == 'target' || updatable == true ? [ h(
-            h(
+            'g',
-              'g',
+            {
-              {
+              onMousedown: onEdgeUpdaterTargetMouseDown,
-                onMousedown: onEdgeUpdaterTargetMouseDown,
+              onMouseenter: onEdgeUpdaterMouseEnter,
-                onMouseenter: onEdgeUpdaterMouseEnter,
+              onMouseout: onEdgeUpdaterMouseOut,
-                onMouseout: onEdgeUpdaterMouseOut,
+            },
-              },
+            h(EdgeAnchor, {
-              h(EdgeAnchor, {
+              position: targetPosition,
-                position: targetPosition,
+              centerX: targetX,
-                centerX: targetX,
+              centerY: targetY,
-                centerY: targetY,
+              radius: edgeUpdaterRadius,
-                radius: edgeUpdaterRadius,
+            }),
-              }),
+          )] : null,
-            ),
+        ],
-          ]
-        : null,
     ],
   )
 }

packages/vue-flow/src/types/edge.ts

@@ -43,6 +43,8 @@ export interface MarkerProps {
 
 export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
+export type Updatable = boolean | 'target' | 'source'
+
 export interface Edge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> {
   /** Unique edge id */
   id: string