quodatum/graphxq
1
0
Fork 0
mirror of https://github.com/Quodatum/graphxq.git synced 2025-04-11 11:42:24 +01:00
Code Issues Projects Releases Wiki Activity

ace for svg

Browse source
This commit is contained in:
Andy Bunce 2013-01-25 22:02:32 +00:00
parent 5c27003889
commit 38bf904116
13 changed files with 121 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/graphxq/ace-worker/worker-css.js Normal file
View file

File diff suppressed because one or more lines are too long

1
src/graphxq/ace-worker/worker-javascript.js Normal file
View file

File diff suppressed because one or more lines are too long

1
src/graphxq/ace-worker/worker-json.js Normal file
View file

File diff suppressed because one or more lines are too long

1
src/graphxq/ace-worker/worker-xquery.js Normal file
View file

File diff suppressed because one or more lines are too long

19
src/graphxq/app.css
View file

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

83
src/graphxq/app.js
View file

@ -1,33 +1,46 @@
// common app js
function throttle(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
var resize;
$(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}")
});
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();
$("#dot").val(
"digraph title {\n bgcolor=seashell\n node[shape=circle,style=filled,fillcolor=lightblue]\n\n}"
)
});
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);
};
};

19
src/graphxq/diag-xqdoc.xq
View file

@ -1,12 +1,19 @@
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">
declare function local:foo($dml){
<dotml:graph file-name="graphs/bgcolor" rankdir="LR" bgcolor="seashell">
<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
{for $f in $dml//doc:function
return <dotml:node id="{generate-id($f)}" label="{$f/doc:name}" fillcolor="lightblue" style="filled"/>,
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])

11
src/graphxq/graphxq.xqm
View file

@ -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)

19
src/graphxq/views/ace.xml
View file

@ -1,19 +1,14 @@
<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) {{
<div class="row-fluid" >
<div class="span6 ace-container extend" id="leftPane" style="height:20em;">
<div id="editor" class="ace">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
ace.config.set("workerPath", "ace/worker?w=");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
acediv("editor","xquery",false)
</script>
</div>
</div>

45
src/graphxq/views/dotform.xml
View file

@ -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>

8
src/graphxq/views/layout.xml
View file

@ -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>

2
src/graphxq/views/toolbar.xml
View file

@ -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>

1
src/graphxq/views/widget.svg
View file

@ -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);

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB