dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
130 lines (124 loc) • 13 kB
HTML
<html>
<head>
<title>Annotator/Figure Testing</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@Import "../../../dijit/themes/tundra/tundra.css";
</style>
<link href="../resources/sketch.css" type="text/css" rel="stylesheet">
<style type="text/css">
body {
background:#fff url("images/testsBodyBg.gif") repeat-x top left;
padding:1em 3em;
}
table { margin:0; width:100%;}
table tr td { padding:0; }
table tr td table { border:0; width:auto;}
#container{ width:600px; }
#toolbar{ width:100%; }
#canvasContainer{ outline:none; width:600px; height:600px; background-color:#fff;border:1px solid #ccc; overflow:auto;position:relative;}
</style>
<script>var djConfig={ isDebug: false };</script>
<script src="../../../dojo/dojo.js"></script>
<script>
dojo.require("dijit.robot");
dojo.require("dojox.sketch");
dojo.require("dojox.sketch.Slider");
dojo.require("dojox.sketch.LeadAnnotation");
dojo.require("dojox.sketch.UnderlineAnnotation");
dojo.require("dojox.sketch.SingleArrowAnnotation");
dojo.require("dojox.sketch.DoubleArrowAnnotation");
dojo.require("dojox.sketch.PreexistingAnnotation");
var f, a, t;
function init(){
var ta=dojox.sketch;
f=new ta.Figure({gridSize:10});
dojo.connect(f, "_mu", function(){ dojo.byId("output").value=f.serialize(); });
t=ta.makeToolbar(dojo.byId("toolbar"), f);
// test loading from an SVG file
dojo.xhrGet({
url:"annotation.svg",
preventCache:true,
load:function(data, ioArgs){
var svg=dojox.xml.DomParser.parse(data);
f.load(svg, dojo.byId("canvas"));
dojo.byId("output").value=f.serialize();
}
});
setTimeout(function(){
doh.robot.startRobot();
setTimeout(function(){
rundoh();
},1000);
},1000);
}
dojo.addOnLoad(init);
function rundoh(){
dojo.require("dojox.sketch.tests.FTHelper");
var helper=new dojox.sketch.tests.FTHelper;
doh.register("placeLeadShape",{
timeout: 1500,
runTest:function(t){
var d = new doh.Deferred();
helper.drawShape({x:100,y:100},{x:200,y:200});
doh.robot.sequence(d.getTestCallback(function(){
t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8" /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g><g id="annotation-6" dojoxsketch:type="Lead" transform="translate(170,170)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q80,80 170,170" /><text style="fill:blue;text-anchor:middle" font-weight="bold" x="174" y="184"></text></g></g></svg>', f.getValue());
}), 500);
return d;
}
});
doh.register("removeLeadShape",{
timeout: 1500,
runTest:function(t){
var d = new doh.Deferred();
helper.click({left:true,x:100,y:100},100);
doh.robot.keyPress(dojo.keys.DELETE,100);
doh.robot.sequence(d.getTestCallback(function(){
t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8" /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g></g></svg>', f.getValue());
}),300);
return d;
}
});
doh.register("placeDoubleShape",{
timeout: 1500,
runTest:function(t){
var d = new doh.Deferred();
helper.selectShape('double');
helper.drawShape({x:200,y:100},{x:100,y:200});
doh.robot.sequence(d.getTestCallback(function(){
t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8" /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g><g id="annotation-7" dojoxsketch:type="DoubleArrow" transform="translate(340,170)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q-80,80 -170,170" /><g transform="translate(0,0) rotate(135)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(135, -170, 170)"><path style="fill:blue;" d="M-170,170 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-82.5" y="76.5"></text></g></g></svg>', f.getValue());
}),500);
return d;
}
});
doh.register("placeUnderlineShape",{
timeout: 2000,
runTest:function(t){
var d = new doh.Deferred();
doh.robot.keyPress('z',100,{ctrl:true});
helper.selectShape('underline');
helper.drawShape({x:147,y:147},{x:147,y:147});
doh.robot.sequence(d.getTestCallback(function(){
t.is('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dojoxsketch="http://dojotoolkit.org/dojox/sketch" width="1000" height="855"><g><image xlink:href="images/figure2.gif" x="0" y="0" width="1000" height="855" /><g id="ann-1" dojoxsketch:type="Lead" transform="translate(437,169)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M0,0 Q100,-50 200,0" /><text style="fill:blue;text-anchor:start" font-weight="bold" x="204" y="-2">1</text></g><g id="ann-2" dojoxsketch:type="Preexisting" transform="translate(526,408)"><rect style="stroke:blue;stroke-width:1;fill:none;" x="0" width="104" y="0" height="210" rx="8" ry="8" /><text style="fill:blue;text-anchor:end" font-weight="bold" x="100" y="206">2</text></g><g id="ann-3" dojoxsketch:type="SingleArrow" transform="translate(537,804)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M-44,13 Q-137,38 -162,-23" /><g transform="translate(-44,13) rotate(164.9536)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="-160.36065573770492" y="-27">3</text></g><g id="ann-4" dojoxsketch:type="DoubleArrow" transform="translate(329,-7)"><path style="stroke:blue;stroke-width:2;fill:none;" d="M249,306 Q505,242 426,389" /><g transform="translate(249,306) rotate(-14.0362)"><path style="fill:blue;" d="M0,0 l20,-5, -3,5, 3,5 Z" /></g><g transform="rotate(118.2542, 426, 389)"><path style="fill:blue;" d="M426,389 l-20,-5, 3,5, -3,5 Z" /></g><text style="fill:blue;text-anchor:middle" font-weight="bold" x="421.25" y="288.75">4</text></g><g id="ann-5" dojoxsketch:type="Underline" transform="translate(821,517)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">5</text></g><g id="annotation-8" dojoxsketch:type="Underline" transform="translate(250,250)"><text style="fill:blue;" font-weight="bold" text-decoration="underline" x="0" y="0">#</text></g></g></svg>', f.getValue());
}),500);
return d;
}
});
doh.run();
}
</script>
</head>
<body class="tundra">
<button onclick="rundoh()">FT</button>
<h1>Annotator/Figure Testing Platform</h1>
<p>This is a generic test to create a figure from an existing SVG file, to edit that figure, and to test the undo stack. Double click a shape to set new text for it.</p>
<div id="container">
<div id="toolbar"></div>
<div id="canvasContainer"><div id="canvas" tabindex="-1"></div></div>
</div>
<h2>Serialized output</h2>
<textarea id="output" style="width:100%;height:180px;overflow:auto;font-size:0.8em;"></textarea>
</body>
</html>