zakeke-configurator-react 0.0.69 → 0.0.70

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

@@ -115,7 +115,7 @@ export declare class ZakekeEnvironment {
     hasExplodedMode: () => boolean;
     setBackgroundColor: (color: string, alpha: number) => void;
     getCurrentSelection: () => PlatformAttributeSelection[];
-    getScreenshot: (width?: number, height?: number, backgroundColor?: string | null) => Promise<string>;
+    getScreenshot: (width?: number, height?: number, backgroundColor?: string | null, padding?: number) => Promise<string>;
     private fireItemsChange;
     isAreaVisible(areaId: number): boolean;
     removeItem: (guid: string) => Promise<void>;
@@ -143,7 +143,7 @@ export declare class ZakekeEnvironment {
     findObjectByName(name: string): BABYLON.AbstractMesh | null | undefined;
     getPDF: () => Promise<string>;
     private rewriteShareUrl;
-    getOnlineScreenshot: (width: number, height: number, backgroundColor?: string | undefined) => Promise<string>;
+    getOnlineScreenshot: (width: number, height: number, backgroundColor?: string | undefined, padding?: number) => Promise<string>;
     private buildModelViewerUrl;
     isSceneArEnabled: () => boolean;
     private getPregeneratedARUrl;

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

@@ -29,7 +29,7 @@ export interface ProviderValue {
     loadComposition: (id: string) => Promise<void>;
     addToCart: (additionalProperties: Record<string, any>) => Promise<void>;
     getPDF: () => Promise<string>;
-    getOnlineScreenshot: (width: number, height: number, backgroundColor?: string) => Promise<string>;
+    getOnlineScreenshot: (width: number, height: number, backgroundColor?: string, padding?: number) => Promise<string>;
     setCamera: (id: string, onlyAngleOfView?: boolean, animate?: boolean) => void;
     setCameraByName: (name: string, onlyAngleOfView?: boolean, animate?: boolean) => void;
     setCameraZoomEnabled: (enabled: boolean) => void;

package/dist/index.js

@@ -14508,7 +14508,8 @@ var SceneHelper = /** @class */ (function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScenePreviewData", function() { return ScenePreviewData; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ScenesPreview", function() { return ScenesPreview; });
-/* harmony import */ var _SceneHelper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../SceneHelper */ "../../3D/src/Components/SceneHelper.ts");
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../.. */ "../../3D/src/index.ts");
+/* harmony import */ var _SceneHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../SceneHelper */ "../../3D/src/Components/SceneHelper.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) {
@@ -14546,6 +14547,7 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
     }
 };
 
+
 var ScenePreviewData = /** @class */ (function () {
     function ScenePreviewData() {
     }
@@ -14590,7 +14592,7 @@ var ScenePreviewMaker = /** @class */ (function () {
         this.disposeHostingScene();
         this.disposeLocalEngine();
     };
-    ScenePreviewMaker.prototype.getLocalEngine = function () {
+    ScenePreviewMaker.prototype.createLocalEngine = function () {
         var _a, _b;
         if (!this._localEngine) {
             var localCanvas = document.createElement('canvas');
@@ -14601,6 +14603,7 @@ var ScenePreviewMaker = /** @class */ (function () {
             this._localEngine.setSize(localCanvas.width, localCanvas.height);
             this._localEngine.displayLoadingUI = function () { return null; };
             this._localEngine.hideLoadingUI = function () { return null; };
+            document.body.appendChild(localCanvas);
         }
         return this._localEngine;
     };
@@ -14618,16 +14621,16 @@ var ScenePreviewMaker = /** @class */ (function () {
                         scene_1 = new BABYLON.Scene(this._localEngine);
                         (_a = this._localEngine) === null || _a === void 0 ? void 0 : _a.runRenderLoop(function () { return scene_1.render(); });
                         if (!scene_1) return [3 /*break*/, 2];
-                        helper_1 = new _SceneHelper__WEBPACK_IMPORTED_MODULE_0__["SceneHelper"](scene_1);
+                        helper_1 = new _SceneHelper__WEBPACK_IMPORTED_MODULE_1__["SceneHelper"](scene_1);
                         return [4 /*yield*/, new Promise(function (resolve) {
                                 BABYLON.SceneLoader.Append(rootUrl, "data:" + serializedScene, scene_1, function () { return __awaiter(_this, void 0, void 0, function () {
-                                    var arcCamera, _a;
-                                    var _b, _c;
-                                    return __generator(this, function (_d) {
-                                        switch (_d.label) {
+                                    var arcCamera, _i, _a, meshId, ourMesh, _b;
+                                    var _c, _d;
+                                    return __generator(this, function (_e) {
+                                        switch (_e.label) {
                                             case 0: return [4 /*yield*/, scene_1.whenReadyAsync()];
                                             case 1:
-                                                _d.sent();
+                                                _e.sent();
                                                 if (this._options.camera) {
                                                     arcCamera = scene_1.activeCamera;
                                                     arcCamera.alpha = this._options.camera.alpha;
@@ -14636,11 +14639,45 @@ var ScenePreviewMaker = /** @class */ (function () {
                                                 helper_1.setupCamera();
                                                 helper_1.setupLights();
                                                 helper_1.adjustCamera(undefined, true, true, false);
-                                                scene_1.render();
-                                                _a = container;
-                                                return [4 /*yield*/, helper_1.takeContentScreenshotAsync((_b = this._options.width) !== null && _b !== void 0 ? _b : 1024, (_c = this._options.height) !== null && _c !== void 0 ? _c : 1024)];
+                                                if (!(this._options.meshesWithCustomizationIds && this._options.zkDesign && this._options.zkModel && this._options.zkScene)) return [3 /*break*/, 7];
+                                                _i = 0, _a = this._options.meshesWithCustomizationIds;
+                                                _e.label = 2;
                                             case 2:
-                                                _a.previewFile = _d.sent();
+                                                if (!(_i < _a.length)) return [3 /*break*/, 5];
+                                                meshId = _a[_i];
+                                                ourMesh = scene_1.getMeshByID(meshId);
+                                                if (!ourMesh) return [3 /*break*/, 4];
+                                                // Remove serialized clone mesh
+                                                if (ourMesh.metadata.iscanvasMesh) {
+                                                    ourMesh.dispose();
+                                                    return [3 /*break*/, 4];
+                                                }
+                                                // Hide base mesh (TODO: Check where is made in normal sceneviewer)
+                                                ourMesh.isVisible = false;
+                                                return [4 /*yield*/, ___WEBPACK_IMPORTED_MODULE_0__["MeshDesignManager"].createMeshDesignManagerAsync(scene_1, this._options.zkScene, ourMesh, ourMesh.subMeshes[0], this._options.zkModel, this._options.zkDesign, true)];
+                                            case 3:
+                                                _e.sent();
+                                                _e.label = 4;
+                                            case 4:
+                                                _i++;
+                                                return [3 /*break*/, 2];
+                                            case 5: 
+                                            // Sleep
+                                            return [4 /*yield*/, new Promise(function (resolve) {
+                                                    setTimeout(function () {
+                                                        resolve();
+                                                    }, 1000);
+                                                })];
+                                            case 6:
+                                                // Sleep
+                                                _e.sent();
+                                                scene_1.render();
+                                                _e.label = 7;
+                                            case 7:
+                                                _b = container;
+                                                return [4 /*yield*/, helper_1.takeContentScreenshotAsync((_c = this._options.width) !== null && _c !== void 0 ? _c : 1024, (_d = this._options.height) !== null && _d !== void 0 ? _d : 1024)];
+                                            case 8:
+                                                _b.previewFile = _e.sent();
                                                 resolve();
                                                 return [2 /*return*/];
                                         }
@@ -14661,7 +14698,7 @@ var ScenePreviewMaker = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        this.getLocalEngine();
+                        this.createLocalEngine();
                         container = new ScenePreviewData();
                         return [4 /*yield*/, this.createScenePreviewFileAsync(this._rootUrl, this._scene, container)];
                     case 1:
@@ -16320,7 +16357,7 @@ var Utils = /** @class */ (function () {
             return null;
     };
     /** Draw an image from data uri on a width * height canvas, create canvas inside method and return the data uri of canvas */
-    Utils.resizeImageFromDataUri = function (dataUrl, width, height) {
+    Utils.resizeImageFromDataUri = function (dataUrl, width, height, padding) {
         return new Promise(function (resolve) {
             var img = new Image();
             img.crossOrigin = "anonymous";
@@ -16335,7 +16372,7 @@ var Utils = /** @class */ (function () {
                     var ratio = Math.min(width / img.width, height / img.height);
                     var newImageWidth = img.width * ratio;
                     var newImageHeight = img.height * ratio;
-                    context.drawImage(img, 0, 0, img.width, img.height, (width - newImageWidth) / 2, (height - newImageHeight) / 2, newImageWidth, newImageHeight);
+                    context.drawImage(img, 0, 0, img.width, img.height, (width - newImageWidth + padding) / 2, (height - newImageHeight + padding) / 2, newImageWidth - padding, newImageHeight - padding);
                     var dataUrl_1 = canvas.toDataURL();
                     resolve(dataUrl_1);
                 }
@@ -26073,13 +26110,14 @@ var SceneViewer = /** @class */ (function () {
             });
         });
     };
-    SceneViewer.prototype.getSceneContentScreenshotAsync = function (width, height) {
+    SceneViewer.prototype.getSceneContentScreenshotAsync = function (width, height, padding, zkDesign) {
+        if (padding === void 0) { padding = 0; }
         return __awaiter(this, void 0, void 0, function () {
-            var data, image;
+            var canvasMeshesOriginalMeshesIds, data, image;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!this._sceneHelper || !this.scene)
+                        if (!this._sceneHelper || !this.scene || !this.zkModel || !this.zkScene)
                             return [2 /*return*/, null];
                         this.preSceneContentScreenshot();
                         if (this._environmentManager) {
@@ -26087,13 +26125,18 @@ var SceneViewer = /** @class */ (function () {
                             this._environmentManager = null;
                         }
                         this.setRenderingNeeded();
+                        canvasMeshesOriginalMeshesIds = this.scene.meshes.filter(function (x) { var _a; return (_a = x.metadata) === null || _a === void 0 ? void 0 : _a.iscanvasMesh; }).map(function (x) { return x.metadata.originalMeshID; });
                         return [4 /*yield*/, _Components_ScenePreview_ScenePreview__WEBPACK_IMPORTED_MODULE_13__["ScenesPreview"].getPreviewsAsync(this.scene, this._zkScene.get("rootUrl"), {
                                 width: 1024,
                                 height: 1024,
                                 camera: {
                                     alpha: this.scene.activeCamera.alpha,
                                     beta: this.scene.activeCamera.beta,
-                                }
+                                },
+                                zkScene: this._zkScene,
+                                zkModel: this._zkModel,
+                                zkDesign: zkDesign,
+                                meshesWithCustomizationIds: canvasMeshesOriginalMeshesIds,
                             })];
                     case 1:
                         data = _a.sent();
@@ -26102,7 +26145,7 @@ var SceneViewer = /** @class */ (function () {
                         image = _a.sent();
                         if (!image)
                             throw new Error('Failed cropping image.');
-                        return [4 /*yield*/, _Helpers_utils__WEBPACK_IMPORTED_MODULE_7__["Utils"].resizeImageFromDataUri(image, width, height)];
+                        return [4 /*yield*/, _Helpers_utils__WEBPACK_IMPORTED_MODULE_7__["Utils"].resizeImageFromDataUri(image, width, height, padding)];
                     case 3:
                         // Place on a fixed size canvas
                         image = _a.sent();
@@ -42496,15 +42539,16 @@ var ZakekeEnvironment = /** @class */ (function () {
         this.getCurrentSelection = function () {
             return lodash__WEBPACK_IMPORTED_MODULE_0___default.a.cloneDeep(_this.platformAttributesSelection);
         };
-        this.getScreenshot = function (width, height, backgroundColor) {
+        this.getScreenshot = function (width, height, backgroundColor, padding) {
             if (width === void 0) { width = 1024; }
             if (height === void 0) { height = 1024; }
             if (backgroundColor === void 0) { backgroundColor = null; }
+            if (padding === void 0) { padding = 0; }
             return __awaiter(_this, void 0, void 0, function () {
                 var url;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this.viewer.getSceneContentScreenshotAsync(width, height)];
+                        case 0: return [4 /*yield*/, this.viewer.getSceneContentScreenshotAsync(width, height, padding, this.zkCurrentTemplate)];
                         case 1:
                             url = _a.sent();
                             if (!url)
@@ -42530,7 +42574,9 @@ var ZakekeEnvironment = /** @class */ (function () {
                         case 2:
                             _a.sent();
                             _a.label = 3;
-                        case 3: return [2 /*return*/, url];
+                        case 3:
+                            console.log({ url: url });
+                            return [2 /*return*/, url];
                     }
                 });
             });
@@ -42811,21 +42857,24 @@ var ZakekeEnvironment = /** @class */ (function () {
             }
             return url;
         };
-        this.getOnlineScreenshot = function (width, height, backgroundColor) { return __awaiter(_this, void 0, void 0, function () {
-            var preview, url;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.getScreenshot(width, height, backgroundColor)];
-                    case 1:
-                        preview = _a.sent();
-                        return [4 /*yield*/, _api__WEBPACK_IMPORTED_MODULE_7__["axiosApi"].post(Zakeke.config.baseApiUrl + "designs/save-share-preview", { preview: preview })];
-                    case 2:
-                        url = (_a.sent()).data.url;
-                        url = this.rewriteShareUrl(url);
-                        return [2 /*return*/, url];
-                }
+        this.getOnlineScreenshot = function (width, height, backgroundColor, padding) {
+            if (padding === void 0) { padding = 30; }
+            return __awaiter(_this, void 0, void 0, function () {
+                var preview, url;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.getScreenshot(width, height, backgroundColor, padding)];
+                        case 1:
+                            preview = _a.sent();
+                            return [4 /*yield*/, _api__WEBPACK_IMPORTED_MODULE_7__["axiosApi"].post(Zakeke.config.baseApiUrl + "designs/save-share-preview", { preview: preview })];
+                        case 2:
+                            url = (_a.sent()).data.url;
+                            url = this.rewriteShareUrl(url);
+                            return [2 /*return*/, url];
+                    }
+                });
             });
-        }); };
+        };
         // AR - Augmented Reality
         this.buildModelViewerUrl = function (fileInfos) {
             var url = Zakeke.config.baseUrl + "ModelViewer";

package/package.json

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