@colijnit/configurator 1.0.21 → 1.0.22

package/src/helper/variation-helper.ts

@@ -1,220 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<!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

@@ -1,11 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,73 +0,0 @@
-/**
- * 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/src/style/shared.scss

@@ -1,173 +0,0 @@
-.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;
-  }
-}