PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

rename refs

Browse source
This commit is contained in:
Steve Ruiz 2021-12-25 19:39:20 +00:00
parent dfe2e44c17
commit fd2befa305
2 changed files with 40 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/tldraw/src/state/shapes/ImageUtil/ImageUtil.tsx
View file

@ -47,24 +47,25 @@ export class ImageUtil extends TDShapeUtil<T, E> {
({ shape, asset = { src: '' }, isBinding, isGhost, meta, events, onShapeChange }, ref) => { ({ shape, asset = { src: '' }, isBinding, isGhost, meta, events, onShapeChange }, ref) => {
const { size } = shape const { size } = shape
React.useEffect(() => { const rImage = React.useRef<HTMLImageElement>(null)
if (wrapperRef?.current) { const rWrapper = React.useRef<HTMLDivElement>(null)
const [width, height] = size
wrapperRef.current.style.width = `${width}px` React.useLayoutEffect(() => {
wrapperRef.current.style.height = `${height}px` const wrapper = rWrapper.current
} if (!wrapper) return
const [width, height] = size
wrapper.style.width = `${width}px`
wrapper.style.height = `${height}px`
}, [size]) }, [size])
const imgRef = React.useRef<HTMLImageElement>(null)
const wrapperRef = React.useRef<HTMLDivElement>(null)
const onImageLoad = React.useCallback(() => { const onImageLoad = React.useCallback(() => {
if (imgRef?.current && wrapperRef?.current) { const wrapper = rWrapper.current
const { width, height } = imgRef?.current const image = rImage.current
wrapperRef.current.style.width = `${width}px` if (!(image && wrapper)) return
wrapperRef.current.style.height = `${height}px` const { width, height } = image
onShapeChange?.({ id: shape.id, size: [width, height] }) wrapper.style.width = `${width}px`
} wrapper.style.height = `${height}px`
onShapeChange?.({ id: shape.id, size: [width, height] })
}, []) }, [])
return ( return (
@ -83,12 +84,12 @@ export class ImageUtil extends TDShapeUtil<T, E> {
/> />
)} )}
<Wrapper <Wrapper
ref={wrapperRef} ref={rWrapper}
isDarkMode={meta.isDarkMode} // isDarkMode={meta.isDarkMode} //
isGhost={isGhost} isGhost={isGhost}
> >
<ImageElement <ImageElement
ref={imgRef} ref={rImage}
src={(asset as TDImageAsset).src} src={(asset as TDImageAsset).src}
alt="tl_image_asset" alt="tl_image_asset"
draggable={false} draggable={false}

43
packages/tldraw/src/state/shapes/VideoUtil/VideoUtil.tsx
View file

@ -50,32 +50,33 @@ export class VideoUtil extends TDShapeUtil<T, E> {
ref ref
) => { ) => {
const rVideo = React.useRef<HTMLVideoElement>(null) const rVideo = React.useRef<HTMLVideoElement>(null)
const wrapperRef = React.useRef<HTMLDivElement>(null) const rWrapper = React.useRef<HTMLDivElement>(null)
const { currentTime = 0, size, isPlaying } = shape const { currentTime = 0, size, isPlaying } = shape
React.useEffect(() => { React.useLayoutEffect(() => {
if (wrapperRef.current) { const wrapper = rWrapper.current
const [width, height] = size if (!wrapper) return
wrapperRef.current.style.width = `${width}px` const [width, height] = size
wrapperRef.current.style.height = `${height}px` wrapper.style.width = `${width}px`
} wrapper.style.height = `${height}px`
}, [size]) }, [size])
const onImageLoad = React.useCallback(() => { const onImageLoad = React.useCallback(() => {
if (rVideo.current && wrapperRef.current) { const wrapper = rWrapper.current
if (!Vec.isEqual(size, [401.42, 401.42])) return const video = rVideo.current
const { videoWidth, videoHeight } = rVideo.current if (!(video && wrapper)) return
wrapperRef.current.style.width = `${videoWidth}px` if (!Vec.isEqual(size, [401.42, 401.42])) return
wrapperRef.current.style.height = `${videoHeight}px` const { videoWidth, videoHeight } = video
const newSize = [videoWidth, videoHeight] wrapper.style.width = `${videoWidth}px`
const delta = Vec.sub(size, newSize) wrapper.style.height = `${videoHeight}px`
onShapeChange?.({ const newSize = [videoWidth, videoHeight]
id: shape.id, const delta = Vec.sub(size, newSize)
point: Vec.add(shape.point, Vec.div(delta, 2)), onShapeChange?.({
size: [videoWidth, videoHeight], id: shape.id,
}) point: Vec.add(shape.point, Vec.div(delta, 2)),
} size: [videoWidth, videoHeight],
})
}, [size]) }, [size])
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
@ -124,7 +125,7 @@ export class VideoUtil extends TDShapeUtil<T, E> {
}} }}
/> />
)} )}
<Wrapper ref={wrapperRef} isDarkMode={meta.isDarkMode} isGhost={isGhost}> <Wrapper ref={rWrapper} isDarkMode={meta.isDarkMode} isGhost={isGhost}>
<VideoElement <VideoElement
ref={rVideo} ref={rVideo}
id={shape.id + '_video'} id={shape.id + '_video'}