From 4df0e46c9511629d4d3a959d0b22fd70ddefc39f Mon Sep 17 00:00:00 2001
From: hikarupsp <hikarupsp@users.sourceforge.jp>
Date: Mon, 14 Apr 2014 02:59:03 +0900
Subject: [PATCH] =?utf8?q?MGCanvas=E3=81=AB=E3=83=9E=E3=82=A6=E3=82=B9?=
 =?utf8?q?=E9=81=B8=E6=8A=9E=E3=83=BB=E7=A7=BB=E5=8B=95=E6=A9=9F=E8=83=BD?=
 =?utf8?q?=E3=81=AE=E3=83=86=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
 =?utf8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 mgcanvas/index.html  |  6 ++--
 mgcanvas/mgcanvas.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 82 insertions(+), 4 deletions(-)

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);
+	},
 }
 
-- 
2.11.0