Class: TrackLaneCanvas

TrackLaneCanvas(query, horizontalCells, verticalCells)

The track lane class is used to create and edit arrangements of tracks created by the track editor. This allows the construction of larger scale pieces of music with tracks in the track editor as building blocks.

Constructor

new TrackLaneCanvas(query, horizontalCells, verticalCells)

Construct a tracklane canvas widget instance and draw it to the screen.
Parameters:
Name Type Description
query string String containing html id of the canvas we are constructing for.
horizontalCells number The number of horizontal cells to draw.
verticalCells number The number of vertical cells to draw.
Source:

Members

blockName

The name of the rectangle to draw.
Source:

blockSize

The length of the rectangle/track to draw.
Source:

coord

The coords of the mouse.
Source:

existingCollision

Flag tracking whether the user has clicked an existing rectangle.
Source:

inputMode

The mode that the widget is currently in.
Source:

inputModes

The various modes a tracklane widget can be in. Seek mode is used for changing the position of the seek line on mouse click. Block mode is used for entering blocks to the widget via mouse click. Delete mode is used for deleting blocks from the widget via mouse click.
Source:

leftClickEnd

The coords of the mouse at the release of a click.
Source:

leftClickStart

the coords of the mouse at the start of a click.
Source:

lineWidth

The line width for rectangles and cell divisions.
Source:

localHeight

Height of a cell in local, i.e., not screen coords.
Source:

localWidth

Width of a cell in local, i.e., not screen coords.
Source:

mousePressed

Tracks if mouse has been pressed or not.
Source:

moveIndex

The index the collision occured at.
Source:

rectangleFontSize

Stores the size of the rectangle font. This is initialized here but computed at reset() and on running the constructor.
Source:

scaleAmtX

Amount X scaling changes by.
Source:

scaleAmtY

Amount Y scaling changes by.
Source:

seekLineWidth

The width of the seek line.
Source:

seekPos

The position of the seek line.
Source:

trackList

The list of tracks created so far. Tracks are stored as a triple containing their top left and bottom right coords as well as the name of the track.
Source:

translateAmt

Amount translate changes by.
Source:

workingRectangle

The rectangle (track) being created this mouse click.
Source:

Methods

buttonClick(ev)

Handles button clicks from the user.
Parameters:
Name Type Description
ev event The event containing the button click we are handling.
Source:

cellsToSeconds(c, bpm, bpb)

Convert a raw cell number to a value in seconds.
Parameters:
Name Type Description
c number The cell number to convert.
bpm number Beats per minute, required to do unit conversion of times.
bpb number Beats per block, required to do unit conversion of times.
Source:
Returns:
Converted value described above.

coordToCell(n)

Round an x coord to its cell value.
Parameters:
Name Type Description
n number x coord to round.
Source:
Returns:
the corresponding cell value of n.

decrementBlockSize()

Used for incrementing blocksize variable.
Source:

deleteModeLeftClickDown()

Handle left click presses while in delete mode.
Source:

draw()

Draw the current state of the widget to the screen.
Source:

drawRectangle(c1, c2, name)

Draw a rectangle with the given points and color.
Parameters:
Name Type Description
c1 object Object denoting top left coord of rectangle.
c2 object Object denoting bottom right coord of rectangle.
name string String containing the name of the rectangle.
Source:

drawRectangleOutline(c1, c2)

Draw a rectangle outline with the given points.
Parameters:
Name Type Description
c1 object Object denoting top left coord of rectangle.
c2 object Object denoting bottom right coord of rectangle.
Source:

getOffsetsAndNames(bpm, bpb, paramList)

Creates an array containing the name of each block and its start offset in seconds.
Parameters:
Name Type Description
bpm number The beats per minute value to use for time conversion.
bpb number The beats per block value to use for time conversion.
paramList number This parameter is deprecated and will be removed in later versions
Source:
Returns:
An array of tuples containing each track name and its start offset time in seconds.

helperText()

Prints helper text to the top right corner of the widget.
Source:

incrementBlockSize()

Used for incrementing blocksize variable.
Source:

leftClickDown()

Handle when mouse left click is pressed down.
Source:

leftClickUp()

Handle release of mouse left click.
Source:

reconfigure(state)

Set up the state of the widget based on the input argument.
Parameters:
Name Type Description
state object The state used to configure the widget.
Source:

rectCollisionCheck(left, right)

This function is used to check if the rectangle specified by [left,right] collides with (i.e. intersects) any other rectangles in our list of rectangles. This function returns true if so and false otherwise.
Parameters:
Name Type Description
left object The left endpoint of the rectangle.
right object The right endpoint of the rectangle.
Source:
Returns:
True or false depending on if the input rectangle intersects any of the rectangles in our track list so far.

rectangleCollision(pt, track)

Checks if point pt lies inside rectangle rect.
Parameters:
Name Type Description
pt object Point to test for inclusion.
track object Rectangle/track (array containing topleft/bottom right coords) to test inclusion of pt against.
Source:
Returns:
true or false depending on if pt lies in rect.

rectangleHelper()

Helper that sets up leftClickEnd and leftClickStarts coordinates.
Source:

reset(horizontalCells, verticalCells)

Resets the state of the canvas. Most often this function is used to change the number of horizontal and vertical cells.
Parameters:
Name Type Description
horizontalCells number The number of horizontal cells to draw.
verticalCells number The number of vertical cells to draw.
Source:

screenToWorldCoords(p)

Converts the coordinates of the input point in screen coordinates to local/world coordinates.
Parameters:
Name Type Description
p object Point to convert.
Source:
Returns:
A new point with transformed x and y coords.

seekToSeconds(bpm, bpb)

Get the horizontal position of the seek bar in seconds
Parameters:
Name Type Description
bpm number Beats per minute, required to do unit conversion of times.
bpb number Beats per block, required to do unit conversion of times.
Source:
Returns:
The position of the seekbar in seconds.

setBlockName(sz)

Used for setting the block name variable.
Parameters:
Name Type Description
sz number The new block name.
Source:

setBlockSize(sz)

Used for setting the block size variable.
Parameters:
Name Type Description
sz number The new block size.
Source:

snapToGrid(c)

Snap input coordinates to grid and return the resulting coord
Parameters:
Name Type Description
c number the coordinate to snap to the grid.
Source:
Returns:
The coordinate resulting from snapping c to the grid.

updateMouseCoordinates()

Update the current coordinates of the mouse.
Source: