自動追尾を再実装。

diff --git a/mgcanvas/index.html b/mgcanvas/index.html
index 8aa5545..8ea27ea 100755 (executable)
--- 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",
@@ -137,7 +137,7 @@ 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.isPaused = !mgmain.isPaused;">Freeze</button>
 <button onclick="mgmain.zoomIn();">+</button>
 <button onclick="mgmain.zoomOut();">-</button>
 <button onclick="mgmain.moveViewRelative(0, -10);">↑</button>

diff --git a/mgcanvas/mgcanvas.js b/mgcanvas/mgcanvas.js
index 72fa1ea..74f4038 100755 (executable)
--- a/mgcanvas/mgcanvas.js
+++ b/mgcanvas/mgcanvas.js
@@ -1,7 +1,3 @@
-//文字列をキーとする。
-
-//まず、最も多数のエッジを持つノードを探す。
-//それを起点にして、エッジをたどる。
 
 function MGCanvas(canvasDOMObj){
        var that = this;
@@ -10,7 +6,8 @@ function MGCanvas(canvasDOMObj){
        this.tickPerSecond = 30;
        this.tickCount = 0;
        this.tickTimer = window.setInterval(function(){ that.tick(); }, 1000 / this.tickPerSecond);
-       this.isFrozen = false;
+       this.isPaused = false;
+       this.isEnabledAutomaticTracking = true;
        this.nodeList = new Array();
        this.edgeList = new Array();
        this.selectedNode = null;
@@ -60,6 +57,7 @@ function MGCanvas(canvasDOMObj){
                var edge = that.getEdgeAtPointP(p);
                that.selectEdge(edge);
                that.isMouseDown = true;
+               that.isEnabledAutomaticTracking = false;
        };
        this.canvas.onmouseup = function (e){
                that.isMouseDown = false;
@@ -81,6 +79,12 @@ MGCanvas.prototype = {
                        this.edgeList.push(new MGEdge(this, p[i][2], n(p[i][0]), n(p[i][1])));
                }
        },
+       addNode: function(identifier, uuid){
+               
+       },
+       addEdge: function(identifier, uuid, nodeid){
+               
+       },
        bringToCenter: function(){
                // 重心を求めて、それを表示オフセットに設定する
                var g = new Point2D(0, 0);
@@ -95,6 +99,8 @@ MGCanvas.prototype = {
                
                this.positionOffset.x = -g.x;
                this.positionOffset.y = -g.y;
+               
+               this.isEnabledAutomaticTracking = true;
        },
        zoomIn: function(){
                this.context.scale(2, 2);
@@ -108,10 +114,10 @@ MGCanvas.prototype = {
                this.positionOffset.x += -x;
                this.positionOffset.y += -y;
        },
-       /*
        bringInScreen: function(){
                //大きく外れていないときには動かさない
                var g = new Point2D(0, 0);
+               var f = new Point2D(0, 0);
                var p;
                p = this.nodeList;
                for(var i = 0, iLen = p.length; i < iLen; i++){
@@ -120,16 +126,17 @@ MGCanvas.prototype = {
                }
                g.x /= p.length;
                g.y /= p.length;
+               g.x += this.positionOffset.x;
+               g.y += this.positionOffset.y;
                if(     g.x < this.displayRect.origin.x / 2 || 
                        g.x > -this.displayRect.origin.x / 2 || 
                        g.y < this.displayRect.origin.y / 2 || 
                        g.y > -this.displayRect.origin.x / 2){
                        
-                       this.positionOffset.x = -g.x;
-                       this.positionOffset.y = -g.y;
+                       this.positionOffset.x += -g.x;
+                       this.positionOffset.y += -g.y;
                }
        },
-       */
        tick: function(){
                var p;
                var t;
@@ -141,6 +148,15 @@ MGCanvas.prototype = {
                this.tickCount++;
                
                //
+               // AutomaticTracking
+               //
+               
+               if(this.isEnabledAutomaticTracking && (this.tickCount % 30 == 0)){
+                       this.bringInScreen();
+               }
+
+               
+               //
                // View moving with mouse
                //
                if(this.isMouseDown){
@@ -150,7 +166,7 @@ MGCanvas.prototype = {
                        );
                }
                
-               if(!this.isFrozen){
+               if(!this.isPaused){
                        //
                        // Check
                        //