@colijnit/configurator 12.0.4 → 12.0.7

package/fesm2015/colijnit-configurator.js

@@ -518,6 +518,14 @@ class SceneUtils {
     }
 }
 
+class VariationSettings {
+    constructor() {
+        this.settings = {};
+        this.loading = false;
+        this.loaded = new Subject();
+    }
+}
+
 class Material {
     constructor() {
         this.specular = new THREE.Color(0.3, 0.3, 0.3);
@@ -703,14 +711,6 @@ class AssetUtils {
 class Variation {
 }
 
-class VariationSettings {
-    constructor() {
-        this.settings = {};
-        this.loading = false;
-        this.loaded = new Subject();
-    }
-}
-
 // @dynamic
 class VariationUtils {
     static ClearCache() {
@@ -718,35 +718,38 @@ class VariationUtils {
     }
     static LoadVariation(assetPath, fileName) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!fileName) {
-                return null;
-            }
-            if (fileName.indexOf('ione3d') < 0) {
-                fileName = fileName.concat('.ione3d');
-            }
-            const id = fileName.substr(0, fileName.lastIndexOf('.ione3d'));
-            try {
-                if (!assetPath.endsWith('/')) {
-                    assetPath += '/';
+            return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                if (!fileName) {
+                    resolve(null);
                 }
-                if (!window.hasOwnProperty('downloadVariation')) {
-                    console.error('downloadVariation not defined in window global');
-                    return null;
+                if (fileName.indexOf('ione3d') < 0) {
+                    fileName = fileName.concat('.ione3d');
                 }
-                let file;
-                if (this.MaterialCache.has(id)) {
-                    file = this.MaterialCache.get(id);
+                const id = fileName.substr(0, fileName.lastIndexOf('.ione3d'));
+                try {
+                    if (!assetPath.endsWith('/')) {
+                        assetPath += '/';
+                    }
+                    if (!window.hasOwnProperty('downloadVariation')) {
+                        console.error('downloadVariation not defined in window global');
+                        reject('downloadVariation not defined in window global');
+                    }
+                    let file;
+                    if (this.MaterialCache.has(id)) {
+                        resolve(this.MaterialCache.get(id));
+                    }
+                    else {
+                        file = yield window.downloadVariation(`${assetPath.replace('https://cdn1.colijn-it.nl/', '')}variation/${fileName}`);
+                        const settings = yield VariationUtils.GetVariationSettingsFromFile(id, file);
+                        this.MaterialCache.set(id, settings);
+                        resolve(settings);
+                    }
                 }
-                else {
-                    file = yield window.downloadVariation(`${assetPath.replace('https://cdn1.colijn-it.nl/', '')}variation/${fileName}`);
-                    this.MaterialCache.set(id, file);
+                catch (err) {
+                    const mute = err;
+                    reject(err);
                 }
-                return yield VariationUtils.GetVariationSettingsFromFile(id, file);
-            }
-            catch (err) {
-                const mute = err;
-                return null;
-            }
+            }));
         });
     }
     // public static GetMaterialFromName(variationFolder: string, material: any): Promise<MeshStandardMaterial> {
@@ -1002,6 +1005,7 @@ VariationUtils.MaterialCache = new Map();
 
 class VariationHelper {
     constructor() {
+        this._variations = [];
         this._lastKnownVariations = new Map();
     }
     clearCache() {
@@ -1074,18 +1078,22 @@ class VariationHelper {
                         }
                     }
                     const lastKnownVariations = [];
+                    const variationPromise = [];
                     for (let j = 0; j < variations.length; j++) {
-                        const variationSettings = yield VariationUtils.LoadVariation(this.assetPath, variations[j].gameObjectName || parts[i].decoId);
-                        const newVariation = new Variation();
-                        newVariation.decoId = parseFloat(variations[j].id);
-                        newVariation.brandId = variations[j].brandId;
-                        newVariation.gameObjectName = variations[j].gameObjectName;
-                        newVariation.supplierArticleNr = variations[j].supplierArticleNr;
-                        newVariation.materialId = variations[j].materialId;
-                        newVariation.material = yield AssetUtils.CreateMaterialFromAsset(variationSettings);
-                        lastKnownVariations.push(newVariation);
+                        variationPromise.push(this.loadTheVariation(variations[j].gameObjectName || parts[i].decoId).then((variationSettings) => __awaiter(this, void 0, void 0, function* () {
+                            const newVariation = new Variation();
+                            newVariation.decoId = parseFloat(variations[j].id);
+                            newVariation.brandId = variations[j].brandId;
+                            newVariation.optionText = variations[j].optionText;
+                            newVariation.gameObjectName = variations[j].gameObjectName;
+                            newVariation.supplierArticleNr = variations[j].supplierArticleNr;
+                            newVariation.materialId = variations[j].materialId;
+                            newVariation.material = yield AssetUtils.CreateMaterialFromAsset(variationSettings);
+                            lastKnownVariations.push(newVariation);
+                        })));
                     }
-                    this._setLastKnownVariations(parts[i].nodeId, lastKnownVariations);
+                    yield Promise.all(variationPromise);
+                    this._setLastKnownVariations(`${parts[i].nodeId}_${parts[i].node}`, lastKnownVariations);
                     parts[i].variations = lastKnownVariations;
                     this._applyVariations(obj, parts[i], usePbr);
                 }
@@ -1095,6 +1103,65 @@ class VariationHelper {
             }
         });
     }
+    get(id) {
+        const len = this._variations.length;
+        for (let i = 0; i < len; i++) {
+            if (this._variations[i].id && this._variations[i].id === id) {
+                return this._variations[i];
+            }
+        }
+    }
+    set(variations) {
+        const idx = this._variations.findIndex(v => v.id === variations.id);
+        if (idx > -1) {
+            this._variations[idx] = variations;
+        }
+        else {
+            this._variations.push(variations);
+        }
+    }
+    preloadVariations(schema, fileNames) {
+        fileNames.forEach((fileName) => {
+            if (fileName && !this.get(fileName)) {
+                const settings = new VariationSettings();
+                settings.id = fileName;
+                settings.loading = true;
+                this._variations.push(settings);
+                let assetPath = this.assetPath;
+                if (!assetPath.endsWith('/')) {
+                    assetPath += '/';
+                }
+                VariationUtils.LoadVariation(assetPath, fileName).then((variationSettings) => {
+                    settings.loading = false;
+                    settings.loaded.next(variationSettings);
+                    if (variationSettings) {
+                        this.set(variationSettings);
+                    }
+                });
+            }
+        });
+    }
+    loadTheVariation(fileName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!fileName) {
+                return null;
+            }
+            if (this.get(fileName)) {
+                const settings = this.get(fileName);
+                if (settings.loading) {
+                    return yield this._waitForVariationToLoad(settings);
+                }
+                return settings;
+            }
+        });
+    }
+    _waitForVariationToLoad(settings) {
+        return new Promise((resolve) => {
+            settings.loaded.subscribe((value) => {
+                resolve(value);
+            });
+        });
+    }
     _getChildrenFilterByProp(obj, userDataObjectProp, prop, value) {
         return obj.children.filter((child) => {
             return child.userData &&
@@ -1530,13 +1597,16 @@ class Builder {
                 return;
             }
             try {
+                this._log('start build');
                 yield this._downloadAsset(assetUrl, cdnUrl, schema);
                 if (selections && selections.length > 1 && decos && decos.length > 0 && this._source) {
                     this._selections = selections;
                     this._decos = decos;
                     this._linkSelectionsAndDecos();
+                    this._preloadMaterials(schema);
                     const build = yield this._build();
                     this._cleanUp();
+                    this._log('finish build');
                     return build;
                 }
                 else {
@@ -1621,6 +1691,9 @@ class Builder {
             return '';
         }
     }
+    _preloadMaterials(schema) {
+        this._variationHelper.preloadVariations(schema, this._decos.map(d => d.gameObjectName));
+    }
     _setInstanceId(sku, instanceId, goodId) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!instanceId && !this._instanceId) {
@@ -1675,6 +1748,7 @@ class Builder {
                 obj.visible = false; // no need to render visualy
                 this._scene.add(obj);
                 let connected = false;
+                this._log('build main model');
                 for (let i = 0, len = adjustables.length; i < len; i++) {
                     const adjustable = this._createAdjustable(obj, adjustables[i]);
                     if (adjustable) {
@@ -1692,12 +1766,17 @@ class Builder {
                         console.warn('No connection found for: ', adjustable.name);
                     }
                 }
+                this._log('place addables');
                 this._placeAddables(obj);
+                this._log('update pivot');
                 this._updatePivot(obj);
+                this._log('load variations');
                 yield this._loadVariations(obj);
                 // this._variationHelper.clearCache();
+                this._log('remove from scene');
                 this._scene.remove(obj);
                 ObjectUtils.DisposeObject(this._source);
+                this._log('ready!');
                 return obj;
             }
             else {
@@ -1965,10 +2044,15 @@ class Builder {
     }
     _loadVariations(obj) {
         return __awaiter(this, void 0, void 0, function* () {
+            this._log('load variation for parts');
             yield this._variationHelper.loadPart(obj, this._adjustables, true);
+            this._log('load variation for adjustables');
             yield this._variationHelper.loadVariation(obj, this._adjustables, true);
+            this._log('load variation for addables');
             yield this._variationHelper.loadVariation(obj, this._addables, true);
+            this._log('load variation clear cache');
             this._variationHelper.clearCache();
+            this._log('load variations done');
         });
     }
     _getAdjustables() {
@@ -1994,6 +2078,12 @@ class Builder {
         this._addables.length = 0;
         this._prepareTheSelections();
     }
+    _log(message) {
+        if (this.debug) {
+            this.debug(message);
+            console.log(new Date(), message);
+        }
+    }
 }
 Builder.ɵprov = i0.ɵɵdefineInjectable({ factory: function Builder_Factory() { return new Builder(); }, token: Builder, providedIn: "root" });
 Builder.decorators = [