intial panzoom svg

This commit is contained in:
Andy Bunce 2012-09-14 22:13:11 +01:00
parent 563bdec1f8
commit 74916f723f
4 changed files with 33 additions and 14 deletions

View file

@ -49,12 +49,19 @@ function graphxq-svg($dot,$url,$dl) {
return ($down[$dl],$svg)
};
(:~
: display dot edit form
: @param src load from url
:)
declare
%rest:GET %rest:path("graphxq/dot")
%output:method("html5")
function dotform(){
%rest:form-param("src","{$src}")
function dotform($src){
let $dot:= getdot("digraph {{a -> b}}",$src)
let $map:=map{"list-shapes":=dotui:shapes(""),
"list-colors":=dotui:colors("")}
"list-colors":=dotui:colors(""),
"dot":=$dot}
return render("graphxq/views/dotform.xml",$map)
};
@ -97,7 +104,15 @@ declare %private function get-svg($dot as xs:string) as node(){
};
declare function render($template,$locals){
let $default:=map{"sidebar":="Sidebar..." ,
let $sidebar:=<div>
<ul>
<div>Smples:</div>
<li> <a href="dot?src=graphxq/samples/process.gv">process</a></li>
<li><a href="/restxq/graphxq/dot?src=graphxq/samples/unix.gv">unix</a></li>
<li> <a href="/restxq/graphxq/dot?src=graphxq/samples/root.gv">root (slow)</a></li>
</ul>
</div>
let $default:=map{"sidebar":=$sidebar ,
"usermenu":=<div>users</div>,
"title":=request:path(),
"messages":=()}

View file

@ -71,6 +71,7 @@ function getsvg(dl){
var n = document.importNode(data.documentElement,true);
$("#svgdiv").empty().append(n);
$("#svgsrc").empty().text(str);
$("#svgdiv svg").svgPan("graph1");
}
});
};

View file

@ -163,9 +163,10 @@
offsetX = evt.pageX - offset.left;
offsetY = evt.pageY - offset.top;
}
p.x = offsetX;
p.y = offsetY;
p.x = evt.originalEvent.clientX - root.getBoundingClientRect().left;
p.y = evt.originalEvent.clientY - root.getBoundingClientRect().top;
// p.x = offsetX;
// p.y = offsetY;
return p;
},

View file

@ -8,17 +8,14 @@
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-dot">
<div class="btn-group">
<button id="bnup" class="btn btn-mini" ><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>
</div>
<form id="dotForm" action= "svg" method="post" target="_new" class="well">
<label>digraph "
<input type="text" name="title" placeholder="title" class="input-small" />"{{
<input type="text" name="title" placeholder="title" class="input-small" />"
</label>
<textarea id="dot" name="dot" rows="2" style="width:94%;min-height:20em">digraph {{ a -> b}}</textarea>}}
<span style="margin-right:-5px;padding-right:2px;">{{</span>
<textarea id="dot" name="dot" rows="2" style="width:90%;min-height:20em"
>{$dot}</textarea><span style="margin-right:-5px;">}}</span>
<label class="checkbox">
<input name="dl" type="checkbox"/> Download
</label>
@ -58,6 +55,11 @@
</div>
</div>
<div class="span6">
<div class="btn-group">
<button id="bnup" class="btn btn-mini" ><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>
</div>
<div id="svgdiv" style="width:100%;height:30em;border:1px solid red;min-height:20em;">svg here</div>
</div>
<script>