interaction.js

c#中用MapXtreme开发的地理信息系统

	}
};

Interaction.prototype.OnMove = function(e)
{
	var startPoint = this.PointsData.GetPoint(0);
	if(startPoint != null)
	{
		if (this.dragReqd) { 
			if (LButtonDown(e)) {
				this.Update(e.target, startPoint, new Point(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element)));
			}
		} else {
			this.Update(e.target, startPoint, new Point(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element)));
		}
	}
	return false;
}

Interaction.prototype.OnUp = function(e)
{
}

Interaction.prototype.OnClick = function(e)
{
}

Interaction.prototype.OnKeyPress = function(e)
{
	var code;
	if (e != null) {code = e.keyCode;} else {code = this.parentWindow.event.keyCode;}
	if (code == 27) this.Clear();
}

Interaction.prototype.Update = function(element, startPoint, currentPoint) 
{
	element.origin = GetAbsPos(element);
	if (BrowserType() == IE) {
		this.UpdateIE(element, startPoint, currentPoint);
	} else if (BrowserType() == NS) {
		this.UpdateMoz(element, startPoint, currentPoint);
	}
}

Interaction.prototype.Clear = function()
{
	var ent = this.element.doc.getElementById('MapInfoWebEntity');
	if (ent != null) {
			this.element.doc.body.removeChild(ent);
	}
}

Interaction.prototype.UpdateIE = function(element, startPoint, currentPoint) {};
Interaction.prototype.UpdateMoz = function(element, startPoint, currentPoint) {};

//////////////////////////////////////////////////////////////////////////////////////////
// Null Interaction
function NullInteraction(elementID, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(elementID, onComplete);
	}
}
NullInteraction.prototype = new Interaction();
NullInteraction.prototype.constructor = NullInteraction;
NullInteraction.superclass = Interaction.prototype;
NullInteraction.prototype.InitHandlers = function()
{
	this.element.onmousedown = null;
	this.element.onmousemove = null;
	this.element.onmouseup = null;
}

//////////////////////////////////////////////////////////////////////////////////////////
// Click Interaction
function ClickInteraction(elementID, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(elementID, onComplete);
	}
}
ClickInteraction.prototype = new Interaction();
ClickInteraction.prototype.constructor = ClickInteraction;
ClickInteraction.superclass = Interaction.prototype;
ClickInteraction.prototype.InitHandlers = function()
{
	ClickInteraction.superclass.InitHandlers.call(this);
	this.element.onmousedown = null;
	this.element.onmousemove = null;
	this.element.onmouseup = null;
	this.element.ondblclick = null;
}
ClickInteraction.prototype.OnClick=function (e)
{
	this.Clear();
	this.PointsData.AddPoint(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element));
	this.onComplete();
	this.PointsData.Clear();
}

//////////////////////////////////////////////////////////////////////////////////////////
// Rectangle Interaction
function RectInteraction(elementID, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(elementID, onComplete);
	}
}
RectInteraction.prototype = new Interaction();
RectInteraction.prototype.constructor = RectInteraction;
RectInteraction.superclass = Interaction.prototype;
RectInteraction.prototype.InitHandlers = function()
{
	RectInteraction.superclass.InitHandlers.call(this);
	this.element.onclick = null;
	this.element.ondblclick = null;
}
RectInteraction.prototype.UpdateMoz = function(element, startPoint, currentPoint)
{
	var rect = element.doc.getElementById("MapInfoWebEntity");
	if(!rect)
	{	
		// TODO Should we expose line styles at the tool level???
		var rect = AddElement("DIV", "RubberRect");
		rect.style.position = 'absolute';
		rect.style.visibility = 'visible';
		rect.id = "MapInfoWebEntity";
		
		
		// Set the rect style to the map parent's z-index:
		rect.style.zIndex = element.parentNode.style.zIndex + 200;
		
		// Add the rect to the document body:
		element.doc.body.appendChild(rect);
		rect.style.left = rect.left = startPoint.x;
		rect.style.top = rect.top = startPoint.y;
		
		// Add event handlers for the element
		rect.onmousedown = element.onmousedown;
		rect.onmousemove = element.onmousemove;
		rect.onmouseup = element.onmouseup;

		rect.element = element;
	}
	
	// Convert the start and current points (which are offset by the map) to absolute
	// positions:
	rect.innerHTML = '';

	// Clip the current point based on the size of the image:
	currentPoint.x = Math.max(element.origin.x, Math.min(currentPoint.x, element.origin.x + element.offsetWidth+2));
	currentPoint.y = Math.max(element.origin.y, Math.min(currentPoint.y, element.origin.y + element.offsetHeight+2));
	
	// Set the rect position based on the adjusted start and current points:
	MkRect(rect, Math.min(startPoint.x, currentPoint.x), Math.min(startPoint.y, currentPoint.y),
					 Math.abs(currentPoint.x - startPoint.x), Math.abs(currentPoint.y - startPoint.y));
}

RectInteraction.prototype.UpdateIE = function(element, startPoint, currentPoint)
{
	// If a rectangle VML hasn't been created:
	var rect = element.doc.getElementById("MapInfoWebEntity");
	if(!rect) {	
		EnableVML(element);
		// TODO Should we expose line styles at the tool level???
		// Create a vml rect with absolute positioning:
		var rect = element.doc.createElement("<v:rect/>");
		rect.id = "MapInfoWebEntity";
		rect.style.position = "absolute";
		rect.style.visibility = 'visible';
		// Set the rect style to the map parent's z-index:
		rect.style.zIndex = element.parentElement.style.zIndex + 200;
		
		// Create a fill with no opacity:
		var fill = element.doc.createElement("<v:fill opacity=0.40></v:fill>");
		
		// Create a dashed stroke:
		var stroke = element.doc.createElement("<v:stroke dashstyle='solid'></v:fill>");
		
		// Add the rect to the document body:
		element.doc.body.appendChild(rect);
		
		// Add the stroke and fill to the rect:
		rect.appendChild(fill);		
		rect.appendChild(stroke);		
	}
	
	// Clip the current point based on the size of the image:
	currentPoint.x = Math.max(element.origin.x, Math.min(currentPoint.x, element.origin.x + element.offsetWidth+2));
	currentPoint.y = Math.max(element.origin.y, Math.min(currentPoint.y, element.origin.y + element.offsetHeight+2));
	
	// Set the rect position based on the adjusted start and current points:
	rect.style.top = Math.min(startPoint.y, currentPoint.y);
	rect.style.left = Math.min(startPoint.x, currentPoint.x);
	rect.style.width = Math.abs(currentPoint.x - startPoint.x);
	rect.style.height =  Math.abs(currentPoint.y - startPoint.y);
}

RectInteraction.prototype.OnUp=function (e)
{
	this.PointsData.AddPoint(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element));
	if (this.PointsData.NumPoints() == 2 && this.onComplete) {
		var fir = this.PointsData.GetPoint(0);
		var sec = this.PointsData.GetPoint(1);
		var dx = this.PointsData.GetPoint(1).x - this.PointsData.GetPoint(0).x;
		var dy = this.PointsData.GetPoint(1).y - this.PointsData.GetPoint(0).y;
		
		if (dx < 0 && dy < 0) {
			this.PointsData.Clear();
			this.PointsData.AddPoint(sec.x, sec.y);
			this.PointsData.AddPoint(fir.x, fir.y);
		} else if (dx < 0 && dy > 0) {
			this.PointsData.Clear();
			this.PointsData.AddPoint(sec.x, fir.y);
			this.PointsData.AddPoint(fir.x, sec.y);
		} else if (dx > 0 && dy < 0) {
			this.PointsData.Clear();
			this.PointsData.AddPoint(fir.x, sec.y);
			this.PointsData.AddPoint(sec.x, fir.y);
		}
		this.onComplete();
	}
	this.PointsData.Clear();
	if (!this.clearOnEsc) this.Clear();
}

//////////////////////////////////////////////////////////////////////////////////////////
// Radius interaction
function RadInteraction(elementID, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(elementID, onComplete);
	}
}
RadInteraction.prototype = new Interaction();
RadInteraction.prototype.constructor = RadInteraction;
RadInteraction.superclass = Interaction.prototype;
RadInteraction.prototype.InitHandlers = function()
{
	RadInteraction.superclass.InitHandlers.call(this);
	this.element.onclick = null;
	this.element.ondblclick = null;
}
RadInteraction.prototype.UpdateMoz = function(element, startPoint, currentPoint) 
{
	// If a circle VML hasn't been created:
	var circle = element.doc.getElementById("MapInfoWebEntity");
	if(!circle)
	{	
		// TODO Should we expose line styles at the tool level???
		// Create a vml circle with absolute positioning:
		circle = AddElement("DIV", "RubberCir");
		circle.style.position = "absolute";
		circle.style.visibility = 'visible';
		circle.id = "MapInfoWebEntity";
		
		// Set the rect style to the map parent's z-index:
		circle.style.zIndex = element.parentNode.style.zIndex + 200;
		
		// Add the rect to the document body:
		element.doc.body.appendChild(circle);
		
		// Add event handlers for the element
		circle.onmousedown = element.onmousedown;
		circle.onmousemove = element.onmousemove;
		circle.onmouseup = element.onmouseup;
		element.doc.onmousemove = element.onmousemove;
		element.doc.onmouseup = element.onmouseup;
	}

	circle.innerHTML = '';

	// Clip the current point based on the size of the image:
	//currentPoint.x = Math.max(element.origin.x, Math.min(currentPoint.x, element.origin.x + element.offsetWidth+2));
	//currentPoint.y = Math.max(element.origin.y, Math.min(currentPoint.y, element.origin.y + element.offsetHeight+2));

	// Radius is the distance between the center and the current point
	var radius = Math.sqrt(Math.pow((currentPoint.x - startPoint.x), 2) + Math.pow((currentPoint.y - startPoint.y), 2))

	// The left and top are the center minus the radius
	circle.style.left = circle.left = startPoint.x - radius;
	circle.style.top = circle.top = startPoint.y - radius;
	
	// The width and height are the same as the diameter
	circle.style.width = 2*radius;
	circle.style.height =  circle.style.width;
	
	// Check to see if circle goes out of bounds, and if so, set the clipping 
	// parameters
	
	var clipTop, clipRight, clipBottom, clipLeft;
	currentLeft = parseInt(circle.style.left);
	currentTop = parseInt(circle.style.top);
	currentRight = currentLeft + parseInt(circle.style.width);
	currentBottom = currentTop + parseInt(circle.style.height);
		
	if ( currentTop > this.element.origin.y )
		clipTop = 'auto';
	else
		clipTop = this.element.origin.y - currentTop;
			
	if (currentRight > (this.element.origin.x + this.element.width)) 
		clipRight = (this.element.origin.x + this.element.width) - currentLeft;
	else 
		clipRight =  'auto';
		
	if (currentBottom > (this.element.origin.y + this.element.height)) 
		clipBottom = (this.element.origin.y + this.element.height) - currentTop;
	else 
		clipBottom =  'auto';
			
	if (currentLeft > this.element.origin.x) 
		clipLeft =  'auto';
	else 
		clipLeft = this.element.origin.x - currentLeft;
	
	circle.style.clip = 'rect(' + clipTop + ' ' +  clipRight + ' ' + clipBottom + ' ' + clipLeft +')';
	MkEllipse(circle, startPoint.x - radius, startPoint.y - radius, radius*2, radius*2);
};

RadInteraction.prototype.UpdateIE = function(element, startPoint, currentPoint)
{
	// If a circle VML hasn't been created:
	var circle = element.doc.getElementById("MapInfoWebEntity");
	if(!circle)
	{	
		EnableVML(element);
		// TODO Should we expose line styles at the tool level???
		// Create a vml circle with absolute positioning:
		circle = element.doc.createElement("<v:arc startangle='0' endangle='360'/>");
		circle.style.position = "absolute";
		circle.style.visibility = 'visible';
		circle.id = "MapInfoWebEntity";
		
		// Set the rect style to the map parent's z-index:
		circle.style.zIndex = element.parentElement.style.zIndex + 200;
		
		// Create a fill with no opacity:
		var fill = element.doc.createElement("<v:fill opacity=0.40></v:fill>");
		
		// Create a dashed stroke:
		var stroke = element.doc.createElement("<v:stroke dashstyle='solid'></v:fill>");
		
		// Add the circle  to the document body:
		element.doc.body.appendChild(circle);
		
		// Add the stroke and fill to the rect:
		circle.appendChild(fill);		
		circle.appendChild(stroke);
	}

	// Clip the current point based on the size of the image:
//	currentPoint.x = Math.max(element.origin.x, Math.min(currentPoint.x, element.origin.x + element.offsetWidth+2));
//	currentPoint.y = Math.max(element.origin.y, Math.min(currentPoint.y, element.origin.y + element.offsetHeight+2));

	// Radius is the distance between the center and the current point
	var radius = Math.sqrt(Math.pow((currentPoint.x - startPoint.x), 2) + Math.pow((currentPoint.y - startPoint.y), 2))

	// The left and top are the center minus the radius
	circle.style.left = startPoint.x - radius;
	circle.style.top = startPoint.y - radius;
	
	// The width and height are the same as the diameter
	circle.style.width = 2*radius;
	circle.style.height =  circle.style.width;
	
	// Check to see if circle goes out of bounds, and if so, set the clipping 
	// parameters
	
	var clipTop, clipRight, clipBottom, clipLeft;
	currentLeft = parseInt(circle.style.left);
	currentTop = parseInt(circle.style.top);
	currentRight = currentLeft + parseInt(circle.style.width);
	currentBottom = currentTop + parseInt(circle.style.height);
		
	if ( currentTop > this.element.origin.y )
		clipTop = 'auto';
	else
		clipTop = this.element.origin.y - currentTop;
			
	if (currentRight > (this.element.origin.x + this.element.width)) 
		clipRight = (this.element.origin.x + this.element.width) - currentLeft;
	else 
		clipRight = 'auto';
		
	if (currentBottom > (this.element.origin.y + this.element.height)) 
		clipBottom = (this.element.origin.y + this.element.height) - currentTop;
	else 
		clipBottom = 'auto';
			
	if (currentLeft > this.element.origin.x) 
		clipLeft = 'auto';
	else 
		clipLeft = this.element.origin.x - currentLeft;
	
	circle.style.clip = 'rect(' + clipTop + ' ' +  clipRight + ' ' + clipBottom + ' ' + clipLeft +')';
};

RadInteraction.prototype.OnUp=function (e)
{

	// Get the current point
	var endPoint = new Point(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element));
	
	// Get start point which is the center
	var startPoint = this.PointsData.GetPoint(0);

	// The startpoint is the center and radius is the distance between the start point and the end point
	var radius = 0;
	if (startPoint == null) {
		this.PointsData.AddPoint(endPoint.x, endPoint.y);
	} else {
		var radius = Math.sqrt(Math.pow((endPoint.x - startPoint.x), 2) + Math.pow((endPoint.y - startPoint.y), 2));
	}

	// The first point is center, radius is in the x coord of the next point
	this.PointsData.AddPoint(radius, -99999);

	// Call back 	
	if (this.onComplete) this.onComplete();
	this.PointsData.Clear();
	if (!this.clearOnEsc) this.Clear();
	
	this.element.doc.onmousemove = null;
	this.element.doc.onmouseup = null;
};