this repo has no description
phaz.uk
1import './ControlBar.css';
2
3import { Accessor, createSignal, For, Match, Show, Switch } from 'solid-js';
4import { Node, NodeType } from '../structs/node';
5import { TextInput } from './TextInput';
6import { invoke } from '@tauri-apps/api/core';
7import { OSCMessage } from '../structs/OscMessage';
8import { ParameterList } from './ParameterList';
9import { NodeManager } from '../Mangers/NodeManager';
10
11export interface ControlBarProps{
12 node: Accessor<Node[]>,
13 lockMovement: ( lock: boolean ) => void
14}
15
16export let ControlBar = ( props: ControlBarProps ) => {
17 return (
18 <div class="control-bar">
19 <For each={props.node()[0]?.statics}>
20 { ( item ) => {
21 let [ popupOpen, setPopupOpen ] = createSignal(false);
22
23 return (
24 <div>
25 <Switch>
26 <Match when={item.type == NodeType.String}>
27 { item.name }
28 <div style={{ display: 'inline-block', 'margin-left': '10px' }}>
29 <input
30 type="text"
31 placeholder='Enter Value...'
32 value={item.value || ''}
33 onChange={( el ) => {
34 let value = el.target.value;
35 let node = props.node()[0]!;
36
37 item.value = value;
38 node.onStaticsUpdate(node);
39
40 NodeManager.Instance.UpdateConfig();
41 }} />
42 </div>
43 </Match>
44 <Match when={item.type == NodeType.Int}>
45 { item.name }
46 <div style={{ display: 'inline-block', 'margin-left': '10px' }}>
47 <input
48 type="number"
49 placeholder='Enter Value...'
50 value={item.value !== undefined ? item.value : ''}
51 onChange={( el ) => {
52 let value = el.target.value;
53 let node = props.node()[0]!;
54
55 item.value = parseInt(value);
56 node.onStaticsUpdate(node);
57
58 NodeManager.Instance.UpdateConfig();
59 }} />
60 </div>
61 </Match>
62 <Match when={item.type == NodeType.Float}>
63 { item.name }
64 <div style={{ display: 'inline-block', 'margin-left': '10px' }}>
65 <input
66 type="number"
67 placeholder='Enter Value...'
68 value={item.value !== undefined ? item.value : ''}
69 onChange={( el ) => {
70 let value = el.target.value;
71 let node = props.node()[0]!;
72
73 item.value = parseFloat(value);
74 node.onStaticsUpdate(node);
75
76 NodeManager.Instance.UpdateConfig();
77 }} />
78 </div>
79 </Match>
80 <Match when={item.type == NodeType.OSCAddress}>
81 { item.name }
82 <div style={{ display: 'inline-block', 'margin-left': '10px', width: '300px' }}>
83 <TextInput
84 placeholder='Enter OSC Address...'
85 value={item.value || ''}
86 requestSuggestions={async ( text: string ): Promise<string[]> => {
87 let addresses = await invoke<OSCMessage[]>('get_addresses');
88 return addresses.map(x => x.address).filter(x => x.toLowerCase().includes(text.toLowerCase()));
89 }}
90 change={( text ) => {
91 let node = props.node()[0]!;
92
93 item.value = text;
94 node.onStaticsUpdate(node);
95
96 NodeManager.Instance.UpdateConfig();
97 }} />
98 </div>
99 </Match>
100 <Match when={item.type == NodeType.ParameterList}>
101 <div class="button" onClick={() => {
102 let popup = !popupOpen();
103
104 props.lockMovement(popup);
105 setPopupOpen(popup);
106 }}>
107 { item.name }
108 </div>
109 <Show when={popupOpen()}>
110 <ParameterList
111 setPopupOpen={( open: boolean ) => {
112 setPopupOpen(open);
113 props.lockMovement(open);
114 }}
115 value={item.value}
116 changed={( value ) => {
117 let node = props.node()[0]!;
118
119 item.value = value;
120 node.onStaticsUpdate(node);
121
122 NodeManager.Instance.UpdateConfig();
123 }} />
124 </Show>
125 </Match>
126 </Switch>
127 </div>
128 )
129 }}
130 </For>
131 </div>
132 )
133}