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 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: your edges receive the following props:
| Name | Definition | Type | Optional | | Name | Definition | Type | Optional |
|---------------------|-------------------------------|----------------------------------------------|----------| |---------------------|-------------------------------|-----------------------------------------------|----------|
| id | Edge id | string | false | | id | Edge id | string | false |
| source | The source node id | string | false | | source | The source node id | string | false |
| target | The target node id | string | false | | target | The target node id | string | false |
| sourceNode | The source node | GraphNode | false | | sourceNode | The source node | GraphNode | false |
| targetNode | The target node | GraphNode | false | | targetNode | The target node | GraphNode | false |
| sourceX | X position of source handle | number | false | | sourceX | X position of source handle | number | false |
| sourceY | Y position of source handle | number | false | | sourceY | Y position of source handle | number | false |
| targetX | X position of target handle | number | false | | targetX | X position of target handle | number | false |
| targetY | Y position of target handle | number | false | | targetY | Y position of target handle | number | false |
| type | Edge type | string | true | | type | Edge type | string | true |
| sourceHandleId | Source handle id | string | true | | sourceHandleId | Source handle id | string | true |
| targetHandleId | Target handle id | string | true | | targetHandleId | Target handle id | string | true |
| data | Custom data object | Any object | true | | data | Custom data object | Any object | true |
| events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true | | events | Edge events and custom events | [EdgeEventsOn](/typedocs/types/EdgeEventsOn) | true |
| label | Edge label | string, Component | true | | label | Edge label | string, Component | true |
| labelStyle | Additional label styles | CSSProperties | true | | labelStyle | Additional label styles | CSSProperties | true |
| labelShowBg | Enable/Disable label bg | boolean | true | | labelShowBg | Enable/Disable label bg | boolean | true |
| labelBgPadding | Edge label bg padding | number | true | | labelBgPadding | Edge label bg padding | number | true |
| labelBgBorderRadius | Edge label bg border radius | number | true | | labelBgBorderRadius | Edge label bg border radius | number | true |
| selected | Is edge selected | boolean | true | | selected | Is edge selected | boolean | true |
| animated | Is edge animated | 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 |
| markerEnd | Edge marker id | string | true | | markerStart | Edge marker id | string | true |
| curvature | Edge path curvature | number | true | | curvature | Edge path curvature | number | true |
### (Custom) Edge Events ### (Custom) Edge Events
docs/src/guide/vue-flow/config.md
+5 -1
View File
@@ -652,7 +652,7 @@ const elements = ref([
### edges-updatable (optional) ### edges-updatable (optional)
- Type: `boolean` - Type: `EdgeUpdatable`
- Default: `true` - Default: `true`
@@ -660,6 +660,10 @@ const elements = ref([
Globally enable/disable updating edges. 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. Can be overwritten by setting `updatable` on a specific edge element.
- Example: - Example:
examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+1 -1
View File
@@ -20,7 +20,7 @@ const initialElements: Elements = [
position: { x: 400, y: 100 }, position: { x: 400, y: 100 },
style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 }, 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) 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 type { CSSProperties, Component, FunctionalComponent, VNode } from 'vue'
import EdgeAnchor from './EdgeAnchor' 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 { ConnectionMode, Position } from '~/types'
import { getEdgePositions, getHandle, getMarkerId } from '~/utils' import { getEdgePositions, getHandle, getMarkerId } from '~/utils'
@@ -15,7 +15,7 @@ interface Props {
targetHandleId?: string | null targetHandleId?: string | null
sourceHandleId?: string | null sourceHandleId?: string | null
selectable?: boolean selectable?: boolean
updatable?: Updatable updatable?: EdgeUpdatable
label?: string | VNode | Component<EdgeTextProps> | Object label?: string | VNode | Component<EdgeTextProps> | Object
data?: any data?: any
events: EdgeEventsOn events: EdgeEventsOn
@@ -156,7 +156,7 @@ const Wrapper: FunctionalComponent<Props> = function (
targetHandleId, targetHandleId,
}), }),
[ [
updatable == 'source' || updatable == true ? [ h( updatable === 'source' || updatable === true ? [ h(
'g', 'g',
{ {
onMousedown: onEdgeUpdaterSourceMouseDown, onMousedown: onEdgeUpdaterSourceMouseDown,
@@ -170,7 +170,7 @@ const Wrapper: FunctionalComponent<Props> = function (
radius: edgeUpdaterRadius, radius: edgeUpdaterRadius,
}), }),
)] : null, )] : null,
updatable == 'target' || updatable == true ? [ h( updatable === 'target' || updatable === true ? [ h(
'g', 'g',
{ {
onMousedown: onEdgeUpdaterTargetMouseDown, 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 ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
import { useEdgeHooks, useHandle, useVueFlow } from '../../composables' import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
import { connectionExists, groupEdgesByZLevel } from '../../utils' import { connectionExists, groupEdgesByZLevel } from '../../utils'
import type { EdgeComponent, GraphEdge } from '../../types' import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
import { Slots } from '../../context' import { Slots } from '../../context'
import MarkerDefinitions from './MarkerDefinitions.vue' import MarkerDefinitions from './MarkerDefinitions.vue'
@@ -32,7 +32,7 @@ const {
} = $(useVueFlow()) } = $(useVueFlow())
const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s) 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 = $( const sourceNode = $(
controlledComputed($$(connectionNodeId), () => { 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 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> { export interface Edge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> {
/** Unique edge id */ /** Unique edge id */
@@ -77,7 +77,7 @@ export interface Edge<Data = ElementData, CustomEvents extends Record<string, Cu
/** EdgeMarker */ /** EdgeMarker */
markerEnd?: EdgeMarkerType markerEnd?: EdgeMarkerType
/** Disable/enable updating edge */ /** Disable/enable updating edge */
updatable?: boolean updatable?: EdgeUpdatable
/** Disable/enable selecting edge */ /** Disable/enable selecting edge */
selectable?: boolean selectable?: boolean
/** Additional class names, can be a string or a callback returning a string (receives current flow element) */ /** 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 { CSSProperties } from 'vue'
import type { KeyFilter } from '@vueuse/core' 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 { CoordinateExtent, GraphNode, Node } from './node'
import type { ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection' import type { ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection'
import type { PanOnScrollMode } from './zoom' import type { PanOnScrollMode } from './zoom'
@@ -98,7 +98,7 @@ export interface FlowProps {
snapToGrid?: boolean snapToGrid?: boolean
snapGrid?: SnapGrid snapGrid?: SnapGrid
onlyRenderVisibleElements?: boolean onlyRenderVisibleElements?: boolean
edgesUpdatable?: boolean edgesUpdatable?: EdgeUpdatable
nodesDraggable?: boolean nodesDraggable?: boolean
nodesConnectable?: boolean nodesConnectable?: boolean
elementsSelectable?: 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 { Dimensions, Elements, FlowElements, FlowExportObject, FlowOptions, SnapGrid, XYPosition } from './flow'
import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components' import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
import type { Connection, ConnectionLineOptions, ConnectionLineType, ConnectionMode, Connector } from './connection' 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 { CoordinateExtent, GraphNode, Node } from './node'
import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, Viewport, ViewportFunctions } from './zoom' import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, Viewport, ViewportFunctions } from './zoom'
import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks' import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
@@ -79,7 +79,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
snapGrid: SnapGrid snapGrid: SnapGrid
defaultMarkerColor: string defaultMarkerColor: string
edgesUpdatable: boolean edgesUpdatable: EdgeUpdatable
nodesDraggable: boolean nodesDraggable: boolean
nodesConnectable: boolean nodesConnectable: boolean