@configuratorware/configurator-frontendgui 1.32.3 → 1.32.5

package/App/Modules/Designer/Components/ImageEditDialog/ImageUpload.js

@@ -242,7 +242,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
       }
 
       var extension = file.name.toLowerCase().match(/\.([0-9a-z]+)$/i)[1];
-      var allowedFormats = (0, _configuration.getConf)('designer.allowedImageUploadFormats');
+      var allowedFormats = (0, _configuration.getConf)('designer.allowedImageUploadFormats').split(',');
 
       if (allowedFormats.indexOf(extension) === -1) {
         error = (0, _i18n.t)('fileUpload.uploadFormatError', {

package/App/Reducers/ImageGallery/Selectors.js

@@ -170,9 +170,10 @@ var showVectorizeImageQuality = function showVectorizeImageQuality(imageToAnalys
 
   if (imageToAnalyse) {
     var pixelsInTheImage = (0, _get["default"])(imageToAnalyse, 'original.width', 0) * (0, _get["default"])(imageToAnalyse, 'original.height', 0);
-    var hasFormatSVG = (0, _get["default"])(imageToAnalyse, 'original.format', '').toLowerCase() === 'svg';
+    var vectorFormats = ['ai', 'pdf', 'svg', 'eps', 'ps', 'ept'];
+    var hasVectorFormat = vectorFormats.indexOf((0, _get["default"])(imageToAnalyse, 'original.format', '').toLowerCase()) > -1;
     var pixelsOfReference = minimumPixelAmount || (0, _configuration.getConf)('vectorizeImageQuality');
-    return !hasFormatSVG && pixelsInTheImage < pixelsOfReference;
+    return !hasVectorFormat && pixelsInTheImage < pixelsOfReference;
   }
 
   return false;

package/App/Services/DesignDataService.js

@@ -450,6 +450,8 @@ var applySvgContentOperations = function applySvgContentOperations(preview, oper
 
   if (svgTags && svgTags[0]) {
     var svgTag = svgTags[0];
+    var percentageHeight = /height=["']\d+%["']/;
+    var percentageWidth = /width=["']\d+%["']/;
 
     if (svgTag.indexOf('viewBox=') === -1) {
       svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(preview.width, " ").concat(preview.height, "\""));
@@ -462,7 +464,18 @@ var applySvgContentOperations = function applySvgContentOperations(preview, oper
     if (svgTag.indexOf('width=') === -1) {
       svgContent = svgContent.replace('<svg', "<svg width=\"".concat(preview.width, "px\""));
     }
-  }
+
+    if (percentageHeight.test(svgTag)) {
+      svgContent = svgContent.replace(percentageHeight, "height=\"".concat(preview.height, "px\""));
+    }
+
+    if (percentageWidth.test(svgTag)) {
+      svgContent = svgContent.replace(percentageWidth, "width=\"".concat(preview.width, "px\""));
+    }
+  } // remove doctype if present
+
+
+  svgContent = svgContent.replace(/<!DOCTYPE(?:(?!>)[\s\S])*>/gi, '');
 
   if (operations && operations.vectorize && operations.vectorizeColorsMap && Object.keys(operations.vectorizeColorsMap).length) {
     var colorRegex = new RegExp("(".concat(Object.keys(operations.vectorizeColorsMap).join('|'), ")"), 'ig');

package/App/configuration.js

@@ -178,8 +178,8 @@ var applicationConfiguration = {
     // the default canvas dpi as project specific option
     maxColorAmount: 10,
     // the default max number of colors in the colorizing feature
-    allowedImageUploadFormats: [// the image formats users can upload to designareas / designer items
-    'jpg', 'jpeg', 'svg', 'png', 'pdf', 'bmp', 'tif', 'tiff', 'eps', 'ai', 'gif']
+    allowedImageUploadFormats: 'jpg,jpeg,svg,png,pdf,bmp,tif,tiff,eps,ai,gif' // the image formats users can upload to designareas / designer items
+
   },
   vectorizeImageQuality: 45000,
   renderPreviewImagesForCheckout: true,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.32.3",
+  "version": "1.32.5",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.32.3",
+    "@configuratorware/scripts": "1.32.5",
     "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
@@ -39,8 +39,8 @@
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.32.3",
-    "redhotmagma-visualization": "1.32.3",
+    "redhotmagma-graphics-editor": "1.32.5",
+    "redhotmagma-visualization": "1.32.5",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Designer/Components/ImageEditDialog/ImageUpload.js

@@ -209,8 +209,7 @@ class ImageEditDialog extends React.Component {
 
         const extension = file.name.toLowerCase().match(/\.([0-9a-z]+)$/i)[1];
 
-        const allowedFormats = getConf('designer.allowedImageUploadFormats');
-
+        const allowedFormats = getConf('designer.allowedImageUploadFormats').split(',');
         if (allowedFormats.indexOf(extension) === -1) {
             error = t('fileUpload.uploadFormatError', { formats: allowedFormats.join(', ').toUpperCase() });
         }

package/src/App/Reducers/ImageGallery/Selectors.js

@@ -119,10 +119,12 @@ export const showVectorizeImageQuality = (imageToAnalyse, minimumPixelAmount = n
     if (imageToAnalyse) {
         const pixelsInTheImage =
             get(imageToAnalyse, 'original.width', 0) * get(imageToAnalyse, 'original.height', 0);
-        const hasFormatSVG = get(imageToAnalyse, 'original.format', '').toLowerCase() === 'svg';
+        const vectorFormats = ['ai', 'pdf', 'svg', 'eps', 'ps', 'ept'];
+        const hasVectorFormat =
+            vectorFormats.indexOf(get(imageToAnalyse, 'original.format', '').toLowerCase()) > -1;
         const pixelsOfReference = minimumPixelAmount || getConf('vectorizeImageQuality');
 
-        return !hasFormatSVG && pixelsInTheImage < pixelsOfReference;
+        return !hasVectorFormat && pixelsInTheImage < pixelsOfReference;
     }
     return false;
 };

package/src/App/Services/DesignDataService.js

@@ -397,6 +397,8 @@ export const applySvgContentOperations = (preview, operations, svgContent) => {
 
     if (svgTags && svgTags[0]) {
         const svgTag = svgTags[0];
+        const percentageHeight = /height=["']\d+%["']/;
+        const percentageWidth = /width=["']\d+%["']/;
 
         if (svgTag.indexOf('viewBox=') === -1) {
             svgContent = svgContent.replace('<svg', `<svg viewBox="0 0 ${preview.width} ${preview.height}"`);
@@ -409,8 +411,19 @@ export const applySvgContentOperations = (preview, operations, svgContent) => {
         if (svgTag.indexOf('width=') === -1) {
             svgContent = svgContent.replace('<svg', `<svg width="${preview.width}px"`);
         }
+
+        if (percentageHeight.test(svgTag)) {
+            svgContent = svgContent.replace(percentageHeight, `height="${preview.height}px"`);
+        }
+
+        if (percentageWidth.test(svgTag)) {
+            svgContent = svgContent.replace(percentageWidth, `width="${preview.width}px"`);
+        }
     }
 
+    // remove doctype if present
+    svgContent = svgContent.replace(/<!DOCTYPE[^>]*>/gis, '');
+
     if (
         operations &&
         operations.vectorize &&

package/src/App/configuration.js

@@ -193,20 +193,7 @@ let applicationConfiguration = {
     designer: {
         dpi: 300, // the default canvas dpi as project specific option
         maxColorAmount: 10, // the default max number of colors in the colorizing feature
-        allowedImageUploadFormats: [
-            // the image formats users can upload to designareas / designer items
-            'jpg',
-            'jpeg',
-            'svg',
-            'png',
-            'pdf',
-            'bmp',
-            'tif',
-            'tiff',
-            'eps',
-            'ai',
-            'gif',
-        ],
+        allowedImageUploadFormats: 'jpg,jpeg,svg,png,pdf,bmp,tif,tiff,eps,ai,gif', // the image formats users can upload to designareas / designer items
     },
 
     vectorizeImageQuality: 45000,