diff options
author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-14 15:39:19 +0000 |
---|---|---|
committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-14 15:39:19 +0000 |
commit | 1c5685d68f1b73270fb814fe04cbb490eb90ba5f (patch) | |
tree | 3d3ada08a934b96fc31531f1327690d7edc6f766 /includes/js/dojox/gfx/tests | |
parent | 104d59099e048688c4dbac37d72137006e396558 (diff) | |
download | semanticscuttle-1c5685d68f1b73270fb814fe04cbb490eb90ba5f.tar.gz semanticscuttle-1c5685d68f1b73270fb814fe04cbb490eb90ba5f.tar.bz2 |
Minor fix: Remove DOJO library (60Mo) replaced by link to Google CDN (online DOJO library)
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@159 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/gfx/tests')
24 files changed, 0 insertions, 2228 deletions
diff --git a/includes/js/dojox/gfx/tests/decompose.js b/includes/js/dojox/gfx/tests/decompose.js deleted file mode 100644 index b488bdd..0000000 --- a/includes/js/dojox/gfx/tests/decompose.js +++ /dev/null @@ -1,114 +0,0 @@ -if(!dojo._hasResource["dojox.gfx.tests.decompose"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. -dojo._hasResource["dojox.gfx.tests.decompose"] = true; -dojo.provide("dojox.gfx.tests.decompose"); -dojo.require("dojox.gfx.decompose"); - -(function(){ - var m = dojox.gfx.matrix; - var eq = function(t, a, b){ t.t(2 * Math.abs(a - b) / ((a < 1 && b < 1) ? 1 : a + b) < 1e-6); }; - var eqM = function(t, a, b){ - eq(t, a.xx, b.xx); - eq(t, a.yy, b.yy); - eq(t, a.xy, b.xy); - eq(t, a.yx, b.yx); - eq(t, a.dx, b.dx); - eq(t, a.dy, b.dy); - }; - var compose = function(r){ - return m.normalize([ - m.translate(r.dx, r.dy), - m.rotate(r.angle2), - m.scale(r.sx, r.sy), - m.rotate(r.angle1) - ]); - }; - var reconstruct = function(a){ - return compose(dojox.gfx.decompose(a)); - }; - var compare = function(t, a){ - var A = m.normalize(a); - eqM(t, A, reconstruct(A)); - }; - tests.register("dojox.gfx.tests.decompose", [ - function IdentityTest(t){ - compare(t, m.identity); - }, - function FlipXTest(t){ - compare(t, m.flipX); - }, - function FlipYTest(t){ - compare(t, m.flipY); - }, - function FlipXYTest(t){ - compare(t, m.flipXY); - }, - function TranslationTest(t){ - compare(t, m.translate(45, -15)); - }, - function RotationTest(t){ - compare(t, m.rotateg(35)); - }, - function SkewXTest(t){ - compare(t, m.skewXg(35)); - }, - function SkewYTest(t){ - compare(t, m.skewYg(35)); - }, - function ReflectTest(t){ - compare(t, m.reflect(13, 27)); - }, - function ProjectTest(t){ - compare(t, m.project(13, 27)); - }, - function ScaleTest1(t){ - compare(t, m.scale(3)); - }, - function ScaleTest2(t){ - compare(t, m.scale(3, -1)); - }, - function ScaleTest3(t){ - compare(t, m.scale(-3, 1)); - }, - function ScaleTest4(t){ - compare(t, m.scale(-3, -1)); - }, - function ScaleRotateTest1(t){ - compare(t, [m.scale(3), m.rotateAt(35, 13, 27)]); - }, - function ScaleRotateTest2(t){ - compare(t, [m.scale(3, -1), m.rotateAt(35, 13, 27)]); - }, - function ScaleRotateTest3(t){ - compare(t, [m.scale(-3, 1), m.rotateAt(35, 13, 27)]); - }, - function ScaleRotateTest4(t){ - compare(t, [m.scale(-3, -1), m.rotateAt(35, 13, 27)]); - }, - function RotateScaleTest1(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(3)]); - }, - function RotateScaleTest2(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(3, -1)]); - }, - function RotateScaleTest3(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, 1)]); - }, - function RotateScaleTest4(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, -1)]); - }, - function RotateScaleRotateTest1(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(3), m.rotateAt(-15, 163, -287)]); - }, - function RotateScaleRotateTest2(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(3, -1), m.rotateAt(-15, 163, -287)]); - }, - function RotateScaleRotateTest3(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, 1), m.rotateAt(-15, 163, -287)]); - }, - function RotateScaleRotateTest4(t){ - compare(t, [m.rotateAt(35, 13, 27), m.scale(-3, -1), m.rotateAt(-15, 163, -287)]); - } - ]); -})(); - -} diff --git a/includes/js/dojox/gfx/tests/matrix.js b/includes/js/dojox/gfx/tests/matrix.js deleted file mode 100644 index 282ec36..0000000 --- a/includes/js/dojox/gfx/tests/matrix.js +++ /dev/null @@ -1,228 +0,0 @@ -if(!dojo._hasResource["dojox.gfx.tests.matrix"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. -dojo._hasResource["dojox.gfx.tests.matrix"] = true; -dojo.provide("dojox.gfx.tests.matrix"); -dojo.require("dojox.gfx.matrix"); - -(function(){ - var m = dojox.gfx.matrix; - var eq = function(t, a, b){ t.t(2 * Math.abs(a - b) / ((a < 1 && b < 1) ? 1 : a + b) < 1e-6); }; - tests.register("dojox.gfx.tests.matrix", [ - function IdentityTest(t){ - var a = new m.Matrix2D(); - eq(t, a.xx, 1); - eq(t, a.yy, 1); - eq(t, a.xy, 0); - eq(t, a.yx, 0); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - }, - function Rot30gTest(t){ - var a = m.rotateg(30); - eq(t, a.xx, a.yy); - eq(t, a.xy, -a.yx); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - eq(t, a.yx, 0.5); - t.t(a.xy < 0); - t.t(a.yx > 0); - }, - function Rot45gTest(t){ - var a = m.rotateg(45); - eq(t, a.xx, a.yy); - eq(t, a.xy, -a.yx); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - eq(t, a.xx, a.yx); - eq(t, a.yy, -a.xy); - }, - function Rot90gTest(t){ - var a = m.rotateg(90); - eq(t, a.xx, a.yy); - eq(t, a.xy, -a.yx); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - eq(t, a.xx, 0); - eq(t, a.yx, 1); - }, - function CombineIdentitiesTest(t){ - var a = m.normalize([new m.Matrix2D(), new m.Matrix2D(), new m.Matrix2D()]); - eq(t, a.xx, 1); - eq(t, a.yy, 1); - eq(t, a.xy, 0); - eq(t, a.yx, 0); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - }, - function CombineExclusiveTest(t){ - var a = m.normalize([m.rotateg(30), m.rotateg(-30)]); - eq(t, a.xx, 1); - eq(t, a.yy, 1); - eq(t, a.xy, 0); - eq(t, a.yx, 0); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - }, - function CombineInvertedTest(t){ - var a = m.normalize([m.rotateg(30), m.invert(m.rotateg(30))]); - eq(t, a.xx, 1); - eq(t, a.yy, 1); - eq(t, a.xy, 0); - eq(t, a.yx, 0); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - }, - function Rot90gAtTest(t){ - var a = m.rotategAt(90, 10, 10); - eq(t, a.xx, a.yy); - eq(t, a.xy, -a.yx); - eq(t, a.dx, 20); - eq(t, a.dy, 0); - eq(t, a.xx, 0); - eq(t, a.yx, 1); - }, - function MultPointTest1(t){ - var b = m.multiplyPoint(m.rotategAt(90, 10, 10), 10, 10); - eq(t, b.x, 10); - eq(t, b.y, 10); - }, - function MultPointTest2(t){ - var b = m.multiplyPoint(m.rotategAt(90, 10, 10), {x: 10, y: 5}); - eq(t, b.x, 15); - eq(t, b.y, 10); - }, - function MultPointTest3(t){ - var b = m.multiplyPoint(m.rotategAt(90, 10, 10), 10, 15); - eq(t, b.x, 5); - eq(t, b.y, 10); - }, - function ScaleTest1(t){ - var a = m.normalize([m.scale(2, 1), m.invert(m.rotateg(45))]); - eq(t, a.xx, 2 * a.yy); - eq(t, a.xy, -2 * a.yx); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - eq(t, a.xx, a.xy); - eq(t, a.yy, -a.yx); - }, - function ScaleTest2(t){ - var a = m.normalize([m.scale(1, 2), m.invert(m.rotateg(45))]); - eq(t, 2 * a.xx, a.yy); - eq(t, 2 * a.xy, -a.yx); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - eq(t, a.xx, a.xy); - eq(t, a.yy, -a.yx); - }, - function ScaleTest3(t){ - var a = m.normalize([m.rotateg(45), m.scale(2, 1)]); - eq(t, a.xx, 2 * a.yy); - eq(t, a.yx, -2 * a.xy); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - eq(t, a.xx, a.yx); - eq(t, a.yy, -a.xy); - }, - function ScaleTest4(t){ - var a = m.normalize([m.rotateg(45), m.scale(1, 2)]); - eq(t, 2 * a.xx, a.yy); - eq(t, 2 * a.yx, -a.xy); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - eq(t, a.xx, a.yx); - eq(t, a.yy, -a.xy); - }, - function ScaleTest5(t){ - var a = m.normalize([m.rotategAt(45, 100, 100), m.scale(2)]); - eq(t, a.xx, a.yy); - eq(t, a.xy, -a.yx); - eq(t, a.xx, a.yx); - eq(t, a.yy, -a.xy); - eq(t, a.dx, 100); - t.t(a.dy < 0); - var b = m.normalize([m.scale(2), m.rotategAt(45, 100, 100)]); - eq(t, b.xx, b.yy); - eq(t, b.xy, -b.yx); - eq(t, b.xx, b.yx); - eq(t, b.yy, -b.xy); - eq(t, b.dx, 200); - t.t(b.dy < 0); - eq(t, a.xx, b.xx); - eq(t, a.xy, b.xy); - eq(t, a.yx, b.yx); - eq(t, a.yy, b.yy); - eq(t, 2 * a.dx, b.dx); - eq(t, 2 * a.dy, b.dy); - var c = m.normalize([m.rotateg(45), m.scale(2)]); - eq(t, c.xx, c.yy); - eq(t, c.xy, -c.yx); - eq(t, c.xx, c.yx); - eq(t, c.yy, -c.xy); - eq(t, c.dx, 0); - eq(t, c.dy, 0); - var d = m.normalize([m.scale(2), m.rotateg(45)]); - eq(t, d.xx, d.yy); - eq(t, d.xy, -d.yx); - eq(t, d.xx, d.yx); - eq(t, d.yy, -d.xy); - eq(t, d.dx, 0); - eq(t, d.dy, 0); - eq(t, a.xx, c.xx); - eq(t, a.xy, c.xy); - eq(t, a.yx, c.yx); - eq(t, a.yy, c.yy); - eq(t, a.xx, d.xx); - eq(t, a.xy, d.xy); - eq(t, a.yx, d.yx); - eq(t, a.yy, d.yy); - }, - function ScaleTest6(t){ - var a = m.normalize(6); - eq(t, a.xx, 6); - eq(t, a.yy, 6); - eq(t, a.xy, 0); - eq(t, a.yx, 0); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - }, - function ScaleTest7(t){ - var a = m.normalize([2, m.scale(2, 1)]); - eq(t, a.xx, 4); - eq(t, a.yy, 2); - eq(t, a.xy, 0); - eq(t, a.yx, 0); - eq(t, a.dx, 0); - eq(t, a.dy, 0); - }, - function TranslateTest(t){ - var a = m.normalize({dx: 100, dy: 200}); - eq(t, a.xx, 1); - eq(t, a.yy, 1); - eq(t, a.xy, 0); - eq(t, a.yx, 0); - eq(t, a.dx, 100); - eq(t, a.dy, 200); - }, - function ReflectTest1(t){ - var b = m.multiplyPoint(m.reflect(1, 1), 1, 0); - eq(t, b.x, 0); - eq(t, b.y, 1); - }, - function ReflectTest2(t){ - var b = m.multiplyPoint(m.reflect(1, 1), 0, 1); - eq(t, b.x, 1); - eq(t, b.y, 0); - }, - function ProjectTest1(t){ - var b = m.multiplyPoint(m.project(1, 1), 1, 0); - eq(t, b.x, 0.5); - eq(t, b.y, 0.5); - }, - function ProjectTest2(t){ - var b = m.multiplyPoint(m.project(1, 1), 0, 1); - eq(t, b.x, 0.5); - eq(t, b.y, 0.5); - } - ]); -})(); - -} diff --git a/includes/js/dojox/gfx/tests/module.js b/includes/js/dojox/gfx/tests/module.js deleted file mode 100644 index 0790b6b..0000000 --- a/includes/js/dojox/gfx/tests/module.js +++ /dev/null @@ -1,13 +0,0 @@ -if(!dojo._hasResource["dojox.gfx.tests.module"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. -dojo._hasResource["dojox.gfx.tests.module"] = true; -dojo.provide("dojox.gfx.tests.module"); - -try{ - dojo.require("dojox.gfx.tests.matrix"); - dojo.require("dojox.gfx.tests.decompose"); -}catch(e){ - doh.debug(e); -} - - -} diff --git a/includes/js/dojox/gfx/tests/runTests.html b/includes/js/dojox/gfx/tests/runTests.html deleted file mode 100644 index 4e13179..0000000 --- a/includes/js/dojox/gfx/tests/runTests.html +++ /dev/null @@ -1,9 +0,0 @@ -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> -<html> - <head> - <title>Dojox Unit Test Runner</title> - <meta http-equiv="REFRESH" content="0;url=../../../util/doh/runner.html?testModule=dojox.gfx.tests.module"></HEAD> - <BODY> - Redirecting to D.O.H runner. - </BODY> -</HTML> diff --git a/includes/js/dojox/gfx/tests/test_arc.html b/includes/js/dojox/gfx/tests/test_arc.html deleted file mode 100644 index f7fc589..0000000 --- a/includes/js/dojox/gfx/tests/test_arc.html +++ /dev/null @@ -1,71 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing arc</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<script type="text/javascript" src="../_base.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> -<script type="text/javascript" src="../arc.js"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface("test", 500, 500); - - var m = dojox.gfx.matrix; - var g1 = surface.createGroup(); - var g2 = g1.createGroup(); - - var rx = 100, ry = 60, xRotg = -30; - var startPoint = m.multiplyPoint(m.rotateg(xRotg), {x: -rx, y: 0 }); - var endPoint = m.multiplyPoint(m.rotateg(xRotg), {x: 0, y: -ry}); - - var re1 = g1.createPath() - .moveTo(startPoint) - .arcTo(rx, ry, xRotg, true, false, endPoint) - .setStroke({color: "red", width: 3}) - ; - var ge1 = g1.createPath() - .moveTo(re1.getLastPosition()) - .arcTo(rx, ry, xRotg, false, false, startPoint) - .setStroke({color: "black"}) - ; - var re2 = g2.createPath() - .moveTo(startPoint) - .arcTo(rx, ry, xRotg, false, true, endPoint) - .setStroke({color: "green", width: 3}) - ; - var ge2 = g2.createPath() - .moveTo(re2.getLastPosition()) - .arcTo(rx, ry, xRotg, true, true, startPoint) - .setStroke({color: "black"}) - ; - - g1.setTransform({dx: 200, dy: 200}); - g2.setTransform({dx: 10, dy: 10}); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<h1>Testing arc</h1> -<!--<p><button onclick="makeShapes();">Go</button></p>--> -<div id="test" style="width: 500px; height: 500px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_bezier.html b/includes/js/dojox/gfx/tests/test_bezier.html deleted file mode 100644 index bcee2d0..0000000 --- a/includes/js/dojox/gfx/tests/test_bezier.html +++ /dev/null @@ -1,85 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Approximation of an arc with bezier</title> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<script type="text/javascript" src="../_base.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> -<script type="text/javascript" src="../arc.js"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface("test", 500, 300); - var g = surface.createGroup(); - - // create a reference ellipse - var rx = 200; - var ry = 100; - var startAngle = -30; - var arcAngle = -90; - var axisAngle = -30; - var e = g.createEllipse({rx: rx, ry: ry}).setStroke({}); - - // calculate a bezier - var alpha = dojox.gfx.matrix._degToRad(arcAngle) / 2; // half of our angle - var cosa = Math.cos(alpha); - var sina = Math.sin(alpha); - // start point - var p1 = {x: cosa, y: sina}; - // 1st control point - var p2 = {x: cosa + (4 / 3) * (1 - cosa), y: sina - (4 / 3) * cosa * (1 - cosa) / sina}; - // 2nd control point (symmetric to the 1st one) - var p3 = {x: p2.x, y: -p2.y}; - // end point (symmetric to the start point) - var p4 = {x: p1.x, y: -p1.y}; - - // rotate and scale poins as appropriate - var s = dojox.gfx.matrix.normalize([dojox.gfx.matrix.scale(e.shape.rx, e.shape.ry), dojox.gfx.matrix.rotateg(startAngle + arcAngle / 2)]); - p1 = dojox.gfx.matrix.multiplyPoint(s, p1); - p2 = dojox.gfx.matrix.multiplyPoint(s, p2); - p3 = dojox.gfx.matrix.multiplyPoint(s, p3); - p4 = dojox.gfx.matrix.multiplyPoint(s, p4); - // draw control trapezoid - var t = g.createPath().setStroke({color: "blue"}); - t.moveTo(p1.x, p1.y); - t.lineTo(p2.x, p2.y); - t.lineTo(p3.x, p3.y); - t.lineTo(p4.x, p4.y); - t.lineTo(p1.x, p1.y); - t.moveTo((p1.x + p4.x) / 2, (p1.y + p4.y) / 2); - t.lineTo((p2.x + p3.x) / 2, (p2.y + p3.y) / 2); - t.moveTo((p1.x + p2.x) / 2, (p1.y + p2.y) / 2); - t.lineTo((p3.x + p4.x) / 2, (p3.y + p4.y) / 2); - // draw a bezier - var b = g.createPath().setStroke({color: "red"}); - b.moveTo(p1.x, p1.y); - b.curveTo(p2.x, p2.y, p3.x, p3.y, p4.x, p4.y); - // move everything in a middle - g.setTransform([dojox.gfx.matrix.translate(250, 150), dojox.gfx.matrix.rotateg(axisAngle)]); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<h1>Approximation of an arc with bezier</h1> -<!--<p><button onclick="makeShapes();">Make</button></p>--> -<div id="test" style="width: 500px; height: 300px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_decompose.html b/includes/js/dojox/gfx/tests/test_decompose.html deleted file mode 100644 index 6291cc2..0000000 --- a/includes/js/dojox/gfx/tests/test_decompose.html +++ /dev/null @@ -1,54 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing decompose</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<script type="text/javascript" src="../matrix.js"></script> -<script type="text/javascript" src="../decompose.js"></script> -<script type="text/javascript"> -dojo.require("dojox.gfx.decompose"); - -var m = dojox.gfx.matrix; - -var eq = function(a, b){ - return Math.abs((a - b) / (a + b)) < 1e-6; -}; - -var calc = function(){ - var matrix1 = eval("(m.normalize([" + dojo.byId("input").value + "]))"); - dojo.byId("matrix1").value = dojo.toJson(matrix1, true); - var result = dojox.gfx.decompose(matrix1); - dojo.byId("result").innerHTML = "Result: " + dojo.toJson(result); - var matrix2 = m.normalize([ - m.translate(result.dx, result.dy), - m.rotate(result.angle2), - m.scale(result.sx, result.sy), - m.rotate(result.angle1) - ]); - dojo.byId("matrix2").value = dojo.toJson(matrix2, true); -}; - -</script> -</head> -<body> - <h1>Testing decompose</h1> - <p> - <span style="font-size: 8pt;">Example: m.rotategAt(30, 100, 100), m.scaleAt(2, 3, 5, 5), m.rotate(45)</span><br /> - <input id="input" type="text" size="50" maxlength="200" /><button onclick="calc();">Calc</button> - </p> - <p id="result">Result:</p> - <p> - <span style="font-size: 8pt;">Original matrix</span><br /> - <textarea id="matrix1" cols="50" rows="8" readonly="readonly"></textarea> - </p> - <p> - <span style="font-size: 8pt;">Decomposed matrix</span><br /> - <textarea id="matrix2" cols="50" rows="8" readonly="readonly"></textarea> - </p> - <p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_fill.html b/includes/js/dojox/gfx/tests/test_fill.html deleted file mode 100644 index 84827ea..0000000 --- a/includes/js/dojox/gfx/tests/test_fill.html +++ /dev/null @@ -1,47 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing fill rule</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../_base.js"></script>--> -<!--<script type="text/javascript" src="../shape.js"></script>--> -<!--<script type="text/javascript" src="../path.js"></script>--> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface("test", 500, 500); - var path = surface.createPath(""); - // form concentric circles - var center = {x: 250, y: 250}; - for(var r = 200; r > 0; r -= 30){ - // make two 180 degree arcs to form a circle - var start = {x: center.x, y: center.y - r}; - var end = {x: center.x, y: center.y + r}; - path.moveTo(start).arcTo(r, r, 0, true, true, end).arcTo(r, r, 0, true, true, start).closePath(); - } - // set visual attributes - path.setFill("red").setStroke("black"); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> - <h1>Testing fill rule</h1> -<div id="test" style="width: 500px; height: 500px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_fx.html b/includes/js/dojox/gfx/tests/test_fx.html deleted file mode 100644 index c7b5b81..0000000 --- a/includes/js/dojox/gfx/tests/test_fx.html +++ /dev/null @@ -1,113 +0,0 @@ -<!doctype html> -<html> -<head> -<title>Testing animation</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!-- -<script type="text/javascript" src="../_base.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> -<script type="text/javascript" src="../arc.js"></script> -<script type="text/javascript" src="../fx.js"></script> ---> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> - -<script type="text/javascript"> -dojo.require("dojox.gfx"); -dojo.require("dojox.gfx.fx"); -dojo.require("dojo.colors"); - -var rect, text; - -var makeShapes = function(){ - var surface = dojox.gfx.createSurface("test", 500, 500); - rect = surface.createRect({x: 100, y: 100, width: 300, height: 300}) - .setFill("yellow").setStroke({ - color: "green", - width: 5, - join: "round" - }); - text = surface.createText({x: 250, y: 250, text: "Hello!", align: "middle"}) - .setFill("black").setFont({family: "serif", size: "10pt"}); -}; - -dojo.addOnLoad(makeShapes); - -var animateStroke = function(){ - var anim = dojox.gfx.fx.animateStroke({ - duration: 5000, - shape: rect, - color: {start: "green", end: "red"}, - width: {start: 5, end: 15}, - join: {values: ["miter", "bevel", "round"]} - }); - dojo.byId("stroke").disabled = "disabled"; - dojo.connect(anim, "onEnd", function(){ dojo.byId("stroke").disabled = ""; }); - anim.play(); -}; - -var animateFill = function(){ - var anim = dojox.gfx.fx.animateFill({ - duration: 5000, - shape: rect, - color: {start: "yellow", end: "blue"} - }); - dojo.byId("fill").disabled = "disabled"; - dojo.connect(anim, "onEnd", function(){ dojo.byId("fill").disabled = ""; }); - anim.play(); -}; - -var animateFont = function(){ - var anim = dojox.gfx.fx.animateFont({ - duration: 5000, - shape: text, - variant: {values: ["normal", "small-caps"]}, - size: {start: 10, end: 50, unit: "pt"} - }); - dojo.byId("font").disabled = "disabled"; - dojo.connect(anim, "onEnd", function(){ dojo.byId("font").disabled = ""; }); - anim.play(); -}; - -var animateTransform = function(){ - var anim = dojox.gfx.fx.animateTransform({ - duration: 5000, - shape: text, - transform: [ - {name: "rotategAt", start: [0, 250, 250], end: [360, 350, 350]}, - {name: "translate", start: [0, 0], end: [100, 100]} - ] - }); - dojo.byId("transform").disabled = "disabled"; - dojo.connect(anim, "onEnd", function(){ dojo.byId("transform").disabled = ""; }); - anim.play(); -}; -</script> -</head> -<body> -<h1>Testing animation</h1> -<p> - <button id="stroke" onclick="animateStroke();">Stroke</button> - - <button id="fill" onclick="animateFill();">Fill</button> - - <button id="font" onclick="animateFont();">Font</button> - - <button id="transform" onclick="animateTransform();">Transform</button> -</p> -<div id="test" style="width: 500px; height: 500px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_gfx.html b/includes/js/dojox/gfx/tests/test_gfx.html deleted file mode 100644 index 6d2bef3..0000000 --- a/includes/js/dojox/gfx/tests/test_gfx.html +++ /dev/null @@ -1,489 +0,0 @@ -<html> -<head> -<title>Dojo Unified 2D Graphics</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, gfxRenderer: 'svg,silverlight,vml'"></script> -<!--<script type="text/javascript" src="../_base.js"></script>--> -<!--<script type="text/javascript" src="../path.js"></script>--> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> - -dojo.require("dojox.gfx"); - -var gTestContainer = null; -var gTests = {}; - -function isEqual(foo, bar, prefix) -{ - var flag = true; - if( foo != bar ) { - console.debug(prefix+":"+foo + "!=" + bar + " try dig into it" ); - if( foo instanceof Array ) { - for( var i = 0; i< foo.length; i++ ) { - flag = isEqual(foo[i], bar[i], prefix+"["+i+"]") && flag; - } - flag = false; - } else { - for(var x in foo) { - if(bar[x] != undefined ) { - flag = isEqual(foo[x], bar[x], prefix+"."+x) && flag; - } else { - console.debug(prefix+":"+ x + " is undefined in bar" ); - flag = false; - } - } - } - } - return flag; -} - - -function getTestSurface(testName, testDescription, width, height) -{ - width = width ? width : 300; - height = height ? height : 300; - - // Create a DOM node for the surface - var testRow = document.createElement('tr'); - var testCell = document.createElement('td'); - var testHolder = document.createElement('div'); - testHolder.id = testName + '_holder'; - testHolder.style.width = width; - testHolder.style.height = height; - - testCell.appendChild(testHolder); - testRow.appendChild(testCell); - gTestContainer.appendChild(testRow); - - var descRow = document.createElement('tr'); - var desc = document.createElement('td'); - desc.innerHTML = testDescription; - descRow.appendChild(desc); - gTestContainer.appendChild(descRow); - - return dojox.gfx.createSurface(testHolder, width, height); -} - -function addTest(testName, fn) -{ - gTests[testName] = fn; -} - -function runTest_nodebug(testName) -{ - try { - var t = gTests[testName]; - if (!t) { - return 'no test named ' + t; - } - t(testName); - return null; // the success condition - } catch (e) { - return e.message; - } -} - -function runTest_debug(testName) -{ - var t = gTests[testName]; - if (!t) { - return 'no test named ' + t; - } - t(testName); - return null; // the success condition -} - -var runTest = djConfig.isDebug ? runTest_debug : runTest_nodebug; - -dojo.addOnLoad(function() -{ - gTestContainer = dojo.byId('testcontainer'); - var rect = { x: 0, y: 0, width: 100, height: 100 }; - - addTest('rect', function(testName){ - var surface = getTestSurface(testName, 'translucent rect with rounded stroke'); - var red_rect = surface.createRect(rect); - red_rect.setFill([255, 0, 0, 0.5]); - red_rect.setStroke({color: "blue", width: 10, join: "round" }); - red_rect.setTransform({dx: 100, dy: 100}); - //dojo.connect(red_rect.getNode(), "onclick", function(){ alert("red"); }); - red_rect.connect("onclick", function(){ alert("red"); }); - }); - - addTest('straight_rect', function(testName){ - var surface = getTestSurface(testName, 'translucent rect with no stroke'); - var blue_rect = surface.createRect(rect).setFill([0, 255, 0, 0.5]).setTransform({ dx: 100, dy: 100 }); - //dojo.connect( blue_rect.getNode(), "onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); }); - blue_rect.connect("onclick", function(){ blue_rect.setShape({width: blue_rect.getShape().width + 20}); }); - }); - - addTest('rotated_rect', function(testName){ - var surface = getTestSurface(testName, '30g CCW blue translucent rounded rect'); - console.debug('rotated_rect'); - // anonymous 30 degree CCW rotated green rectangle - surface.createRect({r: 20}) - .setFill([0, 0, 255, 0.5]) - // rotate it around its center and move to (100, 100) - .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 0)]) - ; - }); - - addTest('skew_rect', function(testName){ - var surface = getTestSurface(testName, 'skewed rects' ); - // anonymous red rectangle - surface.createRect(rect).setFill(new dojo.Color([255, 0, 0, 0.5])) - // skew it around LB point -30d, rotate it around LB point 30d, and move it to (100, 100) - .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.rotategAt(-30, 0, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]); - // anonymous blue rectangle - surface.createRect(rect).setFill(new dojo.Color([0, 0, 255, 0.5])) - // skew it around LB point -30d, and move it to (100, 100) - .setTransform([dojox.gfx.matrix.translate(100, 100), dojox.gfx.matrix.skewXgAt(30, 0, 100)]); - // anonymous yellow rectangle - surface.createRect(rect).setFill(new dojo.Color([255, 255, 0, 0.25])) - // move it to (100, 100) - .setTransform(dojox.gfx.matrix.translate(100, 100)); - }); - - addTest('matrix_rect', function(testName){ - var surface = getTestSurface(testName, 'all matrix operations, check debug output for more details'); - - var group = surface.createGroup(); - - var blue_rect = group.createRect(rect).setFill([0, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.identity); - console.debug( "blue_rect: rect with identity" ); - - group.createRect(rect).setFill([0, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.translate(30, 40)); - console.debug( "lime_rect: translate(30,40) " ); - - group.createRect(rect).setFill([255, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.rotateg(-30)); - console.debug( "red_rect: rotate 30 degree counterclockwise " ); - - group.createRect(rect).setFill([0, 255, 255, 0.5]) - .applyTransform(dojox.gfx.matrix.scale({x:1.5, y:0.5})) - .applyTransform(dojox.gfx.matrix.translate(-40, 220)) - ; - console.debug( "lightblue_rect: scale(1.5, 0.5)" ); - - group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 0, 255, 0.5]).applyTransform(dojox.gfx.matrix.flipX); - console.debug( "pink_rect: flipX" ); - - group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 255, 0, 0.5]).applyTransform(dojox.gfx.matrix.flipY); - console.debug( "yellow_rect: flipY" ); - - group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([128, 0, 128, 0.5]).applyTransform(dojox.gfx.matrix.flipXY); - console.debug( "purple_rect: flipXY" ); - - group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([255, 128, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewXg(-15)); - console.debug( "purple_rect: skewXg 15 degree" ); - - group.createRect(rect).setFill([0, 0, 255, 0.5]).setFill([0, 0, 0, 0.5]).applyTransform(dojox.gfx.matrix.skewYg(-50)); - console.debug( "black_rect: skewXg 50 degree" ); - - // move - group - .setTransform({ xx: 1.5, yy: 0.5, dx: 100, dy: 100 }) - .applyTransform(dojox.gfx.matrix.rotateg(-30)) - ; - }); - - addTest('attach', function(testName){ - var surface = getTestSurface(testName, 'Attach to existed shape'); - var red_rect = surface.createRect(rect) - .setShape({ width: 75 }) - .setFill([255, 0, 0, 0.5]) - .setStroke({ color: "blue", width: 1 }) - .setTransform({ dx: 50, dy: 50, xx: 1, xy: 0.5, yx: 0.7, yy: 1.1 }) - ; - - console.debug("attaching !"); - // now attach it! - var ar = dojox.gfx.attachNode(red_rect.rawNode); - console.assert( ar.rawNode == red_rect.rawNode ); - - // FIXME: more generic method to compare two dictionary? - console.debug("attach shape: "); - isEqual(ar.shape, red_rect.shape, "rect.shape"); - console.debug("attach matrix: "); - isEqual(ar.matrix, red_rect.matrix, "rect.matrix"); - console.debug("attach strokeStyle: "); - isEqual(ar.strokeStyle, red_rect.strokeStyle, "rect.strokeStyle"); - console.debug("attach fillStyle: "); - isEqual(ar.fillStyle, red_rect.fillStyle, "rect.fillStyle"); - }); - - // test circle - addTest('circle', function(testName){ - var surface = getTestSurface(testName, 'translucent green circle'); - var circle = { cx: 130, cy: 130, r: 50 }; - surface.createCircle(circle).setFill([0, 255, 0, 0.5]).setTransform({ dx: 20, dy: 20 }); - }); - - // test line - addTest('line', function(testName){ - var surface = getTestSurface(testName, 'straight red line'); - var line = { x1: 20, y1: 20, x2: 100, y2: 120 }; - surface.createLine(line).setFill([255, 0, 0, 0.5]).setStroke({color: "red", width: 1}).setTransform({ dx:70, dy: 100 }); - }); - - // test ellipse - addTest('ellipse', function(testName){ - var surface = getTestSurface(testName, 'translucent cyan ellipse'); - var ellipse = { cx: 50, cy: 80, rx: 50, ry: 80 }; - surface.createEllipse(ellipse).setFill([0, 255, 255, 0.5]).setTransform({ dx: 30, dy: 70 }); - }); - - // test polyline - addTest('polyline', function(testName){ - var surface = getTestSurface(testName, 'unfilled open polyline'); - var points = [ {x: 10, y: 20}, {x: 40, y: 70}, {x: 120, y: 50}, {x: 90, y: 90} ]; - surface.createPolyline(points).setFill(null).setStroke({ color: "blue", width: 1 }).setTransform({ dx: 15, dy: 0 }); - }); - - // test polygon - addTest('polygon', function(testName){ - var surface = getTestSurface(testName, 'filled polygon'); - var points2 = [{x: 100, y: 0}, {x: 200, y: 40}, {x: 180, y: 150}, {x: 60, y: 170}, {x: 20, y: 100}]; - surface.createPolyline(points2).setFill([0, 128, 255, 0.6]).setTransform({dx:30, dy: 20}); - }); - - // test path: lineTo, moveTo, closePath - addTest('lineTo', function(testName){ - var surface = getTestSurface(testName, 'lineTo, moveTo, closePath'); - surface.createPath() - .moveTo(10, 20).lineTo(80, 150) - .setAbsoluteMode(false).lineTo(40, 0) - .setAbsoluteMode(true).lineTo(180, 100) - .setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50) - .closePath() - .setStroke({ color: "red", width: 1 }) - .setFill(null) - .setTransform({ dx: 10, dy: 18 }) - ; - }); - - addTest('setPath', function(testName){ - var surface = getTestSurface(testName, 'setPath example with lineTo moveTo'); - surface.createPath() - .moveTo(10, 20).lineTo(80, 150) - .setAbsoluteMode(false).lineTo(40,0) - .setAbsoluteMode(true).lineTo(180, 100) - .setAbsoluteMode(false).lineTo(0, -30).lineTo(-30, -50) - .curveTo(10, -80, -150, -10, -90, -10) - .closePath() - .setStroke({ color: "red", width: 1 }) - .setFill(null) - .setTransform({ dx: 10, dy: 58 }) - ; - - surface.createPath({ path: "M10,20 L80,150 l40,0 L180,100 l0,-30 l-30,-50 c10,-80 -150,-10 -90,-10 z" }) - .setFill(null) - .setStroke({ color: "blue", width: 1 }) - .setTransform({ dx: 50, dy: 78 }) - ; - }); - - // test arcTo - addTest('arcTo', function(testName){ - var surface = getTestSurface(testName, 'arcTo: from 0 to 360 degree, w/ 30 degree of x axis rotation, rendered with different color'); - - var m = dojox.gfx.matrix; - var g1 = surface.createGroup(); - var g2 = g1.createGroup(); - - var rx = 100, ry = 60, xRotg = 30; - var startPoint = m.multiplyPoint(m.rotateg(xRotg), {x: -rx, y: 0 }); - var endPoint = m.multiplyPoint(m.rotateg(xRotg), {x: 0, y: -ry}); - - var re1 = g1.createPath() - .moveTo(startPoint) - .arcTo(rx, ry, xRotg, true, false, endPoint) - .setStroke({color: "red"}) - ; - var ge1 = g1.createPath() - .moveTo(re1.getLastPosition()) - .arcTo(rx, ry, xRotg, false, false, startPoint) - .setStroke({color: "blue"}) - ; - var re2 = g2.createPath() - .moveTo(startPoint) - .arcTo(rx, ry, xRotg, false, true, endPoint) - .setStroke({color: "red"}) - ; - var ge2 = g2.createPath() - .moveTo(re2.getLastPosition()) - .arcTo(rx, ry, xRotg, true, true, startPoint) - .setStroke({color: "blue"}) - ; - - g1.setTransform({dx: 150, dy: 150}); - g2.setTransform({dx: 10, dy: 10}); - }); - - // test path: curveTo, smoothCurveTo - addTest('curveTo', function(testName) { - var surface = getTestSurface(testName, 'curveTo, smoothCurveTo'); - surface.createPath() - .moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100).smoothCurveTo(300, 300, 200, 200) - .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 }) - ; - }); - - // test path: curveTo, smoothCurveTo with relative. - addTest('curveTo2', function(testName) { - var surface = getTestSurface(testName, 'curveTo, smoothCurveTo with relative coordination'); - surface.createPath() - .moveTo(10, 20).curveTo(50, 50, 50, 100, 150, 100) - .setAbsoluteMode(false).smoothCurveTo(150, 200, 50, 100) - .setAbsoluteMode(true).smoothCurveTo(50, 100, 10, 230) - .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 }) - ; - }); - - // test path: curveTo, smoothCurveTo with relative. - addTest('qCurveTo', function(testName) { - var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo' ); - surface.createPath() - .moveTo(10, 15).qCurveTo(50, 50, 100, 100).qSmoothCurveTo(150, 20) - .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 }) - ; - }); - - addTest('qCurveTo2', function(testName) { - var surface = getTestSurface(testName, 'qCurveTo, qSmoothCurveTo with relative' ); - surface.createPath() - .moveTo(10, 20).qCurveTo(50, 50, 100, 100) - .setAbsoluteMode(false).qSmoothCurveTo(50, -80) - .setAbsoluteMode(true).qSmoothCurveTo(200, 80) - .setStroke({ color: "green", width: 1 }).setFill(null).setTransform({ dx: 10, dy: 30 }) - ; - }); - - // test defines, linearGradient - addTest('linearGradient', function(testName) { - var surface = getTestSurface(testName, 'linear gradient fill'); - // this is an example to split the linearGradient from setFill: - var lg = { - type: "linear", - x1: 0, y1: 0, x2: 75, y2: 50, - colors: [ - { offset: 0, color: "#F60" }, - { offset: 1, color: "#FF6" } - ] - }; - surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 }); - }); - - // TODO: test radialGradient - addTest('radialGradient', function(testName) { - var surface = getTestSurface(testName, 'radial gradient fill'); - // this is a total inline implementation compared with previous one. - var rg = { - type: "radial", - cx: 100, cy: 100, r: 100, - colors: [ - { offset: 0, color: "red" }, - { offset: 0.5, color: "green" }, - { offset: 1, color: "blue" } - ] - }; - - surface.createCircle({cx: 100, cy: 100, r: 100}) - .setStroke({}) - .setFill(rg) - .setTransform({dx: 40, dy: 30}) - ; -// surface.createRect(rect) -// .setShape({width: 200}) -// .setStroke({}) -// .setFill(rg) -// .setTransform({dx: 40, dy: 30}) -// ; - }); - - addTest('attach_gradient', function(testName) { - var surface = getTestSurface(testName, 'attach gradient fill'); - // this is an example to split the linearGradient from setFill: - var lg = { - type: "linear", - x1: 0, y1: 0, x2: 75, y2: 50, - colors: [ - { offset: 0, color: "#F60" }, - { offset: 0.5, color: "#FAF" }, - { offset: 1, color: "#FF6" } - ] - }; - - var lgr = surface.createRect(rect).setFill(lg).setTransform({ dx: 40, dy: 100 }); - - var ar = dojox.gfx.attachNode(lgr.rawNode); - // FIXME: more generic method to compare two dictionary? - console.debug("attach_gradient!"); - - console.debug("attach shape: "); - isEqual(lgr.shape, ar.shape, "rect.shape"); - console.debug("attach matrix: "); - isEqual(lgr.matrix, ar.matrix, "rect.matrix"); - console.debug("attach strokeStyle: "); - isEqual(lgr.strokeStyle, ar.strokeStyle, "rect.strokeStyle"); - console.debug("attach fillStyle: "); - isEqual(lgr.fillStyle.gradient, ar.fillStyle.gradient, "rect.fillStyle.gradient"); - //isEqual(lgr.fillStyle.id, ar.fillStyle.id, "rect.fillStyle.id"); - }); - - var gTestsToRun = [ - 'rect', - 'straight_rect', - 'rotated_rect', - 'skew_rect', - 'matrix_rect', - //'attach', - //'attach_gradient', - 'circle', - 'arcTo', - 'line', - 'ellipse', - 'polyline', - 'polygon', - 'lineTo', - 'setPath', - 'curveTo', - 'curveTo2', - 'qCurveTo', - 'qCurveTo2', - 'linearGradient', - 'radialGradient' - ]; - - for (var i = 0; i < gTestsToRun.length; ++i) { - var testName = gTestsToRun[i]; - var err = runTest(testName); - if (err) { - getTestSurface(testName, testName + ' FAILED (' + err + ')'); - } - } - -}); // end onload -</script> -<style> - td { border: 1px solid black; text-align: left; vertical-align: top; } - v:group { text-align: left; } -</style> - </head> - <body> - <h1>dojox.gfx tests</h1> - <table> - <tbody id="testcontainer"> - </tbody> - </table> - </body> - </html> diff --git a/includes/js/dojox/gfx/tests/test_gradient.html b/includes/js/dojox/gfx/tests/test_gradient.html deleted file mode 100644 index cd4e772..0000000 --- a/includes/js/dojox/gfx/tests/test_gradient.html +++ /dev/null @@ -1,70 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Dojo Unified 2D Graphics</title> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); -dojo.require("dojo.colors"); // pull in CSS3 color names - -makeShapes = function(){ - var SIDE = 10; - var fillObj = { - colors: [ - { offset: 0, color: [255, 255, 0, 0] }, - { offset: 0.5, color: "orange" }, - { offset: 1, color: [255, 255, 0, 0] } - ] - }; - var surface = dojox.gfx.createSurface(dojo.byId("grad"), 300, 300); - // create a background - for(var i = 0; i < 300; i += SIDE){ - for(var j = 0; j < 300; j += SIDE){ - surface. - createRect({x: j, y: i, width: 10, height: 10}). - setFill((Math.floor(i / SIDE) + Math.floor(j / SIDE)) % 2 ? "lightgrey" : "white"); - } - } - // create a rect - surface.createRect({ - width: 300, - height: 100 - }).setFill(dojo.mixin({ - type: "linear", - x1: 0, y1: 0, - x2: 300, y2: 0 - }, fillObj)); - // create a circle - surface.createEllipse({ - cx: 150, - cy: 200, - rx: 100, - ry: 100 - }).setFill(dojo.mixin({ - type: "radial", - cx: 150, - cy: 200 - }, fillObj)); -}; -dojo.addOnLoad(makeShapes); -</script> -<style type="text/css"> -#grad { width: 300px; height: 300px; } -</style> -</head> -<body> -<h1>dojox.gfx Alpha gradient test</h1> -<div id="grad"></div> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_group.html b/includes/js/dojox/gfx/tests/test_group.html deleted file mode 100644 index fe11b37..0000000 --- a/includes/js/dojox/gfx/tests/test_group.html +++ /dev/null @@ -1,73 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Dojo Unified 2D Graphics</title> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../matrix.js"></script>--> -<!--<script type="text/javascript" src="../util.js"></script>--> -<!--<script type="text/javascript" src="../shape.js"></script>--> -<!--<script type="text/javascript" src="../path.js"></script>--> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -var surface = null; -var g1 = null; -var g2 = null; -var r1 = null; - -makeShapes = function(){ - surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); - // make a checkerboard - for(var i = 0; i < 500; i += 100){ - for(var j = 0; j < 500; j += 100){ - if(i % 200 == j % 200) { - surface.createRect({ x: i, y: j }).setFill([255, 0, 0, 0.1]); - } - } - } - // create groups and shapes - g1 = surface.createGroup(); - g2 = surface.createGroup(); - r1 = surface.createRect({x: 200, y: 200}).setFill("green").setStroke({}); - g1.setTransform({dy: -100}); - //g2.setTransform(dojox.gfx.matrix.rotateAt(-45, 250, 250)); - g2.setTransform({dx: 100, dy: -100}); -}; - -switchRect = function(){ - var radio = document.getElementsByName("switch"); - if(radio[0].checked){ - surface.add(r1); - }else if(radio[1].checked){ - g1.add(r1); - }else if(radio[2].checked){ - g2.add(r1); - } -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<h1>dojox.gfx Group tests</h1> -<p> -<input type="radio" name="switch" id="r1_s" checked="checked" onclick="switchRect()" /><label for="r1_s">Rectangle belongs to the surface</label><br /> -<input type="radio" name="switch" id="r1_g1" onclick="switchRect()" /><label for="r1_g1">Rectangle belongs to the group #1</label><br /> -<input type="radio" name="switch" id="r1_g2" onclick="switchRect()" /><label for="r1_g2">Rectangle belongs to the group #2</label> -</p> -<div id="test"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_image1.html b/includes/js/dojox/gfx/tests/test_image1.html deleted file mode 100644 index 41b168e..0000000 --- a/includes/js/dojox/gfx/tests/test_image1.html +++ /dev/null @@ -1,74 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing image</title> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -var image = null; -var grid_size = 500; -var grid_step = 50; - -makeShapes = function(){ - var surface = dojox.gfx.createSurface("test", 800, 600); - for(var i = 0; i <= grid_size; i += grid_step){ - surface.createLine({x1: 0, x2: grid_size, y1: i, y2: i}).setStroke("black"); - surface.createLine({y1: 0, y2: grid_size, x1: i, x2: i}).setStroke("black"); - } - image = surface.createImage({width: 157, height: 53, src: "http://archive.dojotoolkit.org/nightly/checkout/util/resources/dojotoolkit.org/mini-dtk/images/logo.png"}); - //dojo.connect(image.getEventSource(), "onclick", function(){ alert("You didn't expect a download, did you?"); }); - image.connect("onclick", function(){ alert("You didn't expect a download, did you?"); }); -}; - -transformImage = function(){ - var radio = document.getElementsByName("switch"); - if(radio[0].checked){ - image.setTransform({}); - }else if(radio[1].checked){ - image.setTransform(dojox.gfx.matrix.translate(100,100)); - }else if(radio[2].checked){ - image.setTransform([dojox.gfx.matrix.translate(100,0), dojox.gfx.matrix.rotateg(45)]); - }else if(radio[3].checked){ - image.setTransform([dojox.gfx.matrix.translate(70,90), dojox.gfx.matrix.scale({x:1.5, y:0.5})]); - }else if(radio[4].checked){ - image.setTransform([dojox.gfx.matrix.rotateg(15), dojox.gfx.matrix.skewXg(-30)]); - } - var cb = document.getElementById("r2"); - if(cb.checked && !image.getShape().x){ - image.setShape({x: 100, y: 50}); - }else if(!cb.checked && image.getShape().x){ - image.setShape({x: 0, y: 0}); - } -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<h1>dojox.gfx Image tests</h1> -<p>Note: Silverlight doesn't allow downloading images when run from a file system. This demo should be run from a server.</p> -<p> -<input type="radio" name="switch" id="r1_reset" checked onclick="transformImage()" /><label for="r1_reset">Reset Image</label><br /> -<input type="radio" name="switch" id="r1_move" onclick="transformImage()" /><label for="r1_move">Move Image</label><br /> -<input type="radio" name="switch" id="r1_rotate" onclick="transformImage()" /><label for="r1_rotate">Rotate Image</label><br /> -<input type="radio" name="switch" id="r1_scale" onclick="transformImage()" /><label for="r1_scale">Scale Image</label><br /> -<input type="radio" name="switch" id="r1_skew" onclick="transformImage()" /><label for="r1_skew">Skew Image</label><br /> -</p> -<p><input type="checkbox" id="r2" onclick="transformImage()" /><label for="r2">Offset image by (100, 50)</label></p> -<div id="test"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_image2.html b/includes/js/dojox/gfx/tests/test_image2.html deleted file mode 100644 index 25f71c0..0000000 --- a/includes/js/dojox/gfx/tests/test_image2.html +++ /dev/null @@ -1,50 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing image</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -var grid_size = 500, grid_step = 50; -var main = null, g = null, image = null, rect = null; - -makeShapes = function(){ - var s = dojox.gfx.createSurface("test", 800, 600); - for(var i = 0; i <= grid_size; i += grid_step){ - s.createLine({x1: 0, x2: grid_size, y1: i, y2: i}).setStroke("black"); - s.createLine({y1: 0, y2: grid_size, x1: i, x2: i}).setStroke("black"); - } - - main = s.createGroup(); - //rect = main.createRect({x: 0, y: 0, width: 100, height: 100}).setStroke("black").setFill(new dojo.Color([255, 0, 255, 0.5])); - image = main.createImage({width: 157, height: 53, src: "http://archive.dojotoolkit.org/nightly/checkout/util/resources/dojotoolkit.org/mini-dtk/images/logo.png"}); - // comment out the next string to see the problem - rect = main.createRect({x: 0, y: 0, width: 100, height: 100}).setStroke("black").setFill(new dojo.Color([255, 0, 255, 0.5])); - //g = main.createGroup(); - //g.createRect({x: 0, y: 0, width: 100, height: 100}).setStroke("black").setFill(new dojo.Color([255, 255, 0, 0.5])); -}; - -trans = function(){ - var x = 1; - main.setTransform([dojox.gfx.matrix.rotategAt(45, 200, 200), {dx: 200, dy: 200}]); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<p>Testing image:<br /><button onclick="trans();">Trans</button></p> -<p>Note: Silverlight doesn't allow downloading images when run from a file system. This demo should be run from a server.</p> -<div id="test"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_linearGradient.html b/includes/js/dojox/gfx/tests/test_linearGradient.html deleted file mode 100644 index f18021a..0000000 --- a/includes/js/dojox/gfx/tests/test_linearGradient.html +++ /dev/null @@ -1,80 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Dojo Unified 2D Graphics</title> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<script type="text/javascript" src="../../../dojo/_base/Color.js"></script> -<script type="text/javascript" src="../_base.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> -<script type="text/javascript" src="../arc.js"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); -dojo.require("dojo.colors"); - -makeShapes = function(){ - var lg1 = { - type: "linear", - x1: 0, y1: 0, - x2: 300, y2: 0, - colors: [ - { offset: 0, color: [0, 0, 0, 0] }, - { offset: 0.1, color: "#000000" }, - { offset: 0.2, color: "red" }, - { offset: 0.3, color: "rgb(0,255,0)" }, - { offset: 0.4, color: "blue" }, - { offset: 0.5, color: "#ff0" }, - { offset: 0.6, color: [128] }, - { offset: 0.7, color: [128, 128, 64] }, - { offset: 1, color: [0, 255, 0, 0] } - ] - }; - var lg2 = { - type: "linear", - x1: 0, y1: 0, - x2: 300, y2: 0, - colors: [ - { offset: 0.2, color: "red" }, - { offset: 0.3, color: "yellow" } - ] - }; - var surface = dojox.gfx.createSurface(dojo.byId("grad"), 300, 300); - var group = surface.createGroup(); - var rect1 = surface.createRect({ - width: 300, - height: 100 - }); - rect1.setFill(lg1); - var rect2 = surface.createRect({ - y: 150, - width: 300, - height: 100 - }); - rect2.setFill(lg2); - group.add(rect1); - group.add(rect2); -}; -dojo.addOnLoad(makeShapes); -</script> -<style> -v:group { text-align: left; } -#grad { width: 300px; height: 300px; } -</style> -</head> -<body> -<h1>dojox.gfx Linear Gradient test</h1> -<div id="grad"></div> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_linestyle.html b/includes/js/dojox/gfx/tests/test_linestyle.html deleted file mode 100644 index c4a422b..0000000 --- a/includes/js/dojox/gfx/tests/test_linestyle.html +++ /dev/null @@ -1,45 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Dojo Unified 2D Graphics</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../_base.js"></script>--> -<!--<script type="text/javascript" src="../shape.js"></script>--> -<!--<script type="text/javascript" src="../path.js"></script>--> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); - var styles = ["none", "Solid", "ShortDash", "ShortDot", "ShortDashDot", "ShortDashDotDot", - "Dot", "Dash", "LongDash", "DashDot", "LongDashDot", "LongDashDotDot"]; - var font = "normal normal normal 10pt Arial"; // CSS font style - var y_offset = dojox.gfx.normalizedLength("4pt"); - for(var i = 0; i < styles.length; ++i){ - var y = 20 + i * 20; - surface.createText({x: 140, y: y + y_offset, text: styles[i], align: "end"}).setFont(font).setFill("black"); - surface.createLine({x1: 150, y1: y, x2: 490, y2: y}).setStroke({style: styles[i], width: 3, cap: "round"}); - } -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> - <h1>dojox.gfx: Line style test</h1> -<div id="test"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_pattern.html b/includes/js/dojox/gfx/tests/test_pattern.html deleted file mode 100644 index 04d5c3d..0000000 --- a/includes/js/dojox/gfx/tests/test_pattern.html +++ /dev/null @@ -1,44 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing pattern</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../matrix.js"></script>--> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var pattern = { - type: "pattern", - x: 0, y: 0, width: 333, height: 80, - src: "http://dojotoolkit.org/files/downloadButton.gif" - }; - var ellipse = {cx: 400, cy: 200, rx: 350, ry: 150}; - var surface = dojox.gfx.createSurface("test", 800, 600); - surface.createEllipse(ellipse) - .setStroke({color: "blue", width: 1 }) - .setFill(pattern); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> - <h1>dojox.gfx Pattern test</h1> -<div id="test"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_poly.html b/includes/js/dojox/gfx/tests/test_poly.html deleted file mode 100644 index 7db70f1..0000000 --- a/includes/js/dojox/gfx/tests/test_poly.html +++ /dev/null @@ -1,53 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing polyline and line transforms</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<script type="text/javascript" src="../_base.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> -<script type="text/javascript" src="../arc.js"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface("test", 500, 500); - var line = surface.createLine({x1: 250, y1: 50, x2: 250, y2: 250}) - .setStroke({color: "blue"}) - ; - var poly = surface.createPolyline([{x: 250, y: 250}, {x: 300, y: 300}, {x: 250, y: 350}, {x: 200, y: 300}, {x: 250, y: 250}]) - .setStroke({color: "blue"}) - ; - var rotate = dojox.gfx.matrix.rotategAt(5, 250, 250); - //var rotate = dojox.gfx.matrix.rotategAt(0.4, 250, 250); - - window.setInterval(function() { - line.applyTransform(rotate); - poly.applyTransform(rotate); - }, - 100 - ); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<h1>dojox.gfx Polyline test</h1> -<div id="test" style="width: 500px; height: 500px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_resize.html b/includes/js/dojox/gfx/tests/test_resize.html deleted file mode 100644 index 3870ab0..0000000 --- a/includes/js/dojox/gfx/tests/test_resize.html +++ /dev/null @@ -1,61 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing surface resizing</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<script type="text/javascript" src="../_base.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> -<script type="text/javascript" src="../arc.js"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -var surface; - -makeShapes = function(){ - surface = dojox.gfx.createSurface("test", 500, 500); - surface.createRect({width: 300, height: 300}).setFill([255, 0, 0, 0.3]).setStroke("red"); - surface.createRect({x: 200, y: 200, width: 300, height: 300}).setFill([0, 0, 255, 0.3]).setStroke("green"); -}; - -getDim = function(){ - var t = surface.getDimensions(); - alert("dimensions: " + t.width + " by " + t.height); -}; - -make500x500 = function(){ surface.setDimensions(500, 500); }; -make400x400 = function(){ surface.setDimensions(400, 400); }; -make300x300 = function(){ surface.setDimensions(300, 300); }; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<h1>Testing surface resizing</h1> -<!--<p><button onclick="makeShapes();">Go</button></p>--> -<p> - <button onclick="getDim();">getDimensions</button> - - <button onclick="make300x300();">Make 300x300</button> - - <button onclick="make400x400();">Make 400x400</button> - - <button onclick="make500x500();">Make 500x500</button> -</p> -<div id="test" style="width: 500px; height: 500px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_setPath.html b/includes/js/dojox/gfx/tests/test_setPath.html deleted file mode 100644 index c8d7749..0000000 --- a/includes/js/dojox/gfx/tests/test_setPath.html +++ /dev/null @@ -1,76 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Testing setPath and curves</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../path.js"></script>--> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface("test", 500, 500); - // relative path with cubic beziers - surface - .createPath("m100 100 100 0 0 100c0 50-50 50-100 0s-50-100 0-100z") - .setStroke({color: "blue"}) - .setFill("#ddd") - .setTransform({dx: -50, dy: -50}) - ; - // absolute path with cubic bezier - surface - .createPath("M100 100 200 100 200 200C200 250 150 250 100 200S50 100 100 100z") - .setStroke({color: "blue"}) - .setFill("#ddd") - .setTransform({dx: 100, dy: -50}) - ; - // relative path with horizontal and vertical lines, and cubic beziers - surface - .createPath("m100 100h100v100c0 50-50 50-100 0s-50-100 0-100z") - .setStroke({color: "blue"}) - .setFill("#ddd") - .setTransform({dx: 250, dy: -50}) - ; - // relative path with quadratic beziers - surface - .createPath("m100 100 100 0 0 100q0 50-75-25t-25-75z") - .setStroke({color: "blue"}) - .setFill("#ddd") - .setTransform({dx: -50, dy: 150}) - ; - // absolute path with quadratic bezier - surface - .createPath("M100 100 200 100 200 200Q200 250 125 175T100 100z") - .setStroke({color: "blue"}) - .setFill("#ddd") - .setTransform({dx: 100, dy: 150}) - ; - // relative path with horizontal and vertical lines, and quadratic beziers - surface - .createPath("m100 100h100v100q0 50-75-25t-25-75z") - .setStroke({color: "blue"}) - .setFill("#ddd") - .setTransform({dx: 250, dy: 150}) - ; -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> - <h1>dojox.gfx setPath and curve test</h1> -<div id="test" style="width: 500px; height: 500px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_tbbox.html b/includes/js/dojox/gfx/tests/test_tbbox.html deleted file mode 100644 index 1fb1275..0000000 --- a/includes/js/dojox/gfx/tests/test_tbbox.html +++ /dev/null @@ -1,117 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Dojo Unified 2D Graphics</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<script type="text/javascript" src="../_base.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> -<script type="text/javascript" src="../arc.js"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../canvas.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); - var g1 = surface.createGroup(); - // make a checkerboard - for(var i = 0; i < 500; i += 100){ - for(var j = 0; j < 500; j += 100){ - if(i % 200 == j % 200) { - surface.createRect({ x: i, y: j }).setFill([255, 0, 0, 0.1]); - } - } - } - var r1 = g1.createRect({ x: 200, y: 200 }) - .setFill("green") - .setStroke({}) - //.setTransform(dojox.gfx.matrix.rotategAt(45, 250, 250)) - ; - var r2 = surface.createRect().setStroke({}) - .setFill({ type: "linear", to: { x: 50, y: 100 }, - colors: [{ offset: 0, color: "green" }, { offset: 0.5, color: "red" }, { offset: 1, color: "blue" }] }) - .setTransform({dx: 100, dy: 100}) - ; - var r3 = surface.createRect().setStroke({}) - .setFill({ type: "linear" }) - //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) - ; - var r4 = g1.createRect({}) - .setFill("blue") - //.setStroke({}) - //.setTransform(dojox.gfx.matrix.rotategAt(-45, 350, 250)) - .setTransform([dojox.gfx.matrix.rotategAt(-30, 350, 250), { dx: 300, dy: 200 }]) - ; - var p1 = g1.createPath() - .setStroke({}) - .moveTo( 300, 100 ) - .lineTo( 400, 200 ) - .lineTo( 400, 300 ) - .lineTo( 300, 400 ) - .curveTo( 400, 300, 400, 200, 300, 100 ) - //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) - .setTransform({}) - ; - var p2 = g1.createPath(p1.getShape()) - .setStroke({ color: "red", width: 2 }) - //.moveTo( 300, 100 ) - //.lineTo( 400, 200 ) - //.lineTo( 400, 300 ) - //.lineTo( 300, 400 ) - //.curveTo( 400, 300, 400, 200, 300, 100 ) - //.setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) - .setTransform({ dx: 100 }) - ; - var p3 = g1.createPath() - .setStroke({ color: "blue", width: 2 }) - .moveTo( 300, 100 ) - .setAbsoluteMode(false) - .lineTo ( 100, 100 ) - .lineTo ( 0, 100 ) - .lineTo ( -100, 100 ) - .curveTo( 100, -100, 100, -200, 0, -300 ) - //.setTransform(dojox.gfx.matrix.rotategAt(135, 250, 250)) - .setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) - ; - //g1.setTransform({ dx: 100 }); - g1.moveToFront(); - g1.setTransform(dojox.gfx.matrix.rotategAt(-15, 250, 250)); - //g1.setTransform([dojox.gfx.matrix.rotategAt(-45, 250, 250), dojox.gfx.matrix.scaleAt(0.5, 250, 250)]); - //g1.setTransform([dojox.gfx.matrix.scaleAt(2, 1, 250, 250), dojox.gfx.matrix.rotategAt(-45, 250, 250)]); - var a = p1.getTransformedBoundingBox(); - a.push(a[0]); - surface.createPolyline(a).setStroke("green"); - a = p2.getTransformedBoundingBox(); - a.push(a[0]); - surface.createPolyline(a).setStroke("green"); - a = p3.getTransformedBoundingBox(); - a.push(a[0]); - surface.createPolyline(a).setStroke("green"); -}; - -dojo.addOnLoad(makeShapes); - -</script> -<!-- -<style> -v:group { text-align: left; } -</style> ---> -</head> -<body> - <h1>dojox.gfx Transformation test</h1> -<div id="test"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_text.html b/includes/js/dojox/gfx/tests/test_text.html deleted file mode 100644 index 446156f..0000000 --- a/includes/js/dojox/gfx/tests/test_text.html +++ /dev/null @@ -1,88 +0,0 @@ -<html> -<head> -<title>Testing text</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!-- -<script type="text/javascript" src="../common.js"></script> -<script type="text/javascript" src="../shape.js"></script> ---> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -var ROTATION = 30; - -var surface = null, t1, t2, t3, t4, t5; - -var placeAnchor = function(surface, x, y){ - surface.createLine({x1: x - 2, y1: y, x2: x + 2, y2: y}).setStroke("blue"); - surface.createLine({x1: x, y1: y - 2, x2: x, y2: y + 2}).setStroke("blue"); -}; - -var makeText = function(surface, text, font, fill, stroke){ - var t = surface.createText(text); - if(font) t.setFont(font); - if(fill) t.setFill(fill); - if(stroke) t.setStroke(stroke); - placeAnchor(surface, text.x, text.y); - return t; -}; - -makeShapes = function(){ - surface = dojox.gfx.createSurface("test", 500, 500); - var m = dojox.gfx.matrix; - surface.createLine({x1: 250, y1: 0, x2: 250, y2: 500}).setStroke("green"); - t1 = makeText(surface, {x: 250, y: 50, text: "Start", align: "start"}, - {family: "Times", size: "36pt", weight: "bold"}, "black", "red") - .setTransform(m.rotategAt(ROTATION, 250, 50)) - ; - t2 = makeText(surface, {x: 250, y: 100, text: "Middle", align: "middle"}, - {family: "Symbol", size: "24pt"}, "red", "black") - .setTransform(m.rotategAt(ROTATION, 250, 100)) - ; - t3 = makeText(surface, {x: 250, y: 150, text: "End", align: "end"}, - {family: "Helvetica", style: "italic", size: "18pt", rotated: true}, "#FF8000") - .setTransform(m.rotategAt(ROTATION, 250, 150)) - ; - t4 = makeText(surface, {x: 250, y: 200, text: "Define Shuffle Tiff", align: "middle", kerning: true}, - {family: "serif", size: "36pt"}, "black") - .setTransform(m.rotategAt(0, 250, 200)) - ; - t5 = makeText(surface, {x: 250, y: 250, text: "Define Shuffle Tiff", align: "middle", kerning: false}, - {family: "serif", size: "36pt"}, "black") - .setTransform(m.rotategAt(0, 250, 250)) - ; -}; - -getSizes = function(){ - var t = []; - dojo.forEach(["t1", "t2", "t3", "t4", "t5"], function(name){ - var node = eval("(" + name + ")"); - t.push(node.getShape().text + " = " + node.getTextWidth()); - }); - dojo.byId("sizes").innerHTML = t.join("<br/>"); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> - <h1>dojox.gfx Text test</h1> -<div id="test" style="width: 500px; height: 500px;"></div> -<div><button onclick="surface.clear();">Clear</button> <button onclick="getSizes();">Get sizes</button></div> -<p id="sizes"> </p> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_textpath.html b/includes/js/dojox/gfx/tests/test_textpath.html deleted file mode 100644 index 201b0b5..0000000 --- a/includes/js/dojox/gfx/tests/test_textpath.html +++ /dev/null @@ -1,76 +0,0 @@ -<html> -<head> -<title>Testing textpath</title> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!-- -<script type="text/javascript" src="../common.js"></script> -<script type="text/javascript" src="../shape.js"></script> -<script type="text/javascript" src="../path.js"></script> ---> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -var CPD = 30; - -var surface = null; - -var makeText = function(surface, text, font, fill, stroke){ - var t = surface.createText(text); - if(font) t.setFont(font); - if(fill) t.setFill(fill); - if(stroke) t.setStroke(stroke); - placeAnchor(surface, text.x, text.y); - return t; -}; - -makeShapes = function(){ - surface = dojox.gfx.createSurface("test", 500, 500); - var p = surface.createPath({}) - .setStroke("green") - .moveTo(0, 100) - .setAbsoluteMode(false) - .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) - .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) - .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) - .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) - .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) - ; - console.debug(p); - var t = surface.createTextPath({ - text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent erat. " + - "In malesuada ultricies velit. Vestibulum tempor odio vitae diam. " + - "Morbi arcu lectus, laoreet eget, nonummy at, elementum a, quam." - , align: "middle" - //, rotated: true - }) - //.setShape(p.shape) - .moveTo(0, 100) - .setAbsoluteMode(false) - .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) - .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) - .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) - .curveTo(CPD, 0, 100 - CPD, -300, 100, -300) - .curveTo(CPD, 0, 100 - CPD, 300, 100, 300) - .setFont({family: "times", size: "12pt"}) - .setFill("blue") - ; - console.debug(t); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> - <h1>dojox.gfx Text on a Path test</h1> -<div id="test" style="width: 500px; height: 500px;"></div> -<p>That's all Folks!</p> -</body> -</html> diff --git a/includes/js/dojox/gfx/tests/test_transform.html b/includes/js/dojox/gfx/tests/test_transform.html deleted file mode 100644 index abc50d5..0000000 --- a/includes/js/dojox/gfx/tests/test_transform.html +++ /dev/null @@ -1,98 +0,0 @@ -<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > -<head> -<title>Dojo Unified 2D Graphics</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<style type="text/css"> - @import "../../../dojo/resources/dojo.css"; - @import "../../../dijit/tests/css/dijitTests.css"; -</style> -<!-- -The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend -<script type="text/javascript" src="Silverlight.js"></script> ---> -<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script> -<!--<script type="text/javascript" src="../vml.js"></script>--> -<!--<script type="text/javascript" src="../svg.js"></script>--> -<!--<script type="text/javascript" src="../silverlight.js"></script>--> -<script type="text/javascript"> -dojo.require("dojox.gfx"); - -makeShapes = function(){ - var surface = dojox.gfx.createSurface(document.getElementById("test"), 500, 500); - var g1 = surface.createGroup(); - // make a checkerboard - for(var i = 0; i < 500; i += 100){ - for(var j = 0; j < 500; j += 100){ - if(i % 200 == j % 200) { - surface.createRect({x: i, y: j}).setFill([255, 0, 0, 0.1]); - } - } - } - var r1 = g1.createShape({type: "rect", x: 200, y: 200}) - .setFill("green") - .setStroke({}) - //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) - ; - var r2 = surface.createShape({type: "rect"}).setStroke({}) - .setFill({type: "linear", to: {x: 50, y: 100}, - colors: [{offset: 0, color: "green"}, {offset: 0.5, color: "red"}, {offset: 1, color: "blue"}] }) - .setTransform({dx: 100, dy: 100}) - ; - var r3 = surface.createRect().setStroke({}) - .setFill({ type: "linear" }) - //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) - ; - var r4 = g1.createShape({type: "rect"}) - .setFill("blue") - //.setStroke({}) - //.setTransform(dojox.gfx.matrix.rotategAt(-45, 350, 250)) - .setTransform([dojox.gfx.matrix.rotategAt(-30, 350, 250), { dx: 300, dy: 200 }]) - ; - var p1 = g1.createShape({type: "path"}) - .setStroke({}) - .moveTo(300, 100) - .lineTo(400, 200) - .lineTo(400, 300) - .lineTo(300, 400) - .curveTo(400, 300, 400, 200, 300, 100) - //.setTransform(dojox.gfx.matrix.rotategAt(-45, 250, 250)) - .setTransform({}) - ; - var p2 = g1.createShape(p1.getShape()) - .setStroke({color: "red", width: 2}) - //.moveTo( 300, 100 ) - //.lineTo( 400, 200 ) - //.lineTo( 400, 300 ) - //.lineTo( 300, 400 ) - //.curveTo( 400, 300, 400, 200, 300, 100 ) - //.setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) - .setTransform({dx: 100}) - ; - var p3 = g1.createShape({type: "path"}) - .setStroke({color: "blue", width: 2}) - .moveTo(300, 100) - .setAbsoluteMode(false) - .lineTo ( 100, 100) - .lineTo ( 0, 100) - .lineTo (-100, 100) - .curveTo( 100, -100, 100, -200, 0, -300) - //.setTransform(dojox.gfx.matrix.rotategAt(135, 250, 250)) - .setTransform(dojox.gfx.matrix.rotategAt(180, 250, 250)) - ; - //g1.setTransform({dx: 100}); - g1.moveToFront(); - g1.setTransform(dojox.gfx.matrix.rotategAt(-15, 250, 250)); - //g1.setTransform([dojox.gfx.matrix.rotategAt(-45, 250, 250), dojox.gfx.matrix.scaleAt(0.5, 250, 250)]); - //g1.setTransform([dojox.gfx.matrix.scaleAt(2, 1, 250, 250), dojox.gfx.matrix.rotategAt(-45, 250, 250)]); -}; - -dojo.addOnLoad(makeShapes); - -</script> -</head> -<body> -<h1>dojox.gfx Transform test</h1> -<div id="test"></div> -<p>That's all Folks!</p> -</body> -</html> |