HTML5 vector graphics editor | Hacker News Reader

HTML5 vector graphics editor

figurepool.com

57 pointsdurman22 comments

Looks like this was done in Raphael from scratch. The history panel is very cool.

I have my own HTML 5 vector graphics editor http://editor.method.ac which is based off SVG Edit, so I understand the amount of work gone into this, it must have been an interesting challenge!

I small UX suggestion for your landing page: instead of warning people that they don't have save functionality unless they sign up first, allow your users to save their work by signing up. I'm sure a "Save and Sign Up" button would do wonders for your conversion rates.

Your editor seems pretty advanced and very responsive, it is much better than previous existing ones. (I know, there was a javascript one several years ago)

Nice work your editor! Small note, I'd suggest you not hide some of the functionality behind menu (Bring forward, Send backward, ...). There is plenty of space in the upper menu and it might be better if the user saw these buttons directly and be able to manipulate them with one click.

Figurepool is indeed built with Raphael from scratch. I'm also using JointJS though, a diagramming lib that I built some time ago. My goal is to build a mixture of vector graphics and diagramming tool.

You're absolutely right about the "Save & Sign up" button. Will do it soon...

Wow, this looks awesome! I love the controls on the right hand side. Simple large numbers with grabber hand. Also like your shape library. Only thing I would change is maybe let people directly change the numbers on the right hand side by double clicking it. Once people get used to it, they start knowing what numbers to put in.

Thanks, that's how the numbers actually work, if you double click it it becomes editable.

Maybe a small feature idea. When rotating elements, it's nice to be able to hold shift and let the object snap to 45 degrees angle increments.

That's a great suggestion. Putting it on the list of the next features to be done...

Just to inform you that this is now implemented.

Great work. As a graphics programmer on web, I understand it is very time consuming and hard to squeeze out performance from a browser. My own htm5/nacl vector graphics editor http://www.torapp.info is similar but specially enhanced for security printing.

What is "security printing" ? Watermarking?

Something like guilloche designing for paper money.

Great work! I'm about to decide which solution I'm gonna use for making mind maps while studying and I like this one alot.. Any chance there'll be google drive connection in the near future?

Edit: I seem to have a problem with scrolling in the document. When I try to scroll using two finger swipe on a mac it sometimes recognise the scroll as a zoom in/zoom out command instead, until I reload the page and I can scroll normally again. Is there any other way to scroll? Am I doing it wrong? (and sometimes the the browser recognise the two finger swipe as a back command..)

Figurepool can be very handy for mindmapping, actually the 'fork icon tool' was added with mindmaps in mind, you just click the icon tool and a new already connected box is added. Just double click the box to add new text label to it.

The scrolling issue seems to be an OS X related bug. I sometimes observe the same. The fact that sometimes two finger swipe is recognized as back button is a Google Chrome on OS X feature. I was able to get around the zoom/scroll issue by pressing the Shift button. Not sure if it'll work for you though. At least you can give it a try...

For anyone interested in writing HTML5 (Canvas or SVG) in-browser editors, I think there is big market potential in, not necessarily another diagram tool like this, but a content authoring tool for data analysis. It's not a big leap from this product to an editor for say, D3 or HighCharts.

Well done! Suggestion : A full-screen mode to take advantage of big screens

Thanks! A full-screen mode is in place but not in the demo. You'd have to sign-up (free) to get the editor with fullscreen capability.

Just wanted to say that I really love this editor. Really simple to quickly create diagrams. Great job!

The controls remind me a lot of the Morphic widgets from Squeak Smalltalk.

Nice that you noticed. I was indeed inspired by Squeak Smalltalk. I love that system. Pity it didn't get widespread.

I actually had to go an look up the various web/javascript smalltalks -- it looks like a few of them are live and well -- but more importantly the Lively Kernel does offer a parts bin with basic shapes, and a right click halo that allows for modification -- but lively kernel could be made to look prettier by borrowing from here...:

  http://www.lively-kernel.org/

Note Lively isn't Smalltalk... but with OMeta[1] it sort of is: http://www.youtube.com/watch?v=f2dyLKP_xJc

[1] http://tinlizzie.org/ometa/

If you find [1] interesting you might also like:

http://www.vpri.org/vp_wiki/index.php/Main_Page

It's like Inkscape in browser! Excellent.

very useful. Thanks!

Reply on news.ycombinator.com