Sidharth VinodandClaude Fable 5
b3c8bd6c28
Replace the writable+derived store pipeline in state.ts with a state.svelte.ts module: a deep $state inputState mutated only through the exported update functions, each of which persists the snapshot and re-validates it asynchronously into validatedState.current (with urls.current derived from it). Store subscriptions in components become $effect blocks, and the rough/grid toggles use function bindings. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
64 lines
1.9 KiB
Svelte
64 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { validatedState } from '$/util/state.svelte';
|
|
import * as Tooltip from '$lib/components/ui/tooltip';
|
|
import type { ComponentProps, Snippet } from 'svelte';
|
|
import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
|
|
|
|
let {
|
|
children,
|
|
domain,
|
|
shouldCheckDiagramType = true,
|
|
side = 'bottom',
|
|
labelPrefix = 'Opens your diagram in',
|
|
isVisible = true,
|
|
sharesData = true,
|
|
showPopup = true
|
|
}: {
|
|
children: Snippet;
|
|
domain: string;
|
|
shouldCheckDiagramType?: boolean;
|
|
side?: ComponentProps<typeof Tooltip.Content>['side'];
|
|
labelPrefix?: string;
|
|
isVisible?: boolean;
|
|
sharesData?: boolean;
|
|
showPopup?: boolean;
|
|
} = $props();
|
|
|
|
let shouldDisableComponent = $derived(
|
|
shouldCheckDiagramType && validatedState.current.diagramType === 'zenuml'
|
|
);
|
|
</script>
|
|
|
|
{#if isVisible}
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root delayDuration={100}>
|
|
<Tooltip.Trigger>
|
|
<div class={[shouldDisableComponent && 'pointer-events-none cursor-not-allowed grayscale']}>
|
|
{@render children()}
|
|
</div>
|
|
</Tooltip.Trigger>
|
|
{#if showPopup}
|
|
<Tooltip.Content {side} class="bg-secondary shadow-xl">
|
|
<div
|
|
class="flex cursor-help items-center gap-2"
|
|
title={sharesData
|
|
? 'Your diagram will be sent to the external service'
|
|
: 'Your diagram is not shared'}>
|
|
{#if shouldDisableComponent}
|
|
<div class="text-muted-foreground">
|
|
This diagram type is not supported in {domain}
|
|
</div>
|
|
{:else}
|
|
<ExternalLinkIcon />
|
|
<span class="flex items-center gap-1">
|
|
{labelPrefix}
|
|
<div class="text-accent">{domain}</div>
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</Tooltip.Content>
|
|
{/if}
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|
|
{/if}
|