Rename/Delete tab support

public/index.html

@@ -52,7 +52,7 @@
                     <li class="dropdown-submenu pull-left"><a tabindex="-1" href="#"><i class="icon-th-large"></i> Workspaces</a>
                         <ul class="dropdown-menu">
                             <li><a id="btn-workspace-add" tabindex="-1" href="#"><i class="icon-plus"></i> Add</a></li>
-                            <li><a id="btn-workspace-edit" tabindex="-1" href="#"><i class="icon-edit"></i> Edit</a></li>
+                            <li><a id="btn-workspace-edit" tabindex="-1" href="#"><i class="icon-edit"></i> Rename</a></li>
                             <li><a id="btn-workspace-delete" tabindex="-1" href="#"><i class="icon-minus"></i> Delete</a></li>
                             <li class="dropdown-submenu pull-left">
                                 <a tabindex="-1" href="#"><i class="icon-share-alt"></i> Switch to...</a>
@@ -246,6 +246,21 @@
         </div>
     </form>
 </div>
+<div id="node-dialog-rename-workspace" class="hide">
+    <form class="form-horizontal">
+        <div class="form-row">
+            <label for="node-input-workspace-name" ><i class="icon-tag"></i> Name:</label>
+            <input type="text" id="node-input-workspace-name">
+        </div>
+    </form>
+</div>
+<div id="node-dialog-delete-workspace" class="hide">
+    <form class="form-horizontal">
+        <div style="text-align: center; padding-top: 30px;">
+         Are you sure you want to delete '<span id="node-dialog-delete-workspace-name"></span>'?
+        </div>
+    </form>
+</div>
 
 <script type="text/x-red" data-template-name="export-clipboard-dialog">
     <div class="form-row">

public/red/nodes.js

@@ -98,7 +98,25 @@ RED.nodes = function() {
     function addWorkspace(ws) {
         workspaces[ws.id] = ws;
     }
-    
+    function getWorkspace(id) {
+        return workspaces[id];
+    }
+    function removeWorkspace(id) {
+        delete workspaces[id];
+        var removedNodes = [];
+        var removedLinks = [];
+        for (var n in nodes) {
+            var node = nodes[n];
+            if (node.z == id) {
+                removedNodes.push(node);
+            }
+        }
+        for (var n in removedNodes) {
+            var rmlinks = removeNode(removedNodes[n].id);
+            removedLinks = removedLinks.concat(rmlinks);
+        }
+        return {nodes:removedNodes,links:removedLinks};
+    }
     function getAllFlowNodes(node) {
         var visited = {};
         visited[node.id] = true;
@@ -226,7 +244,7 @@ RED.nodes = function() {
                 }
             }
             if (defaultWorkspace == null) {
-                defaultWorkspace = { type:"workspace", id:getID(), label:"default" };
+                defaultWorkspace = { type:"workspace", id:getID(), label:"Workspace 1" };
                 addWorkspace(defaultWorkspace);
                 RED.view.addWorkspace(defaultWorkspace);
             }
@@ -322,6 +340,8 @@ RED.nodes = function() {
         remove: removeNode,
         removeLink: removeLink,
         addWorkspace: addWorkspace,
+        removeWorkspace: removeWorkspace,
+        workspace: getWorkspace,
         eachNode: function(cb) {
             for (var n in nodes) {
                 cb(nodes[n]);

public/red/ui/tabs.js

@@ -32,7 +32,7 @@ RED.tabs = function() {
         
         function onTabDblClick() {
             if (options.ondblclick) {
-                options.ondblclick($(this).attr('href'));
+                options.ondblclick($(this).attr('href').slice(1));
             }
         }
         
@@ -44,7 +44,7 @@ RED.tabs = function() {
                 ul.children().removeClass("active");
                 link.parent().addClass("active");
                 if (options.onchange) {
-                    options.onchange(link.attr('href'));
+                    options.onchange(link.attr('href').slice(1));
                 }
             }
 
@@ -77,6 +77,18 @@ RED.tabs = function() {
                     activateTab(link);
                 }
             },
+            removeTab: function(id) {
+                var li = ul.find("a[href='#"+id+"']").parent();
+                if (li.hasClass("active")) {
+                    var tab = li.prev();
+                    if (tab.size() == 0) {
+                        tab = li.next();
+                    }
+                    activateTab(tab.find("a"));
+                }
+                li.remove();
+                
+            },
             activateTab: activateTab,
             resize: updateTabWidths
         }

public/red/ui/view.js

@@ -70,10 +70,10 @@ RED.view = function() {
     var workspace_tabs = RED.tabs.create({
         id: "workspace-tabs",
         onchange: function(id) {
-            RED.view.setWorkspace(id.slice(1));
+            RED.view.setWorkspace(id);
         },
         ondblclick: function(id) {
-            console.log("DC:",id);
+            showRenameWorkspaceDialog(id);
         },
         onadd: function(tab) {
             var menuli = $("<li/>");
@@ -87,14 +87,28 @@ RED.view = function() {
         }
     });
     
+    var workspaceIndex = 0;
     $('#btn-workspace-add').on("click",function() {
         var tabId = RED.nodes.id();
-        var ws = {type:"workspace",id:tabId,label:"Workspace "+tabId};
+        do {
+            workspaceIndex += 1;
+        } while($("#workspace-tabs a[title='Workspace "+workspaceIndex+"']").size() != 0);
+        
+        var ws = {type:"workspace",id:tabId,label:"Workspace "+workspaceIndex};
         RED.nodes.addWorkspace(ws);
         workspace_tabs.addTab(ws);
         workspace_tabs.activateTab(tabId);
     });
+    $('#btn-workspace-edit').on("click",function() {
+        showRenameWorkspaceDialog(activeWorkspace);
+    });
     
+    $('#btn-workspace-delete').on("click",function() {
+        var ws = RED.nodes.workspace(activeWorkspace);
+        $( "#node-dialog-delete-workspace" ).dialog('option','workspace',ws);
+        $( "#node-dialog-delete-workspace-name" ).text(ws.label);
+        $( "#node-dialog-delete-workspace" ).dialog('open');
+    });
     
     //d3.select(window).on("keydown", keydown);
 
@@ -451,7 +465,6 @@ RED.view = function() {
 
         table += "<tr><td>Type</td><td>&nbsp;"+node.type+"</td></tr>";
         table += "<tr><td>ID</td><td>&nbsp;"+node.id+"</td></tr>";
-        table += "<tr><td>WS</td><td>&nbsp;"+node.z+"</td></tr>";
         table += '<tr class="blank"><td colspan="2">&nbsp;Properties</td></tr>';
         for (var n in node._def.defaults) {
             if ((n != "func")&&(n != "template")) {
@@ -983,6 +996,71 @@ RED.view = function() {
         $("#node-input-import").val("");
         $( "#dialog" ).dialog("option","title","Import nodes").dialog( "open" );
     }
+    
+    function showRenameWorkspaceDialog(id) {
+        var ws = RED.nodes.workspace(id);
+        $( "#node-dialog-rename-workspace" ).dialog("option","workspace",ws);
+        $( "#node-input-workspace-name" ).val(ws.label);
+        $( "#node-dialog-rename-workspace" ).dialog("open");
+    }
+    
+    
+    $("#node-dialog-rename-workspace form" ).submit(function(e) { e.preventDefault();});
+    $( "#node-dialog-rename-workspace" ).dialog({
+        modal: true,
+        autoOpen: false,
+        width: 500,
+        title: "Rename workspace",
+        buttons: [
+            {
+                text: "Ok",
+                click: function() {
+                    var workspace = $(this).dialog('option','workspace');
+                    var label = $( "#node-input-workspace-name" ).val();
+                    if (workspace.label != label) {
+                        workspace.label = label;
+                        var link = $("#workspace-tabs a[href='#"+workspace.id+"']");
+                        link.attr("title",label);
+                        link.text(label);
+                        RED.view.dirty(true);
+                    }
+                    $( this ).dialog( "close" );
+                }
+            },
+            {
+                text: "Cancel",
+                click: function() {
+                    $( this ).dialog( "close" );
+                }
+            }
+        ]
+    });
+    $( "#node-dialog-delete-workspace" ).dialog({
+        modal: true,
+        autoOpen: false,
+        width: 500,
+        title: "Confirm delete",
+        buttons: [
+            {
+                text: "Ok",
+                click: function() {
+                    var workspace = $(this).dialog('option','workspace');
+                    workspace_tabs.removeTab(workspace.id);
+                    // TODO: make undoable
+                    RED.nodes.removeWorkspace(workspace.id);
+                    RED.view.dirty(true);
+                    $( this ).dialog( "close" );
+                }
+            },
+            {
+                text: "Cancel",
+                click: function() {
+                    $( this ).dialog( "close" );
+                }
+            }
+        ]
+    });
+
 
     return {
         state:function(state) {