@configuratorware/configurator-frontendgui 1.40.6 → 1.41.0

package/App/Services/DesignDataService.js

@@ -682,13 +682,52 @@ var DesignDataService = /*#__PURE__*/function () {
       };
     }());
 
-    _defineProperty(this, "checkColorUsageForDesignProductionMethod", /*#__PURE__*/function () {
+    _defineProperty(this, "handleDesignProductionMethodChangeToMandatoryVectorization", /*#__PURE__*/function () {
       var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(designProductionMethodIdentifier) {
-        var state, _getSelectedDesignAre2, maxColorAmount, designProductionMethod, newProductionMethod, newMaxColorAmount, currentVectorsRequired, newVectorsRequired, designArea, colorPreviewRequired, canvas, images, missingColorPalettesColors;
+        var state, _getMandatoryVectoriz, currentVectorsMandatory, newVectorsMandatory, designArea, nonColorizedImages;
 
         return regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
             switch (_context4.prev = _context4.next) {
+              case 0:
+                state = _ServiceLocator.Services.store.state;
+                _getMandatoryVectoriz = (0, _Selectors.getMandatoryVectorizationForDesignProductionMethods)(state, designProductionMethodIdentifier), currentVectorsMandatory = _getMandatoryVectoriz.currentVectorsMandatory, newVectorsMandatory = _getMandatoryVectoriz.newVectorsMandatory;
+                designArea = (0, _Selectors.getSelectedDesignArea)(state);
+                nonColorizedImages = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier).filter(function (obj) {
+                  return !(0, _get2["default"])(obj, 'imageData.gallery') && !(0, _get2["default"])(obj, 'imageData.displayColorPreview');
+                });
+
+                if (!(nonColorizedImages.length === 1 && (!currentVectorsMandatory && newVectorsMandatory || !(0, _Selectors2.isColorPreviewCompatible)(state, nonColorizedImages[0].imageData, designProductionMethodIdentifier)))) {
+                  _context4.next = 8;
+                  break;
+                }
+
+                _context4.next = 7;
+                return _ServiceLocator.Services.store.dispatch((0, _Actions.showSwitchToProductionMethodWithVectorization)());
+
+              case 7:
+                return _context4.abrupt("return", true);
+
+              case 8:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function (_x3) {
+        return _ref6.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(this, "checkColorUsageForDesignProductionMethod", /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(designProductionMethodIdentifier) {
+        var state, _getSelectedDesignAre2, maxColorAmount, designProductionMethod, newProductionMethod, newMaxColorAmount, currentVectorsRequired, newVectorsRequired, designArea, colorPreviewRequired, canvas, images, missingColorPalettesColors;
+
+        return regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
               case 0:
                 state = _ServiceLocator.Services.store.state;
                 _getSelectedDesignAre2 = (0, _Selectors.getSelectedDesignAreaProperties)(state), maxColorAmount = _getSelectedDesignAre2.maxColorAmount, designProductionMethod = _getSelectedDesignAre2.designProductionMethod;
@@ -697,10 +736,10 @@ var DesignDataService = /*#__PURE__*/function () {
                 currentVectorsRequired = !!(0, _get2["default"])(designProductionMethod, 'options.vectorsRequired');
                 newVectorsRequired = !!(0, _get2["default"])(newProductionMethod, 'options.vectorsRequired');
                 designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(newProductionMethod);
+                colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(newProductionMethod) || (0, _Selectors.isVectorizedLogoMandatory)(newProductionMethod);
 
                 if (!(newMaxColorAmount !== 0 && newMaxColorAmount < maxColorAmount || !currentVectorsRequired && newVectorsRequired || colorPreviewRequired)) {
-                  _context4.next = 15;
+                  _context5.next = 17;
                   break;
                 }
 
@@ -714,69 +753,71 @@ var DesignDataService = /*#__PURE__*/function () {
                 }) : [];
 
                 if (!(images.length > 1)) {
-                  _context4.next = 15;
+                  _context5.next = 17;
                   break;
                 }
 
-                _context4.next = 14;
+                _context5.next = 14;
                 return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodRemoveImagesConfirm)());
 
               case 14:
                 images.forEach(function (object) {
                   object.remove();
                 });
+                _context5.next = 17;
+                return _this2.updateCanvasData(canvas);
 
-              case 15:
+              case 17:
                 missingColorPalettesColors = getMissingColorPalettesColors((0, _Selectors.getColorsWithPalette)(state), newProductionMethod.colorPalettes, !currentVectorsRequired && newVectorsRequired);
 
                 if (!missingColorPalettesColors.length) {
-                  _context4.next = 22;
+                  _context5.next = 24;
                   break;
                 }
 
                 if ((0, _Selectors.isColoringDisabled)(state, newProductionMethod.identifier)) {
-                  _context4.next = 22;
+                  _context5.next = 24;
                   break;
                 }
 
-                _context4.next = 20;
+                _context5.next = 22;
                 return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeColorsConfirm)());
 
-              case 20:
-                _context4.next = 22;
+              case 22:
+                _context5.next = 24;
                 return _this2.replaceSelectedDesignAreaElementsColor(missingColorPalettesColors, newProductionMethod);
 
-              case 22:
+              case 24:
               case "end":
-                return _context4.stop();
+                return _context5.stop();
             }
           }
-        }, _callee4);
+        }, _callee5);
       }));
 
-      return function (_x3) {
-        return _ref6.apply(this, arguments);
+      return function (_x4) {
+        return _ref7.apply(this, arguments);
       };
     }());
 
     _defineProperty(this, "replaceSelectedDesignAreaElementsColor", /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(missingColorPalettesColors, designProductionMethod) {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(missingColorPalettesColors, designProductionMethod) {
         var state, designArea, designData, objects, _iterator7, _step7, missingColor;
 
-        return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        return regeneratorRuntime.wrap(function _callee6$(_context6) {
           while (1) {
-            switch (_context5.prev = _context5.next) {
+            switch (_context6.prev = _context6.next) {
               case 0:
                 state = _ServiceLocator.Services.store.state;
                 designArea = (0, _Selectors.getSelectedDesignArea)(state);
                 designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier);
                 objects = (0, _get2["default"])(designData, 'canvasData.objects', []);
-                _context5.next = 6;
-                return Promise.all(objects.filter(function (_ref8) {
-                  var type = _ref8.type;
+                _context6.next = 6;
+                return Promise.all(objects.filter(function (_ref9) {
+                  var type = _ref9.type;
                   return type === 'Image';
-                }).map(function (_ref9) {
-                  var imageData = _ref9.imageData;
+                }).map(function (_ref10) {
+                  var imageData = _ref10.imageData;
                   return (0, _Selectors2.getUserImage)(state, imageData.identifier);
                 }).filter(function (image, idx, arr) {
                   return arr.indexOf(image) === idx && // uniq
@@ -810,19 +851,19 @@ var DesignDataService = /*#__PURE__*/function () {
                   _iterator7.f();
                 }
 
-                _context5.next = 10;
+                _context6.next = 10;
                 return _this2.loadCanvasDataFromState([designArea]);
 
               case 10:
               case "end":
-                return _context5.stop();
+                return _context6.stop();
             }
           }
-        }, _callee5);
+        }, _callee6);
       }));
 
-      return function (_x4, _x5) {
-        return _ref7.apply(this, arguments);
+      return function (_x5, _x6) {
+        return _ref8.apply(this, arguments);
       };
     }());
   }
@@ -835,36 +876,36 @@ var DesignDataService = /*#__PURE__*/function () {
       _ServiceLocator.Services.store.observeStore(function (state) {
         return state.designArea.filteredDesignAreas;
       }, /*#__PURE__*/function () {
-        var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(filteredDesignAreas, prevDesignAreas) {
+        var _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(filteredDesignAreas, prevDesignAreas) {
           var initList, areasToLoad;
-          return regeneratorRuntime.wrap(function _callee6$(_context6) {
+          return regeneratorRuntime.wrap(function _callee7$(_context7) {
             while (1) {
-              switch (_context6.prev = _context6.next) {
+              switch (_context7.prev = _context7.next) {
                 case 0:
-                  _context6.prev = 0;
-                  _context6.next = 3;
+                  _context7.prev = 0;
+                  _context7.next = 3;
                   return _this3.initCanvases(filteredDesignAreas, prevDesignAreas);
 
                 case 3:
-                  initList = _context6.sent;
+                  initList = _context7.sent;
                   // only the newly initialized canvases has to be loaded
-                  areasToLoad = initList.filter(function (_ref11) {
-                    var isNew = _ref11.isNew;
+                  areasToLoad = initList.filter(function (_ref12) {
+                    var isNew = _ref12.isNew;
                     return isNew;
-                  }).map(function (_ref12) {
-                    var designArea = _ref12.designArea;
+                  }).map(function (_ref13) {
+                    var designArea = _ref13.designArea;
                     return designArea;
                   }); // the canvas data is there first with the configuration, but since the canvas instances are
                   // associated with the design areas the data can be loaded only when the design areas are available
 
-                  _context6.t0 = !(0, _Selectors3.isDesignerProductPreviewMode)() && areasToLoad.length;
+                  _context7.t0 = !(0, _Selectors3.isDesignerProductPreviewMode)() && areasToLoad.length;
 
-                  if (!_context6.t0) {
-                    _context6.next = 9;
+                  if (!_context7.t0) {
+                    _context7.next = 9;
                     break;
                   }
 
-                  _context6.next = 9;
+                  _context7.next = 9;
                   return _this3.loadCanvasDataFromState(areasToLoad);
 
                 case 9:
@@ -872,25 +913,25 @@ var DesignDataService = /*#__PURE__*/function () {
 
                   _this3.designAreaListChangeListener(filteredDesignAreas, prevDesignAreas);
 
-                  _context6.next = 16;
+                  _context7.next = 16;
                   break;
 
                 case 13:
-                  _context6.prev = 13;
-                  _context6.t1 = _context6["catch"](0);
+                  _context7.prev = 13;
+                  _context7.t1 = _context7["catch"](0);
                   // eslint-disable-next-line no-console
-                  console.error('Error occurred in processing design area list change:', _context6.t1);
+                  console.error('Error occurred in processing design area list change:', _context7.t1);
 
                 case 16:
                 case "end":
-                  return _context6.stop();
+                  return _context7.stop();
               }
             }
-          }, _callee6, null, [[0, 13]]);
+          }, _callee7, null, [[0, 13]]);
         }));
 
-        return function (_x6, _x7) {
-          return _ref10.apply(this, arguments);
+        return function (_x7, _x8) {
+          return _ref11.apply(this, arguments);
         };
       }());
 
@@ -910,8 +951,8 @@ var DesignDataService = /*#__PURE__*/function () {
         });
       }
 
-      _ServiceLocator.Services.store.observeStore(function (_ref13) {
-        var selectedoptionclassification = _ref13.configurator.selectedoptionclassification;
+      _ServiceLocator.Services.store.observeStore(function (_ref14) {
+        var selectedoptionclassification = _ref14.configurator.selectedoptionclassification;
         return selectedoptionclassification;
       }, this.componentChangeHandler.bind(this));
 
@@ -1011,13 +1052,13 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "initCanvases",
     value: function () {
-      var _initCanvases = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(designAreas, prevDesignAreas) {
+      var _initCanvases = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(designAreas, prevDesignAreas) {
         var _this4 = this;
 
         var state;
-        return regeneratorRuntime.wrap(function _callee7$(_context7) {
+        return regeneratorRuntime.wrap(function _callee8$(_context8) {
           while (1) {
-            switch (_context7.prev = _context7.next) {
+            switch (_context8.prev = _context8.next) {
               case 0:
                 // clean up first: remove canvases that are not mapped to any design areas
                 this._removeCanvas && prevDesignAreas.filter(function (prevArea) {
@@ -1028,7 +1069,7 @@ var DesignDataService = /*#__PURE__*/function () {
                   return _this4._removeCanvas(prevArea);
                 });
                 state = _ServiceLocator.Services.store.state;
-                _context7.next = 4;
+                _context8.next = 4;
                 return Promise.all(designAreas.map(function (designArea) {
                   var maskData = (0, _Selectors.getMaskDataForDesignArea)(state, designArea);
                   var canvasSize = (0, _Selectors.getCanvasSizeFromDesignArea)(state, designArea);
@@ -1044,17 +1085,17 @@ var DesignDataService = /*#__PURE__*/function () {
                 }));
 
               case 4:
-                return _context7.abrupt("return", _context7.sent);
+                return _context8.abrupt("return", _context8.sent);
 
               case 5:
               case "end":
-                return _context7.stop();
+                return _context8.stop();
             }
           }
-        }, _callee7, this);
+        }, _callee8, this);
       }));
 
-      function initCanvases(_x8, _x9) {
+      function initCanvases(_x9, _x10) {
         return _initCanvases.apply(this, arguments);
       }
 
@@ -1068,26 +1109,26 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "updateCanvasDataFromState",
     value: function () {
-      var _updateCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+      var _updateCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
         var designAreas,
-            _args8 = arguments;
-        return regeneratorRuntime.wrap(function _callee8$(_context8) {
+            _args9 = arguments;
+        return regeneratorRuntime.wrap(function _callee9$(_context9) {
           while (1) {
-            switch (_context8.prev = _context8.next) {
+            switch (_context9.prev = _context9.next) {
               case 0:
-                designAreas = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : this.getDesignAreas();
-                _context8.next = 3;
+                designAreas = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : this.getDesignAreas();
+                _context9.next = 3;
                 return this.syncCanvases(this._updateCanvasData, designAreas);
 
               case 3:
-                return _context8.abrupt("return", _context8.sent);
+                return _context9.abrupt("return", _context9.sent);
 
               case 4:
               case "end":
-                return _context8.stop();
+                return _context9.stop();
             }
           }
-        }, _callee8, this);
+        }, _callee9, this);
       }));
 
       function updateCanvasDataFromState() {
@@ -1104,26 +1145,26 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "loadCanvasDataFromState",
     value: function () {
-      var _loadCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+      var _loadCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
         var designAreas,
-            _args9 = arguments;
-        return regeneratorRuntime.wrap(function _callee9$(_context9) {
+            _args10 = arguments;
+        return regeneratorRuntime.wrap(function _callee10$(_context10) {
           while (1) {
-            switch (_context9.prev = _context9.next) {
+            switch (_context10.prev = _context10.next) {
               case 0:
-                designAreas = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : this.getDesignAreas();
-                _context9.next = 3;
+                designAreas = _args10.length > 0 && _args10[0] !== undefined ? _args10[0] : this.getDesignAreas();
+                _context10.next = 3;
                 return this.syncCanvases(this._loadCanvasData, designAreas);
 
               case 3:
-                return _context9.abrupt("return", _context9.sent);
+                return _context10.abrupt("return", _context10.sent);
 
               case 4:
               case "end":
-                return _context9.stop();
+                return _context10.stop();
             }
           }
-        }, _callee9, this);
+        }, _callee10, this);
       }));
 
       function loadCanvasDataFromState() {
@@ -1143,48 +1184,48 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "syncCanvases",
     value: function () {
-      var _syncCanvases = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(updateFn, designAreas) {
+      var _syncCanvases = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(updateFn, designAreas) {
         var _this5 = this;
 
         var state;
-        return regeneratorRuntime.wrap(function _callee11$(_context11) {
+        return regeneratorRuntime.wrap(function _callee12$(_context12) {
           while (1) {
-            switch (_context11.prev = _context11.next) {
+            switch (_context12.prev = _context12.next) {
               case 0:
                 state = _ServiceLocator.Services.store.state;
-                _context11.next = 3;
+                _context12.next = 3;
                 return Promise.all(designAreas.map( /*#__PURE__*/function () {
-                  var _ref14 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(designArea) {
+                  var _ref15 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(designArea) {
                     var designData, canvasData, canvasSize;
-                    return regeneratorRuntime.wrap(function _callee10$(_context10) {
+                    return regeneratorRuntime.wrap(function _callee11$(_context11) {
                       while (1) {
-                        switch (_context10.prev = _context10.next) {
+                        switch (_context11.prev = _context11.next) {
                           case 0:
                             designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier);
                             canvasData = (0, _get2["default"])(designData, 'canvasData');
 
                             if (!canvasData) {
-                              _context10.next = 7;
+                              _context11.next = 7;
                               break;
                             }
 
-                            _context10.next = 5;
+                            _context11.next = 5;
                             return preloadFonts(canvasData);
 
                           case 5:
                             canvasSize = (0, _Selectors.getCanvasSizeFromDesignArea)(state, designArea);
-                            return _context10.abrupt("return", updateFn && updateFn(canvasData, designArea, canvasSize));
+                            return _context11.abrupt("return", updateFn && updateFn(canvasData, designArea, canvasSize));
 
                           case 7:
                           case "end":
-                            return _context10.stop();
+                            return _context11.stop();
                         }
                       }
-                    }, _callee10);
+                    }, _callee11);
                   }));
 
-                  return function (_x12) {
-                    return _ref14.apply(this, arguments);
+                  return function (_x13) {
+                    return _ref15.apply(this, arguments);
                   };
                 }()));
 
@@ -1195,13 +1236,13 @@ var DesignDataService = /*#__PURE__*/function () {
 
               case 4:
               case "end":
-                return _context11.stop();
+                return _context12.stop();
             }
           }
-        }, _callee11);
+        }, _callee12);
       }));
 
-      function syncCanvases(_x10, _x11) {
+      function syncCanvases(_x11, _x12) {
         return _syncCanvases.apply(this, arguments);
       }
 
@@ -1217,8 +1258,8 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "getDesignAreaByIdentifier",
     value: function getDesignAreaByIdentifier(designAreaIdentifier) {
-      return this.getDesignAreas().find(function (_ref15) {
-        var identifier = _ref15.identifier;
+      return this.getDesignAreas().find(function (_ref16) {
+        var identifier = _ref16.identifier;
         return identifier === designAreaIdentifier;
       });
     }
@@ -1258,15 +1299,15 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "updateCanvasData",
     value: function () {
-      var _updateCanvasData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(canvas, eventData) {
+      var _updateCanvasData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(canvas, eventData) {
         var canvasDataJSON, showAlert, _getDesignDataForSele, canvasData;
 
-        return regeneratorRuntime.wrap(function _callee12$(_context12) {
+        return regeneratorRuntime.wrap(function _callee13$(_context13) {
           while (1) {
-            switch (_context12.prev = _context12.next) {
+            switch (_context13.prev = _context13.next) {
               case 0:
                 if (this._serializeCanvas) {
-                  _context12.next = 2;
+                  _context13.next = 2;
                   break;
                 }
 
@@ -1281,7 +1322,7 @@ var DesignDataService = /*#__PURE__*/function () {
                 showAlert = eventData ? checkColorUsage(canvasDataJSON, eventData.changeEvent) : false;
 
                 if (!(showAlert && (0, _configuration.getConf)('displayColorAmountWarnings', true))) {
-                  _context12.next = 9;
+                  _context13.next = 9;
                   break;
                 }
 
@@ -1290,20 +1331,20 @@ var DesignDataService = /*#__PURE__*/function () {
                 _getDesignDataForSele = (0, _Selectors.getDesignDataForSelectedDesignArea)(_ServiceLocator.Services.store.state), canvasData = _getDesignDataForSele.canvasData; // Restore Graphics Editor state
 
                 this._loadCanvasData && this._loadCanvasData(canvasData);
-                return _context12.abrupt("return");
+                return _context13.abrupt("return");
 
               case 9:
                 this.setCanvasData(canvasDataJSON);
 
               case 10:
               case "end":
-                return _context12.stop();
+                return _context13.stop();
             }
           }
-        }, _callee12, this);
+        }, _callee13, this);
       }));
 
-      function updateCanvasData(_x13, _x14) {
+      function updateCanvasData(_x14, _x15) {
         return _updateCanvasData.apply(this, arguments);
       }
 
@@ -1311,31 +1352,31 @@ var DesignDataService = /*#__PURE__*/function () {
     }()
   }, {
     key: "createCanvasChangeListener",
-    value: function createCanvasChangeListener(_ref16) {
+    value: function createCanvasChangeListener(_ref17) {
       var _this6 = this;
 
-      var syncCanvasChange = _ref16.syncCanvasChange;
+      var syncCanvasChange = _ref17.syncCanvasChange;
       this._syncCanvasChange = syncCanvasChange;
-      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
-        var _args13 = arguments;
-        return regeneratorRuntime.wrap(function _callee13$(_context13) {
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+        var _args14 = arguments;
+        return regeneratorRuntime.wrap(function _callee14$(_context14) {
           while (1) {
-            switch (_context13.prev = _context13.next) {
+            switch (_context14.prev = _context14.next) {
               case 0:
                 if (!_this6._isCanvasDataUpdateEnabled) {
-                  _context13.next = 3;
+                  _context14.next = 3;
                   break;
                 }
 
-                _context13.next = 3;
-                return _this6.updateCanvasData.apply(_this6, _args13);
+                _context14.next = 3;
+                return _this6.updateCanvasData.apply(_this6, _args14);
 
               case 3:
               case "end":
-                return _context13.stop();
+                return _context14.stop();
             }
           }
-        }, _callee13);
+        }, _callee14);
       }));
     }
   }, {
@@ -1587,20 +1628,34 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "vectorizeSingleImageAndShowEditDialog",
     value: function () {
-      var _vectorizeSingleImageAndShowEditDialog = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(identifier) {
-        var showImageEditDialog, state, designArea, canvas, firstNonVectorizedImage, operations, imageData, imageToSelect;
-        return regeneratorRuntime.wrap(function _callee14$(_context14) {
+      var _vectorizeSingleImageAndShowEditDialog = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(identifier) {
+        var showImageEditDialog, state, designArea, canvas, images, firstNonVectorizedImage, operations, imageData, imageToSelect;
+        return regeneratorRuntime.wrap(function _callee15$(_context15) {
           while (1) {
-            switch (_context14.prev = _context14.next) {
+            switch (_context15.prev = _context15.next) {
               case 0:
-                _context14.next = 2;
+                _context15.next = 2;
                 return this.handleDesignProductionMethodChangeFromNonVectorizationToVectorization(identifier);
 
               case 2:
-                showImageEditDialog = _context14.sent;
+                _context15.t0 = _context15.sent;
+
+                if (_context15.t0) {
+                  _context15.next = 7;
+                  break;
+                }
+
+                _context15.next = 6;
+                return this.handleDesignProductionMethodChangeToMandatoryVectorization(identifier);
+
+              case 6:
+                _context15.t0 = _context15.sent;
+
+              case 7:
+                showImageEditDialog = _context15.t0;
 
                 if (!showImageEditDialog) {
-                  _context14.next = 23;
+                  _context15.next = 29;
                   break;
                 }
 
@@ -1609,57 +1664,58 @@ var DesignDataService = /*#__PURE__*/function () {
                 state = _ServiceLocator.Services.store.state;
                 designArea = (0, _Selectors.getSelectedDesignArea)(state);
                 canvas = this._getCanvas(designArea);
-                firstNonVectorizedImage = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier).find(function (obj) {
-                  return !(0, _get2["default"])(obj, 'imageData.operations.vectorize');
+                images = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier);
+                firstNonVectorizedImage = images.find(function (obj) {
+                  return !(0, _get2["default"])(obj, 'imageData.gallery') && (!(0, _get2["default"])(obj, 'imageData.operations.vectorize') || !(0, _get2["default"])(obj, 'imageData.displayColorPreview'));
                 });
+                _context15.prev = 15;
                 operations = _objectSpread(_objectSpread({}, firstNonVectorizedImage.imageData.operations), {}, {
                   vectorize: true
                 });
-                imageData = firstNonVectorizedImage.imageData;
-                _context14.prev = 11;
+                imageData = firstNonVectorizedImage.imageData; //returing if placeHolderImage, from executing edit operations
 
                 if (!imageData.isPlaceHolderImage) {
-                  _context14.next = 14;
+                  _context15.next = 20;
                   break;
                 }
 
-                return _context14.abrupt("return");
+                return _context15.abrupt("return");
 
-              case 14:
-                _context14.next = 16;
+              case 20:
+                _context15.next = 22;
                 return _ServiceLocator.Services.designData.editFile(operations, imageData, {
                   immediateCommit: true
                 });
 
-              case 16:
+              case 22:
                 imageToSelect = canvas.objects.filter(function (object) {
                   return object.type === 'Image';
                 }).find(function (obj) {
                   return obj._imageData.identifier === imageData.identifier;
                 });
                 imageToSelect.selected = true;
-                _context14.next = 20;
+                _context15.next = 26;
                 return _ServiceLocator.Services.designer.openImageEditDialog(firstNonVectorizedImage.imageData.identifier, canvas, {
                   placeholderImageUpdate: false,
                   submitOnExitClick: true
                 });
 
-              case 20:
-                _context14.prev = 20;
+              case 26:
+                _context15.prev = 26;
 
                 _ServiceLocator.Services.ui.hide('globalLoader');
 
-                return _context14.finish(20);
+                return _context15.finish(26);
 
-              case 23:
+              case 29:
               case "end":
-                return _context14.stop();
+                return _context15.stop();
             }
           }
-        }, _callee14, this, [[11,, 20, 23]]);
+        }, _callee15, this, [[15,, 26, 29]]);
       }));
 
-      function vectorizeSingleImageAndShowEditDialog(_x15) {
+      function vectorizeSingleImageAndShowEditDialog(_x16) {
         return _vectorizeSingleImageAndShowEditDialog.apply(this, arguments);
       }
 
@@ -1668,21 +1724,21 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "restoreVectorizedImages",
     value: function () {
-      var _restoreVectorizedImages = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(identifier) {
+      var _restoreVectorizedImages = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16(identifier) {
         var displayImagesAsUnVectorized, state, designArea, images, _iterator8, _step8, image, operations;
 
-        return regeneratorRuntime.wrap(function _callee15$(_context15) {
+        return regeneratorRuntime.wrap(function _callee16$(_context16) {
           while (1) {
-            switch (_context15.prev = _context15.next) {
+            switch (_context16.prev = _context16.next) {
               case 0:
-                _context15.next = 2;
+                _context16.next = 2;
                 return this.handleDesignProductionMethodChangeFromVectorizationToNonVectorization(identifier);
 
               case 2:
-                displayImagesAsUnVectorized = _context15.sent;
+                displayImagesAsUnVectorized = _context16.sent;
 
                 if (!displayImagesAsUnVectorized) {
-                  _context15.next = 28;
+                  _context16.next = 28;
                   break;
                 }
 
@@ -1694,58 +1750,58 @@ var DesignDataService = /*#__PURE__*/function () {
                 }); //excluding placeHolderImage from executing edit operations
 
                 _iterator8 = _createForOfIteratorHelper(images);
-                _context15.prev = 9;
+                _context16.prev = 9;
 
                 _iterator8.s();
 
               case 11:
                 if ((_step8 = _iterator8.n()).done) {
-                  _context15.next = 18;
+                  _context16.next = 18;
                   break;
                 }
 
                 image = _step8.value;
                 operations = (0, _Modifiers.removeVectorizeFromOperations)(image.imageData.operations);
-                _context15.next = 16;
+                _context16.next = 16;
                 return _ServiceLocator.Services.designData.editFile(operations, image.imageData, {
                   immediateCommit: true,
                   displayColorPreview: (0, _configuration.getConf)('autoPreviewVectorization', true)
                 });
 
               case 16:
-                _context15.next = 11;
+                _context16.next = 11;
                 break;
 
               case 18:
-                _context15.next = 23;
+                _context16.next = 23;
                 break;
 
               case 20:
-                _context15.prev = 20;
-                _context15.t0 = _context15["catch"](9);
+                _context16.prev = 20;
+                _context16.t0 = _context16["catch"](9);
 
-                _iterator8.e(_context15.t0);
+                _iterator8.e(_context16.t0);
 
               case 23:
-                _context15.prev = 23;
+                _context16.prev = 23;
 
                 _iterator8.f();
 
-                return _context15.finish(23);
+                return _context16.finish(23);
 
               case 26:
-                _context15.next = 28;
+                _context16.next = 28;
                 return this.loadCanvasDataFromState([designArea]);
 
               case 28:
               case "end":
-                return _context15.stop();
+                return _context16.stop();
             }
           }
-        }, _callee15, this, [[9, 20, 23, 26]]);
+        }, _callee16, this, [[9, 20, 23, 26]]);
       }));
 
-      function restoreVectorizedImages(_x16) {
+      function restoreVectorizedImages(_x17) {
         return _restoreVectorizedImages.apply(this, arguments);
       }
 
@@ -1754,50 +1810,50 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "updateObjectsAfterProductionMethodChange",
     value: function () {
-      var _updateObjectsAfterProductionMethodChange = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16(oldProductionMethod, newProductionMethod) {
+      var _updateObjectsAfterProductionMethodChange = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17(oldProductionMethod, newProductionMethod) {
         var _getDesignDataForSele2, canvasData, objects, newObjects, designArea;
 
-        return regeneratorRuntime.wrap(function _callee16$(_context16) {
+        return regeneratorRuntime.wrap(function _callee17$(_context17) {
           while (1) {
-            switch (_context16.prev = _context16.next) {
+            switch (_context17.prev = _context17.next) {
               case 0:
                 _getDesignDataForSele2 = (0, _Selectors.getDesignDataForSelectedDesignArea)(_ServiceLocator.Services.store.state), canvasData = _getDesignDataForSele2.canvasData;
 
                 if (canvasData) {
-                  _context16.next = 3;
+                  _context17.next = 3;
                   break;
                 }
 
-                return _context16.abrupt("return");
+                return _context17.abrupt("return");
 
               case 3:
                 objects = canvasData.objects;
                 newObjects = (0, _Modifiers.applyProductionMethodChangeToCanvasObjects)(newProductionMethod, oldProductionMethod, objects);
 
                 if (!(newObjects === objects)) {
-                  _context16.next = 7;
+                  _context17.next = 7;
                   break;
                 }
 
-                return _context16.abrupt("return");
+                return _context17.abrupt("return");
 
               case 7:
                 this.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
                   objects: newObjects
                 }));
                 designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
-                _context16.next = 11;
+                _context17.next = 11;
                 return this.updateCanvasDataFromState([designArea]);
 
               case 11:
               case "end":
-                return _context16.stop();
+                return _context17.stop();
             }
           }
-        }, _callee16, this);
+        }, _callee17, this);
       }));
 
-      function updateObjectsAfterProductionMethodChange(_x17, _x18) {
+      function updateObjectsAfterProductionMethodChange(_x18, _x19) {
         return _updateObjectsAfterProductionMethodChange.apply(this, arguments);
       }
 
@@ -1822,18 +1878,18 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "setDesignProductionMethod",
     value: function () {
-      var _setDesignProductionMethod2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17(identifier) {
+      var _setDesignProductionMethod2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18(identifier) {
         var state, designData, selectedDesignProduction, bulkNameSelected, fontSizeMin, smallestFontSize, oldDesignProductionMethod;
-        return regeneratorRuntime.wrap(function _callee17$(_context17) {
+        return regeneratorRuntime.wrap(function _callee18$(_context18) {
           while (1) {
-            switch (_context17.prev = _context17.next) {
+            switch (_context18.prev = _context18.next) {
               case 0:
                 if (this.checkDesignElementRestrictions(identifier)) {
-                  _context17.next = 2;
+                  _context18.next = 2;
                   break;
                 }
 
-                return _context17.abrupt("return");
+                return _context18.abrupt("return");
 
               case 2:
                 this.clearSelectionOnCurrentDesignArea(); // check if the selected design production method has a higher minimum font size
@@ -1845,83 +1901,83 @@ var DesignDataService = /*#__PURE__*/function () {
                 bulkNameSelected = (0, _Selectors.hasSelectedBulkName)(designData);
 
                 if (isWidget(location.pathname)) {
-                  _context17.next = 44;
+                  _context18.next = 44;
                   break;
                 }
 
                 fontSizeMin = (0, _Selectors.getFontSizeMin)(state, identifier);
                 smallestFontSize = (0, _Selectors.findSmallestFontSizeInCanvasData)(designData.canvasData);
-                _context17.prev = 10;
-                _context17.t0 = smallestFontSize < fontSizeMin;
+                _context18.prev = 10;
+                _context18.t0 = smallestFontSize < fontSizeMin;
 
-                if (!_context17.t0) {
-                  _context17.next = 15;
+                if (!_context18.t0) {
+                  _context18.next = 15;
                   break;
                 }
 
-                _context17.next = 15;
+                _context18.next = 15;
                 return _ServiceLocator.Services.store.dispatch((0, _Actions.showMinFontSizeConfirm)(fontSizeMin));
 
               case 15:
-                _context17.next = 20;
+                _context18.next = 20;
                 break;
 
               case 17:
-                _context17.prev = 17;
-                _context17.t1 = _context17["catch"](10);
-                return _context17.abrupt("return");
+                _context18.prev = 17;
+                _context18.t1 = _context18["catch"](10);
+                return _context18.abrupt("return");
 
               case 20:
-                _context17.prev = 20;
-                _context17.next = 23;
+                _context18.prev = 20;
+                _context18.next = 23;
                 return this.checkColorUsageForDesignProductionMethod(identifier);
 
               case 23:
-                _context17.next = 25;
+                _context18.next = 25;
                 return this.vectorizeSingleImageAndShowEditDialog(identifier);
 
               case 25:
-                _context17.next = 27;
+                _context18.next = 27;
                 return this.restoreVectorizedImages(identifier);
 
               case 27:
-                _context17.next = 34;
+                _context18.next = 34;
                 break;
 
               case 29:
-                _context17.prev = 29;
-                _context17.t2 = _context17["catch"](20);
+                _context18.prev = 29;
+                _context18.t2 = _context18["catch"](20);
 
-                if (!(0, _Actions5.isConfirmResult)(_context17.t2)) {
-                  _context17.next = 33;
+                if (!(0, _Actions5.isConfirmResult)(_context18.t2)) {
+                  _context18.next = 33;
                   break;
                 }
 
-                return _context17.abrupt("return");
+                return _context18.abrupt("return");
 
               case 33:
-                throw _context17.t2;
+                throw _context18.t2;
 
               case 34:
-                _context17.prev = 34;
-                _context17.t3 = bulkNameSelected && !selectedDesignProduction.allowBulkNames;
+                _context18.prev = 34;
+                _context18.t3 = bulkNameSelected && !selectedDesignProduction.allowBulkNames;
 
-                if (!_context17.t3) {
-                  _context17.next = 39;
+                if (!_context18.t3) {
+                  _context18.next = 39;
                   break;
                 }
 
-                _context17.next = 39;
+                _context18.next = 39;
                 return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeConfirm)());
 
               case 39:
-                _context17.next = 44;
+                _context18.next = 44;
                 break;
 
               case 41:
-                _context17.prev = 41;
-                _context17.t4 = _context17["catch"](34);
-                return _context17.abrupt("return");
+                _context18.prev = 41;
+                _context18.t4 = _context18["catch"](34);
+                return _context18.abrupt("return");
 
               case 44:
                 oldDesignProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(state);
@@ -1939,18 +1995,18 @@ var DesignDataService = /*#__PURE__*/function () {
                   !(0, _Selectors.isBulkNamesSelected)(_ServiceLocator.Services.store.state.configurator) && _ServiceLocator.Services.configurator.clearBulkNames();
                 }
 
-                _context17.next = 51;
+                _context18.next = 51;
                 return this.updateObjectsAfterProductionMethodChange(oldDesignProductionMethod, selectedDesignProduction);
 
               case 51:
               case "end":
-                return _context17.stop();
+                return _context18.stop();
             }
           }
-        }, _callee17, this, [[10, 17], [20, 29], [34, 41]]);
+        }, _callee18, this, [[10, 17], [20, 29], [34, 41]]);
       }));
 
-      function setDesignProductionMethod(_x19) {
+      function setDesignProductionMethod(_x20) {
         return _setDesignProductionMethod2.apply(this, arguments);
       }
 
@@ -1982,11 +2038,11 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "setColorAmount",
     value: function () {
-      var _setColorAmount2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18(maxColorCount) {
+      var _setColorAmount2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19(maxColorCount) {
         var currentColorCount, colorCount;
-        return regeneratorRuntime.wrap(function _callee18$(_context18) {
+        return regeneratorRuntime.wrap(function _callee19$(_context19) {
           while (1) {
-            switch (_context18.prev = _context18.next) {
+            switch (_context19.prev = _context19.next) {
               case 0:
                 // check the current color usage before applying the selected color count
                 // so if the color count is more than the selected maxColorCount the user can decide to
@@ -1996,35 +2052,35 @@ var DesignDataService = /*#__PURE__*/function () {
                 colorCount = (0, _Selectors.getColors)(_ServiceLocator.Services.store.state).length;
 
                 if (!(maxColorCount && colorCount > maxColorCount && !isWidget(location.pathname) && (0, _configuration.getConf)('displayColorAmountWarnings', true))) {
-                  _context18.next = 11;
+                  _context19.next = 11;
                   break;
                 }
 
-                _context18.prev = 3;
-                _context18.next = 6;
+                _context19.prev = 3;
+                _context19.next = 6;
                 return _ServiceLocator.Services.store.dispatch((0, _Actions.showMaxColorChangeConfirm)(colorCount, maxColorCount, currentColorCount));
 
               case 6:
-                _context18.next = 11;
+                _context19.next = 11;
                 break;
 
               case 8:
-                _context18.prev = 8;
-                _context18.t0 = _context18["catch"](3);
-                return _context18.abrupt("return");
+                _context19.prev = 8;
+                _context19.t0 = _context19["catch"](3);
+                return _context19.abrupt("return");
 
               case 11:
                 _ServiceLocator.Services.store.dispatch((0, _Actions.setColorAmount)(maxColorCount));
 
               case 12:
               case "end":
-                return _context18.stop();
+                return _context19.stop();
             }
           }
-        }, _callee18, null, [[3, 8]]);
+        }, _callee19, null, [[3, 8]]);
       }));
 
-      function setColorAmount(_x20) {
+      function setColorAmount(_x21) {
         return _setColorAmount2.apply(this, arguments);
       }
 
@@ -2039,42 +2095,42 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "updateVisualization",
     value: function () {
-      var _updateVisualization = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+      var _updateVisualization = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
         var updateEventObject,
             isDesignAreaSelected,
             isDesignerOpen,
             isScreenshotEvent,
             drawingFunction,
-            _args19 = arguments;
-        return regeneratorRuntime.wrap(function _callee19$(_context19) {
+            _args20 = arguments;
+        return regeneratorRuntime.wrap(function _callee20$(_context20) {
           while (1) {
-            switch (_context19.prev = _context19.next) {
+            switch (_context20.prev = _context20.next) {
               case 0:
-                updateEventObject = _args19.length > 0 && _args19[0] !== undefined ? _args19[0] : {};
+                updateEventObject = _args20.length > 0 && _args20[0] !== undefined ? _args20[0] : {};
 
                 if (_ServiceLocator.Services.visualization.isReadyToRender()) {
-                  _context19.next = 3;
+                  _context20.next = 3;
                   break;
                 }
 
-                return _context19.abrupt("return");
+                return _context20.abrupt("return");
 
               case 3:
                 if (_ServiceLocator.Services.visualization.isReadyToRenderCustomDesign()) {
-                  _context19.next = 6;
+                  _context20.next = 6;
                   break;
                 }
 
                 _ServiceLocator.Services.visualization.render();
 
-                return _context19.abrupt("return");
+                return _context20.abrupt("return");
 
               case 6:
                 isDesignAreaSelected = !!(0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state).identifier;
                 isDesignerOpen = isDesignAreaSelected && _ServiceLocator.Services.ui.isVisible('designer');
                 isScreenshotEvent = (0, _get2["default"])(updateEventObject, 'data.screenshot');
                 drawingFunction = isDesignerOpen && !isScreenshotEvent && !this.isInPreviewMode ? this.redrawEmptyAreas : this.redrawAllDesignAreas;
-                _context19.next = 12;
+                _context20.next = 12;
                 return _ServiceLocator.Services.visualization.updateTexture({
                   updateEventObject: updateEventObject,
                   drawingFunction: drawingFunction.bind(this)
@@ -2082,10 +2138,10 @@ var DesignDataService = /*#__PURE__*/function () {
 
               case 12:
               case "end":
-                return _context19.stop();
+                return _context20.stop();
             }
           }
-        }, _callee19, this);
+        }, _callee20, this);
       }));
 
       function updateVisualization() {
@@ -2109,13 +2165,13 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "redrawAllDesignAreas",
     value: function () {
-      var _redrawAllDesignAreas = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21(getDrawingContext, updateEventObject) {
+      var _redrawAllDesignAreas = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22(getDrawingContext, updateEventObject) {
         var _this8 = this;
 
         var state, showHighlight, textureBuilderConfig, variantIdentifier, effectEnabled, drawingFn;
-        return regeneratorRuntime.wrap(function _callee21$(_context22) {
+        return regeneratorRuntime.wrap(function _callee22$(_context23) {
           while (1) {
-            switch (_context22.prev = _context22.next) {
+            switch (_context23.prev = _context23.next) {
               case 0:
                 state = _ServiceLocator.Services.store.state;
                 showHighlight = (0, _get2["default"])(state, 'designArea.showHighlight');
@@ -2129,7 +2185,7 @@ var DesignDataService = /*#__PURE__*/function () {
                 effectEnabled = !(0, _Selectors3.isDesignerProductPreviewMode)();
 
                 drawingFn = /*#__PURE__*/function () {
-                  var _ref18 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20(textureCtx, getTextureBuilder) {
+                  var _ref19 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21(textureCtx, getTextureBuilder) {
                     var designAreas,
                         _getTextureBuilder,
                         getTextureImage,
@@ -2140,23 +2196,23 @@ var DesignDataService = /*#__PURE__*/function () {
                         _iterator9,
                         _step9,
                         _loop,
-                        _args21 = arguments;
+                        _args22 = arguments;
 
-                    return regeneratorRuntime.wrap(function _callee20$(_context21) {
+                    return regeneratorRuntime.wrap(function _callee21$(_context22) {
                       while (1) {
-                        switch (_context21.prev = _context21.next) {
+                        switch (_context22.prev = _context22.next) {
                           case 0:
-                            designAreas = _args21.length > 2 && _args21[2] !== undefined ? _args21[2] : _this8.getDesignAreas();
+                            designAreas = _args22.length > 2 && _args22[2] !== undefined ? _args22[2] : _this8.getDesignAreas();
                             _getTextureBuilder = getTextureBuilder(textureBuilderConfig), getTextureImage = _getTextureBuilder.getTextureImage, drawCanvasToArea = _getTextureBuilder.drawCanvasToArea, highlightDesignAreas = _getTextureBuilder.highlightDesignAreas, drawOn = _getTextureBuilder.drawOn, getParams = _getTextureBuilder.getParams;
 
                             if (getTextureImage()) {
-                              _context21.next = 5;
+                              _context22.next = 5;
                               break;
                             }
 
                             // eslint-disable-next-line no-console
                             console.warn('Texture image is missing!', designAreas);
-                            return _context21.abrupt("return");
+                            return _context22.abrupt("return");
 
                           case 5:
                             if (showHighlight) {
@@ -2168,26 +2224,26 @@ var DesignDataService = /*#__PURE__*/function () {
                             }
 
                             _iterator9 = _createForOfIteratorHelper(designAreas);
-                            _context21.prev = 7;
+                            _context22.prev = 7;
                             _loop = /*#__PURE__*/regeneratorRuntime.mark(function _loop() {
                               var designArea, canvas, releaseLock, selectedObject, maskHandler, restoreOutlineVisibility, drawToContext, getSvg;
-                              return regeneratorRuntime.wrap(function _loop$(_context20) {
+                              return regeneratorRuntime.wrap(function _loop$(_context21) {
                                 while (1) {
-                                  switch (_context20.prev = _context20.next) {
+                                  switch (_context21.prev = _context21.next) {
                                     case 0:
                                       designArea = _step9.value;
                                       canvas = _this8._getCanvas(_this8.getDesignAreaByIdentifier(designArea.identifier));
 
                                       if (!canvas) {
-                                        _context20.next = 16;
+                                        _context21.next = 16;
                                         break;
                                       }
 
-                                      _context20.next = 5;
+                                      _context21.next = 5;
                                       return (0, _ObjectLock.requestLock)(canvas);
 
                                     case 5:
-                                      releaseLock = _context20.sent;
+                                      releaseLock = _context21.sent;
                                       selectedObject = (0, _get2["default"])(canvas, 'selectedObject');
 
                                       if (selectedObject) {
@@ -2198,8 +2254,8 @@ var DesignDataService = /*#__PURE__*/function () {
 
                                       if (maskHandler) {
                                         restoreOutlineVisibility = maskHandler.toggleOutline(showHighlight, {
-                                          getZoomFactor: function getZoomFactor(_ref19) {
-                                            var zoom = _ref19.zoom;
+                                          getZoomFactor: function getZoomFactor(_ref20) {
+                                            var zoom = _ref20.zoom;
                                             // currentZoom is only available for 2D, for 3D it is always 1
                                             var threeFactor = Math.min(getParams().currentZoom, 1) || 1;
                                             return zoom * threeFactor;
@@ -2213,7 +2269,7 @@ var DesignDataService = /*#__PURE__*/function () {
                                         return canvas.getScreenshot((0, _Selectors4.getFontMapping)(state));
                                       };
 
-                                      _context20.next = 14;
+                                      _context21.next = 14;
                                       return drawCanvasToArea(_objectSpread({
                                         drawToContext: drawToContext,
                                         designArea: designArea,
@@ -2229,7 +2285,7 @@ var DesignDataService = /*#__PURE__*/function () {
 
                                     case 16:
                                     case "end":
-                                      return _context20.stop();
+                                      return _context21.stop();
                                   }
                                 }
                               }, _loop);
@@ -2239,51 +2295,51 @@ var DesignDataService = /*#__PURE__*/function () {
 
                           case 10:
                             if ((_step9 = _iterator9.n()).done) {
-                              _context21.next = 14;
+                              _context22.next = 14;
                               break;
                             }
 
-                            return _context21.delegateYield(_loop(), "t0", 12);
+                            return _context22.delegateYield(_loop(), "t0", 12);
 
                           case 12:
-                            _context21.next = 10;
+                            _context22.next = 10;
                             break;
 
                           case 14:
-                            _context21.next = 19;
+                            _context22.next = 19;
                             break;
 
                           case 16:
-                            _context21.prev = 16;
-                            _context21.t1 = _context21["catch"](7);
+                            _context22.prev = 16;
+                            _context22.t1 = _context22["catch"](7);
 
-                            _iterator9.e(_context21.t1);
+                            _iterator9.e(_context22.t1);
 
                           case 19:
-                            _context21.prev = 19;
+                            _context22.prev = 19;
 
                             _iterator9.f();
 
-                            return _context21.finish(19);
+                            return _context22.finish(19);
 
                           case 22:
                             drawOn(textureCtx);
 
                           case 23:
                           case "end":
-                            return _context21.stop();
+                            return _context22.stop();
                         }
                       }
-                    }, _callee20, null, [[7, 16, 19, 22]]);
+                    }, _callee21, null, [[7, 16, 19, 22]]);
                   }));
 
-                  return function drawingFn(_x23, _x24) {
-                    return _ref18.apply(this, arguments);
+                  return function drawingFn(_x24, _x25) {
+                    return _ref19.apply(this, arguments);
                   };
                 }();
 
-                _context22.prev = 6;
-                _context22.next = 9;
+                _context23.prev = 6;
+                _context23.next = 9;
                 return getDrawingContext(drawingFn, true
                 /* update alpha */
                 , true
@@ -2291,24 +2347,24 @@ var DesignDataService = /*#__PURE__*/function () {
                 );
 
               case 9:
-                _context22.next = 14;
+                _context23.next = 14;
                 break;
 
               case 11:
-                _context22.prev = 11;
-                _context22.t0 = _context22["catch"](6);
+                _context23.prev = 11;
+                _context23.t0 = _context23["catch"](6);
                 // eslint-disable-next-line no-console
-                console.warn('Could not get drawing context, texture update is skipped!', _context22.t0.message);
+                console.warn('Could not get drawing context, texture update is skipped!', _context23.t0.message);
 
               case 14:
               case "end":
-                return _context22.stop();
+                return _context23.stop();
             }
           }
-        }, _callee21, null, [[6, 11]]);
+        }, _callee22, null, [[6, 11]]);
       }));
 
-      function redrawAllDesignAreas(_x21, _x22) {
+      function redrawAllDesignAreas(_x22, _x23) {
         return _redrawAllDesignAreas.apply(this, arguments);
       }
 
@@ -2317,16 +2373,16 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "redrawEmptyAreas",
     value: function redrawEmptyAreas(getDrawingContext) {
-      getDrawingContext( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
-        return regeneratorRuntime.wrap(function _callee22$(_context23) {
+      getDrawingContext( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23() {
+        return regeneratorRuntime.wrap(function _callee23$(_context24) {
           while (1) {
-            switch (_context23.prev = _context23.next) {
+            switch (_context24.prev = _context24.next) {
               case 0:
               case "end":
-                return _context23.stop();
+                return _context24.stop();
             }
           }
-        }, _callee22);
+        }, _callee23);
       })), true
       /* update alpha */
       , true
@@ -2373,86 +2429,86 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "getScreenshots",
     value: function () {
-      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24(fontMapping) {
+      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25(fontMapping) {
         var _this10 = this;
 
         var options,
             _options$screenshotFn,
             screenshotFn,
-            _args25 = arguments;
+            _args26 = arguments;
 
-        return regeneratorRuntime.wrap(function _callee24$(_context25) {
+        return regeneratorRuntime.wrap(function _callee25$(_context26) {
           while (1) {
-            switch (_context25.prev = _context25.next) {
+            switch (_context26.prev = _context26.next) {
               case 0:
-                options = _args25.length > 1 && _args25[1] !== undefined ? _args25[1] : {};
+                options = _args26.length > 1 && _args26[1] !== undefined ? _args26[1] : {};
                 _options$screenshotFn = options.screenshotFn, screenshotFn = _options$screenshotFn === void 0 ? 'getScreenshot' : _options$screenshotFn;
-                _context25.next = 4;
+                _context26.next = 4;
                 return Promise.all(this.getDesignAreas().map(function (area) {
                   return {
                     id: area.identifier,
                     canvas: _this10._getCanvas(area)
                   };
-                }).filter(function (_ref21) {
-                  var canvas = _ref21.canvas;
+                }).filter(function (_ref22) {
+                  var canvas = _ref22.canvas;
                   return canvas && canvas[screenshotFn] && canvas.objects && canvas.objects.length > 0;
                 }).map( /*#__PURE__*/function () {
-                  var _ref23 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23(_ref22) {
+                  var _ref24 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24(_ref23) {
                     var id, canvas, releaseLock, maskHandler, restoreOutlineVisibility, result;
-                    return regeneratorRuntime.wrap(function _callee23$(_context24) {
+                    return regeneratorRuntime.wrap(function _callee24$(_context25) {
                       while (1) {
-                        switch (_context24.prev = _context24.next) {
+                        switch (_context25.prev = _context25.next) {
                           case 0:
-                            id = _ref22.id, canvas = _ref22.canvas;
-                            _context24.next = 3;
+                            id = _ref23.id, canvas = _ref23.canvas;
+                            _context25.next = 3;
                             return (0, _ObjectLock.requestLock)(canvas);
 
                           case 3:
-                            releaseLock = _context24.sent;
+                            releaseLock = _context25.sent;
                             maskHandler = canvas.getMaskHandler();
                             restoreOutlineVisibility = maskHandler && maskHandler.toggleOutline(false);
-                            _context24.t0 = id;
-                            _context24.next = 9;
+                            _context25.t0 = id;
+                            _context25.next = 9;
                             return canvas[screenshotFn](fontMapping);
 
                           case 9:
-                            _context24.t1 = _context24.sent;
-                            result = [_context24.t0, _context24.t1];
+                            _context25.t1 = _context25.sent;
+                            result = [_context25.t0, _context25.t1];
                             restoreOutlineVisibility && restoreOutlineVisibility();
                             releaseLock();
-                            return _context24.abrupt("return", result);
+                            return _context25.abrupt("return", result);
 
                           case 14:
                           case "end":
-                            return _context24.stop();
+                            return _context25.stop();
                         }
                       }
-                    }, _callee23);
+                    }, _callee24);
                   }));
 
-                  return function (_x26) {
-                    return _ref23.apply(this, arguments);
+                  return function (_x27) {
+                    return _ref24.apply(this, arguments);
                   };
                 }()));
 
               case 4:
-                return _context25.abrupt("return", _context25.sent.reduce(function (screenShots, _ref24) {
-                  var _ref25 = _slicedToArray(_ref24, 2),
-                      id = _ref25[0],
-                      screenshot = _ref25[1];
+                return _context26.abrupt("return", _context26.sent.reduce(function (screenShots, _ref25) {
+                  var _ref26 = _slicedToArray(_ref25, 2),
+                      id = _ref26[0],
+                      screenshot = _ref26[1];
 
                   return _objectSpread(_objectSpread({}, screenShots), {}, _defineProperty({}, id, screenshot));
                 }, {}));
 
               case 5:
               case "end":
-                return _context25.stop();
+                return _context26.stop();
             }
           }
-        }, _callee24, this);
+        }, _callee25, this);
       }));
 
-      function getScreenshots(_x25) {
+      function getScreenshots(_x26) {
         return _getScreenshots.apply(this, arguments);
       }
 
@@ -2461,28 +2517,28 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "getScreenshotsOfElements",
     value: function () {
-      var _getScreenshotsOfElements = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25(fontMapping) {
-        return regeneratorRuntime.wrap(function _callee25$(_context26) {
+      var _getScreenshotsOfElements = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26(fontMapping) {
+        return regeneratorRuntime.wrap(function _callee26$(_context27) {
           while (1) {
-            switch (_context26.prev = _context26.next) {
+            switch (_context27.prev = _context27.next) {
               case 0:
-                _context26.next = 2;
+                _context27.next = 2;
                 return this.getScreenshots(fontMapping, {
                   screenshotFn: 'getScreenshotsOfElements'
                 });
 
               case 2:
-                return _context26.abrupt("return", _context26.sent);
+                return _context27.abrupt("return", _context27.sent);
 
               case 3:
               case "end":
-                return _context26.stop();
+                return _context27.stop();
             }
           }
-        }, _callee25, this);
+        }, _callee26, this);
       }));
 
-      function getScreenshotsOfElements(_x27) {
+      function getScreenshotsOfElements(_x28) {
         return _getScreenshotsOfElements.apply(this, arguments);
       }
 
@@ -2571,20 +2627,20 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "addSampleImageForDesignAreas",
     value: function () {
-      var _addSampleImageForDesignAreas = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27(designAreaIdentifiers, active) {
+      var _addSampleImageForDesignAreas = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28(designAreaIdentifiers, active) {
         var _this12 = this;
 
-        return regeneratorRuntime.wrap(function _callee27$(_context28) {
+        return regeneratorRuntime.wrap(function _callee28$(_context29) {
           while (1) {
-            switch (_context28.prev = _context28.next) {
+            switch (_context29.prev = _context29.next) {
               case 0:
-                _context28.next = 2;
+                _context29.next = 2;
                 return Promise.all(designAreaIdentifiers.map( /*#__PURE__*/function () {
-                  var _ref26 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26(designAreaIdentifier) {
+                  var _ref27 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27(designAreaIdentifier) {
                     var designArea, canvas, state, imageSrc, imageData, canvasDataJSON, designData, canvasData, objects;
-                    return regeneratorRuntime.wrap(function _callee26$(_context27) {
+                    return regeneratorRuntime.wrap(function _callee27$(_context28) {
                       while (1) {
-                        switch (_context27.prev = _context27.next) {
+                        switch (_context28.prev = _context28.next) {
                           case 0:
                             designArea = _this12.getDesignAreaByIdentifier(designAreaIdentifier);
                             canvas = _this12._getCanvas(designArea);
@@ -2592,7 +2648,7 @@ var DesignDataService = /*#__PURE__*/function () {
                             imageSrc = _designer_placeholder_logo["default"];
 
                             if (!active) {
-                              _context27.next = 13;
+                              _context28.next = 13;
                               break;
                             }
 
@@ -2603,7 +2659,7 @@ var DesignDataService = /*#__PURE__*/function () {
                               isPlaceHolderImage: true,
                               galleryImage: false
                             });
-                            _context27.next = 8;
+                            _context28.next = 8;
                             return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
                               enlargeImage: true
                             });
@@ -2616,7 +2672,7 @@ var DesignDataService = /*#__PURE__*/function () {
 
                             _this12.setCanvasData(canvasDataJSON, designAreaIdentifier);
 
-                            _context27.next = 21;
+                            _context28.next = 21;
                             break;
 
                           case 13:
@@ -2624,11 +2680,11 @@ var DesignDataService = /*#__PURE__*/function () {
                             canvasData = designData.canvasData;
 
                             if (canvasData) {
-                              _context27.next = 17;
+                              _context28.next = 17;
                               break;
                             }
 
-                            return _context27.abrupt("return");
+                            return _context28.abrupt("return");
 
                           case 17:
                             objects = canvasData ? canvasData.objects.filter(function (obj) {
@@ -2639,37 +2695,37 @@ var DesignDataService = /*#__PURE__*/function () {
                               objects: objects
                             }), designAreaIdentifier);
 
-                            _context27.next = 21;
+                            _context28.next = 21;
                             return _this12.loadCanvasDataFromState([designArea]);
 
                           case 21:
-                            return _context27.abrupt("return", {
+                            return _context28.abrupt("return", {
                               canvas: canvas,
                               designAreaIdentifier: designAreaIdentifier
                             });
 
                           case 22:
                           case "end":
-                            return _context27.stop();
+                            return _context28.stop();
                         }
                       }
-                    }, _callee26);
+                    }, _callee27);
                   }));
 
-                  return function (_x30) {
-                    return _ref26.apply(this, arguments);
+                  return function (_x31) {
+                    return _ref27.apply(this, arguments);
                   };
                 }()));
 
               case 2:
               case "end":
-                return _context28.stop();
+                return _context29.stop();
             }
           }
-        }, _callee27);
+        }, _callee28);
       }));
 
-      function addSampleImageForDesignAreas(_x28, _x29) {
+      function addSampleImageForDesignAreas(_x29, _x30) {
         return _addSampleImageForDesignAreas.apply(this, arguments);
       }
 
@@ -2678,23 +2734,23 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "addImageToDesignArea",
     value: function () {
-      var _addImageToDesignArea = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28(designArea, imageData) {
+      var _addImageToDesignArea = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29(designArea, imageData) {
         var canvas;
-        return regeneratorRuntime.wrap(function _callee28$(_context29) {
+        return regeneratorRuntime.wrap(function _callee29$(_context30) {
           while (1) {
-            switch (_context29.prev = _context29.next) {
+            switch (_context30.prev = _context30.next) {
               case 0:
                 canvas = this._getCanvas(designArea);
 
                 if (canvas) {
-                  _context29.next = 3;
+                  _context30.next = 3;
                   break;
                 }
 
-                return _context29.abrupt("return", false);
+                return _context30.abrupt("return", false);
 
               case 3:
-                _context29.next = 5;
+                _context30.next = 5;
                 return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
                   enlargeImage: true,
                   scaleToHalf: false,
@@ -2702,17 +2758,17 @@ var DesignDataService = /*#__PURE__*/function () {
                 });
 
               case 5:
-                return _context29.abrupt("return", _context29.sent);
+                return _context30.abrupt("return", _context30.sent);
 
               case 6:
               case "end":
-                return _context29.stop();
+                return _context30.stop();
             }
           }
-        }, _callee28, this);
+        }, _callee29, this);
       }));
 
-      function addImageToDesignArea(_x31, _x32) {
+      function addImageToDesignArea(_x32, _x33) {
         return _addImageToDesignArea.apply(this, arguments);
       }
 
@@ -2794,19 +2850,19 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "setImageAndTextColor",
     value: function () {
-      var _setImageAndTextColor = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29(color) {
+      var _setImageAndTextColor = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30(color) {
         var designArea, designData, objects, hasmultipleObjects, canvas, isImageSelected, selectedImageIdentifier, _iterator11, _step11, object, image, operations;
 
-        return regeneratorRuntime.wrap(function _callee29$(_context30) {
+        return regeneratorRuntime.wrap(function _callee30$(_context31) {
           while (1) {
-            switch (_context30.prev = _context30.next) {
+            switch (_context31.prev = _context31.next) {
               case 0:
                 if (this.changeAllColorsNeeded()) {
-                  _context30.next = 2;
+                  _context31.next = 2;
                   break;
                 }
 
-                return _context30.abrupt("return");
+                return _context31.abrupt("return");
 
               case 2:
                 designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
@@ -2815,11 +2871,11 @@ var DesignDataService = /*#__PURE__*/function () {
                 hasmultipleObjects = objects.length > 1;
 
                 if (hasmultipleObjects) {
-                  _context30.next = 8;
+                  _context31.next = 8;
                   break;
                 }
 
-                return _context30.abrupt("return");
+                return _context31.abrupt("return");
 
               case 8:
                 canvas = this._getCanvas(designArea);
@@ -2829,62 +2885,62 @@ var DesignDataService = /*#__PURE__*/function () {
                 _ServiceLocator.Services.store.dispatch((0, _Actions.setDesignAreaTextsColor)(designArea.identifier, color));
 
                 _iterator11 = _createForOfIteratorHelper(objects);
-                _context30.prev = 13;
+                _context31.prev = 13;
 
                 _iterator11.s();
 
               case 15:
                 if ((_step11 = _iterator11.n()).done) {
-                  _context30.next = 24;
+                  _context31.next = 24;
                   break;
                 }
 
                 object = _step11.value;
 
                 if (!(object.type === 'Image' && object.imageData.identifier !== selectedImageIdentifier)) {
-                  _context30.next = 22;
+                  _context31.next = 22;
                   break;
                 }
 
                 image = (0, _Selectors2.getUserImage)(_ServiceLocator.Services.store.state, object.imageData.identifier);
                 operations = (0, _Modifiers.setColorOnOperations)(image.operations, color);
-                _context30.next = 22;
+                _context31.next = 22;
                 return _ServiceLocator.Services.designData.editFile(operations, image);
 
               case 22:
-                _context30.next = 15;
+                _context31.next = 15;
                 break;
 
               case 24:
-                _context30.next = 29;
+                _context31.next = 29;
                 break;
 
               case 26:
-                _context30.prev = 26;
-                _context30.t0 = _context30["catch"](13);
+                _context31.prev = 26;
+                _context31.t0 = _context31["catch"](13);
 
-                _iterator11.e(_context30.t0);
+                _iterator11.e(_context31.t0);
 
               case 29:
-                _context30.prev = 29;
+                _context31.prev = 29;
 
                 _iterator11.f();
 
-                return _context30.finish(29);
+                return _context31.finish(29);
 
               case 32:
-                _context30.next = 34;
+                _context31.next = 34;
                 return this.updateCanvasDataFromState([designArea]);
 
               case 34:
               case "end":
-                return _context30.stop();
+                return _context31.stop();
             }
           }
-        }, _callee29, this, [[13, 26, 29, 32]]);
+        }, _callee30, this, [[13, 26, 29, 32]]);
       }));
 
-      function setImageAndTextColor(_x33) {
+      function setImageAndTextColor(_x34) {
         return _setImageAndTextColor.apply(this, arguments);
       }
 
@@ -2893,29 +2949,29 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "getGalleryImageColors",
     value: function () {
-      var _getGalleryImageColors = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30(url) {
+      var _getGalleryImageColors = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee31(url) {
         var svgContent, designProductionMethod;
-        return regeneratorRuntime.wrap(function _callee30$(_context31) {
+        return regeneratorRuntime.wrap(function _callee31$(_context32) {
           while (1) {
-            switch (_context31.prev = _context31.next) {
+            switch (_context32.prev = _context32.next) {
               case 0:
-                _context31.next = 2;
+                _context32.next = 2;
                 return getSvgContent(url);
 
               case 2:
-                svgContent = _context31.sent;
+                svgContent = _context32.sent;
                 designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-                return _context31.abrupt("return", (0, _Modifiers.createVectorizeColorsMap)({}, getSvgColors(svgContent, designProductionMethod)));
+                return _context32.abrupt("return", (0, _Modifiers.createVectorizeColorsMap)({}, getSvgColors(svgContent, designProductionMethod)));
 
               case 5:
               case "end":
-                return _context31.stop();
+                return _context32.stop();
             }
           }
-        }, _callee30);
+        }, _callee31);
       }));
 
-      function getGalleryImageColors(_x34) {
+      function getGalleryImageColors(_x35) {
         return _getGalleryImageColors.apply(this, arguments);
       }
 
@@ -2941,41 +2997,41 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "editFileQueued",
     value: function () {
-      var _editFileQueued = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee31(operations, image) {
+      var _editFileQueued = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee32(operations, image) {
         var options,
             releaseLock,
-            _args32 = arguments;
-        return regeneratorRuntime.wrap(function _callee31$(_context32) {
+            _args33 = arguments;
+        return regeneratorRuntime.wrap(function _callee32$(_context33) {
           while (1) {
-            switch (_context32.prev = _context32.next) {
+            switch (_context33.prev = _context33.next) {
               case 0:
-                options = _args32.length > 2 && _args32[2] !== undefined ? _args32[2] : {};
-                _context32.next = 3;
+                options = _args33.length > 2 && _args33[2] !== undefined ? _args33[2] : {};
+                _context33.next = 3;
                 return (0, _ObjectLock.requestLock)(this);
 
               case 3:
-                releaseLock = _context32.sent;
-                _context32.prev = 4;
-                _context32.next = 7;
+                releaseLock = _context33.sent;
+                _context33.prev = 4;
+                _context33.next = 7;
                 return this.editFile(operations, image, options);
 
               case 7:
-                return _context32.abrupt("return", _context32.sent);
+                return _context33.abrupt("return", _context33.sent);
 
               case 8:
-                _context32.prev = 8;
+                _context33.prev = 8;
                 releaseLock();
-                return _context32.finish(8);
+                return _context33.finish(8);
 
               case 11:
               case "end":
-                return _context32.stop();
+                return _context33.stop();
             }
           }
-        }, _callee31, this, [[4,, 8, 11]]);
+        }, _callee32, this, [[4,, 8, 11]]);
       }));
 
-      function editFileQueued(_x35, _x36) {
+      function editFileQueued(_x36, _x37) {
         return _editFileQueued.apply(this, arguments);
       }
 
@@ -2984,7 +3040,7 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "editFile",
     value: function () {
-      var _editFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee32(operations, image) {
+      var _editFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33(operations, image) {
         var options,
             _options$immediateCom,
             immediateCommit,
@@ -2998,6 +3054,7 @@ var DesignDataService = /*#__PURE__*/function () {
             compatibilityInfoHash,
             imageIsCompatible,
             operationsMatching,
+            vectorizedLogoMandatory,
             colorPreviewRequired,
             imageDataPatch,
             _getImageUsageInfo,
@@ -3017,13 +3074,13 @@ var DesignDataService = /*#__PURE__*/function () {
             vectorizeOriginalColorsMap,
             numberOfAggregatedColors,
             numberOfColorsToRemove,
-            _args33 = arguments;
+            _args34 = arguments;
 
-        return regeneratorRuntime.wrap(function _callee32$(_context33) {
+        return regeneratorRuntime.wrap(function _callee33$(_context34) {
           while (1) {
-            switch (_context33.prev = _context33.next) {
+            switch (_context34.prev = _context34.next) {
               case 0:
-                options = _args33.length > 2 && _args33[2] !== undefined ? _args33[2] : {};
+                options = _args34.length > 2 && _args34[2] !== undefined ? _args34[2] : {};
                 // patch operations to keep other unchanged values
                 operations = _objectSpread(_objectSpread({}, image.operations), operations);
                 _options$immediateCom = options.immediateCommit, immediateCommit = _options$immediateCom === void 0 ? false : _options$immediateCom, _options$designProduc = options.designProductionMethod, designProductionMethod = _options$designProduc === void 0 ? (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state) : _options$designProduc, _options$addMode = options.addMode, addMode = _options$addMode === void 0 ? false : _options$addMode, displayColorPreview = options.displayColorPreview;
@@ -3032,16 +3089,18 @@ var DesignDataService = /*#__PURE__*/function () {
                 compatibilityInfoHash = (0, _Selectors.getDesignAreaImageCompatibilityInfo)(designProductionMethod);
                 imageIsCompatible = (0, _Selectors.areHashesCompatible)(image.compatibilityInfoHash, compatibilityInfoHash);
                 operationsMatching = (0, _Modifiers.compareOperations)(image.operations, operations);
-                colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(designProductionMethod);
+                vectorizedLogoMandatory = (0, _Selectors.isVectorizedLogoMandatory)(designProductionMethod);
+                colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(designProductionMethod) || vectorizedLogoMandatory;
                 imageDataPatch = _objectSpread({
                   compatibilityInfoHash: compatibilityInfoHash,
-                  colorPreviewRequired: colorPreviewRequired
+                  colorPreviewRequired: colorPreviewRequired,
+                  vectorizedLogoMandatory: vectorizedLogoMandatory
                 }, displayColorPreview !== undefined && {
                   displayColorPreview: displayColorPreview
                 });
 
                 if (!(!operationsMatching || !imageIsCompatible)) {
-                  _context33.next = 28;
+                  _context34.next = 29;
                   break;
                 }
 
@@ -3052,17 +3111,17 @@ var DesignDataService = /*#__PURE__*/function () {
                 operations = makeOperationsCompatible(operations, compatibilityInfoHash, designProductionMethod.colorPalettes);
 
                 if (!image.gallery) {
-                  _context33.next = 17;
+                  _context34.next = 18;
                   break;
                 }
 
                 operations = _objectSpread(_objectSpread({}, operations || {}), {}, {
                   vectorizeColorsMap: operations.vectorizeColorsMap
                 });
-                _context33.next = 28;
+                _context34.next = 29;
                 break;
 
-              case 17:
+              case 18:
                 _getImageUsageInfo = (0, _Selectors2.getImageUsageInfo)(_ServiceLocator.Services.store.state, image.identifier), designAreas = _getImageUsageInfo.designAreas, count = _getImageUsageInfo.count;
                 createCopy = !!(designAreas > 1 && image.compatibilityInfoHash && !imageIsCompatible) || !operationsMatching && count > (addMode ? 0 : 1);
                 editData = (0, _Modifiers.getEditDataFromOperations)(image.fileName, operations, designProductionMethod);
@@ -3070,11 +3129,11 @@ var DesignDataService = /*#__PURE__*/function () {
                 isBackendNeeded = createCopy || !(0, _isEqual["default"])(editData, currentEditData);
 
                 if (!isBackendNeeded) {
-                  _context33.next = 28;
+                  _context34.next = 29;
                   break;
                 }
 
-                _context33.next = 25;
+                _context34.next = 26;
                 return _ServiceLocator.Services.store.dispatch((0, _Actions2.editImage)(_objectSpread(_objectSpread({}, editData), {}, {
                   createCopy: createCopy
                 }), _objectSpread(_objectSpread({}, imageDataPatch), {}, {
@@ -3085,31 +3144,31 @@ var DesignDataService = /*#__PURE__*/function () {
                   immediateCommit: immediateCommit
                 }));
 
-              case 25:
+              case 26:
                 selectedImage = _ServiceLocator.Services.store.state.imageGallery.selectedImage;
                 preview = (0, _get2["default"])(selectedImage, 'preview');
                 imageIdentifier = (0, _get2["default"])(selectedImage, 'identifier');
 
-              case 28:
+              case 29:
                 if (!(!preview || !preview.url)) {
-                  _context33.next = 30;
+                  _context34.next = 31;
                   break;
                 }
 
                 throw new Error('Preview image url is not specified!');
 
-              case 30:
+              case 31:
                 if (!(0, _Selectors2.isEditableVectorImage)(preview)) {
-                  _context33.next = 39;
+                  _context34.next = 40;
                   break;
                 }
 
                 _designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-                _context33.next = 34;
+                _context34.next = 35;
                 return getSvgContent(preview.url, false, !operationsMatching);
 
-              case 34:
-                svgContent = _context33.sent;
+              case 35:
+                svgContent = _context34.sent;
                 svgColors = getSvgColors(svgContent, _designProductionMethod);
                 vectorizeColorsMap = (0, _Modifiers.createVectorizeColorsMap)(operations.vectorizeColorsMap, svgColors);
                 thresholdChanged = operations.vectorizeThreshold !== (0, _get2["default"])(image, 'operations.vectorizeThreshold', 0); // prepare initial values for the vectorize feature
@@ -3140,7 +3199,7 @@ var DesignDataService = /*#__PURE__*/function () {
                   operations.vectorizeColorsMap = vectorizeColorsMap;
                 }
 
-              case 39:
+              case 40:
                 _ServiceLocator.Services.store.dispatch((0, _Actions2.updateImage)(imageIdentifier, _objectSpread(_objectSpread({
                   operations: operations
                 }, imageDataPatch), {}, {
@@ -3151,22 +3210,22 @@ var DesignDataService = /*#__PURE__*/function () {
                   this.updateDesignAreaImagesWithSelectedImageData(image.identifier);
                 }
 
-                return _context33.abrupt("return", {
+                return _context34.abrupt("return", {
                   vectorizeColorsMap: operations.vectorizeColorsMap,
                   vectorizeThreshold: operations.vectorizeThreshold,
                   vectorizeMaxColorAmount: operations.vectorizeMaxColorAmount,
                   vectorizeOriginalColorsMap: operations.vectorizeOriginalColorsMap
                 });
 
-              case 42:
+              case 43:
               case "end":
-                return _context33.stop();
+                return _context34.stop();
             }
           }
-        }, _callee32, this);
+        }, _callee33, this);
       }));
 
-      function editFile(_x37, _x38) {
+      function editFile(_x38, _x39) {
         return _editFile.apply(this, arguments);
       }
 
@@ -3175,12 +3234,12 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "resetEditedFile",
     value: function () {
-      var _resetEditedFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33(image) {
+      var _resetEditedFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee34(image) {
         var state, _image, operations, vectorizeColorsMap, resetOperations, designProductionMethod;
 
-        return regeneratorRuntime.wrap(function _callee33$(_context34) {
+        return regeneratorRuntime.wrap(function _callee34$(_context35) {
           while (1) {
-            switch (_context34.prev = _context34.next) {
+            switch (_context35.prev = _context35.next) {
               case 0:
                 state = _ServiceLocator.Services.store.state;
 
@@ -3203,21 +3262,21 @@ var DesignDataService = /*#__PURE__*/function () {
                   });
                 }
 
-                _context34.next = 7;
+                _context35.next = 7;
                 return this.editFileQueued(resetOperations, image);
 
               case 7:
-                return _context34.abrupt("return", _context34.sent);
+                return _context35.abrupt("return", _context35.sent);
 
               case 8:
               case "end":
-                return _context34.stop();
+                return _context35.stop();
             }
           }
-        }, _callee33, this);
+        }, _callee34, this);
       }));
 
-      function resetEditedFile(_x39) {
+      function resetEditedFile(_x40) {
         return _resetEditedFile.apply(this, arguments);
       }