OSMDOptions.ts 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. import { DrawingParametersEnum, ColoringModes } from "../MusicalScore/Graphical/DrawingParameters";
  2. import { FontStyles } from "../Common/Enums/FontStyles";
  3. export enum CursorType {
  4. Standard = 0,
  5. ThinLeft = 1,
  6. ShortThinTopLeft = 2,
  7. CurrentArea = 3,
  8. CurrentAreaLeft = 4,
  9. }
  10. /** Possible options for the OpenSheetMusicDisplay constructor and osmd.setOptions(). None are mandatory.
  11. * Note that after using setOptions(), you have to call osmd.render() again to make changes visible.
  12. * Example: osmd.setOptions({defaultColorRest: "#AAAAAA", drawSubtitle: false}); osmd.render();
  13. *
  14. * Note that some additional, usually more small scale options are available in EngravingRules,
  15. * though not all of them are meant to be manipulated.
  16. * The OSMDOptions are the main options we support.
  17. */
  18. export interface IOSMDOptions {
  19. /** Whether to let Vexflow align rests to preceding or following notes (Vexflow option). Default false (0).
  20. * This can naturally reduce collisions of rest notes with other notes.
  21. * Auto mode (2) only aligns rests when there are multiple voices in a measure,
  22. * and at least once at the same x-coordinate.
  23. * Auto is the recommended setting, and would be default,
  24. * if it couldn't in rare cases deteriorate rest placement for existing users.
  25. * The on mode (1) always aligns rests,
  26. * also changing their position when there is no simultaneous note at the same x-coordinate,
  27. * which is nonstandard.
  28. */
  29. alignRests?: AlignRestOption | number;
  30. /** Whether to automatically create beams for notes that don't have beams set in XML. */
  31. autoBeam?: boolean;
  32. /** Options for autoBeaming like whether to beam over rests. See AutoBeamOptions interface. */
  33. autoBeamOptions?: AutoBeamOptions;
  34. /** Automatically resize score with canvas size. Default is true. */
  35. autoResize?: boolean;
  36. /** Render Backend, will be SVG if given undefined, "SVG" or "svg", otherwise Canvas. */
  37. backend?: string;
  38. /** Defines the mode that is used for coloring: XML (0), Boomwhacker(1), CustomColorSet (2). Default XML.
  39. * If coloringMode.CustomColorSet (2) is chosen, a coloringSetCustom parameter must be added.
  40. */
  41. coloringMode?: ColoringModes;
  42. /** Set of 8 colors for automatic coloring of 7 notes from C to B + rest note in HTML form (e.g. "#00ff00" for green). */
  43. coloringSetCustom?: string[];
  44. /** Whether to enable coloring noteheads and stems, depending on coloringMode. */
  45. coloringEnabled?: boolean;
  46. /** Whether to color the stems of notes the same as their noteheads. Default false. */
  47. colorStemsLikeNoteheads?: boolean;
  48. /** Dark mode (black background, white notes). Simply sets defaultColorMusic and EngravingRules.PageBackgroundColor. */
  49. darkMode?: boolean;
  50. /** Default color for all musical elements including key signature etc. Can be used for dark mode etc. Default undefined. */
  51. defaultColorMusic?: string;
  52. /** Default color for a note head (without stem). Default black (undefined).
  53. * Only considered before loading a sample, not before render.
  54. * To change the color after loading a sample and before render, use note(.sourceNote).NoteheadColor.
  55. * The format is Vexflow format, either "#rrggbb" or "#rrggbboo" where <oo> is opacity (00 = transparent). All hex values.
  56. * E.g., a half-transparent red would be "#FF000080", invisible/transparent would be "#00000000" or "#12345600".
  57. */
  58. defaultColorNotehead?: string;
  59. /** Default color for a note stem. Default black (undefined). */
  60. defaultColorStem?: string;
  61. /** Default color for rests. Default black (undefined). */
  62. defaultColorRest?: string;
  63. /** Default color for Labels like title or lyrics. Default black (undefined). */
  64. defaultColorLabel?: string;
  65. /** Default color for labels in the title. Overrides defaultColorLabel for title labels like composer. Default black (undefined). */
  66. defaultColorTitle?: string;
  67. /** Default font used for text and labels, e.g. title or lyrics. Default Times New Roman
  68. * Note that OSMD originally always used Times New Roman,
  69. * so things like layout and spacing may still be optimized for it.
  70. * Valid options are CSS font families available in the browser used for rendering,
  71. * e.g. Times New Roman, Helvetica.
  72. */
  73. defaultFontFamily?: string;
  74. /** Default font style, e.g. FontStyles.Bold (1). Default Regular (0). */
  75. defaultFontStyle?: FontStyles;
  76. /** Don't show/load cursor. Will override disableCursor in drawingParameters. */
  77. disableCursor?: boolean;
  78. /** Follow Cursor: Scroll the page when cursor.next() is called and the cursor moves into a new system outside of the current view frame. */
  79. followCursor?: boolean;
  80. /** Broad Parameters like compact or preview mode.
  81. * Also try "compacttight", which is like compact but also reduces margins.
  82. * To see what this mode does and maybe adjust the spacing parameters yourself instead of using the mode,
  83. * see DrawingParameters.ts:setForCompactTightMode().
  84. */
  85. drawingParameters?: string | DrawingParametersEnum;
  86. /** Whether to draw credits (title, subtitle, composer, lyricist) (in future: copyright etc., see <credit>). */
  87. drawCredits?: boolean;
  88. /** Whether to draw the title of the piece. If false, disables drawing Subtitle as well. */
  89. drawTitle?: boolean;
  90. /** Whether to draw the subtitle of the piece. If true, enables drawing Title as well. */
  91. drawSubtitle?: boolean;
  92. /** Whether to draw the composer name (top right of the score). */
  93. drawComposer?: boolean;
  94. /** Whether to draw the lyricist's name, if given (top left of the score). */
  95. drawLyricist?: boolean;
  96. /** Whether to draw metronome marks. Default true. (currently OSMD can only draw one at the beginning) */
  97. drawMetronomeMarks?: boolean;
  98. /** Whether to draw part (instrument) names. Setting this to false also disables drawPartAbbreviations,
  99. * unless explicitly enabled (drawPartNames: false, drawPartAbbreviations: true).
  100. */
  101. drawPartNames?: boolean;
  102. /** Whether to draw part (instrument) name abbreviations each system after the first. Only draws if drawPartNames. Default true. */
  103. drawPartAbbreviations?: boolean;
  104. /** Whether to draw measure numbers (labels). Default true.
  105. * Draws a measure number label at first measure, system start measure,
  106. * and every [measureNumberInterval] measures.
  107. * See the [measureNumberInterval] option, default is 2.
  108. */
  109. drawMeasureNumbers?: boolean;
  110. /** Whether to only draw measure numbers at the start of a system ("new line"), instead of every [measureNumberInterval] measures. Default false. */
  111. drawMeasureNumbersOnlyAtSystemStart?: boolean;
  112. /** Whether to draw time signatures (e.g. 4/4). Default true. */
  113. drawTimeSignatures?: boolean;
  114. /** The interval of measure numbers to draw, i.e. it draws the measure number above the beginning label every x measures. Default 2. */
  115. measureNumberInterval?: number;
  116. /** Whether to read measure numbers from the "number" attribute in the xml file as opposed to defaulting to start at measure 1. Default true. */
  117. useXMLMeasureNumbers?: boolean;
  118. /** Whether to draw fingerings (only left to the note for now). Default true (unless solo part). */
  119. drawFingerings?: boolean;
  120. /** Where to draw fingerings (above, below, aboveorbelow, left, right, or auto).
  121. * Default AboveOrBelow. Auto experimental
  122. */
  123. fingeringPosition?: string;
  124. /** For above/below fingerings, whether to draw them directly above/below notes (default), or above/below staffline. */
  125. fingeringInsideStafflines?: boolean;
  126. /** Whether to draw hidden/invisible notes (print-object="no" in XML). Default false. Not yet supported. */ // TODO
  127. drawHiddenNotes?: boolean;
  128. /** Whether to draw lyrics (and their extensions and dashes). */
  129. drawLyrics?: boolean;
  130. /** Whether to calculate extra slurs with bezier curves not covered by Vexflow slurs. Default true. */
  131. drawSlurs?: boolean;
  132. /** Only draw measure n to m, where m is the number specified. (for n, see drawFromMeasureNumber) */
  133. drawUpToMeasureNumber?: number;
  134. /** Only draw the first n systems, where n is the number specified. */
  135. drawUpToSystemNumber?: number;
  136. /** Only draw the first n pages, where n is the number specified. */
  137. drawUpToPageNumber?: number;
  138. /** Only draw measure n to m, where n is the number you specify. (for m, see drawUpToMeasureNumber) */
  139. drawFromMeasureNumber?: number;
  140. /** Whether to fill measures that don't have notes given in the XML with whole rests (visible = 1, invisible = 2, for layouting). Default No (0). */
  141. fillEmptyMeasuresWithWholeRest?: FillEmptyMeasuresWithWholeRests | number;
  142. /** Whether to set the wanted stem direction by xml (default) or automatically. */
  143. setWantedStemDirectionByXml?: boolean;
  144. /** Whether tuplets are labeled with ratio (e.g. 5:2 instead of 5 for quintuplets). Default false. */
  145. tupletsRatioed?: boolean;
  146. /** Whether all tuplets should be bracketed (e.g. |--5--| instead of 5). Default false.
  147. * If false, only tuplets given as bracketed in XML (bracket="yes") will be bracketed.
  148. */
  149. tupletsBracketed?: boolean;
  150. /** Whether all triplets should be bracketed. Overrides tupletsBracketed for triplets.
  151. * If false, only triplets given as bracketed in XML (bracket="yes") will be bracketed.
  152. * (Bracketing all triplets can be cluttering)
  153. */
  154. tripletsBracketed?: boolean;
  155. /** See OpenSheetMusicDisplay.PageFormatStandards for standard options like "A4 P" or "Endless".
  156. * Default Endless.
  157. * Uses OpenSheetMusicDisplay.StringToPageFormat().
  158. * Unfortunately it would be error-prone to set a PageFormat type directly.
  159. */
  160. pageFormat?: string;
  161. /** A custom page/canvas background color. Default undefined/transparent.
  162. * Example: "#FFFFFF" = white. "#12345600" = transparent.
  163. * This can be useful when you want to export an image with e.g. white background color
  164. * instead of transparent, from a CanvasBackend.
  165. * Note: Using a background color will prevent the cursor from being visible for now
  166. * (will be fixed at some point).
  167. */
  168. pageBackgroundColor?: string;
  169. /** This option enables or disables "performance" mode where skybottom lines are calculated using the SVG bounding box engine
  170. * instead of the canvas pixel method. This confers a 2-3x performance increase depending on the browser used.
  171. * This will only be work if the environment supports SVG's getBBox method - Otherwise it will default back to the canvas method.
  172. * Defaults to off.
  173. * (Note this won't ever be used in the visual regression headless mode.)
  174. */
  175. performanceMode?: boolean;
  176. /** This makes OSMD render on one single horizontal (staff-)line.
  177. * This option should be set before loading a score. It only starts working after load(),
  178. * calling setOptions() after load and then render() doesn't work in this case.
  179. */
  180. renderSingleHorizontalStaffline?: boolean;
  181. /** Whether to begin a new system ("line break") when given in XML ('new-system="yes"').
  182. * Default false, because OSMD does its own layout that will do line breaks interactively
  183. * at different measures. So this option may result in a system break after a single measure in a system.
  184. */
  185. newSystemFromXML?: boolean;
  186. /** Whether to begin a new page ("page break") when given in XML ('new-page="yes"').
  187. * Default false, because OSMD does its own layout that will do page breaks interactively
  188. * (when given a PageFormat) at different measures.
  189. * So this option may result in a page break after a single measure on a page.
  190. */
  191. newPageFromXML?: boolean;
  192. /** A custom function that is executed when the xml is read, modifies it, and returns a new xml string that OSMD then parses. */
  193. onXMLRead?(xml: string): string;
  194. /** The cutoff number for rendering percussion clef stafflines as a single line. Default is 4.
  195. * This is number of instruments specified, e.g. a drumset:
  196. * <score-part id="P1">
  197. * <part-name>Drumset</part-name>
  198. * <part-abbreviation>D. Set</part-abbreviation>
  199. * <score-instrument id="P1-I36">
  200. * <instrument-name>Acoustic Bass Drum</instrument-name>
  201. * </score-instrument>
  202. * <score-instrument id="P1-I37">
  203. * <instrument-name>Bass Drum 1</instrument-name>
  204. * </score-instrument>
  205. * <score-instrument id="P1-I38">
  206. * <instrument-name>Side Stick</instrument-name>
  207. * </score-instrument>
  208. * <score-instrument id="P1-I39">
  209. * <instrument-name>Acoustic Snare</instrument-name>
  210. * </score-instrument>
  211. * ...
  212. * Would still render as 5 stafflines by default, since we have 4 (or greater) instruments in this part.
  213. * While a snare:
  214. * <score-part id="P2">
  215. * <part-name>Concert Snare Drum</part-name>
  216. * <part-abbreviation>Con. Sn.</part-abbreviation>
  217. * <score-instrument id="P2-I38">
  218. * <instrument-name>Side Stick</instrument-name>
  219. * </score-instrument>
  220. * <score-instrument id="P2-I39">
  221. * <instrument-name>Acoustic Snare</instrument-name>
  222. * </score-instrument>
  223. * ...
  224. * Would render with 1 line on the staff, since we only have 2 voices.
  225. * If this value is 0, the feature is turned off.
  226. * If this value is -1, it will render all percussion clefs as a single line.
  227. */
  228. percussionOneLineCutoff?: number;
  229. /** This property is only active if the above property is active (percussionOneLineCutoff)
  230. * This is the cutoff for forcing all voices to the single line, instead of rendering them at different
  231. * positions above/below the line.
  232. * The default is 3, so if a part has less than voices, all of them will be rendered on the line.
  233. * This is for cases like a Concert snare, which has multiple 'instruments' available (snare, side stick)
  234. * should still render only on the line since there is no ambiguity.
  235. * If this value is 0, the feature is turned off.
  236. * IF this value is -1, it will render all percussion clef voices on the single line.
  237. */
  238. percussionForceVoicesOneLineCutoff?: number;
  239. /** The softmaxFactor for Vexflow's formatter. Default is 5, default in Vexflow is 100 (voice.js).
  240. * Lowering this factor makes the spacing between individual notes smaller (especially from one half note to the next).
  241. * So, to get more compact scores, try lowering this value (or set osmd.zoom, which simply scales),
  242. * or try 100 for a more expansive layout.
  243. * Setting this is the same as setting osmd.EngravingRules.SoftmaxFactorVexFlow.
  244. */
  245. spacingFactorSoftmax?: number;
  246. /**
  247. * Number in pixels, of spacing between multi-line labels
  248. */
  249. spacingBetweenTextLines?: number;
  250. /**
  251. * Set to true if the last system line should be streched across the whole page just as the other systems. Default is false
  252. */
  253. stretchLastSystemLine?: boolean;
  254. /**
  255. * Set to true if subsequent measures full of rests should be auto-converted to multi-rest measure. Default is true
  256. * This works across instruments- If all instruments have subsequent measures with nothing but rests, multirest measures are generated
  257. */
  258. autoGenerateMutipleRestMeasuresFromRestMeasures?: boolean;
  259. /**
  260. * Defines multiple simultaneous cursors. If left undefined the standard cursor will be used.
  261. */
  262. cursorsOptions?: CursorOptions[];
  263. }
  264. export enum AlignRestOption {
  265. Never = 0, // false should also work
  266. Always = 1, // true should also work
  267. Auto = 2
  268. }
  269. export enum FillEmptyMeasuresWithWholeRests {
  270. No = 0,
  271. YesVisible = 1,
  272. YesInvisible = 2 // fill with invisible whole rests
  273. }
  274. export enum BackendType {
  275. SVG = 0,
  276. Canvas = 1
  277. }
  278. /** Handles [[IOSMDOptions]], e.g. returning default options with OSMDOptionsStandard() */
  279. export class OSMDOptions {
  280. /** Returns the default options for OSMD.
  281. * These are e.g. used if no options are given in the [[OpenSheetMusicDisplay]] constructor.
  282. */
  283. public static OSMDOptionsStandard(): IOSMDOptions {
  284. return {
  285. autoResize: true,
  286. backend: "svg",
  287. drawingParameters: DrawingParametersEnum.default,
  288. };
  289. }
  290. public static BackendTypeFromString(value: string): BackendType {
  291. if (value && value.toLowerCase() === "canvas") {
  292. return BackendType.Canvas;
  293. } else {
  294. return BackendType.SVG;
  295. }
  296. }
  297. }
  298. export interface AutoBeamOptions {
  299. /** Whether to extend beams over rests. Default false. */
  300. beam_rests?: boolean;
  301. /** Whether to extend beams only over rests that are in the middle of a potential beam. Default false. */
  302. beam_middle_rests_only?: boolean;
  303. /** Whether to maintain stem direction of autoBeamed notes. Discouraged, reduces beams. Default false. */
  304. maintain_stem_directions?: boolean;
  305. /** Groups of notes (fractions) to beam within a measure.
  306. * List of fractions, each fraction being [nominator, denominator].
  307. * E.g. [[3,4],[1,4]] will beam the first 3 quarters of a measure, then the last quarter.
  308. */
  309. groups?: [number[]];
  310. }
  311. export interface CursorOptions {
  312. /**
  313. * Type of cursor:
  314. * 0: Standard highlighting current notes
  315. * 1: Thin line left to the current notes
  316. * 2: Short thin line on top of stave and left to the current notes
  317. * 3: Current measure
  318. * 4: Current measure to left of current notes
  319. */
  320. type: CursorType;
  321. /**
  322. * Color to draw the cursor
  323. */
  324. color: string;
  325. /**
  326. * alpha value to be used with color (0.0 transparent, 0.5 medium, 1.0 opaque).
  327. */
  328. alpha: number;
  329. /**
  330. * If true, this cursor will be followed.
  331. */
  332. follow: boolean;
  333. }