130 lines
13 KiB
HTML
130 lines
13 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<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>
|