quodatum/graphxq
1
0
Fork 0
mirror of https://github.com/Quodatum/graphxq.git synced 2025-04-11 11:42:24 +01:00
Code Issues Projects Releases Wiki Activity

svg widget

Browse source
This commit is contained in:
Andy Bunce 2012-09-19 22:24:18 +01:00
parent 31e73b31d1
commit d7cbd357d4
8 changed files with 768 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/graphxq.xqm
View file

@ -59,8 +59,10 @@ declare
%rest:form-param("src","{$src}")
function dotform($src){
let $dot:= getdot("digraph {{a -> b}}",$src)
let $svgwidget:=fn:doc("graphxq/views/widget.svg")
let $map:=map{"list-shapes":=dotui:shapes(""),
"list-colors":=dotui:colors(""),
"svgwidget":=$svgwidget,
"dot":=$dot}
return render("graphxq/views/dotform.xml",$map)
};

8
src/graphxq/app.js
View file

@ -69,10 +69,12 @@ function getsvg(dl){
var data = oParser.parseFromString(str, "text/xml");
// http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file
var n = document.importNode(data.documentElement,true);
$("#svgdiv").empty().append(n);
$("#cuthere").empty().append(n);
$("#svgsrc").empty().text(str);
$("#svgdiv svg").svgPan("graph1");
}
},
error:function(jqXHR, textStatus, errorThrown){
console.log("ajax error: "+textStatus + errorThrown);
}
});
};

4
src/graphxq/lib/txq.xqm
View file

@ -1,6 +1,8 @@
(:~
: A(nother) templating Engine for XQuery (BaseX 7.5 specific)
:
: specials:
: partial(file,name,sequence)
:
: @author andy bunce
: @since sept 2012
:)

376
src/graphxq/samples/graphxq.svg Normal file
View file

@ -0,0 +1,376 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0.00 0.00 1402.57 874.50">
<metadata>
<rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description about="https://github.com/apb2006/graphxq" dc:title="Title: _anonymous_0 Pages: 1" dc:description="A graph visualization" dc:date="2012-09-19T11:17:56.587-04:00" dc:format="image/svg+xml">
<dc:creator>
<rdf:Bag>
<rdf:li>Generated by graphviz version 2.28.0 (20110507.0412)</rdf:li>
<rdf:li resource="https://github.com/apb2006/graphxq"/>
</rdf:Bag>
</dc:creator>
</rdf:Description>
</rdf:RDF>
</metadata>
<g id="graph1" class="graph" transform="scale(1 1) rotate(0) translate(4 870.501)">
<title>_anonymous_0</title>
<polygon fill="white" stroke="white" points="-4,5 -4,-870.501 1399.57,-870.501 1399.57,5 -4,5"/>
<!-- NULL -->
<g id="node1" class="node">
<title>NULL</title>
<ellipse fill="none" stroke="black" cx="118.413" cy="-296.501" rx="34.394" ry="18"/>
<text text-anchor="middle" x="118.413" y="-292.801" font-family="Times,serif" font-size="14.00">NULL</text>
</g>
<!-- Not_Ready -->
<g id="node2" class="node">
<title>Not_Ready</title>
<ellipse fill="none" stroke="black" cx="264.413" cy="-296.501" rx="48.9926" ry="18"/>
<text text-anchor="middle" x="264.413" y="-292.801" font-family="Times,serif" font-size="14.00">Not Ready</text>
</g>
<!-- NULL&#45;&gt;Not_Ready -->
<g id="edge48" class="edge">
<title>NULL-&gt;Not_Ready</title>
<path fill="none" stroke="black" d="M153.174,-296.501C168.671,-296.501 187.497,-296.501 205.173,-296.501"/>
<polygon fill="black" stroke="black" points="205.414,-300.001 215.414,-296.501 205.414,-293.001 205.414,-300.001"/>
<text text-anchor="middle" x="184.413" y="-300.301" font-family="Times,serif" font-size="14.00">Start</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge4" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M262.604,-314.654C262.325,-324.04 262.929,-332.501 264.413,-332.501 265.317,-332.501 265.895,-329.359 266.145,-324.781"/>
<polygon fill="none" stroke="none" points="269.645,-324.68 266.222,-314.654 262.646,-324.627 269.645,-324.68"/>
<text text-anchor="middle" x="264.413" y="-336.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Cancel</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge24" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M217.781,-301.847C-79.3143,-339.16 -63.7705,-404.501 264.413,-404.501 588.75,-404.501 607.733,-340.682 321.36,-303.17"/>
<polygon fill="none" stroke="none" points="321.408,-299.648 311.044,-301.847 320.518,-306.591 321.408,-299.648"/>
<text text-anchor="middle" x="264.413" y="-408.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Rate Update</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge52" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M218.364,-302.604C-81.8405,-346.113 -66.4909,-422.501 264.413,-422.501 591.6,-422.501 610.282,-347.819 320.456,-304.083"/>
<polygon fill="none" stroke="none" points="320.866,-300.605 310.462,-302.604 319.842,-307.53 320.866,-300.605"/>
<text text-anchor="middle" x="264.413" y="-426.301" font-family="Times,serif" font-size="14.00" fill="grey">UP Auto Trade Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge8" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M220.066,-304.18C134.081,-323.123 148.864,-350.501 264.413,-350.501 375.223,-350.501 393.362,-325.323 318.831,-306.551"/>
<polygon fill="none" stroke="none" points="319.295,-303.065 308.759,-304.18 317.691,-309.878 319.295,-303.065"/>
<text text-anchor="middle" x="264.413" y="-354.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Dealing Key Pressed</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge80" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M218.962,-303.324C-84.3664,-353.022 -69.2163,-440.501 264.413,-440.501 594.295,-440.501 612.812,-354.976 319.962,-305.012"/>
<polygon fill="none" stroke="none" points="320.304,-301.521 309.863,-303.324 319.149,-308.425 320.304,-301.521"/>
<text text-anchor="middle" x="264.413" y="-444.301" font-family="Times,serif" font-size="14.00" fill="grey">UP Auto Trade On Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge86" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M219.576,-304.005C-86.8922,-359.886 -71.9465,-458.501 264.413,-458.501 596.995,-458.501 615.342,-362.088 319.454,-305.904"/>
<polygon fill="none" stroke="none" points="319.721,-302.394 309.25,-304.005 318.441,-309.275 319.721,-302.394"/>
<text text-anchor="middle" x="264.413" y="-462.301" font-family="Times,serif" font-size="14.00" fill="grey">UP Auto Trade Role Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge14" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M216.661,-300.218C-74.2614,-325.119 -58.3442,-368.501 264.413,-368.501 583.388,-368.501 602.672,-326.13 322.266,-301.101"/>
<polygon fill="none" stroke="none" points="322.431,-297.603 312.165,-300.218 321.822,-304.576 322.431,-297.603"/>
<text text-anchor="middle" x="264.413" y="-372.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Rate Failed</text>
</g>
<!-- Not_Ready&#45;&gt;Not_Ready -->
<g id="edge20" class="edge">
<title>Not_Ready-&gt;Not_Ready</title>
<path fill="none" stroke="none" d="M217.214,-301.052C-76.788,-332.162 -61.0549,-386.501 264.413,-386.501 586.067,-386.501 605.202,-333.428 321.82,-302.155"/>
<polygon fill="none" stroke="none" points="321.93,-298.647 311.612,-301.052 321.178,-305.606 321.93,-298.647"/>
<text text-anchor="middle" x="264.413" y="-390.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Rate Timeout</text>
</g>
<!-- Trading -->
<g id="node3" class="node">
<title>Trading</title>
<ellipse fill="none" stroke="black" cx="574.413" cy="-406.501" rx="38.1938" ry="18"/>
<text text-anchor="middle" x="574.413" y="-402.801" font-family="Times,serif" font-size="14.00">Trading</text>
</g>
<!-- Not_Ready&#45;&gt;Trading -->
<g id="edge26" class="edge">
<title>Not_Ready-&gt;Trading</title>
<path fill="none" stroke="black" d="M268.855,-314.604C275.378,-343.221 292.531,-398.062 331.413,-421.501 394.614,-459.601 484.744,-438.484 535.281,-421.387"/>
<polygon fill="black" stroke="black" points="536.559,-424.648 544.841,-418.04 534.246,-418.041 536.559,-424.648"/>
<text text-anchor="middle" x="424.413" y="-446.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Rate Update</text>
</g>
<!-- Not_Ready&#45;&gt;Trading -->
<g id="edge28" class="edge">
<title>Not_Ready-&gt;Trading</title>
<path fill="none" stroke="black" d="M273.402,-314.413C283.625,-334.988 303.423,-367.908 331.413,-383.501 339.796,-388.172 458.461,-397.818 526.444,-403.01"/>
<polygon fill="black" stroke="black" points="526.255,-406.506 536.491,-403.774 526.785,-399.526 526.255,-406.506"/>
<text text-anchor="middle" x="424.413" y="-405.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Rate Update</text>
</g>
<!-- Not_Ready&#45;&gt;Trading -->
<g id="edge78" class="edge">
<title>Not_Ready-&gt;Trading</title>
<path fill="none" stroke="black" d="M282.581,-313.353C295.052,-324.495 312.92,-338.324 331.413,-345.501 408.88,-375.567 440.019,-334.247 517.413,-364.501 528.679,-368.905 539.649,-376.233 548.851,-383.546"/>
<polygon fill="black" stroke="black" points="546.849,-386.435 556.763,-390.174 551.344,-381.069 546.849,-386.435"/>
<text text-anchor="middle" x="424.413" y="-368.301" font-family="Times,serif" font-size="14.00">UP Auto Trade On Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Trading -->
<g id="edge82" class="edge">
<title>Not_Ready-&gt;Trading</title>
<path fill="none" stroke="black" d="M308.666,-304.113C316.235,-305.33 324.045,-306.512 331.413,-307.501 372.592,-313.03 481.584,-305.464 517.413,-326.501 537.86,-338.507 552.681,-361.274 561.919,-379.459"/>
<polygon fill="black" stroke="black" points="558.883,-381.224 566.36,-388.731 565.197,-378.2 558.883,-381.224"/>
<text text-anchor="middle" x="424.413" y="-330.301" font-family="Times,serif" font-size="14.00">UP Auto Trade On Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Trading -->
<g id="edge88" class="edge">
<title>Not_Ready-&gt;Trading</title>
<path fill="none" stroke="black" d="M264.964,-314.656C265.067,-355.478 271.769,-454.308 331.413,-497.501 398.367,-545.987 445.249,-537.826 517.413,-497.501 541.458,-484.065 556.449,-455.601 564.801,-434.062"/>
<polygon fill="black" stroke="black" points="568.172,-435.031 568.278,-424.437 561.588,-432.653 568.172,-435.031"/>
<text text-anchor="middle" x="424.413" y="-534.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Role Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Trading -->
<g id="edge90" class="edge">
<title>Not_Ready-&gt;Trading</title>
<path fill="none" stroke="black" d="M266.509,-314.728C269.72,-349.86 282.297,-426.399 331.413,-459.501 365.689,-482.601 479.012,-474.792 517.413,-459.501 532.024,-453.683 545.018,-442.043 554.803,-431.15"/>
<polygon fill="black" stroke="black" points="557.539,-433.334 561.337,-423.444 552.2,-428.807 557.539,-433.334"/>
<text text-anchor="middle" x="424.413" y="-477.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Role Deal Create</text>
</g>
<!-- Deal_Failed -->
<g id="node6" class="node">
<title>Deal_Failed</title>
<ellipse fill="none" stroke="black" cx="1276.41" cy="-290.501" rx="51.9908" ry="18"/>
<text text-anchor="middle" x="1276.41" y="-286.801" font-family="Times,serif" font-size="14.00">Deal Failed</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge2" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M308.268,-288.58C315.952,-287.383 323.903,-286.287 331.413,-285.501 464.147,-271.616 497.986,-275.391 631.413,-272.501 845.848,-267.857 1100.38,-280.271 1214.62,-286.793"/>
<polygon fill="black" stroke="black" points="1214.72,-290.304 1224.91,-287.386 1215.12,-283.316 1214.72,-290.304"/>
<text text-anchor="middle" x="725.413" y="-276.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Cancel</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge22" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M294.309,-282.275C305.613,-277.355 318.86,-272.363 331.413,-269.501 461.645,-239.814 497.9,-255.503 631.413,-251.501 879.494,-244.065 943.228,-241.998 1189.41,-273.501 1200.16,-274.877 1211.58,-276.802 1222.47,-278.865"/>
<polygon fill="black" stroke="black" points="1221.81,-282.301 1232.29,-280.787 1223.15,-275.431 1221.81,-282.301"/>
<text text-anchor="middle" x="725.413" y="-255.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Rate Timeout</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge54" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M281.901,-279.571C294.321,-268.012 312.413,-253.561 331.413,-246.501 456.646,-199.964 497.879,-231.725 631.413,-227.501 879.481,-219.654 949.067,-187.585 1189.41,-249.501 1207.05,-254.046 1225.44,-262.269 1240.65,-270.165"/>
<polygon fill="black" stroke="black" points="1239.22,-273.366 1249.68,-275.002 1242.52,-267.195 1239.22,-273.366"/>
<text text-anchor="middle" x="725.413" y="-231.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge56" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M274.279,-278.83C284.945,-259.696 304.794,-230.094 331.413,-216.501 450.398,-155.743 497.879,-201.725 631.413,-197.501 879.378,-189.657 959.82,-118.505 1189.41,-212.501 1216.27,-223.495 1240.11,-246.788 1255.84,-265.073"/>
<polygon fill="black" stroke="black" points="1253.4,-267.606 1262.48,-273.059 1258.78,-263.131 1253.4,-267.606"/>
<text text-anchor="middle" x="725.413" y="-201.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge58" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M269.939,-278.202C277.601,-251.543 295.881,-202.78 331.413,-180.501 582.319,-23.1822 701.275,-157.188 997.413,-159.501 1082.75,-160.168 1114.41,-121.779 1189.41,-162.501 1228.73,-183.848 1253.36,-231.868 1265.73,-262.642"/>
<polygon fill="black" stroke="black" points="1262.6,-264.271 1269.46,-272.354 1269.14,-261.763 1262.6,-264.271"/>
<text text-anchor="middle" x="725.413" y="-145.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Failed</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge84" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M265.401,-278.364C266.467,-239.006 275.127,-145.903 331.413,-103.501 418.071,-38.2194 711.172,-81.0764 819.413,-88.5011 985.023,-99.8611 1051.94,-46.4535 1189.41,-139.501 1232.84,-168.898 1256.95,-228 1267.94,-262.909"/>
<polygon fill="black" stroke="black" points="1264.59,-263.918 1270.82,-272.487 1271.3,-261.903 1264.59,-263.918"/>
<text text-anchor="middle" x="725.413" y="-92.3011" font-family="Times,serif" font-size="14.00">UP Auto Trade On Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge92" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M267.839,-278.286C274.886,-228.393 297.063,-91.4442 331.413,-64.5011 502.111,69.3905 602.602,-45.8929 819.413,-53.5011 984.161,-59.2825 1055.92,17.2143 1189.41,-79.5011 1249.3,-122.886 1267.58,-215.421 1273.09,-262.191"/>
<polygon fill="black" stroke="black" points="1269.62,-262.668 1274.16,-272.242 1276.58,-261.928 1269.62,-262.668"/>
<text text-anchor="middle" x="725.413" y="-57.3011" font-family="Times,serif" font-size="14.00">UP Auto Trade Role Deal Create</text>
</g>
<!-- Not_Ready&#45;&gt;Deal_Failed -->
<g id="edge16" class="edge">
<title>Not_Ready-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M267.339,-314.736C277.034,-395.82 328.544,-724.269 535.413,-829.501 648.159,-886.854 940.019,-849.556 1189.41,-566.501 1206.26,-547.378 1250.52,-384.827 1268.08,-318.505"/>
<polygon fill="black" stroke="black" points="1271.49,-319.286 1270.66,-308.724 1264.73,-317.5 1271.49,-319.286"/>
<text text-anchor="middle" x="725.413" y="-855.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Rate Failed</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge30" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M536.675,-409.951C287.768,-434.806 300.347,-478.501 574.413,-478.501 844.732,-478.501 860.665,-435.993 622.213,-410.98"/>
<polygon fill="none" stroke="none" points="622.455,-407.487 612.15,-409.951 621.742,-414.451 622.455,-407.487"/>
<text text-anchor="middle" x="574.413" y="-482.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Rate Update</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge32" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M537.038,-410.718C284.624,-441.771 297.082,-496.501 574.413,-496.501 847.952,-496.501 863.812,-443.257 621.992,-412.004"/>
<polygon fill="none" stroke="none" points="622.147,-408.496 611.788,-410.718 621.271,-415.441 622.147,-408.496"/>
<text text-anchor="middle" x="574.413" y="-500.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Rate Update</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge34" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M537.419,-411.447C281.48,-448.69 293.811,-514.501 574.413,-514.501 851.316,-514.501 866.974,-450.414 621.389,-412.934"/>
<polygon fill="none" stroke="none" points="621.813,-409.459 611.406,-411.447 620.781,-416.382 621.813,-409.459"/>
<text text-anchor="middle" x="574.413" y="-518.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Rate Update</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge36" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M537.819,-412.138C278.336,-455.565 290.533,-532.501 574.413,-532.501 854.55,-532.501 870.121,-457.58 621.128,-413.873"/>
<polygon fill="none" stroke="none" points="621.454,-410.378 611.007,-412.138 620.272,-417.277 621.454,-410.378"/>
<text text-anchor="middle" x="574.413" y="-536.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Refresh</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge44" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M538.237,-412.791C275.191,-462.394 287.25,-550.501 574.413,-550.501 857.93,-550.501 873.284,-464.617 620.474,-414.699"/>
<polygon fill="none" stroke="none" points="621.071,-411.249 610.589,-412.791 619.744,-418.123 621.071,-411.249"/>
<text text-anchor="middle" x="574.413" y="-554.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Submit</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge46" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M538.674,-413.407C272.047,-469.179 283.96,-568.501 574.413,-568.501 861.178,-568.501 876.431,-471.685 620.172,-415.552"/>
<polygon fill="none" stroke="none" points="620.663,-412.078 610.152,-413.407 619.198,-418.923 620.663,-412.078"/>
<text text-anchor="middle" x="574.413" y="-572.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Update Auto-trader</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge70" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M539.129,-413.985C268.903,-475.918 280.665,-586.501 574.413,-586.501 864.575,-586.501 879.593,-478.601 619.467,-416.275"/>
<polygon fill="none" stroke="none" points="620.232,-412.859 609.697,-413.985 618.635,-419.675 620.232,-412.859"/>
<text text-anchor="middle" x="574.413" y="-590.301" font-family="Times,serif" font-size="14.00" fill="grey">UP Auto Trade Deal Updated</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge72" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M539.602,-414.526C265.76,-482.612 277.363,-604.501 574.413,-604.501 867.837,-604.501 882.74,-485.57 619.124,-417.043"/>
<polygon fill="none" stroke="none" points="619.778,-413.598 609.223,-414.526 618.053,-420.382 619.778,-413.598"/>
<text text-anchor="middle" x="574.413" y="-608.301" font-family="Times,serif" font-size="14.00" fill="grey">UP Auto Trade Deal Updated</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge74" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M540.095,-415.029C262.616,-489.261 274.055,-622.501 574.413,-622.501 871.104,-622.501 885.888,-492.494 618.764,-417.774"/>
<polygon fill="none" stroke="none" points="619.3,-414.292 608.731,-415.029 617.453,-421.044 619.3,-414.292"/>
<text text-anchor="middle" x="574.413" y="-626.301" font-family="Times,serif" font-size="14.00" fill="grey">UP Auto Trade Deal Updated</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge76" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M541.034,-415.373C259.461,-495.718 270.587,-640.501 574.413,-640.501 874.678,-640.501 889.064,-499.091 617.571,-418.224"/>
<polygon fill="none" stroke="none" points="618.372,-414.812 607.792,-415.373 616.413,-421.532 618.372,-414.812"/>
<text text-anchor="middle" x="574.413" y="-644.301" font-family="Times,serif" font-size="14.00" fill="grey">UP Auto Trade Deal Updated</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge10" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M572.152,-424.654C571.804,-434.04 572.557,-442.501 574.413,-442.501 575.544,-442.501 576.265,-439.359 576.578,-434.781"/>
<polygon fill="none" stroke="none" points="580.079,-434.687 576.674,-424.654 573.079,-434.62 580.079,-434.687"/>
<text text-anchor="middle" x="574.413" y="-446.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Deal Submit Validation Exception</text>
</g>
<!-- Trading&#45;&gt;Trading -->
<g id="edge12" class="edge">
<title>Trading-&gt;Trading</title>
<path fill="none" stroke="none" d="M536.331,-409.145C290.912,-427.797 303.606,-460.501 574.413,-460.501 841.385,-460.501 857.502,-428.717 622.765,-409.946"/>
<polygon fill="none" stroke="none" points="622.737,-406.433 612.495,-409.145 622.193,-413.412 622.737,-406.433"/>
<text text-anchor="middle" x="574.413" y="-464.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Deal Update Validation Exception</text>
</g>
<!-- Deal_Submitted -->
<g id="node4" class="node">
<title>Deal_Submitted</title>
<ellipse fill="none" stroke="black" cx="917.413" cy="-508.501" rx="66.0889" ry="18"/>
<text text-anchor="middle" x="917.413" y="-504.801" font-family="Times,serif" font-size="14.00">Deal Submitted</text>
</g>
<!-- Trading&#45;&gt;Deal_Submitted -->
<g id="edge68" class="edge">
<title>Trading-&gt;Deal_Submitted</title>
<path fill="none" stroke="black" d="M585.382,-424.051C595.057,-439.306 611.221,-460.617 631.413,-471.501 696.804,-506.748 782.534,-513.512 842.826,-513.001"/>
<polygon fill="black" stroke="black" points="843.081,-516.498 853.026,-512.844 842.973,-509.499 843.081,-516.498"/>
<text text-anchor="middle" x="725.413" y="-516.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Submit Pass</text>
</g>
<!-- Deal_Completed -->
<g id="node5" class="node">
<title>Deal_Completed</title>
<ellipse fill="none" stroke="black" cx="1276.41" cy="-561.501" rx="68.7879" ry="18"/>
<text text-anchor="middle" x="1276.41" y="-557.801" font-family="Times,serif" font-size="14.00">Deal Completed</text>
</g>
<!-- Trading&#45;&gt;Deal_Completed -->
<g id="edge66" class="edge">
<title>Trading-&gt;Deal_Completed</title>
<path fill="none" stroke="black" d="M577.73,-424.611C582.382,-452.724 595.677,-506.254 631.413,-531.501 812.575,-659.494 1099.19,-607.298 1219.42,-577.19"/>
<polygon fill="black" stroke="black" points="1220.33,-580.569 1229.16,-574.707 1218.6,-573.786 1220.33,-580.569"/>
<text text-anchor="middle" x="917.413" y="-617.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Submit</text>
</g>
<!-- Trading&#45;&gt;Deal_Failed -->
<g id="edge6" class="edge">
<title>Trading-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M607.454,-415.8C615.231,-417.699 623.568,-419.439 631.413,-420.501 754.291,-437.144 1080.96,-480.623 1189.41,-420.501 1229.35,-398.362 1254,-348.928 1266.17,-317.801"/>
<polygon fill="black" stroke="black" points="1269.46,-318.988 1269.68,-308.395 1262.9,-316.537 1269.46,-318.988"/>
<text text-anchor="middle" x="917.413" y="-454.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Cancel</text>
</g>
<!-- Trading&#45;&gt;Deal_Failed -->
<g id="edge60" class="edge">
<title>Trading-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M611.814,-410.689C709.695,-420.429 984.953,-437.717 1189.41,-352.501 1211.55,-343.275 1233.43,-327.381 1249.58,-313.996"/>
<polygon fill="black" stroke="black" points="1252.13,-316.421 1257.47,-307.273 1247.59,-311.092 1252.13,-316.421"/>
<text text-anchor="middle" x="917.413" y="-421.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Failed</text>
</g>
<!-- Trading&#45;&gt;Deal_Failed -->
<g id="edge18" class="edge">
<title>Trading-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M608.135,-397.61C615.738,-395.742 623.827,-393.913 631.413,-392.501 877.083,-346.779 946.969,-384.044 1189.41,-323.501 1204.41,-319.755 1220.35,-314.131 1234.38,-308.583"/>
<polygon fill="black" stroke="black" points="1235.8,-311.783 1243.75,-304.777 1233.17,-305.297 1235.8,-311.783"/>
<text text-anchor="middle" x="917.413" y="-370.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Rate Failed</text>
</g>
<!-- Deal_Submitted&#45;&gt;Deal_Completed -->
<g id="edge50" class="edge">
<title>Deal_Submitted-&gt;Deal_Completed</title>
<path fill="none" stroke="black" d="M974.019,-517.988C987.551,-520.209 1001.99,-522.508 1015.41,-524.501 1092.57,-535.961 1112.24,-536.122 1189.41,-547.501 1195.26,-548.363 1201.33,-549.289 1207.41,-550.238"/>
<polygon fill="black" stroke="black" points="1207.2,-553.748 1217.62,-551.85 1208.29,-546.834 1207.2,-553.748"/>
<text text-anchor="middle" x="1102.41" y="-551.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Complete</text>
</g>
<!-- Deal_Submitted&#45;&gt;Deal_Failed -->
<g id="edge62" class="edge">
<title>Deal_Submitted-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M952.799,-493.136C971.067,-485.553 994.096,-476.897 1015.41,-471.501 1091.03,-452.36 1125.11,-492.668 1189.41,-448.501 1234.52,-417.52 1258.16,-354.939 1268.6,-318.523"/>
<polygon fill="black" stroke="black" points="1272.06,-319.128 1271.31,-308.559 1265.31,-317.289 1272.06,-319.128"/>
<text text-anchor="middle" x="1102.41" y="-475.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Failed</text>
</g>
<!-- Deal_Submitted&#45;&gt;Deal_Failed -->
<g id="edge64" class="edge">
<title>Deal_Submitted-&gt;Deal_Failed</title>
<path fill="none" stroke="black" d="M983.424,-506.686C1058.26,-504.06 1173.03,-498.178 1189.41,-486.501 1245.19,-446.755 1265.23,-362.65 1272.08,-318.658"/>
<polygon fill="black" stroke="black" points="1275.56,-319.037 1273.52,-308.641 1268.63,-318.042 1275.56,-319.037"/>
<text text-anchor="middle" x="1102.41" y="-508.301" font-family="Times,serif" font-size="14.00">UP Auto Trade Deal Quote</text>
</g>
<!-- Deal_Failed&#45;&gt;Not_Ready -->
<g id="edge38" class="edge">
<title>Deal_Failed-&gt;Not_Ready</title>
<path fill="none" stroke="black" d="M1224.95,-293.223C1213.28,-293.748 1200.92,-294.221 1189.41,-294.501 862.096,-302.463 469.367,-299.001 323.584,-297.27"/>
<polygon fill="black" stroke="black" points="323.561,-293.769 313.519,-297.148 323.476,-300.769 323.561,-293.769"/>
<text text-anchor="middle" x="725.413" y="-303.301" font-family="Times,serif" font-size="14.00">MH Auto Trade Refresh</text>
</g>
<!-- Deal_Failed&#45;&gt;Deal_Failed -->
<g id="edge40" class="edge">
<title>Deal_Failed-&gt;Deal_Failed</title>
<path fill="none" stroke="none" d="M1260.88,-307.911C1257.98,-317.589 1263.16,-326.501 1276.41,-326.501 1284.7,-326.501 1289.83,-323.02 1291.8,-318.046"/>
<polygon fill="none" stroke="none" points="1295.3,-317.96 1291.94,-307.911 1288.3,-317.86 1295.3,-317.96"/>
<text text-anchor="middle" x="1276.41" y="-330.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Refresh</text>
</g>
<!-- Deal_Failed&#45;&gt;Deal_Failed -->
<g id="edge42" class="edge">
<title>Deal_Failed-&gt;Deal_Failed</title>
<path fill="none" stroke="none" d="M1228.12,-297.421C1121.78,-316.382 1137.88,-344.501 1276.41,-344.501 1410.48,-344.501 1429.88,-318.165 1334.61,-299.281"/>
<polygon fill="none" stroke="none" points="1335.18,-295.828 1324.71,-297.421 1333.89,-302.708 1335.18,-295.828"/>
<text text-anchor="middle" x="1276.41" y="-348.301" font-family="Times,serif" font-size="14.00" fill="grey">MH Auto Trade Refresh</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

291
src/graphxq/samples/test.html
View file

@ -7,81 +7,13 @@
<script type="text/javascript">
$(document).ready(function(){
$("#load").on("click",getsvg);
$("#svgbox").bind('mouseup', handleMouseUp)
.bind('mousedown', handleMouseDown)
.bind('mouseenter', handleMouseEnter)
.bind('mouseleave', handleMouseLeave);
if ($.browser.webkit) {
window.addEventListener('mousewheel', handleMouseWheel, false); // Chrome/Safari
} else if ($.browser.mozilla) {
window.addEventListener('DOMMouseScroll', handleMouseWheel, false); // Firefox
} else {
window.addEventListener('mousewheel', handleMouseWheel, false); // others (Opera, Explorer9)
}
$("#load").on("click",getsvg);
});
var handleMouseUp=function(evt){
console.log("handleMouseUp")
};
var handleMouseDown=function(evt){
console.log("handleMouseDown")
};
var handleMouseEnter=function(evt){
if (!isMouseOverElem) {
isMouseOverElem = true;
}
console.log("handleMouseEnter")
};
var handleMouseLeave=function(evt){
if (isMouseOverElem) {
isMouseOverElem = false;
}
console.log("handleMouseLeave")
};
/**
* Handle mouse wheel event.
*/
var handleMouseWheel = function (evt) {
if (!enableZoom) {
return;
}
if (!isMouseOverElem) {
return;
}
if (evt.preventDefault) {
evt.preventDefault();
}
evt.returnValue = false;
recentOffset = $root.offset();
var delta = evt.wheelDelta ? evt.wheelDelta / 360 : evt.detail / -9,
z = Math.pow(1 + zoomScale, delta),
g = svgRoot,
p = getEventPoint(evt),
k;
p = p.matrixTransform(g.getCTM().inverse());
// Compute new scale matrix in current mouse position
k = root.createSVGMatrix().translate(p.x, p.y).scale(z).translate(-p.x, -p.y);
setCTM(g, g.getCTM().multiply(k));
if (typeof stateTf === "undefined") {
stateTf = g.getCTM().inverse();
}
stateTf = stateTf.multiply(k.inverse());
};
var isMouseOverElem = false;
var enableZoom=true;
function getsvg(){
var f=$("#src").val();
$.ajax({
$.ajax({
type:"GET",
url:f,
@ -94,8 +26,6 @@ $.ajax({
var n = document.importNode(data.documentElement,true);
// $("#svgdiv").empty().append(n);
$("#cuthere").empty().append(n);
},
error:function(jqXHR, textStatus, errorThrown){
alert("ajax error: "+textStatus + errorThrown);
@ -118,77 +48,170 @@ $.ajax({
<button id="load">load</button>
</div>
<div style="width:100%;height:400px;border:5px solid red;">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" onmousemove="show_coords(evt)" id="svgbox"
style="border:5px solid red;overflow:scroll;"
viewBox="0 0 400 400" version="1.1" width="500px" height="300px" preserveAspectRatio="xMidYMid meet">
<script type="text/ecmascript" xlink:href="../viewbox/ViewBox.js"/>
xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)"
width="100%" height="100%"
viewBox="0 0 400 400" version="1.1" preserveAspectRatio="xMidYMid meet">
<script type="text/ecmascript"><![CDATA[
var svgns = "http://www.w3.org/2000/svg";
var svgRoot;
var pTrans;
var viewBox;
var cursor;
var coords;
var svgns = "http://www.w3.org/2000/svg";
var svgRoot;
var pTrans;
var inPan=false;
var stateOrigin; //start of pan
var fitScale=zoomScale=1;
function init(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
svgRoot = e.target;
// viewBox = new ViewBox(svgRoot);
pTrans=svgRoot.createSVGPoint();
stateOrigin=svgRoot.createSVGPoint();
var onMouseUp=function(evt){
inPan=false;
// console.log("handleMouseUp")
};
var onMouseDown=function(evt){
inPan=true;
var p2=getEventPoint(evt,true)
stateOrigin.x=pTrans.x-p2.x;
stateOrigin.y=pTrans.y-p2.y;
// console.log("handleMouseDown")
};
var onMouseLeave=function(evt){
inPan=false;
};
var onMouseMove=function(evt){
show_coords(evt);
if(inPan){
var p2=getEventPoint(evt,true);
// console.log("PAN>>",pTrans.x,pTrans.y)
pTrans.x=(stateOrigin.x+p2.x);
pTrans.y=(stateOrigin.y+p2.y);
update();
}
};
/**
* Handle mouse wheel event.
*/
var onMouseWheel = function (evt) {
if (evt.preventDefault) {
evt.preventDefault();
}
evt.returnValue = false;
var delta = evt.wheelDelta ? evt.wheelDelta / 360 : evt.detail / -9;
//console.log("mousewheel",delta);
updateScale((delta>0)?1.1:0.9,evt);
return;
};
tspans =svgRoot.getElementById("coords").getElementsByTagNameNS(svgns, "tspan");
pTrans = svgRoot.createSVGPoint();pTrans.x=pTrans.y=0;scale=1;
var cuthere=document.getElementById("cuthere");
cuthere.addEventListener ( 'DOMNodeInserted', onNodeInsert, false );
svgRoot.addEventListener('mouseup', onMouseUp, false );
svgRoot.addEventListener('mousedown', onMouseDown, false );
svgRoot.addEventListener('mousemove', onMouseMove,false );
svgRoot.addEventListener('mouseleave', onMouseMove,false );
if ($.browser.webkit) {
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // Chrome/Safari
} else if ($.browser.mozilla) {
svgRoot.addEventListener('DOMMouseScroll', onMouseWheel, false); // Firefox
} else {
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // others (Opera, Explorer9)
}
var cuthere=document.getElementById("cuthere");
cuthere.addEventListener ( 'DOMNodeInserted', onNodeInsert, false );
};
// fix up scale when new svg loaded
function onNodeInsert(e){
console.log("loaded: ",cuthere.getBBox().height,cuthere.getBBox().width);
reset(true)
};
function translate(dx,dy){
pTrans.x+=dx;pTrans.y+=dy
update();
update();
};
function update(){
var s=fitScale*zoomScale
var k = svgRoot.createSVGMatrix().scale(s).translate(pTrans.x,pTrans.y);
setCTM(cuthere,k)
// cuthere.setAttribute("transform", "translate("+pTrans.x+","+pTrans.y+") scale("+scale+")");
};
function update(){
cuthere.setAttribute("transform", "translate("+pTrans.x+","+pTrans.y+") scale("+scale+")");
};
function reset(){
pTrans.x=0;pTrans.y=0;scale=1;
update();
console.log(cuthere.getBBox().height,cuthere.getBBox().width);
};
function updateScale(d,evt){
var scalePoint;
if(evt){
scalePoint=getEventPoint(evt,true)
}else{
scalePoint= svgRoot.createSVGPoint();scalePoint.x=200;scalePoint.y=200;
}
// console.log("scale: ",scalePoint.x,scalePoint.y);
zoomScale=zoomScale*d;
pTrans.x+=(1-d)*scalePoint.x;
pTrans.y+=(1-d)*scalePoint.y;
update();
};
function reset(fit){
pTrans.x=0;pTrans.y=0;zoomScale=1;
if(fit){
var bb=getSVGrect(cuthere);
fitScale=400/Math.max(bb.width,bb.height)
}else{
fitScale=1;
}
update();
};
function getSVGrect(node){
//var r=node.getBBox();
var svg=cuthere.firstChild
var r=svgRoot.createSVGRect()
r.width=svg.width.baseVal.value
r.height=svg.height.baseVal.value
return r;
};
/**
* Sets the current transform matrix of an element.
*/
setCTM = function (element, matrix) {
var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
element.setAttribute("transform", s);
};
function getEventPoint(evt,userSpace){
var p1 = svgRoot.createSVGPoint();
p1.x = evt.clientX;
p1.y = evt.clientY;
if(userSpace){
var ctm = evt.target.getScreenCTM();
if (ctm = ctm.inverse()){
p1 = p1.matrixTransform(ctm);
}else{
alert("no inservse");
}
};
return p1
};
function show_coords(e) {
var parent = e.currentTarget;
var p1 = svgRoot.createSVGPoint();
p1.x = e.clientX;
p1.y = e.clientY;
//http://stackoverflow.com/questions/2930625/svg-from-window-coordinates-to-viewbox-coordinates
p1.x = e.pageX;
p1.y = e.pageY;
var ctm = e.target.getScreenCTM();
if (ctm = ctm.inverse()){
p1 = p1.matrixTransform(ctm);
}else{
alert("no inservse");
}
var p1 = getEventPoint(e,true);
// Show the results
tspans.item(1).firstChild.data = e.clientX;
tspans.item(3).firstChild.data = e.clientY;
tspans.item(5).firstChild.data = Math.round(p1.x*100) / 100;
tspans.item(7).firstChild.data = Math.round(p1.y*100) / 100;
tspans.item(9).firstChild.data = pTrans.x;
tspans.item(11).firstChild.data = pTrans.y;;
tspans.item(5).firstChild.data = p1.x.toFixed(2);
tspans.item(7).firstChild.data = p1.y.toFixed(2);
tspans.item(9).firstChild.data = pTrans.x.toFixed(2);
tspans.item(11).firstChild.data = pTrans.y.toFixed(2);
tspans.item(13).firstChild.data = zoomScale.toFixed(2);
tspans.item(15).firstChild.data = fitScale.toFixed(2);
}
]]></script>
<rect x="0" y="0" width="100%" height="100%" fill="yellow" />
<g id="cuthere" >
<g id="cuthere" />
</g>
<rect x="0" y="0" width="100%" height="100%" fill="transparent" />
<g id="hud" transform="translate(10,10)">
<rect x="0" y="0" width="400" height="40" fill="blue" opacity="0.6"/>
@ -198,26 +221,32 @@ $.ajax({
<rect x="14" y="2" width="12" height="12" fill="green" onclick="translate(-5,-5)">
<title>move -</title>
</rect>
<rect x="1" y="14" width="12" height="12" fill="orange" onclick="scale=1.1*scale;update()">
<rect x="1" y="14" width="12" height="12" fill="orange" onclick="updateScale(1.1)">
<title>scale +</title>
</rect>
<rect x="14" y="14" width="12" height="12" fill="orange" onclick="scale=0.9*scale;update()">
<rect x="14" y="14" width="12" height="12" fill="orange" onclick="updateScale(0.9)">
<title>scale -</title>
</rect>
<rect x="0" y="28" width="12" height="12" fill="orange" onclick="reset()">
<title>reset</title>
<rect x="0" y="28" width="12" height="12" fill="orange" onclick="reset(true)">
<title>fit</title>
</rect>
<rect x="14" y="28" width="12" height="12" fill="orange" onclick="reset(false)">
<title>full size</title>
</rect>
<text id="coords" fill="white" transform="translate(25,5)"
pointer-events="none">
<tspan x="0" dy="10pt">Client X = </tspan><tspan> </tspan>
<tspan x="0" dy="10pt">Client Y = </tspan><tspan> </tspan>
<tspan x="140" dy="-10pt">User X = </tspan><tspan> </tspan>
<tspan x="140" dy="10pt">User Y = </tspan><tspan> </tspan>
<tspan x="260" dy="-10pt">pTransX = </tspan><tspan> </tspan>
<tspan x="260" dy="10pt">pTransY = </tspan><tspan> </tspan>
<tspan x="0" dy="10pt">Client X= </tspan><tspan> </tspan>
<tspan x="0" dy="10pt">Client Y= </tspan><tspan> </tspan>
<tspan x="100" dy="-10pt">User X= </tspan><tspan> </tspan>
<tspan x="100" dy="10pt">User Y= </tspan><tspan> </tspan>
<tspan x="200" dy="-10pt">pTransX= </tspan><tspan> </tspan>
<tspan x="200" dy="10pt">pTransY= </tspan><tspan> </tspan>
<tspan x="300" dy="-10pt">zoom= </tspan><tspan> </tspan>
<tspan x="300" dy="10pt">fit= </tspan><tspan> </tspan>
</text>
</g>
</svg>
</div>
<div id="svgdiv" style="width:400px;height:300px" >hi</div>
</body>
</html>

5
src/graphxq/views/dotform.xml
View file

@ -60,14 +60,13 @@
<button id="bnsvg" class="btn btn-mini" ><i class="icon-fullscreen"></i>SVG</button>
<button id="bndn" class="btn btn-mini"><i class="icon-download-alt"></i>download</button>
</div>
<div id="svgdiv" style="width:100%;height:30em;border:1px solid red;min-height:20em;">svg here</div>
<div id="svgdiv2" style="width:100%;height:30em;border:1px solid red;min-height:20em;">svg here</div>
<div id="svgdiv" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
</div>
<script type="text/javascript">
$(document).ready(function(){{
getsvg(false)
}}
}})
</script>
</div>

23
src/graphxq/views/layout.xml
View file

@ -19,20 +19,19 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js" type="text/javascript"></script>
<script src="/graphxq/jquery-svgpan.js" type="text/javascript"></script>
<script src="/graphxq/app.js" type="text/javascript"></script>
<script type="text/javascript"><![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33899303-1']);
_gaq.push(['_trackPageview']);
<script type="text/javascript"><![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34544921-1']);
_gaq.push(['_setDomainName', 'rhcloud.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
]]></script>
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
]]></script>
</head>
<body>
<div class="navbar navbar-fixed-top " data-dropdown="dropdown">

209
src/graphxq/views/widget.svg Normal file
View file

@ -0,0 +1,209 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
onload="init(evt)" width="100%" height="100%" viewBox="0 0 400 400"
version="1.1" preserveAspectRatio="xMidYMid meet">
<script type="text/ecmascript"><![CDATA[
var svgns = "http://www.w3.org/2000/svg";
var svgRoot;
var pTrans;
var inPan=false;
var stateOrigin; //start of pan
var fitScale=zoomScale=1;
function init(e) {
svgRoot = e.target;
pTrans=svgRoot.createSVGPoint();
stateOrigin=svgRoot.createSVGPoint();
var onMouseUp=function(evt){
inPan=false;
// console.log("handleMouseUp")
};
var onMouseDown=function(evt){
inPan=true;
var p2=getEventPoint(evt,true)
stateOrigin.x=pTrans.x-p2.x;
stateOrigin.y=pTrans.y-p2.y;
// console.log("handleMouseDown")
};
var onMouseLeave=function(evt){
inPan=false;
};
var onMouseMove=function(evt){
show_coords(evt);
if(inPan){
var p2=getEventPoint(evt,true);
// console.log("PAN>>",pTrans.x,pTrans.y)
pTrans.x=(stateOrigin.x+p2.x);
pTrans.y=(stateOrigin.y+p2.y);
update();
}
};
/**
* Handle mouse wheel event.
*/
var onMouseWheel = function (evt) {
if (evt.preventDefault) {
evt.preventDefault();
}
evt.returnValue = false;
var delta = evt.wheelDelta ? evt.wheelDelta / 360 : evt.detail / -9;
//console.log("mousewheel",delta);
updateScale((delta>0)?1.1:0.9,evt);
return;
};
svgRoot.addEventListener('mouseup', onMouseUp, false );
svgRoot.addEventListener('mousedown', onMouseDown, false );
svgRoot.addEventListener('mousemove', onMouseMove,false );
svgRoot.addEventListener('mouseleave', onMouseMove,false );
if ($.browser.webkit) {
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // Chrome/Safari
} else if ($.browser.mozilla) {
svgRoot.addEventListener('DOMMouseScroll', onMouseWheel, false); // Firefox
} else {
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // others (Opera, Explorer9)
}
var cuthere=document.getElementById("cuthere");
cuthere.addEventListener ( 'DOMNodeInserted', onNodeInsert, false );
};
// fix up scale when new svg loaded
function onNodeInsert(e){
reset(true)
};
function translate(dx,dy){
pTrans.x+=dx;pTrans.y+=dy
update();
};
function update(){
var s=fitScale*zoomScale
var k = svgRoot.createSVGMatrix().scale(s).translate(pTrans.x,pTrans.y);
setCTM(cuthere,k)
// cuthere.setAttribute("transform", "translate("+pTrans.x+","+pTrans.y+") scale("+scale+")");
};
function updateScale(d,evt){
var scalePoint;
if(evt){
scalePoint=getEventPoint(evt,true)
}else{
scalePoint= svgRoot.createSVGPoint();scalePoint.x=200;scalePoint.y=200;
}
// console.log("scale: ",scalePoint.x,scalePoint.y);
zoomScale=zoomScale*d;
pTrans.x+=(1-d)*scalePoint.x;
pTrans.y+=(1-d)*scalePoint.y;
update();
};
function reset(fit){
pTrans.x=0;pTrans.y=0;zoomScale=1;
if(fit){
var bb=getSVGrect(cuthere);
fitScale=400/Math.max(bb.width,bb.height)
}else{
fitScale=1;
}
update();
};
function getSVGrect(node){
//var r=node.getBBox();
var svg=cuthere.firstChild
var r=svgRoot.createSVGRect()
r.width=svg.width.baseVal.value
r.height=svg.height.baseVal.value
return r;
};
/**
* Sets the current transform matrix of an element.
*/
setCTM = function (element, matrix) {
var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
element.setAttribute("transform", s);
};
function getEventPoint(evt,userSpace){
var p1 = svgRoot.createSVGPoint();
p1.x = evt.clientX;
p1.y = evt.clientY;
if(userSpace){
var ctm = evt.target.getScreenCTM();
if (ctm = ctm.inverse()){
p1 = p1.matrixTransform(ctm);
}else{
alert("no inservse");
}
};
return p1
};
function show_coords(e) {
var p1 = getEventPoint(e,true);
// Show the results
var tspans =svgRoot.getElementById("coords").getElementsByTagNameNS(svgns, "tspan");
tspans.item(1).firstChild.data = e.clientX;
tspans.item(3).firstChild.data = e.clientY;
tspans.item(5).firstChild.data = p1.x.toFixed(2);
tspans.item(7).firstChild.data = p1.y.toFixed(2);
tspans.item(9).firstChild.data = pTrans.x.toFixed(2);
tspans.item(11).firstChild.data = pTrans.y.toFixed(2);
tspans.item(13).firstChild.data = zoomScale.toFixed(2);
tspans.item(15).firstChild.data = fitScale.toFixed(2);
}
]]></script>
<rect x="0" y="0" width="100%" height="100%" fill="none" stroke-width="1" stroke="none"/>
<g id="cuthere" />
<rect x="0" y="0" width="100%" height="100%" fill="transparent" />
<g id="hud" transform="translate(10,10)">
<rect x="0" y="0" width="400" height="40" fill="blue" opacity="0.6" rx="6" ry="6" />
<g onclick="updateScale(1.1)" transform="translate(1,2)">
<title>+ zoom</title>
<rect width="12" height="12" fill="orange"/>
<text y="10">+</text>
</g>
<g onclick="updateScale(0.9)" transform="translate(14,2)">
<title>- zoom</title>
<rect width="12" height="12" fill="orange"/>
<text y="10">-</text>
</g>
<g onclick="reset(true)" transform="translate(0,16)">
<title>Fit to window</title>
<rect width="12" height="12" fill="orange" />
</g>
<g onclick="reset(false)" transform="translate(14,16)">
<title>Display at 'natural' size</title>
<rect width="12" height="12" fill="orange"/>
</g>
<text id="coords" fill="white" transform="translate(25,5)"
pointer-events="none">
<tspan x="0" dy="10pt">Client X= </tspan>
<tspan>?</tspan>
<tspan x="0" dy="10pt">Client Y= </tspan>
<tspan>?</tspan>
<tspan x="100" dy="-10pt">User X= </tspan>
<tspan>?</tspan>
<tspan x="100" dy="10pt">User Y= </tspan>
<tspan>?</tspan>
<tspan x="200" dy="-10pt">pTransX= </tspan>
<tspan>?</tspan>
<tspan x="200" dy="10pt">pTransY= </tspan>
<tspan>?</tspan>
<tspan x="300" dy="-10pt">zoom= </tspan>
<tspan>?</tspan>
<tspan x="300" dy="10pt">fit= </tspan>
<tspan>?</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB