PDA

View Full Version : Portlet + Raphael + Webkit = doh (redraw problem)



sohail
7 Mar 2010, 7:44 AM
Hi there,

I'm trying to get a Raphael JS (http://raphaeljs.com) render going inside a portlet in Webkit but I'm having major issues:


For some reason, it is rendered twice
When I drag and drop the portal to another column, it seems the z-index of the Raphael canvas is screwed up because it appears and disappears

The simple code I am using is below. No amount of overriding render() or anything else works. Initially, I had a render() function but that didn't work so I tried to draw using events. That didn't work either :)

Does anyone know what the problem is?



TestPortlet = Ext.extend(Ext.ux.Portlet,{
constructor: function(config)
{
var canvasId = Ext.id();

Ext.apply(this,config,{
title: $tr("Test"),
height: 300,
html: new Ext.Template("<div id='{0}'></div>").apply([canvasId]),
});

TestPortlet.superclass.constructor.apply(this,arguments);

this.on('added',
function()
{
if(this.getEl())
{
if(!this.paper)
this.paper = Raphael(canvasId,300,300);
}
});

this.on('afterlayout',
function()
{
if(this.paper)
this.paper.circle(150,150,100);
});

this.on('expanded',
function()
{
if(this.paper)
this.paper.circle(150,150,100);
});
}
});

Animal
7 Mar 2010, 12:23 PM
Use my Raphael ux

sohail
7 Mar 2010, 12:25 PM
Hi,

I presume you've solved this problem with your component? Would you be so kind as to tell me why this is happening? I will try yours as soon as I finish setting up this build machine.

Thanks!

Animal
7 Mar 2010, 1:31 PM
You call Raphael every time your Portlet is added.

Why?

sohail
7 Mar 2010, 1:32 PM
I only do it if it hasn't been done already. I'll try yours and see if it works!

sohail
11 Mar 2010, 6:14 PM
Ok, I managed to make yours work but had to use this.paper instead of being able to call the functions on the ux.Raphael object itself.

Animal
12 Mar 2010, 1:18 AM
Hmm. I'll take a look later. It should import all the Raphael functions into itself, so that you can use it as a Raphael object.

sohail
12 Mar 2010, 6:50 AM
Additionally, if I just drew a simple circle, dragging/dropping has the same problem as described above. There must be something simple I'm missing.

I will get a test case for you.