VexFlowInstrumentBracket.ts 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import Vex = require("vexflow");
  2. import {GraphicalObject} from "../GraphicalObject";
  3. import {VexFlowStaffLine} from "./VexFlowStaffLine";
  4. import { BoundingBox } from "../BoundingBox";
  5. import { VexFlowMeasure } from "./VexFlowMeasure";
  6. import { unitInPixels } from "./VexFlowMusicSheetDrawer";
  7. /**
  8. * Class that defines a instrument bracket at the beginning of a line.
  9. */
  10. export class VexFlowInstrumentBracket extends GraphicalObject {
  11. protected vexflowConnector: Vex.Flow.StaveConnector;
  12. constructor(firstVexFlowStaffLine: VexFlowStaffLine, lastVexFlowStaffLine: VexFlowStaffLine, depth: number = 0) {
  13. super();
  14. this.PositionAndShape = new BoundingBox(this, firstVexFlowStaffLine.ParentMusicSystem.PositionAndShape);
  15. const firstVexMeasure: VexFlowMeasure = firstVexFlowStaffLine.Measures[0] as VexFlowMeasure;
  16. const lastVexMeasure: VexFlowMeasure = lastVexFlowStaffLine.Measures[0] as VexFlowMeasure;
  17. this.addConnector(firstVexMeasure.getVFStave(), lastVexMeasure.getVFStave(), Vex.Flow.StaveConnector.type.BRACKET, depth);
  18. }
  19. /**
  20. * Render the bracket using the given backend
  21. * @param ctx Render Vexflow context
  22. */
  23. public draw(ctx: Vex.Flow.RenderContext): void {
  24. // Draw vexflow brace. This sets the positions inside the connector.
  25. this.vexflowConnector.setContext(ctx).draw();
  26. // Set bounding box
  27. const con: Vex.Flow.StaveConnector = this.vexflowConnector;
  28. // First line in first stave
  29. const topY: number = con.top_stave.getYForLine(0);
  30. // Last line in last stave
  31. const botY: number = con.bottom_stave.getYForLine(con.bottom_stave.getNumLines() - 1) + con.thickness;
  32. // Set bounding box position and size in OSMD units
  33. this.PositionAndShape.AbsolutePosition.x = (con.top_stave.getX() - 2 + con.x_shift) / unitInPixels;
  34. this.PositionAndShape.AbsolutePosition.y = topY / unitInPixels;
  35. this.PositionAndShape.Size.height = (botY - topY) / unitInPixels;
  36. this.PositionAndShape.Size.width = 12 / unitInPixels; // width is always 12 -> vexflow implementation
  37. }
  38. /**
  39. * Adds a connector between two staves
  40. *
  41. * @param {Stave} stave1: First stave
  42. * @param {Stave} stave2: Second stave
  43. * @param {Flow.StaveConnector.type} type: Type of connector
  44. */
  45. private addConnector(stave1: Vex.Flow.Stave, stave2: Vex.Flow.Stave, type: any, depth: number): void {
  46. this.vexflowConnector = new Vex.Flow.StaveConnector(stave1, stave2)
  47. .setType(type)
  48. .setXShift(depth * -5);
  49. }
  50. }