@colijnit/configurator 1.0.20 → 1.0.21

package/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "whitelistedNonPeerDependencies": [
+    "."
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/configurator",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "iOne configurator",
   "license": "UNLICENSED",
   "private": false,
@@ -9,6 +9,26 @@
     "npm": "^7.*"
   },
   "repository": "npm/npm",
+  "scripts": {
+    "build": "ng build",
+    "ng": "ng",
+    "start": "ng serve --port=4600",
+    "package": "npm run build && ng-packagr -p ng-package.json",
+    "postPackage": "node-sass src/style -o dist/css"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "verbose": true,
+    "roots": [
+      "<rootDir>/src"
+    ],
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
+    },
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules/jsencrypt"
+    ]
+  },
   "dependencies": {
     "@angular/animations": "^9.1.13",
     "@angular/cdk": "^9.2.4",
@@ -20,8 +40,8 @@
     "@angular/forms": "^9.1.13",
     "@angular/platform-browser": "~9.1.13",
     "@angular/platform-browser-dynamic": "~9.1.13",
-    "@colijnit/configuratorapi": "1.0.19",
-    "@colijnit/ioneconnector": "3.1.23",
+    "@colijnit/configuratorapi": "1.0.20",
+    "@colijnit/ioneconnector": "3.1.24",
     "axios": "0.21.1",
     "core-js": "^2.5.4",
     "jest": "26.6.3",
@@ -31,17 +51,30 @@
     "tslib": "^1.13.0",
     "zone.js": "~0.10.2"
   },
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^9.2.0",
+    "@angular-devkit/build-angular": "~0.901.15",
+    "@angular-devkit/build-ng-packagr": "~0.901.15",
+    "@angular/compiler-cli": "^9.1.13",
+    "@angularclass/hmr": "^2.1.3",
+    "@types/jasmine": "^2.8.8",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/jest": "^24.0.12",
+    "@types/node": "^12.11.1",
+    "@types/webgl2": "0.0.5",
+    "jasmine-core": "^3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "jest": "^24.8.0",
+    "ng-packagr": "^9.0.0",
+    "three": "0.125.2",
+    "ts-jest": "^24.0.2",
+    "ts-node-dev": "^1.0.0-pre.31",
+    "tslint": "~5.9.1",
+    "tslint-consistent-codestyle": "^1.16.0",
+    "typescript": "~3.8.3",
+    "webpack-cli": "^3.3.1"
+  },
   "peerDependencies": {
     "three": ">= 0.125.x"
-  },
-  "main": "bundles/colijnit-configurator.umd.js",
-  "module": "fesm5/colijnit-configurator.js",
-  "es2015": "fesm2015/colijnit-configurator.js",
-  "esm5": "esm5/colijnit-configurator.js",
-  "esm2015": "esm2015/colijnit-configurator.js",
-  "fesm5": "fesm5/colijnit-configurator.js",
-  "fesm2015": "fesm2015/colijnit-configurator.js",
-  "typings": "colijnit-configurator.d.ts",
-  "metadata": "colijnit-configurator.metadata.json",
-  "sideEffects": false
+  }
 }

package/src/app/app.component.ts

@@ -0,0 +1,222 @@
+import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from "@angular/core";
+import * as THREE from "three";
+import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
+import {Builder} from "./builder";
+import {Options} from "@colijnit/ioneconnector/build/model/options";
+import axios from "axios";
+import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
+import {Subscription} from "rxjs";
+import {Selection} from "@colijnit/configuratorapi/build/model/selection";
+import {Answer} from "@colijnit/configuratorapi/build/model/answer";
+import {ConfiguratorService} from './services/configurator.service';
+import {AmbientLight, DirectionalLight, HemisphereLight, Object3D, SpotLight} from 'three';
+
+// @ts-ignore
+window.loadGLTF = async (file: string) => {
+  const gltfLoader: GLTFLoader = new GLTFLoader();
+  try {
+    return new Promise((resolve: Function) => {
+      gltfLoader.load(file, (obj) => {
+        resolve(obj.scene);
+      });
+    });
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+};
+// @ts-ignore
+window.downloadVariation = async (fileName: string) => {
+  const response: any = await axios({
+    method: "get",
+    url: `https://cdn1.colijn-it.nl/${fileName}`,
+    responseType: "arraybuffer"
+  });
+  if (response.status !== 200) {
+    throw Error(response.statusText);
+  }
+  return await response.data;
+};
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div #canvas class="canvas"></div>
+    <selections *ngIf="!showAnswers" [selections]="selections" (selectionClick)="selectSelection($event)"></selections>
+    <answers *ngIf="showAnswers" [selectionTitle]="selectionTitle" [answers]="answers" (answerClick)="selectAnswer($event)"></answers>
+  `
+})
+export class AppComponent implements AfterViewInit, OnDestroy {
+
+  @ViewChild('canvas', {read: ElementRef})
+  public canvasElement: ElementRef;
+
+  public selectionTitle: string;
+  public selections: Selection[] = [];
+  public answers: Answer[] = [];
+
+  public showAnswers: boolean = false;
+  public showSelections: boolean = true;
+
+  private _builder: Builder;
+  private _object: THREE.Object3D;
+  private scene: THREE.Scene = new THREE.Scene();
+  private renderer: THREE.WebGLRenderer;
+  private camera: THREE.PerspectiveCamera;
+  private controls: OrbitControls;
+  private _subs: Subscription[] = [];
+  private _options: Options = {
+      url: "http://130.62.7.180:8082/ione",
+      version: "251",
+      schema: "815"
+  };
+  private _instanceId: string = undefined;
+  private _sku: string = '1000234793';
+
+  constructor(private _configuratorService: ConfiguratorService) {}
+
+  ngAfterViewInit(): void {
+    this._builder = new Builder(this.scene, this._options, true);
+    this._subs.push(
+        this._builder.selectionsReceived.subscribe((selections: Selection[]) => {
+           this.selections = selections;
+        }),
+        this._builder.answersReceived.subscribe((answers: Answer[]) => {
+           this.answers = answers;
+           this.showAnswers = this.answers.length > 0;
+        }),
+        this._builder.modelLoaded.subscribe((object: Object3D) => {
+          if (object && this.answers.length === 0) {
+            this._loadModel(object);
+          }
+        })
+    );
+    this._initScene();
+    this._initRenderer();
+    this._initCameraAndControls();
+    this._initLights();
+    // this._test();
+    this._animate();
+    this._builder.buildModel(this._sku, this._instanceId);
+  }
+
+  ngOnDestroy(): void {
+    this._subs.forEach(s => s.unsubscribe());
+  }
+
+  public disableControls(): void {
+    this.controls.enabled = false;
+  }
+
+  public enableControls(): void {
+    this.controls.enabled = true;
+  }
+
+  public selectSelection(selection: Selection): void {
+    this._builder.selectSelection(selection);
+    this.selectionTitle = selection.commercialQuestion;
+    this.showSelections = false;
+  }
+
+  public selectAnswer(answer: Answer): void {
+    this._builder.selectAnswer(answer);
+    this.selectionTitle = ' . . / ' + answer.answer;
+  }
+
+  private _initScene(): void {
+    this.scene = new THREE.Scene();
+  }
+
+  private _initRenderer(): void {
+    this.renderer = new THREE.WebGLRenderer({
+      alpha: true,
+      antialias: true,
+      preserveDrawingBuffer: true
+    });
+    this.renderer.setClearColor(0xfafafa);
+    this.renderer.autoClear = true;
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.shadowMap.enabled = true;
+    // Use PCFShadowMap to enable radius else use PCFSoftShadowMap
+    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    this.renderer.outputEncoding = THREE.LinearEncoding;
+    // this.renderer.gammaFactor = 2.2;
+    // this.renderer.toneMappingExposure = 1.1;
+    this.canvasElement.nativeElement.appendChild(this.renderer.domElement);
+  }
+
+  private _initCameraAndControls(): void {
+    this.camera = new THREE.PerspectiveCamera(45, 1, 0.01, 100);
+    this.controls = new OrbitControls( this.camera, this.renderer.domElement );
+    this.camera.position.set(0, 3, 1.5);
+    this.controls.update();
+  }
+
+  private _animate(): void {
+    this.renderer.setAnimationLoop(() => this._render());
+  }
+
+  private _render(): void {
+    this._checkCanvasResize();
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  private _checkCanvasResize(): void {
+    const canvas = this.renderer.domElement;
+    if (this.canvasElement.nativeElement.clientWidth !== canvas.width || this.canvasElement.nativeElement.clientHeight !== canvas.height) {
+      this._updateWindowSize();
+    }
+  }
+
+  private _updateWindowSize() {
+    this._resizeRendererToDisplaySize();
+    const canvas = this.renderer.domElement;
+    const aspect = canvas.width / canvas.height;
+    this.camera.aspect = aspect;
+    (this.camera as THREE.PerspectiveCamera).updateProjectionMatrix();
+  }
+
+  private _resizeRendererToDisplaySize() {
+    this.renderer.setSize(this.canvasElement.nativeElement.clientWidth, this.canvasElement.nativeElement.clientHeight, false);
+  }
+
+  private _test(): void {
+    const mat: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({color: 'blue'});
+    const geo: THREE.BoxGeometry = new THREE.BoxGeometry(1, 1, 1);
+    const mesh: THREE.Mesh = new THREE.Mesh(geo, mat);
+    this.scene.add(mesh);
+  }
+
+  private async _loadModel(object: Object3D): Promise<void> {
+    object.name = this._sku;
+    object.visible = true;
+    const objectFromScene = this.scene.getObjectByName(this._sku);
+    if (objectFromScene) {
+      this.scene.remove(objectFromScene);
+    }
+    this.scene.add(object);
+  }
+
+  private _initLights(): void {
+    const ambientLight: AmbientLight = new AmbientLight('#595959', 1.2);
+    ambientLight.name = 'ambientLight';
+    const directional: DirectionalLight = new DirectionalLight('white', 1);
+    directional.position.set(0, 4, 0);
+    directional.castShadow = true;
+    const spotLight1 = new SpotLight('white', 4, 25, 0.7, 0, 0.7);
+    spotLight1.position.set(-15, 9 , -15);
+    spotLight1.castShadow = true;
+    const spotLight2 = new SpotLight('white', 4, 25, 0.7, 0, 0.7);
+    spotLight2.position.set(15, 9 , -15);
+    spotLight2.castShadow = true;
+    const spotLight3 = new SpotLight('white', 4, 25, 0.7, 0, 0.7);
+    spotLight3.position.set(-15, 9 , 15);
+    spotLight3.castShadow = true;
+    const spotLight4 = new SpotLight('white', 4, 25, 0.7, 0, 0.7);
+    spotLight4.position.set(15, 9 , 15);
+    spotLight4.castShadow = true;
+    const hemiSphere = new HemisphereLight('white', 'white', 0.15);
+
+    this.scene.add(ambientLight, directional, spotLight1, spotLight2, spotLight3, spotLight4, hemiSphere);
+  }
+}

package/src/app/app.module.ts

@@ -0,0 +1,34 @@
+import {NgModule} from '@angular/core';
+import {AppComponent} from "./app.component";
+import {CommonModule} from "@angular/common";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {SelectionsModule} from "./components/selections/selections.module";
+import {AnswersModule} from "./components/answers/answers.module";
+import {Builder} from './builder';
+
+@NgModule({
+    imports: [
+        BrowserAnimationsModule,
+        CommonModule,
+        SelectionsModule,
+        AnswersModule
+    ],
+    providers: [
+        Builder
+    ],
+    declarations: [
+        AppComponent
+    ],
+    entryComponents: [
+        AppComponent
+    ],
+    exports: [
+        AppComponent
+    ],
+    bootstrap: [
+        AppComponent
+    ]
+})
+
+export class AppModule {
+}