@luxonis/depthai-viewer-common 3.7.5 → 3.8.0

package/dist/visualizer/panels/pointcloud/PointCloudCanvasRenderer.js

@@ -0,0 +1,881 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { useLiveMessageSubscriptionController, useMessagePipeline, } from "../../context/MessagePipelineProvider.js";
+import { useMessageSubscription } from "../../messaging/utils.js";
+import { readCanvasColor, useThemeMode } from "../../utils/use-theme-mode.js";
+import { DEFAULT_POINT_CLOUD_CAMERA_STATE } from "../pointcloud-camera.js";
+const PANEL_STYLE = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    position: "relative",
+};
+const POINT_CLOUD_RENDER_SCHEMAS = new Set([
+    "foxglove.PointCloud",
+    "foxglove.PointClouds",
+    "foxglove.PointCloud.Colored",
+    "foxglove.PointClouds.Colored",
+]);
+const DEFAULT_POINT_SIZE = 1;
+const MAX_DEVICE_PIXEL_RATIO = 1.5;
+const CAMERA_FIT_PADDING = 1.05;
+const MIN_CAMERA_DISTANCE = 0.1;
+const CAMERA_RETICLE_SIZE = 100;
+const KEYBOARD_PAN_DISTANCE_RATIO = 0.025;
+const KEYBOARD_FAST_PAN_MULTIPLIER = 4;
+const KEYBOARD_MIN_PAN_DISTANCE = 0.02;
+const DEFAULT_ORBIT_SPEED_RAD_PER_SECOND = 0.6;
+const ORBIT_SPEED_STEP_MULTIPLIER = 1.25;
+const MIN_ORBIT_SPEED_RAD_PER_SECOND = 0.05;
+const MAX_ORBIT_SPEED_RAD_PER_SECOND = 6;
+const POINT_CLOUD_VERTEX_SHADER = `
+  attribute vec4 aColor;
+  uniform float uPointSize;
+  varying vec4 vColor;
+
+  void main() {
+    vColor = aColor;
+    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+    gl_Position = projectionMatrix * mvPosition;
+    gl_PointSize = uPointSize;
+  }
+`;
+const POINT_CLOUD_FRAGMENT_SHADER = `
+  varying vec4 vColor;
+
+  void main() {
+    gl_FragColor = vColor;
+  }
+`;
+function createSubscriptionId() {
+    return typeof crypto !== "undefined" && "randomUUID" in crypto
+        ? crypto.randomUUID()
+        : `pointcloud-${Math.random().toString(36).slice(2)}`;
+}
+function getTopicPointSettings(topic, initialConfig) {
+    return {
+        minValue: initialConfig.topics?.[topic]?.minValue ?? 0,
+        maxValue: initialConfig.topics?.[topic]?.maxValue ?? Number.POSITIVE_INFINITY,
+        pointSize: initialConfig.topics?.[topic]?.pointSize ?? DEFAULT_POINT_SIZE,
+    };
+}
+function getInitialCameraState(partialCameraState) {
+    return {
+        distance: partialCameraState?.distance ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.distance,
+        perspective: partialCameraState?.perspective ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.perspective,
+        phi: partialCameraState?.phi ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.phi,
+        target: [
+            partialCameraState?.target?.[0] ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.target[0],
+            partialCameraState?.target?.[1] ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.target[1],
+            partialCameraState?.target?.[2] ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.target[2],
+        ],
+        thetaOffset: partialCameraState?.thetaOffset ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.thetaOffset,
+        fovy: partialCameraState?.fovy ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.fovy,
+        near: partialCameraState?.near ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.near,
+        far: partialCameraState?.far ?? DEFAULT_POINT_CLOUD_CAMERA_STATE.far,
+    };
+}
+function isPointCloudMessage(message) {
+    if (!message || typeof message !== "object") {
+        return false;
+    }
+    const candidate = message;
+    return (typeof candidate.point_stride === "number" &&
+        Array.isArray(candidate.fields) &&
+        candidate.data instanceof Uint8Array);
+}
+function extractPointCloudMessage(event) {
+    if (!POINT_CLOUD_RENDER_SCHEMAS.has(event.schemaName)) {
+        return undefined;
+    }
+    const directMessage = event.message;
+    if (isPointCloudMessage(directMessage)) {
+        const pointCount = Math.floor(directMessage.data.byteLength / directMessage.point_stride);
+        return pointCount > 0 ? { ...directMessage, pointCount } : undefined;
+    }
+    if (Array.isArray(directMessage)) {
+        for (let index = directMessage.length - 1; index >= 0; index -= 1) {
+            const message = directMessage[index];
+            if (isPointCloudMessage(message)) {
+                const pointCount = Math.floor(message.data.byteLength / message.point_stride);
+                return pointCount > 0 ? { ...message, pointCount } : undefined;
+            }
+        }
+        return undefined;
+    }
+    if (!directMessage || typeof directMessage !== "object") {
+        return undefined;
+    }
+    const record = directMessage;
+    for (const key of ["pointClouds", "point_clouds", "clouds", "items"]) {
+        const value = record[key];
+        if (!Array.isArray(value)) {
+            continue;
+        }
+        for (let index = value.length - 1; index >= 0; index -= 1) {
+            const message = value[index];
+            if (isPointCloudMessage(message)) {
+                const pointCount = Math.floor(message.data.byteLength / message.point_stride);
+                return pointCount > 0 ? { ...message, pointCount } : undefined;
+            }
+        }
+    }
+    return undefined;
+}
+function findField(fields, name) {
+    return fields.find((field) => field.name === name);
+}
+function getFieldLayout(fields) {
+    const xField = findField(fields, "x");
+    const yField = findField(fields, "y");
+    const zField = findField(fields, "z");
+    if (!xField || !yField || !zField) {
+        return undefined;
+    }
+    return {
+        xField,
+        yField,
+        zField,
+        redField: findField(fields, "red"),
+        greenField: findField(fields, "green"),
+        blueField: findField(fields, "blue"),
+        alphaField: findField(fields, "alpha"),
+    };
+}
+function isStandardXYZLayout(pointCloud, layout) {
+    return (pointCloud.point_stride === 12 &&
+        pointCloud.data.byteOffset % Float32Array.BYTES_PER_ELEMENT === 0 &&
+        layout.xField.offset === 0 &&
+        layout.yField.offset === 4 &&
+        layout.zField.offset === 8);
+}
+function isStandardXYZRGBALayout(pointCloud, layout) {
+    return (pointCloud.point_stride === 16 &&
+        pointCloud.data.byteOffset % Float32Array.BYTES_PER_ELEMENT === 0 &&
+        layout.xField.offset === 0 &&
+        layout.yField.offset === 4 &&
+        layout.zField.offset === 8 &&
+        layout.redField?.offset === 12 &&
+        layout.greenField?.offset === 13 &&
+        layout.blueField?.offset === 14 &&
+        layout.alphaField?.offset === 15);
+}
+function getHitOffset(pointCloud, pointIndex) {
+    if (pointCloud == undefined || pointIndex == undefined) {
+        return undefined;
+    }
+    const width = pointCloud.width;
+    const height = pointCloud.height;
+    if (width == undefined ||
+        height == undefined ||
+        width <= 0 ||
+        height <= 0 ||
+        pointIndex < 0 ||
+        pointIndex >= width * height) {
+        return undefined;
+    }
+    return {
+        offsetX: ((pointIndex % width) + 0.5) / width,
+        offsetY: (Math.floor(pointIndex / width) + 0.5) / height,
+    };
+}
+function shouldApplyPointCloudPose(pointCloud) {
+    const pose = pointCloud.pose;
+    if (!pose) {
+        return false;
+    }
+    const { position, orientation } = pose;
+    return !(position.x === 0 &&
+        position.y === 0 &&
+        position.z === 0 &&
+        orientation.x === 0 &&
+        orientation.y === 0 &&
+        orientation.z === 1 &&
+        orientation.w === 0);
+}
+function shouldKeepPoint(z, pointSettings) {
+    return Number.isFinite(z) && z >= pointSettings.minValue && z <= pointSettings.maxValue;
+}
+function createCameraReticle() {
+    const vertices = new Float32Array([
+        0, 0, 0, -0.3, -0.2, 0.55, 0, 0, 0, 0.3, -0.2, 0.55, 0, 0, 0, 0.3, 0.2, 0.55, 0, 0, 0, -0.3,
+        0.2, 0.55, -0.3, -0.2, 0.55, 0.3, -0.2, 0.55, 0.3, -0.2, 0.55, 0.3, 0.2, 0.55, 0.3, 0.2, 0.55,
+        -0.3, 0.2, 0.55, -0.3, 0.2, 0.55, -0.3, -0.2, 0.55,
+    ]);
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+    const material = new THREE.LineBasicMaterial({
+        color: 0x111827,
+        depthTest: false,
+        depthWrite: false,
+        toneMapped: false,
+    });
+    const reticle = new THREE.LineSegments(geometry, material);
+    reticle.renderOrder = 1;
+    reticle.scale.setScalar(CAMERA_RETICLE_SIZE);
+    reticle.visible = false;
+    return reticle;
+}
+class StandalonePointCloudRenderer {
+    #canvas;
+    #renderer;
+    #scene;
+    #camera;
+    #controls;
+    #resizeObserver;
+    #geometry;
+    #material;
+    #points;
+    #cameraReticle;
+    #raycaster = new THREE.Raycaster();
+    #animationFrame;
+    #needsRender = true;
+    #disposed = false;
+    #pointCloud;
+    #boundsSphere = new THREE.Sphere();
+    #positionsArray;
+    #colorsArray;
+    #whiteColorsArray;
+    #positionsAttribute;
+    #colorsAttribute;
+    #currentBackground = "";
+    #pointSize;
+    #pointSettings;
+    #initialCameraState;
+    #hasAutoFitCamera = false;
+    #orbitDirection = 0;
+    #orbitSpeed = DEFAULT_ORBIT_SPEED_RAD_PER_SECOND;
+    #lastAnimationTime;
+    constructor(args) {
+        this.#canvas = args.canvas;
+        this.#pointSettings = args.pointSettings;
+        this.#pointSize = args.pointSettings.pointSize;
+        this.#initialCameraState = args.cameraState;
+        this.#renderer = new THREE.WebGLRenderer({
+            canvas: this.#canvas,
+            alpha: true,
+            antialias: false,
+            powerPreference: "high-performance",
+        });
+        this.#renderer.setPixelRatio(Math.min(window.devicePixelRatio, MAX_DEVICE_PIXEL_RATIO));
+        this.#renderer.outputColorSpace = THREE.SRGBColorSpace;
+        this.#renderer.sortObjects = false;
+        this.#scene = new THREE.Scene();
+        this.#scene.add(new THREE.AmbientLight(0xffffff, 2));
+        this.#camera = new THREE.PerspectiveCamera(args.cameraState.fovy, 1, args.cameraState.near, args.cameraState.far);
+        this.#camera.up.set(0, 1, 0);
+        this.#controls = new OrbitControls(this.#camera, this.#canvas);
+        this.#controls.enableDamping = false;
+        this.#controls.screenSpacePanning = true;
+        this.#controls.zoomSpeed = 0.75;
+        this.#controls.panSpeed = 1.0;
+        this.#controls.rotateSpeed = 0.8;
+        this.#controls.target.set(args.cameraState.target[0], args.cameraState.target[1], args.cameraState.target[2]);
+        this.#controls.addEventListener("change", this.#requestRender);
+        this.#canvas.addEventListener("keydown", this.#handleKeyDown);
+        this.#geometry = new THREE.BufferGeometry();
+        this.#material = new THREE.ShaderMaterial({
+            vertexShader: POINT_CLOUD_VERTEX_SHADER,
+            fragmentShader: POINT_CLOUD_FRAGMENT_SHADER,
+            uniforms: {
+                uPointSize: { value: this.#pointSize },
+            },
+            depthTest: true,
+            depthWrite: true,
+            transparent: false,
+            toneMapped: false,
+        });
+        this.#points = new THREE.Points(this.#geometry, this.#material);
+        this.#scene.add(this.#points);
+        this.#cameraReticle = createCameraReticle();
+        this.#scene.add(this.#cameraReticle);
+        this.#raycaster.params.Points ??= { threshold: 1 };
+        this.#raycaster.params.Points.threshold = Math.max(0.5, this.#pointSize * 0.6);
+        this.#resizeObserver = new ResizeObserver(this.#handleResize);
+        this.#resizeObserver.observe(this.#canvas);
+        this.#applyInitialCameraState(args.cameraState);
+        this.#handleResize();
+        this.#requestRender();
+    }
+    dispose() {
+        if (this.#disposed) {
+            return;
+        }
+        this.#disposed = true;
+        if (this.#animationFrame != undefined) {
+            cancelAnimationFrame(this.#animationFrame);
+            this.#animationFrame = undefined;
+        }
+        this.#resizeObserver.disconnect();
+        this.#canvas.removeEventListener("keydown", this.#handleKeyDown);
+        this.#controls.removeEventListener("change", this.#requestRender);
+        this.#controls.dispose();
+        this.#geometry.dispose();
+        this.#material.dispose();
+        this.#cameraReticle.geometry.dispose();
+        if (Array.isArray(this.#cameraReticle.material)) {
+            for (const material of this.#cameraReticle.material) {
+                material.dispose();
+            }
+        }
+        else {
+            this.#cameraReticle.material.dispose();
+        }
+        this.#renderer.dispose();
+    }
+    setThemeMode(mode) {
+        const nextBackground = readCanvasColor(mode);
+        if (nextBackground === this.#currentBackground) {
+            return;
+        }
+        this.#currentBackground = nextBackground;
+        this.#renderer.setClearColor(nextBackground, 1);
+        this.#requestRender();
+    }
+    applyPointCloud(pointCloud) {
+        this.#pointCloud = pointCloud;
+        this.#updateGeometry(pointCloud);
+        this.#updatePointsPose(pointCloud);
+        this.#cameraReticle.visible = true;
+        if (!this.#hasAutoFitCamera) {
+            this.#fitCameraToPointCloud(pointCloud);
+            this.#hasAutoFitCamera = true;
+        }
+        this.#requestRender();
+    }
+    clear() {
+        this.#pointCloud = undefined;
+        this.#geometry.setDrawRange(0, 0);
+        this.#points.position.set(0, 0, 0);
+        this.#points.quaternion.identity();
+        this.#points.scale.set(1, 1, 1);
+        this.#points.updateMatrixWorld(true);
+        this.#cameraReticle.visible = false;
+        this.#cameraReticle.position.set(0, 0, 0);
+        this.#cameraReticle.quaternion.identity();
+        this.#hasAutoFitCamera = false;
+        this.#requestRender();
+    }
+    handleSeekRestore(messages) {
+        for (let index = messages.length - 1; index >= 0; index -= 1) {
+            const pointCloud = extractPointCloudMessage(messages[index]);
+            if (pointCloud) {
+                this.applyPointCloud(pointCloud);
+                return;
+            }
+        }
+        this.clear();
+    }
+    resetView() {
+        this.#applyInitialCameraState(this.#initialCameraState);
+        if (this.#pointCloud != undefined) {
+            this.#fitCameraToPointCloud(this.#pointCloud);
+            this.#hasAutoFitCamera = true;
+        }
+        else {
+            this.#hasAutoFitCamera = false;
+        }
+        this.#requestRender();
+    }
+    pick(clientX, clientY) {
+        if (this.#pointCloud == undefined || this.#geometry.drawRange.count === 0) {
+            return undefined;
+        }
+        const rect = this.#canvas.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+            return undefined;
+        }
+        const pointer = new THREE.Vector2(((clientX - rect.left) / rect.width) * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1);
+        this.#raycaster.setFromCamera(pointer, this.#camera);
+        const hit = this.#raycaster.intersectObject(this.#points, false)[0];
+        if (!hit || hit.index == undefined) {
+            return undefined;
+        }
+        return {
+            index: hit.index,
+            offset: getHitOffset(this.#pointCloud, hit.index),
+        };
+    }
+    #applyInitialCameraState(cameraState) {
+        const theta = THREE.MathUtils.degToRad(cameraState.thetaOffset);
+        const phi = THREE.MathUtils.degToRad(cameraState.phi);
+        const radius = Math.max(MIN_CAMERA_DISTANCE, Math.abs(cameraState.distance));
+        const target = new THREE.Vector3(cameraState.target[0], cameraState.target[1], cameraState.target[2]);
+        const offset = new THREE.Vector3().setFromSpherical(new THREE.Spherical(radius, phi, theta));
+        const position = target.clone().add(offset);
+        this.#camera.position.copy(position);
+        this.#controls.target.copy(target);
+        this.#camera.lookAt(target);
+        this.#controls.update();
+        this.#camera.near = cameraState.near;
+        this.#camera.far = cameraState.far;
+        this.#camera.updateProjectionMatrix();
+    }
+    #handleResize = () => {
+        const parent = this.#canvas.parentElement;
+        const width = parent?.clientWidth ?? this.#canvas.clientWidth;
+        const height = parent?.clientHeight ?? this.#canvas.clientHeight;
+        if (width <= 0 || height <= 0) {
+            return;
+        }
+        const pixelRatio = Math.min(window.devicePixelRatio, MAX_DEVICE_PIXEL_RATIO);
+        this.#renderer.setPixelRatio(pixelRatio);
+        this.#renderer.setSize(width, height, false);
+        this.#camera.aspect = width / height;
+        this.#camera.updateProjectionMatrix();
+        this.#requestRender();
+    };
+    #requestRender = () => {
+        this.#needsRender = true;
+        if (this.#animationFrame != undefined || this.#disposed) {
+            return;
+        }
+        this.#animationFrame = requestAnimationFrame(this.#animate);
+    };
+    #animate = (time) => {
+        this.#animationFrame = undefined;
+        if (this.#disposed) {
+            return;
+        }
+        if (this.#orbitDirection !== 0) {
+            const deltaSeconds = this.#lastAnimationTime == undefined
+                ? 0
+                : Math.min(0.1, (time - this.#lastAnimationTime) / 1000);
+            this.#lastAnimationTime = time;
+            this.#orbitAroundTarget(deltaSeconds);
+        }
+        else {
+            this.#lastAnimationTime = undefined;
+        }
+        if (this.#needsRender) {
+            this.#needsRender = false;
+            this.#renderer.render(this.#scene, this.#camera);
+        }
+        if (this.#needsRender || this.#orbitDirection !== 0) {
+            this.#animationFrame = requestAnimationFrame(this.#animate);
+        }
+    };
+    #handleKeyDown = (event) => {
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        const key = event.key.toLowerCase();
+        if (key === "w" || key === "a" || key === "s" || key === "d") {
+            event.preventDefault();
+            this.#panCamera(key, event.shiftKey);
+            return;
+        }
+        if (key === "o") {
+            if (event.repeat) {
+                return;
+            }
+            event.preventDefault();
+            this.#toggleOrbit(event.shiftKey ? -1 : 1);
+            return;
+        }
+        if (key === "q") {
+            event.preventDefault();
+            this.#adjustOrbitSpeed(1 / ORBIT_SPEED_STEP_MULTIPLIER);
+            return;
+        }
+        if (key === "e") {
+            event.preventDefault();
+            this.#adjustOrbitSpeed(ORBIT_SPEED_STEP_MULTIPLIER);
+        }
+    };
+    #panCamera(key, fast) {
+        const offset = this.#camera.position.clone().sub(this.#controls.target);
+        const distance = Math.max(MIN_CAMERA_DISTANCE, offset.length());
+        const panDistance = Math.max(KEYBOARD_MIN_PAN_DISTANCE, distance * KEYBOARD_PAN_DISTANCE_RATIO);
+        const amount = panDistance * (fast ? KEYBOARD_FAST_PAN_MULTIPLIER : 1);
+        const direction = new THREE.Vector3();
+        const cameraDirection = new THREE.Vector3();
+        this.#camera.getWorldDirection(cameraDirection);
+        const right = new THREE.Vector3().crossVectors(cameraDirection, this.#camera.up).normalize();
+        const up = new THREE.Vector3().crossVectors(right, cameraDirection).normalize();
+        if (key === "w") {
+            direction.copy(up);
+        }
+        else if (key === "s") {
+            direction.copy(up).negate();
+        }
+        else if (key === "d") {
+            direction.copy(right);
+        }
+        else {
+            direction.copy(right).negate();
+        }
+        direction.multiplyScalar(amount);
+        this.#camera.position.add(direction);
+        this.#controls.target.add(direction);
+        this.#controls.update();
+        this.#requestRender();
+    }
+    #toggleOrbit(direction) {
+        this.#orbitDirection = this.#orbitDirection === direction ? 0 : direction;
+        this.#lastAnimationTime = undefined;
+        this.#requestRender();
+    }
+    #adjustOrbitSpeed(multiplier) {
+        if (this.#orbitDirection === 0) {
+            return;
+        }
+        this.#orbitSpeed = THREE.MathUtils.clamp(this.#orbitSpeed * multiplier, MIN_ORBIT_SPEED_RAD_PER_SECOND, MAX_ORBIT_SPEED_RAD_PER_SECOND);
+    }
+    #orbitAroundTarget(deltaSeconds) {
+        if (deltaSeconds <= 0) {
+            this.#needsRender = true;
+            return;
+        }
+        const offset = this.#camera.position.clone().sub(this.#controls.target);
+        if (offset.lengthSq() === 0 || !Number.isFinite(offset.lengthSq())) {
+            return;
+        }
+        offset.applyAxisAngle(this.#camera.up, this.#orbitDirection * this.#orbitSpeed * deltaSeconds);
+        this.#camera.position.copy(this.#controls.target).add(offset);
+        this.#camera.lookAt(this.#controls.target);
+        this.#controls.update();
+        this.#needsRender = true;
+    }
+    #fitCameraToPointCloud(pointCloud) {
+        const sphere = this.#boundsSphere.clone().applyMatrix4(this.#points.matrixWorld);
+        if (!Number.isFinite(sphere.radius) || sphere.radius <= 0) {
+            return;
+        }
+        this.#camera.near = Math.max(0.01, sphere.radius / 500);
+        this.#camera.far = Math.max(this.#camera.near + 1, sphere.radius * 500);
+        this.#camera.updateProjectionMatrix();
+        if (this.#geometry.boundingBox == undefined) {
+            return;
+        }
+        const center = sphere.center;
+        const distance = Math.max(MIN_CAMERA_DISTANCE, (sphere.radius / Math.tan(THREE.MathUtils.degToRad(this.#camera.fov) / 2)) *
+            CAMERA_FIT_PADDING);
+        if (pointCloud.width != undefined && pointCloud.height != undefined) {
+            this.#raycaster.params.Points ??= { threshold: 1 };
+            this.#raycaster.params.Points.threshold = Math.max(0.5, this.#pointSize * 0.75);
+        }
+        const direction = this.#camera.position.clone().sub(this.#controls.target);
+        if (direction.lengthSq() === 0 || !Number.isFinite(direction.lengthSq())) {
+            direction.set(1, -1, 1);
+        }
+        direction.normalize();
+        this.#controls.target.set(center.x, center.y, center.z);
+        this.#camera.position.copy(center).addScaledVector(direction, distance);
+        this.#camera.lookAt(center);
+        this.#controls.update();
+    }
+    #updatePointsPose(pointCloud) {
+        const isOrganizedPointCloud = pointCloud.width != undefined && pointCloud.height != undefined;
+        const xScale = isOrganizedPointCloud ? -1 : 1;
+        const yScale = pointCloud.coordinateFrame === "depthai-camera-y-down" ? -1 : 1;
+        this.#points.scale.set(xScale, yScale, 1);
+        if (!shouldApplyPointCloudPose(pointCloud)) {
+            this.#points.position.set(0, 0, 0);
+            this.#points.quaternion.identity();
+            this.#cameraReticle.position.set(0, 0, 0);
+            this.#cameraReticle.quaternion.identity();
+            this.#points.updateMatrixWorld(true);
+            return;
+        }
+        const pose = pointCloud.pose;
+        if (!pose) {
+            return;
+        }
+        const { position, orientation } = pose;
+        this.#points.position.set(position.x, position.y, position.z);
+        this.#points.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+        this.#cameraReticle.position.copy(this.#points.position);
+        this.#cameraReticle.quaternion.copy(this.#points.quaternion);
+        this.#points.updateMatrixWorld(true);
+    }
+    #syncBoundsFromGeometry() {
+        this.#geometry.computeBoundingBox();
+        this.#geometry.computeBoundingSphere();
+        if (this.#geometry.boundingSphere) {
+            this.#boundsSphere.copy(this.#geometry.boundingSphere);
+        }
+    }
+    #applyFastPathGeometry(pointCloud, layout) {
+        if (this.#pointSettings.minValue > 0 || Number.isFinite(this.#pointSettings.maxValue)) {
+            return false;
+        }
+        if (isStandardXYZRGBALayout(pointCloud, layout)) {
+            const pointCount = pointCloud.pointCount;
+            const positionsView = new Float32Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCount * 4);
+            const colorsView = new Uint8Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCount * pointCloud.point_stride);
+            const positionBuffer = new THREE.InterleavedBuffer(positionsView, 4);
+            const colorBuffer = new THREE.InterleavedBuffer(colorsView, pointCloud.point_stride);
+            this.#positionsAttribute = new THREE.InterleavedBufferAttribute(positionBuffer, 3, 0, false);
+            this.#colorsAttribute = new THREE.InterleavedBufferAttribute(colorBuffer, 4, 12, true);
+            this.#geometry.setAttribute("position", this.#positionsAttribute);
+            this.#geometry.setAttribute("aColor", this.#colorsAttribute);
+            this.#geometry.setDrawRange(0, pointCount);
+            this.#syncBoundsFromGeometry();
+            return true;
+        }
+        if (isStandardXYZLayout(pointCloud, layout)) {
+            const pointCount = pointCloud.pointCount;
+            const positionsView = new Float32Array(pointCloud.data.buffer, pointCloud.data.byteOffset, pointCount * 3);
+            const position = new THREE.BufferAttribute(positionsView, 3);
+            const colorLength = pointCount * 4;
+            const colors = this.#whiteColorsArray && this.#whiteColorsArray.length === colorLength
+                ? this.#whiteColorsArray
+                : new Uint8Array(colorLength);
+            if (colors !== this.#whiteColorsArray) {
+                colors.fill(255);
+                this.#whiteColorsArray = colors;
+            }
+            const color = new THREE.Uint8BufferAttribute(colors, 4, true);
+            this.#positionsAttribute = position;
+            this.#colorsAttribute = color;
+            this.#geometry.setAttribute("position", position);
+            this.#geometry.setAttribute("aColor", color);
+            this.#geometry.setDrawRange(0, pointCount);
+            this.#syncBoundsFromGeometry();
+            return true;
+        }
+        return false;
+    }
+    #updateGeometry(pointCloud) {
+        const layout = getFieldLayout(pointCloud.fields);
+        if (!layout) {
+            this.clear();
+            return;
+        }
+        if (this.#applyFastPathGeometry(pointCloud, layout)) {
+            return;
+        }
+        const { xField, yField, zField, redField, greenField, blueField, alphaField } = layout;
+        const stride = pointCloud.point_stride;
+        const pointCount = pointCloud.pointCount;
+        const data = pointCloud.data;
+        const positionsLength = pointCount * 3;
+        const colorsLength = pointCount * 4;
+        const positions = this.#positionsArray && this.#positionsArray.length === positionsLength
+            ? this.#positionsArray
+            : new Float32Array(positionsLength);
+        const colors = this.#colorsArray && this.#colorsArray.length === colorsLength
+            ? this.#colorsArray
+            : new Uint8Array(colorsLength);
+        const view = new DataView(data.buffer, data.byteOffset, data.byteLength);
+        let minX = Number.POSITIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let minZ = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        let maxZ = Number.NEGATIVE_INFINITY;
+        let visiblePointCount = 0;
+        for (let index = 0; index < pointCount; index += 1) {
+            const inputOffset = index * stride;
+            const x = view.getFloat32(inputOffset + xField.offset, true);
+            const y = view.getFloat32(inputOffset + yField.offset, true);
+            const z = view.getFloat32(inputOffset + zField.offset, true);
+            if (!Number.isFinite(x) || !Number.isFinite(y) || !shouldKeepPoint(z, this.#pointSettings)) {
+                continue;
+            }
+            const outputOffset = visiblePointCount * 3;
+            const colorOffset = visiblePointCount * 4;
+            positions[outputOffset] = x;
+            positions[outputOffset + 1] = y;
+            positions[outputOffset + 2] = z;
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            minZ = Math.min(minZ, z);
+            maxX = Math.max(maxX, x);
+            maxY = Math.max(maxY, y);
+            maxZ = Math.max(maxZ, z);
+            colors[colorOffset] = redField ? view.getUint8(inputOffset + redField.offset) : 255;
+            colors[colorOffset + 1] = greenField ? view.getUint8(inputOffset + greenField.offset) : 255;
+            colors[colorOffset + 2] = blueField ? view.getUint8(inputOffset + blueField.offset) : 255;
+            colors[colorOffset + 3] = alphaField ? view.getUint8(inputOffset + alphaField.offset) : 255;
+            visiblePointCount += 1;
+        }
+        this.#positionsArray = positions;
+        this.#colorsArray = colors;
+        const position = this.#positionsAttribute instanceof THREE.BufferAttribute &&
+            this.#positionsAttribute.array === positions
+            ? this.#positionsAttribute
+            : new THREE.BufferAttribute(positions, 3);
+        if (position === this.#positionsAttribute) {
+            position.needsUpdate = true;
+        }
+        const color = this.#colorsAttribute instanceof THREE.Uint8BufferAttribute &&
+            this.#colorsAttribute.array === colors
+            ? this.#colorsAttribute
+            : new THREE.Uint8BufferAttribute(colors, 4, true);
+        if (color === this.#colorsAttribute) {
+            color.needsUpdate = true;
+        }
+        this.#positionsAttribute = position;
+        this.#colorsAttribute = color;
+        this.#geometry.setAttribute("position", position);
+        this.#geometry.setAttribute("aColor", color);
+        this.#geometry.setDrawRange(0, visiblePointCount);
+        if (visiblePointCount === 0) {
+            this.#geometry.boundingBox = new THREE.Box3();
+            this.#geometry.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 0);
+            this.#boundsSphere.copy(this.#geometry.boundingSphere);
+            return;
+        }
+        const boundingBox = new THREE.Box3(new THREE.Vector3(minX, minY, minZ), new THREE.Vector3(maxX, maxY, maxZ));
+        this.#geometry.boundingBox = boundingBox;
+        this.#geometry.boundingSphere = boundingBox.getBoundingSphere(this.#boundsSphere.clone());
+        this.#boundsSphere.copy(this.#geometry.boundingSphere);
+    }
+}
+export function PointCloudCanvasRenderer({ topic, initialConfig, frameRenderedEvent, handleOnClick, handleCursorPositionUpdate, registerRendered, unregisterRendered, customOverlay, }) {
+    const canvasRef = React.useRef(null);
+    const rendererRef = React.useRef(undefined);
+    const handledSeekTimeRef = React.useRef(undefined);
+    const hoverFrameRef = React.useRef(undefined);
+    const latestPointerPositionRef = React.useRef(undefined);
+    const pointerInteractionRef = React.useRef(false);
+    const draggedDuringPointerRef = React.useRef(false);
+    const subscriptionIdRef = React.useRef(createSubscriptionId());
+    const liveMessageSubscriptions = useLiveMessageSubscriptionController();
+    const setSubscriptions = useMessagePipeline((ctx) => ctx.setSubscriptions);
+    const lastSeekTime = useMessagePipeline((ctx) => ctx.playerState.activeData?.lastSeekTime);
+    const themeMode = useThemeMode();
+    const cameraState = React.useMemo(() => getInitialCameraState(initialConfig.cameraState), [initialConfig.cameraState]);
+    const pointSettings = React.useMemo(() => getTopicPointSettings(topic, initialConfig), [initialConfig, topic]);
+    React.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        const renderer = new StandalonePointCloudRenderer({
+            canvas,
+            pointSettings,
+            cameraState,
+        });
+        rendererRef.current = renderer;
+        registerRendered?.(renderer);
+        return () => {
+            if (hoverFrameRef.current != undefined) {
+                cancelAnimationFrame(hoverFrameRef.current);
+                hoverFrameRef.current = undefined;
+            }
+            renderer.dispose();
+            rendererRef.current = undefined;
+            unregisterRendered?.();
+        };
+    }, [cameraState, pointSettings, registerRendered, unregisterRendered]);
+    React.useEffect(() => {
+        setSubscriptions(subscriptionIdRef.current, [{ topic, preloadType: "partial" }]);
+        return () => {
+            setSubscriptions(subscriptionIdRef.current, []);
+        };
+    }, [setSubscriptions, topic]);
+    React.useEffect(() => {
+        const renderer = rendererRef.current;
+        if (!renderer) {
+            return;
+        }
+        renderer.setThemeMode(themeMode);
+    }, [themeMode]);
+    React.useEffect(() => {
+        if (lastSeekTime == undefined || lastSeekTime === handledSeekTimeRef.current) {
+            return;
+        }
+        handledSeekTimeRef.current = lastSeekTime;
+        const renderer = rendererRef.current;
+        if (!renderer) {
+            return;
+        }
+        renderer.handleSeekRestore(liveMessageSubscriptions.getCachedMessages([topic]));
+    }, [lastSeekTime, liveMessageSubscriptions, topic]);
+    useMessageSubscription({
+        topics: [topic],
+        onMessages: (messages, incomingLastSeekTime) => {
+            const renderer = rendererRef.current;
+            if (!renderer) {
+                return;
+            }
+            if (incomingLastSeekTime != undefined) {
+                handledSeekTimeRef.current = incomingLastSeekTime;
+            }
+            for (let index = messages.length - 1; index >= 0; index -= 1) {
+                const pointCloud = extractPointCloudMessage(messages[index]);
+                if (!pointCloud) {
+                    continue;
+                }
+                renderer.applyPointCloud(pointCloud);
+                frameRenderedEvent?.(0);
+                return;
+            }
+        },
+    });
+    const emitHover = React.useCallback(() => {
+        hoverFrameRef.current = undefined;
+        if (pointerInteractionRef.current) {
+            return;
+        }
+        const renderer = rendererRef.current;
+        const position = latestPointerPositionRef.current;
+        if (!renderer || !position || !handleCursorPositionUpdate) {
+            return;
+        }
+        const hit = renderer.pick(position.x, position.y);
+        handleCursorPositionUpdate(position, hit?.offset);
+    }, [handleCursorPositionUpdate]);
+    const handleCanvasPointerMove = React.useCallback((event) => {
+        if (!handleCursorPositionUpdate) {
+            return;
+        }
+        if (event.buttons !== 0 || pointerInteractionRef.current) {
+            draggedDuringPointerRef.current = true;
+            if (hoverFrameRef.current != undefined) {
+                cancelAnimationFrame(hoverFrameRef.current);
+                hoverFrameRef.current = undefined;
+            }
+            return;
+        }
+        latestPointerPositionRef.current = { x: event.clientX, y: event.clientY };
+        if (hoverFrameRef.current != undefined) {
+            return;
+        }
+        hoverFrameRef.current = requestAnimationFrame(emitHover);
+    }, [emitHover, handleCursorPositionUpdate]);
+    const handleCanvasClick = React.useCallback((event) => {
+        if (!handleOnClick) {
+            return;
+        }
+        if (draggedDuringPointerRef.current) {
+            draggedDuringPointerRef.current = false;
+            handleOnClick(event, undefined);
+            return;
+        }
+        const renderer = rendererRef.current;
+        if (!renderer) {
+            handleOnClick(event, undefined);
+            return;
+        }
+        const hit = renderer.pick(event.clientX, event.clientY);
+        handleOnClick(event, hit?.offset);
+    }, [handleOnClick]);
+    const handleCanvasPointerDown = React.useCallback((event) => {
+        event.currentTarget.focus();
+        pointerInteractionRef.current = true;
+        draggedDuringPointerRef.current = false;
+        if (hoverFrameRef.current != undefined) {
+            cancelAnimationFrame(hoverFrameRef.current);
+            hoverFrameRef.current = undefined;
+        }
+    }, []);
+    const handleCanvasPointerUp = React.useCallback(() => {
+        pointerInteractionRef.current = false;
+    }, []);
+    const handleCanvasPointerLeave = React.useCallback(() => {
+        pointerInteractionRef.current = false;
+        draggedDuringPointerRef.current = false;
+        if (hoverFrameRef.current != undefined) {
+            cancelAnimationFrame(hoverFrameRef.current);
+            hoverFrameRef.current = undefined;
+        }
+    }, []);
+    return (_jsxs("div", { style: PANEL_STYLE, children: [customOverlay, _jsx("canvas", { ref: canvasRef, tabIndex: 0, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onClick: handleCanvasClick, onPointerDown: handleCanvasPointerDown, onPointerMove: handleCanvasPointerMove, onPointerUp: handleCanvasPointerUp, onPointerLeave: handleCanvasPointerLeave })] }));
+}
+//# sourceMappingURL=PointCloudCanvasRenderer.js.map