window.js

《SVG开发实践》源代码

/*
Scripts to create interactive Windows in SVG using ECMA script
Copyright (C) <2006>  <Andreas Neumann>
Version 1.2, 2006-08-22
[e-mail]
http://www.carto.net/
http://www.carto.net/neumann/

Credits:
* none so far

----

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

----

current version: 1.2.1

version history:
1.0 (2006-02-09)
initial version

1.0.1 (2006-03-11)
changed parameters of constructor (styling system): now an array of literals containing presentation attributes. This allows for more flexibility in Styling. Added check for number of arguments.

1.1 (2006-03-13)
added additional parameter for .appendContent() and .insertContent(), added a .resize(method)

1.1.1 (2006-06-15)
added parameter fireFunction (of type boolean) to all methods that change the window state in order to allow script controlled changes without fireing the callback function

1.1.2 (2006-06-16)
renamed this.parentId to this.parentNode; this.parentNode can now also be of type node reference (g or svg element)

1.2 (2006-08-22)
added additional event types: "moveStart", "moveEnd" and "created", added method ".addWindowDecoration()", improved documentation.

1.2.1 (2007-03-26)
made constructor namespace aware by supporting svg:svg and svg:g as parent elements, fixed bug in .remove() method

-------


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/Window/
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 control, please link to the original (http://www.carto.net/papers/svg/gui/Window/)
somewhere in the source-code-comment or the "about" of your project and give credits, thanks!

*/

function Window(id,parentNode,width,height,transX,transY,moveable,constrXmin,constrYmin,constrXmax,constrYmax,showContent,placeholderStyles,windowStyles,margin,titleBarVisible,statusBarVisible,titleText,statusText,closeButton,minimizeButton,maximizeButton,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,functionToCall) {
	var nrArguments = 30;
	var createWindow= true;
	if (arguments.length == nrArguments) {
		this.id = id;
		this.parentNode = parentNode; //can be of type string (id) or node reference (svg or g node)
		this.width = width;
		this.height = height;
		this.transX = transX;
		this.transY = transY;
		this.constrXmin = constrXmin;
		this.constrYmin = constrYmin;
		this.constrXmax = constrXmax;
		this.constrYmax = constrYmax;
		this.showContent = showContent;
		this.placeholderStyles = placeholderStyles;
		this.moveable = moveable;
		this.windowStyles = windowStyles;
		this.margin = margin;
		this.titleBarVisible = titleBarVisible;
		this.statusBarVisible = statusBarVisible;
		this.titleText = titleText;
		this.statusText = statusText;
		this.closeButton = closeButton;
		this.minimizeButton = minimizeButton;
		this.maximizeButton = maximizeButton;
		this.titlebarStyles = titlebarStyles;
		this.titlebarHeight = titlebarHeight;
		this.statusbarStyles = statusbarStyles;
		this.statusbarHeight = statusbarHeight;
		this.titletextStyles = titletextStyles;
		if (!this.titletextStyles["font-size"]) {
			this.titletextStyles["font-size"] = 12;
		}
		this.statustextStyles = statustextStyles;
		if (!this.statustextStyles["font-size"]) {
			this.statustextStyles["font-size"] = 12;
		}
		this.buttonStyles = buttonStyles;
		if (!this.buttonStyles["fill"]) {
			this.buttonStyles["fill"] = "gainsboro";
		}
		if (!this.buttonStyles["stroke"]) {
			this.buttonStyles["stroke"] = "dimgray";
		}
		if (!this.buttonStyles["stroke-width"]) {
			this.buttonStyles["stroke-width"] = 1;
		}
		this.functionToCall = functionToCall;
		//now status and reference variables
		this.windowGroup = null; //later a reference to the window group
		this.parentGroup = null; //later a reference to the parent group of the window
		this.windowTitlebarGroup = null; //later a reference to the group containing the title bar elements of the group
		this.titleBar = null; //later a reference to the titleBar rectangle
		this.windowMainGroup = null; //later a reference to the group containing the window background and the content
		this.windowContentGroup = null; //later a reference to the content of the window
		this.shadowRect = null; //later a reference to a shadow rectangle
		this.shadowTitleRect = null; //later a reference to a shadow rectangle of the titlebar
		this.backgroundRect = null; //later a reference to the window background rectangle
		this.closeButtonInstance = null; //later a reference to the close button
		this.maximizeButtonInstance = null; //later a reference to the maximize button
		this.minimizeButtonInstance = null; //later a reference to the minimize button
		this.statusbar = null; //later a reference to the statusbar
		this.statusTextElement = null; //later a reference to the status text element
		this.statusTextNode = null; //later a reference to the text child node of the statusbar
		this.titleTextNode = null; //later a reference to the text child node of the titlebar
		this.panStatus = 0; //0 means not active, 1 means mousedown and initialized 2 means currently panning
		this.minimized = false; //status to indicate if window is minimized
		this.closed = false; //status to indicate if window is closed
		this.removed = false; //status to indicate if window is removed/available
		this.decorationGroup = null; //later a potential reference to the group containing a window decoration
		this.decorationGroupMinimized = null; //later a potential reference to the group containing the window decoration geometry that is set to display="none" when minimized
	}
	else {
		createWindow = false;
		alert("Error ("+id+"): wrong nr of arguments! You have to pass over "+nrArguments+" parameters.");
	}
	if (createWindow) {
		this.timer = new Timer(this); //a Timer instance for calling the functionToCall
		this.timerMs = 200; //a constant of this object that is used in conjunction with the timer - functionToCall is called after 200 ms
		this.createWindow();
	}
	else {
		alert("Could not create Window with id '"+id+"' due to errors in the constructor parameters");		
	}
}

//create a new window
Window.prototype.createWindow = function() {
	var result = this.testParent();
	if (result) {
	//main group of the window
	this.windowGroup = document.createElementNS(svgNS,"g");
	this.windowGroup.setAttributeNS(null,"id",this.id);
	this.windowGroup.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
	//create shadowRect to represent window if showContent variable is false
	this.shadowRect = document.createElementNS(svgNS,"rect");
	this.shadowRect.setAttributeNS(null,"width",this.width);
	this.shadowRect.setAttributeNS(null,"height",this.height);
	for (var attrib in this.placeholderStyles) {
		this.shadowRect.setAttributeNS(null,attrib,this.placeholderStyles[attrib]);
	}
	this.shadowRect.setAttributeNS(null,"display","none");
	this.windowGroup.appendChild(this.shadowRect);
	//create shadowRect to represent window if showContent variable is false
	this.shadowTitleRect = document.createElementNS(svgNS,"rect");
	this.shadowTitleRect.setAttributeNS(null,"width",this.width);
	this.shadowTitleRect.setAttributeNS(null,"height",this.titlebarHeight);
	for (var attrib in this.placeholderStyles) {
		this.shadowTitleRect.setAttributeNS(null,attrib,this.placeholderStyles[attrib]);
	}
	this.shadowTitleRect.setAttributeNS(null,"display","none");
	this.windowGroup.appendChild(this.shadowTitleRect);
	//group of the window titlebar
	this.windowTitlebarGroup = document.createElementNS(svgNS,"g");
	this.windowTitlebarGroup.setAttributeNS(null,"id","windowTitlebarGroup"+this.id);
	//group containing background and content
	this.windowMainGroup = document.createElementNS(svgNS,"g");
	this.windowMainGroup.setAttributeNS(null,"id","windowMainGroup"+this.id);
	//group later containing window content
	this.windowContentGroup = document.createElementNS(svgNS,"g");
	//create backgroundRect
	this.backgroundRect = document.createElementNS(svgNS,"rect");
	this.backgroundRect.setAttributeNS(null,"width",this.width);
	this.backgroundRect.setAttributeNS(null,"height",this.height);
	for (var attrib in this.windowStyles) {
		this.backgroundRect.setAttributeNS(null,attrib,this.windowStyles[attrib]);
	}	
	this.windowMainGroup.appendChild(this.backgroundRect);
	this.windowMainGroup.appendChild(this.windowContentGroup);
	this.windowGroup.appendChild(this.windowMainGroup);
	//create titlebar
	if (this.titleBarVisible) {
		this.titlebar = document.createElementNS(svgNS,"rect");
		this.titlebar.setAttributeNS(null,"width",this.width);
		this.titlebar.setAttributeNS(null,"height",this.titlebarHeight);
		for (var attrib in this.titlebarStyles) {
			this.titlebar.setAttributeNS(null,attrib,this.titlebarStyles[attrib]);
		}
		this.titlebar.setAttributeNS(null,"id","titleBar"+this.id);
		this.titlebar.setAttributeNS(null,"cursor","pointer");
		this.titlebar.addEventListener("click",this,false);
		this.titlebar.addEventListener("mousedown",this,false);
		this.windowTitlebarGroup.appendChild(this.titlebar);
		var titletext = document.createElementNS(svgNS,"text");
		titletext.setAttributeNS(null,"x",this.margin);
		titletext.setAttributeNS(null,"y",this.titlebarHeight - (this.titlebarHeight - this.titletextStyles["font-size"]));
		var value = "";
		for (var attrib in this.titletextStyles) {
			value = this.titletextStyles[attrib];
			if (attrib == "font-size") {
				value += "px";
			}
			titletext.setAttributeNS(null,attrib,value);
		}
		titletext.setAttributeNS(null,"pointer-events","none");
		if (this.titleText.length > 0) {
			this.titleTextNode = document.createTextNode(this.titleText);
		}
		else {
			this.titleTextNode = document.createTextNode(" ");
		}
		titletext.appendChild(this.titleTextNode);
		this.windowTitlebarGroup.appendChild(titletext);
	}
	//test if defs section exists or create a new one
	var defsSection = document.getElementsByTagName("defs").item(0);
	if (!defsSection) {
		defsSection = document.createElementNS(svgNS,"defs");
		document.documentElement.appendChild(defsSection);
	}
	//now create buttons
	var buttonPosition = this.width - this.margin - this.titlebarHeight * 0.5;
	var buttonWidth = this.titlebarHeight - this.margin * 2;
	//create close button
	if (this.closeButton) {
		//test if id closeButton exists in defs section or create a new closeButton symbol
		var closeButtonSymbol = document.getElementById("closeButton");
		if (!closeButtonSymbol) {
			var closeButtonSymbol = document.createElementNS(svgNS,"symbol");
			closeButtonSymbol.setAttributeNS(null,"id","closeButton");
			closeButtonSymbol.setAttributeNS(null,"overflow","visible");
			//create background rect
			var buttonRect = document.createElementNS(svgNS,"rect");
			buttonRect.setAttributeNS(null,"x",(buttonWidth / 2 * -1));
			buttonRect.setAttributeNS(null,"y",(buttonWidth / 2 * -1));
			buttonRect.setAttributeNS(null,"width",buttonWidth);
			buttonRect.setAttributeNS(null,"height",buttonWidth);
			buttonRect.setAttributeNS(null,"fill",this.buttonStyles["fill"]);
			buttonRect.setAttributeNS(null,"pointer-events","fill");
			closeButtonSymbol.appendChild(buttonRect);
			var buttonLine = document.createElementNS(svgNS,"line");
			buttonLine.setAttributeNS(null,"x1",(buttonWidth / 2 * -1));
			buttonLine.setAttributeNS(null,"x2",(buttonWidth / 2));
			buttonLine.setAttributeNS(null,"y1",(buttonWidth / 2 * -1));
			buttonLine.setAttributeNS(null,"y2",(buttonWidth / 2));
			buttonLine.setAttributeNS(null,"stroke",this.buttonStyles["stroke"]);
			buttonLine.setAttributeNS(null,"stroke-width",this.buttonStyles["stroke-width"]);
			buttonLine.setAttributeNS(null,"pointer-events","none");
			closeButtonSymbol.appendChild(buttonLine);
			var buttonLine = document.createElementNS(svgNS,"line");
			buttonLine.setAttributeNS(null,"x1",(buttonWidth / 2));
			buttonLine.setAttributeNS(null,"x2",(buttonWidth / 2 * -1));
			buttonLine.setAttributeNS(null,"y1",(buttonWidth / 2 * -1));
			buttonLine.setAttributeNS(null,"y2",(buttonWidth / 2));