mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-04-11 11:42:24 +01:00
tabs
This commit is contained in:
parent
73bb20bd4d
commit
3e7ec967fa
6 changed files with 72 additions and 1419 deletions
|
@ -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);
|
||||
|
|
|
@ -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
|
@ -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&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">
|
||||
<!--
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 || [];
|
||||
|
|
Loading…
Add table
Reference in a new issue