search

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
10.08k stars 618 forks source link

Error thrown when edge dragging #695

Closed alexconstantin closed 1 year ago

alexconstantin commented 2 years ago

Environments

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 commented 2 years ago

@alexconstantin

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

Or what features do you want?

alexconstantin commented 2 years ago

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 commented 2 years ago

@alexconstantin

I'll add this feature to next release.

daybrush commented 2 years ago

@alexconstantin

moveable's new version is released.

use edge as array type.

edge={["n", "s"]}
alexconstantin commented 2 years ago

Works perfectly. Thank you so much!

alexconstantin commented 1 year ago

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 commented 1 year ago

@alexconstantin

moveable's new version is released.

alexconstantin commented 1 year ago

Thank you! It's working again in 0.39.0