labellife-design-tool 2.2.0 → 2.2.2

package/dist/cjs/index.js

@@ -52,6 +52,7 @@ var ZoomOutIcon = require('@mui/icons-material/ZoomOut');
 var FitScreenIcon = require('@mui/icons-material/FitScreen');
 var reactKonva = require('react-konva');
 var Konva = require('konva');
+var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -1431,15 +1432,22 @@ var _excluded$5 = ["mimeType", "quality", "dpi", "dpiMetadata"],
   _excluded4 = ["fileName"];
 
 // Detect embedded base64 data URLs (data:...;base64,...).
-// These bloat exported JSON significantly (a single image can be 1MB+).
 // Regular http/https/blob URLs are preserved.
 var isBase64DataUrl = function isBase64DataUrl(v) {
   return typeof v === 'string' && v.startsWith('data:') && v.includes(';base64,');
 };
+
+// Only strip base64 from variable input-field images (inputField: true).
+// Static design images ARE the template content — stripping them clears the design.
+// Variable input-field placeholders are replaced at runtime anyway, so stripping
+// their (usually tiny SVG) placeholder base64 is safe and keeps exports clean.
 var _stripBase64FromElement = function stripBase64FromElement(el) {
   var out = _objectSpread2({}, el);
-  if (isBase64DataUrl(out.src)) out.src = '';
-  if (isBase64DataUrl(out.clipSrc)) out.clipSrc = '';
+  var isInputField = out.custom && out.custom.inputField;
+  if (isInputField) {
+    if (isBase64DataUrl(out.src)) out.src = '';
+    if (isBase64DataUrl(out.clipSrc)) out.clipSrc = '';
+  }
   if (Array.isArray(out.children)) {
     out.children = out.children.map(_stripBase64FromElement);
   }
@@ -1673,6 +1681,15 @@ var Store = mobxStateTree.types.model('Store', {
         return el.id !== id;
       });
     },
+    _unresolveInputField: function _unresolveInputField(el) {
+      // Re-insert at the front so it becomes the next field shown (back navigation)
+      var alreadyPending = self._pendingInputFields.some(function (f) {
+        return f.id === el.id;
+      });
+      if (!alreadyPending) {
+        self._pendingInputFields.unshift(el);
+      }
+    },
     clearPendingInputFields: function clearPendingInputFields() {
       self._pendingInputFields = [];
     }
@@ -2160,7 +2177,7 @@ var Store = mobxStateTree.types.model('Store', {
         _ref0$fileName = _ref0.fileName,
         fileName = _ref0$fileName === void 0 ? 'design.json' : _ref0$fileName,
         _ref0$stripBase = _ref0.stripBase64,
-        stripBase64 = _ref0$stripBase === void 0 ? true : _ref0$stripBase;
+        stripBase64 = _ref0$stripBase === void 0 ? false : _ref0$stripBase;
       var data = stripBase64 ? stripBase64FromExport(self.toJSON()) : self.toJSON();
       var json = JSON.stringify(data, null, 2);
       var blob = new Blob([json], {
@@ -10246,6 +10263,8 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
   var field = _ref.field,
     onSubmit = _ref.onSubmit,
     onSkip = _ref.onSkip,
+    onBack = _ref.onBack,
+    canGoBack = _ref.canGoBack,
     currentIndex = _ref.currentIndex,
     totalCount = _ref.totalCount;
   var _useState = React.useState(''),
@@ -10554,7 +10573,26 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
             gap: 2,
             mt: 4.5
           },
-          children: [/*#__PURE__*/jsxRuntime.jsx(material.Button, {
+          children: [canGoBack && /*#__PURE__*/jsxRuntime.jsx(material.Button, {
+            variant: "outlined",
+            onClick: onBack,
+            startIcon: /*#__PURE__*/jsxRuntime.jsx(ArrowBackIcon, {}),
+            sx: {
+              textTransform: 'none',
+              fontWeight: 500,
+              fontSize: 21,
+              px: 3,
+              py: 1.65,
+              borderRadius: '10px',
+              color: '#555',
+              borderColor: '#d0d5dd',
+              '&:hover': {
+                borderColor: '#aaa',
+                backgroundColor: 'rgba(0,0,0,0.02)'
+              }
+            },
+            children: t('inputFieldsDialog.back', 'Back')
+          }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
             variant: "contained",
             onClick: handleSubmit,
             disabled: isRequired && !value,
@@ -10613,6 +10651,7 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     displayIndex = _useState6[0],
     setDisplayIndex = _useState6[1];
   var initialTotalRef = React.useRef(0);
+  var completedHistoryRef = React.useRef([]);
   var config = getInputFieldsConfig();
   var pendingFields = store._pendingInputFields || [];
 
@@ -10631,9 +10670,11 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     if (fields.length > 0 && initialTotalRef.current === 0) {
       initialTotalRef.current = fields.length;
       setDisplayIndex(0);
+      completedHistoryRef.current = [];
     }
     if (fields.length === 0) {
       initialTotalRef.current = 0;
+      completedHistoryRef.current = [];
     }
   }, [fields.length]);
   var totalCount = initialTotalRef.current || fields.length;
@@ -10643,11 +10684,17 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
   var currentField = fields[0];
   if (!currentField) return null;
 
-  // ── Shared submit / skip helpers ────────────────────────────────────
+  // ── Shared submit / skip / back helpers ─────────────────────────────
   var handleSubmit = function handleSubmit(elementId, value) {
     var el = store.getElementById(elementId);
+    var isImage = el && el.custom && el.custom.inputType === 'image';
+    var previousValue = el ? isImage ? el.src : el.text : '';
+    completedHistoryRef.current.push({
+      el: el,
+      previousValue: previousValue,
+      skipped: false
+    });
     if (el && el.set) {
-      var isImage = el.custom && el.custom.inputType === 'image';
       if (isImage) {
         el.set({
           src: String(value)
@@ -10669,6 +10716,14 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     }
   };
   var handleSkip = function handleSkip(elementId) {
+    var el = store.getElementById(elementId);
+    var isImage = el && el.custom && el.custom.inputType === 'image';
+    var previousValue = el ? isImage ? el.src : el.text : '';
+    completedHistoryRef.current.push({
+      el: el,
+      previousValue: previousValue,
+      skipped: true
+    });
     store._resolveInputField(elementId);
     if (fields.length <= 1) {
       if (_onComplete) _onComplete();
@@ -10678,6 +10733,25 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
       });
     }
   };
+  var handleBack = function handleBack() {
+    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 || ''
+      });
+      store._unresolveInputField(el);
+    }
+    setDisplayIndex(function (prev) {
+      return Math.max(0, prev - 1);
+    });
+  };
+  var canGoBack = displayIndex > 0;
 
   // ── Resolve which dialog component to use ───────────────────────────
   // Priority: per-type custom dialog > global CustomDialog > built-in
@@ -10699,6 +10773,8 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
       totalCount: totalCount,
       onSubmit: handleSubmit,
       onSkip: handleSkip,
+      onBack: handleBack,
+      canGoBack: canGoBack,
       onComplete: function onComplete() {
         store.history.addUndoState();
         if (_onComplete) _onComplete();
@@ -10709,6 +10785,8 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     field: currentField,
     onSubmit: handleSubmit,
     onSkip: handleSkip,
+    onBack: handleBack,
+    canGoBack: canGoBack,
     currentIndex: displayIndex,
     totalCount: totalCount
   });