Triggers

• Type: (listener: (event:MouseEvent) => void) => void

Register a click listener on the <canvas>.

import { onClick } from '@fragment/triggers';

export let init = () => {
	onClick(() => {
		console.log(`canvas click`);
	});
}

• Type: (listener: (event:MouseEvent) => void) => void

Register a mousedown listener on the <canvas>.

import { onMouseDown } from '@fragment/triggers';

export let init = () => {
	onMouseDown(() => {
		console.log(`canvas mouse down`);
	});
}

• Type: (listener: (event:MouseEvent) => void) => void

Register a mouseup listener on the <canvas>.

import { onMouseUp } from '@fragment/triggers';

export let init = () => {
	onMouseUp((event) => {
		console.log(`canvas mouse up`, event);
	});
}

• Type: (listener: (event:MouseEvent) => void) => void

Register a mousemove listener on the <canvas>.

import { onMouseMove } from '@fragment/triggers';

export let init = () => {
	onMouseMove((event) => {
		console.log(`canvas mouse move`, event);
	});
}

• Type: (key?: (string|string[]), listener: (event:KeyboardEvent) => void) => void

Register a keypress listener for key on window.

import { onKeyPress } from "@fragment/triggers";

export let init = () => {
	onKeyPress(() => {
		console.log("called for every keypress");
	});

	onKeyPress('a', () => {
		console.log("called when 'a' is pressed");
	});

	onKeyPress('A', () => {
		console.log("called when 'A' is pressed");
	});

	onKeyPress(['a', 'A'], () => {
		console.log("called when 'a' or 'A' is pressed");
	});
};

• Type: (key?: (string|string[]), listener: (event:KeyboardEvent) => void) => void

Register a keydown listener for key on window.

import { onKeyDown } from "@fragment/triggers";

export let init = () => {
	onKeyDown('a', () => {
		console.log("called when 'a' is down");
	});
};

• Type: (key?: (string|string[]), listener: (event:KeyboardEvent) => void) => void

Register a keyup listener for key on window.

import { onKeyUp } from "@fragment/triggers";

export let init = () => {
	onKeyUp('a', () => {
		console.log("called when 'a' is up");
	});
};

MIDI triggers are called when using a MIDI device after authorizing usage of the Web MIDI API.

• Type: (note?: Note | Note[], listener: (event: MIDIEvent) => void) => void
• Where Note = "C" | "C#" | "D" | "D#" | "E" | "F" | "F#" | "G" | "G#" | "A" | "A#" | "B"

Registers a listener triggered on a MIDI noteon event for the specified note or notes (fired when the key is pressed down).

import { onNoteOn } from "@fragment/triggers";

export let init = () => {
	onNoteOn('C', () => {
		console.log("C pressed");
	});
};

• Type: (note?: Note | Note[], listener: (event: MIDIEvent) => void) => void
• Where Note = "C" | "C#" | "D" | "D#" | "E" | "F" | "F#" | "G" | "G#" | "A" | "A#" | "B"

Registers a listener triggered on a MIDI noteoff event for the specified note or notes (fired when the key is released).

import { onNoteOff } from "@fragment/triggers";

export let init = () => {
	onNoteOff(['D', "D#"], () => {
		console.log("D or D# released");
	});
};

• Type: (noteNumber?: number | number[], listener: (event: MIDIEvent) => void) => void

Registers a listener triggered on a MIDI noteon event for the specified note number or numbers (fired when the key is pressed down).

import { onNumberOn } from "@fragment/triggers";

export let init = () => {
  onNumberOn([60, 62], () => {
    console.log("Note numbers 60 or 62 pressed down");
  });
};

• Type: (noteNumber?: number | number[], listener: (event: MIDIEvent) => void) => void

Registers a listener triggered on a MIDI noteoff event for the specified note number or numbers (fired when the key is released).

import { onNumberOff } from "@fragment/triggers";

export let init = () => {
  onNumberOff([60, 62], () => {
    console.log("Note numbers 60 or 62 released");
  });
};

• Type: (control?: number | number[], listener: (event: MIDIEvent) => void) => void

Registers a listener triggered on a MIDI controlchange event for the specified controls.

import { onControlChange } from "@fragment/triggers";

export let init = () => {
  onControlChange([1, 7], (event) => {
    console.log("Control 1 or 7 changed", event.value);
  });
};