Browse Source

merge osmd-public: save SVGElement for GraphicalSlurs, fix cursor following for multiple cursors

sschmidTU 3 years ago
parent
commit
0d24d68eb4

+ 1 - 0
src/MusicalScore/Graphical/GraphicalSlur.ts

@@ -29,6 +29,7 @@ export class GraphicalSlur extends GraphicalCurve {
     public graceStart: boolean;
     public graceStart: boolean;
     public graceEnd: boolean;
     public graceEnd: boolean;
     private rules: EngravingRules;
     private rules: EngravingRules;
+    public SVGElement: Node;
 
 
     /**
     /**
      * Compares the timespan of two Graphical Slurs
      * Compares the timespan of two Graphical Slurs

+ 2 - 1
src/MusicalScore/Graphical/VexFlow/CanvasVexFlowBackend.ts

@@ -138,7 +138,7 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
         return undefined; // can't return svg dom node
         return undefined; // can't return svg dom node
     }
     }
 
 
-    public renderCurve(points: PointF2D[]): void {
+    public renderCurve(points: PointF2D[]): Node {
         this.ctx.beginPath();
         this.ctx.beginPath();
         this.ctx.moveTo(points[0].x, points[0].y);
         this.ctx.moveTo(points[0].x, points[0].y);
         this.ctx.bezierCurveTo(
         this.ctx.bezierCurveTo(
@@ -162,6 +162,7 @@ export class CanvasVexFlowBackend extends VexFlowBackend {
         //this.ctx.stroke();
         //this.ctx.stroke();
         this.ctx.closePath();
         this.ctx.closePath();
         this.ctx.fill();
         this.ctx.fill();
+        return undefined;
     }
     }
 
 
     private ctx: Vex.Flow.CanvasContext;
     private ctx: Vex.Flow.CanvasContext;

+ 4 - 1
src/MusicalScore/Graphical/VexFlow/SvgVexFlowBackend.ts

@@ -183,7 +183,8 @@ export class SvgVexFlowBackend extends VexFlowBackend {
         return node;
         return node;
     }
     }
 
 
-    public renderCurve(points: PointF2D[]): void {
+    public renderCurve(points: PointF2D[]): Node {
+        const node: Node = this.ctx.openGroup();
         this.ctx.beginPath();
         this.ctx.beginPath();
         this.ctx.moveTo(points[0].x, points[0].y);
         this.ctx.moveTo(points[0].x, points[0].y);
         this.ctx.bezierCurveTo(
         this.ctx.bezierCurveTo(
@@ -207,6 +208,8 @@ export class SvgVexFlowBackend extends VexFlowBackend {
         //this.ctx.stroke();
         //this.ctx.stroke();
         this.ctx.closePath();
         this.ctx.closePath();
         this.ctx.fill();
         this.ctx.fill();
+        this.ctx.closeGroup();
+        return node;
     }
     }
 
 
     public export(): void {
     public export(): void {

+ 1 - 1
src/MusicalScore/Graphical/VexFlow/VexFlowBackend.ts

@@ -103,7 +103,7 @@ public abstract getContext(): Vex.IRenderContext;
 
 
   public abstract renderLine(start: PointF2D, stop: PointF2D, color: string, lineWidth: number): Node;
   public abstract renderLine(start: PointF2D, stop: PointF2D, color: string, lineWidth: number): Node;
 
 
-  public abstract renderCurve(points: PointF2D[]): void;
+  public abstract renderCurve(points: PointF2D[]): Node;
 
 
   public abstract getVexflowBackendType(): Vex.Flow.Renderer.Backends;
   public abstract getVexflowBackendType(): Vex.Flow.Renderer.Backends;
 
 

+ 1 - 1
src/MusicalScore/Graphical/VexFlow/VexFlowMusicSheetDrawer.ts

@@ -179,7 +179,7 @@ export class VexFlowMusicSheetDrawer extends MusicSheetDrawer {
         curvePointsInPixels.push(this.applyScreenTransformation(p2));
         curvePointsInPixels.push(this.applyScreenTransformation(p2));
         curvePointsInPixels.push(this.applyScreenTransformation(p3));
         curvePointsInPixels.push(this.applyScreenTransformation(p3));
         curvePointsInPixels.push(this.applyScreenTransformation(p4));
         curvePointsInPixels.push(this.applyScreenTransformation(p4));
-        this.backend.renderCurve(curvePointsInPixels);
+        graphicalSlur.SVGElement = this.backend.renderCurve(curvePointsInPixels);
     }
     }
 
 
     protected drawMeasure(measure: VexFlowMeasure): void {
     protected drawMeasure(measure: VexFlowMeasure): void {

+ 1 - 1
src/OpenSheetMusicDisplay/Cursor.ts

@@ -246,7 +246,7 @@ export class Cursor implements IPlaybackListener {
     const measurePositionAndShape: BoundingBox = this.graphic.findGraphicalMeasure(iterator.CurrentMeasureIndex, 0).PositionAndShape;
     const measurePositionAndShape: BoundingBox = this.graphic.findGraphicalMeasure(iterator.CurrentMeasureIndex, 0).PositionAndShape;
     this.updateWidthAndStyle(measurePositionAndShape, x, y, height);
     this.updateWidthAndStyle(measurePositionAndShape, x, y, height);
 
 
-    if (this.openSheetMusicDisplay.FollowCursor) {
+    if (this.openSheetMusicDisplay.FollowCursor && this.cursorOptions.follow) {
       if (!this.openSheetMusicDisplay.EngravingRules.RenderSingleHorizontalStaffline) {
       if (!this.openSheetMusicDisplay.EngravingRules.RenderSingleHorizontalStaffline) {
         const diff: number = this.cursorElement.getBoundingClientRect().top;
         const diff: number = this.cursorElement.getBoundingClientRect().top;
         this.cursorElement.scrollIntoView({behavior: diff < 1000 ? "smooth" : "auto", block: "center"});
         this.cursorElement.scrollIntoView({behavior: diff < 1000 ? "smooth" : "auto", block: "center"});

+ 1 - 1
src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -675,7 +675,7 @@ export class OpenSheetMusicDisplay {
         if (options.cursorsOptions !== undefined) {
         if (options.cursorsOptions !== undefined) {
             this.cursorsOptions = options.cursorsOptions;
             this.cursorsOptions = options.cursorsOptions;
         } else {
         } else {
-            this.cursorsOptions = [{type: 0, color: this.EngravingRules.DefaultColorCursor, alpha: 0.5, follow: options.followCursor}];
+            this.cursorsOptions = [{type: 0, color: this.EngravingRules.DefaultColorCursor, alpha: 0.5, follow: true}];
         }
         }
     }
     }