@viamrobotics/motion-tools 1.9.1 → 1.11.0

package/dist/components/hover/LinkedHoveredEntity.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Parser } from 'expr-eval';
+export declare const parser: Parser;
+import type { Entity } from 'koota';
+interface Props {
+    linkedEntity: Entity;
+}
+declare const LinkedHoveredEntity: import("svelte").Component<Props, {}, "">;
+type LinkedHoveredEntity = ReturnType<typeof LinkedHoveredEntity>;
+export default LinkedHoveredEntity;

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/overlay/Details.svelte

@@ -25,9 +25,12 @@
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
-	import { traits, useTrait, useWorld } from '../../ecs'
+	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'
+	import { createPose } from '../../transform'
 
 	const { ...rest } = $props()
 
@@ -45,7 +48,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 +56,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)
 
@@ -119,6 +125,25 @@
 		}
 	})
 
+	$effect(() => {
+		if (entity) {
+			const worldPose = createPose({
+				x: worldPosition.x,
+				y: worldPosition.y,
+				z: worldPosition.z,
+				oX: worldOrientation.x,
+				oY: worldOrientation.y,
+				oZ: worldOrientation.z,
+				theta: MathUtils.radToDeg(worldOrientation.th),
+			})
+			if (entity.has(traits.WorldPose)) {
+				entity.set(traits.WorldPose, worldPose)
+			} else {
+				entity.add(traits.WorldPose(worldPose))
+			}
+		}
+	})
+
 	const getCopyClipboardText = () => {
 		return JSON.stringify(
 			{
@@ -611,6 +636,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 +681,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/overlay/{left-pane/RefreshRate.svelte → 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

@@ -3,25 +3,26 @@
 	import * as toggle from '@zag-js/toggle-group'
 
 	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
 	}
 
-	let { multiple, buttons, onclick }: Props = $props()
+	let { multiple = false, options, onSelect }: Props = $props()
 
 	const id = $props.id()
 	const service = useMachine(toggle.machine, () => ({
 		id,
-		value: buttons.filter((button) => button.on).map((button) => button.value),
+		value: options
+			.filter((option) => option.selected)
+			.map((button) => button.value ?? button.label),
 		multiple,
 		onValueChange(details) {
-			onclick(details.value)
+			onSelect(details.value)
 		},
 	}))
 	const api = $derived(toggle.connect(service, normalizeProps))
@@ -31,29 +32,24 @@
 	class="flex items-center"
 	{...api.getRootProps()}
 >
-	{#each buttons as button (button.value)}
+	{#each options as option (option.label)}
+		{@const value = option.value ?? option.label}
+
 		<button
-			class="-ml-px flex h-5 w-5 items-center justify-center border text-xs"
-			{...api.getItemProps({ value: button.value })}
+			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 })}
 		>
-			{button.label ?? button.value}
+			{value}
 		</button>
 	{/each}
 </div>
 
 <style>
-	button[data-state='on'] {
-		background: green;
-		border-color: black;
-		color: white;
-	}
-
-	button[data-disabled] {
-		opacity: 0.5;
-
-		filter: grayscale(100%);
-	}
-
 	button[data-focus] {
 		outline: none;
 	}

package/dist/components/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/overlay/left-pane/TreeContainer.svelte

@@ -3,9 +3,7 @@
 	import Tree from './Tree.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'
@@ -86,6 +84,4 @@
 	{/if}
 
 	<Logs />
-	<Settings />
-	<Widgets />
 </div>