@blibliki/engine 0.5.2 → 0.9.0

package/src/core/midi/adapters/NodeMidiAdapter.ts

@@ -6,6 +6,8 @@ import type {
   IMidiAccess,
   IMidiAdapter,
   IMidiInputPort,
+  IMidiOutputPort,
+  IMidiPort,
   MidiMessageCallback,
 } from "./types";
 
@@ -26,8 +28,18 @@ type NodeMidiInput = {
   isPortOpen(): boolean;
 };
 
+type NodeMidiOutput = {
+  getPortCount(): number;
+  getPortName(port: number): string;
+  openPort(port: number): void;
+  closePort(): void;
+  sendMessage(message: number[]): void;
+  isPortOpen(): boolean;
+};
+
 type NodeMidiModule = {
   Input: new () => NodeMidiInput;
+  Output: new () => NodeMidiOutput;
 };
 
 class NodeMidiInputPort implements IMidiInputPort {
@@ -51,8 +63,8 @@ class NodeMidiInputPort implements IMidiInputPort {
     return this._state;
   }
 
-  setState(state: "connected" | "disconnected"): void {
-    this._state = state;
+  get type() {
+    return "input" as const;
   }
 
   addEventListener(callback: MidiMessageCallback): void {
@@ -99,8 +111,55 @@ class NodeMidiInputPort implements IMidiInputPort {
   }
 }
 
+class NodeMidiOutputPort implements IMidiOutputPort {
+  readonly id: string;
+  readonly name: string;
+  private portIndex: number;
+  private output: NodeMidiOutput;
+  private _state: "connected" | "disconnected" = "disconnected";
+  private isOpen = false;
+
+  constructor(portIndex: number, name: string, output: NodeMidiOutput) {
+    this.portIndex = portIndex;
+    this.id = `node-midi-out-${portIndex}`;
+    this.name = name;
+    this.output = output;
+  }
+
+  get state(): "connected" | "disconnected" {
+    return this._state;
+  }
+
+  get type() {
+    return "output" as const;
+  }
+
+  private ensureOpen(): void {
+    if (!this.isOpen) {
+      try {
+        this.output.openPort(this.portIndex);
+        this.isOpen = true;
+        this._state = "connected";
+      } catch (err) {
+        console.error(`Error opening MIDI output port ${this.portIndex}:`, err);
+      }
+    }
+  }
+
+  send(data: number[] | Uint8Array, _timestamp?: number): void {
+    this.ensureOpen();
+    try {
+      const message = Array.isArray(data) ? data : Array.from(data);
+      this.output.sendMessage(message);
+    } catch (err) {
+      console.error(`Error sending MIDI message:`, err);
+    }
+  }
+}
+
 class NodeMidiAccess implements IMidiAccess {
-  private ports = new Map<string, NodeMidiInputPort>();
+  private inputPorts = new Map<string, NodeMidiInputPort>();
+  private outputPorts = new Map<string, NodeMidiOutputPort>();
   private MidiModule: NodeMidiModule;
 
   constructor(MidiModule: NodeMidiModule) {
@@ -109,43 +168,70 @@ class NodeMidiAccess implements IMidiAccess {
   }
 
   private scanPorts(): void {
+    // Scan input ports
     try {
       const input = new this.MidiModule.Input();
-      const portCount = input.getPortCount();
+      const inputCount = input.getPortCount();
 
-      for (let i = 0; i < portCount; i++) {
+      for (let i = 0; i < inputCount; i++) {
         const portName = input.getPortName(i);
         const id = `node-midi-${i}`;
 
-        if (!this.ports.has(id)) {
-          // Create a new input instance for each port
+        if (!this.inputPorts.has(id)) {
           const portInput = new this.MidiModule.Input();
           const port = new NodeMidiInputPort(i, portName, portInput);
-          this.ports.set(id, port);
+          this.inputPorts.set(id, port);
         }
       }
 
-      // Clean up the scanning input
       if (input.isPortOpen()) {
         input.closePort();
       }
     } catch (err) {
-      console.error("Error scanning MIDI ports:", err);
+      console.error("Error scanning MIDI input ports:", err);
+    }
+
+    // Scan output ports
+    try {
+      const output = new this.MidiModule.Output();
+      const outputCount = output.getPortCount();
+
+      for (let i = 0; i < outputCount; i++) {
+        const portName = output.getPortName(i);
+        const id = `node-midi-out-${i}`;
+
+        if (!this.outputPorts.has(id)) {
+          const portOutput = new this.MidiModule.Output();
+          const port = new NodeMidiOutputPort(i, portName, portOutput);
+          this.outputPorts.set(id, port);
+        }
+      }
+
+      if (output.isPortOpen()) {
+        output.closePort();
+      }
+    } catch (err) {
+      console.error("Error scanning MIDI output ports:", err);
     }
   }
 
   *inputs(): IterableIterator<IMidiInputPort> {
-    for (const [, port] of this.ports) {
+    for (const [, port] of this.inputPorts) {
+      yield port;
+    }
+  }
+
+  *outputs(): IterableIterator<IMidiOutputPort> {
+    for (const [, port] of this.outputPorts) {
       yield port;
     }
   }
 
   addEventListener(
     _event: "statechange",
-    _callback: (port: IMidiInputPort) => void,
+    _callback: (port: IMidiPort) => void,
   ): void {
     // node-midi doesn't support hot-plugging detection
-    // This could be implemented with polling if needed
     console.warn(
       "Hot-plug detection not supported with node-midi adapter. Restart required for new devices.",
     );

package/src/core/midi/adapters/WebMidiAdapter.ts

@@ -5,6 +5,8 @@ import type {
   IMidiAccess,
   IMidiAdapter,
   IMidiInputPort,
+  IMidiOutputPort,
+  IMidiPort,
   MidiMessageCallback,
 } from "./types";
 
@@ -25,6 +27,10 @@ class WebMidiInputPort implements IMidiInputPort {
     return this.input.name ?? `Device ${this.input.id}`;
   }
 
+  get type() {
+    return this.input.type;
+  }
+
   get state(): "connected" | "disconnected" {
     return this.input.state as "connected" | "disconnected";
   }
@@ -58,9 +64,38 @@ class WebMidiInputPort implements IMidiInputPort {
   }
 }
 
+class WebMidiOutputPort implements IMidiOutputPort {
+  private output: MIDIOutput;
+
+  constructor(output: MIDIOutput) {
+    this.output = output;
+  }
+
+  get id(): string {
+    return this.output.id;
+  }
+
+  get name(): string {
+    return this.output.name ?? `Device ${this.output.id}`;
+  }
+
+  get type() {
+    return this.output.type;
+  }
+
+  get state(): "connected" | "disconnected" {
+    return this.output.state as "connected" | "disconnected";
+  }
+
+  send(data: number[] | Uint8Array, timestamp?: number): void {
+    this.output.send(data, timestamp);
+  }
+}
+
 class WebMidiAccess implements IMidiAccess {
   private midiAccess: MIDIAccess;
-  private portCache = new Map<string, WebMidiInputPort>();
+  private inputCache = new Map<string, WebMidiInputPort>();
+  private outputCache = new Map<string, WebMidiOutputPort>();
 
   constructor(midiAccess: MIDIAccess) {
     this.midiAccess = midiAccess;
@@ -68,27 +103,50 @@ class WebMidiAccess implements IMidiAccess {
 
   *inputs(): IterableIterator<IMidiInputPort> {
     for (const [, input] of this.midiAccess.inputs) {
-      if (!this.portCache.has(input.id)) {
-        this.portCache.set(input.id, new WebMidiInputPort(input));
+      if (!this.inputCache.has(input.id)) {
+        this.inputCache.set(input.id, new WebMidiInputPort(input));
       }
-      yield this.portCache.get(input.id)!;
+      yield this.inputCache.get(input.id)!;
+    }
+  }
+
+  *outputs(): IterableIterator<IMidiOutputPort> {
+    for (const [, output] of this.midiAccess.outputs) {
+      if (!this.outputCache.has(output.id)) {
+        this.outputCache.set(output.id, new WebMidiOutputPort(output));
+      }
+      yield this.outputCache.get(output.id)!;
     }
   }
 
   addEventListener(
     event: "statechange",
-    callback: (port: IMidiInputPort) => void,
+    callback: (port: IMidiPort) => void,
   ): void {
     this.midiAccess.addEventListener(event, (e) => {
       const port = e.port;
-      if (port?.type !== "input") return;
+      if (!port) return;
+
+      const midiPort: IMidiPort = {
+        id: port.id,
+        name: port.name ?? `Device ${port.id}`,
+        state: port.state as "connected" | "disconnected",
+        type: port.type as "input" | "output",
+      };
 
-      const input = port as MIDIInput;
-      if (!this.portCache.has(input.id)) {
-        this.portCache.set(input.id, new WebMidiInputPort(input));
+      if (port.type === "input") {
+        const input = port as MIDIInput;
+        if (!this.inputCache.has(input.id)) {
+          this.inputCache.set(input.id, new WebMidiInputPort(input));
+        }
+      } else {
+        const output = port as MIDIOutput;
+        if (!this.outputCache.has(output.id)) {
+          this.outputCache.set(output.id, new WebMidiOutputPort(output));
+        }
       }
 
-      callback(this.portCache.get(input.id)!);
+      callback(midiPort);
     });
   }
 }

package/src/core/midi/adapters/types.ts

@@ -10,19 +10,28 @@ export interface IMidiMessageEvent {
 
 export type MidiMessageCallback = (event: IMidiMessageEvent) => void;
 
-export interface IMidiInputPort {
+export interface IMidiInputPort extends IMidiPort {
+  addEventListener(callback: MidiMessageCallback): void;
+  removeEventListener(callback: MidiMessageCallback): void;
+}
+
+export interface IMidiOutputPort extends IMidiPort {
+  send(data: number[] | Uint8Array, timestamp?: number): void;
+}
+
+export interface IMidiPort {
   readonly id: string;
   readonly name: string;
   readonly state: "connected" | "disconnected";
-  addEventListener(callback: MidiMessageCallback): void;
-  removeEventListener(callback: MidiMessageCallback): void;
+  readonly type: "input" | "output";
 }
 
 export interface IMidiAccess {
   inputs(): IterableIterator<IMidiInputPort>;
+  outputs(): IterableIterator<IMidiOutputPort>;
   addEventListener(
     event: "statechange",
-    callback: (port: IMidiInputPort) => void,
+    callback: (port: IMidiPort) => void,
   ): void;
 }
 

package/src/core/midi/controllers/BaseController.ts

@@ -0,0 +1,14 @@
+import type { IMidiOutputPort } from "../adapters";
+
+export abstract class BaseController {
+  protected outputPort: IMidiOutputPort;
+  protected isInDawMode = false;
+
+  constructor(outputPort: IMidiOutputPort) {
+    this.outputPort = outputPort;
+  }
+
+  abstract enterDawMode(): Promise<void>;
+
+  abstract exitDawMode(): Promise<void>;
+}

package/src/core/module/Module.ts

@@ -7,7 +7,13 @@ import {
   requestAnimationFrame,
 } from "@blibliki/utils";
 import { Engine } from "@/Engine";
-import { AnyModule, ModuleType, ModuleTypeToPropsMapping } from "@/modules";
+import {
+  AnyModule,
+  ICreateModule,
+  ModuleType,
+  ModuleTypeToPropsMapping,
+  ModuleTypeToStateMapping,
+} from "@/modules";
 import {
   AudioInputProps,
   AudioOutputProps,
@@ -49,6 +55,16 @@ export type SetterHooks<P> = {
   ) => void;
 };
 
+export type StateSetterHooks<S> = {
+  [K in keyof S as `onSetState${Capitalize<string & K>}`]: (
+    value: S[K],
+  ) => S[K];
+} & {
+  [K in keyof S as `onAfterSetState${Capitalize<string & K>}`]: (
+    value: S[K],
+  ) => void;
+};
+
 export abstract class Module<T extends ModuleType> implements IModule<T> {
   id: string;
   engineId: string;
@@ -59,9 +75,46 @@ export abstract class Module<T extends ModuleType> implements IModule<T> {
   inputs: InputCollection;
   outputs: OutputCollection;
   protected _props!: ModuleTypeToPropsMapping[T];
+  protected _state!: ModuleTypeToStateMapping[T];
   protected activeNotes: Note[];
+  protected _propsInitialized = false;
   private pendingUIUpdates = false;
 
+  /**
+   * Factory method for creating modules with proper initialization timing.
+   *
+   * This method ensures hooks are called AFTER the child class constructor completes,
+   * solving the ES6 class field initialization problem where function properties like hooks
+   * aren't available during super() call.
+   *
+   * @example
+   * const gain = Module.create(MonoGain, engineId, {
+   *   name: "gain",
+   *   moduleType: ModuleType.Gain,
+   *   props: { gain: 0.5 }
+   * });
+   */
+  static create<T extends ModuleType, M extends Module<T>>(
+    ModuleClass: new (engineId: string, params: ICreateModule<T>) => M,
+    engineId: string,
+    params: Omit<IModuleConstructor<T>, "props"> & {
+      props: Partial<IModule<T>["props"]>;
+    },
+  ): M {
+    // Create instance with deferred prop initialization
+    const instance = new ModuleClass(engineId, {
+      ...params,
+    });
+
+    // Now trigger prop setters after child constructor has completed
+    // At this point, all child class properties (including arrow functions) exist
+    // TODO: We have to refactor all modules the remove the props assignment from constructor
+    instance.props = { ...instance.props };
+    instance._propsInitialized = true;
+
+    return instance;
+  }
+
   constructor(engineId: string, params: IModuleConstructor<T>) {
     const { id, name, moduleType, voiceNo, audioNodeConstructor, props } =
       params;
@@ -77,11 +130,6 @@ export abstract class Module<T extends ModuleType> implements IModule<T> {
 
     this.inputs = new InputCollection(this);
     this.outputs = new OutputCollection(this);
-
-    // Defer hook calls until after subclass is fully initialized
-    queueMicrotask(() => {
-      this.props = props;
-    });
   }
 
   get props(): ModuleTypeToPropsMapping[T] {
@@ -89,20 +137,25 @@ export abstract class Module<T extends ModuleType> implements IModule<T> {
   }
 
   set props(value: Partial<ModuleTypeToPropsMapping[T]>) {
-    const updatedValue = { ...value };
+    const updatedValue: Partial<ModuleTypeToPropsMapping[T]> = {};
+    const isFirstSet = !this._propsInitialized;
 
     (Object.keys(value) as (keyof ModuleTypeToPropsMapping[T])[]).forEach(
       (key) => {
         const propValue = value[key];
-        if (propValue !== undefined) {
+        // On first set, always include the value. On subsequent sets, only if it changed.
+        if (
+          propValue !== undefined &&
+          (isFirstSet || this._props[key] !== propValue)
+        ) {
           const result = this.callPropHook("onSet", key, propValue);
-          if (result !== undefined) {
-            updatedValue[key] = result;
-          }
+          updatedValue[key] = result ?? propValue;
         }
       },
     );
 
+    if (Object.keys(updatedValue).length === 0) return;
+
     this._props = { ...this._props, ...updatedValue };
 
     (
@@ -134,6 +187,56 @@ export abstract class Module<T extends ModuleType> implements IModule<T> {
     return undefined;
   }
 
+  get state(): ModuleTypeToStateMapping[T] {
+    return this._state;
+  }
+
+  set state(value: Partial<ModuleTypeToStateMapping[T]>) {
+    const updatedValue: Partial<ModuleTypeToStateMapping[T]> = {};
+
+    (Object.keys(value) as (keyof ModuleTypeToStateMapping[T])[]).forEach(
+      (key) => {
+        const stateValue = value[key];
+        if (stateValue !== undefined && this._state[key] !== stateValue) {
+          const result = this.callStateHook("onSetState", key, stateValue);
+          updatedValue[key] = result ?? stateValue;
+        }
+      },
+    );
+
+    if (Object.keys(updatedValue).length === 0) return;
+
+    this._state = { ...this._state, ...updatedValue };
+
+    (
+      Object.keys(updatedValue) as (keyof ModuleTypeToStateMapping[T])[]
+    ).forEach((key) => {
+      const stateValue = updatedValue[key];
+      if (stateValue !== undefined) {
+        this.callStateHook("onAfterSetState", key, stateValue);
+      }
+    });
+  }
+
+  private callStateHook<K extends keyof ModuleTypeToStateMapping[T]>(
+    hookType: "onSetState" | "onAfterSetState",
+    key: K,
+    value: ModuleTypeToStateMapping[T][K],
+  ): ModuleTypeToStateMapping[T][K] | undefined {
+    const hookName = `${hookType}${upperFirst(key as string)}`;
+    const hook = this[hookName as keyof this];
+
+    if (typeof hook === "function") {
+      const result = (
+        hook as (
+          value: ModuleTypeToStateMapping[T][K],
+        ) => ModuleTypeToStateMapping[T][K] | undefined
+      ).call(this, value);
+      return result;
+    }
+    return undefined;
+  }
+
   serialize(): IModuleSerialize<T> {
     return {
       id: this.id,
@@ -223,13 +326,18 @@ export abstract class Module<T extends ModuleType> implements IModule<T> {
 
   private sheduleTriggerUpdate() {
     requestAnimationFrame(() => {
-      this.engine._triggerPropsUpdate({
+      const updateParams: IModule<T> & {
+        state?: ModuleTypeToStateMapping[T];
+      } = {
         id: this.id,
         moduleType: this.moduleType,
         voiceNo: this.voiceNo,
         name: this.name,
         props: this.props,
-      });
+        state: this._state,
+      };
+
+      this.engine._triggerPropsUpdate(updateParams);
       this.pendingUIUpdates = false;
     });
   }

package/src/core/module/PolyModule.ts

@@ -53,6 +53,35 @@ export abstract class PolyModule<
   private _name!: string;
   private pendingUIUpdates = false;
 
+  /**
+   * Factory method for creating modules with proper initialization timing.
+   *
+   * This method ensures hooks are called AFTER the child class constructor completes,
+   * solving the ES6 class field initialization problem where function properties like hooks
+   * aren't available during super() call.
+   *
+   * @example
+   * const gain = Module.create(Gain, engineId, {
+   *   name: "gain",
+   *   moduleType: ModuleType.Gain,
+   *   props: { gain: 0.5 }
+   * });
+   */
+  static create<T extends ModuleType, M extends PolyModule<T>>(
+    ModuleClass: new (engineId: string, params: IPolyModuleConstructor<T>) => M,
+    engineId: string,
+    params: IPolyModuleConstructor<T>,
+  ): M {
+    // Create instance with deferred prop initialization
+    const instance = new ModuleClass(engineId, {
+      ...params,
+    });
+
+    instance.props = { ...instance.props };
+
+    return instance;
+  }
+
   constructor(engineId: string, params: IPolyModuleConstructor<T>) {
     const { id, name, moduleType, voices, monoModuleConstructor, props } =
       params;
@@ -167,6 +196,13 @@ export abstract class PolyModule<
   }
 
   onMidiEvent = (midiEvent: MidiEvent) => {
+    if (midiEvent.cc) {
+      this.audioModules.forEach((m) => {
+        m.onMidiEvent(midiEvent);
+      });
+      return;
+    }
+
     const voiceNo = midiEvent.voiceNo ?? 0;
     const audioModule = this.findVoice(voiceNo);
     audioModule.onMidiEvent(midiEvent);