Vectomatic is a 2D vector graphics editor based on GWT and HTML 5 canvas. At the moment it is more of a demonstrator than a truly useful application.
What lessons did I learn from this first prototype ?
On the bright side, browsers are now quite fast and I think that a full featured editor is truly feasible. Browsers can even provide the basis for advances in the UI for this kind of programs: for instance, in vectomatic, the compass-like widget enables working on documents from any orientation ; transparency effects keep the drawing visible when one moves elements around. Developing such an application within a browser enables leveraging the browser native 2D functionalities and reduces the amount of code which has to be written. Newer GWT technologies like code splitting enable the application to grow in size and load incrementally.
Regarding things which ought to be done differently, I see mostly two. Lesson 1: canvas is not the best technology for this kind of program, SVG makes much more sense in this area. SVG offers features which are more advanced than canvas: things like pick correlation, gradients with an orientation, clipping, dashed lines, even animation; the persistence format is no longer an issue since SVG IS the format; it comes with a rich ecosystem of resources, libraries, tools and knowledgeable people. Lesson 2: GWT native library of widgets is the framework’s weak spot at the moment: there are not enough widgets and they are not good or customizable enough ; thus you need to rewrite a lot of code on your own (things like sliders or spinners); on the plus side, it now has the UiBinder, which does things the right way (like InterfaceBuilder on NeXT, but with open formats). I see a parallel between GWT widgets library and AWT in the Java world. To get started on a large scale project, a more powerful widget library is needed. At the moment GXT seems the more complete, but it comes with strings attached. I hope the GWT team comes up with a Swing or SWT of their own quickly.
Thanks for this editor, the code is pretty amazing. Are you planning on further developing/bugfixing it? It uses a lot of deprecated classes (mostly GWT 2.0 event handling) and undo is sometimes flaky. Cheers!
Hi Todd,
Thanks for the encouragements. Actually, I am more thinking of a complete rewrite on a different basis (keep GWT, but use SVG + a yet to be determined UI toolkit). This is why I am developing lib-gwt-svg. I am currently refining this library and learning the ropes with simpler projects like lib-gwt-svg-edu and lib-gwt-svg-chess, but the idea is to get started on an actually usable / “industrial” vectomatic2 once these pieces are in place.
Regarding version 1, my plans are to make just enough changes to keep it running and also fix bugs which always make a poor impression but I hope that by next year it can be replaced by the new version.
Why the rewrite, is the current code base not stable enough or problematic in some areas? Going though the code it seems very well written, I’m impressed.
If I were to keep on going with the same fundamental design decisions (use canvas, write every widget from scratch), the version 1 code would be an adequate foundation. But since I want to start on new bases (SVG, external widget library), I do not believe I will be able to reuse much of the existing code. For instance, with SVG I will not need to do my own picking or my own rendering; and if I use a third-party widget library, I will not have to write all this custom widget code, which is very time consuming.
I see. Are you actively working on it? Do you already have something ready? 🙂
I haven’t written any code yet, I am focusing on lib-gwt-svg at the moment. But I have a few technical ideas on how it is going to operate.