@configuratorware/configurator-admingui 1.37.0 → 1.37.1

package/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorField.js

@@ -71,19 +71,45 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var maskTypeValues = Object.values(_maskTypes.maskTypes);
 var defaultValue = {
   maskType: (0, _first["default"])(maskTypeValues),
   maskData: {}
 };
+var safeClipElements = ['ellipse', 'circle', 'rect', 'line', 'polygon', 'polyline', 'path'];
+
+var getUnsafeElements = function getUnsafeElements(svgString) {
+  var matchedElements = svgString.matchAll(/<((?!svg)\w+)/g);
+  var unsafeElements = [];
+
+  var _iterator = _createForOfIteratorHelper(matchedElements),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var match = _step.value;
+      var tagName = match[1];
+      !safeClipElements.includes(tagName) && !unsafeElements.includes(tagName) && unsafeElements.push(tagName);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return unsafeElements;
+};
+
 var UploadStatus = (0, _withStyles["default"])({
   uploadStatusContainer: {
     textAlign: 'right'
@@ -113,6 +139,16 @@ var styles = {
     }
   }
 };
+var StyledDialog = (0, _withStyles["default"])({
+  dialogContentTextRoot: {
+    display: 'flex',
+    '& canvas': {
+      margin: 'auto',
+      maxHeight: '100%',
+      maxWidth: '100%'
+    }
+  }
+})(_Dialog["default"]);
 var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.withFileUpload)(function (_ref2) {
   var value = _ref2.value,
       _ref2$ratio = _ref2.ratio,
@@ -144,7 +180,7 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       freeFormFile = _useState6[0],
       setFreeFormFile = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)((initialValue === null || initialValue === void 0 ? void 0 : initialValue.maskDataUrl) || false),
       _useState8 = _slicedToArray(_useState7, 2),
       dataUrl = _useState8[0],
       setDataUrl = _useState8[1];
@@ -154,6 +190,11 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       embeddedImageError = _useState10[0],
       setEmbeddedImageError = _useState10[1];
 
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      unsafeElements = _useState12[0],
+      setUnsafeElements = _useState12[1];
+
   var maskType = currentValue.maskType,
       maskData = currentValue.maskData;
 
@@ -173,7 +214,7 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
 
   var resetState = function resetState() {
     setFreeFormFile(false);
-    setDataUrl(false);
+    setDataUrl((initialValue === null || initialValue === void 0 ? void 0 : initialValue.maskDataUrl) || false);
     setEmbeddedImageError(false);
   };
 
@@ -191,15 +232,20 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
 
       if (embeddedImageIndex !== -1) {
         setEmbeddedImageError(true);
-      } else {
-        setDataUrl(reader.result);
-        setFreeFormFile(file);
-        clearMaskData();
+        return;
       }
+
+      setUnsafeElements(getUnsafeElements(svgString));
+      setDataUrl(reader.result);
+      setFreeFormFile(file);
+      clearMaskData();
     }, false);
     reader.readAsDataURL(file);
   };
 
+  (0, _react.useEffect)(function () {
+    (initialValue === null || initialValue === void 0 ? void 0 : initialValue.maskDataUrl) && setDataUrl(initialValue.maskDataUrl);
+  }, [initialValue]);
   (0, _react.useEffect)(function () {
     // update the current value explicitly with the value prop (eg. the changes has been saved)
     if ((0, _size["default"])(value) > 0) {
@@ -224,9 +270,9 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
     return function (maskType) {
       var _maskTypes$none$maskT;
 
-      return showDialog && (_maskTypes$none$maskT = {}, _defineProperty(_maskTypes$none$maskT, _maskTypes.maskTypes.none, false), _defineProperty(_maskTypes$none$maskT, _maskTypes.maskTypes.circle, _circle["default"]), _defineProperty(_maskTypes$none$maskT, _maskTypes.maskTypes.freeForm, initialValue.maskDataUrl || dataUrl || "".concat(freeFormUrl, "?v=").concat(Math.random())), _maskTypes$none$maskT)[maskType];
+      return showDialog && (_maskTypes$none$maskT = {}, _defineProperty(_maskTypes$none$maskT, _maskTypes.maskTypes.none, false), _defineProperty(_maskTypes$none$maskT, _maskTypes.maskTypes.circle, _circle["default"]), _defineProperty(_maskTypes$none$maskT, _maskTypes.maskTypes.freeForm, dataUrl || "".concat(freeFormUrl, "?v=").concat(Math.random())), _maskTypes$none$maskT)[maskType];
     };
-  }, [freeFormUrl, dataUrl, showDialog, initialValue]);
+  }, [freeFormUrl, dataUrl, showDialog]);
   var getMaskDataRef = (0, _react.useRef)(function () {});
 
   var onOkClick = /*#__PURE__*/function () {
@@ -289,7 +335,7 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       color: "primary"
     }),
     label: (0, _i18n.t)('maskEditor.checkboxLabel')
-  })), /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+  })), /*#__PURE__*/_react["default"].createElement(StyledDialog, {
     title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
       className: classes.inlineFormWrapper
     }, (0, _i18n.T)('mask editor'), /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
@@ -314,7 +360,13 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
     })), embeddedImageError && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       variant: "body1",
       color: "error"
-    }, (0, _i18n.t)('maskEditor.embeddedImageError'))),
+    }, (0, _i18n.t)('maskEditor.embeddedImageError')), unsafeElements.length > 0 && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      variant: "body1",
+      color: "error"
+    }, (0, _i18n.T)('maskEditor.unsafeElementsError', {
+      unsafeElements: unsafeElements.join(', '),
+      safeClipElements: safeClipElements.join(', ')
+    }))),
     open: showDialog,
     maxWidth: 'xl',
     fullWidth: false,

package/Screens/Designer/SubScreens/DesignAreas/Translations.js

@@ -44,7 +44,8 @@ require("../../../../App/i18n").use({
       uploadAndSave: 'Upload and save',
       uploadFailed: 'Failed to upload the SVG',
       uploadInProgress: 'Upload in progress, please wait...',
-      embeddedImageError: 'The provided file contains an embedded raster graphic. Please use plain / vector only svg files.'
+      embeddedImageError: 'The provided file contains an embedded raster graphic. Please use plain / vector only svg files.',
+      unsafeElementsError: 'The provided file contains elements that are not safe to be used for clipping. Please consider using only the following safe elements: %{safeClipElements}'
     },
     validation: {
       designProductionMethod: {
@@ -106,7 +107,8 @@ require("../../../../App/i18n").use({
       uploadAndSave: 'Hochladen und speichern',
       uploadFailed: 'Fehler beim Hochladen von SVG',
       uploadInProgress: 'Upload läuft, bitte warten...',
-      embeddedImageError: 'Die gewählte Datei enthält eingebettete Pixelgrafiken und kann nicht verwendet werden. Bitte wähle eine Datei, die ausschließlich Vektordaten enthält.'
+      embeddedImageError: 'Die gewählte Datei enthält eingebettete Pixelgrafiken und kann nicht verwendet werden. Bitte wähle eine Datei, die ausschließlich Vektordaten enthält.',
+      unsafeElementsError: 'Die verwendete Datei beinhaltet Elemente, die für das Beschneiden nicht verwendet werden können. Bitte verwenden Sie nur folgende Elemente: %{safeClipElements}'
     },
     validation: {
       designProductionMethod: {

package/Utils/Events/pointerEvent.js

@@ -31,6 +31,12 @@ var getPointFromPointerEvent = function getPointFromPointerEvent(evt) {
     y -= top;
   }
 
+  if (relativeTo.width) {
+    var scaling = relativeTo.getBoundingClientRect().width / relativeTo.width;
+    x *= 1 / scaling;
+    y *= 1 / scaling;
+  }
+
   return {
     x: x,
     y: y

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.37.0",
+  "version": "1.37.1",
   "license": "UNLICENSED",
   "private": false,
   "dependencies": {
@@ -29,7 +29,7 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^3.2.6",
     "react-sortable-hoc": "^1.11.0",
-    "redhotmagma-visualization": "1.37.0",
+    "redhotmagma-visualization": "1.37.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorField.js

@@ -25,6 +25,20 @@ const defaultValue = {
     maskData: {},
 };
 
+const safeClipElements = ['ellipse', 'circle', 'rect', 'line', 'polygon', 'polyline', 'path'];
+
+const getUnsafeElements = svgString => {
+    const matchedElements = svgString.matchAll(/<((?!svg)\w+)/g);
+    const unsafeElements = [];
+    for (const match of matchedElements) {
+        const tagName = match[1];
+        !safeClipElements.includes(tagName) &&
+            !unsafeElements.includes(tagName) &&
+            unsafeElements.push(tagName);
+    }
+    return unsafeElements;
+};
+
 const UploadStatus = withStyles({
     uploadStatusContainer: {
         textAlign: 'right',
@@ -58,6 +72,17 @@ const styles = {
     },
 };
 
+const StyledDialog = withStyles({
+    dialogContentTextRoot: {
+        display: 'flex',
+        '& canvas': {
+            margin: 'auto',
+            maxHeight: '100%',
+            maxWidth: '100%',
+        },
+    },
+})(Dialog);
+
 export const MaskEditorField = withStyles(styles)(
     withFileUpload(
         ({
@@ -78,8 +103,9 @@ export const MaskEditorField = withStyles(styles)(
             const [showDialog, toggleDialog] = useState(false);
             const [currentValue, setCurrentValue] = useState(initialValue);
             const [freeFormFile, setFreeFormFile] = useState(false);
-            const [dataUrl, setDataUrl] = useState(false);
+            const [dataUrl, setDataUrl] = useState(initialValue?.maskDataUrl || false);
             const [embeddedImageError, setEmbeddedImageError] = useState(false);
+            const [unsafeElements, setUnsafeElements] = useState([]);
 
             const { maskType, maskData } = currentValue;
 
@@ -88,10 +114,10 @@ export const MaskEditorField = withStyles(styles)(
                 setCurrentValue({ ...currentValue, maskType, maskData: {} });
                 resetState();
             };
-            
+
             const resetState = () => {
                 setFreeFormFile(false);
-                setDataUrl(false);
+                setDataUrl(initialValue?.maskDataUrl || false);
                 setEmbeddedImageError(false);
             };
 
@@ -108,18 +134,22 @@ export const MaskEditorField = withStyles(styles)(
                         const embeddedImageIndex = svgString.search('<image');
                         if (embeddedImageIndex !== -1) {
                             setEmbeddedImageError(true);
+                            return;
                         }
-                        else {
-                            setDataUrl(reader.result);
-                            setFreeFormFile(file);
-                            clearMaskData(); 
-                        }
+                        setUnsafeElements(getUnsafeElements(svgString));
+                        setDataUrl(reader.result);
+                        setFreeFormFile(file);
+                        clearMaskData();
                     },
                     false
                 );
                 reader.readAsDataURL(file);
             };
 
+            useEffect(() => {
+                initialValue?.maskDataUrl && setDataUrl(initialValue.maskDataUrl);
+            }, [initialValue]);
+
             useEffect(() => {
                 // update the current value explicitly with the value prop (eg. the changes has been saved)
                 if (size(value) > 0) {
@@ -148,10 +178,9 @@ export const MaskEditorField = withStyles(styles)(
                     {
                         [maskTypes.none]: false,
                         [maskTypes.circle]: circleMask,
-                        [maskTypes.freeForm]:
-                            initialValue.maskDataUrl || dataUrl || `${freeFormUrl}?v=${Math.random()}`,
+                        [maskTypes.freeForm]: dataUrl || `${freeFormUrl}?v=${Math.random()}`,
                     }[maskType],
-                [freeFormUrl, dataUrl, showDialog, initialValue]
+                [freeFormUrl, dataUrl, showDialog]
             );
 
             const getMaskDataRef = useRef(() => {});
@@ -194,7 +223,7 @@ export const MaskEditorField = withStyles(styles)(
                             label={t('maskEditor.checkboxLabel')}
                         />
                     </Grid>
-                    <Dialog
+                    <StyledDialog
                         title={
                             <React.Fragment>
                                 <div className={classes.inlineFormWrapper}>
@@ -227,11 +256,19 @@ export const MaskEditorField = withStyles(styles)(
                                         />
                                     )}
                                 </div>
-                                {embeddedImageError &&
+                                {embeddedImageError && (
                                     <Typography variant="body1" color="error">
                                         {t('maskEditor.embeddedImageError')}
                                     </Typography>
-                                }
+                                )}
+                                {unsafeElements.length > 0 && (
+                                    <Typography variant="body1" color="error">
+                                        {T('maskEditor.unsafeElementsError', {
+                                            unsafeElements: unsafeElements.join(', '),
+                                            safeClipElements: safeClipElements.join(', '),
+                                        })}
+                                    </Typography>
+                                )}
                             </React.Fragment>
                         }
                         open={showDialog}
@@ -261,7 +298,7 @@ export const MaskEditorField = withStyles(styles)(
                         />
 
                         <UploadStatus uploadStatus={uploadStatus} />
-                    </Dialog>
+                    </StyledDialog>
                 </React.Fragment>
             );
         }

package/src/Screens/Designer/SubScreens/DesignAreas/Translations.js

@@ -44,7 +44,10 @@ require('../../../../App/i18n').use(
                 uploadAndSave: 'Upload and save',
                 uploadFailed: 'Failed to upload the SVG',
                 uploadInProgress: 'Upload in progress, please wait...',
-                embeddedImageError: 'The provided file contains an embedded raster graphic. Please use plain / vector only svg files.'
+                embeddedImageError:
+                    'The provided file contains an embedded raster graphic. Please use plain / vector only svg files.',
+                unsafeElementsError:
+                    'The provided file contains elements that are not safe to be used for clipping. Please consider using only the following safe elements: %{safeClipElements}',
             },
             validation: {
                 designProductionMethod: {
@@ -109,7 +112,10 @@ require('../../../../App/i18n').use(
                 uploadAndSave: 'Hochladen und speichern',
                 uploadFailed: 'Fehler beim Hochladen von SVG',
                 uploadInProgress: 'Upload läuft, bitte warten...',
-                embeddedImageError: 'Die gewählte Datei enthält eingebettete Pixelgrafiken und kann nicht verwendet werden. Bitte wähle eine Datei, die ausschließlich Vektordaten enthält.'
+                embeddedImageError:
+                    'Die gewählte Datei enthält eingebettete Pixelgrafiken und kann nicht verwendet werden. Bitte wähle eine Datei, die ausschließlich Vektordaten enthält.',
+                unsafeElementsError:
+                    'Die verwendete Datei beinhaltet Elemente, die für das Beschneiden nicht verwendet werden können. Bitte verwenden Sie nur folgende Elemente: %{safeClipElements}',
             },
             validation: {
                 designProductionMethod: {

package/src/Utils/Events/pointerEvent.js

@@ -18,6 +18,11 @@ export const getPointFromPointerEvent = (evt, relativeTo = false) => {
         x -= left;
         y -= top;
     }
+    if (relativeTo.width) {
+        const scaling = relativeTo.getBoundingClientRect().width / relativeTo.width;
+        x *= 1 / scaling;
+        y *= 1 / scaling;
+    }
     return { x, y };
 };