From: hikarupsp <hikarupsp@users.sourceforge.jp>
Date: Tue, 15 Apr 2014 17:03:03 +0000 (+0900)
Subject: ノード識別子の変更ができるようになった。
X-Git-Url: http://git.osdn.jp/view?p=chnosproject%2FAI004.git;a=commitdiff_plain;h=abea5e44097c31c8cc5b1b5e64c6086a862c6ca3

ノード識別子の変更ができるようになった。
また、表示を一時停止することができるようになった。
---

diff --git a/mgcanvas/index.html b/mgcanvas/index.html
index 06a4e65..cec60f6 100755
--- a/mgcanvas/index.html
+++ b/mgcanvas/index.html
@@ -137,11 +137,14 @@ onload = function() {
 <canvas id="mainCanvas" width="1024" height="768" style="border:1px solid #000000;"></canvas>
 <br />
 <button onclick="mgmain.bringToCenter();">Center</button>
+<button onclick="mgmain.isFrozen = !mgmain.isFrozen;">Freeze</button>
 <button onclick="mgmain.zoomIn();">+</button>
 <button onclick="mgmain.zoomOut();">-</button>
 <button onclick="mgmain.moveViewRelative(0, -10);">↑</button>
 <button onclick="mgmain.moveViewRelative(0, 10);">↓</button>
 <button onclick="mgmain.moveViewRelative(-10, 0);">←</button>
 <button onclick="mgmain.moveViewRelative(10, 0);">→</button>
+<input id="identBox" type="text">
+<button onclick="mgmain.setIdentifierForSelectedNode(getElementById('identBox').value);">set</button>
 </body>
 </html>
\ No newline at end of file
diff --git a/mgcanvas/mgcanvas.js b/mgcanvas/mgcanvas.js
index 4e43a43..9f4fc3a 100755
--- a/mgcanvas/mgcanvas.js
+++ b/mgcanvas/mgcanvas.js
@@ -10,8 +10,10 @@ function MGCanvas(canvasDOMObj){
 	this.tickPerSecond = 30;
 	this.tickCount = 0;
 	this.tickTimer = window.setInterval(function(){ that.tick(); }, 1000 / this.tickPerSecond);
+	this.isFrozen = false;
 	this.nodeList = new Array();
 	this.edgeList = new Array();
+	this.selectedEdge = null;
 	
 	var that = this;
 	window.addEventListener('keydown', function(event){
@@ -51,11 +53,9 @@ function MGCanvas(canvasDOMObj){
 		that.lastMousePosition = that.getMousePositionOnElement(e);
 		that.mouseDownPosition = that.lastMousePosition;
 		var p = that.convertPointToGraphLayerFromCanvasLayerP(that.lastMousePosition);
-		console.log(p.x + "," + p.y);
+		//console.log(p.x + "," + p.y);
 		var node = that.getNodeAtPointP(p);
-		if(node){
-			node.isSelected = true;
-		}
+		that.selectNode(node);
 		that.isMouseDown = true;
 	};
 	this.canvas.onmouseup = function (e){
@@ -147,33 +147,35 @@ MGCanvas.prototype = {
 			);
 		}
 		
-		//
-		// Check
-		//
-		
-		p = this.nodeList;
-		for(var i = 0, iLen = p.length; i < iLen; i++){
-			nTemp = this.getVectorLength(p[i].vector);
-			if(nMax < nTemp){
-				n = p[i];
-				nMax = nTemp;
+		if(!this.isFrozen){
+			//
+			// Check
+			//
+			
+			p = this.nodeList;
+			for(var i = 0, iLen = p.length; i < iLen; i++){
+				nTemp = this.getVectorLength(p[i].vector);
+				if(nMax < nTemp){
+					n = p[i];
+					nMax = nTemp;
+				}
+			}
+			if(n){
+				n.ignoreEdgeRepulsion = 10;
+			}
+			
+			
+			//
+			// Move
+			//
+			p = this.nodeList;
+			for(var i = 0, iLen = p.length; i < iLen; i++){
+				this.nodeList[i].tick();
+			}
+			p = this.edgeList;
+			for(var i = 0, iLen = p.length; i < iLen; i++){
+				this.edgeList[i].tick();
 			}
-		}
-		if(n){
-			n.ignoreEdgeRepulsion = 10;
-		}
-		
-		
-		//
-		// Move
-		//
-		p = this.nodeList;
-		for(var i = 0, iLen = p.length; i < iLen; i++){
-			this.nodeList[i].tick();
-		}
-		p = this.edgeList;
-		for(var i = 0, iLen = p.length; i < iLen; i++){
-			this.edgeList[i].tick();
 		}
 		
 		//
@@ -366,7 +368,21 @@ MGCanvas.prototype = {
 			}
 		}
 		return null;
-	}
+	},
+	selectNode: function(node){
+		if(this.selectedNode){
+			this.selectedNode.isSelected = false;
+		}
+		if(node){
+			node.isSelected = true;
+		}
+		this.selectedNode = node;
+	},
+	setIdentifierForSelectedNode: function(str){
+		if(this.selectedNode){
+			this.selectedNode.identifier = str;
+		}
+	},
 }
 
 function MGNode(env, identifier){
@@ -380,6 +396,7 @@ function MGNode(env, identifier){
 	this.repulsionLengthNode = 90;
 	this.repulsionLengthEdge = 90;
 	this.ignoreEdgeRepulsion = 0;
+	//
 	this.strokeStyle = "rgba(0, 0, 0, 1)";
 	this.isSelected = false;
 }
@@ -455,9 +472,17 @@ function MGEdge(env, identifier, node0, node1){
 	this.node0 = node0;
 	this.node1 = node1;
 	this.freeLength = 250;
+	//
+	this.strokeStyle = "rgba(0, 0, 0, 1)";
+	this.isSelected = false;
 }
 MGEdge.prototype = {
 	draw: function(){
+		if(this.isSelected){
+			this.env.context.strokeStyle = "rgba(255, 0, 0, 1)";
+		} else{
+			this.env.context.strokeStyle = this.strokeStyle;
+		}
 		if(this.node0 && this.node1){
 			this.env.drawLineP(this.node0.position, this.node1.position);
 		}