@configuratorware/configurator-admingui 1.36.2 → 1.37.1

package/Components/FormFragments/Text.js

@@ -13,10 +13,8 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var text = function text(props) {
-  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _defineProperty({
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
     label: props.label,
     onChange: function onChange(evt) {
       props.onChange(props.name, evt.target.value === '' && props.emptyValue !== undefined ? props.emptyValue : evt.target.value);
@@ -32,7 +30,7 @@ var text = function text(props) {
     },
     inputProps: props.inputProps,
     rows: props.rows || 1
-  }, "helperText", props.helperText));
+  });
 };
 
 text.defaultProps = {

package/Screens/ApiKeys/Containers/Edit.js

@@ -112,11 +112,13 @@ var connectedTextField = (0, _connect["default"])(mapStateToProps, mapDispatchTo
 var formFields = [{
   name: 'email',
   label: 'E-mail',
-  type: 'text'
+  type: 'text',
+  helperText: (0, _i18n.t)('apiKeys.mailHelperText')
 }, {
   name: 'username',
   label: 'User name',
-  type: 'text'
+  type: 'text',
+  helperText: (0, _i18n.t)('apiKeys.userHelperText')
 }, {
   name: 'api_key',
   label: 'apikey',

package/Screens/ApiKeys/Translations.js

@@ -10,7 +10,9 @@ require("../../App/i18n").use({
     apikey: 'API Key',
     'create new api key': 'neuen API key erstellen',
     apiKeys: {
-      addButtonlabel: 'API Key hinzufügen'
+      addButtonlabel: 'API Key hinzufügen',
+      mailHelperText: 'Die E-Mail Adresse muss einzigartig und keinem bestehenden API Key oder adminarea Nutzer zugeordnet sein',
+      userHelperText: 'Der Nutzername muss einzigartig und keinem bestehenden Nutzer zugeordnet sein'
     }
   },
   en: {
@@ -18,7 +20,9 @@ require("../../App/i18n").use({
     apikey: 'API Key',
     'create new api key': 'create new api key',
     apiKeys: {
-      addButtonlabel: 'Add API Key'
+      addButtonlabel: 'Add API Key',
+      mailHelperText: 'The e-mail address has to be unique and must not be used by an existing API key or adminarea user',
+      userHelperText: 'The username has to be unique and must not be used by an existing API key or adminarea user'
     }
   }
 }, true);

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

@@ -36,7 +36,7 @@ var calculateCanvasSize = function calculateCanvasSize(ratio
 /* width / height */
 ) {
   // experimental values for canvas margin (looks good with the dialog)
-  var modalFitCorrectionY = 260;
+  var modalFitCorrectionY = 280;
   var modalFitCorrectionX = 144;
   var base = Math.min(window.innerWidth, window.innerHeight) - (window.innerWidth < window.innerHeight - modalFitCorrectionY ? modalFitCorrectionX : modalFitCorrectionY);
   var width = ratio < 1 ? base * ratio : base;

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

@@ -41,6 +41,8 @@ var _MaskEditorCanvas = require("./MaskEditorCanvas");
 
 var _maskTypes = require("../../Utils/maskTypes");
 
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography/Typography"));
+
 var _excluded = ["onChange", "name"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -69,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'
@@ -111,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,
@@ -142,11 +180,21 @@ 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];
 
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      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;
 
@@ -161,17 +209,33 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       maskType: maskType,
       maskData: {}
     }));
+    resetState();
+  };
+
+  var resetState = function resetState() {
     setFreeFormFile(false);
-    setDataUrl(false);
+    setDataUrl((initialValue === null || initialValue === void 0 ? void 0 : initialValue.maskDataUrl) || false);
+    setEmbeddedImageError(false);
   };
 
   var getFileDataUrl = function getFileDataUrl(file) {
+    setEmbeddedImageError(false);
+
     if (!file) {
       return;
     }
 
     var reader = new FileReader();
     reader.addEventListener('load', function () {
+      var svgString = atob(reader.result.replace(/data:image\/svg\+xml;base64,/, ''));
+      var embeddedImageIndex = svgString.search('<image');
+
+      if (embeddedImageIndex !== -1) {
+        setEmbeddedImageError(true);
+        return;
+      }
+
+      setUnsafeElements(getUnsafeElements(svgString));
       setDataUrl(reader.result);
       setFreeFormFile(file);
       clearMaskData();
@@ -179,6 +243,9 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
     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) {
@@ -188,8 +255,7 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
   (0, _react.useEffect)(function () {
     // reset internal state when showing the dialog
     if (showDialog) {
-      setDataUrl(false);
-      setFreeFormFile(false);
+      resetState();
 
       if ((0, _size["default"])(value) > 0) {
         setCurrentValue(initialValue);
@@ -204,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 () {
@@ -269,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"], {
@@ -291,6 +357,15 @@ var MaskEditorField = (0, _withStyles["default"])(styles)((0, _withFileUpload.wi
       onChange: getFileDataUrl,
       src: getMaskSrc(maskType),
       fileName: freeFormFile ? freeFormFile.name : freeFormUrl.replace(/.*\/([^/]+)$/, '$1')
+    })), embeddedImageError && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      variant: "body1",
+      color: "error"
+    }, (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',

package/Screens/Designer/SubScreens/DesignAreas/Containers/Edit.js

@@ -33,6 +33,8 @@ var _FormArray = _interopRequireDefault(require("../Components/FormArray"));
 
 var _i18n = require("../../../../../App/i18n");
 
+var _lodash = _interopRequireDefault(require("lodash"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -45,39 +47,47 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 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 getVariantsDefaultColors = function getVariantsDefaultColors(productionMethod, extendedItem) {
-  var variantsDefaultColors = [];
+var getItemDefaultColors = function getItemDefaultColors(productionMethod, extendedItem) {
+  var itemDefaultColors = [];
   var defaultColors = productionMethod.defaultColors;
 
   if ((0, _isObject["default"])(defaultColors)) {
-    var _iterator = _createForOfIteratorHelper(extendedItem.children),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var child = _step.value;
-        var defaultColor = {
-          variantIdentifier: child.identifier,
-          variantTitle: child.title,
-          colorPaletteIdentifier: null,
-          colorIdentifier: null
-        };
-
-        if (defaultColors[child.identifier]) {
-          defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[child.identifier])[0];
-          defaultColor.colorIdentifier = defaultColors[child.identifier][defaultColor.colorPaletteIdentifier];
+    if (_lodash["default"].isArray(_lodash["default"].get(extendedItem, 'children')) && extendedItem.children.length > 0) {
+      var _iterator = _createForOfIteratorHelper(extendedItem.children),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var child = _step.value;
+          itemDefaultColors.push(getDefaultColor(child, defaultColors));
         }
-
-        variantsDefaultColors.push(defaultColor);
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+    } else {
+      itemDefaultColors.push(getDefaultColor(extendedItem, defaultColors));
     }
   }
 
-  return variantsDefaultColors;
+  return itemDefaultColors;
+};
+
+var getDefaultColor = function getDefaultColor(item, defaultColors) {
+  var defaultColor = {
+    variantIdentifier: item.identifier,
+    variantTitle: item.title || item.translated_title,
+    colorPaletteIdentifier: null,
+    colorIdentifier: null
+  };
+
+  if (defaultColors[item.identifier]) {
+    defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[item.identifier])[0];
+    defaultColor.colorIdentifier = defaultColors[item.identifier][defaultColor.colorPaletteIdentifier];
+  }
+
+  return defaultColor;
 };
 
 var ConnectedFormComponent = (0, _reactRedux.connect)(function (state, ownProps) {
@@ -99,7 +109,7 @@ var ConnectedFormComponent = (0, _reactRedux.connect)(function (state, ownProps)
   var availableColorPalettes = colorPalettes.filter(function (palette) {
     return availableColorPaletteIds.indexOf(palette.id) !== -1;
   });
-  var variantsDefaultColors = getVariantsDefaultColors(ownProps.data, extendedItem);
+  var variantsDefaultColors = getItemDefaultColors(ownProps.data, extendedItem);
   var errorData = (0, _get["default"])(state, 'dataBySource.designarea.error.response.data.errors');
   var index = (0, _findIndex["default"])(ownDesignProductionMethods, {
     id: ownProps.data.id

package/Screens/Designer/SubScreens/DesignAreas/Containers/FormProductionMethods.js

@@ -122,7 +122,8 @@ var styles = function styles() {
     engravingBackgroundColor: {
       display: 'flex',
       alignItems: 'baseline',
-      marginBottom: '1em'
+      marginBottom: '1em',
+      marginLeft: '1em'
     },
     inputAlign: {
       textAlign: 'center'
@@ -555,7 +556,7 @@ var FormProductionMethods = /*#__PURE__*/function (_React$Component) {
 
       var currentValues = _lodash["default"].get(productionMethod, 'additionalData.engravingBackgroundColors', []);
 
-      var availableItemIdentifiers = _lodash["default"].isArray(_lodash["default"].get(extendedItem, 'children')) ? extendedItem.children.map(function (_ref3) {
+      var availableItemIdentifiers = _lodash["default"].isArray(_lodash["default"].get(extendedItem, 'children')) && extendedItem.children.length > 0 ? extendedItem.children.map(function (_ref3) {
         var identifier = _ref3.identifier;
         return identifier;
       }) : [extendedItem.identifier];
@@ -879,7 +880,7 @@ var FormProductionMethods = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12
-      }, isEngravingEffect(productionMethod) && engravingBackgroundColors.map(function (item) {
+      }, isEngravingEffect(productionMethod) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, (0, _i18n.t)('EngravingBackgroundColor')), engravingBackgroundColors.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: item.itemIdentifier,
           className: classes.engravingBackgroundColor
@@ -890,13 +891,13 @@ var FormProductionMethods = /*#__PURE__*/function (_React$Component) {
           component: "legend"
         }, item.itemIdentifier, ":"), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
           key: item.itemIdentifier,
-          placeholder: (0, _i18n.t)('EngravingBackgroundColor'),
+          placeholder: (0, _i18n.t)('EngravingBackgroundColorPlaceholder'),
           onChange: _this4.onChangeEngravingBackgroundColor(item),
           value: item.colorHex,
           style: styles.input,
           className: classes.inputAlign
         }));
-      }))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      })))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12,
         className: classes.checkboxGrid

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

@@ -7,7 +7,8 @@ require("../../../../App/i18n").use({
     isDefault: 'default',
     allowBulkNames: 'Allow bulk names',
     varyingDefaultColors: 'Varying Default Color',
-    EngravingBackgroundColor: 'Color value',
+    EngravingBackgroundColorPlaceholder: 'Color value',
+    EngravingBackgroundColor: 'Engraving color',
     errors: {
       noProdMethodLeft: 'No more production methods exist.'
     },
@@ -42,7 +43,9 @@ require("../../../../App/i18n").use({
       selectFile: 'Select SVG file',
       uploadAndSave: 'Upload and save',
       uploadFailed: 'Failed to upload the SVG',
-      uploadInProgress: 'Upload in progress, please wait...'
+      uploadInProgress: 'Upload in progress, please wait...',
+      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: {
@@ -73,7 +76,8 @@ require("../../../../App/i18n").use({
     isDefault: 'Standard',
     allowBulkNames: 'Einzelnamen erlauben',
     varyingDefaultColors: 'abweichende Standardfarbe',
-    EngravingBackgroundColor: 'Farbwert',
+    EngravingBackgroundColorPlaceholder: 'Farbwert',
+    EngravingBackgroundColor: 'Gravurfarbe',
     errors: {
       noProdMethodLeft: 'Keine weiteren Produktionsverfahren vorhanden.'
     },
@@ -102,7 +106,9 @@ require("../../../../App/i18n").use({
       selectFile: 'SVG Datei auswählen',
       uploadAndSave: 'Hochladen und speichern',
       uploadFailed: 'Fehler beim Hochladen von SVG',
-      uploadInProgress: 'Upload läuft, bitte warten...'
+      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.',
+      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/UIComponents/SelectField.js

@@ -113,7 +113,7 @@ var UISelectField = /*#__PURE__*/function (_React$Component) {
       }, placeholder && /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
         value: placeholderValue,
         disabled: disablePlaceholder
-      }, placeholder), children), /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, error));
+      }, placeholder), children), error && /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, error));
     }
   }]);
 

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.36.2",
+  "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.36.2",
+    "redhotmagma-visualization": "1.37.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/Components/FormFragments/Text.js

@@ -25,7 +25,6 @@ const text = props => (
         }}
         inputProps={props.inputProps}
         rows={props.rows || 1}
-        helperText={props.helperText}
     />
 );
 

package/src/Screens/ApiKeys/Containers/Edit.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import connect from 'react-redux/es/connect/connect';
 import { setFieldData, postData, refreshListAction, APIUSER_REDUCER_NAME } from '../Reducers/Actions';
 import { get } from 'lodash';
-import { T } from '../../../App/i18n';
+import { T, t } from '../../../App/i18n';
 import generateConnectedEdit from '../../../Components/DefaultConnectedForm';
 import Text from '../../../Components/FormFragments/Text';
 import Button from '@material-ui/core/Button/Button';
@@ -41,11 +41,13 @@ const formFields = [
         name: 'email',
         label: 'E-mail',
         type: 'text',
+        helperText: t('apiKeys.mailHelperText')
     },
     {
         name: 'username',
         label: 'User name',
         type: 'text',
+        helperText: t('apiKeys.userHelperText')
     },
     {
         name: 'api_key',

package/src/Screens/ApiKeys/Translations.js

@@ -10,6 +10,8 @@ require('../../App/i18n').use(
             'create new api key': 'neuen API key erstellen',
             apiKeys: {
                 addButtonlabel: 'API Key hinzufügen',
+                mailHelperText: 'Die E-Mail Adresse muss einzigartig und keinem bestehenden API Key oder adminarea Nutzer zugeordnet sein',
+                userHelperText: 'Der Nutzername muss einzigartig und keinem bestehenden Nutzer zugeordnet sein',
             },
         },
         en: {
@@ -18,6 +20,8 @@ require('../../App/i18n').use(
             'create new api key': 'create new api key',
             apiKeys: {
                 addButtonlabel: 'Add API Key',
+                mailHelperText: 'The e-mail address has to be unique and must not be used by an existing API key or adminarea user',
+                userHelperText: 'The username has to be unique and must not be used by an existing API key or adminarea user',
             },
         },
     },

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

@@ -17,7 +17,7 @@ const styles = {
 
 const calculateCanvasSize = (ratio /* width / height */) => {
     // experimental values for canvas margin (looks good with the dialog)
-    const modalFitCorrectionY = 260;
+    const modalFitCorrectionY = 280;
     const modalFitCorrectionX = 144;
     const base =
         Math.min(window.innerWidth, window.innerHeight) -

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

@@ -16,6 +16,7 @@ import { withFileUpload } from './withFileUpload';
 import InlineFileInput from './InlineFileInput';
 import { MaskEditorCanvas } from './MaskEditorCanvas';
 import { maskTypes } from '../../Utils/maskTypes';
+import Typography from '@material-ui/core/Typography/Typography';
 
 const maskTypeValues = Object.values(maskTypes);
 
@@ -24,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',
@@ -57,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(
         ({
@@ -77,18 +103,26 @@ 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;
 
             const clearMaskData = () => setCurrentValue({ ...currentValue, maskData: {} });
             const setMaskType = maskType => {
                 setCurrentValue({ ...currentValue, maskType, maskData: {} });
+                resetState();
+            };
+
+            const resetState = () => {
                 setFreeFormFile(false);
-                setDataUrl(false);
+                setDataUrl(initialValue?.maskDataUrl || false);
+                setEmbeddedImageError(false);
             };
 
             const getFileDataUrl = file => {
+                setEmbeddedImageError(false);
                 if (!file) {
                     return;
                 }
@@ -96,6 +130,13 @@ export const MaskEditorField = withStyles(styles)(
                 reader.addEventListener(
                     'load',
                     function() {
+                        const svgString = atob(reader.result.replace(/data:image\/svg\+xml;base64,/, ''));
+                        const embeddedImageIndex = svgString.search('<image');
+                        if (embeddedImageIndex !== -1) {
+                            setEmbeddedImageError(true);
+                            return;
+                        }
+                        setUnsafeElements(getUnsafeElements(svgString));
                         setDataUrl(reader.result);
                         setFreeFormFile(file);
                         clearMaskData();
@@ -105,6 +146,10 @@ export const MaskEditorField = withStyles(styles)(
                 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) {
@@ -115,8 +160,7 @@ export const MaskEditorField = withStyles(styles)(
             useEffect(() => {
                 // reset internal state when showing the dialog
                 if (showDialog) {
-                    setDataUrl(false);
-                    setFreeFormFile(false);
+                    resetState();
                     if (size(value) > 0) {
                         setCurrentValue(initialValue);
                     }
@@ -134,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(() => {});
@@ -180,7 +223,7 @@ export const MaskEditorField = withStyles(styles)(
                             label={t('maskEditor.checkboxLabel')}
                         />
                     </Grid>
-                    <Dialog
+                    <StyledDialog
                         title={
                             <React.Fragment>
                                 <div className={classes.inlineFormWrapper}>
@@ -213,6 +256,19 @@ export const MaskEditorField = withStyles(styles)(
                                         />
                                     )}
                                 </div>
+                                {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}
@@ -242,7 +298,7 @@ export const MaskEditorField = withStyles(styles)(
                         />
 
                         <UploadStatus uploadStatus={uploadStatus} />
-                    </Dialog>
+                    </StyledDialog>
                 </React.Fragment>
             );
         }

package/src/Screens/Designer/SubScreens/DesignAreas/Containers/Edit.js

@@ -12,34 +12,43 @@ import FormProductionMethods from './FormProductionMethods';
 import { DesignAreaMaskEditorField } from './ConnectedMaskEditorField';
 import FormArray from '../Components/FormArray';
 import { t } from '../../../../../App/i18n';
+import _ from 'lodash';
 
-const getVariantsDefaultColors = (productionMethod, extendedItem) => {
-    const variantsDefaultColors = [];
+const getItemDefaultColors = (productionMethod, extendedItem) => {
+    const itemDefaultColors = [];
 
     const { defaultColors } = productionMethod;
-
     if (isObject(defaultColors)) {
-        for (const child of extendedItem.children) {
-            const defaultColor = {
-                variantIdentifier: child.identifier,
-                variantTitle: child.title,
-                colorPaletteIdentifier: null,
-                colorIdentifier: null,
-            };
-
-            if (defaultColors[child.identifier]) {
-                defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[child.identifier])[0];
-                defaultColor.colorIdentifier =
-                    defaultColors[child.identifier][defaultColor.colorPaletteIdentifier];
+        if (_.isArray(_.get(extendedItem, 'children')) && extendedItem.children.length > 0) {
+            for (const child of extendedItem.children) {
+                itemDefaultColors.push(getDefaultColor(child, defaultColors));
             }
-
-            variantsDefaultColors.push(defaultColor);
+        }
+        else {
+            itemDefaultColors.push(getDefaultColor(extendedItem, defaultColors));
         }
     }
 
-    return variantsDefaultColors;
+    return itemDefaultColors;
 };
 
+const getDefaultColor = (item, defaultColors) => {
+    const defaultColor = {
+        variantIdentifier: item.identifier,
+        variantTitle: item.title || item.translated_title,
+        colorPaletteIdentifier: null,
+        colorIdentifier: null,
+    };
+
+    if (defaultColors[item.identifier]) {
+        defaultColor.colorPaletteIdentifier = Object.keys(defaultColors[item.identifier])[0];
+        defaultColor.colorIdentifier =
+            defaultColors[item.identifier][defaultColor.colorPaletteIdentifier];
+    }
+    
+    return defaultColor;
+}
+
 const ConnectedFormComponent = connect(
     (state, ownProps) => {
         const itemId = get(state, 'designAreasData.data.item.value.id');
@@ -61,7 +70,7 @@ const ConnectedFormComponent = connect(
         const availableColorPalettes = colorPalettes.filter(
             palette => availableColorPaletteIds.indexOf(palette.id) !== -1
         );
-        const variantsDefaultColors = getVariantsDefaultColors(ownProps.data, extendedItem);
+        const variantsDefaultColors = getItemDefaultColors(ownProps.data, extendedItem);
 
         const errorData = get(state, 'dataBySource.designarea.error.response.data.errors');
         const index = findIndex(ownDesignProductionMethods, { id: ownProps.data.id });

package/src/Screens/Designer/SubScreens/DesignAreas/Containers/FormProductionMethods.js

@@ -40,6 +40,7 @@ const styles = () => ({
         display: 'flex',
         alignItems: 'baseline',
         marginBottom: '1em',
+        marginLeft: '1em',
     },
     inputAlign: {
         textAlign: 'center',
@@ -323,7 +324,7 @@ class FormProductionMethods extends React.Component {
             return [];
         }
         const currentValues = _.get(productionMethod, 'additionalData.engravingBackgroundColors', []);
-        const availableItemIdentifiers = _.isArray(_.get(extendedItem, 'children'))
+        const availableItemIdentifiers = (_.isArray(_.get(extendedItem, 'children')) && extendedItem.children.length > 0)
             ? extendedItem.children.map(({ identifier }) => identifier)
             : [extendedItem.identifier];
         const result = [];
@@ -434,7 +435,6 @@ class FormProductionMethods extends React.Component {
     onColorPalettesDialogSelectClick = (value, colorIdentifier, colorPaletteIdentifier) => {
         const { openedVariantsDefaultColor } = this.state;
         const { data } = this.props;
-
         const newData = {
             ...data,
             defaultColors: {
@@ -744,25 +744,33 @@ class FormProductionMethods extends React.Component {
                             ))}
                         </UISelectField>
                         <Grid item xs={12}>
-                            {isEngravingEffect(productionMethod) &&
-                                engravingBackgroundColors.map(item => (
-                                    <div
-                                        key={item.itemIdentifier}
-                                        className={classes.engravingBackgroundColor}
-                                    >
-                                        <FormLabel classes={{ root: classes.InputLabel }} component="legend">
-                                            {item.itemIdentifier}:
-                                        </FormLabel>
-                                        <TextField
-                                            key={item.itemIdentifier}
-                                            placeholder={t('EngravingBackgroundColor')}
-                                            onChange={this.onChangeEngravingBackgroundColor(item)}
-                                            value={item.colorHex}
-                                            style={styles.input}
-                                            className={classes.inputAlign}
-                                        />
-                                    </div>
-                                ))}
+                            {isEngravingEffect(productionMethod) && (
+                                <React.Fragment>
+                                    <Typography>
+                                        {t('EngravingBackgroundColor')}
+                                    </Typography>
+                                    {
+                                        engravingBackgroundColors.map(item => (
+                                            <div
+                                                key={item.itemIdentifier}
+                                                className={classes.engravingBackgroundColor}
+                                            >
+                                                <FormLabel classes={{ root: classes.InputLabel }} component="legend">
+                                                    {item.itemIdentifier}:
+                                                </FormLabel>
+                                                <TextField
+                                                    key={item.itemIdentifier}
+                                                    placeholder={t('EngravingBackgroundColorPlaceholder')}
+                                                    onChange={this.onChangeEngravingBackgroundColor(item)}
+                                                    value={item.colorHex}
+                                                    style={styles.input}
+                                                    className={classes.inputAlign}
+                                                />
+                                            </div>
+                                        ))
+                                    }
+                                </React.Fragment>
+                                )}
                         </Grid>
                     </Grid>
                     <Grid item xs={12} className={classes.checkboxGrid}>

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

@@ -6,7 +6,8 @@ require('../../../../App/i18n').use(
             isDefault: 'default',
             allowBulkNames: 'Allow bulk names',
             varyingDefaultColors: 'Varying Default Color',
-            EngravingBackgroundColor: 'Color value',
+            EngravingBackgroundColorPlaceholder: 'Color value',
+            EngravingBackgroundColor: 'Engraving color',
             errors: {
                 noProdMethodLeft: 'No more production methods exist.',
             },
@@ -43,6 +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.',
+                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: {
@@ -75,7 +80,8 @@ require('../../../../App/i18n').use(
             isDefault: 'Standard',
             allowBulkNames: 'Einzelnamen erlauben',
             varyingDefaultColors: 'abweichende Standardfarbe',
-            EngravingBackgroundColor: 'Farbwert',
+            EngravingBackgroundColorPlaceholder: 'Farbwert',
+            EngravingBackgroundColor: 'Gravurfarbe',
             errors: {
                 noProdMethodLeft: 'Keine weiteren Produktionsverfahren vorhanden.',
             },
@@ -106,6 +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.',
+                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/Screens/Designer/__tests__/__snapshots__/FormProductionMethods.test.js.snap

@@ -51,9 +51,6 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
             </svg>
           </div>
         </div>
-        <p
-          class="MuiFormHelperText-root-197 MuiFormHelperText-filled-203"
-        />
       </div>
       <div
         class="MuiGrid-item-44 MuiGrid-grid-xs-12-83"
@@ -63,13 +60,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -83,7 +80,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="varyingDimensions"
@@ -91,7 +88,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           varyingDimensions
         </span>
@@ -101,13 +98,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -121,7 +118,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="allowBulkNames"
@@ -129,7 +126,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           allowBulkNames
         </span>
@@ -139,13 +136,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -159,7 +156,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="isDefault"
@@ -167,7 +164,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           isDefault
         </span>
@@ -177,13 +174,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -197,7 +194,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="varyingDefaultColors"
@@ -205,7 +202,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           varyingDefaultColors
         </span>
@@ -215,13 +212,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -235,7 +232,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="designElementsLocked"
@@ -243,7 +240,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           designElementsLocked
         </span>
@@ -253,13 +250,13 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
       class="MuiGrid-item-44 MuiGrid-grid-xs-12-83 FormProductionMethods-checkboxGrid-1"
     >
       <label
-        class="MuiFormControlLabel-root-205"
+        class="MuiFormControlLabel-root-197"
       >
         <span
-          class="MuiButtonBase-root-227 MuiIconButton-root-221 MuiPrivateSwitchBase-root-217 MuiCheckbox-root-211 MuiCheckbox-colorPrimary-215"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213 MuiPrivateSwitchBase-root-209 MuiCheckbox-root-203 MuiCheckbox-colorPrimary-207"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"
@@ -273,7 +270,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
               />
             </svg>
             <input
-              class="MuiPrivateSwitchBase-input-220"
+              class="MuiPrivateSwitchBase-input-212"
               data-indeterminate="false"
               type="checkbox"
               value="oneLineText"
@@ -281,7 +278,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
           </span>
         </span>
         <span
-          class="MuiTypography-root-230 MuiTypography-body1-239 MuiFormControlLabel-label-210"
+          class="MuiTypography-root-222 MuiTypography-body1-231 MuiFormControlLabel-label-202"
         >
           oneLineText
         </span>
@@ -294,7 +291,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="MuiFormControl-root-143"
       >
         <label
-          class="MuiFormLabel-root-277 MuiInputLabel-root-266 MuiInputLabel-formControl-271 MuiInputLabel-animated-274"
+          class="MuiFormLabel-root-269 MuiInputLabel-root-258 MuiInputLabel-formControl-263 MuiInputLabel-animated-266"
           data-shrink="false"
         >
           minimumOrderAmount
@@ -318,7 +315,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="FormProductionMethods-inputWithLabel-14"
       >
         <legend
-          class="MuiFormLabel-root-277"
+          class="MuiFormLabel-root-269"
         >
            maxTextElements 
         </legend>
@@ -344,7 +341,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="FormProductionMethods-inputWithLabel-14"
       >
         <legend
-          class="MuiFormLabel-root-277"
+          class="MuiFormLabel-root-269"
         >
            maxImageElements 
         </legend>
@@ -370,7 +367,7 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="FormProductionMethods-inputWithLabel-14"
       >
         <legend
-          class="MuiFormLabel-root-277"
+          class="MuiFormLabel-root-269"
         >
            maxTotalElements 
         </legend>
@@ -404,14 +401,14 @@ exports[`Unit- FormProductionMethods renders correctly 1`] = `
         class="MuiGrid-item-44 MuiGrid-grid-xs-12-83"
       >
         <button
-          class="MuiButtonBase-root-227 MuiIconButton-root-221"
+          class="MuiButtonBase-root-219 MuiIconButton-root-213"
           id="remove"
           label="Remove"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiIconButton-label-226"
+            class="MuiIconButton-label-218"
           >
             <svg
               aria-hidden="true"

package/src/UIComponents/SelectField.js

@@ -59,7 +59,9 @@ class UISelectField extends React.Component {
                     )}
                     {children}
                 </Select>
-                <FormHelperText>{error}</FormHelperText>
+                {error &&
+                    <FormHelperText>{error}</FormHelperText>
+                }
             </FormControl>
         );
     }

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 };
 };