labellife-design-tool 2.1.6 → 2.1.8

package/dist/cjs/canvas/workspace.js

@@ -855,7 +855,6 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     textHeight = _useState2[0],
     setTextHeight = _useState2[1];
-  var skipAutoHeightRef = react.useRef(false);
 
   // Force Konva to recalculate text layout when fonts finish loading.
   react.useEffect(function () {
@@ -886,15 +885,10 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
   }, []);
 
   // Sync Konva auto-sized height back to element model after text reflows
-  // Skip when the user just finished a manual resize (skipAutoHeightRef)
   react.useEffect(function () {
     var node = textRef.current;
     if (!node) return;
     var frame = requestAnimationFrame(function () {
-      if (skipAutoHeightRef.current) {
-        skipAutoHeightRef.current = false;
-        return;
-      }
       var h = node.height();
       if (h > 0) {
         setTextHeight(h);
@@ -932,45 +926,18 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     if (onDragEnd) onDragEnd(e);
   };
 
-  // Live text reflow during resize: convert scale to width on every frame
-  var handleTransform = function handleTransform(e) {
-    var node = e.target;
-    var scaleX = node.scaleX();
-    node.scaleY();
-    // Use element.width as the base since Group.width() can return 0
-    var baseWidth = node.width() || element.width || 100;
-    var newWidth = Math.max(20, baseWidth * Math.abs(scaleX));
-    node.scaleX(1);
-    node.scaleY(1);
-    node.width(newWidth);
-    element.set({
-      x: node.x(),
-      y: node.y(),
-      width: newWidth
-    });
-  };
+  // During live drag: let Konva scale the node visually — no imperative changes,
+  // no element.set(). Any MobX update here causes React to sync stale x/y back
+  // to the node every frame, fighting the Transformer (especially top/left anchors).
+  var handleTransform = function handleTransform() {};
   var handleTransformEnd = function handleTransformEnd(e) {
     var node = e.target;
+    // Read accumulated scale against the MODEL values (not node.width/height,
+    // which accumulate across multiple transform sessions and can drift).
     var scaleX = node.scaleX();
     var scaleY = node.scaleY();
-    var baseWidth = node.width() || element.width || 100;
-    var baseHeight = node.height() || element.height || 50;
-    var newWidth = Math.max(20, baseWidth * Math.abs(scaleX));
-    var newHeight = Math.max(10, baseHeight * Math.abs(scaleY));
+    var newWidth = Math.max(20, element.width * Math.abs(scaleX));
     var newFontSize = Math.max(8, Math.round(element.fontSize * Math.abs(scaleY)));
-    console.log('[TEXT RESIZE]', {
-      scaleX: scaleX,
-      scaleY: scaleY,
-      baseWidth: baseWidth,
-      baseHeight: baseHeight,
-      newWidth: newWidth,
-      newHeight: newHeight,
-      oldFontSize: element.fontSize,
-      newFontSize: newFontSize
-    });
-
-    // Update KonvaText child BEFORE resetting Group scale so that
-    // the Transformer sees the correct bounding box immediately.
     var tNode = textRef.current;
     if (tNode) {
       tNode.width(newWidth);
@@ -979,16 +946,10 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     node.scaleX(1);
     node.scaleY(1);
     node.width(newWidth);
-    node.height(newHeight);
-
-    // Prevent the auto-height useEffect from overriding the user's resize
-    skipAutoHeightRef.current = true;
-    setTextHeight(newHeight);
     element.set({
       x: node.x(),
       y: node.y(),
       width: newWidth,
-      height: newHeight,
       fontSize: newFontSize,
       rotation: node.rotation()
     });
@@ -1731,6 +1692,7 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
   var dateFormat = custom.dateFormat || 'MM-DD-YYYY';
   var isRequired = custom.required === true;
   var logoUrl = config.logoUrl || null;
+  var headerText = config.headerText || null;
   var accentColor = config.accentColor || '#0d83cd';
   var progressPct = Math.round((currentIndex + 1) / totalCount * 100);
   react.useEffect(function () {
@@ -1950,22 +1912,29 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
         py: 1.75,
         flexShrink: 0
       }, config.titleStyle),
-      children: logoUrl ? /*#__PURE__*/jsxRuntime.jsx("img", {
-        src: logoUrl,
-        alt: "Logo",
-        style: {
-          maxHeight: 36,
-          maxWidth: 200,
-          objectFit: 'contain'
-        }
-      }) : /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
         sx: {
-          fontWeight: 700,
-          fontSize: 17,
-          color: '#1a1a1a',
-          letterSpacing: '-0.2px'
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5
         },
-        children: "LabelLife"
+        children: [logoUrl && /*#__PURE__*/jsxRuntime.jsx("img", {
+          src: logoUrl,
+          alt: "Logo",
+          style: {
+            maxHeight: 36,
+            maxWidth: 200,
+            objectFit: 'contain'
+          }
+        }), (headerText || !logoUrl) && /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+          sx: {
+            fontWeight: 700,
+            fontSize: 17,
+            color: '#1a1a1a',
+            letterSpacing: '-0.2px'
+          },
+          children: headerText || 'LabelLife'
+        })]
       })
     }), /*#__PURE__*/jsxRuntime.jsx(material.Box, {
       sx: {
@@ -2065,10 +2034,13 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     _onComplete = _ref2.onComplete,
     _ref2$enabled = _ref2.enabled,
     enabled = _ref2$enabled === void 0 ? true : _ref2$enabled;
+  // displayIndex counts how many fields have been answered (for step indicator only).
+  // Navigation always uses fields[0] — the first remaining pending field.
   var _useState5 = react.useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
-    currentIndex = _useState6[0],
-    setCurrentIndex = _useState6[1];
+    displayIndex = _useState6[0],
+    setDisplayIndex = _useState6[1];
+  var initialTotalRef = react.useRef(0);
   var config = getInputFieldsConfig();
   var pendingFields = store._pendingInputFields || [];
 
@@ -2081,11 +2053,22 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
   var fields = pendingFields.filter(function (f) {
     return f.custom && f.custom.inputField;
   });
+
+  // Capture total and reset display counter when a fresh batch appears
   react.useEffect(function () {
-    setCurrentIndex(0);
-  }, [pendingFields.length]);
+    if (fields.length > 0 && initialTotalRef.current === 0) {
+      initialTotalRef.current = fields.length;
+      setDisplayIndex(0);
+    }
+    if (fields.length === 0) {
+      initialTotalRef.current = 0;
+    }
+  }, [fields.length]);
+  var totalCount = initialTotalRef.current || fields.length;
   if (!enabled || fields.length === 0) return null;
-  var currentField = fields[currentIndex];
+
+  // Always show the first remaining field — the array shrinks as fields are resolved
+  var currentField = fields[0];
   if (!currentField) return null;
 
   // ── Shared submit / skip helpers ────────────────────────────────────
@@ -2104,21 +2087,21 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
       }
     }
     store._resolveInputField(elementId);
-    if (currentIndex + 1 >= fields.length) {
+    if (fields.length <= 1) {
       store.history.addUndoState();
       if (_onComplete) _onComplete();
     } else {
-      setCurrentIndex(function (prev) {
+      setDisplayIndex(function (prev) {
         return prev + 1;
       });
     }
   };
   var handleSkip = function handleSkip(elementId) {
     store._resolveInputField(elementId);
-    if (currentIndex + 1 >= fields.length) {
+    if (fields.length <= 1) {
       if (_onComplete) _onComplete();
     } else {
-      setCurrentIndex(function (prev) {
+      setDisplayIndex(function (prev) {
         return prev + 1;
       });
     }
@@ -2140,8 +2123,8 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     return /*#__PURE__*/jsxRuntime.jsx(ResolvedDialog, {
       field: currentField,
       fields: fields,
-      currentIndex: currentIndex,
-      totalCount: fields.length,
+      currentIndex: displayIndex,
+      totalCount: totalCount,
       onSubmit: handleSubmit,
       onSkip: handleSkip,
       onComplete: function onComplete() {
@@ -2154,8 +2137,8 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     field: currentField,
     onSubmit: handleSubmit,
     onSkip: handleSkip,
-    currentIndex: currentIndex,
-    totalCount: fields.length
+    currentIndex: displayIndex,
+    totalCount: totalCount
   });
 });
 InputFieldsDialog.displayName = 'InputFieldsDialog';