mapapp.js

《SVG开发实践》源代码

		//see if we need updates
		if (checkForUpdates) {
			tooltipNode.setAttributeNS(attribNS,"tooltipUpdates","true");		
		}
		//see if we have to use evt.target
		if (targetOrCurrentTarget == "target") {
			tooltipNode.setAttributeNS(attribNS,"tooltipParent","true");
		}
		//add childAttrib
		if (childAttrib) {
			tooltipNode.setAttributeNS(attribNS,"tooltipAttrib",childAttrib);
		}
		//add event listeners
		tooltipNode.addEventListener("mouseover",this,false);
		tooltipNode.addEventListener("mouseout",this,false);
		if (followmouse) {
			tooltipNode.addEventListener("mousemove",this,false);
		}
	}
	else {
		alert("Error in method 'addTooltip()': wrong nr of arguments! You have to pass over "+nrArguments+" parameters.");			
	}
}

mapApp.prototype.displayTooltip = function(evt) {
	var curEl = evt.currentTarget;
	var coords = this.calcCoord(evt,this.toolTipGroup.parentNode);
	if (evt.type == "mouseover") {
		this.toolTipGroup.setAttributeNS(null,"visibility","visible");
		this.toolTipGroup.setAttributeNS(null,"transform","translate("+(coords.x+this.xOffset)+","+(coords.y+this.yOffset)+")");
		this.updateTooltip(evt);
	}
	if (evt.type == "mouseout") {
		this.toolTipGroup.setAttributeNS(null,"visibility","hidden");
	}
	if (evt.type == "mousemove") {
		this.toolTipGroup.setAttributeNS(null,"transform","translate("+(coords.x+this.xOffset)+","+(coords.y+this.yOffset)+")");		
		if (curEl.hasAttributeNS(attribNS,"tooltipUpdates")) {
			this.updateTooltip(evt);
		}
	}
}

mapApp.prototype.updateTooltip = function(evt) {
	var el = evt.currentTarget;
	if (el.hasAttributeNS(attribNS,"tooltipParent")) {
		var attribName = "tooltip";
		if (el.hasAttributeNS(attribNS,"tooltipAttrib")) {
			attribName = el.getAttributeNS(attribNS,"tooltipAttrib");
		}
		el = evt.target;
		var myText = el.getAttributeNS(attribNS,attribName);
	}
	else {
		var myText = el.getAttributeNS(attribNS,"tooltip");
	}
	if (myText) {
		var textArray = myText.split("\\n");
		while(this.tooltipText.hasChildNodes()) {
			this.tooltipText.removeChild(this.tooltipText.lastChild);
		}
		for (var i=0;i<textArray.length;i++) {
			var tspanEl = document.createElementNS(svgNS,"tspan");
			tspanEl.setAttributeNS(null,"x",0);
			var dy = this.tooltipTextAttribs["font-size"];
			if (i == 0) {
				var dy = 0;
			}
			tspanEl.setAttributeNS(null,"dy",dy);
			var textNode = document.createTextNode(textArray[i]);
			tspanEl.appendChild(textNode);
			this.tooltipText.appendChild(tspanEl);
		}
		// set text and rect attributes
		var bbox = this.tooltipText.getBBox();
		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);	
	}
	else {
		this.toolTipGroup.setAttributeNS(null,"visibility","hidden");	
	}
}

mapApp.prototype.enableTooltips = function() {
	this.tooltipsEnabled = true;
}

mapApp.prototype.disableTooltips = function() {
	this.tooltipsEnabled = false;
	this.toolTipGroup.setAttributeNS(null,"visibility","hidden");
}

/*************************************************************************/

/*****
*
*   ViewBox.js
*
*   copyright 2002, Kevin Lindsey
*
*****/

ViewBox.VERSION = "1.0";


/*****
*
*   constructor
*
*****/
function ViewBox(svgNode) {
    if ( arguments.length > 0 ) {
        this.init(svgNode);
    }
}


/*****
*
*   init
*
*****/
ViewBox.prototype.init = function(svgNode) {
    var viewBox = svgNode.getAttributeNS(null, "viewBox");
    var preserveAspectRatio = svgNode.getAttributeNS(null, "preserveAspectRatio");
    
    if ( viewBox != "" ) {
        var params = viewBox.split(/\s*,\s*|\s+/);

        this.x      = parseFloat( params[0] );
        this.y      = parseFloat( params[1] );
        this.width  = parseFloat( params[2] );
        this.height = parseFloat( params[3] );
    } else {
        this.x      = 0;
        this.y      = 0;
        this.width  = innerWidth;
        this.height = innerHeight;
    }
    
    this.setPAR(preserveAspectRatio);
    var dummy = this.getTM(); //to initialize this.windowWidth/this.windowHeight
};


/*****
*
*   getTM
*
*****/
ViewBox.prototype.getTM = function() {
    var svgRoot      = document.documentElement;
    var matrix       = document.documentElement.createSVGMatrix();
		//case width/height contains percent
    this.windowWidth = svgRoot.getAttributeNS(null,"width");
    if (this.windowWidth.match(/%/) || this.windowWidth == null) {
    	if (this.windowWidth == null) {
    		if (window.innerWidth) {
    			this.windowWidth = window.innerWidth;
    		}
    		else {
    			this.windowWidth = svgRoot.viewport.width;
    		}
    	}
    	else {
    		var factor = parseFloat(this.windowWidth.replace(/%/,""))/100;
    		if (window.innerWidth) {
    			this.windowWidth = window.innerWidth * factor;
    		}
    		else {
    			this.windowWidth = svgRoot.viewport.width * factor;
    		}
    	}
    }
    else {
    	this.windowWidth = parseFloat(this.windowWidth);
    }
    this.windowHeight = svgRoot.getAttributeNS(null,"height");
    if (this.windowHeight.match(/%/) || this.windowHeight == null) {
    	if (this.windowHeight == null) {
    		if (window.innerHeight) {
    			this.windowHeight = window.innerHeight;
    		}
    		else {
    			this.windowHeight = svgRoot.viewport.height;
    		}
    	}
    	else {
    		var factor = parseFloat(this.windowHeight.replace(/%/,""))/100;
    		if (window.innerHeight) {
    			this.windowHeight = window.innerHeight * factor;
    		}
    		else {
    			this.windowHeight = svgRoot.viewport.height * factor;
    		}
    	}
    }
    else {
    	this.windowHeight = parseFloat(this.windowHeight);
    }
    var x_ratio = this.width  / this.windowWidth;
    var y_ratio = this.height / this.windowHeight;

    matrix = matrix.translate(this.x, this.y);
    if ( this.alignX == "none" ) {
        matrix = matrix.scaleNonUniform( x_ratio, y_ratio );
    } else {
        if ( x_ratio < y_ratio && this.meetOrSlice == "meet" ||
             x_ratio > y_ratio && this.meetOrSlice == "slice"   )
        {
            var x_trans = 0;
            var x_diff  = this.windowWidth*y_ratio - this.width;

            if ( this.alignX == "Mid" )
                x_trans = -x_diff/2;
            else if ( this.alignX == "Max" )
                x_trans = -x_diff;
            
            matrix = matrix.translate(x_trans, 0);
            matrix = matrix.scale( y_ratio );
        }
        else if ( x_ratio > y_ratio && this.meetOrSlice == "meet" ||
                  x_ratio < y_ratio && this.meetOrSlice == "slice"   )
        {
            var y_trans = 0;
            var y_diff  = this.windowHeight*x_ratio - this.height;

            if ( this.alignY == "Mid" )
                y_trans = -y_diff/2;
            else if ( this.alignY == "Max" )
                y_trans = -y_diff;
            
            matrix = matrix.translate(0, y_trans);
            matrix = matrix.scale( x_ratio );
        }
        else
        {
            // x_ratio == y_ratio so, there is no need to translate
            // We can scale by either value
            matrix = matrix.scale( x_ratio );
        }
    }

    return matrix;
}


/*****
*
*   get/set methods
*
*****/

/*****
*
*   setPAR
*
*****/
ViewBox.prototype.setPAR = function(PAR) {
    // NOTE: This function needs to use default values when encountering
    // unrecognized values
    if ( PAR ) {
        var params = PAR.split(/\s+/);
        var align  = params[0];

        if ( align == "none" ) {
            this.alignX = "none";
            this.alignY = "none";
        } else {
            this.alignX = align.substring(1,4);
            this.alignY = align.substring(5,9);
        }

        if ( params.length == 2 ) {
            this.meetOrSlice = params[1];
        } else {
            this.meetOrSlice = "meet";
        }
    } else {
        this.align  = "xMidYMid";
        this.alignX = "Mid";
        this.alignY = "Mid";
        this.meetOrSlice = "meet";
    }
};