Move It!
By
@AndyNoob
- 13 Devlogs
- 28 Total hours
A user facing UI library that adds PPT like DOM object manipulation.
RAHHHHHH RECODE (v1.0.0)
-
Turns out when you keep adding features on the fly into an existing system, things start going haywire because the system was not designed to have those features.
-
Anyways, after spending like 3 hours trying to fix those haywires, I decided to just do what I should’ve done: rewrite the damn thing. Well, turns out, it wasn’t even that much of a rewrite since all I had to change was like three files…
YOOO new feature! autoSize option keeps elements anchored at their center when their sizes change. Took a minute but we got here, ha!
Guide line snapping can now follow resizing! Code lowk getting a little messy, but it’s still borderline acceptable haha. Now on version 0.3.0 :)
Added a auto resize feature! Not much to say but it took surprisingly little effort to implement. I thought I would’ve had to re-code half the codebase 
Added a way to disable rotate/drag/resize individually!
Ship #1
MOVE IT!
A library that adds simple PowerPoint like DOM object manipulation: resize, drag, and rotate. Pretty lightweight and comes with (very beautifully) styled controls. This library also provides the means for you to calculate collision via an implementation of oriented bounding boxes.
Links
The more detailed details can be found on the README: https://github.com/AndyNoob/move-it
You can find a simple demo here: https://andynoob.github.io/move-it/
Annoying issues I ran into on the way
It’s pretty much just CSS. It’s always CSS. When it is not CSS. I have so much beef with the transform property.
For starters, it took me 5 hours to put the transform controls around the target element. And THEN some to get it pixel perfect. Not to mention how RESIZING IS SUCH A PAIN because changing the width and height adjusts the pivot point of the target element.
At the very least, I didn’t have to worry about writing unit tests all that much for this project (AI is very good at it).
Other stuff
I think the most fun part of this project is writing the function that handles overlapping rectangles’ collision resolution. The whole process reminded me of Arcade haha.
Check it out if you’re interested/in need of letting users transform objects in DOM.
MORE WORK On THE README!!!!
Just… wrote the README. An hour of my life that I will never get back…………. 🙃
Did some more MATH. Now it collides. Yay! Check video for a quick surface level explanation of the algorithm (if ur interested)
Did a bunch of chores to cleanup the project a little. Had to get some help from the dark wizard (Chat) for build config stuff. Project demo is also available on Github Pages: https://andynoob.github.io/move-it/
Added a way to define bounds in which the manipulated object cannot move out of. Took a bit longer than I would’ve liked, but it’s coming along nicely!
Added grid and rotation snapping! Works pretty well if I do say so myself. On top of that, arrows also work for shifting the element. Nice! (the self glaze continues)
Ok so, fixed the issue in the last devlog where the rect don’t resize properly when it’s rotated (I used 120% of my brain’s potential). Then, I implemented rotation with some help with atan2 from a certain LLM. Plus changing the cursor on hover while rotated. Check out the beautiful video I threw together (using 4 clips lool).
Making a front-end library for my other project because the existing ones are annoying to use and are all unmaintained (I am starting to see why…🙃). Anyways, dragging and resizing (when not rotated) are implemented. Attached videos are funny bugs I ran into along the way.