From 81b8e65741451c107adc84e3e4f0c79a0565a960 Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Sat, 26 Aug 2023 10:30:29 +0200 Subject: [PATCH] export asset stuff (#1829) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR adds several new exports related to assets. ### Change Type - [x] `minor` — New feature --- .../src/examples/HostedImagesExample.tsx | 8 ++----- packages/tldraw/api-report.md | 9 +++++++ packages/tldraw/src/index.ts | 8 ++++++- .../lib/useRegisterExternalContentHandlers.ts | 8 ++----- packages/tldraw/src/lib/utils/assets.ts | 24 +++++++++---------- 5 files changed, 32 insertions(+), 25 deletions(-) diff --git a/apps/examples/src/examples/HostedImagesExample.tsx b/apps/examples/src/examples/HostedImagesExample.tsx index f2321abec..5ac9deedb 100644 --- a/apps/examples/src/examples/HostedImagesExample.tsx +++ b/apps/examples/src/examples/HostedImagesExample.tsx @@ -6,9 +6,9 @@ import { TLAssetId, Tldraw, getHashForString, + isGifAnimated, uniqueId, } from '@tldraw/tldraw' -import { getIsGifAnimated } from '@tldraw/tldraw/src/lib/utils/assets' import '@tldraw/tldraw/tldraw.css' import { useCallback } from 'react' @@ -40,11 +40,7 @@ export default function AssetPropsExample() { if (['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'].includes(file.type)) { shapeType = 'image' size = await MediaHelpers.getImageSizeFromSrc(url) - if (file.type === 'image/gif') { - isAnimated = await getIsGifAnimated(file) - } else { - isAnimated = false - } + isAnimated = file.type === 'image/gif' && (await isGifAnimated(file)) } else { shapeType = 'video' isAnimated = true diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index f6941a18a..786bea530 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -248,6 +248,9 @@ function CloseButton(): JSX.Element; // @public (undocumented) export function compactMenuItems(arr: T[]): Exclude[]; +// @public +export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight; + // @public (undocumented) function Content({ side, align, sideOffset, alignOffset, children, }: { children: any; @@ -610,6 +613,9 @@ export class GeoShapeUtil extends BaseBoxShapeUtil { // @public export function getEmbedInfo(inputUrl: string): TLEmbedResult; +// @public +export function getResizedImageDataUrl(dataURLForImage: string, width: number, height: number): Promise; + // @public (undocumented) function Group({ children, size, }: { children: any; @@ -726,6 +732,9 @@ function Indicator(): JSX.Element; // @public (undocumented) export const Input: React_3.ForwardRefExoticComponent>; +// @public (undocumented) +export function isGifAnimated(file: File): Promise; + // @public (undocumented) function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element; diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts index 69eb7e536..8f19c8ba0 100644 --- a/packages/tldraw/src/index.ts +++ b/packages/tldraw/src/index.ts @@ -129,7 +129,13 @@ export { export { type TLUiIconType } from './lib/ui/icon-types' export { useDefaultHelpers, type TLUiOverrides } from './lib/ui/overrides' export { setDefaultEditorAssetUrls } from './lib/utils/assetUrls' -export { DEFAULT_ACCEPTED_IMG_TYPE, DEFAULT_ACCEPTED_VID_TYPE } from './lib/utils/assets' +export { + DEFAULT_ACCEPTED_IMG_TYPE, + DEFAULT_ACCEPTED_VID_TYPE, + containBoxSize, + getResizedImageDataUrl, + isGifAnimated, +} from './lib/utils/assets' export { buildFromV1Document, type LegacyTldrawDocument } from './lib/utils/buildFromV1Document' export { getEmbedInfo } from './lib/utils/embeds' export { diff --git a/packages/tldraw/src/lib/useRegisterExternalContentHandlers.ts b/packages/tldraw/src/lib/useRegisterExternalContentHandlers.ts index fc2319297..ccd58983c 100644 --- a/packages/tldraw/src/lib/useRegisterExternalContentHandlers.ts +++ b/packages/tldraw/src/lib/useRegisterExternalContentHandlers.ts @@ -17,7 +17,7 @@ import { } from '@tldraw/editor' import { useEffect } from 'react' import { FONT_FAMILIES, FONT_SIZES, TEXT_PROPS } from './shapes/shared/default-shape-constants' -import { containBoxSize, getIsGifAnimated, getResizedImageDataUrl } from './utils/assets' +import { containBoxSize, getResizedImageDataUrl, isGifAnimated } from './utils/assets' import { getEmbedInfo } from './utils/embeds' import { cleanupText, isRightToLeftLanguage, truncateStringWithEllipsis } from './utils/text' @@ -82,11 +82,7 @@ export function useRegisterExternalContentHandlers({ if (isImageType) { size = await MediaHelpers.getImageSizeFromSrc(dataUrl) - if (file.type === 'image/gif') { - isAnimated = await getIsGifAnimated(file) - } else { - isAnimated = false - } + isAnimated = file.type === 'image/gif' && (await isGifAnimated(file)) } else { isAnimated = true size = await MediaHelpers.getVideoSizeFromSrc(dataUrl) diff --git a/packages/tldraw/src/lib/utils/assets.ts b/packages/tldraw/src/lib/utils/assets.ts index 2c4c42ad8..0e905dda9 100644 --- a/packages/tldraw/src/lib/utils/assets.ts +++ b/packages/tldraw/src/lib/utils/assets.ts @@ -35,18 +35,6 @@ export function containBoxSize( } } -/** @public */ -export async function getIsGifAnimated(file: File): Promise { - return await new Promise((resolve, reject) => { - const reader = new FileReader() - reader.onerror = () => reject(reader.error) - reader.onload = () => { - resolve(reader.result ? isAnimated(reader.result as ArrayBuffer) : false) - } - reader.readAsArrayBuffer(file) - }) -} - /** * Get the size of an image from its source. * @@ -89,3 +77,15 @@ export async function getResizedImageDataUrl( export const DEFAULT_ACCEPTED_IMG_TYPE = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'] /** @public */ export const DEFAULT_ACCEPTED_VID_TYPE = ['video/mp4', 'video/quicktime'] + +/** @public */ +export async function isGifAnimated(file: File): Promise { + return await new Promise((resolve, reject) => { + const reader = new FileReader() + reader.onerror = () => reject(reader.error) + reader.onload = () => { + resolve(reader.result ? isAnimated(reader.result as ArrayBuffer) : false) + } + reader.readAsArrayBuffer(file) + }) +}