@colijnit/configurator 1.0.8 → 1.0.9

package/app/builder.d.ts

@@ -2,8 +2,12 @@ import * as THREE from "three";
 import { Options } from "@colijnit/configuratorapi/build/src/model/options";
 import { Selection } from "@colijnit/configuratorapi/build/src/model/selection";
 import { BehaviorSubject } from "rxjs";
+import { Answer } from "@colijnit/configuratorapi/build/src/model/answer";
+import { Question } from "@colijnit/configuratorapi/build/src/model/question";
 export declare class Builder {
     selectionsReceived: BehaviorSubject<Selection[]>;
+    answersReceived: BehaviorSubject<Answer[]>;
+    questionReceived: BehaviorSubject<Question>;
     private _configuratorApi;
     private _scene;
     private _selections;
@@ -16,10 +20,16 @@ export declare class Builder {
     private _source;
     private _threedUtils;
     private _variationHelper;
+    private _articleCache;
+    private _subs;
     constructor(scene: THREE.Scene, options: Options);
     buildModel(instanceId: string, sku: string, goodId?: number): Promise<THREE.Object3D>;
     initNodeInstance(goodId: number): Promise<any>;
     destroy(): void;
+    selectSelection(selection: Selection): void;
+    getQuestionAndAnswers(): Promise<void>;
+    selectAnswer(answer: Answer): void;
+    private _prepareConfiguration;
     private _build;
     private _prepareTheSelections;
     private _createAdjustable;

package/app/components/answers/answers.component.d.ts

@@ -0,0 +1,6 @@
+import { EventEmitter } from "@angular/core";
+import { Answer } from "@colijnit/configuratorapi/build/src/model/answer";
+export declare class AnswersComponent {
+    answers: Answer[];
+    answerClick: EventEmitter<Answer>;
+}

package/app/components/answers/answers.module.d.ts

@@ -0,0 +1,2 @@
+export declare class AnswersModule {
+}

package/app/components/selections/selections.component.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from "@angular/core";
+import { Selection } from "@colijnit/configuratorapi/build/src/model/selection";
+declare class SelectionViewModel {
+    selection: Selection;
+    children: Selection[];
+    expanded: boolean;
+}
+export declare class SelectionsComponent {
+    set selections(value: Selection[]);
+    selectionViewModels: SelectionViewModel[];
+    selectionClick: EventEmitter<Selection>;
+    expandClicked(selectionViewModel: SelectionViewModel, mouseEvent: MouseEvent): void;
+    selectSelection(selection: Selection, mouseEvent: MouseEvent): void;
+    private _prepareSelections;
+}
+export {};

package/app/components/selections/selections.module.d.ts

@@ -0,0 +1,2 @@
+export declare class SelectionsModule {
+}

package/bundles/colijnit-configurator.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('@colijnit/configuratorapi/build/src/configurator'), require('@colijnit/configuratorapi/build/src/model/deco-node'), require('@colijnit/configuratorapi/build/src/service/business-object-factory'), require('@colijnit/configuratorapi/build/src/model/selection'), require('@colijnit/configuratorapi/build/src/enum/deco-node-type.enum'), require('axios'), require('@colijnit/configuratorapi/build/src/enum/deco-node-kind.enum'), require('jszip'), require('@colijnit/configuratorapi/build/src/model/article'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/configurator', ['exports', 'three', '@colijnit/configuratorapi/build/src/configurator', '@colijnit/configuratorapi/build/src/model/deco-node', '@colijnit/configuratorapi/build/src/service/business-object-factory', '@colijnit/configuratorapi/build/src/model/selection', '@colijnit/configuratorapi/build/src/enum/deco-node-type.enum', 'axios', '@colijnit/configuratorapi/build/src/enum/deco-node-kind.enum', 'jszip', '@colijnit/configuratorapi/build/src/model/article', 'rxjs'], factory) :
-    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.configurator = {}), global.three, global.configurator, global.decoNode, global.businessObjectFactory, global.selection, global.decoNodeType_enum, global.axios, global.decoNodeKind_enum, global.JSZip, global.article, global.rxjs));
-}(this, (function (exports, three, configurator, decoNode, businessObjectFactory, selection, decoNodeType_enum, axios, decoNodeKind_enum, JSZip, article, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three'), require('@colijnit/configuratorapi/build/src/configurator'), require('@colijnit/configuratorapi/build/src/model/deco-node'), require('@colijnit/configuratorapi/build/src/service/business-object-factory'), require('@colijnit/configuratorapi/build/src/model/selection'), require('@colijnit/configuratorapi/build/src/enum/deco-node-type.enum'), require('axios'), require('@colijnit/configuratorapi/build/src/enum/deco-node-kind.enum'), require('jszip'), require('@colijnit/configuratorapi/build/src/model/article'), require('rxjs'), require('@angular/core'), require('@angular/common'), require('@angular/animations')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/configurator', ['exports', 'three', '@colijnit/configuratorapi/build/src/configurator', '@colijnit/configuratorapi/build/src/model/deco-node', '@colijnit/configuratorapi/build/src/service/business-object-factory', '@colijnit/configuratorapi/build/src/model/selection', '@colijnit/configuratorapi/build/src/enum/deco-node-type.enum', 'axios', '@colijnit/configuratorapi/build/src/enum/deco-node-kind.enum', 'jszip', '@colijnit/configuratorapi/build/src/model/article', 'rxjs', '@angular/core', '@angular/common', '@angular/animations'], factory) :
+    (global = global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.configurator = {}), global.three, global.configurator, global.decoNode, global.businessObjectFactory, global.selection, global.decoNodeType_enum, global.axios, global.decoNodeKind_enum, global.JSZip, global.article, global.rxjs, global.ng.core, global.ng.common, global.ng.animations));
+}(this, (function (exports, three, configurator, decoNode, businessObjectFactory, selection, decoNodeType_enum, axios, decoNodeKind_enum, JSZip, article, rxjs, core, common, animations) { 'use strict';
 
     axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
 
@@ -447,7 +447,8 @@
                             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:
@@ -1537,13 +1538,18 @@
 
     var Builder = /** @class */ (function () {
         function Builder(scene, options) {
+            var _this = this;
             this.selectionsReceived = new rxjs.BehaviorSubject([]);
+            this.answersReceived = new rxjs.BehaviorSubject([]);
+            this.questionReceived = new rxjs.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!';
             }
@@ -1555,64 +1561,41 @@
             this._boFactory = new businessObjectFactory.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*/];
                     }
                 });
             });
@@ -1624,6 +1607,47 @@
             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;
@@ -1844,29 +1868,42 @@
                 });
             });
         };
-        Builder.prototype._getArticle = function (id) {
+        Builder.prototype._getArticle = function (sku, goodId) {
             return __awaiter(this, void 0, void 0, function () {
-                var articleResponse, obj;
+                var article$1, 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.Article, obj)];
+                                    article$1 = this._boFactory.makeWithRawBackendData(article.Article, obj);
                                 }
                                 else {
-                                    return [2 /*return*/, this._boFactory.makeWithRawBackendData(article.Article, articleResponse.resultObject)];
+                                    article$1 = this._boFactory.makeWithRawBackendData(article.Article, articleResponse.resultObject);
                                 }
                             }
-                            return [2 /*return*/];
+                            this._articleCache.set(sku, article$1);
+                            return [2 /*return*/, article$1];
                     }
                 });
             });
         };
-        Builder.prototype._getSelections = function () {
+        Builder.prototype._getSelections = function (instanceId) {
             return __awaiter(this, void 0, void 0, function () {
                 var selectionResponse;
                 return __generator(this, function (_a) {
@@ -1878,7 +1915,7 @@
                             selectionResponse = _a.sent();
                             if (selectionResponse.resultObjects && selectionResponse.resultObjects.length > 0) {
                                 this._selections = this._boFactory.makeBOArrayFromRawBackendDataArray(selection.Selection, selectionResponse.resultObjects);
-                                this.selectionsReceived.next(this._selections);
+                                this._selections.forEach(function (s) { return s.instanceId = instanceId; });
                             }
                             else {
                                 throw 'No selections found!';
@@ -1981,7 +2018,139 @@
         return Builder;
     }());
 
+    var AnswersComponent = /** @class */ (function () {
+        function AnswersComponent() {
+            this.answers = [];
+            this.answerClick = new core.EventEmitter();
+        }
+        __decorate([
+            core.Input()
+        ], AnswersComponent.prototype, "answers", void 0);
+        __decorate([
+            core.Output()
+        ], AnswersComponent.prototype, "answerClick", void 0);
+        AnswersComponent = __decorate([
+            core.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([
+            core.NgModule({
+                imports: [
+                    common.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 core.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([
+            core.Input()
+        ], SelectionsComponent.prototype, "selections", null);
+        __decorate([
+            core.Output()
+        ], SelectionsComponent.prototype, "selectionClick", void 0);
+        SelectionsComponent = __decorate([
+            core.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: [
+                    animations.trigger('showHideChildren', [
+                        animations.state('void', animations.style({ 'height': '0' })),
+                        animations.state('*', animations.style({ 'height': '*' })),
+                        animations.transition('void <=> *', animations.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([
+            core.NgModule({
+                imports: [
+                    common.CommonModule
+                ],
+                declarations: [
+                    SelectionsComponent
+                ],
+                exports: [
+                    SelectionsComponent
+                ]
+            })
+        ], SelectionsModule);
+        return SelectionsModule;
+    }());
+
+    exports.AnswersComponent = AnswersComponent;
+    exports.AnswersModule = AnswersModule;
     exports.Builder = Builder;
+    exports.SelectionsComponent = SelectionsComponent;
+    exports.SelectionsModule = SelectionsModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });