Merge pull request #349 from makimenko/vect-2

Vect 2

package.json

@@ -27,13 +27,12 @@
     "@angular/router": "^11.1.2",
     "core-js": "^3.8.3",
     "dagre": "^0.8.5",
-    "rxjs": "^6.6.3",
-    "snyk": "^1.445.0",
-    "three": "^0.124.0",
-    "three.meshline": "^1.3.0",
+    "rxjs": "^6.6.6",
+    "snyk": "^1.463.0",
+    "three": "^0.125.2",
     "uuid": "^8.3.2",
     "yaml": "^1.10.0",
-    "zone.js": "~0.11.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1100.7",

projects/atft/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atft",
-  "version": "1.4.4",
+  "version": "1.4.10",
   "description": "Ready-to-use Angular components for Three.js, see https://makimenko.github.io/angular-template-for-threejs/.",
   "keywords": [
     "threejs",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "@angular/common": "^11.1.2",
     "@angular/core": "^11.1.2",
-    "three": "^0.124.0"
+    "three": "^0.125.2"
   },
   "dependencies": {
     "tslib": "^2.0.0"

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

@@ -11,6 +11,7 @@ import {Subscription} from 'rxjs';
   providers: [provideParent(DagreCompositionComponent)],
   template: `
     <atft-plane-mesh *ngIf="border!='frame'" atft-raycaster-group [width]="width" [height]="height" [materialColor]="color"
+                     [depthWrite]="false"
                      (mouseEnter)="onSelected()"
                      (mouseExit)="onDeselected()">
       <atft-text-mesh [centered]="true" [text]="label" size="3" [translateY]="translateLabelY"
@@ -19,6 +20,7 @@ import {Subscription} from 'rxjs';
     </atft-plane-mesh>
 
     <atft-frame-mesh *ngIf="border=='frame'" [sizeX]="width" [sizeY]="height" [thickness]="2" [materialColor]="color"
+                     [depthWrite]="false"
                      atft-raycaster-group (mouseEnter)="onSelected()" (mouseExit)="onDeselected()">
       <atft-text-mesh [centered]="true" [text]="label" size="3" [translateY]="translateLabelY"
                       materialColor="0xE0E0E0">

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

@@ -1,48 +1,153 @@
-import {Component, Injector, Input, OnDestroy, OnInit, Optional, SkipSelf} from '@angular/core';
+import { Component, Injector, Input, OnDestroy, OnInit, Optional, SkipSelf } from '@angular/core';
 import * as dagre from 'dagre';
+import { Subscription } from 'rxjs';
 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 {Subscription} from 'rxjs';
+import { AnimationService } from '../../../animation';
+import { AbstractObject3D, LineConnectorComponent } from '../../../object';
+import { RendererService } from '../../../renderer';
+import { appliedColor, provideParent } from '../../../util';
+import { DagreLayoutComponent } from './dagre-layout.component';
+
+export enum LineEndType {
+  none = 'none',
+  circle = 'circle',
+  arrow = 'arrow'
+}
+
+export enum EdgeType {
+  sequence = 'sequence',
+  association = 'association',
+  message = 'message',
+  line = 'line'
+}
 
 @Component({
   selector: 'atft-dagre-edge',
   providers: [provideParent(DagreEdgeComponent)],
   template: '<ng-content></ng-content>'
 })
-export class DagreEdgeComponent extends MeshLineConnectorComponent implements OnInit, OnDestroy {
+export class DagreEdgeComponent extends LineConnectorComponent implements OnInit, OnDestroy {
 
-  @Input() animated = true;
   @Input() from: string;
   @Input() to: string;
+  @Input() startType: LineEndType = LineEndType.circle;
+  @Input() endType: LineEndType = LineEndType.arrow;
+
+  @Input()
+  set type(val: EdgeType) {
+    switch (val) {
+
+      case EdgeType.association:
+        this.animated = false;
+        this.solid = false;
+        this.startType = LineEndType.none;
+        this.endType = LineEndType.arrow;
+        break;
+
+      case EdgeType.message:
+        this.animated = true;
+        this.solid = false;
+        this.dashSize = 1;
+        this.startType = LineEndType.circle;
+        this.endType = LineEndType.arrow;
+        break;
+
+      case EdgeType.line:
+        this.animated = false;
+        this.solid = true;
+        this.startType = LineEndType.none;
+        this.endType = LineEndType.none;
+        break;
+
+      case EdgeType.sequence:
+        this.animated = false;
+        this.solid = true;
+        this.startType = LineEndType.none;
+        this.endType = LineEndType.arrow;
+        break;
+
+      default:
+        this.animated = true;
+        this.solid = false;
+        this.dashSize = 4;
+        this.startType = LineEndType.circle;
+        this.endType = LineEndType.arrow;
+    }
+  }
 
-  public positions: Array<number>;
+  protected lineStart: THREE.Mesh;
+  protected lineEnd: THREE.Mesh;
+  protected positions: Array<number>;
   protected dagreLayout: DagreLayoutComponent;
   protected graphUpdated: Subscription;
 
-
   constructor(
     protected rendererService: RendererService,
     @SkipSelf() @Optional() protected parent: AbstractObject3D<any>,
     protected animationService: AnimationService,
     protected injector: Injector
   ) {
     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 newObject3DInstance(): THREE.Object3D {
+    const lineObject = super.newObject3DInstance();
+
+    // console.log('DagreEdgeComponent.newObject3DInstance');
+    this.appendLineEnds(lineObject);
+    return lineObject;
+  }
+
+  protected appendLineEnds(lineObject: THREE.Object3D) {
+    // 1. Init Material
+    const material = new THREE.MeshBasicMaterial({ color: appliedColor(this.materialColor) });
+
+    // 2. Create start
+    const startGeometry = this.getConnectorEndGeometry(this.startType);
+    if (startGeometry) {
+      this.lineStart = new THREE.Mesh(startGeometry, material);
+      lineObject.add(this.lineStart);
+    }
+
+    // 3. Create end
+    const endGeometry = this.getConnectorEndGeometry(this.endType);
+    if (endGeometry) {
+      this.lineEnd = new THREE.Mesh(endGeometry, material);
+      lineObject.add(this.lineEnd);
+    }
+  }
+
+  protected getConnectorEndGeometry(type: string): THREE.BufferGeometry {
+    switch (type) {
+      case LineEndType.circle:
+        return new THREE.CircleGeometry(0.7, 16);
+        break;
+      case LineEndType.arrow:
+        const shape = new THREE.Shape();
+
+        shape.moveTo(0, 0);
+        shape.lineTo(1, 2);
+        shape.lineTo(0, 1.7);
+        shape.lineTo(-1, 2);
+
+        const geometry = new THREE.ShapeBufferGeometry(shape);
+
+        return geometry;
+        break;
+      default:
+        return undefined;
+    }
+
+  }
+
   protected getLineGeometry(): THREE.BufferGeometry {
+    // console.log('DagreEdgeComponent.getLineGeometry');
     if (this.source || this.target) {
       console.warn('DagreEdgeComponent.getLineGeometry source/target inputs ignored. Please use from/to instead');
     }
@@ -129,10 +234,42 @@ export class DagreEdgeComponent extends MeshLineConnectorComponent implements On
             this.positions.push(p.x, p.y, 0);
           }
         });
+        this.updateEnds(this.positions);
         this.updateLineGeometry();
       }
     });
   }
 
+  private updateEnds(positions: number[]) {
+    const p = this.positions;
+    if (p?.length >= 9) {
+      // Beginning / Start of the line
+      this.updateEnd(this.lineStart,
+        new THREE.Vector3(p[3], p[4], p[5]),
+        new THREE.Vector3(p[0], p[1], p[2])
+      );
+      // Target / End of the line
+      this.updateEnd(this.lineEnd,
+        new THREE.Vector3(p[p.length - 6], p[p.length - 5], p[p.length - 4]),
+        new THREE.Vector3(p[p.length - 3], p[p.length - 2], p[p.length - 1])
+      );
+    }
+
+  }
+
+  private updateEnd(lineSide: THREE.Mesh, prevPoint: THREE.Vector3, endPoint: THREE.Vector3) {
+    if (lineSide) {
+      const direction = prevPoint.clone().sub(endPoint);
+      let angle = direction.angleTo(new THREE.Vector3(0, 1, 0));
+      angle = prevPoint.x < endPoint.x ? angle : -angle;
+
+      lineSide.rotation.set(0, 0, angle);
+      lineSide.position.set(
+        endPoint.x || 0,
+        endPoint.y || 0,
+        endPoint.z || 0
+      );
+    }
+  }
 
 }

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

@@ -27,15 +27,14 @@ import {GraphModel} from './dagre-model';
 })
 export class DagreLayoutComponent extends AbstractEmptyDirective implements AfterViewInit, OnChanges, OnDestroy, AfterContentInit {
 
-  @Input() align = 'DR';
-  @Input() rankdir = 'TB';
+  @Input() align = 'DL';
+  @Input() rankdir = 'BT';
   @Input() nodesep = 15;
   @Input() edgesep = 1;
   @Input() ranksep = 15;
   @Input() marginx = 0;
   @Input() marginy = 0;
   @Input() ranker = 'network-simplex';
-  @Input() deepScan = false;
 
   @Input() centered = true;
 
@@ -100,7 +99,7 @@ export class DagreLayoutComponent extends AbstractEmptyDirective implements Afte
 
   public ngOnChanges(changes: SimpleChanges) {
     super.ngOnChanges(changes);
-    // console.log('AbstractObject3D.ngOnChanges', this.name);
+    // console.log('DagreLayoutComponent.ngOnChanges', this.name);
     if (!this.object) {
       return;
     }

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

@@ -18,6 +18,8 @@ export interface Composition extends BaseInfo {
 export interface Edge extends BaseInfo {
   from: string;
   to: string;
+  type?: string;
+  color?: number;
 }
 
 export interface GraphModel {

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

@@ -15,7 +15,7 @@ export class DagreNodeComponent extends AbstractEmptyDirective implements OnInit
 
   @Input() composition: string;
 
-  @Input() translateZ = 1;
+  @Input() translateZ = 0;
 
   @ViewChild('container', {read: ViewContainerRef, static: true}) container;
 
@@ -100,7 +100,7 @@ export class DagreNodeComponent extends AbstractEmptyDirective implements OnInit
   }
 
   protected syncGraph() {
-    // console.log('DagreNodeComponent.update');
+    // console.log('DagreNodeComponent.syncGraph');
     if (this.object) {
       this.syncGraphNodes(this.dagreLayout.getGraph());
     }

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

@@ -32,7 +32,7 @@ export class DagreUtils {
   public static updateBaseInfo(g: dagre.graphlib.Graph, baseInfo: Array<BaseInfo>) {
     if (baseInfo) {
       baseInfo.forEach((node: Node) => {
-        g.setNode(node.name, {label: node.label, width: 15, height: 15});
+        g.setNode(node.name, {label: node.label, width: 18, height: 18});
         if (node.composition) {
           g.setParent(node.name, node.composition);
         }

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

@@ -12,15 +12,15 @@ import {
   ViewChild,
   ViewContainerRef
 } from '@angular/core';
-import {AbstractEmptyDirective, AbstractObject3D} from '../../../object';
-import {RendererService} from '../../../renderer';
-import {provideParent} from '../../../util';
 import * as yaml from 'yaml';
-import {Composition, Edge, GraphModel, Node} from './dagre-model';
-import {ServerBarrelActorComponent, ServerCompactActorComponent, ServerIconActorComponent, ServerStandActorComponent} from '../server';
-import {DagreNodeComponent} from './dagre-node.component';
-import {DagreEdgeComponent} from './dagre-edge.component';
-import {DagreCompositionComponent} from './dagre-composition.component';
+import { AbstractEmptyDirective, AbstractObject3D } from '../../../object';
+import { RendererService } from '../../../renderer';
+import { provideParent } from '../../../util';
+import { ServerBarrelActorComponent, ServerCompactActorComponent, ServerIconActorComponent, ServerStandActorComponent } from '../server';
+import { DagreCompositionComponent } from './dagre-composition.component';
+import { DagreEdgeComponent } from './dagre-edge.component';
+import { Composition, Edge, GraphModel, Node } from './dagre-model';
+import { DagreNodeComponent } from './dagre-node.component';
 
 
 function onlyUnique(value, index, self) {
@@ -36,11 +36,10 @@ function onlyUnique(value, index, self) {
 export class DagreYamlParserComponent extends AbstractEmptyDirective implements OnChanges, AfterViewInit {
 
   @Input() yaml;
-  @Input() svgPattern = 'https://raw.githubusercontent.com/material-icons/material-icons/master/svg/?/baseline.svg';
 
   @Output() status = new EventEmitter<boolean>();
 
-  @ViewChild('container', {read: ViewContainerRef}) container;
+  @ViewChild('container', { read: ViewContainerRef }) container;
 
   private instances = [];
 
@@ -115,8 +114,7 @@ export class DagreYamlParserComponent extends AbstractEmptyDirective implements
     const serverRef = nodeRef.instance.container.createComponent(serverFactory);
     serverRef.instance.name = node.name;
     serverRef.instance.label = (node.label ? node.label : node.name);
-    serverRef.instance.svgPattern = this.svgPattern;
-    serverRef.instance.svgName = node.icon;
+    serverRef.instance.icon = node.icon;
     serverRef.instance.svgNoHoles = true;
 
     this.instances.push(serverRef);
@@ -129,6 +127,13 @@ export class DagreYamlParserComponent extends AbstractEmptyDirective implements
     const edgeRef = this.container.createComponent(factory);
     edgeRef.instance.from = edge.from;
     edgeRef.instance.to = edge.to;
+    if (edge.type) {
+      edgeRef.instance.type = edge.type;
+    }
+    if (edge.color) {
+      edgeRef.instance.materialColor = edge.color;
+    }
+
     this.instances.push(edgeRef);
   }