Merge Chromium + Blink git repositories

[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / svg / carto.net / resources / mapApp.js

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

Copyright (C) <2006>  <Andreas Neumann>
Version 1.2, 2006-10-06
neumann@karto.baug.ethz.ch
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

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

-------


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., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  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 neumann@karto.baug.ethz.ch
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.appName.match(/Opera/gi)) {
            this.navigator = "Opera";
        }
        if (window.navigator.appName.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();
}

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");            
            }
        }
        //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");
    }
    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);    
}

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";
    }
};