alxpez / vuegg

dnd visual editor - mockups and code in one go!
https://vuegg.github.io
MIT License
2.34k stars 392 forks source link

[Feat] Allow end user to enable Smart guides, grid and layout overlay #14

Open munirkamal opened 6 years ago

munirkamal commented 6 years ago

First of all thank you so much for this awesome project. I've been playing with it and got a suggestion/feature request which I think will make this tool much more user-friendly.

The suggestion is to integrate smart guides functionality so that the user moves an element it gets smart guides to easily place the elements where needed, similar to sketch app.

And also if there would be option(s) to allow the users to enable Grid/Layout grid overlays that would be super useful too. Again similar to how it works in Sketch app.

I've recorded a little screencast to explain what I mean, you may watch it here. https://cl.ly/r48V

Looking forward.

Regards, Munir

manirikhi commented 6 years ago

Indeed, smart lines, grids are most required feature of every editor library.

alxpez commented 6 years ago

@munirkamal @manirikhi thanks for the input!

I believe adding grid and layout overlays to be fairly simple and straight forward, so it won't be a problem for me to add these features in near-future releases.

However, I don't have any idea on how to implement the smart lines (I honestly haven't even researched it), I would be more than happy to hear any thoughts/ideas on this matter.

625781186 commented 5 years ago

@alxpez I think QT designer's smart layout is excellent.

I found some vue designers with different characteristics , and my final goal is to make a vue designer similar to qt designer.

jdfw

jdfw2

laurensiusadi commented 4 years ago

Found something that might be helpful https://github.com/lf2com/magnet.js

Demo here: https://lf2com.github.io/magnet.js/demo/demo_types.html