Add floaty window example (#2250)

This PR adds a floaty window example.


https://github.com/tldraw/tldraw/assets/23072548/0cb8439e-5615-421e-b16f-d137f71a4ac4

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
This commit is contained in:
Steve Ruiz 2023-11-22 21:35:26 +00:00 committed by GitHub
parent 52c3865420
commit ed14e7e510
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 0 deletions

View file

@ -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
}

View file

@ -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',