Ver Fonte

Merge branch 'feat/ScrollToCursor' of https://github.com/praisethemoon/opensheetmusicdisplay into praisethemoon-feat/ScrollToCursor

merge #532

fix followCursor option setting even if undefined
sschmidTU há 6 anos atrás
pai
commit
0043e1b028

+ 6 - 0
demo/index.html

@@ -62,6 +62,12 @@
                     </div>
                 </div>
             </div>
+            <div class="item">
+                <div class="ui toggle checkbox">
+                    <input type="checkbox" name="public" id="follow-cursor-checkbox">
+                    <label>Follow Cursor</label>
+                </div>
+            </div>
         </div>
     </div>         
     <div class="column">

+ 7 - 0
demo/index.js

@@ -62,6 +62,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
     custom,
     nextCursorBtn,
     resetCursorBtn,
+    followCursorCheckbox,
     showCursorBtn,
     hideCursorBtn,
     backendSelect,
@@ -85,6 +86,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         canvas = document.createElement("div");
         nextCursorBtn = document.getElementById("next-cursor-btn");
         resetCursorBtn = document.getElementById("reset-cursor-btn");
+        followCursorCheckbox = document.getElementById("follow-cursor-checkbox");
         showCursorBtn = document.getElementById("show-cursor-btn");
         hideCursorBtn = document.getElementById("hide-cursor-btn");
         backendSelect = document.getElementById("backend-select");
@@ -195,6 +197,11 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         resetCursorBtn.addEventListener("click", function() {
             openSheetMusicDisplay.cursor.reset();
         });
+        if (followCursorCheckbox) {
+            followCursorCheckbox.onclick = function() {
+                openSheetMusicDisplay.FollowCursor = !openSheetMusicDisplay.FollowCursor;
+            }
+        }
         hideCursorBtn.addEventListener("click", function() {
             openSheetMusicDisplay.cursor.hide();
         });

+ 2 - 1
src/MusicalScore/Graphical/MusicSheetCalculator.ts

@@ -2690,7 +2690,8 @@ export abstract class MusicSheetCalculator {
 
     private calculateTempoExpressions(): void {
         const maxIndex: number = Math.min(this.graphicalMusicSheet.ParentMusicSheet.SourceMeasures.length, EngravingRules.Rules.MaxMeasureToDrawIndex);
-        for (let i: number = 0; i < maxIndex; i++) {
+        const minIndex: number = EngravingRules.Rules.MinMeasureToDrawIndex;
+        for (let i: number = minIndex; i < maxIndex; i++) {
             const sourceMeasure: SourceMeasure = this.graphicalMusicSheet.ParentMusicSheet.SourceMeasures[i];
             for (let j: number = 0; j < sourceMeasure.TempoExpressions.length; j++) {
                 this.calculateTempoExpressionsForMultiTempoExpression(sourceMeasure, sourceMeasure.TempoExpressions[j], i);

+ 3 - 1
src/OpenSheetMusicDisplay/Cursor.ts

@@ -104,7 +104,9 @@ export class Cursor {
       cursorElement.width = newWidth;
       this.updateStyle(newWidth);
     }
-
+    if (this.openSheetMusicDisplay.FollowCursor) {
+      this.cursorElement.scrollIntoView({behavior: "smooth", block: "center"});
+    }
     // Show cursor
     // // Old cursor: this.graphic.Cursors.push(cursor);
     this.cursorElement.style.display = "";

+ 2 - 0
src/OpenSheetMusicDisplay/OSMDOptions.ts

@@ -35,6 +35,8 @@ export interface IOSMDOptions {
     defaultColorTitle?: string;
     /** Don't show/load cursor. Will override disableCursor in drawingParameters. */
     disableCursor?: boolean;
+    /** Follow Cursor */
+    followCursor?: boolean;
     /** Broad Parameters like compact or preview mode. */
     drawingParameters?: string | DrawingParametersEnum;
     /** Whether to draw credits (title, subtitle, composer, lyricist) (in future: copyright etc., see <credit>). */

+ 12 - 0
src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -72,6 +72,7 @@ export class OpenSheetMusicDisplay {
     private drawingParameters: DrawingParameters;
     private autoResizeEnabled: boolean;
     private resizeHandlerAttached: boolean;
+    private followCursor: boolean;
 
     /**
      * Load a MusicXML file
@@ -294,6 +295,9 @@ export class OpenSheetMusicDisplay {
         if (options.fingeringInsideStafflines !== undefined) {
             EngravingRules.Rules.FingeringInsideStafflines = options.fingeringInsideStafflines;
         }
+        if (options.followCursor !== undefined) {
+            this.FollowCursor = options.followCursor;
+        }
         if (options.setWantedStemDirectionByXml !== undefined) {
             EngravingRules.Rules.SetWantedStemDirectionByXml = options.setWantedStemDirectionByXml;
         }
@@ -550,6 +554,14 @@ export class OpenSheetMusicDisplay {
         this.autoResizeEnabled = value;
     }
 
+    public set FollowCursor(value: boolean) {
+        this.followCursor = value;
+    }
+
+    public get FollowCursor(): boolean {
+        return this.followCursor;
+    }
+
     public get Sheet(): MusicSheet {
         return this.sheet;
     }