PPTist/src/views/Editor/Canvas/MouseSelection.vue

<template>
  <div :class="`mouse-selection quadrant-${quadrant}`"
    :style="{
      top: top + 'px',
      left: left + 'px',
      width: width + 'px',
      height: height + 'px',
    }"
  ></div>
</template>

<script lang="ts">
export default {
  name: 'mouse-selection',
  props: {
    top: {
      type: Number,
      required: true,
    },
    left: {
      type: Number,
      required: true,
    },
    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    quadrant: {
      type: Number,
      required: true,
      validator(value: number) {
        return [1, 2, 3, 4].includes(value)
      },
    },
  }
}
</script>

<style lang="scss" scoped>
.mouse-selection {
  position: absolute;
  background-color: rgba($themeColor, 0.1);
  border: 1px solid $themeColor;
  z-index: 200;

  &.quadrant-1 {
    transform-origin: 0 0;
    transform: rotate(180deg);
  }
  &.quadrant-2 {
    transform-origin: 50% 0;
    transform: rotate(180deg);
  }
  &.quadrant-3 {
    transform-origin: 0 50%;
    transform: rotate(180deg);
  }
  &.quadrant-4 {
    transform-origin: 0 0;
    transform: rotate(0deg);
  }
}
</style>