Opened 10 years ago

Closed 3 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 10 years ago by jvenema

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() {

window.setTimeout(function(){

rect.setShape({ x: 150, y: 100 });

},1);

}

comment:2 Changed 10 years ago by Eugene Lazutkin

Milestone: tbdfuture
Priority: highnormal
Status: newassigned

comment:3 Changed 10 years ago by jvenema

One more note, it doesn't happen with any elements other than rectangles. As a workaround, you can use a polyline.

comment:4 Changed 7 years ago by ben hockey

Priority: highlow

comment:5 Changed 3 years ago by dylan

Milestone: future1.12
Resolution: patchwelcome
Status: assignedclosed

Given that no one has shown interest in creating a patch in the past 5+ years, I'm closing this as patchwelcome.

Note: See TracTickets for help on using tickets.