File

projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts

Extends

AbstractEmptyDirective

Implements

AfterViewInit OnChanges OnDestroy AfterContentInit

Metadata

providers	`provideParent(DagreLayoutComponent)`
selector	`atft-dagre-layout`
template	`<ng-content></ng-content>`

Index

Properties

Protected graph
Protected graphModel
Protected childlren
Protected object

Constructor

constructor(rendererService: RendererService, parent: AbstractObject3D<any>)

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:52

Parameters :

Name	Type	Optional
rendererService	`RendererService`	No
parent	`AbstractObject3D<any>`	No

Inputs

align
Type : `string`
Default value : `DEFAULT_ALIGN`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:38

centered
Type : `boolean`
Default value : `true`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:47

edgesep
Type : `number`
Default value : `DEFAULT_EDGESEP`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:41

marginx
Type : `number`
Default value : `DEFAULT_MARGIN`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:43

marginy
Type : `number`
Default value : `DEFAULT_MARGIN`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:44

nodesep
Type : `number`
Default value : `DEFAULT_SEP`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:40

rankdir
Type : `string`
Default value : `DEFAULT_RANKDIR`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:39

ranker
Type : `string`
Default value : `DEFAULT_RANKER`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:45

ranksep
Type : `number`
Default value : `DEFAULT_SEP`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:42

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`

Outputs

updated
Type : `EventEmitter`
Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:49

changed
Type : `EventEmitter`
Inherited from `AbstractObject3D`
Defined in `AbstractObject3D:44`

Methods

Public getGraph

getGraph()

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:150

Returns : dagre.graphlib.Graph

Public getGraphModel

getGraphModel()

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:140

Returns : GraphModel

Public layout

layout()

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:78

Returns : void

ngAfterContentInit

ngAfterContentInit()

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:73

Returns : void

ngAfterViewInit

ngAfterViewInit()

Inherited from AbstractObject3D

Defined in AbstractObject3D:68

Returns : void

Public ngOnChanges

ngOnChanges(changes: SimpleChanges)

Inherited from AbstractObject3D

Defined in AbstractObject3D:114

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

Public refreshLayout

refreshLayout()

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:144

Returns : void

Protected syncGraphContainer

syncGraphContainer(g: dagre.graphlib.Graph)

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:101

Parameters :

Name	Type	Optional
g	`dagre.graphlib.Graph`	No

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 :

Name	Type	Optional
object	`AbstractObject3D<any>`	No

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 :

Name	Type	Optional
name	`string`	No

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 ngOnDestroy

ngOnDestroy()

Inherited from AbstractObject3D

Defined in AbstractObject3D:86

Returns : void

Public ngOnInit

ngOnInit()

Inherited from AbstractObject3D

Defined in AbstractObject3D:97

Returns : void

Protected recursionByName

recursionByName(currentNode: AbstractObject3D<any>, name: string)

Inherited from AbstractObject3D

Defined in AbstractObject3D:192

Parameters :

Name	Type	Optional
currentNode	`AbstractObject3D<any>`	No
name	`string`	No

Returns : any

Public removeChild

removeChild(object: AbstractObject3D<any>)

Inherited from AbstractObject3D

Defined in AbstractObject3D:160

Parameters :

Name	Type	Optional
object	`AbstractObject3D<any>`	No

Returns : void

Public removeChildByName

removeChildByName(name: string)

Inherited from AbstractObject3D

Defined in AbstractObject3D:206

Parameters :

Name	Type	Optional
name	`string`	No

Returns : void

Public updateParent

updateParent()

Inherited from AbstractObject3D

Defined in AbstractObject3D:111

Returns : void

Properties

Protected graph

Type : dagre.graphlib.Graph

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:52

Protected graphModel

Type : GraphModel

Defined in projects/atft/src/lib/actor/data-center/layout/dagre-layout.component.ts:51

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

import {
  AfterContentInit,
  AfterViewInit,
  Component,
  EventEmitter,
  Input,
  OnChanges,
  OnDestroy,
  Optional,
  Output,
  SimpleChanges,
  SkipSelf
} from '@angular/core';
import * as dagre from 'dagre';
import {AbstractEmptyDirective, AbstractObject3D} from '../../../object';
import {RendererService} from '../../../renderer';
import {provideParent} from '../../../util';
import {DagreUtils} from './dagre-utils';
import {GraphModel} from './dagre-model';

const DEFAULT_ALIGN = 'DL';
const DEFAULT_RANKDIR = 'BT';
const DEFAULT_SEP = 15;
const DEFAULT_EDGESEP = 1;
const DEFAULT_NODESEP = 15;
const DEFAULT_RANKSEP = 15;
const DEFAULT_MARGIN = 0;
const DEFAULT_RANKER = 'network-simplex';

@Component({
  selector: 'atft-dagre-layout',
  providers: [provideParent(DagreLayoutComponent)],
  template: `
    <ng-content></ng-content>`
})
export class DagreLayoutComponent extends AbstractEmptyDirective implements AfterViewInit, OnChanges, OnDestroy, AfterContentInit {

  @Input() align = DEFAULT_ALIGN;
  @Input() rankdir = DEFAULT_RANKDIR;
  @Input() nodesep = DEFAULT_SEP;
  @Input() edgesep = DEFAULT_EDGESEP;
  @Input() ranksep = DEFAULT_SEP;
  @Input() marginx = DEFAULT_MARGIN;
  @Input() marginy = DEFAULT_MARGIN;
  @Input() ranker = DEFAULT_RANKER;

  @Input() centered = true;

  @Output() updated = new EventEmitter<void>();

  protected graphModel: GraphModel;
  protected graph!: dagre.graphlib.Graph;

  constructor(
    protected override rendererService: RendererService,
    @SkipSelf() @Optional() protected override parent: AbstractObject3D<any>
  ) {
    super(rendererService, parent);

    // Initialize empty model:
    this.graphModel = {
      layout: {},
      nodes: [],
      edges: []
    };
  }

  override ngAfterViewInit() {
    super.ngAfterViewInit();

  }

  ngAfterContentInit() {
    this.layout();
  }


  public layout() {
    // console.log('DagreLayoutComponent.layout');
    this.graphModel.layout = {
      align: this.align ?? DEFAULT_ALIGN,
      rankdir: this.rankdir ?? DEFAULT_RANKDIR,
      nodesep: this.nodesep ?? DEFAULT_NODESEP,
      edgesep: this.edgesep ?? DEFAULT_EDGESEP,
      ranksep: this.ranksep ?? DEFAULT_RANKSEP,
      marginx: this.marginx ?? DEFAULT_MARGIN,
      marginy: this.marginy ?? DEFAULT_MARGIN,
      ranker: this.ranker ?? DEFAULT_RANKER
    };
    this.graph = DagreUtils.modelToGraph(this.graphModel);
    // console.log('DagreLayoutComponent.layout: graphModel', this.graphModel);
    // console.log('DagreLayoutComponent.layout: graph', this.graph);
    // console.log('DagreLayoutComponent.layout: graph.nodes()', this.graph.nodes());
    if (this.graph) {
      this.syncGraphContainer(this.graph);
    }
    this.updated.emit();
    this.rendererService.render();
  }

  protected syncGraphContainer(g: dagre.graphlib.Graph) {
    // console.log('DagreLayoutComponent.syncGraphContainer');
    const heigh = g.graph().height;
    const width = g.graph().width;

    if (this.object && this.centered && width && heigh) {
      this.translateX = -(width / 2);
      this.translateY = -(heigh / 2);
      this.applyTranslation();
    }
  }


  public override ngOnChanges(changes: SimpleChanges) {
    super.ngOnChanges(changes);
    // console.log('DagreLayoutComponent.ngOnChanges', this.name);
    if (!this.object) {
      return;
    }
    let modified = false;

    if (['align', 'rankdir', 'ranksep', 'nodesep', 'edgesep', 'marginx', 'marginy', 'ranker'].some(propName => propName in changes)) {
      this.layout();
      modified = true;
    }

    if (modified) {
      this.changed.emit();
      // this.rendererService.render();
    }

  }

  // override ngOnDestroy() {
  //   super.ngOnDestroy();
  //   // this.graph = undefined;
  //   // this.graphModel = undefined;
  // }

  public getGraphModel() {
    return this.graphModel;
  }

  public refreshLayout() {
    if (this.graph) {
      this.layout();
    }
  }

  public getGraph() {
    return this.graph;
  }

}

Legend

Html element

Component

Html element with directive

File

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

results matching ""

No results matching ""