Make frame editing a plugin

src/lib/components/App.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { Struct } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
@@ -10,8 +9,6 @@
 	import { primeTheme } from '@viamrobotics/tweakpane-config'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
-	import type { FragmentInfo } from '$lib/hooks/usePartConfig.svelte'
-
 	import Controls from '$lib/components/overlay/controls/Controls.svelte'
 	import Dashboard from '$lib/components/overlay/dashboard/Dashboard.svelte'
 	import Details from '$lib/components/overlay/Details.svelte'
@@ -21,34 +18,25 @@
 	import { provideWorld } from '$lib/ecs'
 	import { type CameraPose, provideCameraControls } from '$lib/hooks/useControls.svelte'
 	import { provideEnvironment } from '$lib/hooks/useEnvironment.svelte'
-	import { providePartConfig } from '$lib/hooks/usePartConfig.svelte'
 	import { createPartIDContext } from '$lib/hooks/usePartID.svelte'
 	import { provideSettings } from '$lib/hooks/useSettings.svelte'
 	import { provideWeblabs } from '$lib/hooks/useWeblabs.svelte'
+	import AddFrames from '$lib/plugins/FrameEditing/AddFrames.svelte'
 	import { domPortal } from '$lib/portal'
 
+	import LiveUpdatesBanner from '../plugins/FrameEditing/LiveUpdatesBanner.svelte'
 	import FileDrop from './FileDrop/FileDrop.svelte'
 	import HoveredEntities from './hover/HoveredEntities.svelte'
-	import AddFrames from './overlay/AddFrames.svelte'
-	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
 	import Logs from './overlay/Logs.svelte'
 	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
 	import Camera from './overlay/widgets/Camera.svelte'
 	import FramePov from './overlay/widgets/FramePov.svelte'
 	import Scene from './Scene.svelte'
 	import SceneProviders from './SceneProviders.svelte'
 
-	interface LocalConfigProps {
-		current: Struct
-		isDirty: boolean
-		componentNameToFragmentInfo: Record<string, FragmentInfo>
-		setLocalPartConfig: (config: Struct) => void
-	}
-
 	interface Props {
 		partID?: string
 		inputBindingsEnabled?: boolean
-		localConfigProps?: LocalConfigProps
 
 		/**
 		 * Snippet for THREE objects
@@ -74,7 +62,6 @@
 	let {
 		partID = '',
 		inputBindingsEnabled = true,
-		localConfigProps,
 		cameraPose,
 		children: appChildren,
 		dashboard,
@@ -97,14 +84,9 @@
 
 	let root = $state.raw<HTMLElement>()
 
-	providePartConfig(
-		() => partID,
-		() => localConfigProps
-	)
-
 	$effect(() => {
 		environment.current.inputBindingsEnabled = inputBindingsEnabled
 		environment.current.isStandalone = !localConfigProps
 	})
 
 	$effect(() => {

src/lib/components/Entities/hooks/useEntityEvents.svelte.ts

@@ -5,7 +5,7 @@ import { MathUtils, Matrix4, Quaternion, Vector2 } from 'three'
 
 import { traits, useTrait } from '$lib/ecs'
 import { useFocusedEntity, useSelectedEntity } from '$lib/hooks/useSelection.svelte'
-import { type HoverInfo, updateHoverInfo } from '$lib/HoverUpdater.svelte'
+import { type HoverInfo, updateHoverInfo } from '$lib/HoverUpdater'
 import { OrientationVector } from '$lib/three/OrientationVector'
 
 const tempHoverMatrix = new Matrix4()

src/lib/components/Scene.svelte

@@ -10,7 +10,6 @@
 	import Entities from '$lib/components/Entities/Entities.svelte'
 	import Focus from '$lib/components/Focus.svelte'
 	import Selected from '$lib/components/Selected.svelte'
-	import SelectedTransformControls from '$lib/components/SelectedTransformControls.svelte'
 	import StaticGeometries from '$lib/components/StaticGeometries.svelte'
 	import { bvh } from '$lib/hooks/plugins/bvh.svelte'
 	import { useFocusedObject3d } from '$lib/hooks/useSelection.svelte'
@@ -86,7 +85,6 @@
 
 		<StaticGeometries />
 		<Selected />
-		<SelectedTransformControls />
 
 		{#if !$isPresenting && settings.current.grid}
 			<Grid

src/lib/components/SceneProviders.svelte

@@ -5,10 +5,7 @@
 	import { provide3DModels } from '$lib/hooks/use3DModels.svelte'
 	import { provideArmClient } from '$lib/hooks/useArmClient.svelte'
 	import { provideArmKinematics } from '$lib/hooks/useArmKinematics.svelte'
-	import { provideConfigFrames } from '$lib/hooks/useConfigFrames.svelte'
 	import { provideTransformControls } from '$lib/hooks/useControls.svelte'
-	import { provideFrameEditSession } from '$lib/hooks/useFrameEditSession.svelte'
-	import { provideFramelessComponents } from '$lib/hooks/useFramelessComponents.svelte'
 	import { provideFrames } from '$lib/hooks/useFrames.svelte'
 	import { provideGeometries } from '$lib/hooks/useGeometries.svelte'
 	import { provideInheritedInvisible } from '$lib/hooks/useInheritedInvisible.svelte'
@@ -43,8 +40,7 @@
 	provideRelationships()
 
 	provideResourceByName(() => partID.current)
-	provideConfigFrames()
-	provideFrameEditSession(() => partID.current)
+
 	provideFrames(() => partID.current)
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)
@@ -53,7 +49,6 @@
 	provideArmClient(() => partID.current)
 	provideArmKinematics(() => partID.current)
 	provideWorldStates()
-	provideFramelessComponents()
 
 	const { focus } = provideSelection()
 	provideLinkedEntities()

src/lib/components/hover/HoveredEntity.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { MathUtils, Quaternion, Vector3 } from 'three'
 
-	import type { HoverInfo } from '$lib/HoverUpdater.svelte'
+	import type { HoverInfo } from '$lib/HoverUpdater'
 
 	import { traits, useTrait } from '$lib/ecs'
 	import { useFocusedEntity, useSelectedEntity } from '$lib/hooks/useSelection.svelte'

src/lib/components/hover/HoveredEntityTooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { HTML } from '@threlte/extras'
 
-	import { type HoverInfo } from '$lib/HoverUpdater.svelte'
+	import { type HoverInfo } from '$lib/HoverUpdater'
 
 	interface Props {
 		hoverInfo: HoverInfo

src/lib/components/hover/LinkedHoveredEntity.svelte

@@ -7,7 +7,7 @@
 	import { SubEntityLinkType } from '$lib/ecs/relations'
 	import { useSelectedEntity } from '$lib/hooks/useSelection.svelte'
 	import { useFocusedEntity } from '$lib/hooks/useSelection.svelte'
-	import { getLinkedHoverInfo, type HoverInfo } from '$lib/HoverUpdater.svelte'
+	import { getLinkedHoverInfo, type HoverInfo } from '$lib/HoverUpdater'
 
 	import HoveredEntityTooltip from './HoveredEntityTooltip.svelte'
 

src/lib/components/overlay/Details.svelte

@@ -38,12 +38,9 @@
 
 	import AddRelationship from '$lib/components/overlay/AddRelationship.svelte'
 	import { hierarchy, relations, traits, useParentName, useTrait, useWorld } from '$lib/ecs'
-	import { FrameConfigUpdater } from '$lib/FrameConfigUpdater.svelte'
-	import { useConfigFrames } from '$lib/hooks/useConfigFrames.svelte'
 	import { useCameraControls } from '$lib/hooks/useControls.svelte'
 	import { useEnvironment } from '$lib/hooks/useEnvironment.svelte'
 	import { useLinkedEntities } from '$lib/hooks/useLinked.svelte'
-	import { usePartConfig } from '$lib/hooks/usePartConfig.svelte'
 	import { usePartID } from '$lib/hooks/usePartID.svelte'
 	import { useResourceByName } from '$lib/hooks/useResourceByName.svelte'
 	import {
@@ -53,6 +50,9 @@
 		useSelectedObject3d,
 	} from '$lib/hooks/useSelection.svelte'
 	import { useSettings } from '$lib/hooks/useSettings.svelte'
+	import { FrameConfigUpdater } from '$lib/plugins/FrameEditing/FrameConfigUpdater.svelte'
+	import { useConfigFrames } from '$lib/plugins/FrameEditing/useConfigFrames.svelte'
+	import { usePartConfig } from '$lib/plugins/FrameEditing/usePartConfig.svelte'
 	import { createPose, matrixToPose } from '$lib/transform'
 
 	interface Props {
@@ -71,7 +71,7 @@
 	const settings = useSettings()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
 	const environment = useEnvironment()
 	const focusedEntity = useFocusedEntity()
 	const focusedObject3d = useFocusedObject3d()
 	const linkedEntities = useLinkedEntities()
@@ -801,16 +801,6 @@
 		{#if showRelationshipOptions}
 			<AddRelationship {entity} />
 		{/if}
-
-		{#if showEditFrameOptions && environment.current.isStandalone}
-			<Button
-				variant="danger"
-				class="mt-2 w-full"
-				onclick={() => detailConfigUpdater.deleteFrame(entity)}
-			>
-				Delete frame
-			</Button>
-		{/if}
 	</div>
 {/if}
 

src/lib/components/overlay/__tests__/Details.svelte.spec.ts

@@ -6,13 +6,13 @@
 
 import { traits } from '$lib/ecs'
 import { WORLD_CONTEXT_KEY } from '$lib/ecs/useWorld'
-import * as useConfigFrames from '$lib/hooks/useConfigFrames.svelte'
 import { createEnvironment, ENVIRONMENT_CONTEXT_KEY } from '$lib/hooks/useEnvironment.svelte'
 import * as useLinkedEntities from '$lib/hooks/useLinked.svelte'
-import * as usePartConfig from '$lib/hooks/usePartConfig.svelte'
 import * as useResourceByName from '$lib/hooks/useResourceByName.svelte'
 import * as useSelection from '$lib/hooks/useSelection.svelte'
 import { createWeblabs, WEBLABS_CONTEXT_KEY } from '$lib/hooks/useWeblabs.svelte'
+import * as useConfigFrames from '$lib/plugins/FrameEditing/useConfigFrames.svelte'
+import * as usePartConfig from '$lib/plugins/FrameEditing/usePartConfig.svelte'
 
 import Details from '../Details.svelte'
 import { createEntityFixture } from './__fixtures__/entity'
@@ -41,7 +41,7 @@
 		vi.mocked(useResourceByName.useResourceByName).mockReturnValue({
 			current: {},
 		})
 		vi.mocked(useConfigFrames.useConfigFrames).mockReturnValue({
 			getParentFrameOptions: vi.fn(),
 			unsetFrames: [],
 			current: {},

src/lib/hooks/useFrames.svelte.ts

@@ -13,11 +13,11 @@ import { resourceNameToColor, subtypeToColor } from '$lib/color'
 import { hierarchy, traits, useWorld } from '$lib/ecs'
 import { createPose, isPoseEqual, poseToMatrix } from '$lib/transform'
 
-import { useConfigFrames } from './useConfigFrames.svelte'
+import { useConfigFrames } from '../plugins/FrameEditing/useConfigFrames.svelte'
+import { useFrameEditSession } from '../plugins/FrameEditing/useFrameEditSession.svelte'
+import { usePartConfig } from '../plugins/FrameEditing/usePartConfig.svelte'
 import { useEnvironment } from './useEnvironment.svelte'
-import { useFrameEditSession } from './useFrameEditSession.svelte'
 import { useLogs } from './useLogs.svelte'
-import { usePartConfig } from './usePartConfig.svelte'
 import { useResourceByName } from './useResourceByName.svelte'
 
 interface FramesContext {

src/lib/index.ts

@@ -8,7 +8,6 @@ export { default as PCD } from './components/PCD.svelte'
 // ECS
 export * as relations from './ecs/relations'
 export * as traits from './ecs/traits'
-
 export { default as FloatingPanel } from './components/overlay/FloatingPanel.svelte'
 
 export { provideWorld, useWorld } from './ecs/useWorld'

src/lib/components/overlay/AddFrames.svelte → src/lib/plugins/FrameEditing/AddFrames.svelte

@@ -2,12 +2,12 @@
 	import { Portal } from '@threlte/extras'
 	import { Button } from '@viamrobotics/prime-core'
 
-	import { useFramelessComponents } from '$lib/hooks/useFramelessComponents.svelte'
-	import { usePartConfig } from '$lib/hooks/usePartConfig.svelte'
+	import DashboardButton from '$lib/components/overlay/dashboard/Button.svelte'
+	import FloatingPanel from '$lib/components/overlay/FloatingPanel.svelte'
 	import { usePartID } from '$lib/hooks/usePartID.svelte'
 
-	import DashboardButton from './dashboard/Button.svelte'
-	import FloatingPanel from './FloatingPanel.svelte'
+	import { useFramelessComponents } from './useFramelessComponents.svelte'
+	import { usePartConfig } from './usePartConfig.svelte'
 
 	const partID = usePartID()
 	const framelessComponents = useFramelessComponents()

src/lib/plugins/FrameEditing/FrameEditing.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Struct } from '@viamrobotics/sdk'
+
+	import FrameTransformControls from './SelectedTransformControls.svelte'
+	import { provideConfigFrames } from './useConfigFrames.svelte'
+	import { provideFrameEditSession } from './useFrameEditSession.svelte'
+	import { provideFramelessComponents } from './useFramelessComponents.svelte'
+	import { type FragmentInfo, providePartConfig } from './usePartConfig.svelte'
+	import { Portal } from '@threlte/extras'
+
+	interface Props {
+		partID: string
+		current: Struct
+		isDirty: boolean
+		componentNameToFragmentInfo: Record<string, FragmentInfo>
+		setLocalPartConfig: (config: Struct) => void
+	}
+
+	let { partID, current, isDirty, componentNameToFragmentInfo, setLocalPartConfig }: Props =
+		$props()
+
+	provideFrameEditSession(() => partID)
+	provideFramelessComponents()
+	provideConfigFrames()
+
+	providePartConfig(
+		() => partID,
+		() => ({ current, isDirty, componentNameToFragmentInfo, setLocalPartConfig })
+	)
+</script>
+
+<FrameTransformControls />
+
+<Portal id="details">
+	{#if showEditFrameOptions}
+		<Button
+			variant="danger"
+			class="mt-2 w-full"
+			onclick={() => detailConfigUpdater.deleteFrame(entity)}
+		>
+			Delete frame
+		</Button>
+	{/if}
+</Portal>

src/lib/components/overlay/LiveUpdatesBanner.svelte → src/lib/plugins/FrameEditing/LiveUpdatesBanner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button, Icon } from '@viamrobotics/prime-core'
 
-	import { usePartConfig } from '$lib/hooks/usePartConfig.svelte'
+	import { usePartConfig } from './usePartConfig.svelte'
 
 	const partConfig = usePartConfig()
 

src/lib/components/SelectedTransformControls.svelte → src/lib/plugins/FrameEditing/SelectedTransformControls.svelte

@@ -2,13 +2,9 @@
 	import { TransformControls } from '@threlte/extras'
 	import { Matrix4, Quaternion, Vector3 } from 'three'
 
-	import type { FrameEditSession } from '$lib/editing/FrameEditSession'
-
 	import { relations, traits, useTrait } from '$lib/ecs'
 	import { useTransformControls } from '$lib/hooks/useControls.svelte'
 	import { useEnvironment } from '$lib/hooks/useEnvironment.svelte'
-	import { useFrameEditSession } from '$lib/hooks/useFrameEditSession.svelte'
-	import { usePartConfig } from '$lib/hooks/usePartConfig.svelte'
 	import { useSelectedEntity, useSelectedObject3d } from '$lib/hooks/useSelection.svelte'
 	import { useSettings } from '$lib/hooks/useSettings.svelte'
 	import {
@@ -20,6 +16,11 @@
 		vector3ToPose,
 	} from '$lib/transform'
 
+	import type { FrameEditSession } from './FrameEditSession'
+
+	import { useFrameEditSession } from './useFrameEditSession.svelte'
+	import { usePartConfig } from './usePartConfig.svelte'
+
 	const settings = useSettings()
 	const environment = useEnvironment()
 	const partConfig = usePartConfig()

src/lib/hooks/useConfigFrames.svelte.ts → src/lib/plugins/FrameEditing/useConfigFrames.svelte.ts

@@ -2,9 +2,8 @@ import { Transform } from '@viamrobotics/sdk'
 import { getContext, setContext } from 'svelte'
 
 import { createTransformFromFrame, type Frame } from '$lib/frame'
-
-import { useEnvironment } from './useEnvironment.svelte'
-import { usePartConfig } from './usePartConfig.svelte'
+import { useEnvironment } from '$lib/hooks/useEnvironment.svelte'
+import { usePartConfig } from '$lib/plugins/FrameEditing/usePartConfig.svelte'
 
 const key = Symbol('config-frames-context')
 

src/lib/hooks/useFrameEditSession.svelte.ts → src/lib/plugins/FrameEditing/useFrameEditSession.svelte.ts

@@ -2,8 +2,7 @@ import type { Entity } from 'koota'
 
 import { getContext, setContext } from 'svelte'
 
-import { FrameEditSession } from '$lib/editing/FrameEditSession'
-
+import { FrameEditSession } from './FrameEditSession'
 import { usePartConfig } from './usePartConfig.svelte'
 
 const key = Symbol('frame-edit-session-context')

src/lib/hooks/useFramelessComponents.svelte.ts → src/lib/plugins/FrameEditing/useFramelessComponents.svelte.ts

@@ -1,6 +1,7 @@
 import { getContext, setContext } from 'svelte'
 
-import { useFrames } from './useFrames.svelte'
+import { useFrames } from '$lib/hooks/useFrames.svelte'
+
 import { usePartConfig } from './usePartConfig.svelte'
 
 interface FramelessComponents {