@configuratorware/configurator-frontendgui 1.52.0 → 1.53.0

package/App/Services/VisualizationService.js

@@ -9,6 +9,7 @@ var _find = _interopRequireDefault(require("lodash/find"));
 var _flow = _interopRequireDefault(require("lodash/flow"));
 var _Constants = require("redhotmagma-visualization/Constants");
 var _visualizationAdapterCreator = require("redhotmagma-visualization/visualizationAdapterCreator");
+var _ExposedModules = require("redhotmagma-visualization/ExposedModules");
 var _AbstractVisualizationService = _interopRequireDefault(require("../../Framework/Services/AbstractVisualizationService"));
 var _i18n = require("../../Framework/i18n");
 var _ServiceLocator = require("../ServiceLocator");
@@ -48,6 +49,19 @@ var EventTypes = {
   ComponentChange: 'VisualizationService/ComponentChange',
   VisualizationUpdate: 'VisualizationService/VisualizationUpdate'
 };
+
+// if the visualization script is configured, load it asap
+var visualizationScriptSrc = (0, _configuration.getConf)('visualization.useVisualizationScript.src', false);
+var visualizationScriptPromise = new Promise(function (resolve, reject) {
+  if (!visualizationScriptSrc) {
+    resolve();
+  }
+  var script = document.createElement('script');
+  script.onload = resolve;
+  script.onerror = reject;
+  document.head.appendChild(script);
+  script.src = visualizationScriptSrc;
+});
 var VisualizationService = exports["default"] = /*#__PURE__*/function (_AbstractVisualizatio) {
   function VisualizationService() {
     var _this;
@@ -270,6 +284,16 @@ var VisualizationService = exports["default"] = /*#__PURE__*/function (_Abstract
       }
       (0, _sendMessage["default"])(this._component, 'dispose');
       this._component = component;
+      visualizationScriptPromise === null || visualizationScriptPromise === void 0 || visualizationScriptPromise.then(function () {
+        var _window$initVisualiza, _window;
+        (_window$initVisualiza = (_window = window).initVisualizationScript) === null || _window$initVisualiza === void 0 || _window$initVisualiza.call(_window, component, {
+          THREE: _ExposedModules.THREE,
+          TWEEN: _ExposedModules.TWEEN
+        });
+      })["catch"](function (e) {
+        // eslint-disable-next-line no-console
+        console.error('Error while loading visualization script', e);
+      });
       if ((0, _Selectors2.isDesignerProductPreviewMode)()) {
         (0, _sendMessage["default"])(component, 'init');
         (0, _sendMessage["default"])(component, 'setSize', {

package/App/configuration.js

@@ -164,6 +164,9 @@ var applicationConfiguration = {
     // when the PostMessage mode is used the targetOrigin can be specified, otherwise '*' will be used
   },
   visualization: {
+    useVisualizationScript: {
+      src: '' // source of the visualization script in the public folder, e.g. 'visualization.js'
+    },
     designAreaHighlightBackgroundColor: 'transparent',
     options: {
       // when zoom = 1 use NearestFilter (for sharper product image)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.52.0",
+  "version": "1.53.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.52.0",
+    "@configuratorware/scripts": "1.53.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.52.0",
-    "redhotmagma-visualization": "1.52.0",
+    "redhotmagma-graphics-editor": "1.53.0",
+    "redhotmagma-visualization": "1.53.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Services/VisualizationService.js

@@ -7,6 +7,7 @@ import {
     createAdapterConfig,
     createVisualizationAdapter,
 } from 'redhotmagma-visualization/visualizationAdapterCreator';
+import { THREE, TWEEN } from 'redhotmagma-visualization/ExposedModules';
 
 import AbstractVisualizationService from 'Framework/Services/AbstractVisualizationService';
 import { t } from 'Framework/i18n';
@@ -33,6 +34,19 @@ const EventTypes = {
     VisualizationUpdate: 'VisualizationService/VisualizationUpdate',
 };
 
+// if the visualization script is configured, load it asap
+const visualizationScriptSrc = getConf('visualization.useVisualizationScript.src', false);
+const visualizationScriptPromise = new Promise((resolve, reject) => {
+    if (!visualizationScriptSrc) {
+        resolve();
+    }
+    const script = document.createElement('script');
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+    script.src = visualizationScriptSrc;
+});
+
 export default class VisualizationService extends AbstractVisualizationService {
     observable = new Observable(this);
 
@@ -190,6 +204,15 @@ export default class VisualizationService extends AbstractVisualizationService {
 
         this._component = component;
 
+        visualizationScriptPromise
+            ?.then(() => {
+                window.initVisualizationScript?.(component, { THREE, TWEEN });
+            })
+            .catch(e => {
+                // eslint-disable-next-line no-console
+                console.error('Error while loading visualization script', e);
+            });
+
         if (isDesignerProductPreviewMode()) {
             sendMessage(component, 'init');
             sendMessage(component, 'setSize', { width: 10, height: 10 });

package/src/App/configuration.js

@@ -182,6 +182,9 @@ let applicationConfiguration = {
     },
 
     visualization: {
+        useVisualizationScript: {
+            src: '', // source of the visualization script in the public folder, e.g. 'visualization.js'
+        },
         designAreaHighlightBackgroundColor: 'transparent',
         options: {
             // when zoom = 1 use NearestFilter (for sharper product image)