When I was taking on the challenge of making Groodle #2 look good that I decided to refactor TabRect into a more versatile shape: Balloon. It is still a union of a rounded rectangle and a triangle but has more room for customization. Here is a screenshot to show you what I mean by that



Not only may the tab be placed in any of the four sides of the rectangle, but it may also be displaced along the side it is on. Because GraphicsBuilder supports triangles as base shapes it was also a simple matter to allow right triangles as tabs, the blue/cyan balloons show them in action. So how does the code look? I'm using aliases (I'm finding them very helpful as I keep using them) just in case you were wondering
antialias on font( size: 20 ) rect( x: 50, y: 50, w: 50, h: 50, aw: 20, ah: 20, bc: 'darkRed', f: 'red', bw: 2 ) balloon( x: 61, y: 10, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'black', f: 'white' ) text( x: 69, y: 16, text: '1', bc: 'none', f: 'black' ) balloon( x: 61, y: 112, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'black', f: 'white', tl: 'top' ) text( x: 69, y: 118, text: '3', bc: 'none', f: 'black' ) balloon( x: 10, y: 61, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'black', f: 'white', tl: 'right' ) text( x: 18, y: 68, text: '2', bc: 'none', f: 'black' ) balloon( x: 112, y: 61, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'black', f: 'white', tl: 'left' ) text( x: 120, y: 68, text: '4', bc: 'none', f: 'black' ) balloon( x: 10, y: 10, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'blue', f: 'cyan', td: 1, ap: 'end' ) text( x: 18, y: 16, text: 'A', bc: 'none', f: 'blue' ) balloon( x: 10, y: 112, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'blue', f: 'cyan', tl: 'top', td: 0, ap: 'start' ) text( x: 18, y: 118, text: 'B', bc: 'none', f: 'blue' ) balloon( x: 112, y: 112, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'blue', f: 'cyan', tl: 'top', td: 1, ap: 'end' ) text( x: 120, y: 118, text: 'C', bc: 'none', f: 'blue' ) balloon( x: 112, y: 10, w: 28, h: 28, arc: 10, tw: 10, bw: 2, bc: 'blue', f: 'cyan', td: 0, ap: 'end', ap: 'start' ) text( x: 120, y: 16, text: 'D', bc: 'none', f: 'blue' )
An explanation of the properties is in order

• tw - tabWidth: the name should be self explanatory
• th - tabHeight: controls the height of the tab, it is 1/2 of tabWidth by default (the example doesn't set it so it is computed as 5)
• tl - tabLocation: defines which side the tab will be attached on, default value is 'bottom'
• td - tabDisplacement: where in the chosen side the tab will be attached, it must be a value in the range (0f..1f) and it takes into consideration whatever value you set for arc, meaning that the tab will be drawn between (x+arc) and (x+width+arc)
• ap - anglePosition: defines where is the right angle, default value is 'none'

Needless to say it will be available in the next release

Keep on Groovying!