From 57d0618ab7c759a10dba368f59466571e7df8da1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Tue, 18 Jun 2024 13:57:44 +0100 Subject: [PATCH] lod: dont transform SVGs (#3972) 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 - [ ] `sdk` — Changes the tldraw SDK - [x] `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 --- apps/dotcom/src/utils/assetHandler.test.ts | 20 ++++++++++++++++++++ apps/dotcom/src/utils/assetHandler.ts | 3 +++ packages/utils/api-report.md | 2 ++ packages/utils/src/lib/media/media.ts | 4 ++++ 4 files changed, 29 insertions(+) diff --git a/apps/dotcom/src/utils/assetHandler.test.ts b/apps/dotcom/src/utils/assetHandler.test.ts index eff645c0c..2fbb0a536 100644 --- a/apps/dotcom/src/utils/assetHandler.test.ts +++ b/apps/dotcom/src/utils/assetHandler.test.ts @@ -100,6 +100,26 @@ describe('resolveAsset', () => { ).toBe('http://example.com/animated.gif') }) + it('should return the original src if it is a vector image', async () => { + const asset = { + type: 'image', + props: { + src: 'http://example.com/vector.svg', + mimeType: 'image/svg+xml', + w: 100, + fileSize: FILE_SIZE, + }, + } + expect( + await resolver(asset as TLAsset, { + screenScale: -1, + steppedScreenScale: 1, + dpr: 1, + networkEffectiveType: '4g', + }) + ).toBe('http://example.com/vector.svg') + }) + it('should return the original src if it is under a certain file size', async () => { const asset = { type: 'image', diff --git a/apps/dotcom/src/utils/assetHandler.ts b/apps/dotcom/src/utils/assetHandler.ts index 1e9c98569..cce2f759f 100644 --- a/apps/dotcom/src/utils/assetHandler.ts +++ b/apps/dotcom/src/utils/assetHandler.ts @@ -41,6 +41,9 @@ export const resolveAsset = if (MediaHelpers.isAnimatedImageType(asset?.props.mimeType) || asset.props.isAnimated) return asset.props.src + // Don't try to transform vector images. + if (MediaHelpers.isVectorImageType(asset?.props.mimeType)) return asset.props.src + // Assets that are under a certain file size aren't worth transforming (and incurring cost). if (asset.props.fileSize === -1 || asset.props.fileSize < 1024 * 1024 * 1.5 /* 1.5 MB */) return asset.props.src diff --git a/packages/utils/api-report.md b/packages/utils/api-report.md index 34fa14e58..604326f90 100644 --- a/packages/utils/api-report.md +++ b/packages/utils/api-report.md @@ -240,6 +240,8 @@ export class MediaHelpers { static isImageType(mimeType: string): boolean; // (undocumented) static isStaticImageType(mimeType: null | string): boolean; + // (undocumented) + static isVectorImageType(mimeType: null | string): boolean; static loadImage(src: string): Promise; static loadVideo(src: string): Promise; // (undocumented) diff --git a/packages/utils/src/lib/media/media.ts b/packages/utils/src/lib/media/media.ts index 299c2166a..475deb420 100644 --- a/packages/utils/src/lib/media/media.ts +++ b/packages/utils/src/lib/media/media.ts @@ -152,6 +152,10 @@ export class MediaHelpers { return DEFAULT_SUPPORTED_STATIC_IMAGE_TYPES.includes(mimeType || '') } + static isVectorImageType(mimeType: string | null): boolean { + return DEFAULT_SUPPORTED_VECTOR_IMAGE_TYPES.includes(mimeType || '') + } + static isImageType(mimeType: string): boolean { return DEFAULT_SUPPORTED_IMAGE_TYPES.includes(mimeType) }