interaction.js

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

//////////////////////////////////////////////////////////////////////////////////////////
// Line Interaction
function LineInteraction(elementID, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(elementID, onComplete);
		this.element.onclick = null;
	}
}
LineInteraction.prototype = new Interaction();
LineInteraction.prototype.constructor = LineInteraction;
LineInteraction.superclass = Interaction.prototype;
LineInteraction.prototype.InitHandlers = function()
{
	LineInteraction.superclass.InitHandlers.call(this);
	this.element.onclick = null;
	this.element.ondblclick = null;
}
LineInteraction.prototype.UpdateMoz = function(element, startPoint, currentPoint) 
{
	var line = element.doc.getElementById("MapInfoWebEntity");
	if(!line)
	{	
		// TODO Should we expose line styles at the tool level???
		line = AddElement("DIV", "RubberPolygon");
		line.style.position = "absolute";
		line.style.visibility = 'visible';
		line.id = "MapInfoWebEntity";
		
		// Set the style to the map parent's z-index:
		line.style.zIndex = this.element.parentNode.style.zIndex + 200;
		
		// Add to the document body:
		element.doc.body.appendChild(line);
		
		// Now set the event handlers for click and dblclick for the div element
		line.onmousemove = this.element.onmousemove;
		line.onmouseup = this.element.onmouseup;
		
		line.style.left = line.left = currentPoint.x + GetScrollLeft(element);
		line.style.top = line.top = currentPoint.y + GetScrollTop(element);
	}
	
	var tempX = new Array();
	var tempY = new Array();
	for (i=0; i<this.PointsData.Points.length; i++) {
		var pt = this.PointsData.GetPoint(i);
		tempX[i] = pt.x;
		tempY[i] = pt.y;
	}
	
	tempX[tempX.length]  = currentPoint.x;
	tempY[tempY.length]  = currentPoint.y;
	
	line.innerHTML = '';
	MkPolyline(line, tempX, tempY);
}

LineInteraction.prototype.UpdateIE = function(element, startPoint, currentPoint) 
{
	var line = element.doc.getElementById("MapInfoWebEntity");
	// create the vml polyline element		
	if(!line)
	{
		EnableVML(element);
		// TODO Should we expose line styles at the tool level???
		// Create a vml polyline with absolute positioning:
		line = element.doc.createElement("<v:polyline points=\"0,0\"/>");
		line.style.position = "absolute";
		line.style.visibility = "visible";
		line.id = "MapInfoWebEntity";
		
		// Set the style to the map parent's z-index:
		line.style.zIndex = this.element.parentElement.style.zIndex + 200;
		
		// Create a fill with no opacity:
		if (this.doPolygon == true) {
			var fill = element.doc.createElement("<v:fill opacity=0.40></v:fill>");
		} else {
			var fill = element.doc.createElement("<v:fill opacity=0.00></v:fill>");
		}
		
		// Create a dashed stroke:
		var stroke = element.doc.createElement("<v:stroke dashstyle='solid'></v:fill>");
		
		// Add to the document body:
		element.doc.body.appendChild(line);
		
		// Add the stroke and fill to the polyline:
		line.appendChild(fill);		
		line.appendChild(stroke);
		
		// Now add the event handlers for this line which point to event handlers of the map
		// the reason for doing this is when a closed vml shape is formed, any mouse activities
		// within that closed shaped become events for that vml entity not map
		line.onmousemove = this.element.onmousemove; 
		line.onclick = this.element.onclick;
		line.ondblclick = this.element.ondblclick;
		line.Frame = this.element.Frame;

		// Store the offset of the polyline we just inserted		
		line.lineOffset = new Point(line.offsetLeft, line.offsetTop);
	}
		// Update line coordinates
		currentPoint.x = currentPoint.x - line.lineOffset.x;
		currentPoint.y = currentPoint.y - line.lineOffset.y;
		line.points.value = this.PointsData.GetPointsValue(line.lineOffset) + 
				" " + currentPoint.x + "," + currentPoint.y;
}

LineInteraction.prototype.OnUp=function (e)
{
	this.element.onmousemove = null;
	this.PointsData.Clear();
	if (!this.clearOnEsc) this.Clear();
}

//////////////////////////////////////////////////////////////////////////////////////////
// Polyline Interaction
function PolylineInteraction(elementID, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(elementID, onComplete);
		this.doPolygon = false;
		this.dragReqd = false;
	}
}
PolylineInteraction.prototype = new Interaction();
PolylineInteraction.prototype.constructor = PolylineInteraction;
PolylineInteraction.superclass = Interaction.prototype;
PolylineInteraction.prototype.InitHandlers = function()
{
	PolylineInteraction.superclass.InitHandlers.call(this);
	this.element.onmousedown = null;
	this.element.onmouseup = null;
}
PolylineInteraction.prototype.LineIE = function(e)
{
	var line = this.element.doc.getElementById("MapInfoWebEntity");
	// create the vml polyline element		
	if(!line)
	{
		EnableVML(this.element);
		// TODO Should we expose line styles at the tool level???
		// Create a vml polyline with absolute positioning:
		line = this.element.doc.createElement("<v:polyline points=\"0,0\"/>");
		line.style.position = "absolute";
		line.style.visibility = "visible";
		line.id = "MapInfoWebEntity";
		
		// Set the style to the map parent's z-index:
		line.style.zIndex = this.element.parentElement.style.zIndex + 200;
		
		// Create a fill with no opacity:
		if (this.doPolygon == true) {
			var fill = this.element.doc.createElement("<v:fill opacity=0.40></v:fill>");
		} else {
			var fill = this.element.doc.createElement("<v:fill opacity=0.00></v:fill>");
		}
		
		// Create a dashed stroke:
		var stroke = this.element.doc.createElement("<v:stroke dashstyle='solid'></v:fill>");
		
		// Add to the document body:
		this.element.doc.body.appendChild(line);
		
		// Add the stroke and fill to the polyline:
		line.appendChild(fill);		
		line.appendChild(stroke);
		
		// Now add the event handlers for this line which point to event handlers of the map
		// the reason for doing this is when a closed vml shape is formed, any mouse activities
		// within that closed shaped become events for that vml entity not map
		line.onmousemove = this.element.onmousemove; 
		line.onclick = this.element.onclick;
		line.ondblclick = this.element.ondblclick;
		line.Frame = this.element.Frame;

		// Store the offset of the polyline we just inserted		
		line.lineOffset = new Point(line.offsetLeft, line.offsetTop);
	}
}

PolylineInteraction.prototype.LineNS = function(e)
{
	var line = this.element.doc.getElementById("MapInfoWebEntity");
	if(!line)
	{	
		// TODO Should we expose line styles at the tool level???
		line = AddElement("DIV", "RubberPolygon");
		line.style.position = "absolute";
		line.style.visibility = 'visible';
		line.id = "MapInfoWebEntity";
		
		// Set the style to the map parent's z-index:
		line.style.zIndex = this.element.parentNode.style.zIndex + 200;
		
		// Add to the document body:
		this.element.doc.body.appendChild(line);
		
		// Now set the event handlers for click and dblclick for the div element
		line.onclick = this.element.onclick;
		line.onmousemove = this.element.onmousemove;
		line.ondblclick = this.element.ondblclick;
		
		line.style.left = line.left = e.clientX+GetScrollLeft(this.element);
		line.style.top = line.top = e.clientX+GetScrollLeft(this.element);
	}
}

PolylineInteraction.prototype.OnClick=function (e)
{
	if (this.PointsData.NumPoints() <= 0) this.Clear();
	if (BrowserType() == IE) {
		this.LineIE(e);
	} else if (BrowserType() == NS) {
		this.LineNS(e);
	}
	this.PointsData.AddPoint(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element));
	return false;
}

PolylineInteraction.prototype.OnDblClick=function (e)
{
	if (this.onComplete) this.onComplete();
	this.PointsData.Clear();
	if (!this.clearOnEsc) this.Clear();
}

PolylineInteraction.prototype.UpdateMoz = function(element, startPoint, currentPoint) 
{
	// 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));

	// Now set the polylines points collection so that it draws the segments
	// it contains all the previously clicked points + current point (which is moving)
	// + the first point to complete the polygon
	var line = element.doc.getElementById("MapInfoWebEntity");

	var tempX = new Array();
	var tempY = new Array();
	for (i=0; i<this.PointsData.Points.length; i++) {
		var pt = this.PointsData.GetPoint(i);
		tempX[i] = pt.x;
		tempY[i] = pt.y;
	}
	
	tempX[tempX.length]  = currentPoint.x;
	tempY[tempY.length]  = currentPoint.y;
	if (this.doPolygon) {
		var firstPoint = this.PointsData.GetPoint(0);
		tempX[tempX.length]  = firstPoint.x;
		tempY[tempY.length]  = firstPoint.y;
	}	
	
	if (line != null) {
		line.innerHTML = '';
		MkPolyline(line, tempX, tempY);
	}
}

PolylineInteraction.prototype.UpdateIE = function(element, startPoint, currentPoint) 
{
	var line = element.doc.getElementById("MapInfoWebEntity");

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

	// Now set the polylines points collection so that it draws the segments
	// it contains all the previously clicked points + current point (which is moving)
	// + the first point to complete the polygon
	var offset = line.lineOffset;
	currentPoint.x = currentPoint.x - offset.x;
	currentPoint.y = currentPoint.y - offset.y;
	if (this.doPolygon) {
		firstPoint = this.PointsData.GetPoint(0);
		firstPoint.x = firstPoint.x - offset.x;
		firstPoint.y = firstPoint.y - offset.y;
		line.points.value = this.PointsData.GetPointsValue(offset) + 
				" " + currentPoint.x + "," + currentPoint.y + " " +
				firstPoint.x + "," + firstPoint.y;
	} else {
		line.points.value = this.PointsData.GetPointsValue(offset) + 
				" " + currentPoint.x + "," + currentPoint.y;
	}
}

//////////////////////////////////////////////////////////////////////////////////////////
// Polygon Interaction
function PolygonInteraction(elementID, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(elementID, onComplete);
		this.doPolygon = true;
		this.dragReqd = false;
	}
}
PolygonInteraction.prototype = new PolylineInteraction();
PolygonInteraction.prototype.constructor = PolygonInteraction;
PolygonInteraction.superclass = PolylineInteraction.prototype;
PolygonInteraction.prototype.InitHandlers = function()
{
	PolygonInteraction.superclass.InitHandlers.call(this);
	this.element.onmousedown = null;
	this.element.onmouseup = null;
}

//////////////////////////////////////////////////////////////////////////////////////////
// Drag Interaction
function DragInteraction(element, onComplete)
{
	if (arguments.length > 0) {
		this.InitParams(element, onComplete);
	}
}
DragInteraction.prototype = new Interaction();
DragInteraction.prototype.constructor = DragInteraction;
DragInteraction.superclass = Interaction.prototype;
DragInteraction.prototype.InitHandlers = function()
{
	DragInteraction.superclass.InitHandlers.call(this);
	this.element.onclick = null;
	this.element.ondblclick = null;
}

DragInteraction.prototype.OnDown = function(e)
{
	this.element.style.zIndex = 200;
	this.Clear();
	this.PointsData.AddPoint(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element));
	if (!this.origin) this.origin = new Point(this.element.origin.x, this.element.origin.y);
	return false;
};

DragInteraction.prototype.OnMove = function(e)
{
	var startPoint = this.PointsData.GetPoint(0);
	if(startPoint != null)
	{
		if (this.dragReqd) { 
			if (LButtonDown(e)) {
				this.Update(this.element, startPoint, new Point(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element)));
			}
		} else {
			this.Update(this.element, startPoint, new Point(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element)));
		}
		var currentPoint = new Point(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element));
		if (currentPoint.x <= this.origin.x || currentPoint.x >= (this.origin.x + this.element.width) || currentPoint.y <= this.origin.y || currentPoint.y >= (this.origin.y + this.element.height)) {
			this.OnUp(e);
		}
	}
	return false;
}

DragInteraction.prototype.Update = function(element, startPoint, currentPoint) 
{
	if (BrowserType() == IE) {
		//element.parentElement.style.position = "relative";
		this.UpdateIE(element, startPoint, currentPoint);
	} else if (BrowserType() == NS) {
		//element.parentNode.style.position = "relative";
		this.UpdateMoz(element, startPoint, currentPoint);
	}
}

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

DragInteraction.prototype.UpdateIE = function(element, startPoint, currentPoint)
{
	var clipTop, clipRight, clipBottom, clipLeft;
	var currentLeft, currentTop, currentRight, currentBottom;
	
	// Calculate absolute current coordinates of the image
	currentLeft = element.origin.x + (currentPoint.x - startPoint.x);
	currentTop = element.origin.y + (currentPoint.y - startPoint.y);
	currentRight = currentLeft + element.width;
	currentBottom = currentTop + element.height;
	element.BorderWidth = 2;

	// Check to see if image goes out of bounds, and if so, set the clipping 
	// parameters
	if ( currentTop > element.origin.y )
		clipTop = 0;
	else
		clipTop = element.origin.y - currentTop;
			
	if (currentRight > (element.origin.x + element.width)) 
		clipRight = (element.origin.x + element.width) - currentLeft - element.BorderWidth;
	else 
		clipRight = currentRight - currentLeft - element.BorderWidth;
		
	if (currentBottom > (element.origin.y + element.height)) 
		clipBottom = (element.origin.y + element.height) - currentTop - element.BorderWidth;
	else 
		clipBottom = currentBottom - currentTop - element.BorderWidth;
			
	if (currentLeft > element.origin.x) 
		clipLeft = 0;
	else 
		clipLeft = element.origin.x - currentLeft;
	// Set the map image's style parameters to actually move the image	
	element.style.position = "absolute";
	element.style.left = currentLeft- element.origin.x;
	element.style.top = currentTop- element.origin.y;	
	element.style.clip = 'rect(' + clipTop + ' ' +  clipRight + ' ' + clipBottom + ' ' + clipLeft +')';
	this.drag = true;
}

DragInteraction.prototype.OnUp=function (e)
{
	if (this.drag) {
	this.element.style.position='relative';
		this.element.style.left = 0;
		this.element.style.top = 0;
		this.element.style.clip = 'rect(' + 0 + ' ' +  this.element.width + ' ' + this.element.height + ' ' + 0 +')';
		this.PointsData.AddPoint(e.clientX+GetScrollLeft(this.element), e.clientY+GetScrollTop(this.element));
		if (this.onComplete) this.onComplete();
		this.PointsData.Clear();
		this.drag = false;
	}
}