Open AkashTvu opened 1 year ago
@AkashTvu
It sounds like you are talking about align.
However, it is difficult to provide it in Moveable. It seems that it can be created using .getRect()
.
I made an Align in the Editor before, but it doesn't work now. https://github.com/daybrush/scena/blob/b41dae29cb95506e3e286fc2b4ec93b036c3dd13/packages/react-editor/src/Editor/Tabs/AlignTab/AlignTab.tsx
if (!moveableRef.moveable) {
return;
}
const rect = moveable.getRect();
// if moveable is group
const moveables = moveableRef.moveable.moveables;
if (moveables) {
// Group
moveables.forEach(child => {
const target = child.state.target;
const frame = this.moveableData.getFrame(target);
if (frame) {
const subRect = child.getRect();
// If aligned left
const delta = rect.left - subRect.left;
// Move target by delta
target.style.left += `${parseFloat(target.style.left) + delta}px`;
}
return false;
}).filter(target => target);
}
@daybrush I plan to introduce a similar feature to align elements within a selected group in my project.
I understand the code you gave in the previous comment. But I would appreciate your help figuring out how to introduce buttons on a group of elements. Can I create a CustomAble, which only shows align buttons for a group, not a single element?
@daybrush I was able to use the snippet you provide to align elements within a group.
I have question about the frame
variable. I don't get the getFrame
function. I am not sure why do we need to check that condition.
const frame = this.moveableData.getFrame(target);
if (frame) {
}
@jadiagaurang
align
will be explained through a demo. (I have to fix the bug, so it will take about 3 days.)
You probably use moveable-helper
, but it's unmanaged code.
If you still want to use it, call the following function at onDragStart.
moveableData.setElements(targets);
// or
moveableData.setElements([target]);
@daybrush I have implemented a ContextMenu to open Alignment Options when there is more than one target to the MoveableRef.
Implemented Example.
https://github.com/daybrush/moveable/assets/430637/2409caba-881c-4676-89ec-728a6d1c8e1a
I need help to align all the elements to the edges. i.e., for the right align option, I want to align to the right edge of the group Rect.
Please help me calculate all six options Vertical (Left, Center, Right) and Horizontal (Top, Center, Bottom), either in Moveable or Helper.
@daybrush The AlignTab.tsx was very helpful.
I was able to implement getDirectionPos()
function in my project and was able to implement all six options successfully. (Left, Center, Right, and Top, Middle, Bottom)
Thanks! 🙏
@jadiagaurang
croact-moveable
0.6.1@moveable/helper
0.1.3lit-moveable
0.27.1moveable
0.50.1preact-moveable
0.52.1react-moveable
0.53.1svelte-moveable
0.42.1vue-moveable
2.0.0-beta.80vue3-moveable
0.25.1ngx-moveable
0.47.1moveable's new version is released. Check it again.
And refer to align demo:
Hi @daybrush
Thank you for providing the Align Demo. It was beneficial.
I am implementing two more options, Align Horizontally and Align Vertically. This feature would distribute the group rectangle spacing between the selected elements evenly.
Photoshop has two extra Options called Align Horizontally or Vertically (https://helpx.adobe.com/photoshop/using/aligning-layers.html), and Sketch has something similar called Tidy (https://www.sketch.com/docs/designing/layer-basics/aligning-layers/#using-tidy-to-align-layers)
Can you help us with these features in any way? It would be great to add to the demo as well.
Hi @daybrush, I wanted to follow up on my previous question/request. Can you help us with these features in any way?
Environments
Description
I have a group movable in which 3 items are added now i want to move goupable items in its group boundary.