GFX (VML): Why insert the dojo team an additional "useless" div for an image object?

Submitted by FreeGroup on Wed, 10/01/2008 - 10:34.

Hi,

I'm trying to port my Draw2D lib (http://www.draw2d.org) to dojo.gfx

Now I have a small problem with the Surface.createImage implementation for VML.
The VML implementation embeddeds always the IMG in an additional DIV.

My problem is, that this DIV has always the size of the outer container (surface).
Like 5000x5000.

So - the Mover.js and Moveable.js imlementation doesn't work because the top
(last inserted image) always receives all mouse events.
This is related to the size of the "useless" DIV of the image.

I have removed the outer div in the VML implementation and it works fine.

=========================
createImage: function(image){
// summary: creates a VML image shape
// image: Object: an image object (see dojox.gfx.defaultImage)
if(!this.rawNode) return null;
var shape = new dojox.gfx.Image();
// PATCH FOR DRAW2D
// var node = this.rawNode.ownerDocument.createElement('div');
// node.style.position = "absolute";
// node.style.width = this.rawNode.style.width;
// node.style.height = this.rawNode.style.height;
// var img = this.rawNode.ownerDocument.createElement('img');
// img.style.position = "relative";
// node.appendChild(img);
// shape.setRawNode(node);
// this.rawNode.appendChild(node);
// shape.setShape(image);
// this.add(shape);
// return shape; // dojox.gfx.Image

var img = this.rawNode.ownerDocument.createElement('img');
img.style.position = "relative";
shape.setRawNode(img);
this.rawNode.appendChild(img);
shape.setShape(image);
this.add(shape);
return shape; // dojox.gfx.Image
// PATCH END

},
==========================

Question: Did I have lost any functionality if I remove this "useless" div??

Greetings

Andreas

Login or register to post comments
Unsubscribe post

IIRC the div is there for transformations...

Submitted by ttrenka on Wed, 10/01/2008 - 14:28.

...such as rotation and scaling. IIRC, there were issues with VML and images--a really weird bug--where if the image was in a background and not wrapped in a div or in some sort of group, odd things happened when you tried to transform something that is sitting on top of it.

I'd suggest trying out a transformation on the image before removing the div; we usually do things like that for a reason, even though it might not be obvious.

Hi, thanks for the fast

Submitted by FreeGroup on Wed, 10/01/2008 - 14:50.

Hi,

thanks for the fast reply!!

Scaling of the surface works fine.
I think I will test more and report curios behaviours.

Question: Is a solution available that the image and the Mover.js works fine in the
VML version?

Greetings and Thanks for the support

Andreas

Unfortunately there is no

Submitted by eugene on Wed, 10/01/2008 - 17:52.

Unfortunately there is no good solution for that.

There is one possibility to do it for scaled images only. We may implement two different implementations of the image shape and switch between them automatically. The first one will use a native VML image that can be scaled, but no other transformations are possible. Obviously it will be used for simple cases. In case of more complex operations we switch to the current implementation (img wrapped in div). I think this solution will cover majority of cases. But it'll make the VML renderer's code even bigger than it is right now.

Hi, another solution could

Submitted by FreeGroup on Wed, 10/01/2008 - 18:15.

Hi,

another solution could be to set the size of the div to
the boundig box of the image?

Greetings

Andreas

Very good suggestion. But it

Submitted by eugene on Sat, 10/04/2008 - 19:14.

Very good suggestion. But it doesn't work. The image will be clipped on this unrotated div boundaries. But if your suggestion is actually backed up be the real working code — I would love to see it.

Search