dgbuilder/public/red/ui/view.js

   1 /**
   2  * Copyright 2013, 2014 IBM Corp.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  **/
  16
  17
  18 RED.view = (function() {
  19         /* increasing the width and height from 5000 to 7500*/
  20 var isImportAction  = false;
  21     var space_width = 7500,
  22         space_height = 7500,
  23         lineCurveScale = 0.75,
  24         scaleFactor = 1,
  25         node_width = 100,
  26         node_height = 30;
  27
  28     var touchLongPressTimeout = 1000,
  29         startTouchDistance = 0,
  30         startTouchCenter = [],
  31         moveTouchCenter = [],
  32         touchStartTime = 0;
  33
  34
  35     var activeWorkspace = 0;
  36     var workspaceScrollPositions = {};
  37
  38     var selected_link = null,
  39         mousedown_link = null,
  40         mousedown_node = null,
  41         mousedown_port_type = null,
  42         mousedown_port_index = 0,
  43         mouseup_node = null,
  44         mouse_offset = [0,0],
  45         mouse_position = null,
  46         mouse_mode = 0,
  47         moving_set = [],
  48         dirty = false,
  49         lasso = null,
  50         showStatus = false,
  51         showNumbers = false,
  52         showNodePalette = true,
  53         lastClickNode = null,
  54         dblClickPrimed = null,
  55         clickTime = 0,
  56         clickElapsed = 0;
  57
  58     var clipboard = "";
  59
  60     var status_colours = {
  61         "red":    "#c00",
  62         "green":  "#5a8",
  63         "yellow": "#F9DF31",
  64         "blue":   "#53A3F3",
  65         "grey":   "#d3d3d3"
  66     }
  67
  68     var outer = d3.select("#chart")
  69         .append("svg:svg")
  70         .attr("width", space_width)
  71         .attr("height", space_height)
  72         .attr("pointer-events", "all")
  73         .style("cursor","crosshair");
  74
  75      var vis = outer
  76         .append('svg:g')
  77         .on("dblclick.zoom", null)
  78         .append('svg:g')
  79         .on("mousemove", canvasMouseMove)
  80         .on("mousedown", canvasMouseDown)
  81         .on("mouseup", canvasMouseUp)
  82         .on("touchend", function() {
  83             clearTimeout(touchStartTime);
  84             touchStartTime = null;
  85             if  (RED.touch.radialMenu.active()) {
  86                 return;
  87             }
  88             if (lasso) {
  89                 outer_background.attr("fill","#fff");
  90             }
  91             canvasMouseUp.call(this);
  92         })
  93         .on("touchcancel", canvasMouseUp)
  94         .on("touchstart", function() {
  95             var touch0;
  96             if (d3.event.touches.length>1) {
  97                 clearTimeout(touchStartTime);
  98                 touchStartTime = null;
  99                 d3.event.preventDefault();
 100                 touch0 = d3.event.touches.item(0);
 101                 var touch1 = d3.event.touches.item(1);
 102                 var a = touch0['pageY']-touch1['pageY'];
 103                 var b = touch0['pageX']-touch1['pageX'];
 104
 105                 var offset = $("#chart").offset();
 106                 var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
 107                 startTouchCenter = [
 108                     (touch1['pageX']+(b/2)-offset.left+scrollPos[0])/scaleFactor,
 109                     (touch1['pageY']+(a/2)-offset.top+scrollPos[1])/scaleFactor
 110                 ];
 111                 moveTouchCenter = [
 112                     touch1['pageX']+(b/2),
 113                     touch1['pageY']+(a/2)
 114                 ]
 115                 startTouchDistance = Math.sqrt((a*a)+(b*b));
 116             } else {
 117                 var obj = d3.select(document.body);
 118                 touch0 = d3.event.touches.item(0);
 119                 var pos = [touch0.pageX,touch0.pageY];
 120                 startTouchCenter = [touch0.pageX,touch0.pageY];
 121                 startTouchDistance = 0;
 122                 var point = d3.touches(this)[0];
 123                 touchStartTime = setTimeout(function() {
 124                     touchStartTime = null;
 125                     showTouchMenu(obj,pos);
 126                     //lasso = vis.append('rect')
 127                     //    .attr("ox",point[0])
 128                     //    .attr("oy",point[1])
 129                     //    .attr("rx",2)
 130                     //    .attr("ry",2)
 131                     //    .attr("x",point[0])
 132                     //    .attr("y",point[1])
 133                     //    .attr("width",0)
 134                     //    .attr("height",0)
 135                     //    .attr("class","lasso");
 136                     //outer_background.attr("fill","#e3e3f3");
 137                 },touchLongPressTimeout);
 138             }
 139         })
 140         .on("touchmove", function(){
 141                 if  (RED.touch.radialMenu.active()) {
 142                     d3.event.preventDefault();
 143                     return;
 144                 }
 145                 var touch0;
 146                 if (d3.event.touches.length<2) {
 147                     if (touchStartTime) {
 148                         touch0 = d3.event.touches.item(0);
 149                         var dx = (touch0.pageX-startTouchCenter[0]);
 150                         var dy = (touch0.pageY-startTouchCenter[1]);
 151                         var d = Math.abs(dx*dx+dy*dy);
 152                         if (d > 64) {
 153                             clearTimeout(touchStartTime);
 154                             touchStartTime = null;
 155                         }
 156                     } else if (lasso) {
 157                         d3.event.preventDefault();
 158                     }
 159                     canvasMouseMove.call(this);
 160                 } else {
 161                     touch0 = d3.event.touches.item(0);
 162                     var touch1 = d3.event.touches.item(1);
 163                     var a = touch0['pageY']-touch1['pageY'];
 164                     var b = touch0['pageX']-touch1['pageX'];
 165                     var offset = $("#chart").offset();
 166                     var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
 167                     var moveTouchDistance = Math.sqrt((a*a)+(b*b));
 168                     var touchCenter = [
 169                         touch1['pageX']+(b/2),
 170                         touch1['pageY']+(a/2)
 171                     ];
 172
 173                     if (!isNaN(moveTouchDistance)) {
 174                         oldScaleFactor = scaleFactor;
 175                         scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
 176
 177                         var deltaTouchCenter = [                             // Try to pan whilst zooming - not 100%
 178                             startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
 179                             startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
 180                         ];
 181
 182                         startTouchDistance = moveTouchDistance;
 183                         moveTouchCenter = touchCenter;
 184
 185                         $("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
 186                         $("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);
 187                         redraw();
 188                     }
 189                 }
 190         });
 191
 192     var outer_background = vis.append('svg:rect')
 193         .attr('width', space_width)
 194         .attr('height', space_height)
 195         .attr('fill','#fff');
 196
 197     //var gridScale = d3.scale.linear().range([0,2000]).domain([0,2000]);
 198     //var grid = vis.append('g');
 199     //
 200     //grid.selectAll("line.horizontal").data(gridScale.ticks(100)).enter()
 201     //    .append("line")
 202     //        .attr(
 203     //        {
 204     //            "class":"horizontal",
 205     //            "x1" : 0,
 206     //            "x2" : 2000,
 207     //            "y1" : function(d){ return gridScale(d);},
 208     //            "y2" : function(d){ return gridScale(d);},
 209     //            "fill" : "none",
 210     //            "shape-rendering" : "crispEdges",
 211     //            "stroke" : "#eee",
 212     //            "stroke-width" : "1px"
 213     //        });
 214     //grid.selectAll("line.vertical").data(gridScale.ticks(100)).enter()
 215     //    .append("line")
 216     //        .attr(
 217     //        {
 218     //            "class":"vertical",
 219     //            "y1" : 0,
 220     //            "y2" : 2000,
 221     //            "x1" : function(d){ return gridScale(d);},
 222     //            "x2" : function(d){ return gridScale(d);},
 223     //            "fill" : "none",
 224     //            "shape-rendering" : "crispEdges",
 225     //            "stroke" : "#eee",
 226     //            "stroke-width" : "1px"
 227     //        });
 228
 229
 230     var drag_line = vis.append("svg:path").attr("class", "drag_line");
 231
 232     var workspace_tabs = RED.tabs.create({
 233         id: "workspace-tabs",
 234         onchange: function(tab) {
 235             if (tab.type == "subflow") {
 236                 $("#workspace-toolbar").show();
 237             } else {
 238                 $("#workspace-toolbar").hide();
 239             }
 240             var chart = $("#chart");
 241             if (activeWorkspace !== 0) {
 242                 workspaceScrollPositions[activeWorkspace] = {
 243                     left:chart.scrollLeft(),
 244                     top:chart.scrollTop()
 245                 };
 246             }
 247             var scrollStartLeft = chart.scrollLeft();
 248             var scrollStartTop = chart.scrollTop();
 249
 250             activeWorkspace = tab.id;
 251             if (workspaceScrollPositions[activeWorkspace]) {
 252                 chart.scrollLeft(workspaceScrollPositions[activeWorkspace].left);
 253                 chart.scrollTop(workspaceScrollPositions[activeWorkspace].top);
 254             } else {
 255                 chart.scrollLeft(0);
 256                 chart.scrollTop(0);
 257             }
 258             var scrollDeltaLeft = chart.scrollLeft() - scrollStartLeft;
 259             var scrollDeltaTop = chart.scrollTop() - scrollStartTop;
 260             if (mouse_position != null) {
 261                 mouse_position[0] += scrollDeltaLeft;
 262                 mouse_position[1] += scrollDeltaTop;
 263             }
 264
 265             clearSelection();
 266             RED.nodes.eachNode(function(n) {
 267                     n.dirty = true;
 268             });
 269             redraw();
 270         },
 271         ondblclick: function(tab) {
 272             showRenameWorkspaceDialog(tab.id);
 273         },
 274         onadd: function(tab) {
 275             RED.menu.addItem("btn-workspace-menu",{
 276                 id:"btn-workspace-menu-"+tab.id.replace(".","-"),
 277                 label:tab.label,
 278                 onselect:function() {
 279                     workspace_tabs.activateTab(tab.id);
 280                 }
 281             });
 282             RED.menu.setDisabled("btn-workspace-delete",workspace_tabs.count() == 1);
 283         },
 284         onremove: function(tab) {
 285             RED.menu.setDisabled("btn-workspace-delete",workspace_tabs.count() == 1);
 286             RED.menu.removeItem("btn-workspace-menu-"+tab.id.replace(".","-"));
 287         }
 288     });
 289
 290     var workspaceIndex = 0;
 291
 292     function addWorkspace() {
 293         var tabId = RED.nodes.id();
 294         do {
 295             workspaceIndex += 1;
 296         } while($("#workspace-tabs a[title='Sheet "+workspaceIndex+"']").size() !== 0);
 297
 298         var ws = {type:"tab",id:tabId,label:"Sheet "+workspaceIndex};
 299         RED.nodes.addWorkspace(ws);
 300         workspace_tabs.addTab(ws);
 301         workspace_tabs.activateTab(tabId);
 302         RED.history.push({t:'add',workspaces:[ws],dirty:dirty});
 303         RED.view.dirty(true);
 304     }
 305     $(function() {
 306         $('#btn-workspace-add-tab').on("click",addWorkspace);
 307         $('#btn-workspace-add').on("click",addWorkspace);
 308         $('#btn-workspace-edit').on("click",function() {
 309             showRenameWorkspaceDialog(activeWorkspace);
 310         });
 311         $('#btn-workspace-delete').on("click",function() {
 312             deleteWorkspace(activeWorkspace);
 313         });
 314     });
 315
 316     function deleteWorkspace(id) {
 317         if (workspace_tabs.count() == 1) {
 318             return;
 319         }
 320         var ws = RED.nodes.workspace(id);
 321         $( "#node-dialog-delete-workspace" ).dialog('option','workspace',ws);
 322         $( "#node-dialog-delete-workspace-name" ).text(ws.label);
 323         $( "#node-dialog-delete-workspace" ).dialog('open');
 324     }
 325
 326     function canvasMouseDown() {
 327         console.log("The state in canvasMouseDown:" + RED.view.state());
 328         if (!mousedown_node && !mousedown_link) {
 329             selected_link = null;
 330             updateSelection();
 331         }
 332         if (mouse_mode === 0) {
 333             if (lasso) {
 334                 lasso.remove();
 335                 lasso = null;
 336             }
 337
 338             if (!touchStartTime) {
 339                 var point = d3.mouse(this);
 340                 lasso = vis.append('rect')
 341                     .attr("ox",point[0])
 342                     .attr("oy",point[1])
 343                     .attr("rx",2)
 344                     .attr("ry",2)
 345                     .attr("x",point[0])
 346                     .attr("y",point[1])
 347                     .attr("width",0)
 348                     .attr("height",0)
 349                     .attr("class","lasso");
 350                 d3.event.preventDefault();
 351             }
 352         }
 353     }
 354
 355     function canvasMouseMove() {
 356         mouse_position = d3.touches(this)[0]||d3.mouse(this);
 357
 358         // Prevent touch scrolling...
 359         //if (d3.touches(this)[0]) {
 360         //    d3.event.preventDefault();
 361         //}
 362
 363         // TODO: auto scroll the container
 364         //var point = d3.mouse(this);
 365         //if (point[0]-container.scrollLeft < 30 && container.scrollLeft > 0) { container.scrollLeft -= 15; }
 366         //console.log(d3.mouse(this),container.offsetWidth,container.offsetHeight,container.scrollLeft,container.scrollTop);
 367
 368         if (lasso) {
 369             var ox = parseInt(lasso.attr("ox"));
 370             var oy = parseInt(lasso.attr("oy"));
 371             var x = parseInt(lasso.attr("x"));
 372             var y = parseInt(lasso.attr("y"));
 373             var w;
 374             var h;
 375             if (mouse_position[0] < ox) {
 376                 x = mouse_position[0];
 377                 w = ox-x;
 378             } else {
 379                 w = mouse_position[0]-x;
 380             }
 381             if (mouse_position[1] < oy) {
 382                 y = mouse_position[1];
 383                 h = oy-y;
 384             } else {
 385                 h = mouse_position[1]-y;
 386             }
 387             lasso
 388                 .attr("x",x)
 389                 .attr("y",y)
 390                 .attr("width",w)
 391                 .attr("height",h)
 392             ;
 393             return;
 394         }
 395
 396         if (mouse_mode != RED.state.IMPORT_DRAGGING && !mousedown_node && selected_link == null) {
 397             return;
 398         }
 399
 400         var mousePos;
 401         if (mouse_mode == RED.state.JOINING) {
 402             // update drag line
 403             drag_line.attr("class", "drag_line");
 404             mousePos = mouse_position;
 405             var numOutputs = (mousedown_port_type === 0)?(mousedown_node.outputs || 1):1;
 406             var sourcePort = mousedown_port_index;
 407             var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
 408
 409             var sc = (mousedown_port_type === 0)?1:-1;
 410
 411             var dy = mousePos[1]-(mousedown_node.y+portY);
 412             var dx = mousePos[0]-(mousedown_node.x+sc*mousedown_node.w/2);
 413             var delta = Math.sqrt(dy*dy+dx*dx);
 414             var scale = lineCurveScale;
 415             var scaleY = 0;
 416
 417             if (delta < node_width) {
 418                 scale = 0.75-0.75*((node_width-delta)/node_width);
 419             }
 420             if (dx*sc < 0) {
 421                 scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
 422                 if (Math.abs(dy) < 3*node_height) {
 423                     scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
 424                 }
 425             }
 426
 427             drag_line.attr("d",
 428                 "M "+(mousedown_node.x+sc*mousedown_node.w/2)+" "+(mousedown_node.y+portY)+
 429                 " C "+(mousedown_node.x+sc*(mousedown_node.w/2+node_width*scale))+" "+(mousedown_node.y+portY+scaleY*node_height)+" "+
 430                 (mousePos[0]-sc*(scale)*node_width)+" "+(mousePos[1]-scaleY*node_height)+" "+
 431                 mousePos[0]+" "+mousePos[1]
 432                 );
 433             d3.event.preventDefault();
 434         } else if (mouse_mode == RED.state.MOVING) {
 435                 //console.log("node mouse moving");
 436             mousePos = mouse_position;
 437             var d = (mouse_offset[0]-mousePos[0])*(mouse_offset[0]-mousePos[0]) + (mouse_offset[1]-mousePos[1])*(mouse_offset[1]-mousePos[1]);
 438             if (d > 2) {
 439                 mouse_mode = RED.state.MOVING_ACTIVE;
 440                 clickElapsed = 0;
 441             }
 442         } else if (mouse_mode == RED.state.MOVING_ACTIVE || mouse_mode == RED.state.IMPORT_DRAGGING) {
 443                 //console.log("node mouse moving active or IMPORT_DRAGGING");
 444             mousePos = mouse_position;
 445             var node;
 446             var i;
 447             var minX = 0;
 448             var minY = 0;
 449             for (var n = 0; n<moving_set.length; n++) {
 450                 node = moving_set[n];
 451                 if (d3.event.shiftKey) {
 452                     node.n.ox = node.n.x;
 453                     node.n.oy = node.n.y;
 454                 }
 455                 node.n.x = mousePos[0]+node.dx;
 456                 node.n.y = mousePos[1]+node.dy;
 457                 node.n.dirty = true;
 458                 minX = Math.min(node.n.x-node.n.w/2-5,minX);
 459                 minY = Math.min(node.n.y-node.n.h/2-5,minY);
 460             }
 461             if (minX !== 0 || minY !== 0) {
 462                 for (i = 0; i<moving_set.length; i++) {
 463                     node = moving_set[i];
 464                     node.n.x -= minX;
 465                     node.n.y -= minY;
 466                 }
 467             }
 468             if (d3.event.shiftKey && moving_set.length > 0) {
 469                 var gridOffset =  [0,0];
 470                 node = moving_set[0];
 471                 gridOffset[0] = node.n.x-(20*Math.floor((node.n.x-node.n.w/2)/20)+node.n.w/2);
 472                 gridOffset[1] = node.n.y-(20*Math.floor(node.n.y/20));
 473                 if (gridOffset[0] !== 0 || gridOffset[1] !== 0) {
 474                     for (i = 0; i<moving_set.length; i++) {
 475                         node = moving_set[i];
 476                         node.n.x -= gridOffset[0];
 477                         node.n.y -= gridOffset[1];
 478                         if (node.n.x == node.n.ox && node.n.y == node.n.oy) {
 479                             node.dirty = false;
 480                         }
 481                     }
 482                 }
 483             }
 484         }
 485         redraw();
 486     }
 487
 488     function canvasMouseUp() {
 489         console.log("The state in canvasMouseUp:" + RED.view.state());
 490         if (mousedown_node && mouse_mode == RED.state.JOINING) {
 491             drag_line.attr("class", "drag_line_hidden");
 492         }
 493         if (lasso) {
 494             var x = parseInt(lasso.attr("x"));
 495             var y = parseInt(lasso.attr("y"));
 496             var x2 = x+parseInt(lasso.attr("width"));
 497             var y2 = y+parseInt(lasso.attr("height"));
 498             if (!d3.event.ctrlKey) {
 499                 clearSelection();
 500             }
 501             RED.nodes.eachNode(function(n) {
 502                 if (n.z == activeWorkspace && !n.selected) {
 503                     n.selected = (n.x > x && n.x < x2 && n.y > y && n.y < y2);
 504                     if (n.selected) {
 505                         n.dirty = true;
 506                         moving_set.push({n:n});
 507                     }
 508                 }
 509             });
 510             updateSelection();
 511             lasso.remove();
 512             lasso = null;
 513         } else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null && !d3.event.ctrlKey ) {
 514             clearSelection();
 515             updateSelection();
 516         }
 517         if (mouse_mode == RED.state.MOVING_ACTIVE) {
 518                 //console.log("node moved active.");
 519                 //CSS setting view dirty if the node was moved
 520                 //RED.view.dirty(true);
 521             if (moving_set.length > 0) {
 522                 var ns = [];
 523                 for (var j=0;j<moving_set.length;j++) {
 524                     ns.push({n:moving_set[j].n,ox:moving_set[j].ox,oy:moving_set[j].oy});
 525                 }
 526                 RED.history.push({t:'move',nodes:ns,dirty:dirty});
 527             }
 528         }
 529         if (mouse_mode == RED.state.MOVING || mouse_mode == RED.state.MOVING_ACTIVE) {
 530                 //console.log("node moving or MOVING_ACTIVE.");
 531             for (var i=0;i<moving_set.length;i++) {
 532                 delete moving_set[i].ox;
 533                 delete moving_set[i].oy;
 534             }
 535         }
 536         if (mouse_mode == RED.state.IMPORT_DRAGGING) {
 537             RED.keyboard.remove(/* ESCAPE */ 27);
 538             setDirty(true);
 539         }
 540         console.log("isImportAction:" + RED.view.getIsImportAction());
 541         if (RED.view.getIsImportAction() === true){
 542                 RED.view.setIsImportAction(false);
 543                 console.log("updated isImportAction:" + isImportAction);
 544                 redraw();
 545                 // clear mouse event vars
 546                 resetMouseVars();
 547                 //save the imported DG
 548                 try{
 549                                 var obj = getCurrentFlowNodeSet();
 550                                 //console.dir(obj);
 551                                 //console.log("workspace id:" + RED.view.getWorkspace());
 552                                 var dgTabId = RED.view.getWorkspace();
 553                                 console.log("dgTabId:" + dgTabId);
 554                                 $.post("/saveImportedDG",{"importedNodes" :JSON.stringify(obj,null,4),"currTabId": dgTabId})
 555                                 .done(function( data ) {
 556                                         console.log("saved imported DG");
 557                                 })
 558                                 .fail(function(err) {
 559                                         console.log("error saving imported DG");
 560                                 })
 561                                 .always(function() {
 562                                 });
 563                 }catch(err){
 564                         console.log(err);
 565                 }
 566         }else{
 567                 redraw();
 568                 // clear mouse event vars
 569                 resetMouseVars();
 570         }
 571     }
 572
 573
 574     $('#btn-zoom-out').click(function() {zoomOut();});
 575     $('#btn-zoom-zero').click(function() {zoomZero();});
 576     $('#btn-zoom-in').click(function() {zoomIn();});
 577     $("#chart").on('DOMMouseScroll mousewheel', function (evt) {
 578         if ( evt.altKey ) {
 579             evt.preventDefault();
 580             evt.stopPropagation();
 581             var move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta;
 582             if (move <= 0) { zoomOut(); }
 583             else { zoomIn(); }
 584         }
 585     });
 586     $("#chart").droppable({
 587             accept:".palette_node",
 588             drop: function( event, ui ) {
 589                 d3.event = event;
 590                 var selected_tool = ui.draggable[0].type;
 591                 var mousePos = d3.touches(this)[0]||d3.mouse(this);
 592                 mousePos[1] += this.scrollTop;
 593                 mousePos[0] += this.scrollLeft;
 594                 mousePos[1] /= scaleFactor;
 595                 mousePos[0] /= scaleFactor;
 596
 597                 var nn = { id:(1+Math.random()*4294967295).toString(16),x: mousePos[0],y:mousePos[1],w:node_width,z:activeWorkspace};
 598
 599                 nn.type = selected_tool;
 600                 nn._def = RED.nodes.getType(nn.type);
 601                 nn.outputs = nn._def.outputs;
 602                 nn.changed = true;
 603
 604                 for (var d in nn._def.defaults) {
 605                     if (nn._def.defaults.hasOwnProperty(d)) {
 606                         nn[d] = nn._def.defaults[d].value;
 607                     }
 608                 }
 609
 610                 if (nn._def.onadd) {
 611                     nn._def.onadd.call(nn);
 612                 }
 613
 614                 nn.h = Math.max(node_height,(nn.outputs||0) * 15);
 615                 RED.history.push({t:'add',nodes:[nn.id],dirty:dirty});
 616                 RED.nodes.add(nn);
 617                 RED.editor.validateNode(nn);
 618                 setDirty(true);
 619                 // auto select dropped node - so info shows (if visible)
 620                 clearSelection();
 621                 nn.selected = true;
 622                 moving_set.push({n:nn});
 623                 updateSelection();
 624                 redraw();
 625
 626                 if (nn._def.autoedit) {
 627                     RED.editor.edit(nn);
 628                 }
 629             }
 630     });
 631
 632     function zoomIn() {
 633         if (scaleFactor < 2) {
 634             scaleFactor += 0.1;
 635             redraw();
 636         }
 637     }
 638     function zoomOut() {
 639         if (scaleFactor > 0.3) {
 640             scaleFactor -= 0.1;
 641             redraw();
 642         }
 643     }
 644     function zoomZero() {
 645         scaleFactor = 1;
 646         redraw();
 647     }
 648
 649     function selectAll() {
 650         RED.nodes.eachNode(function(n) {
 651             if (n.z == activeWorkspace) {
 652                 if (!n.selected) {
 653                     n.selected = true;
 654                     n.dirty = true;
 655                     moving_set.push({n:n});
 656                 }
 657             }
 658         });
 659         selected_link = null;
 660         updateSelection();
 661         redraw();
 662     }
 663
 664     function clearSelection() {
 665         for (var i=0;i<moving_set.length;i++) {
 666             var n = moving_set[i];
 667             n.n.dirty = true;
 668             n.n.selected = false;
 669         }
 670         moving_set = [];
 671         selected_link = null;
 672     }
 673
 674     function updateSelection() {
 675         if (moving_set.length === 0) {
 676             RED.menu.setDisabled("btn-export-menu",true);
 677             RED.menu.setDisabled("btn-export-clipboard",true);
 678             RED.menu.setDisabled("btn-export-library",true);
 679         } else {
 680             RED.menu.setDisabled("btn-export-menu",false);
 681             RED.menu.setDisabled("btn-export-clipboard",false);
 682             RED.menu.setDisabled("btn-export-library",false);
 683         }
 684         if (moving_set.length === 0 && selected_link == null) {
 685             //RED.keyboard.remove(/* backspace */ 8);
 686             RED.keyboard.remove(/* delete */ 46);
 687             RED.keyboard.remove(/* c */ 67);
 688             RED.keyboard.remove(/* x */ 88);
 689         } else {
 690             //RED.keyboard.add(/* backspace */ 8,function(){deleteSelection();d3.event.preventDefault();});
 691             RED.keyboard.add(/* delete */ 46,function(){deleteSelection();d3.event.preventDefault();});
 692             RED.keyboard.add(/* c */ 67,{ctrl:true},function(){copySelection();d3.event.preventDefault();});
 693             RED.keyboard.add(/* x */ 88,{ctrl:true},function(){copySelection();deleteSelection();d3.event.preventDefault();});
 694         }
 695         if (moving_set.length === 0) {
 696             RED.keyboard.remove(/* up   */ 38);
 697             RED.keyboard.remove(/* down */ 40);
 698             RED.keyboard.remove(/* left */ 37);
 699             RED.keyboard.remove(/* right*/ 39);
 700         } else {
 701             RED.keyboard.add(/* up   */ 38, function() { if(d3.event.shiftKey){moveSelection(  0,-20)}else{moveSelection( 0,-1);}d3.event.preventDefault();},endKeyboardMove);
 702             RED.keyboard.add(/* down */ 40, function() { if(d3.event.shiftKey){moveSelection(  0, 20)}else{moveSelection( 0, 1);}d3.event.preventDefault();},endKeyboardMove);
 703             RED.keyboard.add(/* left */ 37, function() { if(d3.event.shiftKey){moveSelection(-20,  0)}else{moveSelection(-1, 0);}d3.event.preventDefault();},endKeyboardMove);
 704             RED.keyboard.add(/* right*/ 39, function() { if(d3.event.shiftKey){moveSelection( 20,  0)}else{moveSelection( 1, 0);}d3.event.preventDefault();},endKeyboardMove);
 705         }
 706         if (moving_set.length == 1) {
 707             RED.sidebar.info.refresh(moving_set[0].n);
 708         } else {
 709             RED.sidebar.info.clear();
 710         }
 711     }
 712     function endKeyboardMove() {
 713         //console.log("end keyboard move.");
 714         //CSS setting view dirty if the node was moved
 715         //RED.view.dirty(true);
 716         var ns = [];
 717         for (var i=0;i<moving_set.length;i++) {
 718             ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy});
 719             delete moving_set[i].ox;
 720             delete moving_set[i].oy;
 721         }
 722         RED.history.push({t:'move',nodes:ns,dirty:dirty});
 723     }
 724     function moveSelection(dx,dy) {
 725         var minX = 0;
 726         var minY = 0;
 727         var node;
 728
 729         for (var i=0;i<moving_set.length;i++) {
 730             node = moving_set[i];
 731             if (node.ox == null && node.oy == null) {
 732                 node.ox = node.n.x;
 733                 node.oy = node.n.y;
 734             }
 735             node.n.x += dx;
 736             node.n.y += dy;
 737             node.n.dirty = true;
 738             minX = Math.min(node.n.x-node.n.w/2-5,minX);
 739             minY = Math.min(node.n.y-node.n.h/2-5,minY);
 740         }
 741
 742         if (minX !== 0 || minY !== 0) {
 743             for (var n = 0; n<moving_set.length; n++) {
 744                 node = moving_set[n];
 745                 node.n.x -= minX;
 746                 node.n.y -= minY;
 747             }
 748         }
 749
 750         redraw();
 751     }
 752     function deleteSelection() {
 753         var removedNodes = [];
 754         var removedLinks = [];
 755         var startDirty = dirty;
 756         if (moving_set.length > 0) {
 757             for (var i=0;i<moving_set.length;i++) {
 758                 var node = moving_set[i].n;
 759                 node.selected = false;
 760                 if (node.x < 0) {
 761                     node.x = 25
 762                 }
 763                 var rmlinks = RED.nodes.remove(node.id);
 764                 removedNodes.push(node);
 765                 removedLinks = removedLinks.concat(rmlinks);
 766             }
 767             moving_set = [];
 768             setDirty(true);
 769         }
 770         if (selected_link) {
 771             RED.nodes.removeLink(selected_link);
 772             removedLinks.push(selected_link);
 773             setDirty(true);
 774         }
 775         RED.history.push({t:'delete',nodes:removedNodes,links:removedLinks,dirty:startDirty});
 776
 777         selected_link = null;
 778         updateSelection();
 779         redraw();
 780     }
 781
 782     function copySelection() {
 783         if (moving_set.length > 0) {
 784             var nns = [];
 785             for (var n=0;n<moving_set.length;n++) {
 786                 var node = moving_set[n].n;
 787                 nns.push(RED.nodes.convertNode(node));
 788             }
 789             clipboard = JSON.stringify(nns);
 790             RED.notify(moving_set.length+" node"+(moving_set.length>1?"s":"")+" copied");
 791         }
 792     }
 793
 794
 795     function calculateTextWidth(str) {
 796         var sp = document.createElement("span");
 797         sp.className = "node_label";
 798         sp.style.position = "absolute";
 799         sp.style.top = "-1000px";
 800         sp.innerHTML = (str||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
 801         document.body.appendChild(sp);
 802         var w = sp.offsetWidth;
 803         document.body.removeChild(sp);
 804         return 50+w;
 805     }
 806
 807     function resetMouseVars() {
 808         mousedown_node = null;
 809         mouseup_node = null;
 810         mousedown_link = null;
 811         mouse_mode = 0;
 812         mousedown_port_type = 0;
 813     }
 814
 815     function portMouseDown(d,portType,portIndex) {
 816         // disable zoom
 817         //vis.call(d3.behavior.zoom().on("zoom"), null);
 818         mousedown_node = d;
 819         selected_link = null;
 820         mouse_mode = RED.state.JOINING;
 821         mousedown_port_type = portType;
 822         mousedown_port_index = portIndex || 0;
 823         document.body.style.cursor = "crosshair";
 824         d3.event.preventDefault();
 825     }
 826
 827     function portMouseUp(d,portType,portIndex) {
 828         document.body.style.cursor = "";
 829         if (mouse_mode == RED.state.JOINING && mousedown_node) {
 830             if (typeof TouchEvent != "undefined" && d3.event instanceof TouchEvent) {
 831                 RED.nodes.eachNode(function(n) {
 832                         if (n.z == activeWorkspace) {
 833                             var hw = n.w/2;
 834                             var hh = n.h/2;
 835                             if (n.x-hw<mouse_position[0] && n.x+hw> mouse_position[0] &&
 836                                 n.y-hh<mouse_position[1] && n.y+hh>mouse_position[1]) {
 837                                     mouseup_node = n;
 838                                     portType = mouseup_node._def.inputs>0?1:0;
 839                                     portIndex = 0;
 840                             }
 841                         }
 842                 });
 843             } else {
 844                 mouseup_node = d;
 845             }
 846             if (portType == mousedown_port_type || mouseup_node === mousedown_node) {
 847                 drag_line.attr("class", "drag_line_hidden");
 848                 resetMouseVars();
 849                 return;
 850             }
 851             var src,dst,src_port;
 852             if (mousedown_port_type === 0) {
 853                 src = mousedown_node;
 854                 src_port = mousedown_port_index;
 855                 dst = mouseup_node;
 856             } else if (mousedown_port_type == 1) {
 857                 src = mouseup_node;
 858                 dst = mousedown_node;
 859                 src_port = portIndex;
 860             }
 861
 862             var existingLink = false;
 863             RED.nodes.eachLink(function(d) {
 864                     existingLink = existingLink || (d.source === src && d.target === dst && d.sourcePort == src_port);
 865             });
 866             if (!existingLink) {
 867                 var link = {source: src, sourcePort:src_port, target: dst};
 868                 RED.nodes.addLink(link);
 869                 RED.history.push({t:'add',links:[link],dirty:dirty});
 870                 setDirty(true);
 871             }
 872             selected_link = null;
 873             redraw();
 874         }
 875     }
 876
 877     function nodeMouseUp(d) {
 878         if (dblClickPrimed && mousedown_node == d && clickElapsed > 0 && clickElapsed < 750) {
 879             RED.editor.edit(d);
 880             clickElapsed = 0;
 881             d3.event.stopPropagation();
 882             return;
 883         }
 884         portMouseUp(d, d._def.inputs > 0 ? 1 : 0, 0);
 885     }
 886
 887     function nodeMouseDown(d) {
 888         //var touch0 = d3.event;
 889         //var pos = [touch0.pageX,touch0.pageY];
 890         //RED.touch.radialMenu.show(d3.select(this),pos);
 891         if (mouse_mode == RED.state.IMPORT_DRAGGING) {
 892             RED.keyboard.remove(/* ESCAPE */ 27);
 893             updateSelection();
 894             setDirty(true);
 895             redraw();
 896             resetMouseVars();
 897             d3.event.stopPropagation();
 898             return;
 899         }
 900         mousedown_node = d;
 901         var now = Date.now();
 902         clickElapsed = now-clickTime;
 903         clickTime = now;
 904
 905         dblClickPrimed = (lastClickNode == mousedown_node);
 906         lastClickNode = mousedown_node;
 907
 908         var i;
 909
 910         if (d.selected && d3.event.ctrlKey) {
 911             d.selected = false;
 912             for (i=0;i<moving_set.length;i+=1) {
 913                 if (moving_set[i].n === d) {
 914                     moving_set.splice(i,1);
 915                     break;
 916                 }
 917             }
 918         } else {
 919             if (d3.event.shiftKey) {
 920                 clearSelection();
 921                 var cnodes = RED.nodes.getAllFlowNodes(mousedown_node);
 922                 for (var n=0;n<cnodes.length;n++) {
 923                     cnodes[n].selected = true;
 924                     cnodes[n].dirty = true;
 925                     moving_set.push({n:cnodes[n]});
 926                 }
 927             } else if (!d.selected) {
 928                 if (!d3.event.ctrlKey) {
 929                     clearSelection();
 930                 }
 931                 mousedown_node.selected = true;
 932                 moving_set.push({n:mousedown_node});
 933             }
 934             selected_link = null;
 935             if (d3.event.button != 2) {
 936                 mouse_mode = RED.state.MOVING;
 937                 var mouse = d3.touches(this)[0]||d3.mouse(this);
 938                 mouse[0] += d.x-d.w/2;
 939                 mouse[1] += d.y-d.h/2;
 940                 for (i=0;i<moving_set.length;i++) {
 941                     moving_set[i].ox = moving_set[i].n.x;
 942                     moving_set[i].oy = moving_set[i].n.y;
 943                     moving_set[i].dx = moving_set[i].n.x-mouse[0];
 944                     moving_set[i].dy = moving_set[i].n.y-mouse[1];
 945                 }
 946                 mouse_offset = d3.mouse(document.body);
 947                 if (isNaN(mouse_offset[0])) {
 948                     mouse_offset = d3.touches(document.body)[0];
 949                 }
 950             }
 951         }
 952         d.dirty = true;
 953         updateSelection();
 954         redraw();
 955         d3.event.stopPropagation();
 956     }
 957
 958     function nodeButtonClicked(d) {
 959         if (d._def.button.toggle) {
 960             d[d._def.button.toggle] = !d[d._def.button.toggle];
 961             d.dirty = true;
 962         }
 963         if (d._def.button.onclick) {
 964             d._def.button.onclick.call(d);
 965         }
 966         if (d.dirty) {
 967             redraw();
 968         }
 969         d3.event.preventDefault();
 970     }
 971
 972     function showTouchMenu(obj,pos) {
 973         var mdn = mousedown_node;
 974         var options = [];
 975         options.push({name:"delete",disabled:(moving_set.length===0),onselect:function() {deleteSelection();}});
 976         options.push({name:"cut",disabled:(moving_set.length===0),onselect:function() {copySelection();deleteSelection();}});
 977         options.push({name:"copy",disabled:(moving_set.length===0),onselect:function() {copySelection();}});
 978         options.push({name:"paste",disabled:(clipboard.length===0),onselect:function() {importNodes(clipboard,true);}});
 979         options.push({name:"edit",disabled:(moving_set.length != 1),onselect:function() { RED.editor.edit(mdn);}});
 980         options.push({name:"select",onselect:function() {selectAll();}});
 981         options.push({name:"undo",disabled:(RED.history.depth() === 0),onselect:function() {RED.history.pop();}});
 982
 983         RED.touch.radialMenu.show(obj,pos,options);
 984         resetMouseVars();
 985     }
 986     function redraw() {
 987         vis.attr("transform","scale("+scaleFactor+")");
 988         outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
 989
 990         if (mouse_mode != RED.state.JOINING) {
 991             // Don't bother redrawing nodes if we're drawing links
 992
 993             var node = vis.selectAll(".nodegroup").data(RED.nodes.nodes.filter(function(d) { return d.z == activeWorkspace }),function(d){return d.id});
 994             node.exit().remove();
 995
 996             var nodeEnter = node.enter().insert("svg:g").attr("class", "node nodegroup");
 997             nodeEnter.each(function(d,i) {
 998                     var node = d3.select(this);
 999                     node.attr("id",d.id);
1000                     var l = d._def.label;
1001                     l = (typeof l === "function" ? l.call(d) : l)||"";
1002                     d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) );
1003                     d.h = Math.max(node_height,(d.outputs||0) * 15);
1004
1005                     if (d._def.badge) {
1006                         var badge = node.append("svg:g").attr("class","node_badge_group");
1007                         var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
1008                         badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr('text-anchor','end').text(d._def.badge());
1009                         if (d._def.onbadgeclick) {
1010                             badgeRect.attr("cursor","pointer")
1011                                 .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
1012                         }
1013                     }
1014
1015                     if (d._def.button) {
1016                         var nodeButtonGroup = node.append('svg:g')
1017                             .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
1018                             .attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
1019                         nodeButtonGroup.append('rect')
1020                             .attr("rx",8)
1021                             .attr("ry",8)
1022                             .attr("width",32)
1023                             .attr("height",node_height-4)
1024                             .attr("fill","#eee");//function(d) { return d._def.color;})
1025                         nodeButtonGroup.append('rect')
1026                             .attr("x",function(d) { return d._def.align == "right"? 10:5})
1027                             .attr("y",4)
1028                             .attr("rx",5)
1029                             .attr("ry",5)
1030                             .attr("width",16)
1031                             .attr("height",node_height-12)
1032                             .attr("fill",function(d) { return d._def.color;})
1033                             .attr("cursor","pointer")
1034                             .on("mousedown",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
1035                             .on("mouseup",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
1036                             .on("mouseover",function(d) {if (!lasso) { d3.select(this).attr("fill-opacity",0.4);}})
1037                             .on("mouseout",function(d) {if (!lasso) {
1038                                 var op = 1;
1039                                 if (d._def.button.toggle) {
1040                                     op = d[d._def.button.toggle]?1:0.2;
1041                                 }
1042                                 d3.select(this).attr("fill-opacity",op);
1043                             }})
1044                             .on("click",nodeButtonClicked)
1045                             .on("touchstart",nodeButtonClicked)
1046                     }
1047
1048                     var mainRect = node.append("rect")
1049                         .attr("class", "node")
1050                         .classed("node_unknown",function(d) { return d.type == "unknown"; })
1051                         .attr("rx", 6)
1052                         .attr("ry", 6)
1053                         .attr("fill",function(d) { return d._def.color;})
1054                         .on("mouseup",nodeMouseUp)
1055                         .on("mousedown",nodeMouseDown)
1056                         .on("touchstart",function(d) {
1057                             var obj = d3.select(this);
1058                             var touch0 = d3.event.touches.item(0);
1059                             var pos = [touch0.pageX,touch0.pageY];
1060                             startTouchCenter = [touch0.pageX,touch0.pageY];
1061                             startTouchDistance = 0;
1062                             touchStartTime = setTimeout(function() {
1063                                 showTouchMenu(obj,pos);
1064                             },touchLongPressTimeout);
1065                             nodeMouseDown.call(this,d)
1066                         })
1067                         .on("touchend", function(d) {
1068                             clearTimeout(touchStartTime);
1069                             touchStartTime = null;
1070                             if  (RED.touch.radialMenu.active()) {
1071                                 d3.event.stopPropagation();
1072                                 return;
1073                             }
1074                             nodeMouseUp.call(this,d);
1075                         })
1076                         .on("mouseover",function(d) {
1077                                 if (mouse_mode === 0) {
1078                                     var node = d3.select(this);
1079                                     node.classed("node_hovered",true);
1080                                 }
1081                         })
1082                         .on("mouseout",function(d) {
1083                                 var node = d3.select(this);
1084                                 node.classed("node_hovered",false);
1085                         });
1086
1087                    //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");
1088                    //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none");
1089
1090                     if (d._def.icon) {
1091
1092                         var icon_group = node.append("g")
1093                             .attr("class","node_icon_group")
1094                             .attr("x",0).attr("y",0);
1095
1096                         var icon_shade = icon_group.append("rect")
1097                             .attr("x",0).attr("y",0)
1098                             .attr("class","node_icon_shade")
1099                             .attr("width","30")
1100                             .attr("stroke","none")
1101                             .attr("fill","#000")
1102                             .attr("fill-opacity","0.05")
1103                             .attr("height",function(d){return Math.min(50,d.h-4);});
1104
1105                         var icon = icon_group.append("image")
1106                             .attr("xlink:href","icons/"+d._def.icon)
1107                             .attr("class","node_icon")
1108                             .attr("x",0)
1109                             .attr("width","30")
1110                             .attr("height","30");
1111
1112                         var icon_shade_border = icon_group.append("path")
1113                             .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
1114                             .attr("class","node_icon_shade_border")
1115                             .attr("stroke-opacity","0.1")
1116                             .attr("stroke","#000")
1117                             .attr("stroke-width","2");
1118
1119                         if ("right" == d._def.align) {
1120                             icon_group.attr('class','node_icon_group node_icon_group_'+d._def.align);
1121                             icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
1122                             //icon.attr('class','node_icon node_icon_'+d._def.align);
1123                             //icon.attr('class','node_icon_shade node_icon_shade_'+d._def.align);
1124                             //icon.attr('class','node_icon_shade_border node_icon_shade_border_'+d._def.align);
1125                         }
1126
1127                         //if (d._def.inputs > 0 && d._def.align == null) {
1128                         //    icon_shade.attr("width",35);
1129                         //    icon.attr("transform","translate(5,0)");
1130                         //    icon_shade_border.attr("transform","translate(5,0)");
1131                         //}
1132                         //if (d._def.outputs > 0 && "right" == d._def.align) {
1133                         //    icon_shade.attr("width",35); //icon.attr("x",5);
1134                         //}
1135
1136                         var img = new Image();
1137                         img.src = "icons/"+d._def.icon;
1138                         img.onload = function() {
1139                             icon.attr("width",Math.min(img.width,30));
1140                             icon.attr("height",Math.min(img.height,30));
1141                             icon.attr("x",15-Math.min(img.width,30)/2);
1142                             //if ("right" == d._def.align) {
1143                             //    icon.attr("x",function(d){return d.w-img.width-1-(d.outputs>0?5:0);});
1144                             //    icon_shade.attr("x",function(d){return d.w-30});
1145                             //    icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
1146                             //}
1147                         }
1148
1149                         //icon.style("pointer-events","none");
1150                         icon_group.style("pointer-events","none");
1151                     }
1152                     var text = node.append('svg:text').attr('class','node_label').attr('x', 38).attr('dy', '.35em').attr('text-anchor','start');
1153                     if (d._def.align) {
1154                         text.attr('class','node_label node_label_'+d._def.align);
1155                         text.attr('text-anchor','end');
1156                     }
1157
1158                     var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
1159
1160                     var statusRect = status.append("rect").attr("class","node_status")
1161                                         .attr("x",6).attr("y",1).attr("width",9).attr("height",9)
1162                                         .attr("rx",2).attr("ry",2).attr("stroke-width","3");
1163
1164                     var statusLabel = status.append("svg:text")
1165                         .attr("class","node_status_label")
1166                         .attr('x',20).attr('y',9)
1167                         .style({
1168                                 'stroke-width': 0,
1169                                 'fill': '#888',
1170                                 'font-size':'9pt',
1171                                 'stroke':'#000',
1172                                 'text-anchor':'start'
1173                         });
1174
1175                     var dgNumber = node.append("svg:g").attr("class","node_dgnumber_group").style("display","none");
1176
1177                     /*var dgNumberRect = dgNumber.append("rect").attr("class","node_dgnumber")
1178                                         .attr("x",6).attr("y",-49).attr("width",9).attr("height",9)
1179                                         .attr("rx",2).attr("ry",2).attr("stroke-width","3");
1180                         */
1181
1182                     var dgNumberLabel = dgNumber.append("svg:text")
1183                         .attr("class","node_dgnumber_label")
1184                         .attr('x',1).attr('y',-43)
1185                         .style({
1186                                 'stroke-width': 0,
1187                                 /*'fill': '#2E4F83',*/
1188                                 'fill': 'blue',
1189                                 'font-size':'12pt',
1190                                 'stroke':'#000',
1191                                 'text-anchor':'start'
1192                         });
1193
1194                     var dgNumberTitle = dgNumber.append("title")
1195                                         .attr("class","node_dgnumber_title");
1196
1197                     //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
1198
1199                     if (d._def.inputs > 0) {
1200                         text.attr("x",38);
1201                         node.append("rect").attr("class","port port_input").attr("rx",3).attr("ry",3).attr("x",-5).attr("width",10).attr("height",10)
1202                             .on("mousedown",function(d){portMouseDown(d,1,0);})
1203                             .on("touchstart",function(d){portMouseDown(d,1,0);})
1204                             .on("mouseup",function(d){portMouseUp(d,1,0);} )
1205                             .on("touchend",function(d){portMouseUp(d,1,0);} )
1206                             .on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || mousedown_port_type != 1 ));})
1207                             .on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
1208                     }
1209
1210                     //node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
1211                     node.append("image").attr("class","node_error hidden").attr("xlink:href","icons/node-error.png").attr("x",0).attr("y",-6).attr("width",10).attr("height",9);
1212                     node.append("image").attr("class","node_changed hidden").attr("xlink:href","icons/node-changed.png").attr("x",12).attr("y",-6).attr("width",10).attr("height",10);
1213             });
1214
1215             node.each(function(d,i) {
1216                     if (d.dirty) {
1217                         //if (d.x < -50) deleteSelection();  // Delete nodes if dragged back to palette
1218                         if (d.resize) {
1219                             var l = d._def.label;
1220                             l = (typeof l === "function" ? l.call(d) : l)||"";
1221                             d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) );
1222                             d.h = Math.max(node_height,(d.outputs||0) * 15);
1223                         }
1224                         var thisNode = d3.select(this);
1225                         //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
1226                         thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
1227                         thisNode.selectAll(".node")
1228                             .attr("width",function(d){return d.w})
1229                             .attr("height",function(d){return d.h})
1230                             .classed("node_selected",function(d) { return d.selected; })
1231                             .classed("node_highlighted",function(d) { return d.highlighted; })
1232                         ;
1233                         //thisNode.selectAll(".node-gradient-top").attr("width",function(d){return d.w});
1234                         //thisNode.selectAll(".node-gradient-bottom").attr("width",function(d){return d.w}).attr("y",function(d){return d.h-30});
1235
1236                         thisNode.selectAll(".node_icon_group_right").attr('transform', function(d){return "translate("+(d.w-30)+",0)"});
1237                         thisNode.selectAll(".node_label_right").attr('x', function(d){return d.w-38});
1238                         //thisNode.selectAll(".node_icon_right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
1239                         //thisNode.selectAll(".node_icon_shade_right").attr("x",function(d){return d.w-30;});
1240                         //thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
1241
1242
1243                         var numOutputs = d.outputs;
1244                         var y = (d.h/2)-((numOutputs-1)/2)*13;
1245                         d.ports = d.ports || d3.range(numOutputs);
1246                         d._ports = thisNode.selectAll(".port_output").data(d.ports);
1247                         d._ports.enter().append("rect").attr("class","port port_output").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
1248                             .on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
1249                             .on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,0,i);}})() )
1250                             .on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
1251                             .on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,0,i);}})() )
1252                             .on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || mousedown_port_type !== 0 ));})
1253                             .on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
1254                         d._ports.exit().remove();
1255                         if (d._ports) {
1256                             numOutputs = d.outputs || 1;
1257                             y = (d.h/2)-((numOutputs-1)/2)*13;
1258                             var x = d.w - 5;
1259                             d._ports.each(function(d,i) {
1260                                     var port = d3.select(this);
1261                                     port.attr("y",(y+13*i)-5).attr("x",x);
1262                             });
1263                         }
1264                         thisNode.selectAll('text.node_label').text(function(d,i){
1265                                 if (d._def.label) {
1266                                     if (typeof d._def.label == "function") {
1267                                         return d._def.label.call(d);
1268                                     } else {
1269                                         return d._def.label;
1270                                     }
1271                                 }
1272                                 return "";
1273                         })
1274                             .attr('y', function(d){return (d.h/2)-1;})
1275                             .attr('class',function(d){
1276                                 return 'node_label'+
1277                                 (d._def.align?' node_label_'+d._def.align:'')+
1278                                 (d._def.labelStyle?' '+(typeof d._def.labelStyle == "function" ? d._def.labelStyle.call(d):d._def.labelStyle):'') ;
1279                         });
1280                         thisNode.selectAll(".node_tools").attr("x",function(d){return d.w-35;}).attr("y",function(d){return d.h-20;});
1281
1282                         thisNode.selectAll(".node_changed")
1283                             .attr("x",function(d){return d.w-10})
1284                             .classed("hidden",function(d) { return !d.changed; });
1285
1286                         thisNode.selectAll(".node_error")
1287                             .attr("x",function(d){return d.w-10-(d.changed?13:0)})
1288                             .classed("hidden",function(d) { return d.valid; });
1289
1290                         thisNode.selectAll(".port_input").each(function(d,i) {
1291                                 var port = d3.select(this);
1292                                 port.attr("y",function(d){return (d.h/2)-5;})
1293                         });
1294
1295                         thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
1296                         thisNode.selectAll(".node_icon_shade").attr("height",function(d){return d.h;});
1297                         thisNode.selectAll(".node_icon_shade_border").attr("d",function(d){ return "M "+(("right" == d._def.align) ?0:30)+" 1 l 0 "+(d.h-2)});
1298
1299
1300                         thisNode.selectAll('.node_right_button').attr("transform",function(d){
1301                                 var x = d.w-6;
1302                                 if (d._def.button.toggle && !d[d._def.button.toggle]) {
1303                                     x = x - 8;
1304                                 }
1305                                 return "translate("+x+",2)";
1306                         });
1307                         thisNode.selectAll('.node_right_button rect').attr("fill-opacity",function(d){
1308                                 if (d._def.button.toggle) {
1309                                     return d[d._def.button.toggle]?1:0.2;
1310                                 }
1311                                 return 1;
1312                         });
1313
1314                         //thisNode.selectAll('.node_right_button').attr("transform",function(d){return "translate("+(d.w - d._def.button.width.call(d))+","+0+")";}).attr("fill",function(d) {
1315                         //         return typeof d._def.button.color  === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color)
1316                         //});
1317
1318                         thisNode.selectAll('.node_badge_group').attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
1319                         thisNode.selectAll('text.node_badge_label').text(function(d,i) {
1320                             if (d._def.badge) {
1321                                 if (typeof d._def.badge == "function") {
1322                                     return d._def.badge.call(d);
1323                                 } else {
1324                                     return d._def.badge;
1325                                 }
1326                             }
1327                             return "";
1328                         });
1329                         if (!showStatus || !d.status) {
1330                             thisNode.selectAll('.node_status_group').style("display","none");
1331                         } else {
1332                             thisNode.selectAll('.node_status_group').style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
1333                             var fill = status_colours[d.status.fill]; // Only allow our colours for now
1334                             if (d.status.shape == null && fill == null) {
1335                                 thisNode.selectAll('.node_status').style("display","none");
1336                             } else {
1337                                 var style;
1338                                 if (d.status.shape == null || d.status.shape == "dot") {
1339                                     style = {
1340                                         display: "inline",
1341                                         fill: fill,
1342                                         stroke: fill
1343                                     };
1344                                 } else if (d.status.shape == "ring" ){
1345                                     style = {
1346                                         display: "inline",
1347                                         fill: '#fff',
1348                                         stroke: fill
1349                                     }
1350                                 }
1351                                 thisNode.selectAll('.node_status').style(style);
1352                             }
1353                             if (d.status.text) {
1354                                 thisNode.selectAll('.node_status_label').text(d.status.text);
1355                             } else {
1356                                 thisNode.selectAll('.node_status_label').text("");
1357                             }
1358                         }
1359                                 //console.dir("d value");
1360                                 //console.dir(d);
1361                             if (showNumbers && d.dgnumber != null && d.dgnumber != undefined  && d.dgnumber.length >0) {
1362                                         thisNode.selectAll('.node_dgnumber_group').style("display","inline").attr("transform","translate(9,"+(d.h+9)+")");
1363                                         thisNode.selectAll('.node_dgnumber_label').text(d.dgnumber.toString());
1364                                         var dgnumberList = d.dgnumber;
1365                                         var dgnum = "";
1366                                         if(dgnumberList != null && dgnumberList.length >=1){
1367                                                 dgnum = dgnumberList[0];
1368                                                 thisNode.select('.node_dgnumber_label').text(dgnum);
1369                                                 //console.log(dgnumberList);
1370                                                 thisNode.select('.node_dgnumber_title').text(dgnumberList);
1371                                         }
1372                                 /*
1373                                 if(d.dgnumber.length > 1){
1374                                         thisNode.selectAll('.node_dgnumber_group').style("display","inline").attr("transform","translate(9,"+(d.h-15)+")");
1375                                         thisNode.selectAll('.node_dgnumber_label').text(d.dgnumber.toString());
1376                                 }else{
1377                                         thisNode.selectAll('.node_dgnumber_group').style("display","inline").attr("transform","translate(9,"+(d.h+9)+")");
1378                                         thisNode.selectAll('.node_dgnumber_label').text(d.dgnumber.toString());
1379                                 }
1380                                 */
1381                             } else {
1382                                 //console.log("fhfjhfjh ");
1383                                 thisNode.select('.node_dgnumber').style("display","none");
1384                                 thisNode.select('.node_dgnumber_label').text("");
1385                                 thisNode.select('.node_dgnumber_title').text("");
1386                             }
1387
1388                         d.dirty = false;
1389                     }
1390             });
1391         }
1392
1393         var link = vis.selectAll(".link").data(RED.nodes.links.filter(function(d) { return d.source.z == activeWorkspace && d.target.z == activeWorkspace }),function(d) { return d.source.id+":"+d.sourcePort+":"+d.target.id;});
1394
1395         var linkEnter = link.enter().insert("g",".node").attr("class","link");
1396
1397         linkEnter.each(function(d,i) {
1398             var l = d3.select(this);
1399             l.append("svg:path").attr("class","link_background link_path")
1400                .on("mousedown",function(d) {
1401                     mousedown_link = d;
1402                     clearSelection();
1403                     selected_link = mousedown_link;
1404                     updateSelection();
1405                     redraw();
1406                     d3.event.stopPropagation();
1407                 })
1408                 .on("touchstart",function(d) {
1409                     mousedown_link = d;
1410                     clearSelection();
1411                     selected_link = mousedown_link;
1412                     updateSelection();
1413                     redraw();
1414                     d3.event.stopPropagation();
1415                 });
1416             l.append("svg:path").attr("class","link_outline link_path");
1417             l.append("svg:path").attr("class","link_line link_path");
1418         });
1419
1420         link.exit().remove();
1421
1422         var links = vis.selectAll(".link_path")
1423         links.attr("d",function(d){
1424                 var numOutputs = d.source.outputs || 1;
1425                 var sourcePort = d.sourcePort || 0;
1426                 var y = -((numOutputs-1)/2)*13 +13*sourcePort;
1427
1428                 var dy = d.target.y-(d.source.y+y);
1429                 var dx = (d.target.x-d.target.w/2)-(d.source.x+d.source.w/2);
1430                 var delta = Math.sqrt(dy*dy+dx*dx);
1431                 var scale = lineCurveScale;
1432                 var scaleY = 0;
1433                 if (delta < node_width) {
1434                     scale = 0.75-0.75*((node_width-delta)/node_width);
1435                 }
1436
1437                 if (dx < 0) {
1438                     scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
1439                     if (Math.abs(dy) < 3*node_height) {
1440                         scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
1441                     }
1442                 }
1443
1444                 d.x1 = d.source.x+d.source.w/2;
1445                 d.y1 = d.source.y+y;
1446                 d.x2 = d.target.x-d.target.w/2;
1447                 d.y2 = d.target.y;
1448
1449                 return "M "+(d.source.x+d.source.w/2)+" "+(d.source.y+y)+
1450                     " C "+(d.source.x+d.source.w/2+scale*node_width)+" "+(d.source.y+y+scaleY*node_height)+" "+
1451                     (d.target.x-d.target.w/2-scale*node_width)+" "+(d.target.y-scaleY*node_height)+" "+
1452                     (d.target.x-d.target.w/2)+" "+d.target.y;
1453         })
1454
1455         link.classed("link_selected", function(d) { return d === selected_link || d.selected; });
1456         link.classed("link_unknown",function(d) { return d.target.type == "unknown" || d.source.type == "unknown"});
1457
1458         if (d3.event) {
1459             d3.event.preventDefault();
1460         }
1461     }
1462
1463     RED.keyboard.add(/* z */ 90,{ctrl:true},function(){RED.history.pop();});
1464     RED.keyboard.add(/* a */ 65,{ctrl:true},function(){selectAll();d3.event.preventDefault();});
1465     RED.keyboard.add(/* = */ 187,{ctrl:true},function(){zoomIn();d3.event.preventDefault();});
1466     RED.keyboard.add(/* - */ 189,{ctrl:true},function(){zoomOut();d3.event.preventDefault();});
1467     RED.keyboard.add(/* 0 */ 48,{ctrl:true},function(){zoomZero();d3.event.preventDefault();});
1468     RED.keyboard.add(/* v */ 86,{ctrl:true},function(){importNodes(clipboard);d3.event.preventDefault();});
1469     RED.keyboard.add(/* e */ 69,{ctrl:true},function(){showExportNodesDialog();d3.event.preventDefault();});
1470     RED.keyboard.add(/* i */ 73,{ctrl:true},function(){showImportNodesDialog();d3.event.preventDefault();});
1471     RED.keyboard.add(/* B */ 66,{ctrl:true},function(){RED.view.showDgNumberDialog();d3.event.preventDefault();});
1472     RED.keyboard.add(/* [ */ 219,{ctrl:true},function(){RED.view.showSearchTextDialog();d3.event.preventDefault();});
1473     RED.keyboard.add(/* O */ 79,{ctrl:true},function(){RED.view.showRequestTemplateDialog();d3.event.preventDefault();});
1474
1475
1476     // TODO: 'dirty' should be a property of RED.nodes - with an event callback for ui hooks
1477     function setDirty(d) {
1478         dirty = d;
1479         if (dirty) {
1480             $("#btn-deploy").removeClass("disabled");
1481         } else {
1482             $("#btn-deploy").addClass("disabled");
1483         }
1484     }
1485
1486     /**
1487      * Imports a new collection of nodes from a JSON String.
1488      *  - all get new IDs assigned
1489      *  - all 'selected'
1490      *  - attached to mouse for placing - 'IMPORT_DRAGGING'
1491      */
1492     function importNodes(newNodesStr,touchImport) {
1493         try {
1494             var result = RED.nodes.import(newNodesStr,true);
1495             if (result) {
1496                 var new_nodes = result[0];
1497                 var new_links = result[1];
1498                 var new_workspaces = result[2];
1499
1500                 var new_ms = new_nodes.filter(function(n) { return n.z == activeWorkspace }).map(function(n) { return {n:n};});
1501                 var new_node_ids = new_nodes.map(function(n){ return n.id; });
1502
1503                 // TODO: pick a more sensible root node
1504                 if (new_ms.length > 0) {
1505                     var root_node = new_ms[0].n;
1506                     var dx = root_node.x;
1507                     var dy = root_node.y;
1508
1509                     if (mouse_position == null) {
1510                         mouse_position = [0,0];
1511                     }
1512
1513                     var minX = 0;
1514                     var minY = 0;
1515                     var i;
1516                     var node;
1517
1518                     for (i=0;i<new_ms.length;i++) {
1519                         node = new_ms[i];
1520                         node.n.selected = true;
1521                         node.n.changed = true;
1522                         node.n.x -= dx - mouse_position[0];
1523                         node.n.y -= dy - mouse_position[1];
1524                         node.dx = node.n.x - mouse_position[0];
1525                         node.dy = node.n.y - mouse_position[1];
1526                         minX = Math.min(node.n.x-node_width/2-5,minX);
1527                         minY = Math.min(node.n.y-node_height/2-5,minY);
1528                     }
1529                     for (i=0;i<new_ms.length;i++) {
1530                         node = new_ms[i];
1531                         node.n.x -= minX;
1532                         node.n.y -= minY;
1533                         node.dx -= minX;
1534                         node.dy -= minY;
1535                     }
1536                     if (!touchImport) {
1537                         mouse_mode = RED.state.IMPORT_DRAGGING;
1538                     }
1539
1540                     RED.keyboard.add(/* ESCAPE */ 27,function(){
1541                             RED.keyboard.remove(/* ESCAPE */ 27);
1542                             clearSelection();
1543                             RED.history.pop();
1544                             mouse_mode = 0;
1545                     });
1546                     clearSelection();
1547                     moving_set = new_ms;
1548                 }
1549
1550                 RED.history.push({t:'add',nodes:new_node_ids,links:new_links,workspaces:new_workspaces,dirty:RED.view.dirty()});
1551
1552
1553                 redraw();
1554             }
1555         } catch(error) {
1556             console.log(error.stack);
1557             RED.notify("<strong>Error</strong>: "+error,"error");
1558         }
1559     }
1560
1561     function showExportNodesDialog() {
1562         mouse_mode = RED.state.EXPORT;
1563         var nns = RED.nodes.createExportableNodeSet(moving_set);
1564         $("#dialog-form").html($("script[data-template-name='export-clipboard-dialog']").html());
1565         $("#node-input-export").val(JSON.stringify(nns));
1566         $("#node-input-export").focus(function() {
1567                 var textarea = $(this);
1568                 textarea.select();
1569                 textarea.mouseup(function() {
1570                         textarea.unbind("mouseup");
1571                         return false;
1572                 });
1573         });
1574         $( "#dialog" ).dialog("option","title","Export nodes to clipboard").dialog( "open" );
1575         $("#node-input-export").focus();
1576     }
1577
1578     function showExportNodesLibraryDialog() {
1579         mouse_mode = RED.state.EXPORT;
1580         var nns = RED.nodes.createExportableNodeSet(moving_set);
1581         $("#dialog-form").html($("script[data-template-name='export-library-dialog']").html());
1582         $("#node-input-filename").attr('nodes',JSON.stringify(nns));
1583         $( "#dialog" ).dialog("option","title","Export nodes to library").dialog( "open" );
1584     }
1585
1586     function showImportNodesDialog() {
1587         mouse_mode = RED.state.IMPORT;
1588         $("#dialog-form").html($("script[data-template-name='import-dialog']").html());
1589         $("#node-input-import").val("");
1590         $( "#dialog" ).dialog("option","title","Import nodes").dialog( "open" );
1591     }
1592
1593     function showRenameWorkspaceDialog(id) {
1594         var ws = RED.nodes.workspace(id);
1595         $( "#node-dialog-rename-workspace" ).dialog("option","workspace",ws);
1596
1597         if (workspace_tabs.count() == 1) {
1598             $( "#node-dialog-rename-workspace").next().find(".leftButton")
1599                 .prop('disabled',true)
1600                 .addClass("ui-state-disabled");
1601         } else {
1602             $( "#node-dialog-rename-workspace").next().find(".leftButton")
1603                 .prop('disabled',false)
1604                 .removeClass("ui-state-disabled");
1605         }
1606
1607         $( "#node-input-workspace-name" ).val(ws.label);
1608         $( "#node-dialog-rename-workspace" ).dialog("open");
1609     }
1610
1611     $("#node-dialog-rename-workspace form" ).submit(function(e) { e.preventDefault();});
1612     $( "#node-dialog-rename-workspace" ).dialog({
1613         modal: true,
1614         autoOpen: false,
1615         width: 500,
1616         title: "Rename sheet",
1617         buttons: [
1618             {
1619                 class: 'leftButton',
1620                 text: "Delete",
1621                 click: function() {
1622                     var workspace = $(this).dialog('option','workspace');
1623                     $( this ).dialog( "close" );
1624                     deleteWorkspace(workspace.id);
1625                 }
1626             },
1627             {
1628                 text: "Ok",
1629                 click: function() {
1630                     var workspace = $(this).dialog('option','workspace');
1631                     var label = $( "#node-input-workspace-name" ).val();
1632                     if (workspace.label != label) {
1633                         workspace.label = label;
1634                         var link = $("#workspace-tabs a[href='#"+workspace.id+"']");
1635                         link.attr("title",label);
1636                         link.text(label);
1637                         RED.view.dirty(true);
1638                     }
1639                     $( this ).dialog( "close" );
1640                 }
1641             },
1642             {
1643                 text: "Cancel",
1644                 click: function() {
1645                     $( this ).dialog( "close" );
1646                 }
1647             }
1648         ],
1649         open: function(e) {
1650             RED.keyboard.disable();
1651         },
1652         close: function(e) {
1653             RED.keyboard.enable();
1654         }
1655     });
1656
1657
1658     $( "#node-dialog-delete-workspace" ).dialog({
1659         modal: true,
1660         autoOpen: false,
1661         width: 500,
1662         title: "Confirm delete",
1663         buttons: [
1664             {
1665                 text: "Ok",
1666                 click: function() {
1667                     var workspace = $(this).dialog('option','workspace');
1668                     RED.view.removeWorkspace(workspace);
1669                     var historyEvent = RED.nodes.removeWorkspace(workspace.id);
1670                     historyEvent.t = 'delete';
1671                     historyEvent.dirty = dirty;
1672                     historyEvent.workspaces = [workspace];
1673                     RED.history.push(historyEvent);
1674                     RED.view.dirty(true);
1675                     $( this ).dialog( "close" );
1676                 }
1677             },
1678             {
1679                 text: "Cancel",
1680                 click: function() {
1681                     $( this ).dialog( "close" );
1682                 }
1683             }
1684         ],
1685         open: function(e) {
1686             RED.keyboard.disable();
1687         },
1688         close: function(e) {
1689             RED.keyboard.enable();
1690         }
1691
1692     });
1693     return {
1694         state:function(state) {
1695             if (state == null) {
1696                 return mouse_mode
1697             } else {
1698                 mouse_mode = state;
1699             }
1700         },
1701         addWorkspace: function(ws) {
1702             workspace_tabs.addTab(ws);
1703             workspace_tabs.resize();
1704         },
1705         removeWorkspace: function(ws) {
1706             workspace_tabs.removeTab(ws.id);
1707         },
1708         getWorkspace: function() {
1709             return activeWorkspace;
1710         },
1711         setIsImportAction: function(iaction) {
1712             isImportAction = iaction ;
1713         },
1714         getIsImportAction: function() {
1715             return isImportAction ;
1716         },
1717         showWorkspace: function(id) {
1718             workspace_tabs.activateTab(id);
1719         },
1720         redraw:redraw,
1721         dirty: function(d) {
1722             if (d == null) {
1723                 return dirty;
1724             } else {
1725                 setDirty(d);
1726             }
1727         },
1728         importNodes: importNodes,
1729         resize: function() {
1730             workspace_tabs.resize();
1731         },
1732         status: function(s) {
1733                 validateEachNodeXml();
1734             showStatus = s;
1735             RED.nodes.eachNode(function(n) { n.dirty = true;});
1736             //TODO: subscribe/unsubscribe here
1737             redraw();
1738         },
1739         showYangUploadDialog:function showYangUploadDialog(){
1740                 $(function() {
1741                         var htmlStr= "<div id='yang-upload-div' style='width:375;height:225'>" +
1742                         '<form id="uploadForm" name="uploadForm" enctype="multipart/form-data" action="/api/uploadyang" method="post" >' +
1743                         "<input id='yang-file-id' name='yangFile' type='file' accept='.yang,.zip'><p style='font-size:0.7em'><i>For Module depending on multiple yang files, zip them and upload the zip file</i</p><br><br><br><br><br><p id='yang-upload-status'></p>" +
1744                         //'<input id="upload-yang-button-id"  style="font-size:1em;font-weight:bold" type="button" value="Upload Yang" name="upload-yang-button">' +
1745                         "</form></div>";
1746
1747                         $("#yang-upload-dialog").dialog({
1748                                 modal:true,
1749                                 autoOpen :false,
1750                                 title: "Upload Yang",
1751                                 width: 500,
1752                                 height: 260,
1753                                 minWidth : 300,
1754                                 minHeight :260,
1755                                 buttons :[
1756                                         {
1757                                                 text: "Upload Yang",
1758                                                 click: function() {
1759                                                         if( document.getElementById("yang-file-id").files.length == 0 ){
1760                                                                 $("#yang-upload-status").html("<span>No files selected.</span>");
1761                                                                 return ;
1762                                                         }
1763                                                         $('#yang-upload-dialog').parent().find('.ui-dialog-buttonpane button:first').button("disable");
1764                                                         //$("#yang-upload-status").empty().text("File is uploading...");
1765                                                         $("#yang-upload-status").html("<span>Processing...Please wait</span><img src='images/page-loading.gif'>");
1766                                                         $.ajax({
1767                                                                 url: "/api/uploadyang",
1768                                                                 type: "POST",
1769                                                                 data: new FormData(document.forms['uploadForm']),
1770                                                                 contentType: false,
1771                                                                 cache: false,
1772                                                                 processData:false,
1773                                                                 success: function(data) {
1774                                                                         $("#yang-upload-status").html("");
1775                                                                         $("#yang-upload-status").text(data.msg);
1776                                                                         $('#yang-upload-dialog').parent().find('.ui-dialog-buttonpane button:first').button("enable");
1777                                                                 /*
1778                                                                         sliValuesObj = {};
1779                                                                         rpcValues = {};
1780                                                                         reqInputValues = {};
1781                                                                         for(var i=0;i<data.sliValuesObj.length;i++){
1782                                                                                 var moduleName = data.sliValuesObj[i].moduleName;
1783                                                                                 sliValuesObj[moduleName] = data.sliValuesObj[i][moduleName + '_PROPS'];
1784                                                                                 rpcValues[moduleName] = data.sliValuesObj[i][ moduleName +'_RPCS'];
1785                                                                                 for(var k=0;rpcValues[moduleName] != undefined && k<rpcValues[moduleName].length;k++){
1786                                                                                         var rpcName = rpcValues[moduleName][k];
1787                                                                                         reqInputValues[moduleName + "_" + rpcName] = data.sliValuesObj[i][rpcName +"-input"];
1788                                                                                 }
1789                                                                         }
1790                                                                  */
1791                                                                         //close the yang upload dialogog box and open the load dialogbox
1792                                                                         $('#yang-upload-dialog').dialog("close");
1793                                                                         $("#btn-available-yang-modules").trigger("click");
1794                                                                 },
1795                                                                 error:function (xhr, desc, err){
1796                                                                         $("#yang-upload-status").html(err);
1797                                                                         $('#yang-upload-dialog').parent().find('.ui-dialog-buttonpane button:first').button("enable");
1798                                                                 }
1799                                                         });
1800                                                 }
1801                                         },
1802                                         {
1803                                                 text: "Close",
1804                                                 click: function() {
1805                                                         $("#yang-upload-dialog").dialog("close");
1806                                                 }
1807                                         }
1808                                         ]
1809                         }).dialog("open").html(htmlStr);
1810                 });
1811         },
1812         showDgNumberDialog: function showDgNumberDialog(){
1813         $(function() {
1814                 var isLoopDetected = detectLoop();
1815                 console.log("isLoopDetected:" + isLoopDetected);
1816                 if(isLoopDetected){
1817                         return false;
1818                 }
1819                 updateDgNumbers();
1820         var htmlStr="<div id='find-dgnumber-div' style='width:375;height:225'><label>DG Number</label><input id='dgnumber-val-id' type='text' value=''><p id='find-dgnumber-status' style='color:red'></p></div>";
1821         $("#dgnumber-find-dialog").dialog({
1822                 modal:true,
1823                 autoOpen :false,
1824                 title: "Find Node By DGNumber",
1825                 width: 300,
1826                 height: 215,
1827                 minWidth : 300,
1828                 minHeight :215,
1829                 buttons :[
1830                         {
1831                         text: "Find",
1832                         click: function() {
1833                                 var dgnumVal = $("#dgnumber-val-id").val();
1834                                 $("#find-dgnumber-status").text("");
1835                                 if(dgnumVal != undefined &&  dgnumVal != '' && dgnumVal != ''){
1836                                         dgnumVal = dgnumVal.trim();
1837                                 }else{
1838                                         dgnumVal ="";
1839                                 }
1840
1841                                 var dgNumberFound = false;
1842                                 var node = vis.selectAll(".nodegroup").data(RED.nodes.nodes.filter(function(d) { return d.z == activeWorkspace }),function(d){return d.id});
1843                                 node.each(function(d,i) {
1844                                         var thisNode = d3.select(this);
1845                                         var dgn = d.dgnumber;
1846
1847                                         if(dgn != undefined && typeof dgn == 'object'){
1848                                                 var found = false;
1849                                                 for(var k=0;k<dgn.length;k++){
1850                                                         if(dgn[k] == dgnumVal){
1851                                                                 found = true;
1852                                                                 break;
1853                                                         }
1854                                                 }
1855                                                 if(found){
1856                                                         //thisNode.select("rect").style({"stroke":"blue","stroke-width" :"3","stroke-dasharray":"5,1"});
1857                                                         //$("#" + d.id).find("rect").attr("class","node-found-selected");
1858                                                         //$("#" + d.id).find("rect").attr("class","node node_selected");
1859                                                         //thisNode.select("rect").attr("class","node node_selected");
1860                                                         thisNode.select("rect").attr("class","node node_found");
1861                                                         document.getElementById( d.id ).scrollIntoView();
1862                                                         $("#dgnumber-find-dialog").dialog("close");
1863
1864                                                         //display the node edit dialogbox
1865                                                         RED.editor.edit(d);
1866                                                         dgNumberFound = true;
1867                                                 }else{
1868                                                         //thisNode.select("rect").style({"stroke":"#999","stroke-width" :"2","stroke-dasharray":"none"});
1869                                                         //$("#" + d.id ).find("rect").attr("class","node-found-clear");
1870                                                         thisNode.select("rect").attr("class","node");
1871                                                         //$("#" + d.id ).find("rect").attr("class","node");
1872                                                         //$("#find-dgnumber-status").text("DGNumber :" + dgnumVal + " Not found");
1873
1874                                                 }
1875                                         }
1876                                 });
1877                                 if(!dgNumberFound){
1878                                         $("#find-dgnumber-status").text("DGNumber :" + dgnumVal + " Not found");
1879                                 }
1880                         }
1881                         },
1882                         {
1883                         text: "Close",
1884                         click: function() {
1885                                 $("#dgnumber-find-dialog").dialog("close");
1886                         }
1887                         }
1888                 ],
1889                 open:function(){
1890                         //Bind the Enter key to Find button
1891                         $('#dgnumber-find-dialog').keypress(function(e) {
1892                                if (e.keyCode == $.ui.keyCode.ENTER) {
1893                                         $('#dgnumber-find-dialog').parent().find('.ui-dialog-buttonpane button:first').click();
1894                                                 return false;
1895                                         }
1896                         });
1897                         $(function(){
1898                                 //set focus on the input box
1899                                 $("#dgnumber-val-id").focus();
1900                         });
1901                 }
1902                 }).dialog("open").html(htmlStr);
1903         });
1904         },
1905         showSearchTextDialog: function showSearchTextDialog(){
1906         $(function() {
1907                 var isLoopDetected = detectLoop();
1908                 console.log("isLoopDetected:" + isLoopDetected);
1909                 if(isLoopDetected){
1910                         return false;
1911                 }
1912                 updateDgNumbers();
1913         //console.log("In the showSearchTextDialog.");
1914         var htmlStr="<div id='search-text-div' style='width:675;height:525'><label>Search Text</label><input style='width:500px;' id='search-text-val-id' type='text' value=''><br><input id='ignore-case-id' type='checkbox' name='ignorecase' value='1' >Ignore Case<br><p id='search-text-status' style='color:red'></p></div>";
1915         //console.log("setting up search-text-dialog.");
1916         $("#search-text-dialog").dialog({
1917                 modal:true,
1918                 autoOpen :false,
1919                 title: "Search text in DG",
1920                 width: 600,
1921                 height: 515,
1922                 minWidth : 500,
1923                 minHeight :415,
1924                 buttons :[
1925                         {
1926                         text: "Search",
1927                         click: function() {
1928
1929                                 var node = vis.selectAll(".nodegroup").data(RED.nodes.nodes.filter(function(d) { return d.z == activeWorkspace }),function(d){return d.id});
1930                                 var searchText = $("#search-text-val-id").val();
1931                                 $("#search-text-status").text("");
1932                                 if(searchText != undefined &&  searchText != '' && searchText != ''){
1933                                         searchText = searchText.trim();
1934                                 }else{
1935                                         searchText ="";
1936                                         node.each(function(d,i) {
1937                                                 var thisNode = d3.select(this);
1938                                                 thisNode.select("rect").attr("class","node");
1939                                         });
1940                                         return;
1941                                 }
1942
1943                                 var foundSearchText = false;
1944                                 var foundInDgNumArr = [];
1945                                 //console.log("In search function");
1946                                 node.each(function(d,i) {
1947                                         var thisNode = d3.select(this);
1948                                         var dgn = d.dgnumber;
1949                                         var xml = d.xml;
1950                                         var nName = d.name;
1951
1952                                         var ignoreCase = $('#ignore-case-id').prop('checked')
1953                                         var options = 'g';
1954                                         if(ignoreCase){
1955                                                 options='gi';
1956                                         }
1957                                         var searchPattern = new RegExp(searchText, options );
1958                                         if(xml == undefined || xml == null){
1959                                                 xml = "";
1960                                         }
1961                                         if(nName == undefined || nName == null){
1962                                                 nName = "";
1963                                         }
1964                                         //console.log(searchPattern);
1965                                         var count1 = (xml.match(searchPattern) || []).length;
1966                                         //console.log(count1);
1967                                         var count2 = (nName.match(searchPattern) || []).length;
1968                                         //console.log(count2);
1969
1970                                         if(count1 >0 || count2 > 0){
1971                                                 thisNode.select("rect").attr("class","node text_found");
1972                                                 var dgn = d.dgnumber;
1973
1974                                                 var dgNumber =  dgn;
1975                                                 if(dgn != undefined && typeof dgn == 'object'){
1976                                                         console.log("DGNUMBERS:"  + dgn);
1977                                                         dgNumber =  dgn[0];
1978                                                 }
1979                                                 if(dgn != undefined ){
1980                                                         foundInDgNumArr.push(dgNumber);
1981                                                 }else{
1982                                                         foundInDgNumArr.push(d.type);
1983                                                 }
1984                                                 foundSearchText=true;
1985                                         }else{
1986                                                 thisNode.select("rect").attr("class","node");
1987                                         }
1988                                 });
1989                                 if(!foundSearchText){
1990                                         $("#search-text-status").text("Search Text :" + searchText  + " Not found");
1991                                 }else{
1992                                         //console.log("closing dialog");
1993                                         //$("#search-text-dialog").dialog("close");
1994                                         console.log(foundInDgNumArr);
1995                                         $("#search-text-status").text("Found in DG numbers :" + foundInDgNumArr);
1996                                 }
1997                         }
1998                         },
1999                         {
2000                         text: "Close",
2001                         click: function() {
2002                                 //console.log("closing dialog");
2003                                 $("#search-text-dialog").dialog("close");
2004                         }
2005                         }
2006                 ],
2007                 open:function(){
2008                         //console.log("called open.");
2009                         //Bind the Enter key to Find button
2010                         $('#search-text-dialog').keypress(function(e) {
2011                                if (e.keyCode == $.ui.keyCode.ENTER) {
2012                                         $('#search-text-dialog').parent().find('.ui-dialog-buttonpane button:first').click();
2013                                                 return false;
2014                                         }
2015                         });
2016                         $(function(){
2017                                 //set focus on the input box
2018                                 $("#search-text-id").focus();
2019                         });
2020                         //console.log("done open call.");
2021                 }
2022                 }).dialog('open').html(htmlStr);
2023         });
2024         },
2025         showRequestTemplateDialog: function showRequestTemplateDialog(){
2026         $(function() {
2027                 var currNodes =  RED.nodes.nodes.filter(function(d) { return d.z == activeWorkspace })
2028                 var moduleName = "";
2029                 var rpcName = "";
2030                 if(currNodes != null && currNodes.length > 1){
2031                         currNodes.forEach(function(n){
2032                                 if(n.type == 'service-logic'){
2033                                         moduleName = getAttributeValue(n.xml,"module");
2034                                 }else if(n.type == 'method'){
2035                                         rpcName = getAttributeValue(n.xml,"rpc");
2036                                 }
2037                         });
2038                 }
2039                 console.log("moduleName:" + moduleName);
2040                 console.log("rpcName:" + rpcName);
2041                 var inputValObj = reqInputValues[moduleName + "_" + rpcName];
2042                 var inputValStr = "Not found. Please make sure that the Module is loaded and the rpc has input.";
2043                 if(inputValObj != undefined && inputValObj != null){
2044                         inputValStr = "{\n\"input\" : " + JSON.stringify(inputValObj,null,4)+ "\n}";
2045                 }
2046
2047                 //var htmlStr="<div id='request-template-div' style='width:875px;height:575px'><textarea style='width:875px;height:575px'>" + inputValStr + "</textarea></div>"
2048                 //var htmlStr="<div id='request-template-div' style='width:750px;height:550px;font-weight:bold;font-size:1em'><pre>" + inputValStr + "</pre></div>"
2049                 var htmlStr="<textarea readonly='1' id='request-template-textarea' style='width:750px;height:550px;font-weight:bold;font-size:1em'>" + inputValStr + "</textarea>"
2050                 $("#request-input-dialog").dialog({
2051                         dialogClass :"no-close",
2052                         modal:true,
2053                         autoOpen :false,
2054                         title: "Request Template for Module:" + moduleName + "    RPC:" + rpcName,
2055                         width: 800,
2056                         height: "auto",
2057                         buttons :[
2058                         {
2059                                 text: "Close",
2060                                 click: function() {
2061                                         $("#request-input-dialog").dialog("close");
2062                                 }
2063                         }
2064                         ],
2065                         open:function(){
2066                                  $('#request-input-dialog').css('overflow', 'hidden');
2067                         }
2068                 }).dialog("open").html(htmlStr);
2069         });
2070         },
2071         showNumbers: function(s) {
2072                 console.log("showNumbers:" + s);
2073                 showNumbers = s;
2074             RED.nodes.eachNode(function(n) { n.dirty = true;});
2075             redraw();
2076         },
2077         diffJsonSinceImportDialog: function diffJsonSinceImportDialog(){
2078         var currDGObj = getCurrentFlowNodeSet();
2079         var currDGObjStr = JSON.stringify(currDGObj,null,4);
2080         //console.log(currDGObjStr);
2081         //$(function() {
2082 var htmlStr = "<div id=\"flex-container\">" +
2083     "<div><div id=\"editor1\"></div></div>" +
2084     "<div id=\"gutter\"></div>" +
2085     "<div><div id=\"editor2\"></div></div>" +
2086 "</div>" +
2087
2088 "<script>" +
2089 "$(function () {" +
2090     "var aceDiffer = new AceDiff({" +
2091         "mode: \"ace/mode/json\"," +
2092         "theme: \"ace/theme/eclipse\"," +
2093         "left: {" +
2094             "id: \"editor1\"," +
2095             "content: $(\"#example-content-1\").html()," +
2096             "editable: false," +
2097             "copyLinkEnabled: false" +
2098         "}," +
2099         "right: {" +
2100             "id: \"editor2\"," +
2101             "content: $(\"#example-content-2\").html()," +
2102             "editable: false," +
2103             "copyLinkEnabled: false" +
2104         "}," +
2105         "classes: {" +
2106             "gutterID: \"gutter\"" +
2107         "}" +
2108     "});" +
2109 "});" +
2110 "</script>" ;
2111 var origDGFile ="[]";
2112 var diffStatus = "DG JSON UNCHANGED";
2113         $.get("/readFile",{"filePath" : "orig_dgs/" + activeWorkspace })
2114                 .done(function( data ) {
2115                         if(data != undefined && data != null && data.output != undefined ){
2116                                 origDGFile= data.output;
2117                         }
2118                 })
2119                 .fail(function(err) {
2120                 })
2121                 .always(function() {
2122                         if(origDGFile != currDGObjStr){
2123                                 diffStatus="DG JSON CHANGED";
2124                         }
2125                         htmlStr += "<div id=\"example-content-1\" style=\"display: none\">" +
2126                                 origDGFile +
2127                                 "</div>" +
2128                                 "<div id=\"example-content-2\" style=\"display: none\">" +
2129                                 currDGObjStr +
2130                                 "</div>" ;
2131
2132 //var htmlStr='<object type="text/html" data="display-diff.html" ></object>';
2133
2134         $("#diff-browser-dialog").dialog({
2135                 modal:true,
2136                 autoOpen :false,
2137                 title: "Json Diff :" + diffStatus,
2138                 width: 1200,
2139                 height: 600,
2140                 minWidth :1200 ,
2141                 minHeight :600,
2142                 buttons :[
2143                         {
2144                         text: "Close",
2145                         click: function() {
2146                                 //$( this ).dialog( "close" );
2147                                 $("#diff-browser-dialog").dialog("close");
2148                         }
2149                         }
2150                 ],
2151                 open:function(){
2152                         $('#diff-browser-dialog').keypress(function(e) {
2153                                if (e.keyCode == $.ui.keyCode.ENTER) {
2154                                         $('#diff-browser-dialog').parent().find('.ui-dialog-buttonpane button:first').click();
2155                                                 return false;
2156                                         }
2157                         });
2158                 }
2159                 }).dialog('open').html(htmlStr);
2160                 });
2161         //});
2162         },
2163         diffXmlSinceImportDialog: function diffXmlSinceImportDialog(){
2164         var currDGObj = getCurrentFlowNodeSet();
2165         //console.dir(currDGObj);
2166         var currDGObjStr ="";
2167         try{
2168                  currDGObjStr = getNodeToXml(JSON.stringify(currDGObj));
2169         }catch(err){
2170         }
2171         var curr_formatted_xml = vkbeautify.xml(currDGObjStr);
2172         //console.log(curr_formatted_xml);
2173         //console.log(currDGObjStr);
2174         //$(function() {
2175 var htmlStr = "<div id=\"flex-container\">" +
2176     "<div><div id=\"editor1\"></div></div>" +
2177     "<div id=\"gutter\"></div>" +
2178     "<div><div id=\"editor2\"></div></div>" +
2179 "</div>" +
2180
2181 "<script>" +
2182 "$(function () {" +
2183     "var aceDiffer = new AceDiff({" +
2184         "mode: \"ace/mode/xml\"," +
2185         "theme: \"ace/theme/eclipse\"," +
2186         //"theme: \"ace/theme/twilight\"," +
2187         "left: {" +
2188             "id: \"editor1\"," +
2189             "content: $(\"#example-content-1\").html()," +
2190             "editable: false," +
2191             "copyLinkEnabled: false" +
2192         "}," +
2193         "right: {" +
2194             "id: \"editor2\"," +
2195             "content: $(\"#example-content-2\").html()," +
2196             "editable: false," +
2197             "copyLinkEnabled: false" +
2198         "}," +
2199         "classes: {" +
2200             "gutterID: \"gutter\"" +
2201         "}" +
2202     "});" +
2203 "});" +
2204 "</script>" ;
2205 var origXmlFile ="";
2206 var origDGFile ="";
2207 var diffStatus = "DG XML UNCHANGED";
2208         $.get("/readFile",{"filePath" : "orig_dgs/" + activeWorkspace })
2209                 .done(function( data ) {
2210                         if(data != undefined && data != null && data.output != undefined ){
2211                                 origDGFile= data.output;
2212                                 try{
2213                                         var origDGObjStr = getNodeToXml(origDGFile);
2214                                         origXmlFile = vkbeautify.xml(origDGObjStr);
2215                                 }catch(err){
2216                                 }
2217                         }
2218                 })
2219                 .fail(function(err) {
2220                 })
2221                 .always(function() {
2222                         if(origXmlFile != curr_formatted_xml){
2223                                 diffStatus = "DG XML CHANGED";
2224                         }
2225                         htmlStr += "<div id=\"example-content-1\" style=\"display: none\">" +
2226                                 origXmlFile +
2227                                 "</div>" +
2228                                 "<div id=\"example-content-2\" style=\"display: none\">" +
2229                                 curr_formatted_xml +
2230                                 "</div>" ;
2231
2232 //var htmlStr='<object type="text/html" data="display-diff.html" ></object>';
2233
2234         $("#diff-browser-dialog").dialog({
2235                 modal:true,
2236                 autoOpen :false,
2237                 title: "XML Diff",
2238                 width: 1200,
2239                 height: 600,
2240                 minWidth : 1200,
2241                 minHeight :600,
2242                 buttons :[
2243                         {
2244                         text: "Close",
2245                         click: function() {
2246                                 //$( this ).dialog( "close" );
2247                                 $("#diff-browser-dialog").dialog("close");
2248                         }
2249                         }
2250                 ],
2251                 open:function(){
2252                         $('#diff-browser-dialog').keypress(function(e) {
2253                                if (e.keyCode == $.ui.keyCode.ENTER) {
2254                                         $('#diff-browser-dialog').parent().find('.ui-dialog-buttonpane button:first').click();
2255                                                 return false;
2256                                         }
2257                         });
2258                 }
2259                 }).dialog('open').html(htmlStr);
2260                 });
2261         //});
2262         },
2263         showNodePalette: function(s) {
2264                 showNodePalette=s;
2265                 if(!s){
2266                         $("#main-container").addClass("palette-bar-closed");
2267                         //RED.menu.setSelected("btn-node-panel",true);
2268                 }else{
2269                         $("#main-container").removeClass("palette-bar-closed");
2270                 }
2271                 //console.log("showNodePalette:" + showNodePalette);
2272         },
2273         //TODO: should these move to an import/export module?
2274         showImportNodesDialog: showImportNodesDialog,
2275         showExportNodesDialog: showExportNodesDialog,
2276         showExportNodesLibraryDialog: showExportNodesLibraryDialog
2277     };
2278
2279 })();