@blibliki/engine 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@blibliki/engine",
-  "version": "0.1.19",
+  "version": "0.1.21",
+  "source": "src/index.ts",
   "main": "dist/main.cjs.js",
   "module": "dist/main.esm.js",
   "types": "dist/build/index.d.ts",
@@ -16,13 +17,6 @@
     "tone": "^14.7.77",
     "uuid": "^8.3.2"
   },
-  "scripts": {
-    "start": "tsc -w -p tsconfig.json",
-    "build": "rollup -c",
-    "lint": "eslint src",
-    "ts:check": "tsc --noEmit",
-    "test": "jest"
-  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -38,9 +32,15 @@
     "jest": "^29.2.2",
     "prettier": "^2.7.1",
     "rollup": "^4.10.0",
-    "rollup-plugin-dts": "^6.1.0",
     "ts-jest": "^29.0.3",
     "typescript": "^5.2.2",
     "typescript-language-server": "^4.0.0"
+  },
+  "scripts": {
+    "start": "tsc -w -p tsconfig.json",
+    "build": "rollup -c",
+    "lint": "eslint src",
+    "ts:check": "tsc --noEmit",
+    "test": "jest"
   }
-}
+}

package/src/core/midi/ComputerKeyboardInput.ts

@@ -0,0 +1,57 @@
+import Note from "../Note";
+import { IMidiInput, TMidiPortState } from "./MidiDevice";
+import MidiEvent from "./MidiEvent";
+
+const MAP_KEYS: { [key: string]: Note } = {
+  a: new Note("C3"),
+  s: new Note("D3"),
+  d: new Note("E3"),
+  f: new Note("F3"),
+  g: new Note("G3"),
+  h: new Note("A3"),
+  j: new Note("B3"),
+  k: new Note("C4"),
+  l: new Note("D4"),
+  w: new Note("C#3"),
+  e: new Note("D#3"),
+  t: new Note("F#3"),
+  y: new Note("G#3"),
+  u: new Note("A#3"),
+  o: new Note("C#4"),
+  p: new Note("D#4"),
+};
+
+const COMPUTER_KEYBOARD_DATA = {
+  id: "computer_keyboard",
+  name: "Computer Keyboard",
+  state: "connected",
+};
+
+export default class ComputerKeyboardInput implements IMidiInput {
+  id: string;
+  name: string;
+  state: TMidiPortState;
+  onmidimessage: ((e: MidiEvent) => void) | null;
+
+  constructor() {
+    Object.assign(this, COMPUTER_KEYBOARD_DATA);
+    document.addEventListener("keydown", this.onKeyTrigger(true));
+    document.addEventListener("keyup", this.onKeyTrigger(false));
+  }
+
+  onKeyTrigger = (noteOn: boolean) => (event: KeyboardEvent) => {
+    if (!this.onmidimessage) return;
+
+    const note = this.extractNote(event);
+    if (!note) return;
+
+    const midiEvent = MidiEvent.fromNote(note, noteOn);
+    this.onmidimessage(midiEvent);
+  };
+
+  private extractNote(event: KeyboardEvent): Note | undefined {
+    if (event.repeat) return;
+
+    return MAP_KEYS[event.key];
+  }
+}

package/src/core/midi/MidiDevice.ts

@@ -1,9 +1,15 @@
 import MidiEvent from "./MidiEvent";
 
+export type TMidiPortState = "connected" | "disconnected";
+
 export interface MidiDeviceInterface {
   id: string;
   name: string;
-  state: string;
+  state: TMidiPortState;
+}
+
+export interface IMidiInput extends MidiDeviceInterface {
+  onmidimessage: ((e: MidiEvent) => void) | null;
 }
 
 export type EventListerCallback = (event: MidiEvent) => void;
@@ -11,12 +17,12 @@ export type EventListerCallback = (event: MidiEvent) => void;
 export default class MidiDevice implements MidiDeviceInterface {
   id: string;
   name: string;
-  state: string;
+  state: TMidiPortState;
   eventListerCallbacks: EventListerCallback[] = [];
 
-  private _midi: MIDIInput;
+  private _midi: IMidiInput;
 
-  constructor(midi: MIDIInput) {
+  constructor(midi: IMidiInput) {
     this.id = midi.id;
     this.name = midi.name || `Device ${midi.id}`;
     this.state = midi.state;
@@ -26,8 +32,9 @@ export default class MidiDevice implements MidiDeviceInterface {
   }
 
   connect() {
-    this._midi.onmidimessage = (e) => {
-      const isMidiEvent = e instanceof MIDIMessageEvent;
+    this._midi.onmidimessage = (e: Event | MidiEvent) => {
+      const isMidiEvent =
+        e instanceof MIDIMessageEvent || e instanceof MidiEvent;
 
       if (!isMidiEvent) return;
 
@@ -55,8 +62,8 @@ export default class MidiDevice implements MidiDeviceInterface {
     );
   }
 
-  private processEvent(e: MIDIMessageEvent) {
-    const event = new MidiEvent(e);
+  private processEvent(e: MIDIMessageEvent | MidiEvent) {
+    const event: MidiEvent = e instanceof MidiEvent ? e : new MidiEvent(e);
 
     switch (event.type) {
       case "noteOn":

package/src/core/midi/MidiDeviceManager.ts

@@ -1,10 +1,13 @@
-import MidiDevice from "./MidiDevice";
+import ComputerKeyboardInput from "./ComputerKeyboardInput";
+import MidiDevice, { IMidiInput } from "./MidiDevice";
 
 export default class MidiDeviceManager {
   devices: { [Key: string]: MidiDevice } = {};
   private initialized = false;
+  private computerKeyboardInput: ComputerKeyboardInput;
 
   constructor() {
+    this.computerKeyboardInput = new ComputerKeyboardInput();
     this.initializeDevices()
       .then(() => {
         this.listenChanges();
@@ -31,7 +34,7 @@ export default class MidiDeviceManager {
           if (!isMidiEvent) return;
           if (e.port instanceof MIDIOutput) return;
 
-          const input = e.port as MIDIInput;
+          const input = e.port as unknown as IMidiInput;
 
           const midi = new MidiDevice(input);
 
@@ -58,14 +61,16 @@ export default class MidiDeviceManager {
     (await this.inputs()).forEach((input) => {
       if (this.devices[input.id]) return;
 
-      this.devices[input.id] = new MidiDevice(input);
+      this.devices[input.id] = new MidiDevice(input as IMidiInput);
     });
 
     return Object.values(this.devices);
   }
 
   private async inputs() {
-    const inputs: Array<MIDIInput> = [];
+    const inputs: Array<MIDIInput | ComputerKeyboardInput> = [
+      this.computerKeyboardInput,
+    ];
 
     const access = await navigator.requestMIDIAccess();
     access.inputs.forEach((input) => inputs.push(input));

package/src/modules/Envelope/Base.ts

@@ -105,7 +105,10 @@ export default abstract class EnvelopeModule<EnvelopeLike extends Env>
   };
 
   triggerRelease = (note: Note, triggeredAt: number) => {
+    if (this.activeNote && this.activeNote !== note.fullName) return;
+
     this.internalModule.triggerRelease(triggeredAt);
+    this.activeNote = undefined;
   };
 
   private maxTime(stage: EnvelopeStages): number {

package/src/modules/Filter.ts

@@ -1,4 +1,4 @@
-import { Filter as InternalFilter, FilterRollOff } from "tone";
+import { Filter as InternalFilter, FilterRollOff, Add, Multiply } from "tone";
 import Module, { PolyModule } from "../core/Module";
 
 interface FilterInterface {
@@ -11,8 +11,10 @@ interface FilterInterface {
 
 type FilterProps = Partial<FilterInterface>;
 
+const MAX_FREQ = 20000;
+
 const InitialProps: FilterInterface = {
-  cutoff: 20000,
+  cutoff: MAX_FREQ,
   resonance: 0,
   envelopeAmount: 0,
   slope: -24,
@@ -20,6 +22,9 @@ const InitialProps: FilterInterface = {
 };
 
 class MonoFilter extends Module<InternalFilter, FilterInterface> {
+  private _cutoff: Add;
+  private _amount: Multiply;
+
   constructor(params: { id?: string; name: string; props: FilterProps }) {
     const { id, name, props } = params;
 
@@ -29,8 +34,15 @@ class MonoFilter extends Module<InternalFilter, FilterInterface> {
       props: { ...InitialProps, ...props },
     });
 
+    this._cutoff = new Add(this.cutoff);
+    this._cutoff.connect(this.internalModule.frequency);
+
+    this._amount = new Multiply();
+    this._amount.connect(this._cutoff);
+    this.updateAmountFactor();
+
     this.registerBasicInputs();
-    this.registerBasicOutputs();
+    this.registerOutputs();
   }
 
   get cutoff() {
@@ -38,8 +50,12 @@ class MonoFilter extends Module<InternalFilter, FilterInterface> {
   }
 
   set cutoff(value: number) {
+    if (this._cutoff) {
+      this._cutoff.addend.value = value;
+    }
+
     this._props = { ...this.props, cutoff: value };
-    this.internalModule.frequency.value = value;
+    this.updateAmountFactor();
   }
 
   get filterType() {
@@ -80,6 +96,27 @@ class MonoFilter extends Module<InternalFilter, FilterInterface> {
 
   set envelopeAmount(value: number) {
     this._props = { ...this.props, envelopeAmount: value };
+    this.updateAmountFactor();
+  }
+
+  private registerOutputs() {
+    this.registerBasicOutputs();
+
+    this.registerAudioInput({
+      name: "cutoff",
+      internalModule: this._amount,
+    });
+  }
+
+  private updateAmountFactor() {
+    if (!this._amount) return;
+
+    const value =
+      this.envelopeAmount > 0
+        ? this.envelopeAmount * Math.abs(MAX_FREQ - this.cutoff)
+        : this.envelopeAmount * Math.abs(1 - this.cutoff);
+
+    this._amount.factor.value = value;
   }
 }
 
@@ -101,6 +138,11 @@ export default class Filter extends PolyModule<MonoFilter, FilterInterface> {
     });
 
     this.registerBasicInputs();
+    this.registerOutputs();
+  }
+
+  private registerOutputs() {
     this.registerBasicOutputs();
+    this.registerInput({ name: "cutoff" });
   }
 }

package/src/modules/Master.ts

@@ -15,7 +15,10 @@ export default class Master extends Module<
       name: "Master",
     });
 
-    this.registerBasicInputs();
+    this.registerAudioInput({
+      name: "input",
+      internalModule: this.internalModule,
+    });
   }
 
   dispose(): void {

package/src/modules/MidiSelector.ts

@@ -59,10 +59,10 @@ export default class MidiSelector extends Module<
     if (!this.onMidiEvent || !midiId) return; // Ugly hack because of weird super bug
 
     const midiDevice = Engine.midiDeviceManager.find(midiId);
-    midiDevice?.addEventListener(this.onMidiEvent);
+    midiDevice?.addEventListener(this.forwardMidiEvent);
   }
 
-  private _onMidiEvent = (midiEvent: MidiEvent) => {
+  private forwardMidiEvent = (midiEvent: MidiEvent) => {
     this.midiOutput.onMidiEvent(midiEvent);
   };
 
@@ -70,6 +70,6 @@ export default class MidiSelector extends Module<
     if (!this.selectedId) return;
 
     const midiDevice = Engine.midiDeviceManager.find(this.selectedId);
-    midiDevice?.removeEventListener(this._onMidiEvent);
+    midiDevice?.removeEventListener(this.forwardMidiEvent);
   }
 }

package/src/modules/VirtualMidi.ts

@@ -48,16 +48,18 @@ export default class VirtualMidi extends Module<
     this.midiOutput.onMidiEvent(midiEvent);
   }
 
-  triggerAttack = (note: Note) => {
+  triggerAttack = (note: Note, triggerAttack: number) => {
     this.activeNotes = [...this.activeNotes, note.fullName];
     Engine._triggerPropsUpdate(this.id, this.props);
+    this.sendMidi(MidiEvent.fromNote(note, true, triggerAttack));
   };
 
-  triggerRelease = (note: Note) => {
+  triggerRelease = (note: Note, triggerAttack: number) => {
     this.activeNotes = this.activeNotes.filter(
       (name) => name !== note.fullName
     );
     Engine._triggerPropsUpdate(this.id, this.props);
+    this.sendMidi(MidiEvent.fromNote(note, false, triggerAttack));
   };
 
   serialize() {