openo-portal/portal-common/src/main/webapp/common/js/openotopo/openotopo.js

   1 /*\r
   2  * Copyright 2016-2017, CMCC Technologies Co., Ltd.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *         http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16 function oTopo() { \r
  17         \r
  18         var topo;\r
  19         \r
  20         /**\r
  21          * <Creat topological graph object>\r
  22          * @param id: The id of DIV which display topological graph.\r
  23          * @param settings: Init parameters .\r
  24          * @see []\r
  25          */\r
  26         this.canvas = function (id, settings)\r
  27         {\r
  28                 var g =\r
  29                 {\r
  30                         nodes : [],// nodes\r
  31                         edges : [] // links\r
  32                 };\r
  33                 \r
  34                 topo =  new sigma(\r
  35                 {\r
  36                         graph : g,\r
  37                         renderer :\r
  38                         {\r
  39                                 // IMPORTANT:\r
  40                                 // This works only with the canvas renderer, so the\r
  41                                 // renderer type set as "canvas" is necessary here.\r
  42                                 container : document.getElementById(id),\r
  43                                 type : 'canvas'\r
  44                         },\r
  45                         settings : settings\r
  46                 });\r
  47                 \r
  48                 CustomShapes.init(topo);\r
  49         };\r
  50         \r
  51         \r
  52         /**\r
  53          * <Refresh topological graph object>\r
  54          * @see []\r
  55          */\r
  56         this.refresh = function()\r
  57         {\r
  58                 topo.refresh();\r
  59         };\r
  60         \r
  61         \r
  62         /**\r
  63          * <Creat node object>\r
  64          * @param id: The id of node.\r
  65          * @see []\r
  66          */\r
  67         this.Node = function(id)\r
  68         {\r
  69                 var pr = this;\r
  70                 this.id = id,\r
  71                 this.label = "",\r
  72                 this.type = "square",/**equilateral,star,square,diamond,circle,cross**/\r
  73                 this.x = 1,\r
  74                 this.y = 1,\r
  75                 this.size = 10,\r
  76                 this.image = {};\r
  77                 this.color = "transparent",\r
  78                 this.borderColor = "#1E90FF",\r
  79                 \r
  80                 this.setName = function(v)\r
  81                 {\r
  82                         pr.label = v;\r
  83                 };\r
  84                 \r
  85                 this.setType = function(v)\r
  86                 {\r
  87                         pr.type = v;\r
  88                 };\r
  89                 \r
  90                 this.setSize = function(v)\r
  91                 {\r
  92                         pr.size = v;\r
  93                 };\r
  94                 \r
  95                 this.setImg = function(url)\r
  96                 {\r
  97                         pr.image =\r
  98                         {\r
  99                                 url : url,\r
 100                                 // scale/clip are ratio values applied on top of 'size'\r
 101                                 scale : 1,\r
 102                                 clip : 0,\r
 103                         };\r
 104                         pr.borderColor = "transparent";\r
 105                         pr.color = "transparent";\r
 106                 };\r
 107                 \r
 108                 this.setImgScale = function(s)\r
 109                 {\r
 110                         pr.image.scale = s;\r
 111                 };\r
 112                 \r
 113                 this.setImgClip = function(c)\r
 114                 {\r
 115                         pr.image.clip = c;\r
 116                 };\r
 117                 \r
 118                 this.setColor = function(v)\r
 119                 {\r
 120                         pr.color = v;\r
 121                 };\r
 122                 \r
 123                 this.setBorderColor = function(v)\r
 124                 {\r
 125                         pr.borderColor = v;\r
 126                 };\r
 127                 \r
 128                 this.setLocation = function(x,y)\r
 129                 {\r
 130                         pr.x = x;\r
 131                         pr.y = y;\r
 132                 };\r
 133                 \r
 134                 this.setProperty = function(k,v)\r
 135                 {\r
 136                         pr[k] = v;\r
 137                 };\r
 138         };\r
 139         \r
 140         /**\r
 141          * <Creat link object>\r
 142          * @param id: The id of link.\r
 143          * @see []\r
 144          */\r
 145         this.Link = function(id)\r
 146         {\r
 147                 var pr = this;\r
 148                 this.id = id,\r
 149                 this.type = "arrow",/*'line','curve','arrow','curvedArrow','dashed','dotted','parallel','tapered'*/\r
 150                 this.source = 1,\r
 151                 this.target = 1,\r
 152                 this.size = Math.random(),\r
 153                 this.color = "#1E90FF",\r
 154                 \r
 155                 this.setType = function(v)\r
 156                 {\r
 157                         pr.type = v;\r
 158                 };\r
 159                 \r
 160                 this.setSize = function(v)\r
 161                 {\r
 162                         pr.size = v;\r
 163                 };\r
 164                 \r
 165                 this.setConnect = function(s,t)\r
 166                 {\r
 167                         pr.source = s;\r
 168                         pr.target = t;\r
 169                 };\r
 170                 \r
 171                 this.setColor = function(v)\r
 172                 {\r
 173                         pr.color = v;\r
 174                 };\r
 175                 \r
 176                 this.setProperty = function(k,v)\r
 177                 {\r
 178                         pr[k] = v;\r
 179                 };\r
 180         };\r
 181         \r
 182         /**\r
 183          * <Add node to the topological graph>\r
 184          * @param v: Node object.\r
 185          * @see []\r
 186          */\r
 187         this.addNode = function(v)\r
 188         {\r
 189                 topo.graph.addNode(v);\r
 190         };\r
 191         \r
 192         /**\r
 193          * <Delete node from the topological graph>\r
 194          * @param id: The id of node.\r
 195          * @see []\r
 196          */\r
 197         this.dropNode = function(id)\r
 198         {\r
 199                 topo.graph.dropNode(id);\r
 200         };\r
 201         \r
 202         \r
 203         /**\r
 204          * <Add link to the topological graph>\r
 205          * @param v: Link object.\r
 206          * @see []\r
 207          */\r
 208         this.addLink = function(v)\r
 209         {\r
 210                 topo.graph.addEdge(v);\r
 211         };\r
 212         \r
 213         /**\r
 214          * <Delete link from the topological graph>\r
 215          * @param id: The id of link.\r
 216          * @see []\r
 217          */\r
 218         this.dropLink = function(id)\r
 219         {\r
 220                 topo.graph.dropEdge(id);\r
 221         };\r
 222         \r
 223         /**\r
 224          * <Returns all of the nodes>\r
 225          * @see []\r
 226          */\r
 227         this.allNodes = function()\r
 228         {\r
 229                 return topo.graph.nodes();\r
 230         };\r
 231         \r
 232         /** \r
 233          * Define drag and drop object.\r
 234          */\r
 235         var dragListener = null;\r
 236         \r
 237         /**\r
 238          * <Set the node drag and drop>\r
 239          * @param b: The node can be dragged and dropped when the parameter is TRUE.Set after canvas init.\r
 240          * @see []\r
 241          */\r
 242         this.setDrag = function(b)\r
 243         {\r
 244                 if (b)\r
 245                 {\r
 246                     dragListener = sigma.plugins.dragNodes(topo, topo.renderers[0]);\r
 247                 }\r
 248         };\r
 249         \r
 250         /**\r
 251          * <Binding the event of drag and drop>\r
 252          * @param method: The binding method include:startdrag,drag,drop,dragend.\r
 253          * @param e: Callback method.\r
 254          * @see []\r
 255          */\r
 256         var dragBind = function(method,e)\r
 257         {\r
 258                 if (null != dragListener)\r
 259                 {\r
 260                         dragListener.bind(method, function(event){\r
 261                                 e(event);\r
 262                         });\r
 263                 }\r
 264         };\r
 265         \r
 266         \r
 267         /**\r
 268          * <Binding the event of mouse>\r
 269          * @param method: The binding method include:rightClick,clickStage,doubleClickStage,rightClickStage,clickNode,clickNodes,clickEdge,\r
 270          *                       clickEdges,doubleClickNode,doubleClickNodes,doubleClickEdge,doubleClickEdges,rightClickNode,\r
 271          *                       rightClickNodes,rightClickEdge,rightClickEdges,overNode,overNodes,overEdge,overEdges,outNode,\r
 272          *                       outNodes,outEdge,outEdges,downNode,downNodes,downEdge,downEdges,upNode,upNodes,upEdge,upEdges\r
 273          * @param e Callback method.\r
 274          * @see []\r
 275          */\r
 276         this.mouseBind = function(method,e)\r
 277         {\r
 278                 if (null != topo)\r
 279                 {\r
 280                         topo.bind(method, function(event){\r
 281                                 e(event);\r
 282                         });\r
 283                 }\r
 284         };\r
 285         \r
 286         \r
 287         /**\r
 288          * <Disable the right mouse button for browser>\r
 289          * @param obj: The object to be disabled.\r
 290          * @see []\r
 291          */\r
 292         this.noright = function(obj) {\r
 293             if (obj) {\r
 294                 obj.oncontextmenu  =  function() {\r
 295                     return false;\r
 296                 }\r
 297                 obj.ondragstart  =  function() {\r
 298                     return false;\r
 299                 }\r
 300                 obj.onselectstart  =  function() {\r
 301                     return false;\r
 302                 }\r
 303                 obj.onselect  =  function() {\r
 304                     obj.selection.empty();\r
 305                 }\r
 306                 obj.oncopy  =  function() {\r
 307                     obj.selection.empty();\r
 308                 }\r
 309                 obj.onbeforecopy  =  function() {\r
 310                     return false;\r
 311                 }\r
 312             }\r
 313         }\r
 314 }\r