redhotmagma-visualization 1.54.2 → 1.55.0

package/Three/Three2D.js

@@ -705,7 +705,7 @@ export var Three2D = /*#__PURE__*/function (_ThreeBase) {
     value: function getModelPath() {
       var _this6 = this;
       if (this._modelPath) {
-        return [this._modelBasePath, this._modelPath].join("/");
+        return this._modelPath.startsWith("http") ? this._modelPath : "".concat(this._modelBasePath, "/").concat(this._modelPath);
       }
       var pathChunks = ["_basePath", "_itemPath", "_viewPath", "_materialVariantPath"];
       var parts = pathChunks.map(function (pathName) {

package/Three/Three2DLayers.js

@@ -198,7 +198,7 @@ export var Three2DLayers = /*#__PURE__*/function (_Three2D) {
     value: function getModelPath() {
       var _this3 = this;
       return this._modelPathList.map(function (path) {
-        return _this3._modelBasePath + path;
+        return path.startsWith("http") ? path : "".concat(_this3._modelBasePath, "/").concat(path.replace(/^\//, ""));
       });
     }
   }, {

package/Three/Three3DScene.js

@@ -1,3 +1,6 @@
+var _excluded = ["modelFileName"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
@@ -876,12 +879,8 @@ export var Three3DScene = /*#__PURE__*/function (_Three3D) {
         path = getSrc(item);
       }
       var _this$parseModelPath = this.parseModelPath(path),
-        resourcePath = _this$parseModelPath.resourcePath,
-        modelFileName = _this$parseModelPath.modelFileName;
-      var loaderOptions = {
-        basePath: this._modelBasePath,
-        resourcePath: resourcePath
-      };
+        modelFileName = _this$parseModelPath.modelFileName,
+        loaderOptions = _objectWithoutProperties(_this$parseModelPath, _excluded);
       var modelLoader = this.createLoader(loaderOptions);
       var imageLoader = this.createImageLoader(loaderOptions);
       return new Promise(function (resolve, reject) {
@@ -978,9 +977,11 @@ export var Three3DScene = /*#__PURE__*/function (_Three3D) {
       if (!matches.length) {
         throw new Error("Model path cannot be parsed: " + path);
       }
-      var resourcePath = "/" + matches[1];
+      var resourcePath = matches[1].startsWith("http") ? matches[1] : "/".concat(matches[1]);
       var modelFileName = matches[2];
+      var basePath = resourcePath.startsWith("http") ? "" : this._modelBasePath;
       return {
+        basePath: basePath,
         resourcePath: resourcePath,
         modelFileName: modelFileName
       };
@@ -1118,12 +1119,7 @@ export var Three3DScene = /*#__PURE__*/function (_Three3D) {
                   return userData.path === itemSrc && userData.index === item.index;
                 });
                 var path = getSrc(item);
-                var _this8$parseModelPath = _this8.parseModelPath(path),
-                  resourcePath = _this8$parseModelPath.resourcePath;
-                var loaderOptions = {
-                  basePath: _this8._modelBasePath,
-                  resourcePath: resourcePath
-                };
+                var loaderOptions = _this8.parseModelPath(path);
                 var imageLoader = _this8.createImageLoader(loaderOptions);
                 return object && _this8.applyCustomizations(object, item, imageLoader);
               }));

package/Utils/TextureBuilder/createTextureBuilder.js

@@ -110,26 +110,86 @@ export var createTextureBuilder = function createTextureBuilder(textureImage) {
         return _ref2.apply(this, arguments);
       };
     }();
+    var drawCanvasToAreaDirect = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(_ref3) {
+        var drawToContext, designArea, baseShape, position, type, _calculateDesignAreaS2, width, height, _scaling2, _t3, _t4;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.p = _context2.n) {
+            case 0:
+              drawToContext = _ref3.drawToContext, designArea = _ref3.designArea;
+              baseShape = designArea.baseShape, position = designArea.position;
+              if (!(!baseShape || !position)) {
+                _context2.n = 1;
+                break;
+              }
+              // eslint-disable-next-line no-console
+              console.log("No design area provided.");
+              return _context2.a(2);
+            case 1:
+              type = baseShape.type;
+              _t3 = type;
+              _context2.n = _t3 === "Plane" ? 2 : _t3 === "Cylinder" ? 2 : 8;
+              break;
+            case 2:
+              _calculateDesignAreaS2 = calculateDesignAreaSize(designArea), width = _calculateDesignAreaS2.width, height = _calculateDesignAreaS2.height, _scaling2 = _calculateDesignAreaS2.scaling;
+              ctx.save();
+              transformCanvas(ctx, getTransformProps(baseShape, position), _scaling2);
+              _context2.p = 3;
+              _context2.n = 4;
+              return drawToContext(ctx, 0, 0, width, height, {
+                currentZoom: currentZoom
+              });
+            case 4:
+              _context2.n = 6;
+              break;
+            case 5:
+              _context2.p = 5;
+              _t4 = _context2.v;
+              // eslint-disable-next-line no-console
+              console.error("Transfering design to the visualization failed due to the following error.", _t4);
+              return _context2.a(2);
+            case 6:
+              _context2.p = 6;
+              ctx.restore();
+              return _context2.f(6);
+            case 7:
+              return _context2.a(3, 9);
+            case 8:
+              // eslint-disable-next-line no-console
+              console.error("Unknown baseShape type: ".concat(type, ". Texture update will be skipped."));
+              return _context2.a(2);
+            case 9:
+              return _context2.a(2);
+          }
+        }, _callee2, null, [[3, 5, 6, 7]]);
+      }));
+      return function drawCanvasToAreaDirect(_x2) {
+        return _ref4.apply(this, arguments);
+      };
+    }();
     var highlightDesignAreas = function highlightDesignAreas(designAreas) {
-      designAreas.forEach(function (designArea) {
-        var baseShape = designArea.baseShape,
-          position = designArea.position;
-        if (!baseShape || !position) {
-          return;
-        }
-        ctx.save();
-        var _calculateDesignAreaS2 = calculateDesignAreaSize(designArea),
-          scaling = _calculateDesignAreaS2.scaling,
-          size = _objectWithoutProperties(_calculateDesignAreaS2, _excluded);
-        transformCanvas(ctx, getTransformProps(baseShape, position), scaling);
-        var highlight = configObject.highlight;
-        var _highlight$lineWidth = highlight.lineWidth,
-          lineWidth = _highlight$lineWidth === void 0 ? 2 : _highlight$lineWidth;
-        highlightArea(ctx, size, _objectSpread(_objectSpread({}, highlight), {}, {
-          lineWidth: Math.ceil(lineWidth / currentZoom)
-        }));
-        ctx.restore();
-      });
+      designAreas.forEach(highlightDesignArea);
+    };
+    var highlightDesignArea = function highlightDesignArea(designArea) {
+      var baseShape = designArea.baseShape,
+        position = designArea.position;
+      if (!baseShape || !position) {
+        return;
+      }
+      ctx.save();
+      var _calculateDesignAreaS3 = calculateDesignAreaSize(designArea),
+        scaling = _calculateDesignAreaS3.scaling,
+        size = _objectWithoutProperties(_calculateDesignAreaS3, _excluded);
+      transformCanvas(ctx, getTransformProps(baseShape, position), scaling);
+      var highlight = configObject.highlight,
+        _configObject$highlig = configObject.highlightFunction,
+        highlightFunction = _configObject$highlig === void 0 ? highlightArea : _configObject$highlig;
+      var _highlight$lineWidth = highlight.lineWidth,
+        lineWidth = _highlight$lineWidth === void 0 ? 2 : _highlight$lineWidth;
+      highlightFunction(ctx, size, _objectSpread(_objectSpread({}, highlight), {}, {
+        lineWidth: Math.ceil(lineWidth / currentZoom)
+      }));
+      ctx.restore();
     };
     var drawOn = function drawOn(ctx) {
       ctx.drawImage(canvas, 0, 0);
@@ -142,6 +202,8 @@ export var createTextureBuilder = function createTextureBuilder(textureImage) {
     };
     return {
       drawCanvasToArea: drawCanvasToArea,
+      drawCanvasToAreaDirect: drawCanvasToAreaDirect,
+      highlightDesignArea: highlightDesignArea,
       highlightDesignAreas: highlightDesignAreas,
       drawOn: drawOn,
       getTextureImage: getTextureImage,
@@ -238,12 +300,12 @@ export var highlightArea = function highlightArea(ctx, size) {
   var lineWidthHalf = lineWidth / 2;
   ctx.strokeRect(lineWidthHalf, lineWidthHalf, width - lineWidth, height - lineWidth);
 };
-export var getPositionWithPadding = function getPositionWithPadding(_ref3, padding) {
-  var x = _ref3.x,
-    y = _ref3.y,
-    width = _ref3.width,
-    height = _ref3.height,
-    otherProps = _objectWithoutProperties(_ref3, _excluded2);
+export var getPositionWithPadding = function getPositionWithPadding(_ref5, padding) {
+  var x = _ref5.x,
+    y = _ref5.y,
+    width = _ref5.width,
+    height = _ref5.height,
+    otherProps = _objectWithoutProperties(_ref5, _excluded2);
   return _objectSpread(_objectSpread({}, otherProps), {}, {
     x: x - padding,
     y: y - padding,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "redhotmagma-visualization",
-  "version": "1.54.2",
+  "version": "1.55.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.54.2",
+    "@configuratorware/scripts": "1.55.0",
     "@tweenjs/tween.js": "^17.6.0",
     "console-polyfill": "^0.3.0",
     "css-element-queries": "^1.2.3",

package/src/Three/Three2D.js

@@ -457,7 +457,9 @@ export class Three2D extends ThreeBase {
 
   getModelPath() {
     if (this._modelPath) {
-      return [this._modelBasePath, this._modelPath].join("/");
+      return this._modelPath.startsWith("http")
+        ? this._modelPath
+        : `${this._modelBasePath}/${this._modelPath}`;
     }
 
     const pathChunks = ["_basePath", "_itemPath", "_viewPath", "_materialVariantPath"];

package/src/Three/Three2DLayers.js

@@ -97,7 +97,9 @@ export class Three2DLayers extends Three2D {
   }
 
   getModelPath() {
-    return this._modelPathList.map(path => this._modelBasePath + path);
+    return this._modelPathList.map(path =>
+      path.startsWith("http") ? path : `${this._modelBasePath}/${path.replace(/^\//, "")}`
+    );
   }
 
   getModelPathFromDesignView(designView) {

package/src/Three/Three3DScene.js

@@ -729,12 +729,7 @@ export class Three3DScene extends Three3D {
     } else if ("object" === itemType) {
       path = getSrc(item);
     }
-    const { resourcePath, modelFileName } = this.parseModelPath(path);
-
-    const loaderOptions = {
-      basePath: this._modelBasePath,
-      resourcePath,
-    };
+    const { modelFileName, ...loaderOptions } = this.parseModelPath(path);
 
     const modelLoader = this.createLoader(loaderOptions);
     const imageLoader = this.createImageLoader(loaderOptions);
@@ -792,9 +787,11 @@ export class Three3DScene extends Three3D {
     if (!matches.length) {
       throw new Error("Model path cannot be parsed: " + path);
     }
-    const resourcePath = "/" + matches[1];
+    const resourcePath = matches[1].startsWith("http") ? matches[1] : `/${matches[1]}`;
     const modelFileName = matches[2];
+    const basePath = resourcePath.startsWith("http") ? "" : this._modelBasePath;
     return {
+      basePath,
       resourcePath,
       modelFileName,
     };
@@ -914,11 +911,7 @@ export class Three3DScene extends Three3D {
         );
 
         const path = getSrc(item);
-        const { resourcePath } = this.parseModelPath(path);
-        const loaderOptions = {
-          basePath: this._modelBasePath,
-          resourcePath,
-        };
+        const loaderOptions = this.parseModelPath(path);
         const imageLoader = this.createImageLoader(loaderOptions);
 
         return object && this.applyCustomizations(object, item, imageLoader);

package/src/Utils/TextureBuilder/createTextureBuilder.js

@@ -72,28 +72,69 @@ export const createTextureBuilder = (textureImage, params = {}) => {
       }
     };
 
-    const highlightDesignAreas = designAreas => {
-      designAreas.forEach(designArea => {
-        const { baseShape, position } = designArea;
-        if (!baseShape || !position) {
+    const drawCanvasToAreaDirect = async ({ drawToContext, designArea }) => {
+      const { baseShape, position } = designArea;
+      if (!baseShape || !position) {
+        // eslint-disable-next-line no-console
+        console.log("No design area provided.");
+        return;
+      }
+      const { type } = baseShape;
+      switch (type) {
+        case "Plane":
+        case "Cylinder": {
+          const { width, height, scaling } = calculateDesignAreaSize(designArea);
+          ctx.save();
+          transformCanvas(ctx, getTransformProps(baseShape, position), scaling);
+          try {
+            await drawToContext(ctx, 0, 0, width, height, {
+              currentZoom,
+            });
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(
+              "Transfering design to the visualization failed due to the following error.",
+              e
+            );
+            return;
+          } finally {
+            ctx.restore();
+          }
+
+          break;
+        }
+        default: {
+          // eslint-disable-next-line no-console
+          console.error(`Unknown baseShape type: ${type}. Texture update will be skipped.`);
           return;
         }
-        ctx.save();
+      }
+    };
+
+    const highlightDesignAreas = designAreas => {
+      designAreas.forEach(highlightDesignArea);
+    };
 
-        const { scaling, ...size } = calculateDesignAreaSize(designArea);
+    const highlightDesignArea = designArea => {
+      const { baseShape, position } = designArea;
+      if (!baseShape || !position) {
+        return;
+      }
+      ctx.save();
 
-        transformCanvas(ctx, getTransformProps(baseShape, position), scaling);
+      const { scaling, ...size } = calculateDesignAreaSize(designArea);
 
-        const { highlight } = configObject;
-        const { lineWidth = 2 } = highlight;
+      transformCanvas(ctx, getTransformProps(baseShape, position), scaling);
 
-        highlightArea(ctx, size, {
-          ...highlight,
-          lineWidth: Math.ceil(lineWidth / currentZoom),
-        });
+      const { highlight, highlightFunction = highlightArea } = configObject;
+      const { lineWidth = 2 } = highlight;
 
-        ctx.restore();
+      highlightFunction(ctx, size, {
+        ...highlight,
+        lineWidth: Math.ceil(lineWidth / currentZoom),
       });
+
+      ctx.restore();
     };
 
     const drawOn = ctx => {
@@ -106,6 +147,8 @@ export const createTextureBuilder = (textureImage, params = {}) => {
 
     return {
       drawCanvasToArea,
+      drawCanvasToAreaDirect,
+      highlightDesignArea,
       highlightDesignAreas,
       drawOn,
       getTextureImage,