Interaktivität

da das Rendering über eine SVG Grafik gemacht wird, steht das volle Spektrum an Browser-Interaktivät zur Verfügung.

Jede Komponente kann sich selbst Event-Handler registrieren, die bei Bedarf aufsgelöst werden.

Dies können z.B. Klicks oder Hover-Events sein.

Ein Beispiel hier ist der Taster.

In der "setup"-Funktion wird der entsprechende Handler registriert:

MomentaryPushButton.prototype.setup = function(canvas) {
  BaseComponent.prototype.setup.call(this, "momentarypushbutton", canvas);
  this.element.addEventListener("mousedown", this.activate.bind(this));
  document.addEventListener("mouseup", this.deactivate.bind(this));
};

Hier wird zum einen ein mousedown (Drücken der Maustaste auf dem eigentlichen Element) als auch ein generelles mouseup für das loslassen definiert.

Die Funktionen selbst sind minimal:

MomentaryPushButton.prototype.activate = function (e) {
  this.pressed = true;
  this.simulator.manualtick();
};

MomentaryPushButton.prototype.deactivate = function (e) {
  if (this.pressed) {
    this.pressed = false;
    this.simulator.manualtick();
  }
};

Sie setzen lediglich den internen Status und lösen beim drücken bzw. loslassen eines gedrückten Taster einen manuellen Lauf des Simulators aus.

Der interne Status wird dann in der update Funktion verwendet, um die Simulation zu beeinflussen.

Um aus dem Taster ein Schalter zu machen, der jeweil pro Mausklick den Status ändert, ist:

• das mousedown durch ein click zu ersetzen,
• das mouseup und die passende Funktion zu entfernen
• in der activate Funktion aus this.pressed = true ein this.pressed = !this.pressed zu machen.

Weiter mit Simulator Milestone 1