Class AngledConnector

Angled connector is a type of connector comprised of vertical and horizontal lines only.

Hierarchy

ConnectorBase
- AngledConnector
  - AngledArrowConnector

Constructors

constructor

new AngledConnector(iid, container, settings): AngledConnector
Creates a connector.
Parameters
- iid: number
  
  connector identifier.
- container: SVGGElement
  
  SVG container to contain all the connector visuals.
- settings: DiagramSettings
  
  whole diagram settings.
Returns AngledConnector

Overrides ConnectorBase.constructor

Properties

_labelText

_labelText: string = ''

`Protected` arrow1

arrow1: SVGPolygonElement

SVG polygon for the start tip arrow.

`Protected` arrow2

arrow2: SVGPolygonElement

SVG polygon for the end tip arrow.

`Protected` arrowBaseHeight

arrowBaseHeight: number = 10

Arrow height.

`Protected` arrowBaseWidth

arrowBaseWidth: number = 10

Arrow width.

arrowType

arrowType: ArrowType = 'none'

Defines location of arrows on a connector.

both - arrows displayed on both ends of a connector.
start - arrow displayend on the start side of a connector.
end - arrow displayed on the end side of a connector.
none - no arrows are displayed.

container

container: SVGGElement

SVG group containing all the SVG elements for this connector.

`Optional` endPort

endPort?: Port

Reference to the stencil connector port and the end tip of this connector.

`Optional` endStencil

endStencil?: StencilBase

Reference to the stencil at the end tip of this connector.

selectorLine

selectorLine: SVGLineElement | SVGPathElement

Invisible wider connector line used to improve selection accuracy.

`Optional` startPort

startPort?: Port

Reference to the stencil connector port and the start tip of this connector.

`Optional` startStencil

startStencil?: StencilBase

Reference to the stencil at the start tip of this connector.

strokeColor

strokeColor: string = '#000'

Connector line color.

strokeDasharray

strokeDasharray: string = ''

Connector line dash array.

strokeWidth

strokeWidth: number = 1

Connector line width.

textBlock

textBlock: TextBlock = ...

Text block displaying the connector label.

textBoundingBox

textBoundingBox: DOMRect = ...

Bounding box for the label text.

visibleLine

visibleLine: SVGLineElement | SVGPathElement

Visible connector line.

visual

visual: SVGGraphicsElement = ...

The top level SVG element (group) of the connector's visual.

x1

x1: number = 0

X coordinate of the start tip.

x2

x2: number = 0

X coordinate of the end tip.

y1

y1: number = 0

Y coordinate of the start tip.

y2

y2: number = 0

Y coordinate of the end tip.

`Static` typeName

typeName: string = 'AngledConnector'

A string representation of the type used in diagram configuration (state) JSON.

Accessors

IId

get IId(): number
Internal connector identifier used in state/configuration JSON as reference to this connector.

Returns number

Inherited from ConnectorBase.IId

labelText

get labelText(): string
Gets label text for the connector.

Returns string

Inherited from ConnectorBase.labelText
set labelText(value): void
Sets label text for the connector.
Parameters
- value: string
Returns void

Inherited from ConnectorBase.labelText

`Protected` settings

get settings(): DiagramSettings
DiagramSettings of the whole diagram.

Returns DiagramSettings

Inherited from ConnectorBase.settings

typeName

get typeName(): string
A string representation of the type used in diagram configuration (state) JSON.

Remarks
Instance accessor returning the value of static typeName.

Returns string

Inherited from ConnectorBase.typeName

Methods

addVisualToContainer

addVisualToContainer(element): void
Adds an element to the connector's container. The elements are inserted in the beggining (lowest layer) of the stack.
Parameters
- element: SVGElement
  
  element to add.
Returns void

Inherited from ConnectorBase.addVisualToContainer

adjust

adjust(): void
Adjusts layout of the connector.

Returns void

Inherited from ConnectorBase.adjust

adjustPoints

adjustPoints(): void
Adjusts connector's end pointis.

Returns void

Inherited from ConnectorBase.adjustPoints

adjustTips

adjustTips(): void
Adjust connector tips (arrows).

Returns void

Inherited from ConnectorBase.adjustTips

adjustVisual

adjustVisual(): void
Adjusts connector visual based on updated position and other circumnstances.

Returns void

Overrides ConnectorBase.adjustVisual

createCoreVisual

createCoreVisual(): void
Creates the main visual of the connector.

Returns void

Overrides ConnectorBase.createCoreVisual

createVisual

createVisual(): void
Creates visual elements of the connector.

Returns void

Inherited from ConnectorBase.createVisual

`Protected` getEnding

getEnding(baseEnding, port?): IPoint
Gets coordinates of connector's line ending depending on the arrow types and other factors.
Parameters
- baseEnding: IPoint
  
  base connector ending (as if there were no arrows, etc.)
- Optional port: Port
  
  port to which the connector is connected.
Returns IPoint
- adjusted coordinates of connector line ending.
Overrides ConnectorBase.getEnding

`Protected` getEndings

getEndings(): [IPoint, IPoint]
Gets coordinates of connector line endings adjusted based on arrow types and other factors

Returns [IPoint, IPoint]
connector ending coordinates.

Inherited from ConnectorBase.getEndings

getState

getState(): ConnectorBaseState
Returns connector's state (configuration) used for storing the diagram and for undo/redo operations.

Returns ConnectorBaseState
connector state object.

Inherited from ConnectorBase.getState

moveLabel

moveLabel(offsetX?, offsetY?): void
Moves label to supplied offset coordinates.
Parameters
- offsetX: number = 0
  
  horizontal offset from the auto-calculated position
- offsetY: number = 0
  
  vertical offset from the auto-calculated position.
Returns void

Inherited from ConnectorBase.moveLabel

ownsTarget

ownsTarget(el): boolean
Returns true if manipulation target belongs to this connector.
Parameters
- el: EventTarget
Returns boolean

Inherited from ConnectorBase.ownsTarget

restoreState

restoreState(state, endPoints): void
Restores connector settings from a previously saved state (configuration).
Parameters
- state: ConnectorBaseState
  
  previously saved or created state.
- endPoints: ConnectorEndPoints
  
  stencils and ports the connector is connecting.
Returns void

Inherited from ConnectorBase.restoreState

`Protected` rotateArrows

rotateArrows(): void
Rotates arrows based on the connector tip position, connected ports, etc.

Returns void

Overrides ConnectorBase.rotateArrows

scale

scale(scaleX, scaleY): void
Scales the connector based on supplied scale factors.
Parameters
- scaleX: number
  
  horizontal scale factor.
- scaleY: number
  
  vertical scale factor.
Returns void

Inherited from ConnectorBase.scale

setArrowType

setArrowType(arrowType): void
Sets connector's arrow type.
Parameters
- arrowType: ArrowType
  
  arrow type.
Returns void

Inherited from ConnectorBase.setArrowType

setEndPosition

setEndPosition(point): void
Sets end tip position to supplied coordinates.
Parameters
- point: IPoint
  
  new tip position.
Returns void

Inherited from ConnectorBase.setEndPosition

setStartPosition

setStartPosition(point): void
Sets start tip position to supplied coordinates.
Parameters
- point: IPoint
  
  new tip position.
Returns void

Inherited from ConnectorBase.setStartPosition

setStrokeColor

setStrokeColor(color): void
Sets the color of the connector's visual
Parameters
- color: string
  
  CSS compatible color.
Returns void

Inherited from ConnectorBase.setStrokeColor

setStrokeDasharray

setStrokeDasharray(dashes): void
Sets the dash array of the connector's visual
Parameters
- dashes: string
  
  stroke dash array values.
Returns void

Inherited from ConnectorBase.setStrokeDasharray

setStrokeWidth

setStrokeWidth(width): void
Sets the stroke width of the connector's visual
Parameters
- width: string | number
  
  stroke (line) width.
Returns void

Inherited from ConnectorBase.setStrokeWidth

`Protected` setTextBoundingBox

setTextBoundingBox(): void
Calculates and sets the bounding box for the connector's label.

Returns void

Overrides ConnectorBase.setTextBoundingBox

`Static` getThumbnail

getThumbnail(width, height): SVGSVGElement
Returns connector thumbnail used to define the shape of the connector in the DiagramEditor.
Parameters
- width: number
  
  thumbnail image width
- height: number
  
  thumbnail image height
Returns SVGSVGElement
SVG image of the thumbnail.

Overrides ConnectorBase.getThumbnail

Class AngledConnector

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

iid: number

container: SVGGElement

settings: DiagramSettings

Returns AngledConnector

Properties

_labelText

Protected arrow1

Protected arrow2

Protected arrowBaseHeight

Protected arrowBaseWidth

arrowType

container

Optional endPort

Optional endStencil

selectorLine

Optional startPort

Optional startStencil

strokeColor

strokeDasharray

strokeWidth

textBlock

textBoundingBox

visibleLine

visual

x1

x2

y1

y2

Static typeName

Accessors

IId

Returns number

labelText

Returns string

Parameters

value: string

Returns void

Protected settings

Returns DiagramSettings

typeName

Remarks

Returns string

Methods

addVisualToContainer

Parameters

element: SVGElement

Returns void

adjust

Returns void

adjustPoints

Returns void

adjustTips

Returns void

adjustVisual

Returns void

createCoreVisual

Returns void

createVisual

Returns void

Protected getEnding

Parameters

baseEnding: IPoint

Optional port: Port

Returns IPoint

Protected getEndings

Returns [IPoint, IPoint]

getState

Returns ConnectorBaseState

moveLabel

Parameters

`Protected` arrow1

`Protected` arrow2

`Protected` arrowBaseHeight

`Protected` arrowBaseWidth

`Optional` endPort

`Optional` endStencil

`Optional` startPort

`Optional` startStencil

`Static` typeName

`Protected` settings

`Protected` getEnding

`Optional` port: Port

`Protected` getEndings

`Protected` rotateArrows

`Protected` setTextBoundingBox

`Static` getThumbnail