@kumologica/sdk 3.0.0

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

@@ -0,0 +1,366 @@
+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="Search nodes">'
+    )
+      .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;
+
+          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 {
+            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';
+            }
+            // 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 = '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
+  };
+})();