@configuratorware/configurator-frontendgui 1.28.0-beta.1 → 1.28.1

package/App/Services/DesignDataService.js

@@ -1,3249 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.EventTypes = exports.updateColorAmountOnDesignProductionMethodChange = exports.isWidget = exports.getSvgColors = exports.applySvgContentOperations = exports.getSvgContent = exports.makeOperationsCompatible = exports.getMissingColorPalettesColors = exports.getClosestColorPaletteColor = exports.getColorPalettesIndex = exports.calculateImageBrightness = exports.isColorTooBright = exports.getColorsDistance = exports.rgbStrToHex = exports.getRgbValuesFromString = exports.isTextColorChange = exports.checkColorUsage = void 0;
-
-var _axios = _interopRequireDefault(require("axios"));
-
-var _first = _interopRequireDefault(require("lodash/first"));
-
-var _get2 = _interopRequireDefault(require("lodash/get"));
-
-var _find = _interopRequireDefault(require("lodash/find"));
-
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
-var _i18n = require("../../Framework/i18n");
-
-var _ServiceLocator = require("../ServiceLocator");
-
-var _configuration = require("../configuration");
-
-var _Observable = _interopRequireDefault(require("../../Utils/Decorators/Observable"));
-
-var _setupDesigner = _interopRequireDefault(require("../Modules/Designer/setupDesigner"));
-
-var _Actions = require("../Reducers/DesignData/Actions");
-
-var _Actions2 = require("../Reducers/ImageGallery/Actions");
-
-var _Modifiers = require("../Reducers/DesignData/Modifiers");
-
-var _Actions3 = require("../Reducers/DesignArea/Actions");
-
-var _Actions4 = require("../Reducers/DesignView/Actions");
-
-var _Selectors = require("../Reducers/DesignArea/Selectors");
-
-var _Selectors2 = require("../Reducers/ImageGallery/Selectors");
-
-var _Selectors3 = require("../Reducers/Configurator/Selectors");
-
-var _Selectors4 = require("../Reducers/Fonts/Selectors");
-
-var _Actions5 = require("../Reducers/Confirm/Actions");
-
-var _ObjectLock = require("../../Utils/Async/ObjectLock");
-
-var _Transformers = require("../Reducers/DesignData/Transformers");
-
-var _Modifiers2 = require("../Reducers/ImageGallery/Modifiers");
-
-var _FontFaceRepository = require("../Modules/Designer/Utils/FontFaceRepository");
-
-var _Selectors5 = require("../Reducers/DesignData/Selectors");
-
-var _ImageEditUtils = require("../Modules/Designer/Utils/ImageEditUtils");
-
-var _DesignElementSelectors = require("../Reducers/DesignArea/DesignElementSelectors");
-
-var _designer_placeholder_logo = _interopRequireDefault(require("../../Resources/Images/designer_placeholder_logo.svg"));
-
-var _this = void 0;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-/**
- * Preload all fonts for the given canvasData
- * @param {object} canvasData The canvas data object
- * @return {Promise<[]>}
- */
-var preloadFonts = function preloadFonts(canvasData) {
-  return Promise.all(canvasData.objects.filter(function (_ref) {
-    var type = _ref.type;
-    return type === 'Text';
-  }).map(function (_ref2) {
-    var content = _ref2.content;
-    return _FontFaceRepository.FontFaceRepository.collectFromHTML(content);
-  }));
-};
-
-var checkColorUsage = function () {
-  var alreadyAlertedColorCountState = {};
-  return function (canvasDataJSON, changeEvent) {
-    var _getSelectedDesignAre = (0, _Selectors.getSelectedDesignAreaProperties)(_ServiceLocator.Services.store.state),
-        maxColorCount = _getSelectedDesignAre.maxColorAmount,
-        designAreaIdentifier = _getSelectedDesignAre.selectedDesignArea.identifier,
-        currentColorCount = _getSelectedDesignAre.colorAmount;
-
-    if (!designAreaIdentifier) {
-      return;
-    }
-
-    var changedObjectColorCount = (0, _Selectors.getColorsFromCanvasData)({
-      objects: [changeEvent.target.toObject()]
-    }).length;
-    var colorCount = (0, _Selectors.getColorsFromCanvasData)(canvasDataJSON).length;
-    var colorCountState = {
-      colorCount: changedObjectColorCount,
-      maxColorCount: maxColorCount
-    };
-
-    if (colorCount !== currentColorCount) {
-      _ServiceLocator.Services.store.dispatch((0, _Actions.setColorAmount)(colorCount));
-    }
-
-    var showAlert = maxColorCount && isTextColorChange(changeEvent) && changedObjectColorCount > maxColorCount && alreadyAlertedColorCountState[designAreaIdentifier].colorCount !== colorCountState.colorCount;
-    alreadyAlertedColorCountState[designAreaIdentifier] = colorCountState;
-    return showAlert;
-  };
-}();
-
-exports.checkColorUsage = checkColorUsage;
-
-var isTextColorChange = function isTextColorChange(changeEvent) {
-  if (changeEvent.target.type !== 'Text') {
-    return false;
-  }
-
-  var prevStyles = (0, _get2["default"])(changeEvent, 'eventData.prevState.style', {});
-
-  if ((0, _isEmpty["default"])(prevStyles)) {
-    return false;
-  }
-
-  var prevColors = (0, _get2["default"])(prevStyles, 'colors', []);
-  var colors = (0, _get2["default"])(changeEvent.target.toObject(), 'style.colors', []);
-  return !(0, _isEqual["default"])(prevColors, colors);
-};
-
-exports.isTextColorChange = isTextColorChange;
-
-var getRgbValuesFromString = function getRgbValuesFromString(str) {
-  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    r: 0,
-    g: 0,
-    b: 0
-  };
-  var matches = str.match(/rgb\((.*)\)/);
-
-  if (!matches) {
-    return defaultValue;
-  }
-
-  var values = matches[1].split(',').map(function (number) {
-    return parseInt(number);
-  });
-  return {
-    r: values[0],
-    g: values[1],
-    b: values[2]
-  };
-};
-
-exports.getRgbValuesFromString = getRgbValuesFromString;
-
-var rgbStrToHex = function rgbStrToHex(str) {
-  return (0, _Selectors.rgbObjToHex)(getRgbValuesFromString(str));
-};
-
-exports.rgbStrToHex = rgbStrToHex;
-
-var getColorsDistance = function getColorsDistance(color1, color2) {
-  return Math.pow(color1.r - color2.r, 2) + Math.pow(color1.g - color2.g, 2) + Math.pow(color1.b - color2.b, 2);
-};
-
-exports.getColorsDistance = getColorsDistance;
-
-var isColorTooBright = function isColorTooBright(rgbColors) {
-  if (!rgbColors) {
-    return false;
-  }
-
-  var red = rgbColors.r,
-      green = rgbColors.g,
-      blue = rgbColors.b;
-
-  if (typeof red !== 'number' || typeof green !== 'number' || typeof blue !== 'number' || red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255) {
-    return false;
-  }
-
-  var maxBrightness = 210;
-  var luma = 0.2126 * red + 0.7152 * green + 0.0722 * blue; // see https://bit.ly/2BXPOld
-
-  return luma > maxBrightness;
-};
-
-exports.isColorTooBright = isColorTooBright;
-
-var calculateImageBrightness = function calculateImageBrightness(image) {
-  if (!image) {
-    return;
-  }
-
-  var imageUrl = "".concat((0, _configuration.getConf)('network.host')).concat(image.data.thumbnail.url);
-  var fuzzy = 0.1;
-  return new Promise(function (resolve, reject) {
-    var downloadedImg = new Image(200, 200);
-    downloadedImg.crossOrigin = 'anonymous';
-    downloadedImg.addEventListener('load', function () {
-      var canvas = document.createElement('canvas');
-      var context = canvas.getContext('2d');
-      canvas.width = downloadedImg.width;
-      canvas.height = downloadedImg.height;
-      context.drawImage(downloadedImg, 0, 0);
-      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-      var data = imageData.data;
-      var light = 0,
-          dark = 0;
-
-      for (var x = 0; x < data.length; x += 4) {
-        var red = data[x];
-        var green = data[x + 1];
-        var blue = data[x + 2];
-        var alpha = data[x + 3];
-
-        if (alpha === 0) {
-          continue;
-        }
-
-        var maxRgb = Math.max(Math.max(red, green), blue);
-        if (maxRgb < 128) dark++;else light++;
-      }
-
-      var dlDiff = (light - dark) / (canvas.width * canvas.height);
-      image.data.thumbnail.isThumbnailBright = dlDiff + fuzzy > 0;
-      resolve(image);
-    }, false);
-    downloadedImg.addEventListener('error', reject);
-    downloadedImg.src = imageUrl;
-  });
-};
-
-exports.calculateImageBrightness = calculateImageBrightness;
-
-var getColorPalettesIndex = function getColorPalettesIndex(colorPalettes) {
-  var colorPalettesIndexes = [];
-
-  var _iterator = _createForOfIteratorHelper(colorPalettes),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var colorPalette = _step.value;
-
-      var _iterator2 = _createForOfIteratorHelper(colorPalette.colors),
-          _step2;
-
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var colorPaletteColor = _step2.value;
-          var colorIndex = {
-            palette: colorPalette.identifier,
-            identifier: colorPaletteColor.identifier,
-            value: (0, _Selectors.hexToRgb)('#' + colorPaletteColor.hex_value)
-          };
-          colorIndex.valueObject = getRgbValuesFromString(colorIndex.value);
-          colorPalettesIndexes.push(colorIndex);
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-
-  return colorPalettesIndexes;
-};
-
-exports.getColorPalettesIndex = getColorPalettesIndex;
-
-var getClosestColorPaletteColor = function getClosestColorPaletteColor(colorValueObject, colorPalettesIndexes) {
-  var closestDistance = null;
-  var closestColor = null;
-
-  var _iterator3 = _createForOfIteratorHelper(colorPalettesIndexes),
-      _step3;
-
-  try {
-    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-      var colorPalettesIndex = _step3.value;
-      var distance = getColorsDistance(colorValueObject, colorPalettesIndex.valueObject);
-
-      if (closestDistance === null || distance < closestDistance) {
-        closestDistance = distance;
-        var rgb = colorPalettesIndex.valueObject;
-        var hexValue = (0, _Selectors.rgbToHex)(rgb.r, rgb.g, rgb.b);
-        closestColor = (0, _Selectors.createColorData)(colorPalettesIndex.identifier, colorPalettesIndex.palette, false, hexValue);
-      }
-    }
-  } catch (err) {
-    _iterator3.e(err);
-  } finally {
-    _iterator3.f();
-  }
-
-  return closestColor;
-};
-
-exports.getClosestColorPaletteColor = getClosestColorPaletteColor;
-
-var getMissingColorPalettesColors = function getMissingColorPalettesColors(colors, colorPalettes, replaceCustomColors) {
-  var availableColorPalettes = colorPalettes.map(function (colorPalette) {
-    return colorPalette.identifier;
-  }); // skip if no available color palettes (most likely a data issue)
-
-  if (!availableColorPalettes.length) {
-    return [];
-  }
-
-  var colorsToReplace = colors.filter(function (color) {
-    var _parseColorData = (0, _Selectors.parseColorData)(color.identifier),
-        palette = _parseColorData.palette;
-
-    if (replaceCustomColors && palette === null) {
-      return true;
-    }
-
-    return palette && availableColorPalettes.indexOf(palette) === -1;
-  });
-
-  if (!colorsToReplace.length) {
-    return [];
-  }
-
-  var colorPalettesIndexes = getColorPalettesIndex(colorPalettes);
-  return colorsToReplace.map(function (color) {
-    var closestColor = getClosestColorPaletteColor(getRgbValuesFromString(color.value.startsWith('#') ? (0, _Selectors.hexToRgb)(color.value) : color.value), colorPalettesIndexes);
-    return {
-      color: color,
-      closestColor: closestColor
-    };
-  });
-};
-
-exports.getMissingColorPalettesColors = getMissingColorPalettesColors;
-
-var makeOperationsCompatible = function makeOperationsCompatible(operations, compatibilityInfo, colorPalettes) {
-  if (!operations) {
-    return operations;
-  }
-
-  var missingColorPalettesColors = getMissingColorPalettesColors(Object.values(operations.vectorizeColorsMap || {}), colorPalettes, !operations.vectorize && compatibilityInfo.vectorsRequired);
-
-  var _iterator4 = _createForOfIteratorHelper(missingColorPalettesColors),
-      _step4;
-
-  try {
-    for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-      var missingColor = _step4.value;
-      operations = (0, _Modifiers.replaceColorOnOperations)(operations, missingColor.color, missingColor.closestColor);
-    }
-  } catch (err) {
-    _iterator4.e(err);
-  } finally {
-    _iterator4.f();
-  }
-
-  return operations;
-};
-
-exports.makeOperationsCompatible = makeOperationsCompatible;
-
-var getSvgContent = function () {
-  var svgContentMap = new Map();
-  return /*#__PURE__*/function () {
-    var _getSvgContent = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url) {
-      var absolute,
-          forceFetch,
-          absUrl,
-          result,
-          svgContent,
-          _args = arguments;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              absolute = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
-              forceFetch = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
-              absUrl = absolute ? url : "".concat((0, _configuration.getConf)('network.host')).concat(url);
-
-              if (!(!forceFetch && svgContentMap.has(absUrl))) {
-                _context.next = 5;
-                break;
-              }
-
-              return _context.abrupt("return", svgContentMap.get(absUrl));
-
-            case 5:
-              _context.prev = 5;
-              _context.next = 8;
-              return _axios["default"].get(absUrl);
-
-            case 8:
-              result = _context.sent;
-              svgContent = (0, _Transformers.initDefaultColor)(result.data);
-              svgContentMap.set(absUrl, svgContent);
-              return _context.abrupt("return", svgContent);
-
-            case 14:
-              _context.prev = 14;
-              _context.t0 = _context["catch"](5);
-              return _context.abrupt("return", '');
-
-            case 17:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[5, 14]]);
-    }));
-
-    function getSvgContent(_x) {
-      return _getSvgContent.apply(this, arguments);
-    }
-
-    return getSvgContent;
-  }();
-}();
-
-exports.getSvgContent = getSvgContent;
-
-var applySvgContentOperations = function applySvgContentOperations(preview, operations, svgContent) {
-  // add missing attributes to svg tag if needed
-  var svgTags = svgContent.match(/<svg(?:(?!>)[\s\S])*>/);
-
-  if (svgTags && svgTags[0]) {
-    var svgTag = svgTags[0];
-
-    if (svgTag.indexOf('viewBox=') === -1) {
-      svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(preview.width, " ").concat(preview.height, "\""));
-    }
-
-    if (svgTag.indexOf('height=') === -1) {
-      svgContent = svgContent.replace('<svg', "<svg height=\"".concat(preview.height, "px\""));
-    }
-
-    if (svgTag.indexOf('width=') === -1) {
-      svgContent = svgContent.replace('<svg', "<svg width=\"".concat(preview.width, "px\""));
-    }
-  }
-
-  if (operations && operations.vectorize && operations.vectorizeColorsMap && Object.keys(operations.vectorizeColorsMap).length) {
-    var colorRegex = new RegExp("(".concat(Object.keys(operations.vectorizeColorsMap).join('|'), ")"), 'ig');
-    svgContent = svgContent.replace(colorRegex, function (match) {
-      var value = operations.vectorizeColorsMap[match.toLowerCase()].value;
-      return (0, _Selectors.isValidHex)(value) ? value : '#000000';
-    });
-  }
-
-  return 'data:image/svg+xml;base64,' + btoa(svgContent);
-};
-
-exports.applySvgContentOperations = applySvgContentOperations;
-
-var getSvgColors = function getSvgColors(svgContent, designProductionMethod) {
-  var colors = svgContent.toLowerCase().match(/#[0-9a-f]{3,6}/g);
-  var colorsMap = [];
-
-  var _iterator5 = _createForOfIteratorHelper(designProductionMethod.colorPalettes),
-      _step5;
-
-  try {
-    for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-      var colorPalette = _step5.value;
-
-      var _iterator6 = _createForOfIteratorHelper(colorPalette.colors),
-          _step6;
-
-      try {
-        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-          var color = _step6.value;
-          colorsMap.push({
-            identifier: color.identifier,
-            paletteIdentifier: colorPalette.identifier,
-            value: '#' + color.hex_value
-          });
-        }
-      } catch (err) {
-        _iterator6.e(err);
-      } finally {
-        _iterator6.f();
-      }
-    }
-  } catch (err) {
-    _iterator5.e(err);
-  } finally {
-    _iterator5.f();
-  }
-
-  var colorPalettesIndexes = getColorPalettesIndex(designProductionMethod.colorPalettes);
-  return colors.map(function (color) {
-    var paletteColor = (0, _find["default"])(colorsMap, function (colorsMapColor) {
-      return colorsMapColor.value === color;
-    }); // the color has a matching palette color
-
-    if (paletteColor) {
-      return {
-        key: color,
-        color: (0, _Selectors.createColorData)(paletteColor.identifier, paletteColor.paletteIdentifier, false, paletteColor.value)
-      };
-    } // find the closest color in the palettes
-
-
-    if (colorPalettesIndexes.length) {
-      return {
-        key: color,
-        color: getClosestColorPaletteColor(getRgbValuesFromString((0, _Selectors.hexToRgb)(color)), colorPalettesIndexes)
-      };
-    } // treat it as a custom color (fallback case)
-
-
-    return {
-      key: color,
-      color: (0, _Selectors.createColorData)(color, null, true, color)
-    };
-  });
-};
-
-exports.getSvgColors = getSvgColors;
-
-var isWidget = function isWidget(pathname) {
-  return /\/widget\//.test(pathname);
-};
-
-exports.isWidget = isWidget;
-
-var updateColorAmountOnDesignProductionMethodChange = function updateColorAmountOnDesignProductionMethodChange(selectedDesignProductionMethod) {
-  var state = _ServiceLocator.Services.store.state;
-  var selectedProductionMethod = (0, _Selectors.getDesignProductionMethodByIdentifier)(state, selectedDesignProductionMethod);
-  var designAreaData = (0, _Selectors.getDesignDataForSelectedDesignArea)(state);
-  var colorAmount = designAreaData.colorAmount;
-  var selectedDesignArea = (0, _Selectors.getSelectedDesignArea)(state);
-  var maxColorAmount = Number((0, _get2["default"])(selectedProductionMethod, 'options.maxColorAmount') || 0);
-  var activeDesignAreas = (0, _Selectors.getActiveDesignAreas)(state);
-  var isDesignAreaSelected = activeDesignAreas[selectedDesignArea.identifier];
-
-  if (colorAmount !== 1 && colorAmount > maxColorAmount) {
-    _ServiceLocator.Services.designData.getSampleCanvasEditorForDesignArea().setColorAmount(1);
-
-    isDesignAreaSelected && _this.getSampleCanvasEditorForDesignArea().setColorAmount(1);
-  }
-};
-
-exports.updateColorAmountOnDesignProductionMethodChange = updateColorAmountOnDesignProductionMethodChange;
-var EventTypes = {
-  DesignAreaListChange: 'DesignDataService/DesignAreaListChange',
-  DesignViewListChange: 'DesignDataService/DesignViewListChange'
-};
-exports.EventTypes = EventTypes;
-
-var DesignDataService = /*#__PURE__*/function () {
-  function DesignDataService() {
-    var _this2 = this;
-
-    _classCallCheck(this, DesignDataService);
-
-    _defineProperty(this, "observable", new _Observable["default"](this));
-
-    _defineProperty(this, "isInPreviewMode", false);
-
-    _defineProperty(this, "_loadCanvasData", null);
-
-    _defineProperty(this, "_getCanvas", null);
-
-    _defineProperty(this, "_serializeCanvas", null);
-
-    _defineProperty(this, "_syncCanvasChange", null);
-
-    _defineProperty(this, "_isCanvasDataUpdateEnabled", true);
-
-    _defineProperty(this, "handleDesignProductionMethodChangeFromVectorizationToNonVectorization", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(designProductionMethodIdentifier) {
-        var state, _getVectorizeForDesig, currentVectorsRequired, newVectorsRequired, designArea, images;
-
-        return regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                _getVectorizeForDesig = (0, _Selectors.getVectorizeForDesignProductionMethods)(state, designProductionMethodIdentifier), currentVectorsRequired = _getVectorizeForDesig.currentVectorsRequired, newVectorsRequired = _getVectorizeForDesig.newVectorsRequired;
-                designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                images = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier);
-
-                if (!(currentVectorsRequired && !newVectorsRequired && images.length)) {
-                  _context2.next = 8;
-                  break;
-                }
-
-                _context2.next = 7;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showSwitchToProductionMethodWithoutVectorization)());
-
-              case 7:
-                return _context2.abrupt("return", true);
-
-              case 8:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2);
-      }));
-
-      return function (_x2) {
-        return _ref3.apply(this, arguments);
-      };
-    }());
-
-    _defineProperty(this, "handleDesignProductionMethodChangeFromNonVectorizationToVectorization", /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(designProductionMethodIdentifier) {
-        var state, _getVectorizeForDesig2, currentVectorsRequired, newVectorsRequired, designArea, images;
-
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                _getVectorizeForDesig2 = (0, _Selectors.getVectorizeForDesignProductionMethods)(state, designProductionMethodIdentifier), currentVectorsRequired = _getVectorizeForDesig2.currentVectorsRequired, newVectorsRequired = _getVectorizeForDesig2.newVectorsRequired;
-                designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                images = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier);
-
-                if (!(images.length === 1 && (!currentVectorsRequired && newVectorsRequired || !(0, _Selectors2.isColorPreviewCompatible)(state, images[0].imageData, designProductionMethodIdentifier)))) {
-                  _context3.next = 8;
-                  break;
-                }
-
-                _context3.next = 7;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showSwitchToProductionMethodWithVectorization)());
-
-              case 7:
-                return _context3.abrupt("return", true);
-
-              case 8:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3);
-      }));
-
-      return function (_x3) {
-        return _ref4.apply(this, arguments);
-      };
-    }());
-
-    _defineProperty(this, "checkColorUsageForDesignProductionMethod", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(designProductionMethodIdentifier) {
-        var state, _getSelectedDesignAre2, maxColorAmount, designProductionMethod, newProductionMethod, newMaxColorAmount, currentVectorsRequired, newVectorsRequired, designArea, colorPreviewRequired, canvas, images, missingColorPalettesColors;
-
-        return regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                _getSelectedDesignAre2 = (0, _Selectors.getSelectedDesignAreaProperties)(state), maxColorAmount = _getSelectedDesignAre2.maxColorAmount, designProductionMethod = _getSelectedDesignAre2.designProductionMethod;
-                newProductionMethod = (0, _Selectors.getDesignProductionMethodByIdentifier)(state, designProductionMethodIdentifier);
-                newMaxColorAmount = parseInt((0, _get2["default"])(newProductionMethod, 'options.maxColorAmount', 0));
-                currentVectorsRequired = !!(0, _get2["default"])(designProductionMethod, 'options.vectorsRequired');
-                newVectorsRequired = !!(0, _get2["default"])(newProductionMethod, 'options.vectorsRequired');
-                designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(newProductionMethod);
-
-                if (!(newMaxColorAmount !== 0 && newMaxColorAmount < maxColorAmount || !currentVectorsRequired && newVectorsRequired || colorPreviewRequired)) {
-                  _context4.next = 15;
-                  break;
-                }
-
-                canvas = _this2._getCanvas(designArea);
-                images = canvas ? canvas.objects.filter(function (obj) {
-                  if (obj.type !== 'Image') {
-                    return false;
-                  }
-
-                  return !(0, _Selectors2.isEditableVectorImage)(obj.imageData.preview) || !(0, _Selectors2.isColorPreviewCompatible)(state, obj.imageData, designProductionMethodIdentifier);
-                }) : [];
-
-                if (!(images.length > 1)) {
-                  _context4.next = 15;
-                  break;
-                }
-
-                _context4.next = 14;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodRemoveImagesConfirm)());
-
-              case 14:
-                images.forEach(function (object) {
-                  object.remove();
-                });
-
-              case 15:
-                missingColorPalettesColors = getMissingColorPalettesColors((0, _Selectors.getColorsWithPalette)(state), newProductionMethod.colorPalettes, !currentVectorsRequired && newVectorsRequired);
-
-                if (!missingColorPalettesColors.length) {
-                  _context4.next = 22;
-                  break;
-                }
-
-                if ((0, _Selectors.isColoringDisabled)(state, newProductionMethod.identifier)) {
-                  _context4.next = 22;
-                  break;
-                }
-
-                _context4.next = 20;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeColorsConfirm)());
-
-              case 20:
-                _context4.next = 22;
-                return _this2.replaceSelectedDesignAreaElementsColor(missingColorPalettesColors, newProductionMethod);
-
-              case 22:
-              case "end":
-                return _context4.stop();
-            }
-          }
-        }, _callee4);
-      }));
-
-      return function (_x4) {
-        return _ref5.apply(this, arguments);
-      };
-    }());
-
-    _defineProperty(this, "replaceSelectedDesignAreaElementsColor", /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(missingColorPalettesColors, designProductionMethod) {
-        var state, designArea, designData, objects, _iterator7, _step7, missingColor;
-
-        return regeneratorRuntime.wrap(function _callee5$(_context5) {
-          while (1) {
-            switch (_context5.prev = _context5.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 (_ref7) {
-                  var type = _ref7.type;
-                  return type === 'Image';
-                }).map(function (_ref8) {
-                  var imageData = _ref8.imageData;
-                  return (0, _Selectors2.getUserImage)(state, imageData.identifier);
-                }).filter(function (image, idx, arr) {
-                  return arr.indexOf(image) === idx && // uniq
-                  !(0, _Selectors2.isColorMappingCompatible)(designProductionMethod.colorPalettes, (0, _get2["default"])(image, 'operations.vectorizeColorsMap'));
-                }).map(function (image) {
-                  var operations = missingColorPalettesColors.reduce(function (currentOperations, missingColor) {
-                    return (0, _Modifiers.replaceColorOnOperations)(currentOperations, missingColor.color, missingColor.closestColor);
-                  }, image.operations);
-                  return _ServiceLocator.Services.designData.editFile(operations, image, {
-                    immediateCommit: true,
-                    forceUpdate: true,
-                    designProductionMethod: designProductionMethod
-                  });
-                }));
-
-              case 6:
-                _iterator7 = _createForOfIteratorHelper(missingColorPalettesColors);
-
-                try {
-                  for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-                    missingColor = _step7.value;
-
-                    _ServiceLocator.Services.store.dispatch((0, _Actions.replaceDesignAreaTextsColor)(designArea.identifier, missingColor.color.identifier, {
-                      rgb: missingColor.color.value,
-                      hex: rgbStrToHex(missingColor.color.value)
-                    }, missingColor.closestColor.identifier, missingColor.closestColor.value));
-                  }
-                } catch (err) {
-                  _iterator7.e(err);
-                } finally {
-                  _iterator7.f();
-                }
-
-                _context5.next = 10;
-                return _this2.loadCanvasDataFromState([designArea]);
-
-              case 10:
-              case "end":
-                return _context5.stop();
-            }
-          }
-        }, _callee5);
-      }));
-
-      return function (_x5, _x6) {
-        return _ref6.apply(this, arguments);
-      };
-    }());
-  }
-
-  _createClass(DesignDataService, [{
-    key: "init",
-    value: function init() {
-      var _this3 = this;
-
-      _ServiceLocator.Services.store.observeStore(function (state) {
-        return state.designArea.filteredDesignAreas;
-      }, /*#__PURE__*/function () {
-        var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(filteredDesignAreas, prevDesignAreas) {
-          var initList, areasToLoad;
-          return regeneratorRuntime.wrap(function _callee6$(_context6) {
-            while (1) {
-              switch (_context6.prev = _context6.next) {
-                case 0:
-                  _context6.prev = 0;
-                  _context6.next = 3;
-                  return _this3.initCanvases(filteredDesignAreas, prevDesignAreas);
-
-                case 3:
-                  initList = _context6.sent;
-                  // only the newly initialized canvases has to be loaded
-                  areasToLoad = initList.filter(function (_ref10) {
-                    var isNew = _ref10.isNew;
-                    return isNew;
-                  }).map(function (_ref11) {
-                    var designArea = _ref11.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;
-
-                  if (!_context6.t0) {
-                    _context6.next = 9;
-                    break;
-                  }
-
-                  _context6.next = 9;
-                  return _this3.loadCanvasDataFromState(areasToLoad);
-
-                case 9:
-                  _this3.selectInitialDesignView();
-
-                  _this3.designAreaListChangeListener(filteredDesignAreas, prevDesignAreas);
-
-                  _context6.next = 16;
-                  break;
-
-                case 13:
-                  _context6.prev = 13;
-                  _context6.t1 = _context6["catch"](0);
-                  // eslint-disable-next-line no-console
-                  console.error('Error occurred in processing design area list change:', _context6.t1);
-
-                case 16:
-                case "end":
-                  return _context6.stop();
-              }
-            }
-          }, _callee6, null, [[0, 13]]);
-        }));
-
-        return function (_x7, _x8) {
-          return _ref9.apply(this, arguments);
-        };
-      }());
-
-      _ServiceLocator.Services.store.observeStore(function (state) {
-        return state.designArea.maxZoom2d;
-      }, function (maxZoom2d) {
-        _ServiceLocator.Services.visualization.update2DMaxZoom(maxZoom2d);
-      }); // in calculation widget mode the canvas events should be disabled,
-      // the update is done directly after the modifications
-
-
-      if (isWidget(location.pathname)) {
-        this.toggleCanvasDataUpdate(false);
-
-        _ServiceLocator.Services.store.observeStore(_Selectors.getSelectedDesignProductionMethodIdentifier, function (selectedDesignProductionMethod) {
-          updateColorAmountOnDesignProductionMethodChange(selectedDesignProductionMethod);
-        });
-      }
-
-      _ServiceLocator.Services.store.observeStore(function (_ref12) {
-        var selectedoptionclassification = _ref12.configurator.selectedoptionclassification;
-        return selectedoptionclassification;
-      }, this.componentChangeHandler.bind(this));
-
-      (0, _setupDesigner["default"])(this);
-    }
-  }, {
-    key: "componentChangeHandler",
-    value: function componentChangeHandler(component, prevComponent) {
-      var identifier = (0, _get2["default"])(component, 'identifier');
-
-      if (identifier && identifier !== (0, _get2["default"])(prevComponent, 'identifier')) {
-        this.selectViewForComponent(component);
-      }
-    }
-  }, {
-    key: "selectViewForComponent",
-    value: function selectViewForComponent(component) {
-      var designViewIdentifier = // use the view linked to the component
-      (0, _get2["default"])(component, 'creatorView.identifier') || // if no linked view, use the last selected view
-      (0, _get2["default"])(_ServiceLocator.Services.store.state, 'designView.lastSelectedDesignView.identifier') || // if nothing was selected, use the initial design view
-      this.getInitialDesignViewIdentifier() || // if no initial design view, use the first view from the list
-      (0, _get2["default"])(_ServiceLocator.Services.store.state, 'designView.designViews[0].identifier');
-      var currentDesignViewIdentifier = (0, _get2["default"])(_ServiceLocator.Services.store.state, 'designView.selectedDesignView.identifier');
-
-      if (currentDesignViewIdentifier !== designViewIdentifier) {
-        var switchViewOnComponentSelection = (0, _configuration.getConf)('switchViewOnComponentSelection', true);
-        this.selectDesignView(designViewIdentifier, {
-          saveLast: !switchViewOnComponentSelection
-        });
-      }
-    }
-    /**
-     * Register a function to be called to load the canvas data into the active canvas
-     * or into the one that's related to the provided design area.
-     * @param {function} fn
-     * @see loadCanvasDataFromState
-     * @see createCanvasChangeListener
-     */
-
-  }, {
-    key: "registerLoadCanvasData",
-    value: function registerLoadCanvasData(fn) {
-      this._loadCanvasData = fn;
-    }
-    /**
-     * Register a function to be called to load the canvas data into the active canvas
-     * or into the one that's related to the provided design area.
-     * @param {function} fn
-     * @see updateCanvasData
-     * @see createCanvasChangeListener
-     */
-
-  }, {
-    key: "registerUpdateCanvasData",
-    value: function registerUpdateCanvasData(fn) {
-      this._updateCanvasData = fn;
-    }
-    /**
-     * Register a function to be called to get the canvas that is associated with the given design area
-     * @param {function} fn
-     * @see redrawAllDesignAreas
-     */
-
-  }, {
-    key: "registerGetCanvas",
-    value: function registerGetCanvas(fn) {
-      this._getCanvas = fn;
-    }
-    /**
-     * Register a function to be called to initialize a canvas
-     * @param {function} fn
-     * @see initCanvases
-     */
-
-  }, {
-    key: "registerInitCanvas",
-    value: function registerInitCanvas(fn) {
-      this._initCanvas = fn;
-    }
-    /**
-     * Register a function to be called to remove a canvas
-     * @param {function} fn
-     * @see initCanvases
-     */
-
-  }, {
-    key: "registerRemoveCanvas",
-    value: function registerRemoveCanvas(fn) {
-      this._removeCanvas = fn;
-    }
-    /**
-     * Calls the registered _initCanvas function for all design areas
-     * @param designAreas
-     * @param prevDesignAreas
-     */
-
-  }, {
-    key: "initCanvases",
-    value: function () {
-      var _initCanvases = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(designAreas, prevDesignAreas) {
-        var _this4 = this;
-
-        var state;
-        return regeneratorRuntime.wrap(function _callee7$(_context7) {
-          while (1) {
-            switch (_context7.prev = _context7.next) {
-              case 0:
-                // clean up first: remove canvases that are not mapped to any design areas
-                this._removeCanvas && prevDesignAreas.filter(function (prevArea) {
-                  return !designAreas.some(function (area) {
-                    return prevArea.identifier === area.identifier;
-                  });
-                }).forEach(function (prevArea) {
-                  return _this4._removeCanvas(prevArea);
-                });
-                state = _ServiceLocator.Services.store.state;
-                _context7.next = 4;
-                return Promise.all(designAreas.map(function (designArea) {
-                  var maskData = (0, _Selectors.getMaskDataForDesignArea)(state, designArea);
-                  var canvasSize = (0, _Selectors.getCanvasSizeFromDesignArea)(state, designArea);
-                  var prevDesignArea = (0, _find["default"])(prevDesignAreas, {
-                    identifier: designArea.identifier
-                  });
-                  return _this4._initCanvas && _this4._initCanvas({
-                    designArea: designArea,
-                    prevDesignArea: prevDesignArea,
-                    canvasSize: canvasSize,
-                    maskData: maskData
-                  });
-                }));
-
-              case 4:
-                return _context7.abrupt("return", _context7.sent);
-
-              case 5:
-              case "end":
-                return _context7.stop();
-            }
-          }
-        }, _callee7, this);
-      }));
-
-      function initCanvases(_x9, _x10) {
-        return _initCanvases.apply(this, arguments);
-      }
-
-      return initCanvases;
-    }()
-    /**
-     * Calls syncCanvases with the registered _loadCanvasData function
-     * @param {array} designAreas
-     */
-
-  }, {
-    key: "updateCanvasDataFromState",
-    value: function () {
-      var _updateCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
-        var designAreas,
-            _args8 = arguments;
-        return regeneratorRuntime.wrap(function _callee8$(_context8) {
-          while (1) {
-            switch (_context8.prev = _context8.next) {
-              case 0:
-                designAreas = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : this.getDesignAreas();
-                _context8.next = 3;
-                return this.syncCanvases(this._updateCanvasData, designAreas);
-
-              case 3:
-                return _context8.abrupt("return", _context8.sent);
-
-              case 4:
-              case "end":
-                return _context8.stop();
-            }
-          }
-        }, _callee8, this);
-      }));
-
-      function updateCanvasDataFromState() {
-        return _updateCanvasDataFromState.apply(this, arguments);
-      }
-
-      return updateCanvasDataFromState;
-    }()
-    /**
-     * Calls syncCanvases with the registered _loadCanvasData function
-     * @param {array} designAreas
-     */
-
-  }, {
-    key: "loadCanvasDataFromState",
-    value: function () {
-      var _loadCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
-        var designAreas,
-            _args9 = arguments;
-        return regeneratorRuntime.wrap(function _callee9$(_context9) {
-          while (1) {
-            switch (_context9.prev = _context9.next) {
-              case 0:
-                designAreas = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : this.getDesignAreas();
-                _context9.next = 3;
-                return this.syncCanvases(this._loadCanvasData, designAreas);
-
-              case 3:
-                return _context9.abrupt("return", _context9.sent);
-
-              case 4:
-              case "end":
-                return _context9.stop();
-            }
-          }
-        }, _callee9, this);
-      }));
-
-      function loadCanvasDataFromState() {
-        return _loadCanvasDataFromState.apply(this, arguments);
-      }
-
-      return loadCanvasDataFromState;
-    }()
-    /**
-     * Calls the given updateFn function for all the design areas
-     * which have associated canvasData in the configuration
-     * @param {function} updateFn
-     * @param {array} designAreas
-     * @return {Promise<void>}
-     */
-
-  }, {
-    key: "syncCanvases",
-    value: function () {
-      var _syncCanvases = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(updateFn, designAreas) {
-        var _this5 = this;
-
-        var state;
-        return regeneratorRuntime.wrap(function _callee11$(_context11) {
-          while (1) {
-            switch (_context11.prev = _context11.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                _context11.next = 3;
-                return Promise.all(designAreas.map( /*#__PURE__*/function () {
-                  var _ref13 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(designArea) {
-                    var designData, canvasData, canvasSize;
-                    return regeneratorRuntime.wrap(function _callee10$(_context10) {
-                      while (1) {
-                        switch (_context10.prev = _context10.next) {
-                          case 0:
-                            designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier);
-                            canvasData = (0, _get2["default"])(designData, 'canvasData');
-
-                            if (!canvasData) {
-                              _context10.next = 7;
-                              break;
-                            }
-
-                            _context10.next = 5;
-                            return preloadFonts(canvasData);
-
-                          case 5:
-                            canvasSize = (0, _Selectors.getCanvasSizeFromDesignArea)(state, designArea);
-                            return _context10.abrupt("return", updateFn && updateFn(canvasData, designArea, canvasSize));
-
-                          case 7:
-                          case "end":
-                            return _context10.stop();
-                        }
-                      }
-                    }, _callee10);
-                  }));
-
-                  return function (_x13) {
-                    return _ref13.apply(this, arguments);
-                  };
-                }()));
-
-              case 3:
-                window.setTimeout(function () {
-                  _this5.updateVisualization();
-                }, 100);
-
-              case 4:
-              case "end":
-                return _context11.stop();
-            }
-          }
-        }, _callee11);
-      }));
-
-      function syncCanvases(_x11, _x12) {
-        return _syncCanvases.apply(this, arguments);
-      }
-
-      return syncCanvases;
-    }()
-  }, {
-    key: "getDesignAreas",
-    value: function getDesignAreas() {
-      var designArea = _ServiceLocator.Services.store.state.designArea;
-      var filteredDesignAreas = designArea.filteredDesignAreas;
-      return filteredDesignAreas;
-    }
-  }, {
-    key: "getDesignAreaByIdentifier",
-    value: function getDesignAreaByIdentifier(designAreaIdentifier) {
-      return this.getDesignAreas().find(function (_ref14) {
-        var identifier = _ref14.identifier;
-        return identifier === designAreaIdentifier;
-      });
-    }
-  }, {
-    key: "removeBulkNameItems",
-    value: function removeBulkNameItems(designData) {
-      var designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
-      var canvasData = designData.canvasData;
-
-      if (!canvasData) {
-        return;
-      }
-
-      var objects = canvasData ? canvasData.objects.filter(function (obj) {
-        return !obj.isBulkName;
-      }) : [];
-      this.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
-        objects: objects
-      }));
-      this.loadCanvasDataFromState([designArea]);
-    }
-  }, {
-    key: "designAreaListChangeListener",
-    value: function designAreaListChangeListener(filteredDesignAreas, prevDesignAreas) {
-      // apply pre-selection only after loading the design areas
-      if (filteredDesignAreas.length && !prevDesignAreas.length) {
-        this.applyDesignAreaPreSelection(filteredDesignAreas);
-      }
-
-      _ServiceLocator.Services.visualization.updateDesignAreaList(filteredDesignAreas);
-    }
-  }, {
-    key: "registerCanvasSerializer",
-    value: function registerCanvasSerializer(fn) {
-      this._serializeCanvas = fn;
-    }
-  }, {
-    key: "updateCanvasData",
-    value: function () {
-      var _updateCanvasData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(canvas, eventData) {
-        var canvasDataJSON, showAlert, _getDesignDataForSele, canvasData;
-
-        return regeneratorRuntime.wrap(function _callee12$(_context12) {
-          while (1) {
-            switch (_context12.prev = _context12.next) {
-              case 0:
-                if (this._serializeCanvas) {
-                  _context12.next = 2;
-                  break;
-                }
-
-                throw new TypeError("The registerCanvasSerializer method has to be called first with a valid function!");
-
-              case 2:
-                canvasDataJSON = this._serializeCanvas(canvas); // check the color usage before storing the canvas data, so the user can decide to
-                // 1. proceed with more colors than the allowed or
-                // 2. undo the changes
-                //added check to avoid the checkColorUsage in Widget view(as evenData is undefined)
-
-                showAlert = eventData ? checkColorUsage(canvasDataJSON, eventData.changeEvent) : false;
-
-                if (!(showAlert && (0, _configuration.getConf)('displayColorAmountWarnings', true))) {
-                  _context12.next = 9;
-                  break;
-                }
-
-                _ServiceLocator.Services.ui.reportError((0, _i18n.t)('colorAmountAlert.colorChangeReverted'));
-
-                _getDesignDataForSele = (0, _Selectors.getDesignDataForSelectedDesignArea)(_ServiceLocator.Services.store.state), canvasData = _getDesignDataForSele.canvasData; // Restore Graphics Editor state
-
-                this._loadCanvasData && this._loadCanvasData(canvasData);
-                return _context12.abrupt("return");
-
-              case 9:
-                this.setCanvasData(canvasDataJSON);
-
-              case 10:
-              case "end":
-                return _context12.stop();
-            }
-          }
-        }, _callee12, this);
-      }));
-
-      function updateCanvasData(_x14, _x15) {
-        return _updateCanvasData.apply(this, arguments);
-      }
-
-      return updateCanvasData;
-    }()
-  }, {
-    key: "createCanvasChangeListener",
-    value: function createCanvasChangeListener(_ref15) {
-      var _this6 = this;
-
-      var syncCanvasChange = _ref15.syncCanvasChange;
-      this._syncCanvasChange = syncCanvasChange;
-      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
-        var _args13 = arguments;
-        return regeneratorRuntime.wrap(function _callee13$(_context13) {
-          while (1) {
-            switch (_context13.prev = _context13.next) {
-              case 0:
-                if (!_this6._isCanvasDataUpdateEnabled) {
-                  _context13.next = 3;
-                  break;
-                }
-
-                _context13.next = 3;
-                return _this6.updateCanvasData.apply(_this6, _args13);
-
-              case 3:
-              case "end":
-                return _context13.stop();
-            }
-          }
-        }, _callee13);
-      }));
-    }
-  }, {
-    key: "syncCanvasChange",
-    value: function syncCanvasChange() {
-      this._syncCanvasChange && this._syncCanvasChange();
-    }
-  }, {
-    key: "toggleCanvasDataUpdate",
-    value: function toggleCanvasDataUpdate() {
-      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !this._isCanvasDataUpdateEnabled;
-      this._isCanvasDataUpdateEnabled = value;
-    }
-    /**
-     * Call the registered listener function when the design area changes
-     * Passes the selected design area and the canvas size to the listener function
-     * @param listenerFn
-     */
-
-  }, {
-    key: "registerDesignAreaChangeListener",
-    value: function registerDesignAreaChangeListener(listenerFn) {
-      _ServiceLocator.Services.store.observeStore(_Selectors.getSelectedDesignArea, function (selectedDesignArea, prevSelectedDesignArea) {
-        var state = _ServiceLocator.Services.store.state;
-        var canvasSize = (0, _Selectors.getCanvasSizeFromDesignArea)(state, selectedDesignArea);
-        listenerFn({
-          selectedDesignArea: selectedDesignArea,
-          prevSelectedDesignArea: prevSelectedDesignArea,
-          canvasSize: canvasSize
-        });
-      });
-    }
-  }, {
-    key: "registerDesignProductionMethodChangeListener",
-    value: function registerDesignProductionMethodChangeListener(listenerFn) {
-      _ServiceLocator.Services.store.observeStore(_Selectors.getSelectedDesignProductionMethodIdentifier, listenerFn);
-    }
-  }, {
-    key: "getDesignAreaCanvases",
-    value: function getDesignAreaCanvases() {
-      var _this7 = this;
-
-      return this.getDesignAreas().map(function (designArea) {
-        return {
-          designArea: designArea,
-          canvas: _this7._getCanvas(designArea)
-        };
-      });
-    }
-  }, {
-    key: "removeAllDesignAreaPlaceholders",
-    value: function removeAllDesignAreaPlaceholders(configuration) {
-      var state = _ServiceLocator.Services.store.state;
-      var updatedConfiguration = configuration;
-
-      if (!isWidget(location.pathname)) {
-        var designAreas = (0, _get2["default"])(state, 'designArea.filteredDesignAreas', []);
-        designAreas.forEach(function (designArea) {
-          var _get = (0, _get2["default"])(updatedConfiguration, "designdata.".concat(designArea.identifier), {}),
-              canvasData = _get.canvasData;
-
-          if (canvasData) {
-            var objects = canvasData.objects.filter(function (obj) {
-              if (!(0, _Selectors5.isPlaceholderObject)(obj)) {
-                return true;
-              }
-            });
-            updatedConfiguration = _objectSpread(_objectSpread({}, updatedConfiguration), {}, {
-              designdata: _objectSpread(_objectSpread({}, updatedConfiguration.designdata), {}, _defineProperty({}, designArea.identifier, _objectSpread(_objectSpread({}, updatedConfiguration.designdata[designArea.identifier]), {}, {
-                canvasData: objects.length > 0 ? _objectSpread(_objectSpread({}, canvasData), {}, {
-                  objects: objects
-                }) : null
-              })))
-            });
-          }
-        });
-      }
-
-      return updatedConfiguration;
-    }
-  }, {
-    key: "removeDesignAreaPlaceholders",
-    value: function removeDesignAreaPlaceholders() {
-      var removeTextPlaceholders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var removeImagePlaceholders = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var designArea = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
-      this.syncCanvasChange();
-      var state = _ServiceLocator.Services.store.state;
-
-      if (!designArea.identifier) {
-        return;
-      }
-
-      var _getDesignDataByDesig = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier),
-          canvasData = _getDesignDataByDesig.canvasData;
-
-      if (!canvasData) {
-        return;
-      }
-
-      var objects = canvasData.objects.filter(function (obj) {
-        if (removeTextPlaceholders && obj.type === 'Text') {
-          return !(0, _Selectors.isPlaceholderContent)(obj.content) && (0, _Selectors.contentHasText)(obj.content);
-        }
-
-        if (removeImagePlaceholders && obj.type === 'Image') {
-          return !obj.imageData.isPlaceHolderImage;
-        }
-
-        return true;
-      }); // replace objects and sync canvas if something was removed
-
-      if (objects.length !== canvasData.objects.length) {
-        this.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
-          objects: objects
-        }));
-        this.loadCanvasDataFromState([designArea]);
-      }
-    }
-  }, {
-    key: "selectDesignArea",
-    value: function selectDesignArea(identifier) {
-      _ServiceLocator.Services.ui.show('designer');
-
-      _ServiceLocator.Services.store.dispatch((0, _Actions3.selectDesignArea)(identifier));
-
-      if (!this.isInPreviewMode) {
-        _ServiceLocator.Services.visualization.disableUserMovement();
-      }
-    }
-  }, {
-    key: "selectDesignView",
-    value: function selectDesignView(identifier, options) {
-      _ServiceLocator.Services.store.dispatch((0, _Actions4.selectDesignView)(identifier, options));
-    }
-  }, {
-    key: "getInitialDesignViewIdentifier",
-    value: function getInitialDesignViewIdentifier() {
-      var designAreaToShow;
-      var preselectedDesignArea = (0, _get2["default"])((0, _configuration.getConf)('designerPreSelection', {}), 'designAreas[0].identifier');
-
-      if (preselectedDesignArea) {
-        designAreaToShow = this.getDesignAreaByIdentifier(preselectedDesignArea);
-      }
-
-      if (!designAreaToShow) {
-        var state = _ServiceLocator.Services.store.state;
-        var designAreaIdentifier = (0, _Selectors.getSelectedDesignArea)(state).identifier || (0, _Selectors.getDefaultDesignAreaIdentifierFromProductionMethod)(state);
-        designAreaToShow = this.getDesignAreaByIdentifier(designAreaIdentifier) || (0, _first["default"])(state.designArea.filteredDesignAreas);
-      }
-
-      if (designAreaToShow) {
-        return designAreaToShow.designView.identifier;
-      }
-
-      return false;
-    }
-  }, {
-    key: "selectInitialDesignView",
-    value: function selectInitialDesignView() {
-      var initialDesignViewIdentifier = this.getInitialDesignViewIdentifier();
-      initialDesignViewIdentifier && this.selectDesignView(initialDesignViewIdentifier);
-    }
-  }, {
-    key: "selectFirstDesignArea",
-    value: function selectFirstDesignArea() {
-      var firstDesignAreaIdentifier = (0, _get2["default"])(_ServiceLocator.Services.store.state, 'designArea.filteredDesignAreas[0].identifier');
-
-      if (firstDesignAreaIdentifier) {
-        this.selectDesignArea(firstDesignAreaIdentifier);
-      } else {
-        // eslint-disable-next-line no-console
-        console.log('There is no design area to select.');
-      }
-    }
-  }, {
-    key: "clearDesignAreaSelection",
-    value: function clearDesignAreaSelection() {
-      this.removeDesignAreaPlaceholders();
-      var hasActiveDesignArea = !(0, _isEmpty["default"])(_ServiceLocator.Services.visualization.getActiveDesignArea()); // If default Design Area is set then the clear would skip as there will be no selected designArea
-      // So forcing clearDesignAreaSelection when there is ActiveDesignArea(Default).
-
-      _ServiceLocator.Services.store.dispatch((0, _Actions3.clearDesignAreaSelection)(hasActiveDesignArea));
-
-      _ServiceLocator.Services.visualization.enableUserMovement();
-
-      _ServiceLocator.Services.visualization.freeUserMovement();
-    }
-  }, {
-    key: "openDesignAreaEditor",
-    value: function openDesignAreaEditor() {
-      var state = _ServiceLocator.Services.store.state;
-
-      _ServiceLocator.Services.ui.show('designer');
-
-      var designAreaIdentifier = (0, _Selectors.getDesignAreaIdentifierToOpen)(state);
-      this.clearDesignAreaSelection();
-
-      if (designAreaIdentifier) {
-        this.selectDesignArea(designAreaIdentifier);
-      } else {
-        this.selectFirstDesignArea();
-      }
-    }
-  }, {
-    key: "closeDesignAreaEditor",
-    value: function closeDesignAreaEditor() {
-      if (_ServiceLocator.Services.ui.isVisible('designer')) {
-        _ServiceLocator.Services.ui.hide('designer');
-
-        _ServiceLocator.Services.visualization.enableUserMovement();
-
-        _ServiceLocator.Services.visualization.restrictUserMovement();
-
-        _ServiceLocator.Services.designData.clearSelectionOnCurrentDesignArea(); // the canvases should be drawn on the textures to see the changes that were made in the editor
-
-
-        _ServiceLocator.Services.designData.updateVisualization();
-      }
-    }
-    /**
-     * General close handler for design area editor, that calls the correct actions based on the state
-     * @return {boolean}
-     */
-
-  }, {
-    key: "handleCloseIfNeeded",
-    value: function handleCloseIfNeeded() {
-      var state = _ServiceLocator.Services.store.state; // if it's 3D and the editor is open, then close it, so we can enter into the "closer look" mode
-      // this lets the user see the visualization in the same view, but without the design area editor
-
-      if ((0, _Selectors3.visualizationModeCheck)(state).is3D() && _ServiceLocator.Services.ui.isVisible('designer')) {
-        _ServiceLocator.Services.designData.closeDesignAreaEditor();
-
-        return true;
-      } // in this case it's 2D, or the design area was already closed by the previous block
-      // so the second "click away" should clear the selection (which will trigger switching to default view)
-      // if a design area was selected, clear the selection
-
-
-      if ((0, _Selectors.isAnyDesignAreaSelected)(state)) {
-        _ServiceLocator.Services.designData.clearDesignAreaSelection();
-
-        return true;
-      }
-
-      return false;
-    }
-  }, {
-    key: "vectorizeSingleImageAndShowEditDialog",
-    value: function () {
-      var _vectorizeSingleImageAndShowEditDialog = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(identifier) {
-        var showImageEditDialog, state, designArea, canvas, images, operations, imageData, imageToSelect;
-        return regeneratorRuntime.wrap(function _callee14$(_context14) {
-          while (1) {
-            switch (_context14.prev = _context14.next) {
-              case 0:
-                _context14.next = 2;
-                return this.handleDesignProductionMethodChangeFromNonVectorizationToVectorization(identifier);
-
-              case 2:
-                showImageEditDialog = _context14.sent;
-
-                if (!showImageEditDialog) {
-                  _context14.next = 23;
-                  break;
-                }
-
-                _ServiceLocator.Services.ui.show('globalLoader');
-
-                state = _ServiceLocator.Services.store.state;
-                designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                canvas = this._getCanvas(designArea);
-                images = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier);
-                operations = _objectSpread(_objectSpread({}, images[0].imageData.operations), {}, {
-                  vectorize: true
-                });
-                imageData = images[0].imageData;
-                _context14.prev = 11;
-
-                if (!imageData.isPlaceHolderImage) {
-                  _context14.next = 14;
-                  break;
-                }
-
-                return _context14.abrupt("return");
-
-              case 14:
-                _context14.next = 16;
-                return _ServiceLocator.Services.designData.editFile(operations, imageData, {
-                  immediateCommit: true
-                });
-
-              case 16:
-                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;
-                return _ServiceLocator.Services.designer.openImageEditDialog(images[0].imageData.identifier, canvas, {
-                  placeholderImageUpdate: false,
-                  submitOnExitClick: true
-                });
-
-              case 20:
-                _context14.prev = 20;
-
-                _ServiceLocator.Services.ui.hide('globalLoader');
-
-                return _context14.finish(20);
-
-              case 23:
-              case "end":
-                return _context14.stop();
-            }
-          }
-        }, _callee14, this, [[11,, 20, 23]]);
-      }));
-
-      function vectorizeSingleImageAndShowEditDialog(_x16) {
-        return _vectorizeSingleImageAndShowEditDialog.apply(this, arguments);
-      }
-
-      return vectorizeSingleImageAndShowEditDialog;
-    }()
-  }, {
-    key: "restoreVectorizedImages",
-    value: function () {
-      var _restoreVectorizedImages = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15(identifier) {
-        var displayImagesAsUnVectorized, state, designArea, images, _iterator8, _step8, image, operations;
-
-        return regeneratorRuntime.wrap(function _callee15$(_context15) {
-          while (1) {
-            switch (_context15.prev = _context15.next) {
-              case 0:
-                _context15.next = 2;
-                return this.handleDesignProductionMethodChangeFromVectorizationToNonVectorization(identifier);
-
-              case 2:
-                displayImagesAsUnVectorized = _context15.sent;
-
-                if (!displayImagesAsUnVectorized) {
-                  _context15.next = 28;
-                  break;
-                }
-
-                state = _ServiceLocator.Services.store.state;
-                designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                images = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier);
-                images = images.filter(function (img) {
-                  return !(0, _get2["default"])(img, 'imageData.isPlaceHolderImage', false);
-                }); //excluding placeHolderImage from executing edit operations
-
-                _iterator8 = _createForOfIteratorHelper(images);
-                _context15.prev = 9;
-
-                _iterator8.s();
-
-              case 11:
-                if ((_step8 = _iterator8.n()).done) {
-                  _context15.next = 18;
-                  break;
-                }
-
-                image = _step8.value;
-                operations = (0, _Modifiers.removeVectorizeFromOperations)(image.imageData.operations);
-                _context15.next = 16;
-                return _ServiceLocator.Services.designData.editFile(operations, image.imageData, {
-                  immediateCommit: true,
-                  displayColorPreview: (0, _configuration.getConf)('autoPreviewVectorization', true)
-                });
-
-              case 16:
-                _context15.next = 11;
-                break;
-
-              case 18:
-                _context15.next = 23;
-                break;
-
-              case 20:
-                _context15.prev = 20;
-                _context15.t0 = _context15["catch"](9);
-
-                _iterator8.e(_context15.t0);
-
-              case 23:
-                _context15.prev = 23;
-
-                _iterator8.f();
-
-                return _context15.finish(23);
-
-              case 26:
-                _context15.next = 28;
-                return this.loadCanvasDataFromState([designArea]);
-
-              case 28:
-              case "end":
-                return _context15.stop();
-            }
-          }
-        }, _callee15, this, [[9, 20, 23, 26]]);
-      }));
-
-      function restoreVectorizedImages(_x17) {
-        return _restoreVectorizedImages.apply(this, arguments);
-      }
-
-      return restoreVectorizedImages;
-    }()
-  }, {
-    key: "updateObjectsAfterProductionMethodChange",
-    value: function () {
-      var _updateObjectsAfterProductionMethodChange = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16(oldProductionMethod, newProductionMethod) {
-        var _getDesignDataForSele2, canvasData, objects, newObjects, designArea;
-
-        return regeneratorRuntime.wrap(function _callee16$(_context16) {
-          while (1) {
-            switch (_context16.prev = _context16.next) {
-              case 0:
-                _getDesignDataForSele2 = (0, _Selectors.getDesignDataForSelectedDesignArea)(_ServiceLocator.Services.store.state), canvasData = _getDesignDataForSele2.canvasData;
-
-                if (canvasData) {
-                  _context16.next = 3;
-                  break;
-                }
-
-                return _context16.abrupt("return");
-
-              case 3:
-                objects = canvasData.objects;
-                newObjects = (0, _Modifiers.applyProductionMethodChangeToCanvasObjects)(newProductionMethod, oldProductionMethod, objects);
-
-                if (!(newObjects === objects)) {
-                  _context16.next = 7;
-                  break;
-                }
-
-                return _context16.abrupt("return");
-
-              case 7:
-                this.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
-                  objects: newObjects
-                }));
-                designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
-                _context16.next = 11;
-                return this.updateCanvasDataFromState([designArea]);
-
-              case 11:
-              case "end":
-                return _context16.stop();
-            }
-          }
-        }, _callee16, this);
-      }));
-
-      function updateObjectsAfterProductionMethodChange(_x18, _x19) {
-        return _updateObjectsAfterProductionMethodChange.apply(this, arguments);
-      }
-
-      return updateObjectsAfterProductionMethodChange;
-    }()
-  }, {
-    key: "checkDesignElementRestrictions",
-    value: function checkDesignElementRestrictions(targetDesignProductionMethodIdentifier) {
-      var state = _ServiceLocator.Services.store.state;
-      var designData = (0, _Selectors.getDesignDataForSelectedDesignArea)(state);
-      var designProductionMethod = (0, _Selectors.getDesignProductionMethodByIdentifier)(state, targetDesignProductionMethodIdentifier);
-      var result = (0, _DesignElementSelectors.checkDesignElementRestrictionsWithRemovalCount)(designData, designProductionMethod);
-
-      if (result) {
-        _ServiceLocator.Services.ui.reportError((0, _i18n.t)("designElementRestrictions.productionMethodSwitchMessages.".concat(result.type).concat(result.max === 0 ? '_0' : result.toBeRemovedCount === 1 ? '_1' : ''), result));
-
-        return false;
-      }
-
-      return true;
-    }
-  }, {
-    key: "setDesignProductionMethod",
-    value: function () {
-      var _setDesignProductionMethod2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17(identifier) {
-        var state, designData, selectedDesignProduction, bulkNameSelected, fontSizeMin, smallestFontSize, oldDesignProductionMethod;
-        return regeneratorRuntime.wrap(function _callee17$(_context17) {
-          while (1) {
-            switch (_context17.prev = _context17.next) {
-              case 0:
-                if (this.checkDesignElementRestrictions(identifier)) {
-                  _context17.next = 2;
-                  break;
-                }
-
-                return _context17.abrupt("return");
-
-              case 2:
-                this.clearSelectionOnCurrentDesignArea(); // check if the selected design production method has a higher minimum font size
-                // than any of the text elements on the canvas
-
-                state = _ServiceLocator.Services.store.state;
-                designData = (0, _Selectors.getDesignDataForSelectedDesignArea)(state);
-                selectedDesignProduction = (0, _Selectors.getDesignProductionMethodByIdentifier)(state, identifier);
-                bulkNameSelected = (0, _Selectors.hasSelectedBulkName)(designData);
-
-                if (isWidget(location.pathname)) {
-                  _context17.next = 44;
-                  break;
-                }
-
-                fontSizeMin = (0, _Selectors.getFontSizeMin)(state, identifier);
-                smallestFontSize = (0, _Selectors.findSmallestFontSizeInCanvasData)(designData.canvasData);
-                _context17.prev = 10;
-                _context17.t0 = smallestFontSize < fontSizeMin;
-
-                if (!_context17.t0) {
-                  _context17.next = 15;
-                  break;
-                }
-
-                _context17.next = 15;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showMinFontSizeConfirm)(fontSizeMin));
-
-              case 15:
-                _context17.next = 20;
-                break;
-
-              case 17:
-                _context17.prev = 17;
-                _context17.t1 = _context17["catch"](10);
-                return _context17.abrupt("return");
-
-              case 20:
-                _context17.prev = 20;
-                _context17.next = 23;
-                return this.checkColorUsageForDesignProductionMethod(identifier);
-
-              case 23:
-                _context17.next = 25;
-                return this.vectorizeSingleImageAndShowEditDialog(identifier);
-
-              case 25:
-                _context17.next = 27;
-                return this.restoreVectorizedImages(identifier);
-
-              case 27:
-                _context17.next = 34;
-                break;
-
-              case 29:
-                _context17.prev = 29;
-                _context17.t2 = _context17["catch"](20);
-
-                if (!(0, _Actions5.isConfirmResult)(_context17.t2)) {
-                  _context17.next = 33;
-                  break;
-                }
-
-                return _context17.abrupt("return");
-
-              case 33:
-                throw _context17.t2;
-
-              case 34:
-                _context17.prev = 34;
-                _context17.t3 = bulkNameSelected && !selectedDesignProduction.allowBulkNames;
-
-                if (!_context17.t3) {
-                  _context17.next = 39;
-                  break;
-                }
-
-                _context17.next = 39;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeConfirm)());
-
-              case 39:
-                _context17.next = 44;
-                break;
-
-              case 41:
-                _context17.prev = 41;
-                _context17.t4 = _context17["catch"](34);
-                return _context17.abrupt("return");
-
-              case 44:
-                oldDesignProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(state);
-
-                _ServiceLocator.Services.store.dispatch((0, _Actions.setDesignProductionMethod)(identifier));
-
-                if ((0, _Selectors.isCanvasUpdateRequired)((0, _Selectors.getSelectedDesignArea)(state), selectedDesignProduction)) {
-                  _ServiceLocator.Services.store.dispatch((0, _Actions3.recalculateDesignArea)());
-                }
-
-                this.updateMaskToCurrentDesignProductionMethod();
-
-                if (bulkNameSelected && !selectedDesignProduction.allowBulkNames) {
-                  this.removeBulkNameItems(designData);
-                  !(0, _Selectors.isBulkNamesSelected)(_ServiceLocator.Services.store.state.configurator) && _ServiceLocator.Services.configurator.clearBulkNames();
-                }
-
-                _context17.next = 51;
-                return this.updateObjectsAfterProductionMethodChange(oldDesignProductionMethod, selectedDesignProduction);
-
-              case 51:
-              case "end":
-                return _context17.stop();
-            }
-          }
-        }, _callee17, this, [[10, 17], [20, 29], [34, 41]]);
-      }));
-
-      function setDesignProductionMethod(_x20) {
-        return _setDesignProductionMethod2.apply(this, arguments);
-      }
-
-      return setDesignProductionMethod;
-    }()
-  }, {
-    key: "updateMaskToCurrentDesignProductionMethod",
-    value: function updateMaskToCurrentDesignProductionMethod() {
-      // the mask should be updated when switching design production method
-      var state = _ServiceLocator.Services.store.state;
-      var designArea = (0, _Selectors.getSelectedDesignArea)(state);
-
-      var canvas = this._getCanvas(designArea);
-
-      var maskHandler = canvas.getMaskHandler();
-      var maskData = (0, _Selectors.getMaskDataForDesignArea)(state, designArea);
-
-      if (maskData) {
-        maskHandler.init(maskData);
-      } else {
-        maskHandler && maskHandler.dispose();
-      }
-    }
-  }, {
-    key: "setCanvasData",
-    value: function setCanvasData(canvasData, targetDesignAreaIdentifier) {
-      _ServiceLocator.Services.store.dispatch((0, _Actions.setCanvasData)(canvasData, targetDesignAreaIdentifier));
-    }
-  }, {
-    key: "setColorAmount",
-    value: function () {
-      var _setColorAmount2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18(maxColorCount) {
-        var currentColorCount, colorCount;
-        return regeneratorRuntime.wrap(function _callee18$(_context18) {
-          while (1) {
-            switch (_context18.prev = _context18.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
-                // 1. proceed with the new value
-                // 2. leave the current value (skip applying the newly selected one)
-                currentColorCount = (0, _Selectors.getSelectedDesignAreaProperties)(_ServiceLocator.Services.store.state).colorAmount;
-                colorCount = (0, _Selectors.getColors)(_ServiceLocator.Services.store.state).length;
-
-                if (!(maxColorCount && colorCount > maxColorCount && !isWidget(location.pathname) && (0, _configuration.getConf)('displayColorAmountWarnings', true))) {
-                  _context18.next = 11;
-                  break;
-                }
-
-                _context18.prev = 3;
-                _context18.next = 6;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showMaxColorChangeConfirm)(colorCount, maxColorCount, currentColorCount));
-
-              case 6:
-                _context18.next = 11;
-                break;
-
-              case 8:
-                _context18.prev = 8;
-                _context18.t0 = _context18["catch"](3);
-                return _context18.abrupt("return");
-
-              case 11:
-                _ServiceLocator.Services.store.dispatch((0, _Actions.setColorAmount)(maxColorCount));
-
-              case 12:
-              case "end":
-                return _context18.stop();
-            }
-          }
-        }, _callee18, null, [[3, 8]]);
-      }));
-
-      function setColorAmount(_x21) {
-        return _setColorAmount2.apply(this, arguments);
-      }
-
-      return setColorAmount;
-    }()
-    /**
-     * Call the updateTexture function to update every area on the visualization.
-     * That calls back to the provided drawingFunction with the getDrawingContext at the first argument.
-     *
-     */
-
-  }, {
-    key: "updateVisualization",
-    value: function () {
-      var _updateVisualization = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
-        var updateEventObject,
-            isDesignAreaSelected,
-            isDesignerOpen,
-            isScreenshotEvent,
-            drawingFunction,
-            _args19 = arguments;
-        return regeneratorRuntime.wrap(function _callee19$(_context19) {
-          while (1) {
-            switch (_context19.prev = _context19.next) {
-              case 0:
-                updateEventObject = _args19.length > 0 && _args19[0] !== undefined ? _args19[0] : {};
-
-                if (_ServiceLocator.Services.visualization.isReadyToRender()) {
-                  _context19.next = 3;
-                  break;
-                }
-
-                return _context19.abrupt("return");
-
-              case 3:
-                if (_ServiceLocator.Services.visualization.isReadyToRenderCustomDesign()) {
-                  _context19.next = 6;
-                  break;
-                }
-
-                _ServiceLocator.Services.visualization.render();
-
-                return _context19.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;
-                return _ServiceLocator.Services.visualization.updateTexture({
-                  updateEventObject: updateEventObject,
-                  drawingFunction: drawingFunction.bind(this)
-                });
-
-              case 12:
-              case "end":
-                return _context19.stop();
-            }
-          }
-        }, _callee19, this);
-      }));
-
-      function updateVisualization() {
-        return _updateVisualization.apply(this, arguments);
-      }
-
-      return updateVisualization;
-    }()
-  }, {
-    key: "getFontSizeMin",
-    value: function getFontSizeMin() {
-      return (0, _Selectors.getFontSizeMin)(_ServiceLocator.Services.store.state);
-    }
-    /**
-     * Gets the drawing context and draws all design areas (that has existing canvas) on the texture.
-     * It also handles the highlighting of the design areas.
-     * @param {function} getDrawingContext
-     * @param {object} updateEventObject
-     */
-
-  }, {
-    key: "redrawAllDesignAreas",
-    value: function () {
-      var _redrawAllDesignAreas = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21(getDrawingContext, updateEventObject) {
-        var _this8 = this;
-
-        var state, showHighlight, textureBuilderConfig, variantIdentifier, effectEnabled, drawingFn;
-        return regeneratorRuntime.wrap(function _callee21$(_context22) {
-          while (1) {
-            switch (_context22.prev = _context22.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                showHighlight = (0, _get2["default"])(state, 'designArea.showHighlight');
-                textureBuilderConfig = {
-                  highlight: {
-                    borderColor: (0, _Selectors3.getClientHighlightColor)(state),
-                    backgroundColor: (0, _configuration.getConf)('visualization.designAreaHighlightBackgroundColor')
-                  }
-                };
-                variantIdentifier = (0, _get2["default"])(updateEventObject, 'data.variant', false);
-                effectEnabled = !(0, _Selectors3.isDesignerProductPreviewMode)();
-
-                drawingFn = /*#__PURE__*/function () {
-                  var _ref17 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20(textureCtx, getTextureBuilder) {
-                    var designAreas,
-                        _getTextureBuilder,
-                        getTextureImage,
-                        drawCanvasToArea,
-                        highlightDesignAreas,
-                        drawOn,
-                        getParams,
-                        _iterator9,
-                        _step9,
-                        _loop,
-                        _args21 = arguments;
-
-                    return regeneratorRuntime.wrap(function _callee20$(_context21) {
-                      while (1) {
-                        switch (_context21.prev = _context21.next) {
-                          case 0:
-                            designAreas = _args21.length > 2 && _args21[2] !== undefined ? _args21[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;
-                              break;
-                            }
-
-                            // eslint-disable-next-line no-console
-                            console.warn('Texture image is missing!', designAreas);
-                            return _context21.abrupt("return");
-
-                          case 5:
-                            if (showHighlight) {
-                              // highlight only the design areas with no mask
-                              // for the others the outline is added by the maskHandler
-                              highlightDesignAreas(designAreas.filter(function (designArea) {
-                                return !(0, _Selectors.designAreaAppliesMask)(state, designArea);
-                              }));
-                            }
-
-                            _iterator9 = _createForOfIteratorHelper(designAreas);
-                            _context21.prev = 7;
-                            _loop = /*#__PURE__*/regeneratorRuntime.mark(function _loop() {
-                              var designArea, canvas, releaseLock, selectedObject, maskHandler, restoreOutlineVisibility, drawToContext, getSvg;
-                              return regeneratorRuntime.wrap(function _loop$(_context20) {
-                                while (1) {
-                                  switch (_context20.prev = _context20.next) {
-                                    case 0:
-                                      designArea = _step9.value;
-                                      canvas = _this8._getCanvas(_this8.getDesignAreaByIdentifier(designArea.identifier));
-
-                                      if (!canvas) {
-                                        _context20.next = 16;
-                                        break;
-                                      }
-
-                                      _context20.next = 5;
-                                      return (0, _ObjectLock.requestLock)(canvas);
-
-                                    case 5:
-                                      releaseLock = _context20.sent;
-                                      selectedObject = (0, _get2["default"])(canvas, 'selectedObject');
-
-                                      if (selectedObject) {
-                                        selectedObject.selected = false;
-                                      }
-
-                                      maskHandler = canvas.getMaskHandler();
-
-                                      if (maskHandler) {
-                                        restoreOutlineVisibility = maskHandler.toggleOutline(showHighlight, {
-                                          getZoomFactor: function getZoomFactor(_ref18) {
-                                            var zoom = _ref18.zoom;
-                                            // currentZoom is only available for 2D, for 3D it is always 1
-                                            var threeFactor = Math.min(getParams().currentZoom, 1) || 1;
-                                            return zoom * threeFactor;
-                                          }
-                                        });
-                                      }
-
-                                      drawToContext = canvas.drawToContext.bind(canvas);
-
-                                      getSvg = function getSvg() {
-                                        return canvas.getScreenshot((0, _Selectors4.getFontMapping)(state));
-                                      };
-
-                                      _context20.next = 14;
-                                      return drawCanvasToArea(_objectSpread({
-                                        drawToContext: drawToContext,
-                                        designArea: designArea,
-                                        getSvg: getSvg
-                                      }, effectEnabled && (0, _Selectors.getVisualizationEffectWithOptions)(state, designArea, variantIdentifier)));
-
-                                    case 14:
-                                      if (maskHandler) {
-                                        restoreOutlineVisibility();
-                                      }
-
-                                      releaseLock();
-
-                                    case 16:
-                                    case "end":
-                                      return _context20.stop();
-                                  }
-                                }
-                              }, _loop);
-                            });
-
-                            _iterator9.s();
-
-                          case 10:
-                            if ((_step9 = _iterator9.n()).done) {
-                              _context21.next = 14;
-                              break;
-                            }
-
-                            return _context21.delegateYield(_loop(), "t0", 12);
-
-                          case 12:
-                            _context21.next = 10;
-                            break;
-
-                          case 14:
-                            _context21.next = 19;
-                            break;
-
-                          case 16:
-                            _context21.prev = 16;
-                            _context21.t1 = _context21["catch"](7);
-
-                            _iterator9.e(_context21.t1);
-
-                          case 19:
-                            _context21.prev = 19;
-
-                            _iterator9.f();
-
-                            return _context21.finish(19);
-
-                          case 22:
-                            drawOn(textureCtx);
-
-                          case 23:
-                          case "end":
-                            return _context21.stop();
-                        }
-                      }
-                    }, _callee20, null, [[7, 16, 19, 22]]);
-                  }));
-
-                  return function drawingFn(_x24, _x25) {
-                    return _ref17.apply(this, arguments);
-                  };
-                }();
-
-                _context22.prev = 6;
-                _context22.next = 9;
-                return getDrawingContext(drawingFn, true
-                /* update alpha */
-                , true
-                /* clean up texture before drawing */
-                );
-
-              case 9:
-                _context22.next = 14;
-                break;
-
-              case 11:
-                _context22.prev = 11;
-                _context22.t0 = _context22["catch"](6);
-                // eslint-disable-next-line no-console
-                console.warn('Could not get drawing context, texture update is skipped!', _context22.t0.message);
-
-              case 14:
-              case "end":
-                return _context22.stop();
-            }
-          }
-        }, _callee21, null, [[6, 11]]);
-      }));
-
-      function redrawAllDesignAreas(_x22, _x23) {
-        return _redrawAllDesignAreas.apply(this, arguments);
-      }
-
-      return redrawAllDesignAreas;
-    }()
-  }, {
-    key: "redrawEmptyAreas",
-    value: function redrawEmptyAreas(getDrawingContext) {
-      getDrawingContext( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
-        return regeneratorRuntime.wrap(function _callee22$(_context23) {
-          while (1) {
-            switch (_context23.prev = _context23.next) {
-              case 0:
-              case "end":
-                return _context23.stop();
-            }
-          }
-        }, _callee22);
-      })), true
-      /* update alpha */
-      , true
-      /* clean up texture before drawing */
-      );
-    }
-  }, {
-    key: "toggleHighlight",
-    value: function toggleHighlight(show) {
-      var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-      _ServiceLocator.Services.store.dispatch((0, _Actions3.toggleHighlight)(show));
-
-      if (update) {
-        this.updateVisualization();
-      }
-    }
-  }, {
-    key: "toggleIsInPreviewMode",
-    value: function toggleIsInPreviewMode(isInPreviewMode) {
-      this.isInPreviewMode = isInPreviewMode;
-
-      if (!this.isInPreviewMode) {
-        var hasSelectedDesignArea = !!(0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state).identifier;
-
-        if (hasSelectedDesignArea) {
-          _ServiceLocator.Services.visualization.disableUserMovement();
-        }
-      }
-    }
-  }, {
-    key: "createHighlightMemo",
-    value: function createHighlightMemo(tmpState) {
-      var _this9 = this;
-
-      var origState = (0, _Selectors.isHighlighted)(_ServiceLocator.Services.store.state);
-      this.toggleHighlight(tmpState, false);
-      return {
-        restore: function restore() {
-          _this9.toggleHighlight(origState, true);
-        }
-      };
-    }
-  }, {
-    key: "getScreenshots",
-    value: function () {
-      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24(fontMapping) {
-        var _this10 = this;
-
-        var options,
-            _options$screenshotFn,
-            screenshotFn,
-            _args25 = arguments;
-
-        return regeneratorRuntime.wrap(function _callee24$(_context25) {
-          while (1) {
-            switch (_context25.prev = _context25.next) {
-              case 0:
-                options = _args25.length > 1 && _args25[1] !== undefined ? _args25[1] : {};
-                _options$screenshotFn = options.screenshotFn, screenshotFn = _options$screenshotFn === void 0 ? 'getScreenshot' : _options$screenshotFn;
-                _context25.next = 4;
-                return Promise.all(this.getDesignAreas().map(function (area) {
-                  return {
-                    id: area.identifier,
-                    canvas: _this10._getCanvas(area)
-                  };
-                }).filter(function (_ref20) {
-                  var canvas = _ref20.canvas;
-                  return canvas && canvas[screenshotFn] && canvas.objects && canvas.objects.length > 0;
-                }).map( /*#__PURE__*/function () {
-                  var _ref22 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23(_ref21) {
-                    var id, canvas, releaseLock, maskHandler, restoreOutlineVisibility, result;
-                    return regeneratorRuntime.wrap(function _callee23$(_context24) {
-                      while (1) {
-                        switch (_context24.prev = _context24.next) {
-                          case 0:
-                            id = _ref21.id, canvas = _ref21.canvas;
-                            _context24.next = 3;
-                            return (0, _ObjectLock.requestLock)(canvas);
-
-                          case 3:
-                            releaseLock = _context24.sent;
-                            maskHandler = canvas.getMaskHandler();
-                            restoreOutlineVisibility = maskHandler && maskHandler.toggleOutline(false);
-                            _context24.t0 = id;
-                            _context24.next = 9;
-                            return canvas[screenshotFn](fontMapping);
-
-                          case 9:
-                            _context24.t1 = _context24.sent;
-                            result = [_context24.t0, _context24.t1];
-                            restoreOutlineVisibility && restoreOutlineVisibility();
-                            releaseLock();
-                            return _context24.abrupt("return", result);
-
-                          case 14:
-                          case "end":
-                            return _context24.stop();
-                        }
-                      }
-                    }, _callee23);
-                  }));
-
-                  return function (_x27) {
-                    return _ref22.apply(this, arguments);
-                  };
-                }()));
-
-              case 4:
-                return _context25.abrupt("return", _context25.sent.reduce(function (screenShots, _ref23) {
-                  var _ref24 = _slicedToArray(_ref23, 2),
-                      id = _ref24[0],
-                      screenshot = _ref24[1];
-
-                  return _objectSpread(_objectSpread({}, screenShots), {}, _defineProperty({}, id, screenshot));
-                }, {}));
-
-              case 5:
-              case "end":
-                return _context25.stop();
-            }
-          }
-        }, _callee24, this);
-      }));
-
-      function getScreenshots(_x26) {
-        return _getScreenshots.apply(this, arguments);
-      }
-
-      return getScreenshots;
-    }()
-  }, {
-    key: "getScreenshotsOfElements",
-    value: function () {
-      var _getScreenshotsOfElements = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25(fontMapping) {
-        return regeneratorRuntime.wrap(function _callee25$(_context26) {
-          while (1) {
-            switch (_context26.prev = _context26.next) {
-              case 0:
-                _context26.next = 2;
-                return this.getScreenshots(fontMapping, {
-                  screenshotFn: 'getScreenshotsOfElements'
-                });
-
-              case 2:
-                return _context26.abrupt("return", _context26.sent);
-
-              case 3:
-              case "end":
-                return _context26.stop();
-            }
-          }
-        }, _callee25, this);
-      }));
-
-      function getScreenshotsOfElements(_x28) {
-        return _getScreenshotsOfElements.apply(this, arguments);
-      }
-
-      return getScreenshotsOfElements;
-    }()
-    /**
-     * Provides a simple interface to add or remove sample text to the canvas related to the given designAreaIdentifier.
-     * It also provides a function to modify the color amount, it simply clears the canvas and re-adds the sample text
-     * with the planned number of colors.
-     * Note: this function has more notable side effects
-     *  - it modifies the selected design area if the designAreaIdentifier is provided
-     *  - it clears the canvas in the interface methods, so all the previously added items will be removed
-     * @param designAreaIdentifier
-     * @returns {{toggleSampleText: (function(*=)), setColorAmount: (function(*=))}}
-     */
-
-  }, {
-    key: "getSampleCanvasEditorForDesignArea",
-    value: function getSampleCanvasEditorForDesignArea() {
-      var _this11 = this;
-
-      var designAreaIdentifier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      designAreaIdentifier && _ServiceLocator.Services.store.dispatch((0, _Actions3.selectDesignArea)(designAreaIdentifier));
-      var designArea = _ServiceLocator.Services.store.state.designArea.selectedDesignArea;
-      var identifier = designArea.identifier;
-
-      var canvas = this._getCanvas(designArea);
-
-      if (canvas) {
-        var previouslyContainedSampleText = canvas.getLength() > 0;
-
-        var addSampleText = function addSampleText() {
-          var state = _ServiceLocator.Services.store.state;
-          var designAreaData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, identifier);
-          var colorAmount = Math.max((0, _get2["default"])(designAreaData, 'colorAmount', 0), 1);
-          var text = (0, _i18n.t)('calculationWidget.textContent', {
-            colorAmount: colorAmount
-          });
-
-          _ServiceLocator.Services.designer.addText(canvas, text, colorAmount); // eslint-disable-next-line no-console
-
-
-          console.log("Sample text added to canvas: ".concat(identifier));
-        };
-
-        var clearTextObjects = function clearTextObjects() {
-          var objects = canvas.objects.filter(function (obj) {
-            return obj.type === 'Text';
-          });
-          objects.forEach(function (obj) {
-            return obj.remove();
-          });
-        };
-
-        return {
-          toggleSampleText: function toggleSampleText(active) {
-            if (active) {
-              addSampleText();
-            } else {
-              canvas.clear();
-            }
-
-            _this11.updateCanvasData(canvas);
-          },
-          setColorAmount: function setColorAmount(value) {
-            clearTextObjects();
-
-            _this11.setColorAmount(value);
-
-            previouslyContainedSampleText && addSampleText();
-            var imgObjects = canvas.objects.filter(function (obj) {
-              return obj.type !== 'Text';
-            });
-
-            var canvasData = _this11._serializeCanvas(canvas);
-
-            if (imgObjects.length > 0) {
-              canvasData = _this11.calculateObjectPosition(canvas);
-            }
-
-            _this11.setCanvasData(canvasData, identifier);
-          }
-        };
-      }
-    }
-  }, {
-    key: "addSampleImageForDesignAreas",
-    value: function () {
-      var _addSampleImageForDesignAreas = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27(designAreaIdentifiers, active) {
-        var _this12 = this;
-
-        return regeneratorRuntime.wrap(function _callee27$(_context28) {
-          while (1) {
-            switch (_context28.prev = _context28.next) {
-              case 0:
-                _context28.next = 2;
-                return Promise.all(designAreaIdentifiers.map( /*#__PURE__*/function () {
-                  var _ref25 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26(designAreaIdentifier) {
-                    var designArea, canvas, state, imageSrc, imageData, canvasDataJSON, designData, canvasData, objects;
-                    return regeneratorRuntime.wrap(function _callee26$(_context27) {
-                      while (1) {
-                        switch (_context27.prev = _context27.next) {
-                          case 0:
-                            designArea = _this12.getDesignAreaByIdentifier(designAreaIdentifier);
-                            canvas = _this12._getCanvas(designArea);
-                            state = _ServiceLocator.Services.store.state;
-                            imageSrc = _designer_placeholder_logo["default"];
-
-                            if (!active) {
-                              _context27.next = 13;
-                              break;
-                            }
-
-                            imageData = (0, _Modifiers2.createSVGImageData)({
-                              fileName: 'designer_placeholder_logo.svg',
-                              imageUrl: imageSrc,
-                              thumbUrl: imageSrc,
-                              isPlaceHolderImage: true,
-                              galleryImage: false
-                            });
-                            _context27.next = 8;
-                            return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
-                              enlargeImage: true
-                            });
-
-                          case 8:
-                            canvasDataJSON = _this12.calculateObjectPosition(canvas); // eslint-disable-next-line no-console
-
-                            // eslint-disable-next-line no-console
-                            console.log("Sample image added to canvas: ".concat(designAreaIdentifier));
-
-                            _this12.setCanvasData(canvasDataJSON, designAreaIdentifier);
-
-                            _context27.next = 21;
-                            break;
-
-                          case 13:
-                            designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designAreaIdentifier);
-                            canvasData = designData.canvasData;
-
-                            if (canvasData) {
-                              _context27.next = 17;
-                              break;
-                            }
-
-                            return _context27.abrupt("return");
-
-                          case 17:
-                            objects = canvasData ? canvasData.objects.filter(function (obj) {
-                              return obj.type === 'Text';
-                            }) : [];
-
-                            _this12.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
-                              objects: objects
-                            }), designAreaIdentifier);
-
-                            _context27.next = 21;
-                            return _this12.loadCanvasDataFromState([designArea]);
-
-                          case 21:
-                            return _context27.abrupt("return", {
-                              canvas: canvas,
-                              designAreaIdentifier: designAreaIdentifier
-                            });
-
-                          case 22:
-                          case "end":
-                            return _context27.stop();
-                        }
-                      }
-                    }, _callee26);
-                  }));
-
-                  return function (_x31) {
-                    return _ref25.apply(this, arguments);
-                  };
-                }()));
-
-              case 2:
-              case "end":
-                return _context28.stop();
-            }
-          }
-        }, _callee27);
-      }));
-
-      function addSampleImageForDesignAreas(_x29, _x30) {
-        return _addSampleImageForDesignAreas.apply(this, arguments);
-      }
-
-      return addSampleImageForDesignAreas;
-    }()
-  }, {
-    key: "addImageToDesignArea",
-    value: function () {
-      var _addImageToDesignArea = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28(designArea, imageData) {
-        var canvas;
-        return regeneratorRuntime.wrap(function _callee28$(_context29) {
-          while (1) {
-            switch (_context29.prev = _context29.next) {
-              case 0:
-                canvas = this._getCanvas(designArea);
-
-                if (canvas) {
-                  _context29.next = 3;
-                  break;
-                }
-
-                return _context29.abrupt("return", false);
-
-              case 3:
-                _context29.next = 5;
-                return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
-                  enlargeImage: true,
-                  scaleToHalf: false,
-                  autoSelect: false
-                });
-
-              case 5:
-                return _context29.abrupt("return", _context29.sent);
-
-              case 6:
-              case "end":
-                return _context29.stop();
-            }
-          }
-        }, _callee28, this);
-      }));
-
-      function addImageToDesignArea(_x32, _x33) {
-        return _addImageToDesignArea.apply(this, arguments);
-      }
-
-      return addImageToDesignArea;
-    }()
-  }, {
-    key: "calculateObjectPosition",
-    value: function calculateObjectPosition(canvas) {
-      var canvasData = this._serializeCanvas(canvas);
-
-      var textObject = canvasData ? canvasData.objects.find(function (obj) {
-        return obj.type === 'Text';
-      }) : [];
-      var imageObject = canvasData ? canvasData.objects.find(function (obj) {
-        return obj.type === 'Image';
-      }) : [];
-      var canvasTextObject = canvas.objects.find(function (obj) {
-        return obj.uuid === textObject.uuid;
-      });
-      var canvasImageObject = canvas.objects.find(function (obj) {
-        return obj.uuid === imageObject.uuid;
-      });
-
-      if (canvasTextObject && canvasImageObject) {
-        var canvasImageObjectSize = canvasImageObject.getBoundSize();
-        var canvasTextObjectSize = canvasTextObject.getBoundSize();
-        textObject.y = imageObject.y + canvasImageObjectSize.height / 2 + canvasTextObjectSize.height;
-        var objects = [].concat(textObject, imageObject);
-        return _objectSpread(_objectSpread({}, canvasData), {}, {
-          objects: objects
-        });
-      }
-
-      return canvasData;
-    }
-  }, {
-    key: "applyDesignAreaPreSelection",
-    value: function applyDesignAreaPreSelection(filteredDesignAreas) {
-      var preSelectionDesignAreaIdentifier = (0, _get2["default"])((0, _configuration.getConf)('designerPreSelection', {}), 'designAreas[0].identifier');
-
-      if (preSelectionDesignAreaIdentifier) {
-        this.selectDesignArea(preSelectionDesignAreaIdentifier);
-      }
-
-      var _iterator10 = _createForOfIteratorHelper(filteredDesignAreas),
-          _step10;
-
-      try {
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-          var area = _step10.value;
-          var selectedDesignArea = (0, _Selectors.getDesignAreaPreSelection)(area.identifier);
-
-          if (selectedDesignArea.identifier) {
-            var preSelectionColorAmount = +(0, _get2["default"])(selectedDesignArea, 'colorAmount', 1);
-
-            if (!isNaN(preSelectionColorAmount)) {
-              var sampleCanvasEditor = _ServiceLocator.Services.designData.getSampleCanvasEditorForDesignArea(area.identifier);
-
-              sampleCanvasEditor.setColorAmount(preSelectionColorAmount);
-              sampleCanvasEditor.toggleSampleText(true);
-            }
-          }
-        }
-      } catch (err) {
-        _iterator10.e(err);
-      } finally {
-        _iterator10.f();
-      }
-    }
-  }, {
-    key: "changeAllColorsNeeded",
-    value: function changeAllColorsNeeded() {
-      var _getSelectedDesignAre3 = (0, _Selectors.getSelectedDesignAreaProperties)(_ServiceLocator.Services.store.state),
-          maxColorAmount = _getSelectedDesignAre3.maxColorAmount,
-          hasEngravingBackgroundColors = _getSelectedDesignAre3.hasEngravingBackgroundColors;
-
-      return maxColorAmount === 1 && !hasEngravingBackgroundColors;
-    }
-  }, {
-    key: "setImageAndTextColor",
-    value: function () {
-      var _setImageAndTextColor = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29(color) {
-        var designArea, designData, objects, hasmultipleObjects, canvas, isImageSelected, selectedImageIdentifier, _iterator11, _step11, object, image, operations;
-
-        return regeneratorRuntime.wrap(function _callee29$(_context30) {
-          while (1) {
-            switch (_context30.prev = _context30.next) {
-              case 0:
-                if (this.changeAllColorsNeeded()) {
-                  _context30.next = 2;
-                  break;
-                }
-
-                return _context30.abrupt("return");
-
-              case 2:
-                designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
-                designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(_ServiceLocator.Services.store.state, designArea.identifier);
-                objects = (0, _get2["default"])(designData, 'canvasData.objects', []);
-                hasmultipleObjects = objects.length > 1;
-
-                if (hasmultipleObjects) {
-                  _context30.next = 8;
-                  break;
-                }
-
-                return _context30.abrupt("return");
-
-              case 8:
-                canvas = this._getCanvas(designArea);
-                isImageSelected = canvas.selectedObject && canvas.selectedObject.type === 'Image';
-                selectedImageIdentifier = isImageSelected ? (0, _get2["default"])(_ServiceLocator.Services.store.state, 'imageGallery.selectedImage.identifier', null) : null;
-
-                _ServiceLocator.Services.store.dispatch((0, _Actions.setDesignAreaTextsColor)(designArea.identifier, color));
-
-                _iterator11 = _createForOfIteratorHelper(objects);
-                _context30.prev = 13;
-
-                _iterator11.s();
-
-              case 15:
-                if ((_step11 = _iterator11.n()).done) {
-                  _context30.next = 24;
-                  break;
-                }
-
-                object = _step11.value;
-
-                if (!(object.type === 'Image' && object.imageData.identifier !== selectedImageIdentifier)) {
-                  _context30.next = 22;
-                  break;
-                }
-
-                image = (0, _Selectors2.getUserImage)(_ServiceLocator.Services.store.state, object.imageData.identifier);
-                operations = (0, _Modifiers.setColorOnOperations)(image.operations, color);
-                _context30.next = 22;
-                return _ServiceLocator.Services.designData.editFile(operations, image);
-
-              case 22:
-                _context30.next = 15;
-                break;
-
-              case 24:
-                _context30.next = 29;
-                break;
-
-              case 26:
-                _context30.prev = 26;
-                _context30.t0 = _context30["catch"](13);
-
-                _iterator11.e(_context30.t0);
-
-              case 29:
-                _context30.prev = 29;
-
-                _iterator11.f();
-
-                return _context30.finish(29);
-
-              case 32:
-                _context30.next = 34;
-                return this.updateCanvasDataFromState([designArea]);
-
-              case 34:
-              case "end":
-                return _context30.stop();
-            }
-          }
-        }, _callee29, this, [[13, 26, 29, 32]]);
-      }));
-
-      function setImageAndTextColor(_x34) {
-        return _setImageAndTextColor.apply(this, arguments);
-      }
-
-      return setImageAndTextColor;
-    }()
-  }, {
-    key: "getGalleryImageColors",
-    value: function () {
-      var _getGalleryImageColors = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30(url) {
-        var svgContent, designProductionMethod;
-        return regeneratorRuntime.wrap(function _callee30$(_context31) {
-          while (1) {
-            switch (_context31.prev = _context31.next) {
-              case 0:
-                _context31.next = 2;
-                return getSvgContent(url);
-
-              case 2:
-                svgContent = _context31.sent;
-                designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-                return _context31.abrupt("return", (0, _Modifiers.createVectorizeColorsMap)({}, getSvgColors(svgContent, designProductionMethod)));
-
-              case 5:
-              case "end":
-                return _context31.stop();
-            }
-          }
-        }, _callee30);
-      }));
-
-      function getGalleryImageColors(_x35) {
-        return _getGalleryImageColors.apply(this, arguments);
-      }
-
-      return getGalleryImageColors;
-    }()
-  }, {
-    key: "updateDesignAreaImagesWithSelectedImageData",
-    value: function updateDesignAreaImagesWithSelectedImageData() {
-      var originalImageIdentifier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      var imageIdentifier = (0, _get2["default"])(_ServiceLocator.Services.store.state, 'imageGallery.selectedImage.identifier');
-      var newImage = (0, _find["default"])(_ServiceLocator.Services.store.state.imageGallery.userImages, {
-        identifier: imageIdentifier
-      });
-      this.removeDesignAreaPlaceholders(false, true);
-      newImage && _ServiceLocator.Services.store.dispatch((0, _Actions.updateImageData)(newImage, originalImageIdentifier));
-    }
-    /**
-     * Calls editFile in a queued way to make sure the current image data state is not updated simultaneously
-     * by other editFileQueued calls
-     * Note: it works only with editFileQueued calls (does not guard against calling editFile directly)
-     */
-
-  }, {
-    key: "editFileQueued",
-    value: function () {
-      var _editFileQueued = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee31(operations, image) {
-        var options,
-            releaseLock,
-            _args32 = arguments;
-        return regeneratorRuntime.wrap(function _callee31$(_context32) {
-          while (1) {
-            switch (_context32.prev = _context32.next) {
-              case 0:
-                options = _args32.length > 2 && _args32[2] !== undefined ? _args32[2] : {};
-                _context32.next = 3;
-                return (0, _ObjectLock.requestLock)(this);
-
-              case 3:
-                releaseLock = _context32.sent;
-                _context32.prev = 4;
-                _context32.next = 7;
-                return this.editFile(operations, image, options);
-
-              case 7:
-                return _context32.abrupt("return", _context32.sent);
-
-              case 8:
-                _context32.prev = 8;
-                releaseLock();
-                return _context32.finish(8);
-
-              case 11:
-              case "end":
-                return _context32.stop();
-            }
-          }
-        }, _callee31, this, [[4,, 8, 11]]);
-      }));
-
-      function editFileQueued(_x36, _x37) {
-        return _editFileQueued.apply(this, arguments);
-      }
-
-      return editFileQueued;
-    }()
-  }, {
-    key: "editFile",
-    value: function () {
-      var _editFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee32(operations, image) {
-        var options,
-            _options$immediateCom,
-            immediateCommit,
-            _options$designProduc,
-            designProductionMethod,
-            _options$addMode,
-            addMode,
-            displayColorPreview,
-            imageIdentifier,
-            preview,
-            compatibilityInfoHash,
-            imageIsCompatible,
-            operationsMatching,
-            colorPreviewRequired,
-            imageDataPatch,
-            _getImageUsageInfo,
-            designAreas,
-            count,
-            createCopy,
-            editData,
-            currentEditData,
-            isBackendNeeded,
-            selectedImage,
-            _designProductionMethod,
-            svgContent,
-            svgColors,
-            vectorizeColorsMap,
-            thresholdChanged,
-            maxPotentialColorAmount,
-            vectorizeOriginalColorsMap,
-            numberOfAggregatedColors,
-            numberOfColorsToRemove,
-            _args33 = arguments;
-
-        return regeneratorRuntime.wrap(function _callee32$(_context33) {
-          while (1) {
-            switch (_context33.prev = _context33.next) {
-              case 0:
-                options = _args33.length > 2 && _args33[2] !== undefined ? _args33[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;
-                imageIdentifier = image.identifier;
-                preview = image.preview;
-                compatibilityInfoHash = (0, _Selectors.getDesignAreaImageCompatibilityInfo)(designProductionMethod);
-                imageIsCompatible = (0, _Selectors.areHashesCompatible)(image.compatibilityInfoHash, compatibilityInfoHash);
-                operationsMatching = (0, _Modifiers.compareOperations)(image.operations, operations);
-                colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(designProductionMethod);
-                imageDataPatch = _objectSpread({
-                  compatibilityInfoHash: compatibilityInfoHash,
-                  colorPreviewRequired: colorPreviewRequired
-                }, displayColorPreview !== undefined && {
-                  displayColorPreview: displayColorPreview
-                });
-
-                if (!(!operationsMatching || !imageIsCompatible)) {
-                  _context33.next = 29;
-                  break;
-                }
-
-                if (!image.operations) {
-                  operations.vectorizeThreshold = null;
-                }
-
-                operations = makeOperationsCompatible(operations, compatibilityInfoHash, designProductionMethod.colorPalettes);
-
-                if (!image.gallery) {
-                  _context33.next = 17;
-                  break;
-                }
-
-                operations = _objectSpread(_objectSpread({}, operations || {}), {}, {
-                  vectorizeColorsMap: operations.vectorizeColorsMap
-                });
-                _context33.next = 29;
-                break;
-
-              case 17:
-                _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);
-                currentEditData = (0, _Modifiers.getEditDataFromOperations)(image.fileName, image.operations || {}, designProductionMethod);
-                isBackendNeeded = createCopy || !(0, _isEqual["default"])(editData, currentEditData);
-                _context33.t0 = isBackendNeeded;
-
-                if (!_context33.t0) {
-                  _context33.next = 26;
-                  break;
-                }
-
-                _context33.next = 26;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions2.editImage)(_objectSpread(_objectSpread({}, editData), {}, {
-                  createCopy: createCopy
-                }), _objectSpread(_objectSpread({}, imageDataPatch), {}, {
-                  operations: operations,
-                  identifier: imageIdentifier,
-                  incomplete: true
-                }), {
-                  immediateCommit: immediateCommit
-                }));
-
-              case 26:
-                selectedImage = _ServiceLocator.Services.store.state.imageGallery.selectedImage;
-                preview = (0, _get2["default"])(selectedImage, 'preview');
-                imageIdentifier = (0, _get2["default"])(selectedImage, 'identifier');
-
-              case 29:
-                if (!(!preview || !preview.url)) {
-                  _context33.next = 31;
-                  break;
-                }
-
-                throw new Error('Preview image url is not specified!');
-
-              case 31:
-                if (!(0, _Selectors2.isEditableVectorImage)(preview)) {
-                  _context33.next = 40;
-                  break;
-                }
-
-                _designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-                _context33.next = 35;
-                return getSvgContent(preview.url, false, !operationsMatching);
-
-              case 35:
-                svgContent = _context33.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
-
-                if (!operations.vectorizeThreshold) {
-                  maxPotentialColorAmount = +(0, _get2["default"])(preview, 'additionalData.maxPotentialColorAmount') || svgColors.length;
-                  operations = _objectSpread(_objectSpread({}, operations), {}, {
-                    vectorizeMaxColorAmount: maxPotentialColorAmount,
-                    vectorizeThreshold: (0, _Selectors5.getAggregatedColorCount)(vectorizeColorsMap)
-                  });
-                  vectorizeOriginalColorsMap = (0, _Modifiers.createVectorizeColorsMap)({}, svgColors);
-                  operations = _objectSpread(_objectSpread({}, operations), {}, {
-                    vectorizeOriginalColorsMap: vectorizeOriginalColorsMap,
-                    vectorizeColorsMap: vectorizeColorsMap
-                  });
-                } else if (thresholdChanged) {
-                  operations.vectorizeColorsMap = (0, _ImageEditUtils.expandVectorizeColorsMap)(vectorizeColorsMap, _designProductionMethod.colorPalettes, operations.vectorizeThreshold); // gallery images are not edited by the api, colors have to be reduced programmatically
-
-                  if (image.gallery) {
-                    numberOfAggregatedColors = (0, _Selectors5.getAggregatedColorCount)(operations.vectorizeColorsMap);
-                    numberOfColorsToRemove = numberOfAggregatedColors - operations.vectorizeThreshold;
-
-                    if (numberOfColorsToRemove > 0) {
-                      operations.vectorizeColorsMap = (0, _Modifiers.reduceNumberOfDistinctColorsBy)(operations.vectorizeColorsMap, numberOfColorsToRemove);
-                    }
-                  }
-                } else {
-                  operations.vectorizeColorsMap = vectorizeColorsMap;
-                }
-
-              case 40:
-                _ServiceLocator.Services.store.dispatch((0, _Actions2.updateImage)(imageIdentifier, _objectSpread(_objectSpread({
-                  operations: operations
-                }, imageDataPatch), {}, {
-                  incomplete: false
-                }), immediateCommit));
-
-                if (immediateCommit) {
-                  this.updateDesignAreaImagesWithSelectedImageData(image.identifier);
-                }
-
-                return _context33.abrupt("return", {
-                  vectorizeColorsMap: operations.vectorizeColorsMap,
-                  vectorizeThreshold: operations.vectorizeThreshold,
-                  vectorizeMaxColorAmount: operations.vectorizeMaxColorAmount,
-                  vectorizeOriginalColorsMap: operations.vectorizeOriginalColorsMap
-                });
-
-              case 43:
-              case "end":
-                return _context33.stop();
-            }
-          }
-        }, _callee32, this);
-      }));
-
-      function editFile(_x38, _x39) {
-        return _editFile.apply(this, arguments);
-      }
-
-      return editFile;
-    }()
-  }, {
-    key: "resetEditedFile",
-    value: function () {
-      var _resetEditedFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33(image) {
-        var state, _image, operations, vectorizeColorsMap, resetOperations, designProductionMethod;
-
-        return regeneratorRuntime.wrap(function _callee33$(_context34) {
-          while (1) {
-            switch (_context34.prev = _context34.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-
-                if (!image) {
-                  image = state.imageGallery.selectedImage;
-                }
-
-                _image = image, operations = _image.operations;
-                vectorizeColorsMap = _extends({}, operations.vectorizeOriginalColorsMap);
-
-                if (image.gallery) {
-                  resetOperations = _objectSpread(_objectSpread({}, operations), {}, {
-                    vectorizeColorsMap: vectorizeColorsMap
-                  });
-                } else {
-                  designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(state);
-                  resetOperations = _objectSpread(_objectSpread({}, operations), !designProductionMethod.options.vectorsRequired ? (0, _Modifiers.removeVectorizeFromOperations)(operations) : {
-                    vectorizeColorsMap: vectorizeColorsMap,
-                    vectorizeThreshold: null
-                  });
-                }
-
-                _context34.next = 7;
-                return this.editFileQueued(resetOperations, image);
-
-              case 7:
-                return _context34.abrupt("return", _context34.sent);
-
-              case 8:
-              case "end":
-                return _context34.stop();
-            }
-          }
-        }, _callee33, this);
-      }));
-
-      function resetEditedFile(_x40) {
-        return _resetEditedFile.apply(this, arguments);
-      }
-
-      return resetEditedFile;
-    }()
-  }, {
-    key: "commitChanges",
-    value: function commitChanges() {
-      _ServiceLocator.Services.store.dispatch((0, _Actions2.commitChanges)());
-    }
-  }, {
-    key: "clearSelectionOnCurrentDesignArea",
-    value: function clearSelectionOnCurrentDesignArea() {
-      var designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
-
-      var canvas = this._getCanvas(designArea);
-
-      if (canvas) {
-        canvas.clearSelection();
-      }
-    }
-  }]);
-
-  return DesignDataService;
-}();
-
-exports["default"] = DesignDataService;
-
-_defineProperty(DesignDataService, "serviceName", 'DesignDataService');