118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
import { Opt } from "lib/option"
|
|
import Gdk from "gi://Gdk"
|
|
import icons from "lib/icons"
|
|
|
|
export type RowProps<T> = {
|
|
opt: Opt<T>
|
|
title: string
|
|
note?: string
|
|
type?:
|
|
| "number"
|
|
| "color"
|
|
| "float"
|
|
| "object"
|
|
| "string"
|
|
| "enum"
|
|
| "boolean"
|
|
| "img"
|
|
| "font"
|
|
enums?: string[]
|
|
max?: number
|
|
min?: number
|
|
}
|
|
|
|
const EnumSetter = (opt: Opt<string>, values: string[]) => {
|
|
const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) })
|
|
const step = (dir: 1 | -1) => {
|
|
const i = values.findIndex(i => i === lbl.label)
|
|
opt.setValue(dir > 0
|
|
? i + dir > values.length - 1 ? values[0] : values[i + dir]
|
|
: i + dir < 0 ? values[values.length - 1] : values[i + dir],
|
|
)
|
|
}
|
|
const next = Widget.Button({
|
|
child: Widget.Icon(icons.ui.arrow.right),
|
|
on_clicked: () => step(+1),
|
|
})
|
|
const prev = Widget.Button({
|
|
child: Widget.Icon(icons.ui.arrow.left),
|
|
on_clicked: () => step(-1),
|
|
})
|
|
return Widget.Box({
|
|
class_name: "enum-setter",
|
|
children: [lbl, prev, next],
|
|
})
|
|
}
|
|
|
|
export const Inputter = <T>({
|
|
opt,
|
|
type = typeof opt.value as RowProps<T>["type"],
|
|
enums,
|
|
max = 1000,
|
|
min = 0,
|
|
}: RowProps<T>) => {
|
|
return Widget.Box({
|
|
class_name: "inputter-container",
|
|
setup: self => {
|
|
|
|
switch (type) {
|
|
case "number": return self.child = Widget.SpinButton({
|
|
setup(self) {
|
|
self.set_range(min, max)
|
|
self.set_increments(1, 5)
|
|
self.on("value-changed", () => opt.value = self.value as T)
|
|
self.hook(opt, () => self.value = opt.value as number)
|
|
},
|
|
})
|
|
|
|
case "float":
|
|
case "object": return self.child = Widget.Entry({
|
|
on_accept: self => opt.value = JSON.parse(self.text || ""),
|
|
setup: self => self.hook(opt, () => self.text = JSON.stringify(opt.value)),
|
|
})
|
|
|
|
case "string": return self.child = Widget.Entry({
|
|
on_accept: self => opt.value = self.text as T,
|
|
setup: self => self.hook(opt, () => self.text = opt.value as string),
|
|
})
|
|
|
|
case "enum": return self.child = EnumSetter(opt as unknown as Opt<string>, enums!)
|
|
case "boolean": return self.child = Widget.Switch()
|
|
.on("notify::active", self => opt.value = self.active as T)
|
|
.hook(opt, self => self.active = opt.value as boolean)
|
|
|
|
case "img": return self.child = Widget.FileChooserButton({
|
|
on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T },
|
|
})
|
|
|
|
case "font": return self.child = Widget.FontButton({
|
|
show_size: false,
|
|
use_size: false,
|
|
setup: self => self
|
|
.hook(opt, () => self.font = opt.value as string)
|
|
.on("font-set", ({ font }) => opt.value = font!
|
|
.split(" ").slice(0, -1).join(" ") as T),
|
|
})
|
|
|
|
case "color": return self.child = Widget.ColorButton()
|
|
.hook(opt, self => {
|
|
const rgba = new Gdk.RGBA()
|
|
rgba.parse(opt.value as string)
|
|
self.rgba = rgba
|
|
})
|
|
.on("color-set", ({ rgba: { red, green, blue } }) => {
|
|
const hex = (n: number) => {
|
|
const c = Math.floor(255 * n).toString(16)
|
|
return c.length === 1 ? `0${c}` : c
|
|
}
|
|
opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T
|
|
})
|
|
|
|
default: return self.child = Widget.Label({
|
|
label: `no setter with type ${type}`,
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|