Skip to content

Commit e2e0424

Browse files
author
name
committed
Painter.
1 parent 5996ea7 commit e2e0424

File tree

2 files changed

+72
-50
lines changed

2 files changed

+72
-50
lines changed

‎bundle/example-piano.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ textarea.staff {
4444
height: 40%;
4545
resize: vertical;
4646
border: 1px solid black;
47+
text-align: center;
4748
}
4849

4950
div.staff {

‎bundle/web-tones.js

Lines changed: 71 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,7 @@ var WebTones;
404404
(function (WebTones) {
405405
var StaffString = /** @class */ (function () {
406406
function StaffString() {
407-
this.SymbolRe = /^(\|)|(\$)|([#@]?[a-g]\d\/\d{1,2})$/;
407+
this.SymbolRe = /(^[|$]$)|(^[#@]?[a-g]\d\/\d{1,2}$)/;
408408
}
409409
StaffString.prototype.setCarret = function (carret) {
410410
this.carret = carret;
@@ -422,21 +422,14 @@ var WebTones;
422422
for (var s = 0; s < subNotes.length; s++) {
423423
totalChars += s > 0 ? 1 : 0;
424424
if (subNotes[s].length > 0) {
425-
if (this.SymbolRe.test(subNotes[s])) {
426-
var symbol = this.createSymbol(subNotes[s]);
427-
symbol.chordFirst = n == 0 && s == 0;
428-
symbol.chordLast = n == notes.length - 1 && s == subNotes.length - 1;
429-
symbol.seqFirst = s == 0;
430-
symbol.seqLast = s == subNotes.length - 1;
431-
symbol.posBegin = totalChars;
432-
symbol.posEnd = totalChars + subNotes[s].length;
433-
this.symbols.push(symbol);
434-
totalChars = symbol.posEnd;
435-
}
436-
else {
437-
console.warn("Unknown symbol: " + subNotes[s]);
438-
totalChars = totalChars + subNotes[s].length;
439-
}
425+
var symbol = this.createSymbol(subNotes[s]);
426+
symbol.chordFirst = n == 0 && s == 0;
427+
symbol.chordLast = n == notes.length - 1 && s == subNotes.length - 1;
428+
symbol.seqFirst = s == 0;
429+
symbol.seqLast = s == subNotes.length - 1;
430+
symbol.posBegin = totalChars;
431+
symbol.posEnd = totalChars = totalChars + subNotes[s].length;
432+
this.symbols.push(symbol);
440433
}
441434
}
442435
}
@@ -445,9 +438,14 @@ var WebTones;
445438
};
446439
StaffString.prototype.createSymbol = function (noteName) {
447440
var symbol = new StaffSymbol();
448-
var parts = noteName.trim().split('/');
449-
symbol.noteName = parts[0];
450-
symbol.noteDiv = parts.length == 2 ? new Number(parts[1]).valueOf() : 1;
441+
if (noteName.match(this.SymbolRe)) {
442+
var parts = noteName.split('/');
443+
symbol.noteName = parts[0];
444+
symbol.noteDiv = parts.length == 2 ? new Number(parts[1]).valueOf() : 1;
445+
}
446+
else {
447+
symbol.error = true;
448+
}
451449
return symbol;
452450
};
453451
return StaffString;
@@ -495,6 +493,7 @@ var WebTones;
495493
_this.CodeC = 'c'.charCodeAt(0);
496494
_this.Code4 = '4'.charCodeAt(0);
497495
_this.LineColor = 'darkgray';
496+
_this.ErrorColor = 'red';
498497
_this.WallColor = 'black';
499498
_this.NoteColor = 'black';
500499
_this.SelectionColor = 'red';
@@ -536,7 +535,11 @@ var WebTones;
536535
if (this.notesDrawn == 0)
537536
this.drawStaff();
538537
var symbol = this.symbols[index];
539-
if (symbol.noteName == '|' || symbol.noteName == '$') {
538+
if (symbol.error) {
539+
this.drawError();
540+
return index;
541+
}
542+
else if (symbol.noteName == '|' || symbol.noteName == '$') {
540543
this.drawWall();
541544
return index;
542545
}
@@ -561,6 +564,15 @@ var WebTones;
561564
this.drawLine(this.LineColor, 0, y2, width, y2);
562565
}
563566
};
567+
StaffStringPainter.prototype.drawError = function () {
568+
var x = this.getCurrentX();
569+
var y1 = this.getNoteY(3);
570+
var y2 = this.getNoteY(-5);
571+
this.context.beginPath();
572+
this.drawLine(this.ErrorColor, x, y1, x, y2);
573+
this.context.stroke();
574+
this.notesDrawn += 0.5;
575+
};
564576
StaffStringPainter.prototype.drawWall = function () {
565577
var x = this.getCurrentX();
566578
var y1 = this.getNoteY(4);
@@ -596,24 +608,30 @@ var WebTones;
596608
};
597609
StaffStringPainter.prototype.drawNote = function (index, flagDir) {
598610
var symbol = this.symbols[index];
599-
var noteX = this.getCurrentX();
600-
var line = this.getNoteLine(symbol.noteName);
601-
if (line != null) {
602-
var noteY = this.getNoteY(line);
603-
if (symbol.noteName.indexOf('#') > -1)
604-
this.drawNoteSharp(noteX, noteY);
605-
else if (symbol.noteName.indexOf('@') > -1)
606-
this.drawNoteFlat(noteX, noteY);
607-
noteX = this.getCurrentX();
608-
if (this.carret >= symbol.posBegin && this.carret <= symbol.posEnd)
609-
this.drawNoteSelection(noteX, noteY);
610-
this.drawMiniLines(line, noteX);
611-
this.drawElipse(noteX, noteY, symbol.noteDiv > 2);
612-
this.drawFlagPost(line, symbol.noteDiv, flagDir, noteX, noteY);
613-
this.updateWidth(noteX);
614-
this.updateHeight(noteY);
615-
}
616-
return noteX;
611+
if (!symbol.error) {
612+
var noteX = this.getCurrentX();
613+
var line = this.getNoteLine(symbol.noteName);
614+
if (line != null) {
615+
var noteY = this.getNoteY(line);
616+
if (symbol.noteName.indexOf('#') > -1)
617+
this.drawNoteMark('♯', noteX, noteY);
618+
else if (symbol.noteName.indexOf('@') > -1)
619+
this.drawNoteMark('♭', noteX, noteY);
620+
noteX = this.getCurrentX();
621+
if (this.carret >= symbol.posBegin && this.carret <= symbol.posEnd)
622+
this.drawNoteSelection(noteX, noteY);
623+
this.drawMiniLines(line, noteX);
624+
this.drawElipse(noteX, noteY, symbol.noteDiv > 2);
625+
this.drawFlagPost(line, symbol.noteDiv, flagDir, noteX, noteY);
626+
this.updateWidth(noteX);
627+
this.updateHeight(noteY);
628+
}
629+
return noteX;
630+
}
631+
else {
632+
this.drawError();
633+
return this.getCurrentX();
634+
}
617635
};
618636
StaffStringPainter.prototype.drawMiniLine = function (line, x) {
619637
var y = this.getNoteY(line);
@@ -623,14 +641,10 @@ var WebTones;
623641
this.context.strokeStyle = this.NoteColor;
624642
this.context.stroke();
625643
};
626-
StaffStringPainter.prototype.drawNoteSharp = function (noteX, noteY) {
644+
StaffStringPainter.prototype.drawNoteMark = function (mark, noteX, noteY) {
627645
this.context.font = this.noteFont;
628-
this.context.fillText("♯", noteX, noteY + this.noteWidth2);
629-
this.notesDrawn += 1.0;
630-
};
631-
StaffStringPainter.prototype.drawNoteFlat = function (noteX, noteY) {
632-
this.context.font = this.noteFont;
633-
this.context.strokeText("♭", noteX, noteY + this.noteWidth2);
646+
this.context.fillStyle = this.NoteColor;
647+
this.context.fillText(mark, noteX, noteY + this.noteWidth2);
634648
this.notesDrawn += 1.0;
635649
};
636650
StaffStringPainter.prototype.drawMiniLines = function (line, noteX) {
@@ -689,11 +703,12 @@ var WebTones;
689703
var dashes = this.getNoteDashes(symbol1.noteDiv);
690704
var line1 = this.getNoteLine(symbol1.noteName);
691705
var line2 = this.getNoteLine(symbol2.noteName);
692-
if (line1 && line2) {
706+
if (line1 != null && line2 != null) {
693707
var fx1 = this.getFlagX(noteX1, flagDir);
694708
var fy1 = this.getFlagY(line1, flagDir);
695709
var fx2 = this.getFlagX(noteX2, flagDir);
696710
var fy2 = this.getFlagY(line2, flagDir);
711+
this.context.strokeStyle = this.NoteColor;
697712
for (var i = 0; i < dashes; i++) {
698713
this.context.beginPath();
699714
this.context.moveTo(fx1, fy1 + i * flagDir * this.noteWidth2);
@@ -725,7 +740,9 @@ var WebTones;
725740
};
726741
StaffStringPainter.prototype.findSeqLast = function (index) {
727742
for (var i = index + 1; i < this.symbols.length; i++)
728-
if (this.symbols[i].seqLast)
743+
if (this.symbols[i].error || this.symbols[index].noteDiv != this.symbols[i].noteDiv)
744+
return index != i - 1 ? i - 1 : -1;
745+
else if (this.symbols[i].seqLast)
729746
return i;
730747
return -1;
731748
};
@@ -828,9 +845,13 @@ var WebTones;
828845
}
829846
};
830847
StaffStringPlayer.prototype.processNote = function (symbol) {
831-
// todo implement tempo
832-
var durationSec = 3 / symbol.noteDiv;
833-
this.timeSec += this.instrument.playNote(this.timeSec, symbol.noteName, durationSec);
848+
if (!symbol.error) {
849+
// todo implement tempo
850+
var durationSec = 3 / symbol.noteDiv;
851+
this.timeSec += this.instrument.playNote(this.timeSec, symbol.noteName, durationSec);
852+
}
853+
else
854+
this.timeSec += this.instrument.playNote(this.timeSec, 'a2', 0.5);
834855
};
835856
return StaffStringPlayer;
836857
}(WebTones.StaffString));

0 commit comments

Comments
 (0)