@viamrobotics/motion-tools 1.16.0 → 1.18.1

package/dist/ecs/traits.js

@@ -54,7 +54,12 @@ export const Material = trait({
 export const DepthTest = trait(() => true);
 export const Arrow = trait(() => true);
 export const Positions = trait(() => new Float32Array());
+/** Per-vertex RGB colors packed as [r, g, b, ...], stride of 3, values 0-255. */
 export const Colors = trait(() => new Uint8Array());
+/**
+ * Per-vertex opacity values packed as uint8 (0-255).
+ */
+export const Opacities = trait(() => new Uint8Array());
 export const Instances = trait({
     count: 0,
 });
@@ -77,12 +82,7 @@ export const Capsule = trait({ l: 200, r: 50 });
  * A sphere, in mm
  */
 export const Sphere = trait({ r: 200 });
-export const PointColor = trait({ r: 0, g: 0, b: 0 });
-/** format [x, y, z, ...] */
-export const LinePositions = trait(() => new Float32Array());
 export const BufferGeometry = trait(() => new ThreeBufferGeometry());
-/** format [r, g, b, ...] */
-export const VertexColors = trait(() => new Float32Array());
 export const GLTF = trait(() => ({
     source: { url: '' },
     animationName: '',
@@ -91,6 +91,7 @@ export const Scale = trait({ x: 1, y: 1, z: 1 });
 export const FramesAPI = trait(() => true);
 export const GeometriesAPI = trait(() => true);
 export const DrawAPI = trait(() => true);
+export const DrawServiceAPI = trait(() => true);
 export const WorldStateStoreAPI = trait(() => true);
 export const SnapshotAPI = trait(() => true);
 /**
@@ -98,16 +99,32 @@ export const SnapshotAPI = trait(() => true);
  */
 export const DroppedFile = trait(() => true);
 export const ShowAxesHelper = trait(() => true);
-// === Shape Properties ===
+/**
+ * Marker trait for entities that should be rendered in screen space (CSS pixels)
+ */
+export const ScreenSpace = trait(() => true);
 /**
  * Point size, in mm
  */
-export const PointSize = trait(() => 10);
+export const PointSize = trait(() => 5);
+/**
+ * Line positions, format [x, y, z, ...]
+ */
+export const LinePositions = trait(() => new Float32Array());
 /**
- * Line width, in mm
+ * Line width, in mm when in world units, or CSS pixels when in screen space
  */
 export const LineWidth = trait(() => 5);
+/**
+ * Dot colors for line vertices, format [r, g, b, a, ...]
+ */
+export const DotColors = trait(() => new Uint8Array());
+/**
+ * Dot size for line vertices, in mm when in world units, or CSS pixels when in screen space
+ */
+export const DotSize = trait(() => 10);
 export const ReferenceFrame = trait(() => true);
+export const SelectToolInteractionLayer = trait(() => true);
 /**
  * This entity can be safetly removed from the scene by the user
  */

package/dist/geometry.js

@@ -58,3 +58,6 @@ export const createSphere = (sphere) => {
         r: sphere?.radiusMm ?? 0,
     };
 };
+export const isPointCloud = (geometry) => {
+    return geometry?.case === 'pointcloud';
+};

package/dist/hooks/useDrawAPI.svelte.js

@@ -6,7 +6,8 @@ import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { UuidTool } from 'uuid-tool';
 import { createBufferGeometry, updateBufferGeometry } from '../attribute';
-import { STRIDE } from '../buffer';
+import { ColorFormat } from '../buf/draw/v1/metadata_pb';
+import { asRGB, STRIDE } from '../buffer';
 import { traits, useWorld } from '../ecs';
 import { createBox, createCapsule, createSphere } from '../geometry';
 import { parsePlyInput } from '../ply';
@@ -15,6 +16,7 @@ import { useCameraControls } from './useControls.svelte';
 import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
 import { useLogs } from './useLogs.svelte';
 const colorUtil = new Color();
+const rgb = { r: 0, g: 0, b: 0 };
 const bufferTypes = {
     DRAW_POINTS: 0,
     DRAW_POSES: 1,
@@ -215,9 +217,9 @@ export const provideDrawAPI = () => {
         const nPoints = reader.read();
         const nColors = reader.read();
         const arrowHeadAtPose = reader.read();
-        const entities = [];
-        const entity = world.spawn(traits.Name(`Arrow group ${++poseIndex}`), traits.Positions(reader.readF32Array(nPoints * STRIDE.ARROWS)), traits.Colors(reader.readU8Array(nColors * STRIDE.COLORS_RGB)), traits.Arrows({ headAtPose: arrowHeadAtPose === 1 }), traits.DrawAPI, traits.Removable);
-        entities.push(entity);
+        const positions = reader.readF32Array(nPoints * STRIDE.ARROWS);
+        const rawColors = reader.readU8Array(nColors * STRIDE.COLORS_RGB);
+        world.spawn(traits.Name(`Arrow group ${++poseIndex}`), traits.Positions(positions), nColors === 1 ? traits.Color(asRGB(rawColors, rgb)) : traits.Colors(rawColors), traits.Arrows({ headAtPose: arrowHeadAtPose === 1 }), traits.DrawAPI, traits.Removable);
     };
     const drawPoints = async (reader) => {
         // Read label length
@@ -230,41 +232,66 @@ export const provideDrawAPI = () => {
         const nPoints = reader.readU32();
         const nColors = reader.readU32();
         // Read default color
-        let r = reader.read();
-        let g = reader.read();
-        let b = reader.read();
+        const r = reader.read();
+        const g = reader.read();
+        const b = reader.read();
+        // Normalize to uint8 immediately so the rest of the function works in a single color space.
+        const defaultColor = r > -1
+            ? new Uint8Array([Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)])
+            : undefined;
         const nPointsElements = nPoints * 3;
         const positions = reader.readF32Array(nPointsElements);
         const nColorsElements = nColors * 3;
         const rawColors = reader.readU8Array(nColorsElements);
-        let colors = null;
-        if (nColors > 1) {
-            colors = new Uint8Array(nPointsElements);
-            colors.set(rawColors);
-            // Cover the gap for any points not colored
-            for (let i = nColors; i < nPoints; i++) {
-                const offset = i * 3;
-                colors[offset] = Math.round(r * 255);
-                colors[offset + 1] = Math.round(g * 255);
-                colors[offset + 2] = Math.round(b * 255);
+        let vertexColors = undefined;
+        let uniformColor = undefined;
+        if (nColors > 1 && nColors >= nPoints) {
+            vertexColors = rawColors;
+        }
+        else if (nColors > 1) {
+            vertexColors = new Uint8Array(nPointsElements);
+            vertexColors.set(rawColors);
+            if (defaultColor) {
+                for (let i = nColors; i < nPoints; i++) {
+                    const offset = i * STRIDE.COLORS_RGB;
+                    vertexColors[offset] = defaultColor[0];
+                    vertexColors[offset + 1] = defaultColor[1];
+                    vertexColors[offset + 2] = defaultColor[2];
+                }
             }
         }
         else if (nColors === 1) {
-            r = rawColors[0] / 255;
-            g = rawColors[1] / 255;
-            b = rawColors[2] / 255;
+            uniformColor = new Uint8Array([rawColors[0], rawColors[1], rawColors[2]]);
+        }
+        else {
+            uniformColor = defaultColor;
         }
         const entities = world.query(traits.DrawAPI);
         const entity = entities.find((entity) => entity.get(traits.Name) === label);
         if (entity) {
             const geometry = entity.get(traits.BufferGeometry);
             if (geometry) {
-                updateBufferGeometry(geometry, positions, colors);
+                updateBufferGeometry(geometry, positions, {
+                    colors: vertexColors,
+                    colorFormat: ColorFormat.RGB,
+                });
                 return;
             }
         }
-        const geometry = createBufferGeometry(positions, colors);
-        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.BufferGeometry(geometry), traits.Points, traits.DrawAPI, traits.Removable);
+        const geometry = createBufferGeometry(positions, {
+            colors: vertexColors,
+            colorFormat: ColorFormat.RGB,
+        });
+        const spawnTraits = [
+            traits.Name(label),
+            traits.BufferGeometry(geometry),
+            traits.Points,
+            traits.DrawAPI,
+            traits.Removable,
+        ];
+        if (uniformColor)
+            spawnTraits.push(traits.Color(asRGB(uniformColor, rgb)));
+        world.spawn(...spawnTraits);
     };
     const drawLine = async (reader) => {
         // Read label length
@@ -292,7 +319,17 @@ export const provideDrawAPI = () => {
             points[i + 1] = reader.read();
             points[i + 2] = reader.read();
         }
-        world.spawn(traits.Name(label), traits.Color({ r, g, b }), traits.LinePositions(points), traits.PointColor({ r: dotR, g: dotG, b: dotB }), traits.DrawAPI, traits.Removable);
+        const lineColors = new Uint8Array([
+            Math.round(r * 255),
+            Math.round(g * 255),
+            Math.round(b * 255),
+        ]);
+        const dotColors = new Uint8Array([
+            Math.round(dotR * 255),
+            Math.round(dotG * 255),
+            Math.round(dotB * 255),
+        ]);
+        world.spawn(traits.Name(label), traits.Color(asRGB(lineColors, rgb)), traits.Opacity(1), traits.LinePositions(points), traits.DotColors(dotColors), traits.DrawAPI, traits.Removable);
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const drawGeometries = (geometries, colors, parent) => {

package/dist/hooks/useDrawService.svelte.d.ts

@@ -0,0 +1,12 @@
+declare const ConnectionStatus: {
+    readonly CONNECTED: "connected";
+    readonly DISCONNECTED: "disconnected";
+    readonly CONNECTING: "connecting";
+};
+type ConnectionStatusType = (typeof ConnectionStatus)[keyof typeof ConnectionStatus];
+interface Context {
+    connectionStatus: ConnectionStatusType;
+}
+export declare function provideDrawService(): void;
+export declare function useDrawService(): Context;
+export {};

package/dist/hooks/useDrawService.svelte.js

@@ -0,0 +1,240 @@
+import { FieldMask } from '@bufbuild/protobuf';
+import { createClient } from '@connectrpc/connect';
+import { createConnectTransport } from '@connectrpc/connect-web';
+import { useThrelte } from '@threlte/core';
+import {} from 'koota';
+import { getContext, setContext } from 'svelte';
+import { UuidTool } from 'uuid-tool';
+import { DrawService } from '../buf/draw/v1/service_connect';
+import { EntityChangeType, StreamEntityChangesResponse } from '../buf/draw/v1/service_pb';
+import { drawDrawing, drawTransform, updateDrawing, updateTransform, } from '../draw';
+import { traits, useWorld } from '../ecs';
+import { useCameraControls } from './useControls.svelte';
+import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
+const DRAW_SERVICE_KEY = Symbol('draw-service-context');
+const ConnectionStatus = {
+    CONNECTED: 'connected',
+    DISCONNECTED: 'disconnected',
+    CONNECTING: 'connecting',
+};
+export function provideDrawService() {
+    const { invalidate } = useThrelte();
+    const world = useWorld();
+    const cameraControls = useCameraControls();
+    const drawConnectionConfig = useDrawConnectionConfig();
+    let connectionStatus = $state(ConnectionStatus.DISCONNECTED);
+    const url = $derived(drawConnectionConfig.current?.backendIP
+        ? `http://${drawConnectionConfig.current.backendIP}:3030`
+        : undefined);
+    const transformEntities = new Map();
+    const drawingEntities = new Map();
+    let pendingEvents = [];
+    let flushScheduled = false;
+    const destroyTransform = (uuidStr) => {
+        const entity = transformEntities.get(uuidStr);
+        if (!entity)
+            return;
+        if (world.has(entity))
+            entity.destroy();
+        transformEntities.delete(uuidStr);
+    };
+    const destroyDrawing = (uuidStr) => {
+        const entities = drawingEntities.get(uuidStr);
+        if (!entities)
+            return;
+        for (const entity of entities) {
+            if (world.has(entity))
+                entity.destroy();
+        }
+        drawingEntities.delete(uuidStr);
+    };
+    const processEvent = (event) => {
+        const { changeType, entity, uuid } = event;
+        if (entity.case === 'transform') {
+            processTransformEvent(entity.value, changeType, uuid);
+        }
+        else if (entity.case === 'drawing') {
+            processDrawingEvent(entity.value, changeType, uuid);
+        }
+        invalidate();
+    };
+    const processTransformEvent = (transform, changeType, uuid) => {
+        if (changeType === EntityChangeType.ADDED) {
+            if (!transformEntities.has(uuid)) {
+                const spawned = drawTransform(world, transform, traits.DrawServiceAPI);
+                transformEntities.set(uuid, spawned);
+            }
+        }
+        else if (changeType === EntityChangeType.REMOVED) {
+            destroyTransform(uuid);
+        }
+        else if (changeType === EntityChangeType.UPDATED) {
+            const existing = transformEntities.get(uuid);
+            if (existing) {
+                updateTransform(existing, transform);
+            }
+            else {
+                const spawned = drawTransform(world, transform, traits.DrawServiceAPI);
+                transformEntities.set(uuid, spawned);
+            }
+        }
+    };
+    const processDrawingEvent = (drawing, changeType, uuid) => {
+        if (changeType === EntityChangeType.ADDED) {
+            if (!drawingEntities.has(uuid)) {
+                const spawned = drawDrawing(world, drawing, traits.DrawServiceAPI);
+                drawingEntities.set(uuid, spawned);
+            }
+        }
+        else if (changeType === EntityChangeType.REMOVED) {
+            destroyDrawing(uuid);
+        }
+        else if (changeType === EntityChangeType.UPDATED) {
+            const existing = drawingEntities.get(uuid);
+            if (existing) {
+                const next = updateDrawing(world, existing, drawing, traits.DrawServiceAPI);
+                drawingEntities.set(uuid, next);
+            }
+            else {
+                const spawned = drawDrawing(world, drawing, traits.DrawServiceAPI);
+                drawingEntities.set(uuid, spawned);
+            }
+        }
+    };
+    const applyEvents = (events) => {
+        const eventsByUUID = new Map();
+        for (const event of events) {
+            const existing = eventsByUUID.get(event.uuid);
+            if (!existing) {
+                eventsByUUID.set(event.uuid, event);
+                continue;
+            }
+            switch (event.changeType) {
+                case EntityChangeType.REMOVED: {
+                    eventsByUUID.set(event.uuid, event);
+                    break;
+                }
+                case EntityChangeType.ADDED: {
+                    if (existing.changeType !== EntityChangeType.REMOVED) {
+                        eventsByUUID.set(event.uuid, event);
+                    }
+                    break;
+                }
+                case EntityChangeType.UPDATED: {
+                    if (existing.changeType === EntityChangeType.ADDED) {
+                        existing.entity = event.entity;
+                    }
+                    else if (existing.changeType === EntityChangeType.UPDATED) {
+                        existing.updatedFields ??= new FieldMask();
+                        const paths = event.updatedFields?.paths ?? [];
+                        for (const path of paths) {
+                            if (!existing.updatedFields.paths.includes(path)) {
+                                existing.updatedFields.paths.push(path);
+                            }
+                        }
+                        existing.entity = event.entity;
+                    }
+                    else {
+                        eventsByUUID.set(event.uuid, event);
+                    }
+                    break;
+                }
+            }
+        }
+        for (const event of eventsByUUID.values()) {
+            processEvent(event);
+        }
+    };
+    const scheduleFlush = () => {
+        if (flushScheduled)
+            return;
+        flushScheduled = true;
+        requestAnimationFrame(() => {
+            flushScheduled = false;
+            const toApply = pendingEvents;
+            pendingEvents = [];
+            applyEvents(toApply);
+        });
+    };
+    const streamEntityChanges = async (client, signal) => {
+        try {
+            for await (const response of client.streamEntityChanges({}, { signal })) {
+                connectionStatus = ConnectionStatus.CONNECTED;
+                const { entity } = response;
+                if (!entity.case)
+                    continue;
+                const uuid = UuidTool.toString([...(entity.value.uuid ?? [])]);
+                pendingEvents.push({
+                    uuid,
+                    changeType: response.changeType,
+                    entity,
+                    updatedFields: response.updatedFields,
+                });
+                scheduleFlush();
+            }
+        }
+        catch (error) {
+            if (!signal.aborted) {
+                console.error('Draw service entity stream error:', error);
+                connectionStatus = ConnectionStatus.DISCONNECTED;
+            }
+        }
+    };
+    const streamSceneChanges = async (client, signal) => {
+        try {
+            for await (const response of client.streamSceneChanges({}, { signal })) {
+                const { sceneMetadata } = response;
+                if (!sceneMetadata)
+                    continue;
+                if (sceneMetadata.sceneCamera?.position && sceneMetadata.sceneCamera?.lookAt) {
+                    const { position, lookAt, animated } = sceneMetadata.sceneCamera;
+                    cameraControls.setPose({
+                        position: [position.x * 0.001, position.y * 0.001, position.z * 0.001],
+                        lookAt: [lookAt.x * 0.001, lookAt.y * 0.001, lookAt.z * 0.001],
+                    }, animated ?? false);
+                }
+            }
+        }
+        catch (error) {
+            if (!signal.aborted) {
+                console.error('Draw service scene stream error:', error);
+            }
+        }
+    };
+    $effect(() => {
+        if (!url) {
+            connectionStatus = ConnectionStatus.DISCONNECTED;
+            return;
+        }
+        const controller = new AbortController();
+        connectionStatus = ConnectionStatus.CONNECTING;
+        const transport = createConnectTransport({ baseUrl: url });
+        const client = createClient(DrawService, transport);
+        void streamEntityChanges(client, controller.signal);
+        void streamSceneChanges(client, controller.signal);
+        return () => {
+            controller.abort();
+            connectionStatus = ConnectionStatus.DISCONNECTED;
+            for (const entity of transformEntities.values()) {
+                if (world.has(entity))
+                    entity.destroy();
+            }
+            transformEntities.clear();
+            for (const entities of drawingEntities.values()) {
+                for (const entity of entities) {
+                    if (world.has(entity))
+                        entity.destroy();
+                }
+            }
+            drawingEntities.clear();
+        };
+    });
+    setContext(DRAW_SERVICE_KEY, {
+        get connectionStatus() {
+            return connectionStatus;
+        },
+    });
+}
+export function useDrawService() {
+    return getContext(DRAW_SERVICE_KEY);
+}

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -2,6 +2,7 @@ import { VisionClient } from '@viamrobotics/sdk';
 import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import { getContext, setContext, untrack } from 'svelte';
 import { createBufferGeometry, updateBufferGeometry } from '../attribute';
+import { ColorFormat } from '../buf/draw/v1/metadata_pb';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { traits, useWorld } from '../ecs';
 import { updateGeometryTrait } from '../ecs/traits';
@@ -129,14 +130,18 @@ export const providePointcloudObjects = (partID) => {
                                 return;
                             }
                             const existing = entities.get(pointcloudLabel);
+                            const metadata = {
+                                colors,
+                                colorFormat: ColorFormat.RGB,
+                            };
                             if (existing) {
                                 const geometry = existing.get(traits.BufferGeometry);
                                 if (geometry) {
-                                    updateBufferGeometry(geometry, positions, colors);
+                                    updateBufferGeometry(geometry, positions, metadata);
                                 }
                             }
                             else {
-                                const geometry = createBufferGeometry(positions, colors);
+                                const geometry = createBufferGeometry(positions, metadata);
                                 const entity = world.spawn(traits.Name(pointcloudLabel), traits.BufferGeometry(geometry), traits.Points);
                                 entities.set(pointcloudLabel, entity);
                             }

package/dist/hooks/usePointclouds.svelte.js

@@ -2,6 +2,7 @@ import { CameraClient } from '@viamrobotics/sdk';
 import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import { getContext, setContext, untrack } from 'svelte';
 import { createBufferGeometry, updateBufferGeometry } from '../attribute';
+import { ColorFormat } from '../buf/draw/v1/metadata_pb';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { traits, useWorld } from '../ecs';
 import { parsePcdInWorker } from '../loaders/pcd';
@@ -102,14 +103,18 @@ export const providePointclouds = (partID) => {
                         return;
                     }
                     const existing = entities.get(queryKey);
+                    const metadata = {
+                        colors,
+                        colorFormat: ColorFormat.RGB,
+                    };
                     if (existing) {
                         const geometry = existing.get(traits.BufferGeometry);
                         if (geometry) {
-                            updateBufferGeometry(geometry, positions, colors);
+                            updateBufferGeometry(geometry, positions, metadata);
                             return;
                         }
                     }
-                    const geometry = createBufferGeometry(positions, colors);
+                    const geometry = createBufferGeometry(positions, metadata);
                     const entity = world.spawn(traits.Parent(name), traits.Name(`${name} pointcloud`), traits.BufferGeometry(geometry), traits.Points);
                     entities.set(queryKey, entity);
                 })

package/dist/hooks/useSettings.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { ColorRepresentation } from 'three';
 export interface Settings {
     cameraMode: 'orthographic' | 'perspective';
     interactionMode: 'navigate' | 'measure' | 'select';
@@ -16,7 +17,7 @@ export interface Settings {
     gridSectionSize: number;
     gridFadeDistance: number;
     pointSize: number;
-    pointColor: string;
+    pointColor: ColorRepresentation;
     lineWidth: number;
     lineDotSize: number;
     enableMeasureAxisX: boolean;

package/dist/hooks/useSettings.svelte.js

@@ -25,7 +25,7 @@ const defaults = () => ({
     pointSize: 0.01,
     pointColor: '#333333',
     lineWidth: 0.005,
-    lineDotSize: 0.01,
+    lineDotSize: 0.005,
     interactionMode: 'navigate',
     enableMeasureAxisX: true,
     enableMeasureAxisY: true,

package/dist/hooks/useWorldState.svelte.js

@@ -1,17 +1,13 @@
 import { useThrelte } from '@threlte/core';
 import { TransformChangeType, WorldStateStoreClient, } from '@viamrobotics/sdk';
 import { createResourceClient, createResourceQuery, createResourceStream, useResourceNames, } from '@viamrobotics/svelte-sdk';
-import { Color } from 'three';
-import { createBufferGeometry } from '../attribute';
-import { asColor, asOpacity, isPerVertexColors, STRIDE } from '../buffer';
+import { drawTransform } from '../draw';
 import { traits, useWorld } from '../ecs';
 import { createBox, createCapsule, createSphere } from '../geometry';
-import { parsePcdInWorker } from '../loaders/pcd';
-import { parseMetadata } from '../metadata';
+import { isPointCloud } from '../geometry';
 import { parsePlyInput } from '../ply';
 import { createPose } from '../transform';
 import { usePartID } from './usePartID.svelte';
-const colorUtil = new Color();
 export const provideWorldStates = () => {
     const partID = usePartID();
     const resourceNames = useResourceNames(() => partID.current, 'world_state_store');
@@ -36,53 +32,10 @@ const createWorldState = (client) => {
         if (entities.has(transform.uuidString)) {
             return;
         }
-        const metadata = parseMetadata(transform.metadata?.fields);
-        const pose = createPose(transform.poseInObserverFrame?.pose);
-        const entityTraits = [];
-        const parent = transform.poseInObserverFrame?.referenceFrame;
-        if (parent && parent !== 'world') {
-            entityTraits.push(traits.Parent(parent));
-        }
-        if (transform.physicalObject) {
-            if (transform.physicalObject.geometryType.case === 'pointcloud') {
-                const metadataColors = metadata.colors;
-                parsePcdInWorker(new Uint8Array(transform.physicalObject.geometryType.value.pointCloud)).then((pointcloud) => {
-                    const entity = entities.get(transform.uuidString);
-                    if (!entity) {
-                        console.error('Entity not found to add pointcloud trait to', transform.uuidString);
-                        return;
-                    }
-                    const numPoints = pointcloud.positions.length / STRIDE.POSITIONS;
-                    const vertexColors = metadataColors && isPerVertexColors(metadataColors, numPoints)
-                        ? metadataColors
-                        : pointcloud.colors;
-                    const geometry = createBufferGeometry(pointcloud.positions, vertexColors);
-                    entity.add(traits.BufferGeometry(geometry));
-                    entity.add(traits.Points);
-                    if (metadataColors && !isPerVertexColors(metadataColors, numPoints)) {
-                        asColor(metadataColors, colorUtil);
-                        entity.add(traits.Color({ r: colorUtil.r, g: colorUtil.g, b: colorUtil.b }));
-                        if (metadataColors.length % STRIDE.COLORS_RGBA === 0) {
-                            entity.add(traits.Opacity(asOpacity(metadataColors)));
-                        }
-                    }
-                    invalidate();
-                });
-            }
-            else {
-                if (metadata.colors) {
-                    asColor(metadata.colors, colorUtil);
-                    entityTraits.push(traits.Color({ r: colorUtil.r, g: colorUtil.g, b: colorUtil.b }));
-                    if (metadata.colors.length % STRIDE.COLORS_RGBA === 0) {
-                        entityTraits.push(traits.Opacity(asOpacity(metadata.colors)));
-                    }
-                }
-                entityTraits.push(traits.Geometry(transform.physicalObject));
-            }
-        }
-        entityTraits.push(traits.Name(transform.referenceFrame), traits.Pose(pose), traits.ShowAxesHelper, traits.WorldStateStoreAPI);
-        const entity = world.spawn(...entityTraits);
+        const entity = drawTransform(world, transform, traits.WorldStateStoreAPI, { removable: false });
         entities.set(transform.uuidString, entity);
+        if (isPointCloud(transform.physicalObject?.geometryType))
+            invalidate();
     };
     const destroyEntity = (uuid) => {
         const entity = entities.get(uuid);

package/dist/index.d.ts

@@ -1,3 +1,11 @@
 export { default as MotionTools } from './components/App.svelte';
 export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';
+export * as relations from './ecs/relations';
+export * as traits from './ecs/traits';
+export * as selectionTraits from './components/Selection/traits';
+export { useSelectionPlugin as useSelection } from './components/Selection/useSelectionPlugin.svelte';
+export { default as FloatingPanel } from './components/overlay/FloatingPanel.svelte';
+export { provideWorld, useWorld } from './ecs/useWorld';
+export { useQuery } from './ecs/useQuery.svelte';
+export { useTrait } from './ecs/useTrait.svelte';

package/dist/index.js

@@ -2,3 +2,12 @@ export { default as MotionTools } from './components/App.svelte';
 // Plugins
 export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';
+// ECS
+export * as relations from './ecs/relations';
+export * as traits from './ecs/traits';
+export * as selectionTraits from './components/Selection/traits';
+export { useSelectionPlugin as useSelection } from './components/Selection/useSelectionPlugin.svelte';
+export { default as FloatingPanel } from './components/overlay/FloatingPanel.svelte';
+export { provideWorld, useWorld } from './ecs/useWorld';
+export { useQuery } from './ecs/useQuery.svelte';
+export { useTrait } from './ecs/useTrait.svelte';

package/dist/lib.d.ts

@@ -5,3 +5,5 @@ export { BatchedArrow } from './three/BatchedArrow';
 export { CapsuleGeometry } from './three/CapsuleGeometry';
 export { OrientationVector } from './three/OrientationVector';
 export { parsePcdInWorker } from './loaders/pcd';
+export { createBinaryPCD } from './pcd';
+export { metadataFromStruct } from './metadata';