拓扑功能重构

     这周，抽空重构了拓扑程序的脚本。结构化强了，也方便继续扩展了。

    还是使用了最新的excanvas.js的最新版和jquery1.4.2。不再使用jquery ui。

    除了原来的拖拽功能，还增加了改变大小的功能（先只实现了row-resize功能），以后再实现其他功能。    下来，准备实现element的动态增加、删除功能，和label功能。

 

   

 

    JS代码如下：

var jvConstants = {
	ELEMENT_ID_PREFIX : 'jvElement_',
	ELEMENT_ID_COUNT : 0,
	DEFAULT_VALID_COLOR:'#00FF00',
	DEFAULT_INVALID_COLOR:'#FF0000',
	HIGHLIGHT_STROKEWIDTH:3,
	CURSOR_MOVABLE_ELEMENT:'move',
	CURSOR_MOVABLE_EDGE:'move',
	CURSOR_CONNECT:'pointer',
	VALID_COLOR:'#00FF00',
	INVALID_COLOR:'#FF0000',
	STYLE_STROKECOLOR:'strokeColor',
	STYLE_STROKEWIDTH:'strokeWidth',
	SHAPE_RECTANGLE:'rectangle',
	SHAPE_ELLIPSE:'ellipse',
	ELEMENT_TYPE_EDGE:'edge',
	BACKGROUND_COLOR:'background-color',
	ACTION_MOVE : 'move',
	END_POINT_LEFTTOP : 'lt',
	END_POINT_LEFTMIDDLE : 'lm',
	END_POINT_LEFTBOTTOM : 'lb',
	END_POINT_MIDDLETOP : 'mt',
	END_POINT_MIDDLEBOTTOM : 'mb',
	END_POINT_RIGHTTOP : 'rt',
	END_POINT_RIGHTMIDDLE : 'rm',
	END_POINT_RIGHTBOTTOM : 'rb'
};

function getMouseButton(eventObject) {
    var buttons = {
        'left':false,
        'middle':false,
        'right':false
    };

    if(eventObject.toString && eventObject.toString().indexOf('MouseEvent') != -1) {
        switch(eventObject.button) {
            case 0: buttons.left = true; break;
            case 1: buttons.middle = true; break;
            case 2: buttons.right = true; break;
            default: break;
        }
    } else if(eventObject.button) {
        switch(eventObject.button) {
            case 1: buttons.left = true; break;
            case 2: buttons.right = true; break;
            case 3:
                buttons.left = true;
                buttons.right = true;
            break;
            case 4: buttons.middle = true; break;
            case 5:
                buttons.left = true;
                buttons.middle = true;
            break;
            case 6:
                buttons.middle = true;
                buttons.right = true;
            break;
            case 7:
                buttons.left = true;
                buttons.middle = true;
                buttons.right = true;
            break;
            default: break;
        }
    } else {
        return false;
    }
    return buttons;
};

function jsMap(){
	this.clear();
};
jsMap.prototype.map=null;
jsMap.prototype.clear=function(){
	this.map = {};
};
jsMap.prototype.get=function(key){
	var id=mxObjectIdentity.get(key);
	return this.map[id];
};
jsMap.prototype.put=function(key,value){
	var id=mxObjectIdentity.get(key);
	var previous=this.map[id];
	this.map[id]=value;
	return previous;
};
jsMap.prototype.remove=function(key){
	var id=mxObjectIdentity.get(key);
	var previous=this.map[id];
	delete this.map[id];
	return previous;
};
jsMap.prototype.getKeys=function(){
	var result=[];
	for(key in this.map){
		result.push(key);
	}
	return result;
};
jsMap.prototype.getValues=function(){
	var result=[];
	for(key in this.map){
		result.push(this.map[key]);
	}
	return result;
};

function jvPoint(x,y){
	this.x = (x!=null)?x:0;
	this.y = (y!=null)?y:0;
};
jvPoint.prototype.x=null;
jvPoint.prototype.y=null;
jvPoint.prototype.equals=function(obj){
	return obj.x==this.x&&obj.y==this.y;
};

function jvEndPoint(x, y, type, cursor){
	jvPoint.call(this, x, y);
	this.type = type;
	this.cursor = cursor;
};
jvEndPoint.prototype=new jvPoint();
jvEndPoint.prototype.constructor=jvEndPoint;

function jvRectangle(x, y, width, height){
	jvPoint.call(this, x, y);
	this.width = (width != null) ? width : 0;
	this.height = (height != null) ? height : 0;
};
jvRectangle.prototype=new jvPoint();
jvRectangle.prototype.constructor=jvRectangle;
jvRectangle.prototype.width=null;
jvRectangle.prototype.height=null;
jvRectangle.prototype.getCenterX=function(){
	return this.x+this.width/2;
};
jvRectangle.prototype.getCenterY=function(){
	return this.y+this.height/2;
};
jvRectangle.prototype.getPoint=function(){
	return new jvPoint(this.x,this.y);
};
jvRectangle.prototype.equals=function(obj){
	return obj.x==this.x&&obj.y==this.y&&obj.width==this.width&&obj.height==this.height;
};
jvRectangle.prototype.grow=function(amount){
	this.x-=amount;
	this.y-=amount;
	this.width+=2*amount;
	this.height+=2*amount;
};

function jvStylesheet(){
	this.styles = [];
	this.putDefaultElementStyle(this.createDefaultElementStyle());
	this.putDefaultEdgeStyle(this.createDefaultEdgeStyle());
	return this;
};
jvStylesheet.prototype.createDefaultElementStyle = function(){
	var style=new Object();
	style[jvConstants.STYLE_SHAPE]=jvConstants.SHAPE_RECTANGLE;
	style[jvConstants.STYLE_FILLCOLOR]='#C3D9FF';
	style[jvConstants.STYLE_STROKECOLOR]='#6482B9';
	style[jvConstants.STYLE_FONTCOLOR]='#774400';
	style[jvConstants.STYLE_STROKEWIDTH] = 2;
	return style;
};
jvStylesheet.prototype.createDefaultEdgeStyle = function(){
	var style=new Object();
	style[jvConstants.STYLE_SHAPE]=jvConstants.SHAPE_CONNECTOR;
	style[jvConstants.STYLE_STROKECOLOR]='#6482B9';
	style[jvConstants.STYLE_FONTCOLOR]='#446299';
	style[jvConstants.STYLE_STROKEWIDTH] = 2;
	return style;
};
jvStylesheet.prototype.putDefaultElementStyle=function(style){
	this.putCellStyle('defaultElement',style);
};
jvStylesheet.prototype.putDefaultEdgeStyle=function(style){
	this.putCellStyle('defaultEdge',style);
};
jvStylesheet.prototype.getDefaultElementStyle=function(){
	return this.styles['defaultElement'];
};
jvStylesheet.prototype.getDefaultEdgeStyle=function(){
	return this.styles['defaultEdge'];
};
jvStylesheet.prototype.putCellStyle=function(name,style){
	this.styles[name] = style;
};

function jvState(x, y, width, height, action){
	jvRectangle.call(this, x, y, width, height);
	this.action = action;
}
jvState.prototype =new jvRectangle();
jvState.prototype.constructor = jvState;
jvState.prototype.changed = false;

function jvElement(canvas, type, x, y, width, height){
	jvRectangle.call(this, x, y, width, height);
	this.canvas = canvas;
	this.type = type;
};
jvElement.prototype =new jvRectangle();
jvElement.prototype.constructor = jvElement;
jvElement.prototype.id = null;
jvElement.prototype.shape = null;
jvElement.prototype.frame = null;
jvElement.prototype.endPoints = null;
jvElement.prototype.source = null;
jvElement.prototype.target = null;
jvElement.prototype.edges = null;
jvElement.prototype.edge=false;
jvElement.prototype.lastState=null;
jvElement.prototype.edge=false;
jvElement.prototype.areaCoords = [];
jvElement.prototype.area = null;
jvElement.prototype.isEdge=function(){
	return this.edge;
};
jvElement.prototype.setStyle = function(styles, style){
	var d = styles.getDefaultElementStyle();
	jQuery.extend(this.style, d, style);
};
jvElement.prototype.create = function(){
	this.id = $.jvChart.getElementID();
	this.container = this.canvas.parentElement;
	if (this.type == jvConstants.ELEMENT_TYPE_EDGE){
		this.style = $.jvChart.getStylesheet().getDefaultEdgeStyle();
		this.edge = true;
	}else{
		this.edges = [];
		this.style = $.jvChart.getStylesheet().getDefaultElementStyle();
		this.style[jvConstants.BACKGROUND_COLOR] = $(this.container).css(jvConstants.BACKGROUND_COLOR);
	}
	
	this.draw();
	this.createArea();
	this.bindMouseEvents();
};
jvElement.prototype.move = function(e){
	if (this.height < 0){
		var t = this.y + this.height;
		this.y += this.height;
		this.height = Math.abs(this.height);
		this.state.y = this.y;
		this.state.height = this.height;
		this.startY = e.clientY;
		if (this.state.action == jvConstants.END_POINT_MIDDLEBOTTOM){
			this.state.action = jvConstants.END_POINT_MIDDLETOP;
		}else if (this.state.action == jvConstants.END_POINT_MIDDLETOP){
			this.state.action = jvConstants.END_POINT_MIDDLEBOTTOM;
		}
	}
	this.updateFrame();
};
jvElement.prototype.updateFrame = function(){

	$(this.frame).css('left', this.x).css('top', this.y)
		.css('width', this.width).css('height', this.height);
};
jvElement.prototype.updateEndPoints = function(){
	var c = this.container;
	if (this.endPoints){
		$(this.endPoints).remove();
		this.endPoints = null;	
	}
	if (this.isEdge()){
	}else{
		var xr = this.x + this.width,
			xm = Math.round(this.x + this.width /2),
			yr = this.y + this.height,
			ym = Math.round(this.y + this.height /2);
		var e = [];
		e.push(new jvEndPoint(this.x, this.y, jvConstants.END_POINT_LEFTTOP, 'nw-resize'));
		e.push(new jvEndPoint(xm, this.y, jvConstants.END_POINT_MIDDLETOP, 'row-resize'));
		e.push(new jvEndPoint(xr, this.y, jvConstants.END_POINT_RIGHTTOP, 'ne-resize'));
		e.push(new jvEndPoint(this.x, ym, jvConstants.END_POINT_LEFTMIDDLE, 'col-resize'));
		e.push(new jvEndPoint(xr, ym, jvConstants.END_POINT_RIGHTMIDDLE, 'col-resize'));
		e.push(new jvEndPoint(this.x, yr, jvConstants.END_POINT_LEFTBOTTOM, 'sw-resize'));
		e.push(new jvEndPoint(xm, yr, jvConstants.END_POINT_MIDDLEBOTTOM, 'row-resize'));
		e.push(new jvEndPoint(xr, yr, jvConstants.END_POINT_RIGHTBOTTOM, 'se-resize'));
		
		var ep = this.endPoints = [];
		$(e).each(function(i){
			var l = this.x - 3;
			var t = this.y - 3;
			ep.push($.jvChart.createElement('div', {
				action:this.type}, {position: 'absolute', 'z-index':1, 
				'background-color':'lime',
				left:l, top:t, width: '7px', height: '7px', overflow:'hidden', cursor:this.cursor}, c));			
		});
		
		var $e = this;
		$(ep).each(function(i){
			$(this).mousedown(function (e) {
				return $e.select(e, $(this).attr('action'));
			}).mouseup(function (e) {
				return $e.mouseup();
			});
		});
	}
	
};

jvElement.prototype.reDraw = function(){
	if (this.shape){
		$(this.shape).remove();
	}
	this.draw(this);
	this.updateFrame();
	this.updateEndPoints();
	this.bindMouseEvents();
	this.state = null;
	if (!this.isEdge()){
		$(this.edges).each(function(i){
			this.reDraw();
		});
	}
};
jvElement.prototype.createArea = function(){
};
jvElement.prototype.createFrame = function(){	
	if (this.frame != null){return;}
	var c = this.container;
	if (c.selectedElement){
		c.selectedElement.removeFrame();
	}

	this.frame = $.jvChart.createElement('div', {
			id: c.id + '-frame'
		}, {position: 'absolute', 'z-index':-1, border:'dotted 2 lime',
		left:this.x, top:this.y, width: this.width, height: this.height}, c);	
		
	$(this.frame).mouseup(function (e) {
		return true;
	});
	this.updateEndPoints();
};
jvElement.prototype.removeFrame = function(){
	$(this.frame).remove();
	this.frame = null;
	$(this.endPoints).remove();
	this.endPoints = null;
	this.state = null;
};
jvElement.prototype.buildArea = function(){
	var str = "<area shape=poly style='cursor:move; ' coords=";
	var length = $(this.areaCoords).length;
	$(this.areaCoords).each(function(i){
		str += this.x + ',' + this.y;
		if (i != length - 1){
			str += ',';
		}
	});
	str +='>';
	var area = document.createElement(str);
	this.container.imagemap.appendChild(area);

	this.area = area;
};
jvElement.prototype.select = function(e, action){
	if (this.container.selectedElement){
		if (this.container.selectedElement.id != this.id){
			this.container.selectedElement.unselect();
		}
	}
	this.createFrame();
	this.state = new jvState(this.x, this.y, this.width, this.height, action);
	this.startX = e.clientX;
	this.startY = e.clientY;
	this.container.selectedElement = this;
	
	document.onselectstart=new Function ("return false");

	return false;
};
jvElement.prototype.unselect = function(){
	this.removeFrame();
};
jvElement.prototype.mouseup = function(){
	if (this.state && !this.state.changed){
		this.state.action = null;
		return false;
	}
	return true;
};
jvElement.prototype.bindMouseEvents = function(){
	if (this.idEdge){return;}
	var $e = this;
	
	$(this.shape).css({cursor:'move'}).mousedown(function (e) {
		return $e.select(e, jvConstants.ACTION_MOVE);
	}).mouseup(function (e) {
		return $e.mouseup();
	});

};

function jvEllipseElement(canvas, x, y, width, height){
	jvElement.call(this, canvas, jvConstants.SHAPE_ELLIPSE, x, y, width, height);
	this.create();

	return this;
};
jvEllipseElement.prototype = new jvElement();
jvEllipseElement.prototype.constructor = jvEllipseElement;

jvEllipseElement.prototype.draw = function(){
	var ctx = this.canvas.getContext('2d');

	ctx.beginPath();  

	var hB = (this.width / 2) * .5522848,
	    vB = (this.height / 2) * .5522848, 
	    eX = this.x + this.width,            
	    eY = this.y + this.height,            
	    mX = this.x + this.width / 2,            
	    mY = this.y + this.height / 2;    
	               
	ctx.moveTo(this.x, mY);        
	ctx.bezierCurveTo(this.x, mY - vB, mX - hB, this.y, mX, this.y);        
	ctx.bezierCurveTo(mX + hB, this.y, eX, mY - vB, eX, mY);        
	ctx.bezierCurveTo(eX, mY + vB, mX + hB, eY, mX, eY);        
	ctx.bezierCurveTo(mX - hB, eY, this.x, mY + vB, this.x, mY);        
	ctx.closePath();       
	
	ctx.strokeStyle = this.style[jvConstants.STYLE_STROKECOLOR];
	ctx.lineWidth = this.style[jvConstants.STYLE_STROKEWIDTH];
	ctx.fillStyle = this.style[jvConstants.BACKGROUND_COLOR];
	ctx.fill();
	ctx.stroke();
	this.shape = [];
	var shapes = this.canvas.getElementsByTagName("shape");
	this.shape.push(shapes[shapes.length - 2]);
	this.shape.push(shapes[shapes.length - 1]);
};
jvEllipseElement.prototype.createArea = function(){
	if (!this.imagemap){return;}
	if (this.area){
		$(this.area).remove();
		this.areaCoords = [];
	}
	
	var a = 0.5 * Math.sqrt(this.height * this.height + this.width * this.width),
		b = 0.5 * this.height,
		e = Math.sqrt(1.0 - b * b / a / a),
		ox = 0.5 * (this.x + this.width),
		oy = 0.5 * (this.y + this.height),
		phi = 0,
		sinphi = Math.sin(phi),
		cosphi = Math.cos(phi);
	for (var i=0;i< 360; i+=15){
		var sita = Math.PI / 180.0 * i ,
			cn = Math.cos(sita),
			sn = Math.sin(sita),
			r = b / Math.sqrt( 1.0 - e * e * cn * cn), 
			tx = r * cn ,
			ty = r * sn,
			xx = tx * cosphi - ty * sinphi,
			yy = ty * cosphi + tx * sinphi;
		
		this.areaCoords.push(new jvPoint(Math.round(xx + ox), Math.round(yy + oy)));
	}
	this.buildArea();
};

function jvRectangleElement(canvas, x, y, width, height, radius){
	jvElement.call(this, canvas, jvConstants.SHAPE_RECTANGLE, x, y, width, height);
	this.radius = radius;
	this.create();

	return this;
};
jvRectangleElement.prototype = new jvElement();
jvRectangleElement.prototype.constructor = jvRectangleElement;
jvRectangleElement.prototype.draw = function(){
	var ctx = this.canvas.getContext('2d');
	ctx.beginPath();
	if (!this.radius) {
		ctx.rect(this.x, this.y, this.width, this.height);
	} else {
		ctx.moveTo(this.x, this.y + this.radius);
		ctx.lineTo(this.x, this.y + this.height - this.radius);
		ctx.quadraticCurveTo(this.x, this.y + this.height, this.x + this.radius, this.y + this.height); 
		ctx.lineTo(this.x + this.width - this.radius, this.y + this.height);
		ctx.quadraticCurveTo(this.x + this.width, this.y + this.height, this.x + this.width, this.y + this.height - this.radius);
		ctx.lineTo(this.x + this.width, this.y + this.radius);
		ctx.quadraticCurveTo(this.x + this.width, this.y , this.x + this.width - this.radius, this.y);
		ctx.lineTo(this.x + this.radius, this.y);
		ctx.quadraticCurveTo(this.x , this.y, this.x, this.y + this.radius);
	}
	ctx.closePath();
	
	ctx.strokeStyle = this.style[jvConstants.STYLE_STROKECOLOR];
	ctx.lineWidth = this.style[jvConstants.STYLE_STROKEWIDTH];
	ctx.fillStyle = this.style[jvConstants.BACKGROUND_COLOR];
	ctx.fill();
	ctx.stroke();
	
	this.shape = [];
	var shapes = this.canvas.getElementsByTagName("shape");
	this.shape.push(shapes[shapes.length - 2]);
	this.shape.push(shapes[shapes.length - 1]);
};


function jvEdgeElement(canvas, source, target){
	jvElement.call(this, canvas, jvConstants.ELEMENT_TYPE_EDGE);
	this.source = source;
	this.target = target;
	this.edge = true;
	this.create();
	return this;
};
jvEdgeElement.prototype = new jvElement();
jvEdgeElement.prototype.constructor = jvEdgeElement;

jvEdgeElement.prototype.draw = function(){
	var ctx = this.canvas.getContext('2d');
	var p = [{x: this.source.x + this.source.width / 2, y: this.source.y - 1},
	    {x: this.source.x + this.source.width / 2, y: this.source.y + this.source.height + 1},
	    {x: this.source.x - 1, y: this.source.y + this.source.height / 2},
	    {x: this.source.x + this.source.width + 1, y: this.source.y + this.source.height / 2},
	    {x: this.target.x + this.target.width / 2, y: this.target.y - 1},
	    {x: this.target.x + this.target.width / 2, y: this.target.y + this.target.height + 1},
	    {x: this.target.x - 1, y: this.target.y + this.target.height / 2},
	    {x: this.target.x + this.target.width + 1, y: this.target.y + this.target.height / 2}];
	var d = {}, dis = [];
	for (var i = 0; i < 4; i++) {
	    for (var j = 4; j < 8; j++) {
	        var dx = Math.abs(p[i].x - p[j].x),
	            dy = Math.abs(p[i].y - p[j].y);
	        if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
	            dis.push(dx + dy);
	            d[dis[dis.length - 1]] = [i, j];
	        }
	    }
	}
	if (dis.length == 0) {
	    var res = [0, 4];
	} else {
	    var res = d[Math.min.apply(Math, dis)];
	}
	var x1 = p[res[0]].x,
	    y1 = p[res[0]].y,
	    x4 = p[res[1]].x,
	    y4 = p[res[1]].y/*,
	    dx = Math.max(Math.abs(x1 - x4) / 2, 10),
	    dy = Math.max(Math.abs(y1 - y4) / 2, 10),
	    x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
	    y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
	    x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
	    y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3)*/;
	
	this.x = x1;
	this.y = y1;
	this.width = x4;
	this.height = y4;
	ctx.beginPath();
	ctx.strokeStyle = this.style[jvConstants.STYLE_STROKECOLOR];
	ctx.lineWidth = this.style[jvConstants.STYLE_STROKEWIDTH];
	ctx.moveTo(x1, y1);
	ctx.lineTo(x4, y4);
	ctx.closePath();
    ctx.stroke();
    
	this.shape = [];
	var shapes = this.canvas.getElementsByTagName("shape");
	this.shape.push(shapes[shapes.length - 1]);
};

$.jvChart = $.jvChart || {};
$.extend($.jvChart,{
	createElement : function(tag, attribs, styles, parent, nopad) {
		var el = document.createElement(tag);
		if (attribs) $(el).attr(attribs);
		if (nopad) $(el).css({padding: 0, border: 'none', margin: 0});
		if (styles) $(el).css(styles);
		if (parent) $(parent).append(el);	
		return el;
	},
	createCanvas : function(div){
		var cvs = $.jvChart.createElement('canvas', {
			id: div.id + '-canvas',
			width: $(div).width(),
			height: $(div).height()
		}, {position: 'absolute'}, div);

		if ($.browser.msie) {
			G_vmlCanvasManager.initElement(cvs);
			cvs = document.getElementById(cvs.id);
		}

		return cvs;
	},
	createSelect : function(div){
		var sd = $.jvChart.createElement('div', {
			id: div.id + '-select',
			left : 0,
			top : 0,
			width: 1,
			height: 1
		}, {position: 'absolute'}, div);		
		return sd;
	},
	getElementID : function(){
		return jvConstants.ELEMENT_ID_PREFIX + jvConstants.ELEMENT_ID_COUNT ++;
	},
	dragMove: function(div, e) {
		if(div.selectedElement) {
			var element = div.selectedElement;
			var x = e.clientX - element.startX;
			var y = e.clientY - element.startY;
			element.x = element.state.x + x;
			element.y = element.state.y + y;
			element.state.changed = true;
			element.move(e);
		}
	},
	bottomResize : function(div, e) {
		if(div.selectedElement) {
			var element = div.selectedElement;
			var y = e.clientY - element.startY;
			element.height = element.state.height + y;
			element.state.changed = true;
			element.move(e);
		}
	},
	topResize : function(div, e) {
		if(div.selectedElement) {
			var element = div.selectedElement;
			var y = e.clientY - element.startY;
			element.y = element.state.y + y;
			element.height = element.state.height - y;
			element.state.changed = true;
			element.move(e);
		}
	},
	reDrawConnections : function (paper){
		paper.edgePaper.ctx.clearRect(0, 0, paper.width, paper.height);
		$(paper.edgePaper.edges).each(function(i){
			$.jvChart.drawConnection(paper.edgePaper, document.getElementById(paper.edgePaper.edges[i][0]), document.getElementById(paper.edgePaper.edges[i][1]), 'rgb(0,0,0)', 2);
		});
	},
	reDrawElements : function (paper){
		$('.ui-draggable', $(paper.canvas)).remove();
		$(paper.elements).each(function(i){
			var e = paper.elements[i];
			if (e.type == 'ellipse'){
				$.jvChart.drawEllipse(paper, e.id, e.x, e.y, e.rx, e.ry, e.color, e.width);
			}else if(e.type == 'rectangle'){
				$.jvChart.drawRect(paper, e.id, e.x, e.y, e.w, e.h, e.r, e.color, e.width);
			}
		});
	}

});
(function($) {
$.fn.jvChart = function() {

	$.extend($.jvChart,{getCvsId : function(){ return getCvsId();}});
	$.extend($.jvChart,{getStylesheet : function(){ return new jvStylesheet();}});
		
	return this.each( function() {
		this.elements = [];
		this.canvas = $.jvChart.createCanvas(this);
		this.selectedElement = false;
		//createImageMap(this);
		$(this).css({overflow:'hidden', position:'relative'});
		$(this).mousemove(function (e) {
			var element = this.selectedElement;
			if(element && element.state ){
				var action = element.state.action;
				if (action == jvConstants.ACTION_MOVE){
					$.jvChart.dragMove(this, e);
				}else if (action == jvConstants.END_POINT_MIDDLEBOTTOM){
					$.jvChart.bottomResize(this, e);
				}else if (action == jvConstants.END_POINT_MIDDLETOP){
					$.jvChart.topResize(this, e);
				}
			}
			return false;
		}).mouseup(function (e) {
			var element = this.selectedElement;
			if (element){
				if (element.state && element.state.changed){
					element.reDraw();
				}else{
					element.removeFrame();
					this.selectedElement = false;
					document.onselectstart=new Function ("return true");
				}
				
				return false;
			}
			return true;
		});
		var $d = this;

	});
	
};
	
$.fn.extend({
	circle : function (x, y, r, color, width, fill, shadow, image) {
		return $.jvChart.drawCircle($(this).attr('paper'), x || 0, y || 0, r || 0, color, width, fill, shadow, image);
	},
	insertEllipse : function (x, y, rx, ry) {
		var element = new jvEllipseElement($(this).attr('canvas'), x, y, rx, ry);

		$(this).attr('elements').push(element);
		return element;
	},
	insertRectangle : function (x, y, w, h, r) {
		var element = new jvRectangleElement($(this).attr('canvas'), x, y, w, h, r);

		$(this).attr('elements').push(element);
		return element;
    },
    insertEdge : function(source, target){
    	var element = new jvEdgeElement($(this).attr('canvas'), source, target);
    	source.edges.push(element);
    	target.edges.push(element);
    	//$(this).attr('elements').push(element);
    	return element;
    },
    reDrawCanvas : function(){
    	var elements = $(this).attr('elements');
    	$(elements).each( function(i) {
    		this.reDraw();
    		this.unselect();
    	});
    }
});
})(jQuery);

 

 

    调用的代码如下：

$(document).ready(function(){
	$("#container").jvChart(300, 200);
	var v1 = $("#container").insertEllipse(10, 120, 80, 40);
	var v2 = $("#container").insertRectangle(100, 20, 80, 40, 10);
	var v4 = $("#container").insertEllipse(200, 100, 50, 50);
	
	var v3 = $("#container").insertRectangle(190, 180, 60, 40, 2);

	 
	
	$("#container").insertEdge(v1, v2);
	$("#container").insertEdge(v2, v3);
	$("#container").insertEdge(v2, v4);/**/


});