| リビジョン | abea5e44097c31c8cc5b1b5e64c6086a862c6ca3 (tree) |
|---|---|
| 日時 | 2014-04-16 02:03:03 |
| 作者 | hikarupsp <hikarupsp@user...> |
| コミッター | hikarupsp |
ノード識別子の変更ができるようになった。
また、表示を一時停止することができるようになった。
mgcanvas/index.html (diff)
mgcanvas/mgcanvas.js (diff)| @@ -137,11 +137,14 @@ onload = function() { | ||
| 137 | 137 | <canvas id="mainCanvas" width="1024" height="768" style="border:1px solid #000000;"></canvas> |
| 138 | 138 | <br /> |
| 139 | 139 | <button onclick="mgmain.bringToCenter();">Center</button> |
| 140 | +<button onclick="mgmain.isFrozen = !mgmain.isFrozen;">Freeze</button> | |
| 140 | 141 | <button onclick="mgmain.zoomIn();">+</button> |
| 141 | 142 | <button onclick="mgmain.zoomOut();">-</button> |
| 142 | 143 | <button onclick="mgmain.moveViewRelative(0, -10);">↑</button> |
| 143 | 144 | <button onclick="mgmain.moveViewRelative(0, 10);">↓</button> |
| 144 | 145 | <button onclick="mgmain.moveViewRelative(-10, 0);">←</button> |
| 145 | 146 | <button onclick="mgmain.moveViewRelative(10, 0);">→</button> |
| 147 | +<input id="identBox" type="text"> | |
| 148 | +<button onclick="mgmain.setIdentifierForSelectedNode(getElementById('identBox').value);">set</button> | |
| 146 | 149 | </body> |
| 147 | 150 | </html> |
| \ No newline at end of file |
| @@ -10,8 +10,10 @@ function MGCanvas(canvasDOMObj){ | ||
| 10 | 10 | this.tickPerSecond = 30; |
| 11 | 11 | this.tickCount = 0; |
| 12 | 12 | this.tickTimer = window.setInterval(function(){ that.tick(); }, 1000 / this.tickPerSecond); |
| 13 | + this.isFrozen = false; | |
| 13 | 14 | this.nodeList = new Array(); |
| 14 | 15 | this.edgeList = new Array(); |
| 16 | + this.selectedEdge = null; | |
| 15 | 17 | |
| 16 | 18 | var that = this; |
| 17 | 19 | window.addEventListener('keydown', function(event){ |
| @@ -51,11 +53,9 @@ function MGCanvas(canvasDOMObj){ | ||
| 51 | 53 | that.lastMousePosition = that.getMousePositionOnElement(e); |
| 52 | 54 | that.mouseDownPosition = that.lastMousePosition; |
| 53 | 55 | var p = that.convertPointToGraphLayerFromCanvasLayerP(that.lastMousePosition); |
| 54 | - console.log(p.x + "," + p.y); | |
| 56 | + //console.log(p.x + "," + p.y); | |
| 55 | 57 | var node = that.getNodeAtPointP(p); |
| 56 | - if(node){ | |
| 57 | - node.isSelected = true; | |
| 58 | - } | |
| 58 | + that.selectNode(node); | |
| 59 | 59 | that.isMouseDown = true; |
| 60 | 60 | }; |
| 61 | 61 | this.canvas.onmouseup = function (e){ |
| @@ -147,33 +147,35 @@ MGCanvas.prototype = { | ||
| 147 | 147 | ); |
| 148 | 148 | } |
| 149 | 149 | |
| 150 | - // | |
| 151 | - // Check | |
| 152 | - // | |
| 153 | - | |
| 154 | - p = this.nodeList; | |
| 155 | - for(var i = 0, iLen = p.length; i < iLen; i++){ | |
| 156 | - nTemp = this.getVectorLength(p[i].vector); | |
| 157 | - if(nMax < nTemp){ | |
| 158 | - n = p[i]; | |
| 159 | - nMax = nTemp; | |
| 150 | + if(!this.isFrozen){ | |
| 151 | + // | |
| 152 | + // Check | |
| 153 | + // | |
| 154 | + | |
| 155 | + p = this.nodeList; | |
| 156 | + for(var i = 0, iLen = p.length; i < iLen; i++){ | |
| 157 | + nTemp = this.getVectorLength(p[i].vector); | |
| 158 | + if(nMax < nTemp){ | |
| 159 | + n = p[i]; | |
| 160 | + nMax = nTemp; | |
| 161 | + } | |
| 162 | + } | |
| 163 | + if(n){ | |
| 164 | + n.ignoreEdgeRepulsion = 10; | |
| 165 | + } | |
| 166 | + | |
| 167 | + | |
| 168 | + // | |
| 169 | + // Move | |
| 170 | + // | |
| 171 | + p = this.nodeList; | |
| 172 | + for(var i = 0, iLen = p.length; i < iLen; i++){ | |
| 173 | + this.nodeList[i].tick(); | |
| 174 | + } | |
| 175 | + p = this.edgeList; | |
| 176 | + for(var i = 0, iLen = p.length; i < iLen; i++){ | |
| 177 | + this.edgeList[i].tick(); | |
| 160 | 178 | } |
| 161 | - } | |
| 162 | - if(n){ | |
| 163 | - n.ignoreEdgeRepulsion = 10; | |
| 164 | - } | |
| 165 | - | |
| 166 | - | |
| 167 | - // | |
| 168 | - // Move | |
| 169 | - // | |
| 170 | - p = this.nodeList; | |
| 171 | - for(var i = 0, iLen = p.length; i < iLen; i++){ | |
| 172 | - this.nodeList[i].tick(); | |
| 173 | - } | |
| 174 | - p = this.edgeList; | |
| 175 | - for(var i = 0, iLen = p.length; i < iLen; i++){ | |
| 176 | - this.edgeList[i].tick(); | |
| 177 | 179 | } |
| 178 | 180 | |
| 179 | 181 | // |
| @@ -366,7 +368,21 @@ MGCanvas.prototype = { | ||
| 366 | 368 | } |
| 367 | 369 | } |
| 368 | 370 | return null; |
| 369 | - } | |
| 371 | + }, | |
| 372 | + selectNode: function(node){ | |
| 373 | + if(this.selectedNode){ | |
| 374 | + this.selectedNode.isSelected = false; | |
| 375 | + } | |
| 376 | + if(node){ | |
| 377 | + node.isSelected = true; | |
| 378 | + } | |
| 379 | + this.selectedNode = node; | |
| 380 | + }, | |
| 381 | + setIdentifierForSelectedNode: function(str){ | |
| 382 | + if(this.selectedNode){ | |
| 383 | + this.selectedNode.identifier = str; | |
| 384 | + } | |
| 385 | + }, | |
| 370 | 386 | } |
| 371 | 387 | |
| 372 | 388 | function MGNode(env, identifier){ |
| @@ -380,6 +396,7 @@ function MGNode(env, identifier){ | ||
| 380 | 396 | this.repulsionLengthNode = 90; |
| 381 | 397 | this.repulsionLengthEdge = 90; |
| 382 | 398 | this.ignoreEdgeRepulsion = 0; |
| 399 | + // | |
| 383 | 400 | this.strokeStyle = "rgba(0, 0, 0, 1)"; |
| 384 | 401 | this.isSelected = false; |
| 385 | 402 | } |
| @@ -455,9 +472,17 @@ function MGEdge(env, identifier, node0, node1){ | ||
| 455 | 472 | this.node0 = node0; |
| 456 | 473 | this.node1 = node1; |
| 457 | 474 | this.freeLength = 250; |
| 475 | + // | |
| 476 | + this.strokeStyle = "rgba(0, 0, 0, 1)"; | |
| 477 | + this.isSelected = false; | |
| 458 | 478 | } |
| 459 | 479 | MGEdge.prototype = { |
| 460 | 480 | draw: function(){ |
| 481 | + if(this.isSelected){ | |
| 482 | + this.env.context.strokeStyle = "rgba(255, 0, 0, 1)"; | |
| 483 | + } else{ | |
| 484 | + this.env.context.strokeStyle = this.strokeStyle; | |
| 485 | + } | |
| 461 | 486 | if(this.node0 && this.node1){ |
| 462 | 487 | this.env.drawLineP(this.node0.position, this.node1.position); |
| 463 | 488 | } |
CHNOSProject
Fork