diff --git a/docs/src/guide/edge.md b/docs/src/guide/edge.md index cb908973..50d4046a 100644 --- a/docs/src/guide/edge.md +++ b/docs/src/guide/edge.md @@ -324,33 +324,33 @@ Your custom edges are wrapped so that the basic functions like selecting work. But you might want to extend on that functionality or implement your own business logic inside of edges, therefore 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 | -| sourceNode | The source node | GraphNode | false | -| targetNode | The target node | GraphNode | false | -| sourceX | X position of source handle | number | false | -| sourceY | Y position of source handle | number | false | -| targetX | X position of target handle | number | false | -| targetY | Y position of target handle | number | false | -| type | Edge type | string | true | -| sourceHandleId | Source handle id | string | true | -| targetHandleId | Target handle id | string | true | -| data | Custom data object | Any object | true | -| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true | -| label | Edge label | string, Component | true | -| labelStyle | Additional label styles | CSSProperties | true | -| labelShowBg | Enable/Disable label bg | boolean | true | -| labelBgPadding | Edge label bg padding | number | true | -| 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 | -| markerStart | Edge marker id | string | true | -| markerEnd | Edge marker id | string | true | -| curvature | Edge path curvature | number | true | +| Name | Definition | Type | Optional | +|---------------------|-------------------------------|-----------------------------------------------|----------| +| id | Edge id | string | false | +| source | The source node id | string | false | +| target | The target node id | string | false | +| sourceNode | The source node | GraphNode | false | +| targetNode | The target node | GraphNode | false | +| sourceX | X position of source handle | number | false | +| sourceY | Y position of source handle | number | false | +| targetX | X position of target handle | number | false | +| targetY | Y position of target handle | number | false | +| type | Edge type | string | true | +| sourceHandleId | Source handle id | string | true | +| targetHandleId | Target handle id | string | true | +| data | Custom data object | Any object | true | +| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true | +| label | Edge label | string, Component | true | +| labelStyle | Additional label styles | CSSProperties | true | +| labelShowBg | Enable/Disable label bg | boolean | true | +| labelBgPadding | Edge label bg padding | number | true | +| labelBgBorderRadius | Edge label bg border radius | number | true | +| selected | Is edge selected | boolean | true | +| animated | Is edge animated | boolean | true | +| updatable | Is edge updatable | [EdgeUpdatable](/typedocs/types/EdgeUpdatable)| true | +| markerEnd | Edge marker id | string | true | +| markerStart | Edge marker id | string | true | +| curvature | Edge path curvature | number | true | ### (Custom) Edge Events diff --git a/docs/src/guide/vue-flow/config.md b/docs/src/guide/vue-flow/config.md index 00c38998..aee1e5f0 100644 --- a/docs/src/guide/vue-flow/config.md +++ b/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: diff --git a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue index c9eba8c6..46791530 100644 --- a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue +++ b/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) diff --git a/packages/vue-flow/src/components/Edges/Wrapper.ts b/packages/vue-flow/src/components/Edges/Wrapper.ts index 4b52eba8..39c89ecb 100644 --- a/packages/vue-flow/src/components/Edges/Wrapper.ts +++ b/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 | Object data?: any events: EdgeEventsOn @@ -156,7 +156,7 @@ const Wrapper: FunctionalComponent = function ( targetHandleId, }), [ - updatable == 'source' || updatable == true ? [ h( + updatable === 'source' || updatable === true ? [ h( 'g', { onMousedown: onEdgeUpdaterSourceMouseDown, @@ -170,7 +170,7 @@ const Wrapper: FunctionalComponent = function ( radius: edgeUpdaterRadius, }), )] : null, - updatable == 'target' || updatable == true ? [ h( + updatable === 'target' || updatable === true ? [ h( 'g', { onMousedown: onEdgeUpdaterTargetMouseDown, diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue index 0a7ff02d..10cb1987 100644 --- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue +++ b/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), () => { diff --git a/packages/vue-flow/src/types/edge.ts b/packages/vue-flow/src/types/edge.ts index de962fba..83e275d4 100644 --- a/packages/vue-flow/src/types/edge.ts +++ b/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 = any> { /** Unique edge id */ @@ -77,7 +77,7 @@ export interface Edge { snapGrid: SnapGrid defaultMarkerColor: string - edgesUpdatable: boolean + edgesUpdatable: EdgeUpdatable nodesDraggable: boolean nodesConnectable: boolean