labellife-design-tool 2.2.3 → 2.2.5

package/dist/cjs/index.js

@@ -1961,11 +1961,11 @@ var Store = mobxStateTree.types.model('Store', {
     _toCanvas: function _toCanvas() {
       var _arguments = arguments;
       return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var _ref4, _ref4$pixelRatio, pixelRatio, pageId, stage, page, layer, prevX, prevY, prevScaleX, prevScaleY, canvas;
+        var _ref4, _ref4$pixelRatio, pixelRatio, pageId, _ref4$mimeType, mimeType, stage, page, layer, prevX, prevY, prevScaleX, prevScaleY, displayOnlyNodes, rawCanvas, finalCanvas, ctx;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
             case 0:
-              _ref4 = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : {}, _ref4$pixelRatio = _ref4.pixelRatio, pixelRatio = _ref4$pixelRatio === void 0 ? 1 : _ref4$pixelRatio, _ref4.ignoreBackground, pageId = _ref4.pageId, _ref4.mimeType, _ref4.includeBleed, _ref4._skipTimeout, _ref4.quickMode;
+              _ref4 = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : {}, _ref4$pixelRatio = _ref4.pixelRatio, pixelRatio = _ref4$pixelRatio === void 0 ? 1 : _ref4$pixelRatio, _ref4.ignoreBackground, pageId = _ref4.pageId, _ref4$mimeType = _ref4.mimeType, mimeType = _ref4$mimeType === void 0 ? 'image/png' : _ref4$mimeType, _ref4.includeBleed, _ref4._skipTimeout, _ref4.quickMode;
               stage = self._stageRef;
               if (stage) {
                 _context.n = 1;
@@ -2000,20 +2000,47 @@ var Store = mobxStateTree.types.model('Store', {
               layer.y(0);
               layer.scaleX(1);
               layer.scaleY(1);
+
+              // Hide display-only nodes (shadow, checkerboard, overlay) — not wanted in export
+              displayOnlyNodes = layer.find('.display-only');
+              displayOnlyNodes.forEach(function (n) {
+                return n.hide();
+              });
               layer.draw();
-              canvas = layer.toCanvas({
+              rawCanvas = layer.toCanvas({
                 pixelRatio: pixelRatio,
                 x: 0,
                 y: 0,
                 width: self.width,
                 height: self.height
-              }); // Restore
+              }); // Restore display-only nodes
+              displayOnlyNodes.forEach(function (n) {
+                return n.show();
+              });
+
+              // Restore layer transform
               layer.x(prevX);
               layer.y(prevY);
               layer.scaleX(prevScaleX);
               layer.scaleY(prevScaleY);
               layer.draw();
-              return _context.a(2, canvas);
+
+              // For JPEG, composite onto a white canvas to eliminate any remaining transparency
+              // (avoids black areas and reduces file size vs checkerboard patterns)
+              if (!(mimeType === 'image/jpeg')) {
+                _context.n = 4;
+                break;
+              }
+              finalCanvas = document.createElement('canvas');
+              finalCanvas.width = rawCanvas.width;
+              finalCanvas.height = rawCanvas.height;
+              ctx = finalCanvas.getContext('2d');
+              ctx.fillStyle = '#ffffff';
+              ctx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
+              ctx.drawImage(rawCanvas, 0, 0);
+              return _context.a(2, finalCanvas);
+            case 4:
+              return _context.a(2, rawCanvas);
           }
         }, _callee);
       }))();
@@ -2044,7 +2071,7 @@ var Store = mobxStateTree.types.model('Store', {
         return _regenerator().w(function (_context3) {
           while (1) switch (_context3.n) {
             case 0:
-              _ref6 = _arguments3.length > 0 && _arguments3[0] !== undefined ? _arguments3[0] : {}, _ref6$mimeType = _ref6.mimeType, mimeType = _ref6$mimeType === void 0 ? 'image/png' : _ref6$mimeType, _ref6$quality = _ref6.quality, quality = _ref6$quality === void 0 ? 1 : _ref6$quality, rest = _objectWithoutProperties(_ref6, _excluded2$1);
+              _ref6 = _arguments3.length > 0 && _arguments3[0] !== undefined ? _arguments3[0] : {}, _ref6$mimeType = _ref6.mimeType, mimeType = _ref6$mimeType === void 0 ? 'image/png' : _ref6$mimeType, _ref6$quality = _ref6.quality, quality = _ref6$quality === void 0 ? 0.92 : _ref6$quality, rest = _objectWithoutProperties(_ref6, _excluded2$1);
               _context3.n = 1;
               return self._toCanvas(_objectSpread2({
                 mimeType: mimeType
@@ -10689,6 +10716,32 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     }
   }, [fields.length]);
   var totalCount = initialTotalRef.current || fields.length;
+
+  // Back-from-summary: triggered by parent incrementing backTrigger prop
+  // Must be defined and its useEffect called BEFORE any early returns (Rules of Hooks)
+  var handleBackFromSummary = function handleBackFromSummary() {
+    var last = completedHistoryRef.current.pop();
+    if (!last) return;
+    var el = last.el,
+      previousValue = last.previousValue;
+    if (el) {
+      var isImage = el.custom && el.custom.inputType === 'image';
+      el.set(isImage ? {
+        src: previousValue || ''
+      } : {
+        text: previousValue || ''
+      });
+      isGoingBackRef.current = true;
+      store._unresolveInputField(el);
+    }
+    // displayIndex stays unchanged — it already points to the last step (N-1)
+  };
+  React.useEffect(function () {
+    if (backTrigger !== prevBackTriggerRef.current) {
+      prevBackTriggerRef.current = backTrigger;
+      handleBackFromSummary();
+    }
+  }, [backTrigger]);
   if (!enabled || fields.length === 0) return null;
 
   // Always show the first remaining field — the array shrinks as fields are resolved
@@ -10764,31 +10817,6 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
   };
   var canGoBack = displayIndex > 0;
 
-  // Back-from-summary: triggered by parent incrementing backTrigger prop
-  var handleBackFromSummary = function handleBackFromSummary() {
-    var last = completedHistoryRef.current.pop();
-    if (!last) return;
-    var el = last.el,
-      previousValue = last.previousValue;
-    if (el) {
-      var isImage = el.custom && el.custom.inputType === 'image';
-      el.set(isImage ? {
-        src: previousValue || ''
-      } : {
-        text: previousValue || ''
-      });
-      isGoingBackRef.current = true;
-      store._unresolveInputField(el);
-    }
-    // displayIndex stays unchanged — it already points to the last step (N-1)
-  };
-  React.useEffect(function () {
-    if (backTrigger !== prevBackTriggerRef.current) {
-      prevBackTriggerRef.current = backTrigger;
-      handleBackFromSummary();
-    }
-  }, [backTrigger]);
-
   // ── Resolve which dialog component to use ───────────────────────────
   // Priority: per-type custom dialog > global CustomDialog > built-in
   var TYPE_DIALOG_MAP = {
@@ -10880,7 +10908,7 @@ var CheckerboardBackground = function CheckerboardBackground(_ref) {
     height: h,
     fill: "#ffffff",
     listening: false,
-    name: "page-background"
+    name: "display-only"
   });
   return /*#__PURE__*/jsxRuntime.jsx(reactKonva.Rect, {
     x: 0,
@@ -10890,7 +10918,7 @@ var CheckerboardBackground = function CheckerboardBackground(_ref) {
     fillPatternImage: imgRef.current,
     fillPatternRepeat: "repeat",
     listening: false,
-    name: "page-background"
+    name: "display-only"
   });
 };
 var ImageBackground = function ImageBackground(_ref2) {
@@ -10974,9 +11002,19 @@ var PageBackground = mobxReactLite.observer(function (_ref3) {
     });
   }
   if (bg === 'transparent') {
-    return /*#__PURE__*/jsxRuntime.jsx(CheckerboardBackground, {
-      w: w,
-      h: h
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactKonva.Rect, {
+        x: 0,
+        y: 0,
+        width: w,
+        height: h,
+        fill: "#ffffff",
+        listening: false,
+        name: "page-background"
+      }), /*#__PURE__*/jsxRuntime.jsx(CheckerboardBackground, {
+        w: w,
+        h: h
+      })]
     });
   }
 
@@ -11073,7 +11111,8 @@ var PageOverlayFrame = mobxReactLite.observer(function (_ref4) {
       ctx.fillStrokeShape(shape);
     },
     fill: "rgba(240,240,240,0.5)",
-    listening: false
+    listening: false,
+    name: "display-only"
   });
 });
 var ALL_ANCHORS = ['top-left', 'top-center', 'top-right', 'middle-left', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right'];
@@ -11408,7 +11447,8 @@ var Workspace = mobxReactLite.observer(function (_ref6) {
           height: store.height,
           fill: "rgba(0,0,0,0.1)",
           cornerRadius: 0,
-          listening: false
+          listening: false,
+          name: "display-only"
         }), /*#__PURE__*/jsxRuntime.jsx(PageBackground, {
           store: store
         }), page && page.children.map(function (element) {