68 lines
1.4 KiB
JavaScript
68 lines
1.4 KiB
JavaScript
import { ref } from 'vue';
|
|
|
|
const resolveBool = (valueOrGetterOrRef, fallback = false) => {
|
|
if (typeof valueOrGetterOrRef === 'function') {
|
|
return valueOrGetterOrRef();
|
|
}
|
|
if (valueOrGetterOrRef && typeof valueOrGetterOrRef === 'object' && 'value' in valueOrGetterOrRef) {
|
|
return valueOrGetterOrRef.value;
|
|
}
|
|
if (valueOrGetterOrRef === undefined) {
|
|
return fallback;
|
|
}
|
|
return Boolean(valueOrGetterOrRef);
|
|
};
|
|
|
|
export function useDocumentTreeContextMenu(options = {}) {
|
|
const { enabled = true } = options;
|
|
|
|
const contextMenu = ref({
|
|
visible: false,
|
|
x: 0,
|
|
y: 0,
|
|
data: null
|
|
});
|
|
|
|
const closeContextMenu = () => {
|
|
if (!contextMenu.value.visible) {
|
|
return;
|
|
}
|
|
contextMenu.value.visible = false;
|
|
};
|
|
|
|
const openContextMenu = (event, data) => {
|
|
if (!resolveBool(enabled, true)) {
|
|
return false;
|
|
}
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const menuWidth = 150;
|
|
const menuHeight = 120;
|
|
let x = event.clientX;
|
|
let y = event.clientY;
|
|
if (x + menuWidth > window.innerWidth) {
|
|
x = window.innerWidth - menuWidth - 8;
|
|
}
|
|
if (y + menuHeight > window.innerHeight) {
|
|
y = window.innerHeight - menuHeight - 8;
|
|
}
|
|
|
|
contextMenu.value = {
|
|
visible: true,
|
|
x,
|
|
y,
|
|
data
|
|
};
|
|
|
|
return true;
|
|
};
|
|
|
|
return {
|
|
contextMenu,
|
|
openContextMenu,
|
|
closeContextMenu
|
|
};
|
|
}
|