-
Notifications
You must be signed in to change notification settings - Fork 0
/
knobs.tsx
78 lines (66 loc) · 2.19 KB
/
knobs.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/** @jsxImportSource sigl */
import $ from 'sigl'
import { fitGrid } from 'presets-bar'
import { KnobElement } from 'x-knob'
export interface KnobsBarElement extends $.Element<KnobsBarElement> {}
export const knobsThemes = ['zen', 'ableton', 'dark', 'flat', 'sweet']
@$.element()
export class KnobsBarElement extends $.mix(HTMLElement, $.mixins.observed()) {
Knob = $.element(KnobElement)
knobs = new $.RefSet<KnobElement>([
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
// { id: cheapRandomId(), min: 0, max: 100, step: 0.01, value: 30 },
])
@$.attr.out() knobsTheme: typeof knobsThemes[0] = 'zen'
columns = 1
rows = 1
@$.attr() vertical = false
mounted($: KnobsBarElement['$']) {
$.effect(({ host, columns, rows }) => {
host.style.setProperty('--cols', '' + columns)
host.style.setProperty('--rows', '' + rows)
})
$.effect(({ size, knobs }) => {
Object.assign($, fitGrid(size.width, size.height, knobs.length))
})
$.render(({ Knob, knobs, knobsTheme }) => (
<>
<style>
{$.css /*css*/`
:host {
display: flex;
width: 100%;
height: 100%;
flex-wrap: wrap;
flex-direction: row;
}
${Knob} {
position: relative;
display: inline-flex;
width: calc(100% / var(--cols));
height: calc(100% / var(--rows));
}
${Knob}::part(svg) {
width: auto;
height: auto;
}
`('')}
</style>
{knobs.map(knob => (
<Knob
key={knob.id}
targetValue={knob.value}
{...knob}
theme={knobsTheme}
/>
))}
</>
))
}
}