labellife-design-tool 2.2.8 → 2.3.0

package/dist/cjs/canvas/workspace.js

@@ -975,8 +975,10 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     var scaleY = absScale.y;
     var cssFontStyle = element.fontStyle === 'italic' ? 'italic' : 'normal';
     var cssFontWeight = String(element.fontWeight || 'normal');
+    var originalText = element.text;
     var textarea = document.createElement('textarea');
-    textarea.value = element.text;
+    textarea.value = '';
+    textarea.placeholder = originalText;
     textarea.style.position = 'absolute';
     textarea.style.top = "".concat(textPosition.y, "px");
     textarea.style.left = "".concat(textPosition.x, "px");
@@ -1009,15 +1011,21 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     textarea.style.wordBreak = 'break-word';
     textarea.style.minHeight = '0';
     textarea.style.minWidth = '0';
+
+    // Placeholder inherits the element's text color at 40% opacity
+    var placeholderStyle = document.createElement('style');
+    placeholderStyle.textContent = "\n      textarea:placeholder-shown { opacity: 1; }\n      textarea::placeholder { color: ".concat(element.fill, "; opacity: 0.4; }\n    ");
+    stageContainer.appendChild(placeholderStyle);
     stageContainer.appendChild(textarea);
     textarea.focus();
-    textarea.select();
     var removed = false;
     var removeTextarea = function removeTextarea() {
+      var cancel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       if (removed) return;
       removed = true;
+      var newText = !cancel && textarea.value.length > 0 ? textarea.value : originalText;
       element.set({
-        text: textarea.value
+        text: newText
       });
       element.toggleEditMode(false);
       if (grp) grp.show();
@@ -1025,12 +1033,15 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
       if (textarea.parentNode) {
         textarea.parentNode.removeChild(textarea);
       }
+      if (placeholderStyle.parentNode) {
+        placeholderStyle.parentNode.removeChild(placeholderStyle);
+      }
     };
-    textarea.addEventListener('blur', removeTextarea);
+    textarea.addEventListener('blur', function () {
+      return removeTextarea(false);
+    });
     textarea.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') {
-        removeTextarea();
-      }
+      if (e.key === 'Escape') removeTextarea(true);
     });
   };
 
@@ -2190,6 +2201,7 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     setDisplayIndex = _useState8[1];
   var initialTotalRef = react.useRef(0);
   var completedHistoryRef = react.useRef([]);
+  var removedDueToSkipRef = react.useRef([]);
   var isGoingBackRef = react.useRef(false);
   var prevBackTriggerRef = react.useRef(backTrigger);
   var config = getInputFieldsConfig();
@@ -2232,14 +2244,24 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     var last = completedHistoryRef.current.pop();
     if (!last) return;
     var el = last.el,
-      previousValue = last.previousValue;
+      previousValue = last.previousValue,
+      removed = last.removed;
     if (el) {
       var isImage = el.custom && el.custom.inputType === 'image';
-      el.set(isImage ? {
-        src: previousValue || ''
-      } : {
-        text: previousValue || ''
-      });
+      if (removed) {
+        el.set({
+          visible: true
+        });
+        removedDueToSkipRef.current = removedDueToSkipRef.current.filter(function (e) {
+          return e.id !== el.id;
+        });
+      } else {
+        el.set(isImage ? {
+          src: previousValue || ''
+        } : {
+          text: previousValue || ''
+        });
+      }
       isGoingBackRef.current = true;
       store._unresolveInputField(el);
     }
@@ -2257,6 +2279,15 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
   var currentField = fields[0];
   if (!currentField) return null;
 
+  // ── Helper: clear the removed-elements tracking ref ──────────────────
+  // Elements are kept in the canvas with visible:false — they don't render
+  // on screen or in exports, and can be restored via back navigation at any
+  // point (including back-from-summary via backTrigger) without touching
+  // deleted MST nodes.
+  var _flushRemovedElements = function _flushRemovedElements() {
+    removedDueToSkipRef.current = [];
+  };
+
   // ── Shared submit / skip / back helpers ─────────────────────────────
   var handleSubmit = function handleSubmit(elementId, value) {
     var el = store.getElementById(elementId);
@@ -2280,6 +2311,7 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     }
     store._resolveInputField(elementId);
     if (fields.length <= 1) {
+      _flushRemovedElements();
       store.history.addUndoState();
       if (_onComplete) _onComplete();
     } else {
@@ -2292,13 +2324,24 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     var el = store.getElementById(elementId);
     var isImage = el && el.custom && el.custom.inputType === 'image';
     var previousValue = el ? isImage ? el.src : el.text : '';
+    var shouldRemove = !!(el && el.custom && el.custom.removeIfSkipped);
+    if (shouldRemove) {
+      el.set({
+        visible: false
+      });
+      removedDueToSkipRef.current.push(el);
+    }
     completedHistoryRef.current.push({
       el: el,
       previousValue: previousValue,
-      skipped: true
+      skipped: true,
+      removed: shouldRemove
     });
     store._resolveInputField(elementId);
     if (fields.length <= 1) {
+      var hadRemovals = removedDueToSkipRef.current.length > 0;
+      _flushRemovedElements();
+      if (hadRemovals) store.history.addUndoState();
       if (_onComplete) _onComplete();
     } else {
       setDisplayIndex(function (prev) {
@@ -2310,14 +2353,24 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     var last = completedHistoryRef.current.pop();
     if (!last) return;
     var el = last.el,
-      previousValue = last.previousValue;
+      previousValue = last.previousValue,
+      removed = last.removed;
     if (el) {
       var isImage = el.custom && el.custom.inputType === 'image';
-      el.set(isImage ? {
-        src: previousValue || ''
-      } : {
-        text: previousValue || ''
-      });
+      if (removed) {
+        el.set({
+          visible: true
+        });
+        removedDueToSkipRef.current = removedDueToSkipRef.current.filter(function (e) {
+          return e.id !== el.id;
+        });
+      } else {
+        el.set(isImage ? {
+          src: previousValue || ''
+        } : {
+          text: previousValue || ''
+        });
+      }
       store._unresolveInputField(el);
     }
     setDisplayIndex(function (prev) {
@@ -2351,6 +2404,7 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
       onBack: handleBack,
       canGoBack: canGoBack,
       onComplete: function onComplete() {
+        _flushRemovedElements();
         store.history.addUndoState();
         if (_onComplete) _onComplete();
       }