47 |
Your beats are saved at this link:
48 |
49 |
COPY LINK
50 |
`;
55 |
56 | /**/
64 |
65 | const aboutTemplate = ()=>`
66 |
67 |
68 |
69 | VIDEO
70 |
71 |
72 | This experiment lets you explore and create beats in a fun new way using machine learning. Just drag the circle or draw a path to discover beats. It's built using a neural network trained on over 3.8 million drum beats.
73 | Using Deeplearn.js , the neural network runs locally in your web browser.
74 |
75 | Beat Blender was first presented at the 2017 NIPS conference. Built by Torin Blankensmith and Kyle Phillips from the Creative Lab and Adam Roberts from the Magenta team at Google using
76 | MusicVAE.js
77 | and
78 | Deeplearn.js . Get the open source code on Github here .
79 |
80 |
`;
81 |
82 | export class Modal extends View {
83 |
84 | constructor(domElement){
85 | super(domElement);
86 | this._setEventMap({
87 | 'click .share-facebook': (event, state)=> open(facebook(state)),
88 | 'click .share-twitter': (event, state)=> open(twitter(state)),
89 | 'click .exit': ()=> {
90 | this.domElement.classList.remove('active');
91 | setTimeout(() => { //call exit after fade time has elapsed
92 | this.emit('exit', this);
93 |
94 | const video = document.querySelector('.video > iframe');
95 | if(video) {
96 | //pause video on exit
97 | video.contentWindow.postMessage(JSON.stringify({ event: 'command', func: 'pauseVideo' }), '*');
98 | }
99 |
100 | }, 300);
101 | },
102 | 'click .copy-link': (event)=>{
103 | const input = document.querySelector('.short-url');
104 | copyToClipboard(input);
105 | event.target.innerHTML = 'COPIED';
106 | event.target.classList.add('copied');
107 | }
108 | });
109 | }
110 |
111 | shouldComponentUpdate(state, previousState) {
112 | return state.modal !== previousState.modal;
113 | }
114 |
115 | /**
116 | * render the provided presets
117 | * @param {Object} key becomes label, value (Array) is beats
118 | * @return itself
119 | */
120 | render(state, previousState) {
121 | this.domElement.style.visibility = previousState.modal === undefined ? 'hidden' : 'visible'; //on page load modal should be hidden
122 | if(state.modal === modals.ABOUT) {
123 | this.domElement.innerHTML = aboutTemplate(state);
124 | this.domElement.classList.add('active');
125 | } else if(state.modal === modals.SHARE) {
126 | this.domElement.innerHTML = shareTemplate(state);
127 | this.domElement.classList.add('active');
128 | } else {
129 | this.domElement.style.visibility = 'hidden';
130 | }
131 | return super.render(state, previousState);
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/js/views/preset-button-group.js:
--------------------------------------------------------------------------------
1 | // Copyright 2018 Google LLC
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // https://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | import { View } from './base-view';
16 | import assert from 'assert';
17 |
18 | let isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/) || /(CriOS)/i.test(navigator.userAgent);
19 |
20 |
21 | const same = (a, b)=>{
22 | if(!a || !b || a.length !== b.length){
23 | return false;
24 | }
25 | for(let i=0; i
36 | `PRESET BEATS
37 | ${button('Generate New Beat', `preset-button generate-new-beat-button ${isSafari? 'isSafari' : ''}`)}
38 | ${Object.keys(presetBeats).map(key=> button(key, 'preset-button ' + (same(encodedSequences[cornerIndices[selectedCornerIndex]], presetBeats[key]) ? 'active' : ''))).join('')}`;
39 |
40 | // the html to repeat for every preset
41 | const button = (text, classList)=>`
42 | ${text} `;
43 |
44 |
45 |
46 | export class PresetButtonGroup extends View {
47 |
48 | constructor(domElement){
49 | super(domElement);
50 |
51 | this._setEventMap({
52 | 'click .preset-button': (event, state)=>{
53 | if(event.target.classList.contains('generate-new-beat-button')) {
54 | this.emit('generate-new-beat', this);
55 | } else {
56 | const attr = event.target.attributes['data-value'];
57 | assert(attr && attr.value, 'Preset Button did not have a data-value attribute');
58 | const beat = state.presetBeats[attr.value];
59 | this.emit('click', this, attr.value, beat);
60 | }
61 | }
62 | });
63 | }
64 |
65 | shouldComponentUpdate(state, previousState) {
66 | const i = state.cornerIndices[state.selectedCornerIndex];
67 | return state.selectedCornerIndex !== previousState.selectedCornerIndex ||
68 | (!same(state.encodedSequences[i], previousState.encodedSequences[i]) && state.selectedCornerIndex > -1);
69 | }
70 |
71 | /**
72 | * render the provided presets
73 | * @param {Object} key becomes label, value (Array) is beats
74 | * @return itself
75 | */
76 | render(state, previousState){
77 | this.domElement.classList[state.selectedCornerIndex > -1 ? 'add' : 'remove']('active');
78 | this.domElement.innerHTML = template(state);
79 | return super.render(state, previousState);
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/js/views/select-midi-out.js:
--------------------------------------------------------------------------------
1 | // Copyright 2018 Google LLC
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // https://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | import { View } from './base-view';
16 |
17 | const DEFAULT_TEXT = 'Select Midi Out';
18 |
19 |
20 | const template = (text, isSelected)=> `
21 | ${text} `;
22 |
23 |
24 | export class SelectMidiOut extends View {
25 |
26 | constructor(domElement){
27 | super(domElement);
28 |
29 | this._setEventMap({
30 | 'change': (evt)=> this.emit('change', this, evt.target.selectedIndex -1) //-1 because of the default option
31 | });
32 | }
33 |
34 | shouldComponentUpdate({ midiOut }, { midiOut:lMidiOut }){
35 | //deep-equals cause it could be a clone
36 | if(midiOut && !lMidiOut){
37 | return true;
38 | }
39 | if(midiOut.length !== lMidiOut.length){
40 | return true;
41 | }
42 |
43 | for(let i=0; itemplate(device, i === state.selectedMidiOutIndex)))
56 | .join('');
57 |
58 | return super.render();
59 | }
60 |
61 |
62 | }
63 |
--------------------------------------------------------------------------------
/js/views/sequence-player.js:
--------------------------------------------------------------------------------
1 | // Copyright 2018 Google LLC
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // https://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | import Tone from 'tone';
16 | import { range } from '../utils';
17 | import { getMidiNoteFromDrumRow, urls as sampleURLs, getURLIndexForNote } from '../samples';
18 | import { View } from './base-view';
19 | import { sendMIDIToDevice } from '../midi-out';
20 | import { anyKeyNotEqual } from '../utils';
21 | import assert from 'assert';
22 |
23 |
24 | export class SequencePlayer extends View {
25 | constructor(){
26 | super(document.body);
27 |
28 | this.onEveryNote = this.onEveryNote.bind(this);
29 | this.onPlayerLoaded = this.onPlayerLoaded.bind(this);
30 |
31 | this.loop = new Tone.Sequence(this.onEveryNote, range(0, 32), '16n');
32 | this.notesOn = [];
33 | }
34 |
35 | onEveryNote(tickTime, col){
36 | if(!this.player.loaded){
37 | return;
38 | }
39 | this.emit('note', this, tickTime, col);
40 | }
41 |
42 | onPlayerLoaded(player){
43 | console.log(player);
44 | //setSequencerUINotes(mLSequencer.currNotes);
45 | Tone.Transport.start();
46 | console.log('Tone.Transport started');
47 | }
48 |
49 | shouldComponentUpdate(s, l){
50 | //first time or column changed
51 | return s.playing !== l.playing ||
52 | s.bpm !== l.bpm ||
53 | (!l.sequence && s.sequence) ||
54 | s.sequence.time !== l.sequence.time ||
55 | s.sequence.activeColumn !== l.sequence.activeColumn ||
56 | anyKeyNotEqual(s.activeNotes, l.activeNotes);
57 | }
58 |
59 | render(state, last){
60 | //load samples
61 | if(!this.player){
62 | assert(Array.isArray(sampleURLs), `sampleURLs should be an array, received ${sampleURLs}`);
63 | this.player = new Tone.Players(sampleURLs, this.onPlayerLoaded).toMaster();
64 | }
65 | //toggle play/pause
66 | if(state.playing && this.loop.state !== 'started'){
67 | this.loop.start();
68 | } else if(!state.playing && this.loop.state === 'started'){
69 | this.loop.stop();
70 | }
71 | //update bpm
72 | Tone.Transport.bpm.value = state.bpm;
73 |
74 | const notes = state.activeNotes;
75 |
76 | const midiDeviceName = state.midiOut[state.selectedMidiOutIndex];
77 | const channel = 10;
78 | const hasNotesOn = this.notesOn.length > 0 && notes.length > 0 || state.sequence.activeColumn == 1;
79 | if(midiDeviceName && hasNotesOn) {
80 | this.notesOn.forEach((midiNoteOn) => {
81 | sendMIDIToDevice(midiDeviceName, midiNoteOn, false, Math.random() * 0.5 + 0.5, channel);
82 | });
83 | this.notesOn = [];
84 | }
85 |
86 | for (let i = 0; i < notes.length; i++) {
87 | const vel = Math.random() * 0.5 + 0.5;
88 |
89 | let midiNote = getMidiNoteFromDrumRow(notes[i]);
90 |
91 | const midiDeviceName = state.midiOut[state.selectedMidiOutIndex];
92 | if(midiDeviceName && state.selectedMidiOutIndex >= 0) {
93 | sendMIDIToDevice(midiDeviceName, midiNote, true, vel, channel);
94 | this.notesOn.push(midiNote);
95 | } else {
96 | const player = this.player.get(getURLIndexForNote(midiNote));
97 | const time = state.sequence.time !== last.sequence.time ? state.sequence.time : Tone.Transport.now();
98 |
99 | player.start(time, 0, '2n', 0, vel);
100 | }
101 |
102 | }
103 | return this;
104 | }
105 | }
106 |
--------------------------------------------------------------------------------
/js/views/sequencer-grid.js:
--------------------------------------------------------------------------------
1 | // Copyright 2018 Google LLC
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // https://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | import * as grid2d from 'grid2d';
16 |
17 | import { View } from './base-view';
18 | import { dpr, setCanvasSize, renderGrid } from '../canvas-utils';
19 | import getMousePosition from '../get-mouse-position';
20 | import { notesToMatrix } from '../samples';
21 | import { times, lerpArray } from '../utils';
22 | import * as responsive from '../models/responsive';
23 |
24 |
25 | export class SequencerGridView extends View {
26 |
27 | constructor(domElement){
28 | super(domElement || document.createElement('canvas'));
29 |
30 | this.context = this.domElement.getContext('2d');
31 |
32 | let mouseDown = false;
33 | const pt = {};
34 | let lastIndex = -1;
35 |
36 |
37 | const onMouseDown = (event, { selectedCornerIndex, sequence })=>{
38 | mouseDown = true;
39 | //only toggle if the grid is in editable mode with a corner selected
40 | if(selectedCornerIndex < 0){
41 | return;
42 | }
43 |
44 | if(event.touches && event.touches.length){
45 | event.preventDefault();
46 | }
47 |
48 | const scaledGrid = grid2d.scale(sequence, this.domElement.clientWidth, this.domElement.clientHeight);
49 | getMousePosition(this.domElement, event, true, pt);
50 |
51 | const cellIndex = grid2d.closestCellIndex(scaledGrid, pt);
52 | if(cellIndex > -1){
53 | //flip it and make a boolean
54 | const pos = grid2d.cellPosition(scaledGrid, cellIndex);
55 | lastIndex = cellIndex;
56 | this.emit('toggle', this, pos, cellIndex);
57 | }
58 | };
59 |
60 | const onMouseLeave = () => {
61 | this.emit('mouseleave', this);
62 | };
63 |
64 | const onMouseMove = (event, { selectedCornerIndex, sequence })=>{
65 | //only toggle if the grid is in editable mode with a corner selected
66 | if(selectedCornerIndex < 0){
67 | return;
68 | }
69 |
70 | if(event.touches && event.touches.length){
71 | //touchstart might not get triggered first
72 | mouseDown = true;
73 | event.preventDefault();
74 | }
75 |
76 | const scaledGrid = grid2d.scale(sequence, this.domElement.clientWidth, this.domElement.clientHeight);
77 | getMousePosition(this.domElement, event, true, pt);
78 |
79 | const cellIndex = grid2d.intersectsCellIndex(scaledGrid, pt);
80 |
81 | if(cellIndex > -1){
82 | const pos = grid2d.cellPosition(scaledGrid, cellIndex);
83 | if(mouseDown){
84 | if(cellIndex !== lastIndex){
85 | this.emit('toggle', this, pos, cellIndex);
86 | lastIndex = cellIndex;
87 | }
88 | } else {
89 | //we are on a cell, mouse is not down and we don't care if it was the last one
90 | this.emit('hover', this, pos, cellIndex);
91 | }
92 | }
93 | };
94 |
95 |
96 | const onMouseUp = ()=> mouseDown = false;
97 |
98 |
99 | this._setEventMap({
100 | 'mouseover' : (event)=> event.target.title && (event.target.title = ''),
101 | //dont bind to both (it will get triggered twice), touch if available
102 | [window.ontouchstart ? 'touchstart' : 'mousedown'] : onMouseDown,
103 | 'mousemove' : onMouseMove,
104 | 'mouseleave' : onMouseLeave,
105 | 'mouseup' : onMouseUp,
106 | 'touchmove' : onMouseMove,
107 | 'touchend' : onMouseUp
108 | });
109 |
110 | }
111 |
112 | render(state, last){
113 |
114 | if(state.innerWidth !== last.innerWidth || state.innerHeight !== last.innerHeight){
115 | //resize
116 | const width = state.layout === responsive.MOBILE_PORTRAIT ? state.innerWidth : state.innerWidth * 0.5 * 0.8;
117 | setCanvasSize(this.domElement, width, width/2);
118 | }
119 |
120 | const c = this.context;
121 | const {
122 | sequence,
123 | encodedSequences,
124 | selectedIndex,
125 | selectedCornerIndex
126 | } = state;
127 |
128 | this.domElement.style.cursor = selectedCornerIndex >= 0 ? 'pointer' : 'inherit';
129 |
130 | c.clearRect(0, 0, c.canvas.width, c.canvas.height);
131 | const matrix = notesToMatrix(encodedSequences[selectedIndex], sequence.columns, sequence.rows);
132 |
133 | const { colorOn, colorOff } = sequence;
134 | /*
135 | const colorOn = sequence.selectedCornerIndex >= 0 ? state.gradient[sequence.selectedCornerIndex] : sequence.colorOn;
136 | const colorOff = sequence.colorOff;*/
137 |
138 | const colors = times(sequence.columns, (x)=>{
139 | let opacity = x === sequence.activeColumn ? 1 : (x/8 % 2 < 1) ? 0.33 : 0.2;
140 | if(selectedCornerIndex >= 0){
141 | opacity += 0.2;
142 | }
143 |
144 | return times(sequence.rows, (y)=> !!matrix[x][y] ?
145 | [colorOn[0], colorOn[1], colorOn[2], opacity] :
146 | [colorOff[0], colorOff[1], colorOff[2], opacity]
147 | );
148 | });
149 |
150 |
151 | const getColor = (x,y)=>{
152 | const hovCR = state.sequence.hoverCellPosition;
153 | const c = colors[x][y];
154 | if(hovCR && hovCR.column === x && hovCR.row === y){
155 | return lerpArray(c, colorOn, 0.25);
156 | //return [c[0], c[1], c[2], c[3] + 0.4];
157 | }
158 | return c;
159 | };
160 |
161 | renderGrid(c, sequence, getColor, c.canvas.width/dpr(), c.canvas.height/dpr(), ()=>true, v=>v);
162 |
163 | return this;
164 | }
165 | }
166 |
167 |
--------------------------------------------------------------------------------
/js/views/sequencer-label.js:
--------------------------------------------------------------------------------
1 | // Copyright 2018 Google LLC
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // https://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | import { View } from './base-view';
16 | import { xForColumn, yForRow } from 'grid2d';
17 | import { MOBILE_PORTRAIT } from '../models/responsive';
18 |
19 |
20 |
21 | export class SequencerLabel extends View {
22 | constructor(domElement){
23 | super(domElement);
24 | }
25 |
26 | render(state){
27 | let label = '';
28 | /*const { width } = this.domElement.getBoundingClientRect();
29 | const height = ~~(cellHeight(state.grid) * width / 2);
30 | this.domElement.style.height = `${height}px`;*/
31 |
32 | const lg = state.layoutGrid;
33 | const [a, b] = state.layoutItems.sequencerLabel;
34 |
35 | if(!a || !b){
36 | return;
37 | }
38 |
39 | const x1 = xForColumn(lg, a.column);
40 | const x2 = xForColumn(lg, b.column);
41 | const y1 = yForRow(lg, a.row);
42 | const y2 = yForRow(lg, b.row);
43 |
44 | const height = `${(y2-y1) * state.innerHeight}px`;
45 |
46 | let css = (state.layout === MOBILE_PORTRAIT) ? ({
47 | position: 'relative',
48 | top: 0,
49 | left: 0,
50 | width: '100%',
51 | height
52 | }) : ({
53 | position: 'absolute',
54 | left: `${x1 * state.innerWidth}px`,
55 | top: `${y1 * state.innerHeight}px`,
56 | width: `${(x2-x1) * state.innerWidth}px`,
57 | height
58 | });
59 |
60 | Object.assign(this.domElement.style, css);
61 |
62 | if(state.selectedCornerIndex > -1){
63 | label = `Editing corner ${state.selectedCornerIndex + 1}`;
64 | } else {
65 | label = ''; //`Sampling column ${pos.column + 1}, row ${pos.row + 1}`;
66 | }
67 | this.domElement.innerHTML = label;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/js/views/spinner.js:
--------------------------------------------------------------------------------
1 | // Copyright 2018 Google LLC
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // https://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | import { View } from './base-view';
16 |
17 |
18 | const template = ({ innerWidth, innerHeight })=>`
19 |
20 | `;
22 |
23 |
24 | export class Spinner extends View {
25 |
26 | constructor(domElement){
27 | super(domElement || document.createElement('div'));
28 | /*this.domElement.classList.add('modal');
29 | this.domElement.classList.add('active');*/
30 | document.body.appendChild(this.domElement);
31 | }
32 |
33 | shouldComponentUpdate(state, last){
34 | return state.loading !== last.loading || state.innerWidth !== last.innerWidth || state.innerHeight !== last.innerHeight;
35 | }
36 |
37 | render(state, last){
38 | this.domElement.innerHTML = state.loading ? template(state) : '';
39 | Object.assign(this.domElement.style, {
40 | display: state.loading ? 'block' : 'none',
41 | position: 'absolute',
42 | top: 0,
43 | left: 0,
44 | width: '100%',
45 | height: '100%',
46 | backgroundColor: 'rgba(0,0,0,0.7)'
47 | });
48 | return super.render(state, last);
49 | }
50 | }
51 |
52 |
--------------------------------------------------------------------------------
/js/views/tiles.js:
--------------------------------------------------------------------------------
1 | // Copyright 2018 Google LLC
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // https://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 |
16 | import { View } from './base-view';
17 | import { toCSSString } from '../models/color';
18 | import * as grid2d from 'grid2d';
19 | import { anyKeyNotEqual } from '../utils';
20 | import { MOBILE_PORTRAIT } from '../models/responsive';
21 |
22 |
23 | /**
24 | * recursively search the children elements for the child,
25 | * repeating the task on `parentElement`
26 | * @param {HTMLCollection} children
27 | * @param {HTMLElement} child
28 | * @return {Number} index of the child in the parentElement
29 | */
30 | const getChildIndex = (children, child)=>{
31 | if(!child){
32 | return -1;
33 | }
34 | for(let i=0; i{
45 | const foundCorners = this.cornerOrder.filter(corner => el.classList.contains(corner));
46 | if (foundCorners.length || depth > maxDepth) {
47 | return foundCorners[0];
48 | }
49 | return findIndexForInput(el.parentElement, depth++);
50 | };
51 |
52 |
53 | export class Corners extends View {
54 |
55 |
56 | constructor(domElement) {
57 | super(domElement);
58 | const el = this.domElement;
59 |
60 | this.cornerOrder = ['tl', 'tr', 'bl', 'br'];
61 |
62 | this._setEventMap({
63 | 'click': (event)=>{
64 | event.preventDefault();
65 | const i = getChildIndex(el.children, event.target);
66 | if(i > -1) {
67 | this.emit('click', this, i);
68 | }
69 | },
70 | 'mouseenter': (event)=> event.target.children[0].classList.add('edit'),
71 | 'mouseleave': (event)=> event.target.children[0].classList.remove('edit')
72 | });
73 | }
74 |
75 | shouldComponentUpdate(state, last){
76 | return anyKeyNotEqual(state, last, ['innerWidth', 'innerHeight', 'selectedCornerIndex']);
77 | }
78 |
79 | render(state){
80 |
81 | const cw = grid2d.cellWidth(state.layoutGrid);
82 | //const ch = grid2d.cellHeight(state.layoutGrid);
83 | const li = state.layoutItems.gridContainer;
84 |
85 | const tW = state.layout === MOBILE_PORTRAIT ? state.innerWidth : cw * (li[1].column - li[0].column) * state.innerWidth;
86 |
87 | const w = ~~(grid2d.cellWidth(state.grid) * tW);
88 |
89 | const calcBorder = (index)=>
90 | state.selectedCornerIndex === index ? '4px solid white' : 'none';
91 |
92 | this.domElement.style.display = (state.selectedCornerIndex === -1) ? 'none' : 'block';
93 |
94 | this.domElement.innerHTML = this.cornerOrder
95 | .map((corner, index)=>{
96 | const color = toCSSString(state.gradient[index]);
97 | const border = calcBorder(index);
98 | return `
99 |
100 |
${(index+1)}
101 |
102 |
32 |