Remove onLoad functions (#504)

packages/tldraw/src/state/TldrawApp.ts

@@ -50,7 +50,8 @@ import {
   saveToFileSystem,
   openAssetFromFileSystem,
   fileToBase64,
-  getSizeFromSrc,
+  getImageSizeFromSrc,
+  getVideoSizeFromSrc,
 } from './data'
 import { TLDR } from './TLDR'
 import { shapeUtils } from '~state/shapes'
@@ -2877,11 +2878,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         src = await fileToBase64(file)
       }
       if (typeof src === 'string') {
-        const size = isImage
-          ? await getSizeFromSrc(src).catch((e) => {
-              throw e
-            })
-          : [401.42, 401.42] // special
+        const size = isImage ? await getImageSizeFromSrc(src) : await getVideoSizeFromSrc(src)
         const match = Object.values(this.document.assets).find(
           (asset) => asset.type === assetType && asset.src === src
         )

packages/tldraw/src/state/data/filesystem.ts

@@ -129,7 +129,7 @@ export function fileToBase64(file: Blob): Promise<string | ArrayBuffer | null> {
   })
 }
 
-export function getSizeFromSrc(src: string): Promise<number[]> {
+export function getImageSizeFromSrc(src: string): Promise<number[]> {
   return new Promise((resolve, reject) => {
     const img = new Image()
     img.onload = () => resolve([img.width, img.height])
@@ -137,3 +137,12 @@ export function getSizeFromSrc(src: string): Promise<number[]> {
     img.src = src
   })
 }
+
+export function getVideoSizeFromSrc(src: string): Promise<number[]> {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement('video')
+    video.onloadedmetadata = () => resolve([video.videoWidth, video.videoHeight])
+    video.onerror = () => reject(new Error('Could not get video size'))
+    video.src = src
+  })
+}

packages/tldraw/src/state/shapes/ImageUtil/ImageUtil.tsx

@@ -58,16 +58,6 @@ export class ImageUtil extends TDShapeUtil<T, E> {
         wrapper.style.height = `${height}px`
       }, [size])
 
-      const onImageLoad = React.useCallback(() => {
-        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 (
         <HTMLContainer ref={ref} {...events}>
           {isBinding && (
@@ -94,7 +84,7 @@ export class ImageUtil extends TDShapeUtil<T, E> {
               src={(asset as TDImageAsset).src}
               alt="tl_image_asset"
               draggable={false}
-              onLoad={onImageLoad}
+              // onLoad={onImageLoad}
             />
           </Wrapper>
         </HTMLContainer>

packages/tldraw/src/state/shapes/VideoUtil/VideoUtil.tsx

@@ -62,23 +62,6 @@ export class VideoUtil extends TDShapeUtil<T, E> {
         wrapper.style.height = `${height}px`
       }, [size])
 
-      const onImageLoad = React.useCallback(() => {
-        const wrapper = rWrapper.current
-        const video = rVideo.current
-        if (!(video && wrapper)) return
-        if (!Vec.isEqual(size, [401.42, 401.42])) return
-        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?.({
-          id: shape.id,
-          point: Vec.add(shape.point, Vec.div(delta, 2)),
-          size: [videoWidth, videoHeight],
-        })
-      }, [size])
-
       React.useLayoutEffect(() => {
         const video = rVideo.current
         if (!video) return
@@ -144,7 +127,6 @@ export class VideoUtil extends TDShapeUtil<T, E> {
               onPlay={handlePlay}
               onPause={handlePause}
               onTimeUpdate={handleSetCurrentTime}
-              onLoadedMetadata={onImageLoad}
             >
               <source src={(asset as TDVideoAsset).src} />
             </VideoElement>