65cdcff28c
* Fix tutorial basic * fix other tutorials * nit fix bug with button shrinking * tutorial works backwards * nit delete field on prev * remove empty app duplication and magic code * fix norefreshbar auto binding to false, making app dirty * fix and improve app tutorial * fix background runnable tutorial scroll * fix connection tutorial * mistake * isCurrentlyInTutorial global state * disable component navigation when in tutorial * ci
71 lines
2.1 KiB
Svelte
71 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
|
|
import { getContext, untrack } from 'svelte'
|
|
import type { Output } from '../../rx'
|
|
import type { AppViewerContext, ContextPanelContext } from '../../types'
|
|
import { recursivelyFilterKeyInJSON as recursivelyFilterInJSON } from '../appUtils'
|
|
|
|
interface Props {
|
|
componentId: string
|
|
hasContent?: boolean
|
|
suffix?: string
|
|
render?: boolean
|
|
}
|
|
|
|
let { componentId, hasContent = $bindable(false), suffix = '', render = true }: Props = $props()
|
|
const { worldStore, connectingInput } = getContext<AppViewerContext>('AppViewerContext')
|
|
const { search, hasResult } = getContext<ContextPanelContext>('ContextPanel')
|
|
|
|
let object = $state({})
|
|
|
|
function subscribeToAllOutputs(observableOutputs: Record<string, Output<any>> | undefined) {
|
|
if (observableOutputs) {
|
|
Object.entries(observableOutputs).forEach(([k, output]) => {
|
|
object[k] = undefined
|
|
output?.subscribe(
|
|
{
|
|
id: 'alloutputs-' + suffix + componentId + '-' + k,
|
|
next: (value) => {
|
|
if (!hasContent) {
|
|
hasContent = true
|
|
}
|
|
object[k] = value
|
|
}
|
|
},
|
|
object[k]
|
|
)
|
|
})
|
|
}
|
|
}
|
|
|
|
$effect(() => {
|
|
$worldStore?.outputsById?.[componentId]
|
|
untrack(() => {
|
|
subscribeToAllOutputs($worldStore?.outputsById?.[componentId])
|
|
})
|
|
})
|
|
let filtered = $derived(recursivelyFilterInJSON(object, $search, componentId))
|
|
$effect(() => {
|
|
$hasResult[componentId] = Object.keys(filtered).length > 0
|
|
})
|
|
</script>
|
|
|
|
{#if render && object != undefined && Object.keys(object).length > 0}
|
|
{#if $hasResult[componentId] || $search == ''}
|
|
<div class="pl-2 !cursor-pointer component-output-viewer-{componentId}" data-connection-button>
|
|
<ObjectViewer
|
|
json={filtered}
|
|
on:select
|
|
topBrackets={false}
|
|
pureViewer={!$connectingInput.opened}
|
|
allowCopy={!$connectingInput.opened}
|
|
connecting={$connectingInput.opened}
|
|
/>
|
|
</div>
|
|
{:else if $search.length > 0}
|
|
<div class="text-xs pl-2 text-tertiary">No results</div>
|
|
{:else}
|
|
<div class="text-xs pl-2 text-tertiary">No outputs</div>
|
|
{/if}
|
|
{/if}
|