Added docs for type EdgeUpdatable

Implemented type EdgeUdatable in global configuration for VueFlow instance

docs/src/guide/edge.md

@@ -325,7 +325,7 @@ But you might want to extend on that functionality or implement your own busines
 your edges receive the following props:
 
 | Name                | Definition                    | Type                                          | Optional |
-|---------------------|-------------------------------|----------------------------------------------|----------|
+|---------------------|-------------------------------|-----------------------------------------------|----------|
 | id                  | Edge id                       | string                                        | false    |
 | source              | The source node id            | string                                        | false    |
 | target              | The target node id            | string                                        | false    |
@@ -347,9 +347,9 @@ your edges receive the following props:
 | labelBgBorderRadius | Edge label bg border radius   | number                                        | true     |
 | selected            | Is edge selected              | boolean                                       | true     |
 | animated            | Is edge animated              | boolean                                       | true     |
-| updatable           | Is edge updatable             | boolean                                      | true     |
+| updatable           | Is edge updatable             | [EdgeUpdatable](/typedocs/types/EdgeUpdatable)| true     |
-| markerStart         | Edge marker id                | string                                       | true     |
 | markerEnd           | Edge marker id                | string                                        | true     |
+| markerStart         | Edge marker id                | string                                        | true     |
 | curvature           | Edge path curvature           | number                                        | true     |
 
 ### (Custom) Edge Events

docs/src/guide/vue-flow/config.md

@@ -652,7 +652,7 @@ const elements = ref([
 
 ### edges-updatable (optional)
 
-- Type: `boolean`
+- Type: `EdgeUpdatable`
 
 - Default: `true`
 
@@ -660,6 +660,10 @@ const elements = ref([
 
   Globally enable/disable updating edges.
 
+  If set to 'source' only source markers are updatable
+  
+  If set to 'target' only target markers are updatable
+
   Can be overwritten by setting `updatable` on a specific edge element.
 
 - Example:

examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -20,7 +20,7 @@ const initialElements: Elements = [
     position: { x: 400, y: 100 },
     style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
-  { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true },
+  { id: 'e1-2', source: '1', target: '2', updatable: 'target' },
 ]
 
 const elements = ref(initialElements)

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, Updatable } from '~/types'
+import type { EdgeComponent, EdgeEventsOn, EdgeMarkerType, EdgeTextProps, GraphNode, EdgeUpdatable } 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?: Updatable
+  updatable?: EdgeUpdatable
   label?: string | VNode | Component<EdgeTextProps> | Object
   data?: any
   events: EdgeEventsOn
@@ -156,7 +156,7 @@ const Wrapper: FunctionalComponent<Props> = function (
         targetHandleId,
       }),
       [
-        updatable == 'source' || updatable == true ? [ h(
+        updatable === 'source' || updatable === true ? [ h(
             'g',
             {
               onMousedown: onEdgeUpdaterSourceMouseDown,
@@ -170,7 +170,7 @@ const Wrapper: FunctionalComponent<Props> = function (
               radius: edgeUpdaterRadius,
             }),
           )] : null,
-          updatable == 'target' || updatable == true ? [ h(
+          updatable === 'target' || updatable === true ? [ h(
             'g',
             {
               onMousedown: onEdgeUpdaterTargetMouseDown,

packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -4,7 +4,7 @@ import EdgeWrapper from '../../components/Edges/Wrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
 import { connectionExists, groupEdgesByZLevel } from '../../utils'
-import type { EdgeComponent, GraphEdge } from '../../types'
+import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
 import { Slots } from '../../context'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
@@ -32,7 +32,7 @@ const {
 } = $(useVueFlow())
 
 const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
-const updatable = (u?: boolean) => (typeof u === 'undefined' ? edgesUpdatable : u)
+const updatable = (u?: EdgeUpdatable) => (typeof u === 'undefined' ? edgesUpdatable : u)
 
 const sourceNode = $(
   controlledComputed($$(connectionNodeId), () => {

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

@@ -43,7 +43,7 @@ export interface MarkerProps {
 
 export type EdgeMarkerType = string | MarkerType | EdgeMarker
 
-export type Updatable = boolean | 'target' | 'source'
+export type EdgeUpdatable = boolean | 'target' | 'source'
 
 export interface Edge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> {
   /** Unique edge id */
@@ -77,7 +77,7 @@ export interface Edge<Data = ElementData, CustomEvents extends Record<string, Cu
   /** EdgeMarker */
   markerEnd?: EdgeMarkerType
   /** Disable/enable updating edge */
-  updatable?: boolean
+  updatable?: EdgeUpdatable
   /** Disable/enable selecting edge */
   selectable?: boolean
   /** Additional class names, can be a string or a callback returning a string (receives current flow element) */

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

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'vue'
 import type { KeyFilter } from '@vueuse/core'
-import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
+import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
 import type { PanOnScrollMode } from './zoom'
@@ -98,7 +98,7 @@ export interface FlowProps {
   snapToGrid?: boolean
   snapGrid?: SnapGrid
   onlyRenderVisibleElements?: boolean
-  edgesUpdatable?: boolean
+  edgesUpdatable?: EdgeUpdatable
   nodesDraggable?: boolean
   nodesConnectable?: boolean
   elementsSelectable?: boolean

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

@@ -3,7 +3,7 @@ import type { KeyFilter } from '@vueuse/core'
 import type { Dimensions, Elements, FlowElements, FlowExportObject, FlowOptions, SnapGrid, XYPosition } from './flow'
 import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 import type { Connection, ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
-import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
+import type { DefaultEdgeOptions, Edge, EdgeUpdatable, GraphEdge } from './edge'
 import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, Viewport, ViewportFunctions } from './zoom'
 import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
@@ -79,7 +79,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   snapGrid: SnapGrid
   defaultMarkerColor: string
 
-  edgesUpdatable: boolean
+  edgesUpdatable: EdgeUpdatable
   nodesDraggable: boolean
   nodesConnectable: boolean