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:
parent
019235d6fb
commit
01ec8f1e98
1 changed files with 14 additions and 10 deletions
|
@ -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',
|
||||
}}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue