@memberjunction/ng-hierarchy-tree 0.0.0 → 6.1.0-edge.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +183 -0
- package/README.md +132 -27
- package/dist/lib/components/hierarchy-tree.component.d.ts +201 -0
- package/dist/lib/components/hierarchy-tree.component.d.ts.map +1 -0
- package/dist/lib/components/hierarchy-tree.component.js +1393 -0
- package/dist/lib/components/hierarchy-tree.component.js.map +1 -0
- package/dist/lib/events/hierarchy-tree.events.d.ts +74 -0
- package/dist/lib/events/hierarchy-tree.events.d.ts.map +1 -0
- package/dist/lib/events/hierarchy-tree.events.js +59 -0
- package/dist/lib/events/hierarchy-tree.events.js.map +1 -0
- package/dist/lib/hierarchy-tree.module.d.ts +14 -0
- package/dist/lib/hierarchy-tree.module.d.ts.map +1 -0
- package/dist/lib/hierarchy-tree.module.js +33 -0
- package/dist/lib/hierarchy-tree.module.js.map +1 -0
- package/dist/lib/models/hierarchy-tree.types.d.ts +252 -0
- package/dist/lib/models/hierarchy-tree.types.d.ts.map +1 -0
- package/dist/lib/models/hierarchy-tree.types.js +2 -0
- package/dist/lib/models/hierarchy-tree.types.js.map +1 -0
- package/dist/public-api.d.ts +8 -0
- package/dist/public-api.d.ts.map +1 -0
- package/dist/public-api.js +12 -0
- package/dist/public-api.js.map +1 -0
- package/package.json +53 -7
package/LICENSE
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
Business Source License 1.1
|
|
2
|
+
|
|
3
|
+
License text copyright (c) 2024 MariaDB plc, All Rights Reserved.
|
|
4
|
+
"Business Source License" is a trademark of MariaDB plc.
|
|
5
|
+
|
|
6
|
+
-----------------------------------------------------------------------------
|
|
7
|
+
|
|
8
|
+
Parameters
|
|
9
|
+
|
|
10
|
+
Licensor: Blue Cypress, Inc.
|
|
11
|
+
|
|
12
|
+
Licensed Work: MemberJunction.
|
|
13
|
+
The Licensed Work is (c) 2023-2026 Blue Cypress, Inc.
|
|
14
|
+
|
|
15
|
+
Additional Use Grant: Subject to the terms of this License, Licensor grants
|
|
16
|
+
you the following additional rights to make Production
|
|
17
|
+
Use of the Licensed Work.
|
|
18
|
+
|
|
19
|
+
1. Internal Use
|
|
20
|
+
|
|
21
|
+
You may make production use of the Licensed Work for
|
|
22
|
+
your own internal business or organizational operations.
|
|
23
|
+
|
|
24
|
+
2. Nonprofit Use
|
|
25
|
+
|
|
26
|
+
If you are a Nonprofit, you may make production use of
|
|
27
|
+
the Licensed Work for the operations and activities of
|
|
28
|
+
your Organizational Family.
|
|
29
|
+
|
|
30
|
+
3. MemberJunction Certified Program Use
|
|
31
|
+
|
|
32
|
+
If you are authorized by Licensor under the
|
|
33
|
+
MemberJunction Certified Program to provide professional
|
|
34
|
+
services using the Licensed Work, you may make
|
|
35
|
+
production use of the Licensed Work in providing such
|
|
36
|
+
professional services to a client, provided that:
|
|
37
|
+
|
|
38
|
+
(a) the Licensed Work is deployed in, and the applicable
|
|
39
|
+
production use occurs within, an environment owned,
|
|
40
|
+
leased, licensed, subscribed to, or otherwise controlled
|
|
41
|
+
by that client; and
|
|
42
|
+
|
|
43
|
+
(b) the production use is for that client's own internal
|
|
44
|
+
business or organizational operations or is otherwise
|
|
45
|
+
independently permitted to that client under this
|
|
46
|
+
Additional Use Grant.
|
|
47
|
+
|
|
48
|
+
4. Definitions Applicable to the Additional Use Grant
|
|
49
|
+
|
|
50
|
+
"Affiliate" means, with respect to a specified Person,
|
|
51
|
+
any other Person that directly or indirectly Controls,
|
|
52
|
+
is Controlled by, or is under common Control with such
|
|
53
|
+
specified Person.
|
|
54
|
+
|
|
55
|
+
"Control" (including the terms "Controls," "Controlled
|
|
56
|
+
by," and "under common Control with") means the direct
|
|
57
|
+
or indirect possession of the power to direct or cause
|
|
58
|
+
the direction of the management and policies of a
|
|
59
|
+
Person, whether through ownership of voting interests,
|
|
60
|
+
by contract, or otherwise.
|
|
61
|
+
|
|
62
|
+
"Organizational Family" means, with respect to a Person,
|
|
63
|
+
(a) such Person and its Affiliates, and (b) any
|
|
64
|
+
nonprofit organization, governmental entity, chapter,
|
|
65
|
+
division, local affiliate, regional affiliate, state
|
|
66
|
+
affiliate, national affiliate, or other entity that is
|
|
67
|
+
formally affiliated with such Person through governing
|
|
68
|
+
documents, a charter, bylaws, a membership agreement, or
|
|
69
|
+
another written organizational instrument, and is
|
|
70
|
+
recognized under such documents as part of the same
|
|
71
|
+
organizational structure.
|
|
72
|
+
|
|
73
|
+
"Nonprofit" means a Person recognized by the Internal
|
|
74
|
+
Revenue Service as exempt from federal income taxation
|
|
75
|
+
under Section 501(c)(3), 501(c)(4), 501(c)(5), or
|
|
76
|
+
501(c)(6) of the Internal Revenue Code, or a foreign
|
|
77
|
+
organization recognized under substantially equivalent
|
|
78
|
+
laws.
|
|
79
|
+
|
|
80
|
+
A Person claiming eligibility as a Nonprofit shall, upon
|
|
81
|
+
Licensor's reasonable request, provide documentation
|
|
82
|
+
reasonably sufficient to demonstrate that it qualifies
|
|
83
|
+
as a Nonprofit. If such Person materially misrepresents,
|
|
84
|
+
or is unable to demonstrate, its qualification as a
|
|
85
|
+
Nonprofit, the rights granted to such Person under
|
|
86
|
+
Section 2 of this Additional Use Grant shall terminate.
|
|
87
|
+
|
|
88
|
+
"MemberJunction Certified Program" means Licensor's
|
|
89
|
+
then-current program for certifying and authorizing a
|
|
90
|
+
Person to provide professional services using the
|
|
91
|
+
Licensed Work.
|
|
92
|
+
|
|
93
|
+
"Person" means any individual, corporation, limited
|
|
94
|
+
liability company, partnership, association, nonprofit
|
|
95
|
+
organization, governmental entity, or other legal or
|
|
96
|
+
organizational entity.
|
|
97
|
+
|
|
98
|
+
Change Date: Four (4) years from the date the Licensed Work is first
|
|
99
|
+
made available.
|
|
100
|
+
|
|
101
|
+
Change License: MIT License.
|
|
102
|
+
|
|
103
|
+
For information about alternative licensing arrangements for the Licensed
|
|
104
|
+
Work, please contact Blue Cypress, Inc.
|
|
105
|
+
|
|
106
|
+
-----------------------------------------------------------------------------
|
|
107
|
+
|
|
108
|
+
Terms
|
|
109
|
+
|
|
110
|
+
The Licensor hereby grants you the right to copy, modify, create derivative
|
|
111
|
+
works, redistribute, and make non-production use of the Licensed Work. The
|
|
112
|
+
Licensor may make an Additional Use Grant, above, permitting limited
|
|
113
|
+
production use.
|
|
114
|
+
|
|
115
|
+
Effective on the Change Date, or the fourth anniversary of the first publicly
|
|
116
|
+
available distribution of a specific version of the Licensed Work under this
|
|
117
|
+
License, whichever comes first, the Licensor hereby grants you rights under
|
|
118
|
+
the terms of the Change License, and the rights granted in the paragraph
|
|
119
|
+
above terminate.
|
|
120
|
+
|
|
121
|
+
If your use of the Licensed Work does not comply with the requirements
|
|
122
|
+
currently in effect as described in this License, you must purchase a
|
|
123
|
+
commercial license from the Licensor, its affiliated entities, or authorized
|
|
124
|
+
resellers, or you must refrain from using the Licensed Work.
|
|
125
|
+
|
|
126
|
+
All copies of the original and modified Licensed Work, and derivative works
|
|
127
|
+
of the Licensed Work, are subject to this License. This License applies
|
|
128
|
+
separately for each version of the Licensed Work and the Change Date may vary
|
|
129
|
+
for each version of the Licensed Work released by Licensor.
|
|
130
|
+
|
|
131
|
+
You must conspicuously display this License on each original or modified copy
|
|
132
|
+
of the Licensed Work. If you receive the Licensed Work in original or
|
|
133
|
+
modified form from a third party, the terms and conditions set forth in this
|
|
134
|
+
License apply to your use of that work.
|
|
135
|
+
|
|
136
|
+
Any use of the Licensed Work in violation of this License will automatically
|
|
137
|
+
terminate your rights under this License for the current and all other
|
|
138
|
+
versions of the Licensed Work.
|
|
139
|
+
|
|
140
|
+
This License does not grant you any right in any trademark or logo of
|
|
141
|
+
Licensor or its affiliates (provided that you may use a trademark or logo of
|
|
142
|
+
Licensor as expressly required by this License).
|
|
143
|
+
|
|
144
|
+
TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON
|
|
145
|
+
AN "AS IS" BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS,
|
|
146
|
+
EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF
|
|
147
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND
|
|
148
|
+
TITLE.
|
|
149
|
+
|
|
150
|
+
MariaDB hereby grants you permission to use this License's text to license
|
|
151
|
+
your works, and to refer to it using the trademark "Business Source License",
|
|
152
|
+
as long as you comply with the Covenants of Licensor below.
|
|
153
|
+
|
|
154
|
+
-----------------------------------------------------------------------------
|
|
155
|
+
|
|
156
|
+
Covenants of Licensor
|
|
157
|
+
|
|
158
|
+
In consideration of the right to use this License's text and the "Business
|
|
159
|
+
Source License" name and trademark, Licensor covenants to MariaDB, and to all
|
|
160
|
+
other recipients of the licensed work to be provided by Licensor:
|
|
161
|
+
|
|
162
|
+
1. To specify as the Change License the GPL Version 2.0 or any later version,
|
|
163
|
+
or a license that is compatible with GPL Version 2.0 or a later version,
|
|
164
|
+
where "compatible" means that software provided under the Change License
|
|
165
|
+
can be included in a program with software provided under GPL Version 2.0
|
|
166
|
+
or a later version. Licensor may specify additional Change Licenses without
|
|
167
|
+
limitation.
|
|
168
|
+
|
|
169
|
+
2. To either: (a) specify an additional grant of rights to use that does not
|
|
170
|
+
impose any additional restriction on the right granted in this License, as
|
|
171
|
+
the Additional Use Grant; or (b) insert the text "None".
|
|
172
|
+
|
|
173
|
+
3. To specify a Change Date.
|
|
174
|
+
|
|
175
|
+
4. Not to modify this License in any other way.
|
|
176
|
+
|
|
177
|
+
-----------------------------------------------------------------------------
|
|
178
|
+
|
|
179
|
+
Notice
|
|
180
|
+
|
|
181
|
+
The Business Source License (this document, or the "License") is not an Open
|
|
182
|
+
Source license. However, the Licensed Work will eventually be made available
|
|
183
|
+
under an Open Source License, as stated in this License.
|
package/README.md
CHANGED
|
@@ -1,45 +1,150 @@
|
|
|
1
1
|
# @memberjunction/ng-hierarchy-tree
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A modern, high-performance, interactive visual hierarchy and organizational chart component for Angular and MemberJunction applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Built on top of D3 layout engines, `--mj-*` design tokens, and MemberJunction's metadata layer, this component visualizes any self-referencing entity hierarchy with smooth pan/zoom, collapsible sub-branches, live path search, subtree focus, drag-and-drop reparenting, and cancelable before/after lifecycle events.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 🚀 Features
|
|
10
|
+
|
|
11
|
+
- **Metadata Driven**: Automatically binds to any MemberJunction entity with a self-referencing foreign key (`ParentID`, `ParentCategoryID`, `ParentAccountID`, etc.) and seamlessly handles single and composite primary keys.
|
|
12
|
+
- **Interactive Canvas**: Smooth D3-powered pan and zoom, mousewheel scaling, auto-fit to container, and compact toolbar controls.
|
|
13
|
+
- **Collapsible Subtrees**: Interactive `[+]` / `[-]` badges displaying both direct child counts and total descendant subtree volume.
|
|
14
|
+
- **Instant Search & Path Expansion**: Real-time keyword filter that matches node titles and subtitles, highlights matching cards, and automatically expands all ancestor branches up to the root.
|
|
15
|
+
- **Subtree Focus**: Isolate any node as a temporary root to inspect deep or complex branches with 1-click return to the full hierarchy.
|
|
16
|
+
- **Cancelable Before/After Event System**: Full programmatic control with `BeforeNodeExpand`, `AfterNodeExpand`, `BeforeNodeCollapse`, `AfterNodeCollapse`, `BeforeReparent`, and `AfterReparent`.
|
|
17
|
+
- **Theme Reactive**: Styled with standard `--mj-*` CSS design tokens for dark and light modes.
|
|
18
|
+
- **Direct Record Navigation**: Integrates with `RecordNavigationEvent` for opening detail records in MemberJunction Explorer tabs.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 📦 Installation & Setup
|
|
23
|
+
|
|
24
|
+
Import `HierarchyTreeComponent` (standalone) or `HierarchyTreeModule` into your Angular component:
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import { Component } from '@angular/core';
|
|
28
|
+
import { HierarchyTreeComponent, HierarchyTreeConfig, HierarchyNodeEvent } from '@memberjunction/ng-hierarchy-tree';
|
|
29
|
+
import { FormNavigationEvent } from '@memberjunction/ng-base-forms';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
selector: 'app-org-chart',
|
|
33
|
+
standalone: true,
|
|
34
|
+
imports: [HierarchyTreeComponent],
|
|
35
|
+
template: `
|
|
36
|
+
<mj-hierarchy-tree
|
|
37
|
+
[Config]="treeConfig"
|
|
38
|
+
(NodeClick)="onNodeClick($event)"
|
|
39
|
+
(Navigate)="onNavigate($event)">
|
|
40
|
+
</mj-hierarchy-tree>
|
|
41
|
+
`
|
|
42
|
+
})
|
|
43
|
+
export class OrgChartComponent {
|
|
44
|
+
public treeConfig: HierarchyTreeConfig = {
|
|
45
|
+
EntityName: 'MJ_BizApps_Common: Organizations',
|
|
46
|
+
ParentField: 'ParentID',
|
|
47
|
+
SubtitleField: 'OrganizationType',
|
|
48
|
+
DefaultIcon: 'fa-solid fa-building',
|
|
49
|
+
DefaultColor: 'var(--mj-brand-primary)',
|
|
50
|
+
Height: '600px'
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
public onNodeClick(event: HierarchyNodeEvent): void {
|
|
54
|
+
console.log('Node selected:', event.Node.Name);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
public onNavigate(event: FormNavigationEvent): void {
|
|
58
|
+
// Forward to NavigationService or Explorer FormComponent
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
```
|
|
8
62
|
|
|
9
|
-
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## ⚙️ Configuration Reference (`HierarchyTreeConfig`)
|
|
66
|
+
|
|
67
|
+
| Property | Type | Default | Description |
|
|
68
|
+
| :--- | :--- | :--- | :--- |
|
|
69
|
+
| `EntityName` | `string` | **(Required)** | The MemberJunction entity name to visualize (e.g. `'MJ_BizApps_Orders: Product Categories'`). |
|
|
70
|
+
| `ParentField` | `string` | `'ParentID'` | Foreign key field pointing to the parent record. Auto-detected from metadata if omitted. |
|
|
71
|
+
| `NameField` | `string` | Entity `NameField` | Field to use for the main card title. |
|
|
72
|
+
| `SubtitleField` | `string` | `undefined` | Optional field for the secondary metadata tag or subtitle. |
|
|
73
|
+
| `IconField` | `string` | `undefined` | Optional field containing a dynamic Font Awesome icon class or image URL. |
|
|
74
|
+
| `DefaultIcon` | `string` | `'fa-solid fa-sitemap'` | Fallback icon when node does not specify one. |
|
|
75
|
+
| `ColorField` | `string` | `undefined` | Optional field for a dynamic accent color — a design token is preferred over a hex literal. |
|
|
76
|
+
| `DefaultColor` | `string` | `'var(--mj-brand-primary, #38bdf8)'` | Fallback accent color. Bound to an inline style, so a `var()` token resolves at paint time and follows the active theme. |
|
|
77
|
+
| `ExtraFilter` | `string` | `undefined` | SQL-like filter string applied to the `RunView` query (e.g. `'IsActive = 1'`). |
|
|
78
|
+
| `OrderBy` | `string` | `'Name ASC'` | Sort order for sibling nodes. |
|
|
79
|
+
| `FocusRecordID` | `string` | `undefined` | Initial record ID to focus as subtree root. |
|
|
80
|
+
| `Orientation` | `'top-to-bottom' \| 'left-to-right'` | `'top-to-bottom'` | Layout direction. |
|
|
81
|
+
| `ShowSearch` | `boolean` | `true` | Whether to display the live search input. |
|
|
82
|
+
| `ShowToolbar` | `boolean` | `true` | Whether to display the zoom and expansion controls toolbar. |
|
|
83
|
+
| `Height` | `string` | `'560px'` | Total container height. |
|
|
10
84
|
|
|
11
|
-
|
|
12
|
-
1. Configure OIDC trusted publishing for the package name `@memberjunction/ng-hierarchy-tree`
|
|
13
|
-
2. Enable secure, token-less publishing from CI/CD workflows
|
|
14
|
-
3. Establish provenance for packages published under this name
|
|
85
|
+
---
|
|
15
86
|
|
|
16
|
-
##
|
|
87
|
+
## 📡 Events & Lifecycle
|
|
88
|
+
|
|
89
|
+
```typescript
|
|
90
|
+
// Cancelable Event Example: Prevent collapsing root nodes
|
|
91
|
+
onBeforeNodeCollapse(event: CancelableHierarchyNodeEvent) {
|
|
92
|
+
if (event.Node.Depth === 0) {
|
|
93
|
+
event.Cancel('Root node must remain expanded');
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Supported Outputs
|
|
99
|
+
|
|
100
|
+
- `NodeClick`: `EventEmitter<HierarchyNodeEvent>`
|
|
101
|
+
- `NodeDoubleClick`: `EventEmitter<HierarchyNodeEvent>`
|
|
102
|
+
- `NodeSelect`: `EventEmitter<HierarchyNodeEvent>`
|
|
103
|
+
- `BeforeNodeExpand`: `EventEmitter<CancelableHierarchyNodeEvent>`
|
|
104
|
+
- `AfterNodeExpand`: `EventEmitter<HierarchyNodeEvent>`
|
|
105
|
+
- `BeforeNodeCollapse`: `EventEmitter<CancelableHierarchyNodeEvent>`
|
|
106
|
+
- `AfterNodeCollapse`: `EventEmitter<HierarchyNodeEvent>`
|
|
107
|
+
- `BeforeReparent`: `EventEmitter<CancelableReparentEvent>`
|
|
108
|
+
- `AfterReparent`: `EventEmitter<ReparentEvent>`
|
|
109
|
+
- `NodeAction`: `EventEmitter<NodeActionEvent>`
|
|
110
|
+
- `Navigate`: `EventEmitter<FormNavigationEvent>`
|
|
17
111
|
|
|
18
|
-
|
|
112
|
+
---
|
|
19
113
|
|
|
20
|
-
##
|
|
114
|
+
## 🛠️ Programmatic Action Verbs
|
|
21
115
|
|
|
22
|
-
|
|
116
|
+
Call public methods on `HierarchyTreeComponent` via `@ViewChild`:
|
|
23
117
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
3. Specify the repository and workflow that should be allowed to publish
|
|
27
|
-
4. Use the configured workflow to publish your actual package
|
|
118
|
+
```typescript
|
|
119
|
+
@ViewChild(HierarchyTreeComponent) treeComponent!: HierarchyTreeComponent;
|
|
28
120
|
|
|
29
|
-
|
|
121
|
+
// Expansion
|
|
122
|
+
this.treeComponent.expandAll();
|
|
123
|
+
this.treeComponent.collapseAll();
|
|
30
124
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
125
|
+
// Navigation & Canvas
|
|
126
|
+
this.treeComponent.fitToScreen();
|
|
127
|
+
this.treeComponent.zoomIn();
|
|
128
|
+
this.treeComponent.zoomOut();
|
|
129
|
+
this.treeComponent.resetZoom();
|
|
36
130
|
|
|
37
|
-
|
|
131
|
+
// Focus & Subtrees
|
|
132
|
+
this.treeComponent.setFocusRoot('ORG-1234');
|
|
133
|
+
this.treeComponent.resetFocus();
|
|
38
134
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
135
|
+
// Export
|
|
136
|
+
const svgContent = this.treeComponent.exportAsSVG();
|
|
137
|
+
```
|
|
42
138
|
|
|
43
139
|
---
|
|
44
140
|
|
|
45
|
-
|
|
141
|
+
## 🎨 Design Tokens
|
|
142
|
+
|
|
143
|
+
This component consumes standard `--mj-*` design tokens:
|
|
144
|
+
|
|
145
|
+
- `--mj-bg-surface-sunken`: Canvas background
|
|
146
|
+
- `--mj-bg-surface-card`: Node card background
|
|
147
|
+
- `--mj-border-default`: Node borders & link curves
|
|
148
|
+
- `--mj-text-primary`: Node title text
|
|
149
|
+
- `--mj-text-secondary`: Subtitles & badges
|
|
150
|
+
- `--mj-brand-primary`: Focus indicators & search match highlights
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
import { EventEmitter, ElementRef, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef, AfterViewInit } from '@angular/core';
|
|
2
|
+
import { BaseAngularComponent } from '@memberjunction/ng-base-types';
|
|
3
|
+
import { FormNavigationEvent } from '@memberjunction/ng-base-forms';
|
|
4
|
+
import { HierarchyTreeConfig, HierarchyNodeData } from '../models/hierarchy-tree.types';
|
|
5
|
+
import { HierarchyNodeEvent, CancelableHierarchyNodeEvent, ReparentEvent, CancelableReparentEvent, NodeActionEvent } from '../events/hierarchy-tree.events';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
/**
|
|
8
|
+
* Modern, interactive, canvas-based visual hierarchy and organizational chart component.
|
|
9
|
+
*
|
|
10
|
+
* Automatically generates a dynamic, zoomable tree visualization for any MemberJunction entity
|
|
11
|
+
* with a self-referencing parent foreign key (such as Corporate Subsidiaries, Product Categories,
|
|
12
|
+
* Committee Governance structures, Tag Taxonomies, and Management Lines).
|
|
13
|
+
*
|
|
14
|
+
* Features:
|
|
15
|
+
* - **Metadata Driven**: Auto-derives primary keys (including composite keys) and parent fields from MJ metadata.
|
|
16
|
+
* - **Interactive Canvas**: D3-powered smooth pan, zoom, auto-fit, and mini-toolbar controls.
|
|
17
|
+
* - **Collapsible Subtrees**: Interactive `[+]` / `[-]` badges with direct and total descendant counts.
|
|
18
|
+
* - **Live Search & Path Expansion**: Instant keyword search that highlights matches and auto-expands ancestor branches.
|
|
19
|
+
* - **Subtree Focus**: Isolate any node as the root of the view with 1-click return to full hierarchy.
|
|
20
|
+
* - **Full Design Token Theming**: Uses `--mj-*` surface, border, typography, and accent tokens.
|
|
21
|
+
* - **Extensive Cancelable Events**: Before/After events for expansion, collapse, reparenting, and navigation.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```html
|
|
25
|
+
* <mj-hierarchy-tree
|
|
26
|
+
* [Config]="{
|
|
27
|
+
* EntityName: 'MJ_BizApps_Common: Organizations',
|
|
28
|
+
* ParentField: 'ParentID',
|
|
29
|
+
* SubtitleField: 'OrganizationType',
|
|
30
|
+
* DefaultIcon: 'fa-solid fa-building'
|
|
31
|
+
* }"
|
|
32
|
+
* (Navigate)="onNavigate($event)">
|
|
33
|
+
* </mj-hierarchy-tree>
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
export declare class HierarchyTreeComponent extends BaseAngularComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
|
|
37
|
+
private cdr?;
|
|
38
|
+
constructor(cdr?: ChangeDetectorRef | undefined);
|
|
39
|
+
svgContainerRef: ElementRef<HTMLDivElement>;
|
|
40
|
+
svgRef: ElementRef<SVGSVGElement>;
|
|
41
|
+
/**
|
|
42
|
+
* Declarative configuration defining the target entity and visual layout properties.
|
|
43
|
+
*/
|
|
44
|
+
Config: HierarchyTreeConfig;
|
|
45
|
+
/**
|
|
46
|
+
* Optional pre-loaded data array. If provided, the component skips the automated
|
|
47
|
+
* `RunView` query and constructs the tree directly from these items.
|
|
48
|
+
*/
|
|
49
|
+
Data?: Record<string, unknown>[];
|
|
50
|
+
/**
|
|
51
|
+
* Optional active / selected record ID. When provided, the node is highlighted and all ancestors
|
|
52
|
+
* are expanded so it is visible in full tree context.
|
|
53
|
+
*/
|
|
54
|
+
ActiveRecordID?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Primary key ID to focus as the subtree root.
|
|
57
|
+
*/
|
|
58
|
+
FocusRecordID?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Controls whether action buttons (Open Record, Focus, Add Child) appear on node cards.
|
|
61
|
+
*/
|
|
62
|
+
AllowNodeActions: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Emitted when a node is clicked.
|
|
65
|
+
*/
|
|
66
|
+
NodeClick: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>>;
|
|
67
|
+
/**
|
|
68
|
+
* Emitted when a node is double-clicked.
|
|
69
|
+
*/
|
|
70
|
+
NodeDoubleClick: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>>;
|
|
71
|
+
/**
|
|
72
|
+
* Emitted when a node is selected / set as active.
|
|
73
|
+
*/
|
|
74
|
+
NodeSelect: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>>;
|
|
75
|
+
/**
|
|
76
|
+
* Emitted before a node expands its children. Cancelable.
|
|
77
|
+
*/
|
|
78
|
+
BeforeNodeExpand: EventEmitter<CancelableHierarchyNodeEvent<Record<string, unknown>>>;
|
|
79
|
+
/**
|
|
80
|
+
* Emitted after a node has expanded its children.
|
|
81
|
+
*/
|
|
82
|
+
AfterNodeExpand: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>>;
|
|
83
|
+
/**
|
|
84
|
+
* Emitted before a node collapses its children. Cancelable.
|
|
85
|
+
*/
|
|
86
|
+
BeforeNodeCollapse: EventEmitter<CancelableHierarchyNodeEvent<Record<string, unknown>>>;
|
|
87
|
+
/**
|
|
88
|
+
* Emitted after a node has collapsed its children.
|
|
89
|
+
*/
|
|
90
|
+
AfterNodeCollapse: EventEmitter<HierarchyNodeEvent<Record<string, unknown>>>;
|
|
91
|
+
/**
|
|
92
|
+
* Emitted before a node is reparented. Cancelable.
|
|
93
|
+
*/
|
|
94
|
+
BeforeReparent: EventEmitter<CancelableReparentEvent<Record<string, unknown>>>;
|
|
95
|
+
/**
|
|
96
|
+
* Emitted after a node has been reparented.
|
|
97
|
+
*/
|
|
98
|
+
AfterReparent: EventEmitter<ReparentEvent<Record<string, unknown>>>;
|
|
99
|
+
/**
|
|
100
|
+
* Emitted when an action button (e.g. Open, Add Child, Focus) is invoked on a node.
|
|
101
|
+
*/
|
|
102
|
+
NodeAction: EventEmitter<NodeActionEvent<Record<string, unknown>>>;
|
|
103
|
+
/**
|
|
104
|
+
* Optional persisted zoom scale factor to restore.
|
|
105
|
+
*/
|
|
106
|
+
ZoomLevel?: number;
|
|
107
|
+
/**
|
|
108
|
+
* Emitted when the user zooms in or out on the hierarchy canvas.
|
|
109
|
+
*/
|
|
110
|
+
ZoomChange: EventEmitter<number>;
|
|
111
|
+
/**
|
|
112
|
+
* Emitted when the user requests navigation to a full entity record.
|
|
113
|
+
*/
|
|
114
|
+
Navigate: EventEmitter<FormNavigationEvent>;
|
|
115
|
+
Loading: boolean;
|
|
116
|
+
ErrorMessage: string | null;
|
|
117
|
+
SearchQuery: string;
|
|
118
|
+
MatchingNodeCount: number;
|
|
119
|
+
FocusedNode: HierarchyNodeData | null;
|
|
120
|
+
SelectedNode: HierarchyNodeData | null;
|
|
121
|
+
ShowDetailsDrawer: boolean;
|
|
122
|
+
/** Flattened list of all loaded hierarchy nodes for search and lookup. */
|
|
123
|
+
AllNodes: HierarchyNodeData[];
|
|
124
|
+
private nodeMap;
|
|
125
|
+
/** The root nodes of the active view. */
|
|
126
|
+
RootNodes: HierarchyNodeData[];
|
|
127
|
+
/** D3 zoom behavior and SVG group selection */
|
|
128
|
+
private zoomBehavior;
|
|
129
|
+
private svgSelection;
|
|
130
|
+
private gSelection;
|
|
131
|
+
private currentZoomTransform;
|
|
132
|
+
private resizeObserver;
|
|
133
|
+
private entityInfo;
|
|
134
|
+
private previousConfigState;
|
|
135
|
+
ngOnInit(): void;
|
|
136
|
+
ngAfterViewInit(): void;
|
|
137
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
138
|
+
private hasDataConfigChanged;
|
|
139
|
+
private updateActiveNodeSelection;
|
|
140
|
+
ngOnDestroy(): void;
|
|
141
|
+
private initializeConfig;
|
|
142
|
+
private log;
|
|
143
|
+
/**
|
|
144
|
+
* Loads records from the server via `RunView` using entity metadata.
|
|
145
|
+
*/
|
|
146
|
+
loadData(): Promise<void>;
|
|
147
|
+
/**
|
|
148
|
+
* Helper to retrieve a property value from a record item in a case-insensitive manner.
|
|
149
|
+
*/
|
|
150
|
+
private getItemValue;
|
|
151
|
+
/**
|
|
152
|
+
* Constructs the in-memory tree nodes, computes composite keys, descendant counts, and depths.
|
|
153
|
+
*/
|
|
154
|
+
buildTreeFromData(items: Record<string, unknown>[]): void;
|
|
155
|
+
private resolveParentFieldName;
|
|
156
|
+
private resolveNameFieldName;
|
|
157
|
+
private extractPrimaryKey;
|
|
158
|
+
private wouldCreateCycle;
|
|
159
|
+
private computeSubtreeMetrics;
|
|
160
|
+
private initD3Zoom;
|
|
161
|
+
private setupResizeObserver;
|
|
162
|
+
/**
|
|
163
|
+
* Computes the D3 hierarchy tree layout and updates the SVG rendering.
|
|
164
|
+
*/
|
|
165
|
+
renderTree(preserveTransform?: boolean): void;
|
|
166
|
+
/**
|
|
167
|
+
* Toggles the expand/collapse state of a node, firing cancelable Before and After events.
|
|
168
|
+
*/
|
|
169
|
+
toggleNodeExpansion(node: HierarchyNodeData, event?: MouseEvent): void;
|
|
170
|
+
closeDetailsDrawer(): void;
|
|
171
|
+
openDetailsDrawer(): void;
|
|
172
|
+
onCanvasBackgroundClick(event: MouseEvent): void;
|
|
173
|
+
onNodeClick(node: HierarchyNodeData, event: MouseEvent): void;
|
|
174
|
+
onNodeDoubleClick(node: HierarchyNodeData, event: MouseEvent): void;
|
|
175
|
+
onNodeAction(node: HierarchyNodeData, action: string, event: MouseEvent): void;
|
|
176
|
+
navigateToRecord(node: HierarchyNodeData, event?: MouseEvent): void;
|
|
177
|
+
getRecordAttributeEntries(record: Record<string, unknown>): {
|
|
178
|
+
key: string;
|
|
179
|
+
label: string;
|
|
180
|
+
value: string;
|
|
181
|
+
}[];
|
|
182
|
+
onSearchInput(): void;
|
|
183
|
+
clearSearch(): void;
|
|
184
|
+
centerOnNode(node: HierarchyNodeData): void;
|
|
185
|
+
private expandAncestors;
|
|
186
|
+
setFocusRoot(recordId?: string): void;
|
|
187
|
+
resetFocus(): void;
|
|
188
|
+
expandAll(): void;
|
|
189
|
+
collapseAll(): void;
|
|
190
|
+
zoomIn(): void;
|
|
191
|
+
zoomOut(): void;
|
|
192
|
+
setZoomLevel(scale: number, animated?: boolean): void;
|
|
193
|
+
resetZoom(): void;
|
|
194
|
+
onFitToViewClick(): void;
|
|
195
|
+
fitToScreen(immediate?: boolean, forceAutoScale?: boolean): void;
|
|
196
|
+
exportAsSVG(): string;
|
|
197
|
+
refresh(): Promise<void>;
|
|
198
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<HierarchyTreeComponent, never>;
|
|
199
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<HierarchyTreeComponent, "mj-hierarchy-tree", never, { "Config": { "alias": "Config"; "required": false; }; "Data": { "alias": "Data"; "required": false; }; "ActiveRecordID": { "alias": "ActiveRecordID"; "required": false; }; "FocusRecordID": { "alias": "FocusRecordID"; "required": false; }; "AllowNodeActions": { "alias": "AllowNodeActions"; "required": false; }; "ZoomLevel": { "alias": "ZoomLevel"; "required": false; }; }, { "NodeClick": "NodeClick"; "NodeDoubleClick": "NodeDoubleClick"; "NodeSelect": "NodeSelect"; "BeforeNodeExpand": "BeforeNodeExpand"; "AfterNodeExpand": "AfterNodeExpand"; "BeforeNodeCollapse": "BeforeNodeCollapse"; "AfterNodeCollapse": "AfterNodeCollapse"; "BeforeReparent": "BeforeReparent"; "AfterReparent": "AfterReparent"; "NodeAction": "NodeAction"; "ZoomChange": "ZoomChange"; "Navigate": "Navigate"; }, never, never, true, never>;
|
|
200
|
+
}
|
|
201
|
+
//# sourceMappingURL=hierarchy-tree.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hierarchy-tree.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/hierarchy-tree.component.ts"],"names":[],"mappings":"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"}
|