supervision 0.1.6 → 0.1.7

package/dist/index.js

@@ -1,4 +1,4 @@
-import { copySortedDetectionFrames, detectionFrameOverlapsRange, projectDetectionFrameForTracking, createSortTracker, createOCSortTracker, createCBIoUTracker, createByteTrackTracker, MediaErrorKind, includeDefined, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createProjectedDetectionFrameSource, createArrayDetectionFrameSource, createBufferedDetectionTimeline, resolveAnnotationRendererPresentation, createIdleDetectionBufferState, MediaInteractionMode, StrokeAlignment, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, BaseFocusStyle, decodeCompressedRleMask, extractMaskRectRuns, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, createDetectionPickKey, rebaseDetectionPickToFrame, pickDetectionAtPoint, followDetectionPickAcrossFrames, haveSameDetectionPickIdentities, pickAnnotationHandle, getAnnotationHandles, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, KeypointMarkerShape, MarkerSizeSpace, MarkerShape, ShapeInstructionKind, sampleEllipseArc, resolveEllipseSegmentCount, resolveMarkerGeometry, BaseInteractionStyle, DetectionInteractionState, MAX_ID_MASK_PALETTE_ENTRIES, DetectionBufferStatus, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MAX_ID_MASK_STROKE_WIDTH, resolveMaskStyleOpacity, pickDetectionByMaskId, BoxStrokeAlignment, resolveStyleValue, resolveAnnotationStyleState, lightenColor, createViewportController, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation, projectDetectionFrames, DetectionFrameSelectionMode } from 'supervision-js-core';
+import { copySortedDetectionFrames, detectionFrameOverlapsRange, projectDetectionFrameForTracking, createSortTracker, createOCSortTracker, createCBIoUTracker, createByteTrackTracker, MediaErrorKind, includeDefined, MediaSourceStatus, MediaRendererPlaybackState, MediaRendererFit, createDefaultAnnotationPresentation, createProjectedDetectionFrameSource, createArrayDetectionFrameSource, createBufferedDetectionTimeline, resolveAnnotationRendererPresentation, createIdleDetectionBufferState, MediaInteractionMode, StrokeAlignment, BaseBoxStyle, centerRectToTopLeftRect, BoxShape, BaseFocusStyle, decodeCompressedRleMask, extractMaskRectRuns, AnnotationGestureStateKind, AnnotationHandleKind, getDetectionRect, DetectionPickTarget, createDetectionPickKey, rebaseDetectionPickToFrame, pickDetectionAtPoint, followDetectionPickAcrossFrames, haveSameDetectionPickIdentities, pickAnnotationHandle, getAnnotationHandles, createIdMaskFrame, encodeBinaryMask, rasterizePolygonToMask, LabelPlacement, BasePolygonStyle, BasePolylineStyle, BaseKeypointStyle, ShapeInstructionKind, sampleEllipseArc, resolveEllipseSegmentCount, KeypointMarkerShape, MarkerSizeSpace, MarkerShape, resolveMarkerGeometry, BaseInteractionStyle, DetectionInteractionState, MAX_ID_MASK_PALETTE_ENTRIES, DetectionBufferStatus, canReuseMaskStyleArtifacts, getBufferedDetectionTimelineFrameSnapshot, MAX_ID_MASK_STROKE_WIDTH, resolveMaskStyleOpacity, pickDetectionByMaskId, BoxStrokeAlignment, resolveStyleValue, resolveAnnotationStyleState, lightenColor, createViewportController, MediaSessionMode, DetectionFrameRetentionMode, createMemoryColdDetectionFrameStore, createWritableDetectionFrameSource, createCompositeDetectionFrameSource, MediaSessionActivityStatus, MediaSessionActivityKind, MediaSessionStatus, createSourceAwarePresentation, projectDetectionFrames, DetectionFrameSelectionMode } from 'supervision-js-core';
 export { BaseBoxCornerStyle, BaseBoxStyle, BaseFocusStyle, BaseInteractionStyle, BaseKeypointStyle, BaseLabelStyle, BaseMarkerStyle, BaseMaskStyle, BasePolygonStyle, BasePolylineStyle, BoxShape, BoxStrokeAlignment, DEFAULT_DETECTION_CLASS_STYLES, DEFAULT_DETECTION_COLOR_SEQUENCE, DetectionBufferStatus, DetectionFrameRetentionMode, DetectionFrameSelectionMode, DetectionInteractionState, DetectionMaskEncoding, DetectionPickTarget, FocusTargetMode, KeypointMarkerShape, KeypointVisibility, LabelPlacement, LabelVisibilityMode, MarkerShape, MarkerSizeSpace, MaskRenderMode, MediaErrorKind, MediaInteractionMode, MediaRendererFit, MediaRendererPlaybackState, MediaSessionActivityKind, MediaSessionActivityStatus, MediaSessionMode, MediaSessionStatus, MediaSourceStatus, RegionRendererComposeMode, RegionRendererRegionKind, RegionRendererSourceKind, SUPERVISION_ROBOFLOW_COLOR, TrackingGeometry, annotationRendererKinds, annotationRenderers, createArrayDetectionFrameSource, createBufferedDetectionTimeline, createByteTrackTracker, createCBIoUTracker, createColdDetectionFrameSource, createCompositeDetectionFrameSource, createDefaultAnnotationPresentation, createMemoryColdDetectionFrameStore, createOCSortTracker, createProjectedDetectionFrameSource, createSortTracker, createWritableDetectionFrameSource, detectionPostProcessors, normalizeDetectionClassName, pickDetectionAtPoint, projectDetectionFrame, projectDetectionFrameForTracking, projectDetectionFrames, resolveDetectionClassColorStyle } from 'supervision-js-core';
 
 const DEFAULT_DATABASE_NAME = "supervision-js-detection-frames";
@@ -4445,6 +4445,7 @@ function createPixiInteractionLayer(options) {
             includeMasks: options.pickMaskDetectionAtPoint === undefined,
             maskMediaDimensions: options.getMediaDimensions?.(),
             padding: pickPadding,
+            viewportScale: options.getViewportScale?.() ?? 1,
         });
         if (geometryPick && POINT_PRECISE_PICK_TARGETS.has(geometryPick.target)) {
             return geometryPick;
@@ -4526,19 +4527,17 @@ function createPixiInteractionLayer(options) {
         const nextKey = createDetectionPickKey(nextPick);
         if (nextKey === hoveredPickKey) {
             hoveredPick = nextPick;
-            if (container) {
-                if (!selectedHandleAt(pointerPoint)) {
-                    container.cursor = nextPick ? "pointer" : resolveIdleCursor();
-                }
+            if (container && !selectedHandleAt(pointerPoint)) {
+                container.cursor = nextPick
+                    ? hoverCursor(nextPick)
+                    : resolveIdleCursor();
             }
             return;
         }
         hoveredPick = nextPick;
         hoveredPickKey = nextKey;
-        if (container) {
-            if (!selectedHandleAt(pointerPoint)) {
-                container.cursor = nextPick ? "pointer" : resolveIdleCursor();
-            }
+        if (container && !selectedHandleAt(pointerPoint)) {
+            container.cursor = nextPick ? hoverCursor(nextPick) : resolveIdleCursor();
         }
         options.interaction.onHover?.(nextPick);
         notifyStateChange();
@@ -4609,12 +4608,28 @@ function createPixiInteractionLayer(options) {
             return;
         const editingState = options.editingEngine?.getState();
         if (editingState?.kind === AnnotationGestureStateKind.Moving) {
-            container.cursor = "grabbing";
+            container.cursor = "move";
             return;
         }
+        if (editingState?.kind === AnnotationGestureStateKind.Resizing &&
+            selectedPick) {
+            // Keep the grabbed handle's cursor for the whole drag.
+            const active = getAnnotationHandles(selectedPick.detection, options.getViewportScale?.() ?? 1).find((handle) => handle.id === editingState.activeHandleId);
+            if (active) {
+                container.cursor = active.cursor;
+                return;
+            }
+        }
         const handle = selectedHandleAt(point);
         container.cursor =
-            handle?.cursor ?? (hoveredPick ? "pointer" : resolveIdleCursor());
+            handle?.cursor ??
+                (hoveredPick ? hoverCursor(hoveredPick) : resolveIdleCursor());
+    }
+    /** Editable geometry drags, so it advertises `move`; a keypoint is a point target. */
+    function hoverCursor(pick) {
+        if (!options.editingEngine || pick.detection.locked || pick.detection.mask)
+            return "pointer";
+        return pick.target === DetectionPickTarget.Keypoint ? "pointer" : "move";
     }
     function resolveIdleCursor() {
         return options.editingEngine?.hasCreationTool() ? "crosshair" : "default";
@@ -5374,35 +5389,37 @@ function createPixiVectorLayer(options) {
         }
         if (polyline)
             drawPixiPath(graphics, polyline.points, false, polyline.stroke, viewportScale);
-        if (!keypoints)
-            return;
-        for (const edge of keypoints.edges) {
-            if (edge.shadowStroke)
-                drawPixiPath(graphics, [edge.from, edge.to], false, edge.shadowStroke, viewportScale);
-            drawPixiPath(graphics, [edge.from, edge.to], false, edge.stroke, viewportScale);
-        }
-        for (const marker of keypoints.markers) {
-            if (marker.shape === KeypointMarkerShape.Cross) {
-                drawMarkerInstruction(graphics, {
-                    center: marker.point,
-                    kind: ShapeInstructionKind.Marker,
-                    shape: MarkerShape.Cross,
-                    size: marker.radius * 2,
-                    sizeSpace: MarkerSizeSpace.Screen,
-                    stroke: asOpenStroke(marker.stroke ?? { alpha: 1, color: 0xffffff, width: 2 }),
-                }, viewportScale);
-            }
-            else {
-                drawMarkerInstruction(graphics, {
-                    center: marker.point,
-                    fill: marker.fill,
-                    kind: ShapeInstructionKind.Marker,
-                    shape: MarkerShape.Circle,
-                    size: marker.radius * 2,
-                    sizeSpace: MarkerSizeSpace.Screen,
-                    stroke: marker.stroke,
-                }, viewportScale);
-            }
+        if (keypoints)
+            drawPixiKeypointInstruction(graphics, keypoints, viewportScale);
+    }
+}
+function drawPixiKeypointInstruction(graphics, instruction, viewportScale) {
+    for (const edge of instruction.edges) {
+        if (edge.shadowStroke)
+            drawPixiPath(graphics, [edge.from, edge.to], false, edge.shadowStroke, viewportScale);
+        drawPixiPath(graphics, [edge.from, edge.to], false, edge.stroke, viewportScale);
+    }
+    for (const marker of instruction.markers) {
+        if (marker.shape === KeypointMarkerShape.Cross) {
+            drawMarkerInstruction(graphics, {
+                center: marker.point,
+                kind: ShapeInstructionKind.Marker,
+                shape: MarkerShape.Cross,
+                size: marker.radius * 2,
+                sizeSpace: MarkerSizeSpace.Screen,
+                stroke: asOpenStroke(marker.stroke ?? { alpha: 1, color: 0xffffff, width: 2 }),
+            }, viewportScale);
+        }
+        else {
+            drawMarkerInstruction(graphics, {
+                center: marker.point,
+                fill: marker.fill,
+                kind: ShapeInstructionKind.Marker,
+                shape: MarkerShape.Circle,
+                size: marker.radius * 2,
+                sizeSpace: MarkerSizeSpace.Screen,
+                stroke: marker.stroke,
+            }, viewportScale);
         }
     }
 }
@@ -5562,7 +5579,9 @@ function createPixiInteractionPresentationLayer(options) {
                 return;
             }
             syntheticFrame = {
-                detections: activePicks.map(({ detection }) => detection),
+                detections: activePicks.map(({ detection }) => detection.id === undefined
+                    ? detection
+                    : { ...detection, id: undefined }),
                 frameIndex: context.frame.frameIndex,
                 mediaTime: context.frame.mediaTime,
             };
@@ -5598,6 +5617,13 @@ function createPixiInteractionPresentationLayer(options) {
         for (const pick of picks) {
             const key = createDetectionPickKey(pick.pick);
             if (!key || seenKeys.has(key)) {
+                if (key &&
+                    pick.context.state === DetectionInteractionState.Hovered &&
+                    pick.pick.target === DetectionPickTarget.Keypoint) {
+                    const duplicateIndex = deduped.findIndex((candidate) => createDetectionPickKey(candidate.pick) === key);
+                    if (duplicateIndex !== -1)
+                        deduped[duplicateIndex] = pick;
+                }
                 continue;
             }
             seenKeys.add(key);
@@ -5614,6 +5640,7 @@ function createPixiInteractionPresentationLayer(options) {
         const context = {
             detectionIndex: activePick.detectionIndex,
             frame: activePick.frame,
+            geometryIndex: activePick.geometryIndex,
             mediaTime,
             point: activePick.point,
             state,
@@ -8859,9 +8886,12 @@ function lowerEllipseInstruction(instruction) {
     return { ...instruction, kind: ShapeInstructionKind.Ellipse };
 }
 
-function createPixiAnnotationOverlayLayer(editingEngine, initialStyle) {
+function createPixiAnnotationOverlayLayer(editingEngine, initialStyle, initialKeypointStyle) {
     let graphics;
     let style = resolveAnnotationOverlayStyle(initialStyle);
+    let keypointStyle = initialKeypointStyle === undefined
+        ? new BaseKeypointStyle()
+        : initialKeypointStyle;
     return {
         attachGraphics(next) {
             graphics = next;
@@ -8870,20 +8900,24 @@ function createPixiAnnotationOverlayLayer(editingEngine, initialStyle) {
             if (next !== undefined)
                 style = resolveAnnotationOverlayStyle(next);
         },
+        setKeypointStyle(next) {
+            if (next !== undefined)
+                keypointStyle = next;
+        },
         draw(context) {
             if (!graphics)
                 return;
             graphics.clear();
             drawExternalPreview(graphics, context.previewOverlay, context.viewportScale, style);
-            drawEditingPreview(graphics, editingEngine, context.viewportScale, style);
-            drawSelectionHandles(graphics, context, style);
+            drawEditingPreview(graphics, editingEngine, context.frame, context.viewportScale, style, keypointStyle);
+            drawSelectionHandles(graphics, context, style, editingEngine);
             drawMarquee(graphics, context.marquee, style);
             drawGuides(graphics, editingEngine, context, style);
             drawLoading(graphics, context, style);
         },
     };
 }
-function drawEditingPreview(graphics, engine, viewportScale, style) {
+function drawEditingPreview(graphics, engine, frame, viewportScale, style, keypointStyle) {
     const state = engine?.getState();
     const detection = state?.preview;
     if (!detection)
@@ -8896,16 +8930,18 @@ function drawEditingPreview(graphics, engine, viewportScale, style) {
     const boxFill = resolveStyleValue(style.editingPreview.boxFill, detection, styleContext);
     const polygonFill = resolveStyleValue(style.editingPreview.polygonFill, detection, styleContext);
     const closeZoneStroke = resolveStyleValue(style.editingPreview.closeZoneStroke, detection, styleContext);
+    // A skeleton's rect is part of its geometry, so it previews alongside the
+    // keypoints; polygon, polyline and mask rects are derived bounds and are not.
     if (detection.rect &&
         !detection.mask &&
         !detection.polygon &&
         !detection.polyline) {
         const { x, y, width, height } = detection.rect;
-        if (state.kind === AnnotationGestureStateKind.Creating) {
-            graphics
-                .roundRect(x - width / 2, y - height / 2, width, height, resolveScreenLength(1, viewportScale))
-                .fill(boxFill);
-        }
+        // The source detection is hidden while it is edited, so the preview
+        // carries the box fill as well as its outline.
+        graphics
+            .roundRect(x - width / 2, y - height / 2, width, height, resolveScreenLength(1, viewportScale))
+            .fill(boxFill);
         drawPixiPath(graphics, [
             { x: x - width / 2, y: y - height / 2 },
             { x: x + width / 2, y: y - height / 2 },
@@ -8925,6 +8961,22 @@ function drawEditingPreview(graphics, engine, viewportScale, style) {
     }
     if (detection.polyline)
         drawPixiPath(graphics, detection.polyline.points, false, stroke, viewportScale);
+    if (detection.keypoints && keypointStyle) {
+        const previewFrame = {
+            detections: [detection],
+            frameIndex: frame?.frameIndex,
+            mediaTime: frame?.mediaTime ?? 0,
+        };
+        const instruction = keypointStyle.resolve(detection, {
+            detectionIndex: 0,
+            frame: previewFrame,
+            mediaTime: previewFrame.mediaTime,
+            selected: true,
+            viewportScale,
+        });
+        if (instruction)
+            drawPixiKeypointInstruction(graphics, instruction, viewportScale);
+    }
 }
 const CREATION_VERTEX_RADIUS = 6;
 const CREATION_VERTEX_STROKE_WIDTH = 1.5;
@@ -9013,7 +9065,7 @@ function resolveCloseHighlightColor(creationColor, preferredHighlight) {
         ? preferredHighlight
         : 0xffffff;
 }
-function drawSelectionHandles(graphics, context, style) {
+function drawSelectionHandles(graphics, context, style, engine) {
     const selected = new Set(context.selectedDetectionIds);
     for (const [detectionIndex, detection] of (context.frame?.detections ?? []).entries()) {
         if (detection.id === undefined || !selected.has(detection.id))
@@ -9027,15 +9079,26 @@ function drawSelectionHandles(graphics, context, style) {
         };
         const fill = resolveStyleValue(style.selectionHandle.fill, detection, styleContext) ?? { alpha: 1, color: 0xffffff };
         const stroke = resolveStyleValue(style.selectionHandle.stroke, detection, styleContext) ?? { alpha: 1, color: 0x2563eb, width: 2 };
-        for (const handle of getAnnotationHandles(detection, context.viewportScale)) {
+        // Handles ride on the live preview so they follow a move or reshape.
+        const state = engine?.getState();
+        const source = state &&
+            (state.kind === AnnotationGestureStateKind.Moving ||
+                state.kind === AnnotationGestureStateKind.Resizing) &&
+            state.preview &&
+            state.activeDetectionId === detection.id
+            ? state.preview
+            : detection;
+        for (const handle of getAnnotationHandles(source, context.viewportScale)) {
+            const alpha = handle.kind === AnnotationHandleKind.AddVertex
+                ? style.selectionHandle.addVertexAlpha
+                : handle.kind === AnnotationHandleKind.Keypoint
+                    ? style.selectionHandle.keypointAlpha
+                    : 1;
+            if (alpha <= 0)
+                continue;
             graphics.circle(handle.point.x, handle.point.y, handle.radius);
-            graphics.fill({
-                ...fill,
-                alpha: handle.kind === "addVertex"
-                    ? style.selectionHandle.addVertexAlpha
-                    : fill.alpha,
-            });
-            graphics.stroke(resolvePixiStroke(stroke, context.viewportScale));
+            graphics.fill({ ...fill, alpha: fill.alpha * alpha });
+            graphics.stroke(resolvePixiStroke({ ...stroke, alpha: stroke.alpha * alpha }, context.viewportScale));
         }
     }
 }
@@ -9118,6 +9181,7 @@ const DEFAULT_ANNOTATION_OVERLAY_STYLE = {
         fill: { alpha: 1, color: 0xffffff },
         stroke: { alpha: 1, color: 0x2563eb, width: 2 },
         addVertexAlpha: 0.55,
+        keypointAlpha: 1,
     },
     marquee: { fill: { alpha: 0.2, color: 0x3b82f6 } },
     guide: {
@@ -9310,12 +9374,28 @@ async function createPixiMediaScene(options) {
     let mediaWidth = 0;
     let visibilityVersion = 0;
     let visibilityMaskStyleCache = null;
-    const resolveContextState = (detection) => resolveAnnotationStyleState(detection, currentVisibility);
-    const resolveLabelContextState = (detection) => ({
-        ...resolveContextState(detection),
-        hidden: currentVisibility?.labelsHidden === true ||
-            resolveContextState(detection).hidden,
-    });
+    // While a move, resize, vertex or keypoint gesture edits a detection, the
+    // base layers hide it and the annotation overlay draws the live preview in
+    // its place, so the edit never shows next to its own stale copy. Masks have
+    // no overlay preview and stay drawn.
+    let editingDetectionId = null;
+    const resolveContextState = (detection) => {
+        const state = resolveAnnotationStyleState(detection, currentVisibility);
+        return editingDetectionId !== null &&
+            detection.id === editingDetectionId &&
+            !state.hidden
+            ? { ...state, hidden: true }
+            : state;
+    };
+    // Labels have no overlay preview either: they stay drawn and follow a move
+    // through the fast-translate path, like regions.
+    const resolveLabelContextState = (detection) => {
+        const state = resolveAnnotationStyleState(detection, currentVisibility);
+        return {
+            ...state,
+            hidden: currentVisibility?.labelsHidden === true || state.hidden,
+        };
+    };
     // The vector layer consumes one shape style; renderer kinds that lower to
     // shape instructions compose with the internal hook here.
     function resolveVectorShapeStyle() {
@@ -9388,9 +9468,11 @@ async function createPixiMediaScene(options) {
         },
         onAssetError: options.diagnostics?.onAssetError,
         regionRenderers: options.regionRenderers,
-        resolveContextState,
+        // Regions (badges, icons) have no overlay preview: they stay drawn and
+        // follow a move through the fast-translate path instead.
+        resolveContextState: (detection) => resolveAnnotationStyleState(detection, currentVisibility),
     });
-    const annotationOverlayLayer = createPixiAnnotationOverlayLayer(options.editingEngine, options.annotationOverlayStyle);
+    const annotationOverlayLayer = createPixiAnnotationOverlayLayer(options.editingEngine, options.annotationOverlayStyle, options.keypointStyle);
     const maskBrushPreview = options.maskBrush
         ? createPixiMaskBrushPreview({
             CanvasSource,
@@ -9528,34 +9610,52 @@ async function createPixiMediaScene(options) {
             Text,
             UniformGroup,
             interactionStyle: options.interactionStyle,
-            isDetectionVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden,
+            // The detection under an editing gesture is drawn live by the base
+            // layers (move) or the overlay preview (reshape); its hover/selection
+            // redraw would sit at the stale position.
+            isDetectionVisible: (detection) => !resolveAnnotationStyleState(detection, currentVisibility).hidden &&
+                !isUnderEditingGesture(detection),
         })
         : undefined;
     let fastTranslatedDetectionId = null;
     const unsubscribeFastTranslate = options.editingEngine?.subscribeFastTranslate((id, dx, dy) => {
         fastTranslatedDetectionId = id;
-        boxLayer.translateDetection(id, dx, dy);
-        vectorLayer.translateDetection(id, dx, dy);
         regionLayer.translateDetection(id, dx, dy);
         labelLayer?.translateDetection(id, dx, dy);
     });
-    const unsubscribeEditingState = options.editingEngine?.subscribe((state) => {
-        if (state.kind !== AnnotationGestureStateKind.Idle ||
-            fastTranslatedDetectionId === null) {
-            return;
-        }
-        const id = fastTranslatedDetectionId;
-        fastTranslatedDetectionId = null;
-        boxLayer.translateDetection(id, 0, 0);
-        vectorLayer.translateDetection(id, 0, 0);
-        regionLayer.translateDetection(id, 0, 0);
-        labelLayer?.translateDetection(id, 0, 0);
+    const redrawDetectionLayers = (id) => {
         boxLayer.invalidateDetection(id);
         vectorLayer.invalidateDetection(id);
         boxLayer.drawFrame(currentMediaTime, viewportScale);
         vectorLayer.drawFrame(currentMediaTime, viewportScale);
         regionLayer.drawFrame(currentMediaTime, viewportScale);
         labelLayer?.drawFrame(currentMediaTime, viewportScale);
+    };
+    const unsubscribeEditingState = options.editingEngine?.subscribe((state) => {
+        const nextEditingId = (state.kind === AnnotationGestureStateKind.Moving ||
+            state.kind === AnnotationGestureStateKind.Resizing) &&
+            state.activeDetectionId !== null &&
+            state.preview &&
+            !state.preview.mask
+            ? state.activeDetectionId
+            : null;
+        if (nextEditingId !== editingDetectionId) {
+            const previous = editingDetectionId;
+            editingDetectionId = nextEditingId;
+            if (previous !== null)
+                redrawDetectionLayers(previous);
+            if (nextEditingId !== null)
+                redrawDetectionLayers(nextEditingId);
+            drawInteractionPresentationLayer(currentMediaTime);
+        }
+        if (state.kind === AnnotationGestureStateKind.Idle &&
+            fastTranslatedDetectionId !== null) {
+            regionLayer.translateDetection(fastTranslatedDetectionId, 0, 0);
+            labelLayer?.translateDetection(fastTranslatedDetectionId, 0, 0);
+            fastTranslatedDetectionId = null;
+            regionLayer.drawFrame(currentMediaTime, viewportScale);
+            labelLayer?.drawFrame(currentMediaTime, viewportScale);
+        }
     });
     const handleKeyDown = (event) => {
         if (event.key === "Tab" && interactionLayer) {
@@ -9984,6 +10084,7 @@ async function createPixiMediaScene(options) {
                 polylineStyle: presentation.polylineStyle,
                 keypointStyle: presentation.keypointStyle,
             });
+            annotationOverlayLayer.setKeypointStyle(presentation.keypointStyle);
             regionLayer.setRenderers(presentation.renderers?.filter((renderer) => renderer.kind === "region") ?? []);
             if (presentation.boxCornerStyle !== undefined ||
                 presentation.ellipseStyle !== undefined ||
@@ -10269,10 +10370,10 @@ async function createPixiMediaScene(options) {
         const interactionState = interactionLayer?.getState();
         focusLayer.drawFrame({
             frame,
-            hoveredPick: filterVisiblePick(interactionState?.hoveredPick ?? null),
+            hoveredPick: withEditingPreview(filterVisiblePick(interactionState?.hoveredPick ?? null)),
             idMaskArtifact: maskLayer?.getActiveIdMaskFrameTexture() ?? null,
             mediaTime,
-            selectedPick: filterVisiblePick(interactionState?.selectedPick ?? null),
+            selectedPick: withEditingPreview(filterVisiblePick(interactionState?.selectedPick ?? null)),
             viewportScale,
         });
     }
@@ -10365,6 +10466,27 @@ async function createPixiMediaScene(options) {
             ? pick
             : null;
     }
+    function editingPreviewFor(detection) {
+        const state = options.editingEngine?.getState();
+        return state &&
+            (state.kind === AnnotationGestureStateKind.Moving ||
+                state.kind === AnnotationGestureStateKind.Resizing) &&
+            state.preview &&
+            detection.id !== undefined &&
+            state.activeDetectionId === detection.id
+            ? state.preview
+            : null;
+    }
+    function isUnderEditingGesture(detection) {
+        return editingPreviewFor(detection) !== null;
+    }
+    /** Point a pick at the live editing preview so focus follows the gesture. */
+    function withEditingPreview(pick) {
+        if (!pick)
+            return null;
+        const preview = editingPreviewFor(pick.detection);
+        return preview ? { ...pick, detection: preview } : pick;
+    }
 }
 function canReuseMaskVisibilityArtifacts(previous, next) {
     return ((previous?.annotationsHidden === true) ===