App 15608 enable joint position pasting

.changeset/smart-trees-jam.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/test-widgets': minor
+---
+
+feat: allow pasting for moveToPositions and moveToPose widgets"

package.json

@@ -84,7 +84,7 @@
 		"@types/node": "^25.6.0",
 		"@types/three": "^0.183.1",
 		"@viamrobotics/motion-tools": "^1.19.1",
-		"@viamrobotics/prime-core": "^0.1.21",
+		"@viamrobotics/prime-core": "^0.1.22",
 		"@viamrobotics/sdk": "^0.69.0",
 		"@viamrobotics/svelte-sdk": "^1.2.1",
 		"@viamrobotics/tailwind-config": "^1.0.0",

src/lib/components/copy-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Icon } from '@viamrobotics/prime-core'
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
 
 	interface Props {
 		data: string
@@ -25,13 +25,13 @@
 	}
 </script>
 
-<button
-	onclick={handleCopyClick}
-	aria-label={ariaLabel}
-	class="text-gray-6 hover:border-medium hover:bg-medium active:bg-gray-2 justify-items-end p-0.5"
->
-	<Icon
-		name={showCopySuccess ? 'check' : 'content-copy'}
-		size="xs"
+<Tooltip>
+	<IconButton
+		onclick={handleCopyClick}
+		aria-label={ariaLabel}
+		class="text-gray-6 hover:border-medium hover:bg-medium active:bg-gray-2 justify-items-end p-0.5"
+		icon={showCopySuccess ? 'check' : 'content-copy'}
+		label="Copy to clipboard"
 	/>
-</button>
+	<span slot="description">{ariaLabel}</span>
+</Tooltip>

src/lib/components/paste-button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
+
+	interface Props {
+		onPaste: (data: string) => boolean
+		ariaLabel?: string
+	}
+
+	const { onPaste, ariaLabel = 'Paste from clipboard' }: Props = $props()
+
+	let isPasteSuccessful = $state<boolean | null>(null)
+
+	const handlePasteClick = async (event: Event) => {
+		event.stopPropagation()
+		event.preventDefault()
+		const data = await globalThis.navigator.clipboard.readText()
+		isPasteSuccessful = onPaste(data)
+		setTimeout(() => {
+			isPasteSuccessful = null
+		}, 750)
+	}
+
+	const iconName = $derived(
+		// eslint-disable-next-line unicorn/no-nested-ternary
+		isPasteSuccessful === null ? 'content-paste' : isPasteSuccessful ? 'check' : 'close'
+	)
+</script>
+
+<Tooltip>
+	<IconButton
+		onclick={handlePasteClick}
+		aria-label={ariaLabel}
+		class="text-gray-6 hover:border-medium hover:bg-medium active:bg-gray-2 justify-items-end p-0.5"
+		icon={iconName}
+		label="Paste from clipboard"
+	/>
+	<span slot="description">{ariaLabel}</span>
+</Tooltip>

src/lib/components/widgets/arm/move-to-joint-positions.svelte

@@ -4,6 +4,7 @@
 	import AngleUnitToggle from '$lib/components/angle-unit-toggle.svelte'
 	import CopyButton from '$lib/components/copy-button.svelte'
 	import ErrorDisplay from '$lib/components/error.svelte'
+	import PasteButton from '$lib/components/paste-button.svelte'
 	import Table from '$lib/components/table.svelte'
 	import { numberValueFromEvent } from '$lib/event-handlers'
 	import { degreesToRadians, formatNumeric, radiansToDegrees } from '$lib/format'
@@ -37,6 +38,14 @@
 		desiredPositions[index] = useRadians ? radiansToDegrees(inputValue) : inputValue
 	}
 
+	const handlePaste = (data: string): boolean => {
+		try {
+			desiredPositions = JSON.parse(data) as number[]
+		} catch {
+			return false
+		}
+		return true
+	}
 	const degreesToDisplayAngle = (degrees: number) => {
 		return useRadians ? degreesToRadians(degrees) : degrees
 	}
@@ -89,6 +98,7 @@
 				}}
 			/>
 			<CopyButton data={copyData} />
+			<PasteButton onPaste={handlePaste} />
 		</div>
 	</div>
 

src/lib/components/widgets/arm/move-to-position.svelte

@@ -6,6 +6,7 @@
 	import AngleUnitToggle from '$lib/components/angle-unit-toggle.svelte'
 	import CopyButton from '$lib/components/copy-button.svelte'
 	import ErrorDisplay from '$lib/components/error.svelte'
+	import PasteButton from '$lib/components/paste-button.svelte'
 	import Table from '$lib/components/table.svelte'
 	import { numberValueFromEvent } from '$lib/event-handlers'
 	import { degreesToRadians, formatNumeric, radiansToDegrees } from '$lib/format'
@@ -48,9 +49,15 @@
 		theta: useRadians ? degreesToRadians(desiredPosition.theta) : desiredPosition.theta,
 	})
 
-	const copyData = $derived(
-		`{x: ${displayPosition.x}, y: ${displayPosition.y}, z: ${displayPosition.z}, o_x: ${displayPosition.oX}, o_y: ${displayPosition.oY}, o_z: ${displayPosition.oZ}, theta: ${displayPosition.theta}}`
-	)
+	const copyData = $derived(JSON.stringify(displayPosition))
+	const handlePaste = (data: string): boolean => {
+		try {
+			desiredPosition = JSON.parse(data) as Pose
+		} catch {
+			return false
+		}
+		return true
+	}
 
 	const handleAngleInputChange = (key: keyof Pose, inputValue: number) => {
 		if (key === 'theta') {
@@ -84,6 +91,7 @@
 				}}
 			/>
 			<CopyButton data={copyData} />
+			<PasteButton onPaste={handlePaste} />
 		</div>
 	</div>