Class: Tree

A Phylocanvas instance.

Constructor

new Tree(element, config)

Parameters:
Name Type
element string | HTMLElement
config Object
Source:
See:

Members

tooltip :Tooltip

The default tooltip showing number of child branches.
Source:

containerElement :HTMLElement

Places the instance in the DOM. Events are triggered from here.
Source:

branches :Object.<string, Branch>

Dictionary of Branch objects indexed by ID.
Source:

leaves :Array.<Branch>

List of leaves.
Source:

root :Branch

The root node of the tree (not neccesarily a root in the Phylogenetic sense)
Source:

stringRepresentation :string

Stores the unparsed tree.
Source:

backColour :boolean

Colour the branches of the tree based on the colour of the tips.
Source:

originalTree :Object

Stores the state of the tree after parsing.
Source:

canvas :CanvasRenderingContext2D

Canvas drawing context.
Source:

collapsedColour :string

Colour for collapsed sections of the tree.
Source:

defaultCollapsed :object

A minimum and maximum number of child branches within which to automatically collapse branches on the first draw.
Properties:
Name Type
min number
max number
Source:

drawn :boolean

Has Tree been drawn already, true after first draw.
Source:

highlighters :Array.<function()>

Stores highlighting functions used during drawing.
Source:

zoom :number

The current level of zoom.
Source:

zoomFactor :number

Controls the speed of zooming. Recommended values are between 1 and 5.
Default Value:
  • 3
Source:

disableZoom :boolean

Source:

fillCanvas :boolean

Force rectangular and hierarchical trees to use the canvas dimensions instead of the number of leaves for proportion at the prerender stage.
Source:

branchScaling :boolean

Enable branch scaling.
Default Value:
  • true
Source:

currentBranchScale :number

The current branch scale.
Source:

branchScalingStep :number

The ratio at which branches scale.
Source:

pickedup :boolean

Whether a click has been detected.
Source:

dragging :boolean

Whether the user is dragging.
Source:

startx :number

The starting x coordinate of a drag.
Source:

starty :number

The starting y coordinate of a drag.
Source:

baseNodeSize :number

Factor with which to scale the radius of a leaf.
Default Value:
  • 1
Source:

origx :number

Caches the offsetx when a click is detected.
Source:

origy :number

Caches the offsety when a click is detected.
Source:

offsetx :number

The x coordinate from which to begin drawing from.
Source:

offsety :number

The y coordinate from which to begin drawing from.
Source:

selectedColour :string

The colour to apply to a selected branch.
Default Value:
  • rgba(49,151,245,1)
Source:

highlightColour :string

The colour to apply to a hihglighted branch.
Default Value:
  • rgba(49,151,245,1)
Source:

highlightWidth :number

The line width of the halo on a highlighted branch.
Default Value:
  • 4
Source:

highlightSize :number

Scale factor for the size of the the halo on a highlighted branch.
Default Value:
  • 2
Source:

branchColour :string

Global branch colour,
Default Value:
  • rgba(0,0,0,1)
Source:

branchScalar :number

Scale factor applied to branch lengths defined in the serialised representation of the tree.
Source:

padding :number

Space to add to bounds when fitting the tree to the canvas.
Default Value:
  • 50
Source:

labelPadding :number

Space between a leaf and its label.
Default Value:
  • 5
Source:

multiSelect :boolean

Enable/disable shift-click multi-selection.
Default Value:
  • true
Source:

clickFlag :string

Flag to change on branch when clicked.
Default Value:
  • selected
Source:

clickFlagPredicate :function

Decide if a branch should be affected when clicked.
Default Value:
  • A function returning true.
Source:

hoverLabel :boolean

Show labels when hovering over node.
Source:

internalNodesSelectable :boolean

Default Value:
  • true
Source:

showLabels :boolean

Default Value:
  • true
Source:

showBranchLengthLabels :boolean

Global show/hide branch-length labels.
Source:

branchLengthLabelPredicate :function

Conditionally display branch-length labels when enabled.
Source:

showInternalNodeLabels :boolean

Source:

internalLabelStyle :object

Global style for internal labels on branches.
Properties:
Name Type Description
colour string
textSize number
font string
format string e.g. bold, italic
Source:

maxBranchLength :number

Stores the length of the longest branch on the tree.
Source:

lineWidth :number

The visible width of the branches.
Default Value:
  • 1
Source:

textSize :number

The size of the labels, scaled to the size of the tree on first draw.
Source:

font :string

The font of the labels.
Source:

unselectOnClickAway :boolean

Default Value:
  • true
Source:

farthestNodeFromRootX :number

X coordinate of node that is furthest from the root.
Source:

farthestNodeFromRootY :number

Y coordinate of node that is furthest from the root.
Source:

shiftKeyDrag

Require the 'shift' key to be depressed to allow dragging
Source:

maxLabelLength :Object.<string, number>

Maximum length of label for each tree type.
Source:

eventListeners :object

Event listener cache.
Source:

alignLabels :boolean

Set/get if labels are currently aligned.
Source:

Methods

removeEventListeners()

Removes events defined in this.eventListeners. Useful for cleaning up.
Source:

setInitialCollapsedBranches(nodeopt)

Collapses branches based on Tree#defaultCollapsed.
Parameters:
Name Type Attributes Default
node Branch <optional>
this.root
Source:

getNodeAtMousePosition(event) → {Branch}

Parameters:
Name Type
event MouseEvent
Returns:
Type
Branch
Source:

getSelectedNodeIds() → {Array.<Branch>}

Returns:
Selected leaves
Type
Array.<Branch>
Source:

getNodeIdsWithFlag(flag, valueopt) → {Array.<Branch>}

Parameters:
Name Type Attributes Default Description
flag string A boolean property of the branch
value boolean <optional>
true
Returns:
Type
Array.<Branch>
Source:

clicked(e)

Event listener for click events.
Parameters:
Name Type
e MouseEvent
Source:

drag(event)

Handles dragging and hovering.
Parameters:
Name Type
event MouseEvent
Source:

draw(forceRedraw)

Draws the frame.
Parameters:
Name Type Description
forceRedraw boolean Also run the prerenderer.
Source:

pickup(event)

Mousedown event listener
Parameters:
Name Type
event MouseEvent
Source:

drop()

mouseup event listener.
Source:

scroll(event)

Mousewheel event listener.
Parameters:
Name Type
event
Source:

findLeaves(pattern, searchPropertyopt) → {Array.<Branch>}

Parameters:
Name Type Attributes Default
pattern RegExp
searchProperty string <optional>
id
Returns:
Type
Array.<Branch>
Source:

updateLeaves(leaves, property, value)

Parameters:
Name Type
leaves Array.<Branch>
property string
value
Fires:
Source:

clearSelect()

Deselects all branches, implicitly calls Tree#draw.
Source:

getPngUrl() → {string}

Returns:
Base64-encoded data uri of canvas
Type
string
Source:

load(inputString, optionsopt, callbackopt)

Loads a serialised representation of a tree, using the first registered parser that validates the input unless a format is specified.
Parameters:
Name Type Attributes Description
inputString string
options Object <optional>
also passed on to the parser.
Properties
Name Type Attributes Description
format string <optional>
specify the parser to use.
callback function <optional>
Called synchronously *after* the first draw.
Fires:
Source:
See:

saveOriginalTree()

Builds the Tree#originalTree object.
Source:

clearState()

Clears the branches and leaves of the instance.
Source:

extractNestedBranches()

Build Tree#branches and Tree#leaves properties.
Source:

saveState()

High-level API to organising branches and leaves.
Fires:
Source:

build(formatString, parser, options)

Builds the object model of a tree.
Parameters:
Name Type
formatString string
parser Parser
options Object
Fires:
Source:

redrawFromBranch(node)

Draw a subtree.
Parameters:
Name Type Description
node Branch the new root of the tree.
Fires:
Source:

redrawOriginalTree()

Reload the serialised version of the tree.
Source:

storeNode(node)

Traverse the tree, generating ids and filing away objects.
Parameters:
Name Type Description
node Branch starting point.
Source:

setNodeSize(size)

Parameters:
Name Type
size number
Source:

setRoot(node)

Parameters:
Name Type
node Branch
Source:

setTextSize(size)

Parameters:
Name Type
size number | string
Source:

setFontSize(ystep)

Sets an appropriate font size for the proportions of the tree.
Parameters:
Name Type Description
ystep number the space between leaves.
Source:

setTreeType(type, quietopt)

Parameters:
Name Type Attributes Description
type string The name of a registered tree type.
quiet boolean <optional>
Do not broadcast.
Fires:
Source:

setSize(width, height)

Resizes the canvas element.
Parameters:
Name Type
width number
height number
Source:

adjustForPixelRatio()

Scale the size of the canvas element to the pixel ratio
Source:

getCentrePoint() → {Object}

Returns:
point w/ x and y coordinates
Type
Object
Source:

setZoom(zoom, pointopt)

Zoom to a specific level over a specific point.
Parameters:
Name Type Attributes Default
zoom number
point Object <optional>
Tree#getCentrePoint
Source:

smoothZoom(steps, point)

Zoom in or out from the current zoom level towards a point.
Parameters:
Name Type Description
steps number positive to zoom in, negative to zoom out.
point Object
Source:

calculateZoomedOffset(offset, coord, oldZoom, newZoom)

Magic to enable zooming to a point.
Parameters:
Name Type
offset number
coord number
oldZoom number
newZoom number
Author:
  • Khalil Abudahab
Source:

setBranchScale(scale, point)

Scale branches horizontally
Parameters:
Name Type Default
scale number 1
point Object
Source:

toggleLabels()

Source:

setMaxLabelLength()

Source:

addListener(event, listener)

Parameters:
Name Type
event string
listener function
Source:

removeListener(event, listener)

Parameters:
Name Type
event string
listener function
Source:

getBounds(leavesopt) → {Array.<Array.<number>>}

Parameters:
Name Type Attributes Default
leaves Array.<Branch> <optional>
this.leaves
Returns:
bounds - Minimum x and y coordinates in the first array, maximum x and y coordinates in the second.
Type
Array.<Array.<number>>
Example
const [ [ minx, miny ], [ maxx, maxy ] ] = tree.getBounds()
Source:

fitInPanel(leaves)

Zoom to the provided leaves.
Parameters:
Name Type
leaves Array.<Branch>
Source:

resetTree()

Reapply data in Tree#originalTree.
Source:

rotateBranch(branch)

Parameters:
Name Type
branch Branch
Source:

exportNwk() → {string}

Returns:
Newick representation of current object model.
Type
string
Source:

resizeToContainer()

Resize canvas element to container.
Source:

cleanup()

Removes tracked event listeners and provides a hook for plugins to clean up after themselves.
Source:

on()

Source:
See:

off()

Source:
See:

Events

loading

Source:

beforeFirstDraw

Source:

loaded

Source:

error

Properties:
Name Type
error Error
Source:

subtree

Properties:
Name Type
node Branch
Source:

updated

Properties:
Name Type
nodeIds Array.<string>
property string
append boolean
Source:

typechanged

Properties:
Name Type
oldType string
newType string
Source: