1. Introducing
AlloyUI
Diagram
Builder
Eduardo Lundgren
Liferay Inc.
@eduardolundgren
2. Main points
1. What we needed
2. What we wanted to create
3. How we started
4. Architecture
5. Events
6. Serializing visual data (demo)
7. Real world applications (demo)
10. The Goal: Diagram Builder
• Intuitive drag-and-drop interface
• HTML5 and web standards (no flash)
• Support modern browsers and devices
• Balance between HTML v Graphic API
• Flexible and extensible API
39. Connector Architecture
x
p1 (x1, y1)
p2 (x2, y2)
Cubic Bézier
<path d="M x1,y1 C x1,y1 x2,y2 c1x,c1y" stroke="lightblue" />
y curveTo(...);
40. Connector Architecture
• Problem1: Position some element
over the curve.
• Is there a way to get the curve points
from SVG/VML path?
(x, y)?
Connector Name
p1 (x1, y1)
p2 (x2, y2)
42. Connector Architecture
Bézier
Bernstein basis polynomial
• The points “Pi” are called control points for the Bézier curve.
• “t” varies from 0 to 1.
(Image from Wikipedia)