@arbisoft/react-design-tool 1.0.56 → 1.0.60

package/dist/esm/index.js

@@ -144,6 +144,9 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -2073,7 +2076,6 @@ var TEXT_DICTIONARY = {
 };
 var LOCATION_ELEMENT_ID = 'element-location-text';
 var QRID_ELEMENT_ID = 'element-qrid-text';
-var QRID_ELEMENT_PILL = 'element-qrid-text-pill';
 
 var SideBar = function SideBar(_ref) {
   var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6;
@@ -2760,7 +2762,7 @@ var StyledText = styled.p(_templateObject2$g || (_templateObject2$g = _taggedTem
   return "".concat(paddingLeft, "px");
 });
 
-var _excluded$1 = ["image"];
+var _excluded = ["image"];
 var calculatePercentageValue = function calculatePercentageValue(value, percentage) {
   return value * percentage / 100;
 };
@@ -2923,7 +2925,7 @@ var removeImageProperty = function removeImageProperty() {
     if ('image' in elem) {
       // eslint-disable-next-line no-unused-vars
       elem.image;
-        var rest = _objectWithoutProperties(elem, _excluded$1);
+        var rest = _objectWithoutProperties(elem, _excluded);
       return rest;
     }
     return elem;
@@ -6433,7 +6435,6 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
 /* Z+1 */
 );
 
-var _excluded = ["ref"];
 /**
  * @typedef {Object} StudioProps
  * @property {string} [title]
@@ -6453,7 +6454,8 @@ var _excluded = ["ref"];
  * @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 {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
@@ -6466,7 +6468,7 @@ var _excluded = ["ref"];
  * @type {React.ForwardRefExoticComponent<StudioProps & React.RefAttributes<HTMLDivElement>>}
  */
 var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _elements$elements$fi, _elements$find6, _elements$find7, _elements$find8;
+  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,
@@ -6504,11 +6506,10 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$showQrIdToggle = _ref.showQrIdToggle,
     showQrIdToggle = _ref$showQrIdToggle === void 0 ? false : _ref$showQrIdToggle,
     _ref$qrId = _ref.qrId,
-    qrId = _ref$qrId === void 0 ? null : _ref$qrId,
-    _ref$qrIdText = _ref.qrIdText,
-    qrIdText = _ref$qrIdText === void 0 ? null : _ref$qrIdText;
+    qrId = _ref$qrId === void 0 ? null : _ref$qrId;
   var stageRef = useRef(null);
   var elementCacheRef = useRef({});
+  var qrIdActiveRef = useRef(false);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     copiedElement = _useState2[0],
@@ -6618,7 +6619,59 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState52 = _slicedToArray(_useState51, 2),
     defaultTextProps = _useState52[0],
     setDefaultTextProps = _useState52[1];
+  var _useState53 = useState(qrId),
+    _useState54 = _slicedToArray(_useState53, 2),
+    currentQrId = _useState54[0],
+    setCurrentQrId = _useState54[1];
   var overallLoading = loadingFonts || loadingImages || loadingUploadImage || loading;
+  var getPageDims = useCallback(function () {
+    var _base$find;
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    var sizeKey = (base === null || base === void 0 || (_base$find = base.find(function (e) {
+      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
+    })) === null || _base$find === void 0 ? void 0 : _base$find.size) || pageSizes.A4;
+    return pageSizesDimensions[sizeKey] || pageSizesDimensions[pageSizes.A4];
+  }, [elements]);
+  var findById = useCallback(function (id) {
+    var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : elements;
+    return base.find(function (e) {
+      return e.id === id;
+    });
+  }, [elements]);
+
+  /**
+   * Compute the QR-ID frame:
+   * - If LOCATION_ELEMENT_ID exists: center-align above it
+   * - Otherwise: center of page
+   */
+  var computeQrIdFrame = useCallback(function () {
+    var _ref2, _loc$fontSize, _loc$x, _loc$width, _loc$y, _ref3, _loc$color, _loc$fontFamily;
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    var _getPageDims = getPageDims(base),
+      Cw = _getPageDims.width,
+      Ch = _getPageDims.height;
+    var loc = findById(LOCATION_ELEMENT_ID, base);
+    var fs = Math.max(14, Math.min(28, (_ref2 = (_loc$fontSize = loc === null || loc === void 0 ? void 0 : loc.fontSize) !== null && _loc$fontSize !== void 0 ? _loc$fontSize : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize) !== null && _ref2 !== void 0 ? _ref2 : 16));
+    var GAP = 8; // vertical gap above location text line
+    var width = Number.isFinite(loc === null || loc === void 0 ? void 0 : loc.width) ? loc.width : 240;
+
+    // center horizontally over location text (or page)
+    var x = loc ? Math.max(0, ((_loc$x = loc.x) !== null && _loc$x !== void 0 ? _loc$x : 0) + (((_loc$width = loc.width) !== null && _loc$width !== void 0 ? _loc$width : width) - width) / 2) : Math.max(0, (Cw - width) / 2);
+
+    // place just above location text line (or vertical center)
+    var y = loc ? Math.max(0, ((_loc$y = loc.y) !== null && _loc$y !== void 0 ? _loc$y : 0) - fs - GAP) : Math.max(0, (Ch - fs) / 2);
+    var color = (_ref3 = (_loc$color = loc === null || loc === void 0 ? void 0 : loc.color) !== null && _loc$color !== void 0 ? _loc$color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color) !== null && _ref3 !== void 0 ? _ref3 : '#111';
+    var fontFamily = (_loc$fontFamily = loc === null || loc === void 0 ? void 0 : loc.fontFamily) !== null && _loc$fontFamily !== void 0 ? _loc$fontFamily : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily;
+    return {
+      x: x,
+      y: y,
+      width: width,
+      textAlign: 'center',
+      fontSize: fs,
+      color: color,
+      fontFamily: fontFamily
+    };
+  }, [getPageDims, findById, defaultTextProps]);
   var undo = useCallback(function () {
     if (history.length > 0) {
       setSelectedElement(null);
@@ -6674,9 +6727,41 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setLoading: setLoading,
       undoCount: history.length,
       hasChanges: history.length > 0,
-      redoCount: redoStack.length
+      redoCount: redoStack.length,
+      updateQrId: function updateQrId(newId) {
+        setCurrentQrId(newId);
+        var idx = elements.findIndex(function (e) {
+          return e.id === QRID_ELEMENT_ID;
+        });
+        if (idx > -1) {
+          var frame = computeQrIdFrame(elements);
+          var newElements = _toConsumableArray(elements);
+          newElements[idx] = _objectSpread2(_objectSpread2({}, newElements[idx]), {}, {
+            text: String(newId)
+          }, frame);
+          saveHistory(newElements);
+          if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === QRID_ELEMENT_ID) setSelectedElement(newElements[idx]);
+        }
+      },
+      reflowQrId: function reflowQrId() {
+        var idx = elements.findIndex(function (e) {
+          return e.id === QRID_ELEMENT_ID;
+        });
+        if (idx === -1) return;
+        var frame = computeQrIdFrame(elements);
+        var copy = _toConsumableArray(elements);
+        copy[idx] = _objectSpread2(_objectSpread2({}, copy[idx]), frame);
+        saveHistory(copy);
+      }
     };
   });
+  useEffect(function () {
+    if (selectedElement && !elements.some(function (e) {
+      return e.id === selectedElement.id;
+    })) {
+      setSelectedElement(null);
+    }
+  }, [elements, selectedElement]);
   useEffect(function () {
     if (typeof zoomLevel === 'number') {
       setZoomPercentage(zoomLevel);
@@ -6765,16 +6850,15 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
     if (foundLoc) {
       // store a clean copy (no runtime refs)
-      var _ref2 = foundLoc || {};
-        _ref2.ref;
-        var rest = _objectWithoutProperties(_ref2, _excluded);
+      var _ref4 = foundLoc || {},
+        rest = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
       elementCacheRef.current[LOCATION_ELEMENT_ID] = _objectSpread2({}, rest);
     }
   }, _toConsumableArray(elementsList));
   var LoadImages = function LoadImages(elems) {
     setLoadingImages(true);
-    preloadRelevantImages(elems).then(function (_ref4) {
-      var errors = _ref4.errors;
+    preloadRelevantImages(elems).then(function (_ref5) {
+      var errors = _ref5.errors;
       // console.log('✅ Loaded images:', successes);
       if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
         console.log('❌ Failed images:', errors);
@@ -6813,6 +6897,9 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return e.type === elementTypes.text && e.id === QRID_ELEMENT_ID;
     });
   }, [elements]);
+  useEffect(function () {
+    qrIdActiveRef.current = hasQrIdText; // keep this in sync
+  }, [hasQrIdText]);
   var removeElementById = function removeElementById(id) {
     var idx = elements.findIndex(function (e) {
       return e.id === id;
@@ -6821,16 +6908,11 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var snapshot = _objectSpread2({}, elements[idx]);
       delete snapshot.ref;
       // cache latest props before removing
-      elementCacheRef.current[id] = snapshot;
+      if (id !== QRID_ELEMENT_ID) {
+        elementCacheRef.current[id] = snapshot; // never cache QR-ID
+      }
       var next = elements.slice();
       next.splice(idx, 1);
-      if (id === QRID_ELEMENT_ID) {
-        // remove its pill if present
-        var pillId = "".concat(QRID_ELEMENT_ID, "-pill");
-        for (var i = next.length - 1; i >= 0; i--) {
-          if (next[i].id === pillId) next.splice(i, 1);
-        }
-      }
       if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === id) setSelectedElement(null);
       saveHistory(next);
     }
@@ -6848,88 +6930,23 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setSelectedElement(toAdd);
   };
   var addQrIdText = function addQrIdText() {
-    var _elements$find4, _qrIdText$width, _qrIdText$textAlign, _ref5, _qrIdText$color, _ref6, _qrIdText$fontWeight;
-    if (!qrId || hasQrIdText) return;
-
-    // 1) If we’ve seen it before, restore EXACTLY as it was
-    var cached = elementCacheRef.current[QRID_ELEMENT_ID];
-    if (cached) {
-      var toAdd = _objectSpread2(_objectSpread2({}, cached), {}, {
-        id: QRID_ELEMENT_ID,
-        text: String(qrId)
-      });
-      saveHistory([].concat(_toConsumableArray(elements), [toAdd]));
-      setSelectedElement(toAdd);
-      return;
-    }
-
-    // 2) Otherwise, build from external qrIdText + sensible defaults
-    var sizeKey = (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 _pageSizesDimensions$ = pageSizesDimensions[sizeKey],
-      Cw = _pageSizesDimensions$.width,
-      Ch = _pageSizesDimensions$.height;
-    var fs = (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize) || 16;
-    var lineH = fs * 1.25;
-
-    // --- external layout (REQUIRED x,y for custom placement) ---
-    var hasExternal = qrIdText && typeof qrIdText.x === 'number' && typeof qrIdText.y === 'number';
-    var x = hasExternal ? qrIdText.x : Math.max(0, (Cw - 240) / 2);
-    var y = hasExternal ? qrIdText.y : Math.max(0, (Ch - lineH) / 2);
-    var width = (_qrIdText$width = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.width) !== null && _qrIdText$width !== void 0 ? _qrIdText$width : 240;
-    var textAlign = (_qrIdText$textAlign = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.textAlign) !== null && _qrIdText$textAlign !== void 0 ? _qrIdText$textAlign : 'center';
-    var color = (_ref5 = (_qrIdText$color = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.color) !== null && _qrIdText$color !== void 0 ? _qrIdText$color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color) !== null && _ref5 !== void 0 ? _ref5 : '#111';
-
-    // optional readability helpers (opt-in)
-    var wantPill = !!(qrIdText !== null && qrIdText !== void 0 && qrIdText.pill);
-    var pillColor = (qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.pillColor) || (color === '#fff' || color.toLowerCase() === 'white' ? 'rgba(0,0,0,0.35)' : 'rgba(255,255,255,0.85)');
-    var wantOutline = !!(qrIdText !== null && qrIdText !== void 0 && qrIdText.outline);
-    var pillId = "".concat(QRID_ELEMENT_ID, "-pill");
-    var vPad = 8,
-      hPad = 10;
-    var newElements = _toConsumableArray(elements);
-    if (wantPill) {
-      newElements.push({
-        id: pillId,
-        type: elementTypes.square,
-        draggable: true,
-        x: x - hPad,
-        y: y - vPad,
-        width: width + hPad * 2,
-        height: lineH + vPad * 2,
-        cornerRadius: 8,
-        fill: pillColor,
-        opacity: 1,
-        stroke: 'rgba(0,0,0,0.12)',
-        strokeWidth: 1
-      });
-    }
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    if (!currentQrId || base.some(function (e) {
+      return e.id === QRID_ELEMENT_ID;
+    })) return;
+    var frame = computeQrIdFrame(base);
     var textProps = _objectSpread2({
       id: QRID_ELEMENT_ID,
       type: elementTypes.text,
       draggable: true,
-      x: x,
-      y: y,
-      width: width,
-      textAlign: textAlign,
-      text: String(qrId),
-      opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity,
-      fontSize: fs,
-      fontFamily: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily,
-      color: color,
-      textDecoration: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration,
-      fontStyle: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle,
-      fontWeight: (_ref6 = (_qrIdText$fontWeight = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.fontWeight) !== null && _qrIdText$fontWeight !== void 0 ? _qrIdText$fontWeight : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontWeight) !== null && _ref6 !== void 0 ? _ref6 : '400'
-    }, wantOutline && {
-      stroke: color.toLowerCase() === '#ffffff' || color.toLowerCase() === 'white' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.8)',
-      strokeWidth: 1,
-      shadowColor: 'rgba(0,0,0,0.4)',
-      shadowBlur: 3,
-      shadowOpacity: 0.8
-    });
-    newElements.push(textProps);
-    saveHistory(newElements);
+      text: String(currentQrId),
+      fontWeight: '700',
+      // always bold
+      textAlign: 'center',
+      opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity
+    }, frame);
+    var next = [].concat(_toConsumableArray(base), [textProps]);
+    saveHistory(next);
     setSelectedElement(textProps);
   };
   var toggleLocationText = function toggleLocationText() {
@@ -6998,11 +7015,11 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
   };
   var onSetPageSize = function onSetPageSize(newSize) {
-    var _elements$find5;
+    var _elements$find4;
     if (!newSize) return;
-    var oldSize = (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {
+    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$find5 === void 0 ? void 0 : _elements$find5.size) || pageSizes.A4;
+    })) === 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;
@@ -7259,6 +7276,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     saveHistory(_toConsumableArray(copyElements));
   };
   var createNewTemplate = function createNewTemplate() {
+    var _elementsRef$current;
     var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [].concat(_toConsumableArray(defaultElements), [{
       type: elementTypes.qr,
       id: "element".concat(Date.now() + 1),
@@ -7275,19 +7293,25 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
       opacity: 1,
       logoVisible: false
     }]);
-    var prevElements = elementsRef.current;
-    var prevQrIdText = prevElements.find(function (element) {
-      return element.id === QRID_ELEMENT_ID;
+    var prevHadQrId = (_elementsRef$current = elementsRef.current) === null || _elementsRef$current === void 0 ? void 0 : _elementsRef$current.some(function (e) {
+      return e.id === QRID_ELEMENT_ID;
     });
-    var newQrIdText = elems.find(function (element) {
-      return element.id === QRID_ELEMENT_ID;
-    });
-    if (!(newQrIdText !== null && newQrIdText !== void 0 && newQrIdText.id) && prevQrIdText !== null && prevQrIdText !== void 0 && prevQrIdText.id) {
-      var qrIdPill = prevElements.find(function (element) {
-        return element.id === QRID_ELEMENT_PILL;
-      });
-      if (qrIdPill.id) elems.push(qrIdPill);
-      elems.push(prevQrIdText);
+    var next = _toConsumableArray(elems);
+
+    // If toggle was ON before and current template doesn’t include QR-ID, re-add it above Location (or center)
+    if (prevHadQrId && !next.some(function (e) {
+      return e.id === QRID_ELEMENT_ID;
+    }) && showQrIdToggle && currentQrId) {
+      var frame = computeQrIdFrame(next);
+      next.push(_objectSpread2({
+        id: QRID_ELEMENT_ID,
+        type: elementTypes.text,
+        draggable: true,
+        text: String(currentQrId),
+        fontWeight: '700',
+        textAlign: 'center',
+        opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity
+      }, frame));
     }
     setElements(_toConsumableArray(elems));
     setHistory([]);
@@ -7472,7 +7496,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var addQrLogo = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var file, result, imageUrl, reader, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
@@ -7528,7 +7552,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, _callee2, null, [[3, 5, 6, 7]]);
     }));
     return function addQrLogo() {
-      return _ref7.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var addLogo = function addLogo(url) {
@@ -7557,7 +7581,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var onSaveProgress = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
       var processedElements, dataURL;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.n) {
@@ -7591,7 +7615,7 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, _callee3);
     }));
     return function onSaveProgress() {
-      return _ref8.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/React.createElement(StyleSheetManager, {
@@ -7640,12 +7664,12 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onToggleQrIdText: toggleQrIdText
   }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor, {
     setLoading: setLoading,
-    cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find6 = 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$find6 === void 0 ? void 0 : _elements$find6.cuttingGuideStroke) || 0,
-    cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find7 = 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$find7 === void 0 ? void 0 : _elements$find7.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);
     },
@@ -7687,9 +7711,9 @@ var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
     stageRef: stageRef,
     saveHistory: saveHistory,
     onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
-    backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find8 = 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$find8 === void 0 ? void 0 : _elements$find8.opacity) || backgroundImageOpacity,
+    })) === null || _elements$find7 === void 0 ? void 0 : _elements$find7.opacity) || backgroundImageOpacity,
     onDeleteSelectedElement: onDeleteSelectedElement,
     onCopySelectedElement: onCopySelectedElement,
     onToggleLockElement: onToggleLockElement,