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 64 6f 6d 20 3d 20 72 65 71 75 69 .let dom = requi
0040: 72 65 28 27 2e 2e 2f 75 74 69 6c 2f 64 6f 6d 27 re('../util/dom'
0050: 29 3b 0a 6c 65 74 20 49 6e 74 65 72 66 61 63 65 );.let Interface
0060: 20 3d 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 63 = require('../c
0070: 6f 72 65 2f 69 6e 74 65 72 66 61 63 65 27 29 3b ore/interface');
0080: 0a 6c 65 74 20 42 75 74 74 6f 6e 54 65 6d 70 6c .let ButtonTempl
0090: 61 74 65 20 3d 20 72 65 71 75 69 72 65 28 27 2e ate = require('.
00a0: 2e 2f 63 6f 6d 70 6f 6e 65 6e 74 73 2f 62 75 74 ./components/but
00b0: 74 6f 6e 74 65 6d 70 6c 61 74 65 27 29 3b 0a 6c tontemplate');.l
00c0: 65 74 20 4d 61 74 72 69 78 4d 6f 64 65 6c 20 3d et MatrixModel =
00d0: 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 6d 6f 64 require('../mod
00e0: 65 6c 73 2f 6d 61 74 72 69 78 27 29 3b 0a 6c 65 els/matrix');.le
00f0: 74 20 43 6f 75 6e 74 65 72 4d 6f 64 65 6c 20 3d t CounterModel =
0100: 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 6d 6f 64 require('../mod
0110: 65 6c 73 2f 63 6f 75 6e 74 65 72 27 29 3b 0a 6c els/counter');.l
0120: 65 74 20 49 6e 74 65 72 76 61 6c 20 3d 20 72 65 et Interval = re
0130: 71 75 69 72 65 28 27 2e 2e 2f 74 69 6d 65 2f 69 quire('../time/i
0140: 6e 74 65 72 76 61 6c 27 29 3b 0a 6c 65 74 20 74 nterval');.let t
0150: 6f 75 63 68 20 3d 20 72 65 71 75 69 72 65 28 27 ouch = require('
0160: 2e 2e 2f 75 74 69 6c 2f 74 6f 75 63 68 27 29 3b ../util/touch');
0170: 0a 0a 63 6c 61 73 73 20 4d 61 74 72 69 78 43 65 ..class MatrixCe
0180: 6c 6c 20 65 78 74 65 6e 64 73 20 42 75 74 74 6f ll extends Butto
0190: 6e 54 65 6d 70 6c 61 74 65 20 7b 0a 20 20 63 6f nTemplate {. co
01a0: 6e 73 74 72 75 63 74 6f 72 28 29 20 7b 0a 20 20 nstructor() {.
01b0: 20 20 6c 65 74 20 6f 70 74 69 6f 6e 73 20 3d 20 let options =
01c0: 5b 27 76 61 6c 75 65 27 5d 3b 0a 0a 20 20 20 20 ['value'];..
01d0: 6c 65 74 20 64 65 66 61 75 6c 74 73 20 3d 20 7b let defaults = {
01e0: 0a 20 20 20 20 20 20 73 69 7a 65 3a 20 5b 38 30 . size: [80
01f0: 2c 20 38 30 5d 2c 0a 20 20 20 20 20 20 74 61 72 , 80],. tar
0200: 67 65 74 3a 20 66 61 6c 73 65 2c 0a 20 20 20 20 get: false,.
0210: 20 20 6d 6f 64 65 3a 20 27 74 6f 67 67 6c 65 27 mode: 'toggle'
0220: 2c 0a 20 20 20 20 20 20 76 61 6c 75 65 3a 20 30 ,. value: 0
0230: 2c 0a 20 20 20 20 20 20 70 61 64 64 69 6e 67 52 ,. paddingR
0240: 6f 77 3a 20 32 2c 0a 20 20 20 20 20 20 70 61 64 ow: 2,. pad
0250: 64 69 6e 67 43 6f 6c 75 6d 6e 3a 20 32 0a 20 20 dingColumn: 2.
0260: 20 20 7d 3b 0a 0a 20 20 20 20 73 75 70 65 72 28 };.. super(
0270: 61 72 67 75 6d 65 6e 74 73 2c 20 6f 70 74 69 6f arguments, optio
0280: 6e 73 2c 20 64 65 66 61 75 6c 74 73 29 3b 0a 0a ns, defaults);..
0290: 20 20 20 20 74 68 69 73 2e 69 6e 64 65 78 20 3d this.index =
02a0: 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 69 this.settings.i
02b0: 6e 64 65 78 3b 0a 20 20 20 20 74 68 69 73 2e 72 ndex;. this.r
02c0: 6f 77 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e ow = this.settin
02d0: 67 73 2e 72 6f 77 3b 0a 20 20 20 20 74 68 69 73 gs.row;. this
02e0: 2e 63 6f 6c 75 6d 6e 20 3d 20 74 68 69 73 2e 73 .column = this.s
02f0: 65 74 74 69 6e 67 73 2e 63 6f 6c 75 6d 6e 3b 0a ettings.column;.
0300: 0a 20 20 20 20 74 68 69 73 2e 6d 61 74 72 69 78 . this.matrix
0310: 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 = this.settings
0320: 2e 6d 61 74 72 69 78 3b 0a 0a 20 20 20 20 2f 2a .matrix;.. /*
0330: 2a 0a 20 20 20 20 20 2a 20 20 41 6d 6f 75 6e 74 *. * Amount
0340: 20 6f 66 20 72 6f 77 20 70 61 64 64 69 6e 67 0a of row padding.
0350: 20 20 20 20 20 2a 20 20 40 74 79 70 65 20 7b 6e * @type {n
0360: 75 6d 62 65 72 7d 0a 20 20 20 20 20 2a 2f 0a 20 umber}. */.
0370: 20 20 20 74 68 69 73 2e 70 61 64 64 69 6e 67 52 this.paddingR
0380: 6f 77 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e ow = this.settin
0390: 67 73 2e 70 61 64 64 69 6e 67 52 6f 77 20 7c 7c gs.paddingRow ||
03a0: 20 64 65 66 61 75 6c 74 73 2e 70 61 64 64 69 6e defaults.paddin
03b0: 67 52 6f 77 3b 0a 0a 20 20 20 20 2f 2a 2a 0a 20 gRow;.. /**.
03c0: 20 20 20 20 2a 20 20 41 6d 6f 75 6e 74 20 6f 66 * Amount of
03d0: 20 63 6f 6c 75 6d 6e 20 70 61 64 64 69 6e 67 0a column padding.
03e0: 20 20 20 20 20 2a 20 20 40 74 79 70 65 20 7b 6e * @type {n
03f0: 75 6d 62 65 72 7d 0a 20 20 20 20 20 2a 2f 0a 20 umber}. */.
0400: 20 20 20 74 68 69 73 2e 70 61 64 64 69 6e 67 43 this.paddingC
0410: 6f 6c 75 6d 6e 20 3d 20 74 68 69 73 2e 73 65 74 olumn = this.set
0420: 74 69 6e 67 73 2e 70 61 64 64 69 6e 67 43 6f 6c tings.paddingCol
0430: 75 6d 6e 20 7c 7c 20 64 65 66 61 75 6c 74 73 2e umn || defaults.
0440: 70 61 64 64 69 6e 67 43 6f 6c 75 6d 6e 3b 0a 0a paddingColumn;..
0450: 20 20 20 20 74 68 69 73 2e 69 6e 74 65 72 61 63 this.interac
0460: 74 69 6e 67 20 3d 20 66 61 6c 73 65 3b 0a 20 20 ting = false;.
0470: 20 20 74 68 69 73 2e 70 61 69 6e 74 62 72 75 73 this.paintbrus
0480: 68 20 3d 20 66 61 6c 73 65 3b 0a 0a 20 20 20 20 h = false;..
0490: 74 68 69 73 2e 69 6e 69 74 28 29 3b 0a 20 20 20 this.init();.
04a0: 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a this.render();.
04b0: 20 20 7d 0a 0a 20 20 62 75 69 6c 64 46 72 61 6d }.. buildFram
04c0: 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 65 e() {. this.e
04d0: 6c 65 6d 65 6e 74 20 3d 20 73 76 67 2e 63 72 65 lement = svg.cre
04e0: 61 74 65 28 27 73 76 67 27 29 3b 0a 20 20 20 20 ate('svg');.
04f0: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 65 74 this.element.set
0500: 41 74 74 72 69 62 75 74 65 28 27 77 69 64 74 68 Attribute('width
0510: 27 2c 20 74 68 69 73 2e 77 69 64 74 68 29 3b 0a ', this.width);.
0520: 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 this.element
0530: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 68 .setAttribute('h
0540: 65 69 67 68 74 27 2c 20 74 68 69 73 2e 68 65 69 eight', this.hei
0550: 67 68 74 29 3b 0a 20 20 20 20 74 68 69 73 2e 65 ght);. this.e
0560: 6c 65 6d 65 6e 74 2e 73 74 79 6c 65 2e 74 6f 70 lement.style.top
0570: 20 3d 20 27 30 70 78 27 3b 0a 20 20 20 20 74 68 = '0px';. th
0580: 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 79 6c 65 is.element.style
0590: 2e 6c 65 66 74 20 3d 20 27 30 70 78 27 3b 0a 20 .left = '0px';.
05a0: 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e this.element.
05b0: 73 74 79 6c 65 2e 70 6f 73 69 74 69 6f 6e 20 3d style.position =
05c0: 20 27 61 62 73 6f 6c 75 74 65 27 3b 0a 20 20 20 'absolute';.
05d0: 20 74 68 69 73 2e 70 61 72 65 6e 74 2e 61 70 70 this.parent.app
05e0: 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 65 6c endChild(this.el
05f0: 65 6d 65 6e 74 29 3b 0a 20 20 7d 0a 0a 20 20 62 ement);. }.. b
0600: 75 69 6c 64 49 6e 74 65 72 66 61 63 65 28 29 20 uildInterface()
0610: 7b 0a 20 20 20 20 74 68 69 73 2e 70 61 64 20 3d {. this.pad =
0620: 20 73 76 67 2e 63 72 65 61 74 65 28 27 72 65 63 svg.create('rec
0630: 74 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c t');. this.el
0640: 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c ement.appendChil
0650: 64 28 74 68 69 73 2e 70 61 64 29 3b 0a 0a 20 20 d(this.pad);..
0660: 20 20 74 68 69 73 2e 69 6e 74 65 72 61 63 74 69 this.interacti
0670: 6f 6e 54 61 72 67 65 74 20 3d 20 74 68 69 73 2e onTarget = this.
0680: 70 61 64 3b 0a 0a 20 20 20 20 2f 2a 20 65 76 65 pad;.. /* eve
0690: 6e 74 73 20 2a 2f 0a 0a 20 20 20 20 69 66 20 28 nts */.. if (
06a0: 21 74 6f 75 63 68 2e 65 78 69 73 74 73 29 20 7b !touch.exists) {
06b0: 0a 20 20 20 20 20 20 74 68 69 73 2e 63 6c 69 63 . this.clic
06c0: 6b 20 3d 20 28 29 20 3d 3e 20 7b 0a 20 20 20 20 k = () => {.
06d0: 20 20 20 20 74 68 69 73 2e 6d 61 74 72 69 78 2e this.matrix.
06e0: 69 6e 74 65 72 61 63 74 69 6e 67 20 3d 20 74 72 interacting = tr
06f0: 75 65 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 ue;. this
0700: 2e 6d 61 74 72 69 78 2e 70 61 69 6e 74 62 72 75 .matrix.paintbru
0710: 73 68 20 3d 20 21 74 68 69 73 2e 73 74 61 74 65 sh = !this.state
0720: 3b 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 64 ;. this.d
0730: 6f 77 6e 28 74 68 69 73 2e 6d 61 74 72 69 78 2e own(this.matrix.
0740: 70 61 69 6e 74 62 72 75 73 68 29 3b 0a 20 20 20 paintbrush);.
0750: 20 20 20 7d 3b 0a 20 20 20 20 20 20 74 68 69 73 };. this
0760: 2e 70 61 64 2e 61 64 64 45 76 65 6e 74 4c 69 73 .pad.addEventLis
0770: 74 65 6e 65 72 28 27 6d 6f 75 73 65 6f 76 65 72 tener('mouseover
0780: 27 2c 20 28 29 20 3d 3e 20 7b 0a 20 20 20 20 20 ', () => {.
0790: 20 20 20 69 66 20 28 74 68 69 73 2e 6d 61 74 72 if (this.matr
07a0: 69 78 2e 69 6e 74 65 72 61 63 74 69 6e 67 29 20 ix.interacting)
07b0: 7b 0a 20 20 20 20 20 20 20 20 20 20 74 68 69 73 {. this
07c0: 2e 64 6f 77 6e 28 74 68 69 73 2e 6d 61 74 72 69 .down(this.matri
07d0: 78 2e 70 61 69 6e 74 62 72 75 73 68 29 3b 0a 20 x.paintbrush);.
07e0: 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 7d }. }
07f0: 29 3b 0a 0a 20 20 20 20 20 20 74 68 69 73 2e 6d );.. this.m
0800: 6f 76 65 20 3d 20 28 29 20 3d 3e 20 7b 7d 3b 0a ove = () => {};.
0810: 20 20 20 20 20 20 74 68 69 73 2e 70 61 64 2e 61 this.pad.a
0820: 64 64 45 76 65 6e 74 4c 69 73 74 65 6e 65 72 28 ddEventListener(
0830: 27 6d 6f 75 73 65 6d 6f 76 65 27 2c 20 65 20 3d 'mousemove', e =
0840: 3e 20 7b 0a 20 20 20 20 20 20 20 20 69 66 20 28 > {. if (
0850: 74 68 69 73 2e 6d 61 74 72 69 78 2e 69 6e 74 65 this.matrix.inte
0860: 72 61 63 74 69 6e 67 29 20 7b 0a 20 20 20 20 20 racting) {.
0870: 20 20 20 20 20 69 66 20 28 21 74 68 69 73 2e 6f if (!this.o
0880: 66 66 73 65 74 29 20 7b 0a 20 20 20 20 20 20 20 ffset) {.
0890: 20 20 20 20 20 74 68 69 73 2e 6f 66 66 73 65 74 this.offset
08a0: 20 3d 20 64 6f 6d 2e 66 69 6e 64 50 6f 73 69 74 = dom.findPosit
08b0: 69 6f 6e 28 74 68 69 73 2e 65 6c 65 6d 65 6e 74 ion(this.element
08c0: 29 3b 0a 20 20 20 20 20 20 20 20 20 20 7d 0a 20 );. }.
08d0: 20 20 20 20 20 20 20 20 20 74 68 69 73 2e 6d 6f this.mo
08e0: 75 73 65 20 3d 20 64 6f 6d 2e 6c 6f 63 61 74 65 use = dom.locate
08f0: 4d 6f 75 73 65 28 65 2c 20 74 68 69 73 2e 6f 66 Mouse(e, this.of
0900: 66 73 65 74 29 3b 0a 20 20 20 20 20 20 20 20 20 fset);.
0910: 20 74 68 69 73 2e 62 65 6e 64 28 29 3b 0a 20 20 this.bend();.
0920: 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 7d 29 }. })
0930: 3b 0a 0a 20 20 20 20 20 20 74 68 69 73 2e 72 65 ;.. this.re
0940: 6c 65 61 73 65 20 3d 20 28 29 20 3d 3e 20 7b 0a lease = () => {.
0950: 20 20 20 20 20 20 20 20 74 68 69 73 2e 6d 61 74 this.mat
0960: 72 69 78 2e 69 6e 74 65 72 61 63 74 69 6e 67 20 rix.interacting
0970: 3d 20 66 61 6c 73 65 3b 0a 20 20 20 20 20 20 7d = false;. }
0980: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 61 64 ;. this.pad
0990: 2e 61 64 64 45 76 65 6e 74 4c 69 73 74 65 6e 65 .addEventListene
09a0: 72 28 27 6d 6f 75 73 65 75 70 27 2c 20 28 29 20 r('mouseup', ()
09b0: 3d 3e 20 7b 0a 20 20 20 20 20 20 20 20 69 66 20 => {. if
09c0: 28 74 68 69 73 2e 6d 61 74 72 69 78 2e 69 6e 74 (this.matrix.int
09d0: 65 72 61 63 74 69 6e 67 29 20 7b 0a 20 20 20 20 eracting) {.
09e0: 20 20 20 20 20 20 74 68 69 73 2e 75 70 28 29 3b this.up();
09f0: 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 . }.
0a00: 20 7d 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e });. this.
0a10: 70 61 64 2e 61 64 64 45 76 65 6e 74 4c 69 73 74 pad.addEventList
0a20: 65 6e 65 72 28 27 6d 6f 75 73 65 6f 75 74 27 2c ener('mouseout',
0a30: 20 28 29 20 3d 3e 20 7b 0a 20 20 20 20 20 20 20 () => {.
0a40: 20 69 66 20 28 74 68 69 73 2e 6d 61 74 72 69 78 if (this.matrix
0a50: 2e 69 6e 74 65 72 61 63 74 69 6e 67 29 20 7b 0a .interacting) {.
0a60: 20 20 20 20 20 20 20 20 20 20 74 68 69 73 2e 75 this.u
0a70: 70 28 29 3b 0a 20 20 20 20 20 20 20 20 7d 0a 20 p();. }.
0a80: 20 20 20 20 20 7d 29 3b 0a 20 20 20 20 7d 0a 20 });. }.
0a90: 20 7d 0a 0a 20 20 73 69 7a 65 49 6e 74 65 72 66 }.. sizeInterf
0aa0: 61 63 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73 ace() {. this
0ab0: 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 .pad.setAttribut
0ac0: 65 28 27 78 27 2c 20 74 68 69 73 2e 70 61 64 64 e('x', this.padd
0ad0: 69 6e 67 43 6f 6c 75 6d 6e 20 2f 20 32 29 3b 0a ingColumn / 2);.
0ae0: 20 20 20 20 74 68 69 73 2e 70 61 64 2e 73 65 74 this.pad.set
0af0: 41 74 74 72 69 62 75 74 65 28 27 79 27 2c 20 74 Attribute('y', t
0b00: 68 69 73 2e 70 61 64 64 69 6e 67 52 6f 77 20 2f his.paddingRow /
0b10: 20 32 29 3b 0a 20 20 20 20 69 66 20 28 74 68 69 2);. if (thi
0b20: 73 2e 77 69 64 74 68 20 3e 20 32 29 20 7b 0a 20 s.width > 2) {.
0b30: 20 20 20 20 20 74 68 69 73 2e 70 61 64 2e 73 65 this.pad.se
0b40: 74 41 74 74 72 69 62 75 74 65 28 27 77 69 64 74 tAttribute('widt
0b50: 68 27 2c 20 74 68 69 73 2e 77 69 64 74 68 20 2d h', this.width -
0b60: 20 74 68 69 73 2e 70 61 64 64 69 6e 67 43 6f 6c this.paddingCol
0b70: 75 6d 6e 29 3b 0a 20 20 20 20 7d 20 65 6c 73 65 umn);. } else
0b80: 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 61 {. this.pa
0b90: 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 d.setAttribute('
0ba0: 77 69 64 74 68 27 2c 20 74 68 69 73 2e 77 69 64 width', this.wid
0bb0: 74 68 29 3b 0a 20 20 20 20 7d 0a 20 20 20 20 69 th);. }. i
0bc0: 66 20 28 74 68 69 73 2e 68 65 69 67 68 74 20 3e f (this.height >
0bd0: 20 32 29 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2) {. this
0be0: 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 .pad.setAttribut
0bf0: 65 28 27 68 65 69 67 68 74 27 2c 20 74 68 69 73 e('height', this
0c00: 2e 68 65 69 67 68 74 20 2d 20 74 68 69 73 2e 70 .height - this.p
0c10: 61 64 64 69 6e 67 52 6f 77 29 3b 0a 20 20 20 20 addingRow);.
0c20: 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 20 20 74 } else {. t
0c30: 68 69 73 2e 70 61 64 2e 73 65 74 41 74 74 72 69 his.pad.setAttri
0c40: 62 75 74 65 28 27 68 65 69 67 68 74 27 2c 20 74 bute('height', t
0c50: 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 20 20 his.height);.
0c60: 20 7d 0a 20 20 20 20 74 68 69 73 2e 70 61 64 2e }. this.pad.
0c70: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69 setAttribute('fi
0c80: 6c 6c 27 2c 20 74 68 69 73 2e 6d 61 74 72 69 78 ll', this.matrix
0c90: 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 29 3b 0a 20 .colors.fill);.
0ca0: 20 7d 0a 0a 20 20 72 65 6e 64 65 72 28 29 20 7b }.. render() {
0cb0: 0a 20 20 20 20 69 66 20 28 21 74 68 69 73 2e 73 . if (!this.s
0cc0: 74 61 74 65 29 20 7b 0a 20 20 20 20 20 20 74 68 tate) {. th
0cd0: 69 73 2e 70 61 64 2e 73 65 74 41 74 74 72 69 62 is.pad.setAttrib
0ce0: 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 68 69 73 ute('fill', this
0cf0: 2e 6d 61 74 72 69 78 2e 63 6f 6c 6f 72 73 2e 66 .matrix.colors.f
0d00: 69 6c 6c 29 3b 0a 20 20 20 20 7d 20 65 6c 73 65 ill);. } else
0d10: 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 61 {. this.pa
0d20: 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 d.setAttribute('
0d30: 66 69 6c 6c 27 2c 20 74 68 69 73 2e 6d 61 74 72 fill', this.matr
0d40: 69 78 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 ix.colors.accent
0d50: 29 3b 0a 20 20 20 20 7d 0a 20 20 7d 0a 7d 0a 0a );. }. }.}..
0d60: 2f 2a 2a 0a 20 2a 20 53 65 71 75 65 6e 63 65 72 /**. * Sequencer
0d70: 0a 20 2a 0a 20 2a 20 40 64 65 73 63 72 69 70 74 . *. * @descript
0d80: 69 6f 6e 20 47 72 69 64 20 6f 66 20 62 75 74 74 ion Grid of butt
0d90: 6f 6e 73 20 77 69 74 68 20 62 75 69 6c 74 2d 69 ons with built-i
0da0: 6e 20 73 74 65 70 20 73 65 71 75 65 6e 63 65 72 n step sequencer
0db0: 2e 0a 20 2a 0a 20 2a 20 40 64 65 6d 6f 20 3c 64 .. *. * @demo <d
0dc0: 69 76 20 6e 65 78 75 73 2d 75 69 3d 22 73 65 71 iv nexus-ui="seq
0dd0: 75 65 6e 63 65 72 22 20 73 74 79 6c 65 3d 22 77 uencer" style="w
0de0: 69 64 74 68 3a 34 30 30 70 78 3b 68 65 69 67 68 idth:400px;heigh
0df0: 74 3a 32 30 30 70 78 3b 22 3e 3c 2f 64 69 76 3e t:200px;"></div>
0e00: 0a 20 2a 0a 20 2a 20 40 65 78 61 6d 70 6c 65 0a . *. * @example.
0e10: 20 2a 20 76 61 72 20 73 65 71 75 65 6e 63 65 72 * var sequencer
0e20: 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 53 65 71 = new Nexus.Seq
0e30: 75 65 6e 63 65 72 28 27 23 74 61 72 67 65 74 27 uencer('#target'
0e40: 29 0a 20 2a 0a 20 2a 20 40 65 78 61 6d 70 6c 65 ). *. * @example
0e50: 0a 20 2a 20 76 61 72 20 73 65 71 75 65 6e 63 65 . * var sequence
0e60: 72 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 53 65 r = new Nexus.Se
0e70: 71 75 65 6e 63 65 72 28 27 23 74 61 72 67 65 74 quencer('#target
0e80: 27 2c 7b 0a 20 2a 20 20 27 73 69 7a 65 27 3a 20 ',{. * 'size':
0e90: 5b 34 30 30 2c 32 30 30 5d 2c 0a 20 2a 20 20 27 [400,200],. * '
0ea0: 6d 6f 64 65 27 3a 20 27 74 6f 67 67 6c 65 27 2c mode': 'toggle',
0eb0: 0a 20 2a 20 20 27 72 6f 77 73 27 3a 20 35 2c 0a . * 'rows': 5,.
0ec0: 20 2a 20 20 27 63 6f 6c 75 6d 6e 73 27 3a 20 31 * 'columns': 1
0ed0: 30 2c 0a 20 2a 20 20 27 70 61 64 64 69 6e 67 52 0,. * 'paddingR
0ee0: 6f 77 27 3a 20 31 30 2c 0a 20 2a 20 20 27 70 61 ow': 10,. * 'pa
0ef0: 64 64 69 6e 67 43 6f 6c 75 6d 6e 27 3a 20 32 30 ddingColumn': 20
0f00: 0a 20 2a 7d 29 0a 20 2a 0a 20 2a 20 40 6f 75 74 . *}). *. * @out
0f10: 70 75 74 0a 20 2a 20 63 68 61 6e 67 65 0a 20 2a put. * change. *
0f20: 20 46 69 72 65 73 20 77 68 65 6e 65 76 65 72 20 Fires whenever
0f30: 61 20 76 61 6c 75 65 20 69 73 20 72 65 63 65 69 a value is recei
0f40: 76 65 64 2e 20 46 6f 72 20 65 78 61 6d 70 6c 65 ved. For example
0f50: 2c 20 77 68 65 6e 20 63 6c 69 63 6b 69 6e 67 20 , when clicking
0f60: 61 20 63 65 6c 6c 20 66 72 6f 6d 20 6f 66 66 20 a cell from off
0f70: 74 6f 20 6f 6e 2e 20 3c 62 72 3e 0a 20 2a 20 54 to on. <br>. * T
0f80: 68 65 20 65 76 65 6e 74 20 64 61 74 61 20 69 73 he event data is
0f90: 20 61 6e 20 6f 62 6a 65 63 74 20 63 6f 6e 74 61 an object conta
0fa0: 69 6e 69 6e 67 20 3c 69 3e 72 6f 77 3c 2f 69 3e ining <i>row</i>
0fb0: 20 28 6e 75 6d 62 65 72 29 2c 20 3c 69 3e 63 6f (number), <i>co
0fc0: 6c 75 6d 6e 3c 2f 69 3e 20 28 6e 75 6d 62 65 72 lumn</i> (number
0fd0: 29 2c 20 61 6e 64 20 3c 69 3e 73 74 61 74 65 3c ), and <i>state<
0fe0: 2f 69 3e 20 28 62 6f 6f 6c 65 61 6e 29 20 70 72 /i> (boolean) pr
0ff0: 6f 70 65 72 74 69 65 73 2e 0a 20 2a 0a 20 2a 20 operties.. *. *
1000: 40 6f 75 74 70 75 74 65 78 61 6d 70 6c 65 0a 20 @outputexample.
1010: 2a 20 73 65 71 75 65 6e 63 65 72 2e 6f 6e 28 27 * sequencer.on('
1020: 63 68 61 6e 67 65 27 2c 66 75 6e 63 74 69 6f 6e change',function
1030: 28 76 29 20 7b 0a 20 2a 20 20 20 63 6f 6e 73 6f (v) {. * conso
1040: 6c 65 2e 6c 6f 67 28 76 29 3b 0a 20 2a 20 7d 29 le.log(v);. * })
1050: 0a 20 2a 0a 20 2a 20 40 6f 75 74 70 75 74 0a 20 . *. * @output.
1060: 2a 20 73 74 65 70 0a 20 2a 20 46 69 72 65 73 20 * step. * Fires
1070: 61 6e 79 20 74 69 6d 65 20 74 68 65 20 73 65 71 any time the seq
1080: 75 65 6e 63 65 72 20 73 74 65 70 73 20 74 6f 20 uencer steps to
1090: 74 68 65 20 6e 65 78 74 20 63 6f 6c 75 6d 6e 2c the next column,
10a0: 20 69 6e 20 73 65 71 75 65 63 65 20 6d 6f 64 65 in sequece mode
10b0: 2e 20 3c 62 72 3e 0a 20 2a 20 54 68 65 20 65 76 . <br>. * The ev
10c0: 65 6e 74 20 64 61 74 61 20 69 73 20 61 6e 20 3c ent data is an <
10d0: 69 3e 61 72 72 61 79 3c 2f 69 3e 20 63 6f 6e 74 i>array</i> cont
10e0: 61 69 6e 69 6e 67 20 61 6c 6c 20 76 61 6c 75 65 aining all value
10f0: 73 20 69 6e 20 74 68 65 20 63 6f 6c 75 6d 6e 2c s in the column,
1100: 20 3c 69 3e 62 6f 74 74 6f 6d 20 72 6f 77 20 66 <i>bottom row f
1110: 69 72 73 74 3c 2f 69 3e 2e 0a 20 2a 0a 20 2a 20 irst</i>.. *. *
1120: 40 6f 75 74 70 75 74 65 78 61 6d 70 6c 65 0a 20 @outputexample.
1130: 2a 20 73 65 71 75 65 6e 63 65 72 2e 6f 6e 28 27 * sequencer.on('
1140: 73 74 65 70 27 2c 66 75 6e 63 74 69 6f 6e 28 76 step',function(v
1150: 29 20 7b 0a 20 2a 20 20 20 63 6f 6e 73 6f 6c 65 ) {. * console
1160: 2e 6c 6f 67 28 76 29 3b 0a 20 2a 20 7d 29 0a 20 .log(v);. * }).
1170: 2a 2f 0a 0a 65 78 70 6f 72 74 20 64 65 66 61 75 */..export defau
1180: 6c 74 20 63 6c 61 73 73 20 53 65 71 75 65 6e 63 lt class Sequenc
1190: 65 72 20 65 78 74 65 6e 64 73 20 49 6e 74 65 72 er extends Inter
11a0: 66 61 63 65 20 7b 0a 20 20 63 6f 6e 73 74 72 75 face {. constru
11b0: 63 74 6f 72 28 29 20 7b 0a 20 20 20 20 6c 65 74 ctor() {. let
11c0: 20 6f 70 74 69 6f 6e 73 20 3d 20 5b 27 76 61 6c options = ['val
11d0: 75 65 27 5d 3b 0a 0a 20 20 20 20 6c 65 74 20 64 ue'];.. let d
11e0: 65 66 61 75 6c 74 73 20 3d 20 7b 0a 20 20 20 20 efaults = {.
11f0: 20 20 73 69 7a 65 3a 20 5b 34 30 30 2c 20 32 30 size: [400, 20
1200: 30 5d 2c 0a 20 20 20 20 20 20 6d 6f 64 65 3a 20 0],. mode:
1210: 27 74 6f 67 67 6c 65 27 2c 0a 20 20 20 20 20 20 'toggle',.
1220: 72 6f 77 73 3a 20 35 2c 0a 20 20 20 20 20 20 63 rows: 5,. c
1230: 6f 6c 75 6d 6e 73 3a 20 31 30 0a 20 20 20 20 7d olumns: 10. }
1240: 3b 0a 0a 20 20 20 20 73 75 70 65 72 28 61 72 67 ;.. super(arg
1250: 75 6d 65 6e 74 73 2c 20 6f 70 74 69 6f 6e 73 2c uments, options,
1260: 20 64 65 66 61 75 6c 74 73 29 3b 0a 0a 20 20 20 defaults);..
1270: 20 74 68 69 73 2e 61 63 74 69 76 65 20 3d 20 2d this.active = -
1280: 31 3b 0a 0a 20 20 20 20 2f 2a 2a 0a 20 20 20 20 1;.. /**.
1290: 20 2a 20 42 75 74 74 6f 6e 20 69 6e 74 65 72 61 * Button intera
12a0: 63 74 69 6f 6e 20 6d 6f 64 65 3a 20 73 65 65 20 ction mode: see
12b0: 42 75 74 74 6f 6e 0a 20 20 20 20 20 2a 20 40 74 Button. * @t
12c0: 79 70 65 20 7b 73 74 72 69 6e 67 7d 0a 20 20 20 ype {string}.
12d0: 20 20 2a 20 40 65 78 61 6d 70 6c 65 20 62 75 74 * @example but
12e0: 74 6f 6e 2e 6d 6f 64 65 20 3d 20 27 74 6f 67 67 ton.mode = 'togg
12f0: 6c 65 27 3b 0a 20 20 20 20 20 2a 2f 0a 20 20 20 le';. */.
1300: 20 74 68 69 73 2e 6d 6f 64 65 20 3d 20 74 68 69 this.mode = thi
1310: 73 2e 73 65 74 74 69 6e 67 73 2e 6d 6f 64 65 3b s.settings.mode;
1320: 0a 0a 20 20 20 20 2f 2a 2a 0a 20 20 20 20 20 2a .. /**. *
1330: 20 54 68 65 20 69 6e 74 65 72 76 61 6c 20 6f 62 The interval ob
1340: 6a 65 63 74 20 77 68 69 63 68 20 63 6f 6e 74 72 ject which contr
1350: 6f 6c 73 20 74 69 6d 69 6e 67 20 61 6e 64 20 73 ols timing and s
1360: 65 71 75 65 6e 63 65 20 73 63 68 65 64 75 6c 69 equence scheduli
1370: 6e 67 2e 0a 20 20 20 20 20 2a 20 40 74 79 70 65 ng.. * @type
1380: 20 7b 69 6e 74 65 72 76 61 6c 7d 0a 20 20 20 20 {interval}.
1390: 20 2a 2f 0a 20 20 20 20 74 68 69 73 2e 69 6e 74 */. this.int
13a0: 65 72 76 61 6c 20 3d 20 6e 65 77 20 49 6e 74 65 erval = new Inte
13b0: 72 76 61 6c 28 32 30 30 2c 20 66 75 6e 63 74 69 rval(200, functi
13c0: 6f 6e 28 29 20 7b 7d 2c 20 66 61 6c 73 65 29 3b on() {}, false);
13d0: 20 2f 2f 20 6a 73 68 69 6e 74 20 69 67 6e 6f 72 // jshint ignor
13e0: 65 3a 6c 69 6e 65 0a 0a 20 20 20 20 2f 2a 2a 0a e:line.. /**.
13f0: 20 20 20 20 20 2a 20 41 20 4d 61 74 72 69 78 20 * A Matrix
1400: 6d 6f 64 65 6c 20 63 6f 6e 74 61 69 6e 69 6e 67 model containing
1410: 20 6d 65 74 68 6f 64 73 20 66 6f 72 20 6d 61 6e methods for man
1420: 69 70 75 6c 61 74 69 6e 67 20 74 68 65 20 73 65 ipulating the se
1430: 71 75 65 6e 63 65 72 27 73 20 61 72 72 61 79 20 quencer's array
1440: 6f 66 20 76 61 6c 75 65 73 2e 20 54 6f 20 6c 65 of values. To le
1450: 61 72 6e 20 68 6f 77 20 74 6f 20 6d 61 6e 69 70 arn how to manip
1460: 75 6c 61 74 65 20 74 68 65 20 6d 61 74 72 69 78 ulate the matrix
1470: 2c 20 72 65 61 64 20 61 62 6f 75 74 20 74 68 65 , read about the
1480: 20 6d 61 74 72 69 78 20 6d 6f 64 65 6c 2e 0a 20 matrix model..
1490: 20 20 20 20 2a 20 40 74 79 70 65 20 7b 6d 61 74 * @type {mat
14a0: 72 69 78 7d 0a 20 20 20 20 20 2a 2f 0a 20 20 20 rix}. */.
14b0: 20 74 68 69 73 2e 6d 61 74 72 69 78 20 3d 20 6e this.matrix = n
14c0: 65 77 20 4d 61 74 72 69 78 4d 6f 64 65 6c 28 74 ew MatrixModel(t
14d0: 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 72 6f 77 his.settings.row
14e0: 73 2c 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 s, this.settings
14f0: 2e 63 6f 6c 75 6d 6e 73 29 3b 0a 20 20 20 20 74 .columns);. t
1500: 68 69 73 2e 6d 61 74 72 69 78 2e 75 69 20 3d 20 his.matrix.ui =
1510: 74 68 69 73 3b 0a 0a 20 20 20 20 2f 2a 2a 0a 20 this;.. /**.
1520: 20 20 20 20 2a 20 41 20 43 6f 75 6e 74 65 72 20 * A Counter
1530: 6d 6f 64 65 6c 20 77 68 69 63 68 20 74 68 65 20 model which the
1540: 73 65 71 75 65 6e 63 65 72 20 73 74 65 70 73 20 sequencer steps
1550: 74 68 72 6f 75 67 68 2e 20 46 6f 72 20 65 78 61 through. For exa
1560: 6d 70 6c 65 2c 20 79 6f 75 20 63 6f 75 6c 64 20 mple, you could
1570: 75 73 65 20 74 68 69 73 20 6d 6f 64 65 6c 20 74 use this model t
1580: 6f 20 73 74 65 70 20 74 68 72 6f 75 67 68 20 74 o step through t
1590: 68 65 20 73 65 71 75 65 6e 63 65 72 20 69 6e 20 he sequencer in
15a0: 72 65 76 65 72 73 65 2c 20 72 61 6e 64 6f 6d 6c reverse, randoml
15b0: 79 2c 20 6f 72 20 69 6e 20 61 20 64 72 75 6e 6b y, or in a drunk
15c0: 20 77 61 6c 6b 2e 0a 20 20 20 20 20 2a 20 40 74 walk.. * @t
15d0: 79 70 65 20 7b 63 6f 75 6e 74 65 72 7d 0a 20 20 ype {counter}.
15e0: 20 20 20 2a 2f 0a 20 20 20 20 74 68 69 73 2e 73 */. this.s
15f0: 74 65 70 70 65 72 20 3d 20 6e 65 77 20 43 6f 75 tepper = new Cou
1600: 6e 74 65 72 4d 6f 64 65 6c 28 30 2c 20 74 68 69 nterModel(0, thi
1610: 73 2e 63 6f 6c 75 6d 6e 73 29 3b 0a 0a 20 20 20 s.columns);..
1620: 20 74 68 69 73 2e 70 61 64 64 69 6e 67 52 6f 77 this.paddingRow
1630: 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 = this.settings
1640: 2e 70 61 64 64 69 6e 67 52 6f 77 3b 0a 20 20 20 .paddingRow;.
1650: 20 74 68 69 73 2e 70 61 64 64 69 6e 67 43 6f 6c this.paddingCol
1660: 75 6d 6e 20 3d 20 74 68 69 73 2e 73 65 74 74 69 umn = this.setti
1670: 6e 67 73 2e 70 61 64 64 69 6e 67 43 6f 6c 75 6d ngs.paddingColum
1680: 6e 3b 0a 0a 20 20 20 20 74 68 69 73 2e 69 6e 69 n;.. this.ini
1690: 74 28 29 3b 0a 20 20 7d 0a 0a 20 20 62 75 69 6c t();. }.. buil
16a0: 64 46 72 61 6d 65 28 29 20 7b 0a 20 20 20 20 74 dFrame() {. t
16b0: 68 69 73 2e 65 6c 65 6d 65 6e 74 20 3d 20 64 6f his.element = do
16c0: 63 75 6d 65 6e 74 2e 63 72 65 61 74 65 45 6c 65 cument.createEle
16d0: 6d 65 6e 74 28 27 64 69 76 27 29 3b 0a 20 20 20 ment('div');.
16e0: 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 this.element.st
16f0: 79 6c 65 2e 70 6f 73 69 74 69 6f 6e 20 3d 20 27 yle.position = '
1700: 72 65 6c 61 74 69 76 65 27 3b 0a 20 20 20 20 74 relative';. t
1710: 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 79 6c his.element.styl
1720: 65 2e 64 69 73 70 6c 61 79 20 3d 20 27 62 6c 6f e.display = 'blo
1730: 63 6b 27 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c ck';. this.el
1740: 65 6d 65 6e 74 2e 73 74 79 6c 65 2e 77 69 64 74 ement.style.widt
1750: 68 20 3d 20 27 31 30 30 25 27 3b 0a 20 20 20 20 h = '100%';.
1760: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 74 79 this.element.sty
1770: 6c 65 2e 68 65 69 67 68 74 20 3d 20 27 31 30 30 le.height = '100
1780: 25 27 3b 0a 20 20 20 20 74 68 69 73 2e 70 61 72 %';. this.par
1790: 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 ent.appendChild(
17a0: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 29 3b 0a 20 this.element);.
17b0: 20 20 20 69 66 20 28 74 6f 75 63 68 2e 65 78 69 if (touch.exi
17c0: 73 74 73 29 20 7b 0a 20 20 20 20 20 20 74 68 69 sts) {. thi
17d0: 73 2e 61 64 64 54 6f 75 63 68 4c 69 73 74 65 6e s.addTouchListen
17e0: 65 72 73 28 29 3b 0a 20 20 20 20 7d 0a 20 20 7d ers();. }. }
17f0: 0a 0a 20 20 62 75 69 6c 64 49 6e 74 65 72 66 61 .. buildInterfa
1800: 63 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73 2e ce() {. this.
1810: 63 65 6c 6c 73 20 3d 20 5b 5d 3b 0a 20 20 20 20 cells = [];.
1820: 66 6f 72 20 28 6c 65 74 20 69 20 3d 20 30 3b 20 for (let i = 0;
1830: 69 20 3c 20 74 68 69 73 2e 6d 61 74 72 69 78 2e i < this.matrix.
1840: 6c 65 6e 67 74 68 3b 20 69 2b 2b 29 20 7b 0a 20 length; i++) {.
1850: 20 20 20 20 20 6c 65 74 20 6c 6f 63 61 74 69 6f let locatio
1860: 6e 20 3d 20 74 68 69 73 2e 6d 61 74 72 69 78 2e n = this.matrix.
1870: 6c 6f 63 61 74 65 28 69 29 3b 0a 20 20 20 20 20 locate(i);.
1880: 20 2f 2f 20 72 65 74 75 72 6e 73 20 7b 72 6f 77 // returns {row
1890: 2c 63 6f 6c 7d 0a 0a 20 20 20 20 20 20 6c 65 74 ,col}.. let
18a0: 20 63 6f 6e 74 61 69 6e 65 72 20 3d 20 64 6f 63 container = doc
18b0: 75 6d 65 6e 74 2e 63 72 65 61 74 65 45 6c 65 6d ument.createElem
18c0: 65 6e 74 28 27 73 70 61 6e 27 29 3b 0a 20 20 20 ent('span');.
18d0: 20 20 20 63 6f 6e 74 61 69 6e 65 72 2e 73 74 79 container.sty
18e0: 6c 65 2e 70 6f 73 69 74 69 6f 6e 20 3d 20 27 61 le.position = 'a
18f0: 62 73 6f 6c 75 74 65 27 3b 0a 0a 20 20 20 20 20 bsolute';..
1900: 20 6c 65 74 20 63 65 6c 6c 20 3d 20 6e 65 77 20 let cell = new
1910: 4d 61 74 72 69 78 43 65 6c 6c 28 0a 20 20 20 20 MatrixCell(.
1920: 20 20 20 20 63 6f 6e 74 61 69 6e 65 72 2c 0a 20 container,.
1930: 20 20 20 20 20 20 20 7b 0a 20 20 20 20 20 20 20 {.
1940: 20 20 20 63 6f 6d 70 6f 6e 65 6e 74 3a 20 74 72 component: tr
1950: 75 65 2c 0a 20 20 20 20 20 20 20 20 20 20 69 6e ue,. in
1960: 64 65 78 3a 20 69 2c 0a 20 20 20 20 20 20 20 20 dex: i,.
1970: 20 20 72 6f 77 3a 20 6c 6f 63 61 74 69 6f 6e 2e row: location.
1980: 72 6f 77 2c 0a 20 20 20 20 20 20 20 20 20 20 63 row,. c
1990: 6f 6c 75 6d 6e 3a 20 6c 6f 63 61 74 69 6f 6e 2e olumn: location.
19a0: 63 6f 6c 75 6d 6e 2c 0a 20 20 20 20 20 20 20 20 column,.
19b0: 20 20 6d 6f 64 65 3a 20 74 68 69 73 2e 6d 6f 64 mode: this.mod
19c0: 65 2c 0a 20 20 20 20 20 20 20 20 20 20 6d 61 74 e,. mat
19d0: 72 69 78 3a 20 74 68 69 73 2c 0a 20 20 20 20 20 rix: this,.
19e0: 20 20 20 20 20 70 61 64 64 69 6e 67 52 6f 77 3a paddingRow:
19f0: 20 74 68 69 73 2e 70 61 64 64 69 6e 67 52 6f 77 this.paddingRow
1a00: 2c 0a 20 20 20 20 20 20 20 20 20 20 70 61 64 64 ,. padd
1a10: 69 6e 67 43 6f 6c 75 6d 6e 3a 20 74 68 69 73 2e ingColumn: this.
1a20: 70 61 64 64 69 6e 67 43 6f 6c 75 6d 6e 0a 20 20 paddingColumn.
1a30: 20 20 20 20 20 20 7d 2c 0a 20 20 20 20 20 20 20 },.
1a40: 20 74 68 69 73 2e 6b 65 79 43 68 61 6e 67 65 2e this.keyChange.
1a50: 62 69 6e 64 28 74 68 69 73 2c 20 69 29 0a 20 20 bind(this, i).
1a60: 20 20 20 20 29 3b 0a 0a 20 20 20 20 20 20 2f 2f );.. //
1a70: 20 20 63 65 6c 6c 2e 6d 61 74 72 69 78 20 3d 20 cell.matrix =
1a80: 74 68 69 73 3b 0a 20 20 20 20 20 20 69 66 20 28 this;. if (
1a90: 74 6f 75 63 68 2e 65 78 69 73 74 73 29 20 7b 0a touch.exists) {.
1aa0: 20 20 20 20 20 20 20 20 63 65 6c 6c 2e 70 61 64 cell.pad
1ab0: 2e 69 6e 64 65 78 20 3d 20 69 3b 0a 20 20 20 20 .index = i;.
1ac0: 20 20 20 20 63 65 6c 6c 2e 70 72 65 43 6c 69 63 cell.preClic
1ad0: 6b 20 3d 20 63 65 6c 6c 2e 70 72 65 4d 6f 76 65 k = cell.preMove
1ae0: 20 3d 20 63 65 6c 6c 2e 70 72 65 52 65 6c 65 61 = cell.preRelea
1af0: 73 65 20 3d 20 28 29 20 3d 3e 20 7b 7d 3b 0a 20 se = () => {};.
1b00: 20 20 20 20 20 20 20 63 65 6c 6c 2e 63 6c 69 63 cell.clic
1b10: 6b 20 3d 20 63 65 6c 6c 2e 6d 6f 76 65 20 3d 20 k = cell.move =
1b20: 63 65 6c 6c 2e 72 65 6c 65 61 73 65 20 3d 20 28 cell.release = (
1b30: 29 20 3d 3e 20 7b 7d 3b 0a 20 20 20 20 20 20 20 ) => {};.
1b40: 20 63 65 6c 6c 2e 70 72 65 54 6f 75 63 68 20 3d cell.preTouch =
1b50: 20 63 65 6c 6c 2e 70 72 65 54 6f 75 63 68 4d 6f cell.preTouchMo
1b60: 76 65 20 3d 20 63 65 6c 6c 2e 70 72 65 54 6f 75 ve = cell.preTou
1b70: 63 68 52 65 6c 65 61 73 65 20 3d 20 28 29 20 3d chRelease = () =
1b80: 3e 20 7b 7d 3b 0a 20 20 20 20 20 20 20 20 63 65 > {};. ce
1b90: 6c 6c 2e 74 6f 75 63 68 20 3d 20 63 65 6c 6c 2e ll.touch = cell.
1ba0: 74 6f 75 63 68 4d 6f 76 65 20 3d 20 63 65 6c 6c touchMove = cell
1bb0: 2e 74 6f 75 63 68 52 65 6c 65 61 73 65 20 3d 20 .touchRelease =
1bc0: 28 29 20 3d 3e 20 7b 7d 3b 0a 20 20 20 20 20 20 () => {};.
1bd0: 7d 0a 0a 20 20 20 20 20 20 74 68 69 73 2e 63 65 }.. this.ce
1be0: 6c 6c 73 2e 70 75 73 68 28 63 65 6c 6c 29 3b 0a lls.push(cell);.
1bf0: 20 20 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 this.eleme
1c00: 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 63 nt.appendChild(c
1c10: 6f 6e 74 61 69 6e 65 72 29 3b 0a 20 20 20 20 7d ontainer);. }
1c20: 0a 20 20 20 20 74 68 69 73 2e 73 69 7a 65 49 6e . this.sizeIn
1c30: 74 65 72 66 61 63 65 28 29 3b 0a 20 20 7d 0a 0a terface();. }..
1c40: 20 20 73 69 7a 65 49 6e 74 65 72 66 61 63 65 28 sizeInterface(
1c50: 29 20 7b 0a 20 20 20 20 6c 65 74 20 63 65 6c 6c ) {. let cell
1c60: 57 69 64 74 68 20 3d 20 74 68 69 73 2e 77 69 64 Width = this.wid
1c70: 74 68 20 2f 20 74 68 69 73 2e 63 6f 6c 75 6d 6e th / this.column
1c80: 73 3b 0a 20 20 20 20 6c 65 74 20 63 65 6c 6c 48 s;. let cellH
1c90: 65 69 67 68 74 20 3d 20 74 68 69 73 2e 68 65 69 eight = this.hei
1ca0: 67 68 74 20 2f 20 74 68 69 73 2e 72 6f 77 73 3b ght / this.rows;
1cb0: 0a 0a 20 20 20 20 66 6f 72 20 28 6c 65 74 20 69 .. for (let i
1cc0: 20 3d 20 30 3b 20 69 20 3c 20 74 68 69 73 2e 63 = 0; i < this.c
1cd0: 65 6c 6c 73 2e 6c 65 6e 67 74 68 3b 20 69 2b 2b ells.length; i++
1ce0: 29 20 7b 0a 20 20 20 20 20 20 6c 65 74 20 63 6f ) {. let co
1cf0: 6e 74 61 69 6e 65 72 20 3d 20 74 68 69 73 2e 63 ntainer = this.c
1d00: 65 6c 6c 73 5b 69 5d 2e 70 61 72 65 6e 74 3b 0a ells[i].parent;.
1d10: 20 20 20 20 20 20 63 6f 6e 74 61 69 6e 65 72 2e container.
1d20: 73 74 79 6c 65 2e 6c 65 66 74 20 3d 20 74 68 69 style.left = thi
1d30: 73 2e 63 65 6c 6c 73 5b 69 5d 2e 63 6f 6c 75 6d s.cells[i].colum
1d40: 6e 20 2a 20 63 65 6c 6c 57 69 64 74 68 20 2b 20 n * cellWidth +
1d50: 27 70 78 27 3b 0a 20 20 20 20 20 20 63 6f 6e 74 'px';. cont
1d60: 61 69 6e 65 72 2e 73 74 79 6c 65 2e 74 6f 70 20 ainer.style.top
1d70: 3d 20 74 68 69 73 2e 63 65 6c 6c 73 5b 69 5d 2e = this.cells[i].
1d80: 72 6f 77 20 2a 20 63 65 6c 6c 48 65 69 67 68 74 row * cellHeight
1d90: 20 2b 20 27 70 78 27 3b 0a 20 20 20 20 20 20 74 + 'px';. t
1da0: 68 69 73 2e 63 65 6c 6c 73 5b 69 5d 2e 72 65 73 his.cells[i].res
1db0: 69 7a 65 28 63 65 6c 6c 57 69 64 74 68 2c 20 63 ize(cellWidth, c
1dc0: 65 6c 6c 48 65 69 67 68 74 29 3b 0a 20 20 20 20 ellHeight);.
1dd0: 7d 0a 20 20 7d 0a 0a 20 20 63 6f 6c 6f 72 49 6e }. }.. colorIn
1de0: 74 65 72 66 61 63 65 28 29 20 7b 0a 20 20 20 20 terface() {.
1df0: 66 6f 72 20 28 76 61 72 20 69 20 3d 20 30 3b 20 for (var i = 0;
1e00: 69 20 3c 20 74 68 69 73 2e 63 65 6c 6c 73 2e 6c i < this.cells.l
1e10: 65 6e 67 74 68 3b 20 69 2b 2b 29 20 7b 0a 20 20 ength; i++) {.
1e20: 20 20 20 20 74 68 69 73 2e 63 65 6c 6c 73 5b 69 this.cells[i
1e30: 5d 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 20 20 ].render();.
1e40: 7d 0a 20 20 7d 0a 0a 20 20 75 70 64 61 74 65 28 }. }.. update(
1e50: 29 20 7b 0a 20 20 20 20 2f 2f 20 20 63 6f 6e 73 ) {. // cons
1e60: 6f 6c 65 2e 6c 6f 67 28 22 75 70 64 61 74 69 6e ole.log("updatin
1e70: 67 2e 2e 2e 22 29 0a 20 20 20 20 2f 2f 6f 6e 20 g..."). //on
1e80: 3d 20 6f 6e 20 7c 7c 20 66 61 6c 73 65 3b 0a 20 = on || false;.
1e90: 20 20 20 74 68 69 73 2e 6d 61 74 72 69 78 2e 69 this.matrix.i
1ea0: 74 65 72 61 74 65 28 28 72 2c 20 63 2c 20 69 29 terate((r, c, i)
1eb0: 20 3d 3e 20 7b 0a 20 20 20 20 20 20 2f 2f 20 20 => {. //
1ec0: 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 74 68 69 73 console.log(this
1ed0: 2e 6d 61 74 72 69 78 2e 70 61 74 74 65 72 6e 5b .matrix.pattern[
1ee0: 72 5d 5b 63 5d 2c 20 74 68 69 73 2e 63 65 6c 6c r][c], this.cell
1ef0: 73 5b 69 5d 2e 73 74 61 74 65 29 3b 0a 20 20 20 s[i].state);.
1f00: 20 20 20 69 66 20 28 74 68 69 73 2e 6d 61 74 72 if (this.matr
1f10: 69 78 2e 70 61 74 74 65 72 6e 5b 72 5d 5b 63 5d ix.pattern[r][c]
1f20: 20 21 3d 3d 20 74 68 69 73 2e 63 65 6c 6c 73 5b !== this.cells[
1f30: 69 5d 2e 73 74 61 74 65 29 20 7b 0a 20 20 20 20 i].state) {.
1f40: 20 20 20 20 69 66 20 28 74 68 69 73 2e 6d 61 74 if (this.mat
1f50: 72 69 78 2e 70 61 74 74 65 72 6e 5b 72 5d 5b 63 rix.pattern[r][c
1f60: 5d 20 3e 20 30 29 20 7b 0a 20 20 20 20 20 20 20 ] > 0) {.
1f70: 20 20 20 74 68 69 73 2e 63 65 6c 6c 73 5b 69 5d this.cells[i]
1f80: 2e 74 75 72 6e 4f 6e 28 29 3b 0a 20 20 20 20 20 .turnOn();.
1f90: 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 } else {.
1fa0: 20 20 20 20 20 20 74 68 69 73 2e 63 65 6c 6c 73 this.cells
1fb0: 5b 69 5d 2e 74 75 72 6e 4f 66 66 28 29 3b 0a 20 [i].turnOff();.
1fc0: 20 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 7d }. }
1fd0: 0a 20 20 20 20 7d 29 3b 0a 20 20 7d 0a 0a 20 20 . });. }..
1fe0: 2f 2f 20 75 70 64 61 74 65 20 3d 3e 20 63 65 6c // update => cel
1ff0: 6c 2e 74 75 72 6e 4f 6e 20 3d 3e 20 63 65 6c 6c l.turnOn => cell
2000: 2e 65 6d 69 74 20 3d 3e 20 6b 65 79 43 68 61 6e .emit => keyChan
2010: 67 65 20 28 73 65 71 2e 65 6d 69 74 29 20 3d 3e ge (seq.emit) =>
2020: 20 6d 61 74 72 69 78 2e 73 65 74 2e 63 65 6c 6c matrix.set.cell
2030: 20 3d 3e 20 75 70 64 61 74 65 0a 20 20 2f 2f 0a => update. //.
2040: 20 20 2f 2f 20 69 6e 74 65 72 61 63 74 69 6f 6e // interaction
2050: 20 3d 3e 20 6b 65 79 43 68 61 6e 67 65 20 3d 3e => keyChange =>
2060: 20 6d 61 74 72 69 78 2e 73 65 74 2e 63 65 6c 6c matrix.set.cell
2070: 20 3d 3e 20 75 70 64 61 74 65 20 3d 3e 20 63 65 => update => ce
2080: 6c 6c 2e 74 75 72 6e 4f 6e 0a 20 20 2f 2f 20 20 ll.turnOn. //
2090: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20
20a0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20
20b0: 20 20 20 20 20 20 20 20 20 20 20 3d 3e 20 65 6d => em
20c0: 69 74 0a 20 20 2f 2f 0a 20 20 2f 2f 20 73 65 74 it. //. // set
20d0: 2e 63 65 6c 6c 20 3d 3e 20 75 70 64 61 74 65 20 .cell => update
20e0: 3d 3e 20 6e 65 65 64 73 20 74 6f 20 65 6d 69 74 => needs to emit
20f0: 2e 0a 0a 20 20 6b 65 79 43 68 61 6e 67 65 28 6e ... keyChange(n
2100: 6f 74 65 2c 20 6f 6e 29 20 7b 0a 20 20 20 20 2f ote, on) {. /
2110: 2f 20 65 6d 69 74 20 64 61 74 61 20 66 6f 72 20 / emit data for
2120: 61 6e 79 20 6b 65 79 20 74 75 72 6e 69 6e 67 20 any key turning
2130: 6f 6e 2f 6f 66 66 0a 20 20 20 20 2f 2f 20 69 20 on/off. // i
2140: 69 73 20 74 68 65 20 6e 6f 74 65 20 69 6e 64 65 is the note inde
2150: 78 0a 20 20 20 20 2f 2f 20 76 20 69 73 20 77 68 x. // v is wh
2160: 65 74 68 65 72 20 69 74 20 69 73 20 6f 6e 20 6f ether it is on o
2170: 72 20 6f 66 66 0a 20 20 20 20 6c 65 74 20 63 65 r off. let ce
2180: 6c 6c 20 3d 20 74 68 69 73 2e 6d 61 74 72 69 78 ll = this.matrix
2190: 2e 6c 6f 63 61 74 65 28 6e 6f 74 65 29 3b 0a 20 .locate(note);.
21a0: 20 20 20 2f 2f 20 20 74 68 69 73 2e 6d 61 74 72 // this.matr
21b0: 69 78 2e 73 65 74 2e 63 65 6c 6c 28 63 65 6c 6c ix.set.cell(cell
21c0: 2e 63 6f 6c 75 6d 6e 2c 63 65 6c 6c 2e 72 6f 77 .column,cell.row
21d0: 2c 6f 6e 29 3b 0a 20 20 20 20 74 68 69 73 2e 6d ,on);. this.m
21e0: 61 74 72 69 78 2e 70 61 74 74 65 72 6e 5b 63 65 atrix.pattern[ce
21f0: 6c 6c 2e 72 6f 77 5d 5b 63 65 6c 6c 2e 63 6f 6c ll.row][cell.col
2200: 75 6d 6e 5d 20 3d 20 6f 6e 3b 0a 20 20 20 20 76 umn] = on;. v
2210: 61 72 20 64 61 74 61 20 3d 20 7b 0a 20 20 20 20 ar data = {.
2220: 20 20 72 6f 77 3a 20 63 65 6c 6c 2e 72 6f 77 2c row: cell.row,
2230: 0a 20 20 20 20 20 20 63 6f 6c 75 6d 6e 3a 20 63 . column: c
2240: 65 6c 6c 2e 63 6f 6c 75 6d 6e 2c 0a 20 20 20 20 ell.column,.
2250: 20 20 73 74 61 74 65 3a 20 6f 6e 0a 20 20 20 20 state: on.
2260: 7d 3b 0a 20 20 20 20 74 68 69 73 2e 65 6d 69 74 };. this.emit
2270: 28 27 63 68 61 6e 67 65 27 2c 20 64 61 74 61 29 ('change', data)
2280: 3b 0a 20 20 7d 0a 0a 20 20 72 65 6e 64 65 72 28 ;. }.. render(
2290: 29 20 7b 0a 20 20 20 20 69 66 20 28 74 68 69 73 ) {. if (this
22a0: 2e 73 74 65 70 70 65 72 2e 76 61 6c 75 65 20 3e .stepper.value >
22b0: 3d 20 30 29 20 7b 0a 20 20 20 20 20 20 74 68 69 = 0) {. thi
22c0: 73 2e 6d 61 74 72 69 78 2e 69 74 65 72 61 74 65 s.matrix.iterate
22d0: 28 28 72 2c 20 63 2c 20 69 29 20 3d 3e 20 7b 0a ((r, c, i) => {.
22e0: 20 20 20 20 20 20 20 20 69 66 20 28 63 20 3d 3d if (c ==
22f0: 3d 20 74 68 69 73 2e 73 74 65 70 70 65 72 2e 76 = this.stepper.v
2300: 61 6c 75 65 29 20 7b 0a 20 20 20 20 20 20 20 20 alue) {.
2310: 20 20 74 68 69 73 2e 63 65 6c 6c 73 5b 69 5d 2e this.cells[i].
2320: 70 61 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 pad.setAttribute
2330: 28 27 73 74 72 6f 6b 65 27 2c 20 74 68 69 73 2e ('stroke', this.
2340: 63 6f 6c 6f 72 73 2e 6d 65 64 69 75 6d 4c 69 67 colors.mediumLig
2350: 68 74 29 3b 0a 20 20 20 20 20 20 20 20 20 20 74 ht);. t
2360: 68 69 73 2e 63 65 6c 6c 73 5b 69 5d 2e 70 61 64 his.cells[i].pad
2370: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 .setAttribute('s
2380: 74 72 6f 6b 65 2d 77 69 64 74 68 27 2c 20 27 31 troke-width', '1
2390: 27 29 3b 0a 20 20 20 20 20 20 20 20 20 20 74 68 ');. th
23a0: 69 73 2e 63 65 6c 6c 73 5b 69 5d 2e 70 61 64 2e is.cells[i].pad.
23b0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 setAttribute('st
23c0: 72 6f 6b 65 2d 6f 70 61 63 69 74 79 27 2c 20 27 roke-opacity', '
23d0: 31 27 29 3b 0a 20 20 20 20 20 20 20 20 7d 20 65 1');. } e
23e0: 6c 73 65 20 7b 0a 20 20 20 20 20 20 20 20 20 20 lse {.
23f0: 74 68 69 73 2e 63 65 6c 6c 73 5b 69 5d 2e 70 61 this.cells[i].pa
2400: 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 d.setAttribute('
2410: 73 74 72 6f 6b 65 27 2c 20 27 6e 6f 6e 65 27 29 stroke', 'none')
2420: 3b 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 20 20 ;. }.
2430: 20 20 7d 29 3b 0a 20 20 20 20 7d 0a 20 20 7d 0a });. }. }.
2440: 0a 20 20 2f 2a 2a 0a 20 20 20 2a 20 53 74 61 72 . /**. * Star
2450: 74 20 73 65 71 75 65 6e 63 69 6e 67 0a 20 20 20 t sequencing.
2460: 2a 20 40 70 61 72 61 6d 20 20 7b 6e 75 6d 62 65 * @param {numbe
2470: 72 7d 20 6d 73 20 42 65 61 74 20 74 65 6d 70 6f r} ms Beat tempo
2480: 20 69 6e 20 6d 69 6c 6c 69 73 65 63 6f 6e 64 73 in milliseconds
2490: 0a 20 20 20 2a 2f 0a 20 20 73 74 61 72 74 28 6d . */. start(m
24a0: 73 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 69 6e s) {. this.in
24b0: 74 65 72 76 61 6c 2e 65 76 65 6e 74 20 3d 20 74 terval.event = t
24c0: 68 69 73 2e 6e 65 78 74 2e 62 69 6e 64 28 74 68 his.next.bind(th
24d0: 69 73 29 3b 0a 20 20 20 20 69 66 20 28 6d 73 29 is);. if (ms)
24e0: 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 69 6e {. this.in
24f0: 74 65 72 76 61 6c 2e 6d 73 28 6d 73 29 3b 0a 20 terval.ms(ms);.
2500: 20 20 20 7d 0a 20 20 20 20 74 68 69 73 2e 69 6e }. this.in
2510: 74 65 72 76 61 6c 2e 73 74 61 72 74 28 29 3b 0a terval.start();.
2520: 20 20 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 53 74 6f }.. /**. Sto
2530: 70 20 73 65 71 75 65 6e 63 69 6e 67 0a 20 20 2a p sequencing. *
2540: 2f 0a 20 20 73 74 6f 70 28 29 20 7b 0a 20 20 20 /. stop() {.
2550: 20 74 68 69 73 2e 69 6e 74 65 72 76 61 6c 2e 73 this.interval.s
2560: 74 6f 70 28 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a top();. }.. /*
2570: 2a 0a 20 20 4d 61 6e 75 61 6c 6c 79 20 6a 75 6d *. Manually jum
2580: 70 20 74 6f 20 74 68 65 20 6e 65 78 74 20 63 6f p to the next co
2590: 6c 75 6d 6e 20 61 6e 64 20 74 72 69 67 67 65 72 lumn and trigger
25a0: 20 74 68 65 20 27 63 68 61 6e 67 65 27 20 65 76 the 'change' ev
25b0: 65 6e 74 2e 20 54 68 65 20 22 6e 65 78 74 22 20 ent. The "next"
25c0: 63 6f 6c 75 6d 6e 20 69 73 20 64 65 74 65 72 6d column is determ
25d0: 69 6e 65 64 20 62 79 20 79 6f 75 72 20 6d 6f 64 ined by your mod
25e0: 65 20 6f 66 20 73 65 71 75 65 6e 63 69 6e 67 2e e of sequencing.
25f0: 0a 20 20 2a 2f 0a 20 20 6e 65 78 74 28 29 20 7b . */. next() {
2600: 0a 20 20 20 20 74 68 69 73 2e 73 74 65 70 70 65 . this.steppe
2610: 72 2e 6e 65 78 74 28 29 3b 0a 20 20 20 20 74 68 r.next();. th
2620: 69 73 2e 65 6d 69 74 28 27 73 74 65 70 27 2c 20 is.emit('step',
2630: 74 68 69 73 2e 6d 61 74 72 69 78 2e 63 6f 6c 75 this.matrix.colu
2640: 6d 6e 28 74 68 69 73 2e 73 74 65 70 70 65 72 2e mn(this.stepper.
2650: 76 61 6c 75 65 29 2e 72 65 76 65 72 73 65 28 29 value).reverse()
2660: 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 6e 64 );. this.rend
2670: 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 20 61 64 64 er();. }.. add
2680: 54 6f 75 63 68 4c 69 73 74 65 6e 65 72 73 28 29 TouchListeners()
2690: 20 7b 0a 20 20 20 20 74 68 69 73 2e 70 72 65 43 {. this.preC
26a0: 6c 69 63 6b 20 3d 20 74 68 69 73 2e 70 72 65 4d lick = this.preM
26b0: 6f 76 65 20 3d 20 74 68 69 73 2e 70 72 65 52 65 ove = this.preRe
26c0: 6c 65 61 73 65 20 3d 20 28 29 20 3d 3e 20 7b 7d lease = () => {}
26d0: 3b 0a 20 20 20 20 74 68 69 73 2e 63 6c 69 63 6b ;. this.click
26e0: 20 3d 20 74 68 69 73 2e 6d 6f 76 65 20 3d 20 74 = this.move = t
26f0: 68 69 73 2e 72 65 6c 65 61 73 65 20 3d 20 28 29 his.release = ()
2700: 20 3d 3e 20 7b 7d 3b 0a 20 20 20 20 74 68 69 73 => {};. this
2710: 2e 70 72 65 54 6f 75 63 68 20 3d 20 74 68 69 73 .preTouch = this
2720: 2e 70 72 65 54 6f 75 63 68 4d 6f 76 65 20 3d 20 .preTouchMove =
2730: 74 68 69 73 2e 70 72 65 54 6f 75 63 68 52 65 6c this.preTouchRel
2740: 65 61 73 65 20 3d 20 28 29 20 3d 3e 20 7b 7d 3b ease = () => {};
2750: 0a 20 20 20 20 74 68 69 73 2e 74 6f 75 63 68 20 . this.touch
2760: 3d 20 74 68 69 73 2e 74 6f 75 63 68 4d 6f 76 65 = this.touchMove
2770: 20 3d 20 74 68 69 73 2e 74 6f 75 63 68 52 65 6c = this.touchRel
2780: 65 61 73 65 20 3d 20 28 29 20 3d 3e 20 7b 7d 3b ease = () => {};
2790: 0a 0a 20 20 20 20 74 68 69 73 2e 63 75 72 72 65 .. this.curre
27a0: 6e 74 45 6c 65 6d 65 6e 74 20 3d 20 66 61 6c 73 ntElement = fals
27b0: 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 e;.. this.ele
27c0: 6d 65 6e 74 2e 61 64 64 45 76 65 6e 74 4c 69 73 ment.addEventLis
27d0: 74 65 6e 65 72 28 27 74 6f 75 63 68 73 74 61 72 tener('touchstar
27e0: 74 27 2c 20 65 20 3d 3e 20 7b 0a 20 20 20 20 20 t', e => {.
27f0: 20 6c 65 74 20 65 6c 65 6d 65 6e 74 20 3d 20 64 let element = d
2800: 6f 63 75 6d 65 6e 74 2e 65 6c 65 6d 65 6e 74 46 ocument.elementF
2810: 72 6f 6d 50 6f 69 6e 74 28 0a 20 20 20 20 20 20 romPoint(.
2820: 20 20 65 2e 74 61 72 67 65 74 54 6f 75 63 68 65 e.targetTouche
2830: 73 5b 30 5d 2e 63 6c 69 65 6e 74 58 2c 0a 20 20 s[0].clientX,.
2840: 20 20 20 20 20 20 65 2e 74 61 72 67 65 74 54 6f e.targetTo
2850: 75 63 68 65 73 5b 30 5d 2e 63 6c 69 65 6e 74 59 uches[0].clientY
2860: 0a 20 20 20 20 20 20 29 3b 0a 20 20 20 20 20 20 . );.
2870: 6c 65 74 20 63 65 6c 6c 20 3d 20 74 68 69 73 2e let cell = this.
2880: 63 65 6c 6c 73 5b 65 6c 65 6d 65 6e 74 2e 69 6e cells[element.in
2890: 64 65 78 5d 3b 0a 20 20 20 20 20 20 74 68 69 73 dex];. this
28a0: 2e 70 61 69 6e 74 62 72 75 73 68 20 3d 20 21 63 .paintbrush = !c
28b0: 65 6c 6c 2e 73 74 61 74 65 3b 0a 20 20 20 20 20 ell.state;.
28c0: 20 63 65 6c 6c 2e 64 6f 77 6e 28 74 68 69 73 2e cell.down(this.
28d0: 70 61 69 6e 74 62 72 75 73 68 29 3b 0a 20 20 20 paintbrush);.
28e0: 20 20 20 74 68 69 73 2e 63 75 72 72 65 6e 74 45 this.currentE
28f0: 6c 65 6d 65 6e 74 20 3d 20 65 6c 65 6d 65 6e 74 lement = element
2900: 2e 69 6e 64 65 78 3b 0a 20 20 20 20 20 20 65 2e .index;. e.
2910: 70 72 65 76 65 6e 74 44 65 66 61 75 6c 74 28 29 preventDefault()
2920: 3b 0a 20 20 20 20 20 20 65 2e 73 74 6f 70 50 72 ;. e.stopPr
2930: 6f 70 61 67 61 74 69 6f 6e 28 29 3b 0a 20 20 20 opagation();.
2940: 20 7d 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e 65 });.. this.e
2950: 6c 65 6d 65 6e 74 2e 61 64 64 45 76 65 6e 74 4c lement.addEventL
2960: 69 73 74 65 6e 65 72 28 27 74 6f 75 63 68 6d 6f istener('touchmo
2970: 76 65 27 2c 20 65 20 3d 3e 20 7b 0a 20 20 20 20 ve', e => {.
2980: 20 20 6c 65 74 20 65 6c 65 6d 65 6e 74 20 3d 20 let element =
2990: 64 6f 63 75 6d 65 6e 74 2e 65 6c 65 6d 65 6e 74 document.element
29a0: 46 72 6f 6d 50 6f 69 6e 74 28 0a 20 20 20 20 20 FromPoint(.
29b0: 20 20 20 65 2e 74 61 72 67 65 74 54 6f 75 63 68 e.targetTouch
29c0: 65 73 5b 30 5d 2e 63 6c 69 65 6e 74 58 2c 0a 20 es[0].clientX,.
29d0: 20 20 20 20 20 20 20 65 2e 74 61 72 67 65 74 54 e.targetT
29e0: 6f 75 63 68 65 73 5b 30 5d 2e 63 6c 69 65 6e 74 ouches[0].client
29f0: 59 0a 20 20 20 20 20 20 29 3b 0a 20 20 20 20 20 Y. );.
2a00: 20 6c 65 74 20 63 65 6c 6c 20 3d 20 74 68 69 73 let cell = this
2a10: 2e 63 65 6c 6c 73 5b 65 6c 65 6d 65 6e 74 2e 69 .cells[element.i
2a20: 6e 64 65 78 5d 3b 0a 20 20 20 20 20 20 69 66 20 ndex];. if
2a30: 28 65 6c 65 6d 65 6e 74 2e 69 6e 64 65 78 20 21 (element.index !
2a40: 3d 3d 20 74 68 69 73 2e 63 75 72 72 65 6e 74 45 == this.currentE
2a50: 6c 65 6d 65 6e 74 29 20 7b 0a 20 20 20 20 20 20 lement) {.
2a60: 20 20 69 66 20 28 74 68 69 73 2e 63 75 72 72 65 if (this.curre
2a70: 6e 74 45 6c 65 6d 65 6e 74 20 3e 3d 20 30 29 20 ntElement >= 0)
2a80: 7b 0a 20 20 20 20 20 20 20 20 20 20 6c 65 74 20 {. let
2a90: 70 61 73 74 43 65 6c 6c 20 3d 20 74 68 69 73 2e pastCell = this.
2aa0: 63 65 6c 6c 73 5b 74 68 69 73 2e 63 75 72 72 65 cells[this.curre
2ab0: 6e 74 45 6c 65 6d 65 6e 74 5d 3b 0a 20 20 20 20 ntElement];.
2ac0: 20 20 20 20 20 20 70 61 73 74 43 65 6c 6c 2e 75 pastCell.u
2ad0: 70 28 29 3b 0a 20 20 20 20 20 20 20 20 7d 0a 20 p();. }.
2ae0: 20 20 20 20 20 20 20 63 65 6c 6c 2e 64 6f 77 6e cell.down
2af0: 28 74 68 69 73 2e 70 61 69 6e 74 62 72 75 73 68 (this.paintbrush
2b00: 29 3b 0a 20 20 20 20 20 20 7d 20 65 6c 73 65 20 );. } else
2b10: 7b 0a 20 20 20 20 20 20 20 20 63 65 6c 6c 2e 62 {. cell.b
2b20: 65 6e 64 28 29 3b 0a 20 20 20 20 20 20 7d 0a 20 end();. }.
2b30: 20 20 20 20 20 74 68 69 73 2e 63 75 72 72 65 6e this.curren
2b40: 74 45 6c 65 6d 65 6e 74 20 3d 20 65 6c 65 6d 65 tElement = eleme
2b50: 6e 74 2e 69 6e 64 65 78 3b 0a 20 20 20 20 20 20 nt.index;.
2b60: 65 2e 70 72 65 76 65 6e 74 44 65 66 61 75 6c 74 e.preventDefault
2b70: 28 29 3b 0a 20 20 20 20 20 20 65 2e 73 74 6f 70 ();. e.stop
2b80: 50 72 6f 70 61 67 61 74 69 6f 6e 28 29 3b 0a 20 Propagation();.
2b90: 20 20 20 7d 29 3b 0a 0a 20 20 20 20 74 68 69 73 });.. this
2ba0: 2e 65 6c 65 6d 65 6e 74 2e 61 64 64 45 76 65 6e .element.addEven
2bb0: 74 4c 69 73 74 65 6e 65 72 28 27 74 6f 75 63 68 tListener('touch
2bc0: 65 6e 64 27 2c 20 65 20 3d 3e 20 7b 0a 20 20 20 end', e => {.
2bd0: 20 20 20 2f 2f 20 6e 6f 20 74 6f 75 63 68 65 73 // no touches
2be0: 20 74 6f 20 63 61 6c 63 75 6c 61 74 65 20 62 65 to calculate be
2bf0: 63 61 75 73 65 20 6e 6f 6e 65 20 72 65 6d 61 69 cause none remai
2c00: 6e 69 6e 67 0a 20 20 20 20 20 20 6c 65 74 20 63 ning. let c
2c10: 65 6c 6c 20 3d 20 74 68 69 73 2e 63 65 6c 6c 73 ell = this.cells
2c20: 5b 74 68 69 73 2e 63 75 72 72 65 6e 74 45 6c 65 [this.currentEle
2c30: 6d 65 6e 74 5d 3b 0a 20 20 20 20 20 20 63 65 6c ment];. cel
2c40: 6c 2e 75 70 28 29 3b 0a 20 20 20 20 20 20 74 68 l.up();. th
2c50: 69 73 2e 69 6e 74 65 72 61 63 74 69 6e 67 20 3d is.interacting =
2c60: 20 66 61 6c 73 65 3b 0a 20 20 20 20 20 20 74 68 false;. th
2c70: 69 73 2e 63 75 72 72 65 6e 74 45 6c 65 6d 65 6e is.currentElemen
2c80: 74 20 3d 20 66 61 6c 73 65 3b 0a 20 20 20 20 20 t = false;.
2c90: 20 65 2e 70 72 65 76 65 6e 74 44 65 66 61 75 6c e.preventDefaul
2ca0: 74 28 29 3b 0a 20 20 20 20 20 20 65 2e 73 74 6f t();. e.sto
2cb0: 70 50 72 6f 70 61 67 61 74 69 6f 6e 28 29 3b 0a pPropagation();.
2cc0: 20 20 20 20 7d 29 3b 0a 20 20 7d 0a 0a 20 20 2f });. }.. /
2cd0: 2a 2a 0a 20 20 4e 75 6d 62 65 72 20 6f 66 20 72 **. Number of r
2ce0: 6f 77 73 20 69 6e 20 74 68 65 20 73 65 71 75 65 ows in the seque
2cf0: 6e 63 65 72 0a 20 20 40 74 79 70 65 20 7b 6e 75 ncer. @type {nu
2d00: 6d 62 65 72 7d 0a 20 20 2a 2f 0a 20 20 67 65 74 mber}. */. get
2d10: 20 72 6f 77 73 28 29 20 7b 0a 20 20 20 20 72 65 rows() {. re
2d20: 74 75 72 6e 20 74 68 69 73 2e 6d 61 74 72 69 78 turn this.matrix
2d30: 2e 72 6f 77 73 3b 0a 20 20 7d 0a 0a 20 20 73 65 .rows;. }.. se
2d40: 74 20 72 6f 77 73 28 76 29 20 7b 0a 20 20 20 20 t rows(v) {.
2d50: 74 68 69 73 2e 6d 61 74 72 69 78 2e 72 6f 77 73 this.matrix.rows
2d60: 20 3d 20 76 3b 0a 20 20 20 20 74 68 69 73 2e 65 = v;. this.e
2d70: 6d 70 74 79 28 29 3b 0a 20 20 20 20 74 68 69 73 mpty();. this
2d80: 2e 62 75 69 6c 64 49 6e 74 65 72 66 61 63 65 28 .buildInterface(
2d90: 29 3b 0a 20 20 20 20 74 68 69 73 2e 75 70 64 61 );. this.upda
2da0: 74 65 28 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a 2a te();. }.. /**
2db0: 0a 20 20 4e 75 6d 62 65 72 20 6f 66 20 63 6f 6c . Number of col
2dc0: 75 6d 6e 73 20 69 6e 20 74 68 65 20 73 65 71 75 umns in the sequ
2dd0: 65 6e 63 65 72 0a 20 20 40 74 79 70 65 20 7b 6e encer. @type {n
2de0: 75 6d 62 65 72 7d 0a 20 20 2a 2f 0a 20 20 67 65 umber}. */. ge
2df0: 74 20 63 6f 6c 75 6d 6e 73 28 29 20 7b 0a 20 20 t columns() {.
2e00: 20 20 72 65 74 75 72 6e 20 74 68 69 73 2e 6d 61 return this.ma
2e10: 74 72 69 78 2e 63 6f 6c 75 6d 6e 73 3b 0a 20 20 trix.columns;.
2e20: 7d 0a 0a 20 20 73 65 74 20 63 6f 6c 75 6d 6e 73 }.. set columns
2e30: 28 76 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 6d (v) {. this.m
2e40: 61 74 72 69 78 2e 63 6f 6c 75 6d 6e 73 20 3d 20 atrix.columns =
2e50: 76 3b 0a 20 20 20 20 74 68 69 73 2e 73 74 65 70 v;. this.step
2e60: 70 65 72 2e 6d 61 78 20 3d 20 76 3b 0a 20 20 20 per.max = v;.
2e70: 20 74 68 69 73 2e 65 6d 70 74 79 28 29 3b 0a 20 this.empty();.
2e80: 20 20 20 74 68 69 73 2e 62 75 69 6c 64 49 6e 74 this.buildInt
2e90: 65 72 66 61 63 65 28 29 3b 0a 20 20 20 20 74 68 erface();. th
2ea0: 69 73 2e 75 70 64 61 74 65 28 29 3b 0a 20 20 7d is.update();. }
2eb0: 0a 7d 0a .}.