labellife-design-tool 2.0.8 → 2.1.0

package/dist/cjs/canvas/workspace.js

@@ -912,6 +912,24 @@ 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
+    });
+  };
   var handleTransformEnd = function handleTransformEnd(e) {
     var node = e.target;
     var scaleX = node.scaleX();
@@ -1076,6 +1094,7 @@ var TextElementComponent = mobxReactLite.observer(function (_ref) {
     onDblClick: handleDblClick,
     onDblTap: handleDblClick,
     onDragEnd: handleDragEnd,
+    onTransform: handleTransform,
     onTransformEnd: handleTransformEnd,
     children: [element.backgroundEnabled && /*#__PURE__*/jsxRuntime.jsx(reactKonva.Rect, {
       x: -pad,
@@ -1887,6 +1906,8 @@ var PageOverlayFrame = mobxReactLite.observer(function (_ref4) {
   });
 });
 var ALL_ANCHORS = ['top-left', 'top-center', 'top-right', 'middle-left', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right'];
+var TEXT_ANCHORS = ['top-left', 'top-right', 'middle-left', 'middle-right', 'bottom-left', 'bottom-right'];
+var CORNER_ANCHORS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 var SelectionTransformer = mobxReactLite.observer(function (_ref5) {
   var store = _ref5.store,
     stageRef = _ref5.stageRef;
@@ -1898,8 +1919,16 @@ var SelectionTransformer = mobxReactLite.observer(function (_ref5) {
     var el = store.getElementById(id);
     return el && el.type !== 'line';
   });
+  var allText = nonLineIds.length === 1 && function () {
+    var el = store.getElementById(nonLineIds[0]);
+    return el && el.type === 'text';
+  }();
+  var useCorners = nonLineIds.length > 1 || nonLineIds.length === 1 && function () {
+    var el = store.getElementById(nonLineIds[0]);
+    return el && el.type === 'group';
+  }();
+  var targetAnchors = useCorners ? CORNER_ANCHORS : allText ? TEXT_ANCHORS : ALL_ANCHORS;
   react.useEffect(function () {
-    // Defer by one frame so react-konva has committed new nodes to the stage
     var frame = requestAnimationFrame(function () {
       var _transformerRef$curre;
       if (!transformerRef.current || !stageRef.current) return;
@@ -1907,17 +1936,16 @@ var SelectionTransformer = mobxReactLite.observer(function (_ref5) {
       var nodes = [];
       nonLineIds.forEach(function (id) {
         var node = stage.findOne("#".concat(id));
-        if (node) {
-          nodes.push(node);
-        }
+        if (node) nodes.push(node);
       });
+      transformerRef.current.enabledAnchors(targetAnchors);
       transformerRef.current.nodes(nodes);
       (_transformerRef$curre = transformerRef.current.getLayer()) === null || _transformerRef$curre === void 0 || _transformerRef$curre.batchDraw();
     });
     return function () {
       return cancelAnimationFrame(frame);
     };
-  }, [nonLineIds.length, nonLineIds.join(',')]);
+  }, [nonLineIds.length, nonLineIds.join(','), targetAnchors]);
   return /*#__PURE__*/jsxRuntime.jsx(reactKonva.Transformer, {
     ref: transformerRef,
     rotateEnabled: true,
@@ -1965,15 +1993,21 @@ var Workspace = mobxReactLite.observer(function (_ref6) {
         height: height
       });
 
-      // Auto-fit the canvas
-      if (store.width > 0 && store.height > 0) {
+      // Auto-fit the canvas.
+      // Guard: if the container hasn't been laid out yet (width/height === 0)
+      // the arithmetic produces a negative scale which mirrors the entire canvas.
+      // Skip the update in that case — the ResizeObserver will fire again once
+      // the container has real dimensions.
+      if (store.width > 0 && store.height > 0 && width > 0 && height > 0) {
         var padding = 40;
         var scaleX = (width - padding * 2) / store.width;
         var scaleY = (height - padding * 2) / store.height;
         var _scale = Math.min(scaleX, scaleY, 1);
-        store._setScaleToFit(_scale);
-        if (store.scale === 1) {
-          store.setScale(_scale);
+        if (_scale > 0) {
+          store._setScaleToFit(_scale);
+          if (store.scale === 1) {
+            store.setScale(_scale);
+          }
         }
       }
     };