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