Class: Box

Box

A Box consists of an x and y point (the top-left corner) and a width and height. The Box position can be relative to the canvas where the position stays static or to the map in which case the position moves with the map.

Attributes

Attribute Type Description
width Number Width of box (Default: 100)
height Number Height of box (Default: 100)
padding Number Sets paddedX and paddedY values (Default: 0)
position String|Object Where to place the box. See Position for details.
anchor String|Object Where the position should be anchored to the box.
color String|Color A string describing the color. See Color for details. (DOESN'T DO ANYTHING YET)

Position: If the position is on (i.e. relativeTo) the 'canvas', the box will be in a static position and will not move as the map is panned. String values (e.g. top-right, bottom-middle, etc) position the box appropriately. An object with xPercent and yPercent values between 0 and 100 will position the box along the x and y axes starting from the top-left. The string values are associated with specific offsets. For example,

  • top-left = {xPercent: 0, yPercent: 0}
  • middle-center = {xPercent: 50, yPercent: 50}
  • bottom-right = {xPercent: 100, yPercent: 100}

If position is on (i.e. relativeTo) the 'map', the box will move with the map as it's panned. The position will consist of

  • lengthPercent: 0 - start of map; 50 - middle of map; 100 - end of map
  • mapOffset or bbOffsetPercent: distance from the backbone

Examples

new Box(viewer, options)

Box.js, line 52

Create a Box.

Name Type Description
viewer Viewer

The viewer this box will be associated with.
options Object

Attributes used to create the box.

Members

anchorString Object

Get or set the anchor.

bottomNumber

Get bottom of the Box

bottomPaddedNumber

Get bottom of the Box minus padding

centerXNumber

Get the center x of the box.

centerYNumber

Get the center y of the box.

heightNumber

Get or set the height.

leftNumber

Get left of the Box. Same as X.

leftPaddedNumber

Get left of the Box plus padding.

on

Alias for Position on. Values: 'map', 'campus'.

paddedXNumber

Get the x position of the origin plus padding.

paddedYNumber

Get the y position of the origin plus padding.

paddingNumber

Get or set the padding. This will be added to x and y when accessed via paddedX and paddedY.

positionString

Get or set the postion. String values include: "top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", or "bottom-right".

Get right of the Box.

rightPaddedNumber

Get right of the Box minus padding.

topNumber

Get top of the Box. Same as Y.

topPaddedNumber

Get top of the Box plus padding.

widthNumber

Get or set the width.

xNumber

Get the x position of the origin.

yNumber

Get the y position of the origin.

Methods

clear(ctx)

Box.js, line 300

Clear the rect area described by this box using the provided context.

Name Type Description
ctx Context

Context used to clear the rect.

containsPt(x, y){Boolean}

Box.js, line 274

Check if the Box conains the point

Name Type Description
x Number

X coordinate of the point
y Number

Y coordinate of the point
Returns:
Type Description
Boolean

toString(){String}

Box.js, line 67

Return the class name as a string.

Returns:
Type Description
String
  • 'Box'