@viamrobotics/motion-tools 1.16.0 → 1.18.1

package/dist/buffer.js

@@ -1,57 +1,61 @@
-/**
- * Zero-copy buffer utilities for converting protobuf bytes to Three.js typed arrays.
- *
- * Proto messages pack float32 data as `Uint8Array` (bytes fields). These utilities
- * provide efficient conversion to `Float32Array` for Three.js BufferAttributes.
- */
 import { Color } from 'three';
-/**
- * Stride constants for proto binary data formats.
- * Each value represents the number of float32 elements per item.
- */
+import { ColorFormat } from './buf/draw/v1/metadata_pb';
 export const STRIDE = {
-    /** Arrows: [x, y, z, ox, oy, oz] per arrow */
+    /** Arrows: [x, y, z, ox, oy, oz, ...] */
     ARROWS: 6,
-    /** Line/Points: [x, y, z] per point */
+    /** Line/Points: [x, y, z, ...] */
     POSITIONS: 3,
-    /** Nurbs control points: [x, y, z, ox, oy, oz, theta] per point */
+    /** Nurbs control points: [x, y, z, ox, oy, oz, theta, ...] */
     NURBS_CONTROL_POINTS: 7,
-    /** Nurbs knots/weights: single float per element */
+    /** Nurbs knots/weights: [w, ...] */
     NURBS_KNOTS: 1,
-    /** Colors: [r, g, b, a] per color (uint8) */
-    COLORS_RGBA: 4,
-    /** Colors: [r, g, b] */
+    /** Colors: [r, g, b, ...] */
     COLORS_RGB: 3,
 };
 /**
  * Creates a Float32Array view over a Uint8Array without copying data.
  * Falls back to a copy if the buffer is not 4-byte aligned (rare with protobuf).
  *
+ * An optional `transform` applies a per-element function during conversion.
+ *
  * @param bytes - The raw bytes from a protobuf bytes field
+ * @param transform - Optional function applied to every float element
  * @returns A Float32Array view or copy of the data
  *
  * @example
  * ```ts
  * const positions = asFloat32Array(line.positions)
- * geometry.setAttribute('position', new BufferAttribute(positions, 3))
+ * const meterPositions = asFloat32Array(line.positions, inMeters)
  * ```
  */
-export const asFloat32Array = (bytes) => {
+export const asFloat32Array = (bytes, transform) => {
     if (bytes.length === 0) {
         return new Float32Array(0);
     }
     if (bytes.byteOffset % 4 === 0 && bytes.byteLength % 4 === 0) {
-        return new Float32Array(bytes.buffer, bytes.byteOffset, bytes.byteLength / 4);
+        const view = new Float32Array(bytes.buffer, bytes.byteOffset, bytes.byteLength / 4);
+        if (transform) {
+            for (let i = 0; i < view.length; i++)
+                view[i] = transform(view[i]);
+        }
+        return view;
     }
     const aligned = new Float32Array(bytes.byteLength / 4);
-    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-    for (let i = 0; i < aligned.length; i++) {
-        aligned[i] = view.getFloat32(i * 4, true); // little-endian
+    const dataView = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    if (transform) {
+        for (let i = 0; i < aligned.length; i++) {
+            aligned[i] = transform(dataView.getFloat32(i * 4, true));
+        }
+    }
+    else {
+        for (let i = 0; i < aligned.length; i++) {
+            aligned[i] = dataView.getFloat32(i * 4, true);
+        }
     }
     return aligned;
 };
 /**
- * Sets a Three.js Color from 3 bytes of a uint8 color array starting at `offset`.
+ * Sets a Three.js Color from 3 bytes of a uint8 RGB color array starting at `offset`.
  * Mutates and returns `target` — pass a pre-allocated Color to avoid allocations
  * in hot paths.
  *
@@ -63,7 +67,7 @@ export const asFloat32Array = (bytes) => {
  * @example
  * ```ts
  * asColor(colors.current, material.color)
- * asColor(colors.current, pointColorUtil, stride) // read second color
+ * asColor(colors.current, pointColorUtil, STRIDE.COLORS_RGB) // read second color
  * ```
  */
 export const asColor = (bytes, target, offset = 0) => {
@@ -71,59 +75,89 @@ export const asColor = (bytes, target, offset = 0) => {
         return target.setRGB(0, 0, 0);
     return target.setRGB(bytes[offset] / 255, bytes[offset + 1] / 255, bytes[offset + 2] / 255);
 };
+export const asRGB = (bytes, target, offset = 0) => {
+    target.r = (bytes[offset] ?? 0) / 255;
+    target.g = (bytes[offset + 1] ?? 0) / 255;
+    target.b = (bytes[offset + 2] ?? 0) / 255;
+    return target;
+};
 /**
- * Creates a Uint8Array from a Three.js Color.
+ * Reads a byte from a uint8 opacities array at `index` and normalizes it to 0-1.
+ * Returns `fallback` when the array is absent or shorter than `index + 1`.
  *
- * @param color - The Three.js Color to convert
- * @returns A Uint8Array with the RGBA values
+ * @param opacities - Uint8Array of opacity values (0-255). Length 1 = uniform. Length N = per-vertex.
+ * @param fallback - Value to return when no opacity byte is available (default 1)
+ * @param index - Index into the opacities array (default 0)
+ * @returns Normalized opacity in 0-1 range, or the fallback value
  *
  * @example
  * ```ts
- * const color = fromColor(new Color(0, 1, 0))
+ * material.opacity = asOpacity(metadata.opacities)
  * ```
  */
-export const fromColor = (color) => {
-    return new Uint8Array([
-        Math.round(color.r * 255),
-        Math.round(color.g * 255),
-        Math.round(color.b * 255),
-    ]);
+export const asOpacity = (opacities, fallback = 1, index = 0) => {
+    if (!opacities || opacities.length === 0)
+        return fallback;
+    // If only one opacity byte, it is the uniform opacity regardless of index
+    const i = opacities.length === 1 ? 0 : index;
+    if (opacities.length <= i)
+        return fallback;
+    return opacities[i] / 255;
 };
 /**
- * Reads a byte from a uint8 color array at `offset` and normalizes it to 0-1.
- * Returns `fallback` when the array has fewer than `offset + 1` elements.
- *
- * @param bytes - ArrayLike of uint8 color values
- * @param fallback - Value to return when no alpha byte is present (default 1)
- * @param offset - Byte index to read from (default 3, the alpha channel of the first color)
- * @returns Normalized opacity in 0-1 range, or the fallback value
+ * Returns true when `colors` contains exactly one color (RGB or RGBA),
+ * as opposed to a per-vertex color array.
  *
  * @example
  * ```ts
- * material.opacity = asOpacity(colors.current)
- * material.opacity = asOpacity(colors.current, 1, stride + 3) // alpha of second color
+ * if (isSingleColor(colors)) {
+ *   material.color = asColor(colors, colorUtil)
+ * }
  * ```
  */
-export const asOpacity = (bytes, fallback = 1, offset = 3) => {
-    if (bytes.length < offset + 1)
-        return fallback;
-    return bytes[offset] / 255;
+export const isSingleColor = (colors) => {
+    if (!colors)
+        return false;
+    return colors.length === STRIDE.COLORS_RGB;
 };
 /**
- * Returns true when `colors` contains exactly one color entry per point (RGB or RGBA).
- * Use this to distinguish per-vertex color buffers from a single uniform color.
+ * Returns true when `colors` contains per-vertex color data rather than a
+ * single uniform color.
  *
- * @param colors - Uint8Array of packed color bytes
- * @param numVertex - Number of points/vertices the color buffer should cover
+ * @param colors - Uint8Array of packed RGB bytes (stride of 3)
  *
  * @example
  * ```ts
- * if (isPerVertexColors(colors, positions.length / STRIDE.POSITIONS)) {
+ * if (isVertexColors(colors, positions.length / 3)) {
  *   // treat as per-vertex
- * } else {
- *   addColorTraits(entityTraits, colors)
  * }
  * ```
  */
-export const isPerVertexColors = (colors, numVertex) => colors.length === numVertex * STRIDE.COLORS_RGB ||
-    colors.length === numVertex * STRIDE.COLORS_RGBA;
+export const isVertexColors = (colors) => {
+    if (!colors || colors.length === 0)
+        return false;
+    if (isSingleColor(colors))
+        return false;
+    return colors.length % STRIDE.COLORS_RGB === 0;
+};
+/**
+ * Per-element transform that converts a millimeter value to meters.
+ * Pass to {@link asFloat32Array} to fuse the conversion into a single pass.
+ *
+ * @example
+ * ```ts
+ * const positions = asFloat32Array(line.positions, inMeters)
+ * ```
+ */
+export const inMeters = (v) => v * 0.001;
+/** Returns the byte stride for a given color format. */
+export const colorStride = (format) => {
+    switch (format) {
+        case ColorFormat.RGB: {
+            return STRIDE.COLORS_RGB;
+        }
+        default: {
+            return 0;
+        }
+    }
+};

package/dist/color.d.ts

@@ -34,5 +34,4 @@ export declare const parseColor: (color: unknown, defaultColor?: ColorRepresenta
 export declare const isRGB: (color: unknown) => color is RGB;
 export declare const parseRGB: (color: unknown, defaultColor?: RGB) => Color;
 export declare const parseOpacity: (opacity: unknown, defaultOpacity?: number) => number;
-export declare const rgbaToHex: (rgba: Uint8Array) => string;
-export declare const rgbaBytesToFloat32: (bytes: Uint8Array<ArrayBuffer>) => Float32Array<ArrayBuffer>;
+export declare const rgbToHex: (rgb: Uint8Array) => string;

package/dist/color.js

@@ -141,18 +141,11 @@ const isColorHex = (color) => {
     }
     return false;
 };
-export const rgbaToHex = (rgba) => {
-    if (rgba.length < 3)
+export const rgbToHex = (rgb) => {
+    if (rgb.length < 3)
         return '#333333';
-    const r = rgba[0].toString(16).padStart(2, '0');
-    const g = rgba[1].toString(16).padStart(2, '0');
-    const b = rgba[2].toString(16).padStart(2, '0');
+    const r = rgb[0].toString(16).padStart(2, '0');
+    const g = rgb[1].toString(16).padStart(2, '0');
+    const b = rgb[2].toString(16).padStart(2, '0');
     return `#${r}${g}${b}`;
 };
-export const rgbaBytesToFloat32 = (bytes) => {
-    const out = new Float32Array(bytes.length);
-    for (let i = 0; i < bytes.length; i++) {
-        out[i] = bytes[i] / 255;
-    }
-    return out;
-};

package/dist/components/App.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Struct } from '@viamrobotics/sdk'
+	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
@@ -47,11 +48,24 @@
 	interface Props {
 		partID?: string
 		enableKeybindings?: boolean
-		children?: Snippet
-		dashboard?: Snippet
 		localConfigProps?: LocalConfigProps
 		drawConnectionConfig?: DrawConnectionConfig
 
+		/**
+		 * Snippet for THREE objects
+		 */
+		children?: Snippet
+
+		/**
+		 * Snippet to inject items in the top middle dashboard
+		 */
+		dashboard?: Snippet
+
+		/**
+		 * Snippet to inject items into the details panel
+		 */
+		details?: Snippet<[{ entity: Entity }]>
+
 		/**
 		 * Allows setting the initial camera pose
 		 */
@@ -66,6 +80,7 @@
 		drawConnectionConfig,
 		children: appChildren,
 		dashboard,
+		details,
 	}: Props = $props()
 
 	provideWorld()
@@ -121,7 +136,7 @@
 				<div {@attach domPortal(root)}>
 					<FileDrop />
 					<Dashboard {dashboard} />
-					<Details />
+					<Details {details} />
 
 					{#if environment.current.isStandalone}
 						<LiveUpdatesBanner />

package/dist/components/App.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Struct } from '@viamrobotics/sdk';
+import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
 import type { CameraPose } from '../hooks/useControls.svelte';
 import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
@@ -11,10 +12,22 @@ interface LocalConfigProps {
 interface Props {
     partID?: string;
     enableKeybindings?: boolean;
-    children?: Snippet;
-    dashboard?: Snippet;
     localConfigProps?: LocalConfigProps;
     drawConnectionConfig?: DrawConnectionConfig;
+    /**
+     * Snippet for THREE objects
+     */
+    children?: Snippet;
+    /**
+     * Snippet to inject items in the top middle dashboard
+     */
+    dashboard?: Snippet;
+    /**
+     * Snippet to inject items into the details panel
+     */
+    details?: Snippet<[{
+        entity: Entity;
+    }]>;
     /**
      * Allows setting the initial camera pose
      */

package/dist/components/Entities/Arrows/ArrowGroups.svelte

@@ -14,21 +14,20 @@
 
 	const map = new SvelteMap<Entity, InstancedArrows>()
 
+	const colorUtil = new Color()
+
 	const onAdd = (entity: Entity) => {
 		const poses = entity.get(traits.Positions)
+		const color = entity.get(traits.Color)
 		const colors = entity.get(traits.Colors)
 		const { headAtPose } = entity.get(traits.Arrows) ?? {}
 
 		if (!poses) return
 
 		const total = poses.length / STRIDE.ARROWS
-		const alpha = colors && colors.length / STRIDE.COLORS_RGBA === total
-		const uniformColor =
-			colors && (colors.length === 3 || colors.length === 4)
-				? new Color(colors[0], colors[1], colors[2])
-				: undefined
+		const uniformColor = color ? colorUtil.setRGB(color.r, color.g, color.b) : undefined
 
-		const arrows = new InstancedArrows({ count: total, alpha, uniformColor })
+		const arrows = new InstancedArrows({ count: total, uniformColor })
 		map.set(entity, arrows)
 		arrows.update({ poses, colors, headAtPose })
 	}

package/dist/components/Entities/Arrows/Arrows.svelte

@@ -6,6 +6,7 @@
 
 	import type { InstancedArrows } from '../../../three/InstancedArrows/InstancedArrows'
 
+	import AxesHelper from '../../AxesHelper.svelte'
 	import { useEntityEvents } from '../hooks/useEntityEvents.svelte'
 	import { traits, useTrait } from '../../../ecs'
 	import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte'
@@ -20,6 +21,7 @@
 
 	const parent = useTrait(() => entity, traits.Parent)
 	const invisible = useTrait(() => entity, traits.Invisible)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const events = useEntityEvents(() => entity)
 	const selectedEntity = useSelectedEntity()
@@ -53,5 +55,12 @@
 			bvh={{ enabled: false }}
 			raycast={() => null}
 		/>
+		{#if showAxesHelper.current}
+			<AxesHelper
+				name={entity}
+				width={3}
+				length={0.1}
+			/>
+		{/if}
 	</T>
 </Portal>

package/dist/components/Entities/Entities.svelte

@@ -27,13 +27,23 @@
 
 	/**
 	 * Geometries from the world state API are bucketed into their own query
-	 * to avoid thrashing other query results due to them being potentially polled at 60fps.
+	 * to avoid thrashing other query results due to them being streamed.
 	 */
 	const worldStateEntities = useQuery(
 		traits.WorldStateStoreAPI,
 		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
 	)
 
+	/**
+	 * Entities from the draw service API are bucketed into their own query
+	 * to avoid thrashing other query results due to them being streamed.
+	 */
+	const drawServiceEntities = useQuery(
+		traits.DrawServiceAPI,
+		Not(traits.Points, traits.LinePositions, traits.GLTF),
+		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
+	)
+
 	/**
 	 * All remaining meshes can be bucketed into a query due to lower frequency updates.
 	 */
@@ -41,6 +51,7 @@
 		Not(traits.FramesAPI),
 		Not(traits.GeometriesAPI),
 		Not(traits.WorldStateStoreAPI),
+		Not(traits.DrawServiceAPI),
 		Not(traits.Points),
 		Or(traits.Box, traits.Capsule, traits.Sphere, traits.BufferGeometry, traits.ReferenceFrame)
 	)
@@ -75,6 +86,12 @@
 	</Frame>
 {/each}
 
+{#each drawServiceEntities.current as entity (entity)}
+	<Frame {entity}>
+		<Label text={entity.get(traits.Name)} />
+	</Frame>
+{/each}
+
 {#each meshEntities.current as entity (entity)}
 	<Frame {entity}>
 		<Label text={entity.get(traits.Name)} />

package/dist/components/Entities/Frame.svelte

@@ -18,6 +18,7 @@ Renders a Viam Frame object
 	import { Portal, PortalTarget } from '@threlte/extras'
 	import { Group, type Object3D } from 'three'
 
+	import { asColor } from '../../buffer'
 	import { colors, resourceColors } from '../../color'
 	import { traits, useTrait } from '../../ecs'
 	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
@@ -39,6 +40,7 @@ Renders a Viam Frame object
 
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
+	const entityColors = useTrait(() => entity, traits.Colors)
 	const entityColor = useTrait(() => entity, traits.Color)
 	const entityPose = useTrait(() => entity, traits.Pose)
 	const center = useTrait(() => entity, traits.Center)
@@ -47,8 +49,12 @@ Renders a Viam Frame object
 	const events = useEntityEvents(() => entity)
 
 	const color = $derived.by(() => {
+		if (entityColors.current) {
+			return `#${asColor(entityColors.current, colorUtil).getHexString()}`
+		}
+
 		if (entityColor.current) {
-			return `#${colorUtil.set(entityColor.current.r, entityColor.current.g, entityColor.current.b).getHexString()}`
+			return `#${colorUtil.setRGB(entityColor.current.r, entityColor.current.g, entityColor.current.b).getHexString()}`
 		}
 
 		const subtype = resourceByName.current[name.current ?? '']?.subtype

package/dist/components/Entities/GLTF.svelte

@@ -22,6 +22,7 @@
 	import { traits, useTrait } from '../../ecs'
 	import { poseToObject3d } from '../../transform'
 
+	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
 
 	interface Props extends ThrelteProps<Object3D> {
@@ -39,6 +40,7 @@
 	const gltfTrait = useTrait(() => entity, traits.GLTF)
 	const scale = useTrait(() => entity, traits.Scale)
 	const invisible = useTrait(() => entity, traits.Invisible)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 	const events = useEntityEvents(() => entity)
 
 	const animationName = $derived(gltfTrait.current?.animationName)
@@ -65,7 +67,7 @@
 				const buffer = source.glb.buffer.slice(
 					source.glb.byteOffset,
 					source.glb.byteOffset + source.glb.byteLength
-				)
+				) as ArrayBuffer
 				$gltf = (await gltfLoader.parseAsync(buffer, '')) as ThrelteGltf
 			} else if ('gltf' in source) {
 				$gltf = source.gltf as ThrelteGltf
@@ -84,6 +86,13 @@
 
 <Portal id={parent.current}>
 	<T is={group}>
+		{#if showAxesHelper.current}
+			<AxesHelper
+				name={entity}
+				width={3}
+				length={0.1}
+			/>
+		{/if}
 		{#if $gltf}
 			<T
 				is={$gltf.scene as Object3D}
@@ -95,7 +104,9 @@
 			>
 				{@render children?.()}
 
-				<PortalTarget id={name.current} />
+				{#if name.current}
+					<PortalTarget id={name.current} />
+				{/if}
 			</T>
 		{/if}
 	</T>

package/dist/components/Entities/Line.svelte

@@ -1,9 +1,3 @@
-<script module>
-	import { Color } from 'three'
-
-	const colorUtil = new Color()
-</script>
-
 <script lang="ts">
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
@@ -12,10 +6,11 @@
 	import { meshBounds, Portal, PortalTarget } from '@threlte/extras'
 	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
 
-	import { darkenColor } from '../../color'
+	import { isVertexColors, STRIDE } from '../../buffer'
 	import { traits, useTrait } from '../../ecs'
 	import { poseToObject3d } from '../../transform'
 
+	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
 	import LineDots from './LineDots.svelte'
 	import LineGeometry from './LineGeometry.svelte'
@@ -32,16 +27,39 @@
 	const parent = useTrait(() => entity, traits.Parent)
 	const pose = useTrait(() => entity, traits.Pose)
 	const color = useTrait(() => entity, traits.Color)
-	const pointSize = useTrait(() => entity, traits.PointSize)
+	const colors = useTrait(() => entity, traits.Colors)
+	const dotColors = useTrait(() => entity, traits.DotColors)
+	const dotSize = useTrait(() => entity, traits.DotSize)
 	const linePositions = useTrait(() => entity, traits.LinePositions)
 	const lineWidth = useTrait(() => entity, traits.LineWidth)
-	const opacity = useTrait(() => entity, traits.Opacity)
 	const materialProps = useTrait(() => entity, traits.Material)
 	const renderOrder = useTrait(() => entity, traits.RenderOrder)
+	const opacity = useTrait(() => entity, traits.Opacity)
+	const screenSpace = useTrait(() => entity, traits.ScreenSpace)
 	const invisible = useTrait(() => entity, traits.Invisible)
+	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const events = useEntityEvents(() => entity)
 
+	const hasVertexColors = $derived(isVertexColors(colors.current))
+
+	const lineColor = $derived.by<[number, number, number]>(() => {
+		if (color.current) return [color.current.r, color.current.g, color.current.b]
+		return [0, 0, 1]
+	})
+
+	const lineColors = $derived.by<Float32Array | undefined>(() => {
+		if (!colors.current) return undefined
+		const numColors = colors.current.length / STRIDE.COLORS_RGB
+		const rgb = new Float32Array(numColors * 3)
+		for (let i = 0; i < numColors; i++) {
+			rgb[i * 3] = colors.current[i * STRIDE.COLORS_RGB]! / 255
+			rgb[i * 3 + 1] = colors.current[i * STRIDE.COLORS_RGB + 1]! / 255
+			rgb[i * 3 + 2] = colors.current[i * STRIDE.COLORS_RGB + 2]! / 255
+		}
+		return rgb
+	})
+
 	const currentOpacity = $derived(opacity.current ?? 0.7)
 
 	const mesh = new Line2()
@@ -64,26 +82,36 @@
 		visible={invisible.current !== true}
 		{...events}
 	>
-		<LineGeometry positions={linePositions.current} />
+		<LineGeometry
+			positions={linePositions.current}
+			colors={lineColors}
+		/>
 		<T
 			is={LineMaterial}
-			color={[color.current?.r ?? 1, color.current?.g ?? 0, color.current?.b ?? 0]}
+			color={hasVertexColors ? [1, 1, 1] : lineColor}
+			vertexColors={hasVertexColors}
 			transparent={currentOpacity < 1}
 			depthWrite={currentOpacity === 1}
 			opacity={currentOpacity}
-			width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
+			worldUnits={!screenSpace.current}
+			linewidth={(lineWidth.current ?? 5) * (screenSpace.current ? 1 : 0.001)}
 			depthTest={materialProps.current?.depthTest ?? true}
 		/>
+		{#if showAxesHelper.current}
+			<AxesHelper
+				name={entity}
+				width={3}
+				length={0.1}
+			/>
+		{/if}
 	</T>
 
-	{#if linePositions.current && pointSize.current}
+	{#if linePositions.current && dotSize.current}
 		<LineDots
-			color={darkenColor(
-				colorUtil.setRGB(color.current?.r ?? 1, color.current?.g ?? 0, color.current?.b ?? 0),
-				10
-			)}
+			colors={dotColors.current ?? new Uint8Array()}
+			opacity={currentOpacity}
 			positions={linePositions.current}
-			scale={pointSize.current * 0.001}
+			scale={dotSize.current * 0.001}
 		/>
 	{/if}