@kumologica/sdk 3.0.27-beta8 → 3.0.27-beta9

package/package.json

@@ -3,7 +3,7 @@
   "productName": "Kumologica Designer",
   "copyright": "Copyright 2020 Kumologica Pty Ltd, All Rights Reserved.",
   "author": "Kumologica Pty Ltd <contact@kumologica.com>",
-  "version": "3.0.27-beta8",
+  "version": "3.0.27-beta9",
   "description": "Kumologica Designer, harnessing Serverless for your cloud integration needs",
   "main": "src/app/main.js",
   "files": [
@@ -65,9 +65,9 @@
   "license": "Proprietary",
   "dependencies": {
     "@electron/remote": "^2.0.8",
-    "@kumologica/builder": "3.0.27-beta8",
-    "@kumologica/devkit": "3.0.27-beta8",
-    "@kumologica/runtime": "3.0.27-beta8",
+    "@kumologica/builder": "3.0.27-beta9",
+    "@kumologica/devkit": "3.0.27-beta9",
+    "@kumologica/runtime": "3.0.27-beta9",
     "adm-zip": "0.4.13",
     "ajv": "8.10.0",
     "aws-sdk": "2.513.0",

package/src/app/main-process/menu.js

@@ -117,7 +117,7 @@ let appTemplate = [
     submenu: [
       { role: 'reload' },
       { role: 'forcereload' },
-  //   { role: 'toggledevtools' },
+      { role: 'toggledevtools' },
       { type: 'separator' },
       { role: 'resetzoom' },
       { role: 'zoomin' },

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

@@ -9060,11 +9060,26 @@ RED.panels = (function() {
       }
     }
 
+    function getTabsMaxWidthAvailable() {
+      const workspaceWidth = $('#main-container').width();
+
+      const paletteWidth = $('#palette').is(':hidden')? 0 : $('#palette').width();
+      const sidebarWidth = $('#sidebar').is(':hidden')? 0 : $('#sidebar').width();
+      const sidebarShortcuts = $('#sidebar-shortcuts').width();
+      const occupied = paletteWidth + sidebarWidth + sidebarShortcuts;
+
+      return workspaceWidth - occupied;
+    }
+
     function updateTabWidths() {
       if (options.vertical) {
         return;
       }
       var tabs = ul.find('li.red-ui-tab');
+
+      // Update the width of the tabs container
+      $('#workspace').find('.red-ui-tabs').width(getTabsMaxWidthAvailable());
+
       var width = wrapper.width();
       var tabCount = tabs.size();
       var tabWidth;
@@ -9094,7 +9109,7 @@ RED.panels = (function() {
         currentTabWidth = (100 * tabWidth) / width + '%';
         currentActiveTabWidth = currentTabWidth + '%';
         if (options.scrollable) {
-          tabWidth = Math.max(tabWidth, 60);
+          tabWidth = Math.max(tabWidth, 150); // minimum width for the tab
           currentTabWidth = tabWidth + 'px';
           currentActiveTabWidth = 0;
           var listWidth = Math.max(
@@ -17144,7 +17159,7 @@ RED.h = handlers;
         RED.editor.edit(selection);
       }else{
         // User has clicked on the canvas or link
-        // console.log('[view] Selection has not changed. Ignore');
+        console.log('[view] Selection has not changed. Ignore');
         // Just close the sidebar
         RED.editor.resetEditor();
       }
@@ -20863,7 +20878,6 @@ RED.view.tools = (function() {
   var sidebar_tabs = RED.tabs.create({
     id: 'sidebar-tabs',
     onchange: function (tab) {
-      // console.log('[sidebar] - onChange | tab=', tab);
       $('#editor-stack').hide();
       $('#sidebar-content').children().hide();
       $('#sidebar-footer').children().hide();
@@ -20971,89 +20985,38 @@ RED.view.tools = (function() {
     RED.menu.removeItem('menu-item-view-menu-' + id);
   }
 
-  var sidebarSeparator = {};
-  sidebarSeparator.dragging = false;
+  // Dragable sidebar logic
+  let sidebarDragging = false;
+  let sidebarWidthP0 = null;
+  let delta = 0;
 
   $('#sidebar-separator').draggable({
     axis: 'x',
     start: function (event, ui) {
-      if (!startingPointSeparator){
-        startingPointSeparator = ui.position.left;
-      }
-      sidebarSeparator.closing = false;
-      sidebarSeparator.opening = false;
-      var winWidth = $(window).width();
-      sidebarSeparator.start = ui.position.left;
-      sidebarSeparator.workspaceWidth = $('#workspace').width();
-      sidebarSeparator.workspaceRight = parseInt($('#workspace').css('right'));
-      sidebarSeparator.dragging = true;
-
-      if (!RED.menu.isSelected('menu-item-sidebar')) {
-        sidebarSeparator.opening = true;
-        var newChartRight = 7;
-        $('#sidebar').addClass('closing');
-        $('#workspace').css('right', newChartRight);
-        $('#editor-stack').css('right', newChartRight + 1);
-        $('#sidebar').width(0);
-
-        RED.menu.setSelected('menu-item-sidebar', true);
-        RED.events.emit('sidebar:resize');
-      }
-      sidebarSeparator.width = $('#sidebar').width();
-      // console.log('Sidebar start point=', sidebarSeparator.start);
+      sidebarDragging = true;
+      sidebarWidthP0 = $('#sidebar').width();
+      delta = 0;
     },
     drag: function (event, ui) {
-      let d = ui.position.left - sidebarSeparator.start;
-      // sidebar should be original + the distance
-      // sidebarSeparator.width = sidebarSeparator.width - d ;
-      // newSidebarWidth = sidebarSeparator.width + 50;
-      // console.log(ui.position.left);
-      // console.log(`distance: ${d} -> new right for worspace: ${sidebarSeparator.workspaceRight - d}`);
-
-      // if (sidebarSeparator.opening) {
-      //   newSidebarWidth -= 3;
-      // }
-
-      const MIN_SIDEBAR_WIDTH = 435;
-      let desiredSidebarWidth = sidebarSeparator.width - d;
-      let desiredWorkspaceRight = sidebarSeparator.workspaceRight - d;
-
-      if (desiredSidebarWidth > 435){
-        // console.log(`Recalibrating sidebar width!!`)
-        $('#sidebar').width(desiredSidebarWidth);
-        $('#workspace').css('right', desiredWorkspaceRight);
-      } else{
-        // console.log('STOP THIS NOW!!!! IT IS TOO NARROW!!!');
-        $('#sidebar').width(433);
-        let sidebarWidth= $('#sidebar').width();
-        $('#workspace').css('right', 491);
-        // console.log('Window width=',$(window).width());
-        // let sidebarFinalPoint = $(window).width() - MIN_SIDEBAR_WIDTH - 50;
-        // console.log(`Sidebar final point: ${startingPointSeparator}`);
-        ui.position.left = startingPointSeparator; //$(window).width() - MIN_SIDEBAR_WIDTH - 50; // 11:width separator, 50: size icons
-        // console.log(`sidebar width after dragging end is: ${ sidebarWidth }`)
-        $('#sidebar').removeAttr('width');
+      let d = ui.position.left;
+      delta = sidebarWidthP0 - d;
+      $('#sidebar').width(delta);
+      if ($('#sidebar').width() > maxWidthSidebar()){
+        $('#sidebar').width(maxWidthSidebar());
       }
+      event.stopImmediatePropagation();
       RED.events.emit('sidebar:resize');
     },
     stop: function (event, ui) {
-      sidebarSeparator.dragging = false;
-      if (sidebarSeparator.closing) {
-        // console.log('sidebar-> stop: closing...')
-        $('#sidebar').removeClass('closing');
-        RED.menu.setSelected('menu-item-sidebar', false);
-        if ($('#sidebar').width() < 435) {
-          $('#sidebar').width(435);
-          $('#workspace').css('right', 491);
-          // $('#editor-stack').css('right', 188);
-        }
-      }
-      //$('#sidebar-separator').css('left', 'auto');
-      //$('#sidebar-separator').css('right', $('#sidebar').width() + 2 + 'px');
+      setTimeout(function() {
+        sidebarDragging = false;
+      },1000);
       RED.events.emit('sidebar:resize');
     },
   });
 
+
+
   var sidebarControls = $(
     '<div class="sidebar-control-right"><i class="fa fa-chevron-right"</div>'
   ).appendTo($('#sidebar-separator'));
@@ -21061,37 +21024,19 @@ RED.view.tools = (function() {
     sidebarControls.hide();
     RED.menu.toggleSelected('menu-item-sidebar');
   });
-  $('#sidebar-separator').on('mouseenter', function () {
-    if (!sidebarSeparator.dragging) {
-      if (RED.menu.isSelected('menu-item-sidebar')) {
-        sidebarControls
-          .find('i')
-          .addClass('fa-chevron-right')
-          .removeClass('fa-chevron-left');
-      } else {
-        sidebarControls
-          .find('i')
-          .removeClass('fa-chevron-right')
-          .addClass('fa-chevron-left');
-      }
-      sidebarControls.toggle('slide', { direction: 'right' }, 200);
-    }
-  });
-  $('#sidebar-separator').on('mouseleave', function () {
-    if (!sidebarSeparator.dragging) {
-      sidebarControls.hide();
-    }
-  });
 
-  function maximizeSidebar(){
+  function maxWidthSidebar() {
     const totalWidth = $('#main-container').width();
     const shortcutsWidth = 50;
     const paletteWidth = $('#palette').width();
     const sidebarSeparatorWidth = $('#sidebar-separator').width()
 
-    const targetWidth = totalWidth - shortcutsWidth - paletteWidth - sidebarSeparatorWidth;
+    return totalWidth - shortcutsWidth - paletteWidth - sidebarSeparatorWidth;
+  }
+
+  function maximizeSidebar(){
+    const targetWidth = maxWidthSidebar();
     $('#sidebar').width(targetWidth);
-    $('#sidebar-separator').css('left', paletteWidth);
     
     // Hack: Make sure the workspace if reset before maximizing the sidebar. This is because when dragging the sidebar the workspace width is also modified
     $('#workspace').css('right', 491);
@@ -21102,7 +21047,7 @@ RED.view.tools = (function() {
     const offsetWidth = 435;
 
     $('#sidebar').width(offsetWidth);
-    $('#sidebar-separator').css('left', '');
+    // $('#sidebar-separator').css('left', '');
     RED.events.emit('sidebar:resize');
   }
 
@@ -21111,7 +21056,6 @@ RED.view.tools = (function() {
   }
 
   function toggleSidebar(state) {
-    // console.log(`[sidebar] toggling the sidebar to: ${state} ...`);
     let checkIfscrollWorkspaceRequired = false;
     if (!state) {
       // Hide the sidebar and sidebar-separator
@@ -21143,11 +21087,13 @@ RED.view.tools = (function() {
       // `);
       if (nodeSelectedPosX - initialScrollLeft + safeDistNodeSidebar > sidebarPosLeftX ){
         let targetScrollLeft = nodeSelectedPosX - sidebarPosLeftX  +  safeDistNodeSidebar;
-        // console.log(`[sidebar] TargetScrollLeft: (${targetScrollLeft})...`);
         $('#chart').animate( { scrollLeft:  targetScrollLeft})
       }
     }
-     
+  }
+
+  function isSidebarDragging() {
+    return sidebarDragging;
   }
 
   function showSidebar(id) {
@@ -21177,12 +21123,11 @@ RED.view.tools = (function() {
     });
 
     //hide the sidebar-separator
-    $('#sidebar-separator').hide();
+    // $('#sidebar-separator').hide();
 
   }
 
   function selectTab(index){
-    // console.log('[sidebar] selectTab clicked with index=', index);
     let selectedTab = $('#sidebar-shortcuts').find('.sidebar-shortcuts-icons').children()[index];
     // Click only if has not been selected
     // console.log('[sidebar] selectedTab.hasClass(selected)=', selectedTab.hasClass('selected'));
@@ -21205,14 +21150,9 @@ RED.view.tools = (function() {
       toggleSidebar(true);
 
       //show the sidebar-separator
-      let sidebarSeparator = $('#sidebar-separator');
-      sidebarSeparator.show();
-
-      // resize the workspace to adjust to the left of the sidebar separator
-      let sidebarSepatorToRight = sidebarSeparator.position().left;
-      let mainContainerWidth = $('#main-container').width();
-      let targetRightPosToWorkspace = mainContainerWidth - sidebarSepatorToRight - 1;
-      $('#workspace').css('right', targetRightPosToWorkspace);
+      // let sidebarSeparator = $('#sidebar-separator');
+      // sidebarSeparator.show();
+      
       // Select internally the tab
       if (e && e.hasOwnProperty('selectIndex')){
         selectTab(e.selectIndex); 
@@ -21220,8 +21160,12 @@ RED.view.tools = (function() {
     });
 
     RED.actions.add('core:hide-sidebar', function(){
-      toggleSidebar(false);
-      deselectAll();
+      if (!sidebarDragging){
+        toggleSidebar(false);
+        deselectAll();
+      }else {
+        console.log('[sidebar] Ignoring hide-sidebar as dragging is still enabled')
+      }
     });
     
     // RED.popover.tooltip(
@@ -21266,7 +21210,8 @@ RED.view.tools = (function() {
     restore: restoreSidebar,
     deselectAll: deselectAll,
     selectTab: selectTab,
-    isSidebarVisible: isSidebarVisible
+    isSidebarVisible: isSidebarVisible,
+    isDragging: isSidebarDragging,
   };
 })();
 ;RED.sidebar.info = (function () {
@@ -26323,7 +26268,20 @@ RED.sidebar.nodeinfo = (function(){
             const result = await git.push('origin', currentBranch);
             RED.notify(`Changes pushed successfully`, 'success', undefined, 800);
         } catch(e) {
-            RED.notify(`<strong>Error</strong>: ${e.message}`, 'error');
+            let notification = RED.notify(`<strong>Error</strong>: ${e.message}`, {
+                type: 'error',
+                modal: true,
+                fixed: true,
+                buttons: [
+                    {
+                        text: "Cancel",
+                        click: function() {
+                            notification.close();
+                        }
+                    }
+                ]
+            });
+
         } finally {
             resetPushButton();
             checkGitStatus();
@@ -30692,7 +30650,6 @@ RED.editor = (function () {
   }
 
   function resetEditor(){
-    // console.log('[editor] reset the editor')
     editStack.pop();
     RED.sidebar.nodeinfo.emptyTab();
     RED.actions.invoke('core:hide-sidebar');
@@ -30990,8 +30947,11 @@ RED.editor = (function () {
   }
 
   function showEditDialog(node) {
+    if (RED.sidebar.isDragging()){
+      return;
+    }
+
     let editing_node;
-    // console.log('[editor] showEditDialog. Node=', node);
     if (Object.keys(node).length === 0 && node.constructor === Object){
       resetEditor();
       return;
@@ -32170,8 +32130,6 @@ RED.editor = (function () {
     }
     if (options.mode === 'ace/mode/markdown') {
       $(el).addClass('node-text-editor-container-toolbar');
-      console.log('[editor] options', options);
-
       if (options.toolbar === false ){
         // do not show the toolbar
       } else {
@@ -33820,7 +33778,7 @@ RED.eventLog = (function() {
 
   function resize() {}
   function showTray(options) {
-    console.log('[tray] showTray. options=', options);
+    // console.log('[tray] showTray. options=', options);
 
     $('#editor-stack').empty();
 
@@ -34133,7 +34091,7 @@ RED.eventLog = (function() {
      
 
       if (stack.length === 0) {
-        console.log('[tray] Emiting event: (editor:open) ...')
+        // console.log('[tray] Emiting event: (editor:open) ...')
         RED.events.emit('editor:open');
         showTray(options);
       } else if (stack.length > 0 && options.title.startsWith('_')) {