mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-07-03 22:32:45 +01:00
svg update
This commit is contained in:
parent
cee5b0bcec
commit
73bb20bd4d
16 changed files with 2066 additions and 74 deletions
118
src/graphxq.xqm
118
src/graphxq.xqm
|
|
@ -1,14 +1,19 @@
|
||||||
(:~
|
(:~
|
||||||
: restxq interface to graphviz
|
: restxq interface for graphviz
|
||||||
: @author andy bunce
|
: @author andy bunce
|
||||||
: @since sept 2012
|
: @since sept 2012
|
||||||
:)
|
:)
|
||||||
|
|
||||||
module namespace grxq = 'apb.graphviz.web';
|
module namespace grxq = 'apb.graphviz.web';
|
||||||
declare default function namespace 'apb.graphviz.web';
|
declare default function namespace 'apb.graphviz.web';
|
||||||
|
|
||||||
import module namespace gr = 'apb.graphviz' at "graphxq/graphviz.xqm";
|
import module namespace gr = 'apb.graphviz' at "graphxq/graphviz.xqm";
|
||||||
|
import module namespace txq = 'apb.txq' at "graphxq/lib/txq.xqm";
|
||||||
|
import module namespace request = "http://exquery.org/ns/request";
|
||||||
declare namespace rest = 'http://exquery.org/ns/restxq';
|
declare namespace rest = 'http://exquery.org/ns/restxq';
|
||||||
|
|
||||||
|
declare variable $grxq:layout:=fn:resolve-uri("graphxq/views/layout.xml");
|
||||||
|
|
||||||
declare
|
declare
|
||||||
%rest:GET %rest:path("graphxq")
|
%rest:GET %rest:path("graphxq")
|
||||||
%output:method("html5")
|
%output:method("html5")
|
||||||
|
|
@ -18,77 +23,15 @@ function graphxq($dot,$url) {
|
||||||
let $edot:=if($url) then "" else fn:encode-for-uri($dot)
|
let $edot:=if($url) then "" else fn:encode-for-uri($dot)
|
||||||
let $dot2:=getdot($dot,$url)
|
let $dot2:=getdot($dot,$url)
|
||||||
let $svg:=get-svg($dot)
|
let $svg:=get-svg($dot)
|
||||||
return <html>
|
let $map:=map{"dot":=$dot,"url":=$url,"svg":=$svg,"edot":=$edot}
|
||||||
<head>
|
let $page:=render("graphxq/views/page1.xml",$map)
|
||||||
<title>Graphviz</title>
|
return $page
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<meta name="description" content="tree xquery svg" />
|
|
||||||
<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>
|
|
||||||
<style type="text/css">pre {{background-color:#FFFFDD;}}</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<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="?url=hedgetree/samples/hier.dot">hedgeweb</a>
|
|
||||||
<a href="?url=https://raw.github.com/apb2006/hedgetree/master/src/hedgetree/samples/hedgeweb.xml">remote</a>
|
|
||||||
</p>
|
|
||||||
<form method="get" action="./graphxq" 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="graphxq/svg?dot={$edot}&url={$url}">svg</a>,
|
|
||||||
( <a href="graphxq/svg?dl=1&dot={$edot}&url={$url}">download</a> svg)</h2>
|
|
||||||
<object height="150" width="300" data="graphxq/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>
|
|
||||||
|
|
||||||
|
|
||||||
<h2 id="layout">Layout xml</h2>
|
|
||||||
|
|
||||||
<h2>About</h2>
|
|
||||||
<p> Source: @github:<iframe src="http://ghbtns.com/github-btn.html?user=apb2006&repo=graphxq&type=watch"
|
|
||||||
allowtransparency="true" frameborder="0" scrolling="0" width="62px" height="20px"></iframe>, Twitter:
|
|
||||||
<a href="https://twitter.com/share" class="twitter-share-button" data-via="apb1704" data-count="none">Tweet</a>
|
|
||||||
<script>!function(d,s,id){{var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){{js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}}}(document,"script","twitter-wjs");</script>.
|
|
||||||
</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
};
|
};
|
||||||
|
|
||||||
(:~ @return svg for hedge with download option.
|
(:~
|
||||||
:)
|
:)
|
||||||
declare
|
declare
|
||||||
%rest:GET %rest:path("graphxq/svg")
|
%rest:path("graphxq/svg")
|
||||||
%rest:form-param("dot","{$dot}")
|
%rest:form-param("dot","{$dot}")
|
||||||
%rest:form-param("url","{$url}")
|
%rest:form-param("url","{$url}")
|
||||||
%rest:form-param("dl","{$dl}")
|
%rest:form-param("dl","{$dl}")
|
||||||
|
|
@ -103,6 +46,36 @@ function graphxq-svg($dot,$url,$dl) {
|
||||||
return ($down[$dl],$svg)
|
return ($down[$dl],$svg)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
declare
|
||||||
|
%rest:GET %rest:path("graphxq/dot")
|
||||||
|
%output:method("html5")
|
||||||
|
function dotform(){
|
||||||
|
render("graphxq/views/dotform.xml",map{})
|
||||||
|
};
|
||||||
|
|
||||||
|
declare
|
||||||
|
%rest:GET %rest:path("graphxq/dotml")
|
||||||
|
%output:method("html5")
|
||||||
|
function dotmlform(){
|
||||||
|
render("graphxq/views/dotmlform.xml",map{})
|
||||||
|
};
|
||||||
|
declare
|
||||||
|
%rest:GET %rest:path("graphxq/about")
|
||||||
|
%output:method("html5")
|
||||||
|
function about(){
|
||||||
|
render("graphxq/views/about.xml",map{})
|
||||||
|
};
|
||||||
|
|
||||||
|
declare
|
||||||
|
%rest:GET %rest:path("graphxq/search")
|
||||||
|
%output:method("html5")
|
||||||
|
%rest:form-param("q", "{$q}")
|
||||||
|
function search($q ) {
|
||||||
|
let $map:=map{"q":=$q}
|
||||||
|
return render("graphxq/views/search.xml",$map)
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
(:~ use dot or url :)
|
(:~ use dot or url :)
|
||||||
declare %private function getdot($dot,$url) as xs:string{
|
declare %private function getdot($dot,$url) as xs:string{
|
||||||
if($url) then
|
if($url) then
|
||||||
|
|
@ -115,3 +88,12 @@ declare %private function get-svg($dot as xs:string) as node(){
|
||||||
let $svgx:=gr:dot($dot,())
|
let $svgx:=gr:dot($dot,())
|
||||||
return gr:autosize($svgx)
|
return gr:autosize($svgx)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
declare function render($template,$locals){
|
||||||
|
let $default:=map{"sidebar":="Sidebar..." ,
|
||||||
|
"usermenu":=<div>users</div>,
|
||||||
|
"title":=request:path(),
|
||||||
|
"messages":=()}
|
||||||
|
let $locals:=map:new(($default,$locals))
|
||||||
|
return txq:render(fn:resolve-uri($template),$locals,$grxq:layout)
|
||||||
|
};
|
||||||
112
src/graphxq/app.css
Normal file
112
src/graphxq/app.css
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
/* app.css */
|
||||||
|
body {
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
@media (max-width: 979px) {
|
||||||
|
body {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* search bar icon */
|
||||||
|
.navbar-search .search-query {
|
||||||
|
padding-left: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-search .icon-search {
|
||||||
|
position: absolute;
|
||||||
|
top: 7px;
|
||||||
|
left: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-search .search-query:focus, .navbar-search .search-query.focused {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.quick-links {
|
||||||
|
list-style: none outside none;
|
||||||
|
margin: 0;
|
||||||
|
min-height: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 5px 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.quick-links:first-child {
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.quick-links li {
|
||||||
|
color: #999999;
|
||||||
|
display: inline;
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
.quick-links .github-btn, .quick-links .tweet-btn, .quick-links .follow-btn {
|
||||||
|
position: relative;
|
||||||
|
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;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
width:100%;
|
||||||
|
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
|
||||||
|
}
|
||||||
25
src/graphxq/app.js
Normal file
25
src/graphxq/app.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
// common app js
|
||||||
|
// sidebar
|
||||||
|
$(function() { $("time.relative-date").prettyDate(); });
|
||||||
|
$(document).ready(function(){
|
||||||
|
$("#dotForm").submit( function () {
|
||||||
|
getsvg();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
$("#dot").bind({"keyup":getsvg});
|
||||||
|
});
|
||||||
|
|
||||||
|
function getsvg(){
|
||||||
|
$.post(
|
||||||
|
'svg',
|
||||||
|
$("#dotForm").serialize(),
|
||||||
|
function(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);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
181
src/graphxq/graphviz.xml
Normal file
181
src/graphxq/graphviz.xml
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
<!--
|
||||||
|
graphviz options for shape,color
|
||||||
|
-->
|
||||||
|
<graphviz>
|
||||||
|
<shapes>
|
||||||
|
<shape>box</shape>
|
||||||
|
<shape>polygon</shape>
|
||||||
|
<shape>ellipse</shape>
|
||||||
|
<shape>circle</shape>
|
||||||
|
<shape>point</shape>
|
||||||
|
<shape>egg</shape>
|
||||||
|
<shape>triangle</shape>
|
||||||
|
<shape>plaintext</shape>
|
||||||
|
<shape>diamond</shape>
|
||||||
|
<shape>trapezium</shape>
|
||||||
|
<shape>parallelogram</shape>
|
||||||
|
<shape>house</shape>
|
||||||
|
<shape>hexagon</shape>
|
||||||
|
<shape>octagon</shape>
|
||||||
|
<shape>doublecircle</shape>
|
||||||
|
<shape>doubleoctagon</shape>
|
||||||
|
<shape>tripleoctagon</shape>
|
||||||
|
<shape>invtriangle</shape>
|
||||||
|
<shape>invtrapezium</shape>
|
||||||
|
<shape>invhouse</shape>
|
||||||
|
<shape>Mdiamond</shape>
|
||||||
|
<shape>Msquare</shape>
|
||||||
|
<shape>Mcircle</shape>
|
||||||
|
<shape>record</shape>
|
||||||
|
<shape>Mrecord</shape>
|
||||||
|
</shapes>
|
||||||
|
<colors>
|
||||||
|
<color>aliceblue</color>
|
||||||
|
<color>antiquewhite</color>
|
||||||
|
<color>aqua</color>
|
||||||
|
<color>aquamarine</color>
|
||||||
|
<color>azure</color>
|
||||||
|
<color>beige</color>
|
||||||
|
<color>bisque</color>
|
||||||
|
<color>black</color>
|
||||||
|
<color>blanchedalmond</color>
|
||||||
|
<color>blue</color>
|
||||||
|
<color>blueviolet</color>
|
||||||
|
<color>brown</color>
|
||||||
|
<color>burlywood</color>
|
||||||
|
<color>cadetblue</color>
|
||||||
|
<color>chartreuse</color>
|
||||||
|
<color>chocolate</color>
|
||||||
|
<color>coral</color>
|
||||||
|
<color>cornflowerblue</color>
|
||||||
|
<color>cornsilk</color>
|
||||||
|
<color>crimson</color>
|
||||||
|
<color>cyan</color>
|
||||||
|
<color>darkblue</color>
|
||||||
|
<color>darkcyan</color>
|
||||||
|
<color>darkgoldenrod</color>
|
||||||
|
<color>darkgray</color>
|
||||||
|
<color>darkgreen</color>
|
||||||
|
<color>darkgrey</color>
|
||||||
|
<color>darkkhaki</color>
|
||||||
|
<color>darkmagenta</color>
|
||||||
|
<color>darkolivegreen</color>
|
||||||
|
<color>darkorange</color>
|
||||||
|
<color>darkorchid</color>
|
||||||
|
<color>darkred</color>
|
||||||
|
<color>darksalmon</color>
|
||||||
|
<color>darkseagreen</color>
|
||||||
|
<color>darkslateblue</color>
|
||||||
|
<color>darkslategray</color>
|
||||||
|
<color>darkslategrey</color>
|
||||||
|
<color>darkturquoise</color>
|
||||||
|
<color>darkviolet</color>
|
||||||
|
<color>deeppink</color>
|
||||||
|
<color>deepskyblue</color>
|
||||||
|
<color>dimgray</color>
|
||||||
|
<color>dimgrey</color>
|
||||||
|
<color>dodgerblue</color>
|
||||||
|
<color>firebrick</color>
|
||||||
|
<color>floralwhite</color>
|
||||||
|
<color>forestgreen</color>
|
||||||
|
<color>fuchsia</color>
|
||||||
|
<color>gainsboro</color>
|
||||||
|
<color>ghostwhite</color>
|
||||||
|
<color>gold</color>
|
||||||
|
<color>goldenrod</color>
|
||||||
|
<color>gray</color>
|
||||||
|
<color>grey</color>
|
||||||
|
<color>green</color>
|
||||||
|
<color>greenyellow</color>
|
||||||
|
<color>honeydew</color>
|
||||||
|
<color>hotpink</color>
|
||||||
|
<color>indianred</color>
|
||||||
|
<color>indigo</color>
|
||||||
|
<color>ivory</color>
|
||||||
|
<color>khaki</color>
|
||||||
|
<color>lavender</color>
|
||||||
|
<color>lavenderblush</color>
|
||||||
|
<color>lawngreen</color>
|
||||||
|
<color>lemonchiffon</color>
|
||||||
|
<color>lightblue</color>
|
||||||
|
<color>lightcoral</color>
|
||||||
|
<color>lightcyan</color>
|
||||||
|
<color>lightgoldenrodyellow</color>
|
||||||
|
<color>lightgray</color>
|
||||||
|
<color>lightgreen</color>
|
||||||
|
<color>lightgrey</color>
|
||||||
|
<color>lightpink</color>
|
||||||
|
<color>lightsalmon</color>
|
||||||
|
<color>lightseagreen</color>
|
||||||
|
<color>lightskyblue</color>
|
||||||
|
<color>lightslategray</color>
|
||||||
|
<color>lightslategrey</color>
|
||||||
|
<color>lightsteelblue</color>
|
||||||
|
<color>lightyellow</color>
|
||||||
|
<color>lime</color>
|
||||||
|
<color>limegreen</color>
|
||||||
|
<color>linen</color>
|
||||||
|
<color>magenta</color>
|
||||||
|
<color>maroon</color>
|
||||||
|
<color>mediumaquamarine</color>
|
||||||
|
<color>mediumblue</color>
|
||||||
|
<color>mediumorchid</color>
|
||||||
|
<color>mediumpurple</color>
|
||||||
|
<color>mediumseagreen</color>
|
||||||
|
<color>mediumslateblue</color>
|
||||||
|
<color>mediumspringgreen</color>
|
||||||
|
<color>mediumturquoise</color>
|
||||||
|
<color>mediumvioletred</color>
|
||||||
|
<color>midnightblue</color>
|
||||||
|
<color>mintcream</color>
|
||||||
|
<color>mistyrose</color>
|
||||||
|
<color>moccasin</color>
|
||||||
|
<color>navajowhite</color>
|
||||||
|
<color>navy</color>
|
||||||
|
<color>oldlace</color>
|
||||||
|
<color>olive</color>
|
||||||
|
<color>olivedrab</color>
|
||||||
|
<color>orange</color>
|
||||||
|
<color>orangered</color>
|
||||||
|
<color>orchid</color>
|
||||||
|
<color>palegoldenrod</color>
|
||||||
|
<color>palegreen</color>
|
||||||
|
<color>paleturquoise</color>
|
||||||
|
<color>palevioletred</color>
|
||||||
|
<color>papayawhip</color>
|
||||||
|
<color>peachpuff</color>
|
||||||
|
<color>peru</color>
|
||||||
|
<color>pink</color>
|
||||||
|
<color>plum</color>
|
||||||
|
<color>powderblue</color>
|
||||||
|
<color>purple</color>
|
||||||
|
<color>red</color>
|
||||||
|
<color>rosybrown</color>
|
||||||
|
<color>royalblue</color>
|
||||||
|
<color>saddlebrown</color>
|
||||||
|
<color>salmon</color>
|
||||||
|
<color>sandybrown</color>
|
||||||
|
<color>seagreen</color>
|
||||||
|
<color>seashell</color>
|
||||||
|
<color>sienna</color>
|
||||||
|
<color>silver</color>
|
||||||
|
<color>skyblue</color>
|
||||||
|
<color>slateblue</color>
|
||||||
|
<color>slategray</color>
|
||||||
|
<color>slategrey</color>
|
||||||
|
<color>snow</color>
|
||||||
|
<color>springgreen</color>
|
||||||
|
<color>steelblue</color>
|
||||||
|
<color>tan</color>
|
||||||
|
<color>teal</color>
|
||||||
|
<color>thistle</color>
|
||||||
|
<color>tomato</color>
|
||||||
|
<color>turquoise</color>
|
||||||
|
<color>violet</color>
|
||||||
|
<color>wheat</color>
|
||||||
|
<color>white</color>
|
||||||
|
<color>whitesmoke</color>
|
||||||
|
<color>yellow</color>
|
||||||
|
<color>yellowgreen</color>
|
||||||
|
</colors>
|
||||||
|
</graphviz>
|
||||||
|
|
@ -18,9 +18,9 @@ declare %private variable $gr:dotpath:=if(fn:environment-variable("DOTPATH"))
|
||||||
(:~
|
(:~
|
||||||
: folder for temp files
|
: folder for temp files
|
||||||
:)
|
:)
|
||||||
declare %private variable $gr:tmpdir:=if(fn:environment-variable("TEMP"))
|
declare %private variable $gr:tmpdir:=if(file:dir-separator()="\")
|
||||||
then fn:environment-variable("TEMP")
|
then fn:environment-variable("TEMP") || "\"
|
||||||
else "/tmp";
|
else "/tmp/";
|
||||||
|
|
||||||
declare %private variable $gr:empty:=
|
declare %private variable $gr:empty:=
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 20" version="1.1"
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 20" version="1.1"
|
||||||
|
|
@ -39,11 +39,11 @@ declare function dot( $dot as xs:string*, $params as xs:string*) as node()*{
|
||||||
};
|
};
|
||||||
|
|
||||||
declare %private function dot1( $dot as xs:string) as node(){
|
declare %private function dot1( $dot as xs:string) as node(){
|
||||||
let $fname:=$gr:tmpdir || file:dir-separator() || random:uuid()
|
let $fname:=$gr:tmpdir || random:uuid()
|
||||||
let $junk:=file:write-text($fname,$dot)
|
let $junk:=file:write-text($fname,$dot)
|
||||||
let $r:=proc:execute($gr:dotpath , ("-Tsvg",$fname))
|
let $r:=proc:execute($gr:dotpath , ("-Tsvg",$fname))
|
||||||
let $junk:=file:delete($fname)
|
let $junk:=file:delete($fname)
|
||||||
|
(: let $r:=fn:trace($r,"hhi"):)
|
||||||
return if($r/code="0")
|
return if($r/code="0")
|
||||||
then fn:parse-xml($r/output)
|
then fn:parse-xml($r/output)
|
||||||
else fn:error()
|
else fn:error()
|
||||||
|
|
|
||||||
BIN
src/graphxq/graphxq.png
Normal file
BIN
src/graphxq/graphxq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 880 B |
BIN
src/graphxq/graphxq2.png
Normal file
BIN
src/graphxq/graphxq2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 880 B |
1394
src/graphxq/jquery.svg.js
Normal file
1394
src/graphxq/jquery.svg.js
Normal file
File diff suppressed because it is too large
Load diff
45
src/graphxq/lib/txq.xqm
Normal file
45
src/graphxq/lib/txq.xqm
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
(:~
|
||||||
|
: A(nother) templating Engine for XQuery (BaseX 7.5 specific)
|
||||||
|
:
|
||||||
|
: @author andy bunce
|
||||||
|
: @since sept 2012
|
||||||
|
:)
|
||||||
|
|
||||||
|
module namespace txq = 'apb.txq';
|
||||||
|
declare default function namespace 'apb.txq';
|
||||||
|
import module namespace xquery = "http://basex.org/modules/xquery";
|
||||||
|
|
||||||
|
(:~
|
||||||
|
: template function
|
||||||
|
: @param template url to fill
|
||||||
|
: @param map name and value to apply
|
||||||
|
: @return updated doc from map
|
||||||
|
:)
|
||||||
|
declare function render($template as xs:string,$map as map(*)){
|
||||||
|
let $map:=map:new(($map,map{"partial":=partial(?,?,?,$map,$template)}))
|
||||||
|
return xquery:invoke($template,$map)
|
||||||
|
};
|
||||||
|
|
||||||
|
(:~
|
||||||
|
: template function with wrapping layout
|
||||||
|
: @param layout
|
||||||
|
: @return updated doc from map
|
||||||
|
:)
|
||||||
|
declare function render($template as xs:string,$map as map(*),$layout as xs:string){
|
||||||
|
let $content:=render($template,$map)
|
||||||
|
let $map:=map:new(($map,map{"body":=$content}))
|
||||||
|
return render($layout,$map)
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
(:~
|
||||||
|
: partial template function: evaluate part for each value in sequence
|
||||||
|
: @return updated doc from map
|
||||||
|
:)
|
||||||
|
declare function partial($part as xs:string,$name,$seq,$map,$base){
|
||||||
|
for $s in $seq
|
||||||
|
let $map:=map:new(($map,map{$name:=$s}))
|
||||||
|
return render($map,fn:resolve-uri($part,$base))
|
||||||
|
};
|
||||||
|
|
||||||
46
src/graphxq/txq.xqm
Normal file
46
src/graphxq/txq.xqm
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
(:~
|
||||||
|
: A(nother) templating Engine for XQuery (BaseX 7.5+(or -) specific)
|
||||||
|
:
|
||||||
|
: @author andy bunce
|
||||||
|
: @since sept 2012
|
||||||
|
:)
|
||||||
|
|
||||||
|
module namespace txq = 'apb.txq';
|
||||||
|
declare default function namespace 'apb.txq';
|
||||||
|
import module namespace xquery = "http://basex.org/modules/xquery";
|
||||||
|
|
||||||
|
|
||||||
|
(:~
|
||||||
|
: template function
|
||||||
|
: @return updated doc from map
|
||||||
|
:)
|
||||||
|
declare function render($map as map(*),$layout as xs:string,$file as xs:string)
|
||||||
|
{
|
||||||
|
let $content:=render($map,$file)
|
||||||
|
let $map:=map:new(($map,map{"body":=$content}))
|
||||||
|
return render($map,$layout)
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
(:~
|
||||||
|
: template function
|
||||||
|
: @return updated doc from map
|
||||||
|
:)
|
||||||
|
declare function render($layout as xs:string,$map as map(*))
|
||||||
|
{
|
||||||
|
let $map:=map:new(($map,map{"partial":=partial(?,?,?,$map,$layout)}))
|
||||||
|
return xquery:invoke($layout,$map)
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
(:~
|
||||||
|
: partial template function: evaluate part for each value in sequence
|
||||||
|
: @return updated doc from map
|
||||||
|
:)
|
||||||
|
declare function partial($part as xs:string,$name,$seq,$map,$base)
|
||||||
|
{
|
||||||
|
for $s in $seq
|
||||||
|
let $map:=map:new(($map,map{$name:=$s}))
|
||||||
|
return render($map,fn:resolve-uri($part,$base))
|
||||||
|
};
|
||||||
|
|
||||||
44
src/graphxq/views/about.xml
Normal file
44
src/graphxq/views/about.xml
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<div>
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>About GraphXQ</h1>
|
||||||
|
<p>
|
||||||
|
This application provides a web interface to <a href="http://www.graphviz.org/">Graphviz</a>.
|
||||||
|
It uses the <a href="http://basex.org" target="_blank">BaseX</a> <a
|
||||||
|
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
|
||||||
|
implementation which allows the use of XQuery annotations to specify
|
||||||
|
web server behavior.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
This product 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.
|
||||||
|
</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">
|
||||||
|
<!--
|
||||||
|
<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%2Fxqwebdoc%2F&size=m&text=xqwebdoc #xquery&url=https%3A%2F%2Fgithub.com%2Fapb2006%2Fxqwebdoc&via=apb1704"
|
||||||
|
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
18
src/graphxq/views/dotform.xml
Normal file
18
src/graphxq/views/dotform.xml
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<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>
|
||||||
|
</form >
|
||||||
|
|
||||||
|
<div class="span5">
|
||||||
|
<div id="svgdiv" style="width:100%;height:30em;border:1px solid red;min-height:20em;">svg here</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
13
src/graphxq/views/dotmlform.xml
Normal file
13
src/graphxq/views/dotmlform.xml
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<div class="row-fluid" style="heigth:20em">
|
||||||
|
<div class="span5">
|
||||||
|
<form method="post" action="." style="background-color:#EEEEEE;padding:8px;">
|
||||||
|
|
||||||
|
<textarea name="dot" rows="2" cols="80"></textarea>
|
||||||
|
|
||||||
|
<button type="submit">Redraw</button>
|
||||||
|
</form >
|
||||||
|
</div>
|
||||||
|
<div class="span5">
|
||||||
|
<div style="width:100%;height:100%;border:5px solid red;">?</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
91
src/graphxq/views/layout.xml
Normal file
91
src/graphxq/views/layout.xml
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
<html >
|
||||||
|
<head id="head">
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title id="title">{$title}</title>
|
||||||
|
<base href="/restxq/graphxq/" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content="xquery documentation" />
|
||||||
|
<meta name="author" content="andy bunce" />
|
||||||
|
<link href="/lib/bootstrap/2.1.0/css/bootstrap.css" rel="stylesheet"
|
||||||
|
type="text/css" />
|
||||||
|
|
||||||
|
|
||||||
|
<link href="/lib/bootstrap/2.1.0/css/bootstrap-responsive.min.css"
|
||||||
|
rel="stylesheet" type="text/css" />
|
||||||
|
<link href="/graphxq/app.css" rel="stylesheet" type="text/css" />
|
||||||
|
<!-- Le fav and touch icons -->
|
||||||
|
<link rel="shortcut icon" href="/graphxq/graphxq2.png" />
|
||||||
|
|
||||||
|
<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 || [];
|
||||||
|
_gaq.push(['_setAccount', 'UA-33899303-1']);
|
||||||
|
_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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="navbar navbar-fixed-top " data-dropdown="dropdown">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container">
|
||||||
|
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</a>
|
||||||
|
<a href="." class="brand" title="Version 0.0.1">
|
||||||
|
<img src="/graphxq/graphxq2.png" />
|
||||||
|
graphXQ
|
||||||
|
</a>
|
||||||
|
<form class="pull-right navbar-search" action="search">
|
||||||
|
<input type="text" class="search-query span3" placeholder="Search"
|
||||||
|
name="q" />
|
||||||
|
<div class="icon-search"></div>
|
||||||
|
</form>
|
||||||
|
<div class="btn-group pull-right" style="margin-top:0px">
|
||||||
|
{$usermenu}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="nav-collapse collapse">
|
||||||
|
<ul class="nav">
|
||||||
|
|
||||||
|
<li class="">
|
||||||
|
<a href="./dot" rel="tooltip" data-title="first tooltip">Dot</a>
|
||||||
|
</li>
|
||||||
|
<li class="">
|
||||||
|
<a href="./dotml">DotML</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="">
|
||||||
|
<a href="about">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div id="sidebar" class="span2 well">{$sidebar}</div>
|
||||||
|
<div id="content" class="span10">{$body}</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
35
src/graphxq/views/page1.xml
Normal file
35
src/graphxq/views/page1.xml
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
|
||||||
|
<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>
|
||||||
6
src/graphxq/views/search.xml
Normal file
6
src/graphxq/views/search.xml
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<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>
|
||||||
Loading…
Add table
Reference in a new issue