mapapp.js

《SVG开发实践》源代码

/*
Scripts for creating SVG apps, converting clientX/Y to viewBox coordinates
and for displaying tooltips

Copyright (C) <2002-2007>  <Andreas Neumann>
Version 1.2.2, 2007-04-03
[e-mail]
http://www.carto.net/
http://www.carto.net/neumann/

Credits:
* thanks to Kevin Lindsey for his many examples and providing the ViewBox class

----

Documentation: http://www.carto.net/papers/svg/gui/mapApp/

----

current version: 1.2.2

version history:
1.0 (2006-06-01)
initial version
Was programmed earlier, but now documented

1.1 (2006-06-15)
added properties this.innerWidth, this.innerHeight (wrapper around different behaviour of viewers), added method ".adjustViewBox()" to adjust the viewBox to the this.innerWidth and this.innerHeight of the UA's window

1.2 (2006-10-06)
added two new constructor parameter "adjustVBonWindowResize" and "resizeCallbackFunction". If the first parameter is set to true, the viewBox of this mapApp will always adjust itself to the innerWidth and innerHeight of the browser window or frame containing the SVG application
the "resizeCallbackFunction" can be of type "function", later potentially also of type "object". This function is called every time the mapApp was resized (browser/UA window was resized). It isn't called the first time when the mapApp was initialized
added a new way to detect resize events in Firefox which didn't implement the SVGResize event so far
added several arrays to hold GUI references

1.2.1 (2007-01-09)
fixed an issue in the method .updateTooltip() for cases where an element did not have a tooltip text, attribute or an empty string. Now, the tooltip disappears for these elements instead of triggering a javascript error.

1.2.2 (2007-04-03)
improved the navigator detection to correctly handle Webkit/Safari
added this.htmlAreas and this.tables as new arrays to hold GUI component references

-------


This ECMA script library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library (lesser_gpl.txt); if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

----

original document site: http://www.carto.net/papers/svg/gui/mapApp/
Please contact the author in case you want to use code or ideas commercially.
If you use this code, please include this copyright header, the included full
LGPL 2.1 text and read the terms provided in the LGPL 2.1 license
(http://www.gnu.org/copyleft/lesser.txt)

-------------------------------

Please report bugs and send improvements to [e-mail]
If you use this code, please link to the original (http://www.carto.net/papers/svg/gui/mapApp/)
somewhere in the source-code-comment or the "about" of your project and give credits, thanks!

*/

//this mapApp object helps to convert clientX/clientY coordinates to the coordinates of the group where the element is within
//normally one can just use .getScreenCTM(), but ASV3 does not implement it, 95% of the code in this function is for ASV3!!!
//credits: Kevin Lindsey for his example at http://www.kevlindev.com/gui/utilities/viewbox/ViewBox.js
function mapApp(adjustVBonWindowResize,resizeCallbackFunction) {
	this.adjustVBonWindowResize = adjustVBonWindowResize;
	this.resizeCallbackFunction = resizeCallbackFunction;
	this.initialized = false;
	if (!document.documentElement.getScreenCTM) {
		//add zoom and pan event event to document element
		//this part is only required for viewers not supporting document.documentElement.getScreenCTM() (e.g. ASV3)
		document.documentElement.addEventListener("SVGScroll",this,false);
		document.documentElement.addEventListener("SVGZoom",this,false);
	}
	//add SVGResize event, note that because FF does not yet support the SVGResize event, there is a workaround
 	try {
  		//browsers with native SVG support
  		window.addEventListener("resize",this,false);
 	}
	catch(er) {
		//SVG UAs, like Batik and ASV/Iex
		document.documentElement.addEventListener("SVGResize",this,false);
	}
	//determine the browser main version
	this.navigator = "Batik";
	if (window.navigator) {
		if (window.navigator.appName.match(/Adobe/gi)) {
			this.navigator = "Adobe";
		}
		if (window.navigator.appName.match(/Netscape/gi)) {
			this.navigator = "Mozilla";
		}
		if (window.navigator.userAgent) {
			if (window.navigator.userAgent.match(/Opera/gi)) {
				this.navigator = "Opera";
			}
			if (window.navigator.userAgent.match(/AppleWebKit/gi) || window.navigator.userAgent.match(/Safari/gi) ) {
				this.navigator = "Safari";
			}
		}
	}
	//we need to call this once to initialize this.innerWidth/this.innerHeight
	this.resetFactors();
	//per default, tooltips are disabled
	this.tooltipsEnabled = false;
	//create new arrays to hold GUI references
	this.Windows = new Array();
	this.checkBoxes = new Array();
	this.radioButtonGroups = new Array();
	this.tabgroups = new Array();
	this.textboxes = new Array();
	this.buttons = new Array();	
	this.selectionLists = new Array();	
	this.comboboxes = new Array();	
	this.sliders = new Array();
	this.scrollbars = new Array();
	this.colourPickers = new Array();
	this.htmlAreas = new Array();
	this.tables = new Array();
}

mapApp.prototype.handleEvent = function(evt) {
	if (evt.type == "SVGResize" || evt.type == "resize" || evt.type == "SVGScroll" || evt.type == "SVGZoom") {
		this.resetFactors();
	}
	if ((evt.type == "mouseover" || evt.type == "mouseout" || evt.type == "mousemove") && this.tooltipsEnabled) {
		this.displayTooltip(evt);
	}
}

mapApp.prototype.resetFactors = function() {
	//set inner width and height
	if (window.innerWidth) {
		this.innerWidth = window.innerWidth;
		this.innerHeight = window.innerHeight;
	}
	else {
		var viewPort = document.documentElement.viewport;
		this.innerWidth = viewPort.width;
		this.innerHeight = viewPort.height;
	}
	if (this.adjustVBonWindowResize) {
		this.adjustViewBox();
	}
	//this code is for ASV3
	if (!document.documentElement.getScreenCTM) {
		var svgroot = document.documentElement;
		this.viewBox = new ViewBox(svgroot);
		var trans = svgroot.currentTranslate;
		var scale = svgroot.currentScale;
		this.m = this.viewBox.getTM();
		//undo effects of zoom and pan
		this.m = this.m.scale( 1/scale );
		this.m = this.m.translate(-trans.x, -trans.y);
	}
	if (this.resizeCallbackFunction && this.initialized) {
		if (typeof(this.resizeCallbackFunction) == "function") {
			this.resizeCallbackFunction();
		}
	}
	this.initialized = true;
}

//set viewBox of document.documentElement to innerWidth and innerHeight
mapApp.prototype.adjustViewBox = function() {
	document.documentElement.setAttributeNS(null,"viewBox","0 0 "+this.innerWidth+" "+this.innerHeight);
}

mapApp.prototype.calcCoord = function(evt,ctmNode) {
	var svgPoint = document.documentElement.createSVGPoint();
	svgPoint.x = evt.clientX;
	svgPoint.y = evt.clientY;
	if (!document.documentElement.getScreenCTM) {
		//undo the effect of transformations
		if (ctmNode) {
			var matrix = getTransformToRootElement(ctmNode);
		}
		else {
			var matrix = getTransformToRootElement(evt.target);			
		}
  		svgPoint = svgPoint.matrixTransform(matrix.inverse().multiply(this.m));
	}
	else {
		//case getScreenCTM is available
		if (ctmNode) {
			var matrix = ctmNode.getScreenCTM();
		}
		else {
			var matrix = evt.target.getScreenCTM();		
		}
  	svgPoint = svgPoint.matrixTransform(matrix.inverse());
	}
  //undo the effect of viewBox and zoomin/scroll
	return svgPoint;
}

mapApp.prototype.calcInvCoord = function(svgPoint) {
	if (!document.documentElement.getScreenCTM) {
		var matrix = getTransformToRootElement(document.documentElement);
	}
	else {
		var matrix = document.documentElement.getScreenCTM();
	}
	svgPoint = svgPoint.matrixTransform(matrix);
	return svgPoint;
}

//initialize tootlips
mapApp.prototype.initTooltips = function(groupId,tooltipTextAttribs,tooltipRectAttribs,xOffset,yOffset,padding) {
	var nrArguments = 6;
	if (arguments.length == nrArguments) {
		this.toolTipGroup = document.getElementById(groupId);
		this.tooltipTextAttribs = tooltipTextAttribs;
		if (!this.tooltipTextAttribs["font-size"]) {
			this.tooltipTextAttribs["font-size"] = 12;
		}	
		this.tooltipRectAttribs = tooltipRectAttribs;
		this.xOffset = xOffset;
		this.yOffset = yOffset;
		this.padding = padding;
		if (!this.toolTipGroup) {
			alert("Error: could not find tooltip group with id '"+groupId+"'. Please specify a correct tooltip parent group id!");
		}
		else {
			//set tooltip group to invisible
			this.toolTipGroup.setAttributeNS(null,"visibility","hidden");
			this.toolTipGroup.setAttributeNS(null,"pointer-events","none");
			this.tooltipsEnabled = true;
			//create tooltip text element
			this.tooltipText = document.createElementNS(svgNS,"text");
			for (var attrib in this.tooltipTextAttribs) {
				value = this.tooltipTextAttribs[attrib];
				if (attrib == "font-size") {
					value += "px";
				}
				this.tooltipText.setAttributeNS(null,attrib,value);
			}
			//create textnode
			var textNode = document.createTextNode("Tooltip");
			this.tooltipText.appendChild(textNode);
			this.toolTipGroup.appendChild(this.tooltipText);
			var bbox = this.tooltipText.getBBox();
			this.tooltipRect = document.createElementNS(svgNS,"rect");
			this.tooltipRect.setAttributeNS(null,"x",bbox.x-this.padding);
			this.tooltipRect.setAttributeNS(null,"y",bbox.y-this.padding);
			this.tooltipRect.setAttributeNS(null,"width",bbox.width+this.padding*2);
			this.tooltipRect.setAttributeNS(null,"height",bbox.height+this.padding*2);
			for (var attrib in this.tooltipRectAttribs) {
				this.tooltipRect.setAttributeNS(null,attrib,this.tooltipRectAttribs[attrib]);
			}
			this.toolTipGroup.insertBefore(this.tooltipRect,this.tooltipText);
		}
	}
	else {
			alert("Error in method 'initTooltips': wrong nr of arguments! You have to pass over "+nrArguments+" parameters.");			
	}
}

mapApp.prototype.addTooltip = function(tooltipNode,tooltipTextvalue,followmouse,checkForUpdates,targetOrCurrentTarget,childAttrib) {
	var nrArguments = 6;
	if (arguments.length == nrArguments) {
		//get reference
		if (typeof(tooltipNode) == "string") {
			tooltipNode = document.getElementById(tooltipNode);
		}
		//check if tooltip attribute present or create one
		if (!tooltipNode.hasAttributeNS(attribNS,"tooltip")) {
			if (tooltipTextvalue) {
				tooltipNode.setAttributeNS(attribNS,"tooltip",tooltipTextvalue);
			}
			else {
				tooltipNode.setAttributeNS(attribNS,"tooltip","Tooltip");			
			}
		}