BoxConnector
Source: BoxConnector.js:46
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: module:AWT.Container,
$canvas: external:jQuery,
): BoxConnectorBoxConnector constructor
Parameters
parent(module:AWT.Container) — The Container to which this BoxConnector belongs$canvas(external:jQuery) — The HTMLcanvaselement where this BoxConnector will draw.
Instance Methods
moveBy(dx: number, dy: number)
Displaces the ending point of the connector
Parameters
dx(number) — Displacement on the X axisdy(number) — Displacement on the Y axis
moveTo(pt: module:AWT.Point, forcePaint: boolean)
Moves the ending point of the connector to a new position
Parameters
pt(module:AWT.Point) — The new positionforcePaint(boolean) — Whentrue, forces the repaint of all the area also if there is
no movement at all.
begin(
pt: module:AWT.Point,
box?: module:boxes/ActiveBox.ActiveBox,
)
Starts the box connector operation
Parameters
pt(module:AWT.Point) — Starting pointbox(module:boxes/ActiveBox.ActiveBox, optional) — Passed only when the BoxConnector runs in drag&drop mode
end()
Finalizes the operation of this box connector until a new call to begin
drawLine()
Strokes a line between origin and dest, optionally ended with an arrowhead.
Instance Fields
bgImg: external:HTMLImageElement
The background image, saved and redrawn on each movement
bgRect: module:AWT.Rectangle
The rectangle of ActivityPanel saved in bgImg
origin: module:AWT.Point
Initial position of the connector
dest: module:AWT.Point
Current (while moving) and final position of the connector
arrow: boolean
When true, the connector must end on arrowhead
active: boolean
true while the connector is active
linePainted: boolean
true while the line has already been painted (used for XOR expressions)
arrowLength: number
The arrowhead length (in pixels)
arrowAngle: number
The arrowhead angle
lineColor: string
The main color used in XOR operations
xorColor: string
The complementary color used in XOR operations
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
DEFAULT_COMPOSITE_OP: string
The default composite operator
("source-over").
relativePos: module:AWT.Point
Relative position of point B regarding A
bx: module:boxes/ActiveBox.ActiveBox
The ActiveBox to connect or move
ctx: external:CanvasRenderingContext2D
The Graphics context where the BoxConnector will paint
dim: module:AWT.Dimension
The dimension of the HTML canvas where to draw
parent: module:AWT.Container
The container to which this connector belongs
lineWidth: number
Width of the connector line