Model Events Demo

Interactive demo for the Observer pattern and model change events

This interactive demo shows how the Observer pattern works in the Notations library. Parse notation input, insert at any position using the caret, and watch the event log update in real-time.

Interactive Demo

Controls

Enter notes, spaces (,), groups ([...]), etc.

Current Atoms (Click to set caret position)

No atoms yet - caret at position 0

Event Log

Observer registered. Click between atoms to set caret position.

How It Works

The demo creates a Group and registers a GroupObserver. It uses the Parser to parse notation input into atoms:

const group = new Group();
group.enableEvents();

// Parse notation input into atoms
function parseNotation(input: string): Atom[] {
  const parser = new Parser();
  parser.parse(input);
  // Extract atoms from AddAtoms commands
  const atoms: Atom[] = [];
  parser.commands.forEach(cmd => {
    if (cmd.atoms) atoms.push(...cmd.atoms);
  });
  return atoms;
}

// Insert at caret position
const atomAtCaret = getAtomAtIndex(caretIndex);
group.insertAtomsAt(atomAtCaret, false, ...parsedAtoms);

Try It Yourself

  1. Set the caret - Click between atoms to position the caret (shown as a blinking line)
  2. Enter notation - Type notation like S R G or [ P D N ] or S , , R
  3. Insert at caret - Click "Insert at Caret" to insert parsed atoms at the caret position
  4. Remove at caret - Set the count and click "Remove at Caret" to remove atoms starting at the caret
  5. Toggle events - Uncheck "Events Enabled" to see modifications without event notifications

Notation Syntax

S R G MIndividual notes
S. or S'Higher octave
.S or S,Lower octave
, or _Space/silence
[ G M P ]Group (atoms share duration)
2 SDuration prefix (S has duration 2)

Note: In this demo, atoms are parsed as Literal tokens without role context. In a full notation document, literals are converted to Note or Syllable based on the role (e.g., Sw: for swaras). This demo focuses on the Observer pattern, so raw literals are used directly.

See Also