@kumologica/sdk 3.1.0-alpha2 → 3.1.0-beta2

package/src/app/ui/editor-client/public/red/red.js

@@ -8949,7 +8949,8 @@ RED.panels = (function() {
       if (options.onclick) {
         options.onclick(tabs[thisTabA.attr('href').slice(1)]);
       }
-      activateTab(thisTabA);
+      activateTab(thisTabA, {scroll: false}); // no-scroll
+
       // Select the tab on the navigator
       // console.log('[tabs] selecting tab with id:', evt.currentTarget.id)
       RED.palette.navigator.selectTab(evt.currentTarget.id);
@@ -8990,13 +8991,9 @@ RED.panels = (function() {
       return false;
     }
 
-    function activateTab(link) {
-      // DX improvement - activate test workspace when test tab is selected
-      // if (link === 'test') {
-      //   $('#view-test-flow').click();
-      // }
-
-      // DX improvement - activate main workspace when trace message is being hovered
+    function activateTab(link, opts) {
+      const scrollAllowed = opts? opts.scroll: true;
+      // console.log(`[tabs::activateTab] link: ${link}... scrollAllowed: ${scrollAllowed}`);
 
       if (typeof link === 'string') {
         link = ul.find("a[href='#" + link + "']");
@@ -9005,6 +9002,7 @@ RED.panels = (function() {
         return;
       }
       if (!link.parent().hasClass('active')) {
+        // console.log(`[tabs::activateTab] link.parent is not active.`);
         ul.children().removeClass('active');
         ul.children().css({ transition: 'width 100ms' });
         link.parent().addClass('active');
@@ -9013,16 +9011,26 @@ RED.panels = (function() {
         $('#' + parentId + '-link-button').addClass('active selected');
         if (options.scrollable) {
           var pos = link.parent().position().left;
-          if (pos - 21 < 0) {
-            scrollContainer.animate({ scrollLeft: '+=' + (pos - 50) }, 300);
-          } else if (pos + 120 > scrollContainer.width()) {
-            scrollContainer.animate(
-              { scrollLeft: '+=' + (pos + 140 - scrollContainer.width()) },
-              300
-            );
+          // console.log(`[tabs::activateTab] pos: ${pos}`)
+          // const panelNavigatorWidth = 220;
+          // const tabNavigatorWidth = 21 * 2;
+          // const totalLeftWidth = panelNavigatorWidth + tabNavigatorWidth;
+          // console.log(`scrollContainer.width = `, scrollContainer.width());
+          if (scrollAllowed) {
+            // When starting the workspace, the width is 30, so we dont want to scroll. Just to make first tab fully visible and active
+            if (scrollContainer.width() < 100 ){
+              // console.log(`[tabs::activateTab] inital scroll`)
+              scrollContainer.animate({ scrollLeft: pos   }, 300);
+            }
+            else if (pos + 120 > scrollContainer.width()) {
+              // console.log(`[tabs::activateTab] jump to right`)
+              scrollContainer.animate({ scrollLeft: '+=' + (pos + 140 - scrollContainer.width()) }, 300);
+            } else {
+              // console.log(`[tabs::activateTab] jump to left`)
+              scrollContainer.animate({ scrollLeft: pos   }, 300);
+            }
           }
         }
-        // console.log('options(onchange)=', options)
         if (options.onchange) {
           options.onchange(tabs[link.attr('href').slice(1)]);
         }
@@ -9032,7 +9040,7 @@ RED.panels = (function() {
           ul.children().css({ transition: '' });
         }, 100);
       } else {
-        // console.log('options(onsame)=', options)
+        // console.log(`[tabs::activateTab] link.parent is active.`);
         if (options.onsame) {
           // hide the sidebar when you click on selected tab
           options.onsame(tabs[link.attr('href').slice(1)]); //RED.actions.invoke('core:hide-sidebar');
@@ -14942,15 +14950,16 @@ RED.h = handlers;
           hideWorkspace();
         }
       },
-      onreorder: function(oldOrder, newOrder) {
-        RED.history.push({
-          t: 'reorder',
-          order: oldOrder,
-          dirty: RED.nodes.dirty()
-        });
-        RED.nodes.dirty(true);
-        setWorkspaceOrder(newOrder);
-      },
+      // onreorder: function(oldOrder, newOrder) {
+      //   console.log('[workspace] onreorder disabled')
+      //   RED.history.push({
+      //     t: 'reorder',
+      //     order: oldOrder,
+      //     dirty: RED.nodes.dirty()
+      //   });
+      //   RED.nodes.dirty(true);
+      //   setWorkspaceOrder(newOrder);
+      // },
       onselect: function(selectedTabs) {
         RED.view.select(false);
         if (selectedTabs.length === 0) {
@@ -17029,7 +17038,7 @@ RED.h = handlers;
   var lastSelection = null;
 
   function updateSelection(ignoreEdit) {
-    // console.log(`[view] ==> updateSelection invoked! ignoreEdit=${ignoreEdit}`)
+    console.log(`[view::updateSelection] invoked -  ignoreEdit=${ignoreEdit}`)
     var selection = {};
 
     var workspaceSelection = RED.workspaces.selection();
@@ -17155,11 +17164,13 @@ RED.h = handlers;
     }else{
       if (selectionJSON !== lastSelection) {
         lastSelection = selectionJSON;
-        // console.log('[view] Selection has changed.', selection);
+        console.log('[view::updateSelection] Selection has changed from lastSelection:\n', lastSelection);
+        console.log('[view::updateSelection] Selection has changed to selectionJSON:\n', selectionJSON);
+
         RED.editor.edit(selection);
       }else{
         // User has clicked on the canvas or link
-        console.log('[view] Selection has not changed. Ignore');
+        console.log('[view::updateSelection] Selection has not changed. Ignore');
         // Just close the sidebar
         RED.editor.resetEditor();
       }
@@ -27338,12 +27349,14 @@ RED.sidebar.azure = (function () {
     $('#projectnav').on(
       'tree.select',
       function(event) {
+          event.stopImmediatePropagation();
           if (event.node) {
-              console.log('[palette-navigator] on select tree. event=', event);
+              // console.log(`[palette-navigator] Select Tab=(${event.node.id})`);
               // node was selected
               var node = event.node;
               if (node.id){
                 RED.workspaces.showSafe(node.id);
+                // selectTab(node.id);
               }
               // let ws = RED.nodes.workspace(node.id);
               // RED.workspaces.add(ws);
@@ -27351,7 +27364,6 @@ RED.sidebar.azure = (function () {
               
           }
           else {
-            event.stopPropagation();
             var prevNode = event.previous_node
             if (prevNode.id){
               RED.workspaces.showSafe(prevNode.id);
@@ -35629,7 +35641,7 @@ RED.notifications = (function() {
       }
       if (results.length > 0) {
         // Excluding tabs
-        results = results.filter((r) => r.node.type !== 'tab');
+        // results = results.filter((r) => r.node.type !== 'tab');
         for (i = 0; i < Math.min(results.length, 25); i++) {
           searchResults.editableList('addItem', results[i]);
         }
@@ -35667,7 +35679,7 @@ RED.notifications = (function() {
       dialog
     );
     searchInput = $(
-      '<input type="text" placeholder="Search nodes">'
+      '<input type="text" placeholder="Find (Nodes and Tabs)">'
     )
       .appendTo(searchDiv)
       .searchBox({
@@ -35717,6 +35729,7 @@ RED.notifications = (function() {
     var searchResultsDiv = $('<div>', {
       class: 'red-ui-search-results-container',
     }).appendTo(dialog);
+
     searchResults = $('<ol>', {
       id: 'search-result-list',
       style: 'position: absolute;top: 5px;bottom: 5px;left: 5px;right: 5px;',
@@ -35726,14 +35739,14 @@ RED.notifications = (function() {
         addButton: false,
         addItem: function (container, i, object) {
           var node = object.node;
+          console.log(`[search] node = `, node);
 
           if (node === undefined) {
             $('<div>', { class: 'red-ui-search-empty' })
               .text('No matches found')
               .appendTo(container);
-          } else if (node.type === 'tab') {
-            // exclude the tabs
-            return;
+          // } else if (node.type === 'tab') {
+          // }
           } else {
             var def = node._def;
             var div = $('<a>', {
@@ -35747,15 +35760,22 @@ RED.notifications = (function() {
             var colour = RED.utils.getNodeColor(node.type, def);
             var icon_url = RED.utils.getNodeIcon(def, node);
             if (node.type === 'tab') {
-              colour = '#C0DEED';
+              // colour = '#C0DEED';
+              var iconContainer = $('<div/>', {
+                class: 'palette_icon_container',
+              }).appendTo(nodeDiv);
+              RED.utils.createIconElement('icons/kumologica-core/kumologica-tab.png', iconContainer, true);
+            }else{
+              // Disable the background color, we want it transparent now
+              //nodeDiv.css('backgroundColor', colour);
+              var iconContainer = $('<div/>', {
+                class: 'palette_icon_container',
+              }).appendTo(nodeDiv);
+              RED.utils.createIconElement(icon_url, iconContainer, true);
             }
-            // Disable the background color, we want it transparent now
-            //nodeDiv.css('backgroundColor', colour);
+            
 
-            var iconContainer = $('<div/>', {
-              class: 'palette_icon_container',
-            }).appendTo(nodeDiv);
-            RED.utils.createIconElement(icon_url, iconContainer, true);
+            
 
             var contentDiv = $('<div>', {
               class: 'red-ui-search-result-description',
@@ -35766,7 +35786,7 @@ RED.notifications = (function() {
                 workspace = RED.nodes.subflow(node.z);
                 workspace = 'subflow:' + workspace.name;
               } else {
-                workspace = 'flow:' + workspace.label;
+                workspace = 'tab:' + workspace.label; //'flow:' + workspace.label
               }
               $('<div>', { class: 'red-ui-search-result-node-flow' })
                 .text(workspace)