git.s-ol.nu isomorphic-kb-explorer / 4dd59ee
remove redundancy s-ol 4 months ago
1 changed file(s) with 26 addition(s) and 25 deletion(s). Raw diff Collapse all Expand all
99 const NOTE_OFF = 0b1000;
1010 const CCHANGE = 0b1011;
1111
12 /*
13 const noteon = (key, vel=127, chan=0) => [statbyte(0b1001, chan), key, vel];
14 const noteoff = (key, vel=127, chan=0) => [statbyte(0b1000, chan), key, vel];
15 const ccchange = (ctl, val, chan=0) => [statbyte(0b1011, chan), ctl, val];
16 */
17
1812 const clamp = (val, min=0, max=1) => Math.max(min, Math.min(val, max));
1913 const ramp = i => new Array(i).fill(true).map((_, i) => i);
2014 const mix = (i, a, b) => i * a + (1-i) * b;
2620 val: message.data[2] / 127,
2721 });
2822
29 const Hexagon = ({ x, y, children, state, note, send, major, scale }) => {
23 const Hexagon = ({ x, y, children, state, note, major, scale, noteon, noteoff }) => {
3024 if (major == 'row') {
3125 if (y % 2 == 0)
3226 x += 0.5;
4236 >
4337 <div
4438 className="inner"
45 onMouseDown={() => send(NOTE_ON, note)}
46 onMouseUp ={() => send(NOTE_OFF, note)}
39 onMouseDown={() => noteon(note)}
40 onMouseUp ={() => noteoff(note)}
4741 >
4842 {children}
4943 </div>
106100 };
107101 };
108102
109 const Keyboard = ({ w, h, send, layout: { major, map }, showMidi, state, scale }) => (
103 const Keyboard = ({ w, h, layout: { major, map }, showMidi, state, scale, noteon, noteoff }) => (
110104 <div
111105 className={`keyboard ${major}-major`}
112106 style={{
122116 return (
123117 <Hexagon
124118 key={x + ',' + y}
125 x={x} y={y}
126 note={note}
119 x={x} y={y} note={note}
127120 state={state[note]}
128 send={send}
121 scale={onCore ? "core" : (onScale ? "" : "disabled")}
122 noteon={noteon}
123 noteoff={noteoff}
129124 major={major}
130 scale={onCore ? "core" : (onScale ? "" : "disabled")}
131125 >
132126 {showMidi ? note : notes.music[note % 12]}
133127 </Hexagon>
195189 setTimeout(() => this.onmessage({ cmd: NOTE_OFF, note }), 250);
196190 }
197191
198 send = (command, note, vel=127) => {
192 send(command, note, vel=127) {
199193 if (command === NOTE_ON && this.state.offset === null)
200194 this.setState({ offset: note });
201195
204198
205199 const msg = [statbyte(command, 0), note, vel];
206200 this.props.midiout.send(msg);
201 }
202
203 noteon(note) {
204 if (this.state.offset === null)
205 this.setState({ offset: note });
206
207 this.setState(({ state }) => ({ state: { ...state, [note]: true } }));
208 this.send(NOTE_ON, note);
209 }
210
211 noteoff(note) {
212 this.setState(({ state }) => ({ state: { ...state, [note]: false } }));
213 this.send(NOTE_OFF, note);
207214 }
208215
209216 onlayout = (e) => this.setState({ layout: e.target.value })
237244 const note = notes.key2midi[e.code];
238245 if (!note) return;
239246 e.preventDefault();
240
241 if (this.state.offset === null)
242 this.setState({ offset: note });
243
244 this.setState(({ state }) => ({ state: { ...state, [note]: true } }));
245 this.send(NOTE_ON, note);
247 this.noteon(note);
246248 }
247249
248250 onkeyup = (e) => {
251253 const note = notes.key2midi[e.code];
252254 if (!note) return;
253255 e.preventDefault();
254
255 this.setState(({ state }) => ({ state: { ...state, [note]: false } }));
256 this.send(NOTE_OFF, note);
256 this.noteoff(note);
257257 }
258258
259259 render() {
291291 <Keyboard
292292 w={12}
293293 h={4}
294 send={this.send}
294 noteon={this.noteon}
295 noteoff={this.noteoff}
295296 showMidi={showMidi}
296297 layout={layouts[layout]}
297298 scale={scale !== "none" && offset !== null && tallyup(scales[scale], offset)}