boxes/BoxConnector. BoxConnector

BoxConnector allows users to visually connect two ActiveBox objects of an
ActivityPanel. There are two modes of operation:

  • Drawing a line between an origin point (usually the point where the user clicks on) and a
    destination point.
  • Dragging the ActiveBox from one location to another.

The connecting lines can have arrowheads at its endings.

Constructor

new BoxConnector(parent, $canvas)

BoxConnector constructor

Parameters:
NameTypeDescription
parentmodule:AWT.Container

The Container to which this BoxConnector belongs

$canvasexternal:jQuery

The HTML canvas element where this BoxConnector will draw.

Source

Members

DEFAULT_COMPOSITE_OP :string

The default composite operator
("source-over").

Type:
  • string
Source

active :boolean

true while the connector is active

Type:
  • boolean
Source

arrow :boolean

When true, the connector must end on arrowhead

Type:
  • boolean
Source

arrowAngle :number

The arrowhead angle

Type:
  • number
Source

arrowLength :number

The arrowhead length (in pixels)

Type:
  • number
Source

bgImg :external:HTMLImageElement

The background image, saved and redrawn on each movement

Type:
Source

bgRect :module:AWT.Rectangle

The rectangle of ActivityPanel saved in bgImg

Type:
Source

bx :module:boxes/ActiveBox.ActiveBox

The ActiveBox to connect or move

Type:
Source

compositeOp :string

The global composite operator used when drawing in XOR mode. Default is "difference".
For a list of possible values see:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Type:
  • string
Source

ctx :external:CanvasRenderingContext2D

The Graphics context where the BoxConnector will paint

Type:
Source

dest :module:AWT.Point

Current (while moving) and final position of the connector

Type:
Source

dim :module:AWT.Dimension

The dimension of the HTML canvas where to draw

Type:
Source

lineColor :string

The main color used in XOR operations

Type:
  • string
Source

linePainted :boolean

true while the line has already been painted (used for XOR expressions)

Type:
  • boolean
Source

lineWidth :number

Width of the connector line

Type:
  • number
Source

origin :module:AWT.Point

Initial position of the connector

Type:
Source

parent :module:AWT.Container

The container to which this connector belongs

Type:
Source

relativePos :module:AWT.Point

Relative position of point B regarding A

Type:
Source

xorColor :string

The complementary color used in XOR operations

Type:
  • string
Source

Methods

begin(pt, boxopt)

Starts the box connector operation

Parameters:
NameTypeAttributesDescription
ptmodule:AWT.Point

Starting point

boxmodule:boxes/ActiveBox.ActiveBox<optional>

Passed only when the BoxConnector runs in drag&drop mode

Source

drawLine()

Strokes a line between origin and dest, optionally ended with an arrowhead.

Source

end()

Finalizes the operation of this box connector until a new call to begin

Source

moveBy(dx, dy)

Displaces the ending point of the connector

Parameters:
NameTypeDescription
dxnumber

Displacement on the X axis

dynumber

Displacement on the Y axis

Source

moveTo(pt, forcePaint)

Moves the ending point of the connector to a new position

Parameters:
NameTypeDescription
ptmodule:AWT.Point

The new position

forcePaintboolean

When true, forces the repaint of all the area also if there is
no movement at all.

Source