<template>
    <VerticalCursor></VerticalCursor>
    <TimeScale></TimeScale>
    
    <div class="vcd-render-wrapper" >
        <div style="height: var(--time-scale-height);"></div>
    </div>
</template>


<script>
import { reactive, ref } from 'vue';
import { emitter, globalLookup, globalSetting } from '@/hook/global';

import VerticalCursor from '@/components/render/cursor.vue';
import TimeScale from '@/components/render/time-scale.vue';

export default {
    name: 'main-render',
    components: {
        VerticalCursor,
        TimeScale
    },
    setup() {
        const cursorX = ref(0);

        return {
            cursorX
        }
    }
}

</script>

<style>
.vcd-render-wrapper {
    height: 98vh;
    width: 98vw;
    cursor: crosshair;
    padding: 10px;

}

.render-canvas {
    
}

</style>