smoosic 1.0.34 → 1.0.35

package/release/styles/general.css

@@ -0,0 +1,15 @@
+.pitch-preview {
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.note-entry-caret {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}

package/src/application/common.ts

@@ -80,6 +80,8 @@ export abstract class ModalEventHandler {
   abstract mouseClick(ev: any): Promise<void>;
   abstract evKey(evdata: any): Promise<void>;
   abstract keyUp(evdata: any): void;
+  abstract mouseUp(ev: any): void;
+  abstract mouseDown(ev: any): void;
 }
 export type handler = (ev: any) => void;
 
@@ -96,6 +98,8 @@ export class ModalEventHandlerProxy {
   keyupHandler: EventHandler | null = null;
   mouseMoveHandler: EventHandler | null = null;
   mouseClickHandler: EventHandler | null = null;
+  mouseUpHandler: EventHandler | null = null;
+  mouseDownHandler: EventHandler | null = null;
   constructor(evSource: BrowserEventSource) {
     this.eventSource = evSource;
     this.bindEvents();
@@ -125,13 +129,27 @@ export class ModalEventHandlerProxy {
       await this._handler.mouseClick(ev);
     }
   }
+  mouseUp(ev: any) {
+    if (this._handler) {
+      this._handler.mouseUp(ev);
+    }
+  }
+  mouseDown(ev: any) {
+    if (this._handler) {
+      this._handler.mouseDown(ev);
+    }
+  }
   bindEvents() {
     const mousemove = async (ev: any) => { this.mouseMove(ev); }
     const mouseclick = async (ev: any) => { await this.mouseClick(ev); }
+    const mouseup = async (ev: any) => { this.mouseUp(ev); }
+    const mousedown = async (ev: any) => { this.mouseDown(ev); }
     const keydown = async (ev: any) => { this.evKey(ev); }
     const keyup = async (ev: any) => { this.keyUp(ev); }
     this.mouseMoveHandler = this.eventSource.bindMouseMoveHandler(mousemove);
     this.mouseClickHandler = this.eventSource.bindMouseClickHandler(mouseclick);
+    this.mouseUpHandler = this.eventSource.bindMouseUpHandler(mouseup);
+    this.mouseDownHandler = this.eventSource.bindMouseDownHandler(mousedown);
     this.keydownHandler = this.eventSource.bindKeydownHandler(keydown);
     this.keyupHandler = this.eventSource.bindKeyupHandler(keyup);
   }
@@ -152,6 +170,8 @@ export class ModalEventHandlerProxy {
     }
     this.eventSource.unbindKeydownHandler(this.keydownHandler!);
     this.eventSource.unbindMouseMoveHandler(this.mouseMoveHandler!);
+    this.eventSource.unbindMouseUpHandler(this.mouseUpHandler!);
+    this.eventSource.unbindMouseDownHandler(this.mouseDownHandler!);
     this.eventSource.unbindMouseClickHandler(this.mouseClickHandler!);
     dialog.closeModalPromise.then(rebind);
   }

package/src/application/eventHandler.ts

@@ -1,7 +1,7 @@
 // [Smoosic](https://github.com/AaronDavidNewman/Smoosic)
 // Copyright (c) Aaron David Newman 2021.
 
-import { KeyEvent, keyEventMatch } from '../smo/data/common';
+import { KeyEvent } from '../smo/data/common';
 import { SuiExceptionHandler } from '../ui/exceptions';
 import { Qwerty } from '../ui/qwerty';
 import { SuiModifierDialogFactory } from '../ui/dialogs/factory';
@@ -20,6 +20,8 @@ import { SvgHelpers } from '../render/sui/svgHelpers';
 import { SuiMenuManager } from '../ui/menus/manager';
 import { SmoConfiguration } from './configuration';
 import { SuiDom } from './dom';
+import { NoteEntryCaret } from '../render/sui/NoteEntryCaret';
+import {NoteEntryMediator} from "../render/sui/NoteEntryMediator";
 import { SuiNavigation } from '../ui/navigation'
 declare var $: any;
 
@@ -70,7 +72,10 @@ export class SuiEventHandler implements ModalEventHandler {
   keyHandlerObj: any = null;
   menus: SuiMenuManager;
   piano: SuiPiano | null = null;
-  exhandler: SuiExceptionHandler;  
+  exhandler: SuiExceptionHandler;
+  noteEntryCaret: NoteEntryCaret;
+  noteEntryMediator: NoteEntryMediator;
+
   constructor(params: EventHandlerParams) {
     SuiEventHandler.instance = this;
 
@@ -92,6 +97,10 @@ export class SuiEventHandler implements ModalEventHandler {
     this.bindEvents();
     this.bindResize();
     this.createPiano();
+
+    // Initialize note entry caret
+    this.noteEntryCaret = new NoteEntryCaret(this.view, this.tracker);
+    this.noteEntryMediator = new NoteEntryMediator(this.tracker, this.noteEntryCaret, this.view);
   }
 
   private static handleScrollEventDefer(handler: SuiEventHandler) {
@@ -191,7 +200,6 @@ export class SuiEventHandler implements ModalEventHandler {
     el.onscroll = scrollCallback;
   }
 
-
   // ### renderElement
   // return render element that is the DOM parent of the svg
   get renderElement() {
@@ -297,6 +305,15 @@ export class SuiEventHandler implements ModalEventHandler {
   }
 
   mouseMove(ev: any) {
+    if (this.noteEntryCaret && this.noteEntryCaret.containsPoint(ev)) {
+      this.noteEntryCaret.handleMouseMove(ev);
+      return;
+    } else {
+      if (this.noteEntryCaret) {
+        this.noteEntryCaret.resetInteraction();
+      }
+    }
+
     this.view.tracker.intersectingArtifact(SvgHelpers.smoBox({
       x: ev.clientX,
       y: ev.clientY
@@ -305,13 +322,32 @@ export class SuiEventHandler implements ModalEventHandler {
 
   async mouseClick(ev: any) {
     const dataCopy = SuiTracker.serializeEvent(ev);
-    await this.view.renderer.updatePromise();    
-    this.view.tracker.selectSuggestion(dataCopy);
-    var modifier = this.view.tracker.getSelectedModifier();
-    if (modifier) {
-      this.createModifierDialog(modifier);
+    await this.view.renderer.updatePromise();
+    const caret = this.noteEntryCaret;
+    if (caret && caret.containsPoint(ev)) {
+      caret.handleMouseClick(ev);
+      return;
+    } else {
+      this.view.tracker.selectSuggestion(dataCopy);
+      var modifier = this.view.tracker.getSelectedModifier();
+      if (modifier) {
+        this.createModifierDialog(modifier);
+      }
+    }
+  }
+
+  mouseUp(ev: any) {
+    if (this.noteEntryCaret && this.noteEntryCaret.containsPoint(ev)) {
+      this.noteEntryCaret.handleMouseUp(ev);
     }
   }
+
+  async mouseDown(ev: any) {
+    if (this.noteEntryCaret && this.noteEntryCaret.containsPoint(ev)) {
+      this.noteEntryCaret.handleMouseDown(ev);
+    }
+  }
+
   bindEvents() {
     const self = this;
     const tracker = this.view.tracker;