@kumologica/sdk 3.2.0-beta9 → 4.0.0-alpha2

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

@@ -1,374 +0,0 @@
-RED.search = (function () {
-  var disabled = false;
-  var dialog = null;
-  var searchInput;
-  var searchResults;
-  var selected = -1;
-  var visible = false;
-
-  var index = {};
-  var keys = [];
-  var results = [];
-
-  function indexProperty(node, label, property) {
-    if (typeof property === 'string' || typeof property === 'number') {
-      property = ('' + property).toLowerCase();
-      index[property] = index[property] || {};
-      index[property][node.id] = { node: node, label: label };
-    } else if (Array.isArray(property)) {
-      property.forEach(function (prop) {
-        indexProperty(node, label, prop);
-      });
-    } else if (typeof property === 'object') {
-      for (var prop in property) {
-        if (property.hasOwnProperty(prop)) {
-          indexProperty(node, label, property[prop]);
-        }
-      }
-    }
-  }
-  function indexNode(n) {
-    var l = RED.utils.getNodeLabel(n);
-    if (l) {
-      l = ('' + l).toLowerCase();
-      index[l] = index[l] || {};
-      index[l][n.id] = { node: n, label: l };
-    }
-    l = l || n.label || n.name || n.id || '';
-
-    var properties = ['id', 'type', 'name', 'label', 'info'];
-    if (n._def && n._def.defaults) {
-      properties = properties.concat(Object.keys(n._def.defaults));
-    }
-    for (var i = 0; i < properties.length; i++) {
-      if (n.hasOwnProperty(properties[i])) {
-        indexProperty(n, l, n[properties[i]]);
-      }
-    }
-  }
-
-  function indexWorkspace() {
-    index = {};
-    RED.nodes.eachWorkspace(indexNode);
-    RED.nodes.eachSubflow(indexNode);
-    RED.nodes.eachConfig(indexNode);
-    RED.nodes.eachNode(indexNode);
-    keys = Object.keys(index);
-    keys.sort();
-    keys.forEach(function (key) {
-      index[key] = Object.keys(index[key]).map(function (id) {
-        return index[key][id];
-      });
-    });
-  }
-
-  function search(val) {
-    searchResults.editableList('empty');
-    var typeFilter;
-    var m = /(?:^| )type:([^ ]+)/.exec(val);
-    if (m) {
-      val = val.replace(/(?:^| )type:[^ ]+/, '');
-      typeFilter = m[1];
-    }
-
-    val = val.trim();
-
-    selected = -1;
-    results = [];
-    if (val.length > 0 || typeFilter) {
-      val = val.toLowerCase();
-      var i;
-      var j;
-      var list = [];
-      var nodes = {};
-      for (i = 0; i < keys.length; i++) {
-        var key = keys[i];
-        var kpos = keys[i].indexOf(val);
-        if (kpos > -1) {
-          for (j = 0; j < index[key].length; j++) {
-            var node = index[key][j];
-            // node.node.z == "main.flow" | "test.flow"
-            if (!typeFilter || node.node.type === typeFilter) {
-              nodes[node.node.id] = nodes[node.node.id] = node;
-              nodes[node.node.id].index = Math.min(
-                nodes[node.node.id].index || Infinity,
-                kpos
-              );
-            }
-          }
-        }
-      }
-      list = Object.keys(nodes);
-      list.sort(function (A, B) {
-        return nodes[A].index - nodes[B].index;
-      });
-
-      for (i = 0; i < list.length; i++) {
-        results.push(nodes[list[i]]);
-      }
-      if (results.length > 0) {
-        // Excluding tabs
-        // results = results.filter((r) => r.node.type !== 'tab');
-        for (i = 0; i < Math.min(results.length, 25); i++) {
-          searchResults.editableList('addItem', results[i]);
-        }
-      } else {
-        searchResults.editableList('addItem', {});
-      }
-    }
-  }
-
-  function ensureSelectedIsVisible() {
-    var selectedEntry = searchResults.find('li.selected');
-    if (selectedEntry.length === 1) {
-      var scrollWindow = searchResults.parent();
-      var scrollHeight = scrollWindow.height();
-      var scrollOffset = scrollWindow.scrollTop();
-      var y = selectedEntry.position().top;
-      var h = selectedEntry.height();
-      if (y + h > scrollHeight) {
-        scrollWindow.animate(
-          { scrollTop: '-=' + (scrollHeight - (y + h) - 10) },
-          50
-        );
-      } else if (y < 0) {
-        scrollWindow.animate({ scrollTop: '+=' + (y - 10) }, 50);
-      }
-    }
-  }
-
-  function createDialog() {
-    dialog = $('<div>', {
-      id: 'red-ui-search',
-      class: 'red-ui-search',
-    }).appendTo('#main-container');
-    var searchDiv = $('<div>', { class: 'red-ui-search-container' }).appendTo(
-      dialog
-    );
-    searchInput = $(
-      '<input type="text" placeholder="Find (Nodes and Tabs)">'
-    )
-      .appendTo(searchDiv)
-      .searchBox({
-        delay: 200,
-        change: function () {
-          search($(this).val());
-        },
-      });
-
-    searchInput.on('keydown', function (evt) {
-      var children;
-      if (results.length > 0) {
-        if (evt.keyCode === 40) {
-          // Down
-          children = searchResults.children();
-          if (selected < children.length - 1) {
-            if (selected > -1) {
-              $(children[selected]).removeClass('selected');
-            }
-            selected++;
-          }
-          $(children[selected]).addClass('selected');
-          ensureSelectedIsVisible();
-          evt.preventDefault();
-        } else if (evt.keyCode === 38) {
-          // Up
-          children = searchResults.children();
-          if (selected > 0) {
-            if (selected < children.length) {
-              $(children[selected]).removeClass('selected');
-            }
-            selected--;
-          }
-          $(children[selected]).addClass('selected');
-          ensureSelectedIsVisible();
-          evt.preventDefault();
-        } else if (evt.keyCode === 13) {
-          // Enter
-          if (results.length > 0) {
-            reveal(results[Math.max(0, selected)].node);
-          }
-        }
-      }
-    });
-    searchInput.i18n();
-
-    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;',
-    })
-      .appendTo(searchResultsDiv)
-      .editableList({
-        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') {
-          // }
-          } else {
-            var def = node._def;
-            var div = $('<a>', {
-              href: '#',
-              class: 'red-ui-search-result',
-            }).appendTo(container);
-
-            var nodeDiv = $('<div>', {
-              class: 'red-ui-search-result-node',
-            }).appendTo(div);
-            var colour = RED.utils.getNodeColor(node.type, def);
-            var icon_url = RED.utils.getNodeIcon(def, node);
-            if (node.type === 'tab') {
-              // 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);
-            }
-            
-
-            
-
-            var contentDiv = $('<div>', {
-              class: 'red-ui-search-result-description',
-            }).appendTo(div);
-            if (node.z) {
-              var workspace = RED.nodes.workspace(node.z);
-              if (!workspace) {
-                workspace = RED.nodes.subflow(node.z);
-                workspace = 'subflow:' + workspace.name;
-              } else {
-                workspace = 'tab:' + workspace.label; //'flow:' + workspace.label
-              }
-              $('<div>', { class: 'red-ui-search-result-node-flow' })
-                .text(workspace)
-                .appendTo(contentDiv);
-            }
-
-            $('<div>', { class: 'red-ui-search-result-node-label' })
-              .text(object.label || node.id)
-              .appendTo(contentDiv);
-            $('<div>', { class: 'red-ui-search-result-node-type' })
-              .text(node.type)
-              .appendTo(contentDiv);
-            $('<div>', { class: 'red-ui-search-result-node-id' })
-              .text(node.id)
-              .appendTo(contentDiv);
-
-            div.click(function (evt) {
-              evt.preventDefault();
-              reveal(node);
-            });
-          }
-        },
-        scrollOnAdd: false,
-      });
-
-    // Hint to how to close the search panel
-    $(`
-    <div style="text-align:center; padding: 3px 0 5px 0">Press <span class="escape-key">Esc</span> to close</div>
-    `).appendTo(dialog);
-  }
-
-  function reveal(node) {
-    hide();
-    RED.header.changeSelectedFlow(node.z);
-    RED.view.reveal(node.id);
-  }
-
-  function revealByNodeId(nodeId){
-    var selectedNode = RED.nodes.node(nodeId);
-    reveal(selectedNode);
-  }
-
-  function show(v) {
-    // Disable the project dialog
-    RED.actions.invoke('core:project-info:close');
-    RED.actions.invoke('core:settings:close');
-
-    console.log('[search] disabled=', disabled);
-    if (disabled) {
-      return;
-    }
-    console.log('[search] visible=', visible);
-    if (!visible) {
-      RED.keyboard.add('*', 'escape', function () {
-        hide();
-      });
-
-      $('#main-container').click(() => {
-        hide();
-      });
-
-      $('#sidebar-separator').hide();
-      indexWorkspace();
-      if (dialog === null) {
-        createDialog();
-      }
-      dialog.slideDown(300);
-      searchInput.searchBox('value', v);
-      RED.events.emit('search:open');
-      visible = true;
-    }
-    searchInput.focus();
-  }
-
-  function hide() {
-    if (visible) {
-      $('#main-container').off('click');
-      RED.keyboard.remove('escape');
-      visible = false;
-      //   $('#header-shade').hide();
-      //   $('#editor-shade').hide();
-      //   $('#palette-shade').hide();
-      //   $('#sidebar-shade').hide();
-      // $('#sidebar-separator').show();
-      if (dialog !== null) {
-        dialog.slideUp(200, function () {
-          searchInput.searchBox('value', '');
-        });
-      }
-      RED.events.emit('search:close');
-    }
-  }
-
-  function init() {
-    RED.actions.add('core:search', show);
-    RED.actions.add('core:search:close', hide);
-
-    RED.events.on('type-search:open', function () {
-      disabled = true;
-    });
-    RED.events.on('type-search:close', function () {
-      disabled = false;
-    });
-
-    $('#header-shade').on('mousedown', hide);
-    $('#editor-shade').on('mousedown', hide);
-    $('#palette-shade').on('mousedown', hide);
-    $('#sidebar-shade').on('mousedown', hide);
-  }
-
-  return {
-    init: init,
-    show: show,
-    hide: hide,
-    reveal: reveal,
-    revealByNodeId: revealByNodeId
-  };
-})();

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

@@ -1,341 +0,0 @@
-RED.sidebar = (function () {
-  //$('#sidebar').tabs();
-  var sidebar_tabs = RED.tabs.create({
-    id: 'sidebar-tabs',
-    onchange: function (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);
-  }
-
-  // Dragable sidebar logic
-  let sidebarDragging = false;
-  let sidebarWidthP0 = null;
-  let delta = 0;
-
-  $('#sidebar-separator').draggable({
-    axis: 'x',
-    start: function (event, ui) {
-      sidebarDragging = true;
-      sidebarWidthP0 = $('#sidebar').width();
-      delta = 0;
-    },
-    drag: function (event, ui) {
-      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) {
-      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'));
-  sidebarControls.click(function () {
-    sidebarControls.hide();
-    RED.menu.toggleSelected('menu-item-sidebar');
-  });
-
-  function maxWidthSidebar() {
-    const totalWidth = $('#main-container').width();
-    const shortcutsWidth = 50;
-    const paletteWidth = $('#palette').width();
-    const sidebarSeparatorWidth = $('#sidebar-separator').width()
-
-    return totalWidth - shortcutsWidth - paletteWidth - sidebarSeparatorWidth;
-  }
-
-  function maximizeSidebar(){
-    const targetWidth = maxWidthSidebar();
-    $('#sidebar').width(targetWidth);
-    
-    // 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) {
-    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;
-        $('#chart').animate( { scrollLeft:  targetScrollLeft})
-      }
-    }
-  }
-
-  function isSidebarDragging() {
-    return sidebarDragging;
-  }
-
-  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){
-    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();
-      
-      // Select internally the tab
-      if (e && e.hasOwnProperty('selectIndex')){
-        selectTab(e.selectIndex); 
-      }
-    });
-
-    RED.actions.add('core:hide-sidebar', function(){
-      if (!sidebarDragging){
-        toggleSidebar(false);
-        deselectAll();
-      }else {
-        console.log('[sidebar] Ignoring hide-sidebar as dragging is still enabled')
-      }
-    });
-    
-    // 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.git.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,
-    isDragging: isSidebarDragging,
-  };
-})();