Opened 11 years ago

Closed 11 years ago

Last modified 10 years ago

#7346 closed defect (fixed)

Stroke and fill attributes lost when re-adding shape to surface on IE

Reported by: PetraRock Owned by: Eugene Lazutkin
Priority: high Milestone: 1.2
Component: DojoX GFX Version: 1.1.1
Keywords: gfx fill stroke Cc:
Blocked By: Blocking:

Description

Add a shape (e.g., a rectangle) with fill color and stroke color to a surface, remove it, and then add it to the surface again (without recreating the shape). On Firefox 2.0.0.16, the shape is rendered again with the fill color and stroke color as expected. On Internet Explorer 6 and 7, once the shape is removed from the surface, on all following adds, the shape is displayed with no fill and a black stroke outline. It does not matter if the opacity of the fill is solid or partially transparent. This problem can be worked around on IE by resetting the stroke and fill colors following the add, but it seems like the dojox.gfx package should account for this browser difference. This problem was observed on Windows XP in Dojo 1.1.1, but it also occurs in Dojo 1.0.0 and Dojo 1.1.0.

Here is a sample that demonstrates the problem. A checkbox is used to add and remove a rectangle shape from the surface. The code to work around the problem is commented out in order to demonstrate the problem and then show how the work around solves the problem.

<html>
<head>
  <title>IE bug test</title>
  <link rel="sytlesheet" type="text/css" 

href="http://o.aolcdn.com/dojo/1.1.1/dojo/resources/dojo.css" />


<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js"></script>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dijit/dijit.js"></script>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojox/gfx.js"></script>

<script type="text/javascript">

  dojo.require("dojox.gfx");
  dojo.require("dijit.form.CheckBox");
  dojo.require("dojo.parser");
  
  dojo.addOnLoad(function() {
        dojo.parser.parse(dojo.byId("test"));
        render();
    });

  var surface = null;
  var rect = null;

  function render() {
     surface = dojox.gfx.createSurface(dojo.byId("s1"), 300, 300);
     // surface.createCircle({cx : 120, cy : 120, r : 10}) .setFill("blue");
  }

  function cbClicked() {
      if (dijit.byId("cb1").checked) {
          if (rect == null) {
              rect = surface.createRect({x: 100, y : 100, width: 100, height: 100}) 

.setFill("lime").setStroke("green");
          }
          else {
             surface.add(rect);
             // removing comments on the following if block works around problem on IE
             // if (dojo.isIE) {
                // reset the fill and border colors
             //    rect.setFill("lime");
             //    rect.setStroke("green");
             // }
          }
      }
      else {
          surface.remove(rect);
      }
  }
</script>


</head>

<body>
<div id="test">
  <input type="checkbox" dojoType="dijit.form.CheckBox" name="cb1" id="cb1" value="foo"  
    onClick="cbClicked()">
  <label for="cb1">Add transparent box to the surface</label>
  <div id="s1">
  </div>
</div>
</body>

</html>

Change History (4)

comment:1 Changed 11 years ago by Eugene Lazutkin

Milestone: future

Moving all open ticketd to the future.

comment:2 Changed 11 years ago by Eugene Lazutkin

Priority: normalhigh
Status: newassigned

comment:3 Changed 11 years ago by Eugene Lazutkin

Resolution: fixed
Status: assignedclosed

(In [15165]) gfx: fixes #7346, !strict, thx PetraRock?!

comment:4 Changed 11 years ago by Eugene Lazutkin

Milestone: future1.2
Note: See TracTickets for help on using tickets.