Ticket #7346 (closed defect: fixed)
Stroke and fill attributes lost when re-adding shape to surface on IE
| Reported by: | PetraRock | Owned by: | elazutkin |
|---|---|---|---|
| Priority: | high | Milestone: | 1.2 |
| Component: | DojoX GFX | Version: | 1.1.1 |
| Severity: | normal | Keywords: | gfx fill stroke |
| Cc: |
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>
