diff --git a/src/graphxq/app.css b/src/graphxq/app.css index f5753e0..6eb3b5f 100644 --- a/src/graphxq/app.css +++ b/src/graphxq/app.css @@ -7,6 +7,9 @@ body { padding-top: 0; } } +.h100{ + height:100%; +} /* search bar icon */ .navbar-search .search-query { padding-left: 29px; @@ -26,26 +29,6 @@ body { .navbar-fixed-top { margin-bottom: 4px; } -.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; -} #editor { diff --git a/src/graphxq/app.js b/src/graphxq/app.js index 7878e6e..1572a46 100644 --- a/src/graphxq/app.js +++ b/src/graphxq/app.js @@ -63,9 +63,11 @@ $('a[data-action="rDom"]').click(function (){ $(document).ready(function(){ $("#bnup").on("click",getsvg); - $("#bnsvg").on("click",function(){ $("#dotForm").submit()}); + $("#bnsvg").on("click",function(){ $("#editForm").submit()}); $("#bndn").on("click",function(){getsvg(true)}); $("#dot").on("keyup",getsvg); + $("#bnxml").on("click",function(){$("#svgdiv,#svgsrc").toggle()}); + var resize=function(){ var h=$(window).height(); $('.extend').each(function(){ @@ -79,13 +81,13 @@ $(document).ready(function(){ }); function getsvg(dl){ - var f=$("#dotForm").serializeArray() + var f=$("#editForm").serializeArray() //var d=$("#frm-defaults").serializeArray() //console.log("#frm-default",d) // if(dl)f.push({"name":"dl","value":1}) $.ajax({ type:"POST", - url:"svg", + url:$("#editForm").attr("action"), data:f, dataType: "text", success: function(str){ diff --git a/src/graphxq/data/library.xml b/src/graphxq/data/library.xml new file mode 100644 index 0000000..5a03ccb --- /dev/null +++ b/src/graphxq/data/library.xml @@ -0,0 +1,23 @@ + + + Process + samples/dot/process.gv + (dot) + + + Unix + samples/dot/unix.gv + + + Root + samples/dot/root.gv + + + Sample + samples/dotml/sample1.xml + + + Cluster + samples/dotml/cluster.xml + + \ No newline at end of file diff --git a/src/graphxq/dotml.png b/src/graphxq/dotml.png new file mode 100644 index 0000000..da2b504 Binary files /dev/null and b/src/graphxq/dotml.png differ diff --git a/src/graphxq/graphxq.xqm b/src/graphxq/graphxq.xqm index 0c0b399..f99cc08 100644 --- a/src/graphxq/graphxq.xqm +++ b/src/graphxq/graphxq.xqm @@ -87,6 +87,7 @@ function dotmlform($src){ let $v:=map{ "svgwidget":=$svgwidget, "toolbar":=$toolbar, "title":="DOTML editor", + "bodyclass":="h100", "dotml":=$dotml} return render("views/dotmlform.xml",$v) }; @@ -104,8 +105,10 @@ function api(){ declare %rest:GET %rest:path("graphxq/library") %output:method("html") %output:version("5.0") -function library( ) { - let $map:=map{"title":="Samples"} +function library(){ + let $lib:=fn:doc("data/library.xml") + let $map:=map{"title":="Samples", + "count":=fn:count($lib//item)} return render("views/library.xml",$map) }; @@ -115,8 +118,7 @@ function library( ) { declare %rest:POST %rest:path("graphxq/api/dotml") %rest:form-param("dotml","{$dotml}") -function api-dotml($dotml ) as node() -{ +function api-dotml($dotml ) as node(){ let $dotml:=fn:parse-xml($dotml) let $y:=fn:trace($dotml,"ff") let $x:=dotml:generate($dotml) @@ -134,8 +136,7 @@ declare %private function getdot($dot as xs:string,$url) as xs:string{ }; (:~ if url is defined then treat as url and fetch else use dotml :) -declare %private function getdotml($dotml as node(),$url) as node() -{ +declare %private function getdotml($dotml as node(),$url) as node(){ if($url) then try{ fn:doc(fn:resolve-uri($url)) @@ -153,16 +154,22 @@ declare %private function dot2svg($dot as xs:string) as node(){ return gr:autosize($svgx) }; +(:~ css class to hightlight current page :) +declare function active-link($path as xs:string,$page as xs:string) as xs:string{ + if(fn:ends-with($path,$page)) then "active" else "" +}; + (:~ : Render html page : @param template path to page template : @params locals map of page variables :) declare function render($template as xs:string,$locals){ - + let $path:=request:path() let $default:=map{"usermenu":=
users
, "title":=request:path(), - "messages":=()} + "active-link":=active-link($path,?), (: *** FAILS IF request:path() :) + "bodyclass":=""} let $locals:=map:new(($default,$locals)) return txq:render(fn:resolve-uri($template),$locals,$grxq:layout) }; \ No newline at end of file diff --git a/src/graphxq/views/about.xml b/src/graphxq/views/about.xml index 4c0734e..60a4b32 100644 --- a/src/graphxq/views/about.xml +++ b/src/graphxq/views/about.xml @@ -9,19 +9,6 @@
-
-

Server

-

The server side is written entirely in XQuery. It uses the - BaseX implementation. RestXQ - is used to map XQuery annotations to web server behavior. -

-

The graphviz dot 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.

-

This application includes DOTML developed by Martin Loetzsch. - DOTML is a XML based syntax for the input language of the 'Dot'.

-

Client

The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21. @@ -35,12 +22,28 @@

The resultant SVG is viewed in an interface that provides pan and zoom functionality. The SVG may also be viewed standalone or downloaded.

+
+

Server

+

The server side is written entirely in XQuery. It uses the + BaseX implementation. RestXQ + is used to map XQuery annotations to web server behavior. +

+

The graphviz dot 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.

+

This application includes an XSLT transform to convert DOTML to + dot developed by Martin Loetzsch. + DOTML + is a XML based syntax for the input language of the 'Dot'.

+
-

Bugs

+

Todo

The SVG pan and zoom has problems, especially in Firefox. In part this maybe due to firefox bugs

For reference this shows how the SVG viewbox -works.

+works. See also here. +

diff --git a/src/graphxq/views/dotform.xml b/src/graphxq/views/dotform.xml index 8411393..a4a0a30 100644 --- a/src/graphxq/views/dotform.xml +++ b/src/graphxq/views/dotform.xml @@ -1,96 +1,69 @@
+
{$toolbar}
-
- - -
-
- -
- - {{ - - }} - -
-
- -
-
- - - - - - - - - -
- - -
-
- 
source
-
-
+
+
+ + + +
+
{$svgwidget}
- +
- +
@@ -43,23 +43,23 @@ - + graphXQ
diff --git a/src/graphxq/views/library.xml b/src/graphxq/views/library.xml index 2a33bb4..f95f9cc 100644 --- a/src/graphxq/views/library.xml +++ b/src/graphxq/views/library.xml @@ -1,26 +1,45 @@
- -

Samples

- +

Samples

+
+ + + +
+

Title

+ Description.... +
+
+
+ + + +
+

Title2

+ Description.... +
+
\ No newline at end of file diff --git a/src/graphxq/views/toolbar.xml b/src/graphxq/views/toolbar.xml index df75f5d..256a293 100644 --- a/src/graphxq/views/toolbar.xml +++ b/src/graphxq/views/toolbar.xml @@ -1,15 +1,41 @@
-
- - - -
- -
- - - -
+
+ + + + +
+
+ +
+ +
+ + + + + + + + + +
\ No newline at end of file