@luxonis/depthai-viewer-common 3.7.5 → 3.8.0

package/dist/visualizer/panels/image/ImageCanvasRenderer.js

@@ -0,0 +1,716 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+import React from "react";
+import { useDetections } from "../../components/Panel.js";
+import { recordRenderFrame } from "../../messaging/stream-diagnostics.js";
+import { useMessageSubscription } from "../../messaging/utils.js";
+import { readCanvasColor } from "../../utils/use-theme-mode.js";
+import { drawImageAnnotations } from "./annotation-overlay.js";
+import { drawSegmentationMasks } from "./segmentation-mask-overlay.js";
+import { WebGlImageRenderer } from "./webgl-image-renderer.js";
+import { WorkerImageDecoder } from "./worker-image-decoder.js";
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 8;
+const WHEEL_ZOOM_STEP = 0.0015;
+const RESET_ZOOM_EVENT_NAME = "visualizer:image-reset-zoom";
+const ZOOM_STATE_EVENT_NAME = "visualizer:image-zoom-state";
+const ANNOTATION_STALE_TIMEOUT_MS = 500;
+export function ImageCanvasRenderer({ topic, annotationTopics, extraAnnotationTopics, frameRenderedEvent, annotationReceivedEventHandler, handleOnClick, handleCursorPositionUpdate, registerRendered, unregisterRendered, customOverlay, disableZoom = false, }) {
+    const canvas2dRef = React.useRef(null);
+    const webGlCanvasRef = React.useRef(null);
+    const overlayCanvasRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const offscreenCanvasRef = React.useRef(null);
+    const decoderRef = React.useRef(undefined);
+    const webGlRendererRef = React.useRef(undefined);
+    const decodedRenderableRef = React.useRef(undefined);
+    const activeBitmapRef = React.useRef(undefined);
+    const viewSizeRef = React.useRef({ width: 0, height: 0 });
+    const annotationsByTopicRef = React.useRef(new Map());
+    const segmentationMasksByTopicRef = React.useRef(new Map());
+    const visibleAnnotationsRef = React.useRef([]);
+    const visibleSegmentationMasksRef = React.useRef([]);
+    const imageRevisionRef = React.useRef(0);
+    const decodeRequestIdRef = React.useRef(0);
+    const decodeInFlightRef = React.useRef(false);
+    const decodePumpRequestIdRef = React.useRef(undefined);
+    const pumpImageDecodeRef = React.useRef(() => { });
+    const pendingDecodeImageRef = React.useRef(undefined);
+    const pendingDecodeRequestIdRef = React.useRef(undefined);
+    const drawRequestIdRef = React.useRef(undefined);
+    const viewTransformRef = React.useRef({ scale: 1, offsetX: 0, offsetY: 0 });
+    const dragStateRef = React.useRef(undefined);
+    const suppressClickRef = React.useRef(false);
+    const isZoomedRef = React.useRef(false);
+    const [hasRenderable, setHasRenderable] = React.useState(false);
+    const [rendererMode, setRendererMode] = React.useState("canvas2d");
+    const hasRenderableRef = React.useRef(false);
+    const rendererModeRef = React.useRef("canvas2d");
+    const detections = useDetections();
+    const lastReportedImageRevisionRef = React.useRef(-1);
+    const frameRenderedEventRef = React.useRef(frameRenderedEvent);
+    const annotationReceivedEventHandlerRef = React.useRef(annotationReceivedEventHandler);
+    const registerRenderedRef = React.useRef(registerRendered);
+    const unregisterRenderedRef = React.useRef(unregisterRendered);
+    React.useEffect(() => {
+        frameRenderedEventRef.current = frameRenderedEvent;
+        annotationReceivedEventHandlerRef.current = annotationReceivedEventHandler;
+        registerRenderedRef.current = registerRendered;
+        unregisterRenderedRef.current = unregisterRendered;
+    }, [annotationReceivedEventHandler, frameRenderedEvent, registerRendered, unregisterRendered]);
+    const allAnnotationTopics = React.useMemo(() => [...annotationTopics, ...extraAnnotationTopics], [annotationTopics, extraAnnotationTopics]);
+    const allAnnotationTopicSet = React.useMemo(() => new Set(allAnnotationTopics), [allAnnotationTopics]);
+    const enabledAnnotationTopics = React.useMemo(() => {
+        const enabledTopics = [];
+        for (const annotationTopic of allAnnotationTopics) {
+            if (isAnnotationTopicEnabled(detections.detections, annotationTopic)) {
+                enabledTopics.push(annotationTopic);
+            }
+        }
+        return enabledTopics;
+    }, [allAnnotationTopics, detections.detections]);
+    const subscribedTopics = React.useMemo(() => [topic, ...enabledAnnotationTopics], [topic, enabledAnnotationTopics]);
+    const detectionsRef = React.useRef(detections.detections);
+    const setRendererModeIfChanged = React.useCallback((nextMode) => {
+        if (rendererModeRef.current === nextMode) {
+            return;
+        }
+        rendererModeRef.current = nextMode;
+        setRendererMode(nextMode);
+    }, []);
+    const ensureWebGlRenderer = React.useCallback(() => {
+        if (webGlRendererRef.current === null) {
+            return undefined;
+        }
+        if (webGlRendererRef.current) {
+            return webGlRendererRef.current;
+        }
+        const canvas = webGlCanvasRef.current;
+        if (!canvas) {
+            return undefined;
+        }
+        const renderer = new WebGlImageRenderer(canvas);
+        if (!renderer.isAvailable()) {
+            webGlRendererRef.current = null;
+            return undefined;
+        }
+        webGlRendererRef.current = renderer;
+        return renderer;
+    }, []);
+    const ensureFallbackDecoder = React.useCallback(() => {
+        let decoder = decoderRef.current;
+        if (!decoder) {
+            decoder = new WorkerImageDecoder();
+            decoderRef.current = decoder;
+        }
+        return decoder;
+    }, []);
+    const releaseDecodedRenderable = React.useCallback((renderable) => {
+        if (!renderable || renderable.kind === "raw-image") {
+            return;
+        }
+        if (renderable.kind === "bitmap") {
+            renderable.bitmap.close();
+            if (activeBitmapRef.current === renderable.bitmap) {
+                activeBitmapRef.current = undefined;
+            }
+            return;
+        }
+        decoderRef.current?.recycle(renderable);
+    }, []);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Intended
+    const drawFrame = React.useCallback(() => {
+        drawRequestIdRef.current = undefined;
+        const canvas2d = canvas2dRef.current;
+        const webGlCanvas = webGlCanvasRef.current;
+        const overlayCanvas = overlayCanvasRef.current;
+        const decodedRenderable = decodedRenderableRef.current;
+        if (!canvas2d || !webGlCanvas || !overlayCanvas) {
+            return;
+        }
+        const drawStart = performance.now();
+        const dpr = window.devicePixelRatio || 1;
+        const width = Math.max(Math.floor(viewSizeRef.current.width * dpr), 1);
+        const height = Math.max(Math.floor(viewSizeRef.current.height * dpr), 1);
+        if (overlayCanvas.width !== width || overlayCanvas.height !== height) {
+            overlayCanvas.width = width;
+            overlayCanvas.height = height;
+        }
+        const overlayCtx = overlayCanvas.getContext("2d");
+        if (!overlayCtx) {
+            return;
+        }
+        overlayCtx.setTransform(1, 0, 0, 1, 0, 0);
+        overlayCtx.clearRect(0, 0, width, height);
+        if (!decodedRenderable) {
+            return;
+        }
+        const baseRect = calculateDrawRect(decodedRenderable.width, decodedRenderable.height, viewSizeRef.current.width, viewSizeRef.current.height);
+        const rect = applyViewTransform(baseRect, viewTransformRef.current);
+        const scaledRect = scaleDrawRect(rect, dpr);
+        let renderSource = "image-render:image-data";
+        if (decodedRenderable.kind === "raw-image") {
+            if (webGlCanvas.width !== width || webGlCanvas.height !== height) {
+                webGlCanvas.width = width;
+                webGlCanvas.height = height;
+            }
+            const webGlRenderer = ensureWebGlRenderer();
+            if (webGlRenderer?.draw(decodedRenderable.image, width, height, scaledRect)) {
+                renderSource = "image-render:webgl";
+            }
+        }
+        if (renderSource !== "image-render:webgl") {
+            if (canvas2d.width !== width || canvas2d.height !== height) {
+                canvas2d.width = width;
+                canvas2d.height = height;
+            }
+            const imageCtx = canvas2d.getContext("2d");
+            if (!imageCtx) {
+                return;
+            }
+            imageCtx.setTransform(1, 0, 0, 1, 0, 0);
+            imageCtx.clearRect(0, 0, width, height);
+            imageCtx.imageSmoothingEnabled = false;
+            imageCtx.fillStyle = readCanvasColor();
+            imageCtx.fillRect(0, 0, width, height);
+            if (decodedRenderable.kind === "bitmap") {
+                imageCtx.drawImage(decodedRenderable.bitmap, scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height);
+                renderSource = "image-render:bitmap";
+            }
+            else if (decodedRenderable.kind === "image-data") {
+                const offscreenCanvas = getOffscreenCanvas(offscreenCanvasRef, decodedRenderable.imageData.width, decodedRenderable.imageData.height);
+                const offscreenCtx = offscreenCanvas.getContext("2d");
+                offscreenCtx?.putImageData(decodedRenderable.imageData, 0, 0);
+                imageCtx.drawImage(offscreenCanvas, scaledRect.x, scaledRect.y, scaledRect.width, scaledRect.height);
+            }
+            else {
+                renderSource = "image-render:webgl-fallback";
+            }
+        }
+        const now = performance.now();
+        const enabledTopics = visibleAnnotationsRef.current;
+        enabledTopics.length = 0;
+        const enabledSegmentationMasks = visibleSegmentationMasksRef.current;
+        enabledSegmentationMasks.length = 0;
+        for (const annotationTopic of allAnnotationTopics) {
+            const isEnabled = isAnnotationTopicEnabled(detectionsRef.current, annotationTopic);
+            const annotationEntry = annotationsByTopicRef.current.get(annotationTopic);
+            if (annotationEntry) {
+                if (now - annotationEntry.receivedAt > ANNOTATION_STALE_TIMEOUT_MS) {
+                    annotationsByTopicRef.current.delete(annotationTopic);
+                }
+                else if (isEnabled) {
+                    enabledTopics.push(annotationEntry.annotation);
+                }
+            }
+            const segmentationMaskEntry = segmentationMasksByTopicRef.current.get(annotationTopic);
+            if (segmentationMaskEntry) {
+                if (now - segmentationMaskEntry.receivedAt > ANNOTATION_STALE_TIMEOUT_MS) {
+                    segmentationMasksByTopicRef.current.delete(annotationTopic);
+                }
+                else if (isEnabled) {
+                    enabledSegmentationMasks.push(segmentationMaskEntry.mask);
+                }
+            }
+        }
+        overlayCtx.scale(dpr, dpr);
+        drawSegmentationMasks(overlayCtx, enabledSegmentationMasks, rect);
+        drawImageAnnotations(overlayCtx, enabledTopics, rect, decodedRenderable.width, decodedRenderable.height);
+        if (lastReportedImageRevisionRef.current !== imageRevisionRef.current) {
+            lastReportedImageRevisionRef.current = imageRevisionRef.current;
+            frameRenderedEventRef.current?.(performance.now() - drawStart);
+            recordRenderFrame({
+                topic,
+                source: renderSource,
+                renderDurationMs: performance.now() - drawStart,
+            });
+        }
+    }, [allAnnotationTopics, ensureWebGlRenderer]);
+    const scheduleDraw = React.useCallback(() => {
+        if (drawRequestIdRef.current != undefined) {
+            return;
+        }
+        drawRequestIdRef.current = requestAnimationFrame(() => {
+            drawFrame();
+        });
+    }, [drawFrame]);
+    const publishZoomState = React.useCallback((isZoomed) => {
+        if (isZoomedRef.current === isZoomed) {
+            return;
+        }
+        isZoomedRef.current = isZoomed;
+        window.dispatchEvent(new CustomEvent(ZOOM_STATE_EVENT_NAME, {
+            detail: { topic, isZoomed },
+        }));
+    }, [topic]);
+    const resetZoom = React.useCallback(() => {
+        viewTransformRef.current = { scale: 1, offsetX: 0, offsetY: 0 };
+        dragStateRef.current = undefined;
+        suppressClickRef.current = false;
+        publishZoomState(false);
+        scheduleDraw();
+    }, [publishZoomState, scheduleDraw]);
+    const clearRenderable = React.useCallback(() => {
+        releaseDecodedRenderable(decodedRenderableRef.current);
+        decodedRenderableRef.current = undefined;
+        setRendererModeIfChanged("canvas2d");
+        publishZoomState(false);
+        if (hasRenderableRef.current) {
+            hasRenderableRef.current = false;
+            setHasRenderable(false);
+        }
+        scheduleDraw();
+    }, [publishZoomState, releaseDecodedRenderable, scheduleDraw, setRendererModeIfChanged]);
+    const scheduleDecodePump = React.useCallback(() => {
+        if (decodePumpRequestIdRef.current != undefined) {
+            return;
+        }
+        decodePumpRequestIdRef.current = requestAnimationFrame(() => {
+            decodePumpRequestIdRef.current = undefined;
+            pumpImageDecodeRef.current();
+        });
+    }, []);
+    const applyDirectRawImage = React.useCallback((image) => {
+        releaseDecodedRenderable(decodedRenderableRef.current);
+        setRendererModeIfChanged("webgl");
+        decodedRenderableRef.current = {
+            kind: "raw-image",
+            image,
+            width: image.width,
+            height: image.height,
+        };
+        if (!hasRenderableRef.current) {
+            hasRenderableRef.current = true;
+            setHasRenderable(true);
+        }
+        scheduleDraw();
+    }, [releaseDecodedRenderable, scheduleDraw, setRendererModeIfChanged]);
+    const applyCanvasRenderable = React.useCallback((renderable) => {
+        releaseDecodedRenderable(decodedRenderableRef.current);
+        setRendererModeIfChanged("canvas2d");
+        decodedRenderableRef.current = renderable;
+        if (!hasRenderableRef.current) {
+            hasRenderableRef.current = true;
+            setHasRenderable(true);
+        }
+        scheduleDraw();
+    }, [releaseDecodedRenderable, scheduleDraw, setRendererModeIfChanged]);
+    const pumpImageDecode = React.useCallback(() => {
+        if (decodeInFlightRef.current) {
+            return;
+        }
+        const pendingImage = pendingDecodeImageRef.current;
+        const pendingRequestId = pendingDecodeRequestIdRef.current;
+        if (!pendingImage || pendingRequestId == undefined) {
+            return;
+        }
+        pendingDecodeImageRef.current = undefined;
+        pendingDecodeRequestIdRef.current = undefined;
+        const webGlRenderer = ensureWebGlRenderer();
+        if (webGlRenderer?.canRender(pendingImage)) {
+            if (decodeRequestIdRef.current === pendingRequestId) {
+                applyDirectRawImage(pendingImage);
+            }
+            scheduleDecodePump();
+            return;
+        }
+        decodeInFlightRef.current = true;
+        ensureFallbackDecoder()
+            .decode(pendingImage)
+            .then((decodedImage) => {
+            if (decodeRequestIdRef.current !== pendingRequestId) {
+                releaseDecodedRenderable(decodedImage);
+                return;
+            }
+            applyCanvasRenderable(decodedImage);
+        })
+            .catch(() => {
+            if (decodeRequestIdRef.current !== pendingRequestId) {
+                return;
+            }
+            clearRenderable();
+        })
+            .finally(() => {
+            decodeInFlightRef.current = false;
+            scheduleDecodePump();
+        });
+    }, [
+        applyCanvasRenderable,
+        applyDirectRawImage,
+        clearRenderable,
+        ensureWebGlRenderer,
+        ensureFallbackDecoder,
+        releaseDecodedRenderable,
+        scheduleDecodePump,
+    ]);
+    pumpImageDecodeRef.current = pumpImageDecode;
+    React.useEffect(() => {
+        const element = containerRef.current;
+        if (!element) {
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            viewSizeRef.current = {
+                width: entry.contentRect.width,
+                height: entry.contentRect.height,
+            };
+            const decodedRenderable = decodedRenderableRef.current;
+            if (decodedRenderable) {
+                viewTransformRef.current = clampViewTransform(calculateDrawRect(decodedRenderable.width, decodedRenderable.height, entry.contentRect.width, entry.contentRect.height), entry.contentRect.width, entry.contentRect.height, viewTransformRef.current);
+            }
+            scheduleDraw();
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [scheduleDraw]);
+    React.useEffect(() => {
+        const canvas = rendererMode === "webgl" ? webGlCanvasRef.current : canvas2dRef.current;
+        if (!canvas || !registerRenderedRef.current) {
+            return;
+        }
+        registerRenderedRef.current({ kind: "image-canvas", canvas });
+        return () => {
+            unregisterRenderedRef.current?.();
+        };
+    }, [rendererMode]);
+    React.useEffect(() => {
+        const handleResetZoom = (event) => {
+            const customEvent = event;
+            if (customEvent.detail?.topic !== topic) {
+                return;
+            }
+            resetZoom();
+        };
+        window.addEventListener(RESET_ZOOM_EVENT_NAME, handleResetZoom);
+        return () => {
+            window.removeEventListener(RESET_ZOOM_EVENT_NAME, handleResetZoom);
+        };
+    }, [resetZoom, topic]);
+    React.useEffect(() => {
+        window.dispatchEvent(new CustomEvent(ZOOM_STATE_EVENT_NAME, {
+            detail: { topic, isZoomed: false },
+        }));
+        return () => {
+            window.dispatchEvent(new CustomEvent(ZOOM_STATE_EVENT_NAME, {
+                detail: { topic, isZoomed: false },
+            }));
+            if (drawRequestIdRef.current != undefined) {
+                cancelAnimationFrame(drawRequestIdRef.current);
+                drawRequestIdRef.current = undefined;
+            }
+            if (decodePumpRequestIdRef.current != undefined) {
+                cancelAnimationFrame(decodePumpRequestIdRef.current);
+                decodePumpRequestIdRef.current = undefined;
+            }
+            releaseDecodedRenderable(decodedRenderableRef.current);
+            decodedRenderableRef.current = undefined;
+            pendingDecodeImageRef.current = undefined;
+            pendingDecodeRequestIdRef.current = undefined;
+            decodeInFlightRef.current = false;
+            decoderRef.current?.terminate();
+            decoderRef.current = undefined;
+            webGlRendererRef.current?.destroy();
+            webGlRendererRef.current = undefined;
+        };
+    }, [releaseDecodedRenderable, topic]);
+    React.useEffect(() => {
+        detectionsRef.current = detections.detections;
+        scheduleDraw();
+    }, [detections.detections, scheduleDraw]);
+    useMessageSubscription({
+        topics: subscribedTopics,
+        onMessages: (messages) => {
+            let latestImageEvent;
+            const latestAnnotationByTopic = new Map();
+            const latestSegmentationMaskByTopic = new Map();
+            for (let index = messages.length - 1; index >= 0; index -= 1) {
+                const event = messages[index];
+                if (latestImageEvent == undefined &&
+                    event.topic === topic &&
+                    event.schemaName === "foxglove.RawImage") {
+                    latestImageEvent = event;
+                    continue;
+                }
+                if (allAnnotationTopicSet.has(event.topic) &&
+                    event.schemaName === "foxglove.ImageAnnotations" &&
+                    !latestAnnotationByTopic.has(event.topic)) {
+                    latestAnnotationByTopic.set(event.topic, event.message);
+                    continue;
+                }
+                if (allAnnotationTopicSet.has(event.topic) &&
+                    event.schemaName === "luxonis.SegmentationMask" &&
+                    !latestSegmentationMaskByTopic.has(event.topic)) {
+                    latestSegmentationMaskByTopic.set(event.topic, event.message);
+                }
+            }
+            if (latestImageEvent) {
+                const image = latestImageEvent.message;
+                imageRevisionRef.current += 1;
+                const requestId = imageRevisionRef.current;
+                decodeRequestIdRef.current = requestId;
+                pendingDecodeImageRef.current = undefined;
+                pendingDecodeRequestIdRef.current = undefined;
+                if (image.renderableBitmap) {
+                    const bitmap = image.renderableBitmap;
+                    releaseDecodedRenderable(decodedRenderableRef.current);
+                    setRendererModeIfChanged("canvas2d");
+                    activeBitmapRef.current = bitmap;
+                    decodedRenderableRef.current = {
+                        kind: "bitmap",
+                        bitmap,
+                        width: image.width,
+                        height: image.height,
+                    };
+                    if (!hasRenderableRef.current) {
+                        hasRenderableRef.current = true;
+                        setHasRenderable(true);
+                    }
+                    scheduleDraw();
+                }
+                else {
+                    const webGlRenderer = ensureWebGlRenderer();
+                    if (webGlRenderer?.canRender(image)) {
+                        applyDirectRawImage(image);
+                    }
+                    else {
+                        setRendererModeIfChanged("canvas2d");
+                        pendingDecodeImageRef.current = image;
+                        pendingDecodeRequestIdRef.current = requestId;
+                        scheduleDecodePump();
+                    }
+                }
+            }
+            if (latestAnnotationByTopic.size > 0) {
+                const receivedAt = performance.now();
+                for (const [annotationTopic, annotations] of latestAnnotationByTopic) {
+                    annotationsByTopicRef.current.set(annotationTopic, {
+                        annotation: annotations,
+                        receivedAt,
+                    });
+                }
+                annotationReceivedEventHandlerRef.current?.();
+                scheduleDraw();
+            }
+            if (latestSegmentationMaskByTopic.size > 0) {
+                const receivedAt = performance.now();
+                for (const [segmentationMaskTopic, segmentationMask] of latestSegmentationMaskByTopic) {
+                    segmentationMasksByTopicRef.current.set(segmentationMaskTopic, {
+                        mask: segmentationMask,
+                        receivedAt,
+                    });
+                }
+                annotationReceivedEventHandlerRef.current?.();
+                scheduleDraw();
+            }
+        },
+    });
+    const handlePointerEvent = React.useCallback((clientX, clientY) => {
+        const activeCanvas = rendererModeRef.current === "webgl" ? webGlCanvasRef.current : canvas2dRef.current;
+        const rect = activeCanvas?.getBoundingClientRect();
+        const decodedRenderable = decodedRenderableRef.current;
+        if (!rect || !decodedRenderable) {
+            return undefined;
+        }
+        const drawRect = applyViewTransform(calculateDrawRect(decodedRenderable.width, decodedRenderable.height, rect.width, rect.height), viewTransformRef.current);
+        const localX = clientX - rect.left;
+        const localY = clientY - rect.top;
+        if (localX < drawRect.x ||
+            localY < drawRect.y ||
+            localX > drawRect.x + drawRect.width ||
+            localY > drawRect.y + drawRect.height) {
+            return undefined;
+        }
+        return {
+            offsetX: (localX - drawRect.x) / drawRect.width,
+            offsetY: (localY - drawRect.y) / drawRect.height,
+        };
+    }, []);
+    return (_jsxs("div", { className: "relative h-full w-full overflow-hidden bg-canvas touch-none select-none", ref: containerRef, onWheel: (event) => {
+            if (disableZoom)
+                return;
+            const decodedRenderable = decodedRenderableRef.current;
+            const container = containerRef.current;
+            if (!decodedRenderable || !container) {
+                return;
+            }
+            event.preventDefault();
+            const rect = container.getBoundingClientRect();
+            const localX = event.clientX - rect.left;
+            const localY = event.clientY - rect.top;
+            const baseRect = calculateDrawRect(decodedRenderable.width, decodedRenderable.height, rect.width, rect.height);
+            const currentTransform = viewTransformRef.current;
+            const currentRect = applyViewTransform(baseRect, currentTransform);
+            const normalizedX = (localX - currentRect.x) / currentRect.width;
+            const normalizedY = (localY - currentRect.y) / currentRect.height;
+            const zoomFactor = Math.exp(-event.deltaY * WHEEL_ZOOM_STEP);
+            const nextScale = clamp(currentTransform.scale * zoomFactor, MIN_ZOOM, MAX_ZOOM);
+            if (nextScale === currentTransform.scale) {
+                return;
+            }
+            const nextRectWidth = baseRect.width * nextScale;
+            const nextRectHeight = baseRect.height * nextScale;
+            viewTransformRef.current = clampViewTransform(baseRect, rect.width, rect.height, {
+                scale: nextScale,
+                offsetX: localX - baseRect.x - normalizedX * nextRectWidth,
+                offsetY: localY - baseRect.y - normalizedY * nextRectHeight,
+            });
+            publishZoomState(nextScale > MIN_ZOOM);
+            scheduleDraw();
+        }, onPointerDown: (event) => {
+            if (viewTransformRef.current.scale <= MIN_ZOOM) {
+                return;
+            }
+            event.preventDefault();
+            dragStateRef.current = {
+                pointerId: event.pointerId,
+                startX: event.clientX,
+                startY: event.clientY,
+                startOffsetX: viewTransformRef.current.offsetX,
+                startOffsetY: viewTransformRef.current.offsetY,
+                moved: false,
+            };
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }, onPointerMove: (event) => {
+            const dragState = dragStateRef.current;
+            const decodedRenderable = decodedRenderableRef.current;
+            const container = containerRef.current;
+            const isDraggingCurrentPointer = dragState != undefined && dragState.pointerId === event.pointerId;
+            if (isDraggingCurrentPointer && decodedRenderable && container) {
+                event.preventDefault();
+                const deltaX = event.clientX - dragState.startX;
+                const deltaY = event.clientY - dragState.startY;
+                if (!dragState.moved && Math.abs(deltaX) + Math.abs(deltaY) > 3) {
+                    dragState.moved = true;
+                    suppressClickRef.current = true;
+                }
+                const rect = container.getBoundingClientRect();
+                const baseRect = calculateDrawRect(decodedRenderable.width, decodedRenderable.height, rect.width, rect.height);
+                viewTransformRef.current = clampViewTransform(baseRect, rect.width, rect.height, {
+                    ...viewTransformRef.current,
+                    offsetX: dragState.startOffsetX + deltaX,
+                    offsetY: dragState.startOffsetY + deltaY,
+                });
+                scheduleDraw();
+                return;
+            }
+            handleCursorPositionUpdate?.({ x: event.clientX, y: event.clientY }, handlePointerEvent(event.clientX, event.clientY));
+        }, onPointerUp: (event) => {
+            if (dragStateRef.current?.pointerId !== event.pointerId) {
+                return;
+            }
+            dragStateRef.current = undefined;
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+        }, onPointerCancel: () => {
+            dragStateRef.current = undefined;
+        }, onClick: (event) => {
+            if (suppressClickRef.current) {
+                suppressClickRef.current = false;
+                return;
+            }
+            handleOnClick?.(event, handlePointerEvent(event.clientX, event.clientY));
+        }, onDoubleClick: () => {
+            resetZoom();
+        }, children: [_jsx("canvas", { className: `absolute inset-0 h-full w-full ${rendererMode === "webgl" ? "hidden" : ""}`, ref: canvas2dRef }), _jsx("canvas", { className: `absolute inset-0 h-full w-full ${rendererMode === "canvas2d" ? "hidden" : ""}`, ref: webGlCanvasRef }), _jsx("canvas", { className: "absolute inset-0 h-full w-full pointer-events-none", ref: overlayCanvasRef }), customOverlay ? (_jsx("div", { className: "absolute inset-0 pointer-events-none", children: customOverlay })) : null, !hasRenderable ? (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-slate-600", children: "Waiting for image frames" })) : null] }));
+}
+function calculateDrawRect(imageWidth, imageHeight, containerWidth, containerHeight) {
+    if (imageWidth <= 0 || imageHeight <= 0 || containerWidth <= 0 || containerHeight <= 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    const imageAspect = imageWidth / imageHeight;
+    const containerAspect = containerWidth / containerHeight;
+    if (imageAspect > containerAspect) {
+        const width = containerWidth;
+        const height = width / imageAspect;
+        return {
+            x: 0,
+            y: (containerHeight - height) / 2,
+            width,
+            height,
+        };
+    }
+    const height = containerHeight;
+    const width = height * imageAspect;
+    return {
+        x: (containerWidth - width) / 2,
+        y: 0,
+        width,
+        height,
+    };
+}
+function applyViewTransform(rect, transform) {
+    return {
+        x: rect.x + transform.offsetX,
+        y: rect.y + transform.offsetY,
+        width: rect.width * transform.scale,
+        height: rect.height * transform.scale,
+    };
+}
+function clampViewTransform(baseRect, containerWidth, containerHeight, transform) {
+    const scale = clamp(transform.scale, MIN_ZOOM, MAX_ZOOM);
+    if (scale <= MIN_ZOOM) {
+        return {
+            scale: MIN_ZOOM,
+            offsetX: 0,
+            offsetY: 0,
+        };
+    }
+    const scaledWidth = baseRect.width * scale;
+    const scaledHeight = baseRect.height * scale;
+    return {
+        scale,
+        offsetX: clampAxisOffset(baseRect.x, scaledWidth, containerWidth, transform.offsetX),
+        offsetY: clampAxisOffset(baseRect.y, scaledHeight, containerHeight, transform.offsetY),
+    };
+}
+function clampAxisOffset(basePosition, scaledSize, containerSize, offset) {
+    const edgeAlignedOffset = containerSize - scaledSize - basePosition;
+    const originAlignedOffset = -basePosition;
+    return clamp(offset, Math.min(edgeAlignedOffset, originAlignedOffset), Math.max(edgeAlignedOffset, originAlignedOffset));
+}
+function scaleDrawRect(rect, factor) {
+    return {
+        x: rect.x * factor,
+        y: rect.y * factor,
+        width: rect.width * factor,
+        height: rect.height * factor,
+    };
+}
+function getOffscreenCanvas(canvasRef, width, height) {
+    let canvas = canvasRef.current;
+    if (!canvas) {
+        canvas =
+            typeof OffscreenCanvas !== "undefined"
+                ? new OffscreenCanvas(width, height)
+                : document.createElement("canvas");
+        canvasRef.current = canvas;
+    }
+    if (canvas.width !== width) {
+        canvas.width = width;
+    }
+    if (canvas.height !== height) {
+        canvas.height = height;
+    }
+    return canvas;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function isAnnotationTopicEnabled(detections, topic) {
+    for (const detection of detections) {
+        if (detection.name === topic) {
+            return detection.enabled;
+        }
+    }
+    return false;
+}
+//# sourceMappingURL=ImageCanvasRenderer.js.map