@arbisoft/react-design-tool 1.0.36 → 1.0.41

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.35
+npm install @arbisoft/react-design-tool@1.0.41
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.35
+yarn add @arbisoft/react-design-tool@1.0.41
 
 ```
 

package/dist/cjs/index.js

@@ -3756,50 +3756,102 @@ var CanvasImage = function CanvasImage(_ref) {
     _onClick = _ref.onClick,
     _onDragEnd = _ref.onDragEnd,
     _onTransformEnd = _ref.onTransformEnd,
-    onDragMove = _ref.onDragMove;
+    onDragMove = _ref.onDragMove,
+    setLoading = _ref.setLoading;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loaded = _useState2[0],
     setLoaded = _useState2[1];
   var _useState3 = React.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    image = _useState4[0],
-    setImage = _useState4[1];
+    imgEl = _useState4[0],
+    setImgEl = _useState4[1];
   React.useEffect(function () {
-    // const reader = new FileReader();
-    // reader.onload = () => {
-    var img = new window.Image();
-    img.crossOrigin = 'anonymous';
-    img.src = element === null || element === void 0 ? void 0 : element.src;
-    img.onload = function () {
-      setImage(img);
-      setLoaded(true);
+    var cancelled = false;
+    var objectUrl;
+    function load() {
+      return _load.apply(this, arguments);
+    }
+    function _load() {
+      _load = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var res, blob, img, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              _context.p = 0;
+              setLoading(true);
+              // Force a network fetch with CORS, ignoring any stale cached copy
+              _context.n = 1;
+              return fetch(element === null || element === void 0 ? void 0 : element.src, {
+                mode: 'cors',
+                cache: 'reload'
+              });
+            case 1:
+              res = _context.v;
+              if (res.ok) {
+                _context.n = 2;
+                break;
+              }
+              throw new Error("HTTP ".concat(res.status));
+            case 2:
+              _context.n = 3;
+              return res.blob();
+            case 3:
+              blob = _context.v;
+              objectUrl = URL.createObjectURL(blob);
+              img = new window.Image(); // No need to set crossOrigin for blob URLs (they're same-origin to your page)
+              img.onload = function () {
+                if (!cancelled) {
+                  setImgEl(img);
+                  setLoaded(true);
+                }
+                URL.revokeObjectURL(objectUrl);
+              };
+              img.src = objectUrl;
+              _context.n = 5;
+              break;
+            case 4:
+              _context.p = 4;
+              _t = _context.v;
+              console.error('Failed to load image for canvas:', _t);
+            case 5:
+              _context.p = 5;
+              setLoading(false);
+              return _context.f(5);
+            case 6:
+              return _context.a(2);
+          }
+        }, _callee, null, [[0, 4, 5, 6]]);
+      }));
+      return _load.apply(this, arguments);
+    }
+    setLoaded(false);
+    setImgEl(null);
+    if (element !== null && element !== void 0 && element.src) load();
+    return function () {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-    // };
-    // reader.readAsDataURL(file);
-  }, [element]);
-  if (loaded) {
-    return /*#__PURE__*/React.createElement(reactKonva.Image, _extends({
-      id: id,
-      image: image
-    }, element, {
-      width: element === null || element === void 0 ? void 0 : element.width,
-      height: element === null || element === void 0 ? void 0 : element.height,
-      onClick: function onClick() {
-        return _onClick && _onClick();
-      },
-      onDragEnd: function onDragEnd(e) {
-        return _onDragEnd && _onDragEnd(e);
-      },
-      onDragMove: onDragMove,
-      onTransformEnd: function onTransformEnd(e) {
-        _onTransformEnd && _onTransformEnd(e);
-      },
-      strokeScaleEnabled: false
-    }));
-  } else {
-    return null;
-  }
+  }, [element === null || element === void 0 ? void 0 : element.src]);
+  if (!loaded || !imgEl) return null;
+  return /*#__PURE__*/React.createElement(reactKonva.Image, _extends({
+    id: id,
+    image: imgEl
+  }, element, {
+    width: element === null || element === void 0 ? void 0 : element.width,
+    height: element === null || element === void 0 ? void 0 : element.height,
+    onClick: function onClick() {
+      return _onClick && _onClick();
+    },
+    onDragEnd: function onDragEnd(e) {
+      return _onDragEnd && _onDragEnd(e);
+    },
+    onDragMove: onDragMove,
+    onTransformEnd: function onTransformEnd(e) {
+      return _onTransformEnd && _onTransformEnd(e);
+    },
+    strokeScaleEnabled: false
+  }));
 };
 CanvasImage.propTypes = propTypes$e;
 
@@ -3877,7 +3929,6 @@ var QrElement = function QrElement(_ref) {
                 };
               });
             } catch (err) {
-              // eslint-disable-next-line no-console
               console.error('Failed to generate QR code', err);
             }
           case 1:
@@ -3889,6 +3940,75 @@ var QrElement = function QrElement(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  React.useEffect(function () {
+    var cancelled = false;
+    var objectUrl;
+    function loadLogo() {
+      return _loadLogo.apply(this, arguments);
+    }
+    function _loadLogo() {
+      _loadLogo = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var res, blob, img, _t;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              if (element !== null && element !== void 0 && element.qrLogo) {
+                _context2.n = 1;
+                break;
+              }
+              return _context2.a(2);
+            case 1:
+              _context2.p = 1;
+              _context2.n = 2;
+              return fetch(element.qrLogo, {
+                mode: 'cors',
+                cache: 'reload'
+              });
+            case 2:
+              res = _context2.v;
+              if (res.ok) {
+                _context2.n = 3;
+                break;
+              }
+              throw new Error("HTTP ".concat(res.status));
+            case 3:
+              _context2.n = 4;
+              return res.blob();
+            case 4:
+              blob = _context2.v;
+              objectUrl = URL.createObjectURL(blob);
+              img = new window.Image();
+              img.onload = function () {
+                if (cancelled) return;
+                var scaleX = innerRectWidth / img.width;
+                var scaleY = innerRectHeight / img.height;
+                var scale = Math.min(scaleX, scaleY);
+                setLogo({
+                  img: img,
+                  scale: scale
+                });
+              };
+              img.src = objectUrl;
+              _context2.n = 6;
+              break;
+            case 5:
+              _context2.p = 5;
+              _t = _context2.v;
+              console.error('Failed to load QR logo:', _t);
+            case 6:
+              return _context2.a(2);
+          }
+        }, _callee2, null, [[1, 5]]);
+      }));
+      return _loadLogo.apply(this, arguments);
+    }
+    setLogo(null);
+    loadLogo();
+    return function () {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [element === null || element === void 0 ? void 0 : element.qrLogo, innerRectWidth, innerRectHeight]);
   React.useEffect(function () {
     addQR();
   }, [element]);
@@ -4499,7 +4619,8 @@ var useKonvaSnapping = function useKonvaSnapping(params) {
 
 var Editor = function Editor(_ref) {
   var _TEXT_DICTIONARY$lang;
-  var selectedTab = _ref.selectedTab,
+  var setLoading = _ref.setLoading,
+    selectedTab = _ref.selectedTab,
     languageLocale = _ref.languageLocale,
     _ref$title = _ref.title,
     title = _ref$title === 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.TITLE : _ref$title,
@@ -4804,7 +4925,8 @@ var Editor = function Editor(_ref) {
           onDragMove: handleDragging,
           onTransformEnd: function onTransformEnd(e) {
             handleTransform(el.id, e.target.attrs);
-          }
+          },
+          setLoading: setLoading
         });
       case elementTypes.qr:
         return /*#__PURE__*/React.createElement(QrElement, {
@@ -6736,9 +6858,8 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultText: defaultText,
     languageLocale: languageLocale,
     onTemplateSelect: onTemplateSelect
-  }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor
-  // canvasSize={canvasSize}
-  , {
+  }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor, {
+    setLoading: setLoading,
     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$find5 === void 0 ? void 0 : _elements$find5.cuttingGuideStroke) || 0,