ace for svg

src/graphxq/app.css

@@ -25,19 +25,20 @@ body {
     padding-left: 30px;
 }
 
-
+/* http://dylemma.io/post/4 */
 .navbar-fixed-top {
     margin-bottom: 4px;
 }
 
-
+.ace-container{
- #editor { 
+ position: relative;
-        margin: 0;
+}
-        padding: 0;
+ .ace { 
-        position: relative;
+    position: absolute;
-         
+    top: 0;
-        width:100%;
+    right: 0;
-		min-height:10em;
+    bottom: 0;
+    left: 0;
     }
  
  

src/graphxq/app.js

@@ -1,33 +1,46 @@
 // common app js
-function throttle(fn, delay) {
+var resize;
-  var timer = null;
+ 
-  return function () {
-    var context = this, args = arguments;
-    clearTimeout(timer);
-    timer = setTimeout(function () {
-      fn.apply(context, args);
-    }, delay);
-  };
-} 
 $(document).ready(function(){
-    if($("#editForm").length)setupEdit()
+    if($("#editForm").length){
+    setupEdit()
+    };
+      resize=function(){
+     var h=$(window).height();
+     $('.extend').not(':hidden').each(function(){
+	  var j=$(this)
+	   var top=j.offset();
+	   j.height(h-top.top-10)
+       console.log("resize",j)
+	 });
+      $('.ace').each(function(){
+      
+      console.log("acerrrr",$(this))
+      ace.edit($(this).attr('id'))
+      }) 
+	};  
+    $(window).resize(resize);
+    resize();
 });
 function setupEdit(){
     // toolbar buttons
     $('a[data-action="lDom"]').click(function (){
         $("#leftPane").css('display','inline').removeAttr('class').addClass("span12");
         $("#rightPane").removeAttr('class').css("display","none");
+        resize();
 
     });
     $('a[data-action="equality"]').click(function (){
         $("#leftPane").css('display','inline').removeAttr('class').addClass("span6");
         $("#rightPane").css('display','inline').removeAttr('class').addClass("span6");
+        resize();
     });
     $('a[data-action="rDom"]').click(function (){
         $("#rightPane").css('display','inline').removeAttr('class').addClass("span12");
         $("#leftPane").removeAttr('class').css("display","none");
+        resize();
     });
-
+    acediv("svgsrc2","svg",true);
    var sub=function(download){
        $('input[name=dl]').attr('checked', download);
        $("#editForm").submit();       
@@ -35,23 +48,16 @@ function setupEdit(){
    $("#bnup").on("click",getsvg);
    $("#bnsvg").on("click",function(){sub(false)});
    $("#bndn").on("click",function(){sub(true)});
-   $("#dot").on("keyup",throttle(getsvg,300));
+   $("#dot").on("keyup",throttle(getsvg,250));
    $("#bnxml").on("click",function(){
                             $("#svgdiv,#svgsrc").toggle()
+                            resize();
                             });
     $("#bnclear").on("click",function(){
-                              $("#dot").val("digraph title {\n\n}")
+                              $("#dot").val(
-                            });
+                              "digraph title {\n bgcolor=seashell\n node[shape=circle,style=filled,fillcolor=lightblue]\n\n}"
-   var resize=function(){
+                              )
-     var h=$(window).height();
+           });
-     $('.extend').each(function(){
-	  var j=$(this)
-	   var top=j.offset();
-	   j.height(h-top.top-10)
-	 });
-	};  
-    $(window).resize(resize);
-    resize();
     getsvg()	
 };
 
@@ -72,7 +78,9 @@ function getsvg(){
                 // http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file
                 var n = document.importNode(data.documentElement,true);              
                 $("#gInsertSVG").empty().append(n);
-				$("#svgsrc").empty().text(str);
+				ace.edit("svgsrc2").setValue(str,1);
+                //ace.edit("svgsrc2").selection.clear();
+  
               },
  			 error:function(jqXHR, textStatus, errorThrown){
  				console.log("ajax error: "+textStatus + errorThrown);
@@ -94,4 +102,25 @@ function dotit(){
 	var t=f1.dotBody.value;
 	sdot+=t+"\n}";
 	update(sdot,f1.filter.value);
-}
+};
+// make div 3id to ace
+function acediv(id,mode,readonly){
+  // https://github.com/ajaxorg/ace/issues/1161
+    ace.config.set("workerPath", "/graphxq/ace-worker");
+    var editor = ace.edit(id);
+    editor.setTheme("ace/theme/textmate");
+    editor.getSession().setMode("ace/mode/"+mode);
+    editor.getSession().setUseWrapMode(true);
+    editor.setReadOnly(readonly);
+};
+
+function throttle(fn, delay) {
+  var timer = null;
+  return function () {
+    var context = this, args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(context, args);
+    }, delay);
+  };
+};

src/graphxq/diag-xqdoc.xq

@@ -1,12 +1,19 @@
 declare namespace doc="http://www.xqdoc.org/1.0";
 declare namespace dotml="http://www.martin-loetzsch.de/DOTML";
-
+declare function local:foo($dml){
-<dotml:graph  file-name="graphs/bgcolor" rankdir="LR" bgcolor="#80FF80">
+<dotml:graph  file-name="graphs/bgcolor" rankdir="LR" bgcolor="seashell">
 <dotml:cluster>
-{for $f in //doc:function
+{for $f in $dml//doc:function
- return <dotml:node id="{generate-id($f)}" label="{$f/doc:name}" fillcolor="red"  style="filled"/>,
+ return <dotml:node id="{generate-id($f)}" label="{$f/doc:name}" fillcolor="lightblue"  style="filled"/>,
-for $v in //doc:variable
+for $v in $dml//doc:variable
  return <dotml:node id="{generate-id($v)}" label="{$v/doc:name}"  fillcolor="green"  style="filled"/>
 }
 </dotml:cluster>
-</dotml:graph>
+</dotml:graph>
+};
+let $a:=local:foo(/)
+let $req:=<http:request method="POST" >
+<http:body  media-type="application/x-www-form-urlencoded">dotml={fn:encode-for-uri(fn:serialize($a))}</http:body>
+</http:request>
+let $ws:= http:send-request($req,"http://localhost:8984/restxq/graphxq/api/dotml")
+return file:write("aa.svg",$ws[2])

src/graphxq/graphxq.xqm

@@ -109,16 +109,6 @@ function ace(){
     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")
@@ -140,6 +130,7 @@ declare
 %rest:form-param("dotml","{$dotml}")
 %rest:form-param("dl","{$dl}")
 function api-dotml($dotml,$dl ) {
+ let $dotml:=fn:trace($dotml,"dot: ")
  let $dotml:=fn:parse-xml($dotml)
  let $x:=dotml:generate($dotml)
  let $svg:=dot2svg($x)

src/graphxq/views/ace.xml

@@ -1,19 +1,14 @@
 <div>
-
-
 	<div class="row-fluid" style="height:24px">
 		{$toolbar}
 	</div>
-	<div class="row-fluid">
+	<div class="row-fluid" >
-		<div class="span6  extend" id="leftPane">		
+		<div class="span6  ace-container extend" id="leftPane" style="height:20em;">		
-			<form id="editForm" action="svg" method="post" target="_new"
+					<div id="editor" class="ace">function foo(items) {{
-				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"
@@ -21,11 +16,7 @@
             <pre style="display: none" id="svgsrc">(no svg loaded)</pre>
 		</div>
 <script>
-    // https://github.com/ajaxorg/ace/issues/1161
+  acediv("editor","xquery",false)
-    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

@@ -1,5 +1,28 @@
 <div>
-<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" 
+
+	<div class="row-fluid" style="height:24px">
+		{$toolbar}
+	</div>
+	<div class="row-fluid">
+		<div class="span6  " id="leftPane">		
+			<form id="editForm" action="svg" method="post" target="_new"
+				class="extend" Xstyle="overflow:hidden;height:100%">
+					<textarea id="dot" name="dot" rows="100"
+					style="width:100%;overflow:scroll;height:98%">{$dot}</textarea>
+					<input name="dl" type="checkbox" style="display:none"/>
+			</form>
+				
+		</div>
+		<div class="span6" id="rightPane">
+			<div id="svgdiv" class="extend"
+				style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:10em;">{$svgwidget}</div>
+             <div id="svgsrc" class="extend ace-container" style="display: none">
+            <div  id="svgsrc2" class="ace ">(no svg loaded)</div>
+            </div>
+		</div>
+
+	</div>
+    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" 
 aria-labelledby="myModalLabel" aria-hidden="true">
 <form id="frm-defaults" class="form-table">
                         <label>
@@ -43,24 +66,4 @@ aria-labelledby="myModalLabel" aria-hidden="true">
                         </label>
                     </form>
 </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 ">
-					<textarea id="dot" name="dot" rows="100"
-					style="width:90%;overflow:scroll">{$dot}</textarea>
-					<input name="dl" type="checkbox" style="display:hidden"/>
-			</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>
-
-	</div>
 </div>

src/graphxq/views/layout.xml

@@ -35,7 +35,7 @@
         ]]></script>
 	</head>
 	<body class="{$bodyclass}">
-		<div class="navbar navbar-fixed-top " data-dropdown="dropdown">
+		<div class="navbar navbar-fixed-top navbar-inverse" data-dropdown="dropdown">
 			<div class="navbar-inner">
 				<div class="container">
 					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -53,16 +53,20 @@
                 <li class="{$active-link('dot')}">
                     <a href="dot" rel="tooltip" title="Define a graph in Dot notation" ><i class="icon-edit"></i> Dot</a>
                 </li>
+
                 <li class="{$active-link('dotml')}">
                     <a href="dotml"><i class="icon-align-center"></i> DotML</a>
                 </li>
+
                <li class="{$active-link('library')}">
                 <a href="library"><i class="icon-book"></i> Library</a>
               </li> 
+
               <li class="{$active-link('api')}">
                   <a href="api"><i class="icon-wrench"></i> API</a>
               </li>
-            <li class="{$active-link('api')}">
+      
+            <li class="{$active-link('ace')}">
                   <a href="ace"><i class="icon-wrench"></i> Ace</a>
               </li>                  
             </ul>         

src/graphxq/views/toolbar.xml

@@ -47,7 +47,7 @@
     <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>
+			<i class="icon-eye-close"></i>
 			SVG text
 		</button>
     </div>

src/graphxq/views/widget.svg

@@ -50,6 +50,7 @@
                     evt.preventDefault();
                 }
                 evt.returnValue = false;
+                if(!evt.target.getScreenCTM)return ;// not svg?? bail out
                 var delta = evt.wheelDelta ? evt.wheelDelta / 360 : evt.detail / -9;
                 //console.log("mousewheel",delta);
                 updateScale((delta>0)?1.1:0.9,evt);