<template>
  <text
    :x="rectangle.left + 0.5 * rectangle.width"
    :y="rectangle.top + 0.5 * rectangle.height"
    text-anchor="middle"
    dominant-baseline="middle"
  >
    {{ text }}
  </text>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { Rectangle } from "./rectangles";

@Options({
  props: {
    rectangle: Rectangle,
    text: String,
  },
})
export default class RectText extends Vue {
  private rectangle!: Rectangle;
  private text!: string;
}
</script>

<style lang="scss" scoped>
text {
  fill: red;

  font-weight: bold;
  font-size: 40px;
  font-stretch: condensed;
}
</style>