@colijnit/configurator 1.0.20 → 1.0.21

package/src/helper/variation-helper.ts

@@ -0,0 +1,220 @@
+import {DecoNodeType} from "@colijnit/configuratorapi/build/enum/deco-node-type.enum";
+import {VariationSettings} from "../model/variation-settings";
+import {AssetUtils} from "../utils/asset.utils";
+import {DecoNode} from "@colijnit/configuratorapi/build/model/deco-node";
+import {Variation} from "../model/variation";
+import * as THREE from "three";
+import {VariationUtils} from "../utils/variation-utils";
+
+export class VariationHelper {
+
+    public assetPath: string;
+
+    private _lastKnownVariations: Map<string, Map<string, Variation[]>> = new Map();
+
+    public clearCache(): void {
+        const valueMap: Map<string, Variation[]>[] = Array.from(this._lastKnownVariations.values());
+        for (let i = 0; i < valueMap.length; i++) {
+            const values = Array.from(valueMap[i].values());
+            values.forEach((variations) => {
+                variations.forEach((variation) => {
+                    variation.material.texture.dispose();
+                    variation.material.normal.dispose();
+                    variation.material.metalness.dispose();
+                    variation.material.roughness.dispose();
+                    variation.material.ao.dispose();
+                })
+            });
+        }
+    }
+
+    public async loadPart(obj: THREE.Object3D, parts: any[], usePbr: boolean = false): Promise<void> {
+        try {
+            const len: number = parts.length;
+            for (let i = 0; i < len; i++) {
+                if (parts[i].decoNode && parts[i].decoNode.gameObjectName && parts[i].decoNode.type === DecoNodeType.Part) {
+                    const partSettings: VariationSettings =
+                        await VariationUtils.LoadVariation(this.assetPath, parts[i].decoNode.gameObjectName || parts[i].decoId);
+                    if (partSettings) {
+                        const partVariation: Variation = new Variation();
+                        partVariation.decoId = parseFloat(parts[i].decoNode.id);
+                        partVariation.brandId = parts[i].decoNode.brandId;
+                        partVariation.gameObjectName = parts[i].decoNode.gameObjectName;
+                        partVariation.material = await AssetUtils.CreateMaterialFromAsset(partSettings);
+                        // parts[i].variation = partVariation;
+                        this._applyMaterialPart(obj, partVariation, parts[i].node, usePbr);
+                    }
+                }
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    public async loadVariation(instanceId: string, obj: THREE.Object3D, parts: any[], usePbr: boolean = false): Promise<void> {
+        try {
+            const len: number = parts.length;
+            for (let i = 0; i < len; i++) {
+                const variations: DecoNode[] = parts[i].variations;
+                if (!variations || variations.length === 0) {
+                    if (this._getLastKnownVariations(instanceId, parts[i].nodeId)) {
+                        parts[i].variations = this._getLastKnownVariations(instanceId, parts[i].nodeId);
+                        this._applyVariations(obj, parts[i], usePbr);
+                        continue;
+                    } else {
+                        continue;
+                    }
+                }
+                const lastKnownVariations: Variation[] = [];
+                for (let j = 0; j < variations.length; j++) {
+                    const variationSettings: VariationSettings =
+                        await VariationUtils.LoadVariation(this.assetPath, variations[j].gameObjectName || parts[i].decoId);
+                    const newVariation: Variation = new Variation();
+                    newVariation.decoId = parseFloat(variations[j].id);
+                    newVariation.brandId = variations[j].brandId;
+                    newVariation.gameObjectName = variations[j].gameObjectName;
+                    newVariation.supplierArticleNr = (variations[j] as any).supplierArticleNr;
+                    newVariation.materialId = (variations[j] as any).materialId;
+                    newVariation.material = await AssetUtils.CreateMaterialFromAsset(variationSettings);
+                    lastKnownVariations.push(newVariation);
+                }
+                this._setLastKnownVariations(instanceId, parts[i].nodeId, lastKnownVariations);
+                parts[i].variations = lastKnownVariations;
+                this._applyVariations(obj, parts[i], usePbr);
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    private _getChildrenFilterByProp(obj: THREE.Object3D, userDataObjectProp: string, prop: string, value: any): THREE.Object3D[] {
+        return obj.children.filter((child) => {
+            return child.userData &&
+                child.userData.hasOwnProperty(userDataObjectProp) &&
+                child.userData[userDataObjectProp].hasOwnProperty(prop) &&
+                child.userData[userDataObjectProp][prop] === value;
+        });
+    }
+
+    private _applyMaterialPart(obj: THREE.Object3D, partMaterial: any, nodeId: any, usePbr: boolean = false): void {
+        const children = this._getChildrenFilterByProp(obj, 'selection', 'node', nodeId);
+        const len: number = children.length;
+        for (let i: number = 0; i < len; i++) {
+            const child = children[i];
+            if (child !== null && child !== undefined) {
+                child.traverse((mesh) => {
+                    if (mesh instanceof THREE.Mesh && partMaterial) {
+                        if (Array.isArray(mesh.material)) { // multimaterial support
+                            for (let j = 0, jlen: number = mesh.material.length; j < jlen; j++) {
+                                if (mesh.material[j].name.toLowerCase().indexOf('fixed_frame') !== -1) {
+                                    mesh.material[j] = this._setMeshMaterialFromVariation(mesh.material[j].name, partMaterial, usePbr);
+                                }
+                            }
+                        } else {
+                            if (mesh.material.name.toLowerCase().indexOf('fixed_frame') !== -1) {
+                                mesh.material = this._setMeshMaterialFromVariation(mesh.material.name, partMaterial, usePbr);
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }
+
+    private _applyVariations(obj: THREE.Object3D, part: any, usePbr: boolean = false): void {
+        const children = this._getChildrenFilterByProp(obj, 'selection', 'node', part.node);
+        const len: number = children.length;
+        for (let i: number = 0; i < len; i++) {
+            const child = children[i];
+            if (child !== null && child !== undefined) {
+                child.traverse((mesh) => {
+                    if (mesh instanceof THREE.Mesh && part.variations && part.variations.length > 0 && mesh.name.toLowerCase().indexOf('c_')) {
+                        for (let j = 0; j < part.variations.length; j++) {
+                            const variation: Variation = part.variations[j];
+                            if (variation.material) {
+                                const materialToSearch: string = !!variation.materialId ? variation.materialId.toLowerCase() : 'default';
+                                if (Array.isArray(mesh.material)) { // multimaterial support
+                                    for (let m = 0, mlen: number = mesh.material.length; m < mlen; m++) {
+                                        if (mesh.material[m].name.toLowerCase().indexOf(materialToSearch) !== -1) {
+                                            mesh.material[m] = this._setMeshMaterialFromVariation(mesh.material[m].name, variation, usePbr);
+                                        }
+                                    }
+                                } else {
+                                    if (mesh.material.name.toLowerCase().indexOf(materialToSearch) !== -1) {
+                                        mesh.material = this._setMeshMaterialFromVariation(mesh.material.name, variation, usePbr);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }
+
+    private _setMeshMaterialFromVariation(name: string, variation: Variation, usePbr: boolean = false): THREE.Material {
+        if (variation.material.texture) {
+            variation.material.texture.needsUpdate = true;
+        }
+        if (!usePbr) {
+            const material: THREE.MeshPhongMaterial = new THREE.MeshPhongMaterial({
+                name: name,
+                shininess: variation.material.shininess,
+                specular: variation.material.specular,
+                map: variation.material.texture,
+                normalMap: variation.material.normal
+            });
+            // material.color.setRGB(0.8, 0.8, 0.8);
+            material.needsUpdate = true;
+            return material;
+        } else {
+            const params: THREE.MeshStandardMaterialParameters = {
+                // side: DoubleSide,
+                name: name,
+                roughness: variation.material.roughnessValue ? variation.material.roughnessValue : 1,
+                metalness: variation.material.metalnessValue ? variation.material.metalnessValue : 0,
+                // wireframe: true
+            };
+            if (variation.material.texture) {
+                params.map = variation.material.texture;
+            }
+            if (variation.material.ao) {
+                params.aoMap = variation.material.ao;
+            }
+            if (variation.material.roughness) {
+                params.roughnessMap = variation.material.roughness;
+            }
+            if (variation.material.metalness) {
+                params.metalnessMap = variation.material.metalness;
+            }
+            if (variation.material.normal) {
+                params.normalMap = variation.material.normal;
+            }
+            const material: THREE.MeshStandardMaterial = new THREE.MeshStandardMaterial(params);
+            material.color.setRGB(1, 1, 1);
+            material.needsUpdate = true;
+            return material;
+        }
+    }
+
+    private _setLastKnownVariations(instanceId: string, id: string, variation: Variation[]): void {
+        if (this._lastKnownVariations.has(instanceId)) {
+            const variations = this._lastKnownVariations.get(instanceId);
+            variations.set(id, variation);
+        } else {
+            const variations: Map<string, Variation[]> = new Map();
+            this._lastKnownVariations.set(instanceId, variations.set(id, variation));
+        }
+    }
+
+    private _getLastKnownVariations(instanceId: string, id: string): Variation[] {
+        if (this._lastKnownVariations.has(instanceId)) {
+            const variations = this._lastKnownVariations.get(instanceId);
+            if (variations.has(id)) {
+                return variations.get(id);
+            }
+        }
+        return null;
+    }
+
+}

package/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Configurator</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { environment } from './environments/environment';
+import {AppModule} from "./app/app.module";
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

package/src/model/material.ts

@@ -0,0 +1,22 @@
+import * as THREE from 'three';
+
+export class Material {
+
+  public name: string;
+  public schema: string;
+  public specular: THREE.Color = new THREE.Color(0.3, 0.3, 0.3);
+  public shininess = 0;
+  // public roughness = 1;
+  // public metalness = 0.5;
+  public normal: THREE.Texture;
+  public texture: THREE.Texture;
+  public ao: THREE.Texture;
+  public metalness: THREE.Texture;
+  public roughness: THREE.Texture;
+  public repeatX = 4;
+  public repeatY = 4;
+  public loaded = false;
+  public metalnessValue: number;
+  public roughnessValue: number;
+
+}

package/src/model/variation-settings.ts

@@ -0,0 +1,14 @@
+export class VariationSettings {
+  public id: string;
+  public settings: any = {};
+  public texture: string;
+  public textureFilename: string;
+  public normal: string;
+  public normalFilename: string;
+  public ao: string;
+  public aoFilename: string;
+  public metalness: string;
+  public metalnessFilename: string;
+  public roughness: string;
+  public roughnessFilename: string;
+}

package/src/model/variation.ts

@@ -0,0 +1,11 @@
+import {Material} from './material';
+
+export class Variation {
+  public decoId: number;
+  public brandId: string;
+  public gameObjectName: string;
+  public node: any;
+  public supplierArticleNr: string;
+  public materialId: string;
+  public material: Material;
+}

package/src/polyfills.ts

@@ -0,0 +1,73 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';

package/{public_api.d.ts → src/public_api.ts}

@@ -1,6 +1,6 @@
-export * from './app/builder';
-export * from './app/services/configurator.service';
-export * from './app/components/answers/answers.module';
-export * from './app/components/answers/answers.component';
-export * from './app/components/selections/selections.module';
-export * from './app/components/selections/selections.component';
+export * from './app/builder';
+export * from './app/services/configurator.service';
+export * from './app/components/answers/answers.module';
+export * from './app/components/answers/answers.component';
+export * from './app/components/selections/selections.module';
+export * from './app/components/selections/selections.component';

package/src/style/shared.scss

@@ -0,0 +1,173 @@
+.ione-configurator {
+  .rp-answers-slideout{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 400px;
+    height: fit-content;
+  }
+  .answers-title {
+    margin-left: 10px;
+    color: #1a1a1a;
+  }
+  .answers-container {
+    height: 100vh;
+    overflow-y: scroll;
+  }
+  .answer-content {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    font-size: 12px;
+    border: 1px solid lightgray;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    border-radius: 3px;
+    margin-bottom: 3px;
+    box-shadow: 2px 1px rgba(211, 211, 211, 0.5);
+    background: white;
+  }
+  .thumbnail {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+    border: 1px solid #d3d3d3;
+    border-radius: 5px;
+  }
+  .img-size {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+    border-radius: 5px;
+  }
+  .unloaded {
+    background-color: lightgrey;
+  }
+  .answer-wrapper {
+    display: block;
+  }
+  .answer-title {
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+  }
+  .question {
+    font-weight: bold;
+    color: #1a1a1a;
+  }
+  .answer {
+    font-size: 12px;
+    font-style: italic;
+    margin-top: 3px;
+  }
+  .collapse-wrapper {
+    display: block;
+  }
+  .collapse-content {
+    display: block;
+  }
+  .collapse-handle {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    border: solid black;
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    &.expanded {
+      transform: rotate(-135deg);
+      -webkit-transform: rotate(-135deg);
+    }
+  }
+  .child-selection {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
+  }
+  .mat-title {
+    margin-left: 10px;
+    color: #1a1a1a;
+  }
+  .drawer__header {
+    height: 48px;
+  }
+  .rp-selections-summary {
+    height: fit-content;
+    background: transparent;
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 400px;
+  }
+  .selections-content {
+    overflow-y: auto;
+  }
+  .co-summary-line {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    font-size: 12px;
+    border: 1px solid lightgray;
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    border-radius: 3px;
+    margin-bottom: 3px;
+    box-shadow: 2px 1px rgba(211, 211, 211, 0.5);
+    background: white;
+  }
+  .selection-thumbnail {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+    border: 1px solid #d3d3d3;
+    border-radius: 5px;
+  }
+  .selection-img {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+    border-radius: 5px;
+  }
+  .answer-thumbnail {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+    border: 1px solid #d3d3d3;
+    border-radius: 5px;
+  }
+  .answer-img {
+    width: 54px;
+    min-width: 54px;
+    height: 54px;
+    min-height: 54px;
+    border-radius: 5px;
+  }
+  .unloaded {
+    background-color: lightgrey;
+  }
+  .titles {
+    margin-left: 14px;
+    align-self: center;
+  }
+  .title-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .answer-title-wrapper {
+    text-align: center;
+    align-self: center;
+    margin-left: 14px;
+  }
+}