@configuratorware/configurator-frontendgui 1.28.3 → 1.29.1

package/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -0,0 +1,1130 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ImageEditDialogContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _size = _interopRequireDefault(require("lodash/size"));
+
+var _isMatch = _interopRequireDefault(require("lodash/isMatch"));
+
+var _ComponentContainer = _interopRequireDefault(require("../../../../Framework/ComponentContainer"));
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _ServiceLocator = require("../../../ServiceLocator");
+
+var _Selectors = require("../../../Reducers/DesignArea/Selectors");
+
+var _Selectors2 = require("../../../Reducers/DesignData/Selectors");
+
+var _Selectors3 = require("../../../Reducers/ImageGallery/Selectors");
+
+var _Selectors4 = require("../../../Reducers/UI/Selectors");
+
+var _Actions = require("../../../Reducers/ImageGallery/Actions");
+
+var _ImageEditDialog = _interopRequireDefault(require("../Components/ImageEditDialog"));
+
+var _ImageUpload = _interopRequireDefault(require("../Components/ImageEditDialog/ImageUpload"));
+
+var _ImageColorize = _interopRequireDefault(require("../Components/ImageColorize"));
+
+var _FeedbackNotice = _interopRequireDefault(require("../Components/FeedbackNotice"));
+
+var _Progress = _interopRequireDefault(require("../../../Shared/Components/Progress/Progress"));
+
+var _DesignDataService = require("../../../Services/DesignDataService");
+
+var _AddGalleryImage = _interopRequireDefault(require("./AddGalleryImage"));
+
+var _createSelector = _interopRequireDefault(require("../../../../Utils/Function/createSelector"));
+
+var _configuration = require("../../../configuration");
+
+var _Constant = require("../../../Constant");
+
+var _ImageEditUtils = require("../Utils/ImageEditUtils");
+
+var _Transformers = require("../Utils/Transformers");
+
+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 _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 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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; }
+
+var getOperationsFromState = function getOperationsFromState(state) {
+  var clipping = state.clipping,
+      clippingColor = state.clippingColor,
+      vectorize = state.vectorize,
+      vectorizeThreshold = state.vectorizeThreshold,
+      vectorizeColorsMap = state.vectorizeColorsMap;
+  return {
+    clipping: clipping,
+    clippingColor: clippingColor,
+    vectorize: vectorize,
+    vectorizeThreshold: vectorizeThreshold,
+    vectorizeColorsMap: vectorizeColorsMap
+  };
+};
+
+var getLoadingState = (0, _Selectors4.createBackgroundWorkStateSelector)(_Actions.WN_UPLOAD_IMAGE);
+
+var isVectorizableGalleryImage = function isVectorizableGalleryImage(imageData) {
+  return Boolean(imageData && !(0, _get["default"])(imageData, 'operations.vectorize') && imageData.gallery && (0, _Selectors3.isEditableVectorImage)(imageData.preview));
+};
+
+var getDerivedOperationStateFromImageData = function getDerivedOperationStateFromImageData(imageData) {
+  return {
+    clipping: (0, _get["default"])(imageData, 'operations.clipping', null),
+    clippingColor: (0, _get["default"])(imageData, 'operations.clippingColor', null),
+    vectorize: !!(0, _get["default"])(imageData, 'operations.vectorize', false),
+    vectorizeThreshold: (0, _get["default"])(imageData, 'operations.vectorizeThreshold', 0),
+    vectorizeColorsMap: (0, _get["default"])(imageData, 'operations.vectorizeColorsMap', {}),
+    vectorizeOriginalColorsMap: (0, _get["default"])(imageData, 'operations.vectorizeOriginalColorsMap', {}),
+    vectorizeMaxColorAmount: (0, _get["default"])(imageData, 'operations.vectorizeMaxColorAmount', undefined)
+  };
+};
+
+var isImageInvalidatedByChange = function isImageInvalidatedByChange(imageData1, imageData2) {
+  return ['operations.clipping', 'operations.clippingColor', 'displayColorPreview'].some(function (key) {
+    return (0, _get["default"])(imageData1, key, null) !== (0, _get["default"])(imageData2, key, null);
+  });
+};
+
+var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImageEditDialogContainer, _React$Component);
+
+  var _super = _createSuper(ImageEditDialogContainer);
+
+  function ImageEditDialogContainer() {
+    var _this;
+
+    _classCallCheck(this, ImageEditDialogContainer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "colorAmountNoticeRef", /*#__PURE__*/_react["default"].createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "embroideryNoticeRef", /*#__PURE__*/_react["default"].createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "imageUploadRef", /*#__PURE__*/_react["default"].createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      preview: null,
+      clipping: null,
+      clippingColor: null,
+      vectorize: false,
+      vectorizeThreshold: 0,
+      vectorizeMaxColorAmount: undefined,
+      vectorizeColorsMap: {},
+      vectorizeOriginalColorsMap: {},
+      activeTabIndex: 0,
+      showAddImagePanel: false,
+      colorAmount: 0,
+      continueButtonDisabled: false,
+      originalImagePreview: null,
+      upload: null
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "lastImageUpdateData", null);
+
+    _defineProperty(_assertThisInitialized(_this), "setUpload", function (upload) {
+      _this.setState({
+        upload: upload
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "resetDerivedImageState", function () {
+      _this.setState(_objectSpread({
+        originalImagePreview: null
+      }, getDerivedOperationStateFromImageData()));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "changeSelectedBackground", function (value) {
+      var partialState = {
+        clipping: value
+      };
+
+      if (value !== null && _this.state.clippingColor === null) {
+        partialState.clippingColor = '#ffffff';
+      } // remove the threshold value to trigger the re-creation of the color map
+
+
+      if (_this.state.vectorizeThreshold) {
+        partialState.vectorizeThreshold = null;
+      }
+
+      _this.handleStateChange(partialState);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "changeColor", function (color) {
+      var partialState = {
+        clippingColor: color.hex
+      };
+
+      if (_this.state.clipping === null) {
+        partialState.clipping = 'replace';
+      } // remove the threshold value to trigger the re-creation of the color map
+
+
+      if (_this.state.vectorizeThreshold) {
+        partialState.vectorizeThreshold = null;
+      }
+
+      _this.handleStateChange(partialState);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleStateChange", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(partialState) {
+        var options,
+            displayColorPreview,
+            image,
+            nextState,
+            operations,
+            result,
+            vectorizeColorsMap,
+            vectorizeThreshold,
+            vectorizeMaxColorAmount,
+            vectorizeOriginalColorsMap,
+            _args = arguments;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+                displayColorPreview = options.displayColorPreview;
+                image = _this.props.image;
+                nextState = _objectSpread(_objectSpread({}, _this.state), partialState);
+
+                _this.setState(nextState);
+
+                operations = getOperationsFromState(nextState);
+
+                if (!(!image || (0, _isMatch["default"])(image.operations, operations) && image.displayColorPreview === displayColorPreview)) {
+                  _context.next = 8;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 8:
+                _this.continueBlocked = true;
+                _context.prev = 9;
+                _context.next = 12;
+                return _this.props.editFile(operations, image, displayColorPreview !== undefined && {
+                  displayColorPreview: displayColorPreview
+                });
+
+              case 12:
+                result = _context.sent;
+                vectorizeColorsMap = result.vectorizeColorsMap, vectorizeThreshold = result.vectorizeThreshold, vectorizeMaxColorAmount = result.vectorizeMaxColorAmount, vectorizeOriginalColorsMap = result.vectorizeOriginalColorsMap;
+
+                _this.setState({
+                  vectorizeColorsMap: vectorizeColorsMap,
+                  vectorizeThreshold: vectorizeThreshold,
+                  vectorizeMaxColorAmount: vectorizeMaxColorAmount,
+                  vectorizeOriginalColorsMap: vectorizeOriginalColorsMap
+                });
+
+              case 15:
+                _context.prev = 15;
+                _this.continueBlocked = false;
+                return _context.finish(15);
+
+              case 18:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[9,, 15, 18]]);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "onVectorizeToggleChange", function (value) {
+      _this.handleStateChange({
+        vectorize: value
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onVectorizeThresholdChange", function (threshold) {
+      var image = _this.props.image; // skip if the threshold is the same as the color count
+
+      var colorCount = (0, _Selectors2.getAggregatedColorCount)(_this.state.vectorizeColorsMap);
+
+      if (threshold === colorCount) {
+        return;
+      }
+
+      if (threshold !== _this.state.vectorizeThreshold && !image.gallery) {
+        return _this.handleStateChange({
+          vectorizeThreshold: threshold
+        });
+      } // if the threshold value is the same, there might be some aggregated colors to restore
+
+
+      return _this.handleStateChange(_objectSpread({
+        vectorizeColorsMap: (0, _ImageEditUtils.expandVectorizeColorsMap)(_this.state.vectorizeColorsMap, _this.props.colorPalettes, threshold)
+      }, image.gallery && {
+        vectorizeThreshold: threshold
+      }));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onColorImageStateReset", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return _this.props.resetColorizing();
+
+            case 2:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "selectColor", /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(colorKey, newColor) {
+        var vectorizeColorsMap, colorKeys, _colorKey, _iterator, _step, _colorKey2;
+
+        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                vectorizeColorsMap = (0, _cloneDeep["default"])(_this.state.vectorizeColorsMap);
+                colorKeys = (0, _Selectors2.getColorKeysForAggregatedColor)(vectorizeColorsMap, colorKey);
+
+                if (!_ServiceLocator.Services.designData.changeAllColorsNeeded()) {
+                  _context3.next = 13;
+                  break;
+                }
+
+                _context3.t0 = regeneratorRuntime.keys(vectorizeColorsMap);
+
+              case 4:
+                if ((_context3.t1 = _context3.t0()).done) {
+                  _context3.next = 11;
+                  break;
+                }
+
+                _colorKey = _context3.t1.value;
+
+                if (vectorizeColorsMap.hasOwnProperty(_colorKey)) {
+                  _context3.next = 8;
+                  break;
+                }
+
+                return _context3.abrupt("continue", 4);
+
+              case 8:
+                vectorizeColorsMap[_colorKey] = newColor;
+                _context3.next = 4;
+                break;
+
+              case 11:
+                _context3.next = 15;
+                break;
+
+              case 13:
+                _iterator = _createForOfIteratorHelper(colorKeys);
+
+                try {
+                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                    _colorKey2 = _step.value;
+                    vectorizeColorsMap[_colorKey2] = _objectSpread(_objectSpread({}, newColor), {}, {
+                      isUserColor: true
+                    });
+                  }
+                } catch (err) {
+                  _iterator.e(err);
+                } finally {
+                  _iterator.f();
+                }
+
+              case 15:
+                _context3.next = 17;
+                return _this.handleStateChange({
+                  vectorizeColorsMap: vectorizeColorsMap
+                });
+
+              case 17:
+                _ServiceLocator.Services.designData.setImageAndTextColor(newColor);
+
+                _ServiceLocator.Services.analytics.triggerEvent(_Constant.EventTypes.image_edit_colorize_color, newColor.value.replace('#', ''));
+
+              case 19:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      return function (_x2, _x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "removeColor", /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(colorKey) {
+        var vectorizeColorsMap, closestColor;
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                vectorizeColorsMap = _this.state.vectorizeColorsMap;
+
+                if (vectorizeColorsMap[colorKey]) {
+                  _context4.next = 3;
+                  break;
+                }
+
+                throw new Error('Color key does not exist!');
+
+              case 3:
+                closestColor = (0, _ImageEditUtils.getClosestColorFromMap)(vectorizeColorsMap, vectorizeColorsMap[colorKey].value);
+                _context4.next = 6;
+                return _this.selectColor(colorKey, closestColor);
+
+              case 6:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4);
+      }));
+
+      return function (_x4) {
+        return _ref4.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "onActiveTabChange", function (activeTabIndex) {
+      var image = _this.props.image;
+      var upload = _this.state.upload;
+
+      if (upload !== null) {
+        return;
+      }
+
+      if (!image && [1, 2].indexOf(activeTabIndex) !== -1) {
+        return;
+      }
+
+      _this.setState({
+        activeTabIndex: activeTabIndex
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updatePreview", /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(svgContent) {
+        var options,
+            _options$forceFetch,
+            forceFetch,
+            image,
+            activeTabIndex,
+            preview,
+            originalImagePreview,
+            updateSVG,
+            forceUpdate,
+            _args5 = arguments;
+
+        return regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                options = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : {};
+                _options$forceFetch = options.forceFetch, forceFetch = _options$forceFetch === void 0 ? false : _options$forceFetch;
+                image = _this.props.image;
+                activeTabIndex = _this.state.activeTabIndex;
+                preview = null;
+                originalImagePreview = null;
+
+                if (!image) {
+                  _context5.next = 20;
+                  break;
+                }
+
+                updateSVG = activeTabIndex !== 1 && (image.displayColorPreview || image.gallery) && (0, _Selectors3.isEditableVectorImage)(image.preview);
+
+                if (!updateSVG) {
+                  _context5.next = 16;
+                  break;
+                }
+
+                if (svgContent) {
+                  _context5.next = 13;
+                  break;
+                }
+
+                _context5.next = 12;
+                return (0, _DesignDataService.getSvgContent)(image.preview.url, false, forceFetch);
+
+              case 12:
+                svgContent = _context5.sent;
+
+              case 13:
+                preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, image.operations, svgContent);
+                _context5.next = 20;
+                break;
+
+              case 16:
+                forceUpdate = isImageInvalidatedByChange(_this.lastImageUpdateData, image);
+
+                if (forceUpdate) {
+                  _this.previewVersion = Math.random();
+                }
+
+                preview = (0, _Transformers.getRasterURL)((0, _Selectors3.getPreviewUrlFromImageData)(image.preview)) + (_this.previewVersion ? "?".concat(_this.previewVersion) : '');
+                originalImagePreview = preview;
+
+              case 20:
+                _this.lastImageUpdateData = image;
+
+                _this.setState({
+                  preview: preview,
+                  originalImagePreview: originalImagePreview
+                });
+
+              case 22:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5);
+      }));
+
+      return function (_x5) {
+        return _ref5.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "closeAddImagePanel", function () {
+      return _this.setState({
+        showAddImagePanel: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSelectImage", /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(file) {
+        var addGalleryImageToUserImages, imageUrl, thumbUrl, fileName, vectorizeColorsMap;
+        return regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                addGalleryImageToUserImages = _this.props.addGalleryImageToUserImages;
+                imageUrl = file.imageUrl, thumbUrl = file.thumbUrl;
+                fileName = imageUrl.replace(/^.*[\\/]/, '') // get filename
+                .replace(/\.[^.$]+$/, ''); // remove extension
+
+                _context6.next = 5;
+                return _ServiceLocator.Services.designData.getGalleryImageColors(imageUrl);
+
+              case 5:
+                vectorizeColorsMap = _context6.sent;
+                addGalleryImageToUserImages(imageUrl, thumbUrl, fileName, vectorizeColorsMap); // exit image upload if a gallery image is selected
+
+                _this.setUpload(null);
+
+              case 8:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6);
+      }));
+
+      return function (_x6) {
+        return _ref6.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "continueClick", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+      var _this$props, colorDisabled, image, shouldAddImageImmediately, colorPreviewRequirementFulfilled, _this$state, activeTabIndex, continueButtonDisabled;
+
+      return regeneratorRuntime.wrap(function _callee7$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              if (!_this.continueBlocked) {
+                _context7.next = 2;
+                break;
+              }
+
+              return _context7.abrupt("return");
+
+            case 2:
+              _this$props = _this.props, colorDisabled = _this$props.colorDisabled, image = _this$props.image, shouldAddImageImmediately = _this$props.shouldAddImageImmediately, colorPreviewRequirementFulfilled = _this$props.colorPreviewRequirementFulfilled;
+              _this$state = _this.state, activeTabIndex = _this$state.activeTabIndex, continueButtonDisabled = _this$state.continueButtonDisabled;
+
+              if (!(activeTabIndex === 0 && shouldAddImageImmediately(image))) {
+                _context7.next = 13;
+                break;
+              }
+
+              _this.continueBlocked = true;
+              _context7.prev = 6;
+              _context7.next = 9;
+              return _ServiceLocator.Services.designer.imageEditDialogContinueClickHandler();
+
+            case 9:
+              _context7.prev = 9;
+              _this.continueBlocked = false;
+              return _context7.finish(9);
+
+            case 12:
+              return _context7.abrupt("return");
+
+            case 13:
+              if (!(activeTabIndex === 0)) {
+                _context7.next = 16;
+                break;
+              }
+
+              _this.setState({
+                activeTabIndex: image.gallery ? 2 : 1
+              });
+
+              return _context7.abrupt("return");
+
+            case 16:
+              if (!(activeTabIndex === 1 && !colorDisabled)) {
+                _context7.next = 19;
+                break;
+              }
+
+              _this.setState({
+                activeTabIndex: 2
+              });
+
+              return _context7.abrupt("return");
+
+            case 19:
+              if (!(activeTabIndex === 2 && !colorPreviewRequirementFulfilled)) {
+                _context7.next = 23;
+                break;
+              }
+
+              if (!(_this.embroideryNoticeRef && _this.embroideryNoticeRef.current)) {
+                _context7.next = 23;
+                break;
+              }
+
+              _this.embroideryNoticeRef.current.scrollIntoView();
+
+              return _context7.abrupt("return");
+
+            case 23:
+              if (!continueButtonDisabled) {
+                _context7.next = 27;
+                break;
+              }
+
+              if (!(_this.colorAmountNoticeRef && _this.colorAmountNoticeRef.current)) {
+                _context7.next = 27;
+                break;
+              }
+
+              _this.colorAmountNoticeRef.current.scrollIntoView();
+
+              return _context7.abrupt("return");
+
+            case 27:
+              _this.continueBlocked = true;
+              _context7.prev = 28;
+              _context7.next = 31;
+              return _ServiceLocator.Services.designer.imageEditDialogContinueClickHandler();
+
+            case 31:
+              _context7.prev = 31;
+              _this.continueBlocked = false;
+              return _context7.finish(31);
+
+            case 34:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7, null, [[6,, 9, 12], [28,, 31, 34]]);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "onGalleryClick", function () {
+      _this.setState({
+        showAddImagePanel: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closePreviewDialog", function () {
+      _ServiceLocator.Services.designer.imageEditDialogCloseHandler();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onOriginalImageAndColorPreviewToggleClick", function () {
+      _this.handleStateChange({}, {
+        displayColorPreview: !_this.props.displayColorPreview
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "uploadImage", function () {
+      return _this.imageUploadRef.current.uploadFile();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onNewUploadClick", function () {
+      _this.setUpload({
+        disabled: true
+      });
+
+      _this.resetDerivedImageState();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "selectUserImage", function (imageIndex) {
+      var _this$props2 = _this.props,
+          userImages = _this$props2.userImages,
+          setSelectedImage = _this$props2.setSelectedImage;
+      setSelectedImage(userImages[imageIndex].identifier);
+
+      _this.resetDerivedImageState();
+    });
+
+    return _this;
+  }
+
+  _createClass(ImageEditDialogContainer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.updatePreview(null);
+      var _this$props3 = this.props,
+          image = _this$props3.image,
+          editMode = _this$props3.editMode,
+          hasPlaceHolderImage = _this$props3.hasPlaceHolderImage,
+          colorDisabled = _this$props3.colorDisabled;
+      var initialState = getDerivedOperationStateFromImageData(image);
+
+      if (editMode && image && !hasPlaceHolderImage) {
+        initialState.activeTabIndex = initialState.vectorize && !colorDisabled ? 2 : 1;
+      }
+
+      this.setState(initialState);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$props4 = this.props,
+          image = _this$props4.image,
+          open = _this$props4.open,
+          maxColorAmount = _this$props4.maxColorAmount,
+          editMode = _this$props4.editMode,
+          hasPlaceHolderImage = _this$props4.hasPlaceHolderImage,
+          isImageCompatible = _this$props4.isImageCompatible,
+          isColorMappingCompatible = _this$props4.isColorMappingCompatible,
+          vectorsRequired = _this$props4.vectorsRequired;
+      var _this$state2 = this.state,
+          vectorize = _this$state2.vectorize,
+          vectorizeColorsMap = _this$state2.vectorizeColorsMap,
+          activeTabIndex = _this$state2.activeTabIndex,
+          originalImagePreview = _this$state2.originalImagePreview;
+      var newState = {};
+      var justOpened = open !== prevProps.open && open;
+      var imageChanged = !!image && image !== prevProps.image;
+      var prevOperationData = getDerivedOperationStateFromImageData(prevProps.image);
+      var operationData = getDerivedOperationStateFromImageData(image);
+      var operationsChanged = !!image && !(0, _isEqual["default"])(prevOperationData, operationData);
+
+      if (image && image.preview && image.preview.url && activeTabIndex === 2 && originalImagePreview === null) {
+        var previewUrl = "".concat((0, _configuration.getConf)('network.host')).concat(image.preview.url);
+        this.setState({
+          originalImagePreview: image.gallery ? previewUrl : previewUrl.replace(/.svg$/, '.png')
+        });
+      }
+
+      if (operationsChanged) {
+        Object.assign(newState, operationData);
+      }
+
+      if (justOpened) {
+        var _activeTabIndex = 0;
+
+        if (image && editMode && !hasPlaceHolderImage) {
+          _activeTabIndex = (0, _Selectors3.isEditableVectorImage)(image.preview) ? 2 : 1;
+        }
+
+        Object.assign(newState, {
+          activeTabIndex: _activeTabIndex
+        });
+      }
+
+      if (maxColorAmount !== prevProps.maxColorAmount || vectorize !== prevState.vectorize || vectorizeColorsMap !== prevState.vectorizeColorsMap || activeTabIndex !== prevState.activeTabIndex) {
+        var colorAmount = (0, _Selectors2.getAggregatedColorCount)(vectorizeColorsMap);
+        var continueButtonDisabled = activeTabIndex === 2 && vectorize && !!maxColorAmount && colorAmount > maxColorAmount;
+        this.setState({
+          colorAmount: colorAmount,
+          continueButtonDisabled: continueButtonDisabled
+        });
+      }
+
+      if (activeTabIndex === 2 && isVectorizableGalleryImage(image) && (!vectorize || // if the user comes from the background removal tab vectorizing should be performed again
+      prevState.activeTabIndex === 1)) {
+        Object.assign(newState, {
+          vectorize: true
+        });
+      } // when switching to the colorizing tab the color has to be made compatible
+
+
+      if (activeTabIndex === 2 && activeTabIndex !== prevState.activeTabIndex && (!isImageCompatible(image) || !isColorMappingCompatible(vectorizeColorsMap))) {
+        Object.assign(newState, {
+          vectorizeColorsMap: vectorizeColorsMap
+        });
+      }
+
+      if (activeTabIndex === 2 && vectorsRequired && !vectorize && !image.gallery) {
+        Object.assign(newState, {
+          vectorize: true
+        });
+      }
+
+      !(0, _isMatch["default"])(this.state, newState) && this.handleStateChange(newState);
+
+      if ((justOpened || imageChanged) && !image.incomplete) {
+        this.updatePreview(null, {
+          forceFetch: operationsChanged
+        });
+      } else if (activeTabIndex !== prevState.activeTabIndex && vectorize) {
+        this.updatePreview(null, {
+          forceFetch: true
+        });
+      } // update upload state if it is just opened
+
+
+      if (justOpened) {
+        var _this$props5 = this.props,
+            userImages = _this$props5.userImages,
+            galleryHasImages = _this$props5.galleryHasImages;
+        var upload = null; // if no gallery images, default to user upload
+
+        if (!image && !userImages.length && !galleryHasImages) {
+          upload = {
+            disabled: true
+          };
+        }
+
+        this.setUpload(upload);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props6 = this.props,
+          loading = _this$props6.loading,
+          ProgressComponent = _this$props6.ProgressComponent,
+          errorCode = _this$props6.errorCode,
+          colorPalettes = _this$props6.colorPalettes,
+          maxColorAmount = _this$props6.maxColorAmount,
+          colorDisabled = _this$props6.colorDisabled,
+          vectorsRequired = _this$props6.vectorsRequired,
+          image = _this$props6.image,
+          usedColors = _this$props6.usedColors,
+          imageColorsWereEdited = _this$props6.imageColorsWereEdited,
+          colorPreviewEnabled = _this$props6.colorPreviewEnabled,
+          colorPreviewRequirementFulfilled = _this$props6.colorPreviewRequirementFulfilled,
+          uploadSize = _this$props6.uploadSize,
+          ImageColorizeComponent = _this$props6.ImageColorizeComponent,
+          ImageUploadComponent = _this$props6.ImageUploadComponent,
+          customControlElements = _this$props6.customControlElements,
+          checkOwnership = _this$props6.checkOwnership;
+      var _this$state3 = this.state,
+          preview = _this$state3.preview,
+          clipping = _this$state3.clipping,
+          vectorize = _this$state3.vectorize,
+          vectorizeColorsMap = _this$state3.vectorizeColorsMap,
+          activeTabIndex = _this$state3.activeTabIndex,
+          colorAmount = _this$state3.colorAmount,
+          continueButtonDisabled = _this$state3.continueButtonDisabled,
+          originalImagePreview = _this$state3.originalImagePreview,
+          upload = _this$state3.upload;
+      var isGalleryImage = image && !!image.gallery;
+      var showWarningMessage = (0, _Selectors3.showVectorizeImageQuality)(image);
+      var aggregatedColors = (0, _Selectors2.getAggregatedColors)(vectorizeColorsMap);
+      var colorAmountList = Array(maxColorAmount).fill(null).map(function (_, i) {
+        return i + 1;
+      });
+      var colorCount = (0, _size["default"])(aggregatedColors);
+      var colorPreviewBlockActive = activeTabIndex === 2 && colorCount > 0 && !isGalleryImage && (colorPreviewEnabled || !colorPreviewRequirementFulfilled);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ImageEditDialog["default"], _extends({}, this.props, {
+        loaderComponent: /*#__PURE__*/_react["default"].createElement(ProgressComponent, {
+          loading: loading
+        }),
+        errorFeedback: errorCode && /*#__PURE__*/_react["default"].createElement(_FeedbackNotice["default"], {
+          errorNotice: (0, _i18n.t)("fileUpload.errors.".concat(errorCode))
+        }),
+        changeSelectedBackground: this.changeSelectedBackground,
+        onChangeColor: this.changeColor,
+        closePreviewDialog: this.closePreviewDialog,
+        backgroundSelected: clipping,
+        preview: preview,
+        colorPickerEnabled: !!clipping,
+        continueButtonDisabled: continueButtonDisabled,
+        continueClick: this.continueClick,
+        showWarningMessage: showWarningMessage,
+        imageColorizeElement: /*#__PURE__*/_react["default"].createElement(ImageColorizeComponent, {
+          inputRef: this.colorAmountNoticeRef,
+          colorPalettes: colorPalettes,
+          usedColors: usedColors,
+          vectorizeThreshold: colorCount > maxColorAmount ? 0 : colorCount,
+          onVectorizeThresholdChange: this.onVectorizeThresholdChange,
+          vectorizeColorsMap: vectorizeColorsMap,
+          onColorSelectClick: this.selectColor,
+          onColorRemoveClick: this.removeColor,
+          aggregatedColors: aggregatedColors,
+          disableInputs: !vectorize && !isGalleryImage || colorDisabled,
+          maxColorAmount: maxColorAmount,
+          colorAmount: colorAmount,
+          vectorize: vectorize,
+          onVectorizeToggleChange: this.onVectorizeToggleChange,
+          vectorizeToggleDisabled: vectorsRequired || isGalleryImage && vectorize,
+          onColorImageStateReset: this.onColorImageStateReset,
+          isLoading: loading,
+          imageColorsWereEdited: imageColorsWereEdited,
+          vectorsRequired: vectorsRequired,
+          colorAmountList: colorAmountList,
+          customControlElements: customControlElements
+        }),
+        activeTabIndex: activeTabIndex,
+        onActiveTabChange: this.onActiveTabChange,
+        onGalleryClick: this.onGalleryClick,
+        onOriginalImageAndColorPreviewToggleClick: this.onOriginalImageAndColorPreviewToggleClick,
+        originalImagePreview: originalImagePreview,
+        embroideryNoticeRef: this.embroideryNoticeRef,
+        colorPreviewBlockActive: colorPreviewBlockActive,
+        onNewUploadClick: this.onNewUploadClick,
+        showUploadPanel: upload !== null,
+        uploadDisabled: !!(upload && upload.disabled),
+        uploadImage: this.uploadImage,
+        selectUserImage: this.selectUserImage,
+        imageUploadElement: /*#__PURE__*/_react["default"].createElement(ImageUploadComponent, {
+          innerRef: this.imageUploadRef,
+          uploadSize: uploadSize,
+          onValidate: function onValidate(_ref8) {
+            var isValid = _ref8.isValid;
+            return _this2.setUpload({
+              disabled: !isValid
+            });
+          },
+          onUploadFinished: function onUploadFinished() {
+            _this2.setUpload(null);
+
+            _this2.onActiveTabChange(1);
+          },
+          checkOwnership: checkOwnership
+        })
+      })), /*#__PURE__*/_react["default"].createElement(_AddGalleryImage["default"], {
+        open: this.state.showAddImagePanel,
+        onClose: this.closeAddImagePanel,
+        onSelectImage: this.onSelectImage
+      }));
+    }
+  }]);
+
+  return ImageEditDialogContainer;
+}(_react["default"].Component);
+
+exports.ImageEditDialogContainer = ImageEditDialogContainer;
+
+_defineProperty(ImageEditDialogContainer, "propTypes", {
+  image: _propTypes["default"].object,
+  open: _propTypes["default"].bool,
+  editMode: _propTypes["default"].bool,
+  vectorsRequired: _propTypes["default"].bool,
+  colorDisabled: _propTypes["default"].bool,
+  loading: _propTypes["default"].bool,
+  errorCode: _propTypes["default"].string,
+  colorPalettes: _propTypes["default"].array,
+  galleryHasImages: _propTypes["default"].bool,
+  hasPlaceHolderImage: _propTypes["default"].bool,
+  displayColorPreview: _propTypes["default"].bool,
+  imageColorsWereEdited: _propTypes["default"].bool,
+  initialColorMaxAmount: _propTypes["default"].number,
+  originalColorsMap: _propTypes["default"].object,
+  colorPreviewRequirementFulfilled: _propTypes["default"].bool,
+  colorPreviewEnabled: _propTypes["default"].bool,
+  userImages: _propTypes["default"].array.isRequired,
+  editFile: _propTypes["default"].func.isRequired,
+  ProgressComponent: _propTypes["default"].elementType.isRequired,
+  maxColorAmount: _propTypes["default"].number.isRequired,
+  usedColors: _propTypes["default"].array.isRequired,
+  addGalleryImageToUserImages: _propTypes["default"].func.isRequired,
+  setSelectedImage: _propTypes["default"].func.isRequired,
+  shouldAddImageImmediately: _propTypes["default"].func.isRequired,
+  isImageCompatible: _propTypes["default"].func.isRequired,
+  isColorMappingCompatible: _propTypes["default"].func.isRequired,
+  resetColorizing: _propTypes["default"].func.isRequired,
+  uploadSize: _propTypes["default"].number,
+  ImageColorizeComponent: _propTypes["default"].elementType,
+  ImageUploadComponent: _propTypes["default"].elementType,
+  customControlElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  checkOwnership: _propTypes["default"].bool
+});
+
+_defineProperty(ImageEditDialogContainer, "defaultProps", {
+  colorPreviewRequirementFulfilled: false,
+  colorPreviewEnabled: false,
+  checkOwnership: true
+});
+
+var getUserImages = (0, _createSelector["default"])(function (imageGalleryState) {
+  return imageGalleryState.userImages;
+}, function (images) {
+  var host = (0, _configuration.getConf)('network.host');
+  var userImages = images.filter(function (image) {
+    return !image.isPlaceHolderImage;
+  });
+  return userImages.map(function (image) {
+    return _objectSpread(_objectSpread({}, image), {}, {
+      url: "".concat(host).concat(image.thumbnail.url)
+    });
+  });
+});
+
+var mapStateToProps = function mapStateToProps(state) {
+  var ui = state.ui,
+      imageGallery = state.imageGallery;
+  var colorPalettes = (0, _Selectors.getColorPalettes)(state);
+  var designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(state);
+  var vectorsRequired = !!(0, _get["default"])(designProductionMethod, 'options.vectorsRequired');
+  var colorDisabled = (0, _Selectors.isColoringDisabled)(state);
+  var userImages = getUserImages(imageGallery);
+  var hasPlaceHolderImage = (0, _Selectors.hasPlaceHolderImagesForActiveDesignArea)(state);
+  var firstUserImageToPreSelect = userImages.length > 0 ? userImages[0] : null;
+  var userImage = imageGallery.selectedImage || firstUserImageToPreSelect;
+  var defaultMaxColorAmount = (0, _configuration.getConf)('designer.maxColorAmount', 10);
+  var maxColorAmount = Math.min(+(0, _get["default"])(designProductionMethod, 'options.maxColorAmount') || defaultMaxColorAmount, +(0, _get["default"])(userImage, 'operations.vectorizeMaxColorAmount', defaultMaxColorAmount));
+  var editMode = (0, _Selectors3.isEditMode)(state);
+  var galleryHasImages = imageGallery.gallery.length !== 0;
+  var uploadSize = (0, _Selectors.getMaxUploadSize)(state);
+  var open = !!ui.visibilityMap.imageEditDialog;
+  var usedColors = (0, _Selectors.getDesignDataUsedColors)(state);
+  var displayColorPreview = userImage && !!userImage.displayColorPreview;
+  var colorPreviewEnabled = userImage && !!userImage.colorPreviewEnabled;
+  var imageColorsWereEdited = userImage && !!userImage.imageColorsWereEdited;
+  var initialColorMaxAmount = (0, _Selectors2.getInitialMaxColorAmount)(state);
+  var colorPreviewRequirementFulfilled = (0, _Selectors3.isColorPreviewCompatible)(state, userImage);
+  return {
+    Component: open ? ImageEditDialogContainer : function () {
+      return null;
+    },
+    ProgressComponent: _Progress["default"],
+    ImageColorizeComponent: _ImageColorize["default"],
+    ImageUploadComponent: _ImageUpload["default"],
+    errorCode: imageGallery.lastErrorCode,
+    loading: getLoadingState(ui) || !!(userImage && userImage.incomplete),
+    image: userImage,
+    maxColorAmount: maxColorAmount,
+    displayColorPreview: displayColorPreview,
+    colorPreviewEnabled: colorPreviewEnabled,
+    imageColorsWereEdited: imageColorsWereEdited,
+    editMode: editMode,
+    open: open,
+    userImages: userImages,
+    colorPalettes: colorPalettes,
+    vectorsRequired: vectorsRequired,
+    colorDisabled: colorDisabled,
+    uploadSize: uploadSize,
+    galleryHasImages: galleryHasImages,
+    usedColors: usedColors,
+    hasPlaceHolderImage: hasPlaceHolderImage,
+    initialColorMaxAmount: initialColorMaxAmount,
+    colorPreviewRequirementFulfilled: colorPreviewRequirementFulfilled
+  };
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    editFile: function editFile(operations, image) {
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      return _ServiceLocator.Services.designData.editFileQueued(operations, image, _objectSpread({
+        addMode: (0, _Selectors3.isAddMode)(_ServiceLocator.Services.store.state)
+      }, options));
+    },
+    setSelectedImage: function setSelectedImage(identifier) {
+      return dispatch((0, _Actions.setSelectedImageByIdentifier)(identifier));
+    },
+    addGalleryImageToUserImages: function addGalleryImageToUserImages(imageUrl, thumbUrl, fileName, vectorizeColorsMap) {
+      return dispatch((0, _Actions.addGalleryImageToUserImages)(imageUrl, thumbUrl, fileName, vectorizeColorsMap));
+    },
+    shouldAddImageImmediately: function shouldAddImageImmediately(imageData) {
+      return (0, _Selectors3.isImageReadyToBeAdded)(_ServiceLocator.Services.store.state, imageData);
+    },
+    isColorMappingCompatible: function isColorMappingCompatible(vectorizeColorsMap) {
+      return (0, _Selectors3.isColorMappingCompatible)((0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state).colorPalettes, vectorizeColorsMap);
+    },
+    isImageCompatible: function isImageCompatible(imageData) {
+      return (0, _Selectors3.isImageCompatible)(_ServiceLocator.Services.store.state, imageData);
+    },
+    resetColorizing: function resetColorizing() {
+      return _ServiceLocator.Services.designData.resetEditedFile();
+    }
+  };
+};
+
+var _default = (0, _ComponentContainer["default"])(mapStateToProps, mapDispatchToProps);
+
+exports["default"] = _default;