You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.4 KiB
42 lines
1.4 KiB
<script lang="ts">
|
|
import { Slider } from '$uix/eidos/components/slider';
|
|
import { GradientBuilderProvider } from '$soma/components/gradient-builder';
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import { getGradientBuilderVisualContext } from './context.svelte';
|
|
import type { GradientBuilderAngleDialProps } from './types';
|
|
|
|
let { ...rest }: GradientBuilderAngleDialProps = $props();
|
|
|
|
const provider = GradientBuilderProvider.require();
|
|
const ctx = getGradientBuilderVisualContext();
|
|
const size = $derived(ctx?.getSize() ?? 'md');
|
|
|
|
const eidos = ActiveEidos.require();
|
|
const label = $derived(eidos.langs.ts('#?components.gradient-builder.angle-dial|Gradient angle'));
|
|
|
|
// Linear `angle` / conic `from`; radial has no angle so the dial is hidden.
|
|
const showDial = $derived(provider.kind === 'linear' || provider.kind === 'conic');
|
|
</script>
|
|
|
|
{#if showDial}
|
|
<div {...rest} data-gradient-builder-angle-dial>
|
|
<div data-gradient-builder-angle-dial-head>
|
|
<span data-gradient-builder-angle-dial-label>{label}</span>
|
|
<span data-gradient-builder-angle-dial-value>{Math.round(provider.angle)}°</span>
|
|
</div>
|
|
<Slider
|
|
{size}
|
|
min={0}
|
|
max={360}
|
|
step={1}
|
|
value={[provider.angle]}
|
|
onValueChange={(v) => provider.setAngle(v[0] ?? 0)}
|
|
onValueCommit={() => provider.commit()}
|
|
aria-label={label}
|
|
>
|
|
<Slider.Range />
|
|
<Slider.Thumb />
|
|
</Slider>
|
|
</div>
|
|
{/if}
|