You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
13 KiB
129 lines
13 KiB
<!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>
|
|
|