@configuratorware/configurator-frontendgui 1.57.1 → 1.57.3

package/App/Modules/Designer/Layouts/DefaultLayout.js

@@ -1,19 +1,43 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _ServiceLocator = require("../../../ServiceLocator");
+var _DesignDataService = require("../../../Services/DesignDataService");
 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 _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); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 _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; }
+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; }
+var usePreviewMode = function usePreviewMode() {
+  var _useState = (0, _react.useState)(function () {
+      return _ServiceLocator.Services.designData.getIsInPreviewMode();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInPreviewMode = _useState2[0],
+    setIsInPreviewMode = _useState2[1];
+  (0, _react.useEffect)(function () {
+    return _ServiceLocator.Services.designData.observable.on(_DesignDataService.EventTypes.PreviewModeChange, function (_ref) {
+      var data = _ref.data;
+      setIsInPreviewMode(data.isInPreviewMode);
+    });
+  }, []);
+  return isInPreviewMode;
+};
 var styles = function styles(theme) {
   var _$main, _container, _designer;
   return {
@@ -70,24 +94,24 @@ var styles = function styles(theme) {
       pointerEvents: 'none' // important: don't remove this
     },
 
-    sidebar: function sidebar(_ref) {
-      var _ref2;
-      var isPortraitMode = _ref.isPortraitMode;
-      return _ref2 = {
+    sidebar: function sidebar(_ref2) {
+      var _ref3;
+      var isPortraitMode = _ref2.isPortraitMode;
+      return _ref3 = {
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
         marginTop: theme.spacing(1),
         width: !isPortraitMode ? theme.layout.sidebar.width : ''
-      }, _defineProperty(_ref2, theme.breakpoints.up('sm'), {
+      }, _defineProperty(_ref3, theme.breakpoints.up('sm'), {
         marginTop: 0,
         marginLeft: theme.spacing(1)
-      }), _defineProperty(_ref2, theme.breakpoints.down('xs'), {
+      }), _defineProperty(_ref3, theme.breakpoints.down('xs'), {
         maxWidth: 'none'
-      }), _defineProperty(_ref2, '& > *', {
+      }), _defineProperty(_ref3, '& > *', {
         // make the components in the sidebar overlap the visualization
         zIndex: 1
-      }), _defineProperty(_ref2, "pointerEvents", 'none'), _ref2;
+      }), _defineProperty(_ref3, "pointerEvents", 'none'), _ref3;
     },
     visualization: _defineProperty({
       // the visualization is in the background with absolute positioning
@@ -134,22 +158,23 @@ var styles = function styles(theme) {
     }
   };
 };
-var DefaultLayout = function DefaultLayout(_ref3) {
-  var width = _ref3.width,
-    classes = _ref3.classes,
-    renderHeader = _ref3.renderHeader,
-    renderMain = _ref3.renderMain,
-    renderSidebar = _ref3.renderSidebar,
-    renderVisualization = _ref3.renderVisualization,
-    renderLoader = _ref3.renderLoader,
-    renderLicenseNotice = _ref3.renderLicenseNotice,
-    fallbackMode = _ref3.fallbackMode,
-    isPortraitMode = _ref3.isPortraitMode,
-    imageOnly = _ref3.imageOnly,
-    renderDesigner = _ref3.renderDesigner,
-    showDesigner = _ref3.showDesigner,
-    visualizationOverlayMode = _ref3.visualizationOverlayMode,
-    renderInvalidConfigurationNotice = _ref3.renderInvalidConfigurationNotice;
+var DefaultLayout = function DefaultLayout(_ref4) {
+  var width = _ref4.width,
+    classes = _ref4.classes,
+    renderHeader = _ref4.renderHeader,
+    renderMain = _ref4.renderMain,
+    renderSidebar = _ref4.renderSidebar,
+    renderVisualization = _ref4.renderVisualization,
+    renderLoader = _ref4.renderLoader,
+    renderLicenseNotice = _ref4.renderLicenseNotice,
+    fallbackMode = _ref4.fallbackMode,
+    isPortraitMode = _ref4.isPortraitMode,
+    imageOnly = _ref4.imageOnly,
+    renderDesigner = _ref4.renderDesigner,
+    showDesigner = _ref4.showDesigner,
+    visualizationOverlayMode = _ref4.visualizationOverlayMode,
+    renderInvalidConfigurationNotice = _ref4.renderInvalidConfigurationNotice;
+  var isInPreviewMode = usePreviewMode();
   return imageOnly ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(classes.root, " ").concat(fallbackMode ? classes.fallbackMode : '')
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -182,7 +207,7 @@ var DefaultLayout = function DefaultLayout(_ref3) {
     area: 'main',
     width: width,
     classes: classes
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  })), !isInPreviewMode && /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.sidebar
   }, renderSidebar({
     area: 'sidebar',

package/App/Screens/Configurator/Components/FullScreenView/index.js

@@ -150,7 +150,6 @@ var FullScreenView = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var previewOpen = this.state.previewOpen;
       var _this$props = this.props,
-        hasItems = _this$props.hasItems,
         classes = _this$props.classes,
         children = _this$props.children,
         showPreviewButton = _this$props.showPreviewButton,
@@ -161,7 +160,8 @@ var FullScreenView = /*#__PURE__*/function (_React$Component) {
         ThumbnailComponent = _this$props.ThumbnailComponent,
         thumbnailProps = _this$props.thumbnailProps,
         thumbnailDotMode = _this$props.thumbnailDotMode,
-        renderButtonOnTop = _this$props.renderButtonOnTop;
+        renderButtonOnTop = _this$props.renderButtonOnTop,
+        hasMoreItems = _this$props.hasMoreItems;
       var topPreviewButton = renderTopPreviewButton(_objectSpread(_objectSpread({}, this.props), {}, {
         onClick: this.openPreview
       }));
@@ -169,7 +169,7 @@ var FullScreenView = /*#__PURE__*/function (_React$Component) {
         closePreviewMode: this.closePreview,
         thumbnailClick: this.handleViewChange,
         previewOpen: previewOpen,
-        hasItems: hasItems,
+        hasMoreItems: hasMoreItems,
         dialogStyle: dialogStyle
       }, children), topPreviewButton, !previewOpen && children, showDesignViewList ? /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         container: true,

package/App/Screens/Configurator/Components/PreviewPortal/index.js

@@ -62,6 +62,8 @@ var styles = function styles(theme) {
       borderTop: '7px solid ' + theme.palette.primary.main
     }),
     visualizationWrapperThumbs: _defineProperty({
+      position: 'relative',
+      width: '100%',
       height: 'calc(100% - 200px)'
     }, theme.breakpoints.down('xs'), {
       '& > div:first-child': {
@@ -70,7 +72,9 @@ var styles = function styles(theme) {
       height: 'calc(100% - 130px)'
     }),
     visualizationWrapperCanvas: _defineProperty({
-      height: '100% '
+      position: 'relative',
+      width: '100%',
+      height: '100%'
     }, theme.breakpoints.up('sm'), {
       height: 'calc(100% - 100px)'
     }),
@@ -130,7 +134,12 @@ var PreviewPortal = /*#__PURE__*/function (_React$Component) {
   _createClass(PreviewPortal, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.props.alignTarget.add(this.wrapperRef.current);
+      var _this2 = this;
+      requestAnimationFrame(function () {
+        if (_this2.wrapperRef.current) {
+          _this2.props.alignTarget.add(_this2.wrapperRef.current);
+        }
+      });
     }
   }, {
     key: "componentWillUnmount",

package/App/Screens/Configurator/Containers/FullScreenView.js

@@ -26,7 +26,6 @@ var mapStateToProps = function mapStateToProps(state) {
       _ServiceLocator.Services.visualization.initDesignAreaInteraction();
     },
     showDesignViewList: (0, _Selectors.getDesignViewLength)(state) > 1 && !(0, _Selectors2.isAnyDesignAreaSelected)(state),
-    hasItems: (0, _Selectors.getDesignViewLength)(state) > 0,
     hasMoreItems: (0, _Selectors.getDesignViewLength)(state) > 1,
     areAllDesignAreasEmpty: (0, _Selectors2.areAllDesignAreasEmpty)(state.configurator)
   };

package/App/Services/DesignDataService.js

@@ -82,6 +82,23 @@ var preloadFonts = function preloadFonts(canvasData) {
     return _FontFaceRepository.FontFaceRepository.collectFromHTML(content);
   }));
 };
+
+// Replaces text node content inside a bulk name HTML string while preserving span styling
+// (color, font-family, etc.) so screenshots render with the correct font and color.
+var applyBulkNameToContent = function applyBulkNameToContent(htmlContent, name) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlContent;
+  var walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
+  var first = true;
+  var node;
+  while (node = walker.nextNode()) {
+    if (node.textContent.trim()) {
+      node.textContent = first ? name : '';
+      first = false;
+    }
+  }
+  return div.innerHTML;
+};
 var checkColorUsage = exports.checkColorUsage = function () {
   var alreadyAlertedColorCountState = {};
   return function (canvasDataJSON, changeEvent) {
@@ -483,7 +500,8 @@ var updateColorAmountOnDesignProductionMethodChange = exports.updateColorAmountO
 };
 var EventTypes = exports.EventTypes = {
   DesignAreaListChange: 'DesignDataService/DesignAreaListChange',
-  DesignViewListChange: 'DesignDataService/DesignViewListChange'
+  DesignViewListChange: 'DesignDataService/DesignViewListChange',
+  PreviewModeChange: 'DesignDataService/PreviewModeChange'
 };
 var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   function DesignDataService() {
@@ -2143,6 +2161,9 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
     key: "toggleIsInPreviewMode",
     value: function toggleIsInPreviewMode(isInPreviewMode) {
       this.isInPreviewMode = isInPreviewMode;
+      this.observable.dispatch(EventTypes.PreviewModeChange, {
+        isInPreviewMode: isInPreviewMode
+      });
       if (!this.isInPreviewMode) {
         var hasSelectedDesignArea = !!(0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state).identifier;
         if (hasSelectedDesignArea) {
@@ -2150,6 +2171,11 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "getIsInPreviewMode",
+    value: function getIsInPreviewMode() {
+      return this.isInPreviewMode;
+    }
   }, {
     key: "createHighlightMemo",
     value: function createHighlightMemo(tmpState) {
@@ -2261,6 +2287,71 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
       }
       return getScreenshotsOfElements;
     }()
+    /**
+     * Temporarily applies a bulk name to all isBulkName canvas objects, updates the visualization
+     * texture, runs the provided callback (e.g. to take screenshots), then restores the originals.
+     * Use this to generate one product render per bulk name without persisting the change.
+     */
+  }, {
+    key: "withBulkNameApplied",
+    value: function () {
+      var _withBulkNameApplied = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26(bulkNameText, callback) {
+        var _this1 = this;
+        var restorations;
+        return _regeneratorRuntime().wrap(function _callee26$(_context27) {
+          while (1) switch (_context27.prev = _context27.next) {
+            case 0:
+              restorations = this.getDesignAreas().map(function (area) {
+                return _this1._getCanvas(area);
+              }).filter(Boolean).flatMap(function (canvas) {
+                return (canvas.objects || []).filter(function (obj) {
+                  return obj.isBulkName;
+                }).map(function (obj) {
+                  var original = obj.content;
+                  obj.content = applyBulkNameToContent(obj.content, bulkNameText);
+                  return function () {
+                    obj.content = original;
+                  };
+                });
+              });
+              this.syncCanvasChange();
+              _context27.next = 4;
+              return this.updateVisualization({
+                data: {
+                  screenshot: true
+                }
+              });
+            case 4:
+              _context27.prev = 4;
+              _context27.next = 7;
+              return callback();
+            case 7:
+              return _context27.abrupt("return", _context27.sent);
+            case 8:
+              _context27.prev = 8;
+              restorations.forEach(function (restore) {
+                return restore();
+              });
+              this.syncCanvasChange();
+              _context27.next = 13;
+              return this.updateVisualization({
+                data: {
+                  screenshot: true
+                }
+              });
+            case 13:
+              return _context27.finish(8);
+            case 14:
+            case "end":
+              return _context27.stop();
+          }
+        }, _callee26, this, [[4,, 8, 14]]);
+      }));
+      function withBulkNameApplied(_x27, _x28) {
+        return _withBulkNameApplied.apply(this, arguments);
+      }
+      return withBulkNameApplied;
+    }()
     /**
      * Provides a simple interface to add or remove sample text to the canvas related to the given designAreaIdentifier.
      * It also provides a function to modify the color amount, it simply clears the canvas and re-adds the sample text
@@ -2274,7 +2365,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getSampleCanvasEditorForDesignArea",
     value: function getSampleCanvasEditorForDesignArea() {
-      var _this1 = this;
+      var _this10 = this;
       var designAreaIdentifier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       designAreaIdentifier && _ServiceLocator.Services.store.dispatch((0, _Actions3.selectDesignArea)(designAreaIdentifier));
       var designArea = _ServiceLocator.Services.store.state.designArea.selectedDesignArea;
@@ -2308,20 +2399,20 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
             } else {
               canvas.clear();
             }
-            _this1.updateCanvasData(canvas);
+            _this10.updateCanvasData(canvas);
           },
           setColorAmount: function setColorAmount(value) {
             clearTextObjects();
-            _this1.setColorAmount(value);
+            _this10.setColorAmount(value);
             previouslyContainedSampleText && addSampleText();
             var imgObjects = canvas.objects.filter(function (obj) {
               return obj.type !== 'Text';
             });
-            var canvasData = _this1._serializeCanvas(canvas);
+            var canvasData = _this10._serializeCanvas(canvas);
             if (imgObjects.length > 0) {
-              canvasData = _this1.calculateObjectPosition(canvas);
+              canvasData = _this10.calculateObjectPosition(canvas);
             }
-            _this1.setCanvasData(canvasData, identifier);
+            _this10.setCanvasData(canvasData, identifier);
           }
         };
       }
@@ -2329,24 +2420,24 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "addSampleImageForDesignAreas",
     value: function () {
-      var _addSampleImageForDesignAreas = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27(designAreaIdentifiers, active) {
-        var _this10 = this;
-        return _regeneratorRuntime().wrap(function _callee27$(_context28) {
-          while (1) switch (_context28.prev = _context28.next) {
+      var _addSampleImageForDesignAreas = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28(designAreaIdentifiers, active) {
+        var _this11 = this;
+        return _regeneratorRuntime().wrap(function _callee28$(_context29) {
+          while (1) switch (_context29.prev = _context29.next) {
             case 0:
-              _context28.next = 2;
+              _context29.next = 2;
               return Promise.all(designAreaIdentifiers.map( /*#__PURE__*/function () {
-                var _ref25 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee26(designAreaIdentifier) {
+                var _ref25 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee27(designAreaIdentifier) {
                   var designArea, canvas, state, imageSrc, imageData, canvasDataJSON, designData, canvasData, objects;
-                  return _regeneratorRuntime().wrap(function _callee26$(_context27) {
-                    while (1) switch (_context27.prev = _context27.next) {
+                  return _regeneratorRuntime().wrap(function _callee27$(_context28) {
+                    while (1) switch (_context28.prev = _context28.next) {
                       case 0:
-                        designArea = _this10.getDesignAreaByIdentifier(designAreaIdentifier);
-                        canvas = _this10._getCanvas(designArea);
+                        designArea = _this11.getDesignAreaByIdentifier(designAreaIdentifier);
+                        canvas = _this11._getCanvas(designArea);
                         state = _ServiceLocator.Services.store.state;
                         imageSrc = _designer_placeholder_logo["default"];
                         if (!active) {
-                          _context27.next = 13;
+                          _context28.next = 13;
                           break;
                         }
                         imageData = (0, _Modifiers2.createSVGImageData)({
@@ -2356,55 +2447,55 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                           isPlaceHolderImage: true,
                           galleryImage: false
                         });
-                        _context27.next = 8;
+                        _context28.next = 8;
                         return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
                           enlargeImage: true
                         });
                       case 8:
-                        canvasDataJSON = _this10.calculateObjectPosition(canvas); // eslint-disable-next-line no-console
+                        canvasDataJSON = _this11.calculateObjectPosition(canvas); // eslint-disable-next-line no-console
                         console.log("Sample image added to canvas: ".concat(designAreaIdentifier));
-                        _this10.setCanvasData(canvasDataJSON, designAreaIdentifier);
-                        _context27.next = 21;
+                        _this11.setCanvasData(canvasDataJSON, designAreaIdentifier);
+                        _context28.next = 21;
                         break;
                       case 13:
                         designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(state, designAreaIdentifier);
                         canvasData = designData.canvasData;
                         if (canvasData) {
-                          _context27.next = 17;
+                          _context28.next = 17;
                           break;
                         }
-                        return _context27.abrupt("return");
+                        return _context28.abrupt("return");
                       case 17:
                         objects = canvasData ? canvasData.objects.filter(function (obj) {
                           return obj.type === 'Text';
                         }) : [];
-                        _this10.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
+                        _this11.setCanvasData(_objectSpread(_objectSpread({}, canvasData), {}, {
                           objects: objects
                         }), designAreaIdentifier);
-                        _context27.next = 21;
-                        return _this10.loadCanvasDataFromState([designArea]);
+                        _context28.next = 21;
+                        return _this11.loadCanvasDataFromState([designArea]);
                       case 21:
-                        return _context27.abrupt("return", {
+                        return _context28.abrupt("return", {
                           canvas: canvas,
                           designAreaIdentifier: designAreaIdentifier
                         });
                       case 22:
                       case "end":
-                        return _context27.stop();
+                        return _context28.stop();
                     }
-                  }, _callee26);
+                  }, _callee27);
                 }));
-                return function (_x29) {
+                return function (_x31) {
                   return _ref25.apply(this, arguments);
                 };
               }()));
             case 2:
             case "end":
-              return _context28.stop();
+              return _context29.stop();
           }
-        }, _callee27);
+        }, _callee28);
       }));
-      function addSampleImageForDesignAreas(_x27, _x28) {
+      function addSampleImageForDesignAreas(_x29, _x30) {
         return _addSampleImageForDesignAreas.apply(this, arguments);
       }
       return addSampleImageForDesignAreas;
@@ -2412,33 +2503,33 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "addImageToDesignArea",
     value: function () {
-      var _addImageToDesignArea = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee28(designArea, imageData) {
+      var _addImageToDesignArea = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29(designArea, imageData) {
         var canvas;
-        return _regeneratorRuntime().wrap(function _callee28$(_context29) {
-          while (1) switch (_context29.prev = _context29.next) {
+        return _regeneratorRuntime().wrap(function _callee29$(_context30) {
+          while (1) switch (_context30.prev = _context30.next) {
             case 0:
               canvas = this._getCanvas(designArea);
               if (canvas) {
-                _context29.next = 3;
+                _context30.next = 3;
                 break;
               }
-              return _context29.abrupt("return", false);
+              return _context30.abrupt("return", false);
             case 3:
-              _context29.next = 5;
+              _context30.next = 5;
               return _ServiceLocator.Services.designer.addImageFromUrl(canvas, (0, _Selectors2.getPreviewUrlFromImageData)(imageData.preview), imageData, {
                 enlargeImage: true,
                 scaleToHalf: false,
                 autoSelect: false
               });
             case 5:
-              return _context29.abrupt("return", _context29.sent);
+              return _context30.abrupt("return", _context30.sent);
             case 6:
             case "end":
-              return _context29.stop();
+              return _context30.stop();
           }
-        }, _callee28, this);
+        }, _callee29, this);
       }));
-      function addImageToDesignArea(_x30, _x31) {
+      function addImageToDesignArea(_x32, _x33) {
         return _addImageToDesignArea.apply(this, arguments);
       }
       return addImageToDesignArea;
@@ -2509,72 +2600,72 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setImageAndTextColor",
     value: function () {
-      var _setImageAndTextColor = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee29(color) {
+      var _setImageAndTextColor = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30(color) {
         var designArea, designData, objects, hasmultipleObjects, canvas, isImageSelected, selectedImageIdentifier, _iterator10, _step10, object, image, operations;
-        return _regeneratorRuntime().wrap(function _callee29$(_context30) {
-          while (1) switch (_context30.prev = _context30.next) {
+        return _regeneratorRuntime().wrap(function _callee30$(_context31) {
+          while (1) switch (_context31.prev = _context31.next) {
             case 0:
               if (this.changeAllColorsNeeded()) {
-                _context30.next = 2;
+                _context31.next = 2;
                 break;
               }
-              return _context30.abrupt("return");
+              return _context31.abrupt("return");
             case 2:
               designArea = (0, _Selectors.getSelectedDesignArea)(_ServiceLocator.Services.store.state);
               designData = (0, _Selectors.getDesignDataByDesignAreaIdentifier)(_ServiceLocator.Services.store.state, designArea.identifier);
               objects = (0, _get2["default"])(designData, 'canvasData.objects', []);
               hasmultipleObjects = objects.length > 1;
               if (hasmultipleObjects) {
-                _context30.next = 8;
+                _context31.next = 8;
                 break;
               }
-              return _context30.abrupt("return");
+              return _context31.abrupt("return");
             case 8:
               canvas = this._getCanvas(designArea);
               isImageSelected = canvas.selectedObject && canvas.selectedObject.type === 'Image';
               selectedImageIdentifier = isImageSelected ? (0, _get2["default"])(_ServiceLocator.Services.store.state, 'imageGallery.selectedImage.identifier', null) : null;
               _ServiceLocator.Services.store.dispatch((0, _Actions.setDesignAreaTextsColor)(designArea.identifier, color));
               _iterator10 = _createForOfIteratorHelper(objects);
-              _context30.prev = 13;
+              _context31.prev = 13;
               _iterator10.s();
             case 15:
               if ((_step10 = _iterator10.n()).done) {
-                _context30.next = 24;
+                _context31.next = 24;
                 break;
               }
               object = _step10.value;
               if (!(object.type === 'Image' && object.imageData.identifier !== selectedImageIdentifier)) {
-                _context30.next = 22;
+                _context31.next = 22;
                 break;
               }
               image = (0, _Selectors2.getUserImage)(_ServiceLocator.Services.store.state, object.imageData.identifier);
               operations = (0, _Modifiers.setColorOnOperations)(image.operations, color);
-              _context30.next = 22;
+              _context31.next = 22;
               return _ServiceLocator.Services.designData.editFile(operations, image);
             case 22:
-              _context30.next = 15;
+              _context31.next = 15;
               break;
             case 24:
-              _context30.next = 29;
+              _context31.next = 29;
               break;
             case 26:
-              _context30.prev = 26;
-              _context30.t0 = _context30["catch"](13);
-              _iterator10.e(_context30.t0);
+              _context31.prev = 26;
+              _context31.t0 = _context31["catch"](13);
+              _iterator10.e(_context31.t0);
             case 29:
-              _context30.prev = 29;
+              _context31.prev = 29;
               _iterator10.f();
-              return _context30.finish(29);
+              return _context31.finish(29);
             case 32:
-              _context30.next = 34;
+              _context31.next = 34;
               return this.updateCanvasDataFromState([designArea]);
             case 34:
             case "end":
-              return _context30.stop();
+              return _context31.stop();
           }
-        }, _callee29, this, [[13, 26, 29, 32]]);
+        }, _callee30, this, [[13, 26, 29, 32]]);
       }));
-      function setImageAndTextColor(_x32) {
+      function setImageAndTextColor(_x34) {
         return _setImageAndTextColor.apply(this, arguments);
       }
       return setImageAndTextColor;
@@ -2582,24 +2673,24 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getGalleryImageColors",
     value: function () {
-      var _getGalleryImageColors = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee30(url) {
+      var _getGalleryImageColors = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31(url) {
         var svgContent, designProductionMethod;
-        return _regeneratorRuntime().wrap(function _callee30$(_context31) {
-          while (1) switch (_context31.prev = _context31.next) {
+        return _regeneratorRuntime().wrap(function _callee31$(_context32) {
+          while (1) switch (_context32.prev = _context32.next) {
             case 0:
-              _context31.next = 2;
+              _context32.next = 2;
               return getSvgContent(url, url.startsWith('http'));
             case 2:
-              svgContent = _context31.sent;
+              svgContent = _context32.sent;
               designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-              return _context31.abrupt("return", (0, _Modifiers.createVectorizeColorsMap)({}, getSvgColors(svgContent, designProductionMethod)));
+              return _context32.abrupt("return", (0, _Modifiers.createVectorizeColorsMap)({}, getSvgColors(svgContent, designProductionMethod)));
             case 5:
             case "end":
-              return _context31.stop();
+              return _context32.stop();
           }
-        }, _callee30);
+        }, _callee31);
       }));
-      function getGalleryImageColors(_x33) {
+      function getGalleryImageColors(_x35) {
         return _getGalleryImageColors.apply(this, arguments);
       }
       return getGalleryImageColors;
@@ -2607,49 +2698,49 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "getSVGImageSize",
     value: function () {
-      var _getSVGImageSize = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee31(url) {
+      var _getSVGImageSize = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32(url) {
         var _svgContent$match, _svgContent$match2, _svgContent$match3, _svgTag$match;
         var svgContent, svgTag, width, height, viewBoxValues;
-        return _regeneratorRuntime().wrap(function _callee31$(_context32) {
-          while (1) switch (_context32.prev = _context32.next) {
+        return _regeneratorRuntime().wrap(function _callee32$(_context33) {
+          while (1) switch (_context33.prev = _context33.next) {
             case 0:
-              _context32.next = 2;
+              _context33.next = 2;
               return getSvgContent(url, url.startsWith('http'));
             case 2:
-              svgContent = _context32.sent;
+              svgContent = _context33.sent;
               svgTag = (_svgContent$match = svgContent.match(/<svg[^>]+>/)) === null || _svgContent$match === void 0 ? void 0 : _svgContent$match[0];
               width = (_svgContent$match2 = svgContent.match(/width="([^"]+)"/)) === null || _svgContent$match2 === void 0 ? void 0 : _svgContent$match2[1];
               height = (_svgContent$match3 = svgContent.match(/height="([^"]+)"/)) === null || _svgContent$match3 === void 0 ? void 0 : _svgContent$match3[1];
               if (!(width && height)) {
-                _context32.next = 8;
+                _context33.next = 8;
                 break;
               }
-              return _context32.abrupt("return", {
+              return _context33.abrupt("return", {
                 width: parseFloat(width),
                 height: parseFloat(height)
               });
             case 8:
               viewBoxValues = (_svgTag$match = svgTag.match(/viewBox="([^"]+)"/)) === null || _svgTag$match === void 0 || (_svgTag$match = _svgTag$match[1]) === null || _svgTag$match === void 0 ? void 0 : _svgTag$match.split(' ');
               if (!(viewBoxValues.length === 4)) {
-                _context32.next = 11;
+                _context33.next = 11;
                 break;
               }
-              return _context32.abrupt("return", {
+              return _context33.abrupt("return", {
                 width: parseFloat(viewBoxValues[2]),
                 height: parseFloat(viewBoxValues[3])
               });
             case 11:
-              return _context32.abrupt("return", {
+              return _context33.abrupt("return", {
                 width: 300,
                 height: 300
               });
             case 12:
             case "end":
-              return _context32.stop();
+              return _context33.stop();
           }
-        }, _callee31);
+        }, _callee32);
       }));
-      function getSVGImageSize(_x34) {
+      function getSVGImageSize(_x36) {
         return _getSVGImageSize.apply(this, arguments);
       }
       return getSVGImageSize;
@@ -2674,34 +2765,34 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "editFileQueued",
     value: function () {
-      var _editFileQueued = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee32(operations, image) {
+      var _editFileQueued = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33(operations, image) {
         var options,
           releaseLock,
-          _args33 = arguments;
-        return _regeneratorRuntime().wrap(function _callee32$(_context33) {
-          while (1) switch (_context33.prev = _context33.next) {
+          _args34 = arguments;
+        return _regeneratorRuntime().wrap(function _callee33$(_context34) {
+          while (1) switch (_context34.prev = _context34.next) {
             case 0:
-              options = _args33.length > 2 && _args33[2] !== undefined ? _args33[2] : {};
-              _context33.next = 3;
+              options = _args34.length > 2 && _args34[2] !== undefined ? _args34[2] : {};
+              _context34.next = 3;
               return (0, _ObjectLock.requestLock)(this);
             case 3:
-              releaseLock = _context33.sent;
-              _context33.prev = 4;
-              _context33.next = 7;
+              releaseLock = _context34.sent;
+              _context34.prev = 4;
+              _context34.next = 7;
               return this.editFile(operations, image, options);
             case 7:
-              return _context33.abrupt("return", _context33.sent);
+              return _context34.abrupt("return", _context34.sent);
             case 8:
-              _context33.prev = 8;
+              _context34.prev = 8;
               releaseLock();
-              return _context33.finish(8);
+              return _context34.finish(8);
             case 11:
             case "end":
-              return _context33.stop();
+              return _context34.stop();
           }
-        }, _callee32, this, [[4,, 8, 11]]);
+        }, _callee33, this, [[4,, 8, 11]]);
       }));
-      function editFileQueued(_x35, _x36) {
+      function editFileQueued(_x37, _x38) {
         return _editFileQueued.apply(this, arguments);
       }
       return editFileQueued;
@@ -2709,7 +2800,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "editFile",
     value: function () {
-      var _editFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee33(operations, image) {
+      var _editFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34(operations, image) {
         var options,
           _options$immediateCom,
           immediateCommit,
@@ -2743,11 +2834,11 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
           vectorizeOriginalColorsMap,
           numberOfAggregatedColors,
           numberOfColorsToRemove,
-          _args34 = arguments;
-        return _regeneratorRuntime().wrap(function _callee33$(_context34) {
-          while (1) switch (_context34.prev = _context34.next) {
+          _args35 = arguments;
+        return _regeneratorRuntime().wrap(function _callee34$(_context35) {
+          while (1) switch (_context35.prev = _context35.next) {
             case 0:
-              options = _args34.length > 2 && _args34[2] !== undefined ? _args34[2] : {};
+              options = _args35.length > 2 && _args35[2] !== undefined ? _args35[2] : {};
               // patch operations to keep other unchanged values
               operations = _objectSpread(_objectSpread({}, image.operations), operations);
               _options$immediateCom = options.immediateCommit, immediateCommit = _options$immediateCom === void 0 ? false : _options$immediateCom, _options$designProduc = options.designProductionMethod, designProductionMethod = _options$designProduc === void 0 ? (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state) : _options$designProduc, _options$addMode = options.addMode, addMode = _options$addMode === void 0 ? false : _options$addMode, displayColorPreview = options.displayColorPreview;
@@ -2766,7 +2857,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                 displayColorPreview: displayColorPreview
               });
               if (!(!operationsMatching || !imageIsCompatible)) {
-                _context34.next = 29;
+                _context35.next = 29;
                 break;
               }
               if (!image.operations) {
@@ -2774,13 +2865,13 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               }
               operations = makeOperationsCompatible(operations, compatibilityInfoHash, designProductionMethod.colorPalettes);
               if (!image.gallery) {
-                _context34.next = 18;
+                _context35.next = 18;
                 break;
               }
               operations = _objectSpread(_objectSpread({}, operations || {}), {}, {
                 vectorizeColorsMap: operations.vectorizeColorsMap
               });
-              _context34.next = 29;
+              _context35.next = 29;
               break;
             case 18:
               _getImageUsageInfo = (0, _Selectors2.getImageUsageInfo)(_ServiceLocator.Services.store.state, image.identifier), designAreas = _getImageUsageInfo.designAreas, count = _getImageUsageInfo.count;
@@ -2789,10 +2880,10 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               currentEditData = (0, _Modifiers.getEditDataFromOperations)(image.fileName, image.operations || {}, designProductionMethod);
               isBackendNeeded = createCopy || !(0, _isEqual["default"])(editData, currentEditData);
               if (!isBackendNeeded) {
-                _context34.next = 29;
+                _context35.next = 29;
                 break;
               }
-              _context34.next = 26;
+              _context35.next = 26;
               return _ServiceLocator.Services.store.dispatch((0, _Actions2.editImage)(_objectSpread(_objectSpread({}, editData), {}, {
                 createCopy: createCopy
               }), _objectSpread(_objectSpread({}, imageDataPatch), {}, {
@@ -2808,20 +2899,20 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               imageIdentifier = (0, _get2["default"])(selectedImage, 'identifier');
             case 29:
               if (!(!preview || !preview.url)) {
-                _context34.next = 31;
+                _context35.next = 31;
                 break;
               }
               throw new Error('Preview image url is not specified!');
             case 31:
               if (!(0, _Selectors2.isEditableVectorImage)(preview)) {
-                _context34.next = 40;
+                _context35.next = 40;
                 break;
               }
               _designProductionMethod = (0, _Selectors.getSelectedDesignProductionMethod)(_ServiceLocator.Services.store.state);
-              _context34.next = 35;
+              _context35.next = 35;
               return getSvgContent(preview.url, preview.url.startsWith('http'), !operationsMatching);
             case 35:
-              svgContent = _context34.sent;
+              svgContent = _context35.sent;
               svgColors = getSvgColors(svgContent, _designProductionMethod);
               vectorizeColorsMap = (0, _Modifiers.createVectorizeColorsMap)(operations.vectorizeColorsMap, svgColors);
               thresholdChanged = operations.vectorizeThreshold !== (0, _get2["default"])(image, 'operations.vectorizeThreshold', 0); // prepare initial values for the vectorize feature
@@ -2859,7 +2950,7 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               if (immediateCommit) {
                 this.updateDesignAreaImagesWithSelectedImageData(image.identifier);
               }
-              return _context34.abrupt("return", {
+              return _context35.abrupt("return", {
                 vectorizeColorsMap: operations.vectorizeColorsMap,
                 vectorizeThreshold: operations.vectorizeThreshold,
                 vectorizeMaxColorAmount: operations.vectorizeMaxColorAmount,
@@ -2867,11 +2958,11 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               });
             case 43:
             case "end":
-              return _context34.stop();
+              return _context35.stop();
           }
-        }, _callee33, this);
+        }, _callee34, this);
       }));
-      function editFile(_x37, _x38) {
+      function editFile(_x39, _x40) {
         return _editFile.apply(this, arguments);
       }
       return editFile;
@@ -2879,10 +2970,10 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "resetEditedFile",
     value: function () {
-      var _resetEditedFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee34(image) {
+      var _resetEditedFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee35(image) {
         var state, _image, operations, vectorizeColorsMap, resetOperations, designProductionMethod;
-        return _regeneratorRuntime().wrap(function _callee34$(_context35) {
-          while (1) switch (_context35.prev = _context35.next) {
+        return _regeneratorRuntime().wrap(function _callee35$(_context36) {
+          while (1) switch (_context36.prev = _context36.next) {
             case 0:
               state = _ServiceLocator.Services.store.state;
               if (!image) {
@@ -2901,17 +2992,17 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                   vectorizeThreshold: null
                 });
               }
-              _context35.next = 7;
+              _context36.next = 7;
               return this.editFileQueued(resetOperations, image);
             case 7:
-              return _context35.abrupt("return", _context35.sent);
+              return _context36.abrupt("return", _context36.sent);
             case 8:
             case "end":
-              return _context35.stop();
+              return _context36.stop();
           }
-        }, _callee34, this);
+        }, _callee35, this);
       }));
-      function resetEditedFile(_x39) {
+      function resetEditedFile(_x41) {
         return _resetEditedFile.apply(this, arguments);
       }
       return resetEditedFile;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.57.1",
+  "version": "1.57.3",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.57.1",
+    "@configuratorware/scripts": "1.57.3",
     "@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.57.1",
-    "redhotmagma-visualization": "1.57.1",
+    "redhotmagma-graphics-editor": "1.57.3",
+    "redhotmagma-visualization": "1.57.3",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Designer/Layouts/DefaultLayout.js

@@ -1,8 +1,22 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { Services } from 'App/ServiceLocator';
+import { EventTypes as DesignDataEventTypes } from 'App/Services/DesignDataService';
+
+const usePreviewMode = () => {
+    const [isInPreviewMode, setIsInPreviewMode] = useState(() => Services.designData.getIsInPreviewMode());
+
+    useEffect(() => {
+        return Services.designData.observable.on(DesignDataEventTypes.PreviewModeChange, ({ data }) => {
+            setIsInPreviewMode(data.isInPreviewMode);
+        });
+    }, []);
+
+    return isInPreviewMode;
+};
 
 const styles = theme => ({
     root: {
@@ -155,6 +169,8 @@ const DefaultLayout = ({
     visualizationOverlayMode,
     renderInvalidConfigurationNotice,
 }) => {
+    const isInPreviewMode = usePreviewMode();
+
     return imageOnly ? (
         <div className={`${classes.root} ${fallbackMode ? classes.fallbackMode : ''}`}>
             <div className={`${classes.container} ${isPortraitMode ? classes.containerTabletPortrait : ''}`}>
@@ -199,13 +215,15 @@ const DefaultLayout = ({
                         classes,
                     })}
                 </div>
-                <div className={classes.sidebar}>
-                    {renderSidebar({
-                        area: 'sidebar',
-                        width,
-                        classes,
-                    })}
-                </div>
+                {!isInPreviewMode && (
+                    <div className={classes.sidebar}>
+                        {renderSidebar({
+                            area: 'sidebar',
+                            width,
+                            classes,
+                        })}
+                    </div>
+                )}
             </div>
             {renderLoader()}
         </div>

package/src/App/Screens/Configurator/Components/FullScreenView/index.js

@@ -104,7 +104,7 @@ class FullScreenView extends React.Component {
     static propTypes = {
         handleOpenPreview: PropTypes.func,
         handleClosePreview: PropTypes.func,
-        hasItems: PropTypes.bool,
+        hasMoreItems: PropTypes.bool,
         classes: PropTypes.object,
         children: PropTypes.any,
         showPreviewButton: PropTypes.bool,
@@ -142,7 +142,6 @@ class FullScreenView extends React.Component {
     render() {
         const { previewOpen } = this.state;
         const {
-            hasItems,
             classes,
             children,
             showPreviewButton,
@@ -154,6 +153,7 @@ class FullScreenView extends React.Component {
             thumbnailProps,
             thumbnailDotMode,
             renderButtonOnTop,
+            hasMoreItems,
         } = this.props;
 
         const topPreviewButton = renderTopPreviewButton({
@@ -168,7 +168,7 @@ class FullScreenView extends React.Component {
                         closePreviewMode={this.closePreview}
                         thumbnailClick={this.handleViewChange}
                         previewOpen={previewOpen}
-                        hasItems={hasItems}
+                        hasMoreItems={hasMoreItems}
                         dialogStyle={dialogStyle}
                     >
                         {children}

package/src/App/Screens/Configurator/Components/PreviewPortal/index.js

@@ -44,6 +44,8 @@ const styles = theme => ({
         },
     },
     visualizationWrapperThumbs: {
+        position: 'relative',
+        width: '100%',
         height: 'calc(100% - 200px)',
         [theme.breakpoints.down('xs')]: {
             '& > div:first-child': {
@@ -53,7 +55,9 @@ const styles = theme => ({
         },
     },
     visualizationWrapperCanvas: {
-        height: '100% ',
+        position: 'relative',
+        width: '100%',
+        height: '100%',
         [theme.breakpoints.up('sm')]: {
             height: 'calc(100% - 100px)',
         },
@@ -100,7 +104,6 @@ class PreviewPortal extends React.Component {
         classes: PropTypes.object,
         width: PropTypes.string,
         dialogStyle: PropTypes.string,
-        hasItems: PropTypes.bool,
         hasMoreItems: PropTypes.bool,
         alignTarget: PropTypes.shape({ add: PropTypes.func.isRequired, remove: PropTypes.func.isRequired })
             .isRequired,
@@ -108,7 +111,11 @@ class PreviewPortal extends React.Component {
     };
 
     componentDidMount() {
-        this.props.alignTarget.add(this.wrapperRef.current);
+        requestAnimationFrame(() => {
+            if (this.wrapperRef.current) {
+                this.props.alignTarget.add(this.wrapperRef.current);
+            }
+        });
     }
 
     componentWillUnmount() {

package/src/App/Screens/Configurator/Containers/FullScreenView.js

@@ -20,7 +20,6 @@ const mapStateToProps = state => {
             Services.visualization.initDesignAreaInteraction();
         },
         showDesignViewList: getDesignViewLength(state) > 1 && !isAnyDesignAreaSelected(state),
-        hasItems: getDesignViewLength(state) > 0,
         hasMoreItems: getDesignViewLength(state) > 1,
         areAllDesignAreasEmpty: areAllDesignAreasEmpty(state.configurator),
     };

package/src/App/Services/DesignDataService.js

@@ -134,6 +134,23 @@ const preloadFonts = canvasData =>
             .map(({ content }) => FontFaceRepository.collectFromHTML(content))
     );
 
+// Replaces text node content inside a bulk name HTML string while preserving span styling
+// (color, font-family, etc.) so screenshots render with the correct font and color.
+const applyBulkNameToContent = (htmlContent, name) => {
+    const div = document.createElement('div');
+    div.innerHTML = htmlContent;
+    const walker = document.createTreeWalker(div, NodeFilter.SHOW_TEXT);
+    let first = true;
+    let node;
+    while ((node = walker.nextNode())) {
+        if (node.textContent.trim()) {
+            node.textContent = first ? name : '';
+            first = false;
+        }
+    }
+    return div.innerHTML;
+};
+
 export const checkColorUsage = (() => {
     let alreadyAlertedColorCountState = {};
     return (canvasDataJSON, changeEvent) => {
@@ -560,6 +577,7 @@ export const updateColorAmountOnDesignProductionMethodChange = selectedDesignPro
 export const EventTypes = {
     DesignAreaListChange: 'DesignDataService/DesignAreaListChange',
     DesignViewListChange: 'DesignDataService/DesignViewListChange',
+    PreviewModeChange: 'DesignDataService/PreviewModeChange',
 };
 
 export default class DesignDataService {
@@ -1708,6 +1726,7 @@ export default class DesignDataService {
 
     toggleIsInPreviewMode(isInPreviewMode) {
         this.isInPreviewMode = isInPreviewMode;
+        this.observable.dispatch(EventTypes.PreviewModeChange, { isInPreviewMode });
 
         if (!this.isInPreviewMode) {
             const hasSelectedDesignArea = !!getSelectedDesignArea(Services.store.state).identifier;
@@ -1718,6 +1737,10 @@ export default class DesignDataService {
         }
     }
 
+    getIsInPreviewMode() {
+        return this.isInPreviewMode;
+    }
+
     createHighlightMemo(tmpState) {
         const origState = isHighlighted(Services.store.state);
         this.toggleHighlight(tmpState, false);
@@ -1756,6 +1779,39 @@ export default class DesignDataService {
         return await this.getScreenshots(fontMapping, { screenshotFn: 'getScreenshotsOfElements' });
     }
 
+    /**
+     * Temporarily applies a bulk name to all isBulkName canvas objects, updates the visualization
+     * texture, runs the provided callback (e.g. to take screenshots), then restores the originals.
+     * Use this to generate one product render per bulk name without persisting the change.
+     */
+    async withBulkNameApplied(bulkNameText, callback) {
+        const restorations = this.getDesignAreas()
+            .map(area => this._getCanvas(area))
+            .filter(Boolean)
+            .flatMap(canvas =>
+                (canvas.objects || [])
+                    .filter(obj => obj.isBulkName)
+                    .map(obj => {
+                        const original = obj.content;
+                        obj.content = applyBulkNameToContent(obj.content, bulkNameText);
+                        return () => {
+                            obj.content = original;
+                        };
+                    })
+            );
+
+        this.syncCanvasChange();
+        await this.updateVisualization({ data: { screenshot: true } });
+
+        try {
+            return await callback();
+        } finally {
+            restorations.forEach(restore => restore());
+            this.syncCanvasChange();
+            await this.updateVisualization({ data: { screenshot: true } });
+        }
+    }
+
     /**
      * Provides a simple interface to add or remove sample text to the canvas related to the given designAreaIdentifier.
      * It also provides a function to modify the color amount, it simply clears the canvas and re-adds the sample text