105 lines
2.7 KiB
Svelte
105 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
|
|
import { type Color } from "@/wasm-communication/messages";
|
|
|
|
import ColorPicker from "@/components/floating-menus/ColorPicker.svelte";
|
|
import LayoutCol from "@/components/layout/LayoutCol.svelte";
|
|
import LayoutRow from "@/components/layout/LayoutRow.svelte";
|
|
import { Editor } from "@/wasm-communication/editor";
|
|
|
|
const editor = getContext<Editor>("editor");
|
|
|
|
export let primary: Color;
|
|
export let secondary: Color;
|
|
|
|
let primaryOpen = false;
|
|
let secondaryOpen = false;
|
|
|
|
function clickPrimarySwatch() {
|
|
primaryOpen = true;
|
|
secondaryOpen = false;
|
|
}
|
|
|
|
function clickSecondarySwatch() {
|
|
primaryOpen = false;
|
|
secondaryOpen = true;
|
|
}
|
|
|
|
function primaryColorChanged(color: Color) {
|
|
editor.instance.updatePrimaryColor(color.red, color.green, color.blue, color.alpha);
|
|
}
|
|
|
|
function secondaryColorChanged(color: Color) {
|
|
editor.instance.updateSecondaryColor(color.red, color.green, color.blue, color.alpha);
|
|
}
|
|
</script>
|
|
|
|
<LayoutCol class="swatch-pair">
|
|
<LayoutRow class="primary swatch">
|
|
<button on:click={clickPrimarySwatch} style:--swatch-color={primary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
|
|
<ColorPicker
|
|
open={primaryOpen}
|
|
on:open={({ detail }) => (primaryOpen = detail)}
|
|
color={primary}
|
|
on:color={({ detail }) => {
|
|
primary = detail;
|
|
primaryColorChanged(detail);
|
|
}}
|
|
direction="Right"
|
|
/>
|
|
</LayoutRow>
|
|
<LayoutRow class="secondary swatch">
|
|
<button on:click={clickSecondarySwatch} style:--swatch-color={secondary.toRgbaCSS()} data-floating-menu-spawner="no-hover-transfer" tabindex="0" />
|
|
<ColorPicker
|
|
open={secondaryOpen}
|
|
on:open={({ detail }) => (secondaryOpen = detail)}
|
|
color={secondary}
|
|
on:color={({ detail }) => {
|
|
secondary = detail;
|
|
secondaryColorChanged(detail);
|
|
}}
|
|
direction="Right"
|
|
/>
|
|
</LayoutRow>
|
|
</LayoutCol>
|
|
|
|
<style lang="scss" global>
|
|
.swatch-pair {
|
|
flex: 0 0 auto;
|
|
|
|
.swatch {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin: 0 2px;
|
|
position: relative;
|
|
|
|
> button {
|
|
--swatch-color: #ffffff;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
border: 2px var(--color-5-dullgray) solid;
|
|
box-shadow: 0 0 0 2px var(--color-3-darkgray);
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--color-transparent-checkered-background);
|
|
background-size: var(--color-transparent-checkered-background-size);
|
|
background-position: var(--color-transparent-checkered-background-position);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.floating-menu {
|
|
top: 50%;
|
|
right: -2px;
|
|
}
|
|
|
|
&.primary {
|
|
margin-bottom: -8px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|