Expose usePreloadAssets
(#3545)
Expose `usePreloadAssets` and make sure the exploded/sublibraries examples uses it. Before this change, fonts weren't loaded correctly for the exploded example. ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `docs` — Changes to the documentation, examples, or templates. - [x] `bugfix` — Bug fix
This commit is contained in:
parent
4507ce6378
commit
cce794e04b
5 changed files with 68 additions and 0 deletions
|
@ -1,6 +1,8 @@
|
||||||
import {
|
import {
|
||||||
ContextMenu,
|
ContextMenu,
|
||||||
DefaultContextMenuContent,
|
DefaultContextMenuContent,
|
||||||
|
ErrorScreen,
|
||||||
|
LoadingScreen,
|
||||||
TldrawEditor,
|
TldrawEditor,
|
||||||
TldrawHandles,
|
TldrawHandles,
|
||||||
TldrawScribble,
|
TldrawScribble,
|
||||||
|
@ -10,7 +12,9 @@ import {
|
||||||
defaultShapeTools,
|
defaultShapeTools,
|
||||||
defaultShapeUtils,
|
defaultShapeUtils,
|
||||||
defaultTools,
|
defaultTools,
|
||||||
|
usePreloadAssets,
|
||||||
} from 'tldraw'
|
} from 'tldraw'
|
||||||
|
import { defaultEditorAssetUrls } from 'tldraw/src/lib/utils/static-assets/assetUrls'
|
||||||
import 'tldraw/tldraw.css'
|
import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
// There's a guide at the bottom of this file!
|
// There's a guide at the bottom of this file!
|
||||||
|
@ -26,6 +30,16 @@ const defaultComponents = {
|
||||||
|
|
||||||
//[2]
|
//[2]
|
||||||
export default function ExplodedExample() {
|
export default function ExplodedExample() {
|
||||||
|
const assetLoading = usePreloadAssets(defaultEditorAssetUrls)
|
||||||
|
|
||||||
|
if (assetLoading.error) {
|
||||||
|
return <ErrorScreen>Could not load assets.</ErrorScreen>
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!assetLoading.done) {
|
||||||
|
return <LoadingScreen>Loading assets...</LoadingScreen>
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tldraw__editor">
|
<div className="tldraw__editor">
|
||||||
<TldrawEditor
|
<TldrawEditor
|
||||||
|
|
|
@ -2545,6 +2545,12 @@ export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): reado
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function useNativeClipboardEvents(): void;
|
export function useNativeClipboardEvents(): void;
|
||||||
|
|
||||||
|
// @public (undocumented)
|
||||||
|
export function usePreloadAssets(assetUrls: TLEditorAssetUrls): {
|
||||||
|
done: boolean;
|
||||||
|
error: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function useReadonly(): boolean;
|
export function useReadonly(): boolean;
|
||||||
|
|
||||||
|
|
|
@ -27982,6 +27982,52 @@
|
||||||
"parameters": [],
|
"parameters": [],
|
||||||
"name": "useNativeClipboardEvents"
|
"name": "useNativeClipboardEvents"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"kind": "Function",
|
||||||
|
"canonicalReference": "tldraw!usePreloadAssets:function(1)",
|
||||||
|
"docComment": "/**\n * @public\n */\n",
|
||||||
|
"excerptTokens": [
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "export declare function usePreloadAssets(assetUrls: "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Reference",
|
||||||
|
"text": "TLEditorAssetUrls",
|
||||||
|
"canonicalReference": "tldraw!~TLEditorAssetUrls:type"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "): "
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": "{\n done: boolean;\n error: boolean;\n}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"kind": "Content",
|
||||||
|
"text": ";"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"fileUrlPath": "packages/tldraw/src/lib/ui/hooks/usePreloadAssets.ts",
|
||||||
|
"returnTypeTokenRange": {
|
||||||
|
"startIndex": 3,
|
||||||
|
"endIndex": 4
|
||||||
|
},
|
||||||
|
"releaseTag": "Public",
|
||||||
|
"overloadIndex": 1,
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"parameterName": "assetUrls",
|
||||||
|
"parameterTypeTokenRange": {
|
||||||
|
"startIndex": 1,
|
||||||
|
"endIndex": 2
|
||||||
|
},
|
||||||
|
"isOptional": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"name": "usePreloadAssets"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"kind": "Function",
|
"kind": "Function",
|
||||||
"canonicalReference": "tldraw!useReadonly:function(1)",
|
"canonicalReference": "tldraw!useReadonly:function(1)",
|
||||||
|
|
|
@ -87,6 +87,7 @@ export { useExportAs } from './lib/ui/hooks/useExportAs'
|
||||||
export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
|
export { useKeyboardShortcuts } from './lib/ui/hooks/useKeyboardShortcuts'
|
||||||
export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
|
export { useLocalStorageState } from './lib/ui/hooks/useLocalStorageState'
|
||||||
export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
|
export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
|
||||||
|
export { usePreloadAssets } from './lib/ui/hooks/usePreloadAssets'
|
||||||
export { useReadonly } from './lib/ui/hooks/useReadonly'
|
export { useReadonly } from './lib/ui/hooks/useReadonly'
|
||||||
export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
|
export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
|
||||||
export {
|
export {
|
||||||
|
|
|
@ -56,6 +56,7 @@ function getTypefaces(assetUrls: TLEditorAssetUrls) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @public */
|
||||||
export function usePreloadAssets(assetUrls: TLEditorAssetUrls) {
|
export function usePreloadAssets(assetUrls: TLEditorAssetUrls) {
|
||||||
const typefaces = useMemo(() => getTypefaces(assetUrls), [assetUrls])
|
const typefaces = useMemo(() => getTypefaces(assetUrls), [assetUrls])
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue