vueuse / gesture Goto Github PK

Hello,

I am using useDrag.
So far only been testing on desktop.

I notice quite frequently that if i lift the mouse button (well trackpad non pressed) the drag continues to function.
Further to that this can happen on multiple drag elements where if they get in this state moving pointer from one to another each will still continue their drag without the pointer being down.

I log the state event.down and state.down, and the down is still true in the state so even tho I am handling a "cancel" bassed on state.down it doesnt work because its the down that is getting stuck

console.log('pan-item drag', state.event.type, state.down, state);

result:
pan-item drag pointermove true {hovering: false, scrolling: false, wheeling: false, dragging: true, moving: false, …}

Other info: I have the axis locked to 'x'

Hi I follow the doc using drag configuration like below

useGesture(
  {
    onDrag: (ctx) => handleDrag(ctx),
    onDragEnd: (ctx) => handleDragEnd(ctx),
  },
  {
    domTarget: sheetRef,
    drag: {
      filterTaps: true,
      preventWindowScrollY: true,
      useTouch: true,
      delay: 1000, // test
    },
  }
);

however, it seems to not apply at all. I test the delay and preventWindowScrollY it still does not work. I follow the doc here

Am I missing anything?

VS Code is complaining about a "wrong" configuration when using this package in a TypeScript project:

Could not find a declaration file for module '@vueuse/gesture'. '[…]/node_modules/.pnpm/@vueuse[email protected][email protected]/node_modules/@vueuse/gesture/dist/index.mjs' implicitly has an 'any' type.
There are types at '[…]/node_modules/@vueuse/gesture/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@vueuse/gesture' library may need to update its package.json or typings.ts(7016)

It can be easily fixed by adding a reference to the types to the exports section:

"exports": {
  ".": {
    "import": "./dist/index.mjs",
    "require": "./dist/index.cjs",
    "types": "./dist/index.d.ts"
  }
},

The Gesture Options page says that the options must be structured differently when using directives.

However, the link for the directive documentation results in a 404.

It seems that none of the options provided via :drag-options have any effect, so without this documentation it's a challenge to determine how to configure options at all.

Tried several ways of defining pinch bounds but none seem to work.

usePinch(pinchHandler, {
  domTarget: rootNode,
  eventOptions: {
    passive: false,
    distanceBounds: {max: 1000, min: -900}
  },
})

Is this supposed to constrain the value inside of da ?

I'm looking for a "drag" directive or something similar, and stumbled here.
https://gesture.vueuse.org/use-drag.html

Is it possible to use this with just a plain old Vue 2 + options API project?

I try to make an action sheet using vueuse gestur. On the desktop it worked fine but on the touch screen, the drag does not trigger.

pls see in demo
here is my source code

Request: Open discussions to talk without open issues

After hours I cant manage to work with this lib. I dont know why and I dont understand how works properly. This lib is awesome but pure documentation, it need more examples.

I think drag directive have problem and it didnt work at all. Maybe I will give a try another time.
I use useGesture but didnt work.

<template>
  <div ref="container" class="h-screen flex flex-col justify-center items-center space-y-10">
    <span v-for="n in 3" :key="n" class="flex justify-center items-center size-12 bg-emerald-600 rounded text-lg font-bold select-none cursor-grab">{{ n }}</span>
  </div>
</template>

<script setup>
import { useSpring, useMotionProperties } from '@vueuse/motion'
import { useDrag } from '@vueuse/gesture'
import clamp from 'lodash/clamp'

const container = ref()
const boxes = computed(() => Array.from(container.value.children).map((box) => ({
  element: box,
  y: box.getBoundingClientRect().y,
  x: box.getBoundingClientRect().x,
})))

onMounted(() => {
  boxes.value.map((box, index) => {
    const { motionProperties } = useMotionProperties(box.element, {
      cursor: 'grab',
      x: 0,
      y: 0
    })

    const { set } = useSpring(motionProperties, {
      damping: 50,
      stiffness: 1000,
    })

    useDrag(
      ({ movement: [x, y], dragging }) => {
        console.log(x, y, dragging);
        if (!dragging) {
          set({ y: 0, cursor: 'grab' })
          
          return
        }

        const currentY = clamp(Math.round((index * 100 + y) / 100), 0, child.length - 1)
        console.log(currentY)
        set({ cursor: 'grabbing', currentY })
      },
      { domTarget: box.element }
    )
  })
})
</script>

I use the code from the demo and I have error mixerFactory is not a function

hi,

would be great if you could provide a js version of the multigesture ts version. I couldn‘t get the ts version to work.

thank you.

would be great if we could resize a Dom element by dragging on any side of the rendered Dom element

spring effect is pretty good, however, sometime I don't need it, so how to disabled it?

I'm trying to reproduce a minimal drag example, where the user can drag a component somewhere, and it stays there. Problem is: the first time the user drags the component, it stays there, but as soon as he tries to re-drag the component, it goes back to the (0,0) position and begins the next drag from there.

My code is the following:

<template>
  <div ref="widgetRef" class="widget">
    <span>Widget</span>
  </div>
</template>

<script setup lang="ts">
import { useGesture } from '@vueuse/gesture'
import { type PermissiveMotionProperties, useMotionProperties, useSpring } from '@vueuse/motion'
import { ref } from 'vue'

const widgetRef = ref()

const { motionProperties } = useMotionProperties(widgetRef, {
  cursor: 'grab',
})
const { set } = useSpring(motionProperties as Partial<PermissiveMotionProperties>)

useGesture(
  {
    onDrag: ({ movement: [x, y] }) => set({ x, y, scale: 2 }),
    onDragEnd: () => set({ scale: 1 }),
  },
  {
    domTarget: widgetRef,
  }
)
</script>

<style scoped>
.widget {
  padding: 10px;
  margin: 5px;
  background-color: antiquewhite;
}
</style>

I would like to be able to access the original domElement that the handler has been attached to inside gesture callbacks.

The use case would be (simplified code):

<script setup>
// Quick drag-to-scroll implementation
function handleDrag({ domElement, delta: [x, y] }) {
  domElement.scrollBy(-x, -y)
}
</script>

<template>
  <div v-drag="handleDrag">
    <div>child</div>
    <div>child</div>
  </div>
</template>

I realize I can work around this with an additional ref or even with a custom directive (as I did), my point here being reducing boilerplate for simpler ad-hoc code.

I was wondering if it's possible to limit the drag to horizontal?

I'm trying to make a swipe gallery with multiple images:

  <div class="gallery">
    <div ref="anchor" class="gallery-images" :style="{width: `${screenWidth * 6}px`}">
      <img v-for="image in images" :key="image" :src="require(`@/assets/images/${image}`)" :style="{width: `${screenWidth}px`}">
    </div>
  </div>

JS:

  setup() {
    // TODO dynamically change
    const screenWidth = ref(375);

    const anchor = ref();

    const { motionProperties } = useMotionProperties(anchor, {
      cursor: 'grab',
      x: 0,
      y: 0,
    });

    const { set } = useSpring(motionProperties);

    const dragHandler = ({ movement: [x], dragging }) => {
      if (!dragging) {
        set({ x: 0, y: 0, cursor: 'grab' });
        return;
      }

      set({ x, y: 0, cursor: 'grabbing' });
    };

    useDrag(dragHandler, {
      domTarget: anchor,
    });

    return {
      anchor,
      screenWidth,
    };
  },

CSS

.gallery {
  @apply overflow-x-hidden;
}
.gallery-images {
  @apply flex flex-row justify-start items-start;
}

It works fine on mobile but on desktop, I can see it changing the cursor and attempting to change the translateZ (it changes for 1ms and changes back to zero), from there it just stays zero and on desktop it wont drag.

If I use incognito device emulation and make the device very large, same as regular desktop, it DOES work, so maybe it has to do with gestures / mouse not being 1:1 consistent?

When reading the docs I'm continuously distracted by the (seemly random) bold texts all over the places. I feel it would be better to remove most of them, and only leaves the few really important ones.

Related: vueuse/motion#32

I use if/else on the domTarget and when it toggled, the gesture event stopped working. Is there a way to make it reactive? I try to call useGesture() again in watcher but it still does not solve my issue

When I use onDrag like following:

useGesture({
  onDrag: dragHandler
}, {
  domTarget: image
})

with following handler:

const dragHandler = ({ movement: [x, y], dragging }) => {
  if(dragging) {
    console.log("moving")
    console.log({ x, y })
    imageConfiguration.value.top += y
    imageConfiguration.value.left += x
  }
}

the dragging event fires only about 2 to 4 times and doesnt continue.

For example when i use standart eventListener to the same element, the event fires for each pixel that I dragged. But here it completely lags and I cant use it.

Can someone help me with what am I doing wrong? Or do I misunderstand the usage?

For the whole picture, I use then the imageConfiguration to create style for the element I want to drag ->

const imageStyle = computed(() => {
  return {
    'top': imageConfiguration.value.top.toString() + 'px',
    'left': imageConfiguration.value.left.toString() + 'px',
  }
})

I have an app that uses drag to adjust the volume of oscillators. I use drag handler to get the x and y difference. It works fine on desktop, but I can't prevent my ipad safari from scrolling.
Here are my directives

  v-drag="dragHandler",
  :drag-options="dragOptions",

the options

const dragOptions = reactive({
  filterTaps: true,
  preventWindowScrollY: true,
  delay: 0,
  eventOptions: {
    passive: false
  }
})

the handler

const dragHandler = (dragEvent) => {
  dragEvent.event.preventDefault()
...

But still it scrolls vertically when a cell is dragged.

The actual component in the repo https://github.com/davay42/pitch-table/blob/master/src/components/table/cell.vue

How to use the vueuse/gesture component in Nuxt3?