Ticket #6137: test_group_bug.html

File test_group_bug.html, 4.6 kB (added by guest, 10 months ago)
Line 
1<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
2<head>
3<title>Dojo Unified 2D Graphics</title>
4<style type="text/css">
5    @import "../../../dojo/resources/dojo.css";
6    @import "../../../dijit/tests/css/dijitTests.css";
7</style>
8<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
9
10
11<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
12<script type="text/javascript">
13    dojo.require("dojox.gfx");
14
15    var surface = null;
16    var group = null;
17    var group1 = null;
18    var group2 = null;
19    var group3 = null;
20    var circle = null;
21    var pathShape = null;
22    var path = [];
23    var paths = [
24        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -320 -1 l 320 -23z",
25        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -310 6 l 310 -30 l 0 -8",
26        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -304 11 l 304 -35 l 0 -8",
27        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -295 16 l 295 -40 l 0 -8",
28        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -282 21 l 282 -45 l 0 -8",
29        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -265 29 l 265 -53 l 0 -8",
30        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -246 36 l 246 -60 l 0 -8",
31        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -238 40 l 238 -64 l 0 -8",
32        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -235 40 l 235 -64 l 0 -8",
33        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -232 40 l 232 -64 l 0 -8",
34        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -230 40 l 230 -64 l 0 -8",
35        "m 0 0l 38 0 l 114 0 l 38 0 l 0 8 l 0 24 l 0 8 l -38 0 l -114 0 l -38 0 l 0 -8 l -228 40 l 228 -64 l 0 -8",
36    ];
37
38    makeShapes = function() {
39        surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500);
40        // make a checkerboard
41        for (var i = 0; i < 500; i += 100) {
42            for (var j = 0; j < 500; j += 100) {
43                if (i % 200 == j % 200) {
44                    surface.createRect({ x: i, y: j }).setFill([255, 0, 0, 0.1]);
45                }
46            }
47        }
48
49        group = surface.createGroup();
50        group1 = surface.createGroup();
51        group2 = surface.createGroup();
52        group3 = surface.createGroup();
53
54        circle = surface.createCircle({cx: 0, cy: 0, r:20}).setFill("red").setStroke({width: 1, color: "blue"});
55        var c1 = surface.createCircle({cx: 0, cy: 100, r:10}).setFill("yellow").setStroke({width: 1, color: "blue"});
56        var c2 = surface.createCircle({cx: 100, cy: 100, r:10}).setFill("yellow").setStroke({width: 1, color: "blue"});
57        var c3 = surface.createCircle({cx: 100, cy: 0, r:10}).setFill("yellow").setStroke({width: 1, color: "blue"});
58        var c4 = surface.createCircle({cx: 0, cy: 0, r:10}).setFill("yellow").setStroke({width: 1, color: "blue"});
59        var r = surface.createRect({w: 10, h:20}).setFill("blue").setStroke({width: 1, color: "red"});
60
61
62        pathShape = surface.createPath(createPath()).setStroke({width: 1, color: "black"});
63
64
65        group1.add(pathShape);
66        group.add(circle);
67        group2.add(r);
68        group2.add(c1);
69        group2.add(c2);
70        group2.add(c3);
71        group2.add(c4);
72
73
74        for (var i = 0; i < paths.length; i++) {
75            var p = surface.createPath(paths[i]).setStroke({width: 1, color: "black"});
76            group3.add(p);
77        }
78
79        group1.setTransform({dx: 300, dy: 300});
80        group2.setTransform({dx: 100, dy: 100});
81        group3.setTransform({dx: 320, dy: 250});
82
83
84
85
86        setTimeout(move, 100);
87    };
88
89    function createPath() {
90        var s = "m 0 0";
91        for (var i = 0; i < path.length; i++) {
92            s += "l" + path[i].x + " " + path[i].y;
93        }
94        return s;
95    }
96
97    function move() {
98        var shape = circle.getShape()
99        shape.cx -= 2;
100        shape.cy -= 2;
101        circle.setShape(shape);
102        path.push({x: -1, y: -1})
103        pathShape.setShape(createPath());
104
105        if (shape.cx > - 200) {
106            setTimeout(move, 10);
107        }
108    }
109
110    dojo.addOnLoad(makeShapes);
111
112</script>
113</head>
114<body>
115<h1>Moving an element out of a surface causes shift of all shapes on the surface</h1>
116
117<div id="test"></div>
118</body>
119</html>