0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c 'use strict';..l
0010: 65 74 20 73 76 67 20 3d 20 72 65 71 75 69 72 65 et svg = require
0020: 28 27 2e 2e 2f 75 74 69 6c 2f 73 76 67 27 29 3b ('../util/svg');
0030: 0a 6c 65 74 20 49 6e 74 65 72 66 61 63 65 20 3d .let Interface =
0040: 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 63 6f 72 require('../cor
0050: 65 2f 69 6e 74 65 72 66 61 63 65 27 29 3b 0a 6c e/interface');.l
0060: 65 74 20 42 75 74 74 6f 6e 54 65 6d 70 6c 61 74 et ButtonTemplat
0070: 65 20 3d 20 72 65 71 75 69 72 65 28 27 2e 2e 2f e = require('../
0080: 63 6f 6d 70 6f 6e 65 6e 74 73 2f 62 75 74 74 6f components/butto
0090: 6e 74 65 6d 70 6c 61 74 65 27 29 3b 0a 6c 65 74 ntemplate');.let
00a0: 20 74 6f 75 63 68 20 3d 20 72 65 71 75 69 72 65 touch = require
00b0: 28 27 2e 2e 2f 75 74 69 6c 2f 74 6f 75 63 68 27 ('../util/touch'
00c0: 29 3b 0a 0a 63 6c 61 73 73 20 50 69 61 6e 6f 4b );..class PianoK
00d0: 65 79 20 65 78 74 65 6e 64 73 20 42 75 74 74 6f ey extends Butto
00e0: 6e 54 65 6d 70 6c 61 74 65 20 7b 0a 0a 20 20 63 nTemplate {.. c
00f0: 6f 6e 73 74 72 75 63 74 6f 72 28 29 20 7b 0a 0a onstructor() {..
0100: 20 20 20 20 6c 65 74 20 6f 70 74 69 6f 6e 73 20 let options
0110: 3d 20 5b 27 76 61 6c 75 65 27 2c 27 6e 6f 74 65 = ['value','note
0120: 27 2c 27 63 6f 6c 6f 72 27 5d 3b 0a 0a 20 20 20 ','color'];..
0130: 20 6c 65 74 20 64 65 66 61 75 6c 74 73 20 3d 20 let defaults =
0140: 7b 0a 20 20 20 20 20 20 27 73 69 7a 65 27 3a 20 {. 'size':
0150: 5b 38 30 2c 38 30 5d 2c 0a 20 20 20 20 20 20 27 [80,80],. '
0160: 74 61 72 67 65 74 27 3a 20 66 61 6c 73 65 2c 0a target': false,.
0170: 20 20 20 20 20 20 27 6d 6f 64 65 27 3a 20 27 62 'mode': 'b
0180: 75 74 74 6f 6e 27 2c 0a 20 20 20 20 20 20 27 76 utton',. 'v
0190: 61 6c 75 65 27 3a 20 30 0a 20 20 20 20 7d 3b 0a alue': 0. };.
01a0: 0a 20 20 20 20 73 75 70 65 72 28 61 72 67 75 6d . super(argum
01b0: 65 6e 74 73 2c 6f 70 74 69 6f 6e 73 2c 64 65 66 ents,options,def
01c0: 61 75 6c 74 73 29 3b 0a 0a 20 20 20 20 74 68 69 aults);.. thi
01d0: 73 2e 6e 6f 74 65 20 3d 20 74 68 69 73 2e 73 65 s.note = this.se
01e0: 74 74 69 6e 67 73 2e 6e 6f 74 65 3b 0a 20 20 20 ttings.note;.
01f0: 20 74 68 69 73 2e 63 6f 6c 6f 72 20 3d 20 74 68 this.color = th
0200: 69 73 2e 73 65 74 74 69 6e 67 73 2e 63 6f 6c 6f is.settings.colo
0210: 72 3b 0a 0a 20 20 20 20 74 68 69 73 2e 63 6f 6c r;.. this.col
0220: 6f 72 73 20 3d 20 7b 0a 20 20 20 20 20 20 27 77 ors = {. 'w
0230: 27 3a 20 27 23 66 66 66 27 2c 0a 20 20 20 20 20 ': '#fff',.
0240: 20 27 62 27 3a 20 27 23 36 36 36 27 2c 0a 20 20 'b': '#666',.
0250: 20 20 7d 3b 0a 0a 20 20 20 20 74 68 69 73 2e 69 };.. this.i
0260: 6e 69 74 28 29 3b 0a 20 20 20 20 74 68 69 73 2e nit();. this.
0270: 72 65 6e 64 65 72 28 29 3b 0a 0a 20 20 7d 0a 0a render();.. }..
0280: 20 20 62 75 69 6c 64 46 72 61 6d 65 28 29 20 7b buildFrame() {
0290: 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e . this.elemen
02a0: 74 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 t = svg.create('
02b0: 73 76 67 27 29 3b 0a 20 20 20 20 74 68 69 73 2e svg');. this.
02c0: 65 6c 65 6d 65 6e 74 2e 73 65 74 41 74 74 72 69 element.setAttri
02d0: 62 75 74 65 28 27 77 69 64 74 68 27 2c 74 68 69 bute('width',thi
02e0: 73 2e 77 69 64 74 68 29 3b 0a 20 20 20 20 74 68 s.width);. th
02f0: 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 65 74 41 74 is.element.setAt
0300: 74 72 69 62 75 74 65 28 27 68 65 69 67 68 74 27 tribute('height'
0310: 2c 74 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 ,this.height);.
0320: 20 20 20 74 68 69 73 2e 70 61 72 65 6e 74 2e 61 this.parent.a
0330: 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e ppendChild(this.
0340: 65 6c 65 6d 65 6e 74 29 3b 0a 20 20 7d 0a 0a 20 element);. }..
0350: 20 62 75 69 6c 64 49 6e 74 65 72 66 61 63 65 28 buildInterface(
0360: 29 20 7b 0a 0a 20 20 20 20 74 68 69 73 2e 70 61 ) {.. this.pa
0370: 64 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 d = svg.create('
0380: 72 65 63 74 27 29 3b 0a 0a 20 20 20 20 74 68 69 rect');.. thi
0390: 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 s.element.append
03a0: 43 68 69 6c 64 28 74 68 69 73 2e 70 61 64 29 3b Child(this.pad);
03b0: 0a 0a 20 20 20 20 74 68 69 73 2e 69 6e 74 65 72 .. this.inter
03c0: 61 63 74 69 6f 6e 54 61 72 67 65 74 20 3d 20 74 actionTarget = t
03d0: 68 69 73 2e 70 61 64 3b 0a 0a 20 20 20 20 2f 2a his.pad;.. /*
03e0: 20 65 76 65 6e 74 73 20 2a 2f 0a 0a 20 20 20 20 events */..
03f0: 69 66 20 28 21 74 6f 75 63 68 2e 65 78 69 73 74 if (!touch.exist
0400: 73 29 20 7b 0a 0a 20 20 20 20 20 20 74 68 69 73 s) {.. this
0410: 2e 63 6c 69 63 6b 20 3d 20 28 29 20 3d 3e 20 7b .click = () => {
0420: 0a 20 20 20 20 20 20 2f 2f 20 20 63 6f 6e 73 6f . // conso
0430: 6c 65 2e 6c 6f 67 28 27 63 6c 69 63 6b 27 29 3b le.log('click');
0440: 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 70 69 . this.pi
0450: 61 6e 6f 2e 69 6e 74 65 72 61 63 74 69 6e 67 20 ano.interacting
0460: 3d 20 74 72 75 65 3b 0a 20 20 20 20 20 20 20 20 = true;.
0470: 74 68 69 73 2e 70 69 61 6e 6f 2e 70 61 69 6e 74 this.piano.paint
0480: 62 72 75 73 68 20 3d 20 21 74 68 69 73 2e 73 74 brush = !this.st
0490: 61 74 65 3b 0a 20 20 20 20 20 20 20 20 74 68 69 ate;. thi
04a0: 73 2e 64 6f 77 6e 28 74 68 69 73 2e 70 69 61 6e s.down(this.pian
04b0: 6f 2e 70 61 69 6e 74 62 72 75 73 68 29 3b 0a 20 o.paintbrush);.
04c0: 20 20 20 20 20 7d 3b 0a 0a 20 20 20 20 20 20 74 };.. t
04d0: 68 69 73 2e 70 61 64 2e 61 64 64 45 76 65 6e 74 his.pad.addEvent
04e0: 4c 69 73 74 65 6e 65 72 28 27 6d 6f 75 73 65 6f Listener('mouseo
04f0: 76 65 72 27 2c 20 28 29 20 3d 3e 20 7b 0a 20 20 ver', () => {.
0500: 20 20 20 20 20 20 69 66 20 28 74 68 69 73 2e 70 if (this.p
0510: 69 61 6e 6f 2e 69 6e 74 65 72 61 63 74 69 6e 67 iano.interacting
0520: 29 20 7b 0a 20 20 20 20 20 20 2f 2f 20 20 20 20 ) {. //
0530: 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 6d 6f 75 console.log('mou
0540: 73 65 6f 76 65 72 27 29 3b 0a 20 20 20 20 20 20 seover');.
0550: 20 20 20 20 74 68 69 73 2e 64 6f 77 6e 28 74 68 this.down(th
0560: 69 73 2e 70 69 61 6e 6f 2e 70 61 69 6e 74 62 72 is.piano.paintbr
0570: 75 73 68 29 3b 0a 20 20 20 20 20 20 20 20 7d 0a ush);. }.
0580: 20 20 20 20 20 20 7d 29 3b 0a 0a 0a 20 20 20 20 });...
0590: 20 20 74 68 69 73 2e 6d 6f 76 65 20 3d 20 28 29 this.move = ()
05a0: 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 69 66 => {. if
05b0: 20 28 74 68 69 73 2e 70 69 61 6e 6f 2e 69 6e 74 (this.piano.int
05c0: 65 72 61 63 74 69 6e 67 29 20 7b 0a 20 20 20 20 eracting) {.
05d0: 20 20 20 20 2f 2f 20 20 63 6f 6e 73 6f 6c 65 2e // console.
05e0: 6c 6f 67 28 27 6d 6f 76 65 27 29 3b 0a 20 20 20 log('move');.
05f0: 20 20 20 20 20 20 20 74 68 69 73 2e 62 65 6e 64 this.bend
0600: 28 29 3b 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 ();. }.
0610: 20 20 20 20 7d 3b 0a 0a 0a 20 20 20 20 20 20 74 };... t
0620: 68 69 73 2e 72 65 6c 65 61 73 65 20 3d 20 28 29 his.release = ()
0630: 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 74 68 => {. th
0640: 69 73 2e 70 69 61 6e 6f 2e 69 6e 74 65 72 61 63 is.piano.interac
0650: 74 69 6e 67 20 3d 20 66 61 6c 73 65 3b 0a 20 20 ting = false;.
0660: 20 20 20 20 2f 2f 20 20 63 6f 6e 73 6f 6c 65 2e // console.
0670: 6c 6f 67 28 27 72 65 6c 65 61 73 65 27 29 3b 0a log('release');.
0680: 20 20 20 20 20 20 2f 2f 20 20 74 68 69 73 2e 75 // this.u
0690: 70 28 29 3b 0a 20 20 20 20 20 20 7d 3b 0a 20 20 p();. };.
06a0: 20 20 20 20 74 68 69 73 2e 70 61 64 2e 61 64 64 this.pad.add
06b0: 45 76 65 6e 74 4c 69 73 74 65 6e 65 72 28 27 6d EventListener('m
06c0: 6f 75 73 65 75 70 27 2c 20 28 29 20 3d 3e 20 7b ouseup', () => {
06d0: 0a 20 20 20 20 20 20 20 20 69 66 20 28 74 68 69 . if (thi
06e0: 73 2e 70 69 61 6e 6f 2e 69 6e 74 65 72 61 63 74 s.piano.interact
06f0: 69 6e 67 29 20 7b 0a 20 20 20 20 20 20 20 20 2f ing) {. /
0700: 2f 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 / console.log('
0710: 6d 6f 75 73 65 75 70 27 29 3b 0a 20 20 20 20 20 mouseup');.
0720: 20 20 20 20 20 74 68 69 73 2e 75 70 28 29 3b 0a this.up();.
0730: 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 }.
0740: 7d 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 });. this.p
0750: 61 64 2e 61 64 64 45 76 65 6e 74 4c 69 73 74 65 ad.addEventListe
0760: 6e 65 72 28 27 6d 6f 75 73 65 6f 75 74 27 2c 20 ner('mouseout',
0770: 28 29 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 () => {.
0780: 69 66 20 28 74 68 69 73 2e 70 69 61 6e 6f 2e 69 if (this.piano.i
0790: 6e 74 65 72 61 63 74 69 6e 67 29 20 7b 0a 20 20 nteracting) {.
07a0: 20 20 20 20 20 20 2f 2f 20 20 63 6f 6e 73 6f 6c // consol
07b0: 65 2e 6c 6f 67 28 27 6d 6f 75 73 65 6f 75 74 27 e.log('mouseout'
07c0: 29 3b 0a 20 20 20 20 20 20 20 20 20 20 74 68 69 );. thi
07d0: 73 2e 75 70 28 29 3b 0a 20 20 20 20 20 20 20 20 s.up();.
07e0: 7d 0a 20 20 20 20 20 20 7d 29 3b 0a 0a 20 20 20 }. });..
07f0: 20 7d 0a 0a 20 20 7d 0a 0a 20 20 73 69 7a 65 49 }.. }.. sizeI
0800: 6e 74 65 72 66 61 63 65 28 29 20 7b 0a 0a 20 20 nterface() {..
0810: 20 20 20 20 20 20 2f 2f 6c 65 74 20 72 61 64 69 //let radi
0820: 75 73 20 3d 20 4d 61 74 68 2e 6d 69 6e 28 74 68 us = Math.min(th
0830: 69 73 2e 77 69 64 74 68 2c 74 68 69 73 2e 68 65 is.width,this.he
0840: 69 67 68 74 29 20 2f 20 35 3b 0a 20 20 20 20 20 ight) / 5;.
0850: 20 20 20 6c 65 74 20 72 61 64 69 75 73 20 3d 20 let radius =
0860: 30 3b 0a 0a 20 20 20 20 20 20 20 20 74 68 69 73 0;.. this
0870: 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 .pad.setAttribut
0880: 65 28 27 78 27 2c 30 2e 35 29 3b 0a 20 20 20 20 e('x',0.5);.
0890: 20 20 20 20 74 68 69 73 2e 70 61 64 2e 73 65 74 this.pad.set
08a0: 41 74 74 72 69 62 75 74 65 28 27 79 27 2c 30 2e Attribute('y',0.
08b0: 35 29 3b 0a 20 20 20 20 20 20 20 20 69 66 20 28 5);. if (
08c0: 74 68 69 73 2e 77 69 64 74 68 20 3e 20 32 29 20 this.width > 2)
08d0: 7b 0a 20 20 20 20 20 20 20 20 20 20 74 68 69 73 {. this
08e0: 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 .pad.setAttribut
08f0: 65 28 27 77 69 64 74 68 27 2c 20 74 68 69 73 2e e('width', this.
0900: 77 69 64 74 68 20 2d 20 31 29 3b 0a 20 20 20 20 width - 1);.
0910: 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 } else {.
0920: 20 20 20 20 20 20 20 74 68 69 73 2e 70 61 64 2e this.pad.
0930: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 77 69 setAttribute('wi
0940: 64 74 68 27 2c 20 74 68 69 73 2e 77 69 64 74 68 dth', this.width
0950: 29 3b 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 20 );. }.
0960: 20 20 20 20 20 69 66 20 28 74 68 69 73 2e 68 65 if (this.he
0970: 69 67 68 74 20 3e 20 32 29 20 7b 0a 20 20 20 20 ight > 2) {.
0980: 20 20 20 20 20 20 74 68 69 73 2e 70 61 64 2e 73 this.pad.s
0990: 65 74 41 74 74 72 69 62 75 74 65 28 27 68 65 69 etAttribute('hei
09a0: 67 68 74 27 2c 20 74 68 69 73 2e 68 65 69 67 68 ght', this.heigh
09b0: 74 29 3b 0a 20 20 20 20 20 20 20 20 7d 20 65 6c t);. } el
09c0: 73 65 20 7b 0a 20 20 20 20 20 20 20 20 20 20 74 se {. t
09d0: 68 69 73 2e 70 61 64 2e 73 65 74 41 74 74 72 69 his.pad.setAttri
09e0: 62 75 74 65 28 27 68 65 69 67 68 74 27 2c 20 74 bute('height', t
09f0: 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 20 20 his.height);.
0a00: 20 20 20 20 20 7d 0a 20 20 20 20 20 20 20 20 74 }. t
0a10: 68 69 73 2e 70 61 64 2e 73 65 74 41 74 74 72 69 his.pad.setAttri
0a20: 62 75 74 65 28 27 72 78 27 2c 20 72 61 64 69 75 bute('rx', radiu
0a30: 73 29 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 s);. this
0a40: 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 .pad.setAttribut
0a50: 65 28 27 72 79 27 2c 20 72 61 64 69 75 73 29 3b e('ry', radius);
0a60: 0a 0a 20 20 7d 0a 0a 20 20 72 65 6e 64 65 72 28 .. }.. render(
0a70: 29 20 7b 0a 20 20 20 20 69 66 20 28 21 74 68 69 ) {. if (!thi
0a80: 73 2e 73 74 61 74 65 29 20 7b 0a 20 20 20 20 20 s.state) {.
0a90: 20 74 68 69 73 2e 70 61 64 2e 73 65 74 41 74 74 this.pad.setAtt
0aa0: 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 ribute('fill', t
0ab0: 68 69 73 2e 63 6f 6c 6f 72 73 5b 74 68 69 73 2e his.colors[this.
0ac0: 63 6f 6c 6f 72 5d 29 3b 0a 20 20 20 20 7d 20 65 color]);. } e
0ad0: 6c 73 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 lse {. this
0ae0: 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 .pad.setAttribut
0af0: 65 28 27 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 e('fill', this.c
0b00: 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 olors.accent);.
0b10: 20 20 20 7d 0a 20 20 7d 0a 0a 7d 0a 0a 2f 2a 2a }. }..}../**
0b20: 0a 2a 20 50 69 61 6e 6f 0a 2a 0a 2a 20 40 64 65 .* Piano.*.* @de
0b30: 73 63 72 69 70 74 69 6f 6e 20 50 69 61 6e 6f 20 scription Piano
0b40: 6b 65 79 62 6f 61 72 64 20 69 6e 74 65 72 66 61 keyboard interfa
0b50: 63 65 0a 2a 0a 2a 20 40 64 65 6d 6f 20 3c 64 69 ce.*.* @demo <di
0b60: 76 20 6e 65 78 75 73 2d 75 69 3d 22 70 69 61 6e v nexus-ui="pian
0b70: 6f 22 3e 3c 2f 64 69 76 3e 0a 2a 0a 2a 20 40 65 o"></div>.*.* @e
0b80: 78 61 6d 70 6c 65 0a 2a 20 76 61 72 20 70 69 61 xample.* var pia
0b90: 6e 6f 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 50 no = new Nexus.P
0ba0: 69 61 6e 6f 28 27 23 74 61 72 67 65 74 27 29 0a iano('#target').
0bb0: 2a 0a 2a 20 40 65 78 61 6d 70 6c 65 0a 2a 20 76 *.* @example.* v
0bc0: 61 72 20 70 69 61 6e 6f 20 3d 20 6e 65 77 20 4e ar piano = new N
0bd0: 65 78 75 73 2e 50 69 61 6e 6f 28 27 23 74 61 72 exus.Piano('#tar
0be0: 67 65 74 27 2c 7b 0a 2a 20 20 20 20 20 27 73 69 get',{.* 'si
0bf0: 7a 65 27 3a 20 5b 35 30 30 2c 31 32 35 5d 2c 0a ze': [500,125],.
0c00: 2a 20 20 20 20 20 27 6d 6f 64 65 27 3a 20 27 62 * 'mode': 'b
0c10: 75 74 74 6f 6e 27 2c 20 20 2f 2f 20 27 62 75 74 utton', // 'but
0c20: 74 6f 6e 27 2c 20 27 74 6f 67 67 6c 65 27 2c 20 ton', 'toggle',
0c30: 6f 72 20 27 69 6d 70 75 6c 73 65 27 0a 2a 20 20 or 'impulse'.*
0c40: 20 20 20 27 6c 6f 77 4e 6f 74 65 27 3a 20 32 34 'lowNote': 24
0c50: 2c 0a 2a 20 20 20 20 20 27 68 69 67 68 4e 6f 74 ,.* 'highNot
0c60: 65 27 3a 20 36 30 0a 2a 20 7d 29 0a 2a 0a 2a 20 e': 60.* }).*.*
0c70: 40 6f 75 74 70 75 74 0a 2a 20 63 68 61 6e 67 65 @output.* change
0c80: 0a 2a 20 46 69 72 65 73 20 61 6e 79 20 74 69 6d .* Fires any tim
0c90: 65 20 61 20 6e 65 77 20 6b 65 79 20 69 73 20 70 e a new key is p
0ca0: 72 65 73 73 65 64 20 6f 72 20 72 65 6c 65 61 73 ressed or releas
0cb0: 65 64 20 3c 62 72 3e 0a 2a 20 54 68 65 20 65 76 ed <br>.* The ev
0cc0: 65 6e 74 20 64 61 74 61 20 69 73 20 61 6e 20 6f ent data is an o
0cd0: 62 6a 65 63 74 20 63 6f 6e 74 61 69 6e 69 6e 67 bject containing
0ce0: 20 3c 69 3e 6e 6f 74 65 3c 2f 69 3e 20 61 6e 64 <i>note</i> and
0cf0: 20 3c 69 3e 73 74 61 74 65 3c 2f 69 3e 20 70 72 <i>state</i> pr
0d00: 6f 70 65 72 74 69 65 73 2e 0a 2a 0a 2a 20 40 6f operties..*.* @o
0d10: 75 74 70 75 74 65 78 61 6d 70 6c 65 0a 2a 20 70 utputexample.* p
0d20: 69 61 6e 6f 2e 6f 6e 28 27 63 68 61 6e 67 65 27 iano.on('change'
0d30: 2c 66 75 6e 63 74 69 6f 6e 28 76 29 20 7b 0a 2a ,function(v) {.*
0d40: 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 76 console.log(v
0d50: 29 3b 0a 2a 20 7d 29 0a 2a 0a 2a 2f 0a 0a 65 78 );.* }).*.*/..ex
0d60: 70 6f 72 74 20 64 65 66 61 75 6c 74 20 63 6c 61 port default cla
0d70: 73 73 20 50 69 61 6e 6f 20 65 78 74 65 6e 64 73 ss Piano extends
0d80: 20 49 6e 74 65 72 66 61 63 65 20 7b 0a 0a 20 20 Interface {..
0d90: 63 6f 6e 73 74 72 75 63 74 6f 72 28 29 20 7b 0a constructor() {.
0da0: 0a 20 20 20 20 6c 65 74 20 6f 70 74 69 6f 6e 73 . let options
0db0: 20 3d 20 5b 27 76 61 6c 75 65 27 5d 3b 0a 0a 20 = ['value'];..
0dc0: 20 20 20 6c 65 74 20 64 65 66 61 75 6c 74 73 20 let defaults
0dd0: 3d 20 7b 0a 20 20 20 20 20 20 27 73 69 7a 65 27 = {. 'size'
0de0: 3a 20 5b 35 30 30 2c 31 32 35 5d 2c 0a 20 20 20 : [500,125],.
0df0: 20 20 20 27 6c 6f 77 4e 6f 74 65 27 3a 20 32 34 'lowNote': 24
0e00: 2c 0a 20 20 20 20 20 20 27 68 69 67 68 4e 6f 74 ,. 'highNot
0e10: 65 27 3a 20 36 30 2c 0a 20 20 20 20 20 20 27 6d e': 60,. 'm
0e20: 6f 64 65 27 3a 20 27 62 75 74 74 6f 6e 27 0a 20 ode': 'button'.
0e30: 20 20 20 7d 3b 0a 0a 20 20 20 20 73 75 70 65 72 };.. super
0e40: 28 61 72 67 75 6d 65 6e 74 73 2c 6f 70 74 69 6f (arguments,optio
0e50: 6e 73 2c 64 65 66 61 75 6c 74 73 29 3b 0a 0a 20 ns,defaults);..
0e60: 20 20 20 74 68 69 73 2e 6b 65 79 50 61 74 74 65 this.keyPatte
0e70: 72 6e 20 3d 20 5b 27 77 27 2c 27 62 27 2c 27 77 rn = ['w','b','w
0e80: 27 2c 27 62 27 2c 27 77 27 2c 27 77 27 2c 27 62 ','b','w','w','b
0e90: 27 2c 27 77 27 2c 27 62 27 2c 27 77 27 2c 27 62 ','w','b','w','b
0ea0: 27 2c 27 77 27 5d 3b 0a 0a 20 20 20 20 74 68 69 ','w'];.. thi
0eb0: 73 2e 70 61 69 6e 74 62 72 75 73 68 20 3d 20 66 s.paintbrush = f
0ec0: 61 6c 73 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e alse;.. this.
0ed0: 6d 6f 64 65 20 3d 20 74 68 69 73 2e 73 65 74 74 mode = this.sett
0ee0: 69 6e 67 73 2e 6d 6f 64 65 3b 0a 0a 20 20 20 20 ings.mode;..
0ef0: 74 68 69 73 2e 72 61 6e 67 65 20 3d 20 7b 0a 20 this.range = {.
0f00: 20 20 20 20 20 6c 6f 77 3a 20 74 68 69 73 2e 73 low: this.s
0f10: 65 74 74 69 6e 67 73 2e 6c 6f 77 4e 6f 74 65 2c ettings.lowNote,
0f20: 0a 20 20 20 20 20 20 68 69 67 68 3a 20 74 68 69 . high: thi
0f30: 73 2e 73 65 74 74 69 6e 67 73 2e 68 69 67 68 4e s.settings.highN
0f40: 6f 74 65 0a 20 20 20 20 7d 3b 0a 0a 20 20 20 20 ote. };..
0f50: 74 68 69 73 2e 72 61 6e 67 65 2e 73 69 7a 65 20 this.range.size
0f60: 3d 20 74 68 69 73 2e 72 61 6e 67 65 2e 68 69 67 = this.range.hig
0f70: 68 20 2d 20 74 68 69 73 2e 72 61 6e 67 65 2e 6c h - this.range.l
0f80: 6f 77 20 2b 20 31 3b 0a 0a 20 20 20 20 74 68 69 ow + 1;.. thi
0f90: 73 2e 6b 65 79 73 20 3d 20 5b 5d 3b 0a 0a 20 20 s.keys = [];..
0fa0: 20 20 74 68 69 73 2e 74 6f 67 67 6c 65 54 6f 20 this.toggleTo
0fb0: 3d 20 66 61 6c 73 65 3b 0a 0a 20 20 20 20 74 68 = false;.. th
0fc0: 69 73 2e 69 6e 69 74 28 29 3b 0a 20 20 20 20 74 is.init();. t
0fd0: 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 0a 20 his.render();..
0fe0: 20 7d 0a 0a 20 20 62 75 69 6c 64 46 72 61 6d 65 }.. buildFrame
0ff0: 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 65 6c () {. this.el
1000: 65 6d 65 6e 74 20 3d 20 64 6f 63 75 6d 65 6e 74 ement = document
1010: 2e 63 72 65 61 74 65 45 6c 65 6d 65 6e 74 28 27 .createElement('
1020: 64 69 76 27 29 3b 0a 20 20 20 20 74 68 69 73 2e div');. this.
1030: 65 6c 65 6d 65 6e 74 2e 73 74 79 6c 65 2e 70 6f element.style.po
1040: 73 69 74 69 6f 6e 20 3d 20 27 72 65 6c 61 74 69 sition = 'relati
1050: 76 65 27 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c ve';. this.el
1060: 65 6d 65 6e 74 2e 73 74 79 6c 65 2e 62 6f 72 64 ement.style.bord
1070: 65 72 52 61 64 69 75 73 20 3d 20 27 30 70 78 27 erRadius = '0px'
1080: 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 ;. this.eleme
1090: 6e 74 2e 73 74 79 6c 65 2e 64 69 73 70 6c 61 79 nt.style.display
10a0: 20 3d 20 27 62 6c 6f 63 6b 27 3b 0a 20 20 20 20 = 'block';.
10b0: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 79 this.element.sty
10c0: 6c 65 2e 77 69 64 74 68 20 3d 20 27 31 30 30 25 le.width = '100%
10d0: 27 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d ';. this.elem
10e0: 65 6e 74 2e 73 74 79 6c 65 2e 68 65 69 67 68 74 ent.style.height
10f0: 20 3d 20 27 31 30 30 25 27 3b 0a 20 20 20 20 74 = '100%';. t
1100: 68 69 73 2e 70 61 72 65 6e 74 2e 61 70 70 65 6e his.parent.appen
1110: 64 43 68 69 6c 64 28 74 68 69 73 2e 65 6c 65 6d dChild(this.elem
1120: 65 6e 74 29 3b 0a 20 20 7d 0a 0a 20 20 62 75 69 ent);. }.. bui
1130: 6c 64 49 6e 74 65 72 66 61 63 65 28 29 20 7b 0a ldInterface() {.
1140: 0a 20 20 20 20 74 68 69 73 2e 6b 65 79 73 20 3d . this.keys =
1150: 20 5b 5d 3b 0a 0a 20 20 20 20 66 6f 72 20 28 6c [];.. for (l
1160: 65 74 20 69 3d 30 3b 69 3c 74 68 69 73 2e 72 61 et i=0;i<this.ra
1170: 6e 67 65 2e 73 69 7a 65 3b 69 2b 2b 29 20 7b 0a nge.size;i++) {.
1180: 0a 20 20 20 20 20 20 6c 65 74 20 63 6f 6e 74 61 . let conta
1190: 69 6e 65 72 20 3d 20 64 6f 63 75 6d 65 6e 74 2e iner = document.
11a0: 63 72 65 61 74 65 45 6c 65 6d 65 6e 74 28 27 73 createElement('s
11b0: 70 61 6e 27 29 3b 0a 20 20 20 20 20 20 6c 65 74 pan');. let
11c0: 20 73 63 61 6c 65 49 6e 64 65 78 20 3d 20 28 69 scaleIndex = (i
11d0: 2b 74 68 69 73 2e 72 61 6e 67 65 2e 6c 6f 77 29 +this.range.low)
11e0: 20 25 20 74 68 69 73 2e 6b 65 79 50 61 74 74 65 % this.keyPatte
11f0: 72 6e 2e 6c 65 6e 67 74 68 3b 0a 0a 20 20 20 20 rn.length;..
1200: 20 20 6c 65 74 20 6b 65 79 20 3d 20 6e 65 77 20 let key = new
1210: 50 69 61 6e 6f 4b 65 79 28 63 6f 6e 74 61 69 6e PianoKey(contain
1220: 65 72 2c 20 7b 0a 20 20 20 20 20 20 20 20 20 20 er, {.
1230: 63 6f 6d 70 6f 6e 65 6e 74 3a 20 74 72 75 65 2c component: true,
1240: 0a 20 20 20 20 20 20 20 20 20 20 6e 6f 74 65 3a . note:
1250: 20 69 2b 74 68 69 73 2e 72 61 6e 67 65 2e 6c 6f i+this.range.lo
1260: 77 2c 0a 20 20 20 20 20 20 20 20 20 20 63 6f 6c w,. col
1270: 6f 72 3a 20 74 68 69 73 2e 6b 65 79 50 61 74 74 or: this.keyPatt
1280: 65 72 6e 5b 73 63 61 6c 65 49 6e 64 65 78 5d 2c ern[scaleIndex],
1290: 0a 20 20 20 20 20 20 20 20 20 20 6d 6f 64 65 3a . mode:
12a0: 20 74 68 69 73 2e 6d 6f 64 65 0a 20 20 20 20 20 this.mode.
12b0: 20 20 20 7d 2c 20 74 68 69 73 2e 6b 65 79 43 68 }, this.keyCh
12c0: 61 6e 67 65 2e 62 69 6e 64 28 74 68 69 73 2c 69 ange.bind(this,i
12d0: 2b 74 68 69 73 2e 72 61 6e 67 65 2e 6c 6f 77 29 +this.range.low)
12e0: 29 3b 0a 0a 20 20 20 20 20 20 6b 65 79 2e 70 69 );.. key.pi
12f0: 61 6e 6f 20 3d 20 74 68 69 73 3b 0a 0a 20 20 20 ano = this;..
1300: 20 20 20 69 66 20 28 74 6f 75 63 68 2e 65 78 69 if (touch.exi
1310: 73 74 73 29 20 7b 0a 20 20 20 20 20 20 20 20 6b sts) {. k
1320: 65 79 2e 70 61 64 2e 69 6e 64 65 78 20 3d 20 69 ey.pad.index = i
1330: 3b 0a 20 20 20 20 20 20 20 20 6b 65 79 2e 70 72 ;. key.pr
1340: 65 43 6c 69 63 6b 20 3d 20 6b 65 79 2e 70 72 65 eClick = key.pre
1350: 4d 6f 76 65 20 3d 20 6b 65 79 2e 70 72 65 52 65 Move = key.preRe
1360: 6c 65 61 73 65 20 3d 20 28 29 20 3d 3e 20 7b 7d lease = () => {}
1370: 3b 0a 20 20 20 20 20 20 20 20 6b 65 79 2e 63 6c ;. key.cl
1380: 69 63 6b 20 3d 20 6b 65 79 2e 6d 6f 76 65 20 3d ick = key.move =
1390: 20 6b 65 79 2e 72 65 6c 65 61 73 65 20 3d 20 28 key.release = (
13a0: 29 20 3d 3e 20 7b 7d 3b 0a 20 20 20 20 20 20 20 ) => {};.
13b0: 20 6b 65 79 2e 70 72 65 54 6f 75 63 68 20 3d 20 key.preTouch =
13c0: 6b 65 79 2e 70 72 65 54 6f 75 63 68 4d 6f 76 65 key.preTouchMove
13d0: 20 3d 20 6b 65 79 2e 70 72 65 54 6f 75 63 68 52 = key.preTouchR
13e0: 65 6c 65 61 73 65 20 3d 20 28 29 20 3d 3e 20 7b elease = () => {
13f0: 7d 3b 0a 20 20 20 20 20 20 20 20 6b 65 79 2e 74 };. key.t
1400: 6f 75 63 68 20 3d 20 6b 65 79 2e 74 6f 75 63 68 ouch = key.touch
1410: 4d 6f 76 65 20 3d 20 6b 65 79 2e 74 6f 75 63 68 Move = key.touch
1420: 52 65 6c 65 61 73 65 20 3d 20 28 29 20 3d 3e 20 Release = () =>
1430: 7b 7d 3b 0a 20 20 20 20 20 20 7d 0a 0a 20 20 20 {};. }..
1440: 20 20 20 74 68 69 73 2e 6b 65 79 73 2e 70 75 73 this.keys.pus
1450: 68 28 6b 65 79 29 3b 0a 20 20 20 20 20 20 74 68 h(key);. th
1460: 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e is.element.appen
1470: 64 43 68 69 6c 64 28 63 6f 6e 74 61 69 6e 65 72 dChild(container
1480: 29 3b 0a 0a 20 20 20 20 7d 0a 20 20 20 20 69 66 );.. }. if
1490: 20 28 74 6f 75 63 68 2e 65 78 69 73 74 73 29 20 (touch.exists)
14a0: 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 61 64 64 {. this.add
14b0: 54 6f 75 63 68 4c 69 73 74 65 6e 65 72 73 28 29 TouchListeners()
14c0: 3b 0a 20 20 20 20 7d 0a 0a 20 20 7d 0a 0a 20 20 ;. }.. }..
14d0: 73 69 7a 65 49 6e 74 65 72 66 61 63 65 28 29 20 sizeInterface()
14e0: 7b 0a 0a 20 20 20 20 6c 65 74 20 6b 65 79 58 20 {.. let keyX
14f0: 3d 20 30 3b 0a 0a 20 20 20 20 6c 65 74 20 6b 65 = 0;.. let ke
1500: 79 50 6f 73 69 74 69 6f 6e 73 20 3d 20 5b 5d 3b yPositions = [];
1510: 0a 0a 20 20 20 20 66 6f 72 20 28 6c 65 74 20 69 .. for (let i
1520: 3d 30 3b 69 3c 74 68 69 73 2e 72 61 6e 67 65 2e =0;i<this.range.
1530: 73 69 7a 65 3b 69 2b 2b 29 20 7b 0a 0a 20 20 20 size;i++) {..
1540: 20 20 20 6b 65 79 50 6f 73 69 74 69 6f 6e 73 2e keyPositions.
1550: 70 75 73 68 28 6b 65 79 58 29 3b 0a 0a 20 20 20 push(keyX);..
1560: 20 20 20 6c 65 74 20 73 63 61 6c 65 49 6e 64 65 let scaleInde
1570: 78 20 3d 20 28 69 2b 74 68 69 73 2e 72 61 6e 67 x = (i+this.rang
1580: 65 2e 6c 6f 77 29 20 25 20 74 68 69 73 2e 6b 65 e.low) % this.ke
1590: 79 50 61 74 74 65 72 6e 2e 6c 65 6e 67 74 68 3b yPattern.length;
15a0: 0a 20 20 20 20 20 20 6c 65 74 20 6e 65 78 74 53 . let nextS
15b0: 63 61 6c 65 49 6e 64 65 78 20 3d 20 28 69 2b 31 caleIndex = (i+1
15c0: 2b 74 68 69 73 2e 72 61 6e 67 65 2e 6c 6f 77 29 +this.range.low)
15d0: 20 25 20 74 68 69 73 2e 6b 65 79 50 61 74 74 65 % this.keyPatte
15e0: 72 6e 2e 6c 65 6e 67 74 68 3b 0a 20 20 20 20 20 rn.length;.
15f0: 20 69 66 20 28 69 2b 31 2b 74 68 69 73 2e 72 61 if (i+1+this.ra
1600: 6e 67 65 2e 6c 6f 77 20 3e 3d 20 74 68 69 73 2e nge.low >= this.
1610: 72 61 6e 67 65 2e 68 69 67 68 29 20 7b 0a 20 20 range.high) {.
1620: 20 20 20 20 20 20 6b 65 79 58 20 2b 3d 20 31 3b keyX += 1;
1630: 0a 20 20 20 20 20 20 7d 20 65 6c 73 65 20 69 66 . } else if
1640: 20 28 74 68 69 73 2e 6b 65 79 50 61 74 74 65 72 (this.keyPatter
1650: 6e 5b 73 63 61 6c 65 49 6e 64 65 78 5d 20 3d 3d n[scaleIndex] ==
1660: 3d 20 27 77 27 20 26 26 20 74 68 69 73 2e 6b 65 = 'w' && this.ke
1670: 79 50 61 74 74 65 72 6e 5b 6e 65 78 74 53 63 61 yPattern[nextSca
1680: 6c 65 49 6e 64 65 78 5d 20 3d 3d 3d 20 27 77 27 leIndex] === 'w'
1690: 29 20 7b 0a 20 20 20 20 20 20 20 20 6b 65 79 58 ) {. keyX
16a0: 20 2b 3d 20 31 3b 0a 20 20 20 20 20 20 7d 20 65 += 1;. } e
16b0: 6c 73 65 20 7b 0a 20 20 20 20 20 20 20 20 6b 65 lse {. ke
16c0: 79 58 20 2b 3d 20 30 2e 35 3b 0a 20 20 20 20 20 yX += 0.5;.
16d0: 20 7d 0a 20 20 20 20 7d 0a 20 20 20 20 6c 65 74 }. }. let
16e0: 20 6b 65 79 73 57 69 64 65 20 3d 20 6b 65 79 58 keysWide = keyX
16f0: 3b 0a 0a 0a 20 20 2f 2f 20 20 6c 65 74 20 70 61 ;... // let pa
1700: 64 64 69 6e 67 20 3d 20 74 68 69 73 2e 77 69 64 dding = this.wid
1710: 74 68 20 2f 20 31 32 30 3b 0a 20 20 20 20 6c 65 th / 120;. le
1720: 74 20 70 61 64 64 69 6e 67 20 3d 20 31 3b 0a 20 t padding = 1;.
1730: 20 20 20 6c 65 74 20 62 75 74 74 6f 6e 57 69 64 let buttonWid
1740: 74 68 20 3d 20 28 74 68 69 73 2e 77 69 64 74 68 th = (this.width
1750: 2d 70 61 64 64 69 6e 67 2a 32 29 20 2f 20 6b 65 -padding*2) / ke
1760: 79 73 57 69 64 65 3b 0a 20 20 20 20 6c 65 74 20 ysWide;. let
1770: 62 75 74 74 6f 6e 48 65 69 67 68 74 20 3d 20 28 buttonHeight = (
1780: 74 68 69 73 2e 68 65 69 67 68 74 2d 70 61 64 64 this.height-padd
1790: 69 6e 67 2a 32 29 20 2f 20 32 3b 0a 0a 20 20 20 ing*2) / 2;..
17a0: 20 66 6f 72 20 28 6c 65 74 20 69 3d 30 3b 69 3c for (let i=0;i<
17b0: 74 68 69 73 2e 6b 65 79 73 2e 6c 65 6e 67 74 68 this.keys.length
17c0: 3b 69 2b 2b 29 20 7b 0a 0a 20 20 20 20 20 20 6c ;i++) {.. l
17d0: 65 74 20 63 6f 6e 74 61 69 6e 65 72 20 3d 20 74 et container = t
17e0: 68 69 73 2e 6b 65 79 73 5b 69 5d 2e 70 61 72 65 his.keys[i].pare
17f0: 6e 74 3b 0a 20 20 20 20 20 20 63 6f 6e 74 61 69 nt;. contai
1800: 6e 65 72 2e 73 74 79 6c 65 2e 70 6f 73 69 74 69 ner.style.positi
1810: 6f 6e 20 3d 20 27 61 62 73 6f 6c 75 74 65 27 3b on = 'absolute';
1820: 0a 20 20 20 20 20 20 63 6f 6e 74 61 69 6e 65 72 . container
1830: 2e 73 74 79 6c 65 2e 6c 65 66 74 20 3d 20 28 6b .style.left = (k
1840: 65 79 50 6f 73 69 74 69 6f 6e 73 5b 69 5d 2a 62 eyPositions[i]*b
1850: 75 74 74 6f 6e 57 69 64 74 68 2b 70 61 64 64 69 uttonWidth+paddi
1860: 6e 67 29 20 2b 20 27 70 78 27 3b 0a 20 20 20 20 ng) + 'px';.
1870: 20 20 69 66 20 28 74 68 69 73 2e 6b 65 79 73 5b if (this.keys[
1880: 69 5d 2e 63 6f 6c 6f 72 20 3d 3d 3d 20 27 77 27 i].color === 'w'
1890: 29 20 7b 0a 20 20 20 20 20 20 20 20 63 6f 6e 74 ) {. cont
18a0: 61 69 6e 65 72 2e 73 74 79 6c 65 2e 74 6f 70 20 ainer.style.top
18b0: 3d 20 28 70 61 64 64 69 6e 67 29 20 2b 20 27 70 = (padding) + 'p
18c0: 78 27 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 x';. this
18d0: 2e 6b 65 79 73 5b 69 5d 2e 72 65 73 69 7a 65 28 .keys[i].resize(
18e0: 62 75 74 74 6f 6e 57 69 64 74 68 2c 20 62 75 74 buttonWidth, but
18f0: 74 6f 6e 48 65 69 67 68 74 2a 32 29 3b 0a 20 20 tonHeight*2);.
1900: 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 } else {.
1910: 20 20 20 20 20 63 6f 6e 74 61 69 6e 65 72 2e 73 container.s
1920: 74 79 6c 65 2e 7a 49 6e 64 65 78 20 3d 20 31 3b tyle.zIndex = 1;
1930: 0a 20 20 20 20 20 20 20 20 63 6f 6e 74 61 69 6e . contain
1940: 65 72 2e 73 74 79 6c 65 2e 74 6f 70 20 3d 20 70 er.style.top = p
1950: 61 64 64 69 6e 67 2b 27 70 78 27 3b 0a 20 20 20 adding+'px';.
1960: 20 20 20 20 20 74 68 69 73 2e 6b 65 79 73 5b 69 this.keys[i
1970: 5d 2e 72 65 73 69 7a 65 28 62 75 74 74 6f 6e 57 ].resize(buttonW
1980: 69 64 74 68 2c 20 62 75 74 74 6f 6e 48 65 69 67 idth, buttonHeig
1990: 68 74 2a 31 2e 31 29 3b 0a 20 20 20 20 20 20 7d ht*1.1);. }
19a0: 0a 0a 20 20 20 20 7d 0a 0a 20 20 7d 0a 0a 20 20 .. }.. }..
19b0: 63 6f 6c 6f 72 49 6e 74 65 72 66 61 63 65 28 29 colorInterface()
19c0: 20 7b 0a 0a 20 20 20 20 2f 2f 20 50 69 61 6e 6f {.. // Piano
19d0: 20 6b 65 79 73 20 64 6f 6e 27 74 20 61 63 74 75 keys don't actu
19e0: 61 6c 6c 79 20 68 61 76 65 20 61 20 73 74 72 6f ally have a stro
19f0: 6b 65 20 62 6f 72 64 65 72 0a 20 20 20 20 2f 2f ke border. //
1a00: 20 54 68 65 79 20 68 61 76 65 20 73 70 61 63 65 They have space
1a10: 20 62 65 74 77 65 65 6e 20 74 68 65 6d 2c 20 77 between them, w
1a20: 68 69 63 68 20 73 68 6f 77 73 20 74 68 65 20 50 hich shows the P
1a30: 69 61 6e 6f 20 62 67 20 63 6f 6c 6f 72 0a 20 20 iano bg color.
1a40: 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 this.element.s
1a50: 74 79 6c 65 2e 62 61 63 6b 67 72 6f 75 6e 64 43 tyle.backgroundC
1a60: 6f 6c 6f 72 20 3d 20 74 68 69 73 2e 63 6f 6c 6f olor = this.colo
1a70: 72 73 2e 6d 65 64 69 75 6d 4c 69 67 68 74 3b 0a rs.mediumLight;.
1a80: 0a 20 20 20 20 66 6f 72 20 28 6c 65 74 20 69 3d . for (let i=
1a90: 30 3b 69 3c 74 68 69 73 2e 6b 65 79 73 2e 6c 65 0;i<this.keys.le
1aa0: 6e 67 74 68 3b 69 2b 2b 29 20 7b 0a 20 20 20 20 ngth;i++) {.
1ab0: 20 20 74 68 69 73 2e 6b 65 79 73 5b 69 5d 2e 63 this.keys[i].c
1ac0: 6f 6c 6f 72 73 20 3d 20 7b 0a 20 20 20 20 20 20 olors = {.
1ad0: 20 20 27 77 27 3a 20 74 68 69 73 2e 63 6f 6c 6f 'w': this.colo
1ae0: 72 73 2e 6c 69 67 68 74 2c 0a 20 20 20 20 20 20 rs.light,.
1af0: 20 20 27 62 27 3a 20 74 68 69 73 2e 63 6f 6c 6f 'b': this.colo
1b00: 72 73 2e 64 61 72 6b 2c 0a 20 20 20 20 20 20 20 rs.dark,.
1b10: 20 27 61 63 63 65 6e 74 27 3a 20 74 68 69 73 2e 'accent': this.
1b20: 63 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 2c 0a 20 colors.accent,.
1b30: 20 20 20 20 20 20 20 27 62 6f 72 64 65 72 27 3a 'border':
1b40: 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 6d 65 64 this.colors.med
1b50: 69 75 6d 4c 69 67 68 74 0a 20 20 20 20 20 20 7d iumLight. }
1b60: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 6b 65 79 ;. this.key
1b70: 73 5b 69 5d 2e 63 6f 6c 6f 72 49 6e 74 65 72 66 s[i].colorInterf
1b80: 61 63 65 28 29 3b 0a 20 20 20 20 20 20 74 68 69 ace();. thi
1b90: 73 2e 6b 65 79 73 5b 69 5d 2e 72 65 6e 64 65 72 s.keys[i].render
1ba0: 28 29 3b 0a 20 20 20 20 7d 0a 0a 0a 20 20 7d 0a ();. }... }.
1bb0: 0a 20 20 6b 65 79 43 68 61 6e 67 65 28 6e 6f 74 . keyChange(not
1bc0: 65 2c 6f 6e 29 20 7b 0a 20 20 20 20 2f 2f 20 65 e,on) {. // e
1bd0: 6d 69 74 20 64 61 74 61 20 66 6f 72 20 61 6e 79 mit data for any
1be0: 20 6b 65 79 20 74 75 72 6e 69 6e 67 20 6f 6e 2f key turning on/
1bf0: 6f 66 66 0a 20 20 20 20 2f 2f 20 22 6e 6f 74 65 off. // "note
1c00: 22 20 69 73 20 74 68 65 20 6e 6f 74 65 20 76 61 " is the note va
1c10: 6c 75 65 0a 20 20 20 20 2f 2f 20 22 6f 6e 22 20 lue. // "on"
1c20: 69 73 20 61 20 62 6f 6f 6c 65 61 6e 20 77 68 65 is a boolean whe
1c30: 74 68 65 72 20 69 74 20 69 73 20 6f 6e 20 6f 72 ther it is on or
1c40: 20 6f 66 66 0a 20 20 20 20 2f 2f 20 69 6e 20 61 off. // in a
1c50: 66 74 65 72 74 6f 75 63 68 20 6d 6f 64 65 2c 20 ftertouch mode,
1c60: 22 6f 6e 3a 20 69 73 20 61 6e 20 6f 62 6a 65 63 "on: is an objec
1c70: 74 20 77 69 74 68 20 73 74 61 74 65 2f 78 2f 79 t with state/x/y
1c80: 20 70 72 6f 70 65 72 74 69 65 73 0a 20 20 20 20 properties.
1c90: 76 61 72 20 64 61 74 61 20 3d 20 7b 0a 20 20 20 var data = {.
1ca0: 20 20 20 6e 6f 74 65 3a 20 6e 6f 74 65 0a 20 20 note: note.
1cb0: 20 20 7d 3b 0a 20 20 20 20 69 66 20 28 74 79 70 };. if (typ
1cc0: 65 6f 66 20 6f 6e 20 3d 3d 3d 20 27 6f 62 6a 65 eof on === 'obje
1cd0: 63 74 27 29 20 7b 0a 20 20 20 20 20 20 64 61 74 ct') {. dat
1ce0: 61 2e 73 74 61 74 65 20 3d 20 6f 6e 2e 73 74 61 a.state = on.sta
1cf0: 74 65 3b 0a 20 20 20 20 2f 2f 20 20 64 61 74 61 te;. // data
1d00: 2e 78 20 3d 20 6f 6e 2e 78 0a 20 20 20 20 2f 2f .x = on.x. //
1d10: 20 20 64 61 74 61 2e 79 20 3d 20 6f 6e 2e 79 0a data.y = on.y.
1d20: 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 } else {.
1d30: 20 20 20 64 61 74 61 2e 73 74 61 74 65 20 3d 20 data.state =
1d40: 6f 6e 3b 0a 20 20 20 20 7d 0a 20 20 20 20 74 68 on;. }. th
1d50: 69 73 2e 65 6d 69 74 28 27 63 68 61 6e 67 65 27 is.emit('change'
1d60: 2c 64 61 74 61 29 3b 0a 20 20 7d 0a 0a 20 20 2f ,data);. }.. /
1d70: 2a 20 64 72 61 67 28 6e 6f 74 65 2c 6f 6e 29 20 * drag(note,on)
1d80: 7b 0a 20 20 20 20 74 68 69 73 2e 65 6d 69 74 28 {. this.emit(
1d90: 27 63 68 61 6e 67 65 27 2c 7b 0a 20 20 20 20 20 'change',{.
1da0: 20 6e 6f 74 65 3a 20 6e 6f 74 65 2c 0a 20 20 20 note: note,.
1db0: 20 20 20 73 74 61 74 65 3a 20 6f 6e 0a 20 20 20 state: on.
1dc0: 20 7d 29 3b 0a 20 20 7d 20 2a 2f 0a 0a 20 20 72 });. } */.. r
1dd0: 65 6e 64 65 72 28 29 20 7b 0a 20 20 20 20 2f 2f ender() {. //
1de0: 20 6c 6f 6f 70 20 74 68 72 6f 75 67 68 20 61 6e loop through an
1df0: 64 20 72 65 6e 64 65 72 20 74 68 65 20 6b 65 79 d render the key
1e00: 73 3f 0a 20 20 7d 0a 0a 20 20 61 64 64 54 6f 75 s?. }.. addTou
1e10: 63 68 4c 69 73 74 65 6e 65 72 73 28 29 20 7b 0a chListeners() {.
1e20: 20 20 20 20 74 68 69 73 2e 70 72 65 43 6c 69 63 this.preClic
1e30: 6b 20 3d 20 74 68 69 73 2e 70 72 65 4d 6f 76 65 k = this.preMove
1e40: 20 3d 20 74 68 69 73 2e 70 72 65 52 65 6c 65 61 = this.preRelea
1e50: 73 65 20 3d 20 28 29 20 3d 3e 20 7b 7d 3b 0a 20 se = () => {};.
1e60: 20 20 20 74 68 69 73 2e 63 6c 69 63 6b 20 3d 20 this.click =
1e70: 74 68 69 73 2e 6d 6f 76 65 20 3d 20 74 68 69 73 this.move = this
1e80: 2e 72 65 6c 65 61 73 65 20 3d 20 28 29 20 3d 3e .release = () =>
1e90: 20 7b 7d 3b 0a 20 20 20 20 74 68 69 73 2e 70 72 {};. this.pr
1ea0: 65 54 6f 75 63 68 20 3d 20 74 68 69 73 2e 70 72 eTouch = this.pr
1eb0: 65 54 6f 75 63 68 4d 6f 76 65 20 3d 20 74 68 69 eTouchMove = thi
1ec0: 73 2e 70 72 65 54 6f 75 63 68 52 65 6c 65 61 73 s.preTouchReleas
1ed0: 65 20 3d 20 28 29 20 3d 3e 20 7b 7d 3b 0a 20 20 e = () => {};.
1ee0: 20 20 74 68 69 73 2e 74 6f 75 63 68 20 3d 20 74 this.touch = t
1ef0: 68 69 73 2e 74 6f 75 63 68 4d 6f 76 65 20 3d 20 his.touchMove =
1f00: 74 68 69 73 2e 74 6f 75 63 68 52 65 6c 65 61 73 this.touchReleas
1f10: 65 20 3d 20 28 29 20 3d 3e 20 7b 7d 3b 0a 0a 20 e = () => {};..
1f20: 20 20 20 63 6f 6e 73 74 20 61 6c 6c 41 63 74 69 const allActi
1f30: 76 65 54 6f 75 63 68 65 73 20 3d 20 7b 7d 3b 0a veTouches = {};.
1f40: 20 20 20 20 63 6f 6e 73 74 20 6b 65 79 73 20 3d const keys =
1f50: 20 74 68 69 73 2e 6b 65 79 73 3b 0a 0a 20 20 20 this.keys;..
1f60: 20 66 75 6e 63 74 69 6f 6e 20 63 6c 6f 6e 65 54 function cloneT
1f70: 6f 75 63 68 28 74 6f 75 63 68 29 20 7b 0a 20 20 ouch(touch) {.
1f80: 20 20 20 20 72 65 74 75 72 6e 20 7b 20 69 64 65 return { ide
1f90: 6e 74 69 66 69 65 72 3a 20 74 6f 75 63 68 2e 69 ntifier: touch.i
1fa0: 64 65 6e 74 69 66 69 65 72 2c 20 63 6c 69 65 6e dentifier, clien
1fb0: 74 58 3a 20 74 6f 75 63 68 2e 63 6c 69 65 6e 74 tX: touch.client
1fc0: 58 2c 20 63 6c 69 65 6e 74 59 3a 20 74 6f 75 63 X, clientY: touc
1fd0: 68 2e 63 6c 69 65 6e 74 59 20 7d 3b 0a 20 20 20 h.clientY };.
1fe0: 20 7d 0a 0a 20 20 20 20 66 75 6e 63 74 69 6f 6e }.. function
1ff0: 20 75 70 64 61 74 65 4b 65 79 53 74 61 74 65 28 updateKeyState(
2000: 29 20 7b 0a 20 20 20 20 20 20 63 6f 6e 73 74 20 ) {. const
2010: 61 6c 6c 41 63 74 69 76 65 4b 65 79 73 20 3d 20 allActiveKeys =
2020: 7b 7d 3b 0a 0a 20 20 20 20 20 20 2f 2f 20 43 68 {};.. // Ch
2030: 65 63 6b 2f 73 65 74 20 22 6b 65 79 2d 64 6f 77 eck/set "key-dow
2040: 6e 22 20 73 74 61 74 75 73 20 66 6f 72 20 61 6c n" status for al
2050: 6c 20 6b 65 79 73 20 74 68 61 74 20 61 72 65 20 l keys that are
2060: 63 75 72 72 65 6e 74 6c 79 20 74 6f 75 63 68 65 currently touche
2070: 64 2e 0a 20 20 20 20 20 20 4f 62 6a 65 63 74 2e d.. Object.
2080: 6b 65 79 73 28 61 6c 6c 41 63 74 69 76 65 54 6f keys(allActiveTo
2090: 75 63 68 65 73 29 2e 66 6f 72 45 61 63 68 28 69 uches).forEach(i
20a0: 64 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 63 d => {. c
20b0: 6f 6e 73 74 20 74 6f 75 63 68 20 3d 20 61 6c 6c onst touch = all
20c0: 41 63 74 69 76 65 54 6f 75 63 68 65 73 5b 69 64 ActiveTouches[id
20d0: 5d 3b 0a 20 20 20 20 20 20 20 20 63 6f 6e 73 74 ];. const
20e0: 20 65 6c 20 3d 20 64 6f 63 75 6d 65 6e 74 2e 65 el = document.e
20f0: 6c 65 6d 65 6e 74 46 72 6f 6d 50 6f 69 6e 74 28 lementFromPoint(
2100: 74 6f 75 63 68 2e 63 6c 69 65 6e 74 58 2c 20 74 touch.clientX, t
2110: 6f 75 63 68 2e 63 6c 69 65 6e 74 59 29 3b 0a 20 ouch.clientY);.
2120: 20 20 20 20 20 20 20 6c 65 74 20 6b 65 79 20 3d let key =
2130: 20 65 6c 20 3f 20 6b 65 79 73 5b 65 6c 2e 69 6e el ? keys[el.in
2140: 64 65 78 5d 20 3a 20 6e 75 6c 6c 3b 0a 20 20 20 dex] : null;.
2150: 20 20 20 20 20 69 66 20 28 6b 65 79 29 20 7b 0a if (key) {.
2160: 20 20 20 20 20 20 20 20 20 20 61 6c 6c 41 63 74 allAct
2170: 69 76 65 4b 65 79 73 5b 65 6c 2e 69 6e 64 65 78 iveKeys[el.index
2180: 5d 20 3d 20 69 64 3b 0a 20 20 20 20 20 20 20 20 ] = id;.
2190: 20 20 69 66 20 28 21 6b 65 79 2e 73 74 61 74 65 if (!key.state
21a0: 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 ) {.
21b0: 6b 65 79 2e 64 6f 77 6e 28 29 3b 0a 20 20 20 20 key.down();.
21c0: 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 20 20 }.
21d0: 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 20 20 20 } else {.
21e0: 20 20 20 64 65 6c 65 74 65 20 61 6c 6c 41 63 74 delete allAct
21f0: 69 76 65 54 6f 75 63 68 65 73 5b 69 64 5d 3b 0a iveTouches[id];.
2200: 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 }.
2210: 7d 29 3b 0a 0a 20 20 20 20 20 20 2f 2f 20 53 65 });.. // Se
2220: 74 20 22 6b 65 79 2d 75 70 22 20 73 74 61 74 75 t "key-up" statu
2230: 73 20 66 6f 72 20 61 6c 6c 20 6b 65 79 73 20 74 s for all keys t
2240: 68 61 74 20 61 72 65 20 75 6e 74 6f 75 63 68 65 hat are untouche
2250: 64 2e 0a 20 20 20 20 20 20 6b 65 79 73 2e 66 6f d.. keys.fo
2260: 72 45 61 63 68 28 6b 65 79 20 3d 3e 20 7b 0a 20 rEach(key => {.
2270: 20 20 20 20 20 20 20 69 66 20 28 6b 65 79 2e 73 if (key.s
2280: 74 61 74 65 20 26 26 20 21 61 6c 6c 41 63 74 69 tate && !allActi
2290: 76 65 4b 65 79 73 5b 6b 65 79 2e 70 61 64 2e 69 veKeys[key.pad.i
22a0: 6e 64 65 78 5d 29 20 7b 0a 20 20 20 20 20 20 20 ndex]) {.
22b0: 20 20 20 6b 65 79 2e 75 70 28 29 3b 0a 20 20 20 key.up();.
22c0: 20 20 20 20 20 7d 0a 20 20 20 20 20 20 7d 29 3b }. });
22d0: 0a 20 20 20 20 7d 0a 0a 20 20 20 20 66 75 6e 63 . }.. func
22e0: 74 69 6f 6e 20 68 61 6e 64 6c 65 54 6f 75 63 68 tion handleTouch
22f0: 53 74 61 72 74 41 6e 64 4d 6f 76 65 28 65 29 20 StartAndMove(e)
2300: 7b 0a 20 20 20 20 20 20 65 2e 70 72 65 76 65 6e {. e.preven
2310: 74 44 65 66 61 75 6c 74 28 29 3b 0a 20 20 20 20 tDefault();.
2320: 20 20 65 2e 73 74 6f 70 50 72 6f 70 61 67 61 74 e.stopPropagat
2330: 69 6f 6e 28 29 3b 0a 20 20 20 20 20 20 66 6f 72 ion();. for
2340: 20 28 6c 65 74 20 69 20 3d 20 30 3b 20 69 20 3c (let i = 0; i <
2350: 20 65 2e 63 68 61 6e 67 65 64 54 6f 75 63 68 65 e.changedTouche
2360: 73 2e 6c 65 6e 67 74 68 3b 20 69 2b 2b 29 7b 0a s.length; i++){.
2370: 20 20 20 20 20 20 20 20 63 6f 6e 73 74 20 74 6f const to
2380: 75 63 68 20 3d 20 65 2e 63 68 61 6e 67 65 64 54 uch = e.changedT
2390: 6f 75 63 68 65 73 5b 69 5d 3b 0a 20 20 20 20 20 ouches[i];.
23a0: 20 20 20 61 6c 6c 41 63 74 69 76 65 54 6f 75 63 allActiveTouc
23b0: 68 65 73 5b 74 6f 75 63 68 2e 69 64 65 6e 74 69 hes[touch.identi
23c0: 66 69 65 72 5d 20 3d 20 63 6c 6f 6e 65 54 6f 75 fier] = cloneTou
23d0: 63 68 28 74 6f 75 63 68 29 3b 0a 20 20 20 20 20 ch(touch);.
23e0: 20 7d 0a 20 20 20 20 20 20 75 70 64 61 74 65 4b }. updateK
23f0: 65 79 53 74 61 74 65 28 29 3b 0a 20 20 20 20 7d eyState();. }
2400: 0a 0a 20 20 20 20 66 75 6e 63 74 69 6f 6e 20 68 .. function h
2410: 61 6e 64 6c 65 54 6f 75 63 68 45 6e 64 28 65 29 andleTouchEnd(e)
2420: 20 7b 0a 20 20 20 20 20 20 65 2e 70 72 65 76 65 {. e.preve
2430: 6e 74 44 65 66 61 75 6c 74 28 29 3b 0a 20 20 20 ntDefault();.
2440: 20 20 20 65 2e 73 74 6f 70 50 72 6f 70 61 67 61 e.stopPropaga
2450: 74 69 6f 6e 28 29 3b 0a 20 20 20 20 20 20 66 6f tion();. fo
2460: 72 20 28 6c 65 74 20 69 20 3d 20 30 3b 20 69 20 r (let i = 0; i
2470: 3c 20 65 2e 63 68 61 6e 67 65 64 54 6f 75 63 68 < e.changedTouch
2480: 65 73 2e 6c 65 6e 67 74 68 3b 20 69 2b 2b 29 7b es.length; i++){
2490: 0a 20 20 20 20 20 20 20 20 63 6f 6e 73 74 20 74 . const t
24a0: 6f 75 63 68 20 3d 20 65 2e 63 68 61 6e 67 65 64 ouch = e.changed
24b0: 54 6f 75 63 68 65 73 5b 69 5d 3b 0a 20 20 20 20 Touches[i];.
24c0: 20 20 20 20 64 65 6c 65 74 65 20 61 6c 6c 41 63 delete allAc
24d0: 74 69 76 65 54 6f 75 63 68 65 73 5b 74 6f 75 63 tiveTouches[touc
24e0: 68 2e 69 64 65 6e 74 69 66 69 65 72 5d 3b 0a 20 h.identifier];.
24f0: 20 20 20 20 20 7d 0a 20 20 20 20 20 20 75 70 64 }. upd
2500: 61 74 65 4b 65 79 53 74 61 74 65 28 29 3b 0a 20 ateKeyState();.
2510: 20 20 20 7d 0a 0a 20 20 20 20 74 68 69 73 2e 65 }.. this.e
2520: 6c 65 6d 65 6e 74 2e 61 64 64 45 76 65 6e 74 4c lement.addEventL
2530: 69 73 74 65 6e 65 72 28 27 74 6f 75 63 68 73 74 istener('touchst
2540: 61 72 74 27 2c 20 68 61 6e 64 6c 65 54 6f 75 63 art', handleTouc
2550: 68 53 74 61 72 74 41 6e 64 4d 6f 76 65 29 3b 0a hStartAndMove);.
2560: 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 this.element
2570: 2e 61 64 64 45 76 65 6e 74 4c 69 73 74 65 6e 65 .addEventListene
2580: 72 28 27 74 6f 75 63 68 6d 6f 76 65 27 2c 20 68 r('touchmove', h
2590: 61 6e 64 6c 65 54 6f 75 63 68 53 74 61 72 74 41 andleTouchStartA
25a0: 6e 64 4d 6f 76 65 29 3b 0a 20 20 20 20 74 68 69 ndMove);. thi
25b0: 73 2e 65 6c 65 6d 65 6e 74 2e 61 64 64 45 76 65 s.element.addEve
25c0: 6e 74 4c 69 73 74 65 6e 65 72 28 27 74 6f 75 63 ntListener('touc
25d0: 68 65 6e 64 27 2c 20 68 61 6e 64 6c 65 54 6f 75 hend', handleTou
25e0: 63 68 45 6e 64 29 3b 0a 20 20 7d 0a 0a 20 20 2f chEnd);. }.. /
25f0: 2a 2a 0a 20 20 44 65 66 69 6e 65 20 74 68 65 20 **. Define the
2600: 70 69 74 63 68 20 72 61 6e 67 65 20 28 6c 6f 77 pitch range (low
2610: 65 73 74 20 61 6e 64 20 68 69 67 68 65 73 74 20 est and highest
2620: 6e 6f 74 65 29 20 6f 66 20 74 68 65 20 70 69 61 note) of the pia
2630: 6e 6f 20 6b 65 79 62 6f 61 72 64 2e 0a 20 20 40 no keyboard.. @
2640: 70 61 72 61 6d 20 6c 6f 77 20 7b 6e 75 6d 62 65 param low {numbe
2650: 72 7d 20 4d 49 44 49 20 6e 6f 74 65 20 76 61 6c r} MIDI note val
2660: 75 65 20 6f 66 20 74 68 65 20 6c 6f 77 65 73 74 ue of the lowest
2670: 20 6e 6f 74 65 20 6f 6e 20 74 68 65 20 6b 65 79 note on the key
2680: 62 6f 61 72 64 0a 20 20 40 70 61 72 61 6d 20 68 board. @param h
2690: 69 67 68 20 7b 6e 75 6d 62 65 72 7d 20 4d 49 44 igh {number} MID
26a0: 49 20 6e 6f 74 65 20 76 61 6c 75 65 20 6f 66 20 I note value of
26b0: 74 68 65 20 68 69 67 68 65 73 74 20 6e 6f 74 65 the highest note
26c0: 20 6f 6e 20 74 68 65 20 6b 65 79 62 6f 61 72 64 on the keyboard
26d0: 0a 20 20 2a 2f 0a 20 20 73 65 74 52 61 6e 67 65 . */. setRange
26e0: 28 6c 6f 77 2c 68 69 67 68 29 20 7b 0a 20 20 20 (low,high) {.
26f0: 20 74 68 69 73 2e 72 61 6e 67 65 2e 6c 6f 77 20 this.range.low
2700: 3d 20 6c 6f 77 3b 0a 20 20 20 20 74 68 69 73 2e = low;. this.
2710: 72 61 6e 67 65 2e 68 69 67 68 20 3d 20 68 69 67 range.high = hig
2720: 68 3b 0a 20 20 20 20 74 68 69 73 2e 65 6d 70 74 h;. this.empt
2730: 79 28 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 75 y();. this.bu
2740: 69 6c 64 49 6e 74 65 72 66 61 63 65 28 29 3b 0a ildInterface();.
2750: 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 54 75 72 }.. /**. Tur
2760: 6e 20 61 20 6b 65 79 20 6f 6e 20 6f 72 20 6f 66 n a key on or of
2770: 66 20 75 73 69 6e 67 20 69 74 73 20 4d 49 44 49 f using its MIDI
2780: 20 6e 6f 74 65 20 76 61 6c 75 65 3b 0a 20 20 40 note value;. @
2790: 70 61 72 61 6d 20 6e 6f 74 65 20 7b 6e 75 6d 62 param note {numb
27a0: 65 72 7d 20 4d 49 44 49 20 6e 6f 74 65 20 76 61 er} MIDI note va
27b0: 6c 75 65 20 6f 66 20 74 68 65 20 6b 65 79 20 74 lue of the key t
27c0: 6f 20 63 68 61 6e 67 65 0a 20 20 40 70 61 72 61 o change. @para
27d0: 6d 20 6f 6e 20 7b 62 6f 6f 6c 65 61 6e 7d 20 57 m on {boolean} W
27e0: 68 65 74 68 65 72 20 74 68 65 20 6e 6f 74 65 20 hether the note
27f0: 73 68 6f 75 6c 64 20 74 75 72 6e 20 6f 6e 20 6f should turn on o
2800: 72 20 6f 66 66 0a 20 20 2a 2f 0a 20 20 74 6f 67 r off. */. tog
2810: 67 6c 65 4b 65 79 28 6e 6f 74 65 2c 20 6f 6e 29 gleKey(note, on)
2820: 20 7b 0a 20 20 20 20 74 68 69 73 2e 6b 65 79 73 {. this.keys
2830: 5b 6e 6f 74 65 2d 74 68 69 73 2e 72 61 6e 67 65 [note-this.range
2840: 2e 6c 6f 77 5d 2e 66 6c 69 70 28 6f 6e 29 3b 0a .low].flip(on);.
2850: 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 54 75 72 }.. /**. Tur
2860: 6e 20 61 20 6b 65 79 20 6f 6e 20 6f 72 20 6f 66 n a key on or of
2870: 66 20 75 73 69 6e 67 20 69 74 73 20 6b 65 79 20 f using its key
2880: 69 6e 64 65 78 20 6f 6e 20 74 68 65 20 70 69 61 index on the pia
2890: 6e 6f 20 69 6e 74 65 72 66 61 63 65 2e 0a 20 20 no interface..
28a0: 40 70 61 72 61 6d 20 69 6e 64 65 78 20 7b 6e 75 @param index {nu
28b0: 6d 62 65 72 7d 20 49 6e 64 65 78 20 6f 66 20 74 mber} Index of t
28c0: 68 65 20 6b 65 79 20 74 6f 20 63 68 61 6e 67 65 he key to change
28d0: 0a 20 20 40 70 61 72 61 6d 20 6f 6e 20 7b 62 6f . @param on {bo
28e0: 6f 6c 65 61 6e 7d 20 57 68 65 74 68 65 72 20 74 olean} Whether t
28f0: 68 65 20 6e 6f 74 65 20 73 68 6f 75 6c 64 20 74 he note should t
2900: 75 72 6e 20 6f 6e 20 6f 72 20 6f 66 66 0a 20 20 urn on or off.
2910: 2a 2f 0a 20 20 74 6f 67 67 6c 65 49 6e 64 65 78 */. toggleIndex
2920: 28 69 6e 64 65 78 2c 20 6f 6e 29 20 7b 0a 20 20 (index, on) {.
2930: 20 20 74 68 69 73 2e 6b 65 79 73 5b 69 6e 64 65 this.keys[inde
2940: 78 5d 2e 66 6c 69 70 28 6f 6e 29 3b 0a 20 20 7d x].flip(on);. }
2950: 0a 0a 7d 0a ..}.