This commit is contained in:
Andy Bunce 2012-09-12 21:29:53 +01:00
parent 73bb20bd4d
commit 3e7ec967fa
6 changed files with 72 additions and 1419 deletions

View file

@ -2,11 +2,10 @@
// sidebar
$(function() { $("time.relative-date").prettyDate(); });
$(document).ready(function(){
$("#dotForm").submit( function () {
getsvg();
return false;
});
$("#dot").bind({"keyup":getsvg});
$("#bnup").on("click",getsvg);
$("#bnsvg").on("click",function(){ $("#dotForm").submit()});
$("#bndn").on("click",function(){alert("down")});
$("#dot").on("keyup",getsvg);
});
function getsvg(){
@ -14,7 +13,7 @@ function getsvg(){
'svg',
$("#dotForm").serialize(),
function(data){
console.log(data)
// console.log(data)
// 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);

View file

@ -16,7 +16,7 @@ declare %private variable $gr:dotpath:=if(fn:environment-variable("DOTPATH"))
then fn:environment-variable("DOTPATH")
else "dot";
(:~
: folder for temp files
: folder for temp files \=windows
:)
declare %private variable $gr:tmpdir:=if(file:dir-separator()="\")
then fn:environment-variable("TEMP") || "\"
@ -44,9 +44,38 @@ declare %private function dot1( $dot as xs:string) as node(){
let $r:=proc:execute($gr:dotpath , ("-Tsvg",$fname))
let $junk:=file:delete($fname)
(: let $r:=fn:trace($r,"hhi"):)
return if($r/code="0")
then fn:parse-xml($r/output)
else fn:error()
return if($r/code!="0")
then fn:error(xs:QName('gr:dot1'),$r/error)
else (: o/p has comment nodes :)
let $s:=fn:parse-xml($r/output)
let $ver:=$s/comment()[1]/fn:normalize-space()
let $title:=$s/comment()[2]/fn:normalize-space()
let $svg:=$s/*
return <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
{$svg/@* except ($svg/@width,$svg/@height,$svg/@preserveAspectRatio),
<metadata>
<rdf:RDF
xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#"
xmlns:dc = "http://purl.org/dc/elements/1.1/" >
<rdf:Description about="https://github.com/apb2006/graphxq"
dc:title="{$title}"
dc:description="A graph visualization"
dc:date="{fn:current-dateTime()}"
dc:format="image/svg+xml">
<dc:creator>
<rdf:Bag>
<rdf:li>{$ver}</rdf:li>
<rdf:li resource="https://github.com/apb2006/graphxq"/>
</rdf:Bag>
</dc:creator>
</rdf:Description>
</rdf:RDF>
</metadata>,
$svg/*}
</svg>
};
(:~
:Layout one ore more graphs given in the GXL language and render them as SVG.
@ -62,6 +91,17 @@ declare function gxl($gxl as node()*, $params as xs:string*) as node()*{
: set svg to autosize 100%
:)
declare function autosize($svg as node()) as node(){
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
{$svg/@* except ($svg/@width,$svg/@height,$svg/@preserveAspectRatio),
$svg/*}
</svg>
};
(:~
: set svg to autosize 100%
:)
declare function autosize-old($svg as node()) as node(){
xslt:transform($svg , fn:resolve-uri("dotml/dotpatch.xsl"))
};

File diff suppressed because it is too large Load diff

View file

@ -9,16 +9,14 @@
web server behavior.
</p>
<p>
This product includes DOTML developed by Martin Loetzsch
This application includes DOTML developed by Martin Loetzsch
(<a href="http://www.martin-loetzsch.de/DOTML">http://www.martin-loetzsch.de/DOTML</a>).
DotML is a XML based syntax for the input language of the 'Dot' graph drawing tool from the AT&amp;T GraphViz suite. It can be transformed to the native syntax of the 'Dot' tool using XSLT.
</p>
<p>Twitter <a href="http://twitter.github.com/bootstrap/index.html"
target="_blank">bootstrap</a> is used for the client side styling.
target="_blank">Bootstrap</a> is used for the client side styling.
</p>
<p>
keith-wood's <a href="http://keith-wood.name/svg.html">jQuery SVG</a> is used for SVG DOM handling.
</p>
</div>
<ul class="quick-links">
<!--

View file

@ -1,14 +1,25 @@
<div class="row-fluid" style="height:20em">
<form id="dotForm" action= "svg" method="post" class="span5" style="background-color:#EEEEEE;padding:8px;">
<button id="bnup" style="display:block">Redraw</button>
<textarea id="dot" name="dot" rows="2" style="min-height:20em">digraph {{ a -> b}}</textarea>
<div>
</div>
<div class="span5">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-dot" data-toggle="tab">Dot</a></li>
<li><a href="#tab-defaults" data-toggle="tab">Defaults</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-dot">
<div class="btn-group">
<button id="bnup" class="btn btn-mini" ><i class="icon-refresh"></i>Redraw</button>
<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>
<form id="dotForm" action= "svg" method="post" target="_new" class="well">
digraph "<input type="text" name="title" placeholder="title"/>"{{
<textarea id="dot" name="dot" rows="2" style="min-height:20em">digraph {{ a -> b}}</textarea>}}
</form >
</div>
<div class="tab-pane" id="tab-defaults">...</div>
</div>
</div>
<div class="span5">
<div id="svgdiv" style="width:100%;height:30em;border:1px solid red;min-height:20em;">svg here</div>
</div>

View file

@ -20,7 +20,6 @@
<script src="/lib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/lib/bootstrap/2.1.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/lib/jquery.prettydate.js" type="text/javascript"></script>
<script src="/graphxq/jquery.svg.js" type="text/javascript"></script>
<script src="/graphxq/app.js" type="text/javascript"></script>
<script type="text/javascript"><![CDATA[
var _gaq = _gaq || [];