@arbisoft/react-design-tool 1.0.27 → 1.0.29

package/README.md

@@ -40,13 +40,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.27
+npm install @arbisoft/react-design-tool@1.0.29
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.27
+yarn add @arbisoft/react-design-tool@1.0.29
 
 ```
 
@@ -345,7 +345,6 @@ onCreateNewTemplate={(elements) => {
 A callback function triggered whenever a user selects a template (default or custom) from the template sidebar.
 It receives the backend `id` of the selected template (if available), or `null` if the canvas was reset (e.g., for a new template).
 
-
 **Example:**
 
 ```jsx
@@ -354,3 +353,54 @@ onTemplateSelect={(templateId) => {
   setSelectedTemplateId(templateId);
 }}
 ```
+
+#### 19. `zoomLevel` (Number)
+
+Sets the initial and externally controlled zoom level of the canvas.
+
+- Accepts a number (percentage value, e.g., 100 for 100%)
+- Dynamically updates canvas zoom level when the value changes
+
+**Example:**
+
+```jsx
+<Studio zoomLevel={80} />
+```
+
+#### 20. `uploadQRLogoImage` (Async Function)
+A separate callback for uploading QR code logos. This is useful when your QR logos follow a different upload flow than general images.
+
+- Accepts a `File`
+- Should return a URL string or an object with `{ url: string }`
+
+**Example:**
+
+```jsx
+<Studio
+  uploadQRLogoImage={async (file) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    const res = await axios.post('/upload/logo', formData);
+    return res.data.url;
+  }}
+/>
+```
+#### 21. showBackgroundImagePicker (Boolean)
+
+Used to set background image on entire canvas
+
+**Example:**
+
+```jsx
+<Studio showBackgroundImagePicker={true} />
+```
+
+#### 22. showOpacityPicker (Boolean)
+
+Related to `showBackgroundImagePicker` and it's opacity value
+
+**Example:**
+
+```jsx
+<Studio showOpacityPicker={true} />
+```

package/dist/cjs/index.js

@@ -569,6 +569,8 @@ var IconUnlock = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%
 
 var IconCross = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.3%2018.7c.2.2.4.3.7.3s.5-.1.7-.3l5.3-5.3%205.3%205.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1%200-1.4L13.4%2012l5.3-5.3c.4-.4.4-1%200-1.4s-1-.4-1.4%200L12%2010.6%206.7%205.3c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l5.3%205.3-5.3%205.3c-.4.4-.4%201%200%201.4z%22%20id%3D%22_icons%22%20fill%3D%22%23ffffff%22%20class%3D%22fill-000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";
 
+var IconRoundedCorner = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%234D6277%22%3E%3Cg%3E%3Crect%20fill%3D%22none%22%20height%3D%2224%22%20width%3D%2224%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C19h2v2h-2V19z%20M19%2C17h2v-2h-2V17z%20M3%2C13h2v-2H3V13z%20M3%2C17h2v-2H3V17z%20M3%2C9h2V7H3V9z%20M3%2C5h2V3H3V5z%20M7%2C5h2V3H7V5z%20M15%2C21h2v-2h-2V21z%20M11%2C21h2v-2h-2V21z%20M15%2C21h2v-2h-2V21z%20M7%2C21h2v-2H7V21z%20M3%2C21h2v-2H3V21z%20M21%2C8c0-2.76-2.24-5-5-5h-5v2h5%20c1.65%2C0%2C3%2C1.35%2C3%2C3v5h2V8z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
 var EditorBg = "/images/small-dots.png";
 
 var topTabBarpadding = '11.51px 14.16px';
@@ -2536,7 +2538,8 @@ var OpacityPicker = function OpacityPicker(_ref) {
     _ref$tooltip = _ref.tooltip,
     tooltip = _ref$tooltip === void 0 ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.OPACITY : _ref$tooltip,
     _ref$tooltipPosition = _ref.tooltipPosition,
-    tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
+    tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
+    toolBarIcon = _ref.toolBarIcon;
   var pickerRef = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -2566,10 +2569,10 @@ var OpacityPicker = function OpacityPicker(_ref) {
     tooltip: tooltip,
     tooltipPosition: tooltipPosition
   }, showLeftChild && (leftChild ? leftChild : /*#__PURE__*/React.createElement(StyledImage, {
-    src: IconOpacity
+    src: varient === 'opacity' ? IconOpacity : toolBarIcon
   })), /*#__PURE__*/React.createElement(StyledText, {
     fontFamily: fontFamily
-  }, varient === 'opacity' ? "".concat(value * 100, "%") : Math.round(value)), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
+  }, varient === 'opacity' ? "".concat(value * 100, "%") : "".concat(Math.round(value), "px")), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
       bottom: -50,
@@ -2755,7 +2758,11 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
     cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
     onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
     canvasBackgroundImage = _ref.canvasBackgroundImage,
-    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage;
+    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
+    _ref$showBackgroundIm = _ref.showBackgroundImagePicker,
+    showBackgroundImagePicker = _ref$showBackgroundIm === void 0 ? true : _ref$showBackgroundIm,
+    _ref$showOpacityPicke = _ref.showOpacityPicker,
+    showOpacityPicker = _ref$showOpacityPicke === void 0 ? true : _ref$showOpacityPicke;
   var selectBackgroundColor = function selectBackgroundColor(e) {
     onSetBackgroundColor(e);
   };
@@ -2820,7 +2827,7 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
   }), /*#__PURE__*/React.createElement(ColorBox, {
     backgroundColor: canvasBackgroundColor || theme.color.white,
     onChange: selectBackgroundColor
-  })), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
+  })), showBackgroundImagePicker && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
     paddingRight: 17,
     paddingLeft: 17,
     onClick: handleBackgroundUpload,
@@ -2839,7 +2846,7 @@ var TemplateToolBar = function TemplateToolBar(_ref) {
     src: (canvasBackgroundImage === null || canvasBackgroundImage === void 0 ? void 0 : canvasBackgroundImage.src) || IconBackgroundImage,
     height: 24,
     width: 24
-  })), /*#__PURE__*/React.createElement(OpacityPicker, {
+  })), showOpacityPicker && /*#__PURE__*/React.createElement(OpacityPicker, {
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.BACKGROUND_IMAGE_OPACITY,
     gap: 10,
     value: backgroundImageOpacity,
@@ -3216,7 +3223,8 @@ var propTypes$l = {
   onChangeShapeFill: PropTypes.func,
   onChangeShapeOpacity: PropTypes.func,
   selectedElement: PropTypes.object,
-  languageLocale: PropTypes.string
+  languageLocale: PropTypes.string,
+  onChangeCornerRadius: PropTypes.func
 };
 
 var _templateObject$g, _templateObject2$c;
@@ -3224,7 +3232,7 @@ styled.p(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n
 var RowContainer$1 = styled.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 2px;\n"])));
 
 var ShapeToolBar = function ShapeToolBar(_ref) {
-  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2;
+  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3;
   var shapeStrokeColor = _ref.shapeStrokeColor,
     shapeStrokeWidth = _ref.shapeStrokeWidth,
     shapeFillColor = _ref.shapeFillColor,
@@ -3234,7 +3242,8 @@ var ShapeToolBar = function ShapeToolBar(_ref) {
     onChangeShapeFill = _ref.onChangeShapeFill,
     onChangeShapeOpacity = _ref.onChangeShapeOpacity,
     selectedElement = _ref.selectedElement,
-    languageLocale = _ref.languageLocale;
+    languageLocale = _ref.languageLocale,
+    onChangeCornerRadius = _ref.onChangeCornerRadius;
   return /*#__PURE__*/React.createElement(RowContainer$1, null, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
     gap: 11,
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SHAPE_FILL,
@@ -3255,6 +3264,16 @@ var ShapeToolBar = function ShapeToolBar(_ref) {
     value: isElementShape(selectedElement) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : shapeOpacity,
     onChangeOpacity: onChangeShapeOpacity,
     languageLocale: languageLocale
+  }), (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === 'square' && /*#__PURE__*/React.createElement(OpacityPicker, {
+    tooltip: (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.CORNER_RADIUS) || 'Corner Radius',
+    value: selectedElement.cornerRadius || 0,
+    min: 0,
+    max: 50,
+    step: 1,
+    varient: "radius",
+    onChangeOpacity: onChangeCornerRadius,
+    languageLocale: languageLocale,
+    toolBarIcon: IconRoundedCorner
   }));
 };
 ShapeToolBar.propTypes = propTypes$l;
@@ -3338,7 +3357,10 @@ var TopToolBar = function TopToolBar(_ref) {
     cuttingGuideStroke = _ref.cuttingGuideStroke,
     cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
     onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
-    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage;
+    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
+    showBackgroundImagePicker = _ref.showBackgroundImagePicker,
+    showOpacityPicker = _ref.showOpacityPicker,
+    changeSelectedElementProperty = _ref.changeSelectedElementProperty;
   return /*#__PURE__*/React.createElement(ToolBarWrapper, {
     disabled: selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
   }, selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable) && /*#__PURE__*/React.createElement(OverlayBlocker, {
@@ -3360,7 +3382,9 @@ var TopToolBar = function TopToolBar(_ref) {
     cuttingGuideStroke: cuttingGuideStroke,
     cuttingGuideStrokeColor: cuttingGuideStrokeColor,
     onChangeCuttingGuideProp: onChangeCuttingGuideProp,
-    onRemoveBackgroundImage: onRemoveBackgroundImage
+    onRemoveBackgroundImage: onRemoveBackgroundImage,
+    showBackgroundImagePicker: showBackgroundImagePicker,
+    showOpacityPicker: showOpacityPicker
   }) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text) ? /*#__PURE__*/React.createElement(TextToolBar, {
     fontFamily: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontFamily : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily,
     fontSize: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontSize : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize,
@@ -3393,7 +3417,10 @@ var TopToolBar = function TopToolBar(_ref) {
     shapeOpacity: shapeOpacity,
     onChangeShapeOpacity: onChangeShapeOpacity,
     selectedElement: selectedElement,
-    languageLocale: languageLocale
+    languageLocale: languageLocale,
+    onChangeCornerRadius: function onChangeCornerRadius(val) {
+      changeSelectedElementProperty('cornerRadius', Number(val));
+    }
   }) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.qr) ? /*#__PURE__*/React.createElement(QrToolBar, {
     qrStrokeWidth: qrStrokeWidth,
     qrStrokeColor: qrStrokeColor,
@@ -4533,7 +4560,10 @@ var Editor = function Editor(_ref) {
     showSaveButton = _ref.showSaveButton,
     onSetSelectedTab = _ref.onSetSelectedTab,
     saveButtonText = _ref.saveButtonText,
-    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage;
+    onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
+    showBackgroundImagePicker = _ref.showBackgroundImagePicker,
+    showOpacityPicker = _ref.showOpacityPicker,
+    changeSelectedElementProperty = _ref.changeSelectedElementProperty;
   var transformerRef = React.useRef(null);
   React.useEffect(function () {
     if (transformerRef !== null && transformerRef !== void 0 && transformerRef.current) {
@@ -4637,6 +4667,7 @@ var Editor = function Editor(_ref) {
           key: el.id
         }, el, {
           id: el.id,
+          cornerRadius: el.cornerRadius || 0,
           onClick: function onClick() {
             return handleSelect(el);
           },
@@ -4858,7 +4889,10 @@ var Editor = function Editor(_ref) {
     cuttingGuideStroke: cuttingGuideStroke,
     cuttingGuideStrokeColor: cuttingGuideStrokeColor,
     onChangeCuttingGuideProp: onChangeCuttingGuideProp,
-    onRemoveBackgroundImage: onRemoveBackgroundImage
+    onRemoveBackgroundImage: onRemoveBackgroundImage,
+    showBackgroundImagePicker: showBackgroundImagePicker,
+    showOpacityPicker: showOpacityPicker,
+    changeSelectedElementProperty: changeSelectedElementProperty
   }), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(InnerContainerWrapper, {
     editorHeight: editorHeight + 50,
     editorWidth: editorWidth
@@ -5712,13 +5746,17 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
  * @property {'en'|'ru'|'pl'|'de'|'es'|'fr'|'it'} [locale]
  * @property {Function} [onCreateNewTemplate] - called when user creates a new template, passes new canvas elements
  * @property {Function} [onTemplateSelect] - called when a template is selected, passes template id
+ * @property {Function} [uploadQRLogoImage] - Optional callback to upload the QR logo image. Should return a string or an object with `{ url }`
+ * @property {number} [zoomLevel] - Optional zoom level (e.g. 100 for 100%)
+ * @property {boolean} [showBackgroundImagePicker] - Used to set background image on entire canvas
+ * @property {boolean} [showOpacityPicker] - Related to showBackgroundImagePicker and it's opacity
  */
 
 /**
  * @type {React.ForwardRefExoticComponent<StudioProps & React.RefAttributes<HTMLDivElement>>}
  */
 var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _elements$elements$fi, _elements$find4, _elements$find5, _elements$find6;
+  var _elements$elements$fi, _elements$find5, _elements$find6, _elements$find7;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$defaultQrLogo = _ref.defaultQrLogo,
@@ -5746,7 +5784,11 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$locale = _ref.locale,
     locale = _ref$locale === void 0 ? 'en' : _ref$locale,
     onCreateNewTemplate = _ref.onCreateNewTemplate,
-    onTemplateSelect = _ref.onTemplateSelect;
+    onTemplateSelect = _ref.onTemplateSelect,
+    showBackgroundImagePicker = _ref.showBackgroundImagePicker,
+    showOpacityPicker = _ref.showOpacityPicker,
+    uploadQRLogoImage = _ref.uploadQRLogoImage,
+    zoomLevel = _ref.zoomLevel;
   var stageRef = React.useRef(null);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5780,7 +5822,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     helperSideBarVisible = _useState14[0],
     setHelperSideBarVisible = _useState14[1];
-  var _useState15 = React.useState(100),
+  var _useState15 = React.useState(zoomLevel !== null && zoomLevel !== void 0 ? zoomLevel : 100),
     _useState16 = _slicedToArray(_useState15, 2),
     zoomPercentage = _useState16[0],
     setZoomPercentage = _useState16[1];
@@ -5910,9 +5952,17 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return onSave;
       }(),
       loading: overallLoading,
-      setLoading: setLoading
+      setLoading: setLoading,
+      undoCount: history.length,
+      hasChanges: history.length > 0,
+      redoCount: redoStack.length
     };
   });
+  React.useEffect(function () {
+    if (typeof zoomLevel === 'number') {
+      setZoomPercentage(zoomLevel);
+    }
+  }, [zoomLevel]);
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(e) {
       var isMac = navigator.platform.toUpperCase().includes('MAC');
@@ -6065,25 +6115,41 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
     saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
   };
-  var onSetPageSize = function onSetPageSize(size) {
-    if (!size) {
-      return;
-    }
-    var elemClone = JSON.parse(JSON.stringify(elements));
-    var sizeIndex = elemClone.findIndex(function (e) {
+  var onSetPageSize = function onSetPageSize(newSize) {
+    var _elements$find4;
+    if (!newSize) return;
+    var oldSize = (elements === null || elements === void 0 || (_elements$find4 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
+    })) === null || _elements$find4 === void 0 ? void 0 : _elements$find4.size) || pageSizes.A4;
+    var oldDims = pageSizesDimensions[oldSize];
+    var newDims = pageSizesDimensions[newSize];
+    var scaleX = newDims.width / oldDims.width;
+    var scaleY = newDims.height / oldDims.height;
+    var scaledElements = elements.map(function (elem) {
+      if (elem.type === elementTypes.pageSize) {
+        return _objectSpread2(_objectSpread2({}, elem), {}, {
+          size: newSize
+        }); // Just update the size
+      }
+      var scaled = _objectSpread2({}, elem);
+
+      // Scale common position and size props
+      if (typeof scaled.x === 'number') scaled.x *= scaleX;
+      if (typeof scaled.y === 'number') scaled.y *= scaleY;
+      if (typeof scaled.width === 'number') scaled.width *= scaleX;
+      if (typeof scaled.height === 'number') scaled.height *= scaleY;
+      if (typeof scaled.radius === 'number') scaled.radius *= Math.min(scaleX, scaleY); // for circles, stars
+      if (typeof scaled.fontSize === 'number') scaled.fontSize *= Math.min(scaleX, scaleY);
+
+      // Special case: QR codes or icons that have scale or size props
+      if (scaled.points && Array.isArray(scaled.points)) {
+        scaled.points = scaled.points.map(function (val, idx) {
+          return idx % 2 === 0 ? val * scaleX : val * scaleY;
+        });
+      }
+      return scaled;
     });
-    if (sizeIndex > -1) {
-      elemClone[sizeIndex]['size'] = size;
-    } else {
-      var sizeElement = {
-        type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize,
-        id: "element".concat(Date.now()),
-        size: size
-      };
-      elemClone.push(sizeElement);
-    }
-    saveHistory(removeImageProperty(elemClone));
+    saveHistory(removeImageProperty(scaledElements));
   };
   var _onChangeCuttingGuideProp = function onChangeCuttingGuideProp(type, value) {
     var elemClone = JSON.parse(JSON.stringify(elements));
@@ -6127,6 +6193,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       shapeProps['height'] = 100;
       shapeProps['width'] = 100;
       shapeProps['name'] = elementTypes.square;
+      shapeProps['cornerRadius'] = 0;
       addElement(shapeProps);
     } else if (type === elementTypes.arrowRight) {
       shapeProps['points'] = [0, 0, 100, 0];
@@ -6510,7 +6577,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var addQrLogo = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var file, imageUrl, reader;
+      var file, result, imageUrl, reader, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
           case 0:
@@ -6524,29 +6591,45 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             }
             return _context2.a(2);
           case 2:
-            if (!uploadImageCallBack) {
-              _context2.n = 4;
+            if (!uploadQRLogoImage) {
+              _context2.n = 8;
               break;
             }
+            _context2.p = 3;
             setLoadingUploadImage(true);
-            _context2.n = 3;
-            return uploadImageCallBack(file);
-          case 3:
-            imageUrl = _context2.v;
-            addLogo(imageUrl);
+            _context2.n = 4;
+            return uploadQRLogoImage(file);
+          case 4:
+            result = _context2.v;
+            imageUrl = typeof result === 'string' ? result : result === null || result === void 0 ? void 0 : result.url;
+            if (imageUrl) {
+              addLogo(imageUrl);
+            } else {
+              console.warn('uploadQRLogoImage did not return a valid image URL');
+            }
+            _context2.n = 6;
+            break;
+          case 5:
+            _context2.p = 5;
+            _t = _context2.v;
+            console.error('Error uploading QR logo image:', _t);
+          case 6:
+            _context2.p = 6;
             setLoadingUploadImage(false);
-            _context2.n = 5;
+            return _context2.f(6);
+          case 7:
+            _context2.n = 9;
             break;
-          case 4:
+          case 8:
             reader = new FileReader();
             reader.onload = function () {
               addLogo(reader.result);
             };
             reader.readAsDataURL(file);
-          case 5:
+          case 9:
             return _context2.a(2);
         }
-      }, _callee2);
+      }, _callee2, null, [[3, 5, 6, 7]]);
     }));
     return function addQrLogo() {
       return _ref3.apply(this, arguments);
@@ -6657,12 +6740,12 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor
   // canvasSize={canvasSize}
   , {
-    cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find4 = elements.find(function (e) {
+    cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find4 === void 0 ? void 0 : _elements$find4.cuttingGuideStroke) || 0,
-    cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {
+    })) === null || _elements$find5 === void 0 ? void 0 : _elements$find5.cuttingGuideStroke) || 0,
+    cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find6 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find5 === void 0 ? void 0 : _elements$find5.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
+    })) === null || _elements$find6 === void 0 ? void 0 : _elements$find6.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
     onChangeCuttingGuideProp: function onChangeCuttingGuideProp(type, value) {
       _onChangeCuttingGuideProp(type, value);
     },
@@ -6704,9 +6787,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     stageRef: stageRef,
     saveHistory: saveHistory,
     onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
-    backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find6 = elements.find(function (e) {
+    backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find7 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
-    })) === null || _elements$find6 === void 0 ? void 0 : _elements$find6.opacity) || backgroundImageOpacity,
+    })) === null || _elements$find7 === void 0 ? void 0 : _elements$find7.opacity) || backgroundImageOpacity,
     onDeleteSelectedElement: onDeleteSelectedElement,
     onCopySelectedElement: onCopySelectedElement,
     onToggleLockElement: onToggleLockElement,
@@ -6725,7 +6808,10 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onSetSelectedTab: onSelectedTab,
     saveButtonText: saveButtonText,
     languageLocale: languageLocale,
-    onRemoveBackgroundImage: onRemoveBackgroundImage
+    onRemoveBackgroundImage: onRemoveBackgroundImage,
+    showBackgroundImagePicker: showBackgroundImagePicker,
+    showOpacityPicker: showOpacityPicker,
+    changeSelectedElementProperty: changeSelectedElementProperty
   }), overallLoading && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
     size: "60px",
     color: theme.color.secondary