@configuratorware/configurator-frontendgui 1.29.4 → 1.30.0

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

@@ -71,14 +71,14 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 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 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 _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); } }
@@ -181,6 +181,48 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "lastImageUpdateData", null);
 
+    _defineProperty(_assertThisInitialized(_this), "updateOriginalPreview", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var image, previewUrl, isSvg, svgContent, preview;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              image = _this.props.image;
+              previewUrl = "".concat((0, _configuration.getConf)('network.host')).concat(image.preview.url);
+              isSvg = previewUrl && /\.svg$/.test(previewUrl);
+
+              if (!isSvg) {
+                _context.next = 11;
+                break;
+              }
+
+              _context.next = 6;
+              return (0, _DesignDataService.getSvgContent)(previewUrl, true);
+
+            case 6:
+              svgContent = _context.sent;
+              preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, null, svgContent);
+
+              _this.setState({
+                originalImagePreview: preview
+              });
+
+              _context.next = 12;
+              break;
+
+            case 11:
+              _this.setState({
+                originalImagePreview: previewUrl
+              });
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+
     _defineProperty(_assertThisInitialized(_this), "setUpload", function (upload) {
       _this.setState({
         upload: upload
@@ -228,7 +270,7 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleStateChange", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(partialState) {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(partialState) {
         var options,
             displayColorPreview,
             image,
@@ -239,12 +281,12 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
             vectorizeThreshold,
             vectorizeMaxColorAmount,
             vectorizeOriginalColorsMap,
-            _args = arguments;
-        return regeneratorRuntime.wrap(function _callee$(_context) {
+            _args2 = arguments;
+        return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
-            switch (_context.prev = _context.next) {
+            switch (_context2.prev = _context2.next) {
               case 0:
-                options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+                options = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {};
                 displayColorPreview = options.displayColorPreview;
                 image = _this.props.image;
                 nextState = _objectSpread(_objectSpread({}, _this.state), partialState);
@@ -254,22 +296,22 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
                 operations = getOperationsFromState(nextState);
 
                 if (!(!image || (0, _isMatch["default"])(image.operations, operations) && image.displayColorPreview === displayColorPreview)) {
-                  _context.next = 8;
+                  _context2.next = 8;
                   break;
                 }
 
-                return _context.abrupt("return");
+                return _context2.abrupt("return");
 
               case 8:
                 _this.continueBlocked = true;
-                _context.prev = 9;
-                _context.next = 12;
+                _context2.prev = 9;
+                _context2.next = 12;
                 return _this.props.editFile(operations, image, displayColorPreview !== undefined && {
                   displayColorPreview: displayColorPreview
                 });
 
               case 12:
-                result = _context.sent;
+                result = _context2.sent;
                 vectorizeColorsMap = result.vectorizeColorsMap, vectorizeThreshold = result.vectorizeThreshold, vectorizeMaxColorAmount = result.vectorizeMaxColorAmount, vectorizeOriginalColorsMap = result.vectorizeOriginalColorsMap;
 
                 _this.setState({
@@ -280,20 +322,20 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
                 });
 
               case 15:
-                _context.prev = 15;
+                _context2.prev = 15;
                 _this.continueBlocked = false;
-                return _context.finish(15);
+                return _context2.finish(15);
 
               case 18:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
           }
-        }, _callee, null, [[9,, 15, 18]]);
+        }, _callee2, null, [[9,, 15, 18]]);
       }));
 
       return function (_x) {
-        return _ref.apply(this, arguments);
+        return _ref2.apply(this, arguments);
       };
     }());
 
@@ -326,62 +368,62 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
       }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onColorImageStateReset", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+    _defineProperty(_assertThisInitialized(_this), "onColorImageStateReset", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context2.next = 2;
+              _context3.next = 2;
               return _this.props.resetColorizing();
 
             case 2:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     })));
 
     _defineProperty(_assertThisInitialized(_this), "selectColor", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(colorKey, newColor) {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(colorKey, newColor) {
         var vectorizeColorsMap, colorKeys, _colorKey, _iterator, _step, _colorKey2;
 
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        return regeneratorRuntime.wrap(function _callee4$(_context4) {
           while (1) {
-            switch (_context3.prev = _context3.next) {
+            switch (_context4.prev = _context4.next) {
               case 0:
                 vectorizeColorsMap = (0, _cloneDeep["default"])(_this.state.vectorizeColorsMap);
                 colorKeys = (0, _Selectors2.getColorKeysForAggregatedColor)(vectorizeColorsMap, colorKey);
 
                 if (!_ServiceLocator.Services.designData.changeAllColorsNeeded()) {
-                  _context3.next = 13;
+                  _context4.next = 13;
                   break;
                 }
 
-                _context3.t0 = regeneratorRuntime.keys(vectorizeColorsMap);
+                _context4.t0 = regeneratorRuntime.keys(vectorizeColorsMap);
 
               case 4:
-                if ((_context3.t1 = _context3.t0()).done) {
-                  _context3.next = 11;
+                if ((_context4.t1 = _context4.t0()).done) {
+                  _context4.next = 11;
                   break;
                 }
 
-                _colorKey = _context3.t1.value;
+                _colorKey = _context4.t1.value;
 
                 if (vectorizeColorsMap.hasOwnProperty(_colorKey)) {
-                  _context3.next = 8;
+                  _context4.next = 8;
                   break;
                 }
 
-                return _context3.abrupt("continue", 4);
+                return _context4.abrupt("continue", 4);
 
               case 8:
                 vectorizeColorsMap[_colorKey] = newColor;
-                _context3.next = 4;
+                _context4.next = 4;
                 break;
 
               case 11:
-                _context3.next = 15;
+                _context4.next = 15;
                 break;
 
               case 13:
@@ -401,7 +443,7 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
                 }
 
               case 15:
-                _context3.next = 17;
+                _context4.next = 17;
                 return _this.handleStateChange({
                   vectorizeColorsMap: vectorizeColorsMap
                 });
@@ -413,28 +455,28 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
 
               case 19:
               case "end":
-                return _context3.stop();
+                return _context4.stop();
             }
           }
-        }, _callee3);
+        }, _callee4);
       }));
 
       return function (_x2, _x3) {
-        return _ref3.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }());
 
     _defineProperty(_assertThisInitialized(_this), "removeColor", /*#__PURE__*/function () {
-      var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(colorKey) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(colorKey) {
         var vectorizeColorsMap, closestColor;
-        return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        return regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) {
-            switch (_context4.prev = _context4.next) {
+            switch (_context5.prev = _context5.next) {
               case 0:
                 vectorizeColorsMap = _this.state.vectorizeColorsMap;
 
                 if (vectorizeColorsMap[colorKey]) {
-                  _context4.next = 3;
+                  _context5.next = 3;
                   break;
                 }
 
@@ -442,19 +484,19 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
 
               case 3:
                 closestColor = (0, _ImageEditUtils.getClosestColorFromMap)(vectorizeColorsMap, vectorizeColorsMap[colorKey].value);
-                _context4.next = 6;
+                _context5.next = 6;
                 return _this.selectColor(colorKey, closestColor);
 
               case 6:
               case "end":
-                return _context4.stop();
+                return _context5.stop();
             }
           }
-        }, _callee4);
+        }, _callee5);
       }));
 
       return function (_x4) {
-        return _ref4.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }());
 
@@ -476,7 +518,9 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "updatePreview", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(svgContent) {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(svgContent) {
+        var _image$preview;
+
         var options,
             _options$forceFetch,
             forceFetch,
@@ -484,60 +528,69 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
             activeTabIndex,
             preview,
             originalImagePreview,
+            previewUrl,
+            isSvg,
             updateSVG,
             forceUpdate,
-            _args5 = arguments;
+            _args6 = arguments;
 
-        return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        return regeneratorRuntime.wrap(function _callee6$(_context6) {
           while (1) {
-            switch (_context5.prev = _context5.next) {
+            switch (_context6.prev = _context6.next) {
               case 0:
-                options = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : {};
+                options = _args6.length > 1 && _args6[1] !== undefined ? _args6[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;
+                previewUrl = image === null || image === void 0 ? void 0 : (_image$preview = image.preview) === null || _image$preview === void 0 ? void 0 : _image$preview.url;
+
+                if (previewUrl && activeTabIndex === 1) {
+                  previewUrl = (0, _Transformers.getRasterURL)(previewUrl);
+                }
+
+                isSvg = previewUrl && /\.svg$/.test(previewUrl);
 
                 if (!image) {
-                  _context5.next = 20;
+                  _context6.next = 23;
                   break;
                 }
 
-                updateSVG = activeTabIndex !== 1 && (image.displayColorPreview || image.gallery) && (0, _Selectors3.isEditableVectorImage)(image.preview);
+                updateSVG = isSvg;
 
                 if (!updateSVG) {
-                  _context5.next = 16;
+                  _context6.next = 19;
                   break;
                 }
 
                 if (svgContent) {
-                  _context5.next = 13;
+                  _context6.next = 16;
                   break;
                 }
 
-                _context5.next = 12;
+                _context6.next = 15;
                 return (0, _DesignDataService.getSvgContent)(image.preview.url, false, forceFetch);
 
-              case 12:
-                svgContent = _context5.sent;
+              case 15:
+                svgContent = _context6.sent;
 
-              case 13:
-                preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, image.operations, svgContent);
-                _context5.next = 20;
+              case 16:
+                preview = (0, _DesignDataService.applySvgContentOperations)(image.preview, image.displayColorPreview ? image.operations : null, svgContent);
+                _context6.next = 23;
                 break;
 
-              case 16:
+              case 19:
                 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) : '');
+                preview = (0, _Selectors3.getPreviewUrlFromImageData)(previewUrl) + (_this.previewVersion ? "?".concat(_this.previewVersion) : '');
                 originalImagePreview = preview;
 
-              case 20:
+              case 23:
                 _this.lastImageUpdateData = image;
 
                 _this.setState({
@@ -545,16 +598,16 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
                   originalImagePreview: originalImagePreview
                 });
 
-              case 22:
+              case 25:
               case "end":
-                return _context5.stop();
+                return _context6.stop();
             }
           }
-        }, _callee5);
+        }, _callee6);
       }));
 
       return function (_x5) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }());
 
@@ -565,78 +618,78 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onSelectImage", /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(file) {
+      var _ref7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(file) {
         var addGalleryImageToUserImages, imageUrl, thumbUrl, fileName, vectorizeColorsMap;
-        return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        return regeneratorRuntime.wrap(function _callee7$(_context7) {
           while (1) {
-            switch (_context6.prev = _context6.next) {
+            switch (_context7.prev = _context7.next) {
               case 0:
                 addGalleryImageToUserImages = _this.props.addGalleryImageToUserImages;
                 imageUrl = file.imageUrl, thumbUrl = file.thumbUrl;
                 fileName = imageUrl.replace(/^.*[\\/]/, '') // get filename
                 .replace(/\.[^.$]+$/, ''); // remove extension
 
-                _context6.next = 5;
+                _context7.next = 5;
                 return _ServiceLocator.Services.designData.getGalleryImageColors(imageUrl);
 
               case 5:
-                vectorizeColorsMap = _context6.sent;
+                vectorizeColorsMap = _context7.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();
+                return _context7.stop();
             }
           }
-        }, _callee6);
+        }, _callee7);
       }));
 
       return function (_x6) {
-        return _ref6.apply(this, arguments);
+        return _ref7.apply(this, arguments);
       };
     }());
 
-    _defineProperty(_assertThisInitialized(_this), "continueClick", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    _defineProperty(_assertThisInitialized(_this), "continueClick", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
       var _this$props, colorDisabled, image, shouldAddImageImmediately, colorPreviewRequirementFulfilled, _this$state, activeTabIndex, continueButtonDisabled;
 
-      return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      return regeneratorRuntime.wrap(function _callee8$(_context8) {
         while (1) {
-          switch (_context7.prev = _context7.next) {
+          switch (_context8.prev = _context8.next) {
             case 0:
               if (!_this.continueBlocked) {
-                _context7.next = 2;
+                _context8.next = 2;
                 break;
               }
 
-              return _context7.abrupt("return");
+              return _context8.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;
+                _context8.next = 13;
                 break;
               }
 
               _this.continueBlocked = true;
-              _context7.prev = 6;
-              _context7.next = 9;
+              _context8.prev = 6;
+              _context8.next = 9;
               return _ServiceLocator.Services.designer.imageEditDialogContinueClickHandler();
 
             case 9:
-              _context7.prev = 9;
+              _context8.prev = 9;
               _this.continueBlocked = false;
-              return _context7.finish(9);
+              return _context8.finish(9);
 
             case 12:
-              return _context7.abrupt("return");
+              return _context8.abrupt("return");
 
             case 13:
               if (!(activeTabIndex === 0)) {
-                _context7.next = 16;
+                _context8.next = 16;
                 break;
               }
 
@@ -644,11 +697,11 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
                 activeTabIndex: image.gallery ? 2 : 1
               });
 
-              return _context7.abrupt("return");
+              return _context8.abrupt("return");
 
             case 16:
               if (!(activeTabIndex === 1 && !colorDisabled)) {
-                _context7.next = 19;
+                _context8.next = 19;
                 break;
               }
 
@@ -656,55 +709,55 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
                 activeTabIndex: 2
               });
 
-              return _context7.abrupt("return");
+              return _context8.abrupt("return");
 
             case 19:
               if (!(activeTabIndex === 2 && !colorPreviewRequirementFulfilled)) {
-                _context7.next = 23;
+                _context8.next = 23;
                 break;
               }
 
               if (!(_this.embroideryNoticeRef && _this.embroideryNoticeRef.current)) {
-                _context7.next = 23;
+                _context8.next = 23;
                 break;
               }
 
               _this.embroideryNoticeRef.current.scrollIntoView();
 
-              return _context7.abrupt("return");
+              return _context8.abrupt("return");
 
             case 23:
               if (!continueButtonDisabled) {
-                _context7.next = 27;
+                _context8.next = 27;
                 break;
               }
 
               if (!(_this.colorAmountNoticeRef && _this.colorAmountNoticeRef.current)) {
-                _context7.next = 27;
+                _context8.next = 27;
                 break;
               }
 
               _this.colorAmountNoticeRef.current.scrollIntoView();
 
-              return _context7.abrupt("return");
+              return _context8.abrupt("return");
 
             case 27:
               _this.continueBlocked = true;
-              _context7.prev = 28;
-              _context7.next = 31;
+              _context8.prev = 28;
+              _context8.next = 31;
               return _ServiceLocator.Services.designer.imageEditDialogContinueClickHandler();
 
             case 31:
-              _context7.prev = 31;
+              _context8.prev = 31;
               _this.continueBlocked = false;
-              return _context7.finish(31);
+              return _context8.finish(31);
 
             case 34:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
         }
-      }, _callee7, null, [[6,, 9, 12], [28,, 31, 34]]);
+      }, _callee8, null, [[6,, 9, 12], [28,, 31, 34]]);
     })));
 
     _defineProperty(_assertThisInitialized(_this), "onGalleryClick", function () {
@@ -788,11 +841,8 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
       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 (image && image.preview && image.preview.url && activeTabIndex === 2 && originalImagePreview === null && !(0, _Transformers.isOriginalVector)(image)) {
+        this.updateOriginalPreview();
       }
 
       if (operationsChanged) {
@@ -963,8 +1013,8 @@ var ImageEditDialogContainer = /*#__PURE__*/function (_React$Component) {
         imageUploadElement: /*#__PURE__*/_react["default"].createElement(ImageUploadComponent, {
           innerRef: this.imageUploadRef,
           uploadSize: uploadSize,
-          onValidate: function onValidate(_ref8) {
-            var isValid = _ref8.isValid;
+          onValidate: function onValidate(_ref9) {
+            var isValid = _ref9.isValid;
             return _this2.setUpload({
               disabled: !isValid
             });