The file is compressed(as expected) and also obfuscated. The overall UI is simple to construct, but the actual pipes caught my attention. Though it looks like it is an image, there is not easy way to use images to draw something (a bezier curve) like that. A little more poking revealed that they had used the 2D canvas to pipes to actually do the drawing. No wonder I was looking at a lot math in the source code.
The magic function is the maxwell.Wire object that is responsible for drawing the wire, and also handling the one move and on remove events. The constructor first creates a canvas, attaches it to the document and also gets the type of rendering (blue or grey color). Then entire math resides in the maxwell.Wire.redraw function. This also uses the findBezierPoint function to allow smoother lines, for that curve effect. The function looks something like
ctxt.bezierCurveTo(_110[1][0],_110[1][1],_110[2][0],_110[2][1],_110[3][0],_110[3][1]);
Combining this point with source and destination co-ordinates, the bezierCurveTo of the canvas.getContext() object is called. A stroke object is used to determine the color of the line. There are two bezier curves drawn to give the outline effect. All other events like onMove or onResize call this redraw function. Also, a clearRectangle is called change the image on dragging of the actual window.One interesting design decision that would have been made is about placing all wires in one canvas, or having canvas for every wire. Yahoo seems to have gone with the latter. One reason I can think of is the problem of redrawing wires on dragging components. If all wires are on the same canvas, redrawing only selective lines is difficult. The XOR trick would work, but I have not come across a XOR compositing for lines (There is a XOR compositing for the entire canvas). Anyway, I think that adding a couple of canvas elements may slow the initial rendering, but the user interaction part is still intact.
So thats pretty much it, the way the interesting pipes are drawn in YAHOO pipes.
