Class Flow

Represents a Flow component.

Hierarchy

  • Flow

Constructors

Properties

Accessors

Methods

Events

Constructors

  • constructor

    Parameters

    • canvas: HTMLCanvasElement

      The canvas where this diagram will paint to.

    Returns Flow

Properties

bezierSelectionLinesStrokeStyle: string = 'navy'

Returns/sets the drawing color of the lines used for selected bezier links

Default

'navy'
canChangeDst: boolean = true

Determines whether the user can interactively change the destination node of a link.

Default

true
canChangeOrg: boolean = true

Determines whether the user can interactively change the origin node of a link.

Default

true
canDragScroll: boolean = true

Determines whether drag scrolling is allowed or not.

Default

true
canDrawLink: boolean = true

Determines whether interactive creation of links is allowed.

Default

true
canDrawNode: boolean = true

Determines whether interactive creation of nodes is allowed.

Default

true
canMoveItem: boolean = true

Determines whether you can drag moveable items interactively.

Default

true
canMultiLink: boolean = true

Determines whether you can create several links between two nodes or not. *

Default

true
canMultiSelect: boolean = true

Determines whether multiselection mode of nodes and links is allowed or not.

Default

true
canReflexLink: boolean = true

Determines whether you can create reflexive links. A link is reflexive if its destination and origin nodes are the same.

Default

true
canSelectOnMouseMove: boolean = true

Indicates whether the selection of items with the mouse is made only when the mouseUp event is fired or at each mouseMove event

Default

true
canSendSelectionChangedEvent: boolean = true

Determines whether the selectionChanged event is fired or not.

Default

true
canShowContextHandle: boolean = true

Determines whether context handles are displayed for selected items

Default

true
canShowJumps: boolean = false

Determines whether jumps are displayed at the intersection of links.

Default

false.
canSizeItem: boolean = true

Determines whether you can resize sizeable items interactively.

Default

true
canStretchLink: boolean = true

Determines whether you can 'stretch' links (i.e add or remove segments) interactively. *

Default

true
canvas: HTMLCanvasElement

The canvas where this diagram will paint to.

centralPinGradientColor1: string = 'white'

Returns/sets the first color defining the gradient style used for central pins.

Default

'white'
centralPinGradientColor2: string = 'white'

Returns/sets the second color defining the gradient style used for central pins.

Default

'white'
centralPinStrokeColor: string = 'black'

Returns/sets the color used to draw central pin

Default

'black'
contextHandleGradientColor1: string = 'white'

Returns/sets the first color defining the gradient style used for context handles

Default

'white'
contextHandleGradientColor2: string = 'lightblue'

Returns/sets the second color defining the gradient style used for context handles

Default

'lightblue'
contextHandleSize: number = 20

Returns/sets the size of a context handle. It is the horizontal size. The vertical sise is equal to the horizontal size multiplied by 2 and divided by 5.

Default

20
contextHandleStrokeStyle: string = 'navy'

Returns/sets the drawing color of the context handles

Default

'navy'
fillStyle: string = '#fff'

Returns/sets the canvas background color.

Default

#fff
gridDraw: boolean = false

Determines whether the grid is displayed or not.

Default

false
gridSizeX: number = 16

Returns/sets the horizontal grid size.

Default

16
gridSizeY: number = 16

Returns/sets the vertical grid size.

Default

16
gridSnap: boolean = false

Determines whether nodes are aligned on the grid

Default

false
gridStrokeStyle: string = 'rgb(192, 192, 192)'

Returns/sets the grid color.

Default

rgb(192, 192, 192)
handleGradientColor1: string = 'white'

Returns/sets the first color defining the gradient style used for handles

Default

'white'
handleGradientColor2: string = 'lightgray'

Returns/sets the second color defining the gradient style used for the selection handles of nodes and links.

Default

'lightgray'
handleSize: number = 6

Returns/sets the size of the handles used to select items.

Default

6
handleStrokeStyle: string = 'black'

Returns/sets the color used to draw a selection handle of a node or a link.

Default

'black'
hitArea: MouseArea = MouseArea.Outside

Used to specify the type of the area pointed by the mouse. outSide resizeHandle stretchHandle pin link node

hittedItem: Item = null

Returns the reference of the item under the mouse

isCreatingLink: boolean = false
isCreatingNode: boolean = false
isFindIntersections: boolean = true
isMoving: boolean = false
isPanning: boolean = false
isResizing: boolean = false
isSelecting: boolean = false
isStretchingLink: boolean = false
isZooming: boolean = false
labelModel: Label = null

An object this contains the default property values for labels. When a label is created, it receives these property values.

linkModel: Link = null

An object this contains the default property values for links. When a link is created, it receives these property values.

linkSelectionAreaWidth: number = 6

Returns/sets the width of the area where the user has to click to select a link.

Default

6
mouseAction: MouseAction = MouseAction.None

Returns/sets the selection rectangle action: select, zoom ... none. Create nodes with the mouse. Select the items partially inside the rectangle
selection2. Select the items completely inside the rectangle zoom. Zoom the rectangle while ensuring a 1:1 aspect ratio

Default

None
nodeModel: Node = null

An object this contains the default property values for nodes. When a node is created, it receives these property values.

offsetDatabase: number = 35
ownerDraw: ((ctx) => void) = null

Type declaration

    • (ctx): void
    • A method allowing making custom drawing on the AddFlow canvas.

      Parameters

      • ctx: CanvasRenderingContext2D

      Returns void

      Default

      null
      
pinGradientColor1: string = 'white'

Returns/sets the first color defining the gradient style used for pins.

Default

'white'
pinGradientColor2: string = 'navy'

Returns/sets the second color defining the gradient style used for pins.

Default

'navy'
pinSize: number = 8

Returns/sets the size of the pins used to create links.

Default

8
pinStrokeStyle: string = 'white'

Returns/sets the color used to draw pins

Default

'white'
removePointDistance: number = 6

Returns/sets a value this determines if the user can remove a link point by dragging the handle to a position where it has a very obtuse angle to its surrounding link points.

Default

6
scrollIncrement: number = 20

Returns/sets the scroll amount for the scroll bar arrows.

Default

20
selRectFillStyle: string = 'rgba(224, 224, 224, 0.3)'

Returns/sets the selection rectangle filling color.

Default

'rgba(192, 192, 192, 0.5)'
selRectLineWidth: number = 1

Returns/sets the selection rectangle width.

Default

1
selRectStrokeStyle: string = 'gray'

Returns/sets the selection rectangle color.

Default

'gray'
shadowBlur: number = 2

Returns/sets the amount of blur on the shadow used to display items, in pixels.

Default

2
shadowColor: string = 'rgba(128, 128, 192, 0.5)'

Returns/sets the color of the shadow used to display items.

Default

rgba(128, 128, 192, 0.5)
shadowOffsetX: number = 5

Returns/sets the X offset of the shadow used to display items

Default

5
shadowOffsetY: number = 5

Returns/sets the Y offset of the shadow used to display items

Default

5
taskManager: TaskManager = null

The object managing the list of tasks and allowing undo/redo.

zoomFactor: number = 1.25

Accessors

  • get isQuadtree(): boolean
  • Determines whether a Quadtree structure is used to improve speed

    Returns boolean

  • set isQuadtree(value): void
  • Parameters

    • value: boolean

    Returns void

  • get items(): Item[]
  • Get the list of all items (nodes, links and labels)

    Returns Item[]

  • get selectedItems(): Item[]
  • Get the list of the selected items.

    Returns Item[]

  • get xExtent(): number
  • return the horizontal size of the diagram

    Returns number

  • get xOffset(): number
  • Returns/sets the horizontal offset

    Returns number

  • set xOffset(value): void
  • Parameters

    • value: number

    Returns void

  • get yExtent(): number
  • return the vertical size of the diagram

    Returns number

  • get yOffset(): number
  • Returns/sets the vertical offset

    Returns number

  • set yOffset(value): void
  • Parameters

    • value: number

    Returns void

  • get zoom(): number
  • Returns/sets the zoom factor

    Returns number

  • set zoom(value): void
  • Parameters

    • value: number

    Returns void

Methods

  • Add a label to the diagram

    Parameters

    • label: Label

      The label to add to the diagram

    Returns void

  • Add a link to the diagram

    Parameters

    • link: Link

      The link to add to the diagram

    Returns void

  • Add a node to the diagram

    Parameters

    • node: Node

      The node to add to the diagram

    Returns void

  • The beginUpdate method prevents the control to calculate the size of the diagram until the endUpdate method is called, thus allowing better performance.

    Returns void

  • Bring the selected items at the front of the zorder list

    Returns void

  • Clear the diagram by removing all items.

    Returns void

  • Delete the selected items.

    Returns void

  • Parameters

    • Optional distance: number

      The distance between two vertices

    • Optional marginSize: Size

      The margin size

    • Optional isUnmoveableItemsAccepted: boolean
    • Optional isRandom: boolean

      Determines whether the nodes are placed randomly at the beginning of the layout. Normally, the algorithm starts by placing the
      nodes randomly on the control, except if isRandomStart is False.

    • Optional isSendStepEvent: boolean

      Determines whether the Step event is fired at each iteration of the layout algorithm. This property could be used for instance to terminate the algorithm.

    • Optional isAnimated: boolean

      Determines whether an animation is provided

    Returns void

    Force Directed

    performs a symmetric layout on a graph, using a force directed algorithm. By default, the algorithm applies on all items (nodes and links). However you may exclude an item by setting its isExcludedFromLayout property to true.

  • Parameters

    • Optional layerDistance: number

      The distance between two adjacent layers

    • Optional vertexDistance: number

      The distance between two adjacent vertices

    • Optional orientation: Orientation

      The graph layout orientation (north, east, south, west)

    • Optional marginSize: Size

      The margin size

    • Optional layerWidth: number

      The maximum number of vertices in a layer. If it is 0, then there is no maximum number of vertices.

    Returns void

    Hierarchic

    performs a hierarchical layout. By default, the algorithm applies on all items (nodes and links). However you may exclude an item by setting its isExcludedFromLayout property to true.

  • Parameters

    • Optional layerDistance: number

      The distance between two adjacent layers

    • Optional vertexDistance: number

      The distance between two adjacent vertices

    • Optional drawingStyle: TreeDrawingStyle

      The tree drawing style (layered or radial)

    • Optional orientation: Orientation

      The graph layout orientation (north, east, south, west)

    • Optional marginSize: Size

      The margin size

    Returns void

    Tree

    performs a tree layout on a graph. The tree drawing may be layered or radial. By default, the algorithm applies on all items. However you may exclude an item by setting its isExcludedFromLayout property to true.

  • The beginUpdate method prevents the control to calculate the size of the diagram until the endUpdate method is called, thus allowing better performance.

    Returns void

  • Parameters

    • item: any

    Returns boolean

  • Parameters

    • item: any

    Returns boolean

  • Parameters

    • item: any

    Returns boolean

  • Parameters

    • item: any

    Returns boolean

  • Parameters

    • item: any

    Returns boolean

  • Returns boolean

  • Cause the canvas to be updated.

    Returns void

  • Remove a label.

    Parameters

    • label: Label

      A reference to the label to be removed.

    Returns void

  • Remove a link.

    Parameters

    • link: Link

      A reference to the link to be removed.

    Returns void

  • Remove a node.

    Parameters

    • node: Node

      A reference to the node to be removed.

    Returns void

  • Reset the default property values for the diagram

    Returns void

  • Returns void

  • Returns void

  • Returns void

  • Select all the items.

    Returns void

  • Send the selected items at the back of the zorder list

    Returns void

  • Unselect all the selected items.

    Returns void

  • Apply a specified zoom factor and arrange so that a specified point is placed at the center of the viewport.

    Parameters

    • zoom: number

      The zoom factor.

    • pt: Point

      The center point.

    Returns void

  • Zoom and scroll a view to fit a specified rectangular portion of the diagram.

    Parameters

    • rc: Rect

      The rectangular region to zoom.

    Returns void

Events

ContextEvent: string = 'context'

Triggered when the user clicks on a context handle

Param

a reference to the item owning the context handle

MouseEnterItemEvent: string = 'mouseEnterItem'

Triggered when the mouse pointer enters an item area.

Param

a reference to the item visited by the mouse pointer

MouseLeaveItemEvent: string = 'mouseLeaveItem'

Triggered when the mouse pointer leaves an item area.

Param

a reference to the item leaved by the mouse pointer

SelectionChangeEvent: string = 'selectionChange'

Triggered when an item is selected or unselected

Param

a reference to the selected or unselected item

Generated using TypeDoc