Allow workspace tabs to be re-ordered

editor/js/history.js

@@ -273,6 +273,10 @@ RED.history = (function() {
                             RED.nodes.addLink(ev.removedLinks[i]);
                         }
                     }
+                } else if (ev.t == "reorder") {
+                    if (ev.order) {
+                        RED.workspaces.order(ev.order);
+                    }
                 }
                 Object.keys(modifiedTabs).forEach(function(id) {
                     var subflow = RED.nodes.subflow(id);

editor/js/nodes.js

@@ -21,6 +21,7 @@ RED.nodes = (function() {
     var links = [];
     var defaultWorkspace;
     var workspaces = {};
+    var workspacesOrder =[];
     var subflows = {};
 
     var dirty = false;
@@ -271,12 +272,15 @@ RED.nodes = (function() {
 
     function addWorkspace(ws) {
         workspaces[ws.id] = ws;
+        workspacesOrder.push(ws.id);
     }
     function getWorkspace(id) {
         return workspaces[id];
     }
     function removeWorkspace(id) {
         delete workspaces[id];
+        workspacesOrder.splice(workspacesOrder.indexOf(id),1);
+
         var removedNodes = [];
         var removedLinks = [];
         var n;
@@ -539,11 +543,9 @@ RED.nodes = (function() {
     function createCompleteNodeSet() {
         var nns = [];
         var i;
-        for (i in workspaces) {
+        for (i=0;i<workspacesOrder.length;i++) {
-            if (workspaces.hasOwnProperty(i)) {
+            if (workspaces[workspacesOrder[i]].type == "tab") {
-                if (workspaces[i].type == "tab") {
+                nns.push(workspaces[workspacesOrder[i]]);
-                    nns.push(workspaces[i]);
-                }
             }
         }
         for (i in subflows) {
@@ -987,6 +989,8 @@ RED.nodes = (function() {
 
         addWorkspace: addWorkspace,
         removeWorkspace: removeWorkspace,
+        getWorkspaceOrder: function() { return workspacesOrder },
+        setWorkspaceOrder: function(order) { workspacesOrder = order; },
         workspace: getWorkspace,
 
         addSubflow: addSubflow,
@@ -1019,10 +1023,8 @@ RED.nodes = (function() {
             }
         },
         eachWorkspace: function(cb) {
-            for (var id in workspaces) {
+            for (var i=0;i<workspacesOrder.length;i++) {
-                if (workspaces.hasOwnProperty(id)) {
+                cb(workspaces[workspacesOrder[i]]);
-                    cb(workspaces[id]);
-                }
             }
         },
 

editor/js/ui/tabs.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2015 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,7 +24,7 @@ RED.tabs = (function() {
         var currentTabWidth;
         var currentActiveTabWidth = 0;
 
-        var ul = $("#"+options.id)
+        var ul = $("#"+options.id);
         ul.addClass("red-ui-tabs");
         ul.children().first().addClass("active");
         ul.children().addClass("red-ui-tab");
@@ -118,6 +118,7 @@ RED.tabs = (function() {
             addTab: function(tab) {
                 tabs[tab.id] = tab;
                 var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
+                li.data("tabId",tab.id);
                 var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
                 if (tab.icon) {
                     $('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
@@ -142,6 +143,85 @@ RED.tabs = (function() {
                 if (ul.find("li.red-ui-tab").size() == 1) {
                     activateTab(link);
                 }
+                if (options.onreorder) {
+                    var originalTabOrder;
+                    var tabDragIndex;
+                    var tabElements = [];
+                    var startDragIndex;
+
+                    li.draggable({
+                        axis:"x",
+                        distance: 20,
+                        start: function(event,ui) {
+                            originalTabOrder = [];
+                            tabElements = [];
+                            ul.children().each(function(i) {
+                                tabElements[i] = {
+                                    el:$(this),
+                                    text: $(this).text(),
+                                    left: $(this).position().left,
+                                    width: $(this).width()
+                                };
+                                if ($(this).is(li)) {
+                                    tabDragIndex = i;
+                                    startDragIndex = i;
+                                }
+                                originalTabOrder.push($(this).data("tabId"));
+                            });
+                            ul.children().each(function(i) {
+                                if (i!==tabDragIndex) {
+                                    $(this).css({
+                                        position: 'absolute',
+                                        left: tabElements[i].left+"px",
+                                        width: tabElements[i].width+2,
+                                        transition: "left 0.3s"
+                                    });
+                                }
+
+                            })
+                            if (!li.hasClass('active')) {
+                                li.css({'zIndex':1});
+                            }
+                        },
+                        drag: function(event,ui) {
+                            ui.position.left += tabElements[tabDragIndex].left;
+                            var tabCenter = ui.position.left + tabElements[tabDragIndex].width/2;
+                            for (var i=0;i<tabElements.length;i++) {
+                                if (i === tabDragIndex) {
+                                    continue;
+                                }
+                                if (tabCenter > tabElements[i].left && tabCenter < tabElements[i].left+tabElements[i].width) {
+                                    if (i < tabDragIndex) {
+                                        tabElements[i].left += tabElements[tabDragIndex].width+8;
+                                        tabElements[tabDragIndex].el.detach().insertBefore(tabElements[i].el);
+                                    } else {
+                                        tabElements[i].left -= tabElements[tabDragIndex].width+8;
+                                        tabElements[tabDragIndex].el.detach().insertAfter(tabElements[i].el);
+                                    }
+                                    tabElements[i].el.css({left:tabElements[i].left+"px"});
+
+                                    tabElements.splice(i, 0, tabElements.splice(tabDragIndex, 1)[0]);
+
+                                    tabDragIndex = i;
+                                    break;
+                                }
+                            }
+
+                            // console.log(ui.position.left,ui.offset.left);
+                        },
+                        stop: function(event,ui) {
+                            ul.children().css({position:"relative",left:"",transition:""});
+                            if (!li.hasClass('active')) {
+                                li.css({zIndex:""});
+                            }
+                            updateTabWidths();
+                            if (startDragIndex !== tabDragIndex) {
+                                options.onreorder(originalTabOrder, $.makeArray(ul.children().map(function() { return $(this).data('tabId');})));
+                            }
+                            activateTab(tabElements[tabDragIndex].el.data('tabId'));
+                        }
+                    })
+                }
             },
             removeTab: removeTab,
             activateTab: activateTab,
@@ -158,6 +238,30 @@ RED.tabs = (function() {
                 tab.attr("title",label);
                 tab.find("span").text(label);
                 updateTabWidths();
+            },
+            order: function(order) {
+                var existingTabOrder = $.makeArray(ul.children().map(function() { return $(this).data('tabId');}));
+                if (existingTabOrder.length !== order.length) {
+                    return
+                }
+                var i;
+                var match = true;
+                for (i=0;i<order.length;i++) {
+                    if (order[i] !== existingTabOrder[i]) {
+                        match = false;
+                        break;
+                    }
+                }
+                if (match) {
+                    return;
+                }
+                var existingTabMap = {};
+                var existingTabs = ul.children().detach().each(function() {
+                    existingTabMap[$(this).data("tabId")] = $(this);
+                });
+                for (i=0;i<order.length;i++) {
+                    existingTabMap[order[i]].appendTo(ul);
+                }
             }
 
         }

editor/js/ui/workspaces.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2015 IBM Corp.
+ * Copyright 2015, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -113,6 +113,11 @@ RED.workspaces = (function() {
                 RED.menu.setDisabled("menu-item-workspace-delete",workspace_tabs.count() == 1);
                 RED.menu.removeItem("menu-item-workspace-menu-"+tab.id.replace(".","-"));
             },
+            onreorder: function(oldOrder, newOrder) {
+                RED.history.push({t:'reorder',order:oldOrder,dirty:RED.nodes.dirty()});
+                RED.nodes.dirty(true);
+                setWorkspaceOrder(newOrder);
+            },
             minimumActiveTabWidth: 150
         });
 
@@ -218,11 +223,18 @@ RED.workspaces = (function() {
         }
     }
 
+    function setWorkspaceOrder(order) {
+        RED.nodes.setWorkspaceOrder(order.filter(function(id) {
+            return RED.nodes.workspace(id) !== undefined;
+        }));
+        workspace_tabs.order(order);
+    }
+
     return {
         init: init,
         add: addWorkspace,
         remove: removeWorkspace,
-
+        order: setWorkspaceOrder,
         edit: function(id) {
             showRenameWorkspaceDialog(id||activeWorkspace);
         },

editor/sass/editor.scss

@@ -22,6 +22,7 @@
     bottom: 0px;
     right: 323px;
     width: 0;
+    z-index: 5;
 }
 .editor-tray {
     position:absolute;

editor/sass/tabs.scss

@@ -104,6 +104,7 @@ ul.red-ui-tabs li.active {
     background: $tab-background-active;
     font-weight: bold;
     border-bottom: 1px solid #fff;
+    z-index: 2;
 }
 ul.red-ui-tabs li.active a {
     color: #333;