@configuratorware/configurator-frontendgui 1.31.4 → 1.31.7

package/App/Modules/Designer/Components/ImageColorize/index.js

@@ -229,7 +229,8 @@ var ImageColorize = /*#__PURE__*/function (_React$Component) {
       selectedColorPalette: null,
       vectorizeThreshold: 0,
       isThresholdSliderDisabled: false,
-      designProductionMethodName: ''
+      designProductionMethodName: '',
+      vectorizeRequested: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "onVectorizeThresholdChange", function (event) {
@@ -327,6 +328,11 @@ var ImageColorize = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onVectorizeToggleChange", function (e, value) {
       var onVectorizeToggleChange = _this.props.onVectorizeToggleChange;
+
+      _this.setState({
+        vectorizeRequested: value
+      });
+
       onVectorizeToggleChange && onVectorizeToggleChange(value);
     });
 
@@ -449,7 +455,8 @@ var ImageColorize = /*#__PURE__*/function (_React$Component) {
           customControlElements = _this$props4.customControlElements;
       var _this$state = this.state,
           selectedColor = _this$state.selectedColor,
-          vectorizeThreshold = _this$state.vectorizeThreshold;
+          vectorizeThreshold = _this$state.vectorizeThreshold,
+          vectorizeRequested = _this$state.vectorizeRequested;
       var onColorRemoveClick = this.props.onColorRemoveClick;
       var thresholdValue = colorAmountList.indexOf(vectorizeThreshold) === -1 ? 0 : vectorizeThreshold;
       var amountIsValid = this.validateAmount();
@@ -488,7 +495,7 @@ var ImageColorize = /*#__PURE__*/function (_React$Component) {
         }) : (0, _i18n.t)('imageEditDialog.imageColors', {
           amount: colorAmount
         })));
-      }))), imageColorsWereEdited && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }))), (imageColorsWereEdited || vectorizeRequested) && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         variant: "outlined",
         onClick: this.resetImageState,
         disabled: isLoading,

package/App/Services/VisualizationService.js

@@ -435,6 +435,8 @@ var VisualizationService = /*#__PURE__*/function (_AbstractVisualizatio) {
       (0, _sendMessage["default"])(component, 'clearViewIfEmpty', !!isAdminMode);
       var visualizationOverlayMode = (0, _configuration.getConf)('visualizationOverlayMode');
       (0, _sendMessage["default"])(component, 'setOverlayMode', !!visualizationOverlayMode);
+      var visualizationOptions = (0, _configuration.getConf)('visualization.options');
+      (0, _sendMessage["default"])(component, 'setOptions', visualizationOptions);
       this.observable.dispatch(EventTypes.ComponentChange, {
         component: component
       });

package/App/Shared/Components/PriceOverview/index.js

@@ -51,7 +51,8 @@ var styles = function styles(theme) {
   return {
     cardPriceOverview: (_cardPriceOverview = {
       fontSize: 12,
-      boxShadow: 'none'
+      boxShadow: 'none',
+      overflow: 'initial'
     }, _defineProperty(_cardPriceOverview, theme.breakpoints.down('md'), {
       boxShadow: 'none'
     }), _defineProperty(_cardPriceOverview, theme.breakpoints.down('sm'), {

package/App/configuration.js

@@ -164,7 +164,14 @@ var applicationConfiguration = {
 
   },
   visualization: {
-    designAreaHighlightBackgroundColor: 'transparent'
+    designAreaHighlightBackgroundColor: 'transparent',
+    options: {
+      // when zoom = 1 use NearestFilter (for sharper product image)
+      sharperFullView: false,
+      // upscale or downscale the product image to fit 2048 x 2048
+      // Warning! not recommended, use better image resources instead
+      optimizeProductImage: false
+    }
   },
   designer: {
     dpi: 300,

package/package.json

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

package/scripts/getDefaultWebpackConfig.js

@@ -93,7 +93,9 @@ function getConfig(mode, dirname) {
                         hot: true,
                         contentBase: BUILD_DIR,
                         publicPath: '/',
-                        historyApiFallback: true,
+                        historyApiFallback: {
+                            disableDotRule: true,
+                        },
                     },
                     module: {
                         rules: [

package/src/App/Modules/Designer/Components/ImageColorize/index.js

@@ -175,6 +175,7 @@ class ImageColorize extends React.Component {
         vectorizeThreshold: 0,
         isThresholdSliderDisabled: false,
         designProductionMethodName: '',
+        vectorizeRequested: false,
     };
 
     componentDidMount() {
@@ -256,7 +257,9 @@ class ImageColorize extends React.Component {
 
     onVectorizeToggleChange = (e, value) => {
         const { onVectorizeToggleChange } = this.props;
-
+        this.setState({
+            vectorizeRequested: value,
+        });
         onVectorizeToggleChange && onVectorizeToggleChange(value);
     };
 
@@ -331,7 +334,7 @@ class ImageColorize extends React.Component {
             colorAmountList,
             customControlElements,
         } = this.props;
-        const { selectedColor, vectorizeThreshold } = this.state;
+        const { selectedColor, vectorizeThreshold, vectorizeRequested } = this.state;
 
         const { onColorRemoveClick } = this.props;
 
@@ -377,7 +380,7 @@ class ImageColorize extends React.Component {
                             ))}
                         </Select>
                     </AnalyticsWrapper>
-                    {imageColorsWereEdited && (
+                    {(imageColorsWereEdited || vectorizeRequested) && (
                         <Button
                             variant="outlined"
                             onClick={this.resetImageState}

package/src/App/Services/VisualizationService.js

@@ -267,6 +267,9 @@ export default class VisualizationService extends AbstractVisualizationService {
         const visualizationOverlayMode = getConf('visualizationOverlayMode');
         sendMessage(component, 'setOverlayMode', !!visualizationOverlayMode);
 
+        const visualizationOptions = getConf('visualization.options');
+        sendMessage(component, 'setOptions', visualizationOptions);
+
         this.observable.dispatch(EventTypes.ComponentChange, { component });
 
         return this;

package/src/App/Shared/Components/PriceOverview/index.js

@@ -10,6 +10,7 @@ const styles = theme => ({
     cardPriceOverview: {
         fontSize: 12,
         boxShadow: 'none',
+        overflow: 'initial',
 
         [theme.breakpoints.down('md')]: {
             boxShadow: 'none',

package/src/App/configuration.js

@@ -181,6 +181,13 @@ let applicationConfiguration = {
 
     visualization: {
         designAreaHighlightBackgroundColor: 'transparent',
+        options: {
+            // when zoom = 1 use NearestFilter (for sharper product image)
+            sharperFullView: false,
+            // upscale or downscale the product image to fit 2048 x 2048
+            // Warning! not recommended, use better image resources instead
+            optimizeProductImage: false,
+        },
     },
 
     designer: {