Opened 11 years ago
Closed 4 years ago
#8371 closed defect (patchwelcome)
dojox.gfx mouseover/setShape bug in IE VML
| Reported by: | avenema | Owned by: | Eugene Lazutkin |
|---|---|---|---|
| Priority: | low | Milestone: | 1.13 |
| Component: | DojoX GFX | Version: | 1.2.3 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description
In Internet Explorer, calling setShape from within a shape's mouseover event handler yields unexpected results. If manually triggering the handler function (i.e. via a button click), setShape behaves as expected. Firefox behaves normally.
The sample code below demonstrates the problem. When mousing over the rectangle, the expected behaviour is for the rectangle to move from (100, 100) to (150, 100). Instead, the rectangle jumps somewhere to the far lower-right corner of the browser content pane (evidenced by scrollbars). Clicking the "Move" button triggers the same event handler, but yields the correct results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>VML MouseOver SetShape Bug</title>
<script type="text/javascript">
var djConfig = {
isDebug: true,
debugContainerId: 'debug',
parseOnLoad: true
};
</script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script language="javascript">
dojo.require('dojox.gfx');
function move() {
rect.setShape({ x: 150, y: 100 });
//rect.setTransform(dojox.gfx.matrix.translate(50, 0));
console.log(rect.getShape());
console.log(rect.getTransform());
}
dojo.addOnLoad(function() {
var canvas = dojox.gfx.createSurface(dojo.byId('canvas'), 300, 300);
rect = canvas.createRect({ x: 100, y: 100, width: 100, height: 100 }).setStroke('red').setFill('white');
rect.connect('mousemove', move);
});
</script>
</head>
<body>
<div id="canvas" style="border: #000 1px solid; width: 300px; height: 300px"></div>
<input type="button" onclick="move()" value="Move Manually" />
<div id="debug" style="width: 300px; height: 300px"></div>
</body>
</html>
It is worth noting that removing the DOCTYPE tag changes the behaviour. Still unexpected, but different.
Change History (5)
comment:1 Changed 11 years ago by
comment:2 Changed 11 years ago by
| Milestone: | tbd → future |
|---|---|
| Priority: | high → normal |
| Status: | new → assigned |
comment:3 Changed 11 years ago by
One more note, it doesn't happen with any elements other than rectangles. As a workaround, you can use a polyline.
comment:4 Changed 8 years ago by
| Priority: | high → low |
|---|
comment:5 Changed 4 years ago by
| Milestone: | future → 1.12 |
|---|---|
| Resolution: | → patchwelcome |
| Status: | assigned → closed |
Given that no one has shown interest in creating a patch in the past 5+ years, I'm closing this as patchwelcome.
It's also worth noting that if you add a "window.setTimeout" wrapper around the function, it is successful. This isn't a good workaround, because if subsequent calls are made to GET the information, the results will be incorrect (since they've not been applied yet).
The (bad) fix:
function move() {
}