supervision 0.1.6 → 0.1.7

package/node_modules/supervision-js-core/dist/index.js

@@ -65,6 +65,9 @@ function copySortedDetectionFrames(detectionFrames) {
                 : undefined,
             keypoints: detection.keypoints
                 ? {
+                    boxRelative: detection.keypoints.boxRelative
+                        ? [...detection.keypoints.boxRelative]
+                        : undefined,
                     edges: detection.keypoints.edges.map((edge) => [edge[0], edge[1]]),
                     points: detection.keypoints.points.map((point) => ({ ...point })),
                     visibility: detection.keypoints.visibility
@@ -3950,10 +3953,18 @@ function pickDetectionAtPoint(frame, point, options = {}) {
     if (!frame) {
         return null;
     }
-    const padding = Math.max(0, options.padding ?? 0);
-    const polylinePadding = Math.max(0, options.polylinePadding ?? 6);
-    const keypointPadding = Math.max(0, options.keypointPadding ?? 10);
-    const edgePadding = Math.max(0, options.edgePadding ?? 8);
+    // Tolerances are screen-space sizes; a zoomed-out viewport maps more media
+    // units per screen pixel, so a fixed media-space padding would shrink the
+    // hit target below the drawn marker.
+    const viewportScale = options.viewportScale !== undefined &&
+        Number.isFinite(options.viewportScale) &&
+        options.viewportScale > 0
+        ? options.viewportScale
+        : 1;
+    const padding = Math.max(0, options.padding ?? 0) / viewportScale;
+    const polylinePadding = Math.max(0, options.polylinePadding ?? 6) / viewportScale;
+    const keypointPadding = Math.max(0, options.keypointPadding ?? 10) / viewportScale;
+    const edgePadding = Math.max(0, options.edgePadding ?? 8) / viewportScale;
     const candidates = [];
     for (let detectionIndex = 0; detectionIndex < frame.detections.length; detectionIndex += 1) {
         const detection = frame.detections[detectionIndex];
@@ -3992,10 +4003,22 @@ function pickDetectionAtPoint(frame, point, options = {}) {
             }
         }
         if (detection.keypoints) {
-            const keypointIndex = detection.keypoints.points.findIndex((keypoint, index) => detection.keypoints?.visibility?.[index] !==
-                KeypointVisibility.NotLabeled &&
-                Math.hypot(point.x - keypoint.x, point.y - keypoint.y) <=
-                    keypointPadding);
+            // Clustered keypoints share the pick tolerance; take the nearest so the
+            // hover label, the menu, and the handle drag all name the same point.
+            // Later points draw on top, so they win exact ties.
+            let keypointIndex = -1;
+            let keypointDistance = Number.POSITIVE_INFINITY;
+            detection.keypoints.points.forEach((keypoint, index) => {
+                if (detection.keypoints?.visibility?.[index] ===
+                    KeypointVisibility.NotLabeled) {
+                    return;
+                }
+                const distance = Math.hypot(point.x - keypoint.x, point.y - keypoint.y);
+                if (distance <= keypointPadding && distance <= keypointDistance) {
+                    keypointIndex = index;
+                    keypointDistance = distance;
+                }
+            });
             if (keypointIndex !== -1) {
                 pushCandidate(DetectionPickTarget.Keypoint, Math.PI * keypointPadding * keypointPadding, keypointIndex);
             }
@@ -4368,29 +4391,77 @@ function getAnnotationHandles(detection, viewportScale = 1) {
     if (detection.polyline)
         return getPathHandles(detection.polyline.points, false, radius, hitSize);
     if (detection.keypoints) {
-        return detection.keypoints.points.map((point, geometryIndex) => ({
-            cursor: "move",
-            geometryIndex,
-            hitSize,
-            id: `kp-${geometryIndex}`,
-            kind: AnnotationHandleKind.Keypoint,
-            point,
-            radius,
-        }));
+        const keypointHandles = detection.keypoints.points.flatMap((point, geometryIndex) => detection.keypoints?.visibility?.[geometryIndex] ===
+            KeypointVisibility.NotLabeled
+            ? []
+            : [
+                {
+                    cursor: "pointer",
+                    geometryIndex,
+                    hitSize,
+                    id: `kp-${geometryIndex}`,
+                    kind: AnnotationHandleKind.Keypoint,
+                    point,
+                    radius,
+                },
+            ]);
+        if (!detection.rect)
+            return keypointHandles;
+        // The skeleton's box resizes like any box; keypoints come last so a point
+        // sitting on the box edge still wins the hit test.
+        return [
+            ...getBoxHandles(detection.rect, radius, hitSize),
+            ...keypointHandles,
+        ];
     }
     if (detection.rect)
         return getBoxHandles(detection.rect, radius, hitSize);
     return [];
 }
 function pickAnnotationHandle(handles, point) {
-    return [...handles]
-        .reverse()
-        .find((handle) => Math.abs(point.x - handle.point.x) <= handle.hitSize / 2 &&
-        Math.abs(point.y - handle.point.y) <= handle.hitSize / 2);
+    let picked;
+    let pickedDistance = Number.POSITIVE_INFINITY;
+    for (const handle of handles) {
+        const dx = Math.abs(point.x - handle.point.x);
+        const dy = Math.abs(point.y - handle.point.y);
+        if (dx > handle.hitSize / 2 || dy > handle.hitSize / 2)
+            continue;
+        // Clustered handles (face keypoints, a tiny box's corners) share hit
+        // areas; the nearest one is what the pointer is on. Later handles draw on
+        // top, so they win exact ties.
+        const distance = Math.hypot(dx, dy);
+        if (distance <= pickedDistance) {
+            picked = handle;
+            pickedDistance = distance;
+        }
+    }
+    return picked;
 }
 function applyAnnotationHandleDrag(detection, handle, point) {
     if (detection.rect && handle.kind === AnnotationHandleKind.Resize) {
-        return { ...detection, rect: resizeRect(detection.rect, handle.id, point) };
+        const rect = resizeRect(detection.rect, handle.id, point);
+        const boxRelative = detection.keypoints?.boxRelative;
+        if (!detection.keypoints || !boxRelative?.some(Boolean)) {
+            return { ...detection, rect };
+        }
+        // Box-relative keypoints (unplaced template points) follow the rect;
+        // points the user positioned keep their coordinates.
+        const from = detection.rect;
+        const scaleX = from.width > 0 ? rect.width / from.width : 1;
+        const scaleY = from.height > 0 ? rect.height / from.height : 1;
+        return {
+            ...detection,
+            keypoints: {
+                ...detection.keypoints,
+                points: detection.keypoints.points.map((keypoint, index) => boxRelative[index]
+                    ? {
+                        x: rect.x + (keypoint.x - from.x) * scaleX,
+                        y: rect.y + (keypoint.y - from.y) * scaleY,
+                    }
+                    : keypoint),
+            },
+            rect,
+        };
     }
     if (handle.kind === AnnotationHandleKind.AddVertex &&
         handle.edgeIndex !== undefined) {
@@ -4411,7 +4482,16 @@ function applyAnnotationHandleDrag(detection, handle, point) {
     if (detection.keypoints) {
         const points = [...detection.keypoints.points];
         points[handle.geometryIndex] = point;
-        return { ...detection, keypoints: { ...detection.keypoints, points } };
+        // A positioned point no longer follows the box.
+        const boxRelative = detection.keypoints.boxRelative?.map((relative, index) => relative && index !== handle.geometryIndex);
+        return {
+            ...detection,
+            keypoints: {
+                ...detection.keypoints,
+                points,
+                ...(boxRelative ? { boxRelative } : {}),
+            },
+        };
     }
     return detection;
 }
@@ -4580,7 +4660,7 @@ function createAnnotationEditingEngine(options = {}) {
                 case "move": {
                     const dx = input.point.x - gesture.start.point.x;
                     const dy = input.point.y - gesture.start.point.y;
-                    const moved = gesture.moved || Math.hypot(dx, dy) >= MOVE_THRESHOLD / scale();
+                    const moved = gesture.moved || exceedsMoveThreshold(gesture.start, input);
                     gesture = { ...gesture, current: input, moved };
                     if (moved) {
                         const preview = offsetDetection(gesture.detection, dx, dy);
@@ -4594,10 +4674,17 @@ function createAnnotationEditingEngine(options = {}) {
                     }
                     break;
                 }
-                case "resize":
-                    gesture = { ...gesture, current: input };
-                    setPreview(applyAnnotationHandleDrag(gesture.detection, gesture.handle, input.point));
+                case "resize": {
+                    // A click on a handle is not a drag: a keypoint tapped to open its
+                    // menu must not snap to the pointer, so nothing previews or commits
+                    // until the pointer has travelled like a move gesture.
+                    const moved = gesture.moved || exceedsMoveThreshold(gesture.start, input);
+                    gesture = { ...gesture, current: input, moved };
+                    if (moved) {
+                        setPreview(applyAnnotationHandleDrag(gesture.detection, gesture.handle, input.point));
+                    }
                     break;
+                }
                 case "path":
                     setPreview(resolvePathPreview([...gesture.points, input.point]));
                     break;
@@ -4659,6 +4746,10 @@ function createAnnotationEditingEngine(options = {}) {
                 commit(preview, active.detection);
                 return;
             }
+            if (!active.moved) {
+                setState(idleState());
+                return;
+            }
             const preview = applyAnnotationHandleDrag(active.detection, active.handle, input.point);
             commit(preview, active.detection);
         },
@@ -4679,6 +4770,7 @@ function createAnnotationEditingEngine(options = {}) {
                 detection,
                 handle,
                 kind: "resize",
+                moved: false,
                 start: input,
             };
             setState({
@@ -4686,7 +4778,7 @@ function createAnnotationEditingEngine(options = {}) {
                 activeHandleId: handle.id,
                 kind: AnnotationGestureStateKind.Resizing,
                 pointerId: input.pointerId ?? null,
-                preview: detection,
+                preview: null,
             });
         },
         deleteVertex(detection, vertexIndex) {
@@ -4864,6 +4956,10 @@ function createAnnotationEditingEngine(options = {}) {
     function scale() {
         return Math.max(options.viewportScale?.() ?? 1, Number.EPSILON);
     }
+    function exceedsMoveThreshold(start, input) {
+        return (Math.hypot(input.point.x - start.point.x, input.point.y - start.point.y) >=
+            MOVE_THRESHOLD / scale());
+    }
     function capture(pointerId) {
         if (pointerId !== undefined)
             options.capturePointer?.(pointerId);