mirror of
				https://github.com/Quodatum/graphxq.git
				synced 2025-11-04 06:21:57 +00:00 
			
		
		
		
	intial panzoom svg
This commit is contained in:
		
							parent
							
								
									563bdec1f8
								
							
						
					
					
						commit
						74916f723f
					
				
					 4 changed files with 33 additions and 14 deletions
				
			
		| 
						 | 
				
			
			@ -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":=()}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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");
 | 
			
		||||
              }
 | 
			
		||||
            });
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										7
									
								
								src/graphxq/jquery-svgpan.js
									
										
									
									
										vendored
									
									
								
							
							
						
						
									
										7
									
								
								src/graphxq/jquery-svgpan.js
									
										
									
									
										vendored
									
									
								
							| 
						 | 
				
			
			@ -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;
 | 
			
		||||
                },
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue