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

31
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)
React.useLayoutEffect(() => {
const wrapper = rWrapper.current
if (!wrapper) return
const [width, height] = size const [width, height] = size
wrapperRef.current.style.width = `${width}px` wrapper.style.width = `${width}px`
wrapperRef.current.style.height = `${height}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
wrapper.style.width = `${width}px`
wrapper.style.height = `${height}px`
onShapeChange?.({ id: shape.id, size: [width, height] }) 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}

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

@ -50,24 +50,26 @@ 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
if (!wrapper) return
const [width, height] = size const [width, height] = size
wrapperRef.current.style.width = `${width}px` wrapper.style.width = `${width}px`
wrapperRef.current.style.height = `${height}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
const video = rVideo.current
if (!(video && wrapper)) return
if (!Vec.isEqual(size, [401.42, 401.42])) return if (!Vec.isEqual(size, [401.42, 401.42])) return
const { videoWidth, videoHeight } = rVideo.current const { videoWidth, videoHeight } = video
wrapperRef.current.style.width = `${videoWidth}px` wrapper.style.width = `${videoWidth}px`
wrapperRef.current.style.height = `${videoHeight}px` wrapper.style.height = `${videoHeight}px`
const newSize = [videoWidth, videoHeight] const newSize = [videoWidth, videoHeight]
const delta = Vec.sub(size, newSize) const delta = Vec.sub(size, newSize)
onShapeChange?.({ onShapeChange?.({
@ -75,7 +77,6 @@ export class VideoUtil extends TDShapeUtil<T, E> {
point: Vec.add(shape.point, Vec.div(delta, 2)), point: Vec.add(shape.point, Vec.div(delta, 2)),
size: [videoWidth, videoHeight], 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'}