45 lines
1.2 KiB
Svelte
45 lines
1.2 KiB
Svelte
<svelte:options customElement={{
|
|
tag: "tinyflow-component",
|
|
shadow: "none",
|
|
// props: {
|
|
// options: { reflect: true, type: 'Object', attribute: 'options' },
|
|
// onInit: { reflect: true, type: 'Object', attribute: 'onInit' }
|
|
// },
|
|
}} />
|
|
|
|
<script lang="ts">
|
|
import {SvelteFlowProvider, type useSvelteFlow} from '@xyflow/svelte';
|
|
import TinyflowCore from './TinyflowCore.svelte';
|
|
import {store} from '#store/stores.svelte';
|
|
import type {TinyflowData, TinyflowOptions} from '#types';
|
|
import {setContext} from 'svelte';
|
|
|
|
const { options, onInit }: {
|
|
options: TinyflowOptions,
|
|
onInit: (svelteFlow: ReturnType<typeof useSvelteFlow>) => void,
|
|
} = $props();
|
|
|
|
let { data } = options;
|
|
let initialViewport = null;
|
|
|
|
if (typeof data === 'string') {
|
|
try {
|
|
data = JSON.parse(data.trim());
|
|
} catch (e) {
|
|
console.error('Invalid JSON data:', data);
|
|
}
|
|
}
|
|
initialViewport = (data as TinyflowData)?.viewport || null;
|
|
store.init(
|
|
(data as TinyflowData)?.nodes || [],
|
|
(data as TinyflowData)?.edges || [],
|
|
initialViewport,
|
|
);
|
|
setContext('tinyflow_options', options);
|
|
</script>
|
|
|
|
|
|
<SvelteFlowProvider>
|
|
<TinyflowCore {onInit} />
|
|
</SvelteFlowProvider>
|