refactor(types): Split types into separate files
* for better organization split typings into separate files * use index as barrel file
This commit is contained in:
Braks
@@ -0,0 +1,25 @@
|
||||
import { Dimensions, Elements, XYPosition } from './types'
|
||||
import { NodeDiffUpdate, NodeDimensionUpdate, NodeExtent, NodePosUpdate, TranslateExtent } from './node'
|
||||
import { InitD3ZoomPayload } from './panel'
|
||||
import { SetConnectionId } from './connection'
|
||||
|
||||
export interface RevueFlowActions {
|
||||
setElements: (elements: Elements) => void
|
||||
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void
|
||||
updateNodePos: (payload: NodePosUpdate) => void
|
||||
updateNodePosDiff: (payload: NodeDiffUpdate) => void
|
||||
setUserSelection: (mousePos: XYPosition) => void
|
||||
updateUserSelection: (mousePos: XYPosition) => void
|
||||
unsetUserSelection: () => void
|
||||
addSelectedElements: (elements: Elements) => void
|
||||
initD3Zoom: (payload: InitD3ZoomPayload) => void
|
||||
setMinZoom: (zoom: number) => void
|
||||
setMaxZoom: (zoom: number) => void
|
||||
setTranslateExtent: (translateExtent: TranslateExtent) => void
|
||||
setNodeExtent: (nodeExtent: NodeExtent) => void
|
||||
resetSelectedElements: () => void
|
||||
unsetNodesSelection: () => void
|
||||
updateSize: (size: Dimensions) => void
|
||||
setConnectionNodeId: (payload: SetConnectionId) => void
|
||||
setInteractive: (isInteractive: boolean) => void
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { ComponentPublicInstance } from 'vue'
|
||||
import { ElementId, HandleType, Position } from './types'
|
||||
|
||||
export enum ConnectionLineType {
|
||||
Bezier = 'default',
|
||||
Straight = 'straight',
|
||||
Step = 'step',
|
||||
SmoothStep = 'smoothstep',
|
||||
}
|
||||
|
||||
export interface Connection {
|
||||
source: ElementId | null
|
||||
target: ElementId | null
|
||||
sourceHandle: ElementId | null
|
||||
targetHandle: ElementId | null
|
||||
}
|
||||
|
||||
export type ConnectionLineComponentProps = {
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
sourcePosition?: Position
|
||||
targetX: number
|
||||
targetY: number
|
||||
targetPosition?: Position
|
||||
connectionLineStyle?: any
|
||||
connectionLineType: ConnectionLineType
|
||||
}
|
||||
|
||||
export type ConnectionLineComponent = ComponentPublicInstance<ConnectionLineComponentProps>
|
||||
|
||||
export type OnConnectFunc = (connection: Connection) => void
|
||||
export type OnConnectStartParams = {
|
||||
nodeId: ElementId | null
|
||||
handleId: ElementId | null
|
||||
handleType: HandleType | null
|
||||
}
|
||||
export type OnConnectStartFunc = (event: MouseEvent, params: OnConnectStartParams) => void
|
||||
export type OnConnectStopFunc = (event: MouseEvent) => void
|
||||
export type OnConnectEndFunc = (event: MouseEvent) => void
|
||||
|
||||
export enum ConnectionMode {
|
||||
Strict = 'strict',
|
||||
Loose = 'loose',
|
||||
}
|
||||
|
||||
export type SetConnectionId = {
|
||||
connectionNodeId: ElementId | null
|
||||
connectionHandleId: ElementId | null
|
||||
connectionHandleType: HandleType | null
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { ComponentPublicInstance, HTMLAttributes, VNode } from 'vue'
|
||||
import { ArrowHeadType, ElementId, Position } from './types'
|
||||
import { Connection } from './connection'
|
||||
|
||||
export interface Edge<T = any> {
|
||||
id: ElementId
|
||||
type?: string
|
||||
source: ElementId
|
||||
target: ElementId
|
||||
sourceHandle?: ElementId | null
|
||||
targetHandle?: ElementId | null
|
||||
label?: string | VNode
|
||||
labelStyle?: any
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
style?: any
|
||||
animated?: boolean
|
||||
arrowHeadType?: ArrowHeadType
|
||||
isHidden?: boolean
|
||||
data?: T
|
||||
className?: string
|
||||
}
|
||||
|
||||
export interface EdgeProps<T = any> {
|
||||
id: ElementId
|
||||
source: ElementId
|
||||
target: ElementId
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
targetX: number
|
||||
targetY: number
|
||||
selected?: boolean
|
||||
animated?: boolean
|
||||
sourcePosition: Position
|
||||
targetPosition: Position
|
||||
label?: string | VNode
|
||||
labelStyle?: any
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
style?: any
|
||||
arrowHeadType?: ArrowHeadType
|
||||
markerEndId?: string
|
||||
data?: T
|
||||
sourceHandleId?: ElementId | null
|
||||
targetHandleId?: ElementId | null
|
||||
}
|
||||
|
||||
export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
|
||||
borderRadius?: number
|
||||
}
|
||||
|
||||
export interface EdgeTextProps extends HTMLAttributes {
|
||||
x: number
|
||||
y: number
|
||||
label?: string | VNode
|
||||
labelStyle?: any
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
}
|
||||
|
||||
export type EdgeType = ComponentPublicInstance<EdgeSmoothStepProps>
|
||||
|
||||
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Dimensions, ElementId, Position, XYPosition } from './types'
|
||||
import { Connection, OnConnectFunc } from './connection'
|
||||
|
||||
export type HandleType = 'source' | 'target'
|
||||
|
||||
export interface HandleElement extends XYPosition, Dimensions {
|
||||
id?: ElementId | null
|
||||
position: Position
|
||||
}
|
||||
|
||||
export interface HandleProps {
|
||||
type: HandleType
|
||||
position: Position
|
||||
isConnectable?: boolean
|
||||
onConnect?: OnConnectFunc
|
||||
isValidConnection?: (connection: Connection) => boolean
|
||||
id?: ElementId
|
||||
}
|
||||
+8
-425
@@ -1,425 +1,8 @@
|
||||
import { Selection as D3Selection, ZoomBehavior } from 'd3'
|
||||
import { CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue'
|
||||
import { Store } from 'pinia'
|
||||
|
||||
export type ElementId = string
|
||||
|
||||
export type FlowElement<T = any> = Node<T> | Edge<T>
|
||||
|
||||
export type Elements<T = any> = Array<FlowElement<T>>
|
||||
|
||||
export type Transform = [number, number, number]
|
||||
|
||||
export enum Position {
|
||||
Left = 'left',
|
||||
Top = 'top',
|
||||
Right = 'right',
|
||||
Bottom = 'bottom'
|
||||
}
|
||||
|
||||
export interface XYPosition {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export interface Dimensions {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface Rect extends Dimensions, XYPosition {}
|
||||
|
||||
export interface Box extends XYPosition {
|
||||
x2: number
|
||||
y2: number
|
||||
}
|
||||
|
||||
export type SnapGrid = [number, number]
|
||||
|
||||
export interface Node<T = any> {
|
||||
id: ElementId
|
||||
position: XYPosition
|
||||
type?: string
|
||||
__rf: {
|
||||
position: XYPosition
|
||||
isDragging?: boolean
|
||||
width: number | null
|
||||
height: number | null
|
||||
handleBounds?: any
|
||||
}
|
||||
data?: T
|
||||
style?: any
|
||||
className?: string
|
||||
targetPosition?: Position
|
||||
sourcePosition?: Position
|
||||
isHidden?: boolean
|
||||
draggable?: boolean
|
||||
selectable?: boolean
|
||||
connectable?: boolean
|
||||
}
|
||||
|
||||
export enum ArrowHeadType {
|
||||
Arrow = 'arrow',
|
||||
ArrowClosed = 'arrowclosed'
|
||||
}
|
||||
|
||||
export interface Edge<T = any> {
|
||||
id: ElementId
|
||||
type?: string
|
||||
source: ElementId
|
||||
target: ElementId
|
||||
sourceHandle?: ElementId | null
|
||||
targetHandle?: ElementId | null
|
||||
label?: string | VNode
|
||||
labelStyle?: any
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
style?: any
|
||||
animated?: boolean
|
||||
arrowHeadType?: ArrowHeadType
|
||||
isHidden?: boolean
|
||||
data?: T
|
||||
className?: string
|
||||
}
|
||||
|
||||
export enum BackgroundVariant {
|
||||
Lines = 'lines',
|
||||
Dots = 'dots'
|
||||
}
|
||||
|
||||
export type HandleType = 'source' | 'target'
|
||||
|
||||
export type NodeType = DefineComponent<NodeProps>
|
||||
|
||||
export type EdgeType = DefineComponent<EdgeSmoothStepProps>
|
||||
|
||||
export interface SelectionRect extends Rect {
|
||||
startX: number
|
||||
startY: number
|
||||
draw: boolean
|
||||
}
|
||||
|
||||
export interface EdgeProps<T = any> {
|
||||
id: ElementId
|
||||
source: ElementId
|
||||
target: ElementId
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
targetX: number
|
||||
targetY: number
|
||||
selected?: boolean
|
||||
animated?: boolean
|
||||
sourcePosition: Position
|
||||
targetPosition: Position
|
||||
label?: string | VNode
|
||||
labelStyle?: any
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
style?: any
|
||||
arrowHeadType?: ArrowHeadType
|
||||
markerEndId?: string
|
||||
data?: T
|
||||
sourceHandleId?: ElementId | null
|
||||
targetHandleId?: ElementId | null
|
||||
}
|
||||
|
||||
export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
|
||||
borderRadius?: number
|
||||
}
|
||||
|
||||
export interface EdgeTextProps extends HTMLAttributes {
|
||||
x: number
|
||||
y: number
|
||||
label?: string | VNode
|
||||
labelStyle?: any
|
||||
labelShowBg?: boolean
|
||||
labelBgStyle?: any
|
||||
labelBgPadding?: [number, number]
|
||||
labelBgBorderRadius?: number
|
||||
}
|
||||
|
||||
export interface NodeProps<T = any> {
|
||||
id: ElementId
|
||||
type: string
|
||||
data: T
|
||||
selected: boolean
|
||||
isConnectable: boolean
|
||||
xPos?: number
|
||||
yPos?: number
|
||||
targetPosition?: Position
|
||||
sourcePosition?: Position
|
||||
isDragging?: boolean
|
||||
}
|
||||
|
||||
export type FitViewParams = {
|
||||
padding?: number
|
||||
includeHiddenNodes?: boolean
|
||||
minZoom?: number
|
||||
maxZoom?: number
|
||||
}
|
||||
|
||||
export type FlowExportObject<T = any> = {
|
||||
elements: Elements<T>
|
||||
position: [number, number]
|
||||
zoom: number
|
||||
}
|
||||
|
||||
export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
|
||||
export type ProjectFunc = (position: XYPosition) => XYPosition
|
||||
export type ToObjectFunc<T = any> = () => FlowExportObject<T>
|
||||
|
||||
export type OnLoadParams<T = any> = {
|
||||
zoomIn: () => void
|
||||
zoomOut: () => void
|
||||
zoomTo: (zoomLevel: number) => void
|
||||
fitView: FitViewFunc
|
||||
project: ProjectFunc
|
||||
getElements: () => Elements<T>
|
||||
setTransform: (transform: FlowTransform) => void
|
||||
toObject: ToObjectFunc<T>
|
||||
}
|
||||
|
||||
export type OnLoadFunc<T = any> = (params: OnLoadParams<T>) => void
|
||||
|
||||
export interface Connection {
|
||||
source: ElementId | null
|
||||
target: ElementId | null
|
||||
sourceHandle: ElementId | null
|
||||
targetHandle: ElementId | null
|
||||
}
|
||||
|
||||
export enum ConnectionMode {
|
||||
Strict = 'strict',
|
||||
Loose = 'loose'
|
||||
}
|
||||
|
||||
export enum ConnectionLineType {
|
||||
Bezier = 'default',
|
||||
Straight = 'straight',
|
||||
Step = 'step',
|
||||
SmoothStep = 'smoothstep'
|
||||
}
|
||||
|
||||
export type ConnectionLineComponentProps = {
|
||||
sourceX: number
|
||||
sourceY: number
|
||||
sourcePosition?: Position
|
||||
targetX: number
|
||||
targetY: number
|
||||
targetPosition?: Position
|
||||
connectionLineStyle?: any
|
||||
connectionLineType: ConnectionLineType
|
||||
}
|
||||
|
||||
export type ConnectionLineComponent = DefineComponent<ConnectionLineComponentProps>
|
||||
|
||||
export type OnConnectFunc = (connection: Connection) => void
|
||||
export type OnConnectStartParams = {
|
||||
nodeId: ElementId | null
|
||||
handleId: ElementId | null
|
||||
handleType: HandleType | null
|
||||
}
|
||||
export type OnConnectStartFunc = (event: MouseEvent, params: OnConnectStartParams) => void
|
||||
export type OnConnectStopFunc = (event: MouseEvent) => void
|
||||
export type OnConnectEndFunc = (event: MouseEvent) => void
|
||||
|
||||
export type SetConnectionId = {
|
||||
connectionNodeId: ElementId | null
|
||||
connectionHandleId: ElementId | null
|
||||
connectionHandleType: HandleType | null
|
||||
}
|
||||
|
||||
export interface HandleElement extends XYPosition, Dimensions {
|
||||
id?: ElementId | null
|
||||
position: Position
|
||||
}
|
||||
|
||||
export interface HandleProps {
|
||||
type: HandleType
|
||||
position: Position
|
||||
isConnectable?: boolean
|
||||
onConnect?: OnConnectFunc
|
||||
isValidConnection?: (connection: Connection) => boolean
|
||||
id?: ElementId
|
||||
}
|
||||
|
||||
export type NodePosUpdate = {
|
||||
id: ElementId
|
||||
pos: XYPosition
|
||||
}
|
||||
|
||||
export type NodeDiffUpdate = {
|
||||
id?: ElementId
|
||||
diff?: XYPosition
|
||||
isDragging?: boolean
|
||||
}
|
||||
|
||||
export type FlowTransform = {
|
||||
x: number
|
||||
y: number
|
||||
zoom: number
|
||||
}
|
||||
|
||||
export type TranslateExtent = [[number, number], [number, number]]
|
||||
export type NodeExtent = TranslateExtent
|
||||
|
||||
export type KeyCode = number | string
|
||||
|
||||
export enum PanOnScrollMode {
|
||||
Free = 'free',
|
||||
Vertical = 'vertical',
|
||||
Horizontal = 'horizontal'
|
||||
}
|
||||
|
||||
export interface ZoomPanHelperFunctions {
|
||||
zoomIn: () => void
|
||||
zoomOut: () => void
|
||||
zoomTo: (zoomLevel: number) => void
|
||||
transform: (transform: FlowTransform) => void
|
||||
fitView: FitViewFunc
|
||||
setCenter: (x: number, y: number, zoom?: number) => void
|
||||
fitBounds: (bounds: Rect, padding?: number) => void
|
||||
project: (position: XYPosition) => XYPosition
|
||||
}
|
||||
|
||||
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
|
||||
|
||||
export type NodeDimensionUpdate = {
|
||||
id: ElementId
|
||||
nodeElement: HTMLDivElement
|
||||
forceUpdate?: boolean
|
||||
}
|
||||
|
||||
export type InitD3ZoomPayload = {
|
||||
d3Zoom: ZoomBehavior<Element, unknown>
|
||||
d3Selection: D3Selection<Element, unknown, null, undefined>
|
||||
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
||||
transform: Transform
|
||||
}
|
||||
|
||||
export interface RevueFlowState {
|
||||
width: number
|
||||
height: number
|
||||
transform: Transform
|
||||
nodes: Node[]
|
||||
edges: Edge[]
|
||||
selectedElements: Elements | null
|
||||
selectedNodesBbox: Rect
|
||||
|
||||
d3Zoom: ZoomBehavior<Element, unknown> | null
|
||||
d3Selection: D3Selection<Element, unknown, null, undefined> | null
|
||||
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
||||
minZoom: number
|
||||
maxZoom: number
|
||||
translateExtent: TranslateExtent
|
||||
nodeExtent: NodeExtent
|
||||
|
||||
nodesSelectionActive: boolean
|
||||
selectionActive: boolean
|
||||
|
||||
userSelectionRect: SelectionRect
|
||||
|
||||
connectionNodeId: ElementId | null
|
||||
connectionHandleId: ElementId | null
|
||||
connectionHandleType: HandleType | null
|
||||
connectionPosition: XYPosition
|
||||
connectionMode: ConnectionMode
|
||||
|
||||
snapToGrid: boolean
|
||||
snapGrid: SnapGrid
|
||||
|
||||
nodesDraggable: boolean
|
||||
nodesConnectable: boolean
|
||||
elementsSelectable: boolean
|
||||
|
||||
multiSelectionActive: boolean
|
||||
|
||||
revueFlowVersion: string
|
||||
|
||||
onConnect?: OnConnectFunc
|
||||
onConnectStart?: OnConnectStartFunc
|
||||
onConnectStop?: OnConnectStopFunc
|
||||
onConnectEnd?: OnConnectEndFunc
|
||||
}
|
||||
|
||||
export type RevueFlowActions = {
|
||||
setElements: (elements: Elements) => void
|
||||
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void
|
||||
updateNodePos: (payload: NodePosUpdate) => void
|
||||
updateNodePosDiff: (payload: NodeDiffUpdate) => void
|
||||
setUserSelection: (mousePos: XYPosition) => void
|
||||
updateUserSelection: (mousePos: XYPosition) => void
|
||||
unsetUserSelection: () => void
|
||||
addSelectedElements: (elements: Elements) => void
|
||||
initD3Zoom: (payload: InitD3ZoomPayload) => void
|
||||
setMinZoom: (zoom: number) => void
|
||||
setMaxZoom: (zoom: number) => void
|
||||
setTranslateExtent: (translateExtent: TranslateExtent) => void
|
||||
setNodeExtent: (nodeExtent: NodeExtent) => void
|
||||
resetSelectedElements: () => void
|
||||
unsetNodesSelection: () => void
|
||||
updateSize: (size: Dimensions) => void
|
||||
setConnectionNodeId: (payload: SetConnectionId) => void
|
||||
setInteractive: (isInteractive: boolean) => void
|
||||
}
|
||||
|
||||
export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions>
|
||||
|
||||
export type UpdateNodeInternals = (nodeId: ElementId) => void
|
||||
|
||||
export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
||||
modelValue: Elements
|
||||
nodeTypes?: Record<string, NodeType>
|
||||
edgeTypes?: Record<string, EdgeType>
|
||||
connectionMode?: ConnectionMode
|
||||
connectionLineType?: ConnectionLineType
|
||||
connectionLineStyle?: CSSProperties
|
||||
connectionLineComponent?: ConnectionLineComponent
|
||||
deleteKeyCode?: KeyCode
|
||||
selectionKeyCode?: KeyCode
|
||||
multiSelectionKeyCode?: KeyCode
|
||||
zoomActivationKeyCode?: KeyCode
|
||||
snapToGrid?: boolean
|
||||
snapGrid?: [number, number]
|
||||
onlyRenderVisibleElements?: boolean
|
||||
nodesDraggable?: boolean
|
||||
nodesConnectable?: boolean
|
||||
elementsSelectable?: boolean
|
||||
selectNodesOnDrag?: boolean
|
||||
paneMoveable?: boolean
|
||||
minZoom?: number
|
||||
maxZoom?: number
|
||||
defaultZoom?: number
|
||||
defaultPosition?: [number, number]
|
||||
translateExtent?: TranslateExtent
|
||||
nodeExtent?: NodeExtent
|
||||
arrowHeadColor?: string
|
||||
markerEndId?: string
|
||||
zoomOnScroll?: boolean
|
||||
zoomOnPinch?: boolean
|
||||
panOnScroll?: boolean
|
||||
panOnScrollSpeed?: number
|
||||
panOnScrollMode?: PanOnScrollMode
|
||||
zoomOnDoubleClick?: boolean
|
||||
edgeUpdaterRadius?: number
|
||||
nodeTypesId?: string
|
||||
edgeTypesId?: string
|
||||
}
|
||||
|
||||
export interface GraphViewProps extends Required<RevueFlowProps> {
|
||||
selectionKeyCode: KeyCode
|
||||
deleteKeyCode: KeyCode
|
||||
multiSelectionKeyCode: KeyCode
|
||||
connectionLineType: ConnectionLineType
|
||||
snapToGrid: boolean
|
||||
snapGrid: [number, number]
|
||||
onlyRenderVisibleElements: boolean
|
||||
defaultZoom: number
|
||||
defaultPosition: [number, number]
|
||||
arrowHeadColor: string
|
||||
selectNodesOnDrag: boolean
|
||||
}
|
||||
export * from './types'
|
||||
export * from './actions'
|
||||
export * from './connection'
|
||||
export * from './edge'
|
||||
export * from './handle'
|
||||
export * from './node'
|
||||
export * from './panel'
|
||||
export * from './store'
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { ComponentPublicInstance } from 'vue'
|
||||
import { XYPosition } from './types'
|
||||
import { ElementId, Position } from './index'
|
||||
|
||||
export interface Node<T = any> {
|
||||
id: ElementId
|
||||
position: XYPosition
|
||||
type?: string
|
||||
__rf: {
|
||||
position: XYPosition
|
||||
isDragging?: boolean
|
||||
width: number | null
|
||||
height: number | null
|
||||
handleBounds?: any
|
||||
}
|
||||
data?: T
|
||||
style?: any
|
||||
className?: string
|
||||
targetPosition?: Position
|
||||
sourcePosition?: Position
|
||||
isHidden?: boolean
|
||||
draggable?: boolean
|
||||
selectable?: boolean
|
||||
connectable?: boolean
|
||||
}
|
||||
|
||||
export type NodePosUpdate = {
|
||||
id: ElementId
|
||||
pos: XYPosition
|
||||
}
|
||||
|
||||
export type NodeDiffUpdate = {
|
||||
id?: ElementId
|
||||
diff?: XYPosition
|
||||
isDragging?: boolean
|
||||
}
|
||||
|
||||
export type TranslateExtent = [[number, number], [number, number]]
|
||||
export type NodeExtent = TranslateExtent
|
||||
|
||||
export type NodeDimensionUpdate = {
|
||||
id: ElementId
|
||||
nodeElement: HTMLDivElement
|
||||
forceUpdate?: boolean
|
||||
}
|
||||
|
||||
export interface NodeProps<T = any> {
|
||||
id: ElementId
|
||||
type: string
|
||||
data: T
|
||||
selected: boolean
|
||||
isConnectable: boolean
|
||||
xPos?: number
|
||||
yPos?: number
|
||||
targetPosition?: Position
|
||||
sourcePosition?: Position
|
||||
isDragging?: boolean
|
||||
}
|
||||
|
||||
export type NodeType = ComponentPublicInstance<NodeProps>
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Selection as D3Selection, ZoomBehavior } from 'd3'
|
||||
import { FitViewFunc, FlowTransform, Rect, Transform, XYPosition } from './types'
|
||||
|
||||
export type KeyCode = number | string
|
||||
|
||||
export enum PanOnScrollMode {
|
||||
Free = 'free',
|
||||
Vertical = 'vertical',
|
||||
Horizontal = 'horizontal',
|
||||
}
|
||||
|
||||
export interface ZoomPanHelperFunctions {
|
||||
zoomIn: () => void
|
||||
zoomOut: () => void
|
||||
zoomTo: (zoomLevel: number) => void
|
||||
transform: (transform: FlowTransform) => void
|
||||
fitView: FitViewFunc
|
||||
setCenter: (x: number, y: number, zoom?: number) => void
|
||||
fitBounds: (bounds: Rect, padding?: number) => void
|
||||
project: (position: XYPosition) => XYPosition
|
||||
}
|
||||
|
||||
export type InitD3ZoomPayload = {
|
||||
d3Zoom: ZoomBehavior<Element, unknown>
|
||||
d3Selection: D3Selection<Element, unknown, null, undefined>
|
||||
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
||||
transform: Transform
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { ZoomBehavior, Selection } from 'd3'
|
||||
import { Store } from 'pinia'
|
||||
import { ElementId, Elements, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
|
||||
import { HandleType } from './handle'
|
||||
import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
|
||||
import { Edge } from './edge'
|
||||
import { Node, NodeExtent, TranslateExtent } from './node'
|
||||
import { RevueFlowActions } from './actions'
|
||||
|
||||
export interface RevueFlowState {
|
||||
width: number
|
||||
height: number
|
||||
transform: Transform
|
||||
nodes: Node[]
|
||||
edges: Edge[]
|
||||
selectedElements: Elements | null
|
||||
selectedNodesBbox: Rect
|
||||
|
||||
d3Zoom: ZoomBehavior<Element, unknown> | null
|
||||
d3Selection: Selection<Element, unknown, null, undefined> | null
|
||||
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
||||
minZoom: number
|
||||
maxZoom: number
|
||||
translateExtent: TranslateExtent
|
||||
nodeExtent: NodeExtent
|
||||
|
||||
nodesSelectionActive: boolean
|
||||
selectionActive: boolean
|
||||
|
||||
userSelectionRect: SelectionRect
|
||||
|
||||
connectionNodeId: ElementId | null
|
||||
connectionHandleId: ElementId | null
|
||||
connectionHandleType: HandleType | null
|
||||
connectionPosition: XYPosition
|
||||
connectionMode: ConnectionMode
|
||||
|
||||
snapToGrid: boolean
|
||||
snapGrid: SnapGrid
|
||||
|
||||
nodesDraggable: boolean
|
||||
nodesConnectable: boolean
|
||||
elementsSelectable: boolean
|
||||
|
||||
multiSelectionActive: boolean
|
||||
|
||||
revueFlowVersion: string
|
||||
|
||||
onConnect?: OnConnectFunc
|
||||
onConnectStart?: OnConnectStartFunc
|
||||
onConnectStop?: OnConnectStopFunc
|
||||
onConnectEnd?: OnConnectEndFunc
|
||||
}
|
||||
|
||||
export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions>
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Edge } from './edge'
|
||||
import { Node } from './node'
|
||||
|
||||
export type ElementId = string
|
||||
|
||||
export type FlowElement<T = any> = Node<T> | Edge<T>
|
||||
|
||||
export type Elements<T = any> = Array<FlowElement<T>>
|
||||
|
||||
export type Transform = [number, number, number]
|
||||
|
||||
export enum Position {
|
||||
Left = 'left',
|
||||
Top = 'top',
|
||||
Right = 'right',
|
||||
Bottom = 'bottom',
|
||||
}
|
||||
|
||||
export interface XYPosition {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export interface Dimensions {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface Rect extends Dimensions, XYPosition {}
|
||||
|
||||
export type SnapGrid = [number, number]
|
||||
|
||||
export enum ArrowHeadType {
|
||||
Arrow = 'arrow',
|
||||
ArrowClosed = 'arrowclosed',
|
||||
}
|
||||
|
||||
export enum BackgroundVariant {
|
||||
Lines = 'lines',
|
||||
Dots = 'dots',
|
||||
}
|
||||
|
||||
export interface SelectionRect extends Rect {
|
||||
startX: number
|
||||
startY: number
|
||||
draw: boolean
|
||||
}
|
||||
|
||||
export type FitViewParams = {
|
||||
padding?: number
|
||||
includeHiddenNodes?: boolean
|
||||
minZoom?: number
|
||||
maxZoom?: number
|
||||
}
|
||||
|
||||
export type FlowExportObject<T = any> = {
|
||||
elements: Elements<T>
|
||||
position: [number, number]
|
||||
zoom: number
|
||||
}
|
||||
|
||||
export type FlowTransform = {
|
||||
x: number
|
||||
y: number
|
||||
zoom: number
|
||||
}
|
||||
|
||||
export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
|
||||
export type ProjectFunc = (position: XYPosition) => XYPosition
|
||||
export type ToObjectFunc<T = any> = () => FlowExportObject<T>
|
||||
|
||||
export type OnLoadParams<T = any> = {
|
||||
zoomIn: () => void
|
||||
zoomOut: () => void
|
||||
zoomTo: (zoomLevel: number) => void
|
||||
fitView: FitViewFunc
|
||||
project: ProjectFunc
|
||||
getElements: () => Elements<T>
|
||||
setTransform: (transform: FlowTransform) => void
|
||||
toObject: ToObjectFunc<T>
|
||||
}
|
||||
|
||||
export type OnLoadFunc<T = any> = (params: OnLoadParams<T>) => void
|
||||
Reference in New Issue
Block a user