Class AngledArrowConnector

Represents an angled connector with an arrow pointer pre-set.

Hierarchy

Constructors

constructor

Properties

_labelText arrow1 arrow2 arrowBaseHeight arrowBaseWidth arrowType container endPort? endStencil? selectorLine startPort? startStencil? strokeColor strokeDasharray strokeWidth textBlock textBoundingBox visibleLine visual x1 x2 y1 y2 typeName

Accessors

IId labelText settings typeName

Methods

addVisualToContainer adjust adjustPoints adjustTips adjustVisual createCoreVisual createVisual getEnding getEndings getState moveLabel ownsTarget restoreState rotateArrows scale setArrowType setEndPosition setStartPosition setStrokeColor setStrokeDasharray setStrokeWidth setTextBoundingBox getThumbnail

Constructors

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 = 'AngledArrowConnector'

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

labelText

  • get labelText(): string

  • Gets label text for the connector.

    Returns string

  • set labelText(value): void

  • Sets label text for the connector.

    Parameters

    • value: string

    Returns void

Protected 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

Methods

addVisualToContainer

  • 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

adjust

adjustPoints

adjustTips

adjustVisual

  • Adjusts connector visual based on updated position and other circumnstances.

    Returns void

createCoreVisual

createVisual

Protected getEnding

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

Protected getEndings

getState

moveLabel

  • 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

ownsTarget

  • Returns true if manipulation target belongs to this connector.

    Parameters

    • el: EventTarget

    Returns boolean

restoreState

  • Restores connector settings from a previously saved state (configuration).

    Parameters

    Returns void

Protected rotateArrows

  • Rotates arrows based on the connector tip position, connected ports, etc.

    Returns void

scale

  • Scales the connector based on supplied scale factors.

    Parameters

    • scaleX: number

      horizontal scale factor.

    • scaleY: number

      vertical scale factor.

    Returns void

setArrowType

setEndPosition

  • Sets end tip position to supplied coordinates.

    Parameters

    • point: IPoint

      new tip position.

    Returns void

setStartPosition

setStrokeColor

  • Sets the color of the connector's visual

    Parameters

    • color: string

      CSS compatible color.

    Returns void

setStrokeDasharray

  • Sets the dash array of the connector's visual

    Parameters

    • dashes: string

      stroke dash array values.

    Returns void

setStrokeWidth

  • Sets the stroke width of the connector's visual

    Parameters

    • width: string | number

      stroke (line) width.

    Returns void

Protected setTextBoundingBox

Static getThumbnail

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

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc