fix export preview size (#3264)

The border on export preview images was making them get sized wrong.
This fixes that, and adds some padding to these exports so they don't
get clipped.

### Change Type
- [x] `internal` — Does not affect user-facing stuff
- [x] `bugfix` — Bug fix
This commit is contained in:
alex 2024-03-26 18:34:46 +00:00 committed by GitHub
parent 019235d6fb
commit 01ec8f1e98
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -13,6 +13,7 @@ import { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariD
import { useGestureEvents } from '../../hooks/useGestureEvents'
import { useHandleEvents } from '../../hooks/useHandleEvents'
import { useScreenBounds } from '../../hooks/useScreenBounds'
import { Box } from '../../primitives/Box'
import { Mat } from '../../primitives/Mat'
import { Vec } from '../../primitives/Vec'
import { toDomPrecision } from '../../primitives/utils'
@ -481,7 +482,7 @@ function CollaboratorHintDef() {
function DebugSvgCopy({ id }: { id: TLShapeId }) {
const editor = useEditor()
const [src, setSrc] = useState<string | null>(null)
const [image, setImage] = useState<{ src: string; bounds: Box } | null>(null)
const isInRoot = useValue(
'is in root',
@ -499,15 +500,19 @@ function DebugSvgCopy({ id }: { id: TLShapeId }) {
const unsubscribe = react('shape to svg', async () => {
const renderId = Math.random()
latest = renderId
const isSingleFrame = editor.isShapeOfType(id, 'frame')
const padding = isSingleFrame ? 0 : 10
const bounds = editor.getShapePageBounds(id)!.clone().expandBy(padding)
const result = await editor.getSvgString([id], {
padding: 0,
padding,
background: editor.getInstanceState().exportBackground,
})
if (latest !== renderId || !result) return
const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`
setSrc(svgDataUrl)
setImage({ src: svgDataUrl, bounds })
})
return () => {
@ -515,21 +520,20 @@ function DebugSvgCopy({ id }: { id: TLShapeId }) {
unsubscribe()
}
}, [editor, id, isInRoot])
const bb = editor.getShapePageBounds(id)
if (!isInRoot || !src || !bb) return null
if (!isInRoot || !image) return null
return (
<img
src={src}
width={bb.width}
height={bb.height}
src={image.src}
width={image.bounds.width}
height={image.bounds.height}
style={{
position: 'absolute',
top: 0,
left: 0,
transform: `translate(${bb.x}px, ${bb.y + bb.h + 12}px)`,
border: '1px solid black',
transform: `translate(${image.bounds.x}px, ${image.bounds.maxY + 12}px)`,
outline: '1px solid black',
maxWidth: 'none',
}}
/>