diff --git a/Gruntfile.js b/Gruntfile.js index b6474182a..c7867bd35 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -165,6 +165,8 @@ module.exports = function(grunt) { "packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js", "packages/node_modules/@node-red/editor-client/src/js/ui/palette.js", "packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js", + "packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js", + "packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js", "packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js", "packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js", "packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js", diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 84e37edcb..06712b4de 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -585,7 +585,18 @@ "nodeHelp": "Node Help", "none":"None", "arrayItems": "__count__ items", - "showTips":"You can open the tips from the settings panel" + "showTips":"You can open the tips from the settings panel", + "outline": "Outline", + "globalConfig": "Global Configuration Nodes" + }, + "help": { + "name": "Help", + "label": "help", + "search": "Search help", + "nodeHelp": "Node Help", + "showHelp": "Show help", + "showTopics": "Show topics", + "noHelp": "No help topic selected" }, "config": { "name": "Configuration nodes", diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js index e6b4bccca..1eac45494 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js +++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js @@ -348,6 +348,9 @@ RED.nodes = (function() { workspacesOrder.splice(targetIndex,0,ws.id); } RED.events.emit('flows:add',ws); + if (targetIndex !== undefined) { + RED.events.emit('flows:reorder',workspacesOrder) + } } function getWorkspace(id) { return workspaces[id]; @@ -1521,7 +1524,6 @@ RED.nodes = (function() { groupsByZ = {}; var subflowIds = Object.keys(subflows); - subflows = {}; subflowIds.forEach(function(id) { RED.subflow.removeSubflow(id) }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index fd2adf05f..330b2f9a5 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -124,9 +124,9 @@ var RED = (function() { $("#red-ui-palette > .red-ui-palette-spinner").hide(); $(".red-ui-palette-scroll").removeClass("hide"); $("#red-ui-palette-search").removeClass("hide"); - loadFlows(function() { - if (RED.settings.theme("projects.enabled",false)) { - RED.projects.refresh(function(activeProject) { + if (RED.settings.theme("projects.enabled",false)) { + RED.projects.refresh(function(activeProject) { + loadFlows(function() { RED.sidebar.info.refresh() if (!activeProject) { // Projects enabled but no active project @@ -140,12 +140,14 @@ var RED = (function() { } completeLoad(); }); - } else { + }); + } else { + loadFlows(function() { // Projects disabled by the user RED.sidebar.info.refresh() completeLoad(); - } - }); + }); + } } else { var config = configs.shift(); appendNodeConfig(config,stepConfig); @@ -431,8 +433,7 @@ var RED = (function() { ''+ ''; - RED.sidebar.info.set(aboutHeader+RED.utils.renderMarkdown(data)); - RED.sidebar.info.show(); + RED.sidebar.help.set(aboutHeader+RED.utils.renderMarkdown(data)); }); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js index 0c7944c84..3739cd970 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/colorPicker.js @@ -1,26 +1,5 @@ RED.colorPicker = (function() { - function getDarkerColor(c) { - var r,g,b; - if (/^#[a-f0-9]{6}$/i.test(c)) { - r = parseInt(c.substring(1, 3), 16); - g = parseInt(c.substring(3, 5), 16); - b = parseInt(c.substring(5, 7), 16); - } else if (/^#[a-f0-9]{3}$/i.test(c)) { - r = parseInt(c.substring(1, 2)+c.substring(1, 2), 16); - g = parseInt(c.substring(2, 3)+c.substring(2, 3), 16); - b = parseInt(c.substring(3, 4)+c.substring(3, 4), 16); - } else { - return c; - } - var l = 0.3 * r/255 + 0.59 * g/255 + 0.11 * b/255 ; - r = Math.max(0,r-50); - g = Math.max(0,g-50); - b = Math.max(0,b-50); - var s = ((r<<16) + (g<<8) + b).toString(16); - return '#'+'000000'.slice(0, 6-s.length)+s; - } - function create(options) { var color = options.value; var id = options.id; @@ -57,7 +36,7 @@ RED.colorPicker = (function() { "background-color": color, "opacity": opacity }); - var border = getDarkerColor(color); + var border = RED.utils.getDarkerColor(color); if (border[0] === '#') { border += Math.round(255*Math.floor(opacity*100)/100).toString(16); } else { @@ -132,7 +111,7 @@ RED.colorPicker = (function() { height: height+"px", margin: margin+"px", backgroundColor: col, - "border-color": getDarkerColor(col) + "border-color": RED.utils.getDarkerColor(col) }).appendTo(row); button.on("click", function (e) { e.preventDefault(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js index 06ccc97d9..3df2f9a51 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/editableList.js @@ -183,7 +183,7 @@ if (this.options.resizeItem) { var that = this; this.element.children().each(function(i) { - that.options.resizeItem($(this).find(".red-ui-editableList-item-content"),i); + that.options.resizeItem($(this).children(".red-ui-editableList-item-content"),i); }); } }, @@ -223,7 +223,7 @@ var items = this.element.children(); var that = this; items.sort(function(A,B) { - return that.activeSort($(A).find(".red-ui-editableList-item-content").data('data'),$(B).find(".red-ui-editableList-item-content").data('data')); + return that.activeSort($(A).children(".red-ui-editableList-item-content").data('data'),$(B).children(".red-ui-editableList-item-content").data('data')); }); $.each(items,function(idx,li) { that.element.append(li); @@ -305,7 +305,7 @@ } if (this.options.addItem) { var index = that.element.children().length-1; - setTimeout(function() { + // setTimeout(function() { that.options.addItem(row,index,data); if (that.activeFilter) { try { @@ -321,7 +321,7 @@ that.uiContainer.scrollTop(that.element.height()); },0); } - },0); + // },0); } }, addItem: function(data) { @@ -334,7 +334,7 @@ }, removeItem: function(data) { var items = this.element.children().filter(function(f) { - return data === $(this).find(".red-ui-editableList-item-content").data('data'); + return data === $(this).children(".red-ui-editableList-item-content").data('data'); }); items.remove(); if (this.options.removeItem) { @@ -342,7 +342,7 @@ } }, items: function() { - return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); }); + return this.element.children().map(function(i) { return $(this).children(".red-ui-editableList-item-content"); }); }, empty: function() { this.element.empty(); @@ -365,14 +365,14 @@ }, show: function(item) { var items = this.element.children().filter(function(f) { - return item === $(this).find(".red-ui-editableList-item-content").data('data'); + return item === $(this).children(".red-ui-editableList-item-content").data('data'); }); if (items.length > 0) { this.uiContainer.scrollTop(this.uiContainer.scrollTop()+items.position().top) } }, getItem: function(li) { - var el = li.find(".red-ui-editableList-item-content"); + var el = li.children(".red-ui-editableList-item-content"); if (el.length) { return el.data('data'); } else { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js index 5a82f9d35..285c7c9bb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js @@ -29,6 +29,10 @@ RED.panels = (function() { if (!vertical) { container.addClass("red-ui-panels-horizontal"); } + + $(children[0]).addClass("red-ui-panel"); + $(children[1]).addClass("red-ui-panel"); + var separator = $('
').insertAfter(children[0]); var startPosition; var panelSizes = []; @@ -52,11 +56,11 @@ RED.panels = (function() { var newSizes = [panelSizes[0]+delta,panelSizes[1]-delta]; if (vertical) { $(children[0]).height(newSizes[0]); - $(children[1]).height(newSizes[1]); + // $(children[1]).height(newSizes[1]); ui.position.top -= delta; } else { $(children[0]).width(newSizes[0]); - $(children[1]).width(newSizes[1]); + // $(children[1]).width(newSizes[1]); ui.position.left -= delta; } if (options.resize) { @@ -71,6 +75,9 @@ RED.panels = (function() { var panel = { ratio: function(ratio) { + if (ratio === undefined) { + return panelRatio; + } panelRatio = ratio; modifiedSizes = true; if (ratio === 0 || ratio === 1) { @@ -99,10 +106,10 @@ RED.panels = (function() { panelSizes = [topPanelSize,bottomPanelSize]; if (vertical) { $(children[0]).outerHeight(panelSizes[0]); - $(children[1]).outerHeight(panelSizes[1]); + // $(children[1]).outerHeight(panelSizes[1]); } else { $(children[0]).outerWidth(panelSizes[0]); - $(children[1]).outerWidth(panelSizes[1]); + // $(children[1]).outerWidth(panelSizes[1]); } } if (options.resize) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js index fca2f26f1..6f8724a8a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js @@ -136,6 +136,23 @@ RED.popover = (function() { closePopup(true); }); } + if (trigger === 'hover' && options.interactive) { + div.on('mouseenter', function(e) { + clearTimeout(timer); + active = true; + }) + div.on('mouseleave', function(e) { + if (timer) { + clearTimeout(timer); + } + if (active) { + timer = setTimeout(function() { + active = false; + closePopup(); + },delay.hide); + } + }) + } if (instant) { div.show(); } else { @@ -163,8 +180,10 @@ RED.popover = (function() { if (trigger === 'hover') { target.on('mouseenter',function(e) { clearTimeout(timer); - active = true; - timer = setTimeout(openPopup,delay.show); + if (!active) { + active = true; + timer = setTimeout(openPopup,delay.show); + } }); target.on('mouseleave disabled', function(e) { if (timer) { @@ -278,6 +297,7 @@ RED.popover = (function() { var closeCallback = options.onclose; var target = options.target; var align = options.align || "left"; + var offset = options.offset || [0,0]; var pos = target.offset(); var targetWidth = target.width(); @@ -285,7 +305,7 @@ RED.popover = (function() { var panelHeight = panel.height(); var panelWidth = panel.width(); - var top = (targetHeight+pos.top); + var top = (targetHeight+pos.top) + offset[1]; if (top+panelHeight > $(window).height()) { top -= (top+panelHeight)-$(window).height() + 5; } @@ -296,12 +316,12 @@ RED.popover = (function() { if (align === "left") { panel.css({ top: top+"px", - left: (pos.left)+"px", + left: (pos.left+offset[0])+"px", }); } else if(align === "right") { panel.css({ top: top+"px", - left: (pos.left-panelWidth)+"px", + left: (pos.left-panelWidth+offset[0])+"px", }); } panel.slideDown(100); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js index ed04733c9..dbb14c6df 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js @@ -27,7 +27,8 @@ * * methods: * - data(items) - clears existing items and replaces with new data - * + * - clearSelection - clears the selected items + * - filter(filterFunc) - filters the tree using the provided function * events: * - treelistselect : function(event, item) {} * - treelistconfirm : function(event,item) {} @@ -59,9 +60,9 @@ * properties and functions: * * item.parent - set to the parent item + * item.depth - the depth in the tree (0 == root) * item.treeList.container * item.treeList.label - the label element for the item - * item.treeList.depth - the depth in the tree (0 == root) * item.treeList.parentList - the editableList instance this item is in * item.treeList.remove() - removes the item from the tree * item.treeList.makeLeaf(detachChildElements) - turns an element with children into a leaf node, @@ -78,8 +79,8 @@ * Optionally selects the item after adding. * item.treeList.expand(done) - expands the parent item to show children. Optional 'done' callback. * item.treeList.collapse() - collapse the parent item to hide children. - * - * + * item.treeList.sortChildren(sortFunction) - does a one-time sort of the children using sortFunction + * item.treeList.replaceElement(element) - replace the custom element for the item * * */ @@ -100,6 +101,8 @@ var target; switch(evt.keyCode) { case 13: // ENTER + evt.preventDefault(); + evt.stopPropagation(); if (selected.children) { if (selected.treeList.container.hasClass("expanded")) { selected.treeList.collapse() @@ -112,6 +115,8 @@ break; case 37: // LEFT + evt.preventDefault(); + evt.stopPropagation(); if (selected.children&& selected.treeList.container.hasClass("expanded")) { selected.treeList.collapse() } else if (selected.parent) { @@ -119,6 +124,8 @@ } break; case 38: // UP + evt.preventDefault(); + evt.stopPropagation(); target = that._getPreviousSibling(selected); if (target) { target = that._getLastDescendant(target); @@ -128,6 +135,8 @@ } break; case 39: // RIGHT + evt.preventDefault(); + evt.stopPropagation(); if (selected.children) { if (!selected.treeList.container.hasClass("expanded")) { selected.treeList.expand() @@ -135,6 +144,8 @@ } break case 40: //DOWN + evt.preventDefault(); + evt.stopPropagation(); if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) { target = selected.children[0]; } else { @@ -151,7 +162,7 @@ } }); this._data = []; - + this._items = {}; this._topList = $('