diff --git a/apps/examples/src/examples/FloatyExample.tsx b/apps/examples/src/examples/FloatyExample.tsx new file mode 100644 index 000000000..9789662ba --- /dev/null +++ b/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 ( +
+ + + +
+ ) +} + +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 +} diff --git a/apps/examples/src/index.tsx b/apps/examples/src/index.tsx index 2c0269b5b..69873e64f 100644 --- a/apps/examples/src/index.tsx +++ b/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: , }, + { + title: 'Floaty window', + path: 'floaty-window', + element: , + }, { title: 'External content sources', path: 'external-content-sources',