TreeAdmin

This package provides some features based on the tree-core package.

1. Administrable behavior: allow developers to make editable node components.
2. Some useful ui component for the editing part of a component.

Installation

• npm install @lheido/tree-admin @lheido/tree-core @angular/cdk
• Import the TreeAdminModule in your ngModule.
• Import the SCSS file in your main SCSS file.

Administrable behavior

The root component wraps a tree-node component and trigger a change event for each changes in the tree.

<tree-root [node]="rootNode" (change)="onTreeChange($event)"></tree-root>

The $event contains the modified node.

A service, called TreeAdminService, provide useful method to get all changes, merge changes with a tree.

• treeAdminService.mergeChanges(originalTree) create a copy of the original tree, including the changes stored into the service.
• treeAdminService.getChanges() return all stored changes for all the tree in the page.
• treeAdminService.getChanges(tree) return all stored changes for the given tree.

To tell to the service that a component is administrable, your component should extend the AdministrableNodeComponentBase base class.

Admin UI

tree-admin-fab

Display the button as a floating button (like mat-fab), it should contains icon only.

<button tree-admin-fab>
  <mat-icon>delete</mat-icon>
</button>

tree-ripple

This is a custom ripple effect that take into account CSS rotation.

<div class="parent" style="position: relative">
  <div tree-ripple></div>
</div>

Note: the parent element must have a position (relative or other).

The code below show an example with a CSS rotation.

<div class="parent" style="position: relative; transform: rotate(-45deg);">
  <div tree-ripple [angle]="45" [useOffset]="true"></div>
</div>

Other example:

<tree-ripple [disableOverflowHidden]="true" [sizeMultiplier]="2" useParentWidth="true"></tree-ripple>

The default circle radius is calculated using the tree-ripple height and the sizeMultiplier (default to 2).