@colijnit/configurator 1.0.8 → 1.0.9

package/fesm5/colijnit-configurator.js

@@ -1,4 +1,4 @@
-import { __awaiter, __generator, __extends } from 'tslib';
+import { __awaiter, __generator, __extends, __decorate } from 'tslib';
 import { Mesh, ObjectLoader, Camera, Group, TextureLoader, RepeatWrapping, Object3D, Box3, Vector3, Vector2, Euler, Quaternion, Color, Texture, sRGBEncoding, MeshPhongMaterial, MeshStandardMaterial } from 'three';
 import { Configurator } from '@colijnit/configuratorapi/build/src/configurator';
 import { DecoNode } from '@colijnit/configuratorapi/build/src/model/deco-node';
@@ -10,6 +10,9 @@ import { DecoNodeKind } from '@colijnit/configuratorapi/build/src/enum/deco-node
 import * as JSZip from 'jszip';
 import { Article } from '@colijnit/configuratorapi/build/src/model/article';
 import { BehaviorSubject } from 'rxjs';
+import { EventEmitter, Input, Output, Component, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 var ObjectUtils = /** @class */ (function () {
     function ObjectUtils() {
@@ -233,7 +236,8 @@ var ThreedUtils = /** @class */ (function () {
                         fileName = fileName.replace('.unity3d', '');
                         lookupFileName = fileName + (fileName.indexOf('.glb') < 0 ? '.glb' : '');
                         if (this._objectCache.has(lookupFileName)) {
-                            return [2 /*return*/, Promise.resolve(this._objectCache.get(lookupFileName))];
+                            resolve(this._objectCache.get(lookupFileName));
+                            return [2 /*return*/];
                         }
                         return [4 /*yield*/, FileUtils.FileExists(lookupFileName, 'https://cdn1.colijn-it.nl/content43/')];
                     case 1:
@@ -1323,13 +1327,18 @@ var VariationHelper = /** @class */ (function () {
 
 var Builder = /** @class */ (function () {
     function Builder(scene, options) {
+        var _this = this;
         this.selectionsReceived = new BehaviorSubject([]);
+        this.answersReceived = new BehaviorSubject([]);
+        this.questionReceived = new BehaviorSubject(undefined);
         this._selections = [];
         this._decos = [];
         this._placedAdjustables = [];
         this._placedAddables = [];
         this._adjustables = [];
         this._addables = [];
+        this._articleCache = new Map();
+        this._subs = [];
         if (!scene) {
             throw 'No scene object provided!';
         }
@@ -1341,64 +1350,41 @@ var Builder = /** @class */ (function () {
         this._boFactory = new BusinessObjectFactory();
         this._threedUtils = new ThreedUtils();
         this._variationHelper = new VariationHelper();
+        this._subs.push(this._configuratorApi.selectionsReceived.subscribe(function (selections) { return _this.selectionsReceived.next(selections); }), this._configuratorApi.answersReceived.subscribe(function (answers) { return _this.answersReceived.next(answers); }), this._configuratorApi.questionReceived.subscribe(function (question) { return _this.questionReceived.next(question); }));
     }
     Builder.prototype.buildModel = function (instanceId, sku, goodId) {
         return __awaiter(this, void 0, void 0, function () {
-            var article, _a, promises, e_1;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var promises, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
                         if (!this._scene && !instanceId) {
                             return [2 /*return*/];
                         }
-                        _b.label = 1;
+                        _a.label = 1;
                     case 1:
-                        _b.trys.push([1, 12, , 13]);
-                        if (!!goodId) return [3 /*break*/, 3];
-                        return [4 /*yield*/, this._getGoodIdFromSku(sku)
-                                .catch(function (error) {
-                                throw "Article with sku " + sku + " not found!";
-                            })];
+                        _a.trys.push([1, 7, , 8]);
+                        return [4 /*yield*/, this._prepareConfiguration(sku, goodId)];
                     case 2:
-                        goodId = _b.sent();
-                        _b.label = 3;
-                    case 3: return [4 /*yield*/, this._getArticle(goodId)];
-                    case 4:
-                        article = _b.sent();
-                        if (!(article && article.assetUrl)) return [3 /*break*/, 10];
-                        _a = this;
-                        return [4 /*yield*/, this._threedUtils.download3DSource(article.assetUrl)
-                                .catch(function (error) {
-                                throw error;
-                            })];
-                    case 5:
-                        _a._source = _b.sent();
-                        if (!this._source) return [3 /*break*/, 8];
-                        if (article.contentDeliveryUrl) {
-                            this._variationHelper.assetPath =
-                                article.contentDeliveryUrl +
-                                    (article.contentDeliveryUrl.endsWith('/') ? '' : '/') +
-                                    (article.distSchema ? article.distSchema : 'UP_DBA');
-                        }
+                        _a.sent();
+                        if (!this._source) return [3 /*break*/, 5];
                         return [4 /*yield*/, this._configuratorApi.setInstanceToConfigure(instanceId)];
-                    case 6:
-                        _b.sent();
+                    case 3:
+                        _a.sent();
                         promises = [];
-                        promises.push(this._getSelections());
+                        promises.push(this._getSelections(instanceId));
                         promises.push(this._getDecos());
                         return [4 /*yield*/, Promise.all(promises)];
-                    case 7:
-                        _b.sent();
+                    case 4:
+                        _a.sent();
                         this._linkSelectionsAndDecos();
                         return [2 /*return*/, this._build(instanceId)];
-                    case 8: throw 'GLB source not found!';
-                    case 9: return [3 /*break*/, 11];
-                    case 10: return [2 /*return*/, null];
-                    case 11: return [3 /*break*/, 13];
-                    case 12:
-                        e_1 = _b.sent();
+                    case 5: throw 'GLB source not found!';
+                    case 6: return [3 /*break*/, 8];
+                    case 7:
+                        e_1 = _a.sent();
                         throw e_1;
-                    case 13: return [2 /*return*/];
+                    case 8: return [2 /*return*/];
                 }
             });
         });
@@ -1410,6 +1396,47 @@ var Builder = /** @class */ (function () {
         this._threedUtils.clearCache();
         this._variationHelper.clearCache();
     };
+    Builder.prototype.selectSelection = function (selection) {
+        this._configuratorApi.selectSelection(selection, false);
+    };
+    Builder.prototype.getQuestionAndAnswers = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this._configuratorApi.getQuestionAndAnswers(false)];
+            });
+        });
+    };
+    Builder.prototype.selectAnswer = function (answer) {
+        this._configuratorApi.selectAnswer(answer, false);
+    };
+    Builder.prototype._prepareConfiguration = function (sku, goodId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var article, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, this._getArticle(sku, goodId)];
+                    case 1:
+                        article = _b.sent();
+                        if (!(article && article.assetUrl)) return [3 /*break*/, 3];
+                        _a = this;
+                        return [4 /*yield*/, this._threedUtils.download3DSource(article.assetUrl)
+                                .catch(function (error) {
+                                throw error;
+                            })];
+                    case 2:
+                        _a._source = _b.sent();
+                        if (article.contentDeliveryUrl) {
+                            this._variationHelper.assetPath =
+                                article.contentDeliveryUrl +
+                                    (article.contentDeliveryUrl.endsWith('/') ? '' : '/') +
+                                    (article.distSchema ? article.distSchema : 'UP_DBA');
+                        }
+                        _b.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
     Builder.prototype._build = function (instanceId) {
         return __awaiter(this, void 0, void 0, function () {
             var adjustables, obj, connected, i, len, adjustable, ii, lenii;
@@ -1630,29 +1657,42 @@ var Builder = /** @class */ (function () {
             });
         });
     };
-    Builder.prototype._getArticle = function (id) {
+    Builder.prototype._getArticle = function (sku, goodId) {
         return __awaiter(this, void 0, void 0, function () {
-            var articleResponse, obj;
+            var article, articleResponse, obj;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, this._configuratorApi.getArticleQuickSel(id, false)];
+                    case 0:
+                        if (this._articleCache.has(sku)) {
+                            return [2 /*return*/, this._articleCache.get(sku)];
+                        }
+                        if (!!goodId) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this._getGoodIdFromSku(sku)
+                                .catch(function (error) {
+                                throw "Article with sku " + sku + " not found!";
+                            })];
                     case 1:
+                        goodId = _a.sent();
+                        _a.label = 2;
+                    case 2: return [4 /*yield*/, this._configuratorApi.getArticleQuickSel(goodId, false)];
+                    case 3:
                         articleResponse = _a.sent();
                         if (articleResponse.validationResult.success && articleResponse.resultObject) {
                             if (articleResponse.resultObject.hasOwnProperty('oArticle')) {
                                 obj = Array.isArray(articleResponse.resultObject['oArticle']) ? articleResponse.resultObject['oArticle'][0] : articleResponse.resultObject['oArticle'];
-                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(Article, obj)];
+                                article = this._boFactory.makeWithRawBackendData(Article, obj);
                             }
                             else {
-                                return [2 /*return*/, this._boFactory.makeWithRawBackendData(Article, articleResponse.resultObject)];
+                                article = this._boFactory.makeWithRawBackendData(Article, articleResponse.resultObject);
                             }
                         }
-                        return [2 /*return*/];
+                        this._articleCache.set(sku, article);
+                        return [2 /*return*/, article];
                 }
             });
         });
     };
-    Builder.prototype._getSelections = function () {
+    Builder.prototype._getSelections = function (instanceId) {
         return __awaiter(this, void 0, void 0, function () {
             var selectionResponse;
             return __generator(this, function (_a) {
@@ -1664,7 +1704,7 @@ var Builder = /** @class */ (function () {
                         selectionResponse = _a.sent();
                         if (selectionResponse.resultObjects && selectionResponse.resultObjects.length > 0) {
                             this._selections = this._boFactory.makeBOArrayFromRawBackendDataArray(Selection, selectionResponse.resultObjects);
-                            this.selectionsReceived.next(this._selections);
+                            this._selections.forEach(function (s) { return s.instanceId = instanceId; });
                         }
                         else {
                             throw 'No selections found!';
@@ -1767,9 +1807,137 @@ var Builder = /** @class */ (function () {
     return Builder;
 }());
 
+var AnswersComponent = /** @class */ (function () {
+    function AnswersComponent() {
+        this.answers = [];
+        this.answerClick = new EventEmitter();
+    }
+    __decorate([
+        Input()
+    ], AnswersComponent.prototype, "answers", void 0);
+    __decorate([
+        Output()
+    ], AnswersComponent.prototype, "answerClick", void 0);
+    AnswersComponent = __decorate([
+        Component({
+            selector: "answers",
+            template: "\n        <ng-container *ngFor=\"let answer of answers\">\n            <div class=\"answers\" (click)=\"answerClick.emit(answer)\">\n                <div class=\"answer\" [textContent]=\"answer.commercialAnswer\"></div>\n            </div>\n        </ng-container>\n    ",
+            styles: [":host{position:absolute;top:0;right:0;width:400px;height:100%;background:#fff}:host .answers{cursor:pointer}"]
+        })
+    ], AnswersComponent);
+    return AnswersComponent;
+}());
+
+var AnswersModule = /** @class */ (function () {
+    function AnswersModule() {
+    }
+    AnswersModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule
+            ],
+            declarations: [
+                AnswersComponent
+            ],
+            exports: [
+                AnswersComponent
+            ]
+        })
+    ], AnswersModule);
+    return AnswersModule;
+}());
+
+var SelectionViewModel = /** @class */ (function () {
+    function SelectionViewModel() {
+        this.children = [];
+        this.expanded = false;
+    }
+    return SelectionViewModel;
+}());
+var SelectionsComponent = /** @class */ (function () {
+    function SelectionsComponent() {
+        this.selectionViewModels = [];
+        this.selectionClick = new EventEmitter();
+    }
+    Object.defineProperty(SelectionsComponent.prototype, "selections", {
+        set: function (value) {
+            this._prepareSelections(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SelectionsComponent.prototype.expandClicked = function (selectionViewModel, mouseEvent) {
+        mouseEvent.preventDefault();
+        mouseEvent.stopImmediatePropagation();
+        selectionViewModel.expanded = !selectionViewModel.expanded;
+    };
+    SelectionsComponent.prototype.selectSelection = function (selection, mouseEvent) {
+        mouseEvent.preventDefault();
+        mouseEvent.stopImmediatePropagation();
+        this.selectionClick.next(selection);
+    };
+    SelectionsComponent.prototype._prepareSelections = function (value) {
+        var _this = this;
+        this.selectionViewModels.length = 0;
+        var selectionViewModel;
+        value.forEach(function (s) {
+            if (s.presentationLevel === 1) {
+                selectionViewModel = new SelectionViewModel();
+                selectionViewModel.selection = s;
+                _this.selectionViewModels.push(selectionViewModel);
+            }
+            else if (s.presentationLevel > 1) {
+                if (selectionViewModel) {
+                    selectionViewModel.children.push(s);
+                }
+            }
+        });
+    };
+    __decorate([
+        Input()
+    ], SelectionsComponent.prototype, "selections", null);
+    __decorate([
+        Output()
+    ], SelectionsComponent.prototype, "selectionClick", void 0);
+    SelectionsComponent = __decorate([
+        Component({
+            selector: "selections",
+            template: "\n        <ng-container *ngFor=\"let selectionViewModel of selectionViewModels\">\n            <div class=\"selection\" (click)=\"selectSelection(selectionViewModel.selection, $event)\">\n                <div class=\"question\" [textContent]=\"selectionViewModel.selection.commercialQuestion\"></div>\n                <div class=\"answer\" [textContent]=\"selectionViewModel.selection.answer\"></div>\n                <div class=\"collapse-handle\" [class.expanded]=\"selectionViewModel.expanded\" \n                     *ngIf=\"selectionViewModel.children.length > 0\" (click)=\"expandClicked(selectionViewModel, $event)\"></div>\n                <div *ngIf=\"selectionViewModel.children.length > 0 && selectionViewModel.expanded\" @showHideChildren>\n                    <div class=\"child-selection\" *ngFor=\"let selection of selectionViewModel.children\"\n                         (click)=\"selectSelection(selection, $event)\"\n                    >\n                        <div class=\"question\" [textContent]=\"selection.commercialQuestion\"></div>\n                        <div class=\"answer\" [textContent]=\"selection.answer\"></div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    ",
+            animations: [
+                trigger('showHideChildren', [
+                    state('void', style({ 'height': '0' })),
+                    state('*', style({ 'height': '*' })),
+                    transition('void <=> *', animate(200))
+                ])
+            ],
+            styles: [":host{position:absolute;top:0;right:0;width:300px}:host .selection{position:relative;overflow:hidden;cursor:pointer;font-size:12px;border:1px solid gray}:host .question{font-weight:700}:host .answer{font-size:10px}:host .collapse-handle{position:absolute;top:10px;right:12px;border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg)}:host .collapse-handle.expanded{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}:host .child-selection{margin-left:10px}"]
+        })
+    ], SelectionsComponent);
+    return SelectionsComponent;
+}());
+
+var SelectionsModule = /** @class */ (function () {
+    function SelectionsModule() {
+    }
+    SelectionsModule = __decorate([
+        NgModule({
+            imports: [
+                CommonModule
+            ],
+            declarations: [
+                SelectionsComponent
+            ],
+            exports: [
+                SelectionsComponent
+            ]
+        })
+    ], SelectionsModule);
+    return SelectionsModule;
+}());
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Builder };
+export { AnswersComponent, AnswersModule, Builder, SelectionsComponent, SelectionsModule };
 //# sourceMappingURL=colijnit-configurator.js.map