Spacetree and custom NodeType implementation

802 views
Skip to first unread message

Matthew Hanlon

unread,
Oct 21, 2010, 6:00:41 PM10/21/10
to javascript-information-visualization-toolkit
Hey all!

I've implemented a custom nodetype (as below).  Bascially, I wanted to draw a little indicator when nodes have children that aren't yet expanded.  So in onBeforePlotNode I check for unexpanded subnodes and if they exist set a node.data flag for "unexpanded."  Then, in the nodetype implementation, I draw my indicator if necessary.  This all works great, and the indicators draw perfectly.  However, I have tried to implement the 'contains' portion of the NodeType thinking this would allow users who click the indicator to expand the node, instead of only being able to click the label itself.  But I can't get it to work.  (Note: the contains function below only tries to account for 'bottom' orientation.)

Am I mistaken in the purpose of the 'contains' function?


Best,
Matt.

NodeType implementation Code:


$jit.ST.Plot.NodeTypes.implement({
      'expanding': {
       'curveW': 24, // default width
       'curveH': 16, // default height
        'render': function(node, canvas) {
         if (node.data.unexpanded) {
var pos = node.pos.getc(true),
h = node.getData('height'),
w = node.getData('width'),
                algnPos = this.getAlignedPos(pos, w, h),
                x = algnPos.x + w/2,
                y = algnPos.y,
                cw = this.nodeTypes.expanding.curveW,
                ch = this.nodeTypes.expanding.curveH,
                orn = this.config.orientation,
                ctx = canvas.getCtx();
if (orn == 'bottom' || orn == 'top') {
if (orn == 'top') {
y += h;
ch = -ch;
}
var gx0 = 0, gy0 = y, gx1 = 0, gy1 = y - ch,
cx0 = x - cw, cy0 = y,
cx1 = x, cy1 = y - ch/2,
cx2 = x + cw, cy2 = y,
x0 = x - cw, y0 = y - ch,
x1 = x, y1 = y,
x2 = x + cw, y2 = y - ch;
} else {
if (orn == 'right') {
w = -w;
cw = -ch;
} else {
cw = ch;
}
x += w/2;
y += h/2;
ch = ch/2;
var gx0 = x, gy0 = 0, gx1 = x + cw, gy1 = 0,
cx0 = x, cy0 = y - ch,
cx1 = x + cw/2, cy1 = y,
cx2 = x, cy2 = y + ch,
x0 = x + cw, y0 = y - ch,
x1 = x, y1 = y,
x2 = x + cw, y2 = y + ch;
}
ctx.save();
ctx.beginPath();
var grad = ctx.createLinearGradient(gx0, gy0, gx1, gy1);
grad.addColorStop(0, 'rgba(255,255,255,1)');
grad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.fillStyle = grad;
ctx.moveTo(x0, y0);
ctx.bezierCurveTo(cx0, cy0, cx1, cy1, x1, y1);
ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2); 
ctx.fill();
ctx.restore();
}
        },
        'contains': function(node, pos) {
var width = node.getData('width'),
height = node.getData('height'),
npos = this.getAlignedPos(node.pos.getc(true), width, height);
npos.x = npos.x + width / 2;
npos.y = npos.y + (height + this.nodeTypes.expanding.curveH) / 2;
return this.nodeHelper.rectangle.contains(npos, pos, width, height + this.nodeTypes.expanding.curveH);
}
      }
    });

--
Matthew Rollins Hanlon
http://squareoftwo.com
---------------------
Hanlon's Razor: "Never attribute to malice that which can be adequately explained by stupidity."
http://wikipedia.org/wiki/Hanlon's_razor
Reply all
Reply to author
Forward
0 new messages