<template>
    <div ref="contentRef" class="content"></div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from "vue";
    import { WebGLCanvas, EventEmitter } from "@ray-lab/renderer-webgl";

    const contentRef = ref<HTMLDivElement>();
    const canvasEle = document.createElement("canvas");

    onMounted(() => {
        const c = new WebGLCanvas({
            canvas: canvasEle,
            container: contentRef.value,
            autoResize: true,
            width: 800,
            height: 600
        });
        // c.on("resize", () => { console.log(c.canvas.width, c.canvas.height) });
        if (contentRef.value) {
            contentRef.value.appendChild(canvasEle);
        }
    })
</script>

<style>

    html, body {
        margin: 0;
    }

    div.content {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>