diff --git a/packages/renderer-vue/src/commands/hotkeyHandler.ts b/packages/renderer-vue/src/commands/hotkeyHandler.ts index 7c81f1d1..6c3b6612 100644 --- 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([]); @@ -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 index 5a93167d..586d2e85 100644 --- 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" > diff --git a/packages/renderer-vue/src/editor/contextMenu.ts b/packages/renderer-vue/src/editor/contextMenu.ts index 13a0ba6a..cbc4ebfb 100644 --- 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) { const show = ref(false); @@ -63,9 +63,25 @@ export function useContextMenu(viewModel: Ref) { }); 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 index c83a2bce..92974d83 100644 --- 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 new file mode 100644 index 00000000..f6aee199 --- /dev/null +++ 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); +}