-
-
Notifications
You must be signed in to change notification settings - Fork 116
/
Text.svelte
47 lines (38 loc) · 1.13 KB
/
Text.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script lang="ts">
import { forwardEventHandlers, T, useThrelte } from '@threlte/core'
import { createEventDispatcher, tick } from 'svelte'
import { preloadFont, Text } from 'troika-three-text'
import { useSuspense } from '../../suspense/useSuspense'
import type { TextMesh } from './Text.svelte'
import type { TextProps } from './Text.svelte'
export let font: TextProps['font'] = undefined
export let characters: TextProps['characters'] = undefined
export let sdfGlyphSize: TextProps['sdfGlyphSize'] = undefined
export const ref = new Text() as TextMesh
const { invalidate } = useThrelte()
const dispatch = createEventDispatcher<{
sync: void
}>()
const component = forwardEventHandlers()
const onUpdate = async () => {
await tick()
ref.sync(() => {
invalidate()
dispatch('sync')
})
}
$: $$restProps && onUpdate()
const suspend = useSuspense()
$: suspend(new Promise<any>((res) => preloadFont({ font, characters, sdfGlyphSize }, res)))
</script>
<T
is={ref}
let:ref
{...$$restProps}
{font}
{characters}
{sdfGlyphSize}
bind:this={$component}
>
<slot {ref} />
</T>