Add floaty window example

apps/examples/src/examples/FloatyExample.tsx

@@ -0,0 +1,47 @@
+import { Tldraw, Vec2d, useContainer, useEditor } from '@tldraw/tldraw'
+import '@tldraw/tldraw/tldraw.css'
+import { useEffect } from 'react'
+
+export default function FloatyExample() {
+	return (
+		<div className="tldraw__editor">
+			<Tldraw persistenceKey="tldraw_floaty_example">
+				<SneakyFloatyHook />
+			</Tldraw>
+		</div>
+	)
+}
+
+function SneakyFloatyHook() {
+	const editor = useEditor()
+	const container = useContainer()
+
+	useEffect(() => {
+		if (!window.screenLeft) {
+			window.screenLeft = window.screenX
+			window.screenTop = window.screenY
+		}
+
+		let x = window.screenLeft ?? window.screenX
+		let y = window.screenTop ?? window.screenY
+
+		function updatePositions() {
+			const sx = window.screenLeft ?? window.screenX
+			const sy = window.screenTop ?? window.screenY
+
+			if (sx !== x || sy !== y) {
+				x = sx
+				y = sy
+				editor.setCamera(new Vec2d(-x, -y))
+			}
+		}
+
+		editor.on('tick', updatePositions)
+
+		return () => {
+			editor.off('tick', updatePositions)
+		}
+	}, [editor, container])
+
+	return null
+}

apps/examples/src/index.tsx

@@ -23,6 +23,7 @@ import CustomUiExample from './examples/CustomUiExample/CustomUiExample'
 import ErrorBoundaryExample from './examples/ErrorBoundaryExample/ErrorBoundaryExample'
 import ExplodedExample from './examples/ExplodedExample'
 import ExternalContentSourcesExample from './examples/ExternalContentSourcesExample'
+import FloatyExample from './examples/FloatyExample'
 import ForceMobileExample from './examples/ForceBreakpointExample'
 import HideUiExample from './examples/HideUiExample'
 import MetaExample from './examples/MetaExample'
@@ -192,6 +193,11 @@ export const allExamples: Example[] = [
 		path: 'asset-props',
 		element: <AssetPropsExample />,
 	},
+	{
+		title: 'Floaty window',
+		path: 'floaty-window',
+		element: <FloatyExample />,
+	},
 	{
 		title: 'External content sources',
 		path: 'external-content-sources',