Canvas Tag Clipping 2

Continuing on from the last post, I’ve made some improvements to the Javascript UI skeleton:

Try clicking on and dragging the rectangles around and see what happens. Unless you’re using IE, of course, in which case I suggest you go and download a web browser first.

I read up on the canvas API and it transpired that the canvas element already includes clipping functionality. I ripped out my own clipping routines and used the rectangles calculated by the BSP routine to define the clipping regions for the built-in drawing functions. (As an aside, I’m seriously considering pulling the Graphics class out of Woopsi and using the GraphicsPort everywhere, so that clipping is available when drawing to bitmaps. This would require a few changes to the way the clipping region is specified, but I think it would be a change for the better.)

I’ve also improved the way gadgets recalculate their clipping regions when they are moved. Instead of recalculating the entire BSP tree, the system just recalculates the tree nodes within the space defined by the moved gadget’s parent. Since those nodes are the only nodes that can possibly have changed, there’s no reason to recalculate everything.

Gadgets are limited to the confines of their parents. This makes it impossible for them to overlap their parents’ borders. In Woopsi this border protection was aided by the alternative display partitioning scheme; the BSP system used here does not make it quite so easy.

Finally, gadgets jump to the front of the stack when clicked. However, this has been disabled so that it’s possible to move a gadget behind another and actually prove that there’s a reason not to just opt for the painter algorithm instead of this BSP stuff.