Merge branch 'release/0.1.0'

opensheetmusicdisplay · Sep 23, 2016 · 7f6c416 · 7f6c416
2 parents e48bf11 + 527d9c4
commit 7f6c416
Show file tree

Hide file tree

Showing 26 changed files with 89,358 additions and 23,100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 ### Bugfixes
 
+## [0.1.0] - 2016-09-23
+### Added
+- Added Reset button for cursor for demo
+- Added more xml files for demo and testing
+- Added unit tests for reading and calculating the xml files
+- Added logo as favicon and as img for demo site
+### Changed
+- html site layout of demo
+### Bugfixes
+- Fixed cursor functionality in demo
+
 ## [0.1.0-beta.5] - 2016-09-21
 ### Changed
 - Updated Github pages deployment ([645c428](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/645c42874ea1c43f62d163203d2b96aa6667accf))
@@ -31,14 +42,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [0.1.0-beta] - 2016-09-21
 ### Added
-- Brace and bracket generation using VexFlow ([fd40c22](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/fd40c22d813279ed714028250625cbbdfd5ad633))
+- Prepared for brace and bracket generation with VexFlow ([fd40c22](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/fd40c22d813279ed714028250625cbbdfd5ad633))
 - Class documentation ([73d319f](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/73d319fb17b4663fcfa001343647b8b662c17cee))
 - OSMD is now usable via script tags  ([091dab9](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/091dab9d82d6c477b7e88de2d424024696d126fa))
 - Set up `loglevel` as logging framework ([c00b5a8](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/c00b5a8ee789ece21bf8e8eb02cfa4f13b498e70))
 - Support for ocatvated clefs ([567b3b3](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/567b3b3ec69fad492da68946039517804567cb25))
 - Demo is now automatically built and published to https://opensheetmusicdisplay.github.io/demo/ ([1c63f82](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/1c63f82ea5c7b0ae978f43cf1cc60675026e4060))
 - Class documentation generated with typedoc, published to https://opensheetmusicdisplay.github.io/ ([bc91091](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/bc91091099f76ea5b9145f674bfcea2f36ca6712))
-- Added ties
+- Added rendering tuplets
+- Added rendering ties
+- Added rendering dots
 - Added documentation for VexFlow and other graphical objects
 - Proper title display
 - Cursor on first StaffEntry by default

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -161,7 +161,7 @@ module.exports = function (grunt) {
             demo: {
                 files: [
                     { src: ['*'], dest: '<%= outputDir.build %>/demo/sheets/', cwd: './test/data/', expand: true },
-                    { src: ['*.js', '*.css', '*.html'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' },
+                    { src: ['*.js', '*.css', '*.html', '*.ico'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' },
                     { src: ['osmd-debug.js'], cwd: './build/', expand: true, dest: '<%= outputDir.build %>/demo/' }
                 ]
             }

diff --git a/demo/demo.css b/demo/demo.css
@@ -1,3 +1,11 @@
+p {
+  margin: 0px 8px 8px 8px;
+}
+
+select {
+  margin: 0px 8px 8px 8px;
+}
+
 .bignum {
   width: 1em;
   text-align: center;

diff --git a/demo/demo.js b/demo/demo.js
@@ -6,17 +6,24 @@
     var folder = "sheets/",
     // The available demos
         demos = {
-            "M. Clementi - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1",
-            "M. Clementi - Sonatina Op.36 No.1 Pt.2": "MuzioClementi_SonatinaOpus36No1_Part2",
-            "M. Clementi - Sonatina Op.36 No.3 Pt.1": "MuzioClementi_SonatinaOpus36No3_Part1",
-            "M. Clementi - Sonatina Op.36 No.3 Pt.2": "MuzioClementi_SonatinaOpus36No3_Part2",
-            "J.S. Bach - Air": "JohannSebastianBach_Air",
-            "G.P. Telemann - Sonata, TWV 40:102 - 1. Dolce": "TelemannWV40.102_Sonate-Nr.1.1-Dolce",
-            "C. Gounod - Meditation": "CharlesGounod_Meditation",
-            "J.S. Bach - Praeludium In C Dur BWV846 1": "JohannSebastianBach_PraeludiumInCDur_BWV846_1",
-            "J. Haydn - Concertante Cello": "JosephHaydn_ConcertanteCello",
-            "S. Joplin - Elite Syncopations": "ScottJoplin_EliteSyncopations",
-            "S. Joplin - The Entertainer": "ScottJoplin_The_Entertainer"
+            "M. Clementi - Sonatina Op.36 No.1 Pt.1": "MuzioClementi_SonatinaOpus36No1_Part1.xml",
+            "M. Clementi - Sonatina Op.36 No.1 Pt.2": "MuzioClementi_SonatinaOpus36No1_Part2.xml",
+            "M. Clementi - Sonatina Op.36 No.3 Pt.1": "MuzioClementi_SonatinaOpus36No3_Part1.xml",
+            "M. Clementi - Sonatina Op.36 No.3 Pt.2": "MuzioClementi_SonatinaOpus36No3_Part2.xml",
+            "J.S. Bach - Air": "JohannSebastianBach_Air.xml",
+            "G.P. Telemann - Sonata, TWV 40:102 - 1. Dolce": "TelemannWV40.102_Sonate-Nr.1.1-Dolce.xml",
+            "C. Gounod - Meditation": "CharlesGounod_Meditation.xml",
+            "J.S. Bach - Praeludium In C Dur BWV846 1": "JohannSebastianBach_PraeludiumInCDur_BWV846_1.xml",
+            "J. Haydn - Concertante Cello": "JosephHaydn_ConcertanteCello.xml",
+            "S. Joplin - Elite Syncopations": "ScottJoplin_EliteSyncopations.xml",
+            "S. Joplin - The Entertainer": "ScottJoplin_The_Entertainer.xml",
+            "ActorPreludeSample": "ActorPreludeSample.xml",
+            "an chloe - mozart": "an chloe - mozart.xml",
+            "Beethoven - AnDieFerneGeliebte": "AnDieFerneGeliebte_Beethoven.xml",
+            "das veilchen - mozart": "das veilchen - mozart.xml",
+            "Dichterliebe01": "Dichterliebe01.xml",
+            "mandoline - debussy": "mandoline - debussy.xml",
+            "MozartTrio": "MozartTrio.mxl",
         },
 
         zoom = 1.0,
@@ -31,6 +38,7 @@
         zoomDiv,
         custom,
         nextCursorBtn,
+        resetCursorBtn,
         showCursorBtn,
         hideCursorBtn;
 
@@ -48,6 +56,7 @@
         zoomOut = document.getElementById("zoom-out-btn");
         canvas = document.createElement("div");
         nextCursorBtn = document.getElementById("next-cursor-btn");
+        resetCursorBtn = document.getElementById("reset-cursor-btn");
         showCursorBtn = document.getElementById("show-cursor-btn");
         hideCursorBtn = document.getElementById("hide-cursor-btn");
 
@@ -106,6 +115,9 @@
         nextCursorBtn.addEventListener("click", function() {
             OSMD.cursor.next();
         });
+        resetCursorBtn.addEventListener("click", function() {
+            OSMD.cursor.reset();
+        });
         hideCursorBtn.addEventListener("click", function() {
             OSMD.cursor.hide();
         });
@@ -147,7 +159,7 @@
         disable();
         var isCustom = typeof str === "string";
         if (!isCustom) {
-            str = folder + select.value + ".xml";
+            str = folder + select.value;
         }
         zoom = 1.0;
         OSMD.load(str).then(
@@ -240,6 +252,14 @@
         reader.onload = function (res) {
             selectOnChange(res.target.result);
         };
-        reader.readAsText(event.dataTransfer.files[0]);
+        if (event.dataTransfer.files[0].name.toLowerCase().indexOf(".xml") > 0) {
+            reader.readAsText(event.dataTransfer.files[0]);
+        }
+        else if (event.dataTransfer.files[0].name.toLowerCase().indexOf(".mxl") > 0){
+            reader.readAsBinaryString(event.dataTransfer.files[0]);
+        }
+        else {
+            alert("No vaild .xml/.mxl file!");
+        }
     });
 }());
diff --git a/demo/favicon.ico b/demo/favicon.ico
diff --git a/demo/index.html b/demo/index.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
 
     <title>OpenSheetMusicDisplay Demo</title>
@@ -12,42 +12,55 @@
 
     <!-- Include code and styles for this demo -->
     <script src="demo.js"></script>
-    <link href="demo.css" media="all" rel="stylesheet" />
-  </head>
-  <body>
-    <h1>OpenSheetMusicDisplay Demo</h1>
-    <table cellspacing="0">
-      <tr>
-        <td class="bignum">1</td>
+    <link href="demo.css" media="all" rel="stylesheet"/>
+    <link rel="icon" href="./favicon.ico?" type="image/x-icon"/>
+</head>
+<body>
+<table cellspacing="0" style="max-width:700px;">
+    <tr>
         <td>
-          <p>
-            Select a sample from the list below...
-          </p>
-          <select id="select"></select>
-          <p>... or just drop your MusicXML file on this page.</p>
+            <img src="./favicon.ico?" style="width:64px;height:64px;"/>
         </td>
-      </tr>
-      <tr>
-        <td class="bignum">2</td>
         <td>
-          <p>Current width: <span id="size-str">???</span>px</p>
-          <p>Zoom factor: <span id="zoom-str">???</span>%</p>
-          <p>
-            Zoom controls:
-            <input type="button" value="zoom in" id="zoom-in-btn"/>
-            <input type="button" value="zoom out" id="zoom-out-btn"/>
-          </p>
-          <p>Cursor controls:
-            <input type="button" value="show" id="show-cursor-btn"/>
-            <input type="button" value="hide" id="hide-cursor-btn"/>
-            <input type="button" value="next" id="next-cursor-btn"/>
-          </p>
+            <h1>OpenSheetMusicDisplay Demo</h1>
         </td>
-      </tr>
-      <tr id="error-tr">
+    </tr>
+</table>
+<table cellspacing="0" style="max-width:700px;">
+    <tr>
+        <td valign="top">
+            <select id="select"></select>
+            <p> Select a sample from the list ... </p>
+            <p>... or just drop your MusicXML file on this page.</p>
+        </td>
+        <td valign="top" halign="right">
+            <p>Cursor controls:
+                <input type="button" value="show" id="show-cursor-btn"/>
+                <input type="button" value="hide" id="hide-cursor-btn"/>
+                <input type="button" value="next" id="next-cursor-btn"/>
+                <input type="button" value="reset" id="reset-cursor-btn"/>
+            </p>
+            <p>
+                Zoom controls:
+                <input type="button" value="zoom in" id="zoom-in-btn"/>
+                <input type="button" value="zoom out" id="zoom-out-btn"/>
+            </p>
+            <table cellspacing="0">
+                <tr>
+                    <td>
+                        <p>Zoom factor: <span id="zoom-str">???</span>%</p>
+                    </td>
+                    <td>
+                        <p>Current width: <span id="size-str">???</span>px</p>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+    <tr id="error-tr">
         <td></td>
         <td id="error-td"></td>
-      </tr>
-    </table>
-  </body>
+    </tr>
+</table>
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opensheetmusicdisplay",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0",
   "description": "An open source JavaScript engine for displaying MusicXML based on VexFlow.",
   "main": "dist/src/OSMD/OSMD.js",
   "typings": "dist/src/OSMD/OSMD",

diff --git a/src/MusicalScore/Graphical/MusicSystem.ts b/src/MusicalScore/Graphical/MusicSystem.ts
@@ -396,16 +396,29 @@ export abstract class MusicSystem extends GraphicalObject {
         //Empty
     }
 
-    protected calcInstrumentsBracketsWidth(): number {
-        throw new Error("not implemented");
+    /**
+     * Calculates the summed x-width of a possibly given Instrument Brace and/or Group Bracket(s).
+     * @returns {number} the x-width
+     */
+    protected calcBracketsWidth(): number {
+        let width: number = 0;
+        for (let idx: number = 0, len: number = this.GroupBrackets.length; idx < len; ++idx) {
+            let groupBracket: GraphicalObject = this.GroupBrackets[idx];
+            width = Math.max(width, groupBracket.PositionAndShape.Size.width);
+        }
+        for (let idx2: number = 0, len2: number = this.InstrumentBrackets.length; idx2 < len2; ++idx2) {
+            let instrumentBracket: GraphicalObject = this.InstrumentBrackets[idx2];
+            width = Math.max(width, instrumentBracket.PositionAndShape.Size.width);
+        }
+        return width;
     }
 
     protected createInstrumentBracket(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {
-        throw new Error("not implemented");
+        // no impl here
     }
 
     protected createGroupBracket(firstStaffLine: StaffLine, lastStaffLine: StaffLine, recursionDepth: number): void {
-        throw new Error("not implemented");
+        // no impl here
     }
 
     private findFirstVisibleInstrumentInInstrumentalGroup(instrumentalGroup: InstrumentalGroup): Instrument {

diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts
@@ -6,6 +6,8 @@ import {PointF2D} from "../../../Common/DataObjects/PointF2D";
 import {GraphicalLabel} from "../GraphicalLabel";
 import {VexFlowConverter} from "./VexFlowConverter";
 import {VexFlowTextMeasurer} from "./VexFlowTextMeasurer";
+import {MusicSystem} from "../MusicSystem";
+import {GraphicalObject} from "../GraphicalObject";
 
 /**
  * This is a global contant which denotes the height in pixels of the space between two lines of the stave
@@ -69,6 +71,14 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
         return measure.draw(this.vfctx);
     }
 
+    protected drawInstrumentBrace(bracket: GraphicalObject, system: MusicSystem): void {
+        // empty
+    }
+
+    protected drawGroupBracket(bracket: GraphicalObject, system: MusicSystem): void {
+        // empty
+    }
+
     /**
      * Renders a Label to the screen (e.g. Title, composer..)
      * @param graphicalLabel holds the label string, the text height in units and the font parameters

diff --git a/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSystem.ts b/src/MusicalScore/Graphical/VexFlow/VexFlowMusicSystem.ts
@@ -7,13 +7,24 @@ import {SystemLine} from "../SystemLine";
 import {VexFlowMeasure} from "./VexFlowMeasure";
 import {VexFlowConverter} from "./VexFlowConverter";
 import {StaffLine} from "../StaffLine";
+import {EngravingRules} from "../EngravingRules";
 
 export class VexFlowMusicSystem extends MusicSystem {
     constructor(parent: GraphicalMusicPage, id: number) {
         super(parent, id);
 
     }
 
+    public calculateBorders(rules: EngravingRules): void {
+        if (this.staffLines.length === 0) {
+            return;
+        }
+        let width: number = this.calcBracketsWidth();
+        this.boundingBox.BorderLeft = -width;
+        this.boundingBox.BorderMarginLeft = -width;
+        this.boundingBox.XBordersHaveBeenSet = true;
+    }
+
     /**
      * This method creates all the graphical lines and dots needed to render a system line (e.g. bold-thin-dots..).
      * @param xPosition
@@ -33,30 +44,22 @@ export class VexFlowMusicSystem extends MusicSystem {
         return new SystemLine(lineType, linePosition, this, topMeasure, bottomMeasure);
     }
 
-    /**
-     * Calculates the summed x-width of a possibly given Instrument Brace and/or Group Bracket(s).
-     * @returns {number} the x-width
-     */
-    protected calcInstrumentsBracketsWidth(): number {
-        return 0;
-    }
-
     /**
      * creates an instrument brace for the given dimension.
      * The height and positioning can be inferred from the given points.
-     * @param rightUpper the upper right corner point of the bracket to create
-     * @param rightLower the lower right corner point of the bracket to create
+     * @param firstStaffLine the upper staff line of the bracket to create
+     * @param lastStaffLine the lower staff line of the bracket to create
      */
-    protected createInstrumentBracket(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {
+    protected createInstrumentBrace(firstStaffLine: StaffLine, lastStaffLine: StaffLine): void {
         return;
     }
 
     /**
      * creates an instrument group bracket for the given dimension.
      * There can be cascaded bracket (e.g. a group of 2 in a group of 4) -
      * The recursion depth informs about the current depth level (needed for positioning)
-     * @param rightUpper rightUpper the upper right corner point of the bracket to create
-     * @param rightLower rightLower the lower right corner point of the bracket to create
+     * @param firstStaffLine the upper staff line of the bracket to create
+     * @param lastStaffLine the lower staff line of the bracket to create
      * @param staffHeight
      * @param recursionDepth
      */

diff --git a/src/MusicalScore/VoiceData/SourceMeasure.ts b/src/MusicalScore/VoiceData/SourceMeasure.ts
@@ -38,7 +38,13 @@ export class SourceMeasure extends BaseIdClass {
         }
     }
 
+    /**
+     * The unique measure list index starting with 0.
+     */
     public measureListIndex: number;
+    /**
+     * The measure number for showing on the music sheet. Typically starts with 1.
+     */
     public endsPiece: boolean;
 
     private measureNumber: number;