Moveable: What demo do you want?

[daybrush]

I'm going to make a demo.

https://github.com/daybrush/moveable/blob/master/storybook/README.md

Like as follows:

https://github.com/naver/egjs-infinitegrid

https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/virtual-scroll--gridlayout

Please let me know if there is a demo you want. Feel free to write a comment. I will consider.

[leeboo]

good jobs and thanks daybrush
i want to make this effect, can you give me any idea?

now i have problem when use two moveables #187 #189

[schester44]

@daybrush One issue i'm seeing while using react-moveable is how to initialize a non-targeted element with rotation.

It seems like Moveables rotate value initializes at 0 so the calculations are off for an item that is initially rendered with rotation.

Here is an example:
https://codesandbox.io/s/quizzical-kowalevski-qi3xk

Try rotating the def element. onResizeEnd, we update the element's rotate value which causes the transforms to be incorrect.

I need to initialize an element with transforms and after being dragged/resized/rotated, I need to update the same state that was used to initially transform the item.... if that makes sense.

So an example that shows how to use Moveable with elements that were previously altered from another session would be helpful.

[satheshrgs]

@daybrush I need a demo using any of svg elements like rect or circle without using frame from scenejs. I tried a basic example and made it happen..The following are some of my issues i have faced

1. setting x,y of element in onDrag resets the position of mouse pointer to edge of that element..Is there any proper way to drag svg elements ?
2. Moveable origin sets to left corner of the page. so unable to rotate properly

here is the sanbox link of what i have tried
https://codesandbox.io/s/react-moveable-demo-btg9u?file=/src/index.js

[yojona]

I want to resize an image to negative width/height and produce mirroring, is that possible?

[Naggertooth]

Demo with more than 1 moveable component :)

spoiler

Resize is working on 2 targets

[happylinks]

Hey @daybrush, would you have time to make a demo with "scrollable" for "moveable"? I'm trying to combine these 2 examples:
https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time
https://daybrush.com/selecto/storybook/?path=/story/selecto--select-in-the-scroll-area

But I'm having an issue where the element moves really fast when dragged outside of the view (scrolling) and isn't in sync with the mouse cursor anymore.
I'll try to reproduce the error in a codesandbox as well, but maybe there's an example already somewhere?

Edit: I'm trying horizontal + vertical scroll. And also, it seems like onScrollGroup is not triggered.

[atomoc]

Please add a demo that describes all kinds of embellishments, such as changing colors, sizes, and the like.

[JayBhuva]

Please tell me how can I upload the manipulated image from movable?

[daybrush]

@atomoc

Main demo
https://daybrush.com/moveable/

[daybrush]

@happylinks

Scroll With Selecto Demo is fixed.

Other demos are in preparation.

[sooryaraj]

@daybrush can you please do this (https://daybrush.com/moveable/) this demo in vanila JS

[alezzigo]

good jobs and thanks daybrush
i want to make this effect, can you give me any idea?

now i have problem when use two moveables #187 #189

@leeboo can you public source code this effect?

[MiiZZo]

@daybrush can you add to your demo the ability to group items using CTRL + G for example?

[littlee]

@daybrush How to implement an "Auto-Select" feature, just like the doc's demo

https://daybrush.com/moveable/

the demo code is too complicated to understand

in my own project, I have to click to set the target to the current layer, then start the drag with another mouse down

https://codesandbox.io/s/gifted-poitras-ubs5v

I have changed onClick to onMouseDown, but it still does not work.

[daybrush]

@MiiZZo
Sorry, but that seems a little difficult.

@littlee

here demo:
https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--change-the-moveable-targets-by-selecting-it