mirror of
https://github.com/enso-org/enso.git
synced 2024-12-23 04:43:26 +03:00
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 '@/util/events'
|
||
|
import { useNavigator } from '@/util/navigator'
|
||
|
import type { Vec2 } from '@/util/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>
|