dissolve/src/components/nodes/SourceNode.vue

<template>
  <div>
    <div
      v-if="!dummy"
      :class="source.active ? '' : 'inactive'"
      class="source-node"
    >
      <button class="delete-button" v-on:click="$emit('delete')">X</button>
      <toggle class="active-toggle" v-model="source.active" />
      <div class="node-name">{{ source.name }}</div>
      <node-props :node="source"></node-props>
    </div>
    <div v-if="dummy" class="source-node dummy">Drop sounds here!</div>
  </div>
</template>

<script lang="ts">
import { Source } from "@/sources/Source";
import { Options, Vue } from "vue-class-component";
import NodeProps from "@/components/NodeProps.vue";
import Toggle from "@vueform/toggle";

@Options({
  props: {
    source: Source,
    dummy: false,
  },
  components: {
    NodeProps,
    Toggle,
  },
  emits: ["delete"],
})
export default class SourceNode extends Vue {
  source!: Source;
  dummy = false;
}
</script>

<style scoped>
.source-node {
  width: 100%;
  height: 100%;
  background: #555;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: 0.2s background;
}

.source-node.inactive {
  background: #888;
}

.node-name {
  font-size: 24pt;
  margin: 4pt;
  color: #fcf;
  margin-top: 30pt;
}

.node-properties {
  display: flex;
  flex-direction: column;
}

.active-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
}

.dummy {
  min-height: 200px;
}

.delete-button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  font-size: 24px;
}
</style>