gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 7 Projects Releases Packages 1 Wiki Activity Actions

feat: make use of useState to show and hide context menu rather than manually rendering and unrendering

Browse source
This commit is contained in:
SauceyRed 2025-07-30 16:26:06 +02:00
parent a146eb001a
commit 78d43ca0c8
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
7 changed files with 47 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app.vue
View file

@ -1,6 +1,7 @@
<template>
<div>
<Banner v-if="banner" />
<ContextMenu v-if="contextMenu && contextMenu.show" :cursor-x="contextMenu.cursorX" :cursor-y="contextMenu.cursorY" :menu-items="contextMenu.items" />
<NuxtPage :keepalive="true" />
</div>
</template>
@ -8,9 +9,12 @@
<script lang="ts" setup>
import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
import { render } from 'vue';
import type { ContextMenuInterface } from './types/interfaces';
const banner = useState("banner", () => false);
const contextMenu = useState<ContextMenuInterface>("contextMenu");
onMounted(() => {
document.removeEventListener("contextmenu", contextMenuHandler);
document.addEventListener("contextmenu", (e) => {
@ -18,11 +22,11 @@ onMounted(() => {
contextMenuHandler(e);
});
document.addEventListener("mousedown", (e) => {
if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
if (e.target instanceof HTMLElement && e.target.closest("#context-menu")) return;
console.log("click");
console.log("target:", e.target);
console.log(e.target instanceof HTMLDivElement);
removeContextMenu();
removeContextMenu(contextMenu);
if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
e.target.contentEditable = "false";
}