zakeke-configurator-react 0.0.72 → 0.0.76

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
+import { FocusAttributesEventListener } from '../../../3D/src';
 import { PlatformAttributeSelection } from './integrations/Integration';
 import { Camera, FontFamily, Group, Image, ImageMacroCategory, Item, Product, Template } from './models';
-import { FocusAttributesEventListener } from '../../../3D/src';
 export declare class ZakekeEnvironment {
     private token;
     private platformAttributesSelection;
@@ -83,7 +83,7 @@ export declare class ZakekeEnvironment {
     private createOptionFromSelection;
     private saveDesignBackbone;
     private saveCompositionBackbone;
-    saveComposition: () => Promise<void>;
+    saveComposition: () => Promise<any>;
     private trigger;
     on: (event: string, callback: any) => void;
     off: (event: string, callback: any) => void;

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

@@ -38,6 +38,7 @@ export declare function hsvToRgb(h: any, s: any, v: any): number[];
 export declare const iOS: boolean;
 export declare function copy(obj: any): any;
 export declare function compare(_obj1: any, _obj2: any): any;
+export declare function isValidJSON(code: string): boolean;
 export declare function isPlatformCode(code: string): any;
 export declare function matchCodes(code1: string, code2: string): any;
 export declare function getPlatformSettings(): PlatformSettings;

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

@@ -1,7 +1,7 @@
-import { FontFamily, Group, Template, Item, Product } from "..";
-import { AppState } from "./state";
-import { Image, ImageMacroCategory, Camera } from "../models";
+import { FontFamily, Group, Item, Product, Template } from "..";
 import { FocusAttributesEventListener } from "../../../../3D/src";
+import { Camera, Image, ImageMacroCategory } from "../models";
+import { AppState } from "./state";
 export interface ProviderValue {
     internalProduct: MPlaza.Model | null;
     internalScene: Zakeke.Scene | null;
@@ -26,6 +26,7 @@ export interface ProviderValue {
     designUpdate: () => void;
     setTemplate: (templateId: number) => void;
     isAreaVisible: (areaId: number) => boolean;
+    saveComposition: () => Promise<string>;
     loadComposition: (id: string) => Promise<void>;
     addToCart: (additionalProperties: Record<string, any>) => Promise<void>;
     getPDF: () => Promise<string>;

package/dist/index.js

@@ -2965,15 +2965,15 @@ class MeshLocationsManager {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MeshDesignManager", function() { return MeshDesignManager; });
-/* harmony import */ var _Helpers_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Helpers/utils */ "../../3D/src/Helpers/utils.ts");
-/* harmony import */ var _NormalMap_ProceduralNormalMap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../NormalMap/ProceduralNormalMap */ "../../3D/src/Components/NormalMap/ProceduralNormalMap.ts");
-/* harmony import */ var _Shadows_InnerShadow__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Shadows/InnerShadow */ "../../3D/src/Components/Shadows/InnerShadow.ts");
-/* harmony import */ var _Shadows_OuterShadow__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Shadows/OuterShadow */ "../../3D/src/Components/Shadows/OuterShadow.ts");
+/* harmony import */ var _Helpers_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Helpers/debounce */ "../../3D/src/Helpers/debounce.ts");
+/* harmony import */ var _Helpers_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Helpers/utils */ "../../3D/src/Helpers/utils.ts");
+/* harmony import */ var _NormalMap_ProceduralNormalMap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../NormalMap/ProceduralNormalMap */ "../../3D/src/Components/NormalMap/ProceduralNormalMap.ts");
+/* harmony import */ var _ProceduralTextures_ForegroundBackgroundProceduralTexture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../ProceduralTextures/ForegroundBackgroundProceduralTexture */ "../../3D/src/Components/ProceduralTextures/ForegroundBackgroundProceduralTexture.ts");
 /* harmony import */ var _ProceduralTextures_MultiplyProceduralTexture__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ProceduralTextures/MultiplyProceduralTexture */ "../../3D/src/Components/ProceduralTextures/MultiplyProceduralTexture.ts");
 /* harmony import */ var _ProceduralTextures_OverlayProceduralTexture__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ProceduralTextures/OverlayProceduralTexture */ "../../3D/src/Components/ProceduralTextures/OverlayProceduralTexture.ts");
-/* harmony import */ var _ProceduralTextures_ForegroundBackgroundProceduralTexture__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../ProceduralTextures/ForegroundBackgroundProceduralTexture */ "../../3D/src/Components/ProceduralTextures/ForegroundBackgroundProceduralTexture.ts");
-/* harmony import */ var _Helpers_debounce__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../Helpers/debounce */ "../../3D/src/Helpers/debounce.ts");
-/* harmony import */ var _SceneHelper__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../SceneHelper */ "../../3D/src/Components/SceneHelper.ts");
+/* harmony import */ var _SceneHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../SceneHelper */ "../../3D/src/Components/SceneHelper.ts");
+/* harmony import */ var _Shadows_InnerShadow__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Shadows/InnerShadow */ "../../3D/src/Components/Shadows/InnerShadow.ts");
+/* harmony import */ var _Shadows_OuterShadow__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Shadows/OuterShadow */ "../../3D/src/Components/Shadows/OuterShadow.ts");
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -3006,7 +3006,7 @@ class MeshDesignManager {
         // disegnato nulla
         this._defaultSize = 1024;
         //private readonly _size = Utils.isIPhoneX() ? 512 : 1024;
-        this._size = _Helpers_utils__WEBPACK_IMPORTED_MODULE_0__["Utils"].isMobile() || _Helpers_utils__WEBPACK_IMPORTED_MODULE_0__["Utils"].isiOS() ? 512 : 1024;
+        this._size = _Helpers_utils__WEBPACK_IMPORTED_MODULE_1__["Utils"].isMobile() || _Helpers_utils__WEBPACK_IMPORTED_MODULE_1__["Utils"].isiOS() ? 512 : 1024;
         this._baseWidth = this._size;
         this._baseHeight = this._size;
         this._textureWidth = this._size;
@@ -3066,7 +3066,7 @@ class MeshDesignManager {
         this._originalViewMatrixValues = null;
         this._grids = [];
         this._scene = scene;
-        this._sceneHelper = new _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"](scene);
+        this._sceneHelper = new _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"](scene);
         this._zkScene = zkScene;
         this._mesh = mesh;
         this._subMesh = subMesh;
@@ -3502,8 +3502,6 @@ class MeshDesignManager {
     setupNormalmapMaterialAsync() {
         return __awaiter(this, void 0, void 0, function* () {
             this.disposeNormalmapMaterial();
-            if (!this._mesh.material)
-                return;
             this._originalMaterial = this._mesh.material;
             let materialId = Zakeke.generateUUID();
             let materialName = "normalmapMaterial - " + materialId;
@@ -3519,7 +3517,7 @@ class MeshDesignManager {
                 this._normalmapMaterial.doNotSerialize = true;
                 this._normalmapMaterial.metadata = {};
                 if (this._originalMaterial)
-                    this._normalmapMaterial.metadata.originalMaterialID = this._mesh.material.id;
+                    this._normalmapMaterial.metadata.originalMaterialID = this._originalMaterial.id;
                 else
                     this._normalmapMaterial.metadata.originalMaterialID = null;
                 this._normalmapMaterial.metadata.isRealMaterial = false;
@@ -3682,41 +3680,45 @@ class MeshDesignManager {
                     this._customizer.fitToScreenMargin = 1;
                     this._customizer.setGrids(this._grids);
                     this._customizer.setDesign(this._zkDesign);
-                    this._customizer.addItemCreatedListener(() => __awaiter(this, void 0, void 0, function* () {
-                        yield this.updateDynamicTextureAsync();
-                        this.fireRenderingNeededEvent();
-                    }));
-                    this._customizer.addItemChangedListener(() => __awaiter(this, void 0, void 0, function* () {
-                        yield this.updateDynamicTextureAsync();
-                        this.fireRenderingNeededEvent();
-                    }));
-                    this._customizer.addItemRemovedListener(() => __awaiter(this, void 0, void 0, function* () {
-                        yield this.updateDynamicTextureAsync();
-                        this.fireRenderingNeededEvent();
-                    }));
-                    this._customizer.addImageLoadedListener(() => __awaiter(this, void 0, void 0, function* () {
-                        yield this.updateDynamicTextureAsync();
-                        this.fireRenderingNeededEvent();
-                    }));
                     yield new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
                         var _a, _b;
                         yield ((_a = this._customizer) === null || _a === void 0 ? void 0 : _a.setSide(this._side));
                         (_b = this._customizer) === null || _b === void 0 ? void 0 : _b.refresh({ boundsToAreas: true }, () => __awaiter(this, void 0, void 0, function* () {
-                            if (this._meshSide) {
-                                let valuesJson = this._meshSide.get("matrix");
-                                if (valuesJson && this._customizer) {
-                                    const values = JSON.parse(valuesJson);
-                                    let matrix = new this._customizer.paper.Matrix(values);
-                                    if (this._defaultSize !== this._size) {
-                                        const scale = this._size / this._defaultSize;
-                                        const scaledMatrix = new this._customizer.paper.Matrix().scale(scale, scale);
-                                        matrix = matrix.prepend(scaledMatrix);
+                            if (this._customizer) {
+                                if (this._meshSide) {
+                                    let valuesJson = this._meshSide.get("matrix");
+                                    if (valuesJson) {
+                                        const values = JSON.parse(valuesJson);
+                                        let matrix = new this._customizer.paper.Matrix(values);
+                                        if (this._defaultSize !== this._size) {
+                                            const scale = this._size / this._defaultSize;
+                                            const scaledMatrix = new this._customizer.paper.Matrix().scale(scale, scale);
+                                            matrix = matrix.prepend(scaledMatrix);
+                                        }
+                                        this._customizer.paper.view.matrix = matrix;
+                                        this._customizer.paper.view.update();
                                     }
-                                    this._customizer.paper.view.matrix = matrix;
-                                    this._customizer.paper.view.update();
                                 }
+                                yield this.updateDynamicTextureAsync();
+                                // Attach events only after the first rendering 
+                                // to avoid concurrent updates
+                                this._customizer.addItemCreatedListener(() => __awaiter(this, void 0, void 0, function* () {
+                                    yield this.updateDynamicTextureAsync();
+                                    this.fireRenderingNeededEvent();
+                                }));
+                                this._customizer.addItemChangedListener(() => __awaiter(this, void 0, void 0, function* () {
+                                    yield this.updateDynamicTextureAsync();
+                                    this.fireRenderingNeededEvent();
+                                }));
+                                this._customizer.addItemRemovedListener(() => __awaiter(this, void 0, void 0, function* () {
+                                    yield this.updateDynamicTextureAsync();
+                                    this.fireRenderingNeededEvent();
+                                }));
+                                this._customizer.addImageLoadedListener(() => __awaiter(this, void 0, void 0, function* () {
+                                    yield this.updateDynamicTextureAsync();
+                                    this.fireRenderingNeededEvent();
+                                }));
                             }
-                            yield this.updateDynamicTextureAsync();
                             resolve();
                         }));
                     }));
@@ -3863,7 +3865,7 @@ class MeshDesignManager {
             if (material) {
                 var textures = material.getActiveTextures();
                 textures.forEach((txt) => __awaiter(this, void 0, void 0, function* () {
-                    yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(txt);
+                    yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(txt);
                 }));
                 //let promises: Promise<void>[] = [];
                 //var textures = material.getActiveTextures();
@@ -3980,7 +3982,7 @@ class MeshDesignManager {
     updateDynamicTextureAsync() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._debouncedUpdateDynamicTexture)
-                this._debouncedUpdateDynamicTexture = Object(_Helpers_debounce__WEBPACK_IMPORTED_MODULE_7__["debounce"])(this.updateDynamicTextureInternalAsync, 150);
+                this._debouncedUpdateDynamicTexture = Object(_Helpers_debounce__WEBPACK_IMPORTED_MODULE_0__["debounce"])(this.updateDynamicTextureInternalAsync, 150);
             this._debouncedUpdateDynamicTexture();
         });
     }
@@ -4024,7 +4026,7 @@ class MeshDesignManager {
             let blobTextureURL = URL.createObjectURL(blob);
             this._dynamicTexture = new BABYLON.Texture(blobTextureURL, this._scene);
             this._dynamicTexture.hasAlpha = true;
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
             if (!isBlank && this._dynamicTexture) {
                 if (normalmapEnabled)
                     yield this.updateNormalmapTextureAsync(normalmapConfig);
@@ -4134,10 +4136,10 @@ class MeshDesignManager {
     updateOpacityTextureAsync() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this._dynamicTexture) {
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
                 // Genero la maschera di opacità a partire dalla texture dinamic
                 if (!this._dynamicOpacityTexture) {
-                    this._dynamicOpacityTexture = new _ProceduralTextures_ForegroundBackgroundProceduralTexture__WEBPACK_IMPORTED_MODULE_6__["ForegroundBackgroundProceduralTexture"]("dynamicOpacity", this._textureWidth, this._scene, this._dynamicTexture);
+                    this._dynamicOpacityTexture = new _ProceduralTextures_ForegroundBackgroundProceduralTexture__WEBPACK_IMPORTED_MODULE_3__["ForegroundBackgroundProceduralTexture"]("dynamicOpacity", this._textureWidth, this._scene, this._dynamicTexture);
                     this._dynamicOpacityTexture.backColor = new BABYLON.Vector3(0, 0, 0);
                     this._dynamicOpacityTexture.foreColor = new BABYLON.Vector3(1, 1, 1);
                     this._dynamicOpacityTexture.refreshRate = 0;
@@ -4145,7 +4147,7 @@ class MeshDesignManager {
                 }
                 if (this._dynamicOpacityTexture) {
                     this._dynamicOpacityTexture.baseTexture = this._dynamicTexture;
-                    yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicOpacityTexture);
+                    yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicOpacityTexture);
                     this._dynamicOpacityTexture.render();
                 }
             }
@@ -4155,8 +4157,8 @@ class MeshDesignManager {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._originalDiffuseTexture || !this._dynamicTexture)
                 return;
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._originalDiffuseTexture);
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._originalDiffuseTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
             const baseTexture = blendLevel === 0 ? this._dynamicTexture : this._originalDiffuseTexture;
             const blendTexture = blendLevel === 0 ? this._originalDiffuseTexture : this._dynamicTexture;
             if (!this._combinedDiffuseTexture) {
@@ -4169,7 +4171,7 @@ class MeshDesignManager {
             if (this._combinedDiffuseTexture) {
                 this._combinedDiffuseTexture.baseTexture = baseTexture;
                 this._combinedDiffuseTexture.blendTexture = blendTexture;
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._combinedDiffuseTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._combinedDiffuseTexture);
                 this._combinedDiffuseTexture.render();
             }
         });
@@ -4178,9 +4180,9 @@ class MeshDesignManager {
     updateNormalmapTextureAsync(config) {
         return __awaiter(this, void 0, void 0, function* () {
             if (this._dynamicTexture) {
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
                 if (!this._proceduralNormalMap) {
-                    this._proceduralNormalMap = new _NormalMap_ProceduralNormalMap__WEBPACK_IMPORTED_MODULE_1__["ProceduralNormalMap"](this._dynamicTexture, this._textureWidth, config, this._scene);
+                    this._proceduralNormalMap = new _NormalMap_ProceduralNormalMap__WEBPACK_IMPORTED_MODULE_2__["ProceduralNormalMap"](this._dynamicTexture, this._textureWidth, config, this._scene);
                 }
                 this._normalmapTexture = yield this._proceduralNormalMap.getNormalMapTextureAsync(this._dynamicTexture, config);
                 if (this._normalmapTexture)
@@ -4193,6 +4195,7 @@ class MeshDesignManager {
     // sul materiale. Inoltre, essendo i materiali clonati (per non modificare quelli originari) è necessario controllare
     // che le texture siano pronte
     setNormalmapTextureAsync(config) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             let meshNormalmapTexture = this._normalmapTexture;
             let designNormalmapTexture = this._normalmapTexture;
@@ -4218,8 +4221,12 @@ class MeshDesignManager {
                     this._normalmapMaterial[propName] = meshNormalmapTexture;
                 else
                     this.resetMeshNormalmapTexture();
-                if (this._mesh.material !== this._normalmapMaterial)
+                if (this._mesh.material !== this._normalmapMaterial) {
                     this._mesh.material = this._normalmapMaterial;
+                    if (!this._mesh.metadata)
+                        this._mesh.metadata = {};
+                    this._mesh.metadata.originalNormalmapMaterialID = (_a = this._originalMaterial) === null || _a === void 0 ? void 0 : _a.id;
+                }
             }
             if (this._dynamicMaterial && designNormalmapTexture) {
                 designNormalmapTexture.coordinatesIndex = this._coordinatesIndex;
@@ -4236,8 +4243,8 @@ class MeshDesignManager {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._originalMeshNormalmapTexture || !this._normalmapTexture)
                 return;
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._originalMeshNormalmapTexture);
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._normalmapTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._originalMeshNormalmapTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._normalmapTexture);
             if (!this._meshCombinedNormalmapTexture) {
                 this._meshCombinedNormalmapTexture = new _ProceduralTextures_OverlayProceduralTexture__WEBPACK_IMPORTED_MODULE_5__["OverlayProceduralTexture"]("overlayMeshNormal", this._textureWidth, this._scene, this._originalMeshNormalmapTexture, this._normalmapTexture);
                 this._meshCombinedNormalmapTexture.refreshRate = 0;
@@ -4245,7 +4252,7 @@ class MeshDesignManager {
             if (this._meshCombinedNormalmapTexture) {
                 this._meshCombinedNormalmapTexture.baseTexture = this._originalMeshNormalmapTexture;
                 this._meshCombinedNormalmapTexture.blendTexture = this._normalmapTexture;
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._meshCombinedNormalmapTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._meshCombinedNormalmapTexture);
                 this._meshCombinedNormalmapTexture.render();
             }
         });
@@ -4276,8 +4283,8 @@ class MeshDesignManager {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._originalDesignNormalmapTexture || !this._normalmapTexture)
                 return;
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._originalDesignNormalmapTexture);
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._normalmapTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._originalDesignNormalmapTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._normalmapTexture);
             if (!this._designCombinedNormalmapTexture) {
                 this._designCombinedNormalmapTexture = new _ProceduralTextures_OverlayProceduralTexture__WEBPACK_IMPORTED_MODULE_5__["OverlayProceduralTexture"]("overlayDesignNormal", this._textureWidth, this._scene, this._originalDesignNormalmapTexture, this._normalmapTexture);
                 this._designCombinedNormalmapTexture.refreshRate = 0;
@@ -4285,7 +4292,7 @@ class MeshDesignManager {
             if (this._designCombinedNormalmapTexture) {
                 this._designCombinedNormalmapTexture.baseTexture = this._originalDesignNormalmapTexture;
                 this._designCombinedNormalmapTexture.blendTexture = this._normalmapTexture;
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._designCombinedNormalmapTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._designCombinedNormalmapTexture);
                 this._designCombinedNormalmapTexture.render();
             }
         });
@@ -4294,9 +4301,9 @@ class MeshDesignManager {
     updateInnerShadowTextureAsync(config) {
         return __awaiter(this, void 0, void 0, function* () {
             if (this._dynamicTexture) {
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
                 if (!this._innerShadowGenerator) {
-                    this._innerShadowGenerator = new _Shadows_InnerShadow__WEBPACK_IMPORTED_MODULE_2__["InnerShadow"](this._dynamicTexture, this._textureWidth, config, this._scene);
+                    this._innerShadowGenerator = new _Shadows_InnerShadow__WEBPACK_IMPORTED_MODULE_7__["InnerShadow"](this._dynamicTexture, this._textureWidth, config, this._scene);
                     this._innerShadowTexture = yield this._innerShadowGenerator.getInnerShadowTextureAsync(this._dynamicTexture);
                     this._innerShadowTexture.coordinatesIndex = this._coordinatesIndex;
                 }
@@ -4325,8 +4332,8 @@ class MeshDesignManager {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._originalDesignLightmapTexture || !this._innerShadowTexture)
                 return;
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._originalDesignLightmapTexture);
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._innerShadowTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._originalDesignLightmapTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._innerShadowTexture);
             if (!this._designCombinedLightmapTexture) {
                 this._designCombinedLightmapTexture = new _ProceduralTextures_MultiplyProceduralTexture__WEBPACK_IMPORTED_MODULE_4__["MultiplyProceduralTexture"]("overlayDesignLightmaps", this._textureWidth, this._scene, this._originalDesignLightmapTexture, this._innerShadowTexture);
                 this._designCombinedLightmapTexture.refreshRate = 0;
@@ -4334,7 +4341,7 @@ class MeshDesignManager {
             if (this._designCombinedLightmapTexture) {
                 this._designCombinedLightmapTexture.baseTexture = this._originalDesignLightmapTexture;
                 this._designCombinedLightmapTexture.blendTexture = this._innerShadowTexture;
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._designCombinedLightmapTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._designCombinedLightmapTexture);
                 this._designCombinedLightmapTexture.render();
             }
         });
@@ -4352,9 +4359,9 @@ class MeshDesignManager {
     updateOuterShadowTextureAsync(config) {
         return __awaiter(this, void 0, void 0, function* () {
             if (this._dynamicTexture) {
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._dynamicTexture);
                 if (!this._outerShadowGenerator) {
-                    this._outerShadowGenerator = new _Shadows_OuterShadow__WEBPACK_IMPORTED_MODULE_3__["OuterShadow"](this._dynamicTexture, this._textureWidth, config, this._scene);
+                    this._outerShadowGenerator = new _Shadows_OuterShadow__WEBPACK_IMPORTED_MODULE_8__["OuterShadow"](this._dynamicTexture, this._textureWidth, config, this._scene);
                     this._outerShadowTexture = yield this._outerShadowGenerator.getOuterShadowTextureAsync(this._dynamicTexture);
                     this._outerShadowTexture.coordinatesIndex = this._coordinatesIndex;
                 }
@@ -4385,8 +4392,8 @@ class MeshDesignManager {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this._originalMeshLightmapTexture || !this._outerShadowTexture)
                 return;
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._originalMeshLightmapTexture);
-            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._outerShadowTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._originalMeshLightmapTexture);
+            yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._outerShadowTexture);
             if (!this._meshCombinedLightmapTexture) {
                 this._meshCombinedLightmapTexture = new _ProceduralTextures_MultiplyProceduralTexture__WEBPACK_IMPORTED_MODULE_4__["MultiplyProceduralTexture"]("overlayMeshLightmap", this._textureWidth, this._scene, this._originalMeshLightmapTexture, this._outerShadowTexture);
                 this._meshCombinedLightmapTexture.refreshRate = 0;
@@ -4394,7 +4401,7 @@ class MeshDesignManager {
             if (this._meshCombinedLightmapTexture) {
                 this._meshCombinedLightmapTexture.baseTexture = this._originalMeshLightmapTexture;
                 this._meshCombinedLightmapTexture.blendTexture = this._outerShadowTexture;
-                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_8__["SceneHelper"].whenTextureIsReadyAsync(this._meshCombinedLightmapTexture);
+                yield _SceneHelper__WEBPACK_IMPORTED_MODULE_6__["SceneHelper"].whenTextureIsReadyAsync(this._meshCombinedLightmapTexture);
                 this._meshCombinedLightmapTexture.render();
             }
         });
@@ -12645,18 +12652,16 @@ class ScenePreviewMaker {
         return this._localEngine;
     }
     createScenePreviewFileAsync(rootUrl, sourceScene, container) {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const serialized = BABYLON.SceneSerializer.Serialize(sourceScene);
             const serializedScene = JSON.stringify(serialized);
             if (serializedScene) {
                 const scene = new BABYLON.Scene(this._localEngine);
-                (_a = this._localEngine) === null || _a === void 0 ? void 0 : _a.runRenderLoop(() => scene.render());
                 if (scene) {
                     const helper = new _SceneHelper__WEBPACK_IMPORTED_MODULE_1__["SceneHelper"](scene);
                     yield new Promise((resolve) => {
                         BABYLON.SceneLoader.Append(rootUrl, "data:" + serializedScene, scene, () => __awaiter(this, void 0, void 0, function* () {
-                            var _a, _b;
+                            var _a, _b, _c;
                             yield scene.whenReadyAsync();
                             if (this._options.camera) {
                                 const arcCamera = scene.activeCamera;
@@ -12671,14 +12676,11 @@ class ScenePreviewMaker {
                                 for (const meshId of this._options.meshesWithCustomizationIds) {
                                     var ourMesh = scene.getMeshByID(meshId);
                                     if (ourMesh) {
-                                        // Remove serialized clone mesh
-                                        if (ourMesh.metadata.iscanvasMesh) {
-                                            ourMesh.dispose();
-                                            continue;
+                                        // Restore the original material id if it was changed from the mesh design manager
+                                        if (ourMesh.metadata.originalNormalmapMaterialID) {
+                                            ourMesh.material = (_a = scene.materials.find(x => x.id === ourMesh.metadata.originalNormalmapMaterialID)) !== null && _a !== void 0 ? _a : null;
                                         }
-                                        // Hide base mesh (TODO: Check where is made in normal sceneviewer)
-                                        ourMesh.isVisible = false;
-                                        yield _Components_DesignManagers_MeshDesignManager__WEBPACK_IMPORTED_MODULE_0__["MeshDesignManager"].createMeshDesignManagerAsync(scene, this._options.zkScene, ourMesh, ourMesh.subMeshes[0], this._options.zkModel, this._options.zkDesign, true);
+                                        yield _Components_DesignManagers_MeshDesignManager__WEBPACK_IMPORTED_MODULE_0__["MeshDesignManager"].createMeshDesignManagerAsync(scene, this._options.zkScene, ourMesh, ourMesh.subMeshes && ourMesh.subMeshes.length > 0 ? ourMesh.subMeshes[0] : null, this._options.zkModel, this._options.zkDesign, true);
                                     }
                                 }
                                 // Sleep
@@ -12689,7 +12691,7 @@ class ScenePreviewMaker {
                                 });
                                 scene.render();
                             }
-                            container.previewFile = yield helper.takeContentScreenshotAsync((_a = this._options.width) !== null && _a !== void 0 ? _a : 1024, (_b = this._options.height) !== null && _b !== void 0 ? _b : 1024);
+                            container.previewFile = yield helper.takeContentScreenshotAsync((_b = this._options.width) !== null && _b !== void 0 ? _b : 1024, (_c = this._options.height) !== null && _c !== void 0 ? _c : 1024);
                             resolve();
                         }));
                     });
@@ -38755,11 +38757,12 @@ class ZakekeEnvironment {
         this.saveComposition = () => __awaiter(this, void 0, void 0, function* () {
             this.composition.set("name", "Default");
             // Save image
-            const data = yield this.viewer.getSceneContentScreenshotAsync(this.previewWidth, this.previewHeight);
+            const data = yield this.viewer.getSceneContentScreenshotAsync(this.previewWidth, this.previewHeight, 0, this.zkCurrentTemplate);
             this.composition.set("previewImageData", data);
             // Save composition
             yield this.saveDesignBackbone();
             yield this.saveCompositionBackbone();
+            return this.composition.get('docID');
         });
         // Events 
         this.trigger = (event, ...params) => {
@@ -39900,16 +39903,24 @@ function compare(_obj1, _obj2) {
             same = false;
         if (v != obj2[k])
             same = false;
-        if (typeof v === "object") {
+        // Check if are valid json
+        if (typeof v === "object" && typeof obj2[k] === "object") {
             same = compare(v, obj2[k]);
         }
+        if (isValidJSON(v) || isValidJSON(obj2[k])) {
+            const a = typeof v === "object" ? v : JSON.parse(v);
+            const b = typeof obj2[k] === "object" ? obj2[k] : JSON.parse(obj2[k]);
+            same = compare(a, b);
+        }
+        if (!same)
+            break;
     }
     return same;
 }
 function isValidJSON(code) {
-    let json = null;
     try {
-        json = JSON.parse(code);
+        JSON.parse(code);
+        return true;
     }
     catch (ex) {
     }
@@ -40835,6 +40846,7 @@ const createProviderValue = (state, dispatch) => {
             yield state.environment.addToCart(additionalProperties);
             dispatch({ type: 'IS_ADD_TO_CART_LOADING', isLoading: false });
         }),
+        saveComposition: state.environment.saveComposition,
         loadComposition: state.environment.loadComposition,
         // Scene manipulation
         getMeshIDbyName: state.environment.getMeshIDbyName.bind(state.environment),

package/package.json

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