mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-04-11 11:42:24 +01:00
reorg
This commit is contained in:
parent
dd3c397ba6
commit
23dbb78ab6
20 changed files with 1023 additions and 1017 deletions
|
|
@ -129,7 +129,7 @@ function library(){
|
|||
"items": $lib//items,
|
||||
"url": function($item){fn:concat($item/url/@type,'?src=data/samples/',$item/url)}
|
||||
}
|
||||
return render("views/library.xml",$map)
|
||||
return render("views/library.xq",$map)
|
||||
};
|
||||
|
||||
(:~
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
declare variable $item external;
|
||||
declare variable $url external;
|
||||
|
||||
<li class="media ">
|
||||
<a href="{$url($item)}" class="thumbnail"
|
||||
style="height:128px;width:20em; background-color:#EEEEEE">
|
||||
<div class="pull-left media-object" style="height:120px;width:120px;">
|
||||
<img src="/graphxq/data/thumbs/{$item/url}.gif"
|
||||
<img src="/static/graphxq/data/thumbs/{$item/url}.gif"
|
||||
style="max-height:100%; max-width:100%;" />
|
||||
</div>
|
||||
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
declare variable $items external ;
|
||||
declare variable $partial external ;
|
||||
|
||||
<div class="row-fluid">
|
||||
<h2>Samples ({fn:count($items/item )})</h2>
|
||||
<ul class=" thumbnails media-list">
|
||||
{$partial("item1.xml","item",$items/item)}
|
||||
{$partial("item1.xq","item",$items/item)}
|
||||
</ul>
|
||||
</div>
|
||||
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
|
@ -1,42 +1,42 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.5 60" version="1.1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#E3A820;stop-opacity:1"/>
|
||||
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)"/>
|
||||
<g transform="translate(0,-5) scale(10)">
|
||||
<g>
|
||||
<a xlink:href="https://github.com/apb2006/hedgetree">
|
||||
<title>Debug info: x coord= 0</title>
|
||||
<rect x="0.24249999999999972" y="1" width="4.365" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.425" y="1.8" font-size="0.9" text-anchor="middle">github</text>
|
||||
</a>
|
||||
</g>
|
||||
<line x1="2.425" y1="2" x2="0.445" y2="3" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<line x1="2.425" y1="2" x2="2.67" y2="3" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<g>
|
||||
<a>
|
||||
<title>Debug info: x coord= 0</title>
|
||||
<rect x="0.04449999999999998" y="3" width="0.801" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="0.445" y="3.8" font-size="0.9" text-anchor="middle">a</text>
|
||||
</a>
|
||||
</g>
|
||||
<g>
|
||||
<a>
|
||||
<title>Debug info: x coord= 0.445</title>
|
||||
<rect x="2.2695" y="3" width="0.801" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.67" y="3.8" font-size="0.9" text-anchor="middle">b</text>
|
||||
</a>
|
||||
</g>
|
||||
<line x1="2.67" y1="4" x2="2.67" y2="5" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<g>
|
||||
<a xlink:href="#treexml">
|
||||
<title>Debug info: x coord= 0.445</title>
|
||||
<rect x="1.0679999999999998" y="5" width="3.204" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.67" y="5.8" font-size="0.9" text-anchor="middle">tree</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.5 60" version="1.1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#E3A820;stop-opacity:1"/>
|
||||
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)"/>
|
||||
<g transform="translate(0,-5) scale(10)">
|
||||
<g>
|
||||
<a xlink:href="https://github.com/apb2006/hedgetree">
|
||||
<title>Debug info: x coord= 0</title>
|
||||
<rect x="0.24249999999999972" y="1" width="4.365" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.425" y="1.8" font-size="0.9" text-anchor="middle">github</text>
|
||||
</a>
|
||||
</g>
|
||||
<line x1="2.425" y1="2" x2="0.445" y2="3" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<line x1="2.425" y1="2" x2="2.67" y2="3" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<g>
|
||||
<a>
|
||||
<title>Debug info: x coord= 0</title>
|
||||
<rect x="0.04449999999999998" y="3" width="0.801" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="0.445" y="3.8" font-size="0.9" text-anchor="middle">a</text>
|
||||
</a>
|
||||
</g>
|
||||
<g>
|
||||
<a>
|
||||
<title>Debug info: x coord= 0.445</title>
|
||||
<rect x="2.2695" y="3" width="0.801" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.67" y="3.8" font-size="0.9" text-anchor="middle">b</text>
|
||||
</a>
|
||||
</g>
|
||||
<line x1="2.67" y1="4" x2="2.67" y2="5" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<g>
|
||||
<a xlink:href="#treexml">
|
||||
<title>Debug info: x coord= 0.445</title>
|
||||
<rect x="1.0679999999999998" y="5" width="3.204" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.67" y="5.8" font-size="0.9" text-anchor="middle">tree</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,11 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg x="10">
|
||||
<rect x="10" y="10" height="100" width="100"
|
||||
style="stroke:#ff0000; fill: #0000ff"/>
|
||||
</svg>
|
||||
<svg x="200">
|
||||
<rect x="10" y="10" height="100" width="100"
|
||||
style="stroke:#009900; fill: #00cc00"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg x="10">
|
||||
<rect x="10" y="10" height="100" width="100"
|
||||
style="stroke:#ff0000; fill: #0000ff"/>
|
||||
</svg>
|
||||
<svg x="200">
|
||||
<rect x="10" y="10" height="100" width="100"
|
||||
style="stroke:#009900; fill: #00cc00"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 349 B After Width: | Height: | Size: 339 B |
|
Before Width: | Height: | Size: 737 KiB After Width: | Height: | Size: 737 KiB |
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
|
@ -1,252 +1,252 @@
|
|||
<!DOCTYPE html5>
|
||||
<html>
|
||||
<head id="head">
|
||||
<meta charset="utf-8">
|
||||
<title id="title">svg loader</title>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$("#load").on("click",getsvg);
|
||||
});
|
||||
|
||||
|
||||
function getsvg(){
|
||||
var f=$("#src").val();
|
||||
$.ajax({
|
||||
type:"GET",
|
||||
url:f,
|
||||
|
||||
dataType: "text",
|
||||
success: function(str){
|
||||
// console.log(data)
|
||||
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
|
||||
var n = document.importNode(data.documentElement,true);
|
||||
// $("#svgdiv").empty().append(n);
|
||||
$("#cuthere").empty().append(n);
|
||||
},
|
||||
error:function(jqXHR, textStatus, errorThrown){
|
||||
alert("ajax error: "+textStatus + errorThrown);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<input id="src" list="svgtest" autofocus="autofocus"/>
|
||||
|
||||
<datalist id="svgtest">
|
||||
<option value="hedge.svg"/>
|
||||
<option value="multiple.svg"/>
|
||||
<option value="http://open1-apb.rhcloud.com/restxq/hedge/svg?hedge=a%28bcd%28ef%29%29"/>
|
||||
<option value="7-demicube_t0_D7.svg"/>
|
||||
</datalist>
|
||||
|
||||
<button id="load">load</button>
|
||||
|
||||
</div>
|
||||
<div style="width:100%;height:400px;border:5px solid red;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)"
|
||||
width="100%" height="100%"
|
||||
viewBox="0 0 400 400" version="1.1" preserveAspectRatio="xMidYMid meet">
|
||||
<script type="text/ecmascript"><![CDATA[
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
var svgRoot;
|
||||
var pTrans;
|
||||
var inPan=false;
|
||||
var stateOrigin; //start of pan
|
||||
var fitScale=zoomScale=1;
|
||||
|
||||
function init(e) {
|
||||
svgRoot = e.target;
|
||||
pTrans=svgRoot.createSVGPoint();
|
||||
stateOrigin=svgRoot.createSVGPoint();
|
||||
var onMouseUp=function(evt){
|
||||
inPan=false;
|
||||
// console.log("handleMouseUp")
|
||||
};
|
||||
var onMouseDown=function(evt){
|
||||
inPan=true;
|
||||
var p2=getEventPoint(evt,true)
|
||||
stateOrigin.x=pTrans.x-p2.x;
|
||||
stateOrigin.y=pTrans.y-p2.y;
|
||||
// console.log("handleMouseDown")
|
||||
};
|
||||
var onMouseLeave=function(evt){
|
||||
inPan=false;
|
||||
};
|
||||
var onMouseMove=function(evt){
|
||||
show_coords(evt);
|
||||
if(inPan){
|
||||
var p2=getEventPoint(evt,true);
|
||||
// console.log("PAN>>",pTrans.x,pTrans.y)
|
||||
pTrans.x=(stateOrigin.x+p2.x);
|
||||
pTrans.y=(stateOrigin.y+p2.y);
|
||||
update();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Handle mouse wheel event.
|
||||
*/
|
||||
var onMouseWheel = function (evt) {
|
||||
if (evt.preventDefault) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
evt.returnValue = false;
|
||||
var delta = evt.wheelDelta ? evt.wheelDelta / 360 : evt.detail / -9;
|
||||
//console.log("mousewheel",delta);
|
||||
updateScale((delta>0)?1.1:0.9,evt);
|
||||
return;
|
||||
};
|
||||
|
||||
tspans =svgRoot.getElementById("coords").getElementsByTagNameNS(svgns, "tspan");
|
||||
|
||||
svgRoot.addEventListener('mouseup', onMouseUp, false );
|
||||
svgRoot.addEventListener('mousedown', onMouseDown, false );
|
||||
svgRoot.addEventListener('mousemove', onMouseMove,false );
|
||||
svgRoot.addEventListener('mouseleave', onMouseMove,false );
|
||||
if ($.browser.webkit) {
|
||||
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // Chrome/Safari
|
||||
} else if ($.browser.mozilla) {
|
||||
svgRoot.addEventListener('DOMMouseScroll', onMouseWheel, false); // Firefox
|
||||
} else {
|
||||
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // others (Opera, Explorer9)
|
||||
}
|
||||
var cuthere=document.getElementById("cuthere");
|
||||
cuthere.addEventListener ( 'DOMNodeInserted', onNodeInsert, false );
|
||||
};
|
||||
|
||||
// fix up scale when new svg loaded
|
||||
function onNodeInsert(e){
|
||||
reset(true)
|
||||
};
|
||||
|
||||
function translate(dx,dy){
|
||||
pTrans.x+=dx;pTrans.y+=dy
|
||||
update();
|
||||
};
|
||||
|
||||
function update(){
|
||||
var s=fitScale*zoomScale
|
||||
var k = svgRoot.createSVGMatrix().scale(s).translate(pTrans.x,pTrans.y);
|
||||
setCTM(cuthere,k)
|
||||
// cuthere.setAttribute("transform", "translate("+pTrans.x+","+pTrans.y+") scale("+scale+")");
|
||||
};
|
||||
|
||||
function updateScale(d,evt){
|
||||
var scalePoint;
|
||||
if(evt){
|
||||
scalePoint=getEventPoint(evt,true)
|
||||
}else{
|
||||
scalePoint= svgRoot.createSVGPoint();scalePoint.x=200;scalePoint.y=200;
|
||||
}
|
||||
// console.log("scale: ",scalePoint.x,scalePoint.y);
|
||||
zoomScale=zoomScale*d;
|
||||
pTrans.x+=(1-d)*scalePoint.x;
|
||||
pTrans.y+=(1-d)*scalePoint.y;
|
||||
update();
|
||||
};
|
||||
|
||||
function reset(fit){
|
||||
pTrans.x=0;pTrans.y=0;zoomScale=1;
|
||||
if(fit){
|
||||
|
||||
var bb=getSVGrect(cuthere);
|
||||
fitScale=400/Math.max(bb.width,bb.height)
|
||||
}else{
|
||||
fitScale=1;
|
||||
}
|
||||
update();
|
||||
};
|
||||
|
||||
function getSVGrect(node){
|
||||
|
||||
//var r=node.getBBox();
|
||||
var svg=cuthere.firstChild
|
||||
var r=svgRoot.createSVGRect()
|
||||
r.width=svg.width.baseVal.value
|
||||
r.height=svg.height.baseVal.value
|
||||
|
||||
return r;
|
||||
};
|
||||
/**
|
||||
* Sets the current transform matrix of an element.
|
||||
*/
|
||||
setCTM = function (element, matrix) {
|
||||
var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
|
||||
element.setAttribute("transform", s);
|
||||
};
|
||||
function getEventPoint(evt,userSpace){
|
||||
var p1 = svgRoot.createSVGPoint();
|
||||
p1.x = evt.clientX;
|
||||
p1.y = evt.clientY;
|
||||
if(userSpace){
|
||||
var ctm = evt.target.getScreenCTM();
|
||||
if (ctm = ctm.inverse()){
|
||||
p1 = p1.matrixTransform(ctm);
|
||||
}else{
|
||||
alert("no inservse");
|
||||
}
|
||||
};
|
||||
return p1
|
||||
};
|
||||
|
||||
function show_coords(e) {
|
||||
var p1 = getEventPoint(e,true);
|
||||
// Show the results
|
||||
tspans.item(1).firstChild.data = e.clientX;
|
||||
tspans.item(3).firstChild.data = e.clientY;
|
||||
tspans.item(5).firstChild.data = p1.x.toFixed(2);
|
||||
tspans.item(7).firstChild.data = p1.y.toFixed(2);
|
||||
tspans.item(9).firstChild.data = pTrans.x.toFixed(2);
|
||||
tspans.item(11).firstChild.data = pTrans.y.toFixed(2);
|
||||
|
||||
tspans.item(13).firstChild.data = zoomScale.toFixed(2);
|
||||
tspans.item(15).firstChild.data = fitScale.toFixed(2);
|
||||
}
|
||||
]]></script>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="yellow" />
|
||||
<g id="cuthere" />
|
||||
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="transparent" />
|
||||
<g id="hud" transform="translate(10,10)">
|
||||
<rect x="0" y="0" width="400" height="40" fill="blue" opacity="0.6"/>
|
||||
<rect x="1" y="2" width="12" height="12" fill="red" onclick="translate(5,5)">
|
||||
<title>move +</title>
|
||||
</rect>
|
||||
<rect x="14" y="2" width="12" height="12" fill="green" onclick="translate(-5,-5)">
|
||||
<title>move -</title>
|
||||
</rect>
|
||||
<rect x="1" y="14" width="12" height="12" fill="orange" onclick="updateScale(1.1)">
|
||||
<title>scale +</title>
|
||||
</rect>
|
||||
<rect x="14" y="14" width="12" height="12" fill="orange" onclick="updateScale(0.9)">
|
||||
<title>scale -</title>
|
||||
</rect>
|
||||
<rect x="0" y="28" width="12" height="12" fill="orange" onclick="reset(true)">
|
||||
<title>fit</title>
|
||||
</rect>
|
||||
<rect x="14" y="28" width="12" height="12" fill="orange" onclick="reset(false)">
|
||||
<title>full size</title>
|
||||
</rect>
|
||||
<text id="coords" fill="white" transform="translate(25,5)"
|
||||
pointer-events="none">
|
||||
<tspan x="0" dy="10pt">Client X= </tspan><tspan> </tspan>
|
||||
<tspan x="0" dy="10pt">Client Y= </tspan><tspan> </tspan>
|
||||
<tspan x="100" dy="-10pt">User X= </tspan><tspan> </tspan>
|
||||
<tspan x="100" dy="10pt">User Y= </tspan><tspan> </tspan>
|
||||
<tspan x="200" dy="-10pt">pTransX= </tspan><tspan> </tspan>
|
||||
<tspan x="200" dy="10pt">pTransY= </tspan><tspan> </tspan>
|
||||
<tspan x="300" dy="-10pt">zoom= </tspan><tspan> </tspan>
|
||||
<tspan x="300" dy="10pt">fit= </tspan><tspan> </tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="svgdiv" style="width:400px;height:300px" >hi</div>
|
||||
</body>
|
||||
<!DOCTYPE html5>
|
||||
<html>
|
||||
<head id="head">
|
||||
<meta charset="utf-8">
|
||||
<title id="title">svg loader</title>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$("#load").on("click",getsvg);
|
||||
});
|
||||
|
||||
|
||||
function getsvg(){
|
||||
var f=$("#src").val();
|
||||
$.ajax({
|
||||
type:"GET",
|
||||
url:f,
|
||||
|
||||
dataType: "text",
|
||||
success: function(str){
|
||||
// console.log(data)
|
||||
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
|
||||
var n = document.importNode(data.documentElement,true);
|
||||
// $("#svgdiv").empty().append(n);
|
||||
$("#cuthere").empty().append(n);
|
||||
},
|
||||
error:function(jqXHR, textStatus, errorThrown){
|
||||
alert("ajax error: "+textStatus + errorThrown);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<input id="src" list="svgtest" autofocus="autofocus"/>
|
||||
|
||||
<datalist id="svgtest">
|
||||
<option value="hedge.svg"/>
|
||||
<option value="multiple.svg"/>
|
||||
<option value="http://open1-apb.rhcloud.com/restxq/hedge/svg?hedge=a%28bcd%28ef%29%29"/>
|
||||
<option value="7-demicube_t0_D7.svg"/>
|
||||
</datalist>
|
||||
|
||||
<button id="load">load</button>
|
||||
|
||||
</div>
|
||||
<div style="width:100%;height:400px;border:5px solid red;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)"
|
||||
width="100%" height="100%"
|
||||
viewBox="0 0 400 400" version="1.1" preserveAspectRatio="xMidYMid meet">
|
||||
<script type="text/ecmascript"><![CDATA[
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
var svgRoot;
|
||||
var pTrans;
|
||||
var inPan=false;
|
||||
var stateOrigin; //start of pan
|
||||
var fitScale=zoomScale=1;
|
||||
|
||||
function init(e) {
|
||||
svgRoot = e.target;
|
||||
pTrans=svgRoot.createSVGPoint();
|
||||
stateOrigin=svgRoot.createSVGPoint();
|
||||
var onMouseUp=function(evt){
|
||||
inPan=false;
|
||||
// console.log("handleMouseUp")
|
||||
};
|
||||
var onMouseDown=function(evt){
|
||||
inPan=true;
|
||||
var p2=getEventPoint(evt,true)
|
||||
stateOrigin.x=pTrans.x-p2.x;
|
||||
stateOrigin.y=pTrans.y-p2.y;
|
||||
// console.log("handleMouseDown")
|
||||
};
|
||||
var onMouseLeave=function(evt){
|
||||
inPan=false;
|
||||
};
|
||||
var onMouseMove=function(evt){
|
||||
show_coords(evt);
|
||||
if(inPan){
|
||||
var p2=getEventPoint(evt,true);
|
||||
// console.log("PAN>>",pTrans.x,pTrans.y)
|
||||
pTrans.x=(stateOrigin.x+p2.x);
|
||||
pTrans.y=(stateOrigin.y+p2.y);
|
||||
update();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Handle mouse wheel event.
|
||||
*/
|
||||
var onMouseWheel = function (evt) {
|
||||
if (evt.preventDefault) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
evt.returnValue = false;
|
||||
var delta = evt.wheelDelta ? evt.wheelDelta / 360 : evt.detail / -9;
|
||||
//console.log("mousewheel",delta);
|
||||
updateScale((delta>0)?1.1:0.9,evt);
|
||||
return;
|
||||
};
|
||||
|
||||
tspans =svgRoot.getElementById("coords").getElementsByTagNameNS(svgns, "tspan");
|
||||
|
||||
svgRoot.addEventListener('mouseup', onMouseUp, false );
|
||||
svgRoot.addEventListener('mousedown', onMouseDown, false );
|
||||
svgRoot.addEventListener('mousemove', onMouseMove,false );
|
||||
svgRoot.addEventListener('mouseleave', onMouseMove,false );
|
||||
if ($.browser.webkit) {
|
||||
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // Chrome/Safari
|
||||
} else if ($.browser.mozilla) {
|
||||
svgRoot.addEventListener('DOMMouseScroll', onMouseWheel, false); // Firefox
|
||||
} else {
|
||||
svgRoot.addEventListener('mousewheel', onMouseWheel, false); // others (Opera, Explorer9)
|
||||
}
|
||||
var cuthere=document.getElementById("cuthere");
|
||||
cuthere.addEventListener ( 'DOMNodeInserted', onNodeInsert, false );
|
||||
};
|
||||
|
||||
// fix up scale when new svg loaded
|
||||
function onNodeInsert(e){
|
||||
reset(true)
|
||||
};
|
||||
|
||||
function translate(dx,dy){
|
||||
pTrans.x+=dx;pTrans.y+=dy
|
||||
update();
|
||||
};
|
||||
|
||||
function update(){
|
||||
var s=fitScale*zoomScale
|
||||
var k = svgRoot.createSVGMatrix().scale(s).translate(pTrans.x,pTrans.y);
|
||||
setCTM(cuthere,k)
|
||||
// cuthere.setAttribute("transform", "translate("+pTrans.x+","+pTrans.y+") scale("+scale+")");
|
||||
};
|
||||
|
||||
function updateScale(d,evt){
|
||||
var scalePoint;
|
||||
if(evt){
|
||||
scalePoint=getEventPoint(evt,true)
|
||||
}else{
|
||||
scalePoint= svgRoot.createSVGPoint();scalePoint.x=200;scalePoint.y=200;
|
||||
}
|
||||
// console.log("scale: ",scalePoint.x,scalePoint.y);
|
||||
zoomScale=zoomScale*d;
|
||||
pTrans.x+=(1-d)*scalePoint.x;
|
||||
pTrans.y+=(1-d)*scalePoint.y;
|
||||
update();
|
||||
};
|
||||
|
||||
function reset(fit){
|
||||
pTrans.x=0;pTrans.y=0;zoomScale=1;
|
||||
if(fit){
|
||||
|
||||
var bb=getSVGrect(cuthere);
|
||||
fitScale=400/Math.max(bb.width,bb.height)
|
||||
}else{
|
||||
fitScale=1;
|
||||
}
|
||||
update();
|
||||
};
|
||||
|
||||
function getSVGrect(node){
|
||||
|
||||
//var r=node.getBBox();
|
||||
var svg=cuthere.firstChild
|
||||
var r=svgRoot.createSVGRect()
|
||||
r.width=svg.width.baseVal.value
|
||||
r.height=svg.height.baseVal.value
|
||||
|
||||
return r;
|
||||
};
|
||||
/**
|
||||
* Sets the current transform matrix of an element.
|
||||
*/
|
||||
setCTM = function (element, matrix) {
|
||||
var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";
|
||||
element.setAttribute("transform", s);
|
||||
};
|
||||
function getEventPoint(evt,userSpace){
|
||||
var p1 = svgRoot.createSVGPoint();
|
||||
p1.x = evt.clientX;
|
||||
p1.y = evt.clientY;
|
||||
if(userSpace){
|
||||
var ctm = evt.target.getScreenCTM();
|
||||
if (ctm = ctm.inverse()){
|
||||
p1 = p1.matrixTransform(ctm);
|
||||
}else{
|
||||
alert("no inservse");
|
||||
}
|
||||
};
|
||||
return p1
|
||||
};
|
||||
|
||||
function show_coords(e) {
|
||||
var p1 = getEventPoint(e,true);
|
||||
// Show the results
|
||||
tspans.item(1).firstChild.data = e.clientX;
|
||||
tspans.item(3).firstChild.data = e.clientY;
|
||||
tspans.item(5).firstChild.data = p1.x.toFixed(2);
|
||||
tspans.item(7).firstChild.data = p1.y.toFixed(2);
|
||||
tspans.item(9).firstChild.data = pTrans.x.toFixed(2);
|
||||
tspans.item(11).firstChild.data = pTrans.y.toFixed(2);
|
||||
|
||||
tspans.item(13).firstChild.data = zoomScale.toFixed(2);
|
||||
tspans.item(15).firstChild.data = fitScale.toFixed(2);
|
||||
}
|
||||
]]></script>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="yellow" />
|
||||
<g id="cuthere" />
|
||||
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="transparent" />
|
||||
<g id="hud" transform="translate(10,10)">
|
||||
<rect x="0" y="0" width="400" height="40" fill="blue" opacity="0.6"/>
|
||||
<rect x="1" y="2" width="12" height="12" fill="red" onclick="translate(5,5)">
|
||||
<title>move +</title>
|
||||
</rect>
|
||||
<rect x="14" y="2" width="12" height="12" fill="green" onclick="translate(-5,-5)">
|
||||
<title>move -</title>
|
||||
</rect>
|
||||
<rect x="1" y="14" width="12" height="12" fill="orange" onclick="updateScale(1.1)">
|
||||
<title>scale +</title>
|
||||
</rect>
|
||||
<rect x="14" y="14" width="12" height="12" fill="orange" onclick="updateScale(0.9)">
|
||||
<title>scale -</title>
|
||||
</rect>
|
||||
<rect x="0" y="28" width="12" height="12" fill="orange" onclick="reset(true)">
|
||||
<title>fit</title>
|
||||
</rect>
|
||||
<rect x="14" y="28" width="12" height="12" fill="orange" onclick="reset(false)">
|
||||
<title>full size</title>
|
||||
</rect>
|
||||
<text id="coords" fill="white" transform="translate(25,5)"
|
||||
pointer-events="none">
|
||||
<tspan x="0" dy="10pt">Client X= </tspan><tspan> </tspan>
|
||||
<tspan x="0" dy="10pt">Client Y= </tspan><tspan> </tspan>
|
||||
<tspan x="100" dy="-10pt">User X= </tspan><tspan> </tspan>
|
||||
<tspan x="100" dy="10pt">User Y= </tspan><tspan> </tspan>
|
||||
<tspan x="200" dy="-10pt">pTransX= </tspan><tspan> </tspan>
|
||||
<tspan x="200" dy="10pt">pTransY= </tspan><tspan> </tspan>
|
||||
<tspan x="300" dy="-10pt">zoom= </tspan><tspan> </tspan>
|
||||
<tspan x="300" dy="10pt">fit= </tspan><tspan> </tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="svgdiv" style="width:400px;height:300px" >hi</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 288 B After Width: | Height: | Size: 288 B |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
Loading…
Add table
Reference in a new issue