@viamrobotics/motion-tools 0.19.2 → 1.0.3

package/dist/components/Tree/TreeContainer.svelte

@@ -1,74 +1,109 @@
 <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.raw<TreeNode[]>([])
+	let nodeMap = $state.raw<Record<string, TreeNode | undefined>>({})
+
+	let pending = false
+	const flush = () => {
+		if (pending) return
+		pending = true
+		window.setTimeout(() => {
+			const results = buildTreeNodes(world.query(traits.Name))
+			children = results.rootNodes
+			nodeMap = results.nodeMap
+			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] : []}
+			{nodeMap}
+			bind:dragElement
 			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,13 @@
-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;
+    parent?: TreeNode;
     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]>) => {
+    rootNodes: TreeNode[];
+    nodeMap: Record<string, TreeNode | undefined>;
+};

package/dist/components/Tree/buildTree.js

@@ -1,52 +1,33 @@
+import { traits } from '../../ecs';
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */
-export const buildTreeNodes = (objects, worldStates) => {
-    const nodeMap = new Map();
+export const buildTreeNodes = (entities) => {
+    const nodeMap = {};
     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[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[parent];
+            node.parent = parentNode;
+            if (parentNode) {
+                parentNode.children ??= [];
+                parentNode.children?.push(node);
+            }
         }
-        nodeMap.set(worldState.name, node);
-        rootNodes.push(node);
     }
-    return rootNodes;
+    return { rootNodes, nodeMap };
 };

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>