@configuratorware/configurator-frontendgui 1.41.2 → 1.42.2

package/App/Services/DesignDataService.js

@@ -1,104 +1,62 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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;
-
+exports.updateColorAmountOnDesignProductionMethodChange = exports.rgbStrToHex = exports.makeOperationsCompatible = exports.isWidget = exports.isTextColorChange = exports.isColorTooBright = exports.getSvgContent = exports.getSvgColors = exports.getRgbValuesFromString = exports.getMissingColorPalettesColors = exports.getColorsDistance = exports.getColorPalettesIndex = exports.getClosestColorPaletteColor = exports["default"] = exports.checkColorUsage = exports.calculateImageBrightness = exports.applySvgContentOperations = exports.EventTypes = 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 _Actions6 = require("../Reducers/ConfigurationMode/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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 _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, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 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 _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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, 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; }
-
+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
@@ -113,19 +71,16 @@ var preloadFonts = function preloadFonts(canvasData) {
     return _FontFaceRepository.FontFaceRepository.collectFromHTML(content);
   }));
 };
-
-var checkColorUsage = function () {
+var checkColorUsage = exports.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;
-
+      maxColorCount = _getSelectedDesignAre.maxColorAmount,
+      designAreaIdentifier = _getSelectedDesignAre.selectedDesignArea.identifier,
+      currentColorCount = _getSelectedDesignAre.colorAmount;
     if (!designAreaIdentifier) {
       return;
     }
-
     var changedObjectColorCount = (0, _Selectors.getColorsFromCanvasData)({
       objects: [changeEvent.target.toObject()]
     }).length;
@@ -134,49 +89,36 @@ var checkColorUsage = function () {
       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) {
+var isTextColorChange = exports.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 getRgbValuesFromString = exports.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);
   });
@@ -186,48 +128,32 @@ var getRgbValuesFromString = function getRgbValuesFromString(str) {
     b: values[2]
   };
 };
-
-exports.getRgbValuesFromString = getRgbValuesFromString;
-
-var rgbStrToHex = function rgbStrToHex(str) {
+var rgbStrToHex = exports.rgbStrToHex = function rgbStrToHex(str) {
   return (0, _Selectors.rgbObjToHex)(getRgbValuesFromString(str));
 };
-
-exports.rgbStrToHex = rgbStrToHex;
-
-var getColorsDistance = function getColorsDistance(color1, color2) {
+var getColorsDistance = exports.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) {
+var isColorTooBright = exports.isColorTooBright = function isColorTooBright(rgbColors) {
   if (!rgbColors) {
     return false;
   }
-
   var red = rgbColors.r,
-      green = rgbColors.g,
-      blue = rgbColors.b;
-
+    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) {
+var calculateImageBrightness = exports.calculateImageBrightness = function calculateImageBrightness(image) {
   if (!image) {
     return;
   }
-
-  var imageUrl = "".concat((0, _configuration.getConf)('network.host')).concat(image.data.thumbnail.url);
+  var imageUrl = image.data && image.data.thumbnail ? "".concat((0, _configuration.getConf)('network.host')).concat(image.data.thumbnail.url) : null;
   var fuzzy = 0.1;
   return new Promise(function (resolve, reject) {
     var downloadedImg = new Image(200, 200);
@@ -241,46 +167,35 @@ var calculateImageBrightness = function calculateImageBrightness(image) {
       var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
       var data = imageData.data;
       var light = 0,
-          dark = 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;
+      image.data && image.data.thumbnail ? image.data.thumbnail.isThumbnailBright = dlDiff + fuzzy > 0 : image.isBright = dlDiff + fuzzy > 0;
       resolve(image);
     }, false);
     downloadedImg.addEventListener('error', reject);
-    downloadedImg.src = imageUrl;
+    downloadedImg.src = imageUrl || image.src;
   });
 };
-
-exports.calculateImageBrightness = calculateImageBrightness;
-
-var getColorPalettesIndex = function getColorPalettesIndex(colorPalettes) {
+var getColorPalettesIndex = exports.getColorPalettesIndex = function getColorPalettesIndex(colorPalettes) {
   var colorPalettesIndexes = [];
-
   var _iterator = _createForOfIteratorHelper(colorPalettes),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var colorPalette = _step.value;
-
       var _iterator2 = _createForOfIteratorHelper(colorPalette.colors),
-          _step2;
-
+        _step2;
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var colorPaletteColor = _step2.value;
@@ -303,24 +218,17 @@ var getColorPalettesIndex = function getColorPalettesIndex(colorPalettes) {
   } finally {
     _iterator.f();
   }
-
   return colorPalettesIndexes;
 };
-
-exports.getColorPalettesIndex = getColorPalettesIndex;
-
-var getClosestColorPaletteColor = function getClosestColorPaletteColor(colorValueObject, colorPalettesIndexes) {
+var getClosestColorPaletteColor = exports.getClosestColorPaletteColor = function getClosestColorPaletteColor(colorValueObject, colorPalettesIndexes) {
   var closestDistance = null;
   var closestColor = null;
-
   var _iterator3 = _createForOfIteratorHelper(colorPalettesIndexes),
-      _step3;
-
+    _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;
@@ -333,36 +241,28 @@ var getClosestColorPaletteColor = function getClosestColorPaletteColor(colorValu
   } finally {
     _iterator3.f();
   }
-
   return closestColor;
 };
-
-exports.getClosestColorPaletteColor = getClosestColorPaletteColor;
-
-var getMissingColorPalettesColors = function getMissingColorPalettesColors(colors, colorPalettes, replaceCustomColors) {
+var getMissingColorPalettesColors = exports.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)
+  });
 
+  // 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;
-
+      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);
@@ -372,19 +272,13 @@ var getMissingColorPalettesColors = function getMissingColorPalettesColors(color
     };
   });
 };
-
-exports.getMissingColorPalettesColors = getMissingColorPalettesColors;
-
-var makeOperationsCompatible = function makeOperationsCompatible(operations, compatibilityInfo, colorPalettes) {
+var makeOperationsCompatible = exports.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;
-
+    _step4;
   try {
     for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
       var missingColor = _step4.value;
@@ -395,45 +289,34 @@ var makeOperationsCompatible = function makeOperationsCompatible(operations, com
   } finally {
     _iterator4.f();
   }
-
   return operations;
 };
-
-exports.makeOperationsCompatible = makeOperationsCompatible;
-
-var getSvgContent = function () {
+var getSvgContent = exports.getSvgContent = function () {
   var svgContentMap = new Map();
   return function getSvgContent(url) {
     var absolute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var forceFetch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var absUrl = absolute ? url : "".concat((0, _configuration.getConf)('network.host')).concat(url);
-
     if (!forceFetch && svgContentMap.has(absUrl)) {
       return svgContentMap.get(absUrl);
     }
-
     try {
-      var promise = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var promise = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
         var result;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.next = 2;
-                return _axios["default"].get(absUrl);
-
-              case 2:
-                result = _context.sent;
-                return _context.abrupt("return", (0, _Transformers.initDefaultColor)(result.data));
-
-              case 4:
-              case "end":
-                return _context.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return _axios["default"].get(absUrl);
+            case 2:
+              result = _context.sent;
+              return _context.abrupt("return", (0, _Transformers.initDefaultColor)(result.data));
+            case 4:
+            case "end":
+              return _context.stop();
           }
         }, _callee);
       }))();
-
       svgContentMap.set(absUrl, promise);
       return promise;
     } catch (e) {
@@ -441,42 +324,32 @@ var getSvgContent = function () {
     }
   };
 }();
-
-exports.getSvgContent = getSvgContent;
-
-var applySvgContentOperations = function applySvgContentOperations(preview, operations, svgContent) {
+var applySvgContentOperations = exports.applySvgContentOperations = function applySvgContentOperations(preview, operations, svgContent) {
   // add missing attributes to svg tag if needed
-  var svgTags = svgContent.match(/<svg(?:(?!>)[\s\S])*>/);
-
+  var svgTags = svgContent.match(/<svg[^>]*>/);
   if (svgTags && svgTags[0]) {
     var svgTag = svgTags[0];
     var percentageHeight = /height=["']\d+%["']/;
     var percentageWidth = /width=["']\d+%["']/;
-
     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 (percentageHeight.test(svgTag)) {
       svgContent = svgContent.replace(percentageHeight, "height=\"".concat(preview.height, "px\""));
     }
-
     if (percentageWidth.test(svgTag)) {
       svgContent = svgContent.replace(percentageWidth, "width=\"".concat(preview.width, "px\""));
     }
-  } // remove doctype if present
-
-
-  svgContent = svgContent.replace(/<!DOCTYPE(?:(?!>)[\s\S])*>/gi, '');
+  }
 
+  // remove doctype if present
+  svgContent = svgContent.replace(/<!DOCTYPE[^>]*>/gi, '');
   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) {
@@ -484,26 +357,18 @@ var applySvgContentOperations = function applySvgContentOperations(preview, oper
       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 getSvgColors = exports.getSvgColors = function getSvgColors(svgContent, designProductionMethod) {
   var colors = svgContent.toLowerCase().match(/#[0-9a-f]{3,6}/g);
   var colorsMap = [];
-
   var _iterator5 = _createForOfIteratorHelper(designProductionMethod.colorPalettes),
-      _step5;
-
+    _step5;
   try {
     for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
       var colorPalette = _step5.value;
-
       var _iterator6 = _createForOfIteratorHelper(colorPalette.colors),
-          _step6;
-
+        _step6;
       try {
         for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
           var color = _step6.value;
@@ -524,45 +389,39 @@ var getSvgColors = function getSvgColors(svgContent, designProductionMethod) {
   } 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
+    });
 
+    // 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
-
+    }
 
+    // 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)
-
+    }
 
+    // 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) {
+var isWidget = exports.isWidget = function isWidget(pathname) {
   return /\/widget\//.test(pathname);
 };
-
-exports.isWidget = isWidget;
-
-var updateColorAmountOnDesignProductionMethodChange = function updateColorAmountOnDesignProductionMethodChange(selectedDesignProductionMethod) {
+var updateColorAmountOnDesignProductionMethodChange = exports.updateColorAmountOnDesignProductionMethodChange = function updateColorAmountOnDesignProductionMethodChange(selectedDesignProductionMethod) {
   var state = _ServiceLocator.Services.store.state;
   var selectedProductionMethod = (0, _Selectors.getDesignProductionMethodByIdentifier)(state, selectedDesignProductionMethod);
   var designAreaData = (0, _Selectors.getDesignDataForSelectedDesignArea)(state);
@@ -571,398 +430,385 @@ var updateColorAmountOnDesignProductionMethodChange = function updateColorAmount
   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 = {
+var EventTypes = exports.EventTypes = {
   DesignAreaListChange: 'DesignDataService/DesignAreaListChange',
   DesignViewListChange: 'DesignDataService/DesignViewListChange'
 };
-exports.EventTypes = EventTypes;
-
-var DesignDataService = /*#__PURE__*/function () {
+var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   function DesignDataService() {
     var _this2 = this;
-
     _classCallCheck(this, DesignDataService);
-
     _defineProperty(this, "observable", new _Observable["default"](this));
-
     _defineProperty(this, "isInPreviewMode", false);
-
+    /**
+     *
+     * @type {function|null}
+     * @private
+     */
     _defineProperty(this, "_loadCanvasData", null);
-
+    /**
+     * A function that returns the canvas object associated to the given design area
+     * @type {function|null}
+     * @private
+     */
     _defineProperty(this, "_getCanvas", null);
-
+    /**
+     *
+     * @type {function|null}
+     * @private
+     */
     _defineProperty(this, "_serializeCanvas", null);
-
+    /**
+     * Use this function to sync debounced canvas change handlers
+     * @type {function|null}
+     * @private
+     */
     _defineProperty(this, "_syncCanvasChange", null);
-
     _defineProperty(this, "_isCanvasDataUpdateEnabled", true);
-
     _defineProperty(this, "handleDesignProductionMethodChangeFromVectorizationToNonVectorization", /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(designProductionMethodIdentifier) {
+      var _ref4 = _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();
-            }
+        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 (_x) {
         return _ref4.apply(this, arguments);
       };
     }());
-
     _defineProperty(this, "handleDesignProductionMethodChangeFromNonVectorizationToVectorization", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(designProductionMethodIdentifier) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(designProductionMethodIdentifier) {
         var state, _getVectorizeForDesig2, currentVectorsRequired, newVectorsRequired, designArea, nonVectorizedImages;
-
-        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);
-                nonVectorizedImages = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier).filter(function (obj) {
-                  return !(0, _get2["default"])(obj, 'imageData.operations.vectorize');
-                });
-
-                if (!(nonVectorizedImages.length === 1 && (!currentVectorsRequired && newVectorsRequired || !(0, _Selectors2.isColorPreviewCompatible)(state, nonVectorizedImages[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();
-            }
+        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);
+              nonVectorizedImages = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier).filter(function (obj) {
+                return !(0, _get2["default"])(obj, 'imageData.operations.vectorize');
+              });
+              if (!(nonVectorizedImages.length === 1 && (!currentVectorsRequired && newVectorsRequired || !(0, _Selectors2.isColorPreviewCompatible)(state, nonVectorizedImages[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 (_x2) {
         return _ref5.apply(this, arguments);
       };
     }());
-
     _defineProperty(this, "handleDesignProductionMethodChangeToMandatoryVectorization", /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(designProductionMethodIdentifier) {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(designProductionMethodIdentifier) {
         var state, _getMandatoryVectoriz, currentVectorsMandatory, newVectorsMandatory, designArea, nonColorizedImages;
-
-        return regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) {
-            switch (_context4.prev = _context4.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                _getMandatoryVectoriz = (0, _Selectors.getMandatoryVectorizationForDesignProductionMethods)(state, designProductionMethodIdentifier), currentVectorsMandatory = _getMandatoryVectoriz.currentVectorsMandatory, newVectorsMandatory = _getMandatoryVectoriz.newVectorsMandatory;
-                designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                nonColorizedImages = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier).filter(function (obj) {
-                  return !(0, _get2["default"])(obj, 'imageData.gallery') && !(0, _get2["default"])(obj, 'imageData.displayColorPreview');
-                });
-
-                if (!(nonColorizedImages.length === 1 && (!currentVectorsMandatory && newVectorsMandatory || !(0, _Selectors2.isColorPreviewCompatible)(state, nonColorizedImages[0].imageData, designProductionMethodIdentifier)))) {
-                  _context4.next = 8;
-                  break;
-                }
-
-                _context4.next = 7;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showSwitchToProductionMethodWithVectorization)());
-
-              case 7:
-                return _context4.abrupt("return", true);
-
-              case 8:
-              case "end":
-                return _context4.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              state = _ServiceLocator.Services.store.state;
+              _getMandatoryVectoriz = (0, _Selectors.getMandatoryVectorizationForDesignProductionMethods)(state, designProductionMethodIdentifier), currentVectorsMandatory = _getMandatoryVectoriz.currentVectorsMandatory, newVectorsMandatory = _getMandatoryVectoriz.newVectorsMandatory;
+              designArea = (0, _Selectors.getSelectedDesignArea)(state);
+              nonColorizedImages = (0, _Selectors.getImagesByDesignArea)(state, designArea.identifier).filter(function (obj) {
+                return !(0, _get2["default"])(obj, 'imageData.gallery') && !(0, _get2["default"])(obj, 'imageData.displayColorPreview');
+              });
+              if (!(nonColorizedImages.length === 1 && (!currentVectorsMandatory && newVectorsMandatory || !(0, _Selectors2.isColorPreviewCompatible)(state, nonColorizedImages[0].imageData, designProductionMethodIdentifier)))) {
+                _context4.next = 8;
+                break;
+              }
+              _context4.next = 7;
+              return _ServiceLocator.Services.store.dispatch((0, _Actions.showSwitchToProductionMethodWithVectorization)());
+            case 7:
+              return _context4.abrupt("return", true);
+            case 8:
+            case "end":
+              return _context4.stop();
           }
         }, _callee4);
       }));
-
       return function (_x3) {
         return _ref6.apply(this, arguments);
       };
     }());
-
     _defineProperty(this, "checkColorUsageForDesignProductionMethod", /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(designProductionMethodIdentifier) {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(designProductionMethodIdentifier) {
         var state, _getSelectedDesignAre2, maxColorAmount, designProductionMethod, newProductionMethod, newMaxColorAmount, currentVectorsRequired, newVectorsRequired, designArea, colorPreviewRequired, canvas, images, missingColorPalettesColors;
-
-        return regeneratorRuntime.wrap(function _callee5$(_context5) {
-          while (1) {
-            switch (_context5.prev = _context5.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                _getSelectedDesignAre2 = (0, _Selectors.getSelectedDesignAreaProperties)(state), maxColorAmount = _getSelectedDesignAre2.maxColorAmount, designProductionMethod = _getSelectedDesignAre2.designProductionMethod;
-                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) || (0, _Selectors.isVectorizedLogoMandatory)(newProductionMethod);
-
-                if (!(newMaxColorAmount !== 0 && newMaxColorAmount < maxColorAmount || !currentVectorsRequired && newVectorsRequired || colorPreviewRequired)) {
-                  _context5.next = 17;
-                  break;
-                }
-
-                canvas = _this2._getCanvas(designArea);
-                images = canvas ? canvas.objects.filter(function (obj) {
-                  if (obj.type !== 'Image') {
-                    return false;
-                  }
-
-                  return !(0, _get2["default"])(obj, 'imageData.operations.vectorize') || !(0, _Selectors2.isColorPreviewCompatible)(state, obj.imageData, designProductionMethodIdentifier);
-                }) : [];
-
-                if (!(images.length > 1)) {
-                  _context5.next = 17;
-                  break;
-                }
-
-                _context5.next = 14;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodRemoveImagesConfirm)());
-
-              case 14:
-                images.forEach(function (object) {
-                  object.remove();
-                });
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              state = _ServiceLocator.Services.store.state;
+              _getSelectedDesignAre2 = (0, _Selectors.getSelectedDesignAreaProperties)(state), maxColorAmount = _getSelectedDesignAre2.maxColorAmount, designProductionMethod = _getSelectedDesignAre2.designProductionMethod;
+              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) || (0, _Selectors.isVectorizedLogoMandatory)(newProductionMethod);
+              if (!(newMaxColorAmount !== 0 && newMaxColorAmount < maxColorAmount || !currentVectorsRequired && newVectorsRequired || colorPreviewRequired)) {
                 _context5.next = 17;
-                return _this2.updateCanvasData(canvas);
-
-              case 17:
-                missingColorPalettesColors = getMissingColorPalettesColors((0, _Selectors.getColorsWithPalette)(state), newProductionMethod.colorPalettes, !currentVectorsRequired && newVectorsRequired);
-
-                if (!missingColorPalettesColors.length) {
-                  _context5.next = 24;
-                  break;
-                }
-
-                if ((0, _Selectors.isColoringDisabled)(state, newProductionMethod.identifier)) {
-                  _context5.next = 24;
-                  break;
+                break;
+              }
+              canvas = _this2._getCanvas(designArea);
+              images = canvas ? canvas.objects.filter(function (obj) {
+                if (obj.type !== 'Image') {
+                  return false;
                 }
-
-                _context5.next = 22;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeColorsConfirm)());
-
-              case 22:
+                return !(0, _get2["default"])(obj, 'imageData.operations.vectorize') || !(0, _Selectors2.isColorPreviewCompatible)(state, obj.imageData, designProductionMethodIdentifier);
+              }) : [];
+              if (!(images.length > 1)) {
+                _context5.next = 17;
+                break;
+              }
+              _context5.next = 14;
+              return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodRemoveImagesConfirm)());
+            case 14:
+              images.forEach(function (object) {
+                object.remove();
+              });
+              _context5.next = 17;
+              return _this2.updateCanvasData(canvas);
+            case 17:
+              missingColorPalettesColors = getMissingColorPalettesColors((0, _Selectors.getColorsWithPalette)(state), newProductionMethod.colorPalettes, !currentVectorsRequired && newVectorsRequired);
+              if (!missingColorPalettesColors.length) {
                 _context5.next = 24;
-                return _this2.replaceSelectedDesignAreaElementsColor(missingColorPalettesColors, newProductionMethod);
-
-              case 24:
-              case "end":
-                return _context5.stop();
-            }
+                break;
+              }
+              if ((0, _Selectors.isColoringDisabled)(state, newProductionMethod.identifier)) {
+                _context5.next = 24;
+                break;
+              }
+              _context5.next = 22;
+              return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeColorsConfirm)());
+            case 22:
+              _context5.next = 24;
+              return _this2.replaceSelectedDesignAreaElementsColor(missingColorPalettesColors, newProductionMethod);
+            case 24:
+            case "end":
+              return _context5.stop();
           }
         }, _callee5);
       }));
-
       return function (_x4) {
         return _ref7.apply(this, arguments);
       };
     }());
-
     _defineProperty(this, "replaceSelectedDesignAreaElementsColor", /*#__PURE__*/function () {
-      var _ref8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(missingColorPalettesColors, designProductionMethod) {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(missingColorPalettesColors, designProductionMethod) {
         var state, designArea, designData, objects, _iterator7, _step7, missingColor;
-
-        return regeneratorRuntime.wrap(function _callee6$(_context6) {
-          while (1) {
-            switch (_context6.prev = _context6.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                designArea = (0, _Selectors.getSelectedDesignArea)(state);
-                designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier);
-                objects = (0, _get2["default"])(designData, 'canvasData.objects', []);
-                _context6.next = 6;
-                return Promise.all(objects.filter(function (_ref9) {
-                  var type = _ref9.type;
-                  return type === 'Image';
-                }).map(function (_ref10) {
-                  var imageData = _ref10.imageData;
-                  return (0, _Selectors2.getUserImage)(state, imageData.identifier);
-                }).filter(function (image, idx, arr) {
-                  return arr.indexOf(image) === idx && // uniq
-                  !(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();
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              state = _ServiceLocator.Services.store.state;
+              designArea = (0, _Selectors.getSelectedDesignArea)(state);
+              designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier);
+              objects = (0, _get2["default"])(designData, 'canvasData.objects', []);
+              _context6.next = 6;
+              return Promise.all(objects.filter(function (_ref9) {
+                var type = _ref9.type;
+                return type === 'Image';
+              }).map(function (_ref10) {
+                var imageData = _ref10.imageData;
+                return (0, _Selectors2.getUserImage)(state, imageData.identifier);
+              }).filter(function (image, idx, arr) {
+                return arr.indexOf(image) === idx &&
+                // uniq
+                !(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));
                 }
-
-                _context6.next = 10;
-                return _this2.loadCanvasDataFromState([designArea]);
-
-              case 10:
-              case "end":
-                return _context6.stop();
-            }
+              } catch (err) {
+                _iterator7.e(err);
+              } finally {
+                _iterator7.f();
+              }
+              _context6.next = 10;
+              return _this2.loadCanvasDataFromState([designArea]);
+            case 10:
+            case "end":
+              return _context6.stop();
           }
         }, _callee6);
       }));
-
       return function (_x5, _x6) {
         return _ref8.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 _ref11 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(filteredDesignAreas, prevDesignAreas) {
+        var _ref11 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(filteredDesignAreas, prevDesignAreas) {
           var initList, areasToLoad;
-          return regeneratorRuntime.wrap(function _callee7$(_context7) {
-            while (1) {
-              switch (_context7.prev = _context7.next) {
-                case 0:
-                  _context7.prev = 0;
-                  _context7.next = 3;
-                  return _this3.initCanvases(filteredDesignAreas, prevDesignAreas);
-
-                case 3:
-                  initList = _context7.sent;
-                  // only the newly initialized canvases has to be loaded
-                  areasToLoad = initList.filter(function (_ref12) {
-                    var isNew = _ref12.isNew;
-                    return isNew;
-                  }).map(function (_ref13) {
-                    var designArea = _ref13.designArea;
-                    return designArea;
-                  }); // the canvas data is there first with the configuration, but since the canvas instances are
-                  // associated with the design areas the data can be loaded only when the design areas are available
-
-                  _context7.t0 = !(0, _Selectors3.isDesignerProductPreviewMode)() && areasToLoad.length;
-
-                  if (!_context7.t0) {
-                    _context7.next = 9;
-                    break;
-                  }
-
+          return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+            while (1) switch (_context7.prev = _context7.next) {
+              case 0:
+                _context7.prev = 0;
+                _context7.next = 3;
+                return _this3.initCanvases(filteredDesignAreas, prevDesignAreas);
+              case 3:
+                initList = _context7.sent;
+                // only the newly initialized canvases has to be loaded
+                areasToLoad = initList.filter(function (_ref12) {
+                  var isNew = _ref12.isNew;
+                  return isNew;
+                }).map(function (_ref13) {
+                  var designArea = _ref13.designArea;
+                  return designArea;
+                }); // the canvas data is there first with the configuration, but since the canvas instances are
+                // associated with the design areas the data can be loaded only when the design areas are available
+                _context7.t0 = !(0, _Selectors3.isDesignerProductPreviewMode)() && areasToLoad.length;
+                if (!_context7.t0) {
                   _context7.next = 9;
-                  return _this3.loadCanvasDataFromState(areasToLoad);
-
-                case 9:
-                  _this3.selectInitialDesignView();
-
-                  _this3.designAreaListChangeListener(filteredDesignAreas, prevDesignAreas);
-
-                  _context7.next = 16;
                   break;
-
-                case 13:
-                  _context7.prev = 13;
-                  _context7.t1 = _context7["catch"](0);
-                  // eslint-disable-next-line no-console
-                  console.error('Error occurred in processing design area list change:', _context7.t1);
-
-                case 16:
-                case "end":
-                  return _context7.stop();
-              }
+                }
+                _context7.next = 9;
+                return _this3.loadCanvasDataFromState(areasToLoad);
+              case 9:
+                _this3.selectInitialDesignView();
+                _this3.designAreaListChangeListener(filteredDesignAreas, prevDesignAreas);
+                _this3.openDesignAreaEditorIfEditingParamIsSet();
+                _context7.next = 17;
+                break;
+              case 14:
+                _context7.prev = 14;
+                _context7.t1 = _context7["catch"](0);
+                // eslint-disable-next-line no-console
+                console.error('Error occurred in processing design area list change:', _context7.t1);
+              case 17:
+              case "end":
+                return _context7.stop();
             }
-          }, _callee7, null, [[0, 13]]);
+          }, _callee7, null, [[0, 14]]);
         }));
-
         return function (_x7, _x8) {
           return _ref11.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,
+      });
+      // 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 (_ref14) {
         var selectedoptionclassification = _ref14.configurator.selectedoptionclassification;
         return selectedoptionclassification;
       }, this.componentChangeHandler.bind(this));
-
       (0, _setupDesigner["default"])(this);
     }
+  }, {
+    key: "openDesignAreaEditorIfEditingParamIsSet",
+    value: function () {
+      var _openDesignAreaEditorIfEditingParamIsSet = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+        var query, isDesignerModeAvailable, selectedMode, viewChangedPromise;
+        return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
+            case 0:
+              if (!this._editingHandlerDone) {
+                _context8.next = 2;
+                break;
+              }
+              return _context8.abrupt("return");
+            case 2:
+              query = new URLSearchParams(location.search);
+              if (query.has('_editing')) {
+                _context8.next = 5;
+                break;
+              }
+              return _context8.abrupt("return");
+            case 5:
+              isDesignerModeAvailable = (0, _get2["default"])(_ServiceLocator.Services.store.state, 'configurationMode.availableModes.designer');
+              if (isDesignerModeAvailable) {
+                _context8.next = 8;
+                break;
+              }
+              return _context8.abrupt("return");
+            case 8:
+              selectedMode = (0, _get2["default"])(_ServiceLocator.Services.store.state, 'configurationMode.selectedMode');
+              if (selectedMode !== 'designer') {
+                _ServiceLocator.Services.store.dispatch((0, _Actions6.selectConfigurationMode)('designer'));
+              }
+              viewChangedPromise = _ServiceLocator.Services.visualization.getViewChangedPromise();
+              if (!viewChangedPromise) {
+                _context8.next = 16;
+                break;
+              }
+              _context8.next = 14;
+              return viewChangedPromise;
+            case 14:
+              this.openDesignAreaEditor();
+              this._editingHandlerDone = true;
+            case 16:
+            case "end":
+              return _context8.stop();
+          }
+        }, _callee8, this);
+      }));
+      function openDesignAreaEditorIfEditingParamIsSet() {
+        return _openDesignAreaEditorIfEditingParamIsSet.apply(this, arguments);
+      }
+      return openDesignAreaEditorIfEditingParamIsSet;
+    }()
   }, {
     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);
       }
@@ -970,13 +816,16 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     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
+      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, {
@@ -984,6 +833,7 @@ var DesignDataService = /*#__PURE__*/function () {
         });
       }
     }
+
     /**
      * 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.
@@ -991,12 +841,12 @@ var DesignDataService = /*#__PURE__*/function () {
      * @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.
@@ -1004,173 +854,153 @@ var DesignDataService = /*#__PURE__*/function () {
      * @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 _callee8(designAreas, prevDesignAreas) {
+      var _initCanvases = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(designAreas, prevDesignAreas) {
         var _this4 = this;
-
         var state;
-        return regeneratorRuntime.wrap(function _callee8$(_context8) {
-          while (1) {
-            switch (_context8.prev = _context8.next) {
-              case 0:
-                // clean up first: remove canvases that are not mapped to any design areas
-                this._removeCanvas && prevDesignAreas.filter(function (prevArea) {
-                  return !designAreas.some(function (area) {
-                    return prevArea.identifier === area.identifier;
-                  });
-                }).forEach(function (prevArea) {
-                  return _this4._removeCanvas(prevArea);
+        return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+          while (1) switch (_context9.prev = _context9.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;
                 });
-                state = _ServiceLocator.Services.store.state;
-                _context8.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 _context8.abrupt("return", _context8.sent);
-
-              case 5:
-              case "end":
-                return _context8.stop();
-            }
+              }).forEach(function (prevArea) {
+                return _this4._removeCanvas(prevArea);
+              });
+              state = _ServiceLocator.Services.store.state;
+              _context9.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
+                });
+                var colorOverlayData = (0, _Selectors.getColorOverlayData)(state, designArea);
+                return _this4._initCanvas && _this4._initCanvas({
+                  designArea: designArea,
+                  prevDesignArea: prevDesignArea,
+                  canvasSize: canvasSize,
+                  maskData: maskData,
+                  colorOverlayData: colorOverlayData
+                });
+              }));
+            case 4:
+              return _context9.abrupt("return", _context9.sent);
+            case 5:
+            case "end":
+              return _context9.stop();
           }
-        }, _callee8, this);
+        }, _callee9, 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 _callee9() {
+      var _updateCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
         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._updateCanvasData, designAreas);
-
-              case 3:
-                return _context9.abrupt("return", _context9.sent);
-
-              case 4:
-              case "end":
-                return _context9.stop();
-            }
+          _args10 = arguments;
+        return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+          while (1) switch (_context10.prev = _context10.next) {
+            case 0:
+              designAreas = _args10.length > 0 && _args10[0] !== undefined ? _args10[0] : this.getDesignAreas();
+              _context10.next = 3;
+              return this.syncCanvases(this._updateCanvasData, designAreas);
+            case 3:
+              return _context10.abrupt("return", _context10.sent);
+            case 4:
+            case "end":
+              return _context10.stop();
           }
-        }, _callee9, this);
+        }, _callee10, 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 _callee10() {
+      var _loadCanvasDataFromState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
         var designAreas,
-            _args10 = arguments;
-        return regeneratorRuntime.wrap(function _callee10$(_context10) {
-          while (1) {
-            switch (_context10.prev = _context10.next) {
-              case 0:
-                designAreas = _args10.length > 0 && _args10[0] !== undefined ? _args10[0] : this.getDesignAreas();
-                _context10.next = 3;
-                return this.syncCanvases(this._loadCanvasData, designAreas);
-
-              case 3:
-                return _context10.abrupt("return", _context10.sent);
-
-              case 4:
-              case "end":
-                return _context10.stop();
-            }
+          _args11 = arguments;
+        return _regeneratorRuntime().wrap(function _callee11$(_context11) {
+          while (1) switch (_context11.prev = _context11.next) {
+            case 0:
+              designAreas = _args11.length > 0 && _args11[0] !== undefined ? _args11[0] : this.getDesignAreas();
+              _context11.next = 3;
+              return this.syncCanvases(this._loadCanvasData, designAreas);
+            case 3:
+              return _context11.abrupt("return", _context11.sent);
+            case 4:
+            case "end":
+              return _context11.stop();
           }
-        }, _callee10, this);
+        }, _callee11, this);
       }));
-
       function loadCanvasDataFromState() {
         return _loadCanvasDataFromState.apply(this, arguments);
       }
-
       return loadCanvasDataFromState;
     }()
     /**
@@ -1180,72 +1010,57 @@ var DesignDataService = /*#__PURE__*/function () {
      * @param {array} designAreas
      * @return {Promise<void>}
      */
-
   }, {
     key: "syncCanvases",
     value: function () {
-      var _syncCanvases = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(updateFn, designAreas) {
+      var _syncCanvases = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee13(updateFn, designAreas) {
         var _this5 = this;
-
         var state;
-        return regeneratorRuntime.wrap(function _callee12$(_context12) {
-          while (1) {
-            switch (_context12.prev = _context12.next) {
-              case 0:
-                state = _ServiceLocator.Services.store.state;
-                _context12.next = 3;
-                return Promise.all(designAreas.map( /*#__PURE__*/function () {
-                  var _ref15 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(designArea) {
-                    var designData, canvasData, canvasSize;
-                    return regeneratorRuntime.wrap(function _callee11$(_context11) {
-                      while (1) {
-                        switch (_context11.prev = _context11.next) {
-                          case 0:
-                            designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier);
-                            canvasData = (0, _get2["default"])(designData, 'canvasData');
-
-                            if (!canvasData) {
-                              _context11.next = 7;
-                              break;
-                            }
-
-                            _context11.next = 5;
-                            return preloadFonts(canvasData);
-
-                          case 5:
-                            canvasSize = (0, _Selectors.getCanvasSizeFromDesignArea)(state, designArea);
-                            return _context11.abrupt("return", updateFn && updateFn(canvasData, designArea, canvasSize));
-
-                          case 7:
-                          case "end":
-                            return _context11.stop();
+        return _regeneratorRuntime().wrap(function _callee13$(_context13) {
+          while (1) switch (_context13.prev = _context13.next) {
+            case 0:
+              state = _ServiceLocator.Services.store.state;
+              _context13.next = 3;
+              return Promise.all(designAreas.map( /*#__PURE__*/function () {
+                var _ref15 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12(designArea) {
+                  var designData, canvasData, canvasSize;
+                  return _regeneratorRuntime().wrap(function _callee12$(_context12) {
+                    while (1) switch (_context12.prev = _context12.next) {
+                      case 0:
+                        designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designArea.identifier);
+                        canvasData = (0, _get2["default"])(designData, 'canvasData');
+                        if (!canvasData) {
+                          _context12.next = 7;
+                          break;
                         }
-                      }
-                    }, _callee11);
-                  }));
-
-                  return function (_x13) {
-                    return _ref15.apply(this, arguments);
-                  };
-                }()));
-
-              case 3:
-                window.setTimeout(function () {
-                  _this5.updateVisualization();
-                }, 100);
-
-              case 4:
-              case "end":
-                return _context12.stop();
-            }
+                        _context12.next = 5;
+                        return preloadFonts(canvasData);
+                      case 5:
+                        canvasSize = (0, _Selectors.getCanvasSizeFromDesignArea)(state, designArea);
+                        return _context12.abrupt("return", updateFn && updateFn(canvasData, designArea, canvasSize));
+                      case 7:
+                      case "end":
+                        return _context12.stop();
+                    }
+                  }, _callee12);
+                }));
+                return function (_x13) {
+                  return _ref15.apply(this, arguments);
+                };
+              }()));
+            case 3:
+              window.setTimeout(function () {
+                _this5.updateVisualization();
+              }, 100);
+            case 4:
+            case "end":
+              return _context13.stop();
           }
-        }, _callee12);
+        }, _callee13);
       }));
-
       function syncCanvases(_x11, _x12) {
         return _syncCanvases.apply(this, arguments);
       }
-
       return syncCanvases;
     }()
   }, {
@@ -1268,11 +1083,9 @@ var DesignDataService = /*#__PURE__*/function () {
     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;
       }) : [];
@@ -1288,7 +1101,6 @@ var DesignDataService = /*#__PURE__*/function () {
       if (filteredDesignAreas.length && !prevDesignAreas.length) {
         this.applyDesignAreaPreSelection(filteredDesignAreas);
       }
-
       _ServiceLocator.Services.visualization.updateDesignAreaList(filteredDesignAreas);
     }
   }, {
@@ -1299,84 +1111,65 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "updateCanvasData",
     value: function () {
-      var _updateCanvasData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(canvas, eventData) {
+      var _updateCanvasData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee14(canvas, eventData) {
         var canvasDataJSON, showAlert, _getDesignDataForSele, canvasData;
-
-        return regeneratorRuntime.wrap(function _callee13$(_context13) {
-          while (1) {
-            switch (_context13.prev = _context13.next) {
-              case 0:
-                if (this._serializeCanvas) {
-                  _context13.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))) {
-                  _context13.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 _context13.abrupt("return");
-
-              case 9:
-                this.setCanvasData(canvasDataJSON);
-
-              case 10:
-              case "end":
-                return _context13.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee14$(_context14) {
+          while (1) switch (_context14.prev = _context14.next) {
+            case 0:
+              if (this._serializeCanvas) {
+                _context14.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))) {
+                _context14.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 _context14.abrupt("return");
+            case 9:
+              this.setCanvasData(canvasDataJSON);
+            case 10:
+            case "end":
+              return _context14.stop();
           }
-        }, _callee13, this);
+        }, _callee14, this);
       }));
-
       function updateCanvasData(_x14, _x15) {
         return _updateCanvasData.apply(this, arguments);
       }
-
       return updateCanvasData;
     }()
   }, {
     key: "createCanvasChangeListener",
     value: function createCanvasChangeListener(_ref17) {
       var _this6 = this;
-
       var syncCanvasChange = _ref17.syncCanvasChange;
       this._syncCanvasChange = syncCanvasChange;
-      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
-        var _args14 = arguments;
-        return regeneratorRuntime.wrap(function _callee14$(_context14) {
-          while (1) {
-            switch (_context14.prev = _context14.next) {
-              case 0:
-                if (!_this6._isCanvasDataUpdateEnabled) {
-                  _context14.next = 3;
-                  break;
-                }
-
-                _context14.next = 3;
-                return _this6.updateCanvasData.apply(_this6, _args14);
-
-              case 3:
-              case "end":
-                return _context14.stop();
-            }
+      return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+        var _args15 = arguments;
+        return _regeneratorRuntime().wrap(function _callee15$(_context15) {
+          while (1) switch (_context15.prev = _context15.next) {
+            case 0:
+              if (!_this6._isCanvasDataUpdateEnabled) {
+                _context15.next = 3;
+                break;
+              }
+              _context15.next = 3;
+              return _this6.updateCanvasData.apply(_this6, _args15);
+            case 3:
+            case "end":
+              return _context15.stop();
           }
-        }, _callee14);
+        }, _callee15);
       }));
     }
   }, {
@@ -1390,12 +1183,12 @@ var DesignDataService = /*#__PURE__*/function () {
       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) {
@@ -1418,7 +1211,6 @@ var DesignDataService = /*#__PURE__*/function () {
     key: "getDesignAreaCanvases",
     value: function getDesignAreaCanvases() {
       var _this7 = this;
-
       return this.getDesignAreas().map(function (designArea) {
         return {
           designArea: designArea,
@@ -1431,13 +1223,11 @@ var DesignDataService = /*#__PURE__*/function () {
     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;
-
+            canvasData = _get.canvasData;
           if (canvasData) {
             var objects = canvasData.objects.filter(function (obj) {
               if (!(0, _Selectors5.isPlaceholderObject)(obj)) {
@@ -1454,7 +1244,6 @@ var DesignDataService = /*#__PURE__*/function () {
           }
         });
       }
-
       return updatedConfiguration;
     }
   }, {
@@ -1465,30 +1254,25 @@ var DesignDataService = /*#__PURE__*/function () {
       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;
-
+        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
+      });
 
+      // replace objects and sync canvas if something was removed
       if (objects.length !== canvasData.objects.length) {
         this.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
           objects: objects
@@ -1500,9 +1284,7 @@ var DesignDataService = /*#__PURE__*/function () {
     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();
       }
@@ -1517,21 +1299,17 @@ var DesignDataService = /*#__PURE__*/function () {
     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;
     }
   }, {
@@ -1544,7 +1322,6 @@ var DesignDataService = /*#__PURE__*/function () {
     key: "selectFirstDesignArea",
     value: function selectFirstDesignArea() {
       var firstDesignAreaIdentifier = (0, _get2["default"])(_ServiceLocator.Services.store.state, 'designArea.filteredDesignAreas[0].identifier');
-
       if (firstDesignAreaIdentifier) {
         this.selectDesignArea(firstDesignAreaIdentifier);
       } else {
@@ -1556,25 +1333,20 @@ var DesignDataService = /*#__PURE__*/function () {
     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
+      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 {
@@ -1586,277 +1358,219 @@ var DesignDataService = /*#__PURE__*/function () {
     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();
 
-        _ServiceLocator.Services.designData.clearSelectionOnCurrentDesignArea(); // the canvases should be drawn on the textures to see the changes that were made in the editor
-
-
+        // 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
+      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
+      }
+
+      // 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 _callee15(identifier) {
+      var _vectorizeSingleImageAndShowEditDialog = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16(identifier) {
         var showImageEditDialog, state, designArea, canvas, images, firstNonVectorizedImage, operations, imageData, imageToSelect;
-        return regeneratorRuntime.wrap(function _callee15$(_context15) {
-          while (1) {
-            switch (_context15.prev = _context15.next) {
-              case 0:
-                _context15.next = 2;
-                return this.handleDesignProductionMethodChangeFromNonVectorizationToVectorization(identifier);
-
-              case 2:
-                _context15.t0 = _context15.sent;
-
-                if (_context15.t0) {
-                  _context15.next = 7;
-                  break;
-                }
-
-                _context15.next = 6;
-                return this.handleDesignProductionMethodChangeToMandatoryVectorization(identifier);
-
-              case 6:
-                _context15.t0 = _context15.sent;
-
-              case 7:
-                showImageEditDialog = _context15.t0;
-
-                if (!showImageEditDialog) {
-                  _context15.next = 29;
-                  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);
-                firstNonVectorizedImage = images.find(function (obj) {
-                  return !(0, _get2["default"])(obj, 'imageData.gallery') && (!(0, _get2["default"])(obj, 'imageData.operations.vectorize') || !(0, _get2["default"])(obj, 'imageData.displayColorPreview'));
-                });
-                _context15.prev = 15;
-                operations = _objectSpread(_objectSpread({}, firstNonVectorizedImage.imageData.operations), {}, {
-                  vectorize: true
-                });
-                imageData = firstNonVectorizedImage.imageData; //returing if placeHolderImage, from executing edit operations
-
-                if (!imageData.isPlaceHolderImage) {
-                  _context15.next = 20;
-                  break;
-                }
-
-                return _context15.abrupt("return");
-
-              case 20:
-                _context15.next = 22;
-                return _ServiceLocator.Services.designData.editFile(operations, imageData, {
-                  immediateCommit: true
-                });
-
-              case 22:
-                imageToSelect = canvas.objects.filter(function (object) {
-                  return object.type === 'Image';
-                }).find(function (obj) {
-                  return obj._imageData.identifier === imageData.identifier;
-                });
-                imageToSelect.selected = true;
-                _context15.next = 26;
-                return _ServiceLocator.Services.designer.openImageEditDialog(firstNonVectorizedImage.imageData.identifier, canvas, {
-                  placeholderImageUpdate: false,
-                  submitOnExitClick: true
-                });
-
-              case 26:
-                _context15.prev = 26;
-
-                _ServiceLocator.Services.ui.hide('globalLoader');
-
-                return _context15.finish(26);
-
-              case 29:
-              case "end":
-                return _context15.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee16$(_context16) {
+          while (1) switch (_context16.prev = _context16.next) {
+            case 0:
+              _context16.next = 2;
+              return this.handleDesignProductionMethodChangeFromNonVectorizationToVectorization(identifier);
+            case 2:
+              _context16.t0 = _context16.sent;
+              if (_context16.t0) {
+                _context16.next = 7;
+                break;
+              }
+              _context16.next = 6;
+              return this.handleDesignProductionMethodChangeToMandatoryVectorization(identifier);
+            case 6:
+              _context16.t0 = _context16.sent;
+            case 7:
+              showImageEditDialog = _context16.t0;
+              if (!showImageEditDialog) {
+                _context16.next = 29;
+                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);
+              firstNonVectorizedImage = images.find(function (obj) {
+                return !(0, _get2["default"])(obj, 'imageData.gallery') && (!(0, _get2["default"])(obj, 'imageData.operations.vectorize') || !(0, _get2["default"])(obj, 'imageData.displayColorPreview'));
+              });
+              _context16.prev = 15;
+              operations = _objectSpread(_objectSpread({}, firstNonVectorizedImage.imageData.operations), {}, {
+                vectorize: true
+              });
+              imageData = firstNonVectorizedImage.imageData; //returing if placeHolderImage, from executing edit operations
+              if (!imageData.isPlaceHolderImage) {
+                _context16.next = 20;
+                break;
+              }
+              return _context16.abrupt("return");
+            case 20:
+              _context16.next = 22;
+              return _ServiceLocator.Services.designData.editFile(operations, imageData, {
+                immediateCommit: true
+              });
+            case 22:
+              imageToSelect = canvas.objects.filter(function (object) {
+                return object.type === 'Image';
+              }).find(function (obj) {
+                return obj._imageData.identifier === imageData.identifier;
+              });
+              imageToSelect.selected = true;
+              _context16.next = 26;
+              return _ServiceLocator.Services.designer.openImageEditDialog(firstNonVectorizedImage.imageData.identifier, canvas, {
+                placeholderImageUpdate: false,
+                submitOnExitClick: true
+              });
+            case 26:
+              _context16.prev = 26;
+              _ServiceLocator.Services.ui.hide('globalLoader');
+              return _context16.finish(26);
+            case 29:
+            case "end":
+              return _context16.stop();
           }
-        }, _callee15, this, [[15,, 26, 29]]);
+        }, _callee16, this, [[15,, 26, 29]]);
       }));
-
       function vectorizeSingleImageAndShowEditDialog(_x16) {
         return _vectorizeSingleImageAndShowEditDialog.apply(this, arguments);
       }
-
       return vectorizeSingleImageAndShowEditDialog;
     }()
   }, {
     key: "restoreVectorizedImages",
     value: function () {
-      var _restoreVectorizedImages = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16(identifier) {
+      var _restoreVectorizedImages = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17(identifier) {
         var displayImagesAsUnVectorized, state, designArea, images, _iterator8, _step8, image, operations;
-
-        return regeneratorRuntime.wrap(function _callee16$(_context16) {
-          while (1) {
-            switch (_context16.prev = _context16.next) {
-              case 0:
-                _context16.next = 2;
-                return this.handleDesignProductionMethodChangeFromVectorizationToNonVectorization(identifier);
-
-              case 2:
-                displayImagesAsUnVectorized = _context16.sent;
-
-                if (!displayImagesAsUnVectorized) {
-                  _context16.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);
-                _context16.prev = 9;
-
-                _iterator8.s();
-
-              case 11:
-                if ((_step8 = _iterator8.n()).done) {
-                  _context16.next = 18;
-                  break;
-                }
-
-                image = _step8.value;
-                operations = (0, _Modifiers.removeVectorizeFromOperations)(image.imageData.operations);
-                _context16.next = 16;
-                return _ServiceLocator.Services.designData.editFile(operations, image.imageData, {
-                  immediateCommit: true,
-                  displayColorPreview: (0, _configuration.getConf)('autoPreviewVectorization', true)
-                });
-
-              case 16:
-                _context16.next = 11;
+        return _regeneratorRuntime().wrap(function _callee17$(_context17) {
+          while (1) switch (_context17.prev = _context17.next) {
+            case 0:
+              _context17.next = 2;
+              return this.handleDesignProductionMethodChangeFromVectorizationToNonVectorization(identifier);
+            case 2:
+              displayImagesAsUnVectorized = _context17.sent;
+              if (!displayImagesAsUnVectorized) {
+                _context17.next = 28;
                 break;
-
-              case 18:
-                _context16.next = 23;
+              }
+              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);
+              _context17.prev = 9;
+              _iterator8.s();
+            case 11:
+              if ((_step8 = _iterator8.n()).done) {
+                _context17.next = 18;
                 break;
-
-              case 20:
-                _context16.prev = 20;
-                _context16.t0 = _context16["catch"](9);
-
-                _iterator8.e(_context16.t0);
-
-              case 23:
-                _context16.prev = 23;
-
-                _iterator8.f();
-
-                return _context16.finish(23);
-
-              case 26:
-                _context16.next = 28;
-                return this.loadCanvasDataFromState([designArea]);
-
-              case 28:
-              case "end":
-                return _context16.stop();
-            }
+              }
+              image = _step8.value;
+              operations = (0, _Modifiers.removeVectorizeFromOperations)(image.imageData.operations);
+              _context17.next = 16;
+              return _ServiceLocator.Services.designData.editFile(operations, image.imageData, {
+                immediateCommit: true,
+                displayColorPreview: (0, _configuration.getConf)('autoPreviewVectorization', true)
+              });
+            case 16:
+              _context17.next = 11;
+              break;
+            case 18:
+              _context17.next = 23;
+              break;
+            case 20:
+              _context17.prev = 20;
+              _context17.t0 = _context17["catch"](9);
+              _iterator8.e(_context17.t0);
+            case 23:
+              _context17.prev = 23;
+              _iterator8.f();
+              return _context17.finish(23);
+            case 26:
+              _context17.next = 28;
+              return this.loadCanvasDataFromState([designArea]);
+            case 28:
+            case "end":
+              return _context17.stop();
           }
-        }, _callee16, this, [[9, 20, 23, 26]]);
+        }, _callee17, 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 _callee17(oldProductionMethod, newProductionMethod) {
+      var _updateObjectsAfterProductionMethodChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18(oldProductionMethod, newProductionMethod) {
         var _getDesignDataForSele2, canvasData, objects, newObjects, designArea;
-
-        return regeneratorRuntime.wrap(function _callee17$(_context17) {
-          while (1) {
-            switch (_context17.prev = _context17.next) {
-              case 0:
-                _getDesignDataForSele2 = (0, _Selectors.getDesignDataForSelectedDesignArea)(_ServiceLocator.Services.store.state), canvasData = _getDesignDataForSele2.canvasData;
-
-                if (canvasData) {
-                  _context17.next = 3;
-                  break;
-                }
-
-                return _context17.abrupt("return");
-
-              case 3:
-                objects = canvasData.objects;
-                newObjects = (0, _Modifiers.applyProductionMethodChangeToCanvasObjects)(newProductionMethod, oldProductionMethod, objects);
-
-                if (!(newObjects === objects)) {
-                  _context17.next = 7;
-                  break;
-                }
-
-                return _context17.abrupt("return");
-
-              case 7:
-                this.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
-                  objects: newObjects
-                }));
-                designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
-                _context17.next = 11;
-                return this.updateCanvasDataFromState([designArea]);
-
-              case 11:
-              case "end":
-                return _context17.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee18$(_context18) {
+          while (1) switch (_context18.prev = _context18.next) {
+            case 0:
+              _getDesignDataForSele2 = (0, _Selectors.getDesignDataForSelectedDesignArea)(_ServiceLocator.Services.store.state), canvasData = _getDesignDataForSele2.canvasData;
+              if (canvasData) {
+                _context18.next = 3;
+                break;
+              }
+              return _context18.abrupt("return");
+            case 3:
+              objects = canvasData.objects;
+              newObjects = (0, _Modifiers.applyProductionMethodChangeToCanvasObjects)(newProductionMethod, oldProductionMethod, objects);
+              if (!(newObjects === objects)) {
+                _context18.next = 7;
+                break;
+              }
+              return _context18.abrupt("return");
+            case 7:
+              this.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
+                objects: newObjects
+              }));
+              designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
+              _context18.next = 11;
+              return this.updateCanvasDataFromState([designArea]);
+            case 11:
+            case "end":
+              return _context18.stop();
           }
-        }, _callee17, this);
+        }, _callee18, this);
       }));
-
       function updateObjectsAfterProductionMethodChange(_x18, _x19) {
         return _updateObjectsAfterProductionMethodChange.apply(this, arguments);
       }
-
       return updateObjectsAfterProductionMethodChange;
     }()
   }, {
@@ -1866,169 +1580,138 @@ var DesignDataService = /*#__PURE__*/function () {
       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 _callee18(identifier) {
+      var _setDesignProductionMethod2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19(identifier) {
         var state, designData, selectedDesignProduction, bulkNameSelected, fontSizeMin, smallestFontSize, oldDesignProductionMethod;
-        return regeneratorRuntime.wrap(function _callee18$(_context18) {
-          while (1) {
-            switch (_context18.prev = _context18.next) {
-              case 0:
-                if (this.checkDesignElementRestrictions(identifier)) {
-                  _context18.next = 2;
-                  break;
-                }
-
-                return _context18.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)) {
-                  _context18.next = 44;
-                  break;
-                }
-
-                fontSizeMin = (0, _Selectors.getFontSizeMin)(state, identifier);
-                smallestFontSize = (0, _Selectors.findSmallestFontSizeInCanvasData)(designData.canvasData);
-                _context18.prev = 10;
-                _context18.t0 = smallestFontSize < fontSizeMin;
-
-                if (!_context18.t0) {
-                  _context18.next = 15;
-                  break;
-                }
-
-                _context18.next = 15;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showMinFontSizeConfirm)(fontSizeMin));
-
-              case 15:
-                _context18.next = 20;
+        return _regeneratorRuntime().wrap(function _callee19$(_context19) {
+          while (1) switch (_context19.prev = _context19.next) {
+            case 0:
+              if (this.checkDesignElementRestrictions(identifier)) {
+                _context19.next = 2;
                 break;
-
-              case 17:
-                _context18.prev = 17;
-                _context18.t1 = _context18["catch"](10);
-                return _context18.abrupt("return");
-
-              case 20:
-                _context18.prev = 20;
-                _context18.next = 23;
-                return this.checkColorUsageForDesignProductionMethod(identifier);
-
-              case 23:
-                _context18.next = 25;
-                return this.vectorizeSingleImageAndShowEditDialog(identifier);
-
-              case 25:
-                _context18.next = 27;
-                return this.restoreVectorizedImages(identifier);
-
-              case 27:
-                _context18.next = 34;
+              }
+              return _context19.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)) {
+                _context19.next = 44;
                 break;
-
-              case 29:
-                _context18.prev = 29;
-                _context18.t2 = _context18["catch"](20);
-
-                if (!(0, _Actions5.isConfirmResult)(_context18.t2)) {
-                  _context18.next = 33;
-                  break;
-                }
-
-                return _context18.abrupt("return");
-
-              case 33:
-                throw _context18.t2;
-
-              case 34:
-                _context18.prev = 34;
-                _context18.t3 = bulkNameSelected && !selectedDesignProduction.allowBulkNames;
-
-                if (!_context18.t3) {
-                  _context18.next = 39;
-                  break;
-                }
-
-                _context18.next = 39;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeConfirm)());
-
-              case 39:
-                _context18.next = 44;
+              }
+              fontSizeMin = (0, _Selectors.getFontSizeMin)(state, identifier);
+              smallestFontSize = (0, _Selectors.findSmallestFontSizeInCanvasData)(designData.canvasData);
+              _context19.prev = 10;
+              _context19.t0 = smallestFontSize < fontSizeMin;
+              if (!_context19.t0) {
+                _context19.next = 15;
                 break;
-
-              case 41:
-                _context18.prev = 41;
-                _context18.t4 = _context18["catch"](34);
-                return _context18.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();
-                }
-
-                _context18.next = 51;
-                return this.updateObjectsAfterProductionMethodChange(oldDesignProductionMethod, selectedDesignProduction);
-
-              case 51:
-              case "end":
-                return _context18.stop();
-            }
+              }
+              _context19.next = 15;
+              return _ServiceLocator.Services.store.dispatch((0, _Actions.showMinFontSizeConfirm)(fontSizeMin));
+            case 15:
+              _context19.next = 20;
+              break;
+            case 17:
+              _context19.prev = 17;
+              _context19.t1 = _context19["catch"](10);
+              return _context19.abrupt("return");
+            case 20:
+              _context19.prev = 20;
+              _context19.next = 23;
+              return this.checkColorUsageForDesignProductionMethod(identifier);
+            case 23:
+              _context19.next = 25;
+              return this.vectorizeSingleImageAndShowEditDialog(identifier);
+            case 25:
+              _context19.next = 27;
+              return this.restoreVectorizedImages(identifier);
+            case 27:
+              _context19.next = 34;
+              break;
+            case 29:
+              _context19.prev = 29;
+              _context19.t2 = _context19["catch"](20);
+              if (!(0, _Actions5.isConfirmResult)(_context19.t2)) {
+                _context19.next = 33;
+                break;
+              }
+              return _context19.abrupt("return");
+            case 33:
+              throw _context19.t2;
+            case 34:
+              _context19.prev = 34;
+              _context19.t3 = bulkNameSelected && !selectedDesignProduction.allowBulkNames;
+              if (!_context19.t3) {
+                _context19.next = 39;
+                break;
+              }
+              _context19.next = 39;
+              return _ServiceLocator.Services.store.dispatch((0, _Actions.showProductionMethodChangeConfirm)());
+            case 39:
+              _context19.next = 44;
+              break;
+            case 41:
+              _context19.prev = 41;
+              _context19.t4 = _context19["catch"](34);
+              return _context19.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.updateCanvasToCurrentDesignProductionMethod();
+              if (bulkNameSelected && !selectedDesignProduction.allowBulkNames) {
+                this.removeBulkNameItems(designData);
+                !(0, _Selectors.isBulkNamesSelected)(_ServiceLocator.Services.store.state.configurator) && _ServiceLocator.Services.configurator.clearBulkNames();
+              }
+              _context19.next = 51;
+              return this.updateObjectsAfterProductionMethodChange(oldDesignProductionMethod, selectedDesignProduction);
+            case 51:
+            case "end":
+              return _context19.stop();
           }
-        }, _callee18, this, [[10, 17], [20, 29], [34, 41]]);
+        }, _callee19, this, [[10, 17], [20, 29], [34, 41]]);
       }));
-
       function setDesignProductionMethod(_x20) {
         return _setDesignProductionMethod2.apply(this, arguments);
       }
-
       return setDesignProductionMethod;
     }()
   }, {
-    key: "updateMaskToCurrentDesignProductionMethod",
-    value: function updateMaskToCurrentDesignProductionMethod() {
+    key: "updateCanvasToCurrentDesignProductionMethod",
+    value: function updateCanvasToCurrentDesignProductionMethod() {
       // 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();
       }
+      var colorOverlayData = (0, _Selectors.getColorOverlayData)(state, designArea);
+      var colorOverlay = canvas.getColorOverlay();
+      if (colorOverlayData !== null && colorOverlayData !== void 0 && colorOverlayData.color) {
+        colorOverlay === null || colorOverlay === void 0 || colorOverlay.init(colorOverlayData);
+      } else {
+        colorOverlay === null || colorOverlay === void 0 || colorOverlay.dispose();
+      }
     }
   }, {
     key: "setCanvasData",
@@ -2038,52 +1721,42 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "setColorAmount",
     value: function () {
-      var _setColorAmount2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19(maxColorCount) {
+      var _setColorAmount2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20(maxColorCount) {
         var currentColorCount, colorCount;
-        return regeneratorRuntime.wrap(function _callee19$(_context19) {
-          while (1) {
-            switch (_context19.prev = _context19.next) {
-              case 0:
-                // check the current color usage before applying the selected color count
-                // so if the color count is more than the selected maxColorCount the user can decide to
-                // 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))) {
-                  _context19.next = 11;
-                  break;
-                }
-
-                _context19.prev = 3;
-                _context19.next = 6;
-                return _ServiceLocator.Services.store.dispatch((0, _Actions.showMaxColorChangeConfirm)(colorCount, maxColorCount, currentColorCount));
-
-              case 6:
-                _context19.next = 11;
+        return _regeneratorRuntime().wrap(function _callee20$(_context20) {
+          while (1) switch (_context20.prev = _context20.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))) {
+                _context20.next = 11;
                 break;
-
-              case 8:
-                _context19.prev = 8;
-                _context19.t0 = _context19["catch"](3);
-                return _context19.abrupt("return");
-
-              case 11:
-                _ServiceLocator.Services.store.dispatch((0, _Actions.setColorAmount)(maxColorCount));
-
-              case 12:
-              case "end":
-                return _context19.stop();
-            }
+              }
+              _context20.prev = 3;
+              _context20.next = 6;
+              return _ServiceLocator.Services.store.dispatch((0, _Actions.showMaxColorChangeConfirm)(colorCount, maxColorCount, currentColorCount));
+            case 6:
+              _context20.next = 11;
+              break;
+            case 8:
+              _context20.prev = 8;
+              _context20.t0 = _context20["catch"](3);
+              return _context20.abrupt("return");
+            case 11:
+              _ServiceLocator.Services.store.dispatch((0, _Actions.setColorAmount)(maxColorCount));
+            case 12:
+            case "end":
+              return _context20.stop();
           }
-        }, _callee19, null, [[3, 8]]);
+        }, _callee20, null, [[3, 8]]);
       }));
-
       function setColorAmount(_x21) {
         return _setColorAmount2.apply(this, arguments);
       }
-
       return setColorAmount;
     }()
     /**
@@ -2091,63 +1764,51 @@ var DesignDataService = /*#__PURE__*/function () {
      * 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 _callee20() {
+      var _updateVisualization = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
         var updateEventObject,
-            isDesignAreaSelected,
-            isDesignerOpen,
-            isScreenshotEvent,
-            drawingFunction,
-            _args20 = arguments;
-        return regeneratorRuntime.wrap(function _callee20$(_context20) {
-          while (1) {
-            switch (_context20.prev = _context20.next) {
-              case 0:
-                updateEventObject = _args20.length > 0 && _args20[0] !== undefined ? _args20[0] : {};
-
-                if (_ServiceLocator.Services.visualization.isReadyToRender()) {
-                  _context20.next = 3;
-                  break;
-                }
-
-                return _context20.abrupt("return");
-
-              case 3:
-                if (_ServiceLocator.Services.visualization.isReadyToRenderCustomDesign()) {
-                  _context20.next = 6;
-                  break;
-                }
-
-                _ServiceLocator.Services.visualization.render();
-
-                return _context20.abrupt("return");
-
-              case 6:
-                isDesignAreaSelected = !!(0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state).identifier;
-                isDesignerOpen = isDesignAreaSelected && _ServiceLocator.Services.ui.isVisible('designer');
-                isScreenshotEvent = (0, _get2["default"])(updateEventObject, 'data.screenshot');
-                drawingFunction = isDesignerOpen && !isScreenshotEvent && !this.isInPreviewMode ? this.redrawEmptyAreas : this.redrawAllDesignAreas;
-                _context20.next = 12;
-                return _ServiceLocator.Services.visualization.updateTexture({
-                  updateEventObject: updateEventObject,
-                  drawingFunction: drawingFunction.bind(this)
-                });
-
-              case 12:
-              case "end":
-                return _context20.stop();
-            }
+          isDesignAreaSelected,
+          isDesignerOpen,
+          isScreenshotEvent,
+          drawingFunction,
+          _args21 = arguments;
+        return _regeneratorRuntime().wrap(function _callee21$(_context21) {
+          while (1) switch (_context21.prev = _context21.next) {
+            case 0:
+              updateEventObject = _args21.length > 0 && _args21[0] !== undefined ? _args21[0] : {};
+              if (_ServiceLocator.Services.visualization.isReadyToRender()) {
+                _context21.next = 3;
+                break;
+              }
+              return _context21.abrupt("return");
+            case 3:
+              if (_ServiceLocator.Services.visualization.isReadyToRenderCustomDesign()) {
+                _context21.next = 6;
+                break;
+              }
+              _ServiceLocator.Services.visualization.render();
+              return _context21.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;
+              _context21.next = 12;
+              return _ServiceLocator.Services.visualization.updateTexture({
+                updateEventObject: updateEventObject,
+                drawingFunction: drawingFunction.bind(this)
+              });
+            case 12:
+            case "end":
+              return _context21.stop();
           }
-        }, _callee20, this);
+        }, _callee21, this);
       }));
-
       function updateVisualization() {
         return _updateVisualization.apply(this, arguments);
       }
-
       return updateVisualization;
     }()
   }, {
@@ -2155,247 +1816,193 @@ var DesignDataService = /*#__PURE__*/function () {
     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 _callee22(getDrawingContext, updateEventObject) {
+      var _redrawAllDesignAreas = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23(getDrawingContext, updateEventObject) {
         var _this8 = this;
-
         var state, showHighlight, textureBuilderConfig, variantIdentifier, effectEnabled, drawingFn;
-        return regeneratorRuntime.wrap(function _callee22$(_context23) {
-          while (1) {
-            switch (_context23.prev = _context23.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 _ref19 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21(textureCtx, getTextureBuilder) {
-                    var designAreas,
-                        _getTextureBuilder,
-                        getTextureImage,
-                        drawCanvasToArea,
-                        highlightDesignAreas,
-                        drawOn,
-                        getParams,
-                        _iterator9,
-                        _step9,
-                        _loop,
-                        _args22 = arguments;
-
-                    return regeneratorRuntime.wrap(function _callee21$(_context22) {
-                      while (1) {
-                        switch (_context22.prev = _context22.next) {
-                          case 0:
-                            designAreas = _args22.length > 2 && _args22[2] !== undefined ? _args22[2] : _this8.getDesignAreas();
-                            _getTextureBuilder = getTextureBuilder(textureBuilderConfig), getTextureImage = _getTextureBuilder.getTextureImage, drawCanvasToArea = _getTextureBuilder.drawCanvasToArea, highlightDesignAreas = _getTextureBuilder.highlightDesignAreas, drawOn = _getTextureBuilder.drawOn, getParams = _getTextureBuilder.getParams;
-
-                            if (getTextureImage()) {
-                              _context22.next = 5;
-                              break;
-                            }
-
-                            // eslint-disable-next-line no-console
-                            console.warn('Texture image is missing!', designAreas);
-                            return _context22.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);
-                            _context22.prev = 7;
-                            _loop = /*#__PURE__*/regeneratorRuntime.mark(function _loop() {
-                              var designArea, canvas, releaseLock, selectedObject, maskHandler, restoreOutlineVisibility, drawToContext, getSvg;
-                              return regeneratorRuntime.wrap(function _loop$(_context21) {
-                                while (1) {
-                                  switch (_context21.prev = _context21.next) {
-                                    case 0:
-                                      designArea = _step9.value;
-                                      canvas = _this8._getCanvas(_this8.getDesignAreaByIdentifier(designArea.identifier));
-
-                                      if (!canvas) {
-                                        _context21.next = 16;
-                                        break;
-                                      }
-
-                                      _context21.next = 5;
-                                      return (0, _ObjectLock.requestLock)(canvas);
-
-                                    case 5:
-                                      releaseLock = _context21.sent;
-                                      selectedObject = (0, _get2["default"])(canvas, 'selectedObject');
-
-                                      if (selectedObject) {
-                                        selectedObject.selected = false;
-                                      }
-
-                                      maskHandler = canvas.getMaskHandler();
-
-                                      if (maskHandler) {
-                                        restoreOutlineVisibility = maskHandler.toggleOutline(showHighlight, {
-                                          getZoomFactor: function getZoomFactor(_ref20) {
-                                            var zoom = _ref20.zoom;
-                                            // currentZoom is only available for 2D, for 3D it is always 1
-                                            var threeFactor = Math.min(getParams().currentZoom, 1) || 1;
-                                            return zoom * threeFactor;
-                                          }
-                                        });
-                                      }
-
-                                      drawToContext = canvas.drawToContext.bind(canvas);
-
-                                      getSvg = function getSvg() {
-                                        return canvas.getScreenshot((0, _Selectors4.getFontMapping)(state));
-                                      };
-
-                                      _context21.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 _context21.stop();
-                                  }
+        return _regeneratorRuntime().wrap(function _callee23$(_context24) {
+          while (1) switch (_context24.prev = _context24.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 _ref19 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22(textureCtx, getTextureBuilder) {
+                  var designAreas,
+                    _getTextureBuilder,
+                    getTextureImage,
+                    drawCanvasToArea,
+                    highlightDesignAreas,
+                    drawOn,
+                    getParams,
+                    _iterator9,
+                    _step9,
+                    _loop,
+                    _args23 = arguments;
+                  return _regeneratorRuntime().wrap(function _callee22$(_context23) {
+                    while (1) switch (_context23.prev = _context23.next) {
+                      case 0:
+                        designAreas = _args23.length > 2 && _args23[2] !== undefined ? _args23[2] : _this8.getDesignAreas();
+                        _getTextureBuilder = getTextureBuilder(textureBuilderConfig), getTextureImage = _getTextureBuilder.getTextureImage, drawCanvasToArea = _getTextureBuilder.drawCanvasToArea, highlightDesignAreas = _getTextureBuilder.highlightDesignAreas, drawOn = _getTextureBuilder.drawOn, getParams = _getTextureBuilder.getParams;
+                        if (getTextureImage()) {
+                          _context23.next = 5;
+                          break;
+                        }
+                        // eslint-disable-next-line no-console
+                        console.warn('Texture image is missing!', designAreas);
+                        return _context23.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);
+                        _context23.prev = 7;
+                        _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop() {
+                          var designArea, canvas, _canvas$getColorOverl, releaseLock, selectedObject, maskHandler, restoreOutlineVisibility, restoreColorOverlayVisibility, drawToContext, getSvg;
+                          return _regeneratorRuntime().wrap(function _loop$(_context22) {
+                            while (1) switch (_context22.prev = _context22.next) {
+                              case 0:
+                                designArea = _step9.value;
+                                canvas = _this8._getCanvas(_this8.getDesignAreaByIdentifier(designArea.identifier));
+                                if (!canvas) {
+                                  _context22.next = 18;
+                                  break;
                                 }
-                              }, _loop);
-                            });
-
-                            _iterator9.s();
-
-                          case 10:
-                            if ((_step9 = _iterator9.n()).done) {
-                              _context22.next = 14;
-                              break;
+                                _context22.next = 5;
+                                return (0, _ObjectLock.requestLock)(canvas);
+                              case 5:
+                                releaseLock = _context22.sent;
+                                selectedObject = (0, _get2["default"])(canvas, 'selectedObject');
+                                if (selectedObject) {
+                                  selectedObject.selected = false;
+                                }
+                                maskHandler = canvas.getMaskHandler();
+                                if (maskHandler) {
+                                  restoreOutlineVisibility = maskHandler.toggleOutline(showHighlight, {
+                                    getZoomFactor: function getZoomFactor(_ref20) {
+                                      var zoom = _ref20.zoom;
+                                      // currentZoom is only available for 2D, for 3D it is always 1
+                                      var threeFactor = Math.min(getParams().currentZoom, 1) || 1;
+                                      return zoom * threeFactor;
+                                    }
+                                  });
+                                }
+                                restoreColorOverlayVisibility = (_canvas$getColorOverl = canvas.getColorOverlay()) === null || _canvas$getColorOverl === void 0 ? void 0 : _canvas$getColorOverl.toggle(false);
+                                drawToContext = canvas.drawToContext.bind(canvas);
+                                getSvg = function getSvg() {
+                                  return canvas.getScreenshot((0, _Selectors4.getFontMapping)(state));
+                                };
+                                _context22.next = 15;
+                                return drawCanvasToArea(_objectSpread({
+                                  drawToContext: drawToContext,
+                                  designArea: designArea,
+                                  getSvg: getSvg
+                                }, effectEnabled && (0, _Selectors.getVisualizationEffectWithOptions)(state, designArea, variantIdentifier)));
+                              case 15:
+                                if (maskHandler) {
+                                  restoreOutlineVisibility();
+                                }
+                                restoreColorOverlayVisibility && restoreColorOverlayVisibility();
+                                releaseLock();
+                              case 18:
+                              case "end":
+                                return _context22.stop();
                             }
-
-                            return _context22.delegateYield(_loop(), "t0", 12);
-
-                          case 12:
-                            _context22.next = 10;
-                            break;
-
-                          case 14:
-                            _context22.next = 19;
-                            break;
-
-                          case 16:
-                            _context22.prev = 16;
-                            _context22.t1 = _context22["catch"](7);
-
-                            _iterator9.e(_context22.t1);
-
-                          case 19:
-                            _context22.prev = 19;
-
-                            _iterator9.f();
-
-                            return _context22.finish(19);
-
-                          case 22:
-                            drawOn(textureCtx);
-
-                          case 23:
-                          case "end":
-                            return _context22.stop();
+                          }, _loop);
+                        });
+                        _iterator9.s();
+                      case 10:
+                        if ((_step9 = _iterator9.n()).done) {
+                          _context23.next = 14;
+                          break;
                         }
-                      }
-                    }, _callee21, null, [[7, 16, 19, 22]]);
-                  }));
-
-                  return function drawingFn(_x24, _x25) {
-                    return _ref19.apply(this, arguments);
-                  };
-                }();
-
-                _context23.prev = 6;
-                _context23.next = 9;
-                return getDrawingContext(drawingFn, true
-                /* update alpha */
-                , true
-                /* clean up texture before drawing */
-                );
-
-              case 9:
-                _context23.next = 14;
-                break;
-
-              case 11:
-                _context23.prev = 11;
-                _context23.t0 = _context23["catch"](6);
-                // eslint-disable-next-line no-console
-                console.warn('Could not get drawing context, texture update is skipped!', _context23.t0.message);
-
-              case 14:
-              case "end":
-                return _context23.stop();
-            }
+                        return _context23.delegateYield(_loop(), "t0", 12);
+                      case 12:
+                        _context23.next = 10;
+                        break;
+                      case 14:
+                        _context23.next = 19;
+                        break;
+                      case 16:
+                        _context23.prev = 16;
+                        _context23.t1 = _context23["catch"](7);
+                        _iterator9.e(_context23.t1);
+                      case 19:
+                        _context23.prev = 19;
+                        _iterator9.f();
+                        return _context23.finish(19);
+                      case 22:
+                        drawOn(textureCtx);
+                      case 23:
+                      case "end":
+                        return _context23.stop();
+                    }
+                  }, _callee22, null, [[7, 16, 19, 22]]);
+                }));
+                return function drawingFn(_x24, _x25) {
+                  return _ref19.apply(this, arguments);
+                };
+              }();
+              _context24.prev = 6;
+              _context24.next = 9;
+              return getDrawingContext(drawingFn, true /* update alpha */, true /* clean up texture before drawing */);
+            case 9:
+              _context24.next = 14;
+              break;
+            case 11:
+              _context24.prev = 11;
+              _context24.t0 = _context24["catch"](6);
+              // eslint-disable-next-line no-console
+              console.warn('Could not get drawing context, texture update is skipped!', _context24.t0.message);
+            case 14:
+            case "end":
+              return _context24.stop();
           }
-        }, _callee22, null, [[6, 11]]);
+        }, _callee23, 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 _callee23() {
-        return regeneratorRuntime.wrap(function _callee23$(_context24) {
-          while (1) {
-            switch (_context24.prev = _context24.next) {
-              case 0:
-              case "end":
-                return _context24.stop();
-            }
+      getDrawingContext( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
+        return _regeneratorRuntime().wrap(function _callee24$(_context25) {
+          while (1) switch (_context25.prev = _context25.next) {
+            case 0:
+            case "end":
+              return _context25.stop();
           }
-        }, _callee23);
-      })), true
-      /* update alpha */
-      , true
-      /* clean up texture before drawing */
-      );
+        }, _callee24);
+      })), 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();
       }
@@ -2404,10 +2011,8 @@ var DesignDataService = /*#__PURE__*/function () {
     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();
         }
@@ -2417,7 +2022,6 @@ var DesignDataService = /*#__PURE__*/function () {
     key: "createHighlightMemo",
     value: function createHighlightMemo(tmpState) {
       var _this9 = this;
-
       var origState = (0, _Selectors.isHighlighted)(_ServiceLocator.Services.store.state);
       this.toggleHighlight(tmpState, false);
       return {
@@ -2429,119 +2033,101 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "getScreenshots",
     value: function () {
-      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25(fontMapping) {
+      var _getScreenshots = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26(fontMapping) {
         var _this10 = this;
-
         var options,
-            _options$screenshotFn,
-            screenshotFn,
-            _args26 = arguments;
-
-        return regeneratorRuntime.wrap(function _callee25$(_context26) {
-          while (1) {
-            switch (_context26.prev = _context26.next) {
-              case 0:
-                options = _args26.length > 1 && _args26[1] !== undefined ? _args26[1] : {};
-                _options$screenshotFn = options.screenshotFn, screenshotFn = _options$screenshotFn === void 0 ? 'getScreenshot' : _options$screenshotFn;
-                _context26.next = 4;
-                return Promise.all(this.getDesignAreas().map(function (area) {
-                  return {
-                    id: area.identifier,
-                    canvas: _this10._getCanvas(area)
-                  };
-                }).filter(function (_ref22) {
-                  var canvas = _ref22.canvas;
-                  return canvas && canvas[screenshotFn] && canvas.objects && canvas.objects.length > 0;
-                }).map( /*#__PURE__*/function () {
-                  var _ref24 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24(_ref23) {
-                    var id, canvas, releaseLock, maskHandler, restoreOutlineVisibility, result;
-                    return regeneratorRuntime.wrap(function _callee24$(_context25) {
-                      while (1) {
-                        switch (_context25.prev = _context25.next) {
-                          case 0:
-                            id = _ref23.id, canvas = _ref23.canvas;
-                            _context25.next = 3;
-                            return (0, _ObjectLock.requestLock)(canvas);
-
-                          case 3:
-                            releaseLock = _context25.sent;
-                            maskHandler = canvas.getMaskHandler();
-                            restoreOutlineVisibility = maskHandler && maskHandler.toggleOutline(false);
-                            _context25.t0 = id;
-                            _context25.next = 9;
-                            return canvas[screenshotFn](fontMapping);
-
-                          case 9:
-                            _context25.t1 = _context25.sent;
-                            result = [_context25.t0, _context25.t1];
-                            restoreOutlineVisibility && restoreOutlineVisibility();
-                            releaseLock();
-                            return _context25.abrupt("return", result);
-
-                          case 14:
-                          case "end":
-                            return _context25.stop();
-                        }
-                      }
-                    }, _callee24);
-                  }));
-
-                  return function (_x27) {
-                    return _ref24.apply(this, arguments);
-                  };
-                }()));
-
-              case 4:
-                return _context26.abrupt("return", _context26.sent.reduce(function (screenShots, _ref25) {
-                  var _ref26 = _slicedToArray(_ref25, 2),
-                      id = _ref26[0],
-                      screenshot = _ref26[1];
-
-                  return _objectSpread(_objectSpread({}, screenShots), {}, _defineProperty({}, id, screenshot));
-                }, {}));
-
-              case 5:
-              case "end":
-                return _context26.stop();
-            }
+          _options$screenshotFn,
+          screenshotFn,
+          _args27 = arguments;
+        return _regeneratorRuntime().wrap(function _callee26$(_context27) {
+          while (1) switch (_context27.prev = _context27.next) {
+            case 0:
+              options = _args27.length > 1 && _args27[1] !== undefined ? _args27[1] : {};
+              _options$screenshotFn = options.screenshotFn, screenshotFn = _options$screenshotFn === void 0 ? 'getScreenshot' : _options$screenshotFn;
+              _context27.next = 4;
+              return Promise.all(this.getDesignAreas().map(function (area) {
+                return {
+                  id: area.identifier,
+                  canvas: _this10._getCanvas(area)
+                };
+              }).filter(function (_ref22) {
+                var canvas = _ref22.canvas;
+                return canvas && canvas[screenshotFn] && canvas.objects && canvas.objects.length > 0;
+              }).map( /*#__PURE__*/function () {
+                var _ref24 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee25(_ref23) {
+                  var _canvas$getColorOverl2;
+                  var id, canvas, releaseLock, maskHandler, restoreOutlineVisibility, restoreColorOverlayVisibility, result;
+                  return _regeneratorRuntime().wrap(function _callee25$(_context26) {
+                    while (1) switch (_context26.prev = _context26.next) {
+                      case 0:
+                        id = _ref23.id, canvas = _ref23.canvas;
+                        _context26.next = 3;
+                        return (0, _ObjectLock.requestLock)(canvas);
+                      case 3:
+                        releaseLock = _context26.sent;
+                        maskHandler = canvas.getMaskHandler();
+                        restoreOutlineVisibility = maskHandler && maskHandler.toggleOutline(false);
+                        restoreColorOverlayVisibility = (_canvas$getColorOverl2 = canvas.getColorOverlay()) === null || _canvas$getColorOverl2 === void 0 ? void 0 : _canvas$getColorOverl2.toggle(false);
+                        _context26.t0 = id;
+                        _context26.next = 10;
+                        return canvas[screenshotFn](fontMapping);
+                      case 10:
+                        _context26.t1 = _context26.sent;
+                        result = [_context26.t0, _context26.t1];
+                        restoreOutlineVisibility && restoreOutlineVisibility();
+                        restoreColorOverlayVisibility && restoreColorOverlayVisibility();
+                        releaseLock();
+                        return _context26.abrupt("return", result);
+                      case 16:
+                      case "end":
+                        return _context26.stop();
+                    }
+                  }, _callee25);
+                }));
+                return function (_x27) {
+                  return _ref24.apply(this, arguments);
+                };
+              }()));
+            case 4:
+              return _context27.abrupt("return", _context27.sent.reduce(function (screenShots, _ref25) {
+                var _ref26 = _slicedToArray(_ref25, 2),
+                  id = _ref26[0],
+                  screenshot = _ref26[1];
+                return _objectSpread(_objectSpread({}, screenShots), {}, _defineProperty({}, id, screenshot));
+              }, {}));
+            case 5:
+            case "end":
+              return _context27.stop();
           }
-        }, _callee25, this);
+        }, _callee26, this);
       }));
-
       function getScreenshots(_x26) {
         return _getScreenshots.apply(this, arguments);
       }
-
       return getScreenshots;
     }()
   }, {
     key: "getScreenshotsOfElements",
     value: function () {
-      var _getScreenshotsOfElements = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26(fontMapping) {
-        return regeneratorRuntime.wrap(function _callee26$(_context27) {
-          while (1) {
-            switch (_context27.prev = _context27.next) {
-              case 0:
-                _context27.next = 2;
-                return this.getScreenshots(fontMapping, {
-                  screenshotFn: 'getScreenshotsOfElements'
-                });
-
-              case 2:
-                return _context27.abrupt("return", _context27.sent);
-
-              case 3:
-              case "end":
-                return _context27.stop();
-            }
+      var _getScreenshotsOfElements = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27(fontMapping) {
+        return _regeneratorRuntime().wrap(function _callee27$(_context28) {
+          while (1) switch (_context28.prev = _context28.next) {
+            case 0:
+              _context28.next = 2;
+              return this.getScreenshots(fontMapping, {
+                screenshotFn: 'getScreenshotsOfElements'
+              });
+            case 2:
+              return _context28.abrupt("return", _context28.sent);
+            case 3:
+            case "end":
+              return _context28.stop();
           }
-        }, _callee26, this);
+        }, _callee27, this);
       }));
-
       function getScreenshotsOfElements(_x28) {
         return _getScreenshotsOfElements.apply(this, arguments);
       }
-
       return getScreenshotsOfElements;
     }()
     /**
@@ -2554,22 +2140,17 @@ var DesignDataService = /*#__PURE__*/function () {
      * @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);
@@ -2577,13 +2158,10 @@ var DesignDataService = /*#__PURE__*/function () {
           var text = (0, _i18n.t)('calculationWidget.textContent', {
             colorAmount: colorAmount
           });
-
-          _ServiceLocator.Services.designer.addText(canvas, text, colorAmount); // eslint-disable-next-line no-console
-
-
+          _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';
@@ -2592,7 +2170,6 @@ var DesignDataService = /*#__PURE__*/function () {
             return obj.remove();
           });
         };
-
         return {
           toggleSampleText: function toggleSampleText(active) {
             if (active) {
@@ -2600,25 +2177,19 @@ var DesignDataService = /*#__PURE__*/function () {
             } 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);
           }
         };
@@ -2627,158 +2198,124 @@ var DesignDataService = /*#__PURE__*/function () {
   }, {
     key: "addSampleImageForDesignAreas",
     value: function () {
-      var _addSampleImageForDesignAreas = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28(designAreaIdentifiers, active) {
+      var _addSampleImageForDesignAreas = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29(designAreaIdentifiers, active) {
         var _this12 = this;
-
-        return regeneratorRuntime.wrap(function _callee28$(_context29) {
-          while (1) {
-            switch (_context29.prev = _context29.next) {
-              case 0:
-                _context29.next = 2;
-                return Promise.all(designAreaIdentifiers.map( /*#__PURE__*/function () {
-                  var _ref27 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27(designAreaIdentifier) {
-                    var designArea, canvas, state, imageSrc, imageData, canvasDataJSON, designData, canvasData, objects;
-                    return regeneratorRuntime.wrap(function _callee27$(_context28) {
-                      while (1) {
-                        switch (_context28.prev = _context28.next) {
-                          case 0:
-                            designArea = _this12.getDesignAreaByIdentifier(designAreaIdentifier);
-                            canvas = _this12._getCanvas(designArea);
-                            state = _ServiceLocator.Services.store.state;
-                            imageSrc = _designer_placeholder_logo["default"];
-
-                            if (!active) {
-                              _context28.next = 13;
-                              break;
-                            }
-
-                            imageData = (0, _Modifiers2.createSVGImageData)({
-                              fileName: 'designer_placeholder_logo.svg',
-                              imageUrl: imageSrc,
-                              thumbUrl: imageSrc,
-                              isPlaceHolderImage: true,
-                              galleryImage: false
-                            });
-                            _context28.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);
-
-                            _context28.next = 21;
-                            break;
-
-                          case 13:
-                            designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designAreaIdentifier);
-                            canvasData = designData.canvasData;
-
-                            if (canvasData) {
-                              _context28.next = 17;
-                              break;
-                            }
-
-                            return _context28.abrupt("return");
-
-                          case 17:
-                            objects = canvasData ? canvasData.objects.filter(function (obj) {
-                              return obj.type === 'Text';
-                            }) : [];
-
-                            _this12.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
-                              objects: objects
-                            }), designAreaIdentifier);
-
-                            _context28.next = 21;
-                            return _this12.loadCanvasDataFromState([designArea]);
-
-                          case 21:
-                            return _context28.abrupt("return", {
-                              canvas: canvas,
-                              designAreaIdentifier: designAreaIdentifier
-                            });
-
-                          case 22:
-                          case "end":
-                            return _context28.stop();
+        return _regeneratorRuntime().wrap(function _callee29$(_context30) {
+          while (1) switch (_context30.prev = _context30.next) {
+            case 0:
+              _context30.next = 2;
+              return Promise.all(designAreaIdentifiers.map( /*#__PURE__*/function () {
+                var _ref27 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28(designAreaIdentifier) {
+                  var designArea, canvas, state, imageSrc, imageData, canvasDataJSON, designData, canvasData, objects;
+                  return _regeneratorRuntime().wrap(function _callee28$(_context29) {
+                    while (1) switch (_context29.prev = _context29.next) {
+                      case 0:
+                        designArea = _this12.getDesignAreaByIdentifier(designAreaIdentifier);
+                        canvas = _this12._getCanvas(designArea);
+                        state = _ServiceLocator.Services.store.state;
+                        imageSrc = _designer_placeholder_logo["default"];
+                        if (!active) {
+                          _context29.next = 13;
+                          break;
                         }
-                      }
-                    }, _callee27);
-                  }));
-
-                  return function (_x31) {
-                    return _ref27.apply(this, arguments);
-                  };
-                }()));
-
-              case 2:
-              case "end":
-                return _context29.stop();
-            }
+                        imageData = (0, _Modifiers2.createSVGImageData)({
+                          fileName: 'designer_placeholder_logo.svg',
+                          imageUrl: imageSrc,
+                          thumbUrl: imageSrc,
+                          isPlaceHolderImage: true,
+                          galleryImage: false
+                        });
+                        _context29.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
+                        console.log("Sample image added to canvas: ".concat(designAreaIdentifier));
+                        _this12.setCanvasData(canvasDataJSON, designAreaIdentifier);
+                        _context29.next = 21;
+                        break;
+                      case 13:
+                        designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designAreaIdentifier);
+                        canvasData = designData.canvasData;
+                        if (canvasData) {
+                          _context29.next = 17;
+                          break;
+                        }
+                        return _context29.abrupt("return");
+                      case 17:
+                        objects = canvasData ? canvasData.objects.filter(function (obj) {
+                          return obj.type === 'Text';
+                        }) : [];
+                        _this12.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
+                          objects: objects
+                        }), designAreaIdentifier);
+                        _context29.next = 21;
+                        return _this12.loadCanvasDataFromState([designArea]);
+                      case 21:
+                        return _context29.abrupt("return", {
+                          canvas: canvas,
+                          designAreaIdentifier: designAreaIdentifier
+                        });
+                      case 22:
+                      case "end":
+                        return _context29.stop();
+                    }
+                  }, _callee28);
+                }));
+                return function (_x31) {
+                  return _ref27.apply(this, arguments);
+                };
+              }()));
+            case 2:
+            case "end":
+              return _context30.stop();
           }
-        }, _callee28);
+        }, _callee29);
       }));
-
       function addSampleImageForDesignAreas(_x29, _x30) {
         return _addSampleImageForDesignAreas.apply(this, arguments);
       }
-
       return addSampleImageForDesignAreas;
     }()
   }, {
     key: "addImageToDesignArea",
     value: function () {
-      var _addImageToDesignArea = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29(designArea, imageData) {
+      var _addImageToDesignArea = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30(designArea, imageData) {
         var canvas;
-        return regeneratorRuntime.wrap(function _callee29$(_context30) {
-          while (1) {
-            switch (_context30.prev = _context30.next) {
-              case 0:
-                canvas = this._getCanvas(designArea);
-
-                if (canvas) {
-                  _context30.next = 3;
-                  break;
-                }
-
-                return _context30.abrupt("return", false);
-
-              case 3:
-                _context30.next = 5;
-                return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
-                  enlargeImage: true,
-                  scaleToHalf: false,
-                  autoSelect: false
-                });
-
-              case 5:
-                return _context30.abrupt("return", _context30.sent);
-
-              case 6:
-              case "end":
-                return _context30.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee30$(_context31) {
+          while (1) switch (_context31.prev = _context31.next) {
+            case 0:
+              canvas = this._getCanvas(designArea);
+              if (canvas) {
+                _context31.next = 3;
+                break;
+              }
+              return _context31.abrupt("return", false);
+            case 3:
+              _context31.next = 5;
+              return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
+                enlargeImage: true,
+                scaleToHalf: false,
+                autoSelect: false
+              });
+            case 5:
+              return _context31.abrupt("return", _context31.sent);
+            case 6:
+            case "end":
+              return _context31.stop();
           }
-        }, _callee29, this);
+        }, _callee30, 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';
       }) : [];
@@ -2791,7 +2328,6 @@ var DesignDataService = /*#__PURE__*/function () {
       var canvasImageObject = canvas.objects.find(function (obj) {
         return obj.uuid === imageObject.uuid;
       });
-
       if (canvasTextObject && canvasImageObject) {
         var canvasImageObjectSize = canvasImageObject.getBoundSize();
         var canvasTextObjectSize = canvasTextObject.getBoundSize();
@@ -2801,32 +2337,25 @@ var DesignDataService = /*#__PURE__*/function () {
           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;
-
+        _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);
             }
@@ -2842,139 +2371,106 @@ var DesignDataService = /*#__PURE__*/function () {
     key: "changeAllColorsNeeded",
     value: function changeAllColorsNeeded() {
       var _getSelectedDesignAre3 = (0, _Selectors.getSelectedDesignAreaProperties)(_ServiceLocator.Services.store.state),
-          maxColorAmount = _getSelectedDesignAre3.maxColorAmount,
-          hasEngravingBackgroundColors = _getSelectedDesignAre3.hasEngravingBackgroundColors;
-
+        maxColorAmount = _getSelectedDesignAre3.maxColorAmount,
+        hasEngravingBackgroundColors = _getSelectedDesignAre3.hasEngravingBackgroundColors;
       return maxColorAmount === 1 && !hasEngravingBackgroundColors;
     }
   }, {
     key: "setImageAndTextColor",
     value: function () {
-      var _setImageAndTextColor = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30(color) {
+      var _setImageAndTextColor = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31(color) {
         var designArea, designData, objects, hasmultipleObjects, canvas, isImageSelected, selectedImageIdentifier, _iterator11, _step11, object, image, operations;
-
-        return regeneratorRuntime.wrap(function _callee30$(_context31) {
-          while (1) {
-            switch (_context31.prev = _context31.next) {
-              case 0:
-                if (this.changeAllColorsNeeded()) {
-                  _context31.next = 2;
-                  break;
-                }
-
-                return _context31.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) {
-                  _context31.next = 8;
-                  break;
-                }
-
-                return _context31.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);
-                _context31.prev = 13;
-
-                _iterator11.s();
-
-              case 15:
-                if ((_step11 = _iterator11.n()).done) {
-                  _context31.next = 24;
-                  break;
-                }
-
-                object = _step11.value;
-
-                if (!(object.type === 'Image' && object.imageData.identifier !== selectedImageIdentifier)) {
-                  _context31.next = 22;
-                  break;
-                }
-
-                image = (0, _Selectors2.getUserImage)(_ServiceLocator.Services.store.state, object.imageData.identifier);
-                operations = (0, _Modifiers.setColorOnOperations)(image.operations, color);
-                _context31.next = 22;
-                return _ServiceLocator.Services.designData.editFile(operations, image);
-
-              case 22:
-                _context31.next = 15;
+        return _regeneratorRuntime().wrap(function _callee31$(_context32) {
+          while (1) switch (_context32.prev = _context32.next) {
+            case 0:
+              if (this.changeAllColorsNeeded()) {
+                _context32.next = 2;
                 break;
-
-              case 24:
-                _context31.next = 29;
+              }
+              return _context32.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) {
+                _context32.next = 8;
                 break;
-
-              case 26:
-                _context31.prev = 26;
-                _context31.t0 = _context31["catch"](13);
-
-                _iterator11.e(_context31.t0);
-
-              case 29:
-                _context31.prev = 29;
-
-                _iterator11.f();
-
-                return _context31.finish(29);
-
-              case 32:
-                _context31.next = 34;
-                return this.updateCanvasDataFromState([designArea]);
-
-              case 34:
-              case "end":
-                return _context31.stop();
-            }
+              }
+              return _context32.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);
+              _context32.prev = 13;
+              _iterator11.s();
+            case 15:
+              if ((_step11 = _iterator11.n()).done) {
+                _context32.next = 24;
+                break;
+              }
+              object = _step11.value;
+              if (!(object.type === 'Image' && object.imageData.identifier !== selectedImageIdentifier)) {
+                _context32.next = 22;
+                break;
+              }
+              image = (0, _Selectors2.getUserImage)(_ServiceLocator.Services.store.state, object.imageData.identifier);
+              operations = (0, _Modifiers.setColorOnOperations)(image.operations, color);
+              _context32.next = 22;
+              return _ServiceLocator.Services.designData.editFile(operations, image);
+            case 22:
+              _context32.next = 15;
+              break;
+            case 24:
+              _context32.next = 29;
+              break;
+            case 26:
+              _context32.prev = 26;
+              _context32.t0 = _context32["catch"](13);
+              _iterator11.e(_context32.t0);
+            case 29:
+              _context32.prev = 29;
+              _iterator11.f();
+              return _context32.finish(29);
+            case 32:
+              _context32.next = 34;
+              return this.updateCanvasDataFromState([designArea]);
+            case 34:
+            case "end":
+              return _context32.stop();
           }
-        }, _callee30, this, [[13, 26, 29, 32]]);
+        }, _callee31, 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 _callee31(url) {
+      var _getGalleryImageColors = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32(url) {
         var svgContent, designProductionMethod;
-        return regeneratorRuntime.wrap(function _callee31$(_context32) {
-          while (1) {
-            switch (_context32.prev = _context32.next) {
-              case 0:
-                _context32.next = 2;
-                return getSvgContent(url);
-
-              case 2:
-                svgContent = _context32.sent;
-                designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-                return _context32.abrupt("return", (0, _Modifiers.createVectorizeColorsMap)({}, getSvgColors(svgContent, designProductionMethod)));
-
-              case 5:
-              case "end":
-                return _context32.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee32$(_context33) {
+          while (1) switch (_context33.prev = _context33.next) {
+            case 0:
+              _context33.next = 2;
+              return getSvgContent(url);
+            case 2:
+              svgContent = _context33.sent;
+              designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
+              return _context33.abrupt("return", (0, _Modifiers.createVectorizeColorsMap)({}, getSvgColors(svgContent, designProductionMethod)));
+            case 5:
+            case "end":
+              return _context33.stop();
           }
-        }, _callee31);
+        }, _callee32);
       }));
-
       function getGalleryImageColors(_x35) {
         return _getGalleryImageColors.apply(this, arguments);
       }
-
       return getGalleryImageColors;
     }()
   }, {
@@ -2988,298 +2484,255 @@ var DesignDataService = /*#__PURE__*/function () {
       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 _callee32(operations, image) {
+      var _editFileQueued = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33(operations, image) {
         var options,
-            releaseLock,
-            _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] : {};
-                _context33.next = 3;
-                return (0, _ObjectLock.requestLock)(this);
-
-              case 3:
-                releaseLock = _context33.sent;
-                _context33.prev = 4;
-                _context33.next = 7;
-                return this.editFile(operations, image, options);
-
-              case 7:
-                return _context33.abrupt("return", _context33.sent);
-
-              case 8:
-                _context33.prev = 8;
-                releaseLock();
-                return _context33.finish(8);
-
-              case 11:
-              case "end":
-                return _context33.stop();
-            }
+          releaseLock,
+          _args34 = arguments;
+        return _regeneratorRuntime().wrap(function _callee33$(_context34) {
+          while (1) switch (_context34.prev = _context34.next) {
+            case 0:
+              options = _args34.length > 2 && _args34[2] !== undefined ? _args34[2] : {};
+              _context34.next = 3;
+              return (0, _ObjectLock.requestLock)(this);
+            case 3:
+              releaseLock = _context34.sent;
+              _context34.prev = 4;
+              _context34.next = 7;
+              return this.editFile(operations, image, options);
+            case 7:
+              return _context34.abrupt("return", _context34.sent);
+            case 8:
+              _context34.prev = 8;
+              releaseLock();
+              return _context34.finish(8);
+            case 11:
+            case "end":
+              return _context34.stop();
           }
-        }, _callee32, this, [[4,, 8, 11]]);
+        }, _callee33, 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 _callee33(operations, image) {
+      var _editFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34(operations, image) {
         var options,
-            _options$immediateCom,
-            immediateCommit,
-            _options$designProduc,
-            designProductionMethod,
-            _options$addMode,
-            addMode,
-            displayColorPreview,
-            imageIdentifier,
-            preview,
-            compatibilityInfoHash,
-            imageIsCompatible,
-            operationsMatching,
-            vectorizedLogoMandatory,
-            colorPreviewRequired,
-            imageDataPatch,
-            _getImageUsageInfo,
-            designAreas,
-            count,
-            createCopy,
-            editData,
-            currentEditData,
-            isBackendNeeded,
-            selectedImage,
-            _designProductionMethod,
-            svgContent,
-            svgColors,
-            vectorizeColorsMap,
-            thresholdChanged,
-            maxPotentialColorAmount,
-            vectorizeOriginalColorsMap,
-            numberOfAggregatedColors,
-            numberOfColorsToRemove,
-            _args34 = arguments;
-
-        return regeneratorRuntime.wrap(function _callee33$(_context34) {
-          while (1) {
-            switch (_context34.prev = _context34.next) {
-              case 0:
-                options = _args34.length > 2 && _args34[2] !== undefined ? _args34[2] : {};
-                // patch operations to keep other unchanged values
-                operations = _objectSpread(_objectSpread({}, image.operations), operations);
-                _options$immediateCom = options.immediateCommit, immediateCommit = _options$immediateCom === void 0 ? false : _options$immediateCom, _options$designProduc = options.designProductionMethod, designProductionMethod = _options$designProduc === void 0 ? (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state) : _options$designProduc, _options$addMode = options.addMode, addMode = _options$addMode === void 0 ? false : _options$addMode, displayColorPreview = options.displayColorPreview;
-                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);
-                vectorizedLogoMandatory = (0, _Selectors.isVectorizedLogoMandatory)(designProductionMethod);
-                colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(designProductionMethod) || vectorizedLogoMandatory;
-                imageDataPatch = _objectSpread({
-                  compatibilityInfoHash: compatibilityInfoHash,
-                  colorPreviewRequired: colorPreviewRequired,
-                  vectorizedLogoMandatory: vectorizedLogoMandatory
-                }, displayColorPreview !== undefined && {
-                  displayColorPreview: displayColorPreview
+          _options$immediateCom,
+          immediateCommit,
+          _options$designProduc,
+          designProductionMethod,
+          _options$addMode,
+          addMode,
+          displayColorPreview,
+          imageIdentifier,
+          preview,
+          compatibilityInfoHash,
+          imageIsCompatible,
+          operationsMatching,
+          vectorizedLogoMandatory,
+          colorPreviewRequired,
+          imageDataPatch,
+          _getImageUsageInfo,
+          designAreas,
+          count,
+          createCopy,
+          editData,
+          currentEditData,
+          isBackendNeeded,
+          selectedImage,
+          _designProductionMethod,
+          svgContent,
+          svgColors,
+          vectorizeColorsMap,
+          thresholdChanged,
+          maxPotentialColorAmount,
+          vectorizeOriginalColorsMap,
+          numberOfAggregatedColors,
+          numberOfColorsToRemove,
+          _args35 = arguments;
+        return _regeneratorRuntime().wrap(function _callee34$(_context35) {
+          while (1) switch (_context35.prev = _context35.next) {
+            case 0:
+              options = _args35.length > 2 && _args35[2] !== undefined ? _args35[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);
+              vectorizedLogoMandatory = (0, _Selectors.isVectorizedLogoMandatory)(designProductionMethod);
+              colorPreviewRequired = (0, _Selectors.designProductionMethodHasEmbroideryVisualizationEffect)(designProductionMethod) || vectorizedLogoMandatory;
+              imageDataPatch = _objectSpread({
+                compatibilityInfoHash: compatibilityInfoHash,
+                colorPreviewRequired: colorPreviewRequired,
+                vectorizedLogoMandatory: vectorizedLogoMandatory
+              }, displayColorPreview !== undefined && {
+                displayColorPreview: displayColorPreview
+              });
+              if (!(!operationsMatching || !imageIsCompatible)) {
+                _context35.next = 29;
+                break;
+              }
+              if (!image.operations) {
+                operations.vectorizeThreshold = null;
+              }
+              operations = makeOperationsCompatible(operations, compatibilityInfoHash, designProductionMethod.colorPalettes);
+              if (!image.gallery) {
+                _context35.next = 18;
+                break;
+              }
+              operations = _objectSpread(_objectSpread({}, operations || {}), {}, {
+                vectorizeColorsMap: operations.vectorizeColorsMap
+              });
+              _context35.next = 29;
+              break;
+            case 18:
+              _getImageUsageInfo = (0, _Selectors2.getImageUsageInfo)(_ServiceLocator.Services.store.state, image.identifier), designAreas = _getImageUsageInfo.designAreas, count = _getImageUsageInfo.count;
+              createCopy = !!(designAreas > 1 && image.compatibilityInfoHash && !imageIsCompatible) || !operationsMatching && count > (addMode ? 0 : 1);
+              editData = (0, _Modifiers.getEditDataFromOperations)(image.fileName, operations, designProductionMethod);
+              currentEditData = (0, _Modifiers.getEditDataFromOperations)(image.fileName, image.operations || {}, designProductionMethod);
+              isBackendNeeded = createCopy || !(0, _isEqual["default"])(editData, currentEditData);
+              if (!isBackendNeeded) {
+                _context35.next = 29;
+                break;
+              }
+              _context35.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)) {
+                _context35.next = 31;
+                break;
+              }
+              throw new Error('Preview image url is not specified!');
+            case 31:
+              if (!(0, _Selectors2.isEditableVectorImage)(preview)) {
+                _context35.next = 40;
+                break;
+              }
+              _designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
+              _context35.next = 35;
+              return getSvgContent(preview.url, false, !operationsMatching);
+            case 35:
+              svgContent = _context35.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)
                 });
-
-                if (!(!operationsMatching || !imageIsCompatible)) {
-                  _context34.next = 29;
-                  break;
-                }
-
-                if (!image.operations) {
-                  operations.vectorizeThreshold = null;
-                }
-
-                operations = makeOperationsCompatible(operations, compatibilityInfoHash, designProductionMethod.colorPalettes);
-
-                if (!image.gallery) {
-                  _context34.next = 18;
-                  break;
-                }
-
-                operations = _objectSpread(_objectSpread({}, operations || {}), {}, {
-                  vectorizeColorsMap: operations.vectorizeColorsMap
+                vectorizeOriginalColorsMap = (0, _Modifiers.createVectorizeColorsMap)({}, svgColors);
+                operations = _objectSpread(_objectSpread({}, operations), {}, {
+                  vectorizeOriginalColorsMap: vectorizeOriginalColorsMap,
+                  vectorizeColorsMap: vectorizeColorsMap
                 });
-                _context34.next = 29;
-                break;
-
-              case 18:
-                _getImageUsageInfo = (0, _Selectors2.getImageUsageInfo)(_ServiceLocator.Services.store.state, image.identifier), designAreas = _getImageUsageInfo.designAreas, count = _getImageUsageInfo.count;
-                createCopy = !!(designAreas > 1 && image.compatibilityInfoHash && !imageIsCompatible) || !operationsMatching && count > (addMode ? 0 : 1);
-                editData = (0, _Modifiers.getEditDataFromOperations)(image.fileName, operations, designProductionMethod);
-                currentEditData = (0, _Modifiers.getEditDataFromOperations)(image.fileName, image.operations || {}, designProductionMethod);
-                isBackendNeeded = createCopy || !(0, _isEqual["default"])(editData, currentEditData);
-
-                if (!isBackendNeeded) {
-                  _context34.next = 29;
-                  break;
-                }
-
-                _context34.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)) {
-                  _context34.next = 31;
-                  break;
-                }
-
-                throw new Error('Preview image url is not specified!');
-
-              case 31:
-                if (!(0, _Selectors2.isEditableVectorImage)(preview)) {
-                  _context34.next = 40;
-                  break;
-                }
-
-                _designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-                _context34.next = 35;
-                return getSvgContent(preview.url, false, !operationsMatching);
-
-              case 35:
-                svgContent = _context34.sent;
-                svgColors = getSvgColors(svgContent, _designProductionMethod);
-                vectorizeColorsMap = (0, _Modifiers.createVectorizeColorsMap)(operations.vectorizeColorsMap, svgColors);
-                thresholdChanged = operations.vectorizeThreshold !== (0, _get2["default"])(image, 'operations.vectorizeThreshold', 0); // prepare initial values for the vectorize feature
+              } else if (thresholdChanged) {
+                operations.vectorizeColorsMap = (0, _ImageEditUtils.expandVectorizeColorsMap)(vectorizeColorsMap, _designProductionMethod.colorPalettes, operations.vectorizeThreshold);
 
-                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);
-                    }
+                // 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 _context34.abrupt("return", {
-                  vectorizeColorsMap: operations.vectorizeColorsMap,
-                  vectorizeThreshold: operations.vectorizeThreshold,
-                  vectorizeMaxColorAmount: operations.vectorizeMaxColorAmount,
-                  vectorizeOriginalColorsMap: operations.vectorizeOriginalColorsMap
-                });
-
-              case 43:
-              case "end":
-                return _context34.stop();
-            }
+              } 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 _context35.abrupt("return", {
+                vectorizeColorsMap: operations.vectorizeColorsMap,
+                vectorizeThreshold: operations.vectorizeThreshold,
+                vectorizeMaxColorAmount: operations.vectorizeMaxColorAmount,
+                vectorizeOriginalColorsMap: operations.vectorizeOriginalColorsMap
+              });
+            case 43:
+            case "end":
+              return _context35.stop();
           }
-        }, _callee33, this);
+        }, _callee34, this);
       }));
-
       function editFile(_x38, _x39) {
         return _editFile.apply(this, arguments);
       }
-
       return editFile;
     }()
   }, {
     key: "resetEditedFile",
     value: function () {
-      var _resetEditedFile = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee34(image) {
+      var _resetEditedFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee35(image) {
         var state, _image, operations, vectorizeColorsMap, resetOperations, designProductionMethod;
-
-        return regeneratorRuntime.wrap(function _callee34$(_context35) {
-          while (1) {
-            switch (_context35.prev = _context35.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
-                  });
-                }
-
-                _context35.next = 7;
-                return this.editFileQueued(resetOperations, image);
-
-              case 7:
-                return _context35.abrupt("return", _context35.sent);
-
-              case 8:
-              case "end":
-                return _context35.stop();
-            }
+        return _regeneratorRuntime().wrap(function _callee35$(_context36) {
+          while (1) switch (_context36.prev = _context36.next) {
+            case 0:
+              state = _ServiceLocator.Services.store.state;
+              if (!image) {
+                image = state.imageGallery.selectedImage;
+              }
+              _image = image, operations = _image.operations;
+              vectorizeColorsMap = _extends({}, (_objectDestructuringEmpty(operations.vectorizeOriginalColorsMap), 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
+                });
+              }
+              _context36.next = 7;
+              return this.editFileQueued(resetOperations, image);
+            case 7:
+              return _context36.abrupt("return", _context36.sent);
+            case 8:
+            case "end":
+              return _context36.stop();
           }
-        }, _callee34, this);
+        }, _callee35, this);
       }));
-
       function resetEditedFile(_x40) {
         return _resetEditedFile.apply(this, arguments);
       }
-
       return resetEditedFile;
     }()
   }, {
@@ -3291,18 +2744,12 @@ var DesignDataService = /*#__PURE__*/function () {
     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');