piano/js/components/Note/Score.js

222 lines
6.5 KiB
JavaScript
Raw Normal View History

/*jshint browser:true */
/*globals React, App */
2014-11-08 17:52:36 +00:00
(function () {
'use strict';
/**
* Display a set of notes
*
* @prop {notes: array} List of notes
* @prop {channels: array} List of configured channels
* @prop {time: int} Current playing time
2014-11-08 17:52:36 +00:00
*/
App.components.create('Note', {
displayName: 'Score',
statics: {
channels: [
'hsl(225, 49%, 44%)',
'hsl(22.5, 84%, 56%)',
'hsl(45, 53%, 39%)',
'hsl(67.5, 84%, 56%)',
'hsl(90, 84%, 56%)',
'hsl(112.5, 84%, 56%)',
'hsl(135, 84%, 56%)',
'hsl(157.5, 84%, 56%)',
'hsl(180, 84%, 56%)',
'hsl(202.5, 84%, 56%)',
'hsl(247.5, 84%, 56%)',
'hsl(270, 84%, 56%)',
'hsl(292.5, 84%, 56%)',
'hsl(315, 84%, 56%)',
'hsl(337.5, 84%, 56%)',
'hsl(0, 84%, 56%)'
]
},
propTypes: {
notes: React.PropTypes.array.isRequired,
channels: React.PropTypes.array.isRequired,
2014-11-08 17:52:36 +00:00
time: React.PropTypes.number
},
getDefaultProps: function () {
return {
time: 0
};
},
getInitialState: function () {
return {
notes: [],
time: 0,
width: 0,
height: 0
};
},
/**
* When component is mounted, create Kinetic stage and
* attach resizing event
*/
componentDidMount: function () {
var notes;
window.addEventListener('resize', this.resize);
notes = this.props.notes;
this.sort(notes);
this.setState({
notes: notes,
time: this.props.time
}, this.resize);
},
componentWillUnmount: function () {
window.removeEventListener('resize', this.resize);
},
/**
* Redraw canvas on each props update
*/
componentWillReceiveProps: function (nextProps) {
if (nextProps.notes !== this.props.notes) {
this.sort();
}
this.setState({
notes: nextProps.notes,
time: nextProps.time
}, this.draw);
},
/**
* Never rebuild canvas element
*/
shouldComponentUpdate: function (props) {
return false;
},
/**
* Set canvas size
*
* @param {callback: func} Called when size is updated
*/
resize: function (callback) {
var canvas = this.getDOMNode(),
parent = canvas.parentNode,
width = parent.clientWidth,
height = parent.clientHeight,
ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
this.setState({
width: width,
height: height
}, this.draw);
},
/**
* Get note offset by note ID
*
* @param {id: int} Note ID
*/
getOffset: function (id) {
return id - App.MIDI.keyOffset -
App.components.Note.Board.black.filter(function (el) {
return el < id;
}).length;
},
/**
* Get whether a note is black or not
*
* @param {id: int} Note ID
*/
isBlack: function (id) {
return (App.components.Note.Board.black.indexOf(id) > -1);
},
/**
* Sort notes by length
*
* @param {notes: array} Notes list
*/
sort: function (notes) {
var length = notes.length, i;
for (i = 0; i < length; i += 1) {
notes[i].id = i;
}
notes.sort(function (a, b) {
if (a.length === b.length) {
return b.start - a.start;
}
return b.length - a.length;
});
},
/**
* Draw notes
*/
draw: function () {
var notes = this.state.notes, time = this.state.time,
width = this.state.width, height = this.state.height,
xUnit = width / 52, yUnit = xUnit * 5,
maxTime = Math.ceil(height / yUnit),
note, length, i, ctx, offset, x, y, noteWidth, noteHeight,
colors = App.components.Note.Score.channels, count = 0,
channels = this.props.channels;
2014-11-08 17:52:36 +00:00
ctx = this.getDOMNode().getContext('2d');
ctx.clearRect(0, 0, width, height);
ctx.strokeStyle = '#262626';
ctx.lineWidth = 2;
length = notes.length;
for (i = 0; i < length; i += 1) {
note = notes[i];
if (note.start + note.length > time &&
note.start < time + maxTime &&
channels[note.channel].notes) {
2014-11-08 17:52:36 +00:00
offset = this.getOffset(note.note);
count += 1;
x = Math.floor(xUnit * offset);
y = Math.floor(height - yUnit * (note.start + note.length - time));
noteWidth = Math.floor(xUnit);
noteHeight = Math.floor(yUnit * note.length);
if (note.channel === 9 && noteHeight < 10) {
noteHeight = 10;
}
if (this.isBlack(note.note)) {
x -= Math.floor(xUnit / 4);
noteWidth = Math.floor(xUnit / 2);
}
ctx.fillStyle = colors[note.channel];
2014-11-08 17:52:36 +00:00
ctx.strokeRect(x, y, noteWidth, noteHeight);
ctx.fillRect(x, y, noteWidth, noteHeight);
}
}
},
/**
* Render score canvas
*/
render: function () {
return React.DOM.canvas();
}
});
}());