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.
98 lines
3.0 KiB
98 lines
3.0 KiB
<script lang="ts" context="module">
|
|
let nextId = 0;
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { rgbString, type Color, stringifyColor, parseColor } from "$lib/models/color";
|
|
import { hsToHsl, kToRgb, xyToRgb } from "$lib/utils/color";
|
|
import ColorPicker, { selectedColorPicker } from "../ColorPicker.svelte";
|
|
import BFormOption from "./BFormOption.svelte";
|
|
import BFormParameter from "./BFormParameter.svelte";
|
|
|
|
export let value: string | null;
|
|
|
|
let colorPickerId = `BFormColorOption:${++nextId}`
|
|
|
|
let color: Color | null;
|
|
$: color = parseColor(value);
|
|
$: submit(color);
|
|
|
|
function toggle(event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement; }) {
|
|
if (event.shiftKey) {
|
|
if (color !== null) {
|
|
if ($selectedColorPicker !== colorPickerId) {
|
|
$selectedColorPicker = colorPickerId;
|
|
} else {
|
|
$selectedColorPicker = null;
|
|
}
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
if (color === null || (color.hs == null && color.k == null)) {
|
|
color = { k: 2750 }
|
|
$selectedColorPicker = colorPickerId;
|
|
} else {
|
|
color = null;
|
|
|
|
if ($selectedColorPicker === colorPickerId) {
|
|
$selectedColorPicker = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
function submit(color: Color | null) {
|
|
value = stringifyColor(color);
|
|
}
|
|
|
|
let colorStr = "";
|
|
$: {
|
|
if (color !== null) {
|
|
if (color.rgb != null) {
|
|
colorStr = rgbString(color.rgb);
|
|
} else if (color.hs != null) {
|
|
colorStr = hsToHsl(color.hs);
|
|
} else if (color.xy != null) {
|
|
colorStr = rgbString(xyToRgb(color.xy));
|
|
} else {
|
|
colorStr = rgbString(kToRgb(color.k || 2750));
|
|
}
|
|
} else {
|
|
colorStr = "#000000";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<BFormOption on:click={toggle} icon="palette" state={(color !== null) || null} color={colorStr}>
|
|
{#if color != null}
|
|
<div class="picker-wrapper">
|
|
<ColorPicker bind:color={color} id={colorPickerId} />
|
|
</div>
|
|
{/if}
|
|
{#if color?.xy != null}
|
|
<BFormParameter narrower label="X" type="number" max={1} step={0.01} bind:value={color.xy.x} />
|
|
<BFormParameter narrower label="Y" type="number" max={1} step={0.01} bind:value={color.xy.y} />
|
|
{/if}
|
|
{#if color?.hs != null}
|
|
<BFormParameter narrower label="Hue" type="number" max={360} step={1} bind:value={color.hs.hue} />
|
|
<BFormParameter narrower label="Sat" type="number" max={1} step={0.01} bind:value={color.hs.sat} />
|
|
{/if}
|
|
{#if color?.rgb != null}
|
|
<BFormParameter narrowest label="R" type="number" max={1} step={0.01} bind:value={color.rgb.red} />
|
|
<BFormParameter narrowest label="G" type="number" max={1} step={0.01} bind:value={color.rgb.green} />
|
|
<BFormParameter narrowest label="B" type="number" max={1} step={0.01} bind:value={color.rgb.blue} />
|
|
{/if}
|
|
{#if color?.k != null}
|
|
<BFormParameter narrow label="Kelvin" type="number" min={1000} max={12000} step={50} bind:value={color.k} />
|
|
{/if}
|
|
</BFormOption>
|
|
|
|
<style lang="sass">
|
|
div.picker-wrapper
|
|
position: relative
|
|
left: 0.5ch
|
|
top: -11ch
|
|
width: 0
|
|
height: 0
|
|
</style>
|