Home Reference Source 
import {Tree} from 'yy-tree/src/tree.js'
public class | source

Tree

Extends:

eventemitter3~Events → Tree

Constructor Summary

Public Constructor
public

constructor(tree: Tree~TreeData, options: object, styles: object)

Create Tree

Member Summary

Public Members
public get

dragOpacity: number

opacity setting for dragged item
public set
public

element: HTMLElement

Main div holding tree
public get

expandOnClick: boolean

expand and collapse node on click without drag except (will select before expanding if select=true)
public set
public get

holdTime: number

number of milliseconds to press and hold name before editing starts (set to 0 to disable)
public set
public get

indentation: number

indentation for tree
public set
public get

move: boolean

whether tree may be rearranged
public set
public get

prefixClassName: string

className's prefix (e.g., "yy-tree"-content)
public set
public get

select: boolean

click to select node (if false then nodes are not selected and tree.selection is always null)
public set
public get

Selected data
public set

Method Summary

Public Methods
public

collapse(leaf: HTMLElement)

Collapses a leaf
public

Collapses all leaves
public

edit(leaf: HTMLElement)

edit the name entry using the created element
public

editData(data: object)

edit the name entry using the data
public

expand(leaf: HTMLElement)

Expands a leaf
public

Expands all leaves
public

findInTree(leaf: *, callback: function): *

call the callback function on each node; returns the node if callback === true
public

getLeaf(leaf: object, root: HTMLElement)

Find a leaf based using its data
public

nameChange(leaf: HTMLElement, name: string)

change the name of a leaf
public

toggleExpand(leaf: HTMLElement)

Toggles a leaf
public

update()

call this after tree's data has been updated outside of this library

Public Constructors

public constructor(tree: Tree~TreeData, options: object, styles: object) source

Create Tree

Params:

NameTypeAttributeDescription
tree Tree~TreeData

data for tree (see readme for description)
options object
  • optional
options.element HTMLElement | string
  • optional

if a string then document.querySelector(element); if empty, it creates an element
options.parent HTMLElement | string
  • optional

appends the element to this parent (if string then document.querySelector(parent))
options.move boolean
  • optional
  • default: true

drag tree to rearrange
options.select boolean
  • optional
  • default: true

click to select node (if false then nodes are not selected and tree.selection is always null)
options.indentation number
  • optional
  • default: 20

number of pixels to indent for each level
options.threshold number
  • optional
  • default: 10

number of pixels to move to start a drag
options.holdTime number
  • optional
  • default: 2000

number of milliseconds to press and hold name before editing starts (set to 0 to disable)
options.expandOnClick boolean
  • optional
  • default: true

expand and collapse node on click without drag except (will select before expanding if select=true)
options.dragOpacity number
  • optional
  • default: 0.75

opacity setting for dragged item
options.prefixClassName string
  • optional
  • default: yy-tree

first part of className for all DOM objects (e.g., yy-tree, yy-tree-indicator)
options.addStyles boolean
  • optional
  • default: true

attaches a style sheet with default and overridden styles; set to false to use your own stylesheet
styles object
  • optional
styles.nameStyles string[]
  • optional

use these to override individual styles for the name (will be included in the attached stylesheet)
styles.contentStyles string[]
  • optional

use these to override individual styles for the content (will be included in the attached stylesheet)
styles.indicatorStyles string[]
  • optional

use these to override individual styles for the move-line indicator (will be included in the attached stylesheet)
styles.selectedStyles string[]
  • optional

use these to override individual styles for the selected item (will be included in the attached stylesheet)

Public Members

public get dragOpacity: number source

opacity setting for dragged item

public set dragOpacity source

public element: HTMLElement source

Main div holding tree

public get expandOnClick: boolean source

expand and collapse node on click without drag except (will select before expanding if select=true)

public set expandOnClick source

public get holdTime: number source

number of milliseconds to press and hold name before editing starts (set to 0 to disable)

public set holdTime source

public get indentation: number source

indentation for tree

public set indentation source

public get move: boolean source

whether tree may be rearranged

public set move source

public get prefixClassName: string source

className's prefix (e.g., "yy-tree"-content)

public set prefixClassName source

public get select: boolean source

click to select node (if false then nodes are not selected and tree.selection is always null)

public set select source

public get selection: * source

Selected data

public set selection source

Public Methods

public collapse(leaf: HTMLElement) source

Collapses a leaf

Params:

NameTypeAttributeDescription
leaf HTMLElement

public collapseAll() source

Collapses all leaves

public edit(leaf: HTMLElement) source

edit the name entry using the created element

Params:

NameTypeAttributeDescription
leaf HTMLElement

public editData(data: object) source

edit the name entry using the data

Params:

NameTypeAttributeDescription
data object

element of leaf

public expand(leaf: HTMLElement) source

Expands a leaf

Params:

NameTypeAttributeDescription
leaf HTMLElement

public expandAll() source

Expands all leaves

public findInTree(leaf: *, callback: function): * source

call the callback function on each node; returns the node if callback === true

Params:

NameTypeAttributeDescription
leaf *

data
callback function

Return:

*

public getLeaf(leaf: object, root: HTMLElement) source

Find a leaf based using its data

Params:

NameTypeAttributeDescription
leaf object
root HTMLElement
  • optional
  • default: this.element

public nameChange(leaf: HTMLElement, name: string) source

change the name of a leaf

Params:

NameTypeAttributeDescription
leaf HTMLElement
name string

public toggleExpand(leaf: HTMLElement) source

Toggles a leaf

Params:

NameTypeAttributeDescription
leaf HTMLElement

public update() source

call this after tree's data has been updated outside of this library