PyCS/webui/src/components/media/annotation-box.vue

<template>
  <div class="annotation-box"
       :style="style"
       :class="{draggable: draggable}"
       @mousedown.prevent="click" @touchstart.prevent="click">
    <template v-if="draggable">
      <div class="nw" @mousedown.prevent.stop="resize('nw')" @touchstart.prevent.stop="resize('nw')"/>
      <div class="nn" @mousedown.prevent.stop="resize('nn')" @touchstart.prevent.stop="resize('nn')"/>
      <div class="ne" @mousedown.prevent.stop="resize('ne')" @touchstart.prevent.stop="resize('ne')"/>
      <div class="ww" @mousedown.prevent.stop="resize('ww')" @touchstart.prevent.stop="resize('ww')"/>
      <div class="ee" @mousedown.prevent.stop="resize('ee')" @touchstart.prevent.stop="resize('ee')"/>
      <div class="sw" @mousedown.prevent.stop="resize('sw')" @touchstart.prevent.stop="resize('sw')"/>
      <div class="ss" @mousedown.prevent.stop="resize('ss')" @touchstart.prevent.stop="resize('ss')"/>
      <div class="se" @mousedown.prevent.stop="resize('se')" @touchstart.prevent.stop="resize('se')"/>
    </template>

    <div v-if="labelName" class="label">
      {{ labelName }}
    </div>
  </div>
</template>

<script>
export default {
  name: "annotation-box",
  props: [
    'box',
    'position',
    'draggable',
    'deletable',
    'taggable',
    'confirmable',
    'zoomable',
    'croppable',
    'labels',
    'shine'
  ],
  computed: {
    labelName: function () {
      if (!this.box || !this.box.label)
        return false;

      for (let label of this.labels) {
        if (label.identifier === this.box.label) {
          return label.name;
        }
      }

      return 'unknown';
    },
    style: function () {
      let color = '255, 255, 255';
      if (this.box) {
        switch (this.box.origin) {
          case 'user':
            color = '255, 0, 0';
            break;
          case 'pipeline':
            color = '0, 0, 255';
            break;
        }
      }

      return {
        backgroundColor: `rgba(${color}, ${this.shine ? 0.6 : 0.3})`,
        borderColor: `rgba(${color}, ${this.shine ? 0.8 : 0.4})`,
        top: this.position.y * 100 + '%',
        left: this.position.x * 100 + '%',
        width: this.position.w * 100 + '%',
        height: this.position.h * 100 + '%'
      }
    }
  },
  methods: {
    click: function (event) {
      if (this.deletable) {
        // TODO then / error
        this.$root.socket.post(`/results/${this.box.identifier}/remove`, {remove: true});
        event.stopPropagation();
      }
      if (this.draggable) {
        // TODO then / error
        this.$emit('move', event, this.position, this.update);
        event.stopPropagation();
      }
      if (this.taggable) {
        // TODO then / error
        this.$root.socket.post(`/results/${this.box.identifier}/label`, {
          label: this.taggable.identifier
        });
        event.stopPropagation();
      }
      if (this.confirmable) {
        // TODO then / error
        this.$root.socket.post(`/results/${this.box.identifier}/confirm`, {
          confirm: true
        });
        event.stopPropagation();
      }
      if (this.zoomable) {
        this.$emit('zoom', this.position);
        event.stopPropagation();
      }
      if (this.croppable) {
        this.$emit('crop', this.box);
        event.stopPropagation();
      }
    },
    resize: function (mode) {
      this.$emit('resize', mode, this.position, this.update);
    },
    update: function (value) {
      this.$root.socket.post(`/results/${this.box.identifier}/data`, {
        data: value
      });
    }
  }
}
</script>

<style scoped>
.annotation-box {
  position: absolute;
  border: 1px solid transparent;
}

.label {
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);

  font-size: 80%;
  color: whitesmoke;
  text-shadow: 0 0 1px #000000;
}

.nw {
  position: absolute;
  top: -0.3rem;
  left: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  cursor: nwse-resize;
  /* background-color: blue; */
}

.nn {
  position: absolute;
  top: -0.3rem;
  left: 0.3rem;
  right: 0;
  height: 0.6rem;
  cursor: ns-resize;
  /* background-color: orangered; */
}

.ne {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  cursor: nesw-resize;
  /* background-color: cadetblue; */
}

.ww {
  position: absolute;
  top: 0.3rem;
  left: -0.3rem;
  width: 0.6rem;
  bottom: 0.3rem;
  cursor: ew-resize;
  /* background-color: fuchsia; */
}

.ee {
  position: absolute;
  top: 0.3rem;
  right: -0.3rem;
  width: 0.6rem;
  bottom: 0.3rem;
  cursor: ew-resize;
  /* background-color: midnightblue; */
}

.sw {
  position: absolute;
  bottom: -0.3rem;
  left: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  cursor: nesw-resize;
  /* background-color: aqua; */
}

.ss {
  position: absolute;
  bottom: -0.3rem;
  left: 0.3rem;
  right: 0.3rem;
  height: 0.6rem;
  cursor: ns-resize;
  /* background-color: gold; */
}

.se {
  position: absolute;
  bottom: -0.3rem;
  right: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  cursor: nwse-resize;
  /* background-color: brown; */
}
</style>