@colijnit/configurator 1.0.19 → 1.0.21

package/src/app/builder.ts

@@ -0,0 +1,480 @@
+import * as THREE from "three";
+import {Options} from "@colijnit/ioneconnector/build/model/options";
+import {DataServiceResponseData} from "@colijnit/ioneconnector/build/model/data-service-response-data";
+import {DecoNode} from "@colijnit/configuratorapi/build/model/deco-node";
+import {BusinessObjectFactory} from "@colijnit/ioneconnector/build/service/business-object-factory";
+import {Selection} from "@colijnit/configuratorapi/build/model/selection";
+import {DecoNodeType} from "@colijnit/configuratorapi/build/enum/deco-node-type.enum";
+import {ThreedUtils} from "../utils/threed.utils";
+import {DecoNodeKind} from "@colijnit/configuratorapi/build/enum/deco-node-kind.enum";
+import {SceneUtils} from "../utils/scene-utils";
+import {VariationHelper} from "../helper/variation-helper";
+import {Article} from "@colijnit/configuratorapi/build/model/article";
+import {ConfiguratorService} from './services/configurator.service';
+import {Scene} from 'three';
+import {Injectable} from '@angular/core';
+import {Answer} from '@colijnit/configuratorapi/build/model/answer';
+import {BehaviorSubject} from 'rxjs';
+import {ServiceLocator} from './services/locator.service';
+import {QuestionAndAnswers} from '@colijnit/configuratorapi/build/model/question-and-answers';
+
+@Injectable()
+export class Builder {
+
+    public selectionsReceived: BehaviorSubject<Selection[]> = new BehaviorSubject<Selection[]>([]);
+    public answersReceived: BehaviorSubject<Answer[]> = new BehaviorSubject<Answer[]>([]);
+    public modelLoaded: BehaviorSubject<THREE.Object3D> = new BehaviorSubject<THREE.Object3D>(null);
+
+    private _scene: THREE.Scene;
+    private _instanceId: string;
+    private _sku: string;
+    private _goodId: number;
+    private _selections: Selection[] = [];
+    private _answers: Answer[] = [];
+    private _decos: DecoNode[] = [];
+    private _placedAdjustables: any[] = [];
+    private _placedAddables: any[] = [];
+    private _adjustables: any[] = [];
+    private _addables: any[] = [];
+
+    private _boFactory: BusinessObjectFactory;
+    private _source: THREE.Object3D;
+    private _threedUtils: ThreedUtils;
+    private _variationHelper: VariationHelper;
+    private _articleCache: Map<string, Article> = new Map();
+    private _configuratorService: ConfiguratorService;
+
+    constructor(scene: Scene, options: Options, useInAngular: boolean) {
+        this._boFactory = new BusinessObjectFactory();
+        this._threedUtils = new ThreedUtils();
+        this._variationHelper = new VariationHelper();
+
+        if (!scene) {
+            throw 'No scene object provided!';
+        }
+        if (!options) {
+            throw 'No connection options provided!';
+        }
+        if (useInAngular) {
+            this._configuratorService = ServiceLocator.injector.get(ConfiguratorService);
+        } else {
+            this._configuratorService = new ConfiguratorService(undefined);
+        }
+        this._configuratorService.initApi(options);
+        this._scene = scene;
+    }
+
+    public async buildModel(sku?: string, instanceId?: string, goodId?: number): Promise<THREE.Object3D> {
+        if (!this._scene) {
+            return;
+        }
+        try {
+            await this._setInstanceId(sku, instanceId, goodId);
+            await this._prepareConfiguration(this._sku, this._goodId);
+            if (this._source) {
+                await this._configuratorService.setInstanceToConfigure(this._instanceId);
+                const promises: Promise<any>[] = [];
+                promises.push(this.getQuestionAndAnswers());
+                promises.push(this._getSelections(this._instanceId));
+                promises.push(this._getDecos());
+                await Promise.all(promises);
+                if (this._answers.length > 0) {
+                    return;
+                }
+                this._linkSelectionsAndDecos();
+                return this._build(this._instanceId);
+            } else {
+                throw 'GLB source not found!';
+            }
+        } catch (e) {
+            throw e;
+        }
+    }
+
+    public initNodeInstance(goodId: number): Promise<any> {
+        return this._configuratorService.initNodeInstance(goodId);
+    }
+
+    public destroy(): void {
+        this._threedUtils.clearCache();
+        this._variationHelper.clearCache();
+    }
+
+    public async selectSelection(selection: Selection): Promise<void> {
+        await this._configuratorService.selectSelection(selection, false);
+        this.getQuestionAndAnswers();
+    }
+
+    public async getQuestionAndAnswers(publicationCode?: number): Promise<void> {
+        const questionsAndAnswers: QuestionAndAnswers = await this._configuratorService.getQuestionAndAnswers(false, publicationCode);
+        this._answers = questionsAndAnswers.answers;
+        this.answersReceived.next(questionsAndAnswers.answers);
+    }
+
+    public async selectAnswer(answer: Answer): Promise<void> {
+        await this._configuratorService.selectAnswer(answer, false);
+        this.modelLoaded.next(await this.buildModel());
+    }
+
+    private async _setInstanceId(sku: string, instanceId?: string, goodId?: number): Promise<void> {
+        if (!instanceId && !this._instanceId) {
+            if (!goodId) {
+                goodId = await this._getGoodIdFromSku(sku);
+            }
+            this._goodId = goodId;
+            const result: DataServiceResponseData = await this.initNodeInstance(this._goodId);
+            if (result && result.resultObject) {
+                this._instanceId = result.resultObject;
+            } else {
+                throw 'Failed to initialize node instance';
+            }
+        } else if (!this._instanceId) {
+            this._instanceId = instanceId;
+        }
+        if (!this._sku) {
+            this._sku = sku;
+        }
+    }
+
+    private async _prepareConfiguration(sku: string, goodId?: number): Promise<void> {
+        const article: Article = await this._getArticle(sku, goodId);
+        if (article && article.assetUrl) {
+            this._source = await this._threedUtils.download3DSource(article.assetUrl)
+                .catch((error) => {
+                    throw error;
+                });
+            if (article.contentDeliveryUrl) {
+                this._variationHelper.assetPath =
+                    article.contentDeliveryUrl +
+                    (article.contentDeliveryUrl.endsWith('/') ? '' : '/') +
+                    (article.distSchema ? article.distSchema : 'UP_DBA');
+            }
+        }
+    }
+
+    private async _build(instanceId: string): Promise<THREE.Object3D> {
+        this._reset();
+        const adjustables: Selection[] = this._getAdjustables();
+        if (adjustables && adjustables.length > 0) {
+            const obj: THREE.Object3D = new THREE.Object3D();
+            obj.visible = false; // no need to render visualy
+            this._scene.add(obj);
+            let connected = false;
+            for (let i = 0, len: number = adjustables.length; i < len; i++) {
+                const adjustable: THREE.Object3D = this._createAdjustable(obj, adjustables[i]);
+                if (adjustable) {
+                    for (let ii = 0, lenii: number = this._placedAdjustables.length; ii < lenii; ii++) {
+                        if (SceneUtils.TrySelectorConnection(this._scene,
+                            obj, this._placedAdjustables[ii], adjustable)) {
+                            this._placedAdjustables[ii].visible = true;
+                            adjustable.visible = true;
+                            connected = true;
+                            break;
+                        }
+                        connected = false;
+                    }
+                }
+                if (!connected && this._placedAdjustables.length > 1) {
+                    console.warn('No connection found for: ', adjustable.name);
+                }
+            }
+            this._placeAddables(obj);
+            this._updatePivot(obj);
+            await this._loadVariations(obj, instanceId);
+            this._scene.remove(obj);
+            return obj;
+        } else {
+            throw 'No adjustables found!';
+            // this._building = false;
+            // if (this.selections.length < 2) {
+            //     this._errorService.addError(this.activeInstance, {message: 'NO_SELECTIONS_OR_DECOS', description: 'NO_SELECTIONS_OR_DECOS_INFO'});
+            //     this.buildFinished.next({instanceId: this.activeInstance, resultType: ResultType.NoSelections});
+            // } else if (this.decos.size === 0) {
+            //     this._errorService.addError(this.activeInstance, {message: 'NO_SELECTIONS_OR_DECOS', description: 'NO_SELECTIONS_OR_DECOS_INFO'});
+            //     this.buildFinished.next({instanceId: this.activeInstance, resultType: ResultType.NoDecoNodes});
+            // } else {
+            //     this._errorService.addError(this.activeInstance, {message: 'NO_ADJUSTABLES', description: 'NO_ADJUSTABLES_INFO'});
+            //     this.buildFinished.next({instanceId: this.activeInstance, resultType: ResultType.NoAdjustables});
+            // }
+        }
+    }
+
+    private _prepareTheSelections(): void {
+        // get generic variations
+        const globalVariations: DecoNode[] = this._selections
+            .filter(s => s.generic && (s.decoNode as any).variation && !s.decoNode.type)
+            .map((value: Selection, index: number, array: Selection[]) => {
+                // find selection of variation
+                const sel: Selection = this._selections.find(s => s.artNodeIdDeco === (value.decoNode as any).variation.id);
+                if (sel) {
+                    (value.decoNode as any).variation.supplierArticleNr = sel.supplierArticleNr;
+                }
+                (value.decoNode as any).variation.materialId = value.hdecoGameObject;
+                return (value.decoNode as any).variation;
+            });
+
+        // const usedVariations: FurniturePartVariation[] = [];
+        let globalVariationsRewrite: boolean = true;
+
+        const len: number = this._selections.length;
+        let lastAdded: Selection;
+        let lastAdjustable: Selection;
+        let newPart: boolean = false;
+        let previousPresLevel: number = -1;
+        let positioning: any;
+        for (let i = 0; i < len; i++) {
+            const selection: Selection = this._selections[i];
+            if (selection.presentationLevel === 1) {
+                positioning = selection.hdecoPositioning;
+            }
+            if (selection.presentationLevel > previousPresLevel) {
+                selection.hdecoPositioning = selection.hdecoPositioning || positioning;
+            }
+            if (selection.decoNode) {
+                if (selection.decoNode.type === DecoNodeType.Variation) {
+                    if (lastAdded) {
+                        if (newPart) {
+                            lastAdded.variations = [selection.decoNode];
+                        } else {
+                            lastAdded.variations.push(selection.decoNode);
+                        }
+                        newPart = false;
+                    } else {
+                        if (globalVariationsRewrite) {
+                            globalVariations.length = 0;
+                            globalVariationsRewrite = false;
+                        }
+                        globalVariations.push(selection.decoNode);
+                    }
+                    // const variation: FurniturePartVariation = new FurniturePartVariation();
+                    // variation.BrandId = selection.decoNode.brandId;
+                    // variation.Description = selection.decoNode.gameObjectName;
+                    // variation.MaterialId = (selection.decoNode as any).materialId;
+                    // variation.SupplierArticleNr = (selection.decoNode as any).supplierArticleNr;
+                    // usedVariations.push(variation);
+                    // this._upsertFurniture(this.activeInstance, {
+                    //     Variation: selection.decoNode.brandId,
+                    //     VariationDescription: selection.decoNode.gameObjectName,
+                    //     SupplierArticleNr: (selection.decoNode as any).supplierArticleNr
+                    // });
+                } else if (selection.decoNode.type === DecoNodeType.Part &&
+                    typeof selection.decoNode.gameObjectName === 'string' &&
+                    selection.decoNode.gameObjectName.length) {
+                    if (selection.decoNode.kind === DecoNodeKind.Adjustable) {
+                        selection.variations = globalVariations;
+                        this._adjustables.push(selection);
+                        if (!lastAdded || lastAdded.nodeId !== selection.nodeId) {
+                            newPart = true;
+                        }
+                        lastAdded = selection;
+                        lastAdjustable = selection;
+                    } else if (selection.decoNode.kind === DecoNodeKind.Addable) {
+                        selection.variations = lastAdjustable ? lastAdjustable.variations : globalVariations;
+                        if (lastAdjustable) {
+                            lastAdjustable.addables.push(selection);
+                        }
+                        this._addables.push(selection);
+                        if (!lastAdded || lastAdded.nodeId !== selection.nodeId) {
+                            newPart = true;
+                        }
+                        lastAdded = selection;
+                    }
+                }
+            }
+            previousPresLevel = selection.presentationLevel;
+        }
+        // this._upsertFurniture(this.activeInstance,
+        //   {Variations: usedVariations});
+    }
+
+    private _createAdjustable(parent: THREE.Object3D, adj: Selection): THREE.Object3D {
+        let obj: any = this._source ? this._source.getObjectByName(adj.decoNode.gameObjectName) : null;
+        if (!obj) {
+            // in case of glb files, the importer removes dots from names
+            const name = adj.decoNode.gameObjectName.replace(/[.]/g, '');
+            obj = this._source ? this._source.getObjectByName(name) : null;
+            if (!obj) {
+                // console.warn(`No object with name ${adj.decoNode.gameObjectName} found!`);
+                return null;
+            }
+        }
+        let adjustable: any = obj.clone();
+        adjustable.name = this._createUniqueName(parent, obj);
+        adjustable.userData.selection = adj;
+        adjustable.position.set(0, 0, 0);
+        adjustable.visible = true;
+        parent.add(adjustable);
+        // the object being added to the customFloorGroup is being recreated so we loose the reference
+        // therefor we need to retrieve the created object again
+        // adjustable = parent.getObjectByName(adjustable.name);
+        this._placedAdjustables.push(adjustable);
+        return adjustable;
+    }
+
+    private _createAddable(parent: THREE.Object3D, add: Selection, part2?: any, part1?: any): THREE.Object3D {
+        const obj: any = this._source.getObjectByName(add.decoNode.gameObjectName);
+        if (!obj) {
+            return null;
+        }
+        // const selection: Selection = this._getSelectionFromId(adj.artNodeIdDeco);
+        const addable: any = obj.clone();
+        addable.name = this._createUniqueName(parent, obj);
+        addable.userData.selection = add;
+        addable.position.set(0, 0, 0);
+        addable.visible = true;
+        if (part1 && part2) {
+            parent.add(addable);
+            this._placedAddables.push(addable);
+            return addable;
+        }
+        return addable;
+    }
+
+    private _placeAddables(parent: THREE.Object3D): void {
+        const len: number = this._placedAdjustables.length;
+        for (let i = 0; i < len; i++) {
+            if (this._placedAdjustables[i].userData.hasOwnProperty('selection') && this._placedAdjustables[i].userData.selection) {
+                const adjustableSelection: Selection = this._placedAdjustables[i].userData.selection;
+                if (adjustableSelection) {
+                    const lena: number = adjustableSelection.addables.length;
+                    let conAddable: any;
+                    for (let ia = 0; ia < lena; ia++) {
+                        SceneUtils.TrySelectorConnection(this._scene,
+                            parent, this._placedAdjustables[i], adjustableSelection.addables[ia],
+                            (add, part2?, part1?) => this._createAddable(parent, add, part2, part1));
+                        if (conAddable) {
+                            SceneUtils.TrySelectorConnection(this._scene,
+                                parent, conAddable, adjustableSelection.addables[ia],
+                                (add, part2?, part1?) => this._createAddable(parent, add, part2, part1));
+                        }
+                        conAddable = this._placedAddables[this._placedAddables.length - 1];
+                    }
+                }
+            }
+        }
+    }
+
+    private _createUniqueName(parent: THREE.Object3D, obj: THREE.Object3D): string {
+        let iteration = 0;
+        let name = obj.name;
+        let existingObj = parent.getObjectByName(name);
+        while (existingObj) {
+            iteration++;
+            name = obj.name + (iteration !== 0 ? ('_' + iteration) : '');
+            existingObj = parent.getObjectByName(name);
+        }
+        return name;
+    }
+
+    private async _getGoodIdFromSku(sku: string): Promise<number> {
+        const response: DataServiceResponseData = await this._configuratorService.getGoodIdFromSku(sku, false);
+        if (response.validationResult.success && response.resultObject) {
+            return response.resultObject;
+        }
+    }
+
+    private async _getArticle(sku: string, goodId: number): Promise<Article> {
+        if (this._articleCache.has(sku)) {
+            return this._articleCache.get(sku);
+        }
+        if (!goodId) {
+            goodId = await this._getGoodIdFromSku(sku)
+                .catch((error) => {
+                    throw `Article with sku ${sku} not found!`;
+                });
+        }
+        let article: Article;
+        const articleResponse: DataServiceResponseData = await this._configuratorService.getArticleQuickSel(goodId, false);
+        if (articleResponse.validationResult.success && articleResponse.resultObject) {
+            if (articleResponse.resultObject.hasOwnProperty('oArticle')) {
+                const obj = Array.isArray(articleResponse.resultObject['oArticle']) ? articleResponse.resultObject['oArticle'][0] : articleResponse.resultObject['oArticle'];
+                article = <Article>this._boFactory.makeWithRawBackendData(Article, obj);
+            } else {
+                article = <Article>this._boFactory.makeWithRawBackendData(Article, articleResponse.resultObject);
+            }
+        }
+        this._articleCache.set(sku, article);
+        return article;
+    }
+
+    private async _getSelections(instanceId: string, publicationCode?: number): Promise<void> {
+        this._selections = [];
+        const selectionResponse: DataServiceResponseData = await this._configuratorService.getSelections(false, publicationCode);
+        if (selectionResponse.resultObjects && selectionResponse.resultObjects.length > 0) {
+            this._selections = <Selection[]>this._boFactory.makeBOArrayFromRawBackendDataArray(Selection, selectionResponse.resultObjects);
+            this._selections.forEach(s => s.instanceId = instanceId);
+            // const filtered: Selection[] = this._selections.filter(s => s.nodeType !== NodeType.Article && s.presentationLevel === 1);
+            this.selectionsReceived.next(this._selections);
+        } else {
+            throw 'No selections found!';
+        }
+    }
+
+    private async _getDecos(): Promise<void> {
+        this._decos = [];
+        const decosResponse: DataServiceResponseData = await this._configuratorService.getDecos(false);
+        if (decosResponse.resultObjects && decosResponse.resultObjects.length > 0) {
+            this._decos = <DecoNode[]>this._boFactory.makeBOArrayFromRawBackendDataArray(DecoNode, decosResponse.resultObjects);
+        } else {
+            throw 'No deconodes found!';
+        }
+    }
+
+    private _linkSelectionsAndDecos(): void {
+        const len: number = this._selections.length;
+        for (let i = 0; i < len; i++) {
+            let id: string = this._selections[i].artNodeIdDeco;
+            // if (this._useNodeIdToLink) {
+            //     id = `${this._selections[i].node}_${this._selections[i].artNodeIdDeco}`;
+            // }
+            let deco: any = this._decos.find(d => d.id === id);
+            if (!deco) {
+                deco = new DecoNode();
+            }
+            const variation: any = this._getVariations().find(v => v.parentId === this._selections[i].artNodeIdDeco);
+            if (variation) {
+                deco.variation = variation;
+            }
+            this._selections[i].decoNode = deco;
+        }
+    }
+
+    private _getVariations(): DecoNode[] {
+        return this._decos.filter((deco: DecoNode) => {
+            return deco.type === DecoNodeType.Variation;
+        });
+    }
+
+    private async _loadVariations(obj: THREE.Object3D, instanceId: string): Promise<void> {
+        await this._variationHelper.loadPart(obj, this._adjustables, true);
+        await this._variationHelper.loadVariation(instanceId, obj, this._adjustables, true);
+        await this._variationHelper.loadVariation(instanceId, obj, this._addables, true);
+    }
+
+    private _getAdjustables(): Selection[] {
+        return this._selections.filter(s => {
+            const node: DecoNode = s.decoNode;
+            return node && node.gameObjectName && node.type === DecoNodeType.Part && node.kind === DecoNodeKind.Adjustable;
+        });
+    }
+
+    private _updatePivot(obj: THREE.Object3D) {
+        const boundingBox = new THREE.Box3().setFromObject(obj);
+        const bbCenterPivot = new THREE.Vector3();
+        boundingBox.getCenter(bbCenterPivot);
+        const delta: THREE.Vector3 = new THREE.Vector3().sub(bbCenterPivot).setY(Math.abs(Math.min(boundingBox.min.y, 0)));
+
+        obj.children.forEach((child: any) => {
+            child.position.add(delta);
+        });
+        obj.updateWorldMatrix(false, true);
+    }
+
+    private _reset(): void {
+        this._placedAddables.length = 0;
+        this._placedAdjustables.length = 0;
+        this._adjustables.length = 0;
+        this._addables.length = 0;
+        this._prepareTheSelections();
+    }
+}

package/src/app/components/answers/answer/answer.component.ts

@@ -0,0 +1,61 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ImageCacheService} from '../../../services/image-cache.service';
+import {Answer} from '@colijnit/configuratorapi/build/model/answer';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+@Component({
+  selector: 'answer',
+  template: `
+    <div class="ione-configurator">
+      <div class="answer-wrapper">
+        <div class="answer-content" @answerAppear>
+          <div class="answer-thumbnail">
+            <rp-loader *ngIf="answer.imageData === ''"></rp-loader>
+            <img *ngIf="answer.imageData !== '' && answer.imageData !== null" class="answer-img" [src]="answer.imageData">
+          </div>
+          <div class="answer-title-wrapper">
+            <span class="answer-title" [textContent]="answer.commercialAnswer"></span>
+          </div>
+          <div class="price">
+            <span class="price-value"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styleUrls: [
+    '../../../../style/shared.scss'
+  ],
+  animations: [
+    trigger('answerAppear', [
+      state('void', style({'background': '#dbdbdb'})),
+      state('white', style({'background': 'white'})),
+      transition('void <=> *', animate(500))
+    ])
+  ]
+})
+export class AnswerComponent implements OnInit {
+  @Input()
+  public answer: Answer;
+
+  @Input()
+  public set showing(value: boolean) {
+    this.answer.imageData = '';
+    if (value && this.answer.answer !== 'Skip / Cancel') {
+      this._loadThumbnail(this.answer);
+    } else {
+      this.answer.imageData = null;
+    }
+  }
+
+  constructor(private _imageCacheService: ImageCacheService) { }
+
+  public ngOnInit(): void {
+  }
+
+  private async _loadThumbnail(answer: Answer): Promise<void> {
+    await this._imageCacheService.getImageForSelectionOrAnswer(answer).then((imageSrc: string) => {
+      answer.imageData = imageSrc === "" ? null : imageSrc;
+    });
+  }
+}

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

@@ -0,0 +1,41 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Answer} from "@colijnit/configuratorapi/build/model/answer";
+
+@Component({
+    selector: "answers",
+    template: `
+        <div class="ione-configurator">
+            <div class="rp-answers-slideout">
+                <h2 class="answers-title" [textContent]="selectionTitle"></h2>
+                <div class="answers-container" visibilityObserverMaster>
+                    <answer *ngFor="let answer of answers"
+                            (click)="answerClick.emit(answer)"
+                            [answer]="answer"
+                            visibilityObserver
+                            #intersection="intersection"
+                            [observerEnabled]="true"
+                            [showing]="intersection.isIntersecting"
+                    ></answer>
+                </div>
+                
+            </div>
+        </div>
+    `,
+    styleUrls: [
+        '../../../style/shared.scss'
+    ]
+})
+
+export class AnswersComponent {
+    @Input()
+    public answers: Answer[] = [];
+
+    @Input()
+    public selectionTitle: string;
+
+    @Output()
+    public answerClick: EventEmitter<Answer> = new EventEmitter<Answer>();
+
+    constructor() {}
+
+}

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

@@ -0,0 +1,26 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {AnswersComponent} from "./answers.component";
+import { AnswerComponent } from './answer/answer.component';
+import {VisibilityObserverDirective} from '../../directives/visibility-observer.directive';
+import {VisibilityObserverMasterDirective} from '../../directives/visibility-observer-master.directive';
+import {SharedModule} from '../shared/shared.module';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        SharedModule
+    ],
+    declarations: [
+        AnswersComponent,
+        AnswerComponent,
+        VisibilityObserverDirective,
+        VisibilityObserverMasterDirective
+    ],
+    exports: [
+        AnswersComponent
+    ]
+})
+export class AnswersModule {
+
+}