mirror of
https://github.com/enso-org/enso.git
synced 2024-12-22 16:41:45 +03:00
a3873b9565
Closes #8751 Closes #8752 - The numeric widget allows the use of the input field after clicking with LMB - Slider is only visible if the engine provides widget configuration with set limits (see below for testing) - Setting value outside limits is possible - For now, to distinguish drag from click, we compare relative mouse movement on the mouse up event. We might benefit from using a timer instead, but let’s see how good it is now. - Changes after demo - No more input validation. You can enter literally anything and it would be accepted. - Updates debouncing – the code is updated on defocus or when slider dragging has finished. https://github.com/enso-org/enso/assets/6566674/b3580083-c678-4734-881c-97f8ac56176b
40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, shallowRef } from 'vue'
|
|
|
|
import { usePointer } from '@/composables/events'
|
|
import { useNavigator } from '@/composables/navigator'
|
|
import type { Vec2 } from '@/util/data/vec2'
|
|
|
|
const viewportNode = ref<HTMLElement>()
|
|
|
|
const navigator = useNavigator(viewportNode)
|
|
|
|
const selectionAnchor = shallowRef<Vec2>()
|
|
|
|
const selection = usePointer((_, __, eventType) => {
|
|
if (selection.dragging && selectionAnchor.value == null) {
|
|
selectionAnchor.value = navigator.sceneMousePos?.copy()
|
|
} else if (eventType === 'stop') {
|
|
selectionAnchor.value = undefined
|
|
}
|
|
})
|
|
|
|
const scaledMousePos = computed(() => navigator.sceneMousePos?.scale(navigator.scale))
|
|
const scaledSelectionAnchor = computed(() => selectionAnchor.value?.scale(navigator.scale))
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="viewportNode"
|
|
style="cursor: none; height: 100%"
|
|
v-on.="navigator.events"
|
|
v-on..="selection.events"
|
|
>
|
|
<slot
|
|
:scaledMousePos="scaledMousePos"
|
|
:scaledSelectionAnchor="scaledSelectionAnchor"
|
|
:navigator="navigator"
|
|
></slot>
|
|
</div>
|
|
</template>
|