feat(controls): add controls and testing out generator

packages/controls/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "ngt",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ngt",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

packages/controls/README.md

@@ -0,0 +1,7 @@
+# controls
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test controls` to execute the unit tests.

packages/controls/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  displayName: 'controls',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/packages/controls',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

packages/controls/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/controls",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "umdModuleIds": {
+      "three": "three"
+    }
+  }
+}

packages/controls/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@angular-three/controls",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

packages/controls/project.json

@@ -0,0 +1,42 @@
+{
+  "projectType": "library",
+  "root": "packages/controls",
+  "sourceRoot": "packages/controls/src",
+  "prefix": "ngt",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/angular:package",
+      "outputs": ["dist/packages/controls"],
+      "options": {
+        "project": "packages/controls/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/controls/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/controls/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/packages/controls"],
+      "options": {
+        "jestConfig": "packages/controls/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": [
+          "packages/controls/src/**/*.ts",
+          "packages/controls/src/**/*.html"
+        ]
+      }
+    }
+  },
+  "tags": ["scope:controls", "type:library"]
+}

packages/controls/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/controls';

packages/controls/src/lib/controls.ts

@@ -0,0 +1,77 @@
+import {
+  AnimationStore,
+  CanvasStore,
+  DestroyedService,
+  NgtAnimationParticipant,
+  NgtCamera,
+  UnknownRecord,
+} from '@angular-three/core';
+import {
+  Directive,
+  EventEmitter,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+  SkipSelf,
+} from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import * as THREE from 'three';
+
+@Directive()
+export abstract class NgtControls<TControls = unknown>
+  extends NgtAnimationParticipant<TControls>
+  implements OnInit, OnDestroy
+{
+  @Output() ready = new EventEmitter<TControls>();
+
+  constructor(
+    ngZone: NgZone,
+    @SkipSelf() protected canvasStore: CanvasStore,
+    @SkipSelf() animationStore: AnimationStore,
+    protected destroyed: DestroyedService
+  ) {
+    super(animationStore, ngZone);
+  }
+
+  private _controls?: TControls;
+
+  ngOnInit() {
+    this.ngZone.runOutsideAngular(() => {
+      this.canvasStore.selectors.internal$
+        .pipe(takeUntil(this.destroyed))
+        .subscribe(({ active }) => {
+          this.ngZone.runOutsideAngular(() => {
+            const { camera, renderer, scene } =
+              this.canvasStore.getImperativeState();
+            if (active && camera && renderer && scene) {
+              this._controls = this.initControls(camera, renderer, scene);
+              if (this.controls) {
+                this.ready.emit(this.controls);
+                this.participate(this.controls);
+              }
+            }
+          });
+        });
+    });
+  }
+
+  get controls(): TControls | undefined {
+    return this._controls;
+  }
+
+  abstract initControls(
+    camera: NgtCamera,
+    renderer: THREE.WebGLRenderer,
+    scene: THREE.Scene
+  ): TControls;
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.ngZone.runOutsideAngular(() => {
+      if (this.controls && (this.controls as UnknownRecord).dispose) {
+        ((this.controls as UnknownRecord).dispose as () => void)();
+      }
+    });
+  }
+}

packages/controls/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

packages/controls/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.lib.prod.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

packages/controls/tsconfig.lib.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"],
+  "include": ["**/*.ts"]
+}

packages/controls/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

packages/controls/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}

packages/core/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@angular-three/core",
   "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "@angular/common": "^12.2.0",
     "@angular/core": "^12.2.0",

packages/core/project.json

@@ -54,5 +54,5 @@
       }
     }
   },
-  "tags": ["scope:core", "type:library", "context:core"]
+  "tags": ["scope:core", "type:library"]
 }

tools/generators/three/entities/attributes.ts

@@ -0,0 +1,20 @@
+import * as THREE from 'three';
+import type { EntityCollection } from '../models/entity-collection.model';
+
+export const attributes: EntityCollection = {
+  core: [
+    THREE.BufferAttribute,
+    THREE.InstancedBufferAttribute,
+    THREE.InterleavedBufferAttribute,
+    THREE.Float16BufferAttribute,
+    THREE.Float32BufferAttribute,
+    THREE.Float64BufferAttribute,
+    THREE.Int8BufferAttribute,
+    THREE.Int16BufferAttribute,
+    THREE.Int32BufferAttribute,
+    THREE.Uint8BufferAttribute,
+    THREE.Uint16BufferAttribute,
+    THREE.Uint32BufferAttribute,
+    THREE.Uint8ClampedBufferAttribute,
+  ].map((m) => m.name),
+};

tools/generators/three/entities/cameras.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three';
+import type { EntityCollection } from '../models/entity-collection.model';
+
+export const cameras: EntityCollection = {
+  core: [
+    THREE.Camera,
+    THREE.PerspectiveCamera,
+    THREE.OrthographicCamera,
+    THREE.ArrayCamera,
+    THREE.StereoCamera,
+  ].map((m) => m.name),
+};