mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-07-02 14:12:47 +01:00
clean up
This commit is contained in:
parent
32b10ad30b
commit
1ceb15b446
12 changed files with 294 additions and 325 deletions
|
|
@ -23,6 +23,9 @@ body {
|
|||
}
|
||||
|
||||
|
||||
.navbar-fixed-top {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.quick-links {
|
||||
list-style: none outside none;
|
||||
margin: 0;
|
||||
|
|
@ -44,21 +47,6 @@ body {
|
|||
top: 5px;
|
||||
}
|
||||
|
||||
/* XML verbatim */
|
||||
.xmlverb-default { color: #333333; background-color: #ffffff;
|
||||
font-size: 10pt;
|
||||
font-family:"Courier New", Courier, mono; }
|
||||
.xmlverb-element-name { color: #990000 }
|
||||
.xmlverb-element-nsprefix { color: #666600 }
|
||||
.xmlverb-attr-name { color: #660000 }
|
||||
.xmlverb-attr-content { color: #000099; font-weight: bold }
|
||||
.xmlverb-ns-name { color: #666600 }
|
||||
.xmlverb-ns-uri { color: #330099 }
|
||||
.xmlverb-text { color: #000000; font-weight: bold }
|
||||
.xmlverb-comment { color: #006600; font-style: italic }
|
||||
.xmlverb-pi-name { color: #006600; font-style: italic }
|
||||
.xmlverb-pi-content { color: #006666; font-style: italic }
|
||||
.xd { background-color: #cccccc; margin: 0px }
|
||||
|
||||
#editor {
|
||||
margin: 0;
|
||||
|
|
@ -69,45 +57,4 @@ body {
|
|||
min-height:10em;
|
||||
}
|
||||
|
||||
table.ret * th {
|
||||
border: 1px solid white;
|
||||
margin: 2px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background-color: #BFCAEB;
|
||||
text-align: left;
|
||||
}
|
||||
table.ret * td {
|
||||
border: 1px solid white;
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
background-color: #EBEEF5;
|
||||
vertical-align: top;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
table.ret caption {
|
||||
margin-top: 10px;
|
||||
margin: 2px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
background-color: #EBEEF5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.ret {
|
||||
border-bottom: 1px solid #BFCAEB;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.break {
|
||||
word-break: break-all;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
.doctype{
|
||||
display:inline-block;
|
||||
width:6em;
|
||||
text-align: center
|
||||
}
|
||||
form.form-table label {text-align:right}
|
||||
|
||||
|
|
@ -45,6 +45,21 @@ jQuery(function($) { $.extend({
|
|||
}
|
||||
}); });
|
||||
|
||||
$(function(){
|
||||
$('a[data-action="lDom"]').click(function (){
|
||||
$("#leftPane").css('display','inline').removeAttr('class').addClass("span12");
|
||||
$("#rightPane").removeAttr('class').css("display","none");
|
||||
|
||||
});
|
||||
$('a[data-action="equality"]').click(function (){
|
||||
$("#leftPane").css('display','inline').removeAttr('class').addClass("span6");
|
||||
$("#rightPane").css('display','inline').removeAttr('class').addClass("span6");
|
||||
});
|
||||
$('a[data-action="rDom"]').click(function (){
|
||||
$("#rightPane").css('display','inline').removeAttr('class').addClass("span12");
|
||||
$("#leftPane").removeAttr('class').css("display","none");
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("#bnup").on("click",getsvg);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import module namespace request = "http://exquery.org/ns/request";
|
|||
declare namespace svg= "http://www.w3.org/2000/svg";
|
||||
declare namespace rest = 'http://exquery.org/ns/restxq';
|
||||
|
||||
(:~ shared page wrapper :)
|
||||
declare variable $grxq:layout:=fn:resolve-uri("views/layout.xml");
|
||||
|
||||
(:~
|
||||
|
|
@ -24,15 +25,8 @@ declare variable $grxq:layout:=fn:resolve-uri("views/layout.xml");
|
|||
declare
|
||||
%rest:GET %rest:path("graphxq")
|
||||
%output:method("html") %output:version("5.0")
|
||||
%rest:form-param("dot","{$dot}","")
|
||||
%rest:form-param("url","{$url}")
|
||||
function graphxq($dot,$url) {
|
||||
let $edot:=if($url) then "" else fn:encode-for-uri($dot)
|
||||
let $dot2:=getdot($dot,$url)
|
||||
let $svg:=dot2svg($dot)
|
||||
let $map:=map{"dot":=$dot,"url":=$url,"svg":=$svg,"edot":=$edot}
|
||||
let $page:=render("views/page1.xml",$map)
|
||||
return $page
|
||||
function about(){
|
||||
render("views/about.xml",map{"title":="GraphXQ"})
|
||||
};
|
||||
|
||||
(:~
|
||||
|
|
@ -70,9 +64,12 @@ declare
|
|||
function dotform($src){
|
||||
let $dot:= getdot("digraph {{a -> b}}",$src)
|
||||
let $svgwidget:=fn:doc("views/widget.svg")
|
||||
let $toolbar:=fn:doc("views/toolbar.xml")
|
||||
let $map:=map{"list-shapes":=dotui:shapes(""),
|
||||
"list-colors":=dotui:colors(""),
|
||||
"svgwidget":=$svgwidget,
|
||||
"toolbar":=$toolbar,
|
||||
"title":="DOT editor",
|
||||
"dot":=$dot}
|
||||
return render("views/dotform.xml",$map)
|
||||
};
|
||||
|
|
@ -80,40 +77,35 @@ function dotform($src){
|
|||
declare
|
||||
%rest:GET %rest:path("graphxq/dotml")
|
||||
%output:method("html") %output:version("5.0")
|
||||
function dotmlform(){
|
||||
render("views/dotmlform.xml",map{})
|
||||
%rest:form-param("src","{$src}")
|
||||
function dotmlform($src){
|
||||
let $svgwidget:=fn:doc("views/widget.svg")
|
||||
let $toolbar:=fn:doc("views/toolbar.xml")
|
||||
let $default:=<graph xmlns="http://www.martin-loetzsch.de/DOTML"><node id="test"/></graph>
|
||||
let $dotml:= getdotml($default ,$src)
|
||||
let $dotml:= fn:serialize($dotml)
|
||||
let $v:=map{ "svgwidget":=$svgwidget,
|
||||
"toolbar":=$toolbar,
|
||||
"title":="DOTML editor",
|
||||
"dotml":=$dotml}
|
||||
return render("views/dotmlform.xml",$v)
|
||||
};
|
||||
|
||||
(:~ static about page :)
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq/about")
|
||||
%output:method("html") %output:version("5.0")
|
||||
function about(){
|
||||
render("views/about.xml",map{})
|
||||
};
|
||||
|
||||
|
||||
(:~ static api page :)
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq/api")
|
||||
%output:method("html") %output:version("5.0")
|
||||
function api(){
|
||||
render("views/api.xml",map{})
|
||||
};
|
||||
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq/search")
|
||||
%output:method("html") %output:version("5.0")
|
||||
%rest:form-param("q", "{$q}")
|
||||
function search($q ) {
|
||||
let $map:=map{"q":=$q}
|
||||
return render("views/search.xml",$map)
|
||||
render("views/api.xml",map{"title":="API information"})
|
||||
};
|
||||
|
||||
declare
|
||||
%rest:GET %rest:path("graphxq/library")
|
||||
%output:method("html") %output:version("5.0")
|
||||
function library( ) {
|
||||
let $map:=map{ }
|
||||
let $map:=map{"title":="Samples"}
|
||||
return render("views/library.xml",$map)
|
||||
};
|
||||
|
||||
|
|
@ -137,15 +129,21 @@ function api-dotml($dotml ) as node()
|
|||
declare %private function getdot($dot as xs:string,$url) as xs:string{
|
||||
if($url) then
|
||||
try{fn:unparsed-text(fn:resolve-uri($url))} catch * { "digraph {{ failed to load remote }}" }
|
||||
else
|
||||
else
|
||||
$dot
|
||||
};
|
||||
|
||||
(:~ if url is defined then treat as url and fetch else use dotml :)
|
||||
declare %private function getdotml($dotml as xs:string,$url) as xs:string{
|
||||
declare %private function getdotml($dotml as node(),$url) as node()
|
||||
{
|
||||
if($url) then
|
||||
try{fn:unparsed-text(fn:resolve-uri($url))} catch * { "digraph {{ failed to load remote }}" }
|
||||
else
|
||||
try{
|
||||
fn:doc(fn:resolve-uri($url))
|
||||
} catch * {
|
||||
<graph xmlns="http://www.martin-loetzsch.de/DOTML">
|
||||
<node id="fail"/>
|
||||
</graph> }
|
||||
else
|
||||
$dotml
|
||||
};
|
||||
|
||||
|
|
@ -161,18 +159,8 @@ declare %private function dot2svg($dot as xs:string) as node(){
|
|||
: @params locals map of page variables
|
||||
:)
|
||||
declare function render($template as xs:string,$locals){
|
||||
let $sidebar:=<div>
|
||||
|
||||
<ul>
|
||||
<div>Samples:</div>
|
||||
<li> <a href="dot?src=samples/dot/process.gv">process</a></li>
|
||||
<li><a href="dot?src=samples/dot/unix.gv">unix</a></li>
|
||||
<li><a href="dot?src=samples/dot/root.gv">root (slow)</a></li>
|
||||
<li><a href="dotml?src=samples/dotml/sample1.xml">dotml sample</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
let $default:=map{"sidebar":=$sidebar ,
|
||||
"usermenu":=<div>users</div>,
|
||||
|
||||
let $default:=map{"usermenu":=<div>users</div>,
|
||||
"title":=request:path(),
|
||||
"messages":=()}
|
||||
let $locals:=map:new(($default,$locals))
|
||||
|
|
|
|||
10
src/graphxq/samples/dotml/cluster.xml
Normal file
10
src/graphxq/samples/dotml/cluster.xml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<graph xmlns="http://www.martin-loetzsch.de/DOTML"
|
||||
file-name="graphs/bgcolor" rankdir="LR" bgcolor="#80FF80">
|
||||
<node id="a"/>
|
||||
<cluster id="c1" bgcolor="#FF8080">
|
||||
<node id="b"/>
|
||||
<node id="c"/>
|
||||
<edge from="b" to="c"/>
|
||||
</cluster>
|
||||
<edge from="a" to="b"/>
|
||||
</graph>
|
||||
|
|
@ -1,53 +1,74 @@
|
|||
<div>
|
||||
<div >
|
||||
<h1>About GraphXQ</h1>
|
||||
<p>
|
||||
This application provides a web interface to <a href="http://www.graphviz.org/">Graphviz</a>.
|
||||
</p>
|
||||
<p>
|
||||
The server side is written entirely in XQuery. It uses the
|
||||
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
|
||||
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
|
||||
is used to map XQuery annotations to web server behavior.
|
||||
</p>
|
||||
<p>
|
||||
This application includes DOTML developed by Martin Loetzsch
|
||||
(<a href="http://www.martin-loetzsch.de/DOTML" target="_blank">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.
|
||||
<div class="hero-unit">
|
||||
<h1>GraphXQ</h1>
|
||||
<p>A web interface to <a href="http://www.graphviz.org/" target="_blank">Graphviz</a>.
|
||||
Graph descriptions can be entered in the
|
||||
<a href="http://www.graphviz.org/content/dot-language" target="_blank">Dot</a> language
|
||||
or in <a href="http://www.martin-loetzsch.de/DOTML" target="_blank">DOTML</a>.
|
||||
A REST interface is provided (<a href="api">API</a>) that enables SVG generation to be used as a service.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Server</h2>
|
||||
<p>The server side is written entirely in XQuery. It uses the
|
||||
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
|
||||
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
|
||||
is used to map XQuery annotations to web server behavior.
|
||||
</p>
|
||||
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21.
|
||||
</p>
|
||||
|
||||
<p> The graphviz <code>dot</code> executable is used to generate SVG from the DOT source.
|
||||
The resultant SVG is viewed in an interface that provides pan and zoom functionality.
|
||||
The SVG may also be viewed standalone or downloaded.</p>
|
||||
<p>This application includes DOTML developed by Martin Loetzsch.
|
||||
DOTML is a XML based syntax for the input language of the 'Dot'.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>Client</h2>
|
||||
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21.
|
||||
</p>
|
||||
|
||||
<p>Twitter <a href="http://twitter.github.com/bootstrap/index.html"
|
||||
target="_blank">Bootstrap</a> is used for the client side styling.
|
||||
</p>
|
||||
<p>Client libraries are loaded from CDN where possible. In particular
|
||||
<a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.</p>
|
||||
<h2>Bugs</h2>
|
||||
<p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due
|
||||
target="_blank">Bootstrap</a> is used for the client side styling.
|
||||
</p>
|
||||
<p>Javascript libraries are loaded from CDN where possible. In particular
|
||||
<a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.</p>
|
||||
<p>The resultant SVG is viewed in an interface that provides pan and zoom functionality.
|
||||
The SVG may also be viewed standalone or downloaded.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>Bugs</h2>
|
||||
<p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due
|
||||
to firefox bugs</p>
|
||||
<p>For reference this shows how the SVG <a href="/graphxq/viewbox/viewBox.svg">viewbox</a>
|
||||
works.</p>
|
||||
</div>
|
||||
<ul class="quick-links">
|
||||
<!--
|
||||
<li><iframe class="github-btn"
|
||||
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&repo=xqwebdoc&type=watch&count=true"
|
||||
allowtransparency="true" scrolling="0" width="112px" frameborder="0"
|
||||
height="20px"></iframe></li>
|
||||
<li><iframe class="github-btn"
|
||||
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&repo=xqwebdoc&type=fork&count=true"
|
||||
allowtransparency="true" scrolling="0" width="98px" frameborder="0"
|
||||
height="20px"></iframe></li>
|
||||
-->
|
||||
<li class="follow-btn"><iframe title="Twitter Follow Button"
|
||||
style="width: 237px; height: 20px;" class="twitter-follow-button"
|
||||
src="http://platform.twitter.com/widgets/follow_button.html?id=twitter-widget-2&lang=en&screen_name=apb1704&show_count=true&show_screen_name=true&size=m"
|
||||
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
|
||||
<li class="tweet-btn"><iframe title="Twitter Tweet Button"
|
||||
style="width: 106px; height: 20px;"
|
||||
class="twitter-share-button twitter-count-horizontal"
|
||||
src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fgithub.com%2Fapb2006%2Fgraphxq&size=m&text=graphxq #xquery&url=https%3A%2F%2Fgithub.com%2Fapb2006%2Fxqwebdoc&via=apb1704"
|
||||
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<footer>
|
||||
<p>© Andy Bunce 2013</p>
|
||||
<ul class="quick-links">
|
||||
<!--
|
||||
<li><iframe class="github-btn"
|
||||
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&repo=xqwebdoc&type=watch&count=true"
|
||||
allowtransparency="true" scrolling="0" width="112px" frameborder="0"
|
||||
height="20px"></iframe></li>
|
||||
<li><iframe class="github-btn"
|
||||
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&repo=xqwebdoc&type=fork&count=true"
|
||||
allowtransparency="true" scrolling="0" width="98px" frameborder="0"
|
||||
height="20px"></iframe></li>
|
||||
-->
|
||||
<li class="follow-btn"><iframe title="Twitter Follow Button"
|
||||
style="width: 237px; height: 20px;" class="twitter-follow-button"
|
||||
src="http://platform.twitter.com/widgets/follow_button.html?id=twitter-widget-2&lang=en&screen_name=apb1704&show_count=true&show_screen_name=true&size=m"
|
||||
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
|
||||
<li class="tweet-btn"><iframe title="Twitter Tweet Button"
|
||||
style="width: 106px; height: 20px;"
|
||||
class="twitter-share-button twitter-count-horizontal"
|
||||
src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fgithub.com%2Fapb2006%2Fgraphxq&size=m&text=graphxq #xquery&url=https%3A%2F%2Fgithub.com%2Fapb2006%2Fxqwebdoc&via=apb1704"
|
||||
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,72 +1,102 @@
|
|||
<div class="row-fluid" >
|
||||
<div class="span6 extend">
|
||||
|
||||
<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>
|
||||
<li><a href="#tab-xml" data-toggle="tab">Raw XML</a></li>
|
||||
</ul>
|
||||
<div class="tab-content" style="overflow:hidden;">
|
||||
<div class="tab-pane active " id="tab-dot" >
|
||||
|
||||
<form id="dotForm" action= "svg" method="post" target="_new" class="well " >
|
||||
<label>digraph "
|
||||
<input type="text" name="title" placeholder="title" class="input-small" />"
|
||||
</label>
|
||||
<span style="margin-right:-5px;padding-right:2px;">{{</span>
|
||||
<textarea id="dot" name="dot" rows="100" style="width:90%;overflow:scroll"
|
||||
>{$dot}</textarea><span style="margin-right:-5px;">}}</span>
|
||||
<label class="checkbox">
|
||||
<input name="dl" type="checkbox"/> Download
|
||||
</label>
|
||||
</form >
|
||||
</div>
|
||||
|
||||
<div class="tab-pane well" id="tab-defaults">
|
||||
<form id="frm-defaults" class="form-table">
|
||||
<label>Title:<input type="text" value="" name="dotTitle" size="15"/></label>
|
||||
|
||||
<label>RankDir:
|
||||
<select name="rankdir" >
|
||||
<option value="rankdir=TB;" selected="selected" >TB (top -> bottom)</option>
|
||||
<option value="rankdir=LR;">LR (left -> right)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>Default Shape:<select name="shape" >{$list-shapes}</select></label>
|
||||
<label>Color:<select id="lstColors" width="10">{$list-colors}</select></label>
|
||||
|
||||
<label>Background:<select name="bgcolor" >{$list-colors}</select></label>
|
||||
<label>Filter:<select name="filter" >
|
||||
<option value="Bumpy" >Bumpy</option>
|
||||
<option value="" selected="selected" >(None)</option>
|
||||
<option value="grey_bevel_shadow">grey_bevel_shadow</option>
|
||||
<option value="Bevel">Bevel</option>
|
||||
<option value="MyFilter" >MyFilter</option>
|
||||
<option value="MyShadow">MyShadow</option>
|
||||
</select></label>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tab-pane well" id="tab-xml">
|
||||
<pre id="svgsrc">source</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<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>
|
||||
<div id="svgdiv" class="extend" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
|
||||
|
||||
<div>
|
||||
<div class="row-fluid" style="height:24px">
|
||||
{$toolbar}
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 extend" id="leftPane">
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){{
|
||||
getsvg(false)
|
||||
}})
|
||||
</script>
|
||||
<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>
|
||||
<li>
|
||||
<a href="#tab-xml" data-toggle="tab">Raw XML</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" style="overflow:hidden;">
|
||||
<div class="tab-pane active " id="tab-dot">
|
||||
|
||||
<form id="dotForm" action="svg" method="post" target="_new"
|
||||
class="well ">
|
||||
<label>
|
||||
digraph "
|
||||
<input type="text" name="title" placeholder="title" class="input-small" />
|
||||
"
|
||||
</label>
|
||||
<span style="margin-right:-5px;padding-right:2px;">{{</span>
|
||||
<textarea id="dot" name="dot" rows="100"
|
||||
style="width:90%;overflow:scroll">{$dot}</textarea>
|
||||
<span style="margin-right:-5px;">}}</span>
|
||||
<label class="checkbox">
|
||||
<input name="dl" type="checkbox" />
|
||||
Download
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane well" id="tab-defaults">
|
||||
<form id="frm-defaults" class="form-table">
|
||||
<label>
|
||||
Title:
|
||||
<input type="text" value="" name="dotTitle" size="15" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
RankDir:
|
||||
<select name="rankdir">
|
||||
<option value="rankdir=TB;" selected="selected">TB (top
|
||||
-> bottom)
|
||||
</option>
|
||||
<option value="rankdir=LR;">LR (left -> right)</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Default Shape:
|
||||
<select name="shape">{$list-shapes}</select>
|
||||
</label>
|
||||
<label>
|
||||
Color:
|
||||
<select id="lstColors" width="10">{$list-colors}</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Background:
|
||||
<select name="bgcolor">{$list-colors}</select>
|
||||
</label>
|
||||
<label>
|
||||
Filter:
|
||||
<select name="filter">
|
||||
<option value="Bumpy">Bumpy</option>
|
||||
<option value="" selected="selected">(None)</option>
|
||||
<option value="grey_bevel_shadow">grey_bevel_shadow</option>
|
||||
<option value="Bevel">Bevel</option>
|
||||
<option value="MyFilter">MyFilter</option>
|
||||
<option value="MyShadow">MyShadow</option>
|
||||
</select>
|
||||
</label>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tab-pane well" id="tab-xml">
|
||||
<pre id="svgsrc">source</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6" id="rightPane">
|
||||
<div id="svgdiv" class="extend"
|
||||
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>
|
||||
</div>
|
||||
|
|
@ -1,28 +1,17 @@
|
|||
<div>
|
||||
<div class="row-fluid" style="height:1em">
|
||||
ffdfd gffff gfgffgf
|
||||
<div class="row-fluid" style="height:24px">
|
||||
{$toolbar}
|
||||
</div>
|
||||
<div class="row-fluid" style="height:20em">
|
||||
<div class="span5">
|
||||
<form method="post" action="api/dotml" style="background-color:#EEEEEE;padding:8px;">
|
||||
<div class="row-fluid" style="height:20em" >
|
||||
<div class="span6" id="leftPane">
|
||||
<form method="post" action="api/dotml" style="background-color:#EEEEEE;">
|
||||
<div> <button type="submit">Redraw</button></div>
|
||||
<textarea name="dotml" rows="12" cols="80">
|
||||
<graph xmlns="http://www.martin-loetzsch.de/DOTML"
|
||||
bgcolor="#80FF80" >
|
||||
|
||||
<node id="a" />
|
||||
<node id="b"/>
|
||||
<node id="c"/>
|
||||
<edge from="a" to="c" decorate="false" label="decorate='false'"/>
|
||||
<edge from="b" to="c" decorate="true" label="decorate='true'"/>
|
||||
</graph>
|
||||
</textarea>
|
||||
|
||||
|
||||
<textarea name="dotml" rows="100" style="width:90%;overflow:scroll">{$dotml}</textarea>
|
||||
</form >
|
||||
</div>
|
||||
<div class="span5">
|
||||
<div style="width:100%;height:100%;border:5px solid red;">?</div>
|
||||
<div class="span6" id="rightPane">
|
||||
<div id="svgdiv" class="extend" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,49 +49,24 @@
|
|||
</a>
|
||||
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
New
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="dot"><i class="icon-edit"></i> Dot</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="dotml"><i class="icon-align-center"></i> DotML</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dot"><i class="icon-edit"></i> Dot</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="dotml"><i class="icon-align-center"></i> DotML</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="library">Library</a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
About
|
||||
<b class="caret"></b>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="about"><i class="icon-edit"></i> About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="api"><i class="icon-align-center"></i> API</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="btn-group pull-right">
|
||||
<a href="##" rel="tooltip" title="Make the Directories side dominant" class="btn btn-mini" data-action="dirDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
|
||||
<a href="##" rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
|
||||
<a href="##" rel="tooltip" title="Make the Documents side dominant" class="btn btn-mini" data-placement="left" data-action="fileDom"><i class="icon icon-indent-right"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="btn-group pull-right" style="margin-top:0px">
|
||||
{$usermenu}
|
||||
|
||||
</div>
|
||||
<a href="library"><i class="icon-book"></i> Library</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="api"><i class="icon-wrench"></i> API</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="btn-group pull-right" style="margin-top:0px">
|
||||
{$usermenu}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -101,8 +76,7 @@
|
|||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div id="content" class="span10">{$body}</div>
|
||||
<div id="sidebar" class="span2 well">{$sidebar}</div>
|
||||
{$body}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,26 @@
|
|||
<div>
|
||||
<!-- q,collection, hits -->
|
||||
<h1>No Library yet</h1>
|
||||
|
||||
</div>
|
||||
<!-- q,collection, hits -->
|
||||
<h2>Samples</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="dot?src=samples/dot/process.gv">process</a>
|
||||
(dot)
|
||||
</li>
|
||||
<li>
|
||||
<a href="dot?src=samples/dot/unix.gv">unix</a>
|
||||
(dot)
|
||||
</li>
|
||||
<li>
|
||||
<a href="dot?src=samples/dot/root.gv">root (slow)</a>
|
||||
(dot)
|
||||
</li>
|
||||
<li>
|
||||
<a href="dotml?src=samples/dotml/sample1.xml">dotml </a>
|
||||
(dotml)
|
||||
</li>
|
||||
<li>
|
||||
<a href="dotml?src=samples/dotml/cluster.xml"> cluster</a>
|
||||
(dotml)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
|
||||
<div>
|
||||
<h1>RestXQ interface to graphviz</h1>
|
||||
<p>Enter a string in the dot language
|
||||
Examples: <a href="?dot=digraph {{ a -> b}}">digraph {{ a -> b}}</a>,
|
||||
<a href="?hedge={{github|https://github.com/apb2006/hedgetree}}(ab({{tree|%23treexml}}))">another </a>
|
||||
.</p>
|
||||
<p> Or enter a Url to a xml document examples:
|
||||
<a href="?url=graphxq/samples/process.dot">process</a>,
|
||||
<a href="?">hedgeweb</a>
|
||||
<a href="?url=https://raw.github.com/apb2006/hedgetree/master/src/hedgetree/samples/hedgeweb.xml">remote</a>
|
||||
</p>
|
||||
<form method="get" action="." style="background-color:#EEEEEE;padding:8px;">
|
||||
|
||||
|
||||
<textarea name="dot" rows="2" cols="80">{$dot}</textarea>
|
||||
<p></p>
|
||||
<p>Or enter the url to a node XML source
|
||||
<input name="url" value="{$url}" style="width:30em"/></p>
|
||||
<button type="submit">Redraw</button>
|
||||
</form >
|
||||
<h2 id="isvg">Inline SVG</h2>
|
||||
<div style="width:300px;height:200px">{$svg}</div>
|
||||
|
||||
<h2 id="svg">Object referencing <a href="svg?dot={$edot}&url={$url}">svg</a>,
|
||||
( <a href="svg?dl=1&dot={$edot}&url={$url}">download</a> svg)</h2>
|
||||
<object height="150" width="300" data="svg?dot={$edot}&url={$url}"
|
||||
style="border:5px solid red;" type="image/svg+xml">
|
||||
SVG Here
|
||||
</object>
|
||||
<h2 id="svgxml">SVG xml</h2>
|
||||
<pre>
|
||||
{fn:serialize($svg)}
|
||||
</pre>
|
||||
</div>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<div>
|
||||
<!-- q,collection, hits -->
|
||||
<h1>No Search Results yet</h1>
|
||||
<p><b>Search results for: </b>{$q} <b> In collection: </b></p>
|
||||
<ol></ol>
|
||||
</div>
|
||||
15
src/graphxq/views/toolbar.xml
Normal file
15
src/graphxq/views/toolbar.xml
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<div>
|
||||
<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>
|
||||
<!--
|
||||
http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap
|
||||
-->
|
||||
<div class="btn-group pull-right">
|
||||
<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini" data-action="lDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
|
||||
<a rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
|
||||
<a rel="tooltip" title="Make the right side dominant" class="btn btn-mini" data-placement="left" data-action="rDom"><i class="icon icon-indent-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue