advent22/ui/src/components/rects/RectText.vue

<template>
  <text
    :x="Math.round(parent_aspect_ratio * rect_middle.x)"
    :y="Math.round(rect_middle.y)"
    :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
    text-anchor="middle"
    dominant-baseline="middle"
  >
    {{ text }}
  </text>
</template>

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

@Options({
  props: {
    rectangle: Rectangle,
    text: String,
  },
})
export default class RectText extends Vue {
  private rectangle!: Rectangle;
  private text!: string;
  private refreshKey = 0;

  private get rect_middle(): Vector2D {
    return this.rectangle.origin.plus(this.rectangle.size.scale(0.5));
  }

  private get parent_aspect_ratio(): number {
    this.refreshKey; // read it just to force recompute on change

    if (!(this.$el instanceof Element) || this.$el.parentElement === null) {
      return 1;
    }

    const parent = this.$el.parentElement;
    return parent.clientWidth / parent.clientHeight;
  }

  public mounted() {
    this.refreshKey++;
  }
}
</script>

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

  font-weight: bold;
  font-size: 50px;
}
</style>