@viamrobotics/motion-tools 0.19.1 → 1.0.2

package/dist/components/Tree/Tree.svelte

@@ -9,6 +9,7 @@
 	import { VirtualList } from 'svelte-virtuallists'
 	import { observe } from '@threlte/core'
 	import { Icon } from '@viamrobotics/prime-core'
+	import { traits } from '../../ecs'
 
 	const visibility = useVisibility()
 	const expanded = useExpanded()
@@ -16,21 +17,26 @@
 	interface Props {
 		rootNode: TreeNode
 		selections: string[]
+		dragElement?: HTMLElement
 		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
-		onDragStart?: (event: MouseEvent) => void
-		onDragEnd?: (event: MouseEvent) => void
 	}
 
-	let { rootNode, selections, onSelectionChange, onDragStart, onDragEnd }: Props = $props()
+	let { rootNode, selections, onSelectionChange, dragElement = $bindable() }: Props = $props()
 
-	const collection = tree.collection<TreeNode>({
-		nodeToValue: (node) => node.id,
-		nodeToString: (node) => node.name,
-		rootNode,
-	})
+	const collection = $derived(
+		tree.collection<TreeNode>({
+			nodeToValue: (node) => `${node.entity}`,
+			nodeToString: (node) => node.entity.get(traits.Name) ?? '',
+			rootNode,
+		})
+	)
 
+	const id = $props.id()
 	const service = useMachine(tree.machine, {
-		collection,
+		id,
+		get collection() {
+			return collection
+		},
 		onSelectionChange(details) {
 			onSelectionChange?.(details)
 		},
@@ -46,7 +52,10 @@
 
 	observe(
 		() => [selections],
-		() => untrack(() => api.setSelectedValue(selections))
+		() =>
+			untrack(() => {
+				api.setSelectedValue(selections)
+			})
 	)
 
 	observe(
@@ -68,7 +77,7 @@
 })}
 	{@const nodeProps = { indexPath, node }}
 	{@const nodeState = api.getNodeState(nodeProps)}
-	{@const isVisible = visibility.get(node.id) ?? true}
+	{@const isVisible = visibility.get(node.entity) ?? true}
 	{@const { selected } = nodeState}
 
 	{#if nodeState.isBranch}
@@ -93,14 +102,14 @@
 					class="flex items-center"
 					{...api.getBranchTextProps(nodeProps)}
 				>
-					{node.name}
+					{node.entity.get(traits.Name)}
 				</span>
 
 				<button
 					class="text-gray-6"
 					onclick={(event) => {
 						event.stopPropagation()
-						visibility.set(node.id, !isVisible)
+						visibility.set(node.entity, !isVisible)
 					}}
 				>
 					{#if isVisible}
@@ -113,7 +122,7 @@
 			<div {...api.getBranchContentProps(nodeProps)}>
 				<div {...api.getBranchIndentGuideProps(nodeProps)}></div>
 
-				{#each children as node, index (node.id)}
+				{#each children as node, index (node.entity)}
 					{@render treeNode({ node, indexPath: [...indexPath, index], api })}
 				{/each}
 			</div>
@@ -124,14 +133,14 @@
 			{...api.getItemProps(nodeProps)}
 		>
 			<span class="flex items-center gap-1.5">
-				{node.name}
+				{node.entity.get(traits.Name)}
 			</span>
 
 			<button
 				class="text-gray-6"
 				onclick={(event) => {
 					event.stopPropagation()
-					visibility.set(node.id, !isVisible)
+					visibility.set(node.entity, !isVisible)
 				}}
 			>
 				{#if isVisible}
@@ -147,13 +156,10 @@
 <div class="root-node">
 	<div {...api.getRootProps() as object}>
 		<div class="border-medium flex items-center gap-1 border-b p-2">
-			<button
-				onmousedown={onDragStart}
-				onmouseup={onDragEnd}
-			>
+			<button bind:this={dragElement}>
 				<Icon name="drag" />
 			</button>
-			<h3 {...api.getLabelProps() as object}>{rootNode.name}</h3>
+			<h3 {...api.getLabelProps() as object}>{rootNode.entity.get(traits.Name)}</h3>
 		</div>
 
 		<div {...api.getTreeProps()}>
@@ -174,7 +180,7 @@
 					style="height:{Math.min(8, Math.max(rootChildren.length, 5)) * 32}px;"
 					class="overflow-auto"
 				>
-					{#each rootChildren as node, index (node.id)}
+					{#each rootChildren as node, index (node.entity)}
 						{@render treeNode({ node, indexPath: [Number(index)], api })}
 					{/each}
 				</div>

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

@@ -3,10 +3,9 @@ import type { TreeNode } from './buildTree';
 interface Props {
     rootNode: TreeNode;
     selections: string[];
+    dragElement?: HTMLElement;
     onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
-    onDragStart?: (event: MouseEvent) => void;
-    onDragEnd?: (event: MouseEvent) => void;
 }
-declare const Tree: import("svelte").Component<Props, {}, "">;
+declare const Tree: import("svelte").Component<Props, {}, "dragElement">;
 type Tree = ReturnType<typeof Tree>;
 export default Tree;

package/dist/components/Tree/TreeContainer.svelte

@@ -1,74 +1,106 @@
 <script lang="ts">
+	import type { Vector2Like } from 'three'
+	import { draggable } from '@neodrag/svelte'
 	import Tree from './Tree.svelte'
-
-	import { buildTreeNodes, type TreeNode } from './buildTree'
-	import { useSelected } from '../../hooks/useSelection.svelte'
+	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
-	import { isEqual } from 'lodash-es'
-	import { useObjects } from '../../hooks/useObjects.svelte'
 	import Settings from './Settings.svelte'
 	import Logs from './Logs.svelte'
-	import { useDraggable } from '../../hooks/useDraggable.svelte'
-	import { useWorldStates } from '../../hooks/useWorldState.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 WeblabActive from '../weblab/WeblabActive.svelte'
-	import { WEBLABS_EXPERIMENTS } from '../../hooks/useWeblabs.svelte'
+	import { traits, useWorld } from '../../ecs'
+	import { IsExcluded, type Entity } from 'koota'
+	import { buildTreeNodes, type TreeNode } from './buildTree'
+	import { MIN_DIMENSIONS, useResizable } from '../../hooks/useResizable.svelte'
+	import { PersistedState } from 'runed'
+
 	const { ...rest } = $props()
 
+	const dragPosition = new PersistedState<Vector2Like | undefined>('tree-drag-position', undefined)
+
 	provideTreeExpandedContext()
 
+	let container = $state.raw<HTMLDivElement>()
+	let dragElement = $state.raw<HTMLElement>()
+
 	const partID = usePartID()
-	const selected = useSelected()
-	const objects = useObjects()
-	const draggable = useDraggable('treeview')
-	const worldStates = useWorldStates()
+	const selectedEntity = useSelectedEntity()
+	const resizable = useResizable(() => 'treeview')
 	const environment = useEnvironment()
 	const partConfig = usePartConfig()
+	const world = useWorld()
 
-	let rootNode = $state<TreeNode>({
-		id: 'world',
-		name: 'World',
-		children: [],
-		href: '/',
-	})
+	const worldEntity = world.spawn(IsExcluded, traits.Name('World'))
+
+	let children = $state<TreeNode[]>([])
+
+	let pending = false
+	const flush = () => {
+		if (pending) return
+		pending = true
+		window.setTimeout(() => {
+			children = buildTreeNodes(world.query(traits.Name))
+			pending = false
+		})
+	}
 
-	const nodes = $derived(buildTreeNodes(objects.current, worldStates.current))
+	world.onAdd(traits.Name, flush)
+	world.onAdd(traits.Parent, flush)
+	world.onRemove(traits.Name, flush)
+	world.onRemove(traits.Parent, flush)
+	world.onChange(traits.Name, flush)
+	world.onChange(traits.Parent, flush)
 
-	$effect.pre(() => {
-		if (!isEqual(rootNode.children, nodes)) {
-			rootNode.children = nodes
+	const rootNode = $derived<TreeNode>({
+		entity: worldEntity,
+		children,
+	})
+
+	$effect(() => {
+		if (container) {
+			resizable.observe(container)
 		}
 	})
 </script>
 
-<div
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 w-60 overflow-y-auto border text-xs"
-	style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
-	{...rest}
->
-	{#key rootNode}
+{#if resizable.isLoaded}
+	<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"
+		style:min-width="{MIN_DIMENSIONS.width}px"
+		style:min-height="{MIN_DIMENSIONS.height}px"
+		style:width={resizable.current ? `${resizable.current.width}px` : undefined}
+		style:height={resizable.current ? `${resizable.current.height}px` : undefined}
+		use:draggable={{
+			bounds: 'body',
+			handle: dragElement,
+			defaultPosition: dragPosition.current,
+			onDragEnd(data) {
+				dragPosition.current = { x: data.offsetX, y: data.offsetY }
+			},
+		}}
+		{...rest}
+	>
 		<Tree
 			{rootNode}
-			selections={selected.current ? [selected.current] : []}
+			bind:dragElement
+			selections={selectedEntity.current ? [`${selectedEntity.current}`] : []}
 			onSelectionChange={(event) => {
-				selected.set(event.selectedValue[0])
+				const value = event.selectedValue[0]
+
+				selectedEntity.set(value ? (Number(value) as Entity) : undefined)
 			}}
-			onDragStart={draggable.onDragStart}
-			onDragEnd={draggable.onDragEnd}
 		/>
-	{/key}
 
-	<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}>
 		{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
 			<AddFrames />
 		{/if}
-	</WeblabActive>
 
-	<Logs />
-	<Settings />
-	<Widgets />
-</div>
+		<Logs />
+		<Settings />
+		<Widgets />
+	</div>
+{/if}

package/dist/components/Tree/Widgets.svelte

@@ -6,11 +6,8 @@
 	const settings = useSettings()
 </script>
 
-<Drawer
-	name="Widgets"
-	defaultOpen
->
-	<div class="flex h-24 flex-col gap-2 overflow-scroll p-3">
+<Drawer name="Widgets">
+	<div class="flex flex-col gap-2 overflow-scroll p-3">
 		<div class="flex items-center justify-between gap-4 py-2">
 			Arm positions
 			<Switch

package/dist/components/Tree/buildTree.d.ts

@@ -1,12 +1,9 @@
-import type { useWorldStates } from '../../hooks/useWorldState.svelte';
-import type { WorldObject } from '../../WorldObject.svelte';
+import type { Entity, QueryResult, Trait } from 'koota';
 export interface TreeNode {
-    id: string;
-    name: string;
+    entity: Entity;
     children?: TreeNode[];
-    href: string;
 }
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
-export declare const buildTreeNodes: (objects: WorldObject[], worldStates: ReturnType<typeof useWorldStates>["current"]) => TreeNode[];
+export declare const buildTreeNodes: (entities: QueryResult<[Trait]>) => TreeNode[];

package/dist/components/Tree/buildTree.js

@@ -1,52 +1,32 @@
+import { traits } from '../../ecs';
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
-export const buildTreeNodes = (objects, worldStates) => {
+export const buildTreeNodes = (entities) => {
     const nodeMap = new Map();
     const rootNodes = [];
-    for (const object of objects) {
-        const node = {
-            name: object.name,
-            id: object.uuid,
-            children: [],
-            href: `/selection/${object.name}`,
-        };
-        nodeMap.set(object.name, node);
-        if (object.referenceFrame === 'world') {
+    const childNodes = [];
+    for (const entity of entities) {
+        const parent = entity.get(traits.Parent);
+        const name = entity.get(traits.Name) ?? '';
+        const node = { entity };
+        nodeMap.set(name, node);
+        if (!parent || parent === 'world') {
             rootNodes.push(node);
         }
-    }
-    for (const object of objects) {
-        if (object.referenceFrame && object.referenceFrame !== 'world') {
-            const parentNode = nodeMap.get(object.referenceFrame);
-            const child = nodeMap.get(object.name);
-            if (parentNode && child) {
-                parentNode.children?.push(child);
-            }
+        else {
+            childNodes.push(node);
         }
     }
-    for (const worldState of Object.values(worldStates)) {
-        const node = {
-            name: worldState.name,
-            id: worldState.name,
-            children: [],
-            href: `/world-state/${worldState.name}`,
-        };
-        for (const object of worldState.worldObjects) {
-            const child = {
-                name: object.name,
-                id: object.uuid,
-                children: [],
-                href: `/world-state/${worldState.name}/${object.name}`,
-            };
-            const parentNode = object.referenceFrame && nodeMap.has(object.referenceFrame)
-                ? nodeMap.get(object.referenceFrame)
-                : node;
-            nodeMap.set(object.name, child);
-            parentNode.children?.push(child);
+    for (const node of childNodes) {
+        const parent = node.entity.get(traits.Parent);
+        if (parent) {
+            const parentNode = nodeMap.get(parent);
+            if (parentNode) {
+                parentNode.children ??= [];
+                parentNode.children?.push(node);
+            }
         }
-        nodeMap.set(worldState.name, node);
-        rootNodes.push(node);
     }
     return rootNodes;
 };

package/dist/components/__tests__/__fixtures__/entity.d.ts

@@ -0,0 +1,2 @@
+import type { Entity, World } from 'koota';
+export declare const createEntityFixture: (world: World) => Entity;

package/dist/components/__tests__/__fixtures__/entity.js

@@ -0,0 +1,20 @@
+import { traits } from '../../../ecs';
+export const createEntityFixture = (world) => {
+    return world.spawn(traits.Parent('parent_frame'), traits.Name('Test Object'), traits.Pose({
+        x: 10,
+        y: 20,
+        z: 30,
+        oX: 0.1,
+        oY: 0.2,
+        oZ: 0.3,
+        theta: 0.4,
+    }), traits.EditedPose({
+        x: 10,
+        y: 20,
+        z: 30,
+        oX: 0.1,
+        oY: 0.2,
+        oZ: 0.3,
+        theta: 0.4,
+    }), traits.Box({ x: 0.01, y: 0.02, z: 0.03 }));
+};

package/dist/components/__tests__/__fixtures__/resource.d.ts

@@ -0,0 +1,17 @@
+export declare const resource: {
+    name: string;
+    frame: {
+        parent: string;
+        translation: {
+            x: number;
+            y: number;
+            z: number;
+        };
+        geometry: {
+            type: string;
+            x: number;
+            y: number;
+            z: number;
+        };
+    };
+};

package/dist/components/__tests__/__fixtures__/resource.js

@@ -0,0 +1,13 @@
+export const resource = {
+    name: 'Test Object',
+    frame: {
+        parent: 'parent_frame',
+        translation: { x: 10, y: 20, z: 30 },
+        geometry: {
+            type: 'box',
+            x: 10,
+            y: 20,
+            z: 30,
+        },
+    },
+};

package/dist/components/dashboard/Dashboard.svelte

@@ -1,15 +1,15 @@
 <script>
 	import { useSettings } from '../../hooks/useSettings.svelte'
-	import PortalTarget from '../portal/PortalTarget.svelte'
+	import { PortalTarget } from '@threlte/extras'
 	import Button from './Button.svelte'
 
-	let { ...rest } = $props()
+	let { dashboard, ...rest } = $props()
 
 	const settings = useSettings()
 </script>
 
 <div
-	class="absolute top-2 z-1000 flex w-full justify-center gap-2"
+	class="absolute top-2 z-10 flex w-full justify-center gap-2"
 	{...rest}
 >
 	<!-- camera view -->
@@ -83,4 +83,6 @@
 	{/if}
 
 	<PortalTarget id="dashboard" />
+
+	{@render dashboard?.()}
 </div>

package/dist/components/dashboard/Dashboard.svelte.d.ts

@@ -1,6 +1,11 @@
 export default Dashboard;
 type Dashboard = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, any>>): void;
+    $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const Dashboard: import("svelte").Component<Record<string, any>, {}, "">;
+declare const Dashboard: import("svelte").Component<{
+    dashboard: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    dashboard: any;
+} & Record<string, any>;

package/dist/components/widgets/ArmPositions.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
+	import type { Vector2Like } from 'three'
+	import { draggable } from '@neodrag/svelte'
 	import { formatNumeric } from '../../format'
 	import Table from '../shared/Table.svelte'
-	import { useDraggable } from '../../hooks/useDraggable.svelte'
 	import { useArmClient } from '../../hooks/useArmClient.svelte'
 	import { Icon, Label, Select } from '@viamrobotics/prime-core'
+	import { PersistedState } from 'runed'
 
 	const { ...rest } = $props()
 
-	const draggable = useDraggable('arm-current-positions')
+	const dragPosition = new PersistedState<Vector2Like | undefined>(
+		'details-drag-position',
+		undefined
+	)
+
+	let dragElement = $state.raw<HTMLElement>()
+
 	const armClient = useArmClient()
 
 	let selectedArm = $state(armClient.names[0])
@@ -17,16 +25,20 @@
 
 <div
 	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 overflow-y-auto border text-xs"
-	style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
+	use:draggable={{
+		bounds: 'body',
+		handle: dragElement,
+		defaultPosition: dragPosition.current,
+		onDragEnd(data) {
+			dragPosition.current = { x: data.offsetX, y: data.offsetY }
+		},
+	}}
 	{...rest}
 >
 	<div class="flex min-w-0 flex-col">
 		<div class="flex w-full items-center justify-between">
 			<div class="border-medium flex w-full items-center gap-1 border-b p-2">
-				<button
-					onmousedown={draggable.onDragStart}
-					onmouseup={draggable.onDragEnd}
-				>
+				<button bind:this={dragElement}>
 					<Icon name="drag" />
 				</button>
 				<h3>Arm positions</h3>