chenjingyu
4 years ago
30 changed files with 1228 additions and 43 deletions
@ -0,0 +1,53 @@
|
||||
# Angular tree diagram |
||||
|
||||
### About |
||||
This is Angular 2+ Hierarchical UI module. |
||||
|
||||
### Preview |
||||
<img src="http://i.imgur.com/CfQXRGm.png" width="500"> |
||||
|
||||
### Demo |
||||
On [gh-pages](https://artbelikov.github.io/angular2-tree-diagram/) |
||||
|
||||
### Features |
||||
- Drag and drop |
||||
- Zoom and pan |
||||
- Configurable node width/height |
||||
- Add/remove nodes |
||||
- TreeComponent-like UI |
||||
- Pure CSS relation lines |
||||
- No dependencies |
||||
|
||||
### Installation |
||||
``` |
||||
npm i angular2-tree-diagram |
||||
``` |
||||
|
||||
### Usage |
||||
- Import module in your project |
||||
- Use tree-diagram directive |
||||
- Pass array of nodes and config |
||||
- See example.json for more details |
||||
|
||||
### Example |
||||
``` |
||||
<tree-diagram [data]="data"></tree-diagram> |
||||
... |
||||
data = { |
||||
json: [ |
||||
{ |
||||
"guid": "bc4c7a02-5379-4046-92be-12c67af4295a", |
||||
"displayName": "Elentrix", |
||||
"children": [ |
||||
"85d412c2-ebc1-4d56-96c9-7da433ac9bb2", |
||||
"28aac445-83b1-464d-9695-a4157dab6eac" |
||||
] |
||||
}, |
||||
... |
||||
], |
||||
config: { |
||||
nodeWidth: 200, |
||||
nodeHeight: 100 |
||||
} |
||||
} |
||||
``` |
||||
@ -0,0 +1,32 @@
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) { |
||||
config.set({ |
||||
basePath: '', |
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'], |
||||
plugins: [ |
||||
require('karma-jasmine'), |
||||
require('karma-chrome-launcher'), |
||||
require('karma-jasmine-html-reporter'), |
||||
require('karma-coverage-istanbul-reporter'), |
||||
require('@angular-devkit/build-angular/plugins/karma') |
||||
], |
||||
client: { |
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
}, |
||||
coverageIstanbulReporter: { |
||||
dir: require('path').join(__dirname, '../../coverage/ng-tree-diagram'), |
||||
reports: ['html', 'lcovonly', 'text-summary'], |
||||
fixWebpackSourcePaths: true |
||||
}, |
||||
reporters: ['progress', 'kjhtml'], |
||||
port: 9876, |
||||
colors: true, |
||||
logLevel: config.LOG_INFO, |
||||
autoWatch: true, |
||||
browsers: ['Chrome'], |
||||
singleRun: false, |
||||
restartOnFileChange: true |
||||
}); |
||||
}; |
||||
@ -0,0 +1,7 @@
|
||||
{ |
||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json", |
||||
"dest": "../../dist/ng-tree-diagram", |
||||
"lib": { |
||||
"entryFile": "src/ng-tree-diagram.ts" |
||||
} |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
{ |
||||
"name": "angular2-tree-diagram", |
||||
"version": "1.2.0", |
||||
"author": "Artyom Belikov", |
||||
"peerDependencies": { |
||||
"@angular/common": "^9.0.1", |
||||
"@angular/core": "^9.0.1", |
||||
"tslib": "^1.10.0" |
||||
}, |
||||
"license": "MIT", |
||||
"bugs": { |
||||
"url": "https://github.com/artbelikov/angular2-tree-diagram/issues" |
||||
}, |
||||
"homepage": "https://github.com/artbelikov/angular2-tree-diagram#readme" |
||||
} |
||||
@ -0,0 +1,3 @@
|
||||
export * from './node.class'; |
||||
export * from './node-maker.class'; |
||||
export * from './nodes-list.class'; |
||||
@ -0,0 +1,50 @@
|
||||
import { TreeDiagramNode } from './node.class'; |
||||
|
||||
export class TreeDiagramNodeMaker extends TreeDiagramNode { |
||||
private isMakerState = true; |
||||
|
||||
public get isMaker() { |
||||
return this.isMakerState; |
||||
} |
||||
|
||||
public drop(event) { |
||||
event.preventDefault(); |
||||
|
||||
const guid = this.getThisNodeList().draggingNodeGuid; |
||||
|
||||
this.getThisNodeList().rootNode(guid); |
||||
this.displayName = 'New node'; |
||||
|
||||
return false; |
||||
} |
||||
|
||||
public dragenter(event) { |
||||
event.dataTransfer.dropEffect = 'move'; |
||||
|
||||
const guid = this.getThisNodeList().draggingNodeGuid; |
||||
const node = this.getThisNodeList().getNode(guid); |
||||
|
||||
if (node.parentId) { |
||||
this.displayName = 'Root'; |
||||
} |
||||
} |
||||
|
||||
public dragover(event) { |
||||
event.preventDefault(); |
||||
|
||||
const guid = this.getThisNodeList().draggingNodeGuid; |
||||
const node = this.getThisNodeList().getNode(guid); |
||||
|
||||
if (!this.isDragging && node.parentId) { |
||||
this.isDragover = true; |
||||
event.dataTransfer.dropEffect = 'move'; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
public dragleave(event) { |
||||
this.displayName = 'New node'; |
||||
this.isDragover = false; |
||||
} |
||||
} |
||||
@ -0,0 +1,120 @@
|
||||
import { TreeDiagramNodesList } from './nodes-list.class'; |
||||
|
||||
export class TreeDiagramNode { |
||||
public parentId: string | null; |
||||
public guid: string; |
||||
public width: number; |
||||
public height: number; |
||||
public isDragover: boolean; |
||||
public isDragging: boolean; |
||||
public children: Set<string>; |
||||
public displayName: string; |
||||
private toggleState: boolean; |
||||
|
||||
public get isMaker() { |
||||
return false; |
||||
} |
||||
|
||||
constructor( |
||||
props, |
||||
config, |
||||
public getThisNodeList: () => TreeDiagramNodesList |
||||
) { |
||||
if (!props.guid) { |
||||
return; |
||||
} |
||||
|
||||
for (const prop in props) { |
||||
if (props.hasOwnProperty(prop)) { |
||||
this[prop] = props[prop]; |
||||
} |
||||
} |
||||
|
||||
this.toggleState = false; |
||||
|
||||
if (config.nodeWidth) { |
||||
this.width = config.nodeWidth; |
||||
} |
||||
|
||||
if (config.nodeHeight) { |
||||
this.height = config.nodeHeight; |
||||
} |
||||
|
||||
this.children = new Set(props.children as string[]); |
||||
} |
||||
|
||||
public get isExpanded() { |
||||
return this.toggleState; |
||||
} |
||||
|
||||
public destroy() { |
||||
this.getThisNodeList().destroy(this.guid); |
||||
} |
||||
|
||||
public hasChildren() { |
||||
return !!this.children.size; |
||||
} |
||||
|
||||
public toggle(state = !this.toggleState) { |
||||
this.toggleState = state; |
||||
|
||||
if (state) { |
||||
this.getThisNodeList().toggleSiblings(this.guid); |
||||
} |
||||
} |
||||
|
||||
public childrenCount() { |
||||
return this.children.size; |
||||
} |
||||
|
||||
public isRoot() { |
||||
return this.parentId == null; |
||||
} |
||||
|
||||
public dragenter(event) { |
||||
event.dataTransfer.dropEffect = 'move'; |
||||
} |
||||
|
||||
public dragleave(event) { |
||||
this.isDragover = false; |
||||
} |
||||
|
||||
public dragstart(event) { |
||||
event.dataTransfer.effectAllowed = 'move'; |
||||
this.isDragging = true; |
||||
this.toggle(false); |
||||
this.getThisNodeList().draggingNodeGuid = this.guid; |
||||
} |
||||
|
||||
public dragover(event) { |
||||
event.preventDefault(); |
||||
|
||||
if (!this.isDragging) { |
||||
this.isDragover = true; |
||||
} |
||||
|
||||
event.dataTransfer.dropEffect = 'move'; |
||||
return false; |
||||
} |
||||
|
||||
public dragend() { |
||||
this.isDragover = false; |
||||
this.isDragging = false; |
||||
} |
||||
|
||||
public drop(event) { |
||||
event.preventDefault(); |
||||
|
||||
const guid = this.getThisNodeList().draggingNodeGuid; |
||||
|
||||
this.getThisNodeList().transfer(guid, this.guid); |
||||
return false; |
||||
} |
||||
|
||||
public addChild() { |
||||
const newNodeGuid = this.getThisNodeList().newNode(this.guid); |
||||
|
||||
this.children.add(newNodeGuid); |
||||
this.toggle(true); |
||||
} |
||||
} |
||||
@ -0,0 +1,200 @@
|
||||
import { TreeDiagramNode } from './node.class'; |
||||
import { TreeDiagramNodeMaker } from './node-maker.class'; |
||||
|
||||
export class TreeDiagramNodesList { |
||||
public roots: TreeDiagramNode[]; |
||||
public makerGuid: string; |
||||
public draggingNodeGuid; |
||||
private nodesList: Map<string, TreeDiagramNode>; |
||||
private nodeTemplate = { |
||||
displayName: 'New node', |
||||
children: [], |
||||
guid: '', |
||||
parentId: null |
||||
}; |
||||
|
||||
constructor(nodes: any[], private config) { |
||||
this.nodesList = new Map(); |
||||
nodes.forEach(treeNode => { |
||||
this.nodesList.set( |
||||
treeNode.guid, |
||||
new TreeDiagramNode(treeNode, config, this.getThisNodeList.bind(this)) |
||||
); |
||||
}); |
||||
this.makeRoots(); |
||||
this.makerGuid = this.uuidv4(); |
||||
|
||||
const node = { |
||||
guid: this.makerGuid, |
||||
parentId: 'root', |
||||
children: [], |
||||
displayName: 'New node' |
||||
}; |
||||
const maker = new TreeDiagramNodeMaker( |
||||
node, |
||||
this.config, |
||||
this.getThisNodeList.bind(this) |
||||
); |
||||
|
||||
this.nodesList.set(this.makerGuid, maker); |
||||
} |
||||
|
||||
public values() { |
||||
return this.nodesList.values(); |
||||
} |
||||
|
||||
public getNode(guid: string): TreeDiagramNode { |
||||
return this.nodesList.get(guid); |
||||
} |
||||
|
||||
public rootNode(guid: string) { |
||||
const node = this.getNode(guid); |
||||
const maker = this.getNode(this.makerGuid); |
||||
|
||||
node.isDragging = false; |
||||
node.isDragover = false; |
||||
|
||||
if (node.parentId) { |
||||
const parent = this.getNode(node.parentId); |
||||
parent.children.delete(guid); |
||||
} |
||||
|
||||
node.parentId = null; |
||||
|
||||
this.makeRoots(); |
||||
maker.isDragging = false; |
||||
maker.isDragover = false; |
||||
} |
||||
|
||||
public transfer(originId: string, targetId: string) { |
||||
const origin = this.getNode(originId); |
||||
const target = this.getNode(targetId); |
||||
|
||||
origin.isDragover = false; |
||||
origin.isDragging = false; |
||||
target.isDragover = false; |
||||
|
||||
if (origin.parentId === targetId || originId === targetId) { |
||||
return; |
||||
} |
||||
|
||||
const remakeRoots = origin.isRoot(); |
||||
|
||||
if (origin.parentId) { |
||||
const parent = this.getNode(origin.parentId); |
||||
|
||||
parent.children.delete(originId); |
||||
|
||||
if (!parent.hasChildren()) { |
||||
parent.toggle(false); |
||||
} |
||||
} |
||||
|
||||
target.children.add(originId); |
||||
origin.parentId = targetId; |
||||
|
||||
if (remakeRoots) { |
||||
this.makeRoots(); |
||||
} |
||||
|
||||
this.serialize(); |
||||
} |
||||
|
||||
public getThisNodeList() { |
||||
return this; |
||||
} |
||||
|
||||
public toggleSiblings(guid: string) { |
||||
const target = this.getNode(guid); |
||||
|
||||
if (target.parentId) { |
||||
const parent = this.getNode(target.parentId); |
||||
|
||||
parent.children.forEach(nodeGuid => { |
||||
if (nodeGuid === guid) { |
||||
return; |
||||
} |
||||
|
||||
this.getNode(nodeGuid).toggle(false); |
||||
}); |
||||
} else { |
||||
for (const root of this.roots) { |
||||
if (root.guid === guid) { |
||||
continue; |
||||
} |
||||
|
||||
root.toggle(false); |
||||
} |
||||
} |
||||
} |
||||
|
||||
public serialize() { |
||||
const out = []; |
||||
|
||||
this.nodesList.forEach((node: TreeDiagramNode) => { |
||||
const json: any = { |
||||
guid: node.guid, |
||||
displayName: node.displayName, |
||||
parentId: node.parentId, |
||||
children: Array.from(node.children), |
||||
}; |
||||
|
||||
out.push(json); |
||||
}); |
||||
|
||||
return out; |
||||
} |
||||
|
||||
public destroy(guid: string) { |
||||
const target = this.getNode(guid); |
||||
|
||||
if (target.parentId) { |
||||
const parent = this.getNode(target.parentId); |
||||
parent.children.delete(guid); |
||||
} |
||||
|
||||
if (target.hasChildren()) { |
||||
target.children.forEach((child: string) => { |
||||
this.nodesList.delete(child); |
||||
}); |
||||
} |
||||
|
||||
this.nodesList.delete(guid); |
||||
} |
||||
|
||||
public newNode(parentId = null) { |
||||
const nodeTemplate = Object.assign({}, this.nodeTemplate); |
||||
|
||||
nodeTemplate.guid = this.uuidv4(); |
||||
nodeTemplate.parentId = parentId; |
||||
this.nodesList.set( |
||||
nodeTemplate.guid, |
||||
new TreeDiagramNode( |
||||
nodeTemplate, |
||||
this.config, |
||||
this.getThisNodeList.bind(this) |
||||
) |
||||
); |
||||
this.makeRoots(); |
||||
|
||||
return nodeTemplate.guid; |
||||
} |
||||
|
||||
private uuidv4() { |
||||
// tslint:disable-next-line:only-arrow-functions
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { |
||||
// tslint:disable-next-line:one-variable-per-declaration no-bitwise
|
||||
const r = (Math.random() * 16) | 0, |
||||
// tslint:disable-next-line:triple-equals no-bitwise
|
||||
v = c == 'x' ? r : (r & 0x3) | 0x8; |
||||
|
||||
return v.toString(16); |
||||
}); |
||||
} |
||||
|
||||
private makeRoots() { |
||||
this.roots = Array.from(this.values()).filter((node: TreeDiagramNode) => |
||||
node.isRoot() |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1 @@
|
||||
export { TreeDiagramModule } from './tree.module'; |
||||
@ -0,0 +1 @@
|
||||
export { NodeComponent } from './node.component'; |
||||
@ -0,0 +1,65 @@
|
||||
<div class="line-to"></div> |
||||
<div |
||||
id="tree-node-{{ node.guid }}" |
||||
[ngClass]="{ |
||||
'tree-element-container': !0, |
||||
'tree-element-has-children': node.hasChildren() |
||||
}" |
||||
[style.width.px]="node.width" |
||||
[style.height.px]="node.height" |
||||
> |
||||
<div |
||||
[ngClass]="{ |
||||
'tree-element-main': !0, |
||||
dragover: node.isDragover, |
||||
expanded: node.isExpanded, |
||||
dragging: node.isDragging, |
||||
'tree-new-node': node.isMaker |
||||
}" |
||||
[attr.draggable]="node.isMaker ? null : 'true'" |
||||
[style.width.px]="node.width" |
||||
[style.height.px]="node.height" |
||||
(drop)="node.drop($event)" |
||||
(dragenter)="node.dragenter($event)" |
||||
(dragstart)="node.dragstart($event)" |
||||
(dragover)="node.dragover($event)" |
||||
(dragend)="node.dragend()" |
||||
(dragleave)="node.dragleave($event)" |
||||
> |
||||
<div |
||||
class="rect" |
||||
[style.width.px]="node.width" |
||||
[style.height.px]="node.height" |
||||
> |
||||
<div class="buttons"> |
||||
<div class="delete" (click)="node.destroy()"></div> |
||||
<div class="toggler" (click)="node.toggle()"></div> |
||||
<div class="add" (click)="node.addChild()"></div> |
||||
</div> |
||||
<div class="tree-text tree-text-non-editable"> |
||||
<span>{{ node.displayName }}</span> |
||||
</div> |
||||
<div class="tree-text tree-text-editable"> |
||||
<span |
||||
contenteditable |
||||
[innerHtml]="node.displayName" |
||||
(blur)="onNodeBlur($event, node.guid)" |
||||
></span> |
||||
<span class="children-count"> ({{ node.childrenCount() }})</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="tree-children" |
||||
[style.transform]="childrenTransform" |
||||
*ngIf="node.isExpanded" |
||||
> |
||||
<div class="tree-elements-group"> |
||||
<tree-diagram-node |
||||
*ngFor="let child of node.children" |
||||
[nodeId]="child" |
||||
class="tree-node tree-child" |
||||
></tree-diagram-node> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,253 @@
|
||||
@mixin tree-button { |
||||
width: 20px; |
||||
height: 20px; |
||||
cursor: pointer; |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.toggler { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: -10px; |
||||
background: #2c4c63; |
||||
margin: 0 auto; |
||||
display: none; |
||||
z-index: 10; |
||||
@include tree-button; |
||||
} |
||||
|
||||
.children-count { |
||||
display: none; |
||||
} |
||||
|
||||
.tree-element-has-children { |
||||
> .tree-element-main { |
||||
.toggler { |
||||
display: block; |
||||
} |
||||
.rect { |
||||
} |
||||
.children-count { |
||||
display: inline; |
||||
} |
||||
} |
||||
> .tree-children { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
.rect { |
||||
position: relative; |
||||
background-color: #fafafa !important; |
||||
border: 1px solid #dadada; |
||||
box-sizing: border-box; |
||||
-webkit-print-color-adjust: exact; |
||||
cursor: default !important; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 15px; |
||||
border-radius: 2px; |
||||
} |
||||
|
||||
.tree-element-main { |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
&:hover { |
||||
.buttons { |
||||
display: block; |
||||
} |
||||
} |
||||
&.expanded { |
||||
.rect { |
||||
background-color: #bce5ff !important; |
||||
} |
||||
.toggler { |
||||
transform: rotateZ(-45deg); |
||||
background: #427396; |
||||
} |
||||
} |
||||
&.dragover { |
||||
.rect { |
||||
box-shadow: 0 0 5px #427396; |
||||
} |
||||
} |
||||
&.dragging { |
||||
.buttons { |
||||
display: none !important; |
||||
} |
||||
.tree-node:before { |
||||
display: none !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tree-element-container { |
||||
z-index: 100; |
||||
} |
||||
|
||||
.tree-children { |
||||
text-align: center; |
||||
display: inline-block; |
||||
position: relative; |
||||
white-space: nowrap; |
||||
perspective: 3000px; |
||||
perspective-origin: center bottom; |
||||
&:before { |
||||
content: ""; |
||||
width: calc(50% - 1px); |
||||
position: absolute; |
||||
height: 30px; |
||||
left: 0; |
||||
top: -45px; |
||||
border-right: 1px solid #dadada; |
||||
max-width: 100%; |
||||
max-height: 100%; |
||||
} |
||||
} |
||||
|
||||
.line-to { |
||||
position: absolute; |
||||
top: -30px; |
||||
border-top: 1px solid #dadada; |
||||
width: calc(100% + 30px); |
||||
display: none; |
||||
} |
||||
|
||||
.tree-node { |
||||
position: relative; |
||||
display: inline-block; |
||||
margin: 15px; |
||||
vertical-align: top; |
||||
&:before { |
||||
content: ""; |
||||
width: calc(50% - 1px); |
||||
position: absolute; |
||||
height: 30px; |
||||
left: 0; |
||||
top: -30px; |
||||
border-right: 1px solid #dadada; |
||||
} |
||||
&:only-of-type { |
||||
> .line-to { |
||||
display: none !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.buttons { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
display: none; |
||||
.delete { |
||||
@include tree-button; |
||||
background-color: #a34851; |
||||
position: absolute; |
||||
right: -10px; |
||||
top: -10px; |
||||
} |
||||
.add { |
||||
@include tree-button; |
||||
background-color: #256947; |
||||
position: absolute; |
||||
right: -10px; |
||||
bottom: -10px; |
||||
&:before { |
||||
content: ""; |
||||
position: absolute; |
||||
height: 12px; |
||||
width: 4px; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: auto; |
||||
background-color: #2ba423; |
||||
} |
||||
&:after { |
||||
content: ""; |
||||
position: absolute; |
||||
width: 12px; |
||||
height: 4px; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
margin: auto; |
||||
background-color: #2ba423; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tree-text { |
||||
z-index: 10; |
||||
white-space: pre-line; |
||||
span { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.tree-elements-group { |
||||
position: relative; |
||||
|
||||
& > .tree-node.tree-child { |
||||
& > .line-to { |
||||
left: 0; |
||||
display: block; |
||||
} |
||||
&:first-of-type { |
||||
& > .line-to { |
||||
right: -30px; |
||||
width: calc(50% + 30px); |
||||
display: block; |
||||
left: auto; |
||||
} |
||||
} |
||||
&:last-of-type { |
||||
& > .line-to { |
||||
left: 0; |
||||
right: auto; |
||||
width: 50%; |
||||
display: block; |
||||
} |
||||
} |
||||
> .tree-child:last-child { |
||||
margin-right: 0; |
||||
} |
||||
> .tree-child:first-child { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tree-text-non-editable { |
||||
display: none; |
||||
} |
||||
|
||||
.tree-new-node { |
||||
.rect { |
||||
opacity: 0.5; |
||||
border: 1px dashed #dadada; |
||||
cursor: pointer !important; |
||||
} |
||||
&:hover, |
||||
&.dragover { |
||||
.rect { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.tree-children, |
||||
.buttons { |
||||
display: none !important; |
||||
} |
||||
.tree-text-non-editable { |
||||
display: block; |
||||
} |
||||
.tree-text-editable { |
||||
display: none; |
||||
} |
||||
} |
||||
@ -0,0 +1,49 @@
|
||||
import { Component, Input } from '@angular/core'; |
||||
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
||||
import { NodesListService } from '../services/nodes-list.service'; |
||||
import { TreeDiagramNode } from '../classes/node.class'; |
||||
import { TreeDiagramNodeMaker } from '../classes/node-maker.class'; |
||||
|
||||
@Component({ |
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'tree-diagram-node', |
||||
styleUrls: ['./node.component.scss'], |
||||
templateUrl: './node.component.html' |
||||
}) |
||||
export class NodeComponent { |
||||
public node: TreeDiagramNode | TreeDiagramNodeMaker; |
||||
public childrenTransform; |
||||
private readonly isRtl: boolean; |
||||
|
||||
constructor( |
||||
private nodesSrv: NodesListService, |
||||
private sanitizer: DomSanitizer |
||||
) { |
||||
this.isRtl = document.getElementsByTagName('html')[0].getAttribute('dir') === 'rtl'; |
||||
} |
||||
|
||||
@Input() set nodeId(guid) { |
||||
this.node = this.nodesSrv.getNode(guid); |
||||
|
||||
let calculation = `translate(calc(-50% + ${Math.round( |
||||
this.node.width / 2 |
||||
)}px), 45px)`;
|
||||
|
||||
if (this.isRtl) { |
||||
calculation = `translate(calc(50% - ${Math.round( |
||||
this.node.width / 2 |
||||
)}px), 45px)`;
|
||||
} |
||||
|
||||
this.childrenTransform = this.sanitizer.bypassSecurityTrustStyle( |
||||
calculation |
||||
); |
||||
} |
||||
|
||||
onNodeBlur(event, nodeId) { |
||||
const node = this.nodesSrv.getNode(nodeId); |
||||
|
||||
node.displayName = event.target.innerText; |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@
|
||||
html[dir=rtl] .tree-elements-group > div > .line-to { |
||||
right: 0!important; |
||||
} |
||||
|
||||
html[dir=rtl] .tree-elements-group > div:first-of-type > .line-to { |
||||
left: -30px!important; |
||||
right: auto!important; |
||||
} |
||||
|
||||
html[dir=rtl] .tree-elements-group > div:last-of-type > .line-to { |
||||
right: 0!important; |
||||
left: auto; |
||||
} |
||||
@ -0,0 +1,29 @@
|
||||
import { Injectable } from '@angular/core'; |
||||
import { TreeDiagramNodesList } from '../classes'; |
||||
|
||||
@Injectable() |
||||
export class NodesListService { |
||||
private nodesList: TreeDiagramNodesList; |
||||
|
||||
public loadNodes(nodes: any[], config) { |
||||
this.nodesList = new TreeDiagramNodesList(nodes, config); |
||||
|
||||
return this.nodesList; |
||||
} |
||||
|
||||
public getNode(guid) { |
||||
return this.nodesList.getNode(guid); |
||||
} |
||||
|
||||
public newNode() { |
||||
this.nodesList.newNode(); |
||||
} |
||||
|
||||
public makerNode() { |
||||
return this.nodesList.makerGuid; |
||||
} |
||||
|
||||
public toJsonString() { |
||||
return JSON.stringify(this.nodesList.serialize()); |
||||
} |
||||
} |
||||
@ -0,0 +1,27 @@
|
||||
<div |
||||
class="tree-pane" |
||||
(mousedown)="onmousedown()" |
||||
(mouseup)="onmouseup()" |
||||
(mousemove)="onmousemove($event)" |
||||
(mousewheel)="onmousewheel($event)" |
||||
> |
||||
<div class="tree-paning-container" [style.transform]="paneTransform"> |
||||
<div *ngIf="nodes" class="tree-roots-elements"> |
||||
|
||||
<tree-diagram-node |
||||
[nodeId]="node.guid" |
||||
class="tree-root tree-node" |
||||
(mousedown)="preventMouse($event)" |
||||
*ngFor="let node of nodes.roots" |
||||
></tree-diagram-node> |
||||
|
||||
<tree-diagram-node |
||||
[nodeId]="nodeMaker" |
||||
(click)="newNode()" |
||||
(mousedown)="preventMouse($event)" |
||||
class="tree-root tree-new-node tree-node" |
||||
></tree-diagram-node> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,41 @@
|
||||
:host { |
||||
-webkit-print-color-adjust: exact; |
||||
position: relative; |
||||
display: block; |
||||
-webkit-touch-callout: none; |
||||
user-select: none; |
||||
overflow: hidden; |
||||
height: 100vh; |
||||
text-align: center; |
||||
} |
||||
|
||||
.tree-roots-elements { |
||||
position: relative; |
||||
text-align: center; |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
cursor: default !important; |
||||
font-size: 0; |
||||
transform-origin: center; |
||||
} |
||||
|
||||
.tree-node { |
||||
position: relative; |
||||
display: inline-block; |
||||
margin: 15px; |
||||
vertical-align: top; |
||||
&:only-of-type { |
||||
> .line-to { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tree-pane, |
||||
.tree-paning-container { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
} |
||||
@ -0,0 +1,95 @@
|
||||
import { Component, Input } from '@angular/core'; |
||||
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
||||
import { NodesListService } from './services/nodes-list.service'; |
||||
|
||||
@Component({ |
||||
// tslint:disable-next-line:component-selector
|
||||
selector: 'tree-diagram', |
||||
styleUrls: ['./tree.component.scss'], |
||||
templateUrl: './tree.component.html' |
||||
}) |
||||
export class TreeComponent { |
||||
public nodes; |
||||
private config = { |
||||
nodeWidth: 200, |
||||
nodeHeight: 100 |
||||
}; |
||||
private paneDragging = false; |
||||
private paneTransformState; |
||||
private zoom = 1; |
||||
private paneX = 0; |
||||
private paneY = 0; |
||||
|
||||
public get paneTransform() { |
||||
return this.paneTransformState; |
||||
} |
||||
|
||||
public set paneTransform(value) { |
||||
this.paneTransformState = value; |
||||
} |
||||
|
||||
constructor( |
||||
private nodesSrv: NodesListService, |
||||
private sanitizer: DomSanitizer |
||||
) {} |
||||
|
||||
@Input() set data(data: { config: any; json: any[] }) { |
||||
if (!data || !Array.isArray(data.json)) { |
||||
return; |
||||
} |
||||
|
||||
if (typeof data.config === 'object') { |
||||
this.config = Object.assign(this.config, data.config); |
||||
} |
||||
|
||||
this.nodes = this.nodesSrv.loadNodes(data.json, this.config); |
||||
} |
||||
|
||||
public get nodeMaker() { |
||||
return this.nodesSrv.makerNode(); |
||||
} |
||||
|
||||
public newNode() { |
||||
this.nodesSrv.newNode(); |
||||
} |
||||
|
||||
public onmousedown() { |
||||
this.paneDragging = true; |
||||
} |
||||
|
||||
public onmousemove(event) { |
||||
if (this.paneDragging) { |
||||
const { movementX, movementY } = event; |
||||
|
||||
this.paneX += movementX; |
||||
this.paneY += movementY; |
||||
this.makeTransform(); |
||||
} |
||||
} |
||||
|
||||
public onmouseup() { |
||||
this.paneDragging = false; |
||||
} |
||||
|
||||
public makeTransform() { |
||||
this.paneTransform = this.sanitizer.bypassSecurityTrustStyle( |
||||
`translate(${this.paneX}px, ${this.paneY}px) scale(${this.zoom})` |
||||
); |
||||
} |
||||
|
||||
public preventMouse(event) { |
||||
event.stopPropagation(); |
||||
} |
||||
|
||||
public onmousewheel(event) { |
||||
let delta; |
||||
|
||||
event.preventDefault(); |
||||
delta = event.detail || event.wheelDelta; |
||||
this.zoom += delta / 1000 / 2; |
||||
this.zoom = Math.min(Math.max(this.zoom, 0.2), 3); |
||||
|
||||
this.makeTransform(); |
||||
} |
||||
} |
||||
@ -0,0 +1,26 @@
|
||||
import { CommonModule } from '@angular/common'; |
||||
import { NgModule } from '@angular/core'; |
||||
|
||||
import { TreeComponent } from './tree.component'; |
||||
import { NodeComponent } from './node'; |
||||
import { NodesListService } from './services/nodes-list.service'; |
||||
|
||||
@NgModule({ |
||||
declarations: [ |
||||
TreeComponent, |
||||
NodeComponent |
||||
], |
||||
imports: [ |
||||
CommonModule |
||||
], |
||||
exports: [ |
||||
TreeComponent, |
||||
NodeComponent |
||||
], |
||||
providers: [ |
||||
NodesListService |
||||
] |
||||
}) |
||||
export class TreeDiagramModule { |
||||
|
||||
} |
||||
@ -0,0 +1,8 @@
|
||||
/* |
||||
* Public API Surface of ng-tree-diagram |
||||
*/ |
||||
|
||||
export * from './lib/tree.module'; |
||||
export * from './lib/services/nodes-list.service'; |
||||
export * from './lib/node'; |
||||
export * from './lib/classes'; |
||||
@ -0,0 +1,26 @@
|
||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/dist/zone'; |
||||
import 'zone.js/dist/zone-testing'; |
||||
import { getTestBed } from '@angular/core/testing'; |
||||
import { |
||||
BrowserDynamicTestingModule, |
||||
platformBrowserDynamicTesting |
||||
} from '@angular/platform-browser-dynamic/testing'; |
||||
|
||||
declare const require: { |
||||
context(path: string, deep?: boolean, filter?: RegExp): { |
||||
keys(): string[]; |
||||
<T>(id: string): T; |
||||
}; |
||||
}; |
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment( |
||||
BrowserDynamicTestingModule, |
||||
platformBrowserDynamicTesting() |
||||
); |
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/); |
||||
// And load the modules.
|
||||
context.keys().map(context); |
||||
@ -0,0 +1,23 @@
|
||||
{ |
||||
"extends": "../../tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../out-tsc/lib", |
||||
"target": "es2015", |
||||
"declaration": true, |
||||
"inlineSources": true, |
||||
"types": [], |
||||
"lib": [ |
||||
"dom", |
||||
"es2018" |
||||
] |
||||
}, |
||||
"angularCompilerOptions": { |
||||
"skipTemplateCodegen": true, |
||||
"strictMetadataEmit": true, |
||||
"enableResourceInlining": true |
||||
}, |
||||
"exclude": [ |
||||
"src/test.ts", |
||||
"**/*.spec.ts" |
||||
] |
||||
} |
||||
@ -0,0 +1,6 @@
|
||||
{ |
||||
"extends": "./tsconfig.lib.json", |
||||
"angularCompilerOptions": { |
||||
"enableIvy": false |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
{ |
||||
"extends": "../../tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../out-tsc/spec", |
||||
"types": [ |
||||
"jasmine", |
||||
"node" |
||||
] |
||||
}, |
||||
"files": [ |
||||
"src/test.ts" |
||||
], |
||||
"include": [ |
||||
"**/*.spec.ts", |
||||
"**/*.d.ts" |
||||
] |
||||
} |
||||
@ -0,0 +1,17 @@
|
||||
{ |
||||
"extends": "../../tslint.json", |
||||
"rules": { |
||||
"directive-selector": [ |
||||
true, |
||||
"attribute", |
||||
"lib", |
||||
"camelCase" |
||||
], |
||||
"component-selector": [ |
||||
true, |
||||
"element", |
||||
"lib", |
||||
"kebab-case" |
||||
] |
||||
} |
||||
} |
||||
Loading…
Reference in new issue