Allow for filters to be deleted

src/audio.ts

@@ -47,6 +47,34 @@ export class Soundscape {
     this.filters.push(filter);
   }
 
+  removeFilter(filter: Filter): void {
+    if (this.filters.includes(filter)) {
+      const index = this.filters.indexOf(filter);
+
+      if (this.filters.length == 1) {
+        this.filterBus.disconnect();
+        this.filterBus.connect(context.destination);
+      } else if (index == 0) {
+        this.filterBus.disconnect();
+        this.filterBus.connect(this.filters[1].input);
+      } else if (index == this.filters.length - 1) {
+        this.filters[index - 1].output.disconnect();
+        this.filters[index - 1].output.connect(context.destination);
+      } else {
+        this.filters[index - 1].output.disconnect();
+        this.filters[index - 1].output.connect(this.filters[index + 1].input);
+      }
+
+      this.filters = this.filters.filter((x) => x !== filter);
+    } else {
+      console.warn(
+        "Tried to remove a filter from a Soundscape that wasn't using it"
+      );
+      console.warn(this);
+      console.warn(filter);
+    }
+  }
+
   start(): void {
     setInterval(() => {
       this.sources.forEach((source) => source.tick(100));

src/components/SoundscapeComp.vue

@@ -16,6 +16,7 @@
       v-for="(filter, index) in soundscape.filters"
       :key="index"
       :filter="filter"
+      v-on:delete="deleteFilter(filter)"
     >
     </filter-node>
     <filter-node
@@ -88,6 +89,10 @@ export default class SoundscapeComp extends Vue {
     this.soundscape.removeSource(source);
   }
 
+  deleteFilter(filter: Filter): void {
+    this.soundscape.removeFilter(filter);
+  }
+
   mounted(): void {
     this.soundscape.start();
 

src/components/nodes/FilterNode.vue

@@ -5,6 +5,7 @@
       :class="filter.active ? '' : 'inactive'"
       class="filter-node"
     >
+      <button class="delete-button" v-on:click="$emit('delete')">X</button>
       <Toggle class="active-toggle" v-model="filter.active" />
       <div class="node-name">{{ filter.name }}</div>
       <node-props :node="filter"></node-props>
@@ -72,4 +73,13 @@ export default class FilterNode extends Vue {
 .dummy {
   min-height: 200px;
 }
+
+.delete-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 25px;
+  height: 25px;
+  font-size: 24px;
+}
 </style>