<template> <div id="vizContainer" ref="el" :class="{ fullscreen: isFullscreen }" data-testid="visualizer" @dblclick="toggleFullscreen" > <CloseModalBtn class="close" @click="hide"/> </div> </template> <script lang="ts" setup> import { defineAsyncComponent, onMounted, ref } from 'vue' import initVisualizer from '@/utils/visualizer' import { eventBus } from '@/utils' const CloseModalBtn = defineAsyncComponent(() => import('@/components/ui/BtnCloseModal.vue')) const el = ref<HTMLElement>() const isFullscreen = ref(false) const toggleFullscreen = () => { isFullscreen.value ? document.exitFullscreen() : el.value?.requestFullscreen() isFullscreen.value = !isFullscreen.value } const hide = () => eventBus.emit('TOGGLE_VISUALIZER') onMounted(() => { try { initVisualizer(el.value!) } catch (e) { // in e.g., DOM testing, the call will fail due to the lack of proper API support } }) </script> <style lang="scss" scoped> #vizContainer { position: relative; &.fullscreen { // :fullscreen pseudo support is kind of buggy, so we use a class instead. background: var(--color-bg-primary); .close { opacity: 0 !important; } } .close { opacity: 0; } &:hover { .close { opacity: 1; } } } </style>