@configuratorware/configurator-frontendgui 1.47.2 → 1.47.3

package/App/Modules/Designer/setupDesigner.js

@@ -131,20 +131,31 @@ var setupDesigner = exports.setupDesigner = function setupDesigner(designDataSer
               canvas = canvasRepository.requestCanvas(designArea, canvasSize);
               isNew = true;
             }
-            _context.next = 4;
+            _context.prev = 2;
+            _context.next = 5;
             return canvas.useMask(maskData);
-          case 4:
+          case 5:
+            _context.next = 11;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](2);
+            // eslint-disable-next-line no-console
+            console.error('Error while applying mask:', _context.t0);
+            // eslint-disable-next-line no-console
+            console.error('Mask data:', maskData);
+          case 11:
             canvas.useColorOverlay(colorOverlayData);
             return _context.abrupt("return", {
               canvas: canvas,
               designArea: designArea,
               isNew: isNew
             });
-          case 6:
+          case 13:
           case "end":
             return _context.stop();
         }
-      }, _callee);
+      }, _callee, null, [[2, 7]]);
     }));
     return function (_x) {
       return _ref3.apply(this, arguments);

package/App/Reducers/DesignArea/MaskSelectors.js

@@ -23,6 +23,7 @@ var maskTypes = {
 var getMaskIfComplete = function getMaskIfComplete(obj) {
   return maskTypes[(0, _get["default"])(obj, 'mask.maskType')] && _objectSpread(_objectSpread({}, obj.mask.maskData), {}, {
     type: obj.mask.maskType,
+    dataUrl: obj.mask.maskDataUrl,
     source: obj
   });
 };
@@ -33,7 +34,7 @@ var designAreaAppliesMask = exports.designAreaAppliesMask = function designAreaA
   var designProductionMethod = (0, _Selectors2.getSelectedDesignProductionMethodForDesignArea)(state, designArea);
   return !!(getMaskIfComplete(designProductionMethod) || getMaskIfComplete(designArea));
 };
-var getMaskSrc = function getMaskSrc(_ref) {
+var createMaskSrc = function createMaskSrc(_ref) {
   var itemIdentifier = _ref.itemIdentifier,
     designAreaIdentifier = _ref.designAreaIdentifier,
     designProductionMethodIdentifier = _ref.designProductionMethodIdentifier,
@@ -63,7 +64,7 @@ var getMaskDataForDesignArea = exports.getMaskDataForDesignArea = function getMa
   var item = (0, _Selectors.getItem)((0, _Selectors.getConfigurator)(state));
   var maskData = getMaskIfComplete(designProductionMethod) || getMaskIfComplete(designArea);
   if (maskData) {
-    var src = getMaskSrc({
+    var src = maskData.dataUrl || createMaskSrc({
       itemIdentifier: item.identifier,
       designAreaIdentifier: designArea.identifier,
       designProductionMethodIdentifier: maskData.source === designProductionMethod ? designProductionMethod.identifier : false,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.47.2",
+  "version": "1.47.3",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.47.2",
+    "@configuratorware/scripts": "1.47.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,12 +36,13 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.47.2",
-    "redhotmagma-visualization": "1.47.2",
+    "redhotmagma-graphics-editor": "1.47.3",
+    "redhotmagma-visualization": "1.47.3",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
+    "semver": "^7.6.3",
     "showdown": "^1.9.1",
     "storage-factory": "^0.2.0",
     "typeface-roboto": "^1.1.13",
@@ -64,10 +65,10 @@
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.7.6",
     "node-sass": "^9.0.0",
-    "resolve-url-loader": "^5.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
+    "resolve-url-loader": "^5.0.0",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.9",
@@ -76,6 +77,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "scripts": {
     "copy-public": "node ./scripts/cpPublic.js",
     "install": "npm run copy-public"

package/scripts/versionCheck.js

@@ -0,0 +1,8 @@
+
+const package = require('../package.json');
+const semver = require('semver');
+const version = package.engines.node;
+if (!semver.satisfies(process.version, version)) {
+    console.log(`Required node version ${version} not satisfied with current version ${process.version}.`);
+    process.exit(1);
+}

package/src/App/Modules/Designer/setupDesigner.js

@@ -124,7 +124,14 @@ export const setupDesigner = designDataService => {
                 canvas = canvasRepository.requestCanvas(designArea, canvasSize);
                 isNew = true;
             }
-            await canvas.useMask(maskData);
+            try {
+                await canvas.useMask(maskData);
+            } catch (e) {
+                // eslint-disable-next-line no-console
+                console.error('Error while applying mask:', e);
+                // eslint-disable-next-line no-console
+                console.error('Mask data:', maskData);
+            }
             canvas.useColorOverlay(colorOverlayData);
             return {
                 canvas,

package/src/App/Reducers/DesignArea/MaskSelectors.js

@@ -10,7 +10,12 @@ const maskTypes = {
 };
 
 const getMaskIfComplete = obj =>
-    maskTypes[get(obj, 'mask.maskType')] && { ...obj.mask.maskData, type: obj.mask.maskType, source: obj };
+    maskTypes[get(obj, 'mask.maskType')] && {
+        ...obj.mask.maskData,
+        type: obj.mask.maskType,
+        dataUrl: obj.mask.maskDataUrl,
+        source: obj,
+    };
 
 export const designAreaAppliesMask = (state, designArea) => {
     if (!designArea) {
@@ -20,7 +25,7 @@ export const designAreaAppliesMask = (state, designArea) => {
     return !!(getMaskIfComplete(designProductionMethod) || getMaskIfComplete(designArea));
 };
 
-const getMaskSrc = ({ itemIdentifier, designAreaIdentifier, designProductionMethodIdentifier, type }) => {
+const createMaskSrc = ({ itemIdentifier, designAreaIdentifier, designProductionMethodIdentifier, type }) => {
     switch (type) {
         case maskTypes.circle: {
             return circleMaskSVG;
@@ -45,13 +50,15 @@ export const getMaskDataForDesignArea = (state, designArea = null) => {
     const item = getItem(getConfigurator(state));
     const maskData = getMaskIfComplete(designProductionMethod) || getMaskIfComplete(designArea);
     if (maskData) {
-        const src = getMaskSrc({
-            itemIdentifier: item.identifier,
-            designAreaIdentifier: designArea.identifier,
-            designProductionMethodIdentifier:
-                maskData.source === designProductionMethod ? designProductionMethod.identifier : false,
-            type: maskData.type,
-        });
+        const src =
+            maskData.dataUrl ||
+            createMaskSrc({
+                itemIdentifier: item.identifier,
+                designAreaIdentifier: designArea.identifier,
+                designProductionMethodIdentifier:
+                    maskData.source === designProductionMethod ? designProductionMethod.identifier : false,
+                type: maskData.type,
+            });
         return { ...maskData, src, outlineColor: getClientHighlightColor(state) };
     }
     return false;