advent22/ui/src/components/DoorMapEditor.vue

<template>
  <div ref="container">
    <img ref="background" src="@/assets/adventskalender.jpg" />
    <RectPad id="rectpad" />
  </div>
</template>

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

@Options({
  components: {
    RectPad,
  },
})
export default class CalendarImage extends Vue {
  private resize_observer?: ResizeObserver;

  declare $refs: {
    container: HTMLDivElement;
    background: HTMLImageElement;
  };

  private on_resize() {
    this.$refs.container.style.height =
      this.$refs.background.offsetHeight + "px";
  }

  public mounted() {
    this.resize_observer = new ResizeObserver(this.on_resize);
    this.resize_observer.observe(this.$refs.background);
  }

  public unmounted() {
    if (this.resize_observer instanceof ResizeObserver) {
      this.resize_observer.disconnect();
      delete this.resize_observer;
    }
  }
}
</script>

<style lang="scss" scoped>
div {
  position: relative;
  user-select: none;

  img {
    position: absolute;
    z-index: 1;
    width: 100%;
  }

  #rectpad {
    position: absolute;
    z-index: 2;
  }
}
</style>