feat: implement workspaces
This commit is contained in:
Braks
@@ -0,0 +1,59 @@
|
||||
import { XYPosition, Dimensions } from './flow'
|
||||
import { NodeHandleBounds, Node } from './node'
|
||||
import { Edge } from './edge'
|
||||
|
||||
export type NodeDimensionChange = {
|
||||
id: string
|
||||
type: 'dimensions'
|
||||
dimensions: Dimensions
|
||||
handleBounds?: NodeHandleBounds
|
||||
}
|
||||
|
||||
export type NodePositionChange = {
|
||||
id: string
|
||||
type: 'position'
|
||||
position?: XYPosition
|
||||
dragging?: boolean
|
||||
}
|
||||
|
||||
export type NodeSelectionChange = {
|
||||
id: string
|
||||
type: 'select'
|
||||
selected: boolean
|
||||
}
|
||||
|
||||
export type NodeRemoveChange = {
|
||||
id: string
|
||||
type: 'remove'
|
||||
}
|
||||
|
||||
export type NodeAddChange<NodeData = any> = {
|
||||
item: Node<NodeData>
|
||||
type: 'add'
|
||||
}
|
||||
|
||||
export type NodeResetChange<NodeData = any> = {
|
||||
item: Node<NodeData>
|
||||
type: 'reset'
|
||||
}
|
||||
|
||||
export type NodeChange =
|
||||
| NodeDimensionChange
|
||||
| NodePositionChange
|
||||
| NodeSelectionChange
|
||||
| NodeRemoveChange
|
||||
| NodeAddChange
|
||||
| NodeResetChange
|
||||
|
||||
export type EdgeSelectionChange = NodeSelectionChange
|
||||
export type EdgeRemoveChange = NodeRemoveChange
|
||||
export type EdgeAddChange<EdgeData = any> = {
|
||||
item: Edge<EdgeData>
|
||||
type: 'add'
|
||||
}
|
||||
export type EdgeResetChange<EdgeData = any> = {
|
||||
item: Edge<EdgeData>
|
||||
type: 'reset'
|
||||
}
|
||||
export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange
|
||||
export type ElementChange = NodeChange | EdgeChange
|
||||
@@ -0,0 +1,109 @@
|
||||
import { Component, CSSProperties, DefineComponent, HTMLAttributes } from 'vue'
|
||||
import { BackgroundVariant, Dimensions, XYPosition } from './flow'
|
||||
import { GraphNode, Node, NodeProps } from './node'
|
||||
import { EdgeProps } from './edge'
|
||||
import { FitViewParams } from './zoom'
|
||||
|
||||
/** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
|
||||
type GlobalComponentName = string
|
||||
|
||||
/** Node Components can either be a component definition or a string name */
|
||||
export type NodeComponent<N = any> =
|
||||
| Component<NodeProps<N>>
|
||||
| DefineComponent<NodeProps<N>, any, any, any, any>
|
||||
| GlobalComponentName
|
||||
|
||||
/** Edge Components can either be a component definition or a string name */
|
||||
export type EdgeComponent<E = any> =
|
||||
| Component<EdgeProps<E>>
|
||||
| DefineComponent<EdgeProps<E>, any, any, any, any, any>
|
||||
| GlobalComponentName
|
||||
|
||||
export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step' | 'simplebezier']: EdgeComponent }
|
||||
export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeComponent }
|
||||
|
||||
export interface BackgroundProps {
|
||||
/** The background pattern variant, {@link BackgroundVariant} */
|
||||
variant?: BackgroundVariant
|
||||
/** Background pattern gap */
|
||||
gap?: number
|
||||
/** Background pattern size */
|
||||
size?: number
|
||||
/** Background pattern color */
|
||||
patternColor?: string
|
||||
/** Background color */
|
||||
bgColor?: string
|
||||
/** Background height */
|
||||
height?: number
|
||||
/** Background width */
|
||||
width?: number
|
||||
/** Background x-coordinate (offset x) */
|
||||
x?: number
|
||||
/** Background y-coordinate (offset y) */
|
||||
y?: number
|
||||
}
|
||||
|
||||
export interface ControlProps {
|
||||
/** Show the zoom icon */
|
||||
showZoom?: boolean
|
||||
/** Show the fit-view icon */
|
||||
showFitView?: boolean
|
||||
/** Show the interactive icon */
|
||||
showInteractive?: boolean
|
||||
/** Params to use on fitView */
|
||||
fitViewParams?: FitViewParams
|
||||
}
|
||||
|
||||
export interface ControlEvents {
|
||||
(event: 'zoom-in'): void
|
||||
(event: 'zoom-out'): void
|
||||
(event: 'fit-view'): void
|
||||
(event: 'interaction-change', active: boolean): void
|
||||
}
|
||||
|
||||
/** expects a node and returns a color value */
|
||||
export type StringFunc<N = any> = (node: Node<N> | GraphNode<N>) => string
|
||||
export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
|
||||
|
||||
export interface MiniMapProps<N = any> {
|
||||
/** Node color, can be either a string or a string func that receives the current node */
|
||||
nodeColor?: string | (<NC = N>(node: Node<NC> | GraphNode<NC>) => string)
|
||||
/** Node stroke color, can be either a string or a string func that receives the current node */
|
||||
nodeStrokeColor?: string | (<NSC = N>(node: Node<NSC> | GraphNode<NSC>) => string)
|
||||
/** Additional node class name, can be either a string or a string func that receives the current node */
|
||||
nodeClassName?: string | (<NCM = N>(node: Node<NCM> | GraphNode<NCM>) => string)
|
||||
/** Node border radius */
|
||||
nodeBorderRadius?: number
|
||||
/** Node stroke width */
|
||||
nodeStrokeWidth?: number
|
||||
/** Background color of minimap */
|
||||
maskColor?: string
|
||||
}
|
||||
|
||||
/** these props are passed to mini map node slots */
|
||||
export interface MiniMapNodeProps {
|
||||
position: XYPosition
|
||||
dimensions: Dimensions
|
||||
borderRadius?: number
|
||||
color?: string
|
||||
shapeRendering?: CSSProperties['shapeRendering']
|
||||
strokeColor?: string
|
||||
strokeWidth?: number
|
||||
}
|
||||
|
||||
/** these props are passed to edge texts */
|
||||
export interface EdgeTextProps extends HTMLAttributes {
|
||||
x: number
|
||||
y: number
|
||||
label?:
|
||||
| string
|
||||
| {
|
||||
component: any
|
||||
props?: any
|
||||
}
|
||||
labelStyle?: CSSProperties
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: CSSProperties
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { CSSProperties } from 'vue'
|
||||
import { Position } from './flow'
|
||||
import { GraphNode } from './node'
|
||||
import { HandleElement, HandleType } from './handle'
|
||||
|
||||
/** Connection line types (same as default edge types */
|
||||
export enum ConnectionLineType {
|
||||
Bezier = 'default',
|
||||
Straight = 'straight',
|
||||
Step = 'step',
|
||||
SmoothStep = 'smoothstep',
|
||||
}
|
||||
|
||||
/** Connection params that are passed when onConnect is called */
|
||||
export interface Connection {
|
||||
/** Source node id */
|
||||
source: string | null
|
||||
/** Target node id */
|
||||
target: string | null
|
||||
/** Source handle id */
|
||||
sourceHandle: string | null
|
||||
/** Target handle id */
|
||||
targetHandle: string | null
|
||||
}
|
||||
|
||||
/** The source nodes params when connection is initiated */
|
||||
export type OnConnectStartParams = {
|
||||
/** Source node id */
|
||||
nodeId?: string
|
||||
/** Source handle id */
|
||||
handleId: string | null
|
||||
/** Source handle type */
|
||||
handleType?: HandleType
|
||||
}
|
||||
|
||||
/** Connection modes, when set to loose all handles are treated as source */
|
||||
export enum ConnectionMode {
|
||||
Strict = 'strict',
|
||||
Loose = 'loose',
|
||||
}
|
||||
|
||||
export interface ConnectionLineProps<N = any> {
|
||||
/** Source X position of the connection line */
|
||||
sourceX: number
|
||||
/** Source Y position of the connection line */
|
||||
sourceY: number
|
||||
/** Source position of the connection line */
|
||||
sourcePosition: Position
|
||||
/** Target X position of the connection line */
|
||||
targetX: number
|
||||
/** Target Y position of the connection line */
|
||||
targetY: number
|
||||
/** Target position of the connection line */
|
||||
targetPosition: Position
|
||||
/** the shape of the connection line when active */
|
||||
connectionLineType: ConnectionLineType
|
||||
/** extra styles */
|
||||
connectionLineStyle: CSSProperties
|
||||
/** All currently stored nodes */
|
||||
nodes: GraphNode<N>[]
|
||||
/** The source node of the connection line */
|
||||
sourceNode: GraphNode<N>
|
||||
/** The source handle element of the connection line */
|
||||
sourceHandle: HandleElement
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
import { CSSProperties } from 'vue'
|
||||
import { Position, Element } from './flow'
|
||||
import { GraphNode } from './node'
|
||||
|
||||
/** Edge markers */
|
||||
export enum MarkerType {
|
||||
Arrow = 'arrow',
|
||||
ArrowClosed = 'arrowclosed',
|
||||
}
|
||||
|
||||
/** Edge marker definition */
|
||||
export interface EdgeMarker {
|
||||
/** Unique marker id */
|
||||
id?: string
|
||||
/** Marker type */
|
||||
type: MarkerType
|
||||
/** Marker color */
|
||||
color?: string
|
||||
/** Marker width */
|
||||
width?: number
|
||||
/** Marker height */
|
||||
height?: number
|
||||
/** Marker units */
|
||||
markerUnits?: string
|
||||
/** Marker orientation */
|
||||
orient?: string
|
||||
/** Marker stroke width */
|
||||
strokeWidth?: number
|
||||
}
|
||||
|
||||
export interface MarkerProps {
|
||||
id: string
|
||||
type: MarkerType | string
|
||||
color?: string
|
||||
width?: number
|
||||
height?: number
|
||||
markerUnits?: string
|
||||
orient?: string
|
||||
strokeWidth?: number
|
||||
}
|
||||
|
||||
export type EdgeMarkerType = string | MarkerType | EdgeMarker
|
||||
|
||||
export interface Edge<T = any> extends Element<T> {
|
||||
/** Source node id */
|
||||
source: string
|
||||
/** Target node id */
|
||||
target: string
|
||||
/** Source handle id */
|
||||
sourceHandle?: string | null
|
||||
/** Target handle id */
|
||||
targetHandle?: string | null
|
||||
/** Source position */
|
||||
sourcePosition?: Position
|
||||
/** Target position */
|
||||
targetPosition?: Position
|
||||
/** Label styles (CSSProperties) */
|
||||
labelStyle?: CSSProperties
|
||||
/** Show label bg */
|
||||
labelShowBg?: boolean
|
||||
/** Label Bg styles (CSSProperties) */
|
||||
labelBgStyle?: CSSProperties
|
||||
/** Label Bg padding */
|
||||
labelBgPadding?: [number, number]
|
||||
/** Label Bg border radius */
|
||||
labelBgBorderRadius?: number
|
||||
/** Animated edge */
|
||||
animated?: boolean
|
||||
/** EdgeMarker */
|
||||
markerStart?: EdgeMarkerType
|
||||
/** EdgeMarker */
|
||||
markerEnd?: EdgeMarkerType
|
||||
/** Disable/enable updating edge */
|
||||
updatable?: boolean
|
||||
/** Disable/enable selecting edge */
|
||||
selectable?: boolean
|
||||
}
|
||||
|
||||
export type DefaultEdgeOptions = Omit<
|
||||
Edge,
|
||||
'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
|
||||
>
|
||||
|
||||
export interface EdgePositions {
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
targetX: number
|
||||
targetY: number
|
||||
}
|
||||
|
||||
/** Internal edge type */
|
||||
export type GraphEdge<T = any, N = T> = Edge<T> & {
|
||||
sourceNode: GraphNode<N>
|
||||
targetNode: GraphNode<N>
|
||||
selected?: boolean
|
||||
z?: number
|
||||
} & EdgePositions
|
||||
|
||||
/** these props are passed to edge components */
|
||||
export interface EdgeProps<Data = any> {
|
||||
id: string
|
||||
sourceNode: GraphNode
|
||||
targetNode: GraphNode
|
||||
label?:
|
||||
| string
|
||||
| {
|
||||
props?: any
|
||||
component: any
|
||||
}
|
||||
type?: string
|
||||
data?: Data
|
||||
style?: CSSProperties
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
targetX: number
|
||||
targetY: number
|
||||
selected?: boolean
|
||||
sourcePosition: Position
|
||||
targetPosition: Position
|
||||
sourceHandleId?: string
|
||||
targetHandleId?: string
|
||||
source: string
|
||||
target: string
|
||||
sourceHandle?: string
|
||||
targetHandle?: string
|
||||
labelStyle?: CSSProperties
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
animated?: boolean
|
||||
updatable?: boolean
|
||||
markerStart?: string
|
||||
markerEnd?: string
|
||||
curvature?: number
|
||||
}
|
||||
|
||||
/** these props are passed to smooth step edges */
|
||||
export interface SmoothStepEdgeProps<Data = any> extends EdgeProps<Data> {
|
||||
id: string
|
||||
sourceNode: GraphNode
|
||||
targetNode: GraphNode
|
||||
label?:
|
||||
| string
|
||||
| {
|
||||
props?: any
|
||||
component: any
|
||||
}
|
||||
type?: string
|
||||
data?: Data
|
||||
style?: CSSProperties
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
targetX: number
|
||||
targetY: number
|
||||
selected?: boolean
|
||||
sourcePosition: Position
|
||||
targetPosition: Position
|
||||
sourceHandleId?: string
|
||||
targetHandleId?: string
|
||||
source: string
|
||||
target: string
|
||||
sourceHandle?: string
|
||||
targetHandle?: string
|
||||
labelStyle?: any
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
animated?: boolean
|
||||
updatable?: boolean
|
||||
markerStart?: string
|
||||
markerEnd?: string
|
||||
borderRadius?: number
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { CSSProperties } from 'vue'
|
||||
import { GraphEdge, Edge, DefaultEdgeOptions } from './edge'
|
||||
import { GraphNode, CoordinateExtent, Node } from './node'
|
||||
import { ConnectionLineType, ConnectionMode } from './connection'
|
||||
import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
|
||||
import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
|
||||
|
||||
/** an internal element */
|
||||
export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
|
||||
export type FlowElements<N = any, E = any> = FlowElement<N, E>[]
|
||||
|
||||
/** base element props */
|
||||
export interface Element<Data = any> {
|
||||
id: string
|
||||
label?:
|
||||
| string
|
||||
| {
|
||||
props?: any
|
||||
component: any
|
||||
}
|
||||
type?: string
|
||||
data?: Data
|
||||
class?: string
|
||||
style?: CSSProperties
|
||||
hidden?: boolean
|
||||
}
|
||||
export type Elements<N = any, E = any> = (Node<N> | Edge<E>)[]
|
||||
|
||||
/** Transform x, y, z */
|
||||
export type Transform = [number, number, number]
|
||||
|
||||
/** Handle Positions */
|
||||
export enum Position {
|
||||
Left = 'left',
|
||||
Top = 'top',
|
||||
Right = 'right',
|
||||
Bottom = 'bottom',
|
||||
}
|
||||
|
||||
export interface XYPosition {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export type XYZPosition = XYPosition & { z: number }
|
||||
|
||||
export interface Dimensions {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface Box extends XYPosition {
|
||||
x2: number
|
||||
y2: number
|
||||
}
|
||||
|
||||
export interface Rect extends Dimensions, XYPosition {}
|
||||
|
||||
export type SnapGrid = [number, number]
|
||||
|
||||
export enum BackgroundVariant {
|
||||
Lines = 'lines',
|
||||
Dots = 'dots',
|
||||
}
|
||||
|
||||
export interface SelectionRect extends Rect {
|
||||
startX: number
|
||||
startY: number
|
||||
draw: boolean
|
||||
}
|
||||
|
||||
export type FlowExportObject<N = any, E = N> = {
|
||||
nodes: GraphNode<N>[]
|
||||
edges: GraphEdge<E>[]
|
||||
position: [number, number]
|
||||
zoom: number
|
||||
}
|
||||
|
||||
export type ToObject<N = any, E = N> = () => FlowExportObject<N, E>
|
||||
|
||||
export type FlowInstance<N = any, E = N> = {
|
||||
getElements: () => FlowElements<N, E>
|
||||
getNodes: () => GraphNode<N>[]
|
||||
getEdges: () => GraphEdge<E>[]
|
||||
toObject: ToObject<N, E>
|
||||
} & UseZoomPanHelper
|
||||
|
||||
export interface FlowProps<N = any, E = N> {
|
||||
id?: string
|
||||
modelValue?: Elements<N, E>
|
||||
nodes?: Node<N>[]
|
||||
edges?: Edge<E>[]
|
||||
/** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
|
||||
edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & { [key: string]: EdgeComponent }
|
||||
/** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
|
||||
nodeTypes?: { [key in keyof DefaultNodeTypes]?: NodeComponent } & { [key: string]: NodeComponent }
|
||||
connectionMode?: ConnectionMode
|
||||
connectionLineType?: ConnectionLineType
|
||||
connectionLineStyle?: CSSProperties | null
|
||||
deleteKeyCode?: KeyCode
|
||||
selectionKeyCode?: KeyCode
|
||||
multiSelectionKeyCode?: KeyCode
|
||||
zoomActivationKeyCode?: KeyCode
|
||||
snapToGrid?: boolean
|
||||
snapGrid?: SnapGrid
|
||||
onlyRenderVisibleElements?: boolean
|
||||
edgesUpdatable?: boolean
|
||||
nodesDraggable?: boolean
|
||||
nodesConnectable?: boolean
|
||||
elementsSelectable?: boolean
|
||||
selectNodesOnDrag?: boolean
|
||||
/** move pane on drag, replaced prop `paneMovable` */
|
||||
panOnDrag?: boolean
|
||||
minZoom?: number
|
||||
maxZoom?: number
|
||||
defaultZoom?: number
|
||||
defaultPosition?: [number, number]
|
||||
translateExtent?: CoordinateExtent
|
||||
nodeExtent?: CoordinateExtent
|
||||
defaultMarkerColor?: string
|
||||
zoomOnScroll?: boolean
|
||||
zoomOnPinch?: boolean
|
||||
panOnScroll?: boolean
|
||||
panOnScrollSpeed?: number
|
||||
panOnScrollMode?: PanOnScrollMode
|
||||
zoomOnDoubleClick?: boolean
|
||||
/** enable this to prevent vue flow from scrolling inside the container, i.e. allow for the page to scroll */
|
||||
preventScrolling?: boolean
|
||||
edgeUpdaterRadius?: number
|
||||
fitViewOnInit?: boolean
|
||||
/** allow connection with click handlers, i.e. support touch devices */
|
||||
connectOnClick?: boolean
|
||||
/** apply default change handlers for position, dimensions, adding/removing nodes. set this to false if you want to apply the changes manually */
|
||||
applyDefault?: boolean
|
||||
noDragClassName?: string
|
||||
noWheelClassName?: string
|
||||
noPanClassName?: string
|
||||
/** does not work for the `addEdge` utility! */
|
||||
defaultEdgeOptions?: DefaultEdgeOptions
|
||||
}
|
||||
|
||||
export type FlowOptions<N = any, E = N> = FlowProps<N, E>
|
||||
@@ -0,0 +1,31 @@
|
||||
import { Dimensions, Position, XYPosition } from './flow'
|
||||
import { Connection } from './connection'
|
||||
|
||||
export type HandleType = 'source' | 'target'
|
||||
|
||||
export interface HandleElement extends XYPosition, Dimensions {
|
||||
id?: string | null
|
||||
position: Position
|
||||
}
|
||||
|
||||
export interface StartHandle {
|
||||
nodeId: string
|
||||
type: HandleType
|
||||
handleId?: string | null
|
||||
}
|
||||
|
||||
/** A valid connection function can determine if an attempted connection is valid or not, i.e. abort creating a new edge */
|
||||
export type ValidConnectionFunc = (connection: Connection) => boolean
|
||||
|
||||
export interface HandleProps {
|
||||
/** Unique id of handle element */
|
||||
id?: string
|
||||
/** Handle type (source / target) {@link HandleType} */
|
||||
type?: HandleType
|
||||
/** Handle position (top, bottom, left, right) {@link Position} */
|
||||
position?: Position
|
||||
/** A valid connection func {@link ValidConnectionFunc} */
|
||||
isValidConnection?: ValidConnectionFunc
|
||||
/** Enable/disable connecting to handle */
|
||||
connectable?: boolean
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { EventHook, EventHookOn } from '@vueuse/core'
|
||||
import { MouseTouchEvent } from '@braks/revue-draggable'
|
||||
import { D3ZoomEvent } from 'd3-zoom'
|
||||
import { FlowInstance } from './flow'
|
||||
import { GraphEdge } from './edge'
|
||||
import { GraphNode } from './node'
|
||||
import { Connection, OnConnectStartParams } from './connection'
|
||||
import { FlowTransform } from './zoom'
|
||||
import { EdgeChange, NodeChange } from './changes'
|
||||
|
||||
export interface FlowEvents<N = any, E = N> {
|
||||
nodesChange: NodeChange[]
|
||||
edgesChange: EdgeChange[]
|
||||
nodeDoubleClick: { event: MouseTouchEvent; node: GraphNode<N> }
|
||||
nodeClick: { event: MouseTouchEvent; node: GraphNode<N> }
|
||||
nodeMouseEnter: { event: MouseEvent; node: GraphNode<N> }
|
||||
nodeMouseMove: { event: MouseEvent; node: GraphNode<N> }
|
||||
nodeMouseLeave: { event: MouseEvent; node: GraphNode<N> }
|
||||
nodeContextMenu: { event: MouseEvent; node: GraphNode<N> }
|
||||
nodeDragStart: { event: MouseTouchEvent; node: GraphNode<N> }
|
||||
nodeDrag: { event: MouseTouchEvent; node: GraphNode<N> }
|
||||
nodeDragStop: { event: MouseTouchEvent; node: GraphNode<N> }
|
||||
connect: Connection
|
||||
connectStart: {
|
||||
event: MouseEvent
|
||||
} & OnConnectStartParams
|
||||
connectStop: MouseEvent
|
||||
connectEnd: MouseEvent
|
||||
paneReady: FlowInstance<N, E>
|
||||
move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
|
||||
moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
|
||||
moveEnd: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: FlowTransform }
|
||||
selectionDragStart: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
|
||||
selectionDrag: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
|
||||
selectionDragStop: { event: MouseTouchEvent; nodes: GraphNode<N>[] }
|
||||
selectionContextMenu: { event: MouseEvent; nodes: GraphNode<N>[] }
|
||||
paneScroll: WheelEvent | undefined
|
||||
paneClick: MouseEvent
|
||||
paneContextMenu: MouseEvent
|
||||
edgeContextMenu: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
edgeMouseEnter: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
edgeMouseMove: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
edgeMouseLeave: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
edgeDoubleClick: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
edgeClick: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
edgeUpdateStart: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
edgeUpdate: { edge: GraphEdge<E>; connection: Connection }
|
||||
edgeUpdateEnd: { event: MouseEvent; edge: GraphEdge<E> }
|
||||
}
|
||||
|
||||
export type FlowEvent = FlowEvents[keyof FlowEvents]
|
||||
export type FlowHook<T extends FlowEvent = any> = EventHook<T>
|
||||
export type FlowHookOn<T extends FlowEvent = any> = EventHookOn<T>
|
||||
|
||||
export type FlowHooks<N = any, E = N> = { [key in keyof FlowEvents<N, E>]: FlowHook<FlowEvents<N, E>[key]> }
|
||||
export type FlowHooksOn<N = any, E = N> = {
|
||||
[key in keyof FlowEvents<N, E> as `on${Capitalize<key>}`]: FlowHookOn<FlowEvents<N, E>[key]>
|
||||
}
|
||||
|
||||
export type EmitFunc<T extends FlowHooks = FlowHooks> = (name: keyof T, ...args: any[]) => void
|
||||
@@ -0,0 +1,10 @@
|
||||
export * from './flow'
|
||||
export * from './connection'
|
||||
export * from './edge'
|
||||
export * from './components'
|
||||
export * from './node'
|
||||
export * from './zoom'
|
||||
export * from './store'
|
||||
export * from './hooks'
|
||||
export * from './changes'
|
||||
export * from './handle'
|
||||
@@ -0,0 +1,81 @@
|
||||
import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions } from './flow'
|
||||
import { DefaultNodeTypes } from './components'
|
||||
import { HandleElement, ValidConnectionFunc } from './handle'
|
||||
|
||||
export type CoordinateExtent = [[number, number], [number, number]]
|
||||
|
||||
export type NodeHandleBounds = {
|
||||
source?: HandleElement[]
|
||||
target?: HandleElement[]
|
||||
}
|
||||
|
||||
export interface Node<T = any> extends Element<T> {
|
||||
/** node position x, y */
|
||||
position: XYPosition
|
||||
/** node type, can be a default type or a custom type */
|
||||
type?: keyof DefaultNodeTypes | string
|
||||
/** handle position */
|
||||
targetPosition?: Position
|
||||
/** handle position */
|
||||
sourcePosition?: Position
|
||||
draggable?: boolean
|
||||
selectable?: boolean
|
||||
connectable?: boolean
|
||||
dragHandle?: string
|
||||
/** move on grid */
|
||||
snapGrid?: SnapGrid
|
||||
/** called when used as target for new connection */
|
||||
isValidTargetPos?: ValidConnectionFunc
|
||||
/** called when used as source for new connection */
|
||||
isValidSourcePos?: ValidConnectionFunc
|
||||
/** define node extent, i.e. area in which node can be moved */
|
||||
extent?: 'parent' | CoordinateExtent
|
||||
/** expands parent area to fit child node */
|
||||
expandParent?: boolean
|
||||
/** define node as a child node by setting a parent node id */
|
||||
parentNode?: string
|
||||
}
|
||||
|
||||
export interface GraphNode<T = any> extends Node<T> {
|
||||
/** absolute position in relation to parent elements + z-index */
|
||||
computedPosition: XYZPosition
|
||||
handleBounds: NodeHandleBounds
|
||||
/** node width, height */
|
||||
dimensions: Dimensions
|
||||
isParent: boolean
|
||||
selected: boolean
|
||||
dragging: boolean
|
||||
}
|
||||
|
||||
/** these props are passed to node components */
|
||||
export interface NodeProps<T = any> {
|
||||
id: string
|
||||
/** node DOM-element */
|
||||
nodeElement: HTMLDivElement
|
||||
type: string
|
||||
data: T
|
||||
selected: boolean
|
||||
connectable: boolean
|
||||
/** absolute position in relation to parent elements + z-index */
|
||||
computedPosition: XYZPosition
|
||||
/** x, y position */
|
||||
position: XYPosition
|
||||
/** node dimensions (width, height) */
|
||||
dimensions: Dimensions
|
||||
label?:
|
||||
| string
|
||||
| {
|
||||
props?: any
|
||||
component: any
|
||||
}
|
||||
/** called when used as target for new connection */
|
||||
isValidTargetPos?: ValidConnectionFunc
|
||||
/** called when used as source for new connection */
|
||||
isValidSourcePos?: ValidConnectionFunc
|
||||
parentNode?: string
|
||||
dragging: boolean
|
||||
zIndex: number
|
||||
targetPosition?: Position
|
||||
sourcePosition?: Position
|
||||
dragHandle?: string
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { ComputedRef, CSSProperties, ToRefs } from 'vue'
|
||||
import { Dimensions, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, Transform, XYPosition } from './flow'
|
||||
import { EdgeComponent, NodeComponent, DefaultNodeTypes, DefaultEdgeTypes } from './components'
|
||||
import { Connection, ConnectionLineType, ConnectionMode } from './connection'
|
||||
import { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
|
||||
import { GraphNode, CoordinateExtent, Node } from './node'
|
||||
import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './zoom'
|
||||
import { FlowHooks, FlowHooksOn } from './hooks'
|
||||
import { NodeChange, EdgeChange } from './changes'
|
||||
import { StartHandle, HandleType } from './handle'
|
||||
|
||||
export interface State<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'modelValue'> {
|
||||
/** Event hooks, you can manipulate the triggers on your own peril */
|
||||
hooks: FlowHooks<N, E>
|
||||
instance: FlowInstance<N, E> | null
|
||||
|
||||
/** all stored nodes */
|
||||
nodes: GraphNode<N>[]
|
||||
/** all stored edges */
|
||||
edges: GraphEdge<E>[]
|
||||
|
||||
d3Zoom: D3Zoom | null
|
||||
d3Selection: D3Selection | null
|
||||
d3ZoomHandler: D3ZoomHandler | null
|
||||
minZoom: number
|
||||
maxZoom: number
|
||||
defaultZoom: number
|
||||
translateExtent: CoordinateExtent
|
||||
nodeExtent: CoordinateExtent
|
||||
/** zoom pane dimensions */
|
||||
dimensions: Dimensions
|
||||
/** transform x, y, z */
|
||||
transform: Transform
|
||||
onlyRenderVisibleElements: boolean
|
||||
defaultPosition: [number, number]
|
||||
|
||||
selectedNodesBbox: Rect
|
||||
nodesSelectionActive: boolean
|
||||
userSelectionActive: boolean
|
||||
multiSelectionActive: boolean
|
||||
deleteKeyCode: KeyCode
|
||||
selectionKeyCode: KeyCode
|
||||
multiSelectionKeyCode: KeyCode
|
||||
zoomActivationKeyCode: KeyCode
|
||||
|
||||
connectionNodeId: string | null
|
||||
connectionHandleId: string | null
|
||||
connectionHandleType: HandleType | null
|
||||
connectionPosition: XYPosition
|
||||
connectionMode: ConnectionMode
|
||||
connectionLineType: ConnectionLineType
|
||||
connectionLineStyle: CSSProperties | null
|
||||
connectionStartHandle: StartHandle | null
|
||||
connectOnClick: boolean
|
||||
edgeUpdaterRadius: number
|
||||
|
||||
snapToGrid: boolean
|
||||
snapGrid: SnapGrid
|
||||
defaultMarkerColor: string
|
||||
|
||||
edgesUpdatable: boolean
|
||||
nodesDraggable: boolean
|
||||
nodesConnectable: boolean
|
||||
elementsSelectable: boolean
|
||||
selectNodesOnDrag: boolean
|
||||
panOnDrag: boolean
|
||||
zoomOnScroll: boolean
|
||||
zoomOnPinch: boolean
|
||||
panOnScroll: boolean
|
||||
panOnScrollSpeed: number
|
||||
panOnScrollMode: PanOnScrollMode
|
||||
zoomOnDoubleClick: boolean
|
||||
preventScrolling: boolean
|
||||
|
||||
paneReady: boolean
|
||||
initialized: boolean
|
||||
applyDefault: boolean
|
||||
|
||||
fitViewOnInit?: boolean
|
||||
noDragClassName?: string
|
||||
noWheelClassName?: string
|
||||
noPanClassName?: string
|
||||
defaultEdgeOptions?: DefaultEdgeOptions
|
||||
|
||||
vueFlowVersion: string
|
||||
}
|
||||
|
||||
export interface Actions<N = any, E = N> {
|
||||
/** @deprecated use setNodes / setEdges instead */
|
||||
setElements: (elements: Elements<N, E>, extent?: CoordinateExtent) => void
|
||||
/** parses nodes and re-sets the state */
|
||||
setNodes: (nodes: Node<N>[], extent?: CoordinateExtent) => void
|
||||
/** parses edges and re-sets the state */
|
||||
setEdges: (edges: Edge<E>[]) => void
|
||||
/** parses nodes and adds to state */
|
||||
addNodes: <NA = N>(nodes: Node<NA>[], extent?: CoordinateExtent) => void
|
||||
/** parses edges and adds to state */
|
||||
addEdges: <EA = E>(edgesOrConnections: (Edge<EA> | Connection)[]) => void
|
||||
updateEdge: <EU = E>(oldEdge: GraphEdge<EU>, newConnection: Connection) => boolean
|
||||
applyEdgeChanges: <ED = E>(changes: EdgeChange[]) => GraphEdge<ED>[]
|
||||
applyNodeChanges: <ND = N>(changes: NodeChange[]) => GraphNode<ND>[]
|
||||
addSelectedElements: (elements: FlowElements<N, E>) => void
|
||||
addSelectedEdges: (edges: GraphEdge<E>[]) => void
|
||||
addSelectedNodes: (nodes: GraphNode<N>[]) => void
|
||||
setMinZoom: (zoom: number) => void
|
||||
setMaxZoom: (zoom: number) => void
|
||||
setTranslateExtent: (translateExtent: CoordinateExtent) => void
|
||||
resetSelectedElements: () => void
|
||||
setInteractive: (isInteractive: boolean) => void
|
||||
setState: (state: Partial<FlowOptions<N, E> & Omit<State, 'nodes' | 'edges' | 'modelValue'>>) => void
|
||||
updateNodePosition: ({ id, diff, dragging }: { id?: string; diff?: XYPosition; dragging?: boolean }) => void
|
||||
updateNodeDimensions: (
|
||||
updates: {
|
||||
id: string
|
||||
nodeElement: HTMLDivElement
|
||||
forceUpdate?: boolean
|
||||
}[],
|
||||
) => void
|
||||
$reset: () => void
|
||||
}
|
||||
|
||||
export interface Getters<N = any, E = N> {
|
||||
getEdgeTypes: Record<keyof DefaultEdgeTypes | string, EdgeComponent>
|
||||
getNodeTypes: Record<keyof DefaultNodeTypes | string, NodeComponent>
|
||||
/** filters hidden nodes */
|
||||
getNodes: GraphNode<N>[]
|
||||
/** filters hidden edges */
|
||||
getEdges: GraphEdge<E>[]
|
||||
getNode: (id: string) => GraphNode<N> | undefined
|
||||
getEdge: (id: string) => GraphEdge<E> | undefined
|
||||
getSelectedElements: FlowElements<N, E>
|
||||
getSelectedNodes: GraphNode<N>[]
|
||||
getSelectedEdges: GraphEdge<E>[]
|
||||
}
|
||||
|
||||
export type ComputedGetters<N = any, E = N> = { [key in keyof Getters<N, E>]: ComputedRef<Getters<N, E>[key]> }
|
||||
|
||||
interface StoreBase<N = any, E = N> {
|
||||
state: State<N, E>
|
||||
actions: Actions<N, E>
|
||||
getters: ComputedGetters<N, E>
|
||||
hooksOn: FlowHooksOn<N, E>
|
||||
}
|
||||
|
||||
export type Store<N = any, E = N> = StoreBase<N, E> & ToRefs<State<N, E>> & Actions<N, E> & ComputedGetters<N, E>
|
||||
export type FlowStore<N = any, E = N> = StoreBase<N, E> & State<N, E> & Actions<N, E> & Getters<N, E>
|
||||
|
||||
export type UseVueFlow<N = any, E = N> = {
|
||||
id: string
|
||||
store: FlowStore<N, E>
|
||||
} & FlowHooksOn<N, E> &
|
||||
ToRefs<State<N, E>> &
|
||||
ComputedGetters<N, E> &
|
||||
Actions<N, E>
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Selection, ZoomBehavior } from 'd3'
|
||||
import { Rect, XYPosition } from './flow'
|
||||
|
||||
export type D3Zoom = ZoomBehavior<HTMLDivElement, unknown>
|
||||
export type D3Selection = Selection<HTMLDivElement, unknown, any, any>
|
||||
export type D3ZoomHandler = (this: HTMLDivElement, event: any, d: unknown) => void
|
||||
|
||||
export type KeyCode = number | string
|
||||
|
||||
export enum PanOnScrollMode {
|
||||
Free = 'free',
|
||||
Vertical = 'vertical',
|
||||
Horizontal = 'horizontal',
|
||||
}
|
||||
|
||||
export type UseZoomPanHelperOptions = {
|
||||
duration?: number
|
||||
}
|
||||
|
||||
export type FitViewParams = {
|
||||
padding?: number
|
||||
includeHiddenNodes?: boolean
|
||||
minZoom?: number
|
||||
maxZoom?: number
|
||||
offset?: {
|
||||
x?: number
|
||||
y?: number
|
||||
}
|
||||
nodes?: string[]
|
||||
} & UseZoomPanHelperOptions
|
||||
|
||||
export type FlowTransform = {
|
||||
x: number
|
||||
y: number
|
||||
zoom: number
|
||||
}
|
||||
|
||||
export type SetCenterOptions = UseZoomPanHelperOptions & {
|
||||
zoom?: number
|
||||
}
|
||||
|
||||
export type FitBoundsOptions = UseZoomPanHelperOptions & {
|
||||
padding?: number
|
||||
}
|
||||
|
||||
export type FitView = (fitViewOptions?: FitViewParams) => void
|
||||
export type Project = (position: XYPosition) => XYPosition
|
||||
export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void
|
||||
export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void
|
||||
export type ZoomInOut = (options?: UseZoomPanHelperOptions) => void
|
||||
export type ZoomTo = (zoomLevel: number, options?: UseZoomPanHelperOptions) => void
|
||||
export type GetTransform = () => FlowTransform
|
||||
export type SetTransform = (transform: FlowTransform, options?: UseZoomPanHelperOptions) => void
|
||||
|
||||
export interface UseZoomPanHelper {
|
||||
zoomIn: ZoomInOut
|
||||
zoomOut: ZoomInOut
|
||||
zoomTo: ZoomTo
|
||||
setTransform: SetTransform
|
||||
getTransform: GetTransform
|
||||
fitView: FitView
|
||||
setCenter: SetCenter
|
||||
fitBounds: FitBounds
|
||||
project: Project
|
||||
}
|
||||
Reference in New Issue
Block a user