<template>
  <div class="zoompan" ref="root">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref, reactive} from "vue";
import createPanZoom, {PanZoom} from "panzoom";

export default defineComponent({
  name: "ZoomPan",
  setup() {
    const root = ref(null);
    const bbox = reactive({
      x: undefined,
      y: undefined
    });

    onMounted(async () => {
      const element = root.value as unknown as HTMLDivElement;



    });
    return {
      root,
      bbox
    };
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.zoompan {
}
</style>
