feat(canvas): multi-select resize (#284)

The selection scales as a group via an invisible transformer proxy at the
model union bbox: shapes scale geometry (thickness stays), everything else
reprojects its position only, in one undo entry.

Author: u8array

src/components/Canvas/LabelCanvas.tsx

@@ -50,7 +50,7 @@ import { useColorScheme } from "../../hooks/useColorScheme";
 import { useT } from "../../hooks/useT";
 import { useCanvasPanZoom } from "./hooks/useCanvasPanZoom";
 import { useCanvasLasso } from "./hooks/useCanvasLasso";
-import { useKonvaTransformer } from "./hooks/useKonvaTransformer";
+import { useKonvaTransformer, MULTI_RESIZE_PROXY_ID } from "./hooks/useKonvaTransformer";
 import { useKonvaDragController } from "./hooks/useKonvaDragController";
 import { useSnapBypassRef } from "./hooks/useSnapBypassRef";
 import { PaginationControl } from "./PaginationControl";
@@ -355,6 +355,8 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
       if (isEditableTarget(e.target as HTMLElement)) return;
       // Preview is a frozen snapshot; editing would drift the comparison.
       if (selectPreviewLocksEditor(useLabelStore.getState())) return;
+      // Deleting mid-resize would destroy the nodes under the active gesture.
+      if (transformActiveRef.current) return;
       const { selectedIds: ids } = useLabelStore.getState();
       if (ids.length === 0) return;
       e.preventDefault();
@@ -558,6 +560,7 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
   // part (follows the drag) and a static part (locked, stays put) so the chrome
   // reflects the real union, not a rigid translate.
   const selectionFrameRef = useRef<Konva.Rect>(null);
+  const multiResizeProxyRef = useRef<Konva.Rect>(null);
   // Movable group sub-outlines share one drag offset.
   const subOutlineGroupRef = useRef<Konva.Group>(null);
   const isMultiFrame = attachableIds.length > 1;
@@ -586,7 +589,14 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
   // (single drags too), so compute them for any selection.
   const hasSelection = visibleSelIds.length > 0;
   const selectionFrameBase = isMultiFrame ? toFramePx(selectionUnionDots(objects, visibleSelIds, frameCtx)) : null;
-  const movableFrameBase = hasSelection ? toFramePx(selectionUnionDots(objects, movableSelIds, frameCtx)) : null;
+  const movableUnionDots = hasSelection ? selectionUnionDots(objects, movableSelIds, frameCtx) : null;
+  // Needs >1 visible movable leaf (attachableIds counts hidden ones) and no
+  // locked member; either would break the projected union.
+  const multiResizeBboxDots =
+    movableSelIds.length > 1 && staticSelIds.length === 0 && !previewLocks
+      ? movableUnionDots
+      : null;
+  const movableFrameBase = toFramePx(movableUnionDots);
   const staticFrameBase = hasSelection ? toFramePx(selectionUnionDots(objects, staticSelIds, frameCtx)) : null;
   // Preflight runs over the EXPORTABLE leaves (includeInExport), not the visible
   // ones, so a hidden-but-exported object is still warned and a visible-but-not-
@@ -720,6 +730,11 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
       if (!live) return;
       selectionFrameRef.current?.position({ x: live.x, y: live.y });
       selectionFrameRef.current?.size({ width: live.width, height: live.height });
+      // Proxy follows the drag so the transformer chrome tracks live (the
+      // controller already forceUpdates the transformer each tick).
+      if (multiResizeBboxDots && moved) {
+        multiResizeProxyRef.current?.position({ x: moved.x, y: moved.y });
+      }
       // Movable sub-outlines follow the drag (reset to 0 on end).
       subOutlineGroupRef.current?.position({ x: dx, y: dy });
       // Shared clamp/flip policy; measure the bar lazily since a drag that selects
@@ -895,6 +910,8 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
     labelOffsetY,
     snap,
     updateObject,
+    updateObjects,
+    multiResizeBboxDots,
     labelRect: transformerSnapLabelRect,
     objectSnapEnabled: smartSnapActive,
     snapBypassRef,
@@ -1583,7 +1600,7 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
 
               {/* Multi-select/group frame from model bounds (matches snap borders);
                   positioned imperatively in useLayoutEffect + the drag onDelta. */}
-              {!previewLocks && selectionFrameBase && (
+              {!previewLocks && selectionFrameBase && !multiResizeBboxDots && (
                 <Rect
                   ref={selectionFrameRef}
                   name={CAPTURE_CHROME}
@@ -1594,6 +1611,18 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
                 />
               )}
 
+              {/* Multi-resize proxy; geometry synced by the transformer hook. */}
+              {!previewLocks && multiResizeBboxDots && (
+                <Rect
+                  ref={multiResizeProxyRef}
+                  id={MULTI_RESIZE_PROXY_ID}
+                  name={CAPTURE_CHROME}
+                  listening={false}
+                  fillEnabled={false}
+                  strokeEnabled={false}
+                />
+              )}
+
               {/* Box per group member: movable parts (blue) drag; locked parts
                   (amber, the locked convention) stay put. */}
               {!previewLocks && movableGroupRects.length > 0 && (
@@ -1654,6 +1683,7 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
             {!previewLocks && (
               <Transformer
                 ref={transformerRef}
+                borderDash={isMultiSelection && multiResizeBboxDots ? [6, 4] : undefined}
                 rotateEnabled={rotateEnabled}
                 resizeEnabled={resizeEnabled}
                 enabledAnchors={enabledAnchors}

src/components/Canvas/LineObject.tsx

@@ -11,7 +11,8 @@ import {
   type SnapRect,
 } from "../../lib/snapGuides";
 import { diagonalPolygonPoints } from "../../lib/shapeGeometry";
-import { selectionHandlers, type KonvaObjectProps, MIN_HIT_STROKE_PX } from "./konvaObjectProps";
+import { selectionHandlers, type KonvaObjectProps, MIN_HIT_STROKE_PX, lineHandlesNodeId, lineRootNodeId } from "./konvaObjectProps";
+
 
 const HANDLE_VISIBLE_SIZE = 7;
 const HANDLE_HIT_SIZE = 14;
@@ -329,7 +330,7 @@ export function LineObject({
     lineCenterY + (isHorizontal ? lineStrokeWidth : 0);
 
   return (
-    <Group>
+    <Group id={lineRootNodeId(obj.id)}>
       {isAxisAligned ? (
         <>
           <KLine
@@ -341,6 +342,7 @@ export function LineObject({
             ]}
             stroke={strokeColor}
             strokeWidth={lineStrokeWidth}
+            strokeScaleEnabled={false}
             lineCap="butt"
             listening={false}
             globalCompositeOperation={isReverse ? "difference" : "source-over"}
@@ -390,12 +392,13 @@ export function LineObject({
         ]}
         stroke="transparent"
         strokeWidth={Math.max(lineStrokeWidth, MIN_HIT_STROKE_PX)}
+        strokeScaleEnabled={false}
         draggable={!obj.locked}
         {...selectionHandlers(onSelect)}
         {...dragHandlers}
       />
       {isSelected && (
-        <>
+        <Group id={lineHandlesNodeId(obj.id)}>
           {/* Start point: dragging moves origin; end stays fixed. */}
           <Rect
             x={(livePt1?.x ?? x1 + dx) - HANDLE_HIT_SIZE / 2}
@@ -586,7 +589,7 @@ export function LineObject({
             strokeWidth={1}
             listening={false}
           />
-        </>
+        </Group>
       )}
     </Group>
   );