SpaceTree on Internet Explorer
Anibal Cucco
What's the best way to make spacetrees work on Internet Explorer?.
Thanks,
Anibal Cucco
Nico Garcia Belmonte
Unfortunately the Spacetree does not support IE:
http://blog.thejit.org/javascript-information-visualization-toolkit-jit/#support.
This is due to the fact that the excanvas library can't support
clearRect properly:
http://groups.google.com/group/google-excanvas/browse_thread/thread/3844be27fc3f525f
One could change the code of the Spacetree to make it work in IE, but
that would require to clear the hole canvas when a subtree is
contracting or expanding, and at each frame redraw the whole tree.
Although I'm still considering that as a possibility for next
releases, I think it will have a strong impact in performance, and
that's why I'm not implementing those changes for the moment.
sorry,
--
I would never die for my beliefs because I might be wrong.
Bertrand Russell
Anibal Cucco
Didn't you try with the solution proposed in the excanvas group in the link you sent? (http://groups.google.com/group/google-excanvas/browse_thread/thread/3844be27fc3f525f)
Changing this method in the excanvas code:
contextPrototype.clearRect = function() {
this.element_.innerHTML = "";
this.currentPath_ = [];
};
For this:
contextPrototype.clearRect = function(x, y, width, height) {
var x = (x) ? x : 0;
var y = (y) ? y : 0;
var width = (width) ? width : canvas.offsetWidth;
var height = (height) ? height : canvas.offsetHeight;
for (var i = 0; i < this.element_.childNodes.length; i++) {
var shape = this.element_.childNodes[i];
if (shape.offsetLeft >= x && shape.offsetTop >= y &&
(shape.offsetLeft + shape.offsetWidth) <= (x + width) &&
(shape.offsetTop + shape.offsetHeight) <= (y + height)) {
this.element_.removeChild(shape);
i--;
}
}
this.currentPath_ = [];
};
I did it and it still doesn't work but i don't know if i understand correctly the patch or if i have to do something extra. Do you understand the patch proposed?
Thanks,
Anibal Cucco
Nico Garcia Belmonte
Thanks for your advice.
I've tested it and it doesn't work.
I also checked for MooCanvas, to see if they implemented a workaround,
but still no luck:
/*
Property: clearRect
Clears the pixels in the specified rectangle.
If height or width are zero has no effect.
If no arguments, clears all of the canvas
Currently, clearRect clears all of the canvas.
*/
However, there is a hack you can do that can make it work.
If you know a priori the background color of the canvas object, then
you could replace the clearRectangle Canvas method I defined in the
visualization in order to plot a fillRect instead of a clearRect,
having as fill color the background color of the canvas.
The code would be something like this:
/*
Method: clearReactangle
Same as <clear> but only clears a section of the canvas.
Parameters:
top - An integer specifying the top of the rectangle.
right - An integer specifying the right of the rectangle.
bottom - An integer specifying the bottom of the rectangle.
left - An integer specifying the left of the rectangle.
*/
clearRectangle: function (top, right, bottom, left) {
var ctx = this.ctx;
var f0 = ctx.fillStyle;
ctx.fillStyle = '#333'; //hardcoded canvas background color.
ctx.fillRect(left, top, right - left, bottom - top);
ctx.fillStyle = f0;
//this.ctx.clearRect(left, top-2, right - left +2, Math.abs(bottom - top)+5);
},
I've tested it and it works quite well.
There are still a couple of things to do in order to make it work (a
coulple of silly bugs I've found for IE that I've already fixed, and
also you have to strip off the canvas detection in the constructor for
the Canvas object).
I'm attaching a file with these changes (I think that that works in
the google groups?). Please let me know if you find more problems.
Hope it helped!
Nick
color I'm using in the examples.
I think that the default background color I'm using is something like
'#222'.
Bye,
> > Changing this method in the excanvas code:
>
> > contextPrototype.clearRect = function() {
> > this.element_.innerHTML = "";
> > this.currentPath_ = [];
> > };
>
> > For this:
>
> > contextPrototype.clearRect = function(x, y, width, height) {
> > var x = (x) ? x : 0;
> > var y = (y) ? y : 0;
> > var width = (width) ? width : canvas.offsetWidth;
> > var height = (height) ? height : canvas.offsetHeight;
> > for (var i = 0; i < this.element_.childNodes.length; i++) {
> > var shape = this.element_.childNodes[i];
> > if (shape.offsetLeft >= x && shape.offsetTop >= y &&
> > (shape.offsetLeft + shape.offsetWidth) <= (x + width) &&
> > (shape.offsetTop + shape.offsetHeight) <= (y + height)) {
> > this.element_.removeChild(shape);
> > i--;
> > }
> > }
> > this.currentPath_ = [];
> > };
>
> > I did it and it still doesn't work but i don't know if i understand
> > correctly the patch or if i have to do something extra. Do you understand
> > the patch proposed?
>
> > Thanks,
> > Anibal Cucco
>
>
> >> Hi,
> >> Unfortunately the Spacetree does not support IE:
>
> >> clearRect properly:
>
> >> that would require to clear the hole canvas when a subtree is
> >> contracting or expanding, and at each frame redraw the whole tree.
> >> Although I'm still considering that as a possibility for next
> >> releases, I think it will have a strong impact in performance, and
> >> that's why I'm not implementing those changes for the moment.
>
> >> sorry,
>
> >> > Hi Nico,
>
> >> > What's the best way to make spacetrees work on Internet Explorer?.
>
> >> > Thanks,
> >> > Anibal Cucco
>
> >> --
> >> I would never die for my beliefs because I might be wrong.
>
> >> Bertrand Russell
>
> --
> I would never die for my beliefs because I might be wrong.
>
> Bertrand Russell
>
> 69KViewDownload