@viamrobotics/motion-tools 1.9.0 → 1.10.0

package/dist/components/overlay/AddRelationship.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { Entity } from 'koota'
+	import { Button, Select, Input } from '@viamrobotics/prime-core'
+	import { traits, useQuery, relations, useTrait } from '../../ecs'
+	import { SubEntityLinkType } from '../../ecs/relations'
+
+	interface Props {
+		entity: Entity | undefined
+	}
+
+	const { entity }: Props = $props()
+
+	const allEntities = useQuery(traits.Name)
+	const name = useTrait(() => entity, traits.Name)
+	const entityNames = $derived.by(() => {
+		const currentEntityName = name.current
+		return allEntities.current
+			.map((e: Entity) => e.get(traits.Name))
+			.filter((n: string | undefined): n is string => n !== undefined && n !== currentEntityName)
+			.sort()
+	})
+
+	let showRelationshipOptions = $state(false)
+	let selectedRelationshipType = $state<string>('')
+	let selectedRelationshipEntity = $state<string>('')
+	let relationshipFormula = $state('index')
+
+	const linkType = $derived.by(() => {
+		return selectedRelationshipType === SubEntityLinkType.HoverLink
+			? SubEntityLinkType.HoverLink
+			: null
+	})
+
+	function resetForm() {
+		selectedRelationshipType = ''
+		selectedRelationshipEntity = ''
+		relationshipFormula = 'index'
+	}
+
+	function handleAdd() {
+		if (!entity || !relationshipFormula.includes('index')) return
+		const selectedEntity = allEntities.current.find(
+			(e: Entity) => e.get(traits.Name) === selectedRelationshipEntity
+		)
+		if (selectedEntity) {
+			entity.add(
+				relations.SubEntityLink(selectedEntity, {
+					indexMapping: relationshipFormula,
+					type: linkType,
+				})
+			)
+		}
+		showRelationshipOptions = false
+		resetForm()
+	}
+</script>
+
+<Button
+	class="mt-2 w-full"
+	icon={showRelationshipOptions ? undefined : 'plus'}
+	variant={showRelationshipOptions ? 'dark' : 'primary'}
+	onclick={() => {
+		if (showRelationshipOptions) {
+			resetForm()
+		}
+		showRelationshipOptions = !showRelationshipOptions
+	}}>{showRelationshipOptions ? 'Cancel' : 'Add Relationship'}</Button
+>
+
+{#if showRelationshipOptions}
+	<div class="mt-2 flex flex-col gap-2">
+		<div>
+			<label
+				for="relationship-type-select"
+				class="text-subtle-2 mb-1 block text-xs">Relationship type</label
+			>
+			<Select
+				id="relationship-type-select"
+				aria-label="Select relationship type"
+				value={selectedRelationshipType}
+				onchange={(event: InputEvent) => {
+					selectedRelationshipType = (event.target as HTMLSelectElement).value as 'HoverLink'
+				}}
+			>
+				<option value="">Select a relationship type...</option>
+				<option value="HoverLink">HoverLink</option>
+			</Select>
+		</div>
+		<div>
+			<label
+				for="relationship-entity-select"
+				class="text-subtle-2 mb-1 block text-xs">Entity</label
+			>
+			<Select
+				id="relationship-entity-select"
+				aria-label="Select entity for relationship"
+				value={selectedRelationshipEntity}
+				onchange={(event: InputEvent) => {
+					selectedRelationshipEntity = (event.target as HTMLSelectElement).value
+				}}
+			>
+				<option value="">Select an entity...</option>
+				{#each entityNames as entityName (entityName)}
+					<option value={entityName}>{entityName}</option>
+				{/each}
+			</Select>
+		</div>
+		<div>
+			<label
+				for="relationship-formula-input"
+				class="text-subtle-2 mb-1 block text-xs">Index mapping</label
+			>
+			<Input
+				on:keydown={(e) => e.stopPropagation()}
+				id="relationship-formula-input"
+				aria-label="Math formula for index mapping"
+				bind:value={relationshipFormula}
+				placeholder="index"
+			/>
+		</div>
+		<div>
+			<Button
+				class="w-full"
+				variant="primary"
+				onclick={handleAdd}
+			>
+				Add
+			</Button>
+		</div>
+	</div>
+{/if}

package/dist/components/overlay/AddRelationship.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Entity } from 'koota';
+interface Props {
+    entity: Entity | undefined;
+}
+declare const AddRelationship: import("svelte").Component<Props, {}, "">;
+type AddRelationship = ReturnType<typeof AddRelationship>;
+export default AddRelationship;

package/dist/components/{Details.svelte → overlay/Details.svelte}

@@ -2,7 +2,7 @@
 	module
 	lang="ts"
 >
-	import { OrientationVector } from '../three/OrientationVector'
+	import { OrientationVector } from '../../three/OrientationVector'
 	import { Quaternion, Vector3, MathUtils, BufferAttribute } from 'three'
 
 	const vec3 = new Vector3()
@@ -20,14 +20,16 @@
 		useFocusedEntity,
 		useFocusedObject3d,
 		useSelectedObject3d,
-	} from '../hooks/useSelection.svelte'
-	import { useFrames } from '../hooks/useFrames.svelte'
-	import { usePartConfig } from '../hooks/usePartConfig.svelte'
-	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
-	import { useEnvironment } from '../hooks/useEnvironment.svelte'
-	import { traits, useTrait, useWorld } from '../ecs'
-	import { useResourceByName } from '../hooks/useResourceByName.svelte'
-	import { useCameraControls } from '../hooks/useControls.svelte'
+	} from '../../hooks/useSelection.svelte'
+	import { useFrames } from '../../hooks/useFrames.svelte'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
+	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+	import { traits, useTrait, useWorld, relations } from '../../ecs'
+	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
+	import { useCameraControls } from '../../hooks/useControls.svelte'
+	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
+	import AddRelationship from './AddRelationship.svelte'
 
 	const { ...rest } = $props()
 
@@ -45,7 +47,7 @@
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
 	const worldPosition = $state({ x: 0, y: 0, z: 0 })
 	const worldOrientation = $state({ x: 0, y: 0, z: 1, th: 0 })
-
+	const linkedEntities = useLinkedEntities()
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
 	const localPose = useTrait(() => entity, traits.EditedPose)
@@ -53,11 +55,14 @@
 	const sphere = useTrait(() => entity, traits.Sphere)
 	const capsule = useTrait(() => entity, traits.Capsule)
 	const removable = useTrait(() => entity, traits.Removable)
+	const points = useTrait(() => entity, traits.Points)
+	const arrows = useTrait(() => entity, traits.Arrows)
 
 	const framesAPI = useTrait(() => entity, traits.FramesAPI)
 	const isFrameNode = $derived(!!framesAPI.current)
 
 	const showEditFrameOptions = $derived(isFrameNode && partConfig.hasEditPermissions)
+	const showRelationshipOptions = $derived(points.current || arrows.current)
 
 	const resourceName = $derived(name.current ? resourceByName.current[name.current] : undefined)
 
@@ -232,7 +237,7 @@
 
 	<div
 		id="details-panel"
-		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 {showEditFrameOptions
+		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 {showEditFrameOptions
 			? 'w-80'
 			: 'w-60'} border p-2 text-xs"
 		use:draggable={{
@@ -611,6 +616,30 @@
 			{/if}
 		</div>
 
+		<h3 class="text-subtle-2 pt-3 pb-2">Relationships</h3>
+
+		{#if linkedEntities.current.length > 0}
+			<div>
+				<div class="mt-0.5 flex flex-col gap-1">
+					<strong class="font-semibold">Linked entities</strong>
+					{#each linkedEntities.current as linkedEntity (linkedEntity)}
+						{@const linkedEntityName = linkedEntity.get(traits.Name)}
+						{@const linkType = entity.get(relations.SubEntityLink(linkedEntity))?.type}
+						<div class="flex items-center gap-1">
+							<span class="text-primary">{linkedEntityName} ({linkType})</span>
+							<Icon
+								name="trash-can-outline"
+								class="h-6 cursor-pointer px-2 py-1 text-xs text-red-500"
+								onclick={() => {
+									entity.remove(relations.SubEntityLink(linkedEntity))
+								}}
+							/>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
 		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
 
 		{#if focusedEntity.current}
@@ -632,6 +661,10 @@
 			</Button>
 		{/if}
 
+		{#if showRelationshipOptions}
+			<AddRelationship {entity} />
+		{/if}
+
 		{#if showEditFrameOptions && environment.current.isStandalone}
 			<Button
 				variant="danger"

package/dist/components/overlay/FloatingPanel.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+	import { Icon } from '@viamrobotics/prime-core'
+
+	import * as floatingPanel from '@zag-js/floating-panel'
+	import { normalizeProps, useMachine } from '@zag-js/svelte'
+
+	interface Props {
+		title?: string
+		defaultSize?: { width: number; height: number }
+		isOpen?: boolean
+		children: Snippet
+	}
+
+	let {
+		title = '',
+		defaultSize = { width: 700, height: 500 },
+		isOpen = $bindable(false),
+		children,
+	}: Props = $props()
+
+	const id = $props.id()
+	const floatingPanelService = useMachine(floatingPanel.machine, () => ({
+		id,
+		defaultSize,
+		resizable: false,
+		allowOverflow: false,
+		open: isOpen,
+	}))
+
+	const api = $derived(floatingPanel.connect(floatingPanelService, normalizeProps))
+</script>
+
+<div
+	{...api.getPositionerProps()}
+	class="z-5"
+>
+	<div
+		{...api.getContentProps()}
+		class="border-medium border-1 bg-white"
+	>
+		<div
+			{...api.getDragTriggerProps()}
+			class="sticky"
+		>
+			<div
+				{...api.getHeaderProps()}
+				class="border-medium flex justify-between border-b p-2"
+			>
+				<p
+					{...api.getTitleProps()}
+					class="text-gray-7 text-xs"
+				>
+					{title}
+				</p>
+
+				<div
+					{...api.getControlProps()}
+					class="flex gap-3"
+				>
+					<button
+						aria-label="Close connection configs panel"
+						onclick={() => (isOpen = false)}
+					>
+						<Icon name="close" />
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<div
+			{...api.getBodyProps()}
+			class="relative h-[calc(100%-33px)]"
+		>
+			{@render children()}
+		</div>
+	</div>
+</div>

package/dist/components/overlay/FloatingPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    isOpen?: boolean;
+    children: Snippet;
+}
+declare const FloatingPanel: import("svelte").Component<Props, {}, "isOpen">;
+type FloatingPanel = ReturnType<typeof FloatingPanel>;
+export default FloatingPanel;

package/dist/components/{LiveUpdatesBanner.svelte → overlay/LiveUpdatesBanner.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, Icon } from '@viamrobotics/prime-core'
-	import { usePartConfig } from '../hooks/usePartConfig.svelte'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 
 	const partConfig = usePartConfig()
 
@@ -25,7 +25,7 @@
 
 {#if partConfig.isDirty}
 	<div
-		class="absolute bottom-8 z-10 flex w-full justify-center gap-2"
+		class="absolute bottom-8 z-4 flex w-full justify-center gap-2"
 		{...rest}
 	>
 		<div

package/dist/components/{RefreshRate.svelte → overlay/RefreshRate.svelte}

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 	import { Select, IconButton } from '@viamrobotics/prime-core'
-	import { useMachineSettings } from '../hooks/useMachineSettings.svelte'
+	import { useMachineSettings } from '../../hooks/useMachineSettings.svelte'
 	import type { Snippet } from 'svelte'
 
 	interface Props {

package/dist/components/overlay/ToggleGroup.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte'
+	import * as toggle from '@zag-js/toggle-group'
+
+	interface Props {
+		multiple?: boolean
+		options: {
+			selected?: boolean
+			label: string
+			value?: string
+		}[]
+		onSelect: (details: string[]) => void
+	}
+
+	let { multiple = false, options, onSelect }: Props = $props()
+
+	const id = $props.id()
+	const service = useMachine(toggle.machine, () => ({
+		id,
+		value: options
+			.filter((option) => option.selected)
+			.map((button) => button.value ?? button.label),
+		multiple,
+		onValueChange(details) {
+			onSelect(details.value)
+		},
+	}))
+	const api = $derived(toggle.connect(service, normalizeProps))
+</script>
+
+<div
+	class="flex items-center"
+	{...api.getRootProps()}
+>
+	{#each options as option (option.label)}
+		{@const value = option.value ?? option.label}
+
+		<button
+			class={[
+				'border-gray-8 -ml-px flex items-center justify-center border px-2 py-0.5 text-xs',
+				{
+					'bg-green-700 text-white': api.value.includes(value),
+				},
+			]}
+			{...api.getItemProps({ value })}
+		>
+			{value}
+		</button>
+	{/each}
+</div>
+
+<style>
+	button[data-focus] {
+		outline: none;
+	}
+</style>

package/dist/components/{Overlay → overlay}/ToggleGroup.svelte.d.ts

@@ -1,12 +1,11 @@
 interface Props {
-    multiple: boolean;
-    buttons: {
-        on?: boolean;
-        disabled?: boolean;
-        label?: string;
-        value: string;
+    multiple?: boolean;
+    options: {
+        selected?: boolean;
+        label: string;
+        value?: string;
     }[];
-    onclick: (details: string[]) => void;
+    onSelect: (details: string[]) => void;
 }
 declare const ToggleGroup: import("svelte").Component<Props, {}, "">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;

package/dist/components/{__tests__ → overlay/__tests__}/__fixtures__/entity.js

@@ -1,4 +1,4 @@
-import { traits } from '../../../ecs';
+import { traits } from '../../../../ecs';
 export const createEntityFixture = (world) => {
     return world.spawn(traits.Parent('parent_frame'), traits.Name('Test Object'), traits.Pose({
         x: 10,

package/dist/components/{dashboard → overlay/dashboard}/Button.svelte

@@ -33,7 +33,7 @@
 		class={[
 			className,
 			'relative block border',
-			active ? 'border-gray-5 text-gray-8 z-10 bg-white' : 'bg-light border-medium text-disabled',
+			active ? 'border-gray-5 text-gray-8 z-4 bg-white' : 'bg-light border-medium text-disabled',
 		]}
 		aria-describedby={tooltipID}
 	>

package/dist/components/{dashboard → overlay/dashboard}/Dashboard.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
 	import { PortalTarget } from '@threlte/extras'
 	import Button from './Button.svelte'
 
@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="absolute top-2 z-10 flex w-full justify-center gap-2"
+	class="absolute top-2 z-4 flex w-full justify-center gap-2"
 	{...rest}
 >
 	<!-- camera view -->

package/dist/components/{Tree → overlay/left-pane}/AddFrames.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { IconButton } from '@viamrobotics/prime-core'
 	import Drawer from './Drawer.svelte'
-	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
-	import { useFramelessComponents } from '../../hooks/useFramelessComponents.svelte'
+	import { usePartConfig } from '../../../hooks/usePartConfig.svelte'
+	import { useFramelessComponents } from '../../../hooks/useFramelessComponents.svelte'
 
 	const framelessComponents = useFramelessComponents()
 	const partConfig = usePartConfig()

package/dist/components/{Tree → overlay/left-pane}/Logs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useLogs } from '../../hooks/useLogs.svelte'
+	import { useLogs } from '../../../hooks/useLogs.svelte'
 	import Drawer from './Drawer.svelte'
 
 	const logs = useLogs()

package/dist/components/{Tree → overlay/left-pane}/Tree.svelte

@@ -2,12 +2,12 @@
 	import * as tree from '@zag-js/tree-view'
 	import { useMachine, normalizeProps } from '@zag-js/svelte'
 	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
-	import { useVisibility } from '../../hooks/useVisibility.svelte'
+	import { useVisibility } from '../../../hooks/useVisibility.svelte'
 	import type { TreeNode } from './buildTree'
 	import { VirtualList } from 'svelte-virtuallists'
 	import { Icon } from '@viamrobotics/prime-core'
-	import { traits } from '../../ecs'
-	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { traits } from '../../../ecs'
+	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { SvelteSet } from 'svelte/reactivity'
 
 	const selected = useSelectedEntity()

package/dist/components/{Tree → overlay/left-pane}/TreeContainer.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
 	import Tree from './Tree.svelte'
-	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
-	import Settings from './Settings.svelte'
 	import Logs from './Logs.svelte'
 	import Widgets from './Widgets.svelte'
 	import AddFrames from './AddFrames.svelte'
-	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
-	import { useFrames } from '../../hooks/useFrames.svelte'
-	import { traits, useQuery, useWorld } from '../../ecs'
+	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { usePartConfig } from '../../../hooks/usePartConfig.svelte'
+	import { useFrames } from '../../../hooks/useFrames.svelte'
+	import { traits, useQuery, useWorld } from '../../../ecs'
 	import { IsExcluded, type Entity } from 'koota'
 	import { buildTreeNodes, type TreeNode } from './buildTree'
-	import { MIN_DIMENSIONS, useResizable } from '../../hooks/useResizable.svelte'
+	import { MIN_DIMENSIONS, useResizable } from '../../../hooks/useResizable.svelte'
 
 	const { ...rest } = $props()
 
@@ -59,7 +58,7 @@
 
 <div
 	bind:this={container}
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 resize overflow-y-auto border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 resize overflow-y-auto border text-xs"
 	style:min-width="{MIN_DIMENSIONS.width}px"
 	style:min-height="{MIN_DIMENSIONS.height}px"
 	style:width={resizable.current ? `${resizable.current.width}px` : undefined}
@@ -86,6 +85,5 @@
 	{/if}
 
 	<Logs />
-	<Settings />
 	<Widgets />
 </div>

package/dist/components/{Tree → overlay/left-pane}/Widgets.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Switch } from '@viamrobotics/prime-core'
 	import Drawer from './Drawer.svelte'
-	import { useSettings } from '../../hooks/useSettings.svelte'
-	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { useResourceByName } from '../../../hooks/useResourceByName.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
 
 	const settings = useSettings()
 	const resourceByName = useResourceByName()

package/dist/components/{Tree → overlay/left-pane}/buildTree.js

@@ -1,4 +1,4 @@
-import { traits } from '../../ecs';
+import { traits } from '../../../ecs';
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */