File

src/lib/tree-view/tree-view.component.ts

Description

TreeView Component

This component is used with the inputs and outputs mentioned below.

Inputs

string : path - The path of the node to select
string : highlightedLeafPath - The path of the leaf to highlight
string : highlightedLeafId - The id of the leaf to highlight
string : alternativePath - The alternative path of the node to select
TreeViewModel : data - The TreeViewModel of this component
any : load-tag - The load tag associated to the root node. Used to trigger a node change and redraw the node
string : node-icon-class - Icon class to define the icon that will appear on the root node
boolean : isDisabled - Is to disable the tree view
boolean : loadMoreEnabled - Is to show and allow load more options
boolean : showRootNode - If show root node
boolean : nodeSelectionEnabled - Defines if node selection is enabled. Default is false, meaning that only leafs are selectable
NameDisplayMode: nameDisplayMode - Mode to choose which name to display on a node/leaf
boolean : useAlternativeSeparator - If path should use the alternative separator "/" instead of the default ">"
boolean : allNodesHavePadding - If all nodes have padding by default regardless of node type
boolean : noConnectionOffset - If there is no offset for the expanders
number : dotRadius - The radius of the custom template node dot so that the line isn't drawn behind it
boolean : considerPartialVisibilityAsVisible - Whether to consider partial visibility as visible for scroll when node/leaf is selected
boolean : showTreePathLine - If it is to show the Tree Path line on canvas
boolean : showNodeIcon - If it is to show the an icon in each node
boolean : expandNodeOnSelection - If it is to expand a node when is selected. Only works when nodeSelectionEnabled=false ;
boolean : searchEnabled - Indicates if search is enabled
string : searchText - Search text
any : additionalSearchData - Additional data used for searching items
boolean : isLoadDataSynchronous - Indicates if load data function is synchronous or pauses in its execution
{ acceptNode(node: Node): number; } - acceptNode - Function that tells if the node should be considered in the search to be highlighted

Outputs

TreeViewModelItem[] : selectedPathChange - When a leaf is selected we emit the path from the leaf to root node ; TreeViewModelLeaf : valueChange - When selected leaf(value) change ; TreeViewModel : dataLoaded - When root node data was loaded ; TreeViewModelLeaf[] : leafsLoaded - When root node data was loaded it returns the list of leafs in the model ; TreeViewModelItem[] : openNodeChange - When a node is opened ; string : searchTextChange - Emits an event when the search text changes

Example

To use the component, assume this HTML Template as an example:

Example :

<cmf-core-controls-treeView
 [path]="_path"
 [load-tag]="_loadTag"
 [node-icon-class]="_iconClass"
 (valueChange)="onValueChange($event)"
 (dataLoaded)="onDataLoaded($event)"
 (leafsLoaded)="onLeafsLoaded($event)"
 (openNodeChange)="onOpenNodeChange($event)"
 [nameDisplayMode]="nameDisplayMode"
 [expandNodeOnSelection]="expandNodeOnSelection">
 </cmf-core-controls-treeView>

Extends

CustomizableComponent

Implements

AfterViewInit OnChanges

Metadata

providers	`{ provide: TreeViewService }`
selector	`cmf-core-controls-treeView`
styleUrls	`./tree-view.component.less`
templateUrl	`./tree-view.component.html`

Index

Constructor

Public

constructor(_cd: ChangeDetectorRef, util: UtilService, dom: DOMService, mediator: MediatorService, treeViewService: TreeViewService, viewContainerRef: ViewContainerRef)

Constructor

Parameters :

Name	Type	Optional
_cd	`ChangeDetectorRef`	No
util	`UtilService`	No
dom	`DOMService`	No
mediator	`MediatorService`	No
treeViewService	`TreeViewService`	No
viewContainerRef	`ViewContainerRef`	No

HostBindings

class.no-root

Type : boolean

Host binding for the 'no-root' class

Methods

Public buildTreePathLine

buildTreePathLine()

Builds lines connecting elements of the tree

Returns : void

Public clearSelection

clearSelection()

Clear selection

Returns : void

Public expandNodesAndSelectItemThatMeetsCondition

expandNodesAndSelectItemThatMeetsCondition(conditionEvaluatorFunction: (item: TreeViewModelItem) => void)

Expand Nodes and select an item (node or leaf) that meets a condition evaluated by a function

Parameters :

Name	Type	Optional	Description
conditionEvaluatorFunction	`function`	No	Function that determines the correct path do open

Returns : void

Public expandNodesAndSelectLeafThatMeetsCondition

expandNodesAndSelectLeafThatMeetsCondition(conditionEvaluatorFunction: (item: TreeViewModelItem) => void)

Expand Nodes and select a Leaf that meets a condition evaluated by a function

Parameters :

Name	Type	Optional
conditionEvaluatorFunction	`function`	No

Returns : void

Public ngAfterViewInit

ngAfterViewInit()

After view init

Returns : void

Public ngOnChanges

ngOnChanges(changes: SimpleChanges)

On changes

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

Public onChildNodeCollapse

onChildNodeCollapse()

When a child node collapses

Returns : void

Public onLoadMore

onLoadMore()

When "loadmore" is initiated automatically scroll down is made to show load more loading progress indicator

Returns : void

Public onOpenNodeChange

onOpenNodeChange(node: TreeViewModelItem[])

On Open Node Change

Parameters :

Name	Type	Optional	Description
node	`TreeViewModelItem[]`	No	the node opened

Returns : void

Public onRootNodeLoaded

onRootNodeLoaded(data: TreeViewModelNode)

When a child node collapses

Parameters :

Name	Type	Optional
data	`TreeViewModelNode`	No

Returns : void

Public onSelectedPathChange

onSelectedPathChange(path: TreeViewModelItem[])

On Selected Path Change

Parameters :

Name	Type	Optional	Description
path	`TreeViewModelItem[]`	No	nodes in order from the leaf to root.

Returns : void

Public onSelectLeaf

onSelectLeaf(selectedItem: TreeViewModelItem)

On select node/leaf

Parameters :

Name	Type	Optional
selectedItem	`TreeViewModelItem`	No

Returns : void

Public selectItemThatMeetsCondition

selectItemThatMeetsCondition(conditionEvaluatorFunction: (item: TreeViewModelItem) => void)

Select an item that meets a condition evaluated by a function

Parameters :

Name	Type	Optional
conditionEvaluatorFunction	`function`	No

Returns : void

Public updateVisualState

updateVisualState()

Updates RootNode Visual State

Returns : void

Properties

Public _auxiliaryNodeData

Type : TreeViewModelNode

Default value :

{
        id: 'auxiliary_node',
        name: 'Aux Root',
        children: [],
        isOpen: false,
        tag: {
            loadTag: ''
        },
        nodeType: TreeViewModelNodeType.Standard
    }

Auxiliary node data

Public _nodeIconClass

Type : string

Default value : 'dot'

Node icon class

Public _path

Type : string

Path string to select a leaf

Public _value

Type : TreeViewModelItem

Selected value

Public acceptNode

Type : function

Function that tells if the node should be considered in the search to be highlighted

Public additionalSearchData

Type : any

Additional data used for searching items

Public allNodesHavePadding

Default value : false

If all nodes have padding by default regardless of node type

Public considerPartialVisibilityAsVisible

Default value : false

Whether to consider partial visibility as visible for scroll when node/leaf is selected

Public data

Type : TreeViewModel

Default value :

{
        rootNode: null
    }

Data model

Public dataLoaded

Default value : new EventEmitter<TreeViewModel>()

When root node data was loaded

Public dotRadius

Type : number

Default value : 0

The radius of the custom template node dot so that the line isn't drawn behind it

Public expandNodeOnSelection

Default value : false

If it is to expand a node when is selected. Only works when nodeSelectionEnabled=false.

Public fullPathForSelection

Type : string

Default value : null

Tree View Path for leaf selection

Public highlightedLeafId

Type : string

Highlighted leaf id

Public highlightedLeafPath

Type : string

Highlighted leaf path

Public isDisabled

Default value : false

Tree View disabled

Public isLoadDataSynchronous

Default value : false

Indicates if load data function is synchronous or pauses in its execution.

Public leafsLoaded

Default value : new EventEmitter<TreeViewModelLeaf[]>()

When root node data was loaded it returns the list of leafs in the model

Public loadMoreEnabled

Default value : false

Load more enabled of tree view node

Public loadTag

Type : any

Data load tag to provide to the service

Public nameDisplayMode

Type : NameDisplayMode

Default value : NameDisplayMode.Name

Current name display mode

Public noConnectionOffset

Default value : false

If there is no offset for the expanders (To be used in conjunction with the noConnectionOffset input of the TreeViewModelNode)

Public nodeSelectionEnabled

Default value : false

Defines if node selection is enabled. Default is false, meaning that only leafs are selectable

Public nodeTemplate

Type : TemplateRef<TreeViewNodeTemplateContext>

Decorators :


                            @ContentChild(TreeViewNodeTemplate, {read: TemplateRef})

Global Node TemplateRef

Public openNodeChange

Default value : new EventEmitter<TreeViewModelItem[]>()

When a node is open

Public searchEnabled

Default value : false

Indicates if search is enabled

Public searchText

Type : string

Search text

Public searchTextChange

Default value : new EventEmitter<string>()

Emits an event when the search text changes

Public selectedPathChange

Default value : new EventEmitter<TreeViewModelItem[]>()

When the selected path changes - based on the selected value

Public showNodeIcon

Default value : true

If it is to show the icon in each node

Public showRootNode

Default value : true

Show root node

Public showTreePathLine

Default value : true

If it is to show the Tree Path line on canvas

Public treeViewPathSeparator

Type : string

Default value : TREE_VIEW_PATH_SEPARATOR

Tree View path separator

Public useAlternativeSeparator

Type : boolean

If path should use the alternative separator "/" instead of the default ">"

Public valueChange

Default value : new EventEmitter<TreeViewModelItem>()

When selected leaf(value) change

Accessors

path

setpath(path: string)

Path for selected leaf

Parameters :

Name	Type	Optional
path	`string`	No

Returns : void

alternativePath

setalternativePath(altPath: string)

Alternative Path for selected leaf (FlowPath like)

Parameters :

Name	Type	Optional
altPath	`string`	No

Returns : void

nodeIconClass

setnodeIconClass(value: string)

Node icon class

Parameters :

Name	Type	Optional
value	`string`	No

Returns : void

<div class="controls-container">
    <cmf-core-controls-tree-view-search
        *ngIf="_rootNodeElementRef?.nativeElement != null && searchEnabled"
        [root]="_rootNodeElementRef.nativeElement"
        [data]="_searchData"
        [text]="searchText"
        [additionalData]="additionalSearchData"
        [acceptNode]="acceptNode"
        (textChange)="onSearchTextChange($event)"
        (pathChange)="path = $event">
    </cmf-core-controls-tree-view-search>
    <ng-content select="[additional-controls]"></ng-content>
</div>

<div #treeViewContainer class="cmf-core-controls-treeView-container" cmf-core-controls-progressIndicator>
    <!-- canvas to draw line path -->
    <canvas *ngIf="showTreePathLine === true" #treeCanvas id="cmf-core-controls-treeView-tree-canvas"></canvas>

    <div id="cmf-core-controls-treeView-tree-container" #treeContainer [ngClass]="{ 'treeView-disabled': isDisabled }">
        <!-- Tree root node -->
        <cmf-core-controls-treeViewNode
            [nodeSelectionEnabled]="nodeSelectionEnabled"
            [load-tag]="loadTag"
            [value]="_value"
            [loadMoreEnabled]="loadMoreEnabled"
            [pathForSelectedLeaf]="_path"
            [fullPathForSelection]="fullPathForSelection"
            [showNodeHeader]="showRootNode"
            [index]="0"
            [path]=""
            [data]="data?.rootNode"
            [parentId]="data?.rootNode?.id"
            title-before-loading="..."
            [node-icon-class]="data?.rootNode?.iconClass || _nodeIconClass"
            [nodeTemplate]="nodeTemplate"
            [useAlternativeSeparator]="useAlternativeSeparator"
            [allNodesHavePadding]="allNodesHavePadding"
            [nameDisplayMode]="nameDisplayMode"
            [showNodeIcon]="showNodeIcon"
            [expandNodeOnSelection]="expandNodeOnSelection"
            (selectedPathChange)="onSelectedPathChange($event)"
            (openNodeChange)="onOpenNodeChange($event)"
            (valueChange)="onSelectLeaf($event)"
            (nodeCollapse)="onChildNodeCollapse()"
            (dataLoaded)="onRootNodeLoaded($event)"
            (onLoadMore)="onLoadMore()"
            #rootNode>
        </cmf-core-controls-treeViewNode>

        <!-- Tree auxiliary node -->
        <cmf-core-controls-treeViewNode
            *ngIf="!showRootNode"
            [nodeSelectionEnabled]="nodeSelectionEnabled"
            [loadMoreEnabled]="false"
            [showNodeHeader]="false"
            [index]="0"
            [path]=""
            [data]="_auxiliaryNodeData"
            [fullPathForSelection]="fullPathForSelection"
            [node-icon-class]="_auxiliaryNodeData?.iconClass || _nodeIconClass"
            [useAlternativeSeparator]="useAlternativeSeparator"
            [allNodesHavePadding]="allNodesHavePadding"
            [nameDisplayMode]="nameDisplayMode"
            [showNodeIcon]="showNodeIcon"
            [expandNodeOnSelection]="expandNodeOnSelection"
            #rootNode>
        </cmf-core-controls-treeViewNode>
    </div>
</div>

./tree-view.component.less

:host {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .controls-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;

        ::ng-deep cmf-core-controls-tree-view-search {
            .search-select-container {
                width: 100%
            }
        }
    }

    .cmf-core-controls-treeView-container {
        position: relative;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;

        #cmf-core-controls-treeView-tree-container {
            width: 100%;
            padding-left: 50px;
        }

        #cmf-core-controls-treeView-tree-canvas {
            position: absolute;
            left: 0;
            opacity: 0.25;
        }
    }

    &.no-root {
        overflow: hidden;
        margin-left: -32px;

        .cmf-core-controls-treeView-container {
            margin-top: -40px;
            margin-bottom: -40px;
        }
    }

    .treeView-disabled {
        pointer-events: none;
    }
}

Legend

Html element

Component

Html element with directive

File

Description

Inputs

Outputs

Example

Extends

Implements

Metadata

Index

Properties

Methods

HostBindings

Accessors

Constructor

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""