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) => {
const { size } = shape
React.useEffect(() => {
if (wrapperRef?.current) {
const rImage = React.useRef<HTMLImageElement>(null)
const rWrapper = React.useRef<HTMLDivElement>(null)
React.useLayoutEffect(() => {
const wrapper = rWrapper.current
if (!wrapper) return
const [width, height] = size
wrapperRef.current.style.width = `${width}px`
wrapperRef.current.style.height = `${height}px`
}
wrapper.style.width = `${width}px`
wrapper.style.height = `${height}px`
}, [size])
const imgRef = React.useRef<HTMLImageElement>(null)
const wrapperRef = React.useRef<HTMLDivElement>(null)
const onImageLoad = React.useCallback(() => {
if (imgRef?.current && wrapperRef?.current) {
const { width, height } = imgRef?.current
wrapperRef.current.style.width = `${width}px`
wrapperRef.current.style.height = `${height}px`
const wrapper = rWrapper.current
const image = rImage.current
if (!(image && wrapper)) return
const { width, height } = image
wrapper.style.width = `${width}px`
wrapper.style.height = `${height}px`
onShapeChange?.({ id: shape.id, size: [width, height] })
}
}, [])
return (
@ -83,12 +84,12 @@ export class ImageUtil extends TDShapeUtil<T, E> {
/>
)}
<Wrapper
ref={wrapperRef}
ref={rWrapper}
isDarkMode={meta.isDarkMode} //
isGhost={isGhost}
>
<ImageElement
ref={imgRef}
ref={rImage}
src={(asset as TDImageAsset).src}
alt="tl_image_asset"
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
) => {
const rVideo = React.useRef<HTMLVideoElement>(null)
const wrapperRef = React.useRef<HTMLDivElement>(null)
const rWrapper = React.useRef<HTMLDivElement>(null)
const { currentTime = 0, size, isPlaying } = shape
React.useEffect(() => {
if (wrapperRef.current) {
React.useLayoutEffect(() => {
const wrapper = rWrapper.current
if (!wrapper) return
const [width, height] = size
wrapperRef.current.style.width = `${width}px`
wrapperRef.current.style.height = `${height}px`
}
wrapper.style.width = `${width}px`
wrapper.style.height = `${height}px`
}, [size])
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
const { videoWidth, videoHeight } = rVideo.current
wrapperRef.current.style.width = `${videoWidth}px`
wrapperRef.current.style.height = `${videoHeight}px`
const { videoWidth, videoHeight } = video
wrapper.style.width = `${videoWidth}px`
wrapper.style.height = `${videoHeight}px`
const newSize = [videoWidth, videoHeight]
const delta = Vec.sub(size, newSize)
onShapeChange?.({
@ -75,7 +77,6 @@ export class VideoUtil extends TDShapeUtil<T, E> {
point: Vec.add(shape.point, Vec.div(delta, 2)),
size: [videoWidth, videoHeight],
})
}
}, [size])
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
ref={rVideo}
id={shape.id + '_video'}