API Docs for:
Show:

File: view\NodeView.js

  1. /*
  2.  * BGPlay.js #9660
  3.  * A web-based service for the visualization of the Internet routing
  4.  *
  5.  * Copyright (c) 2012 Roma Tre University and RIPE NCC
  6.  *
  7.  * See the file LICENSE.txt for copying permission.
  8.  */
  9.  
  10. /**
  11.  * @class NodeView
  12.  * @module modules
  13.  */
  14. var NodeView=Backbone.View.extend({
  15.  
  16.     /**
  17.      * The initialization method of this object.
  18.      * @method initialize
  19.      * @param {Map} A map of parameters
  20.      */
  21.     initialize:function(){
  22.         this.environment=this.options.environment;
  23.         this.bgplay=this.environment.bgplay;
  24.         this.fileRoot=this.environment.fileRoot;
  25.         this.eventAggregator=this.environment.eventAggregator;
  26.  
  27.         this.model=this.options.model;
  28.         this.id=this.model.id;
  29.         this.model.on('change',this.render,this);
  30.         this.model.view=this;
  31.         this.paper=this.options.paper;
  32.         this.paperOriginalWidth=this.paper.width; //Used by Mustache.js
  33.         this.paperOriginalHeight=this.paper.height; //Used by Mustache.js
  34.         this.graphView=this.options.graphView;
  35.         this.visible=this.options.visible;
  36.         this.x=Math.floor(Math.random()*100);
  37.         this.y=Math.floor(Math.random()*100);
  38.         this.oldX=this.x;
  39.         this.oldY=this.y;
  40.         this.selected=false;
  41.         this.neighbors=[];
  42.         this.nodeWidth=this.environment.config.graph.nodeWidth;
  43.         this.nodeHeight=this.environment.config.graph.nodeHeight;
  44.         this.render();
  45.  
  46.         this.eventAggregator.on("destroyAll", function(){
  47.             this.destroyMe();
  48.         },this);
  49.  
  50.         this.eventAggregator.on("updateNodesPosition",function(){
  51.             this.updatePosition();
  52.         },this);
  53.     },
  54.  
  55.     /**
  56.      * This method is used to update the position of the SVG representation of the node.
  57.      * The new position will be (this.x,this.y) of this NodeView.
  58.      * @method updatePosition
  59.      */
  60.     updatePosition:function(){
  61.         this.view.translate(this.x-this.oldX, this.y-this.oldY,this);
  62.         this.oldX = this.x;
  63.         this.oldY = this.y;
  64.         this.eventAggregator.trigger("nodeMoved",this.model);
  65.     },
  66.  
  67.     /**
  68.      * This method is used to translate the position of the SVG representation of the node.
  69.      * The current position will be translated of (x,y) passed as parameters.
  70.      * @method translate
  71.      * @param {Float} The x position
  72.      * @param {Float} The y position
  73.      */
  74.     translate:function(x,y,$this){
  75.         if (!$this)
  76.             $this=this;
  77.  
  78.         $this.view.translate(x,y);
  79.         $this.x+=x;
  80.         $this.y+=y;
  81.         $this.eventAggregator.trigger("nodeMoved",$this.model);
  82.     },
  83.  
  84.     /**
  85.      * This method draws this module (eg. inject the DOM and elements).
  86.      * @method render
  87.      */
  88.     render:function(){
  89.         var radiusForRoundedCorners=10;
  90.  
  91.         var svgNode=this.paper.rect(this.x-this.nodeWidth/2,this.y-this.nodeHeight/2, this.nodeWidth,this.nodeHeight,radiusForRoundedCorners)
  92.             .attr({fill: this.getFillColor(), stroke:this.getStrokeColor(),"text-anchor": "middle"});
  93.  
  94.         var svgText=this.paper.text(this.x,this.y, this.getLabel())
  95.             .attr({'fill':this.getTextFillColor(),'font-family':'Arial','font-size':this.environment.config.graph.nodeTextFontSize,'font-weight':'bold'});
  96.  
  97.         var group = this.paper.set();
  98.         group.push(svgNode);
  99.         group.push(svgText);
  100.         svgNode["set"]=group;
  101.         svgText["set"]=group;
  102.  
  103.         svgNode.parentGroup=group;
  104.         svgText.parentGroup=group;
  105.  
  106.         this.paper.graphSet.push(svgNode);
  107.         this.paper.graphSet.push(svgText);
  108.  
  109.         if (this.visible==false)
  110.             group.hide();
  111.         else
  112.             group.show();
  113.  
  114.         this.el=group.node;
  115.         this.view=group;
  116.  
  117.         $(svgNode.node).css("cursor","pointer");
  118.         $(svgText.node).css("cursor","pointer");
  119.         this.loadSvgEvents();
  120.         return this;
  121.     },
  122.     selectedStyle:function(){
  123.         this.view[0].attr({
  124.             opacity: 0.75,
  125.             fill:"#E3F8FA"
  126.         });
  127.     },
  128.     unSelectedStyle:function(){
  129.         this.view[0].attr({
  130.             opacity: 1,
  131.             fill:this.getFillColor()
  132.         });
  133.     },
  134.  
  135.     /**
  136.      * This method manages the events for the SVG representation.
  137.      * @method loadSvgEvents
  138.      */
  139.     loadSvgEvents:function(){
  140.         if (!isMobileBrowser()){
  141.             var $this=this;
  142.             $this.clicks=0;
  143.             this.view.mouseover(function(){
  144.                 $this.eventAggregator.trigger("selectedNode", $this.model);
  145.             });
  146.             this.view.mouseout(function(){
  147.                 $this.eventAggregator.trigger("infoPanelReleased", true);
  148.             });
  149.  
  150.             function removeClicks(){
  151.                 $this.clicks=0;
  152.             }
  153.  
  154.             $(this.paper.node).dblclick(function(event){
  155.                 eventStopPropagation(event);
  156.                 $this.unSelectedStyle();
  157.                 $this.selected=false;
  158.             });
  159.  
  160.             this.view.mousedown(function(event) {
  161.                 eventStopPropagation(event);
  162.                 $this.clicks++;
  163.                 setTimeout(removeClicks,$this.environment.config.doubleClickTimeInterval);
  164.                 $this.view.toFront();
  165.                 $this.ox = event.screenX;
  166.                 $this.oy = event.screenY;
  167.                 $this.selectedStyle();
  168.  
  169.                 if($this.clicks==2){
  170.                     event.preventDefault();
  171.                     if (!$this.graphView.selectedNodes.contains($this)){
  172.                         $this.graphView.selectedNodes.push($this);
  173.                         $this.selected=true;
  174.                         $this.selectedStyle();
  175.                     }else{
  176.                         $this.graphView.selectedNodes = $this.graphView.selectedNodes.remove($this);
  177.                         $this.selected=false;
  178.                         $this.unSelectedStyle();
  179.                     }
  180.                     $this.dragging = false;
  181.                 }else{
  182.                     $this.dragging = true;
  183.                 }
  184.             });
  185.  
  186.             this.paper.node.mouseleave(function(event){
  187.                 eventStopPropagation(event);
  188.                 $this.dragging = false;
  189.             });
  190.  
  191.             this.paper.node.mousemove(function(event) {
  192.                 if ($this.dragging==true) {
  193.                     if ($this.selected)$this.graphView.draggingNodes = true;
  194.                     var x = (event.screenX - $this.ox) * $this.paper["scale"];
  195.                     var y = (event.screenY - $this.oy) * $this.paper["scale"];
  196.                     $this.translate(x,y,$this);
  197.                     $this.ox = event.screenX;
  198.                     $this.oy = event.screenY;
  199.                     if ($this.graphView.draggingNodes==true && $this.selected==true){
  200.                         $this.graphView.selectedNodes.forEach(function(node){
  201.                             if (node.id != $this.id){
  202.                                 node.translate(x,y,node);
  203.                             }
  204.                         });
  205.                     }
  206.                 }
  207.             });
  208.  
  209.             this.paper.node.mouseup(function(event) {
  210.                 eventStopPropagation(event);
  211.                 if($this.selected==false){
  212.                     $this.unSelectedStyle();
  213.                 }
  214.                 $this.dragging = false;
  215.                 $this.graphView.draggingNodes=false;
  216.             });
  217.         }
  218.     },
  219.  
  220.     /**
  221.      * This method returns the background colour of the node.
  222.      * @method getFillColor
  223.      * @return {String} An hexadecimal colour
  224.      */
  225.     getFillColor:function(){
  226.         var color;
  227.         switch(this.bgplay.get("type")){
  228.             default:
  229.                 if (this.model.get("targets").length>0){
  230.                     color=this.environment.config.graph.targetColor;
  231.                 }else if (this.model.get("sources").length>0){
  232.                     color=this.environment.config.graph.sourceColor;
  233.                 }else{
  234.                     color=this.environment.config.graph.nodeColor;
  235.                 }
  236.                 break;
  237.         }
  238.         return color;
  239.     },
  240.  
  241.     /**
  242.      * This method returns the border colour of the node.
  243.      * @method getStrokeColor
  244.      * @return {String} An hexadecimal colour
  245.      */
  246.     getStrokeColor:function(){
  247.         var color;
  248.         switch(this.bgplay.get("type")){
  249.             default:
  250.                 if (this.model.get("targets").length>0){
  251.                     color=this.environment.config.graph.targetBorderColor;
  252.                 }else if (this.model.get("sources").length>0){
  253.                     color=this.environment.config.graph.sourceBorderColor;
  254.                 }else{
  255.                     color=this.environment.config.graph.nodeBorderColor;
  256.                 }
  257.                 break;
  258.         }
  259.         return color;
  260.     },
  261.  
  262.     /**
  263.      * This method returns the text colour of the node.
  264.      * @method getTextFillColor
  265.      * @return {String} An hexadecimal colour
  266.      */
  267.     getTextFillColor:function(){
  268.         var color;
  269.         switch(this.bgplay.get("type")){
  270.             default:
  271.                 if (this.model.get("sources").length>0){
  272.                     color=this.environment.config.graph.sourceTextColor;
  273.                 }else if (this.model.get("targets").length>0){
  274.                     color=this.environment.config.graph.targetTextColor;
  275.                 }else{
  276.                     color=this.environment.config.graph.nodeTextColor;
  277.                 }
  278.                 break;
  279.         }
  280.         return color;
  281.     },
  282.  
  283.     /**
  284.      * This method returns the label of the node.
  285.      * @method getLabel
  286.      * @return {String} The label of the node
  287.      */
  288.     getLabel:function(){
  289.         return this.model.toString();
  290.     }
  291. });
  292.