@configuratorware/configurator-frontendgui 1.55.3 → 1.55.5

package/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -114,12 +114,17 @@ var styles = function styles(theme) {
       margin: theme.smallScreen.padding
     }),
     imageTabOptions: {
+      backgroundColor: '#E8E8EA',
+      borderRadius: '5px',
       '& button': {
-        minWidth: '33%',
+        minWidth: '33.33%',
         minHeight: 64,
         textTransform: 'none',
         fontSize: 15,
-        color: '#757575'
+        color: theme.palette.primary.darkText
+      },
+      '& .MuiTabs-indicator': {
+        display: 'none'
       }
     },
     colorizeCaption: {
@@ -270,7 +275,12 @@ var styles = function styles(theme) {
       display: 'flex',
       justifyContent: 'space-between'
     }),
-    imageTab: _defineProperty({}, theme.breakpoints.down('xs'), {
+    imageTab: _defineProperty({
+      '&.Mui-selected': {
+        backgroundColor: theme.palette.primary.main,
+        color: '#FFFFFF'
+      }
+    }, theme.breakpoints.down('xs'), {
       fontWeight: 'bold',
       fontSize: '13px !important'
     }),

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.preparePrintDesignData = exports.prepareDesignDataSnapshots = exports.getMatchAt = exports.embeddedSvgImageToInlineSvgContent = exports.alterObjectValues = exports.alterArrayValues = void 0;
+exports.preparePrintDesignData = exports.prepareDesignDataSnapshots = exports.getMissingViewBox = exports.getMatchAt = exports.embeddedSvgImageToInlineSvgContent = exports.alterObjectValues = exports.alterArrayValues = void 0;
 var getMatchAt = exports.getMatchAt = function getMatchAt(str, regexp) {
   var idx = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var defaultValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -38,4 +38,62 @@ var prepareDesignDataSnapshots = exports.prepareDesignDataSnapshots = function p
 };
 var preparePrintDesignData = exports.preparePrintDesignData = function preparePrintDesignData(svgMap) {
   return alterObjectValues(svgMap, embeddedSvgImageToInlineSvgContent);
+};
+
+/**
+ * Calculates the bounding viewBox for an SVG string.
+ * @param {string} svgString - The raw SVG string from the API.
+ * @returns {string} The calculated viewBox (e.g., "0 0 100 100").
+ */
+var getMissingViewBox = exports.getMissingViewBox = function getMissingViewBox(svgString, fallbackSize) {
+  var padding = 2;
+
+  // 1. Parse the SVG string into a DOM element
+  var parser = new DOMParser();
+  var doc = parser.parseFromString(svgString, 'image/svg+xml');
+  var svgElement = doc.querySelector('svg');
+  if (!svgElement) {
+    throw new Error('Invalid SVG string provided.');
+  }
+
+  // 2. Prepare the SVG to be rendered invisibly
+  if (svgElement.style) {
+    svgElement.style.position = 'absolute';
+    svgElement.style.visibility = 'hidden';
+    svgElement.style.width = 'auto';
+    svgElement.style.height = 'auto';
+  } else {
+    svgElement.setAttribute('style', 'position: absolute; visibility: hidden; width: auto; height: auto;');
+  }
+
+  // 3. Wrap all children in a <g> tag.
+  // Calling getBBox() directly on the <svg> root can be unreliable across
+  // different browsers. A wrapper group guarantees we measure the actual content.
+  var wrapperGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  while (svgElement.firstChild) {
+    wrapperGroup.appendChild(svgElement.firstChild);
+  }
+  svgElement.appendChild(wrapperGroup);
+
+  // 4. Attach to the DOM so the browser can calculate layout dimensions
+  document.body.appendChild(svgElement);
+
+  // 5. Calculate the bounding box
+  var viewBox = "0 0 ".concat(fallbackSize.width, " ").concat(fallbackSize.height);
+  if (!wrapperGroup.getBBox) {
+    return viewBox;
+  }
+  try {
+    var bbox = wrapperGroup.getBBox();
+    var x = bbox.x - padding;
+    var y = bbox.y - padding;
+    var width = bbox.width + padding * 2;
+    var height = bbox.height + padding * 2;
+    // Construct the viewBox string: min-x, min-y, width, height
+    viewBox = "".concat(x, " ").concat(y, " ").concat(width, " ").concat(height);
+  } finally {
+    // 6. Clean up by removing the hidden SVG from the DOM
+    document.body.removeChild(svgElement);
+  }
+  return viewBox;
 };

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

@@ -83,7 +83,7 @@ var prepareImageObjectData = exports.prepareImageObjectData = function prepareIm
             return (0, _DesignDataService.getSvgContent)(url, true);
           case 3:
             svgContent = _context.v;
-            return _context.a(2, (0, _DesignDataService.applySvgContentOperations)(image.original, image.preview, displayColorPreview || gallery ? operations ? operations : image.operations : null, svgContent));
+            return _context.a(2, (0, _DesignDataService.applySvgContentOperations)(image.original, image.preview, displayColorPreview || gallery || originalVector ? operations ? operations : image.operations : null, svgContent));
         }
       }, _callee);
     }));

package/App/Reducers/DesignData/Modifiers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setColorOnOperations = exports.replaceColorOnOperations = exports.removeVectorizeFromOperations = exports.reduceNumberOfDistinctColorsBy = exports.isOneColorAboveThreshold = exports.getEditDataFromOperations = exports.createVectorizeColorsMap = exports.compareOperations = exports.applyProductionMethodChangeToCanvasObjects = void 0;
+exports.setColorOnOperations = exports.replaceColorOnOperations = exports.removeVectorizeFromOperations = exports.reduceNumberOfDistinctColorsBy = exports.isOneColorAboveThreshold = exports.getEditDataFromOperations = exports.extendCanvasDataWithMetricContentSize = exports.createVectorizeColorsMap = exports.compareOperations = exports.applyProductionMethodChangeToCanvasObjects = void 0;
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
@@ -247,4 +247,66 @@ var updateLockState = function updateLockState(newProductionMethod, oldProductio
     });
   }
   return objects;
+};
+var extendCanvasDataWithMetricContentSize = exports.extendCanvasDataWithMetricContentSize = function extendCanvasDataWithMetricContentSize(canvasData) {
+  var b = {
+    minX: Infinity,
+    maxX: -Infinity,
+    minY: Infinity,
+    maxY: -Infinity
+  };
+  var mergeRotated = function mergeRotated(cx, cy, hw, hh, deg) {
+    var rad = deg * Math.PI / 180;
+    var c = Math.cos(rad);
+    var s = Math.sin(rad);
+    for (var _i = 0, _arr = [[-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh]]; _i < _arr.length; _i++) {
+      var _arr$_i = _slicedToArray(_arr[_i], 2),
+        dx = _arr$_i[0],
+        dy = _arr$_i[1];
+      var x = cx + dx * c - dy * s;
+      var y = cy + dx * s + dy * c;
+      b.minX = Math.min(b.minX, x);
+      b.maxX = Math.max(b.maxX, x);
+      b.minY = Math.min(b.minY, y);
+      b.maxY = Math.max(b.maxY, y);
+    }
+  };
+  var mergeAxisAligned = function mergeAxisAligned(cx, cy, hw, hh) {
+    b.minX = Math.min(b.minX, cx - hw);
+    b.maxX = Math.max(b.maxX, cx + hw);
+    b.minY = Math.min(b.minY, cy - hh);
+    b.maxY = Math.max(b.maxY, cy + hh);
+  };
+  var _iterator2 = _createForOfIteratorHelper(canvasData.objects),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var object = _step2.value;
+      if (!object.metric) continue;
+      var w = object.metric.width || 0;
+      var h = object.metric.height || 0;
+      var hw = w / 2;
+      var hh = h / 2;
+      var cx = object.metric.x || 0;
+      var cy = object.metric.y || 0;
+      if (typeof object.rotation === 'number' && object.rotation !== 0 && w && h) {
+        mergeRotated(cx, cy, hw, hh, object.rotation);
+      } else {
+        mergeAxisAligned(cx, cy, hw, hh);
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  if (!Number.isFinite(b.minX)) {
+    return canvasData;
+  }
+  return _objectSpread(_objectSpread({}, canvasData), {}, {
+    metricContentSize: {
+      width: Math.abs(b.maxX - b.minX),
+      height: Math.abs(b.maxY - b.minY)
+    }
+  });
 };

package/App/Services/ConfiguratorService.js

@@ -355,11 +355,29 @@ var ConfiguratorService = exports["default"] = /*#__PURE__*/function (_AbstractC
         roughDesignData[designAreaIdentifier] = {
           objectCount: (0, _get["default"])(canvasData, 'objects.length'),
           designProductionMethodIdentifier: designProductionMethodIdentifier,
-          colorAmount: colorAmount
+          colorAmount: colorAmount,
+          objects: this.getRoughDesignDataObjectDetails(designAreaData)
         };
       }
       return roughDesignData;
     }
+  }, {
+    key: "getRoughDesignDataObjectDetails",
+    value: function getRoughDesignDataObjectDetails(designData) {
+      var includeMetricData = (0, _configuration2.getConf)('designer.includeMetricContentSize', false);
+      return (0, _get["default"])(designData, 'canvasData.objects', []).map(function (object) {
+        var _object$metric, _object$metric2, _object$metric3, _object$metric4;
+        return _objectSpread({
+          uuid: object.uuid
+        }, includeMetricData ? {
+          x: ((_object$metric = object.metric) === null || _object$metric === void 0 ? void 0 : _object$metric.x) || 0,
+          y: ((_object$metric2 = object.metric) === null || _object$metric2 === void 0 ? void 0 : _object$metric2.y) || 0,
+          width: ((_object$metric3 = object.metric) === null || _object$metric3 === void 0 ? void 0 : _object$metric3.width) || 0,
+          height: ((_object$metric4 = object.metric) === null || _object$metric4 === void 0 ? void 0 : _object$metric4.height) || 0,
+          rotation: object.rotation || 0
+        } : {});
+      });
+    }
 
     //// <-- ACTIONS -->
   }, {

package/App/Services/DesignDataService.js

@@ -36,6 +36,7 @@ var _FontFaceRepository = require("../Modules/Designer/Utils/FontFaceRepository"
 var _Selectors5 = require("../Reducers/DesignData/Selectors");
 var _ImageEditUtils = require("../Modules/Designer/Utils/ImageEditUtils");
 var _DesignElementSelectors = require("../Reducers/DesignArea/DesignElementSelectors");
+var _SvgFixers = require("../Modules/Designer/Utils/SvgFixers");
 var _designer_placeholder_logo = _interopRequireDefault(require("../../Resources/Images/designer_placeholder_logo.svg"));
 var _this = void 0;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -344,11 +345,15 @@ var applySvgContentOperations = exports.applySvgContentOperations = function app
     var pixelHeight = Math.round(preview.height * scaleFactor);
     var isSvgUpload = _Selectors2.vectorFormats.indexOf(original.format.toLowerCase()) !== -1;
     if (svgTag.indexOf('viewBox=') === -1) {
-      if (isSvgUpload) {
-        svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(pixelWidth, " ").concat(pixelHeight, "\""));
-      } else {
-        svgContent = svgContent.replace('<svg', "<svg viewBox=\"0 0 ".concat(preview.width, " ").concat(preview.height, "\""));
-      }
+      var fallbackSize = isSvgUpload ? {
+        width: pixelWidth,
+        height: pixelHeight
+      } : {
+        width: preview.width,
+        height: preview.height
+      };
+      var viewBox = (0, _SvgFixers.getMissingViewBox)(svgContent, fallbackSize);
+      svgContent = svgContent.replace('<svg', "<svg viewBox=\"".concat(viewBox, "\""));
     }
     if (svgTag.indexOf('height=') === -1) {
       if (isSvgUpload) {
@@ -1727,7 +1732,17 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setCanvasData",
     value: function setCanvasData(canvasData, targetDesignAreaIdentifier) {
-      _ServiceLocator.Services.store.dispatch((0, _Actions.setCanvasData)(canvasData, targetDesignAreaIdentifier));
+      var extendedCanvasData = this.getExtendedCanvasData(canvasData);
+      _ServiceLocator.Services.store.dispatch((0, _Actions.setCanvasData)(extendedCanvasData, targetDesignAreaIdentifier));
+    }
+  }, {
+    key: "getExtendedCanvasData",
+    value: function getExtendedCanvasData(canvasData) {
+      var _canvasData$objects;
+      if (!(0, _configuration.getConf)('designer.includeMetricContentSize', false) || !(canvasData !== null && canvasData !== void 0 && (_canvasData$objects = canvasData.objects) !== null && _canvasData$objects !== void 0 && _canvasData$objects.length)) {
+        return canvasData;
+      }
+      return (0, _Modifiers.extendCanvasDataWithMetricContentSize)(canvasData);
     }
   }, {
     key: "setColorAmount",

package/App/configuration.js

@@ -203,7 +203,9 @@ var applicationConfiguration = {
     // the default canvas dpi as project specific option
     maxColorAmount: 10,
     // the default max number of colors in the colorizing feature
-    allowedImageUploadFormats: 'jpg,jpeg,svg,png,pdf,bmp,tif,tiff,eps,ai,gif' // the image formats users can upload to designareas / designer items
+    allowedImageUploadFormats: 'jpg,jpeg,svg,png,pdf,bmp,tif,tiff,eps,ai,gif',
+    // the image formats users can upload to designareas / designer items
+    includeMetricContentSize: false // set true to include the metric content size in the design data
   },
   vectorizeImageQuality: 45000,
   renderPreviewImagesForCheckout: true,

package/package.json

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

package/src/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -103,12 +103,17 @@ const styles = theme => ({
         },
     },
     imageTabOptions: {
+        backgroundColor: '#E8E8EA',
+        borderRadius: '5px',
         '& button': {
-            minWidth: '33%',
+            minWidth: '33.33%',
             minHeight: 64,
             textTransform: 'none',
             fontSize: 15,
-            color: '#757575',
+            color: theme.palette.primary.darkText,
+        },
+        '& .MuiTabs-indicator': {
+            display: 'none',
         },
     },
     colorizeCaption: {
@@ -283,6 +288,10 @@ const styles = theme => ({
         },
     },
     imageTab: {
+        '&.Mui-selected': {
+            backgroundColor: theme.palette.primary.main,
+            color: '#FFFFFF',
+        },
         [theme.breakpoints.down('xs')]: {
             fontWeight: 'bold',
             fontSize: '13px !important',

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

@@ -34,3 +34,69 @@ export const prepareDesignDataSnapshots = svgArrMap =>
     alterObjectValues(svgArrMap, arr => alterArrayValues(arr, embeddedSvgImageToInlineSvgContent));
 
 export const preparePrintDesignData = svgMap => alterObjectValues(svgMap, embeddedSvgImageToInlineSvgContent);
+
+/**
+ * Calculates the bounding viewBox for an SVG string.
+ * @param {string} svgString - The raw SVG string from the API.
+ * @returns {string} The calculated viewBox (e.g., "0 0 100 100").
+ */
+export const getMissingViewBox = (svgString, fallbackSize) => {
+    const padding = 2;
+
+    // 1. Parse the SVG string into a DOM element
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const svgElement = doc.querySelector('svg');
+
+    if (!svgElement) {
+        throw new Error('Invalid SVG string provided.');
+    }
+
+    // 2. Prepare the SVG to be rendered invisibly
+    if (svgElement.style) {
+        svgElement.style.position = 'absolute';
+        svgElement.style.visibility = 'hidden';
+        svgElement.style.width = 'auto';
+        svgElement.style.height = 'auto';
+    } else {
+        svgElement.setAttribute(
+            'style',
+            'position: absolute; visibility: hidden; width: auto; height: auto;'
+        );
+    }
+
+    // 3. Wrap all children in a <g> tag.
+    // Calling getBBox() directly on the <svg> root can be unreliable across
+    // different browsers. A wrapper group guarantees we measure the actual content.
+    const wrapperGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    while (svgElement.firstChild) {
+        wrapperGroup.appendChild(svgElement.firstChild);
+    }
+    svgElement.appendChild(wrapperGroup);
+
+    // 4. Attach to the DOM so the browser can calculate layout dimensions
+    document.body.appendChild(svgElement);
+
+    // 5. Calculate the bounding box
+    let viewBox = `0 0 ${fallbackSize.width} ${fallbackSize.height}`;
+
+    if (!wrapperGroup.getBBox) {
+        return viewBox;
+    }
+
+    try {
+        const bbox = wrapperGroup.getBBox();
+
+        const x = bbox.x - padding;
+        const y = bbox.y - padding;
+        const width = bbox.width + padding * 2;
+        const height = bbox.height + padding * 2;
+        // Construct the viewBox string: min-x, min-y, width, height
+        viewBox = `${x} ${y} ${width} ${height}`;
+    } finally {
+        // 6. Clean up by removing the hidden SVG from the DOM
+        document.body.removeChild(svgElement);
+    }
+
+    return viewBox;
+};

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

@@ -47,7 +47,11 @@ export const prepareImageObjectData = rawObject => {
         return applySvgContentOperations(
             image.original,
             image.preview,
-            displayColorPreview || gallery ? (operations ? operations : image.operations) : null,
+            displayColorPreview || gallery || originalVector
+                ? operations
+                    ? operations
+                    : image.operations
+                : null,
             svgContent
         );
     };

package/src/App/Reducers/DesignData/Modifiers.js

@@ -254,3 +254,61 @@ const updateLockState = (newProductionMethod, oldProductionMethod, objects) => {
     }
     return objects;
 };
+
+export const extendCanvasDataWithMetricContentSize = canvasData => {
+    const b = { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity };
+
+    const mergeRotated = (cx, cy, hw, hh, deg) => {
+        const rad = (deg * Math.PI) / 180;
+        const c = Math.cos(rad);
+        const s = Math.sin(rad);
+        for (const [dx, dy] of [
+            [-hw, -hh],
+            [hw, -hh],
+            [hw, hh],
+            [-hw, hh],
+        ]) {
+            const x = cx + dx * c - dy * s;
+            const y = cy + dx * s + dy * c;
+            b.minX = Math.min(b.minX, x);
+            b.maxX = Math.max(b.maxX, x);
+            b.minY = Math.min(b.minY, y);
+            b.maxY = Math.max(b.maxY, y);
+        }
+    };
+
+    const mergeAxisAligned = (cx, cy, hw, hh) => {
+        b.minX = Math.min(b.minX, cx - hw);
+        b.maxX = Math.max(b.maxX, cx + hw);
+        b.minY = Math.min(b.minY, cy - hh);
+        b.maxY = Math.max(b.maxY, cy + hh);
+    };
+
+    for (const object of canvasData.objects) {
+        if (!object.metric) continue;
+        const w = object.metric.width || 0;
+        const h = object.metric.height || 0;
+        const hw = w / 2;
+        const hh = h / 2;
+        const cx = object.metric.x || 0;
+        const cy = object.metric.y || 0;
+
+        if (typeof object.rotation === 'number' && object.rotation !== 0 && w && h) {
+            mergeRotated(cx, cy, hw, hh, object.rotation);
+        } else {
+            mergeAxisAligned(cx, cy, hw, hh);
+        }
+    }
+
+    if (!Number.isFinite(b.minX)) {
+        return canvasData;
+    }
+
+    return {
+        ...canvasData,
+        metricContentSize: {
+            width: Math.abs(b.maxX - b.minX),
+            height: Math.abs(b.maxY - b.minY),
+        },
+    };
+};

package/src/App/Services/ConfiguratorService.js

@@ -254,11 +254,28 @@ export default class ConfiguratorService extends AbstractConfiguratorService {
                 objectCount: get(canvasData, 'objects.length'),
                 designProductionMethodIdentifier,
                 colorAmount,
+                objects: this.getRoughDesignDataObjectDetails(designAreaData),
             };
         }
         return roughDesignData;
     }
 
+    getRoughDesignDataObjectDetails(designData) {
+        const includeMetricData = getConf('designer.includeMetricContentSize', false);
+        return get(designData, 'canvasData.objects', []).map(object => ({
+            uuid: object.uuid,
+            ...(includeMetricData
+                ? {
+                      x: object.metric?.x || 0,
+                      y: object.metric?.y || 0,
+                      width: object.metric?.width || 0,
+                      height: object.metric?.height || 0,
+                      rotation: object.rotation || 0,
+                  }
+                : {}),
+        }));
+    }
+
     //// <-- ACTIONS -->
 
     async saveConfiguration(configuration, configurationtype) {

package/src/App/Services/DesignDataService.js

@@ -40,7 +40,9 @@ import {
     removeVectorizeFromOperations,
     reduceNumberOfDistinctColorsBy,
     applyProductionMethodChangeToCanvasObjects,
+    extendCanvasDataWithMetricContentSize,
 } from '../Reducers/DesignData/Modifiers';
+
 import {
     clearDesignAreaSelection,
     selectDesignArea,
@@ -116,6 +118,7 @@ import { FontFaceRepository } from '../Modules/Designer/Utils/FontFaceRepository
 import { getAggregatedColorCount, isPlaceholderObject } from '../Reducers/DesignData/Selectors';
 import { expandVectorizeColorsMap } from '../Modules/Designer/Utils/ImageEditUtils';
 import { checkDesignElementRestrictionsWithRemovalCount } from '../Reducers/DesignArea/DesignElementSelectors';
+import { getMissingViewBox } from '../Modules/Designer/Utils/SvgFixers';
 
 import placeholderLogo from '../../Resources/Images/designer_placeholder_logo.svg';
 
@@ -418,14 +421,17 @@ export const applySvgContentOperations = (original, preview, operations, svgCont
         const pixelHeight = Math.round(preview.height * scaleFactor);
         const isSvgUpload = vectorFormats.indexOf(original.format.toLowerCase()) !== -1;
         if (svgTag.indexOf('viewBox=') === -1) {
-            if (isSvgUpload) {
-                svgContent = svgContent.replace('<svg', `<svg viewBox="0 0 ${pixelWidth} ${pixelHeight}"`);
-            } else {
-                svgContent = svgContent.replace(
-                    '<svg',
-                    `<svg viewBox="0 0 ${preview.width} ${preview.height}"`
-                );
-            }
+            const fallbackSize = isSvgUpload
+                ? {
+                      width: pixelWidth,
+                      height: pixelHeight,
+                  }
+                : {
+                      width: preview.width,
+                      height: preview.height,
+                  };
+            const viewBox = getMissingViewBox(svgContent, fallbackSize);
+            svgContent = svgContent.replace('<svg', `<svg viewBox="${viewBox}"`);
         }
 
         if (svgTag.indexOf('height=') === -1) {
@@ -1494,7 +1500,16 @@ export default class DesignDataService {
     }
 
     setCanvasData(canvasData, targetDesignAreaIdentifier) {
-        Services.store.dispatch(setCanvasData(canvasData, targetDesignAreaIdentifier));
+        const extendedCanvasData = this.getExtendedCanvasData(canvasData);
+        Services.store.dispatch(setCanvasData(extendedCanvasData, targetDesignAreaIdentifier));
+    }
+
+    getExtendedCanvasData(canvasData) {
+        if (!getConf('designer.includeMetricContentSize', false) || !canvasData?.objects?.length) {
+            return canvasData;
+        }
+
+        return extendCanvasDataWithMetricContentSize(canvasData);
     }
 
     async setColorAmount(maxColorCount) {

package/src/App/Services/__tests__/ConfiguratorService.test.js

@@ -98,7 +98,10 @@ describe('Services/ConfiguratorService', () => {
             designdata: {
                 test_canvas: {
                     canvasData: {
-                        objects: [{ type: 'Image' }, { type: 'Text' }],
+                        objects: [
+                            { type: 'Image', uuid: 'image_1' },
+                            { type: 'Text', uuid: 'text_1' },
+                        ],
                     },
                     colorAmount: 1,
                     designProductionMethodIdentifier: 'print',
@@ -135,6 +138,7 @@ describe('Services/ConfiguratorService', () => {
                     objectCount: 2,
                     colorAmount: 1,
                     designProductionMethodIdentifier: 'print',
+                    objects: [{ uuid: 'image_1' }, { uuid: 'text_1' }],
                 },
             },
             customdata: {

package/src/App/configuration.js

@@ -214,6 +214,7 @@ let applicationConfiguration = {
         dpi: 300, // the default canvas dpi as project specific option
         maxColorAmount: 10, // the default max number of colors in the colorizing feature
         allowedImageUploadFormats: 'jpg,jpeg,svg,png,pdf,bmp,tif,tiff,eps,ai,gif', // the image formats users can upload to designareas / designer items
+        includeMetricContentSize: false, // set true to include the metric content size in the design data
     },
 
     vectorizeImageQuality: 45000,