@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/sidebar.js

@@ -0,0 +1,409 @@
+RED.sidebar = (function () {
+  //$('#sidebar').tabs();
+  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();
+
+      if (tab.onchange) {
+        tab.onchange.call(tab);
+      }
+
+      // tab-nodeinfo behaves different due to legacy. Rest of tabs will be make visible based on the wrapper/toolbar
+
+      if (tab.id !== 'nodeinfo') {
+        $(tab.wrapper).show();
+        if (tab.toolbar) {
+          $(tab.toolbar).show();
+        }
+      }
+     
+    },
+    onsame: function (tab){
+      if (tab.onsame) {
+        tab.onsame.call(tab);
+      }
+    },
+
+    onremove: function (tab) {
+      $(tab.wrapper).hide();
+      if (tab.onremove) {
+        tab.onremove.call(tab);
+      }
+    },
+    // minimumActiveTabWidth: 70,
+    collapsible: true,
+    // scrollable: true
+  });
+  let startingPointSeparator = null;
+
+  var knownTabs = {};
+
+  function addTab(title, content, closeable, visible) {
+    var options;
+    if (typeof title === 'string') {
+      // TODO: legacy support in case anyone uses this...
+      options = {
+        id: content.id,
+        label: title,
+        name: title,
+        content: content,
+        closeable: closeable,
+        visible: visible,
+      };
+    } else if (typeof title === 'object') {
+      options = title;
+    }
+
+    // filter the ones that i am not interested
+    if (options.label === 'config' || options.label === 'context') {
+      return;
+    }
+
+    delete options.closeable;
+
+    options.wrapper = $('<div>', { style: 'height:100%' }).appendTo(
+      '#sidebar-content'
+    );
+    options.wrapper.append(options.content);
+    options.wrapper.hide();
+
+    if (!options.enableOnEdit) {
+      options.shade = $('<div>', { class: 'sidebar-shade hide' }).appendTo(
+        options.wrapper
+      );
+    }
+
+    if (options.toolbar) {
+      $('#sidebar-footer').append(options.toolbar);
+      $(options.toolbar).hide();
+    }
+    var id = options.id;
+
+    RED.menu.addItem('menu-item-view-menu', {
+      id: 'menu-item-view-menu-' + options.id,
+      label: options.name,
+      onselect: function () {
+        showSidebar(options.id);
+      },
+      group: 'sidebar-tabs',
+    });
+
+    options.iconClass = options.iconClass || 'fa fa-square-o';
+
+    knownTabs[options.id] = options;
+
+    if (options.visible !== false) {
+      sidebar_tabs.addTab(knownTabs[options.id]);
+    }
+  }
+
+  function removeTab(id) {
+    sidebar_tabs.removeTab(id);
+    $(knownTabs[id].wrapper).remove();
+    if (knownTabs[id].footer) {
+      knownTabs[id].footer.remove();
+    }
+    delete knownTabs[id];
+    RED.menu.removeItem('menu-item-view-menu-' + id);
+  }
+
+  var sidebarSeparator = {};
+  sidebarSeparator.dragging = false;
+
+  $('#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);
+    },
+    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');
+      }
+      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');
+      RED.events.emit('sidebar:resize');
+    },
+  });
+
+  var sidebarControls = $(
+    '<div class="sidebar-control-right"><i class="fa fa-chevron-right"</div>'
+  ).appendTo($('#sidebar-separator'));
+  sidebarControls.click(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(){
+    const totalWidth = $('#main-container').width();
+    const shortcutsWidth = 50;
+    const paletteWidth = $('#palette').width();
+    const sidebarSeparatorWidth = $('#sidebar-separator').width()
+
+    const targetWidth = totalWidth - shortcutsWidth - paletteWidth - sidebarSeparatorWidth;
+    $('#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);
+    RED.events.emit('sidebar:resize');
+  }
+
+  function restoreSidebar() {
+    const offsetWidth = 435;
+
+    $('#sidebar').width(offsetWidth);
+    $('#sidebar-separator').css('left', '');
+    RED.events.emit('sidebar:resize');
+  }
+
+  function isSidebarVisible() {
+    return ! $('#main-container').hasClass('sidebar-closed'); 
+  }
+
+  function toggleSidebar(state) {
+    // console.log(`[sidebar] toggling the sidebar to: ${state} ...`);
+    let checkIfscrollWorkspaceRequired = false;
+    if (!state) {
+      // Hide the sidebar and sidebar-separator
+      // $('#sidebar-separator').hide();
+      $('#main-container').addClass('sidebar-closed');
+      $('#shelve-right').removeClass('shelf-selected');
+    } else {
+      if (!$('#shelve-right').hasClass('shelf-selected')){
+        checkIfscrollWorkspaceRequired = true;
+      }
+      // Show the sidebar and sidebar-separator
+      // $('#sidebar-separator').show();
+      $('#main-container').removeClass('sidebar-closed');
+      $('#shelve-right').addClass('shelf-selected');
+      sidebar_tabs.resize();
+    }
+    RED.events.emit('sidebar:resize');
+    if (checkIfscrollWorkspaceRequired && RED.editor.getLatestNodeSelected()){
+      // Reposition the workspace if the node may be left hidden behind the sidebar
+      const safeDistNodeSidebar = 300;
+      let nodeSelectedPosX = RED.editor.getLatestNodeSelected().x;
+      let initialScrollLeft = $('#chart').scrollLeft();
+      let sidebarPosLeftX = $('#sidebar').position().left;
+      // console.log(`[sidebar] 
+      //  - initalScrollLeft: ${initialScrollLeft}
+      //  - nodeSelectedPosX: ${nodeSelectedPosX}
+      //  - sidebarPosLeftX: ${sidebarPosLeftX}
+      //  ----------------------------------------
+      // `);
+      if (nodeSelectedPosX - initialScrollLeft + safeDistNodeSidebar > sidebarPosLeftX ){
+        let targetScrollLeft = nodeSelectedPosX - sidebarPosLeftX  +  safeDistNodeSidebar;
+        // console.log(`[sidebar] TargetScrollLeft: (${targetScrollLeft})...`);
+        $('#chart').animate( { scrollLeft:  targetScrollLeft})
+      }
+    }
+     
+  }
+
+  function showSidebar(id) {
+    if (id) {
+      if (!containsTab(id)) {
+        sidebar_tabs.addTab(knownTabs[id]);
+      }
+      sidebar_tabs.activateTab(id);
+    }
+  }
+
+  function containsTab(id) {
+    return sidebar_tabs.contains(id);
+  }
+
+  function deselectAll(){
+    // Deselect the shortcut icon
+    let selectedTab = $('.sidebar-shortcuts-icons').find('a.active');
+    selectedTab.each(function () {
+      $(this).removeClass('active selected');
+    });
+
+    // Deselect the internal sidebar screen
+    let selectedAnchors = $('#sidebar-tabs').find('li.active');
+    selectedAnchors.each(function () {
+      $(this).removeClass('active');
+    });
+
+    //hide the sidebar-separator
+    $('#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'));
+    if (!$(selectedTab).hasClass('selected')){
+      $(selectedTab).click();
+    }
+  }
+
+  function init() {
+    RED.actions.add('core:toggle-sidebar', function (state) {
+      if (state === undefined) {
+        RED.menu.toggleSelected('menu-item-sidebar');
+      } else {
+        toggleSidebar(state);
+      }
+    });
+
+    RED.actions.add('core:show-sidebar', function(e){
+      //show the sidebar
+      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);
+      // Select internally the tab
+      if (e && e.hasOwnProperty('selectIndex')){
+        selectTab(e.selectIndex); 
+      }
+    });
+
+    RED.actions.add('core:hide-sidebar', function(){
+      toggleSidebar(false);
+      deselectAll();
+    });
+    
+    // RED.popover.tooltip(
+    //   $('#sidebar-separator').find('.sidebar-control-right'),
+    //   RED._('keyboard.toggleSidebar'),
+    //   'core:toggle-sidebar'
+    // );
+
+    // showSidebar();
+
+    RED.sidebar.nodeinfo.init();
+    RED.sidebar.info.init();
+    RED.sidebar.test.init();
+    RED.sidebar.kumohub.init();
+    RED.sidebar.azure.init();
+    RED.sidebar.awsDeploy.init();
+
+
+    // hide info bar at start if screen rather narrow...
+    // if ($(window).width() < 600) {
+    //   RED.menu.setSelected('menu-item-sidebar', false);
+    // }
+
+    // palette-text-input: Editable text inputs in the palette
+    $('.palette-textinput').click(function (e) {
+      e.preventDefault();
+      $(this).select();
+    });
+
+  }
+
+  return {
+    init: init,
+    addTab: addTab,
+    removeTab: removeTab,
+    show: showSidebar,
+    containsTab: containsTab,
+    toggleSidebar: toggleSidebar,
+    maximize: maximizeSidebar,
+    restore: restoreSidebar,
+    deselectAll: deselectAll,
+    selectTab: selectTab,
+    isSidebarVisible: isSidebarVisible
+  };
+})();

package/src/app/ui/editor-client/src/js/ui/state.js

@@ -0,0 +1,14 @@
+ 
+RED.state = {
+    DEFAULT: 0,
+    MOVING: 1,
+    JOINING: 2,
+    MOVING_ACTIVE: 3,
+    ADDING: 4,
+    EDITING: 5,
+    EXPORT: 6,
+    IMPORT: 7,
+    IMPORT_DRAGGING: 8,
+    QUICK_JOINING: 9,
+    PANNING: 10
+}