script editor

frontend/src/lib/components/bforms/BFormColorOption.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
 	import { rgbString, type Color, stringifyColor, parseColor } from "$lib/models/color";
 	import { hsToHsl, kToRgb, xyToRgb } from "$lib/utils/color";
+	import { onMount } from "svelte";
 	import ColorPicker, { selectedColorPicker } from "../ColorPicker.svelte";
 	import BFormOption from "./BFormOption.svelte";
 	import BFormParameter from "./BFormParameter.svelte";
@@ -46,6 +47,18 @@
     value = stringifyColor(color);
   }
 
+  onMount(() => {
+    if (value !== null && $selectedColorPicker !== null) {
+      $selectedColorPicker = colorPickerId;
+    }
+
+    return () => {
+      if ($selectedColorPicker = colorPickerId) {
+        $selectedColorPicker = null;
+      } 
+    }
+  })
+
   let colorStr = "";
   $: {
     if (color !== null) {

frontend/src/lib/components/bforms/BFormOption.svelte

@@ -17,14 +17,15 @@
   export let icon: IconName = "check";
   export let unclickable: boolean = false;
   export let red: boolean = false;
+  export let alwaysOpen: boolean = false;
 
   const enabled = writable(state === true);
-  $: $enabled = state === true;
+  $: $enabled = state === true || alwaysOpen;
 
   setContext(ctxKey, { subscribe: enabled.subscribe });
 </script>
 
-<div class="bform-option" class:unclickable class:on={state === true} class:off={state === false} style="--color: {color}">
+<div class="bform-option" class:red class:unclickable class:on={state === true} class:off={state === false} style="--color: {color}">
   <Icon on:click block name={icon} />
   <div class="bform-option-body">
     <slot></slot>
@@ -42,24 +43,24 @@
     cursor: pointer
     background: $color-main1
 
-    :global(.icon)
+    > :global(div > .icon)
       padding: 0.1em 0.5ch
       padding-top: 0.45em
       color: $color-main2
 
     &.off
       background-color: $color-main2
-      :global(.icon)
+      > :global(div > .icon)
         color: $color-main4
 
     &.on
       background-color: $color-main2
-      :global(.icon)
+      > :global(div > .icon)
         color: var(--color)
 
     &.red
       background-color: $color-main2-red
-      :global(.icon)
+      > :global(div > .icon)
         color: $color-main6-redder
 
     &.unclickable

frontend/src/lib/components/bforms/BFormParameter.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { getBFormOptionEnabled } from "./BFormOption.svelte";
+	import Checkbox from "../Checkbox.svelte";
+import { getBFormOptionEnabled } from "./BFormOption.svelte";
 
   export let label: string;
-  export let type: "number" | "text" | "select";
-  export let value: number | string;
+  export let type: "number" | "text" | "select" | "checkbox";
+  export let value: number | string | boolean;
   export let wide: boolean = false;
   export let narrow: boolean = false;
   export let narrower: boolean = false;
@@ -23,6 +24,8 @@
       <input class="custom" on:blur on:focus type="number" bind:value={value} {min} {max} {step} />
     {:else if type === "text"}
       <input class="custom" on:blur on:focus type="text" bind:value={value} />
+    {:else if type === "checkbox"}
+      <Checkbox small centered noLabel bind:checked={value} />
     {:else if type === "select"}
       <select class="custom" bind:value={value}>
         {#each options as opt (opt.value)}
@@ -84,10 +87,7 @@
 
     &.wide
       > input, > label, > select
-        text-align: left
         width: 20rem
-      > label
-        padding-left: 0.2rch
 
     &.narrow
       > input, > label, > select