@configuratorware/configurator-frontendgui 1.31.0 → 1.31.3

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

@@ -41,6 +41,8 @@ var _ServiceLocator = require("../../../../ServiceLocator");
 
 var _withWidth = _interopRequireWildcard(require("@material-ui/core/withWidth/withWidth"));
 
+var _configuration = require("../../../../configuration");
+
 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; }
@@ -240,7 +242,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
       }
 
       var extension = file.name.toLowerCase().match(/\.([0-9a-z]+)$/i)[1];
-      var allowedFormats = ['jpg', 'jpeg', 'svg', 'png', 'pdf', 'bmp', 'tif', 'eps', 'ai', 'gif'];
+      var allowedFormats = (0, _configuration.getConf)('designer.allowedImageUploadFormats');
 
       if (allowedFormats.indexOf(extension) === -1) {
         error = (0, _i18n.t)('fileUpload.uploadFormatError', {
@@ -260,8 +262,8 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         imageData: null
       });
 
-      var renderabelFormats = ['jpg', 'jpeg', 'svg', 'png', 'bmp', 'tif', 'gif'];
-      var isRenderable = renderabelFormats.indexOf(extension) !== -1;
+      var renderableFormats = ['jpg', 'jpeg', 'svg', 'png', 'bmp', 'gif'];
+      var isRenderable = renderableFormats.indexOf(extension) !== -1;
 
       if (isRenderable && file.type && file.type.match('image.*')) {
         var reader = new FileReader();

package/App/Reducers/ImageGallery/Reducer.js

@@ -186,7 +186,9 @@ function imageGalleryReducer() {
               selectedImage: currentImage
             });
           } else {
-            Object.assign(currentImage, selectedImage);
+            var idx = _userImages.indexOf(currentImage);
+
+            _userImages[idx] = _objectSpread(_objectSpread({}, currentImage), selectedImage);
             return _objectSpread(_objectSpread({}, state), {}, {
               userImages: _userImages
             });
@@ -266,12 +268,13 @@ function imageGalleryReducer() {
 
         if (action.immediateCommit) {
           result.userImages = _toConsumableArray(_userImages2);
-          var idx = (0, _findIndex["default"])(_userImages2, {
+
+          var _idx = (0, _findIndex["default"])(_userImages2, {
             identifier: image.identifier
           });
 
-          if (idx !== -1) {
-            result.userImages[idx] = image;
+          if (_idx !== -1) {
+            result.userImages[_idx] = image;
           } else {
             result.userImages.push(image);
           }

package/App/Services/DesignerService.js

@@ -55,10 +55,17 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 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; }
 
+function getCanvasImageScalingWithImageData(canvasImage, imageData) {
+  var currentPreview = canvasImage.imageData.preview;
+  var nextPreview = imageData.preview;
+  return canvasImage.scaling * (currentPreview.width / nextPreview.width);
+}
+
 function updateCanvasImageWithImageData(canvasImage, imageData) {
   return canvasImage.updateOptions((0, _Transformers.prepareImageObjectData)({
     imageData: imageData,
-    src: "".concat((0, _configuration.getConf)('network.host')).concat(imageData.preview.url)
+    src: "".concat((0, _configuration.getConf)('network.host')).concat(imageData.preview.url),
+    scaling: getCanvasImageScalingWithImageData(canvasImage, imageData)
   }));
 }
 

package/App/configuration.js

@@ -31,7 +31,7 @@ var DEVELOPMENT_HOST_INT = 'http://int.configuratorware.local'; // eslint-disabl
 var DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 var hostsByNodeEnv = {
   production: '',
-  development: DEVELOPMENT_HOST_INT,
+  development: DEVELOPMENT_HOST_LOCAL,
   test: ''
 };
 var resourceUrlsByNodeEnv = {
@@ -169,8 +169,10 @@ var applicationConfiguration = {
   designer: {
     dpi: 300,
     // the default canvas dpi as project specific option
-    maxColorAmount: 10 // the default max number of colors in the colorizing feature
-
+    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']
   },
   vectorizeImageQuality: 45000,
   renderPreviewImagesForCheckout: true,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.31.0",
+  "version": "1.31.3",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.31.0",
+    "@configuratorware/scripts": "1.31.3",
     "@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.31.0",
-    "redhotmagma-visualization": "1.31.0",
+    "redhotmagma-graphics-editor": "1.31.3",
+    "redhotmagma-visualization": "1.31.3",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/translations/en_GB.json

@@ -63,9 +63,8 @@
   },
   "productVariant": {
     "amountChosen": "chosen: ",
-    "addColor": "Add color",
-    "adaptAmount": "Adapt amount",
-    "editDesign": "Edit design",
+    "chooseSize": "Choose size",
+    "adaptSizes": "Adapt sizes",
     "confirmSelection": "Confirm selection",
     "amountLabel": "Amount"
   },
@@ -186,7 +185,6 @@
   "missingVariantError": "The selected item %{selectedVariant} is no longer available.",
   "errorDialogTitle": "Notice",
   "clientValidationError": "No valid channel/client combination found!",
-  "alertDialogTitle": "Alert",
   "okButtonLabel": "Ok",
   "cancelButtonLabel": "Cancel",
   "designAreaControlBox": {
@@ -415,6 +413,10 @@
     "okButton": "Ok",
     "cancelButton": "Cancel",
     "rules": {
+      "itemattributematch": {
+        "text": "The selection does not match the following parts in the configuration.",
+        "resolveText": "These options will be removed:"
+      },
       "optionexclusion": {
         "text": "The selection does not match the following parts in the configuration.",
         "resolveText": "These options will be removed:"

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

@@ -15,6 +15,7 @@ import Button from '@material-ui/core/Button';
 import MainButton from 'Shared/Components/MainButton';
 import { Services } from 'App/ServiceLocator';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth/withWidth';
+import { getConf } from '../../../../configuration';
 
 const styles = theme => ({
     imagePreview: {
@@ -208,7 +209,7 @@ class ImageEditDialog extends React.Component {
 
         const extension = file.name.toLowerCase().match(/\.([0-9a-z]+)$/i)[1];
 
-        const allowedFormats = ['jpg', 'jpeg', 'svg', 'png', 'pdf', 'bmp', 'tif', 'eps', 'ai', 'gif'];
+        const allowedFormats = getConf('designer.allowedImageUploadFormats');
 
         if (allowedFormats.indexOf(extension) === -1) {
             error = t('fileUpload.uploadFormatError', { formats: allowedFormats.join(', ').toUpperCase() });
@@ -221,8 +222,8 @@ class ImageEditDialog extends React.Component {
             error,
             imageData: null,
         });
-        const renderabelFormats = ['jpg', 'jpeg', 'svg', 'png', 'bmp', 'tif', 'gif'];
-        const isRenderable = renderabelFormats.indexOf(extension) !== -1;
+        const renderableFormats = ['jpg', 'jpeg', 'svg', 'png', 'bmp', 'gif'];
+        const isRenderable = renderableFormats.indexOf(extension) !== -1;
         if (isRenderable && file.type && file.type.match('image.*')) {
             const reader = new FileReader();
             reader.onload = e => {

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

@@ -133,7 +133,11 @@ export function imageGalleryReducer(state = initialState, action = {}) {
                         selectedImage: currentImage,
                     };
                 } else {
-                    Object.assign(currentImage, selectedImage);
+                    const idx = userImages.indexOf(currentImage);
+                    userImages[idx] = {
+                        ...currentImage,
+                        ...selectedImage,
+                    };
                     return {
                         ...state,
                         userImages,

package/src/App/Services/DesignerService.js

@@ -36,11 +36,18 @@ import { createTextPlaceholder } from '../Reducers/ImageGallery/Modifiers';
 import { updateLinkedImagesWithImageData } from '../Reducers/DesignData/Actions';
 import { checkDesignElementRestrictions } from '../Reducers/DesignArea/DesignElementSelectors';
 
+function getCanvasImageScalingWithImageData(canvasImage, imageData) {
+    const currentPreview = canvasImage.imageData.preview;
+    const nextPreview = imageData.preview;
+    return canvasImage.scaling * (currentPreview.width / nextPreview.width);
+}
+
 function updateCanvasImageWithImageData(canvasImage, imageData) {
     return canvasImage.updateOptions(
         prepareImageObjectData({
             imageData,
             src: `${getConf('network.host')}${imageData.preview.url}`,
+            scaling: getCanvasImageScalingWithImageData(canvasImage, imageData),
         })
     );
 }

package/src/App/configuration.js

@@ -13,7 +13,7 @@ const DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 
 const hostsByNodeEnv = {
     production: '',
-    development: DEVELOPMENT_HOST_INT,
+    development: DEVELOPMENT_HOST_LOCAL,
     test: '',
 };
 
@@ -186,6 +186,20 @@ 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',
+        ],
     },
 
     vectorizeImageQuality: 45000,