From ca3ef619ad07c5cc7d1cb11a4ea9a56eba3bfe4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Tue, 18 Jun 2024 12:39:20 +0100 Subject: [PATCH] lod: dont resize images that are culled (#3970) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Describe what your pull request does. If appropriate, add GIFs or images showing the before and after. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff - [ ] `bugfix` — Bug fix - [ ] `feature` — New feature - [x] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know --- .../tldraw/src/lib/shapes/image/ImageShapeUtil.tsx | 2 +- packages/tldraw/src/lib/shapes/shared/useAsset.ts | 10 +++++++--- .../tldraw/src/lib/shapes/video/VideoShapeUtil.tsx | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx index 802f45333..0ce00e7dc 100644 --- a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx @@ -64,7 +64,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil { const [staticFrameSrc, setStaticFrameSrc] = useState('') const [loadedSrc, setLoadedSrc] = useState('') const isSelected = shape.id === this.editor.getOnlySelectedShapeId() - const { asset, url } = useAsset(shape.props.assetId, shape.props.w) + const { asset, url } = useAsset(shape.id, shape.props.assetId, shape.props.w) useEffect(() => { // We preload the image because we might have different source urls for different diff --git a/packages/tldraw/src/lib/shapes/shared/useAsset.ts b/packages/tldraw/src/lib/shapes/shared/useAsset.ts index 992d1efb7..dc78fd671 100644 --- a/packages/tldraw/src/lib/shapes/shared/useAsset.ts +++ b/packages/tldraw/src/lib/shapes/shared/useAsset.ts @@ -1,11 +1,13 @@ -import { TLAssetId, useEditor, useValue } from '@tldraw/editor' +import { TLAssetId, TLShapeId, useEditor, useValue } from '@tldraw/editor' import { useEffect, useState } from 'react' /** @internal */ -export function useAsset(assetId: TLAssetId | null, width: number) { +export function useAsset(shapeId: TLShapeId, assetId: TLAssetId | null, width: number) { const editor = useEditor() const [url, setUrl] = useState(null) const asset = assetId ? editor.getAsset(assetId) : null + const culledShapes = editor.getCulledShapes() + const isCulled = culledShapes.has(shapeId) const shapeScale = asset && 'w' in asset.props ? width / asset.props.w : 1 // We debounce the zoom level to reduce the number of times we fetch a new image and, @@ -16,6 +18,8 @@ export function useAsset(assetId: TLAssetId | null, width: number) { ]) useEffect(() => { + if (isCulled) return + let isCancelled = false const timer = editor.timers.setTimeout(async () => { const resolvedUrl = await editor.resolveAssetUrl(assetId, { @@ -28,7 +32,7 @@ export function useAsset(assetId: TLAssetId | null, width: number) { clearTimeout(timer) isCancelled = true } - }, [assetId, asset?.props.src, screenScale, editor]) + }, [assetId, asset?.props.src, isCulled, screenScale, editor]) return { asset, url } } diff --git a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx index 712dca02e..bd0183473 100644 --- a/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx @@ -37,7 +37,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil { component(shape: TLVideoShape) { const { editor } = this const showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110 - const { asset, url } = useAsset(shape.props.assetId, shape.props.w) + const { asset, url } = useAsset(shape.id, shape.props.assetId, shape.props.w) const { time, playing } = shape.props const isEditing = useIsEditing(shape.id) const prefersReducedMotion = usePrefersReducedMotion()