Line drawing in pipes
Quite a number of people have asked about how the lines were done in the editor so heres a quick summary.
The answer is actually pretty simple, although getting it “right” is quite hard.
The lines are drawn using the canvas tag, which is supported in firefox and safari (and webkit – which is the fastest renderer of them all). Its also supported in opera but debugging opera is nearly impossible currently. We make use of a wrapper for IE which converts many of the canvas operations transparently into VML.
Now the problems kick in: safari doesn’t redraw when the canvas gets resized; “sizing” the canvas needs to be done in the right way; the canvas tag obscures the DHTML elements very easily (the bounding box for the canvas can be large) – so you need a solution for drawing the lines and still be able to interact with the other DOM elements (FWIW the editor has the 4th variation we tried). There are lots of small issues 
June 1st, 2007 at 1:39 pm
I assume you don’t want to post us a few code samples?
Did you use another drawing library or just straightforward DHTML commands?
June 7th, 2007 at 3:18 am
Well done, pipes looks great.
Any chance of you doing an article on how you did the connector graphics ?
Some code samples would be great !
June 7th, 2007 at 4:11 am
No drawing library other than the basic utility classes of YUI and the canvas tag (and lots of blood, sweat and tears
). I hope to get a page with some code samples done soon…