Merge pull request #26 from threlte/remove-splitpanes

Remove svelte-splitpanes dependency

.changeset/good-taxis-promise.md

@@ -0,0 +1,5 @@
+---
+'three-inspect': minor
+---
+
+Remove svelte-splitpanes dependency

package.json

@@ -55,19 +55,18 @@
 		"three": ">=0.140"
 	},
 	"dependencies": {
-		"@changesets/cli": "^2.27.5",
 		"@floating-ui/dom": "^1.6.5",
 		"@mdi/js": "^7.4.47",
 		"@threlte/core": "^7.3.0",
 		"@threlte/extras": "^8.11.2",
 		"camera-controls": "^2.8.4",
 		"flexible-tree": "^0.1.6",
 		"svelte": "^4.2.18",
-		"svelte-splitpanes": "^0.8.0",
 		"svelte-tweakpane-ui": "^1.3.0",
 		"three-perf": "^1.0.10"
 	},
 	"devDependencies": {
+		"@changesets/cli": "^2.27.5",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.5.10",
 		"@sveltejs/package": "^2.3.1",

src/lib/Inspector.svelte

@@ -3,11 +3,9 @@
 	import { persisted } from './internal/persisted'
 	import { setPublicContext, setInternalContext } from './internal/context'
 
-	export let position: 'draggable' | 'inline' = 'inline'
-
 	const enabled = persisted('enabled', true)
 
-	setPublicContext({ position })
+	setPublicContext({})
 	setInternalContext()
 
 	const handleKeyup = (event: KeyboardEvent) => {

src/lib/Threlte.svelte

@@ -8,7 +8,6 @@
 	import { useThrelte } from '@threlte/core'
 	import Inspector from './Inspector.svelte'
 
-	export let position: 'draggable' | 'inline' = 'draggable'
 	export let scene: undefined | Scene = undefined
 	export let camera: undefined | PerspectiveCamera | OrthographicCamera =
 		undefined
@@ -22,9 +21,9 @@
 </script>
 
 {#if $$slots.default}
-	<Inspector {position}>
+	<Inspector>
 		<slot />
 	</Inspector>
 {:else}
-	<Inspector {position} />
+	<Inspector />
 {/if}

src/lib/Vanilla.svelte

@@ -9,7 +9,6 @@
 	import Threlte from './Threlte.svelte'
 	import { writable } from 'svelte/store'
 
-	export let position: 'draggable' | 'inline' = 'draggable'
 	export let scene: Scene
 	export let camera: PerspectiveCamera | OrthographicCamera
 	export let renderer: WebGLRenderer
@@ -39,7 +38,6 @@
 </script>
 
 <Threlte
-	{position}
 	{scene}
 	{camera}
 	{renderer}

src/lib/components/App.svelte

@@ -3,36 +3,33 @@
 	import { Grid } from '@threlte/extras'
 
 	import { persisted } from '../internal/persisted'
-	import { getInternalContext, useInspector } from '../internal/context'
+	import { getInternalContext } from '../internal/context'
 	import { add } from '../hooks/useOnAdd'
 	import { remove } from '../hooks/useOnRemove'
 	import Portal from './Internal/Portal.svelte'
 	import AxesHelper from './Internal/AxesHelper.svelte'
 	import FreeCamera from './Tools/FreeCamera.svelte'
 	import Raycast from './Tools/Raycast.svelte'
-	import Inline from './Positions/Inline.svelte'
 	import Draggable from './Positions/Draggable.svelte'
 	import TransformControls from './Tools/TransformControls.svelte'
 	import Helpers from './Tools/Helpers.svelte'
 
-	const { position } = useInspector()
 	const { scene } = useThrelte()
 	const { usingFreeCamera, usingRaycast, selectedObject } = getInternalContext()
 
 	const grid = persisted('grid', true)
 	const axes = persisted('axes', true)
 
 	$: object = $selectedObject
-	$: component = $position === 'inline' ? Inline : Draggable
 </script>
 
 <Portal>
 	{#if $$slots.default}
-		<svelte:component this={component}>
+		<Draggable>
 			<slot />
-		</svelte:component>
+		</Draggable>
 	{:else}
-		<svelte:component this={component} />
+		<Draggable />
 	{/if}
 </Portal>
 

src/lib/internal/context.ts

@@ -25,12 +25,10 @@ interface InternalContext {
 }
 
 interface PublicContext {
-	position: Writable<'inline' | 'draggable'>
 	theme: Writable<keyof typeof ThemeUtils.presets>
 }
 
 interface SetPublicContextOptions {
-	position?: 'inline' | 'draggable'
 	theme?: keyof typeof ThemeUtils.presets
 }
 
@@ -46,7 +44,6 @@ export const setInternalContext = () => {
 
 export const setPublicContext = (options: SetPublicContextOptions) => {
 	setContext<PublicContext>(publicKey, {
-		position: writable(options.position ?? 'inline'),
 		theme: writable(options.theme ?? 'light'),
 	})
 }