satie
Version:
A sheet music renderer for the web
82 lines (81 loc) • 3.69 kB
JavaScript
/**
* This file is part of Satie music engraver <https://github.com/jnetterf/satie>.
* Copyright (C) Joshua Netterfield <joshua.ca> 2015 - present.
*
* Satie is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* Satie is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Satie. If not, see <http://www.gnu.org/licenses/>.
*/
;
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/**
* @file Renders a tuplet number, for tuplets in beams and unbeamed tuplets.
*/
var musicxml_interfaces_1 = require("musicxml-interfaces");
var react_1 = require("react");
var lodash_1 = require("lodash");
var private_views_glyph_1 = require("./private_views_glyph");
var private_smufl_1 = require("./private_smufl");
var $Glyph = react_1.createFactory(private_views_glyph_1.default);
var TupletNumber = (function (_super) {
__extends(TupletNumber, _super);
function TupletNumber() {
return _super !== null && _super.apply(this, arguments) || this;
}
TupletNumber.prototype.render = function () {
var _a = this.props, x1 = _a.x1, x2 = _a.x2, y1 = _a.y1, y2 = _a.y2, tuplet = _a.tuplet;
var placement = tuplet.placement;
var text = (tuplet.tupletActual.tupletNumber.text);
var symbols = lodash_1.map(text, function (char) { return "tuplet" + char; });
var boxes = lodash_1.map(symbols, function (symbol) { return private_smufl_1.bboxes[symbol]; });
var widths = lodash_1.map(boxes, function (box) { return (box[0] - box[2]) * 10; });
var width = lodash_1.reduce(widths, function (total, width) { return total + width; }, 0);
var offset = (x1 + x2) / 2;
var xs = lodash_1.reduce(boxes, function (memo, box) {
memo.push(box[0] * 10 + lodash_1.last(memo));
return memo;
}, [0]);
var y = (y1 + y2) / 2 + (placement === musicxml_interfaces_1.AboveBelow.Above ? 7.5 : 9.5);
return react_1.DOM.g(null,
// Mask
// FIXME: We should instead split up the rectangle into
// two parts to avoid breaking transparent backgrounds!
react_1.DOM.polygon({
fill: "white",
key: "mask",
points: ((offset - width / 2 - 6) + "," + (y - boxes[0][1] * 10) + " " +
(offset - width / 2 - 6) + "," + (y + boxes[0][3] * 10) + " " +
(offset + width / 2 + 6) + "," + (y + boxes[0][3] * 10) + " " +
(offset + width / 2 + 6) + "," + (y - boxes[0][1] * 10)),
stroke: "white",
strokeWidth: 0
}),
// Glyphs
lodash_1.map(symbols, function (symbol, index) {
return $Glyph({
key: "glyph" + index,
fill: "#000000",
glyphName: symbol,
x: xs[index] + offset - width / 2,
y: y
});
}));
};
return TupletNumber;
}(react_1.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = TupletNumber;
;