|
|
@ -1,4 +1,5 @@ |
|
|
|
/*globals React, Kinetic, App */ |
|
|
|
/*jshint browser:true */ |
|
|
|
/*globals React, App */ |
|
|
|
|
|
|
|
(function () { |
|
|
|
'use strict'; |
|
|
@ -6,8 +7,9 @@ |
|
|
|
/** |
|
|
|
* Display a set of notes |
|
|
|
* |
|
|
|
* @prop {notes: array} List of notes |
|
|
|
* @prop {time: int} Current playing time |
|
|
|
* @prop {notes: array} List of notes |
|
|
|
* @prop {channels: array} List of configured channels |
|
|
|
* @prop {time: int} Current playing time |
|
|
|
*/ |
|
|
|
App.components.create('Note', { |
|
|
|
displayName: 'Score', |
|
|
@ -35,12 +37,12 @@ |
|
|
|
|
|
|
|
propTypes: { |
|
|
|
notes: React.PropTypes.array.isRequired, |
|
|
|
channels: React.PropTypes.array.isRequired, |
|
|
|
time: React.PropTypes.number |
|
|
|
}, |
|
|
|
|
|
|
|
getDefaultProps: function () { |
|
|
|
return { |
|
|
|
notes: [], |
|
|
|
time: 0 |
|
|
|
}; |
|
|
|
}, |
|
|
@ -170,7 +172,8 @@ |
|
|
|
xUnit = width / 52, yUnit = xUnit * 5, |
|
|
|
maxTime = Math.ceil(height / yUnit), |
|
|
|
note, length, i, ctx, offset, x, y, noteWidth, noteHeight, |
|
|
|
channels = App.components.Note.Score.channels, count = 0; |
|
|
|
colors = App.components.Note.Score.channels, count = 0, |
|
|
|
channels = this.props.channels; |
|
|
|
|
|
|
|
ctx = this.getDOMNode().getContext('2d'); |
|
|
|
ctx.clearRect(0, 0, width, height); |
|
|
@ -183,7 +186,8 @@ |
|
|
|
note = notes[i]; |
|
|
|
|
|
|
|
if (note.start + note.length > time && |
|
|
|
note.start < time + maxTime) { |
|
|
|
note.start < time + maxTime && |
|
|
|
channels[note.channel].notes) { |
|
|
|
offset = this.getOffset(note.note); |
|
|
|
count += 1; |
|
|
|
|
|
|
@ -201,7 +205,7 @@ |
|
|
|
noteWidth = Math.floor(xUnit / 2); |
|
|
|
} |
|
|
|
|
|
|
|
ctx.fillStyle = channels[note.channel]; |
|
|
|
ctx.fillStyle = colors[note.channel]; |
|
|
|
ctx.strokeRect(x, y, noteWidth, noteHeight); |
|
|
|
ctx.fillRect(x, y, noteWidth, noteHeight); |
|
|
|
} |
|
|
|