From 8d5c60367d6a6d9fab7a1c06a5694fc46b47cc83 Mon Sep 17 00:00:00 2001
From: hikarupsp <hikarupsp@users.sourceforge.jp>
Date: Mon, 14 Apr 2014 00:04:09 +0900
Subject: [PATCH] =?utf8?q?MGCanvas=E3=81=AE=E8=A1=A8=E7=A4=BA=E7=94=BB?=
 =?utf8?q?=E9=9D=A2=E7=A7=BB=E5=8B=95=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 mgcanvas/index.html  | 12 ++++++---
 mgcanvas/mgcanvas.js | 72 +++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/mgcanvas/index.html b/mgcanvas/index.html
index 89a4a8c..2977424 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>
@@ -137,5 +137,11 @@ 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.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>
 </body>
 </html>
\ No newline at end of file
diff --git a/mgcanvas/mgcanvas.js b/mgcanvas/mgcanvas.js
index c91093b..53dfa85 100755
--- a/mgcanvas/mgcanvas.js
+++ b/mgcanvas/mgcanvas.js
@@ -9,21 +9,26 @@ function MGCanvas(canvasDOMObj){
 	this.initGraphicContext(canvasDOMObj);
 	this.tickPerSecond = 30;
 	this.tickCount = 0;
-	this.tickTimer = window.setInterval(function(){ that.tick(); }, 1000/this.tickPerSecond);
+	this.tickTimer = window.setInterval(function(){ that.tick(); }, 1000 / this.tickPerSecond);
 	this.nodeList = new Array();
 	this.edgeList = new Array();
-	
 	var that = this;
-	this.canvas.onmousemove = function (e){
-		if(!e){
-			//for IE
-			e = window.event;
+	window.addEventListener('keydown', function(event){
+		switch(event.keyCode){
+			case 37:	//左カーソル
+				that.moveViewRelative(-10, 0);
+				break;
+			case 39:	//右カーソル
+				that.moveViewRelative(10, 0);
+				break;
+			case 38:	//上カーソル
+				that.moveViewRelative(0, -10);
+				break;
+			case 40:	//下カーソル
+				that.moveViewRelative(0, 10);
+				break;
 		}
-		var loc = that.getMousePositionOnElement(e);
-		// 出力テスト
-		//console.log("x:" + loc.x);
-		//console.log("y:" + loc.y);
-	};
+	}, true);
 }
 MGCanvas.prototype = {
 	setGraph: function(gArray){
@@ -42,6 +47,7 @@ MGCanvas.prototype = {
 		}
 	},
 	bringToCenter: function(){
+		// 重心を求めて、それを表示オフセットに設定する
 		var g = new Point2D(0, 0);
 		var p;
 		p = this.nodeList;
@@ -51,11 +57,23 @@ MGCanvas.prototype = {
 		}
 		g.x /= p.length;
 		g.y /= p.length;
-		for(var i = 0, iLen = p.length; i < iLen; i++){
-			p[i].position.x -= g.x;
-			p[i].position.y -= g.y;
-		}
+		
+		this.positionOffset.x = -g.x;
+		this.positionOffset.y = -g.y;
 	},
+	zoomIn: function(){
+		this.context.scale(2, 2);
+		this.currentScale *= 2;
+	},
+	zoomOut: function(){
+		this.context.scale(0.5, 0.5);
+		this.currentScale *= 0.5;
+	},
+	moveViewRelative: function(x, y){
+		this.positionOffset.x += -x;
+		this.positionOffset.y += -y;
+	},
+	/*
 	bringInScreen: function(){
 		//大きく外れていないときには動かさない
 		var g = new Point2D(0, 0);
@@ -71,12 +89,12 @@ MGCanvas.prototype = {
 			g.x > -this.displayRect.origin.x / 2 || 
 			g.y < this.displayRect.origin.y / 2 || 
 			g.y > -this.displayRect.origin.x / 2){
-			for(var i = 0, iLen = p.length; i < iLen; i++){
-				p[i].position.x -= g.x;
-				p[i].position.y -= g.y;
-			}
+			
+			this.positionOffset.x = -g.x;
+			this.positionOffset.y = -g.y;
 		}
 	},
+	*/
 	tick: function(){
 		var p;
 		var t;
@@ -86,10 +104,6 @@ MGCanvas.prototype = {
 		var nTemp;
 		
 		this.tickCount++;
-		//console.log(this.tickCount);
-		if(this.tickCount % 30 == 0){
-			this.bringInScreen();
-		}
 		
 		//
 		// Check
@@ -124,15 +138,25 @@ MGCanvas.prototype = {
 		// Refresh
 		//
 		dr = this.displayRect;
+		
+		this.context.scale(1 / this.currentScale, 1 / this.currentScale);
 		this.context.clearRect(dr.origin.x, dr.origin.y, dr.size.x, dr.size.y);
+		this.context.scale(this.currentScale, this.currentScale);
+		
+		this.context.translate(this.positionOffset.x, this.positionOffset.y);
+		
 		p = this.nodeList;
 		for(var i = 0, iLen = p.length; i < iLen; i++){
 			this.nodeList[i].draw();
 		}
+		
 		p = this.edgeList;
 		for(var i = 0, iLen = p.length; i < iLen; i++){
 			this.edgeList[i].draw();
 		}
+		
+		this.context.translate(-this.positionOffset.x, -this.positionOffset.y);
+		
 	},
 	getMousePositionOnElement: function(e){
 		// http://tmlife.net/programming/javascript/javascript-mouse-pos.html
@@ -272,6 +296,8 @@ MGCanvas.prototype = {
 		var h = this.canvas.height / 2;
 		this.context.translate(w, h);
 		this.displayRect = new Rectangle(-w, -h, this.canvas.width, this.canvas.height);
+		this.currentScale = 1;
+		this.positionOffset = new Point2D(0, 0);
 	},
 }
 
-- 
2.11.0