# Class Flow

Represents a Flow component.

#### Hierarchy

- Flow

- Defined in flow.ts:337

#####
Index

### Constructors

constructor

### Properties

bezierSelectionLinesStrokeStyle
canChangeDst
canChangeOrg
canDragScroll
canDrawLink
canDrawNode
canMoveItem
canMultiLink
canMultiSelect
canReflexLink
canSelectOnMouseMove
canSendSelectionChangedEvent
canShowContextHandle
canShowJumps
canSizeItem
canStretchLink
canvas
centralPinGradientColor1
centralPinGradientColor2
centralPinStrokeColor
contextHandleGradientColor1
contextHandleGradientColor2
contextHandleSize
contextHandleStrokeStyle
fillStyle
gridDraw
gridSizeX
gridSizeY
gridSnap
gridStrokeStyle
handleGradientColor1
handleGradientColor2
handleSize
handleStrokeStyle
hitArea
hittedItem
isCreatingLink
isCreatingNode
isFindIntersections
isMoving
isPanning
isResizing
isSelecting
isStretchingLink
isZooming
labelModel
linkModel
linkSelectionAreaWidth
mouseAction
nodeModel
offsetDatabase
ownerDraw
pinGradientColor1
pinGradientColor2
pinSize
pinStrokeStyle
removePointDistance
scrollIncrement
selRectFillStyle
selRectLineWidth
selRectStrokeStyle
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
taskManager
zoomFactor

### Accessors

isQuadtree
items
selectedItems
xExtent
xOffset
yExtent
yOffset
zoom

### Methods

addLabel
addLink
addNode
beginUpdate
bringToFront
clear
deleteSel
doForceDirectedLayout
doHierarchicLayout
doTreeLayout
endUpdate
isIHasContext
isIHasLabels
isILinkable
isIMoveable
isISizeable
isInteractive
refresh
removeLabel
removeLink
removeNode
resetDefaultFlowSettings
resetDefaultLabelModel
resetDefaultLinkModel
resetDefaultNodeModel
selectAll
sendToBack
unselectAll
zoomCenter
zoomRectangle

### Events

ContextEvent
ItemCreatedEvent
ItemDeletedEvent
MouseEnterItemEvent
MouseLeaveItemEvent
SelectionChangeEvent

## Constructors

### constructor

- new Flow(canvas): Flow

- constructor

  #### Parameters

  - ##### canvas: HTMLCanvasElement

    The canvas where this diagram will paint to.

  #### Returns Flow

  - Defined in flow.ts:341

## Properties

### bezierSelectionLinesStrokeStyle

bezierSelectionLinesStrokeStyle: string = 'navy'

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

#### Default

    'navy'

- Defined in flow.ts:785

### canChangeDst

canChangeDst: boolean = true

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

#### Default

    true

- Defined in flow.ts:654

### canChangeOrg

canChangeOrg: boolean = true

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

#### Default

    true

- Defined in flow.ts:649

### canDragScroll

canDragScroll: boolean = true

Determines whether drag scrolling is allowed or not.

#### Default

    true

- Defined in flow.ts:663

### canDrawLink

canDrawLink: boolean = true

Determines whether interactive creation of links is allowed.

#### Default

    true

- Defined in flow.ts:616

### canDrawNode

canDrawNode: boolean = true

Determines whether interactive creation of nodes is allowed.

#### Default

    true

- Defined in flow.ts:611

### canMoveItem

canMoveItem: boolean = true

Determines whether you can drag moveable items interactively.

#### Default

    true

- Defined in flow.ts:621

### canMultiLink

canMultiLink: boolean = true

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

#### Default

    true

- Defined in flow.ts:638

### canMultiSelect

canMultiSelect: boolean = true

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

#### Default

    true

- Defined in flow.ts:658

### canReflexLink

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

- Defined in flow.ts:644

### canSelectOnMouseMove

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

- Defined in flow.ts:669

### canSendSelectionChangedEvent

canSendSelectionChangedEvent: boolean = true

Determines whether the selectionChanged event is fired or not.

#### Default

    true

- Defined in flow.ts:674

### canShowContextHandle

canShowContextHandle: boolean = true

Determines whether context handles are displayed for selected items

#### Default

    true

- Defined in flow.ts:679

### canShowJumps

canShowJumps: boolean = false

Determines whether jumps are displayed at the intersection of links.

#### Default

    false.

- Defined in flow.ts:684

### canSizeItem

canSizeItem: boolean = true

Determines whether you can resize sizeable items interactively.

#### Default

    true

- Defined in flow.ts:626

### canStretchLink

canStretchLink: boolean = true

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

#### Default

    true

- Defined in flow.ts:632

### canvas

canvas: HTMLCanvasElement

The canvas where this diagram will paint to.

- Defined in flow.ts:592

### centralPinGradientColor1

centralPinGradientColor1: string = 'white'

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

#### Default

    'white'

- Defined in flow.ts:853

### centralPinGradientColor2

centralPinGradientColor2: string = 'white'

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

#### Default

    'white'

- Defined in flow.ts:858

### centralPinStrokeColor

centralPinStrokeColor: string = 'black'

Returns/sets the color used to draw central pin

#### Default

    'black'

- Defined in flow.ts:863

### contextHandleGradientColor1

contextHandleGradientColor1: string = 'white'

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

#### Default

    'white'

- Defined in flow.ts:823

### contextHandleGradientColor2

contextHandleGradientColor2: string = 'lightblue'

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

#### Default

    'lightblue'

- Defined in flow.ts:828

### contextHandleSize

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

- Defined in flow.ts:813

### contextHandleStrokeStyle

contextHandleStrokeStyle: string = 'navy'

Returns/sets the drawing color of the context handles

#### Default

    'navy'

- Defined in flow.ts:818

### fillStyle

fillStyle: string = '#fff'

Returns/sets the canvas background color.

#### Default

    #fff

- Defined in flow.ts:759

### gridDraw

gridDraw: boolean = false

Determines whether the grid is displayed or not.

#### Default

    false

- Defined in flow.ts:749

### gridSizeX

gridSizeX: number = 16

Returns/sets the horizontal grid size.

#### Default

    16

- Defined in flow.ts:734

### gridSizeY

gridSizeY: number = 16

Returns/sets the vertical grid size.

#### Default

    16

- Defined in flow.ts:739

### gridSnap

gridSnap: boolean = false

Determines whether nodes are aligned on the grid

#### Default

    false

- Defined in flow.ts:744

### gridStrokeStyle

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

Returns/sets the grid color.

#### Default

    rgb(192, 192, 192)

- Defined in flow.ts:754

### handleGradientColor1

handleGradientColor1: string = 'white'

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

#### Default

    'white'

- Defined in flow.ts:795

### handleGradientColor2

handleGradientColor2: string = 'lightgray'

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

#### Default

    'lightgray'

- Defined in flow.ts:801

### handleSize

handleSize: number = 6

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

#### Default

    6

- Defined in flow.ts:790

### handleStrokeStyle

handleStrokeStyle: string = 'black'

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

#### Default

    'black'

- Defined in flow.ts:806

### hitArea

hitArea: MouseArea = MouseArea.Outside

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

- Defined in flow.ts:697

### hittedItem

hittedItem: Item = null

Returns the reference of the item under the mouse

- Defined in flow.ts:498

### isCreatingLink

isCreatingLink: boolean = false

- Defined in flow.ts:461

### isCreatingNode

isCreatingNode: boolean = false

- Defined in flow.ts:460

### isFindIntersections

isFindIntersections: boolean = true

- Defined in flow.ts:459

### isMoving

isMoving: boolean = false

- Defined in flow.ts:464

### isPanning

isPanning: boolean = false

- Defined in flow.ts:467

### isResizing

isResizing: boolean = false

- Defined in flow.ts:463

### isSelecting

isSelecting: boolean = false

- Defined in flow.ts:465

### isStretchingLink

isStretchingLink: boolean = false

- Defined in flow.ts:462

### isZooming

isZooming: boolean = false

- Defined in flow.ts:466

### labelModel

labelModel: Label = null

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

- Defined in flow.ts:604

### linkModel

linkModel: Link = null

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

- Defined in flow.ts:600

### linkSelectionAreaWidth

linkSelectionAreaWidth: number = 6

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

#### Default

    6

- Defined in flow.ts:722

### mouseAction

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

- Defined in flow.ts:693

### nodeModel

nodeModel: Node = null

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

- Defined in flow.ts:596

### offsetDatabase

offsetDatabase: number = 35

- Defined in flow.ts:468

### ownerDraw

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

- Defined in flow.ts:765

### pinGradientColor1

pinGradientColor1: string = 'white'

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

#### Default

    'white'

- Defined in flow.ts:838

### pinGradientColor2

pinGradientColor2: string = 'navy'

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

#### Default

    'navy'

- Defined in flow.ts:843

### pinSize

pinSize: number = 8

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

#### Default

    8

- Defined in flow.ts:833

### pinStrokeStyle

pinStrokeStyle: string = 'white'

Returns/sets the color used to draw pins

#### Default

    'white'

- Defined in flow.ts:848

### removePointDistance

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

- Defined in flow.ts:729

### scrollIncrement

scrollIncrement: number = 20

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

#### Default

    20

- Defined in flow.ts:868

### selRectFillStyle

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

Returns/sets the selection rectangle filling color.

#### Default

    'rgba(192, 192, 192, 0.5)'

- Defined in flow.ts:770

### selRectLineWidth

selRectLineWidth: number = 1

Returns/sets the selection rectangle width.

#### Default

    1

- Defined in flow.ts:780

### selRectStrokeStyle

selRectStrokeStyle: string = 'gray'

Returns/sets the selection rectangle color.

#### Default

    'gray'

- Defined in flow.ts:775

### shadowBlur

shadowBlur: number = 2

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

#### Default

    2

- Defined in flow.ts:712

### shadowColor

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)

- Defined in flow.ts:717

### shadowOffsetX

shadowOffsetX: number = 5

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

#### Default

    5

- Defined in flow.ts:702

### shadowOffsetY

shadowOffsetY: number = 5

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

#### Default

    5

- Defined in flow.ts:707

### taskManager

taskManager: TaskManager = null

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

- Defined in flow.ts:607

### zoomFactor

zoomFactor: number = 1.25

- Defined in flow.ts:469

## Accessors

### isQuadtree

- get isQuadtree(): boolean

- Determines whether a Quadtree structure is used to improve speed

  #### Returns boolean

  - Defined in flow.ts:568
- set isQuadtree(value): void

- #### Parameters

  - ##### value: boolean

  #### Returns void

  - Defined in flow.ts:572

### items

- get items(): Item[]

- Get the list of all items (nodes, links and labels)

  #### Returns Item[]

  - Defined in flow.ts:505

### selectedItems

- get selectedItems(): Item[]

- Get the list of the selected items.

  #### Returns Item[]

  - Defined in flow.ts:514

### xExtent

- get xExtent(): number

- return the horizontal size of the diagram

  #### Returns number

  - Defined in flow.ts:582

### xOffset

- get xOffset(): number

- Returns/sets the horizontal offset

  #### Returns number

  - Defined in flow.ts:538
- set xOffset(value): void

- #### Parameters

  - ##### value: number

  #### Returns void

  - Defined in flow.ts:542

### yExtent

- get yExtent(): number

- return the vertical size of the diagram

  #### Returns number

  - Defined in flow.ts:587

### yOffset

- get yOffset(): number

- Returns/sets the vertical offset

  #### Returns number

  - Defined in flow.ts:553
- set yOffset(value): void

- #### Parameters

  - ##### value: number

  #### Returns void

  - Defined in flow.ts:557

### zoom

- get zoom(): number

- Returns/sets the zoom factor

  #### Returns number

  - Defined in flow.ts:523
- set zoom(value): void

- #### Parameters

  - ##### value: number

  #### Returns void

  - Defined in flow.ts:527

## Methods

### addLabel

- addLabel(label): void

- Add a label to the diagram

  #### Parameters

  - ##### label: Label

    The label to add to the diagram

  #### Returns void

  - Defined in flow.ts:1028

### addLink

- addLink(link): void

- Add a link to the diagram

  #### Parameters

  - ##### link: Link

    The link to add to the diagram

  #### Returns void

  - Defined in flow.ts:1003

### addNode

- addNode(node): void

- Add a node to the diagram

  #### Parameters

  - ##### node: Node

    The node to add to the diagram

  #### Returns void

  - Defined in flow.ts:985

### beginUpdate

- beginUpdate(): 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

  - Defined in flow.ts:1289

### bringToFront

- bringToFront(): void

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

  #### Returns void

  - Defined in flow.ts:1274

### clear

- clear(): void

- Clear the diagram by removing all items.

  #### Returns void

  - Defined in flow.ts:1222

### deleteSel

- deleteSel(): void

- Delete the selected items.

  #### Returns void

  - Defined in flow.ts:1177

### doForceDirectedLayout

- doForceDirectedLayout(distance?, marginSize?, isUnmoveableItemsAccepted?, isRandom?, isSendStepEvent?, isAnimated?): 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.

  - Defined in flow.ts:1370

### doHierarchicLayout

- doHierarchicLayout(layerDistance?, vertexDistance?, orientation?, marginSize?, layerWidth?): void

- #### 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.

  - Defined in flow.ts:1387

### doTreeLayout

- doTreeLayout(layerDistance?, vertexDistance?, drawingStyle?, orientation?, marginSize?): void

- #### 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.

  - Defined in flow.ts:1402

### endUpdate

- endUpdate(): 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

  - Defined in flow.ts:1296

### isIHasContext

- isIHasContext(item): boolean

- #### Parameters

  - ##### item: any

  #### Returns boolean

  - Defined in flow.ts:974

### isIHasLabels

- isIHasLabels(item): boolean

- #### Parameters

  - ##### item: any

  #### Returns boolean

  - Defined in flow.ts:970

### isILinkable

- isILinkable(item): boolean

- #### Parameters

  - ##### item: any

  #### Returns boolean

  - Defined in flow.ts:966

### isIMoveable

- isIMoveable(item): boolean

- #### Parameters

  - ##### item: any

  #### Returns boolean

  - Defined in flow.ts:958

### isISizeable

- isISizeable(item): boolean

- #### Parameters

  - ##### item: any

  #### Returns boolean

  - Defined in flow.ts:962

### isInteractive

- isInteractive(): boolean

- #### Returns boolean

  - Defined in flow.ts:978

### refresh

- refresh(): void

- Cause the canvas to be updated.

  #### Returns void

  - Defined in flow.ts:873

### removeLabel

- removeLabel(label): void

- Remove a label.

  #### Parameters

  - ##### label: Label

    A reference to the label to be removed.

  #### Returns void

  - Defined in flow.ts:1133

### removeLink

- removeLink(link): void

- Remove a link.

  #### Parameters

  - ##### link: Link

    A reference to the link to be removed.

  #### Returns void

  - Defined in flow.ts:1093

### removeNode

- removeNode(node): void

- Remove a node.

  #### Parameters

  - ##### node: Node

    A reference to the node to be removed.

  #### Returns void

  - Defined in flow.ts:1051

### resetDefaultFlowSettings

- resetDefaultFlowSettings(): void

- Reset the default property values for the diagram

  #### Returns void

  - Defined in flow.ts:880

### resetDefaultLabelModel

- resetDefaultLabelModel(): void

- #### Returns void

  - Defined in flow.ts:954

### resetDefaultLinkModel

- resetDefaultLinkModel(): void

- #### Returns void

  - Defined in flow.ts:950

### resetDefaultNodeModel

- resetDefaultNodeModel(): void

- #### Returns void

  - Defined in flow.ts:946

### selectAll

- selectAll(): void

- Select all the items.

  #### Returns void

  - Defined in flow.ts:1236

### sendToBack

- sendToBack(): void

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

  #### Returns void

  - Defined in flow.ts:1261

### unselectAll

- unselectAll(): void

- Unselect all the selected items.

  #### Returns void

  - Defined in flow.ts:1247

### zoomCenter

- zoomCenter(zoom, pt): 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

  - Defined in flow.ts:1331

### zoomRectangle

- zoomRectangle(rc): 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

  - Defined in flow.ts:1313

## Events

### `Static` ContextEvent

ContextEvent: string = 'context'

Triggered when the user clicks on a context handle

#### Param

a reference to the item owning the context handle

- Defined in flow.ts:1437

### `Static` ItemCreatedEvent

ItemCreatedEvent: string = 'itemCreated'

Triggered when an item is created

#### Param

a reference to created item

- Defined in flow.ts:1461

### `Static` ItemDeletedEvent

ItemDeletedEvent: string = 'itemDeleted'

Triggered when an item is deleted

#### Param

a reference to deleted item

- Defined in flow.ts:1473

### `Static` MouseEnterItemEvent

MouseEnterItemEvent: string = 'mouseEnterItem'

Triggered when the mouse pointer enters an item area.

#### Param

a reference to the item visited by the mouse pointer

- Defined in flow.ts:1425

### `Static` MouseLeaveItemEvent

MouseLeaveItemEvent: string = 'mouseLeaveItem'

Triggered when the mouse pointer leaves an item area.

#### Param

a reference to the item leaved by the mouse pointer

- Defined in flow.ts:1413

### `Static` SelectionChangeEvent

SelectionChangeEvent: string = 'selectionChange'

Triggered when an item is selected or unselected

#### Param

a reference to the selected or unselected item

- Defined in flow.ts:1449

Generated using TypeDoc