@configuratorware/configurator-frontendgui 1.54.3 → 1.55.2

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

@@ -12,7 +12,7 @@ var _AddGalleryImage = _interopRequireDefault(require("../Components/AddGalleryI
 var _Progress = _interopRequireDefault(require("../../../Shared/Components/Progress/Progress"));
 var _Actions = require("../../../Reducers/ImageGallery/Actions");
 var _Selectors = require("../../../Reducers/UI/Selectors");
-var _configuration = require("../../../configuration");
+var _getUrl = require("../../../Utils/getUrl");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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); }
 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; }
@@ -41,10 +41,9 @@ var getTags = (0, _createSelector["default"])(function (imageGalleryState) {
 var getGalleryImages = (0, _createSelector["default"])(function (imageGalleryState) {
   return imageGalleryState.gallery;
 }, function (images) {
-  var host = (0, _configuration.getConf)('network.host');
   return images.map(function (image) {
     return _objectSpread(_objectSpread({}, image), {}, {
-      url: image.thumbUrl.startsWith('http') ? image.thumbUrl : "".concat(host).concat(image.thumbUrl)
+      url: (0, _getUrl.getUrl)(image.thumbUrl)
     });
   });
 });

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

@@ -28,6 +28,7 @@ var _DesignDataService = require("../../../Services/DesignDataService");
 var _AddGalleryImage = _interopRequireDefault(require("./AddGalleryImage"));
 var _createSelector = _interopRequireDefault(require("../../../../Utils/Function/createSelector"));
 var _configuration = require("../../../configuration");
+var _getUrl = require("../../../Utils/getUrl");
 var _Constant = require("../../../Constant");
 var _ImageEditUtils = require("../Utils/ImageEditUtils");
 var _Transformers = require("../Utils/Transformers");
@@ -127,7 +128,7 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
           case 0:
             image = _this.props.image;
             url = (0, _get["default"])(image, 'preview.url', '');
-            previewUrl = url.startsWith('http') ? url : "".concat((0, _configuration.getConf)('network.host')).concat(url);
+            previewUrl = (0, _getUrl.getUrl)(url);
             isSvg = previewUrl && /\.svg$/.test(previewUrl);
             if (!isSvg) {
               _context.n = 2;
@@ -863,13 +864,12 @@ _defineProperty(ImageEditDialogContainer, "defaultProps", {
 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: image.thumbnail.url.startsWith('http') ? image.thumbnail.url : "".concat(host).concat(image.thumbnail.url)
+      url: (0, _getUrl.getUrl)(image.thumbnail.url)
     });
   });
 });

package/App/Modules/Designer/Utils/Transformers.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.prepareObjectData = exports.prepareImageObjectData = exports.prepareCanvasData = exports.noCache = exports.isOriginalVector = exports.getRasterURL = exports.fixSrcURL = exports.calculateScaleFactor = void 0;
 var _get = _interopRequireDefault(require("lodash/get"));
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
-var _configuration = require("../../../configuration");
+var _getUrl = require("../../../Utils/getUrl");
 var _Selectors = require("../../../Reducers/ImageGallery/Selectors");
 var _DesignDataService = require("../../../Services/DesignDataService");
 var _excluded = ["objects"];
@@ -32,7 +32,7 @@ var calculateScaleFactor = exports.calculateScaleFactor = function calculateScal
   return 1;
 };
 var fixSrcURL = exports.fixSrcURL = function fixSrcURL(src) {
-  return src && src[0] === '/' ? "".concat((0, _configuration.getConf)('network.host')).concat(src) : src;
+  return (0, _getUrl.getUrl)(src);
 };
 var getRasterURL = exports.getRasterURL = function getRasterURL(imageURL) {
   return ('' + imageURL).replace(/svg$/, 'png');

package/App/Reducers/Fonts/Actions.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.receiveFonts = exports.fetchFonts = exports.addFontFamilyToDOM = exports.addCustomFonts = exports.addCustomFont = exports.RECEIVE_FONTS = exports.ADD_FONTS = exports.ADD_FONT = void 0;
-var _configuration = require("../../configuration");
+var _getUrl = require("../../Utils/getUrl");
 var _Actions = require("../Actions");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -26,7 +26,6 @@ var addFontFamilyToDOM = exports.addFontFamilyToDOM = function addFontFamilyToDO
 };
 var receiveFonts = exports.receiveFonts = function receiveFonts(data) {
   return function (dispatch) {
-    var host = (0, _configuration.getConf)('network.host');
     var fonts = [];
     var _iterator = _createForOfIteratorHelper(data),
       _step;
@@ -67,7 +66,7 @@ var receiveFonts = exports.receiveFonts = function receiveFonts(data) {
           var fontField = _fontFields[_i];
           var fontPath = customFont[fontField.field];
           if (fontPath) {
-            var fontUrl = host + fontPath;
+            var fontUrl = (0, _getUrl.getUrl)(fontPath);
             var urlFieldName = 'url' + fontField.property.charAt(0).toUpperCase() + fontField.property.slice(1);
             font[fontField.property] = true;
             font[urlFieldName] = fontUrl;

package/App/Reducers/ImageGallery/Selectors.js

@@ -9,6 +9,7 @@ var _find = _interopRequireDefault(require("lodash/find"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
 var _flatten = _interopRequireDefault(require("lodash/flatten"));
 var _configuration = require("../../configuration");
+var _getUrl = require("../../Utils/getUrl");
 var _Selectors = require("../Configurator/Selectors");
 var _Reducer = require("../DesignData/Reducer");
 var _Actions = require("./Actions");
@@ -22,9 +23,7 @@ var getPreviewUrlFromImageData = exports.getPreviewUrlFromImageData = function g
   if (/^data:image/.test(previewUrl)) {
     return previewUrl;
   }
-  var _options$host = options.host,
-    host = _options$host === void 0 ? (0, _configuration.getConf)('network.host', '') : _options$host;
-  return previewUrl.startsWith('http') ? previewUrl : "".concat(host).concat(previewUrl);
+  return (0, _getUrl.getUrl)(previewUrl, options.host);
 };
 var isEditableVectorImage = exports.isEditableVectorImage = function isEditableVectorImage(preview) {
   return preview && preview.url && (/.svg$/.test(preview.url) || /^data:image\/svg\+xml/.test(preview.url));

package/App/Screens/Configurator/ThemeProvider.js

@@ -14,7 +14,7 @@ var _merge = _interopRequireDefault(require("lodash/merge"));
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _set = _interopRequireDefault(require("lodash/set"));
 var _Selectors = require("../../Reducers/Configurator/Selectors");
-var _configuration = require("../../configuration");
+var _getUrl = require("../../Utils/getUrl");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var darkTextColor = '#282828';
@@ -228,8 +228,7 @@ var createThemeFromClientTheme = function createThemeFromClientTheme(clientTheme
     (0, _set["default"])(theme, 'overrides.Designer-Editor.graphicsEditorContainer.borderColor', clientTheme.highlightColor);
   }
   if (clientTheme.font) {
-    var host = (0, _configuration.getConf)('network.host');
-    var fontUrl = host + clientTheme.font;
+    var fontUrl = (0, _getUrl.getUrl)(clientTheme.font);
     var fontName = clientTheme.font.substring(clientTheme.font.lastIndexOf('/') + 1, clientTheme.font.indexOf('.'));
     loadClientFont(fontName, fontUrl);
     (0, _set["default"])(theme, 'typography.fontFamily', fontName);

package/App/Services/DesignDataService.js

@@ -11,9 +11,11 @@ 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 _merge = _interopRequireDefault(require("lodash/merge"));
 var _i18n = require("../../Framework/i18n");
 var _ServiceLocator = require("../ServiceLocator");
 var _configuration = require("../configuration");
+var _getUrl = require("../Utils/getUrl");
 var _Observable = _interopRequireDefault(require("../../Utils/Decorators/Observable"));
 var _setupDesigner = _interopRequireDefault(require("../Modules/Designer/setupDesigner"));
 var _Actions = require("../Reducers/DesignData/Actions");
@@ -158,7 +160,7 @@ var calculateImageBrightness = exports.calculateImageBrightness = function calcu
   var thumbnail = (0, _get2["default"])(image, 'data.thumbnail.url', null);
   var imageUrl = null;
   if (thumbnail) {
-    imageUrl = thumbnail.startsWith('http') ? thumbnail : "".concat((0, _configuration.getConf)('network.host')).concat(thumbnail);
+    imageUrl = (0, _getUrl.getUrl)(thumbnail);
   }
   var fuzzy = 0.1;
   return new Promise(function (resolve, reject) {
@@ -302,7 +304,7 @@ var getSvgContent = exports.getSvgContent = function () {
   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);
+    var absUrl = (0, _getUrl.getUrl)(url, absolute ? undefined : (0, _configuration.getConf)('network.host'));
     if (!forceFetch && svgContentMap.has(absUrl)) {
       return svgContentMap.get(absUrl);
     }
@@ -1835,18 +1837,27 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
     value: (function () {
       var _redrawAllDesignAreas = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee21(getDrawingContext, updateEventObject) {
         var _this8 = this;
-        var state, showHighlight, textureBuilderConfig, variantIdentifier, effectEnabled, drawingFn, _t10;
+        var options,
+          state,
+          showHighlight,
+          textureBuilderConfig,
+          variantIdentifier,
+          effectEnabled,
+          drawingFn,
+          _args22 = arguments,
+          _t11;
         return _regenerator().w(function (_context22) {
           while (1) switch (_context22.p = _context22.n) {
             case 0:
+              options = _args22.length > 2 && _args22[2] !== undefined ? _args22[2] : {};
               state = _ServiceLocator.Services.store.state;
               showHighlight = (0, _get2["default"])(state, 'designArea.showHighlight');
-              textureBuilderConfig = {
+              textureBuilderConfig = (0, _merge["default"])({
                 highlight: {
                   borderColor: (0, _Selectors3.getClientHighlightColor)(state),
                   backgroundColor: (0, _configuration.getConf)('visualization.designAreaHighlightBackgroundColor')
                 }
-              };
+              }, options.textureBuilderConfig);
               variantIdentifier = (0, _get2["default"])(updateEventObject, 'data.variant', false);
               effectEnabled = !(0, _Selectors3.isDesignerProductPreviewMode)();
               drawingFn = /*#__PURE__*/function () {
@@ -1855,19 +1866,30 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                     _getTextureBuilder,
                     getTextureImage,
                     drawCanvasToArea,
-                    highlightDesignAreas,
+                    drawCanvasToAreaDirect,
+                    highlightDesignArea,
                     drawOn,
                     getParams,
                     _iterator9,
                     _step9,
+                    designArea,
+                    canvas,
+                    releaseLock,
+                    maskHandler,
+                    restoreOutlineVisibility,
+                    restoreOutlineOnly,
+                    drawToContext,
+                    _iterator0,
+                    _step0,
                     _loop,
                     _args21 = arguments,
-                    _t1;
+                    _t1,
+                    _t10;
                   return _regenerator().w(function (_context21) {
                     while (1) switch (_context21.p = _context21.n) {
                       case 0:
                         designAreas = _args21.length > 2 && _args21[2] !== undefined ? _args21[2] : _this8.getDesignAreas();
-                        _getTextureBuilder = getTextureBuilder(textureBuilderConfig), getTextureImage = _getTextureBuilder.getTextureImage, drawCanvasToArea = _getTextureBuilder.drawCanvasToArea, highlightDesignAreas = _getTextureBuilder.highlightDesignAreas, drawOn = _getTextureBuilder.drawOn, getParams = _getTextureBuilder.getParams;
+                        _getTextureBuilder = getTextureBuilder(textureBuilderConfig), getTextureImage = _getTextureBuilder.getTextureImage, drawCanvasToArea = _getTextureBuilder.drawCanvasToArea, drawCanvasToAreaDirect = _getTextureBuilder.drawCanvasToAreaDirect, highlightDesignArea = _getTextureBuilder.highlightDesignArea, drawOn = _getTextureBuilder.drawOn, getParams = _getTextureBuilder.getParams;
                         if (getTextureImage()) {
                           _context21.n = 1;
                           break;
@@ -1876,94 +1898,152 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                         console.warn('Texture image is missing!', designAreas);
                         return _context21.a(2);
                       case 1:
-                        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);
-                          }));
+                        if (!showHighlight) {
+                          _context21.n = 13;
+                          break;
                         }
                         _iterator9 = _createForOfIteratorHelper(designAreas);
                         _context21.p = 2;
+                        _iterator9.s();
+                      case 3:
+                        if ((_step9 = _iterator9.n()).done) {
+                          _context21.n = 10;
+                          break;
+                        }
+                        designArea = _step9.value;
+                        canvas = _this8._getCanvas(_this8.getDesignAreaByIdentifier(designArea.identifier));
+                        if (canvas) {
+                          _context21.n = 4;
+                          break;
+                        }
+                        return _context21.a(3, 9);
+                      case 4:
+                        _context21.n = 5;
+                        return (0, _ObjectLock.requestLock)(canvas);
+                      case 5:
+                        releaseLock = _context21.v;
+                        maskHandler = canvas.getMaskHandler();
+                        if (!((0, _Selectors.designAreaAppliesMask)(state, designArea) && maskHandler)) {
+                          _context21.n = 7;
+                          break;
+                        }
+                        restoreOutlineVisibility = maskHandler.toggleOutline(true, {
+                          getZoomFactor: function getZoomFactor(_ref18) {
+                            var zoom = _ref18.zoom;
+                            // currentZoom is only available for 2D, for 3D it is always 1
+                            var threeFactor = Math.min(getParams().currentZoom, 1) || 1;
+                            return zoom * threeFactor;
+                          }
+                        });
+                        restoreOutlineOnly = maskHandler.showOutlineOnly();
+                        drawToContext = canvas.drawToContext.bind(canvas);
+                        _context21.n = 6;
+                        return drawCanvasToAreaDirect({
+                          drawToContext: drawToContext,
+                          designArea: designArea
+                        });
+                      case 6:
+                        restoreOutlineVisibility === null || restoreOutlineVisibility === void 0 || restoreOutlineVisibility();
+                        restoreOutlineOnly === null || restoreOutlineOnly === void 0 || restoreOutlineOnly();
+                        _context21.n = 8;
+                        break;
+                      case 7:
+                        highlightDesignArea(designArea);
+                      case 8:
+                        releaseLock();
+                      case 9:
+                        _context21.n = 3;
+                        break;
+                      case 10:
+                        _context21.n = 12;
+                        break;
+                      case 11:
+                        _context21.p = 11;
+                        _t1 = _context21.v;
+                        _iterator9.e(_t1);
+                      case 12:
+                        _context21.p = 12;
+                        _iterator9.f();
+                        return _context21.f(12);
+                      case 13:
+                        _iterator0 = _createForOfIteratorHelper(designAreas);
+                        _context21.p = 14;
                         _loop = /*#__PURE__*/_regenerator().m(function _loop() {
-                          var designArea, canvas, _canvas$getColorOverl, releaseLock, selectedObject, maskHandler, restoreOutlineVisibility, restoreColorOverlayVisibility, drawToContext, getSvg;
+                          var _canvas$getColorOverl, _canvas$getMaskHandle;
+                          var designArea, canvas, releaseLock, selectedObject, restoreColorOverlayVisibility, restoreOutlineVisibility, drawToContext, getSvg;
                           return _regenerator().w(function (_context20) {
                             while (1) switch (_context20.n) {
                               case 0:
-                                designArea = _step9.value;
+                                designArea = _step0.value;
                                 canvas = _this8._getCanvas(_this8.getDesignAreaByIdentifier(designArea.identifier));
-                                if (!canvas) {
-                                  _context20.n = 3;
+                                if (canvas) {
+                                  _context20.n = 1;
                                   break;
                                 }
-                                _context20.n = 1;
-                                return (0, _ObjectLock.requestLock)(canvas);
+                                return _context20.a(2, 1);
                               case 1:
+                                _context20.n = 2;
+                                return (0, _ObjectLock.requestLock)(canvas);
+                              case 2:
                                 releaseLock = _context20.v;
                                 selectedObject = (0, _get2["default"])(canvas, 'selectedObject');
                                 if (selectedObject) {
                                   selectedObject.selected = false;
                                 }
-                                maskHandler = canvas.getMaskHandler();
-                                if (maskHandler) {
-                                  restoreOutlineVisibility = maskHandler.toggleOutline(showHighlight, {
-                                    getZoomFactor: function getZoomFactor(_ref18) {
-                                      var zoom = _ref18.zoom;
-                                      // currentZoom is only available for 2D, for 3D it is always 1
-                                      var threeFactor = Math.min(getParams().currentZoom, 1) || 1;
-                                      return zoom * threeFactor;
-                                    }
-                                  });
-                                }
                                 restoreColorOverlayVisibility = (_canvas$getColorOverl = canvas.getColorOverlay()) === null || _canvas$getColorOverl === void 0 ? void 0 : _canvas$getColorOverl.toggle(false);
+                                restoreOutlineVisibility = (_canvas$getMaskHandle = canvas.getMaskHandler()) === null || _canvas$getMaskHandle === void 0 ? void 0 : _canvas$getMaskHandle.toggleOutline(false);
                                 drawToContext = canvas.drawToContext.bind(canvas);
                                 getSvg = function getSvg() {
                                   return canvas.getScreenshot((0, _Selectors4.getFontMapping)(state));
                                 };
-                                _context20.n = 2;
+                                _context20.n = 3;
                                 return drawCanvasToArea(_objectSpread({
                                   drawToContext: drawToContext,
                                   designArea: designArea,
                                   getSvg: getSvg
                                 }, effectEnabled && (0, _Selectors.getVisualizationEffectWithOptions)(state, designArea, variantIdentifier)));
-                              case 2:
-                                if (maskHandler) {
-                                  restoreOutlineVisibility();
-                                }
-                                restoreColorOverlayVisibility && restoreColorOverlayVisibility();
-                                releaseLock();
                               case 3:
+                                restoreColorOverlayVisibility === null || restoreColorOverlayVisibility === void 0 || restoreColorOverlayVisibility();
+                                restoreOutlineVisibility === null || restoreOutlineVisibility === void 0 || restoreOutlineVisibility();
+                                releaseLock();
+                              case 4:
                                 return _context20.a(2);
                             }
                           }, _loop);
                         });
-                        _iterator9.s();
-                      case 3:
-                        if ((_step9 = _iterator9.n()).done) {
-                          _context21.n = 5;
+                        _iterator0.s();
+                      case 15:
+                        if ((_step0 = _iterator0.n()).done) {
+                          _context21.n = 18;
                           break;
                         }
-                        return _context21.d(_regeneratorValues(_loop()), 4);
-                      case 4:
-                        _context21.n = 3;
+                        return _context21.d(_regeneratorValues(_loop()), 16);
+                      case 16:
+                        if (!_context21.v) {
+                          _context21.n = 17;
+                          break;
+                        }
+                        return _context21.a(3, 17);
+                      case 17:
+                        _context21.n = 15;
                         break;
-                      case 5:
-                        _context21.n = 7;
+                      case 18:
+                        _context21.n = 20;
                         break;
-                      case 6:
-                        _context21.p = 6;
-                        _t1 = _context21.v;
-                        _iterator9.e(_t1);
-                      case 7:
-                        _context21.p = 7;
-                        _iterator9.f();
-                        return _context21.f(7);
-                      case 8:
+                      case 19:
+                        _context21.p = 19;
+                        _t10 = _context21.v;
+                        _iterator0.e(_t10);
+                      case 20:
+                        _context21.p = 20;
+                        _iterator0.f();
+                        return _context21.f(20);
+                      case 21:
                         drawOn(textureCtx);
-                      case 9:
+                      case 22:
                         return _context21.a(2);
                     }
-                  }, _callee20, null, [[2, 6, 7, 8]]);
+                  }, _callee20, null, [[14, 19, 20, 21], [2, 11, 12, 13]]);
                 }));
                 return function drawingFn(_x22, _x23) {
                   return _ref17.apply(this, arguments);
@@ -1977,9 +2057,9 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               break;
             case 3:
               _context22.p = 3;
-              _t10 = _context22.v;
+              _t11 = _context22.v;
               // eslint-disable-next-line no-console
-              console.warn('Could not get drawing context, texture update is skipped!', _t10.message);
+              console.warn('Could not get drawing context, texture update is skipped!', _t11.message);
             case 4:
               return _context22.a(2);
           }
@@ -2059,8 +2139,8 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                 return canvas && canvas[screenshotFn] && canvas.objects && canvas.objects.length > 0;
               }).map(/*#__PURE__*/function () {
                 var _ref22 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee23(_ref21) {
-                  var _canvas$getColorOverl2;
-                  var id, canvas, releaseLock, maskHandler, restoreOutlineVisibility, restoreColorOverlayVisibility, result, _t11, _t12;
+                  var _canvas$getMaskHandle2, _canvas$getColorOverl2;
+                  var id, canvas, releaseLock, restoreOutlineVisibility, restoreColorOverlayVisibility, result, _t12, _t13;
                   return _regenerator().w(function (_context24) {
                     while (1) switch (_context24.n) {
                       case 0:
@@ -2069,17 +2149,16 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                         return (0, _ObjectLock.requestLock)(canvas);
                       case 1:
                         releaseLock = _context24.v;
-                        maskHandler = canvas.getMaskHandler();
-                        restoreOutlineVisibility = maskHandler && maskHandler.toggleOutline(false);
+                        restoreOutlineVisibility = (_canvas$getMaskHandle2 = canvas.getMaskHandler()) === null || _canvas$getMaskHandle2 === void 0 ? void 0 : _canvas$getMaskHandle2.toggleOutline(false);
                         restoreColorOverlayVisibility = (_canvas$getColorOverl2 = canvas.getColorOverlay()) === null || _canvas$getColorOverl2 === void 0 ? void 0 : _canvas$getColorOverl2.toggle(false);
-                        _t11 = id;
+                        _t12 = id;
                         _context24.n = 2;
                         return canvas[screenshotFn](fontMapping);
                       case 2:
-                        _t12 = _context24.v;
-                        result = [_t11, _t12];
-                        restoreOutlineVisibility && restoreOutlineVisibility();
-                        restoreColorOverlayVisibility && restoreColorOverlayVisibility();
+                        _t13 = _context24.v;
+                        result = [_t12, _t13];
+                        restoreOutlineVisibility === null || restoreOutlineVisibility === void 0 || restoreOutlineVisibility();
+                        restoreColorOverlayVisibility === null || restoreColorOverlayVisibility === void 0 || restoreColorOverlayVisibility();
                         releaseLock();
                         return _context24.a(2, result);
                     }
@@ -2334,11 +2413,11 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
       if (preSelectionDesignAreaIdentifier) {
         this.selectDesignArea(preSelectionDesignAreaIdentifier);
       }
-      var _iterator0 = _createForOfIteratorHelper(filteredDesignAreas),
-        _step0;
+      var _iterator1 = _createForOfIteratorHelper(filteredDesignAreas),
+        _step1;
       try {
-        for (_iterator0.s(); !(_step0 = _iterator0.n()).done;) {
-          var area = _step0.value;
+        for (_iterator1.s(); !(_step1 = _iterator1.n()).done;) {
+          var area = _step1.value;
           var selectedDesignArea = (0, _Selectors.getDesignAreaPreSelection)(area.identifier);
           if (selectedDesignArea.identifier) {
             var preSelectionColorAmount = +(0, _get2["default"])(selectedDesignArea, 'colorAmount', 1);
@@ -2350,9 +2429,9 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator0.e(err);
+        _iterator1.e(err);
       } finally {
-        _iterator0.f();
+        _iterator1.f();
       }
     }
   }, {
@@ -2367,7 +2446,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
     key: "setImageAndTextColor",
     value: function () {
       var _setImageAndTextColor = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee29(color) {
-        var designArea, designData, objects, hasmultipleObjects, canvas, isImageSelected, selectedImageIdentifier, _iterator1, _step1, object, image, operations, _t13;
+        var designArea, designData, objects, hasmultipleObjects, canvas, isImageSelected, selectedImageIdentifier, _iterator10, _step10, object, image, operations, _t14;
         return _regenerator().w(function (_context30) {
           while (1) switch (_context30.p = _context30.n) {
             case 0:
@@ -2391,15 +2470,15 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               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));
-              _iterator1 = _createForOfIteratorHelper(objects);
+              _iterator10 = _createForOfIteratorHelper(objects);
               _context30.p = 3;
-              _iterator1.s();
+              _iterator10.s();
             case 4:
-              if ((_step1 = _iterator1.n()).done) {
+              if ((_step10 = _iterator10.n()).done) {
                 _context30.n = 6;
                 break;
               }
-              object = _step1.value;
+              object = _step10.value;
               if (!(object.type === 'Image' && object.imageData.identifier !== selectedImageIdentifier)) {
                 _context30.n = 5;
                 break;
@@ -2416,11 +2495,11 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               break;
             case 7:
               _context30.p = 7;
-              _t13 = _context30.v;
-              _iterator1.e(_t13);
+              _t14 = _context30.v;
+              _iterator10.e(_t14);
             case 8:
               _context30.p = 8;
-              _iterator1.f();
+              _iterator10.f();
               return _context30.f(8);
             case 9:
               _context30.n = 10;

package/App/Services/DesignerService.js

@@ -13,6 +13,7 @@ var _i18n = require("../../Framework/i18n");
 var _Transformers = require("../Modules/Designer/Utils/Transformers");
 var _ServiceLocator = require("../ServiceLocator");
 var _configuration = require("../configuration");
+var _getUrl = require("../Utils/getUrl");
 var _Selectors = require("../Reducers/ImageGallery/Selectors");
 var _Actions = require("../Reducers/ImageGallery/Actions");
 var _Selectors2 = require("../Reducers/DesignArea/Selectors");
@@ -256,7 +257,7 @@ var DesignerService = exports["default"] = /*#__PURE__*/function () {
               throw new Error('Preview image url is not specified!');
             case 3:
               _ServiceLocator.Services.store.dispatch((0, _Actions.updateUploadDelayed)(false));
-              return _context5.a(2, url.startsWith('http') ? url : "".concat((0, _configuration.getConf)('network.host')).concat(url));
+              return _context5.a(2, (0, _getUrl.getUrl)(url));
           }
         }, _callee5);
       }));

package/App/Utils/getUrl.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUrl = getUrl;
+var _configuration = require("../configuration");
+/**
+ * Resolves a resource URL: absolute URLs (starting with "http") are returned as-is,
+ * otherwise the host is prepended.
+ * @param {string} url - Resource path or absolute URL
+ * @param {string} [host=getConf('network.host')] - Host to prepend for relative URLs (uses default if falsy)
+ * @returns {string} Resolved URL
+ */
+function getUrl(url, host) {
+  if (url == null || url === '') {
+    return url;
+  }
+  var resolvedHost = host || (0, _configuration.getConf)('network.host');
+  return url.startsWith('http') ? url : "".concat(resolvedHost).concat(url);
+}

package/App/configuration.js

@@ -20,6 +20,13 @@ var _Api = _interopRequireDefault(require("../Framework/Api"));
 var _hyphenatedDe = _interopRequireDefault(require("hyphenated-de"));
 var _Reducer = require("./Reducers/Configurator/Reducer");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(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(r) { if (Array.isArray(r)) return r; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var DEVELOPMENT_HOST_INT = 'http://int.configuratorware-dev.local';
 
 // eslint-disable-next-line no-unused-vars
@@ -203,7 +210,10 @@ var applicationConfiguration = {
   // automatically show the vectorization preview in colorizing step
   autoPreviewVectorization: true,
   // switch to the previously selected view when selecting a component that has no view specified
-  switchViewOnComponentSelection: true
+  switchViewOnComponentSelection: true,
+  parameterParser: function parameterParser(name, value) {
+    return value;
+  }
 };
 function preventLeavingPage() {
   if (process.env.NODE_ENV === 'production' && !getConf('adminMode')) {
@@ -228,12 +238,15 @@ function init() {
   if (externalConfig) {
     applicationConfiguration = (0, _merge["default"])(applicationConfiguration, externalConfig);
   }
-  applicationConfiguration = (0, _merge["default"])(applicationConfiguration, getQueryParams());
+  applicationConfiguration = (0, _merge["default"])(applicationConfiguration, getQueryParams(applicationConfiguration.parameterParser));
   _Api["default"].init(applicationConfiguration.network);
   preventLeavingPage();
   return applicationConfiguration;
 }
 function getQueryParams() {
+  var parameterParser = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (_name, value) {
+    return value;
+  };
   var query = new URLSearchParams(location.search);
   var queryConf = {};
 
@@ -306,6 +319,30 @@ function getQueryParams() {
       console.error('Wrong JSON provided for _switch_options:', optionsToSwitchJSON);
     }
   }
+  if (query.has('_country')) {
+    var country = query.get('_country');
+    if (country && country.length === 2) {
+      _Api["default"].setGETParameter('_country', country);
+    }
+  }
+
+  // Forward all query parameters starting with "_" to Api.setGETParameter
+  var _iterator = _createForOfIteratorHelper(query.entries()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+        name = _step$value[0],
+        value = _step$value[1];
+      if (name.startsWith('_')) {
+        _Api["default"].setGETParameter(name, parameterParser(name, value));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
   return queryConf;
 }
 function setConfiguration(customApplicationConfiguration) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.54.3",
+  "version": "1.55.2",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.54.3",
+    "@configuratorware/scripts": "1.55.2",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.54.3",
-    "redhotmagma-visualization": "1.54.3",
+    "redhotmagma-graphics-editor": "1.55.2",
+    "redhotmagma-visualization": "1.55.2",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Designer/Containers/AddGalleryImage.js

@@ -12,7 +12,7 @@ import {
     WN_LOAD_TAGS,
 } from 'App/Reducers/ImageGallery/Actions';
 import { createBackgroundWorkStateSelector } from 'App/Reducers/UI/Selectors';
-import { getConf } from 'App/configuration';
+import { getUrl } from 'App/Utils/getUrl';
 
 const getTags = createSelector(
     imageGalleryState => imageGalleryState.tags,
@@ -33,13 +33,11 @@ const getTags = createSelector(
 
 const getGalleryImages = createSelector(
     imageGalleryState => imageGalleryState.gallery,
-    images => {
-        const host = getConf('network.host');
-        return images.map(image => ({
+    images =>
+        images.map(image => ({
             ...image,
-            url: image.thumbUrl.startsWith('http') ? image.thumbUrl : `${host}${image.thumbUrl}`,
-        }));
-    }
+            url: getUrl(image.thumbUrl),
+        }))
 );
 
 const getLoadingState = createBackgroundWorkStateSelector(WN_LOAD_TAGS, WN_LOAD_IMAGES);

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

@@ -49,6 +49,7 @@ import { applySvgContentOperations, getSvgContent } from 'App/Services/DesignDat
 import AddGalleryImage from './AddGalleryImage';
 import createSelector from 'Utils/Function/createSelector';
 import { getConf } from 'App/configuration';
+import { getUrl } from 'App/Utils/getUrl';
 import { EventTypes } from 'App/Constant';
 import { expandVectorizeColorsMap, getClosestColorFromMap } from '../Utils/ImageEditUtils';
 import { isOriginalVector } from '../Utils/Transformers';
@@ -319,7 +320,7 @@ export class ImageEditDialogContainer extends React.Component {
     updateOriginalPreview = async () => {
         const { image } = this.props;
         const url = get(image, 'preview.url', '');
-        const previewUrl = url.startsWith('http') ? url : `${getConf('network.host')}${url}`;
+        const previewUrl = getUrl(url);
         const isSvg = previewUrl && /\.svg$/.test(previewUrl);
         if (isSvg) {
             const svgContent = await getSvgContent(previewUrl, true);
@@ -821,14 +822,11 @@ export class ImageEditDialogContainer extends React.Component {
 const getUserImages = createSelector(
     imageGalleryState => imageGalleryState.userImages,
     images => {
-        const host = getConf('network.host');
         const userImages = images.filter(image => !image.isPlaceHolderImage);
         return userImages.map(image => {
             return {
                 ...image,
-                url: image.thumbnail.url.startsWith('http')
-                    ? image.thumbnail.url
-                    : `${host}${image.thumbnail.url}`,
+                url: getUrl(image.thumbnail.url),
             };
         });
     }

package/src/App/Modules/Designer/Utils/Transformers.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import isArray from 'lodash/isArray';
-import { getConf } from '../../../configuration';
+import { getUrl } from '../../../Utils/getUrl';
 import { isEditableVectorImage } from '../../../Reducers/ImageGallery/Selectors';
 import { getSvgContent, applySvgContentOperations } from '../../../Services/DesignDataService';
 
@@ -13,9 +13,7 @@ export const calculateScaleFactor = imageData => {
     return 1;
 };
 
-export const fixSrcURL = src => {
-    return src && src[0] === '/' ? `${getConf('network.host')}${src}` : src;
-};
+export const fixSrcURL = src => getUrl(src);
 
 export const getRasterURL = imageURL => ('' + imageURL).replace(/svg$/, 'png');
 

package/src/App/Reducers/Fonts/Actions.js

@@ -1,4 +1,4 @@
-import { getConf } from '../../configuration';
+import { getUrl } from '../../Utils/getUrl';
 import { fetchDataAsync } from '../Actions';
 
 export const RECEIVE_FONTS = 'RECEIVE_FONTS';
@@ -24,7 +24,6 @@ export const addFontFamilyToDOM = (name, url, bold, italic) => {
 };
 
 export const receiveFonts = data => dispatch => {
-    const host = getConf('network.host');
     const fonts = [];
 
     for (const customFont of data) {
@@ -49,7 +48,7 @@ export const receiveFonts = data => dispatch => {
             const fontPath = customFont[fontField.field];
 
             if (fontPath) {
-                const fontUrl = host + fontPath;
+                const fontUrl = getUrl(fontPath);
                 const urlFieldName =
                     'url' + fontField.property.charAt(0).toUpperCase() + fontField.property.slice(1);
 

package/src/App/Reducers/ImageGallery/Selectors.js

@@ -3,6 +3,7 @@ import find from 'lodash/find';
 import isString from 'lodash/isString';
 import flatten from 'lodash/flatten';
 import { getConf } from '../../configuration';
+import { getUrl } from '../../Utils/getUrl';
 import { getConfiguration, getConfigurator } from '../Configurator/Selectors';
 import { getDesignData } from '../DesignData/Reducer';
 import { ImageGalleryModes } from './Actions';
@@ -23,8 +24,7 @@ export const getPreviewUrlFromImageData = (preview, options = {}) => {
     if (/^data:image/.test(previewUrl)) {
         return previewUrl;
     }
-    const { host = getConf('network.host', '') } = options;
-    return previewUrl.startsWith('http') ? previewUrl : `${host}${previewUrl}`;
+    return getUrl(previewUrl, options.host);
 };
 
 export const isEditableVectorImage = preview => {

package/src/App/Screens/Configurator/ThemeProvider.js

@@ -7,7 +7,7 @@ import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
 import set from 'lodash/set';
 import { getClient } from '../../Reducers/Configurator/Selectors';
-import { getConf } from '../../configuration';
+import { getUrl } from '../../Utils/getUrl';
 
 const darkTextColor = '#282828';
 
@@ -229,8 +229,7 @@ const createThemeFromClientTheme = (clientTheme, customTheme) => {
         );
     }
     if (clientTheme.font) {
-        const host = getConf('network.host');
-        const fontUrl = host + clientTheme.font;
+        const fontUrl = getUrl(clientTheme.font);
         const fontName = clientTheme.font.substring(
             clientTheme.font.lastIndexOf('/') + 1,
             clientTheme.font.indexOf('.')

package/src/App/Services/DesignDataService.js

@@ -4,10 +4,12 @@ import get from 'lodash/get';
 import find from 'lodash/find';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
 import { t } from 'Framework/i18n';
 
 import { Services } from '../ServiceLocator';
 import { getConf } from '../configuration';
+import { getUrl } from '../Utils/getUrl';
 
 import Observable from '../../Utils/Decorators/Observable';
 import setupDesigner from '../Modules/Designer/setupDesigner';
@@ -232,7 +234,7 @@ export const calculateImageBrightness = image => {
     const thumbnail = get(image, 'data.thumbnail.url', null);
     let imageUrl = null;
     if (thumbnail) {
-        imageUrl = thumbnail.startsWith('http') ? thumbnail : `${getConf('network.host')}${thumbnail}`;
+        imageUrl = getUrl(thumbnail);
     }
     const fuzzy = 0.1;
 
@@ -383,7 +385,7 @@ export const makeOperationsCompatible = (operations, compatibilityInfo, colorPal
 export const getSvgContent = (() => {
     const svgContentMap = new Map();
     return function getSvgContent(url, absolute = false, forceFetch = false) {
-        const absUrl = absolute ? url : `${getConf('network.host')}${url}`;
+        const absUrl = getUrl(url, absolute ? undefined : getConf('network.host'));
         if (!forceFetch && svgContentMap.has(absUrl)) {
             return svgContentMap.get(absUrl);
         }
@@ -1562,17 +1564,20 @@ export default class DesignDataService {
      * @param {function} getDrawingContext
      * @param {object} updateEventObject
      */
-    async redrawAllDesignAreas(getDrawingContext, updateEventObject) {
+    async redrawAllDesignAreas(getDrawingContext, updateEventObject, options = {}) {
         const state = Services.store.state;
 
         const showHighlight = get(state, 'designArea.showHighlight');
 
-        const textureBuilderConfig = {
-            highlight: {
-                borderColor: getClientHighlightColor(state),
-                backgroundColor: getConf('visualization.designAreaHighlightBackgroundColor'),
+        const textureBuilderConfig = merge(
+            {
+                highlight: {
+                    borderColor: getClientHighlightColor(state),
+                    backgroundColor: getConf('visualization.designAreaHighlightBackgroundColor'),
+                },
             },
-        };
+            options.textureBuilderConfig
+        );
 
         const variantIdentifier = get(updateEventObject, 'data.variant', false);
 
@@ -1582,7 +1587,8 @@ export default class DesignDataService {
             const {
                 getTextureImage,
                 drawCanvasToArea,
-                highlightDesignAreas,
+                drawCanvasToAreaDirect,
+                highlightDesignArea,
                 drawOn,
                 getParams,
             } = getTextureBuilder(textureBuilderConfig);
@@ -1594,54 +1600,65 @@ export default class DesignDataService {
             }
 
             if (showHighlight) {
-                // highlight only the design areas with no mask
-                // for the others the outline is added by the maskHandler
-                highlightDesignAreas(
-                    designAreas.filter(designArea => !designAreaAppliesMask(state, designArea))
-                );
-            }
-
-            for (const designArea of designAreas) {
-                const canvas = this._getCanvas(this.getDesignAreaByIdentifier(designArea.identifier));
-                if (canvas) {
-                    const releaseLock = await requestLock(canvas);
-
-                    const selectedObject = get(canvas, 'selectedObject');
-                    if (selectedObject) {
-                        selectedObject.selected = false;
+                for (const designArea of designAreas) {
+                    const canvas = this._getCanvas(this.getDesignAreaByIdentifier(designArea.identifier));
+                    if (!canvas) {
+                        continue;
                     }
-
+                    const releaseLock = await requestLock(canvas);
                     const maskHandler = canvas.getMaskHandler();
-                    let restoreOutlineVisibility;
-                    if (maskHandler) {
-                        restoreOutlineVisibility = maskHandler.toggleOutline(showHighlight, {
+                    if (designAreaAppliesMask(state, designArea) && maskHandler) {
+                        const restoreOutlineVisibility = maskHandler.toggleOutline(true, {
                             getZoomFactor: ({ zoom }) => {
                                 // currentZoom is only available for 2D, for 3D it is always 1
                                 const threeFactor = Math.min(getParams().currentZoom, 1) || 1;
                                 return zoom * threeFactor;
                             },
                         });
+                        const restoreOutlineOnly = maskHandler.showOutlineOnly();
+                        const drawToContext = canvas.drawToContext.bind(canvas);
+                        await drawCanvasToAreaDirect({
+                            drawToContext,
+                            designArea,
+                        });
+                        restoreOutlineVisibility?.();
+                        restoreOutlineOnly?.();
+                    } else {
+                        highlightDesignArea(designArea);
                     }
-                    const restoreColorOverlayVisibility = canvas.getColorOverlay()?.toggle(false);
-
-                    const drawToContext = canvas.drawToContext.bind(canvas);
-                    const getSvg = () => canvas.getScreenshot(getFontMapping(state));
-                    await drawCanvasToArea({
-                        drawToContext,
-                        designArea,
-                        getSvg,
-                        ...(effectEnabled &&
-                            getVisualizationEffectWithOptions(state, designArea, variantIdentifier)),
-                    });
-                    if (maskHandler) {
-                        restoreOutlineVisibility();
-                    }
-                    restoreColorOverlayVisibility && restoreColorOverlayVisibility();
-
                     releaseLock();
                 }
             }
 
+            for (const designArea of designAreas) {
+                const canvas = this._getCanvas(this.getDesignAreaByIdentifier(designArea.identifier));
+                if (!canvas) {
+                    continue;
+                }
+                const releaseLock = await requestLock(canvas);
+
+                const selectedObject = get(canvas, 'selectedObject');
+                if (selectedObject) {
+                    selectedObject.selected = false;
+                }
+
+                const restoreColorOverlayVisibility = canvas.getColorOverlay()?.toggle(false);
+                const restoreOutlineVisibility = canvas.getMaskHandler()?.toggleOutline(false);
+
+                const drawToContext = canvas.drawToContext.bind(canvas);
+                const getSvg = () => canvas.getScreenshot(getFontMapping(state));
+                await drawCanvasToArea({
+                    drawToContext,
+                    designArea,
+                    getSvg,
+                    ...(effectEnabled &&
+                        getVisualizationEffectWithOptions(state, designArea, variantIdentifier)),
+                });
+                restoreColorOverlayVisibility?.();
+                restoreOutlineVisibility?.();
+                releaseLock();
+            }
+
             drawOn(textureCtx);
         };
 
@@ -1708,12 +1725,11 @@ export default class DesignDataService {
                     )
                     .map(async ({ id, canvas }) => {
                         const releaseLock = await requestLock(canvas);
-                        const maskHandler = canvas.getMaskHandler();
-                        const restoreOutlineVisibility = maskHandler && maskHandler.toggleOutline(false);
+                        const restoreOutlineVisibility = canvas.getMaskHandler()?.toggleOutline(false);
                         const restoreColorOverlayVisibility = canvas.getColorOverlay()?.toggle(false);
                         const result = [id, await canvas[screenshotFn](fontMapping)];
-                        restoreOutlineVisibility && restoreOutlineVisibility();
-                        restoreColorOverlayVisibility && restoreColorOverlayVisibility();
+                        restoreOutlineVisibility?.();
+                        restoreColorOverlayVisibility?.();
                         releaseLock();
                         return result;
                     })

package/src/App/Services/DesignerService.js

@@ -7,6 +7,7 @@ import { t } from 'Framework/i18n';
 import { prepareImageObjectData, prepareObjectData } from 'App/Modules/Designer/Utils/Transformers';
 import { Services } from '../ServiceLocator';
 import { getConf } from '../configuration';
+import { getUrl } from '../Utils/getUrl';
 import {
     getPreviewUrlFromImageData,
     isEditMode,
@@ -187,7 +188,7 @@ export default class DesignerService {
             throw new Error('Preview image url is not specified!');
         }
         Services.store.dispatch(updateUploadDelayed(false));
-        return url.startsWith('http') ? url : `${getConf('network.host')}${url}`;
+        return getUrl(url);
     }
 
     async addImageFromUrl(canvas, url, imageData, options = {}) {

package/src/App/Utils/getUrl.js

@@ -0,0 +1,16 @@
+import { getConf } from '../configuration';
+
+/**
+ * Resolves a resource URL: absolute URLs (starting with "http") are returned as-is,
+ * otherwise the host is prepended.
+ * @param {string} url - Resource path or absolute URL
+ * @param {string} [host=getConf('network.host')] - Host to prepend for relative URLs (uses default if falsy)
+ * @returns {string} Resolved URL
+ */
+export function getUrl(url, host) {
+    if (url == null || url === '') {
+        return url;
+    }
+    const resolvedHost = host || getConf('network.host');
+    return url.startsWith('http') ? url : `${resolvedHost}${url}`;
+}

package/src/App/configuration.js

@@ -225,6 +225,9 @@ let applicationConfiguration = {
 
     // switch to the previously selected view when selecting a component that has no view specified
     switchViewOnComponentSelection: true,
+    parameterParser: (name, value) => {
+        return value;
+    },
 };
 
 function preventLeavingPage() {
@@ -251,7 +254,10 @@ export function init() {
     if (externalConfig) {
         applicationConfiguration = merge(applicationConfiguration, externalConfig);
     }
-    applicationConfiguration = merge(applicationConfiguration, getQueryParams());
+    applicationConfiguration = merge(
+        applicationConfiguration,
+        getQueryParams(applicationConfiguration.parameterParser)
+    );
 
     Api.init(applicationConfiguration.network);
 
@@ -260,7 +266,7 @@ export function init() {
     return applicationConfiguration;
 }
 
-export function getQueryParams() {
+export function getQueryParams(parameterParser = (_name, value) => value) {
     const query = new URLSearchParams(location.search);
 
     const queryConf = {};
@@ -347,6 +353,20 @@ export function getQueryParams() {
         }
     }
 
+    if (query.has('_country')) {
+        const country = query.get('_country');
+        if (country && country.length === 2) {
+            Api.setGETParameter('_country', country);
+        }
+    }
+
+    // Forward all query parameters starting with "_" to Api.setGETParameter
+    for (const [name, value] of query.entries()) {
+        if (name.startsWith('_')) {
+            Api.setGETParameter(name, parameterParser(name, value));
+        }
+    }
+
     return queryConf;
 }