Error thrown when edge dragging

[alexconstantin]

Environments

• Framework name: Any
• Framework version: -
• Moveable Component version: 0.30.0
• Testable Address(optional): https://codesandbox.io/s/focused-minsky-914jyi

Description

When having resizable: true, edge: true and edgeDraggable: true, an error is thrown when I try to resize / drag from the edge of the object. How should we handle such cases?

Stack trace:
gesto.esm.js:433 Uncaught TypeError: Cannot read properties of undefined (reading 'prevClients')
at __proto.move (gesto.esm.js:433:29)
at setCustomDrag (moveable.esm.js:399:28)
at Object.dragControl (moveable.esm.js:5471:38)
at eval (moveable.esm.js:8248:35)
at Array.filter ()
at triggerAble (moveable.esm.js:8241:28)
at Object.eval [as listener] (moveable.esm.js:8349:22)
at eval (event-emitter.esm.js:87:12)
at Array.forEach ()
at __proto.emit (event-emitter.esm.js:86:28)
at Gesto._this.onDrag (gesto.esm.js:302:34)

Thank you!

[daybrush]

@alexconstantin

edge and edgeDraggable cannot be used together. use only one.

Or what features do you want?

[alexconstantin]

Hello, @daybrush!

I am trying to reproduce Canva's functionality on this. When I am using all possible values for renderDirections (N, S, E, W + corners), I am using edge = true and edgeDraggable = false, which works fine, because it allows me to resize using the whole line, not just the resize drag.
But in the case where I am only using N - S directions, I would like to allow resizing using the whole line, not just the handle (so edge=true, edgeDraggable = false), but for the E and W lines, I would like to keep edge = false, edgeDraggable = true. So basically if an edge has a resize handle, I would expect that I can resize using the whole line, but if it doesn't, I would still like to offer the dragging functionality.

Would it be possible to achieve something like this? Is there a way to pass an array of directions for edge/ edgeDraggable props?

Thank you!

[daybrush]

@alexconstantin

I'll add this feature to next release.

[daybrush]

@alexconstantin

• lit-moveable 0.8.0
• moveable 0.31.0
• preact-moveable 0.33.0
• react-compat-moveable 0.19.0
• react-moveable 0.34.0
• svelte-moveable 0.23.0
• vue-moveable 2.0.0-beta.22
• vue3-moveable 0.6.0
• ngx-moveable 0.28.0

moveable's new version is released.

use edge as array type.

edge={["n", "s"]}

[alexconstantin]

Works perfectly. Thank you so much!

[alexconstantin]

Hello @daybrush! This issue reappeared in 0.38.1. Please check this code and try dragging using the N or S edge:
https://codesandbox.io/s/cocky-dijkstra-hg86m0?file=/src/index.ts

Thank you!

[daybrush]

@alexconstantin

• @moveable/helper 0.0.4
• lit-moveable 0.16.0
• moveable 0.39.0
• preact-moveable 0.41.0
• react-compat-moveable 0.27.0
• react-moveable 0.42.0
• svelte-moveable 0.31.0
• vue-moveable 2.0.0-beta.48
• vue3-moveable 0.14.0
• ngx-moveable 0.36.0

moveable's new version is released.

[alexconstantin]

Thank you! It's working again in 0.39.0