alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added docs for type EdgeUpdatable

Browse Source 
Implemented type EdgeUdatable in global configuration for VueFlow instance
This commit is contained in:
thomasmountford
2022-08-30 22:16:10 +02:00
committed by Braks
parent bf519e1f75
commit 7732ad9b76
8 changed files with 45 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/guide/edge.md
+27 -27
View File
@@ -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
docs/src/guide/vue-flow/config.md
+5 -1
View File
@@ -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
+1 -1
View File
@@ -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
+4 -4
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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