search

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

Draggable does not work well with transform/matrix/scale elements #37

Closed ronvillalon closed 4 years ago

ronvillalon commented 4 years ago

Positioning is off for those elements that have been scaled up/down using css transform (this includes scale, matrix and matrix3d). Do you plan to support such functionality? Your examples show that it supports scaled SVG so I assumed scaling would be within the scope of plain-draggable.

anseki commented 4 years ago

Hi @ronvillalon, thank you for the comment. I couldn't understand that because the information is very insufficient, but this might help you. https://github.com/anseki/plain-draggable/issues/13 Note that that example is not perfect. If you want helping more, please give me details about the case.

ronvillalon commented 4 years ago

Hello @anseki , I have updated the original issue for clarification. However, the link you gave seems to already answer my question. Great library--thank you for making it available. It is a shame you don't have a separate pan/zoom library to go along with your plain-draggable and leader-line. Do you have plans to create or do you have a library you personally use to go along with plain-draggable that supports panning/zooming?

anseki commented 4 years ago

The SVG (Scalable Vector Graphics) was designed for scaling with interactivity and animation. That is, SVG is used for GUI that supports scaling in many cases. On the other hand, the CSS visual formatting model was added to DOM, that transform the elements in view only. And it has problems even now. Therefore, that is not used for GUI with interactivity in many cases. However, of course I will think that when many requests come.

So, could you close this issue if it was solved?

ronvillalon commented 4 years ago

Thanks, @anseki

weiyuanC commented 3 years ago

Can I know how do you solve the problem?

draggable.onDrag = (newPosition) => {
      const boundingRect = drawArea.current.getBoundingClientRect(); // parent div 
      newPosition.left = boundingRect.left + (newPosition.left - boundingRect.left) / currentScale; //e.g currentScale = 1 or 1.1 or 2
      newPosition.top = boundingRect.top + (newPosition.top - boundingRect.top) / currentScale;
}

I tried doing the same thing, dividing the parent's scale value, but the draggable children are not following the mouse position

using transform scale in this case, zoom by scrolling.

anseki commented 3 years ago

@weiyuanC, See: https://github.com/anseki/plain-draggable/issues/67#issuecomment-756016647