Make exportToBlob public (#2983)

Solves #2939

Also converts to named arguments to make it easier to add arguments in
the future. We should be doing this everywhere from now on.

### Change Type


- [x] `minor` — New feature


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Exposes the exportToBlob function for library users
This commit is contained in:
David Sheldrick 2024-02-28 11:26:30 +00:00 committed by GitHub
parent b1e168b207
commit 22af179983
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 126 additions and 9 deletions

View file

@ -543,6 +543,14 @@ export function exportAs(editor: Editor, ids: TLShapeId[], format: TLExportType
// @public (undocumented)
export function ExportFileContentSubMenu(): JSX_2.Element;
// @public
export function exportToBlob({ editor, ids, format, opts, }: {
editor: Editor;
ids: TLShapeId[];
format: 'jpeg' | 'json' | 'png' | 'svg' | 'webp';
opts?: Partial<TLSvgOptions>;
}): Promise<Blob>;
// @public (undocumented)
export function ExtrasGroup(): JSX_2.Element;

View file

@ -6043,6 +6043,101 @@
"parameters": [],
"name": "ExportFileContentSubMenu"
},
{
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!exportToBlob:function(1)",
"docComment": "/**\n * Export the given shapes as a blob.\n *\n * @param editor - The editor instance.\n *\n * @param ids - The ids of the shapes to export.\n *\n * @param format - The format to export as.\n *\n * @param opts - Rendering options.\n *\n * @returns A promise that resolves to a blob.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function exportToBlob({ editor, ids, format, opts, }: "
},
{
"kind": "Content",
"text": "{\n editor: "
},
{
"kind": "Reference",
"text": "Editor",
"canonicalReference": "@tldraw/editor!Editor:class"
},
{
"kind": "Content",
"text": ";\n ids: "
},
{
"kind": "Reference",
"text": "TLShapeId",
"canonicalReference": "@tldraw/tlschema!TLShapeId:type"
},
{
"kind": "Content",
"text": "[];\n format: 'jpeg' | 'json' | 'png' | 'svg' | 'webp';\n opts?: "
},
{
"kind": "Reference",
"text": "Partial",
"canonicalReference": "!Partial:type"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "TLSvgOptions",
"canonicalReference": "@tldraw/editor!TLSvgOptions:type"
},
{
"kind": "Content",
"text": ">;\n}"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Reference",
"text": "Promise",
"canonicalReference": "!Promise:interface"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "Blob",
"canonicalReference": "!Blob:interface"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/tldraw/src/lib/utils/export/export.ts",
"returnTypeTokenRange": {
"startIndex": 11,
"endIndex": 15
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ editor, ids, format, opts, }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 10
},
"isOptional": false
}
],
"name": "exportToBlob"
},
{
"kind": "Function",
"canonicalReference": "@tldraw/tldraw!ExtrasGroup:function(1)",

View file

@ -115,7 +115,7 @@ export {
} from './lib/utils/assets/assets'
export { getEmbedInfo } from './lib/utils/embeds/embeds'
export { copyAs } from './lib/utils/export/copyAs'
export { getSvgAsImage, getSvgAsString } from './lib/utils/export/export'
export { exportToBlob, getSvgAsImage, getSvgAsString } from './lib/utils/export/export'
export { exportAs } from './lib/utils/export/exportAs'
export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
export { setDefaultEditorAssetUrls } from './lib/utils/static-assets/assetUrls'

View file

@ -156,12 +156,26 @@ export async function exportToString(
}
}
export async function exportToBlob(
editor: Editor,
ids: TLShapeId[],
format: 'svg' | 'png' | 'jpeg' | 'webp' | 'json',
opts = {} as Partial<TLSvgOptions>
): Promise<Blob> {
/**
* Export the given shapes as a blob.
* @param editor - The editor instance.
* @param ids - The ids of the shapes to export.
* @param format - The format to export as.
* @param opts - Rendering options.
* @returns A promise that resolves to a blob.
* @public
*/
export async function exportToBlob({
editor,
ids,
format,
opts = {} as Partial<TLSvgOptions>,
}: {
editor: Editor
ids: TLShapeId[]
format: 'svg' | 'png' | 'jpeg' | 'webp' | 'json'
opts?: Partial<TLSvgOptions>
}): Promise<Blob> {
switch (format) {
case 'svg':
return new Blob([await exportToString(editor, ids, 'svg', opts)], { type: 'text/plain' })
@ -205,7 +219,7 @@ export function exportToBlobPromise(
opts = {} as Partial<TLSvgOptions>
): { blobPromise: Promise<Blob>; mimeType: string } {
return {
blobPromise: exportToBlob(editor, ids, format, opts),
blobPromise: exportToBlob({ editor, ids, format, opts }),
mimeType: mimeTypeByFormat[format],
}
}

View file

@ -36,7 +36,7 @@ export async function exportAs(
}
name += `.${format}`
const blob = await exportToBlob(editor, ids, format, opts)
const blob = await exportToBlob({ editor, ids, format, opts })
const file = new File([blob], name, { type: blob.type })
downloadFile(file)
}