kopia lustrzana https://github.com/Tldraw/Tldraw
51 wiersze
1.3 KiB
TypeScript
51 wiersze
1.3 KiB
TypeScript
import { useApp } from '@tldraw/editor'
|
|
import { useEffect, useState } from 'react'
|
|
import { useActions } from '../hooks/useActions'
|
|
import { Button } from './primitives/Button'
|
|
|
|
export function BackToContent() {
|
|
const app = useApp()
|
|
|
|
const actions = useActions()
|
|
const action = actions['back-to-content']
|
|
|
|
const [showBackToContent, setShowBackToContent] = useState(false)
|
|
|
|
useEffect(() => {
|
|
let showBackToContentPrev = false
|
|
|
|
const interval = setInterval(() => {
|
|
const { renderingShapes } = app
|
|
|
|
// renderingShapes will also include shapes that have the canUnmount flag
|
|
// set to true. These shapes will be on the canvas but may not be in the
|
|
// viewport... so we also need to narrow down the list to only shapes that
|
|
// are ALSO in the viewport.
|
|
const visibleShapes = renderingShapes.filter((s) => s.isInViewport)
|
|
const showBackToContentNow = visibleShapes.length === 0 && app.shapesArray.length > 0
|
|
|
|
if (showBackToContentPrev !== showBackToContentNow) {
|
|
setShowBackToContent(showBackToContentNow)
|
|
showBackToContentPrev = showBackToContentNow
|
|
}
|
|
}, 1000)
|
|
|
|
return () => {
|
|
clearInterval(interval)
|
|
}
|
|
}, [app])
|
|
|
|
if (!showBackToContent) return null
|
|
|
|
return (
|
|
<Button
|
|
iconLeft={action.icon}
|
|
label={action.label}
|
|
onClick={() => {
|
|
action.onSelect('helper-buttons')
|
|
setShowBackToContent(false)
|
|
}}
|
|
/>
|
|
)
|
|
}
|