zakeke-configurator-react 0.0.111 → 0.0.112

package/dist/declarations/composer/Module/src/environment.d.ts

@@ -40,6 +40,8 @@ export declare class ZakekeEnvironment {
     private enableShareCompositionUrl;
     private sharedCompositionDocId;
     private savedCompositions;
+    private initialSelection;
+    currentAttributesSelection: Object | null;
     sellerSettings: SellerSettings | null;
     get internalProduct(): MPlaza.Model | null;
     get internalScene(): Zakeke.Scene | null;
@@ -86,6 +88,7 @@ export declare class ZakekeEnvironment {
     }) => void;
     renderDesign: _.DebouncedFunc<() => Promise<void>>;
     resize: () => void;
+    private buildRecapProps;
     updateRecapAndExtensionField: () => void;
     private getCurrentExtensionFields;
     private handleSceneLoaded;
@@ -94,6 +97,8 @@ export declare class ZakekeEnvironment {
     private internalLoadDesign;
     loadComposition: (id: string | null) => Promise<void>;
     private internalLoadComposition;
+    cloneSelection: (selection: any) => Zakeke.ComposerSelection;
+    reset: () => Promise<void>;
     private handleAttributeSelectionChanged;
     private handleAttributeEnabled;
     private handleAttributeDisabled;

package/dist/declarations/composer/Module/src/state/providerValue.d.ts

@@ -43,7 +43,13 @@ export interface ProviderValue {
     eventMessages: EventMessage[] | null;
     isAssetsLoading: boolean;
     themeCompositions: ThemeCompositions[] | null;
-    extensionFields: object | null;
+    extensionFields: {
+        name: string;
+        value: number;
+        label: string;
+        formatString: string;
+    }[] | null;
+    currentAttributesSelection: object | null;
     selectOption: (optionId: number) => void;
     internalAppendViewer: (container: HTMLElement) => void;
     designUpdate: () => void;
@@ -116,6 +122,7 @@ export interface ProviderValue {
     saveDraftsComposition: (name: string, tags: string[], isCopy?: boolean) => Promise<void>;
     loadSavedComposition: (docID: string) => Promise<void>;
     deleteSavedComposition: (docId: string) => Promise<void>;
+    reset: () => Promise<void>;
 }
 export declare const createProviderValue: (state: AppState, dispatch: React.Dispatch<any>) => ProviderValue;
 export {};

package/dist/index.js

@@ -3921,18 +3921,27 @@ __webpack_require__.r(__webpack_exports__);
 
 
 class EnvironmentManager {
-    constructor(zkScene, scene) {
+    constructor(zkScene, scene, isHologram = false) {
         this._originalSceneClearColor = null;
         this._originalCameraAutoRotate = null;
         this._environmentHelper = null;
         this._shadowLight = null;
+        this._isHologram = false;
         this._zkScene = zkScene;
         this._scene = scene;
         this._sceneHelper = new _SceneHelper__WEBPACK_IMPORTED_MODULE_0__.SceneHelper(this._scene);
+        this._isHologram = isHologram;
     }
     get scene() {
         return this._scene;
     }
+    get isHologram() {
+        return this._isHologram;
+    }
+    set isHologram(value) {
+        this._isHologram = value;
+        this.update();
+    }
     dispose() {
         if (this._shadowLight)
             this._shadowLight.dispose();
@@ -3950,7 +3959,8 @@ class EnvironmentManager {
     }
     configureSkybox() {
         this.removeOldSkybox();
-        this.createSkybox();
+        if (this._isHologram)
+            this.createSkybox();
     }
     removeOldSkybox() {
         const mesh = this.getSkyboxMesh();
@@ -4055,6 +4065,11 @@ class EnvironmentManager {
     configureScene() {
         if (!this._scene)
             return;
+        this._originalSceneClearColor = this._scene.clearColor.clone();
+        if (this._isHologram) {
+            this._scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);
+            return;
+        }
         var generalConfig = this.getGeneralConfig();
         if (generalConfig) {
             let alpha = null;
@@ -21811,6 +21826,7 @@ SceneEditor.EmptyGroupName = "_dummy_";
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "BroadcastChannelEventType": () => (/* binding */ BroadcastChannelEventType),
 /* harmony export */   "SceneViewer": () => (/* binding */ SceneViewer)
 /* harmony export */ });
 /* harmony import */ var _Components_ActionExecutor_SceneActionExecutor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Components/ActionExecutor/SceneActionExecutor */ "../../3D/src/Components/ActionExecutor/SceneActionExecutor.ts");
@@ -21850,6 +21866,12 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
 
 
 
+var BroadcastChannelEventType;
+(function (BroadcastChannelEventType) {
+    BroadcastChannelEventType["CameraMovement"] = "camera-movement";
+    BroadcastChannelEventType["ScriptExecution"] = "script-execution";
+    BroadcastChannelEventType["DesignChanged"] = "design-changed";
+})(BroadcastChannelEventType || (BroadcastChannelEventType = {}));
 class SceneViewer {
     constructor(options) {
         // Zakeke Scene Model
@@ -21914,6 +21936,9 @@ class SceneViewer {
         this._infoPointsManagerStyle = null;
         this._canShowInfoPoints = true;
         this._canShowInfoPointsContent = true;
+        this._broadcastChannel = null;
+        this._isHologramSource = false;
+        this._isHologram = false;
         this.setCameraLocked = (isBlocked) => {
             if (this._zkScene && this._sceneHelper && this._scene) {
                 this._sceneHelper.setupCamera();
@@ -21972,6 +21997,30 @@ class SceneViewer {
     set antialias(value) {
         this._antialias = value;
     }
+    get isHologramSource() {
+        return this.isHologramSource;
+    }
+    set isHologramSource(value) {
+        this._isHologramSource = value;
+        if (value) {
+            this._isHologram = false;
+            this.detachBroadcastChannelEventHandlers();
+        }
+    }
+    get isHologram() {
+        return this._isHologram;
+    }
+    set isHologram(value) {
+        this._isHologram = value;
+        if (value) {
+            this._isHologramSource = false;
+            this.attachBroadcastChannelEventHandlers();
+        }
+        else {
+            this.detachBroadcastChannelEventHandlers();
+        }
+        this.refreshEnvironment();
+    }
     getAntialiasEnabled() {
         let def = true;
         if (this._zkScene) {
@@ -22149,6 +22198,7 @@ class SceneViewer {
         });
     }
     dispose() {
+        this.closeBroadcastChannel();
         this.removeCanvas();
         this.removeDomElement();
         this.deleteScene();
@@ -22267,6 +22317,21 @@ class SceneViewer {
             yield this.init3DEngineAsync();
         });
     }
+    closeBroadcastChannel() {
+        if (this._broadcastChannel) {
+            this._broadcastChannel.close();
+            this._broadcastChannel = null;
+        }
+    }
+    openBroadcastChannel() {
+        if (!this._broadcastChannel) {
+            this._broadcastChannel = new BroadcastChannel("zakeke-broadcast-channel");
+        }
+    }
+    getOrCreateBroadcastChannel() {
+        this.openBroadcastChannel();
+        return this._broadcastChannel;
+    }
     createEngine() {
         this.deleteScene();
         this.deleteEngine();
@@ -22329,6 +22394,9 @@ class SceneViewer {
                         this._sceneHelper.setMaxZoomPerc(null);
                     this._sceneHelper.setCameraAlphaLimits(lowerAlphaLimit, upperAlphaLimit);
                     this._sceneHelper.setCameraBetaLimits(lowerBetaLimit, upperBetaLimit);
+                    this._camera.onViewMatrixChangedObservable.add(() => {
+                        this.notifyCameraMovement();
+                    });
                     this._camera.onRestoreStateObservable.add(() => {
                         this.setupShaderMaterialsCameraPosition();
                         this.setRenderingNeeded();
@@ -23117,6 +23185,7 @@ class SceneViewer {
         return __awaiter(this, void 0, void 0, function* () {
             if (this._sceneActionsExecutor) {
                 yield this._sceneActionsExecutor.executeScriptAsync(script);
+                this.notifyScriptExecution(script);
                 this.setupShaderMaterialsCameraPosition();
                 this.refreshInfoPoints();
                 this.setLongRenderingNeeded();
@@ -23127,6 +23196,7 @@ class SceneViewer {
         return __awaiter(this, void 0, void 0, function* () {
             if (this._sceneActionsExecutor) {
                 yield this._sceneActionsExecutor.executeActionsAsync(attributeID, selectedValue, actions);
+                this.notifyActionExecution(attributeID, selectedValue, actions);
                 this.setupShaderMaterialsCameraPosition();
                 this.refreshInfoPoints();
                 this.setLongRenderingNeeded();
@@ -23147,8 +23217,8 @@ class SceneViewer {
     }
     refreshEnvironment() {
         if (this._zkScene && this._scene) {
-            if (!this._environmentManager || this._environmentManager.scene != this._scene)
-                this._environmentManager = new _Components_Environment_EnvironmentManager__WEBPACK_IMPORTED_MODULE_4__.EnvironmentManager(this._zkScene, this._scene);
+            if (!this._environmentManager || this._environmentManager.scene != this._scene || this._environmentManager.isHologram != this._isHologram)
+                this._environmentManager = new _Components_Environment_EnvironmentManager__WEBPACK_IMPORTED_MODULE_4__.EnvironmentManager(this._zkScene, this._scene, this._isHologram);
             this._environmentManager.update();
             this.setLongRenderingNeeded();
             if (this._camera && this._camera instanceof BABYLON.ArcRotateCamera)
@@ -23440,7 +23510,6 @@ class SceneViewer {
             let dataUrl = '';
             if (legacyScreenshot) {
                 dataUrl = yield this._sceneHelper.takeContentScreenshotAsync(width, height);
-                console.log({ dataUrlLegacy: dataUrl });
             }
             else {
                 const result = yield _Components_ScenePreview_ScenePreview__WEBPACK_IMPORTED_MODULE_9__.ScenesPreview.getPreviewsAsync(this.scene, this._zkScene.get("rootUrl"), {
@@ -23456,7 +23525,6 @@ class SceneViewer {
                     meshesWithCustomizationIds: canvasMeshesOriginalMeshesIds,
                 });
                 dataUrl = result.previewFile;
-                console.log({ dataUrl });
             }
             // Trim image
             let image = yield _Helpers_utils__WEBPACK_IMPORTED_MODULE_11__.Utils.trimImageAsync(dataUrl);
@@ -23532,7 +23600,10 @@ class SceneViewer {
                         this._sceneDesignManager = null;
                     }
                     this._sceneDesignManager = new _Components_DesignManagers_SceneDesignManager__WEBPACK_IMPORTED_MODULE_2__.SceneDesignManager(this._scene, this._zkScene, this._zkModel, zkDesign, showDesign);
-                    this._sceneDesignManager.addRenderingNeededListener(() => this.setLongRenderingNeeded());
+                    this._sceneDesignManager.addRenderingNeededListener(() => {
+                        this.setLongRenderingNeeded();
+                        this.notifyDesignChanged(zkDesign);
+                    });
                     this._sceneDesignManager.setCustomizerGrids(this._grids);
                     this._sceneDesignManager.setEventMessages(this._designEventMessages);
                     for (const listener of this._designNotifyMessageListeners)
@@ -24168,6 +24239,109 @@ class SceneViewer {
     materialHasLoadingErrorTextues(material) {
         return this._sceneHelper ? this._sceneHelper.materialHasLoadingErrorTextues(material) : false;
     }
+    notifyCameraMovement() {
+        if (this._isHologramSource && this._camera && this._camera instanceof BABYLON.ArcRotateCamera) {
+            let bc = this.getOrCreateBroadcastChannel();
+            bc.postMessage({
+                type: BroadcastChannelEventType.CameraMovement,
+                target: { x: this._camera.target.x, y: this._camera.target.y, z: this._camera.target.z },
+                alpha: this._camera.alpha,
+                beta: this._camera.beta,
+                radius: this._camera.radius
+            });
+        }
+    }
+    notifyScriptExecution(script) {
+        if (this._isHologramSource) {
+            const scriptJson = script.map(s => ({
+                attributeID: s.attributeID,
+                selectedValue: s.selectedValue,
+                actions: s.actions.map(a => a.toJSON())
+                /*
+                actions: s.actions.map(a => ({
+                    attributeGuid: a.get("actionGuid"),
+                    name: a.get("name"),
+                    actionTypeID: a.get("actionTypeID"),
+                    sceneElementTypeID: a.get("sceneElementTypeID"),
+                    selector: a.get("selector"),
+                    propertyName: a.get("propertyName"),
+                    value: a.get("value"),
+                    execOrder: a.get("execOrder"),
+                    deviceTypes: a.get("deviceTypes")
+                }))
+                */
+            }));
+            let bc = this.getOrCreateBroadcastChannel();
+            bc.postMessage({
+                type: BroadcastChannelEventType.ScriptExecution,
+                script: scriptJson
+            });
+        }
+    }
+    notifyDesignChanged(zkDesign) {
+        if (this._isHologramSource) {
+            let bc = this.getOrCreateBroadcastChannel();
+            bc.postMessage({
+                type: BroadcastChannelEventType.DesignChanged,
+                design: zkDesign.toJSON()
+            });
+        }
+    }
+    notifyActionExecution(attributeID, selectedValue, actions) {
+        this.notifyScriptExecution([{
+                attributeID,
+                selectedValue,
+                actions
+            }]);
+    }
+    attachBroadcastChannelEventHandlers() {
+        if (this._isHologram && !this._isHologramSource) {
+            var bc = this.getOrCreateBroadcastChannel();
+            bc.onmessage = (event) => this.onBroadcastMessageReceived(event);
+        }
+    }
+    detachBroadcastChannelEventHandlers() {
+        if (this._broadcastChannel)
+            this._broadcastChannel.onmessage = null;
+    }
+    onBroadcastMessageReceived(event) {
+        if (this._isHologram && event && event.data && event.data.type) {
+            if (event.data.type === BroadcastChannelEventType.CameraMovement) {
+                this.processCameraMovementEvent(event);
+            }
+            else if (event.data.type === BroadcastChannelEventType.ScriptExecution) {
+                this.processScriptExecution(event);
+            }
+            else if (event.data.type === BroadcastChannelEventType.DesignChanged) {
+                this.processDesignChanged(event);
+            }
+        }
+    }
+    processCameraMovementEvent(event) {
+        if (this._camera && this._camera instanceof BABYLON.ArcRotateCamera && event && event.data) {
+            this._camera.target = new BABYLON.Vector3(event.data.target.x, event.data.target.y, event.data.target.z);
+            this._camera.alpha = event.data.alpha;
+            this._camera.beta = event.data.beta;
+            this._camera.radius = event.data.radius;
+            this.setRenderingNeeded();
+        }
+    }
+    processScriptExecution(event) {
+        if (event && event.data && event.data.script && Object.prototype.toString.call(event.data.script) === '[object Array]') {
+            var composerScript = event.data.script.map(s => ({
+                attributeID: s.attributeID,
+                selectedValue: s.selectedValue,
+                actions: s.actions.map(a => new MPlaza.AttributeSceneAction(a))
+            }));
+            this.executeScriptAsync(composerScript);
+        }
+    }
+    processDesignChanged(event) {
+        if (event && event.data && event.data.design) {
+            let zkDesign = new MPlaza.Design(event.data.design);
+            this.renderDesignAsync(zkDesign);
+        }
+    }
 }
 
 
@@ -24187,6 +24361,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "BlendProceduralTexture": () => (/* reexport safe */ _Components_ProceduralTextures_BlendProceduralTexture__WEBPACK_IMPORTED_MODULE_14__.BlendProceduralTexture),
 /* harmony export */   "BlurXProceduralTexture": () => (/* reexport safe */ _Components_ProceduralTextures_BlurXProceduralTexture__WEBPACK_IMPORTED_MODULE_6__.BlurXProceduralTexture),
 /* harmony export */   "BlurYProceduralTexture": () => (/* reexport safe */ _Components_ProceduralTextures_BlurYProceduralTexture__WEBPACK_IMPORTED_MODULE_7__.BlurYProceduralTexture),
+/* harmony export */   "BroadcastChannelEventType": () => (/* reexport safe */ _Viewers_SceneViewer__WEBPACK_IMPORTED_MODULE_48__.BroadcastChannelEventType),
 /* harmony export */   "Database": () => (/* reexport safe */ _Misc_Database__WEBPACK_IMPORTED_MODULE_47__.Database),
 /* harmony export */   "DefaultAssetUrls": () => (/* reexport safe */ _Misc_DefaultAssetUrls__WEBPACK_IMPORTED_MODULE_43__.DefaultAssetUrls),
 /* harmony export */   "DracoCompression": () => (/* reexport safe */ _Components_Draco_DracoCompression__WEBPACK_IMPORTED_MODULE_27__.DracoCompression),
@@ -24759,6 +24934,7 @@ class ZakekeEnvironment {
         this.enableShareCompositionUrl = false;
         this.sharedCompositionDocId = null;
         this.savedCompositions = null;
+        this.currentAttributesSelection = null;
         this.sellerSettings = null;
         this.themeCompositions = null;
         this.currency = 'EUR';
@@ -25110,6 +25286,57 @@ class ZakekeEnvironment {
                 this.viewer.adjustCamera(false);
             }
         };
+        this.buildRecapProps = lodash__WEBPACK_IMPORTED_MODULE_0___default().debounce((selectedOptions) => {
+            if (!this.sellerSettings || !this.sellerSettings.isCompositionRecapEnabled)
+                return;
+            const storeAttr = this.zkProduct.get("attributes");
+            const storeGroups = this.zkProduct.get("attributeGroups");
+            const storeSteps = this.zkProduct.get("attributeSteps");
+            const recapProps = {};
+            selectedOptions.forEach((item) => {
+                const currentAttr = storeAttr.find(attr => attr.get("attributeID") == item.attributeID);
+                const currentOption = currentAttr.get("options").find(opt => opt.get("optionID") == item.optionID);
+                const currentGroup = storeGroups.find(group => group.get("groupID") == currentAttr.get('groupID'));
+                const currentStep = storeSteps.find(step => step.get("stepID") == currentAttr.get('stepID'));
+                let groupName = "";
+                let isOptionEnabled = false;
+                this.selection.get("groups").each(group => {
+                    group.get("attributes").each(attr => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                        const option = attr.get("options").find(x => x.get('optionID') == currentOption.get("optionID"));
+                        if (option && attr.get("enabled")) {
+                            isOptionEnabled = this.isOptionEnabled(currentOption.get("optionID"));
+                            groupName = group.get("name");
+                            if (isOptionEnabled) {
+                                if (!recapProps[(currentAttr.get("name"))]) {
+                                    recapProps[(currentAttr.get("name"))] = {
+                                        groupDisplayOrder: (_a = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.get('displayOrder')) !== null && _a !== void 0 ? _a : 0,
+                                        stepDisplayOrder: (_b = currentStep === null || currentStep === void 0 ? void 0 : currentStep.get('displayOrder')) !== null && _b !== void 0 ? _b : 0,
+                                        attributeDisplayOrder: (_c = currentAttr === null || currentAttr === void 0 ? void 0 : currentAttr.get('displayOrder')) !== null && _c !== void 0 ? _c : 0,
+                                        optionDisplayOrder: (_d = currentOption === null || currentOption === void 0 ? void 0 : currentOption.get('displayOrder')) !== null && _d !== void 0 ? _d : 0,
+                                        value: currentOption.get("name"),
+                                        groupName,
+                                        showGroup: false,
+                                    };
+                                }
+                                else {
+                                    recapProps[(currentAttr.get("name"))].showGroup = true;
+                                    recapProps[`${groupName} ${currentAttr.get("name")}`] = {
+                                        groupDisplayOrder: (_e = currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.get('displayOrder')) !== null && _e !== void 0 ? _e : 0,
+                                        stepDisplayOrder: (_f = currentStep === null || currentStep === void 0 ? void 0 : currentStep.get('displayOrder')) !== null && _f !== void 0 ? _f : 0,
+                                        attributeDisplayOrder: (_g = currentAttr === null || currentAttr === void 0 ? void 0 : currentAttr.get('displayOrder')) !== null && _g !== void 0 ? _g : 0,
+                                        optionDisplayOrder: (_h = currentOption === null || currentOption === void 0 ? void 0 : currentOption.get('displayOrder')) !== null && _h !== void 0 ? _h : 0,
+                                        value: currentOption.get("name"),
+                                        showGroup: false,
+                                    };
+                                }
+                            }
+                        }
+                    });
+                });
+            });
+            this.currentAttributesSelection = recapProps;
+        }, 200);
         this.updateRecapAndExtensionField = () => {
             const selectedOptions = [];
             this.selection.getAllAttributeSelections().forEach(attribute => {
@@ -25123,7 +25350,7 @@ class ZakekeEnvironment {
                 });
             });
             this.getCurrentExtensionFields(selectedOptions);
-            //this.buildRecapProps(selectedOptions);
+            this.buildRecapProps(selectedOptions);
         };
         this.getCurrentExtensionFields = (options) => {
             const propsValues = [];
@@ -25164,6 +25391,9 @@ class ZakekeEnvironment {
             console.log("Scene loaded");
             this.selection = Zakeke.ComposerSelection.CreateComposerSelection(this.zkProduct);
             let currentCompositionId = this.compositionId || this.sharedCompositionDocId;
+            if (this.initialSelection == undefined) {
+                this.initialSelection = this.cloneSelection(this.selection);
+            }
             yield this.internalLoadComposition(currentCompositionId);
             this.trigger("change");
             this.buildStructure();
@@ -25309,6 +25539,75 @@ class ZakekeEnvironment {
             });
             this.updateComposition();
         });
+        this.cloneSelection = (selection) => {
+            const clone = new Zakeke.ComposerSelection();
+            clone.set('zkModel', this.zkProduct);
+            clone.set('attributeDependencies', selection.get('attributeDependencies'));
+            clone.set('optionDependencies', selection.get('optionDependencies'));
+            clone.get('groups').reset();
+            selection.get('groups').each(group => {
+                var cloneGroup = new Zakeke.AttributeGroupSelection();
+                for (const key in group.attributes) {
+                    cloneGroup.set(key, group.attributes[key]);
+                }
+                clone.get('groups').add(cloneGroup);
+            });
+            let idx = 0;
+            clone.get("groups").each((group) => {
+                group.set("attributes", selection.get("groups").at(idx).get("attributes").clone());
+                group.get('attributes').reset();
+                selection.get("groups").at(idx).get("attributes").each(attribute => {
+                    var cloneAttribute = new Zakeke.AttributeSelection();
+                    for (const key in attribute.attributes) {
+                        cloneAttribute.set(key, attribute.attributes[key]);
+                    }
+                    group.get('attributes').add(cloneAttribute);
+                });
+                let idx2 = 0;
+                group.get("attributes").each((attribute) => {
+                    attribute.set("options", selection.get("groups").at(idx).get("attributes").at(idx2).get("options").clone());
+                    attribute.get('options').reset();
+                    selection.get("groups").at(idx).get("attributes").at(idx2).get("options").each(option => {
+                        var cloneOption = new Zakeke.OptionSelection();
+                        for (const key in option.attributes) {
+                            cloneOption.set(key, option.attributes[key]);
+                        }
+                        attribute.get('options').add(cloneOption);
+                    });
+                    idx2++;
+                });
+                idx++;
+            });
+            return clone;
+        };
+        this.reset = () => __awaiter(this, void 0, void 0, function* () {
+            if (!this.initialSelection)
+                return;
+            // this.undoStack = [];
+            // this.redoStack = [];
+            this.selection = this.cloneSelection(this.initialSelection);
+            this.selection.attachEvents();
+            this.selection.on("attributeSelectionChanged", (e) => {
+                this.handleAttributeSelectionChanged(e);
+            });
+            this.selection.on("attributeEnabled", (e) => {
+                this.handleAttributeEnabled(e.attributeID);
+            });
+            this.selection.on("attributeDisabled", (e) => {
+                this.handleAttributeDisabled(e.attributeID);
+            });
+            this.selection.on("attributeOptionEnabled", (e) => {
+                this.handleAttributeOptionEnabled(e.attributeID, e.optionID);
+            });
+            this.selection.on("attributeOptionDisabled", (e) => {
+                this.handleAttributeOptionDisabled(e.attributeID, e.optionID);
+            });
+            let script = this.selection.getAllAttributeTransformationScript();
+            yield this.viewer.executeScriptAsync(script);
+            this.buildStructure();
+            this.updateComposition();
+            this.updateRecapAndExtensionField();
+        });
         this.handleAttributeSelectionChanged = (e) => __awaiter(this, void 0, void 0, function* () {
             yield this.viewer.executeActionsAsync(e.attributeID, e.selectedValue, e.actions);
             this.updateComposition();
@@ -25384,6 +25683,7 @@ class ZakekeEnvironment {
                     }
                 }
             }
+            this.updateRecapAndExtensionField();
         };
         this.isOptionEnabled = (optionId) => {
             let enabled = false;
@@ -27865,6 +28165,7 @@ const createProviderValue = (state, dispatch) => {
         internalScene: state.environment.internalScene,
         internalCurrentTemplate: state.environment.internalCurrentTemplate,
         themeCompositions: state.environment.themeCompositions,
+        currentAttributesSelection: state.environment.currentAttributesSelection,
         isSceneLoading: state.isSceneLoading,
         isAddToCartLoading: state.isAddToCartLoading,
         fonts: state.environment.fonts,
@@ -27888,6 +28189,7 @@ const createProviderValue = (state, dispatch) => {
         loadComposition: state.environment.loadComposition,
         getPDF: state.environment.getPDF.bind(state.environment),
         getOnlineScreenshot: state.environment.getOnlineScreenshot.bind(state.environment),
+        reset: state.environment.reset.bind(state.environment),
         setCamera: state.environment.setCamera.bind(state.environment),
         setCameraByName: state.environment.setCameraByName.bind(state.environment),
         setCameraZoomEnabled: state.environment.setCameraZoomEnabled.bind(state.environment),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zakeke-configurator-react",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/declarations/composer/Module/src/index.d.ts",