Merge pull request #368 from alexx855/fix-three-types

fix-three-types

.gitignore

@@ -42,3 +42,5 @@ Thumbs.db
 
 # Other
 /.nyc_output
+
+/storybook-static

README.md

@@ -15,11 +15,11 @@ Leverage [Three.js](https://threejs.org) in your Angular app using simple compon
   <atft-renderer-canvas>
     <atft-perspective-camera
       [fov]=60 [near]=1 [far]=1100
-      positionX=20 positionY=50 positionZ=50>
+      positionX=20 [positionY]=50 [positionZ]=50>
     </atft-perspective-camera>
     <atft-scene>
-      <atft-axes-helper size=200></atft-axes-helper>
-      <atft-grid-helper size=100 divisions=10></atft-grid-helper>
+      <atft-axes-helper [size]=200></atft-axes-helper>
+      <atft-grid-helper [size]=100 [divisions]=10></atft-grid-helper>
     </atft-scene>
   </atft-renderer-canvas>
 </atft-orbit-controls>
@@ -45,7 +45,7 @@ Click below to see the demo in a web browser:<br>
 ## Usage in your Angular project
 
 1. Set up an Angular project and install dependencies:  
-   `npm i three three.meshline atft --save`
+   `npm i three dagre atft --save`
 2. Import library into your module:
    ```typescript
    import { AtftModule } from 'atft';
@@ -62,11 +62,11 @@ Click below to see the demo in a web browser:<br>
       <atft-renderer-canvas #mainRenderer>
         <atft-perspective-camera
           [fov]=60 [near]=1 [far]=1100
-          positionX=20 positionY=50 positionZ=50>
+          [positionX]=20 [positionY]=50 [positionZ]=50>
         </atft-perspective-camera>
         <atft-scene>
-          <atft-axes-helper size=200></atft-axes-helper>
-          <atft-grid-helper size=100 divisions=10></atft-grid-helper>
+          <atft-axes-helper [size]=200></atft-axes-helper>
+          <atft-grid-helper [size]=100 [divisions]=10></atft-grid-helper>
         </atft-scene>
       </atft-renderer-canvas>
     </atft-orbit-controls>

angular.json

@@ -32,7 +32,11 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "dagre",
+              "yaml"
+            ]
           },
           "configurations": {
             "production": {

ngcc.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    packages: {
+        'atft': {
+            ignorableDeepImportMatchers: [
+                /three\//,
+            ]
+        },
+    },
+};

package.json

@@ -51,6 +51,7 @@
     "@types/jasmine": "^3.6.3",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^13.13.41",
+    "@types/three": "^0.127.1",
     "@types/webgl2": "0.0.6",
     "babel-loader": "^8.2.2",
     "codecov": "^3.8.1",

projects/atft/README.md

@@ -1,5 +1,5 @@
 [![GitHub repo](https://img.shields.io/github/stars/makimenko/angular-template-for-threejs?label=GitHub&style=social)](https://github.com/makimenko/angular-template-for-threejs) 
-[![CI build status](https://github.com/makimenko/angular-template-for-threejs/workflows/CI/badge.svg?branch=master)](https://github.com/makimenko/angular-template-for-threejs/actions?query=workflow%3ACI+branch%3Amaster)
+![CI build status](https://github.com/makimenko/angular-template-for-threejs/workflows/CI/badge.svg)
 [![Known Vulnerabilities](https://snyk.io/test/github/makimenko/angular-template-for-threejs/badge.svg)](https://snyk.io/test/github/makimenko/angular-template-for-threejs)
 [![Code coverage by codecov.io](https://codecov.io/gh/makimenko/angular-template-for-threejs/branch/master/graph/badge.svg)](https://codecov.io/gh/makimenko/angular-template-for-threejs)
 [![npm version](https://badge.fury.io/js/atft.svg)](https://badge.fury.io/js/atft)
@@ -15,11 +15,11 @@ Leverage [Three.js](https://threejs.org) in your Angular app using simple compon
   <atft-renderer-canvas>
     <atft-perspective-camera
       [fov]=60 [near]=1 [far]=1100
-      positionX=20 positionY=50 positionZ=50>
+      positionX=20 [positionY]=50 [positionZ]=50>
     </atft-perspective-camera>
     <atft-scene>
-      <atft-axes-helper size=200></atft-axes-helper>
-      <atft-grid-helper size=100 divisions=10></atft-grid-helper>
+      <atft-axes-helper [size]=200></atft-axes-helper>
+      <atft-grid-helper [size]=100 [divisions]=10></atft-grid-helper>
     </atft-scene>
   </atft-renderer-canvas>
 </atft-orbit-controls>
@@ -45,7 +45,7 @@ Click below to see the demo in a web browser:<br>
 ## Usage in your Angular project
 
 1. Set up an Angular project and install dependencies:  
-   `npm i three three.meshline atft --save`
+   `npm i three dagre atft --save`
 2. Import library into your module:
    ```typescript
    import { AtftModule } from 'atft';
@@ -62,11 +62,11 @@ Click below to see the demo in a web browser:<br>
       <atft-renderer-canvas #mainRenderer>
         <atft-perspective-camera
           [fov]=60 [near]=1 [far]=1100
-          positionX=20 positionY=50 positionZ=50>
+          [positionX]=20 [positionY]=50 [positionZ]=50>
         </atft-perspective-camera>
         <atft-scene>
-          <atft-axes-helper size=200></atft-axes-helper>
-          <atft-grid-helper size=100 divisions=10></atft-grid-helper>
+          <atft-axes-helper [size]=200></atft-axes-helper>
+          <atft-grid-helper [size]=100 [divisions]=10></atft-grid-helper>
         </atft-scene>
       </atft-renderer-canvas>
     </atft-orbit-controls>
@@ -97,10 +97,28 @@ Sample [vect](https://github.com/makimenko/vect) project, which is based on atft
 
 ## Development
 
-See development related information on Git Hub repo:  
-<https://github.com/makimenko/angular-template-for-threejs>
+### Build Library
 
-## Contributors
+1. `git clone https://github.com/makimenko/angular-template-for-threejs.git`
+2. `npm install`
+3. `ng build atft`<br>
+
+### Run Tests
+
+- `npm test`
+
+### Run Storybook
+
+Run and watch locally: `npm run storybook`
+
+Our storybook config is in [`./storybook`](./.storybook) and our stories in [`./src/stories`](./src/stories).
+See the official [Storybook.js documentation](https://storybook.js.org) for more information.
+
+### API Documentation
+
+For mode details see [API documentation](https://makimenko.github.io/angular-template-for-threejs)
+
+### Contributors
 
 - [<img src="https://avatars0.githubusercontent.com/u/1827709?s=20"> ComFreek](https://github.com/ComFreek)
 - [<img src="https://avatars1.githubusercontent.com/u/11466819?s=20"> makimenko](https://github.com/makimenko)

projects/atft/ng-package.json

@@ -2,6 +2,29 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/atft",
   "lib": {
-    "entryFile": "src/public_api.ts"
+    "entryFile": "src/public_api.ts", 
+    "umdModuleIds": {
+      "yaml": "yaml",
+      "dagre": "dagre",
+      "uuid": "uuid",
+      "three": "THREE",
+      "three/examples/jsm/libs/stats.module.js": "Stats",
+      "three/examples/jsm/lines/Line2": "Line2",
+      "three/examples/jsm/lines/LineGeometry": "LineGeometry",
+      "three/examples/jsm/lines/LineMaterial": "LineMaterial",
+      "three/examples/jsm/loaders/MTLLoader": "MTLLoader",
+      "three/examples/jsm/loaders/OBJLoader": "OBJLoader",
+      "three/examples/jsm/controls/OrbitControls": "OrbitControls",
+      "three/examples/jsm/postprocessing/RenderPass": "RenderPass",
+      "three/examples/jsm/postprocessing/UnrealBloomPass": "UnrealBloomPass",
+      "three/examples/jsm/postprocessing/EffectComposer": "EffectComposer",
+      "three/examples/jsm/postprocessing/ShaderPass": "ShaderPass",
+      "three/examples/jsm/postprocessing/SMAAPass": "SMAAPass",
+      "three/examples/jsm/shaders/FXAAShader": "FXAAShader",
+      "three/examples/jsm/postprocessing/BokehPass": "BokehPass",
+      "three/examples/jsm/shaders/DotScreenShader": "DotScreenShader",
+      "three/examples/jsm/shaders/VerticalBlurShader": "VerticalBlurShader",
+      "three/examples/jsm/shaders/HorizontalBlurShader": "HorizontalBlurShader"
+    }
   }
 }

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

@@ -34,7 +34,7 @@ export class GridActorComponent extends AbstractEmptyDirective {
   @Output() gridClick = new EventEmitter<THREE.BufferAttribute>();
 
 
-  color = 0xA0A0A0;
+  color: string | number = '#A0A0A0';
 
   translateLabelX: number;
 

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

@@ -10,8 +10,8 @@ import { provideParent } from '../../../util';
   template: `
     <atft-plane-mesh atft-raycaster-group [width]="width" [height]="height" [materialColor]="color" (mouseEnter)="onSelected()"
                      (mouseExit)="onDeselected()">
-      <atft-text-mesh [centered]="true" [text]="label" size="5" [translateX]="translateLabelX" [rotateZ]="(90 | deg2rad)"
-                      materialColor="0xE0E0E0">
+      <atft-text-mesh [centered]="true" [text]="label" [size]="5" [translateX]="translateLabelX" [rotateZ]="(90 | deg2rad)"
+                      materialColor="#E0E0E0">
       </atft-text-mesh>
     </atft-plane-mesh>
   `
@@ -37,20 +37,20 @@ export class LayerActorComponent extends AbstractEmptyDirective {
   @Output() selected = new EventEmitter<void>();
   @Output() deselected = new EventEmitter<void>();
 
-  color = 0xA0A0A0;
+  color: string | number = '#A0A0A0';
 
   translateLabelX: number;
 
   public onSelected() {
-    this.color = 0xA4A4A4;
+    this.color = '#A4A4A4';
   }
 
   public onDeselected() {
-    this.color = 0xA0A0A0;
+    this.color = '#A0A0A0';
   }
 
   public onClick() {
-    this.color = 0xA0A0A0;
+    this.color = '#A0A0A0';
   }
 
 }

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

@@ -14,16 +14,16 @@ import {Subscription} from 'rxjs';
                      [depthWrite]="true"
                      (mouseEnter)="onSelected()"
                      (mouseExit)="onDeselected()">
-      <atft-text-mesh [centered]="true" [text]="label" size="3" [translateY]="translateLabelY"
-                      materialColor="0xE0E0E0">
+      <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="0xE0E0E0">
+      <atft-text-mesh [centered]="true" [text]="label" [size]="3" [translateY]="translateLabelY"
+                      materialColor="#E0E0E0">
       </atft-text-mesh>
     </atft-frame-mesh>
 
@@ -56,7 +56,7 @@ export class DagreCompositionComponent extends AbstractEmptyDirective implements
 
   @Input() composition: string;
 
-  public color = 0xA0A0A0;
+  public color: string | number = '#A0A0A0';
   public translateLabelY: number;
   protected dagreLayout: DagreLayoutComponent;
   protected graphUpdated: Subscription;
@@ -79,15 +79,15 @@ export class DagreCompositionComponent extends AbstractEmptyDirective implements
   }
 
   public onSelected() {
-    this.color = 0xA4A4A4;
+    this.color = '#A4A4A4';
   }
 
   public onDeselected() {
-    this.color = 0xA0A0A0;
+    this.color = '#A0A0A0';
   }
 
   public onClick() {
-    this.color = 0xA0A0A0;
+    this.color = '#A0A0A0';
   }
 
   public ngOnInit() {

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

@@ -5,7 +5,7 @@ import * as THREE from 'three';
 import {AnimationService} from '../../../animation';
 import {AbstractObject3D, LineConnectorComponent} from '../../../object';
 import {RendererService} from '../../../renderer';
-import {appliedColor, provideParent} from '../../../util';
+import {provideParent} from '../../../util';
 import {DagreLayoutComponent} from './dagre-layout.component';
 
 export enum LineEndType {
@@ -106,7 +106,7 @@ export class DagreEdgeComponent extends LineConnectorComponent implements OnInit
   protected appendLineEnds(lineObject: THREE.Object3D) {
     // 1. Init Material
     const material = new THREE.MeshBasicMaterial({
-      color: appliedColor(this.materialColor),
+      color: this.materialColor,
       opacity: this.opacity,
       transparent: this.opacity < 1,
       depthWrite: true
@@ -127,7 +127,7 @@ export class DagreEdgeComponent extends LineConnectorComponent implements OnInit
     }
   }
 
-  protected getConnectorEndGeometry(type: string): THREE.BufferGeometry | THREE.Geometry {
+  protected getConnectorEndGeometry(type: string): THREE.BufferGeometry {
     switch (type) {
       case LineEndType.circle:
         return new THREE.CircleGeometry(0.7, 16);

projects/atft/src/lib/actor/data-center/server/abstract-server-actor.ts

@@ -22,24 +22,24 @@ export abstract class AbstractServerActor extends AbstractEmptyDirective {
   @Input()
   icon: string;
 
-  color = 0xffffff;
+  color: string | number = '#ffffff';
 
   @Input()
   showFrame = true;
 
   public onSelected() {
     // console.log('ServerActorComponent.onSelected');
-    this.color = 0xfff0f0;
+    this.color = '#fff0f0';
   }
 
   public onDeselected() {
     // console.log('ServerActorComponent.onDeselected');
-    this.color = 0xffffff;
+    this.color = '#ffffff';
   }
 
   public onClick() {
     console.log('ServerActorComponent.onClick');
-    this.color = 0xffa0a0;
+    this.color = '#ffa0a0';
     this.actorClick.emit();
   }
 

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

@@ -15,8 +15,8 @@ import {RendererService} from '../../../renderer';
         </atft-obj-loader>
       </atft-empty>
 
-      <atft-text-mesh [text]="label" [size]="2" [bevelEnabled]="false" height="0" [centered]="true"
-                      material="basic" materialColor="0xDADADA" [translateY]="-11" [translateZ]="0.2">
+      <atft-text-mesh [text]="label" [size]="2" [bevelEnabled]="false" [height]="0" [centered]="true"
+                      material="basic" materialColor="#DADADA" [translateY]="-11" [translateZ]="0.2">
       </atft-text-mesh>
       <atft-frame-mesh *ngIf="showFrame" [thickness]="1" [sizeX]="15" [sizeY]="15" [translateZ]="0.1" material="basic"
                        [materialColor]="color">

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

@@ -10,17 +10,17 @@ import { AbstractServerActor } from './abstract-server-actor';
 
       <!-- TODO: template? -->
       <atft-empty atft-raycaster-group (mouseEnter)="onSelected()" (mouseExit)="onDeselected()" (click)="onClick()">
-        <atft-svg-loader *ngIf="icon" [icon]="icon" overrideMaterialColor="0xffffff"
-                         material="basic" maxX="6" maxY="6" translateZ="13.1" [rotateZ]="(180 | deg2rad)" [rotateY]="(180 | deg2rad)">
+        <atft-svg-loader *ngIf="icon" [icon]="icon" overrideMaterialColor="#ffffff"
+                         material="basic" [maxX]="6" [maxY]="6" [translateZ]="13.1" [rotateZ]="(180 | deg2rad)" [rotateY]="(180 | deg2rad)">
         </atft-svg-loader>
 
         <atft-cylinder-mesh *ngFor="let z of [2, 6.5, 11]"
-                            height="4" radiusTop="6" radiusBottom="6" [radialSegments]="30" [openEnded]="false"
+                            [height]="4" [radiusTop]="6" [radiusBottom]="6" [radialSegments]="30" [openEnded]="false"
                             material="phong" [materialColor]="color" [translateZ]="z" [rotateX]="(90 | deg2rad)">
         </atft-cylinder-mesh>
       </atft-empty>
 
-      <atft-text-mesh [text]="label" [size]="2" [bevelEnabled]="false" height="0" [centered]="true"
+      <atft-text-mesh [text]="label" [size]="2" [bevelEnabled]="false" [height]="0" [centered]="true"
                       [material]="'basic'" [materialColor]="'0xDADADA'" [translateY]="-11" [translateZ]="0.2">
       </atft-text-mesh>
       <atft-frame-mesh *ngIf="showFrame" [thickness]="1" [sizeX]="15" [sizeY]="15" [translateZ]="0.1" material="basic"