@configuratorware/configurator-frontendgui 1.28.4 → 1.29.0

package/App/Services/DesignDataService.js

@@ -0,0 +1,3249 @@
+"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');