HTML5 Diagramo - Real world example OSCON, Birds of Feather, July 28, 2011

Lack of advance geometry library to build vector like applications Whenever you draw something in is lost if you just repaint it. You need to store what you paint.

So, I started to make one out of scratch Point Polyline Polygon Line Ellipse QuadCurv e CubicCurve Figure Path Arc

Who start to use it?

The mighty Point function Point(x, y) { } var p = new Point(10,13)

Line function Line(startPoint, endPoint){.... } var p1 = new Point(10, 10); var p2 = new Point(30, 40); var l = new Line(p1, p2);

Cubic Curve function CubicCurve(startPoint, controlPoint1, controlPoint2, endPoint) {.. } var sp = new Point(10, 10); var cp1 = new Point(14, 15); var cp2 = new Point(30, 40); var ep = new Point(50, 50); var curve = new CubicCurve(sp, cp1, cp2, ep);

Figure ( one shape to rule them all ) ● Figure is more or less a container that keeps a set of primitives (points, lines, etc) ● Composite pattern used for: transformations, near and paint algorithms

Painting engine ● All figures are painted from bottom to top ● “Dirty object” pattern – repaint ONLY if changes occured.

Connectors ● Very difficult to implement ● 2 types : straight and jagged

Export to SVG ● First export to SVG ● Then convert SVG to whatever format you want ● Composite pattern used to generate the SVG

New features ● Image support → load from URL (upload might come) ● SVG support → Last browsers supports this well ● Organic connectors → rounded connectors

Download it Download it and install it on your server. You ONLY need a LAMP stack. Online accounts are suspended :( for now until new release will be available.

Thank you! Visit Follow us on