Mobile Gesture Recognition

To install all solutions, please refer to Solutions Installation

Listens for special gesture operations on mobile devices and converts them to PC operations (click, double-click, drag, two-finger swipe/mouse wheel, two-finger click/right-click events, etc.)

Install this hook separately

npm

npm install @havue/use-gesture-2-mouse --save

yarn

yarn add @havue/use-gesture-2-mouse

pnpm

pnpm install @havue/use-gesture-2-mouse

Usage

Import:

import { useGestrue2Mouse } from 'havue'
// or
import { useGestrue2Mouse } from '@havue/hooks'
// or
import { useGestrue2Mouse } from '@havue/gesture-2-mouse'

Example

The following area is an interactive zone. When operating, the page will display the current operation type.

Click to view code

template

<template>
  <div ref="operateBoxRef" class="mouse-pass-through">
    {{ stateText }}
    <div class="point" :style="pointStyle"></div>
  </div>
</template>

script

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue'
// import { useGestrue2Mouse } from '@havue/use-gesture-2-mouse'
import { useGestrue2Mouse } from '@havue/hooks'

const stateText = ref<string>('')

const originRect = ref({
  width: 1920,
  height: 1080
})

const currentPoint = reactive({
  x: 0,
  y: 0
})

const pointStyle = computed(() => {
  return {
    top: `${(100 * currentPoint.y) / originRect.value.height}%`,
    left: `${(100 * currentPoint.x) / originRect.value.width}%`
  }
})

const { operateBoxRef } = useGestrue2Mouse(undefined, {
  onMouseEvent: (e, button) => {
    Object.assign(currentPoint, {
      x: e.x,
      y: e.y
    })

    if (button) {
      stateText.value = button || 'No key is pressed'
    }

    console.log(stateText.value, e)
  },
  onMouseWheel(e, deltaY) {
    Object.assign(currentPoint, {
      x: e.x,
      y: e.y
    })
    nextTick(() => {
      stateText.value = `wheel:${deltaY}`
    })

    console.log(stateText.value, e)
  },
  TargetRealSize: originRect
})
</script>

style

<style lang="scss" scoped>
.mouse-pass-through {
  position: relative;
  width: 480px;
  height: 270px;
  overflow: hidden;
  background-color: rgb(41 109 86);

  .point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

useGestrue2Mouse Parameters

Function name

The function is named useGestrue2Mouse (Gesture spelled as Gestrue), matching the package export.

Parameter	Description	Type	Default
target	Target element. If not provided, the function returns operateBoxRef for you to bind to the template	MaybeRef<HTMLElement | undefined>	—
options	Configuration	Partial<UseGestrue2MouseEventOptions>	—
options?.TargetRealSize	Real-world dimensions of target area (not DOM size)	MaybeRef<UseGestrue2MouseTargetRealSizeType>	—
options?.onMouseEvent	Mouse click handler	(e, button?) => void	—
options?.onMouseWheel	Mouse wheel handler	(e, deltaY) => void	—
options?.throttle	Throttle options (lodash throttle)	{ wait: number; leading?: boolean; trailing?: boolean }	—

Returns: { operateBoxRef: Ref<HTMLElement | undefined> }. When target is omitted, bind operateBoxRef to your template element as the interaction zone.

Type Definitions

Click to view code

export type UseGestrue2MouseTargetRealSizeType = {
  width: number
  height: number
}

export type UseGestrue2MouseTargetPositionType = {
  elX: number
  elY: number
  x: number
  y: number
}

export type UseGestrue2MouseMouseButtonType = 'left' | 'right' | 'middle'

export type UseGestrue2MouseEventOptions = {
  onMouseEvent?: (e: UseGestrue2MouseTargetPositionType, button?: UseGestrue2MouseMouseButtonType) => void
  onMouseWheel?: (e: UseGestrue2MouseTargetPositionType, deltaY: number) => void
  TargetRealSize?: MaybeRef<UseGestrue2MouseTargetRealSizeType>
  throttle?: {
    wait: number
    leading?: boolean
    trailing?: boolean
  }
}