From: hikarupsp <hikarupsp@users.sourceforge.jp>
Date: Thu, 17 Apr 2014 14:23:08 +0000 (+0900)
Subject: エッジの描画を曲線に変更。
X-Git-Url: http://git.osdn.jp/view?p=chnosproject%2FAI004.git;a=commitdiff_plain;h=8986bc8e488f19cb5ec5c2bf18bcdc572d667634

エッジの描画を曲線に変更。
エッジにハンドルポイントを追加。
---

diff --git a/mgcanvas/index.html b/mgcanvas/index.html
index cec60f6..8aa5545 100755
--- a/mgcanvas/index.html
+++ b/mgcanvas/index.html
@@ -23,7 +23,7 @@ onload = function() {
 	var c = document.getElementById("mainCanvas");
 	mgmain = new MGCanvas(c);
 	
-	/*
+	
 	mgmain.setGraph([[
 		"A","B","C","D","E","F",
 		],[
@@ -35,7 +35,7 @@ onload = function() {
 		["A", "E"],
 		["A", "B"],
 	]]);
-	*/
+	
 	/*
 	mgmain.setGraph([[
 		"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P",
@@ -78,14 +78,14 @@ onload = function() {
 		["A", "P"],
 	]]);
 	*/
-	
+	/*
 	//Petersen Graph
 	mgmain.setGraph([[
 		"A","B","C","D","E","F","G","H","I","J",
 		],[
-		["A", "B"],
-		["B", "C"],
-		["C", "D"],
+		["A", "B", "AB"],
+		["B", "C", "BC"],
+		["C", "D", "CD"],
 		["D", "E"],
 		["E", "A"],
 		//
@@ -101,7 +101,7 @@ onload = function() {
 		["F", "I"],
 		["G", "J"],
 	]]);
-	
+	*/
 	/*
 	mgmain.setGraph([[
 		"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O",
diff --git a/mgcanvas/mgcanvas.js b/mgcanvas/mgcanvas.js
index 9f4fc3a..72fa1ea 100755
--- a/mgcanvas/mgcanvas.js
+++ b/mgcanvas/mgcanvas.js
@@ -13,6 +13,7 @@ function MGCanvas(canvasDOMObj){
 	this.isFrozen = false;
 	this.nodeList = new Array();
 	this.edgeList = new Array();
+	this.selectedNode = null;
 	this.selectedEdge = null;
 	
 	var that = this;
@@ -56,6 +57,8 @@ function MGCanvas(canvasDOMObj){
 		//console.log(p.x + "," + p.y);
 		var node = that.getNodeAtPointP(p);
 		that.selectNode(node);
+		var edge = that.getEdgeAtPointP(p);
+		that.selectEdge(edge);
 		that.isMouseDown = true;
 	};
 	this.canvas.onmouseup = function (e){
@@ -369,6 +372,17 @@ MGCanvas.prototype = {
 		}
 		return null;
 	},
+	getEdgeAtPointP: function(p){
+		var r = new Rectangle(p.x - 10, p.y - 10, 20, 20);
+		
+		var el = this.edgeList;
+		for(var i = 0, iLen = el.length; i < iLen; i++){
+			if(r.isIncludePointP(el[i].centerPoint)){
+				return el[i];
+			}
+		}
+		return null;
+	},
 	selectNode: function(node){
 		if(this.selectedNode){
 			this.selectedNode.isSelected = false;
@@ -378,6 +392,15 @@ MGCanvas.prototype = {
 		}
 		this.selectedNode = node;
 	},
+	selectEdge: function(edge){
+		if(this.selectedEdge){
+			this.selectedEdge.isSelected = false;
+		}
+		if(edge){
+			edge.isSelected = true;
+		}
+		this.selectedEdge = edge;
+	},
 	setIdentifierForSelectedNode: function(str){
 		if(this.selectedNode){
 			this.selectedNode.identifier = str;
@@ -408,7 +431,9 @@ MGNode.prototype = {
 			this.env.context.strokeStyle = this.strokeStyle;
 		}
 		this.env.drawCircle(this.position.x, this.position.y, this.size);
-		this.env.drawText(this.identifier.toString(), this.position.x + 10, this.position.y + 10);
+		if(this.identifier){
+			this.env.drawText(this.identifier.toString(), this.position.x + 10, this.position.y + 10);
+		}
 	},
 	tick: function(){
 		var e;
@@ -475,6 +500,8 @@ function MGEdge(env, identifier, node0, node1){
 	//
 	this.strokeStyle = "rgba(0, 0, 0, 1)";
 	this.isSelected = false;
+	//
+	this.centerPoint = new Point2D(0, 0);
 }
 MGEdge.prototype = {
 	draw: function(){
@@ -484,7 +511,11 @@ MGEdge.prototype = {
 			this.env.context.strokeStyle = this.strokeStyle;
 		}
 		if(this.node0 && this.node1){
-			this.env.drawLineP(this.node0.position, this.node1.position);
+			this.drawCurvedLineP(this.node0.position, this.node1.position);
+			this.env.strokeRect(this.centerPoint.x - 8, this.centerPoint.y - 8, 16, 16);
+			if(this.identifier){
+				this.env.drawText(this.identifier.toString(), this.centerPoint.x, this.centerPoint.y);
+			}
 		}
 	},
 	tick: function(){
@@ -499,6 +530,18 @@ MGEdge.prototype = {
 			this.node1.vector.x -= e.x;
 			this.node1.vector.y -= e.y;
 		}
+		this.centerPoint = new Point2D((this.node0.position.x + this.node1.position.x) / 2, (this.node0.position.y + this.node1.position.y) / 2);
+	},
+	drawCurvedLineP: function(p, q){
+		var that = this;
+		var d = function(x){ return that.env.drawCoordinatesInInteger(x); };
+		var v = this.env.getUnitVectorP(p, q);
+		var w = new Point2D(-(v.y * 50), v.x * 50);
+		this.env.context.beginPath();
+		this.env.context.moveTo(d(p.x), d(p.y));
+		this.env.context.bezierCurveTo(d(this.centerPoint.x + w.x), d(this.centerPoint.y + w.y), d(this.centerPoint.x - w.x), d(this.centerPoint.y - w.y), d(q.x), d(q.y));
+		//this.env.context.closePath();
+		this.env.context.stroke();
 	},
 }