anseki / plain-draggable

The simple and high performance library to allow HTML/SVG element to be dragged.
https://anseki.github.io/plain-draggable/
MIT License
765 stars 96 forks source link

[Feature request] Add a no-op mode #68

Closed OzymandiasTheGreat closed 3 years ago

OzymandiasTheGreat commented 3 years ago

Hello, This is a very nice library and feature-wise it's pretty much perfect for my needs, however due to the way it's implemented some features don't work in my use case. I have a multi-layered SVG document, where the positions of elements are bound directly to the data model. So updating style values, both top/left and transform, just doesn't work because it only affects the control layer. Currently I'm working around this by resetting transform attribute to data model value on every event. That however somehow breaks snapping.

So for my feature request: add option to emit events without modifying HTML. I could greatly benefit from the calculations done by this library, but due to complex nature of the elements I'm working with, modifying HTML creates more problems than it solves.

If this is beyond the scope of this project that's okay, it's still usable without snapping, and resetting HTML already works. Still having snapping implemented like in this library would enrich my application in a simple and elegant way, so please consider adding this.

anseki commented 3 years ago

Hi @OzymandiasTheGreat, thank you for the comment. You can make a DOM Events and fire those in functions that is called by on* options.

OzymandiasTheGreat commented 3 years ago

I think you misunderstand me. Firing and handling events works all fine and swell. The problem is that Plain-Draggable modifies HTML. I have to undo those modifications in every event handler. I think that's unnecessary work and prone to breaking. What I'd like is a mode where events fire as usual but HTML is NOT modified.

anseki commented 3 years ago

PlainDraggable should not modify HTML, that works by controlling CSS properties. Could you show me an example that the HTML is modified, by using e.g. https://jsfiddle.net/ ?

anseki commented 3 years ago

For example: https://jsfiddle.net/v2nm9wqg/ As you see, the HTML is not modified. PlainDraggable controls only CSS properties.

OzymandiasTheGreat commented 3 years ago

Firstly, sorry for delays in my replies, I'm currently dealing with Corona. Ok, my bad https://jsfiddle.net/Lfg0r6ub/ this modifies transform attribute directly, not through style attribute, but I guess it's technically embedded SVG, not HTML. Still, it's irrelevant whether Plain-Draggable modifies CSS or HTML(SVG). Because I have a pretty complicated display, I have to undo these modifications on every event. Again, that's unnecessary work. What I'm requesting is a mode where events emit with calculated positions, but no modifications are written to either CSS or SVG. Then I can handle positioning myself through the data model.

anseki commented 3 years ago

Umm... How does the library move an element without using CSS? Maybe you don't need this library, you need DOM event such as mousemove that provide the position of mouse pointer.

OzymandiasTheGreat commented 3 years ago

DOM events don't provide snapping and other features, as well as requiring a lot of calculations for SVGs that this library already does. What I'm saying there's value without actually moving elements and a lot of it. Let me try to explain again: I want to benefit from this library's calculations such as snapping. However because I have multi layered SVG where positions of elements are bound to data model, after updating the model with event values control elements (handles) end up out of place because they are transformed. I don't need the actual moving part, I can subscribe to events and store event values in the data model and everything works. Hence no-op mode: no moving operation is actually performed yet I get data in event with snapping and positioning info.

If you don't think this is worth implementing, that's fine. I already have it working by resetting transform attribute in every event. However if you do implement this it would improve my app's performance and simplify my code.

anseki commented 3 years ago

I see. I think that the option should not be implemented because that is not required usually. You can customize the library with source code for your app.