feat: position control

[spartan-vutrannguyen]

Description

• Allow setup position of an element

Related Issues

• Closes #545

Type of Change

• [ ] Bug fix
• [x] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

[Kitenite]

A couple small comments:

1. The red bars should be clickable
2. Should round the values to the nearest pixel value

Next step: 3. When in absolute mode, we should be able to drag the element to change the absolute position instead of reordering

[drfarrell]

1. Like what kiet said, the values should snap to pixel values.

2. Sometimes it takes two attempts to change a value in the box for it to apply.

3. clicking on the red bars should "activate" that mode and make the number input white (or text-foreground-active). If the red bar is not clicked, then the value should be ignored. It's not enough to change it to "auto" because it seems to default to "0px" which would be the same as explicitly defining that it should be at 0px from the side of the input.

4. The individual bars in the middle should be clickable. See in the example image how if the user hovers over the middle bar, it highlights it as if it could be clicked, and if they hover over the horizontal bar the same happens.

Meaning it's possible to have both selected (centering relative to the parent)

[drfarrell]

Had a quick change to review this and going to drop some feedback. Generally, the dragging is working pretty well! I like it and can feel that this is going to be a really unique feature.

Forgive me if some of this is stuff you are already working on!

1. The object should snap to the nearest pixel on dragging to prevent the 0.584498 sub pixels and such.
2. There seems to be a flicker when the object is dragged. The old position flickers for a second.
3. Can we make the click-area around the red side buttons a bit larger? so the lines remain the same thickness, but have more clickable "padding" around them.
4. If I click the center of the textbox, it seems to jump back to the upper left corner.
5. The anchors (the red lines) seem to turn on when I drag an item around. They should really only be activated by the user to "lock" their relationship in place to the edges of the window.
6. This may be a bit tough, but if it's possible to update the numeric values in real-time, that would be awesome, but that could be a v2 feature.

[spartan-vutrannguyen]

Had a quick change to review this and going to drop some feedback. Generally, the dragging is working pretty well! I like it and can feel that this is going to be a really unique feature.

Forgive me if some of this is stuff you are already working on!

1. The object should snap to the nearest pixel on dragging to prevent the 0.584498 sub pixels and such.
2. There seems to be a flicker when the object is dragged. The old position flickers for a second.
3. Can we make the click-area around the red side buttons a bit larger? so the lines remain the same thickness, but have more clickable "padding" around them.
4. If I click the center of the textbox, it seems to jump back to the upper left corner.
5. The anchors (the red lines) seem to turn on when I drag an item around. They should really only be activated by the user to "lock" their relationship in place to the edges of the window.
6. This may be a bit tough, but if it's possible to update the numeric values in real-time, that would be awesome, but that could be a v2 feature.

Thanks for reviewing my code. I will update these feedbacks.