Merge pull request #358 from starker-xp/fix-context-menu-on-node

fix(ContextMenu): Context menu not working on node
newcat · Jan 13, 2024 · 316b310 · 316b310
2 parents 8a82bcf + 8b35e1a
commit 316b310
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/packages/renderer-vue/src/commands/hotkeyHandler.ts b/packages/renderer-vue/src/commands/hotkeyHandler.ts
@@ -1,6 +1,5 @@
 import { ref } from "vue";
-
-const INPUT_ELEMENT_TAGS = ["INPUT", "TEXTAREA", "SELECT"];
+import { isInputElement } from "../utility";
 
 export function useHotkeyHandler(executeCommand: (name: string) => void) {
     const pressedKeys = ref<string[]>([]);
@@ -11,7 +10,7 @@ export function useHotkeyHandler(executeCommand: (name: string) => void) {
             pressedKeys.value.push(ev.key);
         }
 
-        if (INPUT_ELEMENT_TAGS.includes(document.activeElement?.tagName ?? "")) {
+        if (document.activeElement && isInputElement(document.activeElement)) {
             return;
         }
 

diff --git a/packages/renderer-vue/src/editor/Editor.vue b/packages/renderer-vue/src/editor/Editor.vue
@@ -13,7 +13,7 @@
         @wheel.self="panZoom.onMouseWheel"
         @keydown="keyDown"
         @keyup="keyUp"
-        @contextmenu.self.prevent="contextMenu.open"
+        @contextmenu="contextMenu.open"
     >
         <slot name="background">
             <Background />

diff --git a/packages/renderer-vue/src/editor/contextMenu.ts b/packages/renderer-vue/src/editor/contextMenu.ts
@@ -2,7 +2,7 @@ import { Ref, computed, ref, reactive } from "vue";
 import { AbstractNode } from "@baklavajs/core";
 import { IMenuItem } from "../contextmenu";
 import { IBaklavaViewModel } from "../viewModel";
-import { useNodeCategories, useTransform } from "../utility";
+import { isInputElement, useNodeCategories, useTransform } from "../utility";
 
 export function useContextMenu(viewModel: Ref<IBaklavaViewModel>) {
     const show = ref(false);
@@ -63,9 +63,25 @@ export function useContextMenu(viewModel: Ref<IBaklavaViewModel>) {
     });
 
     function open(ev: MouseEvent) {
+        if (ev.target instanceof Element && isInputElement(ev.target)) {
+            return;
+        }
+
+        ev.preventDefault();
         show.value = true;
-        x.value = ev.offsetX;
-        y.value = ev.offsetY;
+        const target = ev.target as Element;
+        const element = target.closest(".baklava-node");
+        if (!element) {
+            x.value = ev.offsetX;
+            y.value = ev.offsetY;
+            return;
+        }
+        const bounding = target.getBoundingClientRect();
+        const editor = document.querySelector(".baklava-editor") as Element;
+
+        const editorBounding = editor.getBoundingClientRect();
+        x.value = bounding.x + ev.offsetX - editorBounding.x;
+        y.value = bounding.y + ev.offsetY - editorBounding.y;
     }
 
     function onClick(value: string) {

diff --git a/packages/renderer-vue/src/utility/index.ts b/packages/renderer-vue/src/utility/index.ts
@@ -1,3 +1,4 @@
+export * from "./isInputElements";
 export * from "./nodePosition";
 export * from "./useDragMove";
 export * from "./useGraph";

diff --git a/packages/renderer-vue/src/utility/isInputElements.ts b/packages/renderer-vue/src/utility/isInputElements.ts
@@ -0,0 +1,5 @@
+const INPUT_ELEMENT_TAGS = ["INPUT", "TEXTAREA", "SELECT"];
+
+export function isInputElement(el: Element) {
+    return INPUT_ELEMENT_TAGS.includes(el.tagName);
+}