From: hikarupsp <hikarupsp@users.sourceforge.jp>
Date: Sun, 13 Apr 2014 17:59:03 +0000 (+0900)
Subject: MGCanvasにマウス選択・移動機能のテストを追加。
X-Git-Url: http://git.osdn.jp/view?p=chnosproject%2FAI004.git;a=commitdiff_plain;h=4df0e46c9511629d4d3a959d0b22fd70ddefc39f

MGCanvasにマウス選択・移動機能のテストを追加。
---

diff --git a/mgcanvas/index.html b/mgcanvas/index.html
index 2977424..06a4e65 100755
--- a/mgcanvas/index.html
+++ b/mgcanvas/index.html
@@ -78,7 +78,7 @@ onload = function() {
 		["A", "P"],
 	]]);
 	*/
-	/*
+	
 	//Petersen Graph
 	mgmain.setGraph([[
 		"A","B","C","D","E","F","G","H","I","J",
@@ -101,8 +101,8 @@ onload = function() {
 		["F", "I"],
 		["G", "J"],
 	]]);
-	*/
 	
+	/*
 	mgmain.setGraph([[
 		"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O",
 		],[
@@ -127,7 +127,7 @@ onload = function() {
 		//
 		["M", "O"],
 	]]);
-	
+	*/
 	
 }
 </script>
diff --git a/mgcanvas/mgcanvas.js b/mgcanvas/mgcanvas.js
index 53dfa85..4e43a43 100755
--- a/mgcanvas/mgcanvas.js
+++ b/mgcanvas/mgcanvas.js
@@ -12,6 +12,7 @@ function MGCanvas(canvasDOMObj){
 	this.tickTimer = window.setInterval(function(){ that.tick(); }, 1000 / this.tickPerSecond);
 	this.nodeList = new Array();
 	this.edgeList = new Array();
+	
 	var that = this;
 	window.addEventListener('keydown', function(event){
 		switch(event.keyCode){
@@ -29,6 +30,37 @@ function MGCanvas(canvasDOMObj){
 				break;
 		}
 	}, true);
+	
+	this.isMouseDown = false;
+	this.mouseDownPosition = new Point2D(0, 0);
+	this.lastMousePosition = new Point2D(0, 0);
+	this.canvas.onmousemove = function (e){
+		if(that.isMouseDown){
+			if(!e){
+				//for IE
+				e = window.event;
+			}
+			that.lastMousePosition = that.getMousePositionOnElement(e);
+		}
+	};
+	this.canvas.onmousedown = function (e){
+		if(!e){
+			//for IE
+			e = window.event;
+		}
+		that.lastMousePosition = that.getMousePositionOnElement(e);
+		that.mouseDownPosition = that.lastMousePosition;
+		var p = that.convertPointToGraphLayerFromCanvasLayerP(that.lastMousePosition);
+		console.log(p.x + "," + p.y);
+		var node = that.getNodeAtPointP(p);
+		if(node){
+			node.isSelected = true;
+		}
+		that.isMouseDown = true;
+	};
+	this.canvas.onmouseup = function (e){
+		that.isMouseDown = false;
+	};
 }
 MGCanvas.prototype = {
 	setGraph: function(gArray){
@@ -106,6 +138,16 @@ MGCanvas.prototype = {
 		this.tickCount++;
 		
 		//
+		// View moving with mouse
+		//
+		if(this.isMouseDown){
+			this.moveViewRelative(
+				(this.mouseDownPosition.x - this.lastMousePosition.x) * 4 / this.tickPerSecond,
+				(this.mouseDownPosition.y - this.lastMousePosition.y) * 4 / this.tickPerSecond
+			);
+		}
+		
+		//
 		// Check
 		//
 		
@@ -299,6 +341,32 @@ MGCanvas.prototype = {
 		this.currentScale = 1;
 		this.positionOffset = new Point2D(0, 0);
 	},
+	convertPointToGraphLayerFromCanvasLayerP: function(pCanvas){
+		var p = new Point2D(pCanvas.x, pCanvas.y);
+		// Canvasの中心が原点
+		p.x -= this.canvas.width / 2;
+		p.y -= this.canvas.height / 2;
+		// スケール変換
+		p.x /= this.currentScale;
+		p.y /= this.currentScale;
+		
+		// オフセット平行移動
+		p.x -= this.positionOffset.x;
+		p.y -= this.positionOffset.y;
+		
+		return p;
+	},
+	getNodeAtPointP: function(p){
+		var r = new Rectangle(p.x - 10, p.y - 10, 20, 20);
+		
+		var nl = this.nodeList;
+		for(var i = 0, iLen = nl.length; i < iLen; i++){
+			if(r.isIncludePointP(nl[i].position)){
+				return nl[i];
+			}
+		}
+		return null;
+	}
 }
 
 function MGNode(env, identifier){
@@ -312,9 +380,16 @@ function MGNode(env, identifier){
 	this.repulsionLengthNode = 90;
 	this.repulsionLengthEdge = 90;
 	this.ignoreEdgeRepulsion = 0;
+	this.strokeStyle = "rgba(0, 0, 0, 1)";
+	this.isSelected = false;
 }
 MGNode.prototype = {
 	draw: function(){
+		if(this.isSelected){
+			this.env.context.strokeStyle = "rgba(255, 0, 0, 1)";
+		} else{
+			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);
 	},
@@ -415,6 +490,9 @@ function Rectangle(x, y, width, height){
 	this.size = new Point2D(width,height);
 }
 Rectangle.prototype = {
-	
+	isIncludePointP: function(p){
+		return 	(this.origin.x <= p.x) && (p.x <= this.origin.x + this.size.x) &&
+				(this.origin.y <= p.y) && (p.y <= this.origin.y + this.size.y);
+	},
 }