Skip to content

Commit

Permalink
Some tweaks to the Icicle visualization to work with CSS3 animations and
Browse files Browse the repository at this point in the history 
to animate first rendering.
  • Loading branch information
@philogb
philogb committed Nov 25, 2010
1 parent 2f6e5f1 commit 75cda74
Show file tree
Hide file tree
Showing 7 changed files with 3,581 additions and 130 deletions.
75 changes: 58 additions & 17 deletions Source/Graph/Graph.Label.js
View file
Expand Up @@ -326,27 +326,68 @@ Graph.Label.HTML = new Class({
prefixesStyles: ['-webkit-', '-moz-', '-o-', ''],

prepareForAnimation: function(node, modes, opt) {
if (!this.viz.config.Label.useCSS3) return;

if (!this.config.Label.useCSS3) return;
var css3Props = this.css3Props,
canvas = this.viz.canvas,
size = canvas.getSize(),
nodeProps = modes['node-property'] || [],
label = this.plotLabel(null, node, opt),
style = label.style,
pos = node.getPos('end').getc(true);

//set label transition properties.
$.each(this.prefixesStyles, function(p) {
style[p + 'transition-property'] = css3Props.join();
style[p + 'transition-duration'] = opt.duration + 'ms';
});
//generally labels will move
style.top = pos.y + canvas.height /2;
style.left = pos.x - canvas.width /2;
pos = node.getPos('end').getc(true),
posStart = node.getPos('start').getc(true),
startWidth = node.getData('width', 'start'),
startHeight = node.getData('height', 'start'),
endWidth = node.getData('width', 'end'),
endHeight = node.getData('height', 'end'),
alpha = node.getData('alpha'),
alphaEnd = node.getData('alpha', 'end');

var label = this.getOrCreateLabel(node),
style = label.style,
pref = this.prefixes;

//animating alpha
if (alpha != alphaEnd) {
style.visibility = 'visible';
style.opacity = String(alpha);
//set properties
$.each(this.prefixesStyles, function(p) {
style[p + 'transition-property'] = 'opacity';
//TODO(nico) add transition
style[p + 'transition-duration'] = opt.duration + 'ms';
style[p + 'transition-delay'] = '200ms';
style[p + 'transition-timing-function'] = 'ease-in-out';
});
style.opacity = String(alphaEnd);
var wte = function() {
$.each(pref, function(p) {
label.removeEventListener(p + 'TransitionEnd', wte);
style.visibility = 'hidden';
});
};
if (alphaEnd == 0 && alpha == 1) {
$.each(pref, function(p) {
label.addEventListener(p + 'TransitionEnd', wte, false);
});
}
//changing the position or dimensions...
} else if (pos.x != posStart.x || pos.y != posStart.y || startWidth != endWidth || startHeight != endHeight) {
//set label transition properties.
$.each(this.prefixesStyles, function(p) {
style[p + 'transition-property'] = css3Props.join();
style[p + 'transition-duration'] = opt.duration + 'ms';
style[p + 'transition-delay'] = '200ms';
//TODO(nico) add transition
style[p + 'transition-timing-function'] = 'ease-in-out';
});

style.top = ((pos.y + size.height /2) >> 0) + 'px';
style.left = ((pos.x + size.width /2) >> 0) + 'px';
style.width = (endWidth >> 0) + 'px';
style.height = (endHeight >> 0) + 'px';
}
opt.onBeforeAnimateLabel(label, node);
},
/*

/*
Method: getOrCreateLabel
Calls _getLabel_, if not label is found it creates a new one.
Expand Down Expand Up @@ -376,7 +417,7 @@ Graph.Label.HTML = new Class({
tag.id = id;
tag.className = 'node';
tag.style.position = 'absolute';
this.config.onCreateLabel(tag, node);
this.viz.config.onCreateLabel(tag, node);
container.appendChild(tag);
this.labels[node.id] = tag;
}
Expand Down
87 changes: 60 additions & 27 deletions Source/Visualizations/Icicle.js
View file
Expand Up @@ -126,13 +126,27 @@ $jit.Icicle = new Class({
Computes positions and plots the tree.
*/
refresh: function(){
var labelType = this.config.Label.type;
if(labelType != 'Native') {
var that = this;
this.graph.eachNode(function(n) { that.labels.hideLabel(n, false); });
if(this.busy) return;
this.busy = true;
var that = this;
if(this.config.animate) {
this.compute('end');
this.fx.animate($.merge(this.config, {
modes: ['linear', 'node-property:width:height'],
onComplete: function() {
that.busy = false;
}
}));
} else {
var labelType = this.config.Label.type;
if(labelType != 'Native') {
var that = this;
this.graph.eachNode(function(n) { that.labels.hideLabel(n, false); });
}
this.busy = false;
this.compute();
this.plot();
}
this.compute();
this.plot();
},

/*
Expand Down Expand Up @@ -170,11 +184,9 @@ $jit.Icicle = new Class({
that.compute();

if(config.animate) {
that.graph.nodeList.setDataset(['current', 'end'], {
'alpha': [1, 0] //fade nodes
});
that.graph.nodeList.setData('alpha', 0, 'end');

Graph.Util.eachSubgraph(node, function(n) {
node.eachSubgraph(function(n) {
n.setData('alpha', 1, 'end');
}, "ignore");

Expand Down Expand Up @@ -270,10 +282,20 @@ $jit.Icicle = new Class({
//animate the parent subtree
that.clickedNode = clickedNode;
//change nodes alpha
graph.nodeList.setDataset(['current', 'end'], {
'alpha': [0, 1]
});
GUtil.eachSubgraph(previousClickedNode, function(node) {
if (clickedNode) {
clickedNode.eachSubgraph(function(n) {
n.setDataset(['current', 'end'], {
'alpha': [0, 1]
});
}, "ignore");
} else {
graph.eachNode(function(n) {
n.setDataset(['current', 'end'], {
'alpha': [0, 1]
});
}, "ignore");
}
previousClickedNode.eachSubgraph(function(node) {
node.setData('alpha', 1);
}, "ignore");
that.fx.animate({
Expand Down Expand Up @@ -525,6 +547,7 @@ $jit.Icicle.Label.HTML = new Class( {

initialize: function(viz){
this.viz = viz;
this.config = viz.config;
},

/*
Expand All @@ -539,19 +562,29 @@ $jit.Icicle.Label.HTML = new Class( {
controller - A configuration/controller object passed to the visualization.
*/
placeLabel: function(tag, node, controller){
var pos = node.pos.getc(true), canvas = this.viz.canvas;
var radius = canvas.getSize();
var labelPos = {
x: Math.round(pos.x + radius.width / 2),
y: Math.round(pos.y + radius.height / 2)
};

var style = tag.style;
style.left = labelPos.x + 'px';
style.top = labelPos.y + 'px';
style.display = '';

controller.onPlaceLabel(tag, node);
if (!this.config.Label.useCSS3) {
tag.style.display = '';
var pos = node.pos.getc(true),
canvas = this.viz.canvas,
ox = canvas.translateOffsetX,
oy = canvas.translateOffsetY,
sx = canvas.scaleOffsetX,
sy = canvas.scaleOffsetY,
radius = canvas.getSize();
var labelPos = {
x: Math.round(pos.x * sx + ox + radius.width / 2),
y: Math.round(pos.y * sy + oy + radius.height / 2)
};

var style = tag.style;
style.left = labelPos.x + 'px';
style.top = labelPos.y + 'px';
style.width = node.getData('width') * sx + 'px';
style.height = node.getData('height') * sy + 'px';
style.zIndex = node._depth * 100;
style.display = '';
controller.onPlaceLabel(tag, node);
}
}
});

Expand Down
62 changes: 0 additions & 62 deletions Source/Visualizations/Treemap.js
View file
Expand Up @@ -653,68 +653,6 @@ TM.Label.HTML = new Class( {
this.leaf = viz.leaf;
},

prepareForAnimation: function(node, modes, opt) {
if (!this.config.Label.useCSS3) return;
var css3Props = this.css3Props,
canvas = this.viz.canvas,
size = canvas.getSize(),
nodeProps = modes['node-property'] || [],
pos = node.getPos('end').getc(true),
posStart = node.getPos('start').getc(true),
startWidth = node.getData('width', 'start'),
startHeight = node.getData('height', 'start'),
endWidth = node.getData('width', 'end'),
endHeight = node.getData('height', 'end'),
alpha = node.getData('alpha'),
alphaEnd = node.getData('alpha', 'end');

var label = this.getOrCreateLabel(node),
style = label.style,
pref = this.prefixes;

//animating alpha
if (alpha != alphaEnd) {
style.visibility = 'visible';
style.opacity = String(alpha);
//set properties
$.each(this.prefixesStyles, function(p) {
style[p + 'transition-property'] = 'opacity';
//TODO(nico) add transition
style[p + 'transition-duration'] = opt.duration + 'ms';
style[p + 'transition-delay'] = '200ms';
style[p + 'transition-timing-function'] = 'ease-in-out';
});
style.opacity = String(alphaEnd);
var wte = function() {
$.each(pref, function(p) {
label.removeEventListener(p + 'TransitionEnd', wte);
style.visibility = 'hidden';
});
};
if (alphaEnd == 0 && alpha == 1) {
$.each(pref, function(p) {
label.addEventListener(p + 'TransitionEnd', wte, false);
});
}
//changing the position or dimensions...
} else if (pos.x != posStart.x || pos.y != posStart.y || startWidth != endWidth || startHeight != endHeight) {
//set label transition properties.
$.each(this.prefixesStyles, function(p) {
style[p + 'transition-property'] = css3Props.join();
style[p + 'transition-duration'] = opt.duration + 'ms';
style[p + 'transition-delay'] = '200ms';
//TODO(nico) add transition
style[p + 'transition-timing-function'] = 'ease-in-out';
});

style.top = ((pos.y + size.height /2) >> 0) + 'px';
style.left = ((pos.x + size.width /2) >> 0) + 'px';
style.width = (endWidth >> 0) + 'px';
style.height = (endHeight >> 0) + 'px';
}
// opt.onBeforeAnimateLabel(label, node);
},

/*
placeLabel
Expand Down
3 changes: 3 additions & 0 deletions Templates/Icicle/test3.html
View file
@@ -0,0 +1,3 @@
$def with (model)

<div id="inner-details"></div>

0 comments on commit 75cda74

Please sign in to comment.