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.
containerElement :HTMLElement⚓
Places the instance in the DOM. Events are triggered from here.
branches :Object.<string, Branch>⚓
Dictionary of Branch objects indexed by ID.
leaves :Array.<Branch>⚓
List of leaves.
root :Branch⚓
The root node of the tree
(not neccesarily a root in the Phylogenetic sense)
stringRepresentation :string⚓
Stores the unparsed tree.
backColour :boolean⚓
Colour the branches of the tree based on the colour of the tips.
originalTree :Object⚓
Stores the state of the tree after parsing.
canvas :CanvasRenderingContext2D⚓
Canvas drawing context.
collapsedColour :string⚓
Colour for collapsed sections of the tree.
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 |
drawn :boolean⚓
Has Tree been drawn already, true after first draw.
highlighters :Array.<function()>⚓
Stores highlighting functions used during drawing.
zoom :number⚓
The current level of zoom.
zoomFactor :number⚓
Controls the speed of zooming. Recommended values are between 1 and 5.
disableZoom :boolean⚓
fillCanvas :boolean⚓
Force rectangular and hierarchical trees to use the canvas dimensions
instead of the number of leaves for proportion at the prerender stage.
branchScaling :boolean⚓
Enable branch scaling.
currentBranchScale :number⚓
The current branch scale.
branchScalingStep :number⚓
The ratio at which branches scale.
pickedup :boolean⚓
Whether a click has been detected.
dragging :boolean⚓
Whether the user is dragging.
startx :number⚓
The starting x coordinate of a drag.
starty :number⚓
The starting y coordinate of a drag.
baseNodeSize :number⚓
Factor with which to scale the radius of a leaf.
origx :number⚓
Caches the offsetx when a click is detected.
origy :number⚓
Caches the offsety when a click is detected.
offsetx :number⚓
The x coordinate from which to begin drawing from.
offsety :number⚓
The y coordinate from which to begin drawing from.
selectedColour :string⚓
The colour to apply to a selected branch.
highlightColour :string⚓
The colour to apply to a hihglighted branch.
highlightWidth :number⚓
The line width of the halo on a highlighted branch.
highlightSize :number⚓
Scale factor for the size of the the halo on a highlighted branch.
branchColour :string⚓
Global branch colour,
branchScalar :number⚓
Scale factor applied to branch lengths defined in the serialised
representation of the tree.
padding :number⚓
Space to add to bounds when fitting the tree to the canvas.
labelPadding :number⚓
Space between a leaf and its label.
multiSelect :boolean⚓
Enable/disable shift-click multi-selection.
clickFlag :string⚓
Flag to change on branch when clicked.
clickFlagPredicate :function⚓
Decide if a branch should be affected when clicked.
hoverLabel :boolean⚓
Show labels when hovering over node.
internalNodesSelectable :boolean⚓
showLabels :boolean⚓
showBranchLengthLabels :boolean⚓
Global show/hide branch-length labels.
branchLengthLabelPredicate :function⚓
Conditionally display branch-length labels when enabled.
showInternalNodeLabels :boolean⚓
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 |
maxBranchLength :number⚓
Stores the length of the longest branch on the tree.
lineWidth :number⚓
The visible width of the branches.
textSize :number⚓
The size of the labels, scaled to the size of the tree on first draw.
font :string⚓
The font of the labels.
unselectOnClickAway :boolean⚓
farthestNodeFromRootX :number⚓
X coordinate of node that is furthest from the root.
farthestNodeFromRootY :number⚓
Y coordinate of node that is furthest from the root.
shiftKeyDrag⚓
Require the 'shift' key to be depressed to allow dragging
maxLabelLength :Object.<string, number>⚓
Maximum length of label for each tree type.
eventListeners :object⚓
Event listener cache.
alignLabels :boolean⚓
Set/get if labels are currently aligned.
Methods
removeEventListeners()⚓
Removes events defined in this.eventListeners. Useful for cleaning up.
setInitialCollapsedBranches(nodeopt)⚓
Collapses branches based on Tree#defaultCollapsed.
Parameters:
Name | Type | Attributes | Default |
---|---|---|---|
node |
Branch |
<optional> |
this.root |
getNodeAtMousePosition(event) → {Branch}⚓
Parameters:
Name | Type |
---|---|
event |
MouseEvent |
Returns:
- Type
- Branch
getSelectedNodeIds() → {Array.<Branch>}⚓
Returns:
Selected leaves
- Type
- Array.<Branch>
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>
clicked(e)⚓
Event listener for click events.
Parameters:
Name | Type |
---|---|
e |
MouseEvent |
drag(event)⚓
Handles dragging and hovering.
Parameters:
Name | Type |
---|---|
event |
MouseEvent |
draw(forceRedraw)⚓
Draws the frame.
Parameters:
Name | Type | Description |
---|---|---|
forceRedraw |
boolean | Also run the prerenderer. |
pickup(event)⚓
Mousedown event listener
Parameters:
Name | Type |
---|---|
event |
MouseEvent |
drop()⚓
mouseup event listener.
scroll(event)⚓
Mousewheel event listener.
Parameters:
Name | Type |
---|---|
event |
findLeaves(pattern, searchPropertyopt) → {Array.<Branch>}⚓
Parameters:
Name | Type | Attributes | Default |
---|---|---|---|
pattern |
RegExp | ||
searchProperty |
string |
<optional> |
id |
Returns:
- Type
- Array.<Branch>
updateLeaves(leaves, property, value)⚓
Parameters:
Name | Type |
---|---|
leaves |
Array.<Branch> |
property |
string |
value |
Fires:
clearSelect()⚓
Deselects all branches, implicitly calls Tree#draw.
getPngUrl() → {string}⚓
Returns:
Base64-encoded data uri of canvas
- Type
- string
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
|
||||||||
callback |
function |
<optional> |
Called synchronously *after* the first draw. |
Fires:
- Source:
- See:
saveOriginalTree()⚓
Builds the Tree#originalTree object.
clearState()⚓
Clears the branches and leaves of the instance.
extractNestedBranches()⚓
Build Tree#branches and Tree#leaves properties.
saveState()⚓
High-level API to organising branches and leaves.
Fires:
build(formatString, parser, options)⚓
Builds the object model of a tree.
Parameters:
Name | Type |
---|---|
formatString |
string |
parser |
Parser |
options |
Object |
Fires:
- Tree#event:error
- Tree#event:beforeFirstDraw
- Tree#event:loadCompleted
redrawFromBranch(node)⚓
Draw a subtree.
Parameters:
Name | Type | Description |
---|---|---|
node |
Branch | the new root of the tree. |
Fires:
redrawOriginalTree()⚓
Reload the serialised version of the tree.
storeNode(node)⚓
Traverse the tree, generating ids and filing away objects.
Parameters:
Name | Type | Description |
---|---|---|
node |
Branch | starting point. |
setNodeSize(size)⚓
Parameters:
Name | Type |
---|---|
size |
number |
setRoot(node)⚓
Parameters:
Name | Type |
---|---|
node |
Branch |
setTextSize(size)⚓
Parameters:
Name | Type |
---|---|
size |
number | string |
setFontSize(ystep)⚓
Sets an appropriate font size for the proportions of the tree.
Parameters:
Name | Type | Description |
---|---|---|
ystep |
number | the space between leaves. |
setTreeType(type, quietopt)⚓
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
type |
string | The name of a registered tree type. | |
quiet |
boolean |
<optional> |
Do not broadcast. |
Fires:
setSize(width, height)⚓
Resizes the canvas element.
Parameters:
Name | Type |
---|---|
width |
number |
height |
number |
adjustForPixelRatio()⚓
Scale the size of the canvas element to the pixel ratio
getCentrePoint() → {Object}⚓
Returns:
point w/ x and y coordinates
- Type
- Object
setZoom(zoom, pointopt)⚓
Zoom to a specific level over a specific point.
Parameters:
Name | Type | Attributes | Default |
---|---|---|---|
zoom |
number | ||
point |
Object |
<optional> |
Tree#getCentrePoint |
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 |
calculateZoomedOffset(offset, coord, oldZoom, newZoom)⚓
Magic to enable zooming to a point.
Parameters:
Name | Type |
---|---|
offset |
number |
coord |
number |
oldZoom |
number |
newZoom |
number |
setBranchScale(scale, point)⚓
Scale branches horizontally
Parameters:
Name | Type | Default |
---|---|---|
scale |
number | 1 |
point |
Object |
toggleLabels()⚓
setMaxLabelLength()⚓
addListener(event, listener)⚓
Parameters:
Name | Type |
---|---|
event |
string |
listener |
function |
removeListener(event, listener)⚓
Parameters:
Name | Type |
---|---|
event |
string |
listener |
function |
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()
fitInPanel(leaves)⚓
Zoom to the provided leaves.
Parameters:
Name | Type |
---|---|
leaves |
Array.<Branch> |
resetTree()⚓
Reapply data in Tree#originalTree.
rotateBranch(branch)⚓
Parameters:
Name | Type |
---|---|
branch |
Branch |
exportNwk() → {string}⚓
Returns:
Newick representation of current object model.
- Type
- string
resizeToContainer()⚓
Resize canvas element to container.
cleanup()⚓
Removes tracked event listeners and provides a hook for plugins to clean up
after themselves.
on()⚓
- Source:
- See:
off()⚓
- Source:
- See:
Events
loading⚓
beforeFirstDraw⚓
loaded⚓
error⚓
Properties:
Name | Type |
---|---|
error |
Error |
subtree⚓
Properties:
Name | Type |
---|---|
node |
Branch |
updated⚓
Properties:
Name | Type |
---|---|
nodeIds |
Array.<string> |
property |
string |
append |
boolean |
typechanged⚓
Properties:
Name | Type |
---|---|
oldType |
string |
newType |
string |