Indicate muted state in mixer and sequencer

Author: andersnm

src/audio/Player.ts

@@ -242,6 +242,10 @@ export class Player extends EventTarget {
         }
 
         for (let ev of patternEvents) {
+            if (ev.instrumenteer.muted) {
+                continue;
+            }
+
             const evTime = ev.time * (durationSec / durationBeats);
             const playTime = this.startTime + this.currentTime + evTime;
             if (ev.type === "midinote") {

src/commands/SequenceEditor/Register.ts

@@ -3,6 +3,7 @@ import { AddColumnCommand } from "./AddColumnCommand";
 import { CopyCommand } from "./CopyCommand";
 import { CutCommand } from "./CutCommand";
 import { DeleteColumnCommand } from "./DeleteColumnCommand";
+import { MuteCommand } from "./MuteCommand";
 import { PasteCommand } from "./PasteCommand";
 import { SetLoopEndCommand } from "./SetLoopEndCommand";
 import { SetLoopStartCommand } from "./SetLoopStartCommand";
@@ -16,6 +17,7 @@ export function registerSequenceEditorCommands(component: SequencePanel) {
     component.registerCommand("delete-column", "hgi-stroke hgi-minus-sign", null, new DeleteColumnCommand(component));
     component.registerCommand("set-loop-start", null, null, new SetLoopStartCommand(component));
     component.registerCommand("set-loop-end", null, null, new SetLoopEndCommand(component));
+    component.registerCommand("mute", null, "Toggle Mute", new MuteCommand(component));
 
     // component.registerHotkey("CTRL+A", "select-all");
     component.registerHotkey("CTRL++", "add-column");
@@ -24,5 +26,5 @@ export function registerSequenceEditorCommands(component: SequencePanel) {
     component.registerHotkey("CTRL+C", "copy");
     component.registerHotkey("CTRL+V", "paste");
     component.registerHotkey("CTRL+B", "set-loop-start");
-    component.registerHotkey("CTRL+E", "set-loop-end");
+    component.registerHotkey("CTRL+M", "mute");
 }

src/components/MixerCanvas.ts

@@ -6,6 +6,13 @@ import { PinsPanel } from "./PinsPanel";
 import { MenuItem } from "../menu/menu";
 import { getNoteForKey } from "./PatternEditorHelper";
 
+function colorWithBrightness(r: number, g: number, b: number, brightness: number) {
+    const red = Math.max(0, Math.min(255, Math.round(r * brightness)));
+    const green = Math.max(0, Math.min(255, Math.round(g * brightness)));
+    const blue = Math.max(0, Math.min(255, Math.round(b * brightness)));
+    return "rgb(" + red + ", " + green + ", " + blue + ")";
+}
+
 const boxWidth = 100;
 const boxHeight = 61; // 1.618
 const arrowSize = 10;
@@ -170,6 +177,7 @@ export class MixerCanvas implements IComponent {
         this.app.song.addEventListener("createInstrument", this.onResize);
         this.app.song.addEventListener("updateInstrument", this.onResize);
         this.app.song.addEventListener("deleteInstrument", this.onResize);
+        this.app.song.addEventListener("setInstrumentMuted", this.onResize);
         this.app.song.addEventListener("createConnection", this.onResize);
         this.app.song.addEventListener("deleteConnection", this.onResize);
     };
@@ -178,6 +186,7 @@ export class MixerCanvas implements IComponent {
         this.app.song.removeEventListener("createInstrument", this.onResize);
         this.app.song.removeEventListener("updateInstrument", this.onResize);
         this.app.song.removeEventListener("deleteInstrument", this.onResize);
+        this.app.song.removeEventListener("setInstrumentMuted", this.onResize);
         this.app.song.removeEventListener("createConnection", this.onResize);
         this.app.song.removeEventListener("deleteConnection", this.onResize);
     };
@@ -469,25 +478,28 @@ export class MixerCanvas implements IComponent {
                 ctx.lineWidth = 3;
             }
 
-            const hasIn = this.app.song.connections.find(c => c.to === instrument);
-            const hasOut = this.app.song.connections.find(c => c.from === instrument);
+            const instrumenteer = this.app.playerSongAdapter.instrumentMap.get(instrument);
+            const hasIn = !!instrumenteer.instrument.inputNode;
+            const hasOut = !!instrumenteer.instrument.outputNode;
+            const brightness = instrument.muted ? 0.6 : 1.0;
             if (hasIn && !hasOut) {
-                ctx.fillStyle = "#5C704C";
+                ctx.fillStyle = colorWithBrightness(92, 112, 76, brightness);
             } else if (hasIn && hasOut) {
-                ctx.fillStyle = "#101010";
+                ctx.fillStyle = colorWithBrightness(68, 68, 68, brightness);
             } else {
-                ctx.fillStyle = "#2A614B";
+                ctx.fillStyle = colorWithBrightness(42, 97, 75, brightness);
             }
 
             ctx.strokeStyle = "#000";
 
             ctx.fillRect(c[0] - boxWidth / 2, c[1] - boxHeight / 2, boxWidth, boxHeight);
             ctx.strokeRect(c[0] - boxWidth / 2, c[1] - boxHeight / 2, boxWidth, boxHeight);
 
-            const mt = ctx.measureText(instrument.name);
+            const name = instrument.muted ? "(" + instrument.name + ")" : instrument.name;
+            const mt = ctx.measureText(name);
 
             ctx.fillStyle = "#FFF";
-            ctx.fillText(instrument.name, c[0] - mt.width / 2, c[1] + mt.fontBoundingBoxAscent - fontHeight / 2 );
+            ctx.fillText(name, c[0] - mt.width / 2, c[1] + mt.fontBoundingBoxAscent - fontHeight / 2 );
 
             ctx.restore();
 

src/components/SequenceEditorCanvas.ts

@@ -113,6 +113,7 @@ export class SequenceEditorCanvas extends EventTarget implements IComponent {
         this.app.song.addEventListener("playing", this.onPlaying);
         this.app.song.addEventListener("stopped", this.onStopped);
         this.app.song.addEventListener("updateDocument", this.onResize);
+        this.app.song.addEventListener("setInstrumentMuted", this.onResize);
         this.app.song.addEventListener("createSequenceColumn", this.onResize);
         this.app.song.addEventListener("deleteSequenceColumn", this.onResize);
         this.app.song.addEventListener("createSequenceEvent", this.onResize);
@@ -124,6 +125,7 @@ export class SequenceEditorCanvas extends EventTarget implements IComponent {
         this.app.song.removeEventListener("playing", this.onPlaying);
         this.app.song.removeEventListener("stopped", this.onStopped);
         this.app.song.removeEventListener("updateDocument", this.onResize);
+        this.app.song.removeEventListener("setInstrumentMuted", this.onResize);
         this.app.song.removeEventListener("createSequenceColumn", this.onResize);
         this.app.song.removeEventListener("deleteSequenceColumn", this.onResize);
         this.app.song.removeEventListener("createSequenceEvent", this.onResize);
@@ -401,7 +403,8 @@ export class SequenceEditorCanvas extends EventTarget implements IComponent {
             ctx.lineTo(sequenceX + columnWidth, this.canvas.height);
             ctx.stroke();
 
-            ctx.fillText(sequenceColumn.instrument.name, sequenceX, this.fontEm.fontBoundingBoxAscent, columnWidth);
+            const name = sequenceColumn.instrument.muted ? "(" + sequenceColumn.instrument.name + ")" : sequenceColumn.instrument.name;
+            ctx.fillText(name, sequenceX, this.fontEm.fontBoundingBoxAscent, columnWidth);
 
             // Clip header
             ctx.save();