diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue index 935cdfe8..58f9f9f1 100644 --- a/src/components/WidgetHugger.vue +++ b/src/components/WidgetHugger.vue @@ -100,7 +100,7 @@ const initialWidgetPos = ref(props.widget.position) const initialWidgetSize = ref(props.widget.size) const handleDragStart = (event: MouseEvent): void => { - if (!allowMoving.value || isResizing.value || event.button !== 0 || !outerWidgetRef.value) return + if (!allowMoving.value || isResizing.value || !outerWidgetRef.value) return draggingWidget.value = true initialMousePos.value = { x: event.clientX, y: event.clientY } initialWidgetPos.value = widget.value.position @@ -234,6 +234,15 @@ onMounted(async () => { document.addEventListener('mouseup', handleEnd) }) +// Change cursor when moving is allowed or disallowed, preventing the cursor to be a grab on exit of edit-mode +watch(allowMoving, (isAllowing, wasAllowing) => { + if (wasAllowing && !isAllowing) { + outerWidgetRef.value?.style.setProperty('cursor', 'default') + } else if (!wasAllowing && isAllowing) { + outerWidgetRef.value?.style.setProperty('cursor', 'grab') + } +}) + const outerBounds = useElementBounding(outerWidgetRef) const makeWidgetRespectWalls = (): void => {