Merge pull request #342 from makimenko/editor

Atft fixes

package.json

@@ -32,6 +32,7 @@
     "three": "^0.124.0",
     "three.meshline": "^1.3.0",
     "uuid": "^8.3.2",
+    "yaml": "^1.10.0",
     "zone.js": "~0.11.3"
   },
   "devDependencies": {

projects/atft/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atft",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "Ready-to-use Angular components for Three.js, see https://makimenko.github.io/angular-template-for-threejs/.",
   "keywords": [
     "threejs",
@@ -33,9 +33,9 @@
     }
   ],
   "peerDependencies": {
-    "@angular/common": "^11.0.3",
-    "@angular/core": "^11.0.3",
-    "three": "^0.123.0"
+    "@angular/common": "^11.1.2",
+    "@angular/core": "^11.1.2",
+    "three": "^0.124.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

projects/atft/src/lib/actor/data-center/atft-data-center-actor.module.ts

@@ -8,7 +8,7 @@ import {ServerCompactActorComponent} from './server/server-compact-actor.compone
 import {ServerIconActorComponent} from './server/server-icon-actor.component';
 import {WorkstationActorComponent} from './server/workstation-actor.component';
 import {GridActorComponent} from './layer/grid-actor.component';
-import {DagreCompositionComponent, DagreEdgeComponent, DagreLayoutComponent, DagreNodeComponent} from './layout';
+import {DagreCompositionComponent, DagreEdgeComponent, DagreLayoutComponent, DagreNodeComponent, DagreYamlParserComponent} from './layout';
 
 @NgModule({
   imports: [
@@ -26,7 +26,8 @@ import {DagreCompositionComponent, DagreEdgeComponent, DagreLayoutComponent, Dag
     DagreLayoutComponent,
     DagreEdgeComponent,
     DagreCompositionComponent,
-    DagreNodeComponent
+    DagreNodeComponent,
+    DagreYamlParserComponent
   ],
   exports: [
     LayerActorComponent,
@@ -39,7 +40,8 @@ import {DagreCompositionComponent, DagreEdgeComponent, DagreLayoutComponent, Dag
     DagreLayoutComponent,
     DagreEdgeComponent,
     DagreCompositionComponent,
-    DagreNodeComponent
+    DagreNodeComponent,
+    DagreYamlParserComponent
   ]
 })
 export class AtftDataCenterActorModule {

projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {EmptyComponent} from '../../../object/helper';
 import {provideParent} from '../../../util';
-import {GridMeshComponent} from '../../../object';
+import { AbstractEmptyDirective, GridMeshComponent } from '../../../object';
 import * as THREE from 'three';
 import {RaycasterEmitEvent} from '../../../raycaster';
 
@@ -19,7 +19,7 @@ import {RaycasterEmitEvent} from '../../../raycaster';
     ></atft-grid-mesh>
   `
 })
-export class GridActorComponent extends EmptyComponent {
+export class GridActorComponent extends AbstractEmptyDirective {
 
   @ViewChild('grid', {static: true}) grid: GridMeshComponent;
 

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

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AbstractEmptyDirective } from '../../../object';
 import { EmptyComponent } from '../../../object/helper';
 import { provideParent } from '../../../util';
 
@@ -15,7 +16,7 @@ import { provideParent } from '../../../util';
     </atft-plane-mesh>
   `
 })
-export class LayerActorComponent extends EmptyComponent {
+export class LayerActorComponent extends AbstractEmptyDirective {
   @Input() label: string;
 
   @Input()

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

@@ -1,8 +1,10 @@
 import {Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Optional, Output, SkipSelf} from '@angular/core';
-import {provideParent} from '../../../util';
-import {AbstractObject3D, EmptyComponent} from '../../../object';
+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',
@@ -16,7 +18,7 @@ import {DagreLayoutComponent} from './dagre-layout.component';
     </atft-plane-mesh>
   `
 })
-export class DagreCompositionComponent extends EmptyComponent implements OnInit, OnDestroy {
+export class DagreCompositionComponent extends AbstractEmptyDirective implements OnInit, OnDestroy {
 
   @Input() label: string;
 
@@ -39,6 +41,7 @@ export class DagreCompositionComponent extends EmptyComponent implements OnInit,
   public color = 0xA0A0A0;
   public translateLabelY: number;
   protected dagreLayout: DagreLayoutComponent;
+  protected graphUpdated: Subscription;
 
   constructor(
     protected rendererService: RendererService,
@@ -51,6 +54,9 @@ export class DagreCompositionComponent extends EmptyComponent implements OnInit,
     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() {
@@ -65,12 +71,11 @@ export class DagreCompositionComponent extends EmptyComponent implements OnInit,
     this.color = 0xA0A0A0;
   }
 
-  ngOnInit() {
+  public ngOnInit() {
     super.ngOnInit();
     this.addNode();
   }
 
-
   protected addNode() {
     if (this.dagreLayout && this.dagreLayout.getGraphModel()) {
       // console.log('DagreCompositionComponent.addNode', this.name);
@@ -99,6 +104,9 @@ export class DagreCompositionComponent extends EmptyComponent implements OnInit,
     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);
 
@@ -110,4 +118,28 @@ export class DagreCompositionComponent extends EmptyComponent implements OnInit,
     }
   }
 
+  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');
+    this.syncGraphNodes(this.dagreLayout.getGraph());
+  }
+
+
 }

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

@@ -1,10 +1,12 @@
 import {Component, Injector, Input, OnDestroy, OnInit, Optional, SkipSelf} from '@angular/core';
-import {AbstractObject3D, MeshLineConnectorComponent} from '../../../object';
-import {provideParent} from '../../../util';
+import * as dagre from 'dagre';
 import * as THREE from 'three';
+import {AnimationService} from '../../../animation';
+import {AbstractObject3D, MeshLineConnectorComponent} from '../../../object';
 import {RendererService} from '../../../renderer';
+import {provideParent} from '../../../util';
 import {DagreLayoutComponent} from './dagre-layout.component';
-import {AnimationService} from '../../../animation';
+import {Subscription} from 'rxjs';
 
 @Component({
   selector: 'atft-dagre-edge',
@@ -19,6 +21,7 @@ export class DagreEdgeComponent extends MeshLineConnectorComponent implements On
 
   public positions: Array<number>;
   protected dagreLayout: DagreLayoutComponent;
+  protected graphUpdated: Subscription;
 
 
   constructor(
@@ -30,11 +33,14 @@ export class DagreEdgeComponent extends MeshLineConnectorComponent implements On
     super(rendererService, parent, animationService);
 
     this.dagreLayout = this.injector.get<DagreLayoutComponent>(DagreLayoutComponent);
+
     if (!this.dagreLayout) {
       console.warn('DagreEdgeComponent.constructor: atft-dagre-layout not found!');
     }
-  }
 
+    this.syncGraph = this.syncGraph.bind(this);
+    this.graphUpdated = this.dagreLayout.updated.subscribe(this.syncGraph);
+  }
 
   protected getLineGeometry(): THREE.BufferGeometry {
     if (this.source || this.target) {
@@ -88,6 +94,9 @@ export class DagreEdgeComponent extends MeshLineConnectorComponent implements On
     if (this.dagreLayout && this.dagreLayout.getGraphModel()) {
       // console.log('DagreNodeComponent.removeNode', this.name);
 
+      // Unsubscribe from graph update events
+      this.graphUpdated?.unsubscribe();
+
       // Remove from layout
       this.dagreLayout.removeChildByName(this.name);
 
@@ -99,5 +108,29 @@ export class DagreEdgeComponent extends MeshLineConnectorComponent implements On
     }
   }
 
+  protected syncGraph() {
+    // console.log('DagreEdgeComponent.update');
+    this.syncGraphEdges(this.dagreLayout.getGraph());
+  }
+
+  protected syncGraphEdges(g: dagre.graphlib.Graph) {
+    // console.log('DagreEdgeComponent.syncGraphEdges');
+    g.edges().forEach((e) => {
+      const edge: dagre.GraphEdge = g.edge(e);
+      // console.log('DagreEdgeComponent.syncGraphEdges: edge', edge);
+      if (edge.name === this.name) {
+        this.positions = [];
+        // console.log('DagreEdgeComponent.syncGraphEdges: edge.points', edge.points);
+        edge.points.forEach(p => {
+          if (!Number.isNaN(p.x) && !Number.isNaN(p.y)) {
+            // console.log('x=' + p.x + ', y=' + p.y);
+            this.positions.push(p.x, p.y, 0);
+          }
+        });
+        this.updateLineGeometry();
+      }
+    });
+  }
+
 
 }