ace start

src/graphxq/app.js

@@ -1,73 +1,47 @@
 // common app js
-// sidebar
+function throttle(fn, delay) {
-
+  var timer = null;
-// http://stackoverflow.com/questions/4583703/jquery-post-request-not-ajax
+  return function () {
-jQuery(function($) { $.extend({
+    var context = this, args = arguments;
-    form: function(url, data, method) {
+    clearTimeout(timer);
-        if (method == null) method = 'POST';
+    timer = setTimeout(function () {
-        if (data == null) data = {};
+      fn.apply(context, args);
-
+    }, delay);
-        var form = $('<form>').attr({
-            method: method,
-            action: url
-         }).css({
-            display: 'none'
-         });
-
-        var addData = function(name, data) {
-            if ($.isArray(data)) {
-                for (var i = 0; i < data.length; i++) {
-                    var value = data[i];
-                    addData(name + '[]', value);
-                }
-            } else if (typeof data === 'object') {
-                for (var key in data) {
-                    if (data.hasOwnProperty(key)) {
-                        addData(name + '[' + key + ']', data[key]);
-                    }
-                }
-            } else if (data != null) {
-                form.append($('<input>').attr({
-                  type: 'hidden',
-                  name: String(name),
-                  value: String(data)
-                }));
-            }
   };
-
+} 
-        for (var key in data) {
+$(document).ready(function(){
-            if (data.hasOwnProperty(key)) {
+    if($("#editForm").length)setupEdit()
-                addData(key, data[key]);
+});
-            }
+function setupEdit(){
-        }
+    // toolbar buttons
-
+    $('a[data-action="lDom"]').click(function (){
-        return form.appendTo('body');
-    }
-}); });
-
-$(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 (){
+    $('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 (){
+    $('a[data-action="rDom"]').click(function (){
         $("#rightPane").css('display','inline').removeAttr('class').addClass("span12");
         $("#leftPane").removeAttr('class').css("display","none");
-});
+    });
-});
 
-$(document).ready(function(){
+   var sub=function(download){
+       $('input[name=dl]').attr('checked', download);
+       $("#editForm").submit();       
+    };   
    $("#bnup").on("click",getsvg);
-   $("#bnsvg").on("click",function(){ $("#editForm").submit()});
+   $("#bnsvg").on("click",function(){sub(false)});
-   $("#bndn").on("click",function(){getsvg(true)});
+   $("#bndn").on("click",function(){sub(true)});
-   $("#dot").on("keyup",getsvg);
+   $("#dot").on("keyup",throttle(getsvg,300));
-   $("#bnxml").on("click",function(){$("#svgdiv,#svgsrc").toggle()});
+   $("#bnxml").on("click",function(){
-   
+                            $("#svgdiv,#svgsrc").toggle()
+                            });
+    $("#bnclear").on("click",function(){
+                              $("#dot").val("digraph title {\n\n}")
+                            });
    var resize=function(){
      var h=$(window).height();
      $('.extend').each(function(){
@@ -78,13 +52,12 @@ $(document).ready(function(){
 	};  
     $(window).resize(resize);
     resize();
-});
+    getsvg()	
+};
 
-function getsvg(dl){
+function getsvg(){
      var f=$("#editForm").serializeArray()
-     //var d=$("#frm-defaults").serializeArray()
+     var d0=+new Date()
-     //console.log("#frm-default",d)
-	// if(dl)f.push({"name":"dl","value":1})
 	 $.ajax({
              type:"POST",
 			 url:$("#editForm").attr("action"),
@@ -92,6 +65,8 @@ function getsvg(dl){
 			 dataType: "text",
              success: function(str){
                // console.log(data)
+               var d=(new Date())-d0;
+               console.log("svg time:",d);
 			   var oParser = new DOMParser();
                var data = oParser.parseFromString(str, "text/xml");
                 // http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file

src/graphxq/data/library.xml

@@ -2,22 +2,26 @@
 	<item>
 		<title>Process</title>
 		<url type="dot">samples/dot/process.gv</url>
-		(dot)
+		<description>parallel process sequence</description>
 	</item>
 	<item>
 		<title>Unix</title>
 		<url type="dot">samples/dot/unix.gv</url>
+        <description>Evolution of UNIX.</description>
 	</item>
 	<item>
 		<title>Root</title>
 		<url type="dot">samples/dot/root.gv</url>
+        <description>Very large and slow.</description>
 	</item>
 	<item>
 		<title>Sample</title>
 		<url type="dotml">samples/dotml/sample1.xml</url>
+         <description>State machine.</description>
 	</item>
 	<item>
 		<title>Cluster</title>
 		<url type="dotml">samples/dotml/cluster.xml</url>
+         <description>Simple cluster.</description>
 	</item>
 </items>

src/graphxq/diag-xqdoc.xq

@@ -0,0 +1,12 @@
+declare namespace doc="http://www.xqdoc.org/1.0";
+declare namespace dotml="http://www.martin-loetzsch.de/DOTML";
+
+<dotml:graph  file-name="graphs/bgcolor" rankdir="LR" bgcolor="#80FF80">
+<dotml:cluster>
+{for $f in //doc:function
+ return <dotml:node id="{generate-id($f)}" label="{$f/doc:name}" fillcolor="red"  style="filled"/>,
+for $v in //doc:variable
+ return <dotml:node id="{generate-id($v)}" label="{$v/doc:name}"  fillcolor="green"  style="filled"/>
+}
+</dotml:cluster>
+</dotml:graph>

src/graphxq/graphxq.xqm

@@ -41,16 +41,8 @@ declare
 function graphxq-svg($dot,$url,$dl) {
     let $dot2:=getdot($dot,$url)
     let $svg:=dot2svg($dot2)
-    let $resp:=<rest:response>
+    let $fname:=if($dl)then "dot.svg" else ()
-                <http:response>
+    return (headers($fname),$svg) 
-                    <http:header name="Access-Control-Allow-Origin" value="*"/>
-                {if($dl)
-                then <http:header name="Content-Disposition" value='attachment;filename="graphxq.svg"'/>
-                else ()}
-                </http:response>
-            </rest:response>
-    
-    return ($resp,$svg) 
 };
 
 (:~
@@ -102,13 +94,41 @@ function api(){
     render("views/api.xml",map{"title":="API information"})
 };
 
+(:~ static ace page :)
+declare 
+%rest:GET %rest:path("graphxq/ace")
+%output:method("html") %output:version("5.0")
+function ace(){
+    let $svgwidget:=fn:doc("views/widget.svg")
+    let $toolbar:=fn:doc("views/toolbar.xml")
+    let $v:=map{ "svgwidget":=$svgwidget,
+                 "toolbar":=$toolbar,
+                 "title":="DOTML editor",
+                 "bodyclass":="h100",
+                 "dotml":="gg"}
+    return render("views/ace.xml",$v)
+};
+
+(:~  js worker same origin : https://github.com/ajaxorg/ace/issues/1161 :)
+declare 
+%rest:GET %rest:path("graphxq/ace/worker")
+%rest:form-param("w","{$w}")
+%output:media-type("application/javascript")
+%output:method("text")
+function ace-worker($w){
+    let  $a:="https://raw.github.com/ajaxorg/ace-builds/master/src-min-noconflict" || $w
+    return http:send-request(<http:send-request method="GET"/>,$a)[2]
+};
+
 declare 
 %rest:GET %rest:path("graphxq/library")
 %output:method("html") %output:version("5.0")
 function library(){
  let $lib:=fn:doc("data/library.xml")
  let $map:=map{"title":="Samples",
-              "count":=fn:count($lib//item)}
+              "items":=$lib//items,
+              "url":=function($item){fn:concat($item/url/@type,'?src=',$item/url)}
+              }
  return render("views/library.xml",$map)
 };
 
@@ -118,13 +138,13 @@ function library(){
 declare 
 %rest:POST %rest:path("graphxq/api/dotml")
 %rest:form-param("dotml","{$dotml}")
-function api-dotml($dotml ) as node(){
+%rest:form-param("dl","{$dl}")
+function api-dotml($dotml,$dl ) {
  let $dotml:=fn:parse-xml($dotml)
- let $y:=fn:trace($dotml,"ff")
  let $x:=dotml:generate($dotml)
  let $svg:=dot2svg($x)
- return $svg
+ let $fname:=if($dl)then "dotml.svg" else ()
- 
+ return (headers($fname),$svg)  
 };
 
 (:~  if url is defined then treat as url and fetch else use dot  :)
@@ -147,7 +167,17 @@ declare %private function getdotml($dotml as node(),$url) as node(){
   else    
     $dotml         
 };
- 
+(:~ CORS header with download option :) 
+declare function headers($attachment){
+<rest:response>
+    <http:response>
+        <http:header name="Access-Control-Allow-Origin" value="*"/>
+    {if($attachment)
+    then <http:header name="Content-Disposition" value='attachment;filename="{$attachment}"'/>
+    else ()}
+    </http:response>
+</rest:response>
+};            
 (:~ Generate svg from dot :)
 declare %private function dot2svg($dot as xs:string) as node(){
     let $svgx:=gr:dot($dot,())

src/graphxq/lib/txq.xqm

@@ -42,6 +42,6 @@ declare function render($template as xs:string,$map as map(*),$layout as xs:stri
 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))  
+  return render(fn:resolve-uri($part,$base),$map)  
 };
 

src/graphxq/views/ace.xml

@@ -0,0 +1,31 @@
+<div>
+
+
+	<div class="row-fluid" style="height:24px">
+		{$toolbar}
+	</div>
+	<div class="row-fluid">
+		<div class="span6  extend" id="leftPane">		
+			<form id="editForm" action="svg" method="post" target="_new"
+				class="well ">
+					<div id="editor">function foo(items) {{
+    var x = "All this is syntax highlighted";
+    return x;
+}}</div>
+			</form>
+				
+		</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>
+            <pre style="display: none" id="svgsrc">(no svg loaded)</pre>
+		</div>
+<script>
+    // https://github.com/ajaxorg/ace/issues/1161
+    ace.config.set("workerPath", "ace/worker?w=");
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/monokai");
+    editor.getSession().setMode("ace/mode/javascript");
+</script>
+	</div>
+</div>

src/graphxq/views/dotform.xml

@@ -52,11 +52,7 @@ aria-labelledby="myModalLabel" aria-hidden="true">
 				class="well ">
 					<textarea id="dot" name="dot" rows="100"
 					style="width:90%;overflow:scroll">{$dot}</textarea>
-				
+					<input name="dl" type="checkbox" style="display:hidden"/>
-				<label class="checkbox">
-					<input name="dl" type="checkbox" />
-					Download
-				</label>
 			</form>
 				
 		</div>
@@ -66,10 +62,5 @@ aria-labelledby="myModalLabel" aria-hidden="true">
             <pre style="display: none" id="svgsrc">(no svg loaded)</pre>
 		</div>
 
-		<script type="text/javascript">
-			$(document).ready(function(){{
-			getsvg(false)
-			}})
-		</script>
 	</div>
 </div>

src/graphxq/views/dotmlform.xml

@@ -4,8 +4,9 @@
 </div>
 <div class="row-fluid"  >
 	<div class="span6" id="leftPane" style="position:relative;height:100%">
-		<form id="editForm" method="post" action="api/dotml" style="background-color:#EEEEEE;" class="extend">
+		<form id="editForm" method="post" action="api/dotml" target="_new" style="background-color:#EEEEEE;" class="extend">
 			<textarea name="dotml" rows="20"  style="width:100%;overflow:scroll;height:100%">{$dotml}</textarea>			
+		    <input name="dl" type="checkbox" style="display:hidden"/>
         </form >
 	</div>
 	<div class="span6" id="rightPane">

src/graphxq/views/item1.xml

@@ -0,0 +1,10 @@
+<li class="span4" style="height:180px;">
+    <a class="pull-left" href="{$url($item)}">
+        <img class="media-object" src="/graphxq/{$item/url/@type}.png" style="width:100px;height:100px"/>
+       </a>
+    <div class="media-body">
+        <h4 class="media-heading"><a href="{$url($item)}">{$item/title/fn:string()}</a></h4>
+     {$item/description/node()}
+    </div>
+ 
+</li>

src/graphxq/views/layout.xml

@@ -19,7 +19,7 @@
 
 		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
 		<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js" type="text/javascript"></script>
-        <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+        <script src="http://raw.github.com/ajaxorg/ace-builds/master/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
         <script src="/graphxq/app.js" type="text/javascript"></script>
     <script type="text/javascript"><![CDATA[
           var _gaq = _gaq || [];
@@ -62,6 +62,9 @@
               <li class="{$active-link('api')}">
                   <a href="api"><i class="icon-wrench"></i> API</a>
               </li>
+            <li class="{$active-link('api')}">
+                  <a href="ace"><i class="icon-wrench"></i> Ace</a>
+              </li>                  
             </ul>         
              <div class="btn-group pull-right" style="margin-top:0px">
              {$usermenu}             

src/graphxq/views/library.xml

@@ -1,45 +1,6 @@
 <div>
-    <!-- q,collection, hits -->
+     <h2>Samples ({fn:count($items/item )})</h2>
-    <h2>Samples {$count}</h2>
+     <ul class=" thumbnails ">
-    <ul>
+     {$partial("item1.xml","item",$items/item)}
-        <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>
-     <h2>Samples</h2>
-    <div class="media well">
-        <a class="pull-left" href="#">
-            <img class="media-object" src="/graphxq/graphxq.png"/>
-        </a>
-        <div class="media-body">
-            <h4 class="media-heading">Title</h4>
-     Description....
-        </div>
-    </div>
-    <div class="media well">
-        <a class="pull-left" href="#">
-            <img class="media-object" src="/graphxq/dotml.png"/>
-        </a>
-        <div class="media-body">
-            <h4 class="media-heading">Title2</h4>
-     Description....
-        </div>
-    </div>
 </div> 

src/graphxq/views/toolbar.xml

@@ -4,18 +4,8 @@
 			<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>
-		<button id="bnxml" class="btn btn-mini" data-toggle="button">
-			<i class="icon-text-width"></i>
-			SVG text
-		</button>
 	</div>
 	<div class="btn-group">
 		<button id="bnxx" class="btn btn-mini">
@@ -23,6 +13,12 @@
 			Options
 		</button>
 	</div>
+    <div class="btn-group">
+		<button id="bnclear" class="btn btn-mini">
+			<i class="icon-remove"></i>
+			Clear
+		</button>
+	</div>
 	<!-- http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap -->
 	<div class="btn-group " data-toggle="buttons-radio">
 		<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini"
@@ -38,4 +34,21 @@
 			<i class="icon icon-indent-right"></i>
 		</a>
 	</div>
+    <div class="btn-group pull-right">
+    <button id="bnsvg" class="btn btn-mini" title="Show SVG standalone.">
+			<i class="icon-fullscreen"></i>
+			SVG
+		</button>
+		<button id="bndn" class="btn btn-mini" title="Download SVG file">
+			<i class="icon-download-alt"></i>
+			download
+		</button>
+    </div>
+    <div class="btn-group pull-right">
+    	
+    <button id="bnxml" class="btn btn-mini" data-toggle="button" title="Toggle SVG graphic and text">
+			<i class="icon-text-width"></i>
+			SVG text
+		</button>
+    </div>
 </div>