projects/atft/src/lib/actor/data-center/layout/dagre-composition.component.ts
OnInit
OnDestroy
| providers |
provideParent(DagreCompositionComponent)
|
| selector | atft-dagre-composition |
| template | |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
constructor(rendererService: RendererService, parent: AbstractObject3D<any>, injector: Injector, cdRef: ChangeDetectorRef)
|
|||||||||||||||
|
Parameters :
|
| border | |
Type : string
|
|
Default value : 'plane'
|
|
| composition | |
Type : string
|
|
| height | |
Type : number
|
|
| label | |
Type : string
|
|
| width | |
Type : number
|
|
| layer | |
Type : number
|
|
Default value : 0
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:42
|
|
| name | |
Type : string
|
|
Default value : uuidv4()
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:40
|
|
| rotateX | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:24
|
|
|
Rotation in Euler angles (radians) with order X, Y, Z. |
|
| rotateY | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:25
|
|
| rotateZ | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:26
|
|
| scaleX | |
Type : number
|
|
Default value : 1
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:36
|
|
| scaleY | |
Type : number
|
|
Default value : 1
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:37
|
|
| scaleZ | |
Type : number
|
|
Default value : 1
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:38
|
|
| translateX | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:31
|
|
|
Translate the geometry. This is typically done as a one time operation, and not during a loop. |
|
| translateY | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:32
|
|
| translateZ | |
Type : number
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:33
|
|
| deselected | |
Type : EventEmitter
|
|
| render | |
Type : EventEmitter
|
|
| selected | |
Type : EventEmitter
|
|
| changed | |
Type : EventEmitter
|
|
|
Inherited from
AbstractObject3D
|
|
|
Defined in
AbstractObject3D:44
|
|
| Protected addNode |
addNode()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:132
|
|
Returns :
void
|
| Public ngOnInit |
ngOnInit()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:106
|
|
Returns :
void
|
| Public onClick |
onClick()
|
|
Returns :
void
|
| Public onDeselected |
onDeselected()
|
|
Returns :
void
|
| Public onSelected |
onSelected()
|
|
Returns :
void
|
| Protected removeNode |
removeNode()
|
|
Returns :
void
|
| Protected syncGraph |
syncGraph()
|
|
Returns :
void
|
| Protected syncGraphNodes | ||||||
syncGraphNodes(g: dagre.graphlib.Graph)
|
||||||
|
Parameters :
Returns :
void
|
| Protected newObject3DInstance |
newObject3DInstance()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:8
|
|
Returns :
THREE.Object3D
|
| Public addChild | ||||||
addChild(object: AbstractObject3D<any>)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:143
|
||||||
|
Parameters :
Returns :
void
|
| Protected afterInit |
afterInit()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:156
|
|
Returns :
void
|
| Public applyRotation |
applyRotation()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:118
|
|
Returns :
void
|
| Public applyScale |
applyScale()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:135
|
|
Returns :
void
|
| Public applyTranslation |
applyTranslation()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:127
|
|
Returns :
void
|
| Public findByName | ||||||
findByName(name: string)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:185
|
||||||
|
Parameters :
Returns :
any
|
| Public getChildren |
getChildren()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:202
|
|
Returns :
Array<AbstractObject3D<any>>
|
| Public getObject |
getObject()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:175
|
|
Returns :
T
|
| Public ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:181
|
|
Returns :
void
|
| Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:57
|
||||||
|
Parameters :
Returns :
void
|
| Protected recursionByName | |||||||||
recursionByName(currentNode: AbstractObject3D<any>, name: string)
|
|||||||||
|
Inherited from
AbstractObject3D
|
|||||||||
|
Defined in
AbstractObject3D:192
|
|||||||||
|
Parameters :
Returns :
any
|
| Public removeChild | ||||||
removeChild(object: AbstractObject3D<any>)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:160
|
||||||
|
Parameters :
Returns :
void
|
| Public removeChildByName | ||||||
removeChildByName(name: string)
|
||||||
|
Inherited from
AbstractObject3D
|
||||||
|
Defined in
AbstractObject3D:206
|
||||||
|
Parameters :
Returns :
void
|
| Public updateParent |
updateParent()
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:111
|
|
Returns :
void
|
| Private _height |
Type : number
|
| Public color |
Type : string | number
|
Default value : '#A0A0A0'
|
| Protected dagreLayout |
Type : DagreLayoutComponent
|
| Protected graphUpdated |
Type : Subscription
|
| Public translateLabelY |
Type : number
|
Default value : 0
|
| Protected childlren |
Type : Array<AbstractObject3D<any>>
|
Default value : []
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:46
|
| Protected object |
Type : T
|
|
Inherited from
AbstractObject3D
|
|
Defined in
AbstractObject3D:48
|
| height | ||||||
getheight()
|
||||||
setheight(height: number)
|
||||||
|
Parameters :
Returns :
void
|
import {
ChangeDetectorRef,
Component,
EventEmitter,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
Output,
SkipSelf,
ViewRef
} from '@angular/core';
import * as dagre from 'dagre';
import {AbstractEmptyDirective, AbstractObject3D} from '../../../object';
import {RendererService} from '../../../renderer';
import {provideParent} from '../../../util';
import {DagreLayoutComponent} from './dagre-layout.component';
import {Subscription} from 'rxjs';
@Component({
selector: 'atft-dagre-composition',
providers: [provideParent(DagreCompositionComponent)],
template: `
<atft-plane-mesh *ngIf="border!=='frame'" atft-raycaster-group [width]="width" [height]="height" [materialColor]="color"
[depthWrite]="true"
(mouseEnter)="onSelected()"
(mouseExit)="onDeselected()">
<atft-text-mesh [centered]="true" [text]="label" [size]="3" [translateY]="translateLabelY"
materialColor="#E0E0E0">
</atft-text-mesh>
</atft-plane-mesh>
<atft-frame-mesh *ngIf="border==='frame'" [sizeX]="width" [sizeY]="height" [thickness]="2" [materialColor]="color"
[depthWrite]="true"
atft-raycaster-group (mouseEnter)="onSelected()" (mouseExit)="onDeselected()">
<atft-text-mesh [centered]="true" [text]="label" [size]="3" [translateY]="translateLabelY"
materialColor="#E0E0E0">
</atft-text-mesh>
</atft-frame-mesh>
`
})
export class DagreCompositionComponent extends AbstractEmptyDirective implements OnInit, OnDestroy {
@Input() label!: string;
@Input() border = 'plane';
private _height!: number;
@Input()
set height(height: number) {
this._height = height;
this.translateLabelY = this._height / 2 - 3;
if (!(this.cdRef as ViewRef).destroyed) {
this.cdRef.detectChanges()
}
}
get height(): number {
return this._height;
}
@Input() width!: number;
@Output() render = new EventEmitter<void>();
@Output() selected = new EventEmitter<void>();
@Output() deselected = new EventEmitter<void>();
@Input() composition!: string;
public color: string | number = '#A0A0A0';
public translateLabelY = 0;
protected dagreLayout: DagreLayoutComponent;
protected graphUpdated: Subscription;
constructor(
protected override rendererService: RendererService,
@SkipSelf() @Optional() protected override parent: AbstractObject3D<any>,
protected injector: Injector,
private cdRef: ChangeDetectorRef
) {
super(rendererService, parent);
this.dagreLayout = this.injector.get<DagreLayoutComponent>(DagreLayoutComponent);
if (!this.dagreLayout) {
console.warn('DagreCompositionComponent.constructor: atft-dagre-layout not found!');
}
this.syncGraph = this.syncGraph.bind(this);
this.graphUpdated = this.dagreLayout.updated.subscribe(this.syncGraph);
}
public onSelected() {
this.color = '#A4A4A4';
}
public onDeselected() {
this.color = '#A0A0A0';
}
public onClick() {
this.color = '#A0A0A0';
}
public override ngOnInit() {
super.ngOnInit();
this.addNode();
}
protected addNode() {
if (this.dagreLayout && this.dagreLayout.getGraphModel()) {
// console.log('DagreCompositionComponent.addNode', this.name);
// Register as layout children
this.dagreLayout.getChildren().push(this);
// Create Graph Node
this.dagreLayout.getGraphModel().nodes?.push({
name: this.name,
label: this.label,
composition: this.composition
});
// Update Graph Layout
this.dagreLayout.refreshLayout();
}
}
override ngOnDestroy() {
super.ngOnDestroy();
this.removeNode();
}
protected removeNode() {
if (this.dagreLayout && this.dagreLayout.getGraphModel()) {
// console.log('DagreCompositionComponent.removeNode', this.name);
// Unsubscribe from graph update events
this.graphUpdated?.unsubscribe();
// Remove from layout
this.dagreLayout.removeChildByName(this.name);
// Remove from model
this.dagreLayout.getGraphModel().nodes = this.dagreLayout.getGraphModel().nodes?.filter(i => i.name !== this.name);
// Update Graph Layout
this.dagreLayout.refreshLayout();
}
}
protected syncGraphNodes(g: dagre.graphlib.Graph) {
// console.log('DagreCompositionComponent.syncGraphNodes');
g.nodes().forEach((name) => {
// console.log('Node ' + name + ': ' + JSON.stringify(g.node(name)));
if (name === this.name) {
const node = g.node(name);
// console.log('DagreCompositionComponent.layout: Update position node', node);
this.translateX = node.x;
this.translateY = node.y;
this.applyTranslation();
this.width = node.width;
this.height = node.height;
}
});
}
protected syncGraph() {
// console.log('DagreCompositionComponent.update');
if (this.object) {
this.syncGraphNodes(this.dagreLayout.getGraph());
}
}
}