<template>
    <div>
        <div id="netlist" :ref="el => netlist = el">
            <svg></svg>
        </div>
    </div>
</template>

<script setup>
import { registerWheelEvent } from '@/hook/wheel-event';
import { defineComponent, onMounted, ref, computed } from 'vue';

defineComponent({ name: 'netlist-render' });

const netlist = ref(null);

onMounted(async () => {
    const netlistElement = netlist.value;
    const wheelHandler = registerWheelEvent(netlistElement);
    netlistElement.addEventListener('wheel', event => {        
        wheelHandler(event);
    });
});

</script>

<style>
#netlist {
    height: 100vh;
    width: calc(100vw - var(--right-nav-width));
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--animation-5s);
}

.grab {
    /* TODO: finish */
    /* cursor: grab; */
}

.pointer {
    cursor: pointer;
}

.grabbing {
    /* TODO: finish */
    /* cursor: grabbing; */
}

.port-caption {
    user-select: none;
}

.connection-line {
    cursor: pointer;
    transition: var(--animation-7s);
}

</style>