show saved custom colours as possible options in colour picker

this is primarily for mobile clients, as qt currently ignores this
This commit is contained in:
llama 2025-09-18 17:41:35 +08:00
parent 7b347cf5ac
commit 42afefb3e3
No known key found for this signature in database
GPG key ID: 0B7543854B9413C3

View file

@ -55,6 +55,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onWheelDragX,
} from "./tools/tool-zoom";
import { fillMask } from "./tools/tool-fill";
import { getCustomColours } from "@generated/backend";
export let canvas;
export let iconSize;
@ -76,6 +77,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let colourRef: HTMLInputElement | undefined;
const colour = writable(SHAPE_MASK_COLOR);
const customColorPickerPalette = writable<string[]>([]);
async function loadCustomColours() {
customColorPickerPalette.set(
(await getCustomColours({})).colours.filter(
(hex) => !hex.startsWith("#ffffff"),
),
);
}
function onClick(event: MouseEvent) {
const upperCanvas = document.querySelector(".upper-canvas");
if (event.target == upperCanvas) {
@ -233,6 +244,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on(document, "touchstart", onTouchstart),
on(document, "mousemove", onMousemoveDocument),
);
loadCustomColours();
});
onDestroy(() => {
@ -241,7 +253,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<datalist id="colour-palette">
<option value={SHAPE_MASK_COLOR}></option>
<option>{SHAPE_MASK_COLOR}</option>
{#each $customColorPickerPalette as colour}
<option>{colour}</option>
{/each}
</datalist>
<input