fix(viewManagement) Fixing the mouse move calculation

Using an extended class this time instead of removing existing code. Clean up commented out code (#18)

src/Display/AbstractZoomView.ts

@@ -2,11 +2,7 @@ import { IControllerOutputListener } from "../Common/Interfaces/IControllerOutpu
 import { IDisplayInteractionListener } from "../Common/Interfaces/IDisplayInteractionListener";
 import { IZoomView } from "../Common/Interfaces/IZoomView";
 import { AbstractDisplayInteractionManager } from "./AbstractDisplayInteractionManager";
-// @ts-ignore
-import log from "loglevel";
 import { PointF2D } from "../Common/DataObjects";
-//import { AbstractNumberController } from "../Common/Algorithms/Controller/AbstractNumberController";
-//import { BrowserScrollController } from "../Common/Algorithms/Controller/BrowserScrollController";
 
 export abstract class AbstractZoomView implements IControllerOutputListener, IDisplayInteractionListener {
     constructor(displayInteractionManager: AbstractDisplayInteractionManager) {
@@ -20,35 +16,32 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         this.offsetYMax = Number.MAX_VALUE;
         this.rangeXMax = 1000000000;
         this.rangeYMax = 1000000000;
-        // this.frictionScrollControllerX = new FrictionScrollController(this);
-        // this.scrollControllerX = new ConstantAccelerationController(this);
         this.XScrollingEnabled = false;
-        //this.frictionScrollControllerY = new FrictionScrollController(this);
-        // this.scrollControllerY = new PTnController(this);
-        //this.scrollControllerY = new BrowserScrollController(this); // TODO don't need scrollController in the browser!? there's scroll-behavior: smooth
         this.YScrollingEnabled = true;
     }
     protected displayInteractionManager: AbstractDisplayInteractionManager;
-    private rangeX: number;
-    private offsetX: number;
-    private rangeY: number;
-    private offsetY: number;
-    private lastRangeX: number;
-    private lastOffsetX: number;
-    private lastRangeY: number;
-    private lastOffsetY: number;
-    private aspectRatio: number = 1;
+    protected rangeX: number;
+    protected offsetX: number;
+    protected rangeY: number;
+    protected offsetY: number;
+    protected lastRangeX: number;
+    protected lastOffsetX: number;
+    protected lastRangeY: number;
+    protected lastOffsetY: number;
+    protected aspectRatio: number = 1;
     protected zoomViews: IZoomView[] = [];
     protected mouseZoomMode: boolean = false;
     protected usesManuallyControlledZoomMode: boolean;
-    //private autoScrollX: boolean = true;
     private autoScrollY: boolean = true;
-    // private frictionScrollControllerX: FrictionScrollController;
-    // private scrollControllerX: AbstractNumberController; // ignore for now, doesn't exist in OSMD
-    // private frictionScrollControllerY: FrictionScrollController; // dragging screen. ignore for now.
-    //private scrollControllerY: AbstractNumberController; // already basically implemented by jimmy
-    protected convertToUnitsReady(): boolean { throw new Error("not implemented"); }
-    protected getPositionInUnits(relativePositionX: number, relativePositionY: number): PointF2D { throw new Error("not implemented"); }
+
+    protected abstract convertToUnitsReady(): boolean;
+    protected abstract getPositionInUnits(relativePositionX: number, relativePositionY: number): PointF2D;
+    protected abstract unitPosTouched(PosInUnits: PointF2D, relPosX: number, relPosY: number): void;
+    protected abstract unitPosDoubleTouched(PosInUnits: PointF2D, relPosX: number, relPosY: number): void;
+    protected abstract unitPosTouchDown(PosInUnits: PointF2D, relPosX: number, relPosY: number): void;
+    protected abstract unitPosTouchUp(PosInUnits: PointF2D, relPosX: number, relPosY: number): void;
+    protected abstract unitPosMove(PosInUnits: PointF2D, relativeDisplayPositionX: number, relativeDisplayPositionY: number): void;
+
     public positionTouched(relativePositionX: number, relativePositionY: number): void {
         if (!this.convertToUnitsReady()) {
             return;
@@ -56,7 +49,6 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         const clickPosition: PointF2D = this.getPositionInUnits(relativePositionX, relativePositionY);
         this.unitPosTouched(clickPosition, relativePositionX, relativePositionY);
     }
-    protected unitPosTouched(PosInUnits: PointF2D, relPosX: number, relPosY: number): void { throw new Error("not implemented"); }
     public get TouchActive(): boolean {
         return this.displayInteractionManager.TouchActive;
     }
@@ -70,7 +62,6 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         const clickPosition: PointF2D = this.getPositionInUnits(relativePositionX, relativePositionY);
         this.unitPosDoubleTouched(clickPosition, relativePositionX, relativePositionY);
     }
-    protected unitPosDoubleTouched(PosInUnits: PointF2D, relPosX: number, relPosY: number): void { throw new Error("not implemented"); }
     public get UsesManuallyControlledZoomMode(): boolean {
         return this.usesManuallyControlledZoomMode;
     }
@@ -86,8 +77,6 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         this.lastRangeY = Math.max(1, this.RangeY);
         this.lastOffsetX = this.OffsetX;
         this.lastOffsetY = this.OffsetY;
-        //this.frictionScrollControllerX.touchDown(this.OffsetX, this.OffsetY);
-        //this.frictionScrollControllerY.touchDown(this.OffsetX, this.OffsetY);
         const clickPosition: PointF2D = this.getPositionInUnits(relativePositionX, relativePositionY);
         this.unitPosTouchDown(clickPosition, relativePositionX, relativePositionY);
         if (!this.usesManuallyControlledZoomMode) {
@@ -98,18 +87,12 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
             }
         }
     }
-    protected unitPosTouchDown(PosInUnits: PointF2D, relPosX: number, relPosY: number): void { throw new Error("not implemented"); }
+
     public mouseUp(relativePositionX: number, relativePositionY: number): void {
-        // if (!this.autoScrollX) {
-        //     this.frictionScrollControllerX.touchUp(this.OffsetX, this.OffsetY);
-        // }
-        // if (!this.autoScrollY) {
-        //     this.frictionScrollControllerY.touchUp(this.OffsetX, this.OffsetY);
-        // }
         const clickPosition: PointF2D = this.getPositionInUnits(relativePositionX, relativePositionY);
         this.unitPosTouchUp(clickPosition, relativePositionX, relativePositionY);
     }
-    protected unitPosTouchUp(PosInUnits: PointF2D, relPosX: number, relPosY: number): void { throw new Error("not implemented"); }
+
     public mouseMove(relativeDisplayPositionX: number, relativeDisplayPositionY: number, deltaX: number, deltaY: number): void {
         if (this.mouseZoomMode) { // zoom
             // zoom horizontally
@@ -129,16 +112,10 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
                 this.OffsetY = this.lastOffsetY - deltaY * this.RangeY;
             }
         }
-        // if (this.TouchActive) {
-        //     this.frictionScrollControllerX.touchMove(this.OffsetX, this.OffsetY);
-        //     this.frictionScrollControllerY.touchMove(this.OffsetX, this.OffsetY);
-        // }
         const clickPosition: PointF2D = this.getPositionInUnits(relativeDisplayPositionX, relativeDisplayPositionY);
         this.unitPosMove(clickPosition, relativeDisplayPositionX, relativeDisplayPositionY);
     }
-    protected unitPosMove(PosInUnits: PointF2D, relativeDisplayPositionX: number, relativeDisplayPositionY: number): void {
-        throw new Error("not implemented");
-    }
+
     public zoom(scale: number): void {
         // zoom horizontally
         this.RangeX = Math.abs(this.lastRangeX / scale);
@@ -165,9 +142,6 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         for (const zoomable of this.zoomViews) {
             zoomable.viewportXChanged(this.offsetX, this.RangeX);
         }
-        // if (this.XScrollingEnabled && !this.autoScrollX) {
-        //     this.scrollControllerX.setOnlyCurrentValueDirectly(this.offsetX);
-        // }
     }
     public get OffsetY(): number {
         return this.offsetY;
@@ -176,17 +150,12 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         this.offsetY = value;
         if (this.offsetY > this.offsetYMax) {
             this.offsetY = this.offsetYMax;
-            //this.frictionScrollControllerY.stopTicking();
         } else if (this.offsetY < this.offsetYMin) {
             this.offsetY = this.offsetYMin;
-            //this.frictionScrollControllerY.stopTicking();
         }
         for (const zoomable of this.zoomViews) {
             zoomable.viewportYChanged(this.offsetY, this.RangeY);
         }
-        if (this.YScrollingEnabled && !this.autoScrollY) {
-            //this.scrollControllerY.setDirectly(this.offsetY);
-        }
     }
     public get RangeX(): number {
         return this.rangeX;
@@ -250,13 +219,6 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         if (this.displayInteractionManager.TouchActive || !this.XScrollingEnabled) {
             return;
         }
-        // const offsetXWithinLimits: number = Math.min(this.offsetXMax, Math.max(this.offsetXMin, offsetX));
-        // if (animated) {
-        //     this.selectScrollControllerX(true);
-        //     this.scrollControllerX.setExpectedValue(offsetXWithinLimits);
-        // } else {
-        //     this.scrollControllerX.setDirectly(offsetXWithinLimits);
-        // }
     }
     public setOffsetYValueOnly(offsetY: number): void {
         this.offsetY = Math.min(this.offsetYMax, Math.max(this.offsetYMin, offsetY));
@@ -265,45 +227,13 @@ export abstract class AbstractZoomView implements IControllerOutputListener, IDi
         if (this.displayInteractionManager.TouchActive || !this.YScrollingEnabled) {
             return;
         }
-        //const offsetYWithinLimits: number = Math.min(this.offsetYMax, Math.max(this.offsetYMin, offsetY));
         if (animated) {
             this.selectScrollControllerY(true);
-            //this.scrollControllerY.setExpectedValue(offsetYWithinLimits);
-        } else {
-            //this.scrollControllerY.setDirectly(offsetYWithinLimits);
         }
     }
-    // public dispose(): void {
-    //     try {
-    //         // this.scrollControllerX.Dispose();
-    //         // this.frictionScrollControllerX.Dispose();
-    //         this.scrollControllerY.Dispose();
-    //         // this.frictionScrollControllerY.Dispose();
-    //     } catch (ex) {
-    //         log.debug("AbstractZoomView.dispose", ex);
-    //     }
-
-    // }
-    // private selectScrollControllerX(autoScroll: boolean): void {
-    //     if (this.autoScrollX !== autoScroll) {
-    //         this.autoScrollX = autoScroll;
-    //         if (this.autoScrollX) {
-    //             this.frictionScrollControllerX.stopTicking();
-    //             this.scrollControllerX.startControlling();
-    //         } else {
-    //             this.scrollControllerX.stopControlling();
-    //         }
-    //     }
-    // }
     private selectScrollControllerY(autoScroll: boolean): void {
         if (this.autoScrollY !== autoScroll) {
             this.autoScrollY = autoScroll;
-            if (this.autoScrollY) {
-                //this.frictionScrollControllerY.stopTicking();
-                //this.scrollControllerY.startControlling();
-            } else {
-                //this.scrollControllerY.stopControlling();
-            }
         }
     }
 

src/Display/SheetRenderingManager.ts

@@ -10,15 +10,10 @@ import { IUserDisplayInteractionListener } from "../Common/Interfaces/IUserDispl
 import { PlaybackManager } from "../Playback";
 
 export class SheetRenderingManager extends AbstractZoomView implements IZoomView {
-    // protected phonicScoreInterface: IPhonicScoreInterface; // TODO MB: remove this
     protected musicSheetDrawer: MusicSheetDrawer;
     protected graphicalMusicSheet: GraphicalMusicSheet;
     protected mainViewingRegion: ScreenViewingRegion = ScreenViewingRegion.createWithDefaults();
-    // protected display: IMusicSheetDisplay;
-    // protected renderingFinished: EventWaitHandle = new EventWaitHandle(true, EventResetMode.ManualReset);
-    // protected newRedrawWanted: EventWaitHandle = new EventWaitHandle(false, EventResetMode.AutoReset);
     protected tryAgainToRenderCount: number = 0;
-    //private toImageMusicSheetDrawer: MusicSheetDrawer;
     private yOffsetMouseDown: number = Number.MIN_VALUE;
     private unlockCursorDistancePixel: number = 50.0;
     private relativeTopPosition: number = 0.06;
@@ -35,16 +30,6 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
         this.lockRanges = true;
         this.TopBarHeightInPixel = 70;
         this.BottomBarHeightInPixel = 0;
-        // this.phonicScoreInterface = phonicScoreInterface;
-        // this.display = display;
-        // this.musicSheetDrawer =
-        //     new PsMusicSheetDrawer(phonicScoreInterface, display.Renderer, display.Renderer, FontInfo.Info, false, phonicScoreInterface.HasSoundOutput);
-        // this.toImageMusicSheetDrawer =
-        //     new PsMusicSheetDrawer(phonicScoreInterface, display.PreviewImageRenderer, display.PreviewImageRenderer, FontInfo.Info, true, false);
-        //this.toImageMusicSheetDrawer.splitScreenLineColor = -1;
-        // TODO MB: Commented following 2 lines because paintingThreadLoop is to be removed. Do we need to convert this somehow?
-        // const redrawPreparationThread: Task = new Task(this.paintingThreadLoop);
-        // redrawPreparationThread.Start();
     }
 
     public addListener(listener: IUserDisplayInteractionListener): void {
@@ -58,8 +43,6 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
         return this.graphicalMusicSheet !== undefined;
     }
     protected unitPosTouched(PosInUnits: PointF2D, relPosX: number, relPosY: number): void {
-        // lock(this.mainViewingRegion)
-        // {
         // Pass mouse click to click listener
         if (!this.SingleTouchDisabled) {
             const relPos: PointF2D = new PointF2D(relPosX, relPosY);
@@ -68,11 +51,8 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
                 listener.userDisplayInteraction(relPos, PosInUnits, InteractionType.SingleTouch);
             }
         }
-        // }
     }
     protected unitPosDoubleTouched(PosInUnits: PointF2D, relPosX: number, relPosY: number): void {
-        // lock(this.mainViewingRegion)
-        // {
         if (!this.DoubleTouchDisabled) {
             const relPos: PointF2D = new PointF2D(relPosX, relPosY);
             this.handleUserDisplayInteraction(relPos, PosInUnits, InteractionType.DoubleTouch);
@@ -80,22 +60,16 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
                 listener.userDisplayInteraction(relPos, PosInUnits, InteractionType.DoubleTouch);
             }
         }
-        // }
     }
     protected unitPosTouchDown(PosInUnits: PointF2D, relPosX: number, relPosY: number): void {
-        // lock(this.mainViewingRegion)
-        // {
         const relPos: PointF2D = new PointF2D(relPosX, relPosY);
         this.handleUserDisplayInteraction(relPos, PosInUnits, InteractionType.TouchDown);
         for (const listener of this.listeners) {
             listener.userDisplayInteraction(new PointF2D(relPosX, relPosY), PosInUnits, InteractionType.TouchDown);
         }
         this.yOffsetMouseDown = PosInUnits.y;
-        // }
     }
     protected unitPosTouchUp(PosInUnits: PointF2D, relPosX: number, relPosY: number): void {
-        // lock(this.mainViewingRegion)
-        // {
         const relPos: PointF2D = new PointF2D(relPosX, relPosY);
         this.handleUserDisplayInteraction(relPos, PosInUnits, InteractionType.TouchUp);
         for (const listener of this.listeners) {
@@ -105,18 +79,14 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
             this.unlockFromCursorIfNecessary(PosInUnits);
         }
         this.yOffsetMouseDown = Number.MIN_VALUE;
-        // }
     }
     protected unitPosMove(PosInUnits: PointF2D, relPosX: number, relPosY: number): void {
-        // lock(this.mainViewingRegion)
-        // {
         const relPos: PointF2D = new PointF2D(relPosX, relPosY);
         this.handleUserDisplayInteraction(relPos, PosInUnits, InteractionType.Move);
         for (const listener of this.listeners) {
             listener.userDisplayInteraction(new PointF2D(relPosX, relPosY), PosInUnits, InteractionType.Move);
         }
         this.unlockFromCursorIfNecessary(PosInUnits);
-        // }
     }
 
     public get MainViewingRegion(): ScreenViewingRegion {
@@ -124,28 +94,16 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
     }
     public TopBarHeightInPixel: number;
     public BottomBarHeightInPixel: number;
-    // public setRenderers(windowRenderer: IMusicSheetRenderer, previewRenderer: IImageRenderer): void {
-    //     this.musicSheetDrawer.setRenderer(windowRenderer);
-    //     this.toImageMusicSheetDrawer.setRenderer(previewRenderer);
-    // }
     public setMusicSheet(musicSheet: GraphicalMusicSheet): void {
-        // this.musicSheetDrawer.disposeAllBackbuffers();
         this.graphicalMusicSheet = musicSheet;
         this.adaptDisplayLimitsToSheet();
-        // this.setYOffset(
-        //     EngravingRules.Rules.TitleTopDistance - this.topBarHeightInUnits() - this.relativeTopPosition * this.heightWithoutTopBottomBarsInUnits(),
-        //     true);
         this.setYOffset(0, true);
-        // this.redraw();
     }
     public viewportXChanged(offsetX: number, rangeX: number): void {
         if (this.graphicalMusicSheet === undefined) {
             return;
         }
-        // lock(this.mainViewingRegion)
-        // {
         this.horizontalViewportChanged(offsetX, rangeX);
-        // }
     }
     /**
      * Sets the vertical position and viewing height of the displayed area on the music score.
@@ -157,28 +115,18 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
         if (this.yOffsetMouseDown <= Number.MIN_VALUE + 0.5) {
             this.yOffsetMouseDown = offsetY;
         }
-        // lock(this.mainViewingRegion)
-        // {
         this.verticalViewportChanged(offsetY, rangeY);
-        // }
     }
     public displaySizeChanged(width: number, height: number): void {
         super.viewSizeChanged(width, height);
-        //TODO: Don't think we need these for web?
-        //this.TopBarHeightInPixel = topBarHeightInPixel;
-        //this.BottomBarHeightInPixel = bottomBarHeightInPixel;
-        // this.musicSheetDrawer.disposeAllBackbuffers();
         if (Math.abs(width - 0) < 0.0000001 || Math.abs(height - 0) < 0.0000001) {
             return;
         }
-        // lock(this.mainViewingRegion)
-        // {
         if (this.graphicalMusicSheet !== undefined) {
             this.graphicalMusicSheet.EnforceRedrawOfMusicSystems(); // probably not necessary, already handled by OSMD
         }
         this.mainViewingRegion.DisplaySizeInPixel = new SizeF2D (width, height);
         this.adaptDisplayLimitsToSheet();
-        // }
     }
     public calcDisplayYPosition(system: MusicSystem): number {
         return  system.PositionAndShape.AbsolutePosition.y + system.PositionAndShape.BorderMarginTop -
@@ -196,51 +144,17 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
                                 system: MusicSystem, resetOccurred: boolean, smoothAnimation: boolean): void {
         const positionY: number = this.calcDisplayYPosition(system);
         this.setYPosition(positionY, smoothAnimation);
-        // this.redraw();
     }
     public setXPosition(positionXInUnits: number, animated: boolean): void {
-        // lock(this.mainViewingRegion)
-        // {
         if (this.LockDisplayToCursor) {
             this.setXOffset(positionXInUnits, animated);
         }
-        // }
     }
     public setYPosition(positionYInUnits: number, animated: boolean): void {
-        // lock(this.mainViewingRegion)
-        // {
         if (this.LockDisplayToCursor) {
             this.setYOffset(positionYInUnits, animated);
         }
-        // }
-    }
-    public clearBackbuffers(): void {
-        // this.musicSheetDrawer.disposeAllBackbuffers();
-    }
-    // public redraw(): void {
-    //     this.newRedrawWanted.Set();
-    // }
-    // public render(): void {
-    //     // lock(this.display.Renderer)
-    //     // {
-    //     try {
-    //         this.display.Renderer.prepareDrawing();
-    //         this.display.Renderer.draw();
-    //     } catch (ex) {
-    //         log.error("SheetRenderingManager.render", "Renderer PrepareDrawing or draw", ex);
-    //         throw ex;
-    //     } finally {
-    //         try {
-    //             this.display.Renderer.finalizeDrawing();
-    //         } catch (ex) {
-    //             log.error("SheetRenderingManager.render", "Renderer FinalizeDrawing", ex);
-    //             throw ex;
-    //         } finally {
-    //             this.renderingFinished.Set();
-    //         }
-    //     }
-    //     // }
-    // }
+    }
     public get DrawingParameters(): DrawingParameters {
         return this.musicSheetDrawer.drawingParameters;
     }
@@ -257,21 +171,12 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
         return  (this.mainViewingRegion.ViewRegionInUnits.height - this.topBarHeightInUnits() - this.bottomBarHeightInUnits()) *
                 (1 - 2 * this.relativeTopPosition);
     }
-    // public freeMemory(): void {
-    //     this.display.Renderer.freeMemory();
-    // }
-    // public Dispose(): void {
-    //     super.dispose();
-    // }
     public getClickPosition(relativePositionX: number, relativePositionY: number): PointF2D {
         return this.mainViewingRegion.transformToUnitCoordinates(new PointF2D(relativePositionX, relativePositionY));
     }
     public graphicalObjectIsVisible(boundingBox: BoundingBox): boolean {
         const isCompletelyInside: boolean = false;
-        // lock(this.mainViewingRegion)
-        // {
         return this.mainViewingRegion.isVisible(boundingBox, isCompletelyInside);
-        // }
     }
     /**
      * sets the size of the maximal musicpage seen including the extensions on top resp. bottom
@@ -298,7 +203,6 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
     protected horizontalViewportChanged(offsetX: number, rangeX: number): void {
         if (this.mainViewingRegion.WidthInUnits !== rangeX) {
             this.mainViewingRegion.WidthInUnits = rangeX;
-            // this.redraw();
         }
     }
 
@@ -320,7 +224,6 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
                                 this.mainViewingRegion.RegionSizeInPixel.height /
                                 this.mainViewingRegion.ViewRegionInUnits.height);
         if (ydiff > this.unlockCursorDistancePixel) {
-            // this.phonicScoreInterface.requestLockDisplayToCursor(false);
             this.LockDisplayToCursor = false;
         }
     }
@@ -335,210 +238,30 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
             case InteractionType.TouchDown:
             case InteractionType.SingleTouch:
             case InteractionType.DoubleTouch: {
-                // switch (this.Tool) {
-        //             case PsTool.None: {
-        //                 if (this.graphicalMusicSheet === undefined || this.renderingManager.TouchMoving) {
-        //                     break;
-        //                 }
-
-        //                 // check for activity symbol clicked
-        //                 if (positionOnMusicSheet.x < 10) {
-                            // const activitySymbol: StaffLineActivitySymbol =
-                            //     this.graphicalMusicSheet.getClickedObject<StaffLineActivitySymbol>(positionOnMusicSheet);
-        //                     if (activitySymbol !== undefined) {
-        //                         const instrument: Instrument = activitySymbol.parentStaffLine.ParentStaff.ParentInstrument;
-        //                         switch (this.Mode) {
-        //                             case PsMode.Following: {
-        //                              // KeyValuePair<int, bool> parameters = new KeyValuePair<int, bool>(
-        //                              //     activitySymbol.ParentStaffLine.ParentStaff.Id,
-        //                              //     !activitySymbol.ParentStaffLine.ParentStaff.Following
-        //                              //     );
-                                        // instrument.setInstrumentParameter(
-                                        //     InstrumentParameters.Follow,
-                                        //     !activitySymbol.parentStaffLine.ParentStaff.following
-                                        //     );
-        //                                 break;
-        //                             }
-        //                             case PsMode.Midi: {
-        //                                 if (this.PitchMonitorEnabled) {
-        //                                     const pitchMonitorEnabled: boolean = !activitySymbol.parentStaffLine.ParentStaff.PitchMonitor;
-        //                                     //KeyValuePair<int, bool> parameters = new KeyValuePair<int, bool>(
-        //                                          // activitySymbol.ParentStaffLine.ParentStaff.Id,
-        //                                          // !activitySymbol.ParentStaffLine.ParentStaff.PitchMonitor);
-        //                                     instrument.setInstrumentParameter(InstrumentParameters.PitchMonitor, pitchMonitorEnabled);
-
-        //                                     //if (pitchMonitorEnabled) {
-        //                                     //        // switch off all other instruments so that only one will be active
-        //                                     //    foreach (var instr in this.graphicalMusicSheet.ParentMusicSheet.Instruments) {
-        //                                     //        if (instr != instrument) {
-        //                                     //            instr.setInstrumentParameter(InstrumentParameters.PitchMonitor, false);
-        //                                     //            }
-        //                                     //        }
-        //                                     //    }
-        //                                 }
-        //                                 else {
-        //                                  KeyValuePair < int, bool > parameters = new KeyValuePair<int, bool>(
-        //                                      activitySymbol.ParentStaffLine.ParentStaff.Id,
-        //                                      !activitySymbol.ParentStaffLine.ParentStaff.Audible
-        //                                  );
-        //                                     instrument.setInstrumentParameter(InstrumentParameters.StaffAudible, parameters);
-        //                                 }
-        //                                 break;
-        //                             }
-        //                             default:
-        //                                 break;
-        //                         }
-
-        //                         break;
-        //                     }
-        //                 }
-
                 const clickVe: GraphicalVoiceEntry = this.graphicalMusicSheet.GetNearestVoiceEntry(positionOnMusicSheet);
-
-        //                 // check for clef clicked
-
-        //                 if (clickedObject is GraphicalClefInstruction) {
-        //                     if (this.QueryRequested !== undefined) {
-        //                         GraphicalClefInstruction clef = clickedObject as GraphicalClefInstruction;
-        //                         this.QueryRequested(QueryType.ClefChange, clef);
-        //                     }
-        //                     break;
-        //                 }
-
-                        /*
-                        // *** MARKED AREA and COMMENT Editing ***
-                        //check for Marked Area/Comment clicked
-                        GraphicalLabel clickableLabel = this.graphicalMusicSheet.getNearestGraphicalObject<GraphicalLabel>(positionOnMusicSheet);
-                        if (clickableLabel is Clickable)
-                        {
-                            Clickable clickable = (Clickable)clickableLabel;
-                            if (clickable.DataObject is MarkedArea)
-                            {
-                                this.annotationManager.editMarkedAreaLabel((MarkedArea)clickable.DataObject);
-                                break;
-                            }
-                            else if (clickable.DataObject is Comment)
-                            {
-                                this.annotationManager.editCommentLabel((Comment)clickable.DataObject);
-                                break;
-                            }
-                        }
-                        */
-
-                        // if (this.Mode != PsMode.Manual) {
-                            // lock(this.graphicalMusicSheet) {
                 // set cursor and/or start/end marker position
 
                 if (clickVe) {
                     if (clickVe.parentStaffEntry.parentVerticalContainer !== undefined) {
                         const clickedTimeStamp: Fraction = clickVe.parentStaffEntry.parentVerticalContainer.AbsoluteTimestamp;
-                        // if (this.Loop === false) {
                         this.setStartPosition(clickedTimeStamp);
-                        // } else { //greater than startSymbol
-                        //     if (this.loop_setEndMarker) {
-                        //         this.setEndPosition(clickedTimeStamp);
-                        //         // this.MessageOccurred(MessageBoxType.Info, "", MessageBoxTopic.LoopMarkerChanged, LoopTagType.EndTag);
-                        //     } else {
-                        //         this.setEndPosition(this.graphicalMusicSheet.ParentMusicSheet.SheetEndTimestamp);
-                        //         this.setStartPosition(clickedTimeStamp);
-                        //         // this.MessageOccurred(MessageBoxType.Info, "", MessageBoxTopic.LoopMarkerChanged, LoopTagType.StartTag);
-                        //     }
-
-                            // toggle marker:
-                            // this.loop_setEndMarker = !this.loop_setEndMarker;
-                        // }
-
                         // playback clicked note
                         if (clickVe.notes[0]?.sourceNote.Pitch !== undefined) {
                             this.PlaybackManager?.playVoiceEntry(clickVe.parentVoiceEntry);
                         }
                     }
                 }
-                            // }
-                        // }
-    //                     else // manual mode:
-    //                     {
-                        //     if (relativePositionOnDisplay.y < 0.3) {
-                        //         this.scrollPageUp_();
-                        //         break;
-                        //     }
-
-                        //     if (relativePositionOnDisplay.y > 0.7) {
-                        //         this.scrollPageDown_();
-                        //         break;
-                        //     }
-                        // }
-
-    //                     break;
-    //                 }
-
-    //                 case PsTool.Zoom:
-    //                     break;
-                    // case PsTool.Comment: {
-                        // const clickedGse: GraphicalStaffEntry =
-                        //     this.graphicalMusicSheet.getNearestGraphicalObject<GraphicalStaffEntry>(
-                        //         positionOnMusicSheet);
-                        // if (clickedGse === undefined || clickedGse.relInMeasureTimestamp === undefined
-                        // ) // second would mean grace note
-                        // {
-                        //     break;
-                        // }
-
-                        // const staff: Staff = clickedGse.parentMeasure.ParentStaffLine.ParentStaff;
-                        // const staffLineIndex: number = MusicSheet.getIndexFromStaff(staff);
-                        // this.annotationManager.createComment(clickedGse.parentVerticalContainer.AbsoluteTimestamp,
-                        //     staffLineIndex);
-    //                     break;
-    //                 }
-
-    //                 case PsTool.Mark: {
-                        // const clickedGse: GraphicalStaffEntry =
-                        //     this.graphicalMusicSheet.getNearestGraphicalObject<GraphicalStaffEntry>(
-                        //         positionOnMusicSheet);
-                        // if (clickedGse === undefined || clickedGse.relInMeasureTimestamp === undefined
-                        // ) // second would mean grace note
-                        // {
-                        //     break;
-                        // }
-
-                        // this.annotationManager.createMarkedArea(
-                        //     clickedGse.parentVerticalContainer.AbsoluteTimestamp);
-                        // break;
-    //                 }
-
-    //                 default:
-    //                     throw new ArgumentOutOfRangeException();
-    //             }
-
                 break;
             }
-
             case InteractionType.TouchUp: {
-                // switch (this.Tool) {
-                //     case PsTool.None:
-                //         break;
-                //     case PsTool.Zoom:
-                //         this.adaptSystemBreaksToPageWidth_();
-                //         break;
-                //     case PsTool.Comment:
-                //         break;
-                //     case PsTool.Mark:
-                //         break;
-                //     default:
-                //         throw new ArgumentOutOfRangeException();
-                // }
-
                 break;
             }
-
             case InteractionType.TouchDown: {
                 break;
             }
-
             case InteractionType.Move: {
                 break;
             }
-
             default:
                 throw new Error("type");
         }
@@ -549,13 +272,6 @@ export class SheetRenderingManager extends AbstractZoomView implements IZoomView
             return;
         }
 
-        // if (this.Loop && newStartPosition >= this.graphicalMusicSheet.ParentMusicSheet.SelectionEnd) {
-        //     const currentMeasureNumber: number = this.graphicalMusicSheet.ParentMusicSheet
-        //         .getSourceMeasureFromTimeStamp(newStartPosition).MeasureNumber;
-        //     this.setEndPosition(currentMeasureNumber);
-        // }
-
-        // this.graphicalMusicSheet.setSelectionStartSymbol(newStartPosition);
         this.graphicalMusicSheet.ParentMusicSheet.SelectionStart = newStartPosition;
         this.PlaybackManager?.reset();
     }

src/Display/WebSheetRenderingManager.ts

@@ -0,0 +1,10 @@
+import { PointF2D } from "../Common/DataObjects/PointF2D";
+import { SheetRenderingManager } from "./SheetRenderingManager";
+
+export class WebSheetRenderingManager extends SheetRenderingManager {
+    //The AbstractZoomView version of this doesn't seem to work right
+    public mouseMove(relativeDisplayPositionX: number, relativeDisplayPositionY: number, deltaX: number, deltaY: number): void {
+        const clickPosition: PointF2D = this.getPositionInUnits(relativeDisplayPositionX, relativeDisplayPositionY);
+        this.unitPosMove(clickPosition, relativeDisplayPositionX, relativeDisplayPositionY);
+    }
+}

src/OpenSheetMusicDisplay/OpenSheetMusicDisplay.ts

@@ -24,6 +24,7 @@ import { ITransposeCalculator } from "../MusicalScore/Interfaces/ITransposeCalcu
 import { NoteEnum } from "../Common/DataObjects/Pitch";
 import { PlaybackNoteGenerator } from "../MusicalScore/Playback/PlaybackNoteGenerator";
 import { SheetRenderingManager } from "../Display/SheetRenderingManager";
+import { WebSheetRenderingManager } from "../Display/WebSheetRenderingManager";
 import { WebDisplayInteractionManager } from "../Display/WebDisplayInteractionManager";
 import { AbstractDisplayInteractionManager } from "../Display/AbstractDisplayInteractionManager";
 import { PlaybackManager } from "../Playback";
@@ -66,7 +67,7 @@ export class OpenSheetMusicDisplay {
         this.backendType = BackendType.SVG; // default, can be changed by options
         this.setOptions(options);
         this.interactionManager = new WebDisplayInteractionManager(this.container);
-        this.renderingManager = new SheetRenderingManager(this.interactionManager);
+        this.renderingManager = new WebSheetRenderingManager(this.interactionManager);
     }
 
     private cursorsOptions: CursorOptions[] = [];