Is there a way to use the dragging instead of scrolling to move around board/document.

[xNarkon]

Hi!

I looked inside and saw that you are using another of your libraries for this component called Gesto. You only react to the "touch" event, skip "mouse". And this causes a problem, I cannot do something like the Miro move tool. Sometimes, this movement is much more convenient than using a scroll.

I would like to enable document navigation by dragging the mouse on the board / document.

Would you consider introducing such an option? Otherwise, I will probably have to do my version via fork :( and I believe many people could use it!

[ulissepress]

same here, I would like to have a way to pan the canvas without using the scrollbars (as @xNarkon said in mobile you can pan using 2 fingers gesture). @daybrush any idea on how to get this ?

[AustinHatem]

would be great

[ulissepress]

In FIGMA, for example, you can pan clicking the mouse wheel and then moving the mouse...

[daybrush]

@ulissepress @AustinHatem @xNarkon

I'll add this feature soon. Thank you :)

[daybrush]

@ulissepress @AustinHatem @xNarkon

InfiniteViewer's new version is released. Update and Use useMouseDrag prop. (true / false)

[ulissepress]

@daybrush great! I tested the new property (useMouseDrag) and is working fine (you can pan the infinite viewer canvas with the mouse)... BUT there is a bug / side effect: when I'm dragging an in item in my diagram (via Moveable), the infinite viewer canvas is moving as well...

[ulissepress]

To be clear, for example when I drag the block 'CCC' the infinite viewer canvas is moving as well... This, instead, is not happening if I resize / rotate the element.

[daybrush]

@ulissepress

I'll add stopPropagation function to moveable.

[ulissepress]

I added the stopPropagation property to <Moveable> and set it to TRUE... but the issue is still there (when dragging an item, the infinite viewer is moving as well).

I anyway solved the issue using the SHIFT key to enable the infinite viewer useMouseDrag:

const shiftPressed = useKeyModifier('Shift')     // From @VueUse/core
...
 <VueInfiniteViewer 
            :useMouseDrag   = "shiftPressed"
            :useWheelScroll = "true"
            ... />

<Moveable 
           :stopPropagation = "true"
            ... />

Here you can see a live demo: https://ec7o9v.sse.codesandbox.io/

[daybrush]

@ulissepress

• lit-moveable 0.11.2
• moveable 0.34.2
• preact-moveable 0.36.2
• react-compat-moveable 0.22.2
• react-moveable 0.37.2
• svelte-moveable 0.26.2
• vue-moveable 2.0.0-beta.30
• vue3-moveable 0.9.2
• ngx-moveable 0.31.2

moveable's new version is released.

Use stopPropagation prop.

[ulissepress]

Hi @daybrush I dit the updates and this solved the issue.

One small suggestion: in fact clicking and dragging the infinite viewer is ok unless.... you want to use the Selecto package. In this case clicking and dragging in the canvas area is used to select items.

My suggestion is to use a key modifier to enable the click-canvas to pan, like shift or better ctrl key, like is already to activate infinite viewer zoom using mouse wheel together with ctrl key (useWheelScroll = "true").

<VueInfiniteViewer 
            :useMouseDrag = "true"
            mouseDragKeyModifier ="ctrl".  // default, can be also 'shift' or 'alt'
            ... />

[daybrush]

@ulissepress

sorry. As much as possible, I try not to control the key internally. It is recommended to control through a hook and reactive state using a key controller as shown below.

https://codesandbox.io/s/laughing-danny-p8xd4s

[d2461379109]

此 Can you turn off the sliding acceleration? useMouseDrag

[d2461379109]

@daybrush

[daybrush]

@d2461379109

okay. i"ll add it soon.