').appendTo(container);
+ content.css("padding","8px 5px")
+ var min = ui.opts.min;
+ var max = ui.opts.max;
+ var minInput = $('
');
+ minInput.val(min);
+ var maxInput = $('
');
+ maxInput.val(max);
+ $('
').append(minInput).appendTo(content);
+ $('
').append(maxInput).appendTo(content);
+ return {
+ onclose: function() {
+ var min = minInput.val().trim();
+ var max = maxInput.val().trim();
+ if (min !== "") {
+ ui.opts.min = parseInt(min);
+ } else {
+ delete ui.opts.min;
+ }
+ if (max !== "") {
+ ui.opts.max = parseInt(max);
+ } else {
+ delete ui.opts.max;
+ }
+ inputCellInput.typedInput('value',Date.now())
+ }
+ }
+ }
+ }
+ },
+ {
+ value:"none",
+ label:RED._("editor.inputs.none"), icon:"fa fa-times",hasValue:false
+ },
+ {
+ value:"hide",
+ label:RED._("editor.inputs.hidden"), icon:"fa fa-ban",hasValue:false
+ }
+ ],
+ default: 'none'
+ }).on("typedinputtypechange", function(evt,type) {
+ ui.type = $(this).typedInput("type");
+ ui.opts = typeOptions[ui.type];
+ if (ui.type === 'input') {
+ // In the case of 'input' type, the typedInput uses the multiple-option
+ // mode. Its value needs to be set to a comma-separately list of the
+ // selected options.
+ inputCellInput.typedInput('value',ui.opts.types.join(","))
+ } else {
+ // No other type cares about `value`, but doing this will
+ // force a refresh of the label now that `ui.opts` has
+ // been updated.
+ inputCellInput.typedInput('value',Date.now())
+ }
- switch (ui.type) {
- case 'input':
+ switch (ui.type) {
+ case 'input':
valueField.typedInput('types',ui.opts.types);
break;
case 'select':
- valueField.typedInput('types',['str']);
- break;
- case 'checkbox':
+ valueField.typedInput('types',['str']);
+ break;
+ case 'checkbox':
valueField.typedInput('types',['bool']);
break;
case 'spinner':
- valueField.typedInput('types',['num'])
+ valueField.typedInput('types',['num']);
+ break;
+ case 'cred':
+ valueField.typedInput('types',['cred']);
break;
default:
- valueField.typedInput('types',['str','num','bool','json','bin','env'])
- }
- if (ui.type === 'checkbox') {
- valueField.typedInput('type','bool');
- } else if (ui.type === 'spinner') {
- valueField.typedInput('type','num');
- }
- if (ui.type !== 'checkbox') {
- checkbox = null;
- }
+ valueField.typedInput('types',DEFAULT_ENV_TYPE_LIST)
+ }
+ if (ui.type === 'checkbox') {
+ valueField.typedInput('type','bool');
+ } else if (ui.type === 'spinner') {
+ valueField.typedInput('type','num');
+ }
+ if (ui.type !== 'checkbox') {
+ checkbox = null;
+ }
- }).on("change", function(evt,type) {
- if (ui.type === 'input') {
- ui.opts.types = inputCellInput.typedInput('value').split(",");
- valueField.typedInput('types',ui.opts.types);
- }
- });
- valueField.on("change", function(evt) {
- if (checkbox) {
- checkbox.prop('checked',$(this).typedInput('value')==="true")
- }
- })
- // Set the input to the right type. This will trigger the 'typedinputtypechange'
- // event handler (just above ^^) to update the value if needed
- inputCellInput.typedInput('type',ui.type)
+ }).on("change", function(evt,type) {
+ if (ui.type === 'input') {
+ var types = inputCellInput.typedInput('value');
+ ui.opts.types = (types === "") ? ["str"] : types.split(",");
+ valueField.typedInput('types',ui.opts.types);
+ }
+ });
+ valueField.on("change", function(evt) {
+ if (checkbox) {
+ checkbox.prop('checked',$(this).typedInput('value')==="true")
+ }
+ })
+ // Set the input to the right type. This will trigger the 'typedinputtypechange'
+ // event handler (just above ^^) to update the value if needed
+ inputCellInput.typedInput('type',ui.type)
}
- function buildEnvUIRow(row, tenv, ui) {
+ function buildEnvUIRow(row, tenv, ui, node) {
ui.label = ui.label||{};
- if (!ui.type) {
+ if ((tenv.type === "cred" || (tenv.parent && tenv.parent.type === "cred")) && !ui.type) {
+ ui.type = "cred";
+ ui.opts = {};
+ } else if (!ui.type) {
ui.type = "input";
- ui.opts = {types:['str','num','bool','json','bin','env']}
+ ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
} else {
if (!ui.opts) {
ui.opts = (ui.type === "select") ? {opts:[]} : {};
@@ -1467,6 +1558,24 @@ RED.subflow = (function() {
input.spinner(spinnerOpts).parent().width('70%');
input.val(val.value);
break;
+ case "cred":
+ input = $('
').css('width','70%').appendTo(row);
+ if (node.credentials) {
+ if (node.credentials[tenv.name]) {
+ input.val(node.credentials[tenv.name]);
+ } else if (node.credentials['has_'+tenv.name]) {
+ input.val("__PWRD__")
+ } else {
+ input.val("");
+ }
+ } else {
+ input.val("");
+ }
+ input.typedInput({
+ types: ['cred'],
+ default: 'cred'
+ })
+ break;
}
if (input) {
input.attr('id',getSubflowEnvPropertyName(tenv.name))
@@ -1478,7 +1587,7 @@ RED.subflow = (function() {
* @param uiContainer - container for UI
* @param envList - env var definitions of template
*/
- function buildEnvUI(uiContainer, envList) {
+ function buildEnvUI(uiContainer, envList,node) {
uiContainer.empty();
var elementID = 0;
for (var i = 0; i < envList.length; i++) {
@@ -1487,7 +1596,7 @@ RED.subflow = (function() {
continue;
}
var row = $("
", { class: "form-row" }).appendTo(uiContainer);
- buildEnvUIRow(row,tenv, tenv.ui || {});
+ buildEnvUIRow(row,tenv, tenv.ui || {}, node);
// console.log(ui);
}
@@ -1525,7 +1634,7 @@ RED.subflow = (function() {
// icon: "",
// label: {},
// type: "input",
- // opts: {types:['str','num','bool','json','bin','env']}
+ // opts: {types:DEFAULT_ENV_TYPE_LIST}
// }
if (!ui.icon) {
delete ui.icon;
@@ -1535,13 +1644,19 @@ RED.subflow = (function() {
}
switch (ui.type) {
case "input":
- if (JSON.stringify(ui.opts) === JSON.stringify({types:['str','num','bool','json','bin','env']})) {
+ if (JSON.stringify(ui.opts) === JSON.stringify({types:DEFAULT_ENV_TYPE_LIST})) {
// This is the default input config. Delete it as it will
// be applied automatically
delete ui.type;
delete ui.opts;
}
break;
+ case "cred":
+ if (envItem.type === "cred") {
+ delete ui.type;
+ }
+ delete ui.opts;
+ break;
case "select":
if (ui.opts && $.isEmptyObject(ui.opts.opts)) {
// This is the default select config.
@@ -1585,7 +1700,7 @@ RED.subflow = (function() {
type: env.type,
value: env.value
},
- ui: env.ui
+ ui: $.extend(true,{},env.ui)
}
envList.push(item);
parentEnv[env.name] = item;
@@ -1621,13 +1736,17 @@ RED.subflow = (function() {
var item;
var ui = data.ui || {};
if (!ui.type) {
- ui.type = "input";
- ui.opts = {types:['str','num','bool','json','bin','env']}
+ if (data.parent && data.parent.type === "cred") {
+ ui.type = "cred";
+ } else {
+ ui.type = "input";
+ ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
+ }
} else {
ui.opts = ui.opts || {};
}
var input = $("#"+getSubflowEnvPropertyName(data.name));
- if (input.length) {
+ if (input.length || ui.type === "cred") {
item = { name: data.name };
switch(ui.type) {
case "input":
@@ -1639,6 +1758,10 @@ RED.subflow = (function() {
item.type = 'str';
}
break;
+ case "cred":
+ item.value = input.val();
+ item.type = 'cred';
+ break;
case "spinner":
item.value = input.val();
item.type = 'num';
@@ -1652,7 +1775,7 @@ RED.subflow = (function() {
item.value = ""+input.prop("checked");
break;
}
- if (item.type !== data.parent.type || item.value !== data.parent.value) {
+ if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
env.push(item);
}
}
@@ -1702,14 +1825,17 @@ RED.subflow = (function() {
return defaultLabel;
}
- function buildEditForm(container,type,node) {
+ function buildEditForm(type,node) {
if (type === "subflow-template") {
buildPropertiesList($('#node-input-env-container'), node);
} else if (type === "subflow") {
- buildEnvUI($("#subflow-input-ui"), getSubflowInstanceParentEnv(node));
+ // This gets called by the subflow type `oneditprepare` function
+ // registered in nodes.js#addSubflow()
+ buildEnvUI($("#subflow-input-ui"), getSubflowInstanceParentEnv(node), node);
}
}
- function buildPropertiesForm(container, node) {
+ function buildPropertiesForm(node) {
+ var container = $('#editor-subflow-envProperties-content');
var form = $('
').appendTo(container);
var listContainer = $('
').appendTo(form);
var list = $('
').appendTo(listContainer);
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js
new file mode 100644
index 000000000..db8abee2b
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js
@@ -0,0 +1,334 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+RED.sidebar.help = (function() {
+
+ var content;
+ var toolbar;
+ var helpSection;
+ var panels;
+ var panelRatio;
+ var helpTopics = [];
+ var treeList;
+ var tocPanel;
+ var helpIndex = {};
+
+
+ function resizeStack() {
+ var h = $(content).parent().height() - toolbar.outerHeight();
+ panels.resize(h)
+ }
+
+ function init() {
+
+ content = document.createElement("div");
+ content.className = "red-ui-sidebar-info"
+
+ toolbar = $("
", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(content);
+ $('
').appendTo(toolbar)
+ var showTOCButton = toolbar.find('#red-ui-sidebar-help-show-toc')
+ RED.popover.tooltip(showTOCButton,RED._("sidebar.help.showTopics"));
+ showTOCButton.on("click",function(e) {
+ e.preventDefault();
+ if ($(this).hasClass('selected')) {
+ hideTOC();
+ } else {
+ showTOC();
+ }
+ });
+
+ var stackContainer = $("
",{class:"red-ui-sidebar-help-stack"}).appendTo(content);
+
+ tocPanel = $("
", {class: "red-ui-sidebar-help-toc"}).appendTo(stackContainer);
+ var helpPanel = $("
").css({
+ "overflow-y": "scroll"
+ }).appendTo(stackContainer);
+
+ panels = RED.panels.create({
+ container: stackContainer
+ })
+ panels.ratio(0.3);
+
+ helpSearch = $('
').appendTo(toolbar).searchBox({
+ style: "compact",
+ delay: 100,
+ change: function() {
+ var val = $(this).val().toLowerCase();
+ if (val) {
+ showTOC();
+ var c = treeList.treeList('filter',function(item) {
+ if (item.depth === 0) {
+ return true;
+ }
+ return (item.nodeType && item.nodeType.indexOf(val) > -1) ||
+ (item.subflowLabel && item.subflowLabel.indexOf(val) > -1)
+ },true)
+ } else {
+ treeList.treeList('filter',null);
+ var selected = treeList.treeList('selected');
+ if (selected.id) {
+ treeList.treeList('show',selected.id);
+ }
+
+ }
+ }
+ })
+
+ helpSection = $("
",{class:"red-ui-help"}).css({
+ "padding":"6px",
+ }).appendTo(helpPanel)
+
+ $('
'+RED._("sidebar.help.noHelp")+'').appendTo(helpSection);
+
+ treeList = $("
").css({width: "100%"}).appendTo(tocPanel).treeList({data: []})
+ treeList.on('treelistselect', function(e,item) {
+ if (item.nodeType) {
+ showHelp(item.nodeType);
+ }
+ })
+
+ RED.sidebar.addTab({
+ id: "help",
+ label: RED._("sidebar.help.label"),
+ name: RED._("sidebar.help.name"),
+ iconClass: "fa fa-book",
+ action:"core:show-help-tab",
+ content: content,
+ pinned: true,
+ enableOnEdit: true,
+ onchange: function() {
+ resizeStack()
+ }
+ });
+
+ $(window).on("resize", resizeStack);
+ $(window).on("focus", resizeStack);
+
+ RED.events.on('registry:node-type-added', queueRefresh);
+ RED.events.on('registry:node-type-removed', queueRefresh);
+ RED.events.on('subflows:change', refreshSubflow);
+
+ RED.actions.add("core:show-help-tab",show);
+
+ }
+
+ var refreshTimer;
+ function queueRefresh() {
+ if (!refreshTimer) {
+ refreshTimer = setTimeout(function() {
+ refreshTimer = null;
+ refreshHelpIndex();
+ },500);
+ }
+ }
+
+ function refreshSubflow(sf) {
+ var item = treeList.treeList('get',"node-type:subflow:"+sf.id);
+ item.subflowLabel = sf._def.label().toLowerCase();
+ item.treeList.replaceElement(getNodeLabel({_def:sf._def,type:sf._def.label()}));
+ }
+
+ function hideTOC() {
+ var tocButton = $('#red-ui-sidebar-help-show-toc')
+ if (tocButton.hasClass('selected')) {
+ tocButton.removeClass('selected');
+ panelRatio = panels.ratio();
+ tocPanel.css({"transition":"height 0.2s"})
+ panels.ratio(0)
+ setTimeout(function() {
+ tocPanel.css({"transition":""})
+ },250);
+ }
+ }
+ function showTOC() {
+ var tocButton = $('#red-ui-sidebar-help-show-toc')
+ if (!tocButton.hasClass('selected')) {
+ tocButton.addClass('selected');
+ tocPanel.css({"transition":"height 0.2s"})
+ panels.ratio(Math.max(0.3,Math.min(panelRatio,0.7)));
+ setTimeout(function() {
+ tocPanel.css({"transition":""})
+ var selected = treeList.treeList('selected');
+ if (selected.id) {
+ treeList.treeList('show',selected);
+ }
+ },250);
+ }
+ }
+
+ function refreshHelpIndex() {
+ helpTopics = [];
+ var modules = RED.nodes.registry.getModuleList();
+ var moduleNames = Object.keys(modules);
+ moduleNames.sort();
+
+ var helpData = [{
+ label: RED._("sidebar.help.nodeHelp"),
+ children: [],
+ expanded: true
+ }]
+
+ var subflows = RED.nodes.registry.getNodeTypes().filter(function(t) {return /subflow/.test(t)});
+ if (subflows.length > 0) {
+ helpData[0].children.push({
+ label: RED._("menu.label.subflows"),
+ children: []
+ })
+ subflows.forEach(function(nodeType) {
+ var sf = RED.nodes.getType(nodeType);
+ helpData[0].children[0].children.push({
+ id:"node-type:"+nodeType,
+ nodeType: nodeType,
+ subflowLabel: sf.label().toLowerCase(),
+ element: getNodeLabel({_def:sf,type:sf.label()})
+ })
+ })
+ }
+
+
+ moduleNames.forEach(function(moduleName) {
+ var module = modules[moduleName];
+ var nodeTypes = [];
+
+ var setNames = Object.keys(module.sets);
+ setNames.forEach(function(setName) {
+ module.sets[setName].types.forEach(function(nodeType) {
+ if ($("script[data-help-name='"+nodeType+"']").length) {
+ nodeTypes.push({
+ id: "node-type:"+nodeType,
+ nodeType: nodeType,
+ element:getNodeLabel({_def:RED.nodes.getType(nodeType),type:nodeType})
+ })
+ }
+ })
+ })
+ if (nodeTypes.length > 0) {
+ nodeTypes.sort(function(A,B) {
+ return A.nodeType.localeCompare(B.nodeType)
+ })
+ helpData[0].children.push({
+ id: moduleName,
+ icon: "fa fa-cube",
+ label: moduleName,
+ children: nodeTypes
+ })
+ }
+ });
+ treeList.treeList("data",helpData);
+ }
+
+ function getNodeLabel(n) {
+ var div = $('
',{class:"red-ui-info-outline-item"});
+ RED.utils.createNodeIcon(n).appendTo(div);
+ var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div);
+ $('
',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).text(n.name||n.type).appendTo(contentDiv);
+ return div;
+ }
+
+ function showHelp(nodeType) {
+ helpSection.empty();
+ var helpText;
+ var title;
+ var m = /^subflow(:(.+))?$/.exec(nodeType);
+ if (m && m[2]) {
+ var subflowNode = RED.nodes.subflow(m[2]);
+ helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('
'+RED._("sidebar.info.none")+''));
+ title = subflowNode.name || nodeType;
+ } else {
+ helpText = $("script[data-help-name='"+nodeType+"']").html()||('
'+RED._("sidebar.info.none")+'');
+ title = nodeType;
+ }
+ setInfoText(title, helpText, helpSection);
+
+ var ratio = panels.ratio();
+ if (ratio > 0.7) {
+ panels.ratio(0.7)
+ }
+ treeList.treeList("show","node-type:"+nodeType)
+ treeList.treeList("select","node-type:"+nodeType, false);
+
+ }
+
+ function show(type) {
+ RED.sidebar.show("help");
+ if (type) {
+ hideTOC();
+ showHelp(type);
+ }
+ resizeStack();
+ }
+
+ // TODO: DRY - projects.js
+ function addTargetToExternalLinks(el) {
+ $(el).find("a").each(function(el) {
+ var href = $(this).attr('href');
+ if (/^https?:/.test(href)) {
+ $(this).attr('target','_blank');
+ }
+ });
+ return el;
+ }
+
+ function setInfoText(title, infoText,target) {
+ if (title) {
+ $("
",{class:"red-ui-help-title"}).text(title).appendTo(target);
+ }
+ var info = addTargetToExternalLinks($('
'+infoText+'
')).appendTo(target);
+ info.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "" );
+ var foldingHeader = "H3";
+ info.find(foldingHeader).wrapInner('')
+ .find("a").prepend('').on("click", function(e) {
+ e.preventDefault();
+ var isExpanded = $(this).hasClass('expanded');
+ var el = $(this).parent().next();
+ while(el.length === 1 && el[0].nodeName !== foldingHeader) {
+ el.toggle(!isExpanded);
+ el = el.next();
+ }
+ $(this).toggleClass('expanded',!isExpanded);
+ })
+ target.parent().scrollTop(0);
+ }
+
+ function set(html,title) {
+ $(helpSection).empty();
+ setInfoText(title,html,helpSection);
+ hideTOC();
+ show();
+ }
+
+ function refreshSelection(selection) {
+ if (selection === undefined) {
+ selection = RED.view.selection();
+ }
+ if (selection.nodes) {
+ if (selection.nodes.length == 1) {
+ var node = selection.nodes[0];
+ if (node.type === "subflow" && node.direction) {
+ // ignore subflow virtual ports
+ } else if (node.type !== 'group'){
+ showHelp(node.type);
+ }
+ }
+ }
+ }
+ RED.events.on("view:selection-changed",refreshSelection);
+
+ return {
+ init: init,
+ show: show,
+ set: set
+ }
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
new file mode 100644
index 000000000..222aafd45
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js
@@ -0,0 +1,629 @@
+RED.sidebar.info.outliner = (function() {
+
+ var treeList;
+ var searchInput;
+ var activeSearch;
+ var projectInfo;
+ var projectInfoLabel;
+ var flowList;
+ var subflowList;
+ var globalConfigNodes;
+
+ var objects = {};
+ var missingParents = {};
+ var configNodeTypes;
+
+
+ function getFlowData() {
+ var flowData = [
+ {
+ label: RED._("menu.label.flows"),
+ expanded: true,
+ children: []
+ },
+ {
+ id: "__subflow__",
+ label: RED._("menu.label.subflows"),
+ children: [
+ getEmptyItem("__subflow__")
+ ]
+ },
+ {
+ id: "__global__",
+ flow: "__global__",
+ label: RED._("sidebar.info.globalConfig"),
+ types: {},
+ children: [
+ getEmptyItem("__global__")
+ ]
+ }
+ ]
+
+ flowList = flowData[0];
+ subflowList = flowData[1];
+ globalConfigNodes = flowData[2];
+ configNodeTypes = { __global__: globalConfigNodes};
+
+ return flowData;
+ }
+
+ function getProjectLabel(p) {
+ var div = $('',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
+ div.css("width", "calc(100% - 40px)");
+ var contentDiv = $('
',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
+ contentDiv.text(p.name);
+ var controls = $('
',{class:"red-ui-info-outline-item-controls"}).appendTo(div);
+ var editProjectButton = $('
')
+ .appendTo(controls)
+ .on("click", function(evt) {
+ evt.preventDefault();
+ RED.projects.editProject();
+ });
+ RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
+ return div;
+ }
+
+ var empties = {};
+ function getEmptyItem(id) {
+ var item = {
+ empty: true,
+ element: $('
').text(RED._("sidebar.info.empty")),
+ }
+ empties[id] = item;
+ return item;
+ }
+
+ function getNodeLabelText(n) {
+ var label = n.name || n.type+": "+n.id;
+ if (n._def.label) {
+ try {
+ label = (typeof n._def.label === "function" ? n._def.label.call(n) : n._def.label)||"";
+ } catch(err) {
+ console.log("Definition error: "+type+".label",err);
+ }
+ }
+ var newlineIndex = label.indexOf("\\n");
+ if (newlineIndex > -1) {
+ label = label.substring(0,newlineIndex)+"...";
+ }
+ return label;
+ }
+
+ function getNodeLabel(n) {
+ var div = $('
',{class:"red-ui-info-outline-item"});
+ RED.utils.createNodeIcon(n).appendTo(div);
+ var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div);
+ var labelText = getNodeLabelText(n);
+ var label = $('
',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
+ if (labelText) {
+ label.text(labelText)
+ } else {
+ label.html(" ")
+ }
+
+ addControls(n, div);
+
+ return div;
+ }
+
+ function getFlowLabel(n) {
+ var div = $('
',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
+ var contentDiv = $('
',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
+ var label = (typeof n === "string")? n : n.label;
+ var newlineIndex = label.indexOf("\\n");
+ if (newlineIndex > -1) {
+ label = label.substring(0,newlineIndex)+"...";
+ }
+ contentDiv.text(label);
+ addControls(n, div);
+ return div;
+ }
+
+ function getSubflowLabel(n) {
+
+ var div = $('
',{class:"red-ui-info-outline-item"});
+ RED.utils.createNodeIcon(n).appendTo(div);
+ var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div);
+ var labelText = getNodeLabelText(n);
+ var label = $('
',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv);
+ if (labelText) {
+ label.text(labelText)
+ } else {
+ label.html(" ")
+ }
+
+ addControls(n, div);
+
+ return div;
+
+
+ // var div = $('
',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
+ // var contentDiv = $('
',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
+ // contentDiv.text(n.name || n.id);
+ // addControls(n, div);
+ // return div;
+ }
+
+ function addControls(n,div) {
+ var controls = $('
',{class:"red-ui-info-outline-item-controls red-ui-info-outline-item-hover-controls"}).appendTo(div);
+
+ if (n._def.category === "config" && n.type !== "group") {
+ var userCountBadge = $('
').text(n.users.length).appendTo(controls).on("click",function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ RED.search.show("uses:"+n.id);
+ })
+ RED.popover.tooltip(userCountBadge,function() { return RED._('editor.nodesUse',{count:n.users.length})});
+ }
+
+ if (n._def.button) {
+ var triggerButton = $('
').appendTo(controls).on("click",function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ RED.view.clickNodeButton(n);
+ })
+ RED.popover.tooltip(triggerButton,RED._("sidebar.info.triggerAction"));
+ }
+ // $('
').appendTo(controls).on("click",function(evt) {
+ // evt.preventDefault();
+ // evt.stopPropagation();
+ // RED.view.reveal(n.id);
+ // })
+ if (n.type !== 'group' && n.type !== 'subflow') {
+ var toggleButton = $('
').appendTo(controls).on("click",function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ if (n.type === 'tab') {
+ if (n.disabled) {
+ RED.workspaces.enable(n.id)
+ } else {
+ RED.workspaces.disable(n.id)
+ }
+ } else {
+ // TODO: this ought to be a utility function in RED.nodes
+ var historyEvent = {
+ t: "edit",
+ node: n,
+ changed: n.changed,
+ changes: {
+ d: n.d
+ },
+ dirty:RED.nodes.dirty()
+ }
+ if (n.d) {
+ delete n.d;
+ } else {
+ n.d = true;
+ }
+ n.dirty = true;
+ n.changed = true;
+ RED.events.emit("nodes:change",n);
+ RED.nodes.dirty(true)
+ RED.view.redraw();
+ }
+ });
+ RED.popover.tooltip(toggleButton,function() {
+ return RED._("common.label."+(((n.type==='tab' && n.disabled) || (n.type!=='tab' && n.d))?"enable":"disable"));
+ });
+ } else {
+ $('
').appendTo(controls)
+ }
+ controls.find("button").on("dblclick", function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ })
+ }
+
+ function onProjectLoad(activeProject) {
+ objects = {};
+ var newFlowData = getFlowData();
+ projectInfoLabel.empty();
+ getProjectLabel(activeProject).appendTo(projectInfoLabel);
+ projectInfo.show();
+ treeList.treeList('data',newFlowData);
+ }
+
+ function build() {
+ var container = $("
", {class:"red-ui-info-outline"}).css({'height': '100%'});
+ var toolbar = $("
", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container);
+
+ searchInput = $('').appendTo(toolbar).searchBox({
+ style: "compact",
+ delay: 500,
+ change: function() {
+ var val = $(this).val();
+ var searchResults = RED.search.search(val);
+ if (val) {
+ activeSearch = val;
+ var resultMap = {};
+ for (var i=0,l=searchResults.length;i
').hide().appendTo(container)
+ projectInfoLabel = $('
').appendTo(projectInfo);
+
+ // ').appendTo(container)
+
+ treeList = $("
").css({width: "100%"}).appendTo(container).treeList({
+ data:getFlowData()
+ })
+ treeList.on('treelistselect', function(e,item) {
+ var node = RED.nodes.node(item.id) || RED.nodes.group(item.id);
+ if (node) {
+ if (node.type === 'group' || node._def.category !== "config") {
+ RED.view.select({nodes:[node]})
+ } else {
+ RED.view.select({nodes:[]})
+ }
+ }
+ })
+ treeList.on('treelistconfirm', function(e,item) {
+ var node = RED.nodes.node(item.id);
+ if (node) {
+ if (node._def.category === "config") {
+ RED.editor.editConfig("", node.type, node.id);
+ } else {
+ RED.editor.edit(node);
+ }
+ }
+ })
+
+ RED.events.on("projects:load", onProjectLoad)
+
+ RED.events.on("flows:add", onFlowAdd)
+ RED.events.on("flows:remove", onObjectRemove)
+ RED.events.on("flows:change", onFlowChange)
+ RED.events.on("flows:reorder", onFlowsReorder)
+
+ RED.events.on("subflows:add", onSubflowAdd)
+ RED.events.on("subflows:remove", onObjectRemove)
+ RED.events.on("subflows:change", onSubflowChange)
+
+ RED.events.on("nodes:add",onNodeAdd);
+ RED.events.on("nodes:remove",onObjectRemove);
+ RED.events.on("nodes:change",onNodeChange);
+
+ RED.events.on("groups:add",onNodeAdd);
+ RED.events.on("groups:remove",onObjectRemove);
+ RED.events.on("groups:change",onNodeChange);
+
+ RED.events.on("workspace:clear", onWorkspaceClear)
+
+ return container;
+ }
+ function onWorkspaceClear() {
+ treeList.treeList('data',getFlowData());
+ }
+ function onFlowAdd(ws) {
+ objects[ws.id] = {
+ id: ws.id,
+ element: getFlowLabel(ws),
+ children:[],
+ deferBuild: true,
+ icon: "red-ui-icons red-ui-icons-flow",
+ gutter: getGutter(ws)
+ }
+ if (missingParents[ws.id]) {
+ objects[ws.id].children = missingParents[ws.id];
+ delete missingParents[ws.id]
+ } else {
+ objects[ws.id].children.push(getEmptyItem(ws.id));
+ }
+ flowList.treeList.addChild(objects[ws.id])
+ objects[ws.id].element.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
+ objects[ws.id].treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
+ updateSearch();
+
+ }
+ function onFlowChange(n) {
+ var existingObject = objects[n.id];
+
+ var label = n.label || n.id;
+ var newlineIndex = label.indexOf("\\n");
+ if (newlineIndex > -1) {
+ label = label.substring(0,newlineIndex)+"...";
+ }
+ existingObject.element.find(".red-ui-info-outline-item-label").text(label);
+ existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
+ existingObject.treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
+ updateSearch();
+ }
+ function onFlowsReorder(order) {
+ var indexMap = {};
+ order.forEach(function(id,index) {
+ indexMap[id] = index;
+ })
+
+ flowList.treeList.sortChildren(function(A,B) {
+ if (A.id === "__global__") { return -1 }
+ if (B.id === "__global__") { return 1 }
+ return indexMap[A.id] - indexMap[B.id]
+ })
+ }
+ function onSubflowAdd(sf) {
+ objects[sf.id] = {
+ id: sf.id,
+ element: getNodeLabel(sf),
+ children:[],
+ deferBuild: true,
+ gutter: getGutter(sf)
+ }
+ if (missingParents[sf.id]) {
+ objects[sf.id].children = missingParents[sf.id];
+ delete missingParents[sf.id]
+ } else {
+ objects[sf.id].children.push(getEmptyItem(sf.id));
+ }
+ if (empties["__subflow__"]) {
+ empties["__subflow__"].treeList.remove();
+ delete empties["__subflow__"];
+ }
+ subflowList.treeList.addChild(objects[sf.id])
+ updateSearch();
+ }
+ function onSubflowChange(sf) {
+ var existingObject = objects[sf.id];
+ existingObject.treeList.replaceElement(getNodeLabel(sf));
+ // existingObject.element.find(".red-ui-info-outline-item-label").text(n.name || n.id);
+ RED.nodes.eachNode(function(n) {
+ if (n.type == "subflow:"+sf.id) {
+ var sfInstance = objects[n.id];
+ sfInstance.treeList.replaceElement(getNodeLabel(n));
+ }
+ });
+ updateSearch();
+ }
+
+ function onNodeChange(n) {
+ var existingObject = objects[n.id];
+ var parent = n.g||n.z||"__global__";
+
+ var nodeLabelText = getNodeLabelText(n);
+ if (nodeLabelText) {
+ existingObject.element.find(".red-ui-info-outline-item-label").text(nodeLabelText);
+ } else {
+ existingObject.element.find(".red-ui-info-outline-item-label").html(" ");
+ }
+ var existingParent = existingObject.parent.id;
+ if (!existingParent) {
+ existingParent = existingObject.parent.parent.flow
+ }
+ if (parent !== existingParent) {
+ var parentItem = existingObject.parent;
+ existingObject.treeList.remove(true);
+ if (parentItem.children.length === 0) {
+ if (parentItem.config) {
+ // this is a config
+ parentItem.treeList.remove();
+ // console.log("Removing",n.type,"from",parentItem.parent.id||parentItem.parent.parent.id)
+
+ delete configNodeTypes[parentItem.parent.id||parentItem.parent.parent.id].types[n.type];
+
+
+ if (parentItem.parent.children.length === 0) {
+ if (parentItem.parent.id === "__global__") {
+ parentItem.parent.treeList.addChild(getEmptyItem(parentItem.parent.id));
+ } else {
+ delete configNodeTypes[parentItem.parent.parent.id];
+ parentItem.parent.treeList.remove();
+ if (parentItem.parent.parent.children.length === 0) {
+ parentItem.parent.parent.treeList.addChild(getEmptyItem(parentItem.parent.parent.id));
+ }
+
+ }
+ }
+ } else {
+ parentItem.treeList.addChild(getEmptyItem(parentItem.id));
+ }
+ }
+ if (n._def.category === 'config' && n.type !== 'group') {
+ // This must be a config node that has been rescoped
+ createFlowConfigNode(parent,n.type);
+ configNodeTypes[parent].types[n.type].treeList.addChild(objects[n.id]);
+ } else {
+ // This is a node that has moved groups
+ if (empties[parent]) {
+ empties[parent].treeList.remove();
+ delete empties[parent];
+ }
+ objects[parent].treeList.addChild(existingObject)
+ }
+
+ // if (parent === "__global__") {
+ // // Global always exists here
+ // if (!configNodeTypes[parent][n.type]) {
+ // configNodeTypes[parent][n.type] = {
+ // config: true,
+ // label: n.type,
+ // children: []
+ // }
+ // globalConfigNodes.treeList.addChild(configNodeTypes[parent][n.type])
+ // }
+ // configNodeTypes[parent][n.type].treeList.addChild(existingObject);
+ // } else {
+ // if (empties[parent]) {
+ // empties[parent].treeList.remove();
+ // delete empties[parent];
+ // }
+ // objects[parent].treeList.addChild(existingObject)
+ // }
+ }
+ existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
+
+ if (n._def.category === "config" && n.type !== 'group') {
+ existingObject.element.find(".red-ui-info-outline-item-control-users").text(n.users.length);
+ }
+
+ updateSearch();
+ }
+ function onObjectRemove(n) {
+ var existingObject = objects[n.id];
+ existingObject.treeList.remove();
+ delete objects[n.id]
+
+ // If this is a group being removed, it may have an empty item
+ if (empties[n.id]) {
+ delete empties[n.id];
+ }
+ var parent = existingObject.parent;
+ if (parent.children.length === 0) {
+ if (parent.config) {
+ // this is a config
+ parent.treeList.remove();
+ delete configNodeTypes[parent.parent.id||n.z].types[n.type];
+ if (parent.parent.children.length === 0) {
+ if (parent.parent.id === "__global__") {
+ parent.parent.treeList.addChild(getEmptyItem(parent.parent.id));
+ } else {
+ delete configNodeTypes[n.z];
+ parent.parent.treeList.remove();
+ if (parent.parent.parent.children.length === 0) {
+ parent.parent.parent.treeList.addChild(getEmptyItem(parent.parent.parent.id));
+ }
+ }
+ }
+ } else {
+ parent.treeList.addChild(getEmptyItem(parent.id));
+ }
+ }
+ }
+ function getGutter(n) {
+ var span = $("
",{class:"red-ui-info-outline-gutter"});
+ var revealButton = $('').appendTo(span).on("click",function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ RED.view.reveal(n.id);
+ })
+ RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
+ return span;
+ }
+
+ function createFlowConfigNode(parent,type) {
+ // console.log("createFlowConfig",parent,type,configNodeTypes[parent]);
+ if (empties[parent]) {
+ empties[parent].treeList.remove();
+ delete empties[parent];
+ }
+ if (!configNodeTypes[parent]) {
+ // There is no 'config nodes' item in the parent flow
+ configNodeTypes[parent] = {
+ config: true,
+ flow: parent,
+ types: {},
+ label: RED._("menu.label.displayConfig"),
+ children: []
+ }
+ objects[parent].treeList.insertChildAt(configNodeTypes[parent],0);
+ // console.log("CREATED", parent)
+ }
+ if (!configNodeTypes[parent].types[type]) {
+ configNodeTypes[parent].types[type] = {
+ config: true,
+ label: type,
+ children: []
+ }
+ configNodeTypes[parent].treeList.addChild(configNodeTypes[parent].types[type]);
+ // console.log("CREATED", parent,type)
+ }
+ }
+ function onNodeAdd(n) {
+ objects[n.id] = {
+ id: n.id,
+ element: getNodeLabel(n),
+ gutter: getGutter(n)
+ }
+ if (n.type === "group") {
+ objects[n.id].children = [];
+ objects[n.id].deferBuild = true;
+ if (missingParents[n.id]) {
+ objects[n.id].children = missingParents[n.id];
+ delete missingParents[n.id]
+ }
+ }
+ var parent = n.g||n.z||"__global__";
+
+ if (n._def.category !== "config" || n.type === 'group') {
+ if (objects[parent]) {
+ if (empties[parent]) {
+ empties[parent].treeList.remove();
+ delete empties[parent];
+ }
+ if (objects[parent].treeList) {
+ objects[parent].treeList.addChild(objects[n.id]);
+ } else {
+ objects[parent].children.push(objects[n.id])
+ }
+ } else {
+ missingParents[parent] = missingParents[parent]||[];
+ missingParents[parent].push(objects[n.id])
+ }
+ } else {
+ createFlowConfigNode(parent,n.type);
+ configNodeTypes[parent].types[n.type].treeList.addChild(objects[n.id]);
+ }
+ objects[n.id].element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
+ updateSearch();
+ }
+
+ var updateSearchTimer;
+ function updateSearch() {
+ if (updateSearchTimer) {
+ clearTimeout(updateSearchTimer)
+ }
+ if (activeSearch) {
+ updateSearchTimer = setTimeout(function() {
+ searchInput.searchBox("change");
+ },100);
+ }
+ }
+ function onSelectionChanged(selection) {
+ // treeList.treeList('clearSelection');
+ }
+
+ return {
+ build: build,
+ search: function(val) {
+ searchInput.searchBox('value',val)
+ },
+ select: function(node) {
+ if (node) {
+ if (Array.isArray(node)) {
+ treeList.treeList('select', node.map(function(n) { return objects[n.id] }), false)
+ } else {
+ treeList.treeList('select', objects[node.id], false)
+
+ }
+ } else {
+ treeList.treeList('clearSelection')
+ }
+ },
+ reveal: function(node) {
+ treeList.treeList('show', objects[node.id])
+ }
+ }
+})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
index bfa4e4b23..d84f47f73 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
@@ -16,16 +16,32 @@
RED.sidebar.info = (function() {
var content;
- var sections;
- var propertiesSection;
+ var panels;
var infoSection;
- var helpSection;
+
+ var propertiesPanelContent;
+ var propertiesPanelHeader;
+ var propertiesPanelHeaderIcon;
+ var propertiesPanelHeaderLabel;
+ var propertiesPanelHeaderReveal;
+ var propertiesPanelHeaderHelp;
+
+ var selectedObject;
+
+ var tipContainer;
var tipBox;
+ // TODO: remove this
var expandedSections = {
"property": false
};
+ function resizeStack() {
+ if (panels) {
+ var h = $(content).parent().height() - tipContainer.outerHeight();
+ panels.resize(h)
+ }
+ }
function init() {
content = document.createElement("div");
@@ -35,31 +51,81 @@ RED.sidebar.info = (function() {
var stackContainer = $("",{class:"red-ui-sidebar-info-stack"}).appendTo(content);
- sections = RED.stack.create({
- container: stackContainer
- }).hide();
+ var outlinerPanel = $("
").css({
+ "overflow": "hidden",
+ "height": "calc(70%)"
+ }).appendTo(stackContainer);
+ var propertiesPanel = $("
").css({
+ "overflow":"hidden",
+ "height":"100%",
+ "display": "flex",
+ "flex-direction": "column"
+ }).appendTo(stackContainer);
+ propertiesPanelHeader = $("
", {class:"red-ui-palette-header red-ui-info-header"}).css({
+ "flex":"0 0 auto"
+ }).appendTo(propertiesPanel);
- propertiesSection = sections.add({
- title: RED._("sidebar.info.info"),
- collapsible: true
+ propertiesPanelHeaderIcon = $("
").appendTo(propertiesPanelHeader);
+ propertiesPanelHeaderLabel = $("").appendTo(propertiesPanelHeader);
+ propertiesPanelHeaderHelp = $('').css({
+ position: 'absolute',
+ top: '12px',
+ right: '32px'
+ }).on("click", function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ if (selectedObject) {
+ RED.sidebar.help.show(selectedObject.type);
+ }
+ }).appendTo(propertiesPanelHeader);
+ RED.popover.tooltip(propertiesPanelHeaderHelp,RED._("sidebar.help.showHelp"));
+
+
+ propertiesPanelHeaderReveal = $('').css({
+ position: 'absolute',
+ top: '12px',
+ right: '8px'
+ }).on("click", function(evt) {
+ evt.preventDefault();
+ evt.stopPropagation();
+ if (selectedObject) {
+ RED.sidebar.info.outliner.reveal(selectedObject);
+ RED.view.reveal(selectedObject.id);
+ }
+ }).appendTo(propertiesPanelHeader);
+ RED.popover.tooltip(propertiesPanelHeaderReveal,RED._("sidebar.help.showInOutline"));
+
+
+ propertiesPanelContent = $("").css({
+ "flex":"1 1 auto",
+ "overflow-y":"scroll",
+ }).appendTo(propertiesPanel);
+
+
+ panels = RED.panels.create({container: stackContainer})
+ panels.ratio(0.6);
+ RED.sidebar.info.outliner.build().appendTo(outlinerPanel);
+
+
+ RED.sidebar.addTab({
+ id: "info",
+ label: RED._("sidebar.info.label"),
+ name: RED._("sidebar.info.name"),
+ iconClass: "fa fa-info",
+ action:"core:show-info-tab",
+ content: content,
+ pinned: true,
+ enableOnEdit: true
});
- propertiesSection.expand();
- infoSection = sections.add({
- title: RED._("sidebar.info.desc"),
- collapsible: true
- });
- infoSection.expand();
- infoSection.content.css("padding","6px");
+ RED.events.on("sidebar:resize", resizeStack);
- helpSection = sections.add({
- title: RED._("sidebar.info.nodeHelp"),
- collapsible: true
- });
- helpSection.expand();
- helpSection.content.css("padding","6px");
+ $(window).on("resize", resizeStack);
+ $(window).on("focus", resizeStack);
- var tipContainer = $('
').appendTo(content);
+
+ // Tip Box
+ tipContainer = $('
').appendTo(content);
tipBox = $('
').appendTo(tipContainer);
var tipButtons = $('
').appendTo(tipContainer);
@@ -75,17 +141,6 @@ RED.sidebar.info = (function() {
RED.actions.invoke("core:toggle-show-tips");
RED.notify(RED._("sidebar.info.showTips"));
});
-
- RED.sidebar.addTab({
- id: "info",
- label: RED._("sidebar.info.label"),
- name: RED._("sidebar.info.name"),
- iconClass: "fa fa-info",
- action:"core:show-info-tab",
- content: content,
- pinned: true,
- enableOnEdit: true
- });
if (tips.enabled()) {
tips.start();
} else {
@@ -113,46 +168,36 @@ RED.sidebar.info = (function() {
refreshSelection();
return;
}
- sections.show();
- $(propertiesSection.content).empty();
- $(infoSection.content).empty();
- $(helpSection.content).empty();
- infoSection.title.text(RED._("sidebar.info.desc"));
+ $(propertiesPanelContent).empty();
var propRow;
- var table = $('
').appendTo(propertiesSection.content);
+ var table = $('
').appendTo(propertiesPanelContent);
var tableBody = $('
').appendTo(table);
var subflowNode;
var subflowUserCount;
- var activeProject = RED.projects.getActiveProject();
- if (activeProject) {
- propRow = $('| '+ RED._("sidebar.project.name") + ' | |
').appendTo(tableBody);
- $(propRow.children()[1]).text(activeProject.name||"");
- $(' |
').appendTo(tableBody);
- var editProjectButton = $('')
- .appendTo(propRow.children()[1])
- .on("click", function(evt) {
- evt.preventDefault();
- RED.projects.editProject();
- });
- RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
- }
- propertiesSection.container.show();
- infoSection.container.show();
- helpSection.container.show();
if (node === null) {
+ RED.sidebar.info.outliner.select(null);
return;
} else if (Array.isArray(node)) {
// Multiple things selected
// - hide help and info sections
+ RED.sidebar.info.outliner.select(node);
+
+ propertiesPanelHeaderIcon.empty();
+ RED.utils.createNodeIcon({type:"_selection_"}).appendTo(propertiesPanelHeaderIcon);
+ propertiesPanelHeaderLabel.text("Selection");
+ propertiesPanelHeaderReveal.hide();
+ propertiesPanelHeaderHelp.hide();
+ selectedObject = null;
var types = {
nodes:0,
flows:0,
- subflows:0
+ subflows:0,
+ groups: 0
}
node.forEach(function(n) {
if (n.type === 'tab') {
@@ -160,12 +205,13 @@ RED.sidebar.info = (function() {
types.nodes += RED.nodes.filterNodes({z:n.id}).length;
} else if (n.type === 'subflow') {
types.subflows++;
+ } else if (n.type === 'group') {
+ types.groups++;
} else {
types.nodes++;
}
});
- helpSection.container.hide();
- infoSection.container.hide();
+ // infoSection.container.hide();
// - show the count of selected nodes
propRow = $('| '+RED._("sidebar.info.selection")+" | |
").appendTo(tableBody);
@@ -179,53 +225,96 @@ RED.sidebar.info = (function() {
if (types.nodes > 0) {
$('').text(RED._("clipboard.node",{count:types.nodes})).appendTo(counts);
}
+ if (types.groups > 0) {
+ $('
').text(RED._("clipboard.group",{count:types.groups})).appendTo(counts);
+ }
} else {
// A single 'thing' selected.
+ RED.sidebar.info.outliner.select(node);
+
// Check to see if this is a subflow or subflow instance
- var m = /^subflow(:(.+))?$/.exec(node.type);
- if (m) {
- if (m[2]) {
- subflowNode = RED.nodes.subflow(m[2]);
+ var subflowRegex = /^subflow(:(.+))?$/.exec(node.type);
+ if (subflowRegex) {
+ if (subflowRegex[2]) {
+ subflowNode = RED.nodes.subflow(subflowRegex[2]);
} else {
subflowNode = node;
}
- subflowUserCount = 0;
var subflowType = "subflow:"+subflowNode.id;
- RED.nodes.eachNode(function(n) {
- if (n.type === subflowType) {
- subflowUserCount++;
- }
- });
+ subflowUserCount = subflowNode.instances.length;
}
+
+ propertiesPanelHeaderIcon.empty();
+ RED.utils.createNodeIcon(node).appendTo(propertiesPanelHeaderIcon);
+ var objectLabel = RED.utils.getNodeLabel(node, node.type+": "+node.id)
+ var newlineIndex = objectLabel.indexOf("\\n");
+ if (newlineIndex > -1) {
+ objectLabel = objectLabel.substring(0,newlineIndex)+"...";
+ }
+ propertiesPanelHeaderLabel.text(objectLabel);
+ propertiesPanelHeaderReveal.show();
+ selectedObject = node;
+
+ propRow = $('
| |
').appendTo(tableBody);
+ var objectType = "node";
+ if (node.type === "subflow" || subflowRegex) {
+ objectType = "subflow";
+ } else if (node.type === "tab") {
+ objectType = "flow";
+ }else if (node.type === "group") {
+ objectType = "group";
+ }
+ $(propRow.children()[0]).text(RED._("sidebar.info."+objectType))
+ RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
+
if (node.type === "tab" || node.type === "subflow") {
// If nothing is selected, but we're on a flow or subflow tab.
- propRow = $('
| '+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+' | |
').appendTo(tableBody);
- RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
- propRow = $('
| '+RED._("sidebar.info.tabName")+" | |
").appendTo(tableBody);
- $(propRow.children()[1]).text(node.label||node.name||"");
- if (node.type === "tab") {
- propRow = $('
| '+RED._("sidebar.info.status")+' | |
').appendTo(tableBody);
- $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
+ propertiesPanelHeaderHelp.hide();
+
+ } else if (node.type === "group") {
+ propertiesPanelHeaderHelp.hide();
+
+ propRow = $('
| | |
').appendTo(tableBody);
+
+ var typeCounts = {
+ nodes:0,
+ groups: 0
}
+ var allNodes = RED.group.getNodes(node,true);
+ allNodes.forEach(function(n) {
+ if (n.type === "group") {
+ typeCounts.groups++;
+ } else {
+ typeCounts.nodes++
+ }
+ });
+ var counts = $('
').appendTo($(propRow.children()[1]));
+ if (typeCounts.nodes > 0) {
+ $('
').text(RED._("clipboard.node",{count:typeCounts.nodes})).appendTo(counts);
+ }
+ if (typeCounts.groups > 0) {
+ $('
').text(RED._("clipboard.group",{count:typeCounts.groups})).appendTo(counts);
+ }
+
+
} else {
- // An actual node is selected in the editor - build up its properties table
- propRow = $('
| '+RED._("sidebar.info.node")+" | |
").appendTo(tableBody);
- RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
- if (node.type !== "subflow" && node.type !== "unknown" && node.name) {
- propRow = $('
| '+RED._("common.label.name")+' | |
').appendTo(tableBody);
- $('
').text(node.name).appendTo(propRow.children()[1]);
- }
- if (!m) {
- propRow = $('
| '+RED._("sidebar.info.type")+" | |
").appendTo(tableBody);
+ propertiesPanelHeaderHelp.show();
+
+ if (!subflowRegex) {
+ propRow = $('
| '+RED._("sidebar.info.type")+' | |
').appendTo(tableBody);
$(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type);
if (node.type === "unknown") {
$('
').prependTo($(propRow.children()[1]))
}
}
+
var count = 0;
- if (!m && node.type != "subflow") {
+ if (!subflowRegex && node.type != "subflow" && node.type != "group") {
+
+ var blankRow = $('
|
').appendTo(tableBody);
+
var defaults;
if (node.type === 'unknown') {
defaults = {};
@@ -240,7 +329,6 @@ RED.sidebar.info = (function() {
$(propRow.children()[1]).text(RED.nodes.getType(node.type).set.module);
count++;
}
- $('
|
').appendTo(tableBody);
if (defaults) {
for (var n in defaults) {
@@ -248,7 +336,8 @@ RED.sidebar.info = (function() {
var val = node[n];
var type = typeof val;
count++;
- propRow = $('
| '+n+" | |
").appendTo(tableBody);
+ propRow = $('
| |
').appendTo(tableBody);
+ $(propRow.children()[0]).text(n);
if (defaults[n].type) {
var configNode = RED.nodes.node(val);
if (!configNode) {
@@ -278,37 +367,35 @@ RED.sidebar.info = (function() {
}
}
if (count > 0) {
- $('
| '+RED._("sidebar.info.showMore")+''+RED._("sidebar.info.showLess")+' |
').appendTo(tableBody);
+ $('
'+RED._("sidebar.info.showMore")+''+RED._("sidebar.info.showLess")+' ').appendTo(blankRow.children()[0]);
}
}
if (node.type !== 'tab') {
- if (m) {
+ if (subflowRegex) {
$('
| '+RED._("sidebar.info.subflow")+' |
|---|
').appendTo(tableBody);
$('
| '+RED._("common.label.name")+' | '+RED.utils.sanitize(subflowNode.name)+' |
').appendTo(tableBody);
}
}
}
- if (m) {
+ if (subflowRegex) {
propRow = $('
| '+RED._("subflow.category")+' | |
').appendTo(tableBody);
var category = subflowNode.category||"subflows";
$(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
$('
| '+RED._("sidebar.info.instances")+" | "+subflowUserCount+' |
').appendTo(tableBody);
}
- var helpText = "";
- if (node.type === "tab" || node.type === "subflow") {
- $(helpSection.container).hide();
- } else {
- $(helpSection.container).show();
- if (subflowNode && node.type !== "subflow") {
- // Selected a subflow instance node.
- // - The subflow template info goes into help
- helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('
'+RED._("sidebar.info.none")+''));
- } else {
- helpText = $("script[data-help-name='"+node.type+"']").html()||('
'+RED._("sidebar.info.none")+'');
- }
- setInfoText(helpText, helpSection.content);
- }
+ // var helpText = "";
+ // if (node.type === "tab" || node.type === "subflow") {
+ // } else {
+ // if (subflowNode && node.type !== "subflow") {
+ // // Selected a subflow instance node.
+ // // - The subflow template info goes into help
+ // helpText = (RED.utils.renderMarkdown(subflowNode.info||"")||('
'+RED._("sidebar.info.none")+''));
+ // } else {
+ // helpText = $("script[data-help-name='"+node.type+"']").html()||('
'+RED._("sidebar.info.none")+'');
+ // }
+ // setInfoText(helpText, helpSection.content);
+ // }
var infoText = "";
@@ -320,7 +407,26 @@ RED.sidebar.info = (function() {
if (node.info) {
infoText = infoText + RED.utils.renderMarkdown(node.info || "")
}
- setInfoText(infoText, infoSection.content);
+ var infoSectionContainer = $("
").css("padding","0 6px 6px").appendTo(propertiesPanelContent)
+
+ // var editInfo = $('
').appendTo(infoSectionContainer).on("click", function(evt) {
+ // //.text(RED._("sidebar.info.editDescription"))
+ // evt.preventDefault();
+ // evt.stopPropagation();
+ // if (node.type === 'tab') {
+ //
+ // } else if (node.type === 'subflow') {
+ //
+ // } else if (node.type === 'group') {
+ //
+ // } else if (node._def.category !== 'config') {
+ // RED.editor.edit(node,"editor-tab-description");
+ // } else {
+ //
+ // }
+ // })
+
+ setInfoText(infoText, infoSectionContainer);
$(".red-ui-sidebar-info-stack").scrollTop(0);
$(".node-info-property-header").on("click", function(e) {
@@ -336,7 +442,7 @@ RED.sidebar.info = (function() {
// propRow = $('
| Actions | |
').appendTo(tableBody);
// var actionBar = $(propRow.children()[1]);
//
- // // var actionBar = $('
',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content);
+ // // var actionBar = $('
',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesPanel);
// $('
').appendTo(actionBar);
// $('
').appendTo(actionBar);
// $('
').appendTo(actionBar);
@@ -411,6 +517,7 @@ RED.sidebar.info = (function() {
}
function startTips() {
$(".red-ui-sidebar-info").addClass('show-tips');
+ resizeStack();
if (enabled) {
if (!startTimeout && !refreshTimeout) {
if (tipCount === -1) {
@@ -424,6 +531,7 @@ RED.sidebar.info = (function() {
}
function stopTips() {
$(".red-ui-sidebar-info").removeClass('show-tips');
+ resizeStack();
clearInterval(refreshTimeout);
clearTimeout(startTimeout);
refreshTimeout = null;
@@ -448,15 +556,8 @@ RED.sidebar.info = (function() {
}
function set(html,title) {
- // tips.stop();
- // sections.show();
- refresh(null);
- propertiesSection.container.hide();
- helpSection.container.hide();
- infoSection.container.show();
- infoSection.title.text(title||RED._("sidebar.info.desc"));
- setInfoText(html,infoSection.content);
- $(".red-ui-sidebar-info-stack").scrollTop(0);
+ console.warn("Deprecated use of RED.sidebar.info.set - use RED.sidebar.help.set instead")
+ RED.sidebar.help.set(html,title);
}
function refreshSelection(selection) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
index d41a6a426..a5e84e294 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js
@@ -241,10 +241,13 @@ RED.typeSearch = (function() {
$(document).off('mousedown.red-ui-type-search');
$(document).off('mouseup.red-ui-type-search');
$(document).off('click.red-ui-type-search');
+ $(document).off('touchstart.red-ui-type-search');
+ $(document).off('mousedown.red-ui-type-search');
setTimeout(function() {
$(document).on('mousedown.red-ui-type-search',handleMouseActivity);
$(document).on('mouseup.red-ui-type-search',handleMouseActivity);
$(document).on('click.red-ui-type-search',handleMouseActivity);
+ $(document).on('touchstart.red-ui-type-search',handleMouseActivity);
},200);
refreshTypeList(opts);
@@ -260,7 +263,9 @@ RED.typeSearch = (function() {
searchResultsDiv.slideDown(300);
setTimeout(function() {
searchResultsDiv.find(".red-ui-editableList-container").scrollTop(0);
- searchInput.trigger("focus");
+ if (!opts.disableFocus) {
+ searchInput.trigger("focus");
+ }
},100);
}
function hide(fast) {
@@ -279,6 +284,7 @@ RED.typeSearch = (function() {
$(document).off('mousedown.red-ui-type-search');
$(document).off('mouseup.red-ui-type-search');
$(document).off('click.red-ui-type-search');
+ $(document).off('touchstart.red-ui-type-search');
}
}
function getTypeLabel(type, def) {
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index a9c1c9500..e8306bd0f 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -806,9 +806,9 @@ RED.utils = (function() {
function separateIconPath(icon) {
var result = {module: "", file: ""};
if (icon) {
- var index = icon.indexOf('icons/');
- if (index !== -1) {
- icon = icon.substring(index+6);
+ var index = icon.indexOf(RED.settings.apiRootUrl+'icons/');
+ if (index === 0) {
+ icon = icon.substring((RED.settings.apiRootUrl+'icons/').length);
}
index = icon.indexOf('/');
if (index !== -1) {
@@ -859,10 +859,15 @@ RED.utils = (function() {
}
function getNodeIcon(def,node) {
- if (def.category === 'config') {
+ if (node && node.type === '_selection_') {
+ return "font-awesome/fa-object-ungroup";
+ } else if (node && node.type === 'group') {
+ return "font-awesome/fa-object-group"
+ } else if (def.category === 'config') {
return RED.settings.apiRootUrl+"icons/node-red/cog.svg"
} else if (node && node.type === 'tab') {
- return RED.settings.apiRootUrl+"icons/node-red/subflow.svg"
+ return "red-ui-icons/red-ui-icons-flow"
+ // return RED.settings.apiRootUrl+"images/subflow_tab.svg"
} else if (node && node.type === 'unknown') {
return RED.settings.apiRootUrl+"icons/node-red/alert.svg"
} else if (node && node.icon) {
@@ -921,6 +926,8 @@ RED.utils = (function() {
var l;
if (node.type === 'tab') {
l = node.label || defaultLabel
+ } else if (node.type === 'group') {
+ l = node.name || defaultLabel
} else {
l = node._def.label;
try {
@@ -1054,11 +1061,63 @@ RED.utils = (function() {
}
// If the specified name is not defined in font-awesome, show arrow-in icon.
iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg"
+ } else if (iconPath.module === "red-ui-icons") {
+ var redIconElement = $('
').appendTo(iconContainer);
+ redIconElement.addClass("red-ui-palette-icon red-ui-icons " + iconPath.file);
+ return;
}
var imageIconElement = $('
',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
}
+ function createNodeIcon(node) {
+ var def = node._def;
+ var nodeDiv = $('
',{class:"red-ui-search-result-node"})
+ if (node.type === "_selection_") {
+ nodeDiv.addClass("red-ui-palette-icon-selection");
+ } else if (node.type === "group") {
+ nodeDiv.addClass("red-ui-palette-icon-group");
+ } else if (node.type === 'tab') {
+ nodeDiv.addClass("red-ui-palette-icon-flow");
+ } else {
+ var colour = RED.utils.getNodeColor(node.type,def);
+ // if (node.type === 'tab') {
+ // colour = "#C0DEED";
+ // }
+ nodeDiv.css('backgroundColor',colour);
+ var borderColor = getDarkerColor(colour);
+ if (borderColor !== colour) {
+ nodeDiv.css('border-color',borderColor)
+ }
+ }
+
+ var icon_url = RED.utils.getNodeIcon(def,node);
+ var iconContainer = $('
',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+ RED.utils.createIconElement(icon_url, iconContainer, true);
+ return nodeDiv;
+ }
+
+ 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;
+ }
+
return {
createObjectElement: buildMessageElement,
getMessageProperty: getMessageProperty,
@@ -1076,6 +1135,8 @@ RED.utils = (function() {
parseContextKey: parseContextKey,
createIconElement: createIconElement,
sanitize: sanitize,
- renderMarkdown: renderMarkdown
+ renderMarkdown: renderMarkdown,
+ createNodeIcon: createNodeIcon,
+ getDarkerColor: getDarkerColor
}
})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
index 0814892be..e25b570b9 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js
@@ -67,9 +67,16 @@ RED.view.tools = (function() {
function moveSelection(dx,dy) {
if (moving_set === null) {
+ moving_set = [];
var selection = RED.view.selection();
if (selection.nodes) {
- moving_set = selection.nodes.map(function(n) { return {n:n}});
+ while (selection.nodes.length > 0) {
+ var n = selection.nodes.shift();
+ moving_set.push({n:n});
+ if (n.type === "group") {
+ selection.nodes = selection.nodes.concat(n.nodes);
+ }
+ }
}
}
if (moving_set && moving_set.length > 0) {
@@ -93,10 +100,15 @@ RED.view.tools = (function() {
node.n.x += dx;
node.n.y += dy;
node.n.dirty = true;
- minX = Math.min(node.n.x-node.n.w/2-5,minX);
- minY = Math.min(node.n.y-node.n.h/2-5,minY);
+ if (node.n.type === "group") {
+ RED.group.markDirty(node.n);
+ minX = Math.min(node.n.x - 5,minX);
+ minY = Math.min(node.n.y - 5,minY);
+ } else {
+ minX = Math.min(node.n.x-node.n.w/2-5,minX);
+ minY = Math.min(node.n.y-node.n.h/2-5,minY);
+ }
}
-
if (minX !== 0 || minY !== 0) {
for (var n = 0; n
0) {
+ RED.history.push({
+ t: "multi",
+ events: historyEvents,
+ dirty: RED.nodes.dirty()
+ })
+ RED.nodes.dirty(true);
+ }
+
+ RED.view.redraw();
+
+
+ }
+
return {
init: function() {
+ RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); })
+ RED.actions.add("core:hide-selected-node-labels", function() { setSelectedNodeLabelState(false); })
+
RED.actions.add("core:align-selection-to-grid", alignToGrid);
+ RED.actions.add("core:scroll-view-up", function() { RED.view.scroll(0,-RED.view.gridSize());});
+ RED.actions.add("core:scroll-view-right", function() { RED.view.scroll(RED.view.gridSize(),0);});
+ RED.actions.add("core:scroll-view-down", function() { RED.view.scroll(0,RED.view.gridSize());});
+ RED.actions.add("core:scroll-view-left", function() { RED.view.scroll(-RED.view.gridSize(),0);});
+
+ RED.actions.add("core:step-view-up", function() { RED.view.scroll(0,-5*RED.view.gridSize());});
+ RED.actions.add("core:step-view-right", function() { RED.view.scroll(5*RED.view.gridSize(),0);});
+ RED.actions.add("core:step-view-down", function() { RED.view.scroll(0,5*RED.view.gridSize());});
+ RED.actions.add("core:step-view-left", function() { RED.view.scroll(-5*RED.view.gridSize(),0);});
+
RED.actions.add("core:move-selection-up", function() { moveSelection(0,-1);});
RED.actions.add("core:move-selection-right", function() { moveSelection(1,0);});
RED.actions.add("core:move-selection-down", function() { moveSelection(0,1);});
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
index 80a9432f7..8e4a75d99 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js
@@ -21,9 +21,11 @@
* \- .red-ui-workspace-chart-event-layer "eventLayer"
* |- .red-ui-workspace-chart-background
* |- .red-ui-workspace-chart-grid "gridLayer"
+ * |- "groupLayer"
+ * |- "groupSelectLayer"
* |- "linkLayer"
* |- "dragGroupLayer"
- * \- "nodeLayer"
+ * |- "nodeLayer"
*/
RED.view = (function() {
@@ -48,34 +50,42 @@ RED.view = (function() {
var activeSpliceLink;
var spliceActive = false;
var spliceTimer;
+ var groupHoverTimer;
var activeSubflow = null;
var activeNodes = [];
var activeLinks = [];
var activeFlowLinks = [];
var activeLinkNodes = {};
+ var activeGroup = null;
+ var activeHoverGroup = null;
+ var activeGroups = [];
+ var dirtyGroups = {};
- var selected_link = null,
- mousedown_link = null,
- mousedown_node = null,
- mousedown_port_type = null,
- mousedown_port_index = 0,
- mouseup_node = null,
- mouse_offset = [0,0],
- mouse_position = null,
- mouse_mode = 0,
- moving_set = [],
- lasso = null,
- ghostNode = null,
- showStatus = false,
- lastClickNode = null,
- dblClickPrimed = null,
- clickTime = 0,
- clickElapsed = 0,
- scroll_position = [],
- quickAddActive = false,
- quickAddLink = null,
- showAllLinkPorts = -1;
+ var selected_link = null;
+ var mousedown_link = null;
+ var mousedown_node = null;
+ var mousedown_group = null;
+ var mousedown_port_type = null;
+ var mousedown_port_index = 0;
+ var mouseup_node = null;
+ var mouse_offset = [0,0];
+ var mouse_position = null;
+ var mouse_mode = 0;
+ var mousedown_group_handle = null;
+ var moving_set = [];
+ var lasso = null;
+ var ghostNode = null;
+ var showStatus = false;
+ var lastClickNode = null;
+ var dblClickPrimed = null;
+ var clickTime = 0;
+ var clickElapsed = 0;
+ var scroll_position = [];
+ var quickAddActive = false;
+ var quickAddLink = null;
+ var showAllLinkPorts = -1;
+ var groupNodeSelectPrimed = false;
var selectNodesOptions;
@@ -100,7 +110,9 @@ RED.view = (function() {
var gridLayer;
var linkLayer;
var dragGroupLayer;
+ var groupSelectLayer;
var nodeLayer;
+ var groupLayer;
var drag_lines;
function init() {
@@ -139,6 +151,7 @@ RED.view = (function() {
}
})
.on("touchend", function() {
+ d3.event.preventDefault();
clearTimeout(touchStartTime);
touchStartTime = null;
if (RED.touch.radialMenu.active()) {
@@ -146,7 +159,7 @@ RED.view = (function() {
}
canvasMouseUp.call(this);
})
- .on("touchcancel", canvasMouseUp)
+ .on("touchcancel", function() { d3.event.preventDefault(); canvasMouseUp.call(this); })
.on("touchstart", function() {
var touch0;
if (d3.event.touches.length>1) {
@@ -191,6 +204,7 @@ RED.view = (function() {
// .attr("class","nr-ui-view-lasso");
},touchLongPressTimeout);
}
+ d3.event.preventDefault();
})
.on("touchmove", function(){
if (RED.touch.radialMenu.active()) {
@@ -242,6 +256,7 @@ RED.view = (function() {
redraw();
}
}
+ d3.event.preventDefault();
});
// Workspace Background
@@ -253,9 +268,12 @@ RED.view = (function() {
gridLayer = eventLayer.append("g").attr("class","red-ui-workspace-chart-grid");
updateGrid();
+ groupLayer = eventLayer.append("g");
+ groupSelectLayer = eventLayer.append("g");
linkLayer = eventLayer.append("g");
dragGroupLayer = eventLayer.append("g");
nodeLayer = eventLayer.append("g");
+
drag_lines = [];
RED.events.on("workspace:change",function(event) {
@@ -377,14 +395,36 @@ RED.view = (function() {
historyEvent.removedLinks = [spliceLink];
}
- RED.history.push(historyEvent);
RED.nodes.add(nn);
+
+ var group = $(ui.helper).data("group");
+ if (group) {
+ RED.group.addToGroup(group, nn);
+ historyEvent = {
+ t: 'multi',
+ events: [historyEvent],
+
+ }
+ historyEvent.events.push({
+ t: "addToGroup",
+ group: group,
+ nodes: nn
+ })
+ }
+
+ RED.history.push(historyEvent);
RED.editor.validateNode(nn);
RED.nodes.dirty(true);
// auto select dropped node - so info shows (if visible)
+ exitActiveGroup();
clearSelection();
nn.selected = true;
moving_set.push({n:nn});
+ if (group) {
+ selectGroup(group,false);
+ enterActiveGroup(group);
+ activeGroup = group;
+ }
updateActiveNodes();
updateSelection();
redraw();
@@ -517,6 +557,53 @@ RED.view = (function() {
source:{z:activeWorkspace},
target:{z:activeWorkspace}
});
+
+ activeGroups = RED.nodes.groups(activeWorkspace)||[];
+ activeGroups.forEach(function(g) {
+ if (g.g) {
+ g._root = g.g;
+ g._depth = 1;
+ } else {
+ g._root = g.id;
+ g._depth = 0;
+ }
+ });
+ var changed = false;
+ do {
+ changed = false;
+ activeGroups.forEach(function(g) {
+ if (g.g) {
+ var parentGroup = RED.nodes.group(g.g);
+ if (parentGroup) {
+ var parentDepth = parentGroup._depth;
+ if (g._depth !== parentDepth + 1) {
+ g._depth = parentDepth + 1;
+ changed = true;
+ }
+ if (g._root !== parentGroup._root) {
+ g._root = parentGroup._root;
+ changed = true;
+ }
+ }
+ }
+ });
+ } while (changed)
+ activeGroups.sort(function(a,b) {
+ if (a._root === b._root) {
+ return a._depth - b._depth;
+ } else {
+ return a._root.localeCompare(b._root);
+ }
+ });
+
+ var group = groupLayer.selectAll(".red-ui-flow-group").data(activeGroups,function(d) { return d.id });
+ group.sort(function(a,b) {
+ if (a._root === b._root) {
+ return a._depth - b._depth;
+ } else {
+ return a._root.localeCompare(b._root);
+ }
+ })
}
function generateLinkPath(origX,origY, destX, destY, sc) {
@@ -671,6 +758,7 @@ RED.view = (function() {
}
function canvasMouseDown() {
+ if (RED.view.DEBUG) { console.warn("canvasMouseDown", mouse_mode); }
var point;
if (mouse_mode === RED.state.SELECTING_NODE) {
d3.event.stopPropagation();
@@ -684,7 +772,7 @@ RED.view = (function() {
scroll_position = [chart.scrollLeft(),chart.scrollTop()];
return;
}
- if (!mousedown_node && !mousedown_link) {
+ if (!mousedown_node && !mousedown_link && !mousedown_group) {
selected_link = null;
updateSelection();
}
@@ -697,7 +785,13 @@ RED.view = (function() {
if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) {
if (d3.event.metaKey || d3.event.ctrlKey) {
d3.event.stopPropagation();
- showQuickAddDialog(d3.mouse(this));
+ clearSelection();
+ point = d3.mouse(this);
+ var clickedGroup = getGroupAt(point[0],point[1]);
+ if (drag_lines.length > 0) {
+ clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
+ }
+ showQuickAddDialog(point, null, clickedGroup);
}
}
if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
@@ -718,7 +812,13 @@ RED.view = (function() {
}
}
- function showQuickAddDialog(point,spliceLink) {
+ function showQuickAddDialog(point, spliceLink, targetGroup, touchTrigger) {
+ if (targetGroup && !targetGroup.active) {
+ selectGroup(targetGroup,false);
+ enterActiveGroup(targetGroup);
+ RED.view.redraw();
+ }
+
var ox = point[0];
var oy = point[1];
@@ -801,6 +901,7 @@ RED.view = (function() {
RED.typeSearch.show({
x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
+ disableFocus: touchTrigger,
filter: filter,
move: function(dx,dy) {
if (ghostNode) {
@@ -828,6 +929,10 @@ RED.view = (function() {
redraw();
},
add: function(type,keepAdding) {
+ if (touchTrigger) {
+ keepAdding = false;
+ resetMouseVars();
+ }
var result = addNode(type);
if (!result) {
return;
@@ -946,6 +1051,26 @@ RED.view = (function() {
}
}
}
+
+ RED.nodes.add(nn);
+ RED.editor.validateNode(nn);
+
+ if (targetGroup) {
+ RED.group.addToGroup(targetGroup, nn);
+ if (historyEvent.t !== "multi") {
+ historyEvent = {
+ t:'multi',
+ events: [historyEvent]
+ }
+ }
+ historyEvent.events.push({
+ t: "addToGroup",
+ group: targetGroup,
+ nodes: nn
+ })
+
+ }
+
if (spliceLink) {
resetMouseVars();
// TODO: DRY - droppable/nodeMouseDown/canvasMouseUp/showQuickAddDialog
@@ -966,12 +1091,14 @@ RED.view = (function() {
historyEvent.removedLinks = [spliceLink];
}
RED.history.push(historyEvent);
- RED.nodes.add(nn);
- RED.editor.validateNode(nn);
RED.nodes.dirty(true);
// auto select dropped node - so info shows (if visible)
clearSelection();
nn.selected = true;
+ if (targetGroup) {
+ selectGroup(targetGroup,false);
+ enterActiveGroup(targetGroup);
+ }
moving_set.push({n:nn});
updateActiveNodes();
updateSelection();
@@ -1076,11 +1203,23 @@ RED.view = (function() {
return;
}
- if (mouse_mode != RED.state.QUICK_JOINING && mouse_mode != RED.state.IMPORT_DRAGGING && !mousedown_node && selected_link == null) {
+ if (mouse_mode != RED.state.QUICK_JOINING && mouse_mode != RED.state.IMPORT_DRAGGING && !mousedown_node && !mousedown_group && selected_link == null) {
return;
}
var mousePos;
+ // if (mouse_mode === RED.state.GROUP_RESIZE) {
+ // mousePos = mouse_position;
+ // var nx = mousePos[0] + mousedown_group.dx;
+ // var ny = mousePos[1] + mousedown_group.dy;
+ // switch(mousedown_group.activeHandle) {
+ // case 0: mousedown_group.pos.x0 = nx; mousedown_group.pos.y0 = ny; break;
+ // case 1: mousedown_group.pos.x1 = nx; mousedown_group.pos.y0 = ny; break;
+ // case 2: mousedown_group.pos.x1 = nx; mousedown_group.pos.y1 = ny; break;
+ // case 3: mousedown_group.pos.x0 = nx; mousedown_group.pos.y1 = ny; break;
+ // }
+ // mousedown_group.dirty = true;
+ // }
if (mouse_mode == RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
// update drag line
if (drag_lines.length === 0 && mousedown_port_type !== null) {
@@ -1182,10 +1321,18 @@ RED.view = (function() {
node.n.x = mousePos[0]+node.dx;
node.n.y = mousePos[1]+node.dy;
node.n.dirty = true;
- minX = Math.min(node.n.x-node.n.w/2-5,minX);
- minY = Math.min(node.n.y-node.n.h/2-5,minY);
- maxX = Math.max(node.n.x+node.n.w/2+5,maxX);
- maxY = Math.max(node.n.y+node.n.h/2+5,maxY);
+ if (node.n.type === "group") {
+ RED.group.markDirty(node.n);
+ minX = Math.min(node.n.x-5,minX);
+ minY = Math.min(node.n.y-5,minY);
+ maxX = Math.max(node.n.x+node.n.w+5,maxX);
+ maxY = Math.max(node.n.y+node.n.h+5,maxY);
+ } else {
+ minX = Math.min(node.n.x-node.n.w/2-5,minX);
+ minY = Math.min(node.n.y-node.n.h/2-5,minY);
+ maxX = Math.max(node.n.x+node.n.w/2+5,maxX);
+ maxY = Math.max(node.n.y+node.n.h/2+5,maxY);
+ }
}
if (minX !== 0 || minY !== 0) {
for (i = 0; i 0) {
- var gridOffset = [0,0];
- node = moving_set[0];
- gridOffset[0] = node.n.x-(gridSize*Math.floor((node.n.x-node.n.w/2)/gridSize)+node.n.w/2);
- gridOffset[1] = node.n.y-(gridSize*Math.floor(node.n.y/gridSize));
+ var i = 0;
+
+ // Prefer to snap nodes to the grid if there is one in the selection
+ do {
+ node = moving_set[i++];
+ } while(i x && n.x < x2 && n.y > y && n.y < y2);
- if (n.selected) {
- n.dirty = true;
- moving_set.push({n:n});
+ activeGroups.forEach(function(g) {
+ if (!g.selected) {
+ if (g.x > x && g.x+g.w < x2 && g.y > y && g.y+g.h < y2) {
+ while (g.g) {
+ g = RED.nodes.group(g.g);
+ }
+ if (!g.selected) {
+ selectGroup(g,true);
+ }
+ }
+ }
+ })
+
+ activeNodes.forEach(function(n) {
+ if (!n.selected) {
+ if (n.x > x && n.x < x2 && n.y > y && n.y < y2) {
+ if (n.g) {
+ var group = RED.nodes.group(n.g);
+ while (group.g) {
+ group = RED.nodes.group(group.g);
+ }
+ if (!group.selected) {
+ selectGroup(group,true);
+ }
+ } else {
+ n.selected = true;
+ n.dirty = true;
+ moving_set.push({n:n});
+ }
}
}
});
+
+
+
+ // var selectionChanged = false;
+ // do {
+ // selectionChanged = false;
+ // selectedGroups.forEach(function(g) {
+ // if (g.g && g.selected && RED.nodes.group(g.g).selected) {
+ // g.selected = false;
+ // selectionChanged = true;
+ // }
+ // })
+ // } while(selectionChanged);
+
if (activeSubflow) {
activeSubflow.in.forEach(function(n) {
n.selected = (n.x > x && n.x < x2 && n.y > y && n.y < y2);
@@ -1355,6 +1577,21 @@ RED.view = (function() {
}
if (mouse_mode == RED.state.MOVING_ACTIVE) {
if (moving_set.length > 0) {
+ var addedToGroup = null;
+ if (activeHoverGroup) {
+ for (var j=0;j 0) {
historyEvent = {t:"move",nodes:ns,dirty:RED.nodes.dirty()};
if (activeSpliceLink) {
@@ -1386,12 +1624,31 @@ RED.view = (function() {
historyEvent.removedLinks = [spliceLink];
updateActiveNodes();
}
+ if (addedToGroup) {
+ historyEvent.addToGroup = addedToGroup;
+ }
RED.nodes.dirty(true);
RED.history.push(historyEvent);
}
}
}
+ // if (mouse_mode === RED.state.MOVING && mousedown_node && mousedown_node.g) {
+ // if (mousedown_node.gSelected) {
+ // delete mousedown_node.gSelected
+ // } else {
+ // if (!d3.event.ctrlKey && !d3.event.metaKey) {
+ // clearSelection();
+ // }
+ // RED.nodes.group(mousedown_node.g).selected = true;
+ // mousedown_node.selected = true;
+ // mousedown_node.dirty = true;
+ // moving_set.push({n:mousedown_node});
+ // }
+ // }
if (mouse_mode == RED.state.MOVING || mouse_mode == RED.state.MOVING_ACTIVE) {
+ // if (mousedown_node) {
+ // delete mousedown_node.gSelected;
+ // }
for (i=0;i 0) {
- selection.nodes = moving_set.map(function(n) { return n.n;});
- }
- if (selected_link != null) {
- selection.link = selected_link;
- }
+ selection = getSelection();
activeLinks = RED.nodes.filterLinks({
source:{z:activeWorkspace},
target:{z:activeWorkspace}
@@ -1606,6 +1881,8 @@ RED.view = (function() {
var node = moving_set[0].n;
if (node.type === "subflow") {
RED.editor.editSubflow(activeSubflow);
+ } else if (node.type === "group") {
+ RED.editor.editGroup(node);
} else {
RED.editor.edit(node);
}
@@ -1632,6 +1909,7 @@ RED.view = (function() {
dirty: RED.nodes.dirty(),
nodes: [],
links: [],
+ groups: [],
workspaces: [],
subflows: []
}
@@ -1651,6 +1929,7 @@ RED.view = (function() {
}
historyEvent.nodes = historyEvent.nodes.concat(subEvent.nodes);
historyEvent.links = historyEvent.links.concat(subEvent.links);
+ historyEvent.groups = historyEvent.groups.concat(subEvent.groups);
}
RED.history.push(historyEvent);
RED.nodes.dirty(true);
@@ -1659,8 +1938,10 @@ RED.view = (function() {
redraw();
} else if (moving_set.length > 0 || selected_link != null) {
var result;
+ var node;
var removedNodes = [];
var removedLinks = [];
+ var removedGroups = [];
var removedSubflowOutputs = [];
var removedSubflowInputs = [];
var removedSubflowStatus;
@@ -1668,11 +1949,27 @@ RED.view = (function() {
var startDirty = RED.nodes.dirty();
var startChanged = false;
+ var selectedGroups = [];
if (moving_set.length > 0) {
+
for (var i=0;i=0; i--) {
+ var g = selectedGroups[i];
+ removedGroups.push(g);
+ RED.nodes.removeGroup(g);
+ }
if (removedSubflowOutputs.length > 0) {
result = RED.subflow.removeOutput(removedSubflowOutputs);
if (result) {
@@ -1716,7 +2031,7 @@ RED.view = (function() {
subflowInstances = instances.instances;
}
moving_set = [];
- if (removedNodes.length > 0 || removedSubflowOutputs.length > 0 || removedSubflowInputs.length > 0 || removedSubflowStatus) {
+ if (removedNodes.length > 0 || removedSubflowOutputs.length > 0 || removedSubflowInputs.length > 0 || removedSubflowStatus || removedGroups.length > 0) {
RED.nodes.dirty(true);
}
}
@@ -1769,6 +2084,7 @@ RED.view = (function() {
t:"delete",
nodes:removedNodes,
links:removedLinks,
+ groups: removedGroups,
subflowOutputs:removedSubflowOutputs,
subflowInputs:removedSubflowInputs,
subflow: {
@@ -1801,20 +2117,36 @@ RED.view = (function() {
selection.forEach(function(n) {
if (n.type === 'tab') {
nodes.push(n);
+ nodes = nodes.concat(RED.nodes.groups(n.id));
nodes = nodes.concat(RED.nodes.filterNodes({z:n.id}));
}
});
- } else if (moving_set.length > 0) {
- nodes = moving_set.map(function(n) { return n.n });
+ } else {
+ selection = RED.view.selection();
+ if (selection.nodes) {
+ selection.nodes.forEach(function(n) {
+ nodes.push(n);
+ if (n.type === 'group') {
+ nodes = nodes.concat(RED.group.getNodes(n,true));
+ }
+ })
+ }
}
if (nodes.length > 0) {
var nns = [];
+ var nodeCount = 0;
+ var groupCount = 0;
for (var n=0;n 0) {
+ RED.notify(RED._("clipboard.nodeCopied",{count:nodeCount}),{id:"clipboard"});
+ } else if (groupCount > 0) {
+ RED.notify(RED._("clipboard.groupCopied",{count:groupCount}),{id:"clipboard"});
+ }
}
}
- function calculateTextWidth(str, className, offset) {
- return calculateTextDimensions(str,className,offset,0)[0];
+ function calculateTextWidth(str, className) {
+ var result=convertLineBreakCharacter(str);
+ var width = 0;
+ for (var i=0;i 1) {
+ var i=0;
+ for (i=0;i -1 && content[newlineIndex-1] !== '\\') {
+ content = content.substring(0,newlineIndex)+"...";
+ }
+
var lines = content.split("\n");
var labelWidth = 6;
var labelHeight = 12;
var labelHeights = [];
var lineHeight = 0;
lines.forEach(function(l,i) {
- var labelDimensions = calculateTextDimensions(l||" ", "red-ui-flow-port-tooltip-label", 8,0);
- labelWidth = Math.max(labelWidth,labelDimensions[0] + 6);
+ var labelDimensions = calculateTextDimensions(l||" ", "red-ui-flow-port-tooltip-label");
+ labelWidth = Math.max(labelWidth,labelDimensions[0] + 14);
labelHeights.push(labelDimensions[1]);
if (i === 0) {
lineHeight = labelDimensions[1];
@@ -2239,7 +2640,24 @@ RED.view = (function() {
port.classed("red-ui-flow-port-hovered",false);
}
+ function prepareDrag(mouse) {
+ mouse_mode = RED.state.MOVING;
+ // Called when moving_set should be prepared to be dragged
+ for (i=0;i 0 ? 1: 0) : (d.direction == "in" ? 0: 1)
var wasJoining = false;
if (mouse_mode === RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
@@ -2266,6 +2705,12 @@ RED.view = (function() {
} else if (d.type === 'link out') {
direction = 0;
}
+ } else {
+ if (drag_lines[0].portType === 1) {
+ direction = PORT_TYPE_OUTPUT;
+ } else {
+ direction = PORT_TYPE_INPUT;
+ }
}
}
}
@@ -2275,8 +2720,8 @@ RED.view = (function() {
d3.selectAll(".red-ui-flow-port-hovered").classed("red-ui-flow-port-hovered",false);
}
}
-
function nodeMouseDown(d) {
+ if (RED.view.DEBUG) { console.warn("nodeMouseDown", mouse_mode,d); }
focusView();
if (d3.event.button === 1) {
return;
@@ -2345,7 +2790,9 @@ RED.view = (function() {
// }
return;
}
+
mousedown_node = d;
+
var now = Date.now();
clickElapsed = now-clickTime;
clickTime = now;
@@ -2353,11 +2800,76 @@ RED.view = (function() {
dblClickPrimed = (lastClickNode == mousedown_node &&
d3.event.button === 0 &&
!d3.event.shiftKey && !d3.event.metaKey && !d3.event.altKey && !d3.event.ctrlKey);
- lastClickNode = mousedown_node;
+ lastClickNode = mousedown_node;
var i;
- if (d.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
+ if (!d.selected && d.g /*&& !RED.nodes.group(d.g).selected*/) {
+ var nodeGroup = RED.nodes.group(d.g);
+
+ if (nodeGroup !== activeGroup && (d3.event.ctrlKey || d3.event.metaKey)) {
+ // Clicked on a node in a non-active group with ctrl pressed
+ // - exit active group
+ // - toggle the select state of the group
+ exitActiveGroup();
+ groupNodeSelectPrimed = true;
+ if (nodeGroup.selected) {
+ deselectGroup(nodeGroup);
+ } else {
+ selectGroup(nodeGroup,true);
+ }
+ } else if (nodeGroup === activeGroup ) {
+ // Clicked on a node in the active group
+ if (!d3.event.ctrlKey && !d3.event.metaKey) {
+ // Ctrl not pressed so clear selection
+ deselectGroup(nodeGroup);
+ selectGroup(nodeGroup,false,false);
+ }
+ // Select this node
+ mousedown_node.selected = true;
+ moving_set.push({n:mousedown_node});
+ } else {
+ // Clicked on a node in a group
+ // - if this group is not selected, clear current selection
+ // and select this group
+ // - if this group is not the active group, exit the active group
+ // and select the group
+ // - if this group is the active group, keep it active and
+ // change node selection
+
+ // Set groupNodeSelectPrimed to true as this is a (de)select of the
+ // group and NOT meant to trigger going into the group - see nodeMouseUp
+ groupNodeSelectPrimed = !nodeGroup.selected;
+ var ag = activeGroup;
+ if (!nodeGroup.selected) {
+ clearSelection();
+ }
+ if (ag) {
+ if (ag !== nodeGroup) {
+ ag.active = false;
+ ag.dirty = true;
+ } else {
+ activeGroup = nodeGroup;
+ activeGroup.active = true;
+ }
+ } else {
+ dblClickPrimed = false;
+ }
+ selectGroup(nodeGroup, !activeGroup);
+ if (activeGroup) {
+ mousedown_node.selected = true;
+ moving_set.push({n:mousedown_node});
+ }
+ }
+
+
+ if (d3.event.button != 2) {
+ var mouse = d3.touches(this)[0]||d3.mouse(this);
+ mouse[0] += d.x-d.w/2;
+ mouse[1] += d.y-d.h/2;
+ prepareDrag(mouse);
+ }
+ } else if (d.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
mousedown_node.selected = false;
for (i=0;i 0) {
+ var selectClass;
+ var portType;
+ if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
+ selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
+ portType = PORT_TYPE_INPUT;
+ } else {
+ selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
+ portType = PORT_TYPE_OUTPUT;
+ }
+ portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
+ }
+ }
+ }
+ function nodeMouseOut(d) {
+ if (RED.view.DEBUG) { console.warn("nodeMouseOut", mouse_mode,d); }
+ this.parentNode.classList.remove("red-ui-flow-node-hovered");
+ clearTimeout(portLabelHoverTimeout);
+ if (portLabelHover) {
+ portLabelHover.remove();
+ portLabelHover = null;
+ }
+ if (mouse_mode === RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
+ if (drag_lines.length > 0) {
+ var selectClass;
+ var portType;
+ if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
+ selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
+ portType = PORT_TYPE_INPUT;
+ } else {
+ selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
+ portType = PORT_TYPE_OUTPUT;
+ }
+ portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
+ }
+ }
+ }
+
+ function portMouseDownProxy(e) { portMouseDown(this.__data__,this.__portType__,this.__portIndex__, e); }
+ function portTouchStartProxy(e) { portMouseDown(this.__data__,this.__portType__,this.__portIndex__, e); e.preventDefault() }
+ function portMouseUpProxy(e) { portMouseUp(this.__data__,this.__portType__,this.__portIndex__, e); }
+ function portTouchEndProxy(e) { portMouseUp(this.__data__,this.__portType__,this.__portIndex__, e); e.preventDefault() }
+ function portMouseOverProxy(e) { portMouseOver(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
+ function portMouseOutProxy(e) { portMouseOut(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
+
+ function linkMouseDown(d) {
+ if (mouse_mode === RED.state.SELECTING_NODE) {
+ d3.event.stopPropagation();
+ return;
+ }
+ mousedown_link = d;
+ clearSelection();
+ selected_link = mousedown_link;
+ updateSelection();
+ redraw();
+ focusView();
+ d3.event.stopPropagation();
+ if (d3.event.metaKey || d3.event.ctrlKey) {
+ d3.select(this).classed("red-ui-flow-link-splice",true);
+ var point = d3.mouse(this);
+ var clickedGroup = getGroupAt(point[0],point[1]);
+ showQuickAddDialog(point, selected_link, clickedGroup);
+ }
+ }
+ function linkTouchStart(d) {
+ if (mouse_mode === RED.state.SELECTING_NODE) {
+ d3.event.stopPropagation();
+ return;
+ }
+ mousedown_link = d;
+ clearSelection();
+ selected_link = mousedown_link;
+ updateSelection();
+ redraw();
+ focusView();
+ d3.event.stopPropagation();
+
+ var obj = d3.select(document.body);
+ var touch0 = d3.event.touches.item(0);
+ var pos = [touch0.pageX,touch0.pageY];
+ touchStartTime = setTimeout(function() {
+ touchStartTime = null;
+ showTouchMenu(obj,pos);
+ },touchLongPressTimeout);
+ d3.event.preventDefault();
+ }
+
+ function groupMouseUp(g) {
+ if (dblClickPrimed && mousedown_group == g && clickElapsed > 0 && clickElapsed < 750) {
+ mouse_mode = RED.state.DEFAULT;
+ RED.editor.editGroup(g);
+ d3.event.stopPropagation();
+ return;
+ }
+
+ }
+
+ function groupMouseDown(g) {
+ var mouse = d3.touches(this.parentNode)[0]||d3.mouse(this.parentNode);
+ // if (! (mouse[0] < g.x+10 || mouse[0] > g.x+g.w-10 || mouse[1] < g.y+10 || mouse[1] > g.y+g.h-10) ) {
+ // return
+ // }
+
+ focusView();
+ if (d3.event.button === 1) {
+ return;
+ }
+ if (mouse_mode == RED.state.IMPORT_DRAGGING) {
+ RED.keyboard.remove("escape");
+ } else if (mouse_mode == RED.state.QUICK_JOINING) {
+ d3.event.stopPropagation();
+ return;
+ } else if (mouse_mode === RED.state.SELECTING_NODE) {
+ d3.event.stopPropagation();
+ return;
+ }
+
+ mousedown_group = g;
+
+ var now = Date.now();
+ clickElapsed = now-clickTime;
+ clickTime = now;
+
+ dblClickPrimed = (
+ lastClickNode == g &&
+ d3.event.button === 0 &&
+ !d3.event.shiftKey && !d3.event.metaKey && !d3.event.altKey && !d3.event.ctrlKey
+ );
+ lastClickNode = g;
+
+ if (g.selected && (d3.event.ctrlKey||d3.event.metaKey)) {
+ if (g === activeGroup) {
+ exitActiveGroup();
+ }
+ deselectGroup(g);
+ d3.event.stopPropagation();
+ } else {
+ if (!g.selected) {
+ if (!d3.event.ctrlKey && !d3.event.metaKey) {
+ clearSelection();
+ }
+ if (activeGroup) {
+ if (!RED.group.contains(activeGroup,g)) {
+ // Clicked on a group that is outside the activeGroup
+ exitActiveGroup();
+ } else {
+ }
+ }
+ selectGroup(g,true);//!wasSelected);
+ } else {
+ exitActiveGroup();
+ }
+
+
+ if (d3.event.button != 2) {
+ var d = g.nodes[0];
+ prepareDrag(mouse);
+ mousedown_group.dx = mousedown_group.x - mouse[0];
+ mousedown_group.dy = mousedown_group.y - mouse[1];
+ }
+ }
+
+ updateSelection();
+ redraw();
+ d3.event.stopPropagation();
+ }
+
+ function selectGroup(g, includeNodes, addToMovingSet) {
+ if (!g.selected) {
+ g.selected = true;
+ g.dirty = true;
+ }
+ if (addToMovingSet !== false) {
+ moving_set.push({n:g});
+ }
+ if (includeNodes) {
+ var currentSet = new Set(moving_set.map(function(n) { return n.n }));
+ var allNodes = RED.group.getNodes(g,true);
+ allNodes.forEach(function(n) {
+ if (!currentSet.has(n)) {
+ moving_set.push({n:n})
+ // n.selected = true;
+ }
+ n.dirty = true;
+ })
+ }
+ }
+ function enterActiveGroup(group) {
+ if (activeGroup) {
+ exitActiveGroup();
+ }
+ group.active = true;
+ group.dirty = true;
+ activeGroup = group;
+ for (var i = moving_set.length-1; i >= 0; i -= 1) {
+ if (moving_set[i].n === group) {
+ moving_set.splice(i,1);
+ break;
+ }
+ }
+ }
+ function exitActiveGroup() {
+ if (activeGroup) {
+ activeGroup.active = false;
+ activeGroup.dirty = true;
+ deselectGroup(activeGroup);
+ selectGroup(activeGroup,true);
+ activeGroup = null;
+ }
+ }
+ function deselectGroup(g) {
+ if (g.selected) {
+ g.selected = false;
+ g.dirty = true;
+ }
+ var nodeSet = new Set(g.nodes);
+ nodeSet.add(g);
+ for (var i = moving_set.length-1; i >= 0; i -= 1) {
+ if (nodeSet.has(moving_set[i].n) || moving_set[i].n === g) {
+ moving_set[i].n.selected = false;
+ moving_set[i].n.dirty = true;
+ moving_set.splice(i,1);
+ }
+ }
+ }
+ function getGroupAt(x,y) {
+ var candidateGroups = {};
+ for (var i=0;i= g.x && x <= g.x + g.w && y >= g.y && y <= g.y + g.h) {
+ candidateGroups[g.id] = g;
+ }
+ }
+ var ids = Object.keys(candidateGroups);
+ if (ids.length > 1) {
+ ids.forEach(function(id) {
+ if (candidateGroups[id] && candidateGroups[id].g) {
+ delete candidateGroups[candidateGroups[id].g]
+ }
+ })
+ ids = Object.keys(candidateGroups);
+ }
+ if (ids.length === 0) {
+ return null;
+ } else {
+ return candidateGroups[ids[ids.length-1]]
+ }
+ }
function isButtonEnabled(d) {
var buttonEnabled = true;
@@ -2424,7 +3254,9 @@ RED.view = (function() {
function nodeButtonClicked(d) {
if (mouse_mode === RED.state.SELECTING_NODE) {
- d3.event.stopPropagation();
+ if (d3.event) {
+ d3.event.stopPropagation();
+ }
return;
}
var activeWorkspace = RED.workspaces.active();
@@ -2451,7 +3283,9 @@ RED.view = (function() {
RED.notify(RED._("notification.warning", {message:RED._("notification.warnings.nodeActionDisabled")}),"warning");
}
}
- d3.event.preventDefault();
+ if (d3.event) {
+ d3.event.preventDefault();
+ }
}
function showTouchMenu(obj,pos) {
@@ -2464,6 +3298,10 @@ RED.view = (function() {
options.push({name:"edit",disabled:(moving_set.length != 1),onselect:function() { RED.editor.edit(mdn);}});
options.push({name:"select",onselect:function() {selectAll();}});
options.push({name:"undo",disabled:(RED.history.depth() === 0),onselect:function() {RED.history.pop();}});
+ options.push({name:"add",onselect:function() {
+ chartPos = chart.offset();
+ showQuickAddDialog([pos[0]-chartPos.left+chart.scrollLeft(),pos[1]-chartPos.top+chart.scrollTop()],undefined,undefined,true)
+ }});
RED.touch.radialMenu.show(obj,pos,options);
resetMouseVars();
@@ -2489,12 +3327,12 @@ RED.view = (function() {
.text(fontAwesomeUnicode);
} else {
var icon = icon_group.append("image")
+ .style("display","none")
.attr("xlink:href",iconUrl)
.attr("class","red-ui-flow-node-icon")
.attr("x",0)
.attr("width","30")
- .attr("height","30")
- .style("display","none");
+ .attr("height","30");
var img = new Image();
img.src = iconUrl;
@@ -2522,7 +3360,37 @@ RED.view = (function() {
}
}
+ function errorBadgeMouseEnter(e) {
+ var d = this.__data__;
+ if (d.validationErrors && d.validationErrors.length > 0) {
+ clearTimeout(portLabelHoverTimeout);
+ var node = this;
+ portLabelHoverTimeout = setTimeout(function() {
+ var pos = getElementPosition(node);
+ portLabelHoverTimeout = null;
+ portLabelHover = showTooltip(
+ (pos[0]),
+ (pos[1]),
+ RED._("editor.errors.invalidProperties")+"\n - "+d.validationErrors.join("\n - "),
+ "top"
+ );
+ },500);
+ }
+ }
+ function errorBadgeMouseLeave() {
+ clearTimeout(portLabelHoverTimeout);
+ if (portLabelHover) {
+ portLabelHover.remove();
+ portLabelHover = null;
+ }
+ }
+
+
function redraw() {
+ requestAnimationFrame(_redraw);
+ }
+
+ function _redraw() {
eventLayer.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
@@ -2543,32 +3411,14 @@ RED.view = (function() {
// TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
- .on("touchstart",function(d) {
- var obj = d3.select(this);
- var touch0 = d3.event.touches.item(0);
- var pos = [touch0.pageX,touch0.pageY];
- startTouchCenter = [touch0.pageX,touch0.pageY];
- startTouchDistance = 0;
- touchStartTime = setTimeout(function() {
- showTouchMenu(obj,pos);
- },touchLongPressTimeout);
- nodeMouseDown.call(this,d)
- })
- .on("touchend", function(d) {
- clearTimeout(touchStartTime);
- touchStartTime = null;
- if (RED.touch.radialMenu.active()) {
- d3.event.stopPropagation();
- return;
- }
- nodeMouseUp.call(this,d);
- });
+ .on("touchstart",nodeTouchStart)
+ .on("touchend",nodeTouchEnd)
outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
- .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
+ .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
- .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);} )
+ .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
@@ -2586,32 +3436,14 @@ RED.view = (function() {
// TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
- .on("touchstart",function(d) {
- var obj = d3.select(this);
- var touch0 = d3.event.touches.item(0);
- var pos = [touch0.pageX,touch0.pageY];
- startTouchCenter = [touch0.pageX,touch0.pageY];
- startTouchDistance = 0;
- touchStartTime = setTimeout(function() {
- showTouchMenu(obj,pos);
- },touchLongPressTimeout);
- nodeMouseDown.call(this,d)
- })
- .on("touchend", function(d) {
- clearTimeout(touchStartTime);
- touchStartTime = null;
- if (RED.touch.radialMenu.active()) {
- d3.event.stopPropagation();
- return;
- }
- nodeMouseUp.call(this,d);
- });
+ .on("touchstart",nodeTouchStart)
+ .on("touchend", nodeTouchEnd);
inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
- .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
+ .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
- .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);} )
+ .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
.on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
@@ -2629,32 +3461,14 @@ RED.view = (function() {
// TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
- .on("touchstart",function(d) {
- var obj = d3.select(this);
- var touch0 = d3.event.touches.item(0);
- var pos = [touch0.pageX,touch0.pageY];
- startTouchCenter = [touch0.pageX,touch0.pageY];
- startTouchDistance = 0;
- touchStartTime = setTimeout(function() {
- showTouchMenu(obj,pos);
- },touchLongPressTimeout);
- nodeMouseDown.call(this,d)
- })
- .on("touchend", function(d) {
- clearTimeout(touchStartTime);
- touchStartTime = null;
- if (RED.touch.radialMenu.active()) {
- d3.event.stopPropagation();
- return;
- }
- nodeMouseUp.call(this,d);
- });
+ .on("touchstart",nodeTouchStart)
+ .on("touchend", nodeTouchEnd);
statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
- .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
+ .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
- .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);} )
+ .on("touchend",function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d){portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
@@ -2702,515 +3516,468 @@ RED.view = (function() {
var nodeEnter = node.enter().insert("svg:g")
.attr("class", "red-ui-flow-node red-ui-flow-node-group")
- .classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; });
+ .classed("red-ui-flow-subflow", activeSubflow != null);
+
nodeEnter.each(function(d,i) {
- var node = d3.select(this);
+ this.__outputs__ = [];
+ this.__inputs__ = [];
+ var node = d3.select(this);
+ var nodeContents = document.createDocumentFragment();
+ var isLink = (d.type === "link in" || d.type === "link out")
+ var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
+ node.attr("id",d.id);
+ d.h = node_height;
+ d.resize = true;
+
+ if (d._def.button) {
+ var buttonGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+ buttonGroup.__data__ = d;
+ buttonGroup.setAttribute("transform", "translate("+((d._def.align == "right") ? 94 : -25)+",2)");
+ buttonGroup.setAttribute("class","red-ui-flow-node-button");
+ node[0][0].__buttonGroup__ = buttonGroup;
+
+ var bgBackground = document.createElementNS("http://www.w3.org/2000/svg","rect");
+ bgBackground.__data__ = d;
+ bgBackground.setAttribute("class","red-ui-flow-node-button-background");
+ bgBackground.setAttribute("rx",5);
+ bgBackground.setAttribute("ry",5);
+ bgBackground.setAttribute("width",32);
+ bgBackground.setAttribute("height",node_height-4);
+ buttonGroup.appendChild(bgBackground);
+ node[0][0].__buttonGroupBackground__ = bgBackground;
+
+ var bgButton = document.createElementNS("http://www.w3.org/2000/svg","rect");
+ bgButton.__data__ = d;
+ bgButton.setAttribute("class","red-ui-flow-node-button-button");
+ bgButton.setAttribute("x", d._def.align == "right"? 11:5);
+ bgButton.setAttribute("y",4);
+ bgButton.setAttribute("rx",4);
+ bgButton.setAttribute("ry",4);
+ bgButton.setAttribute("width",16);
+ bgButton.setAttribute("height",node_height-12);
+ bgButton.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def));
+ d3.select(bgButton)
+ .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
+ .on("mouseup",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
+ .on("mouseover",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);}})
+ .on("mouseout",function(d) {if (!lasso && isButtonEnabled(d)) {
+ var op = 1;
+ if (d._def.button.toggle) {
+ op = d[d._def.button.toggle]?1:0.2;
+ }
+ d3.select(this).attr("fill-opacity",op);
+ }})
+ .on("click",nodeButtonClicked)
+ .on("touchstart",function(d) { nodeButtonClicked.call(this,d); d3.event.preventDefault();})
+ buttonGroup.appendChild(bgButton);
+ node[0][0].__buttonGroupButton__ = bgButton;
+
+ nodeContents.appendChild(buttonGroup);
+
+ }
+
+ var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+ mainRect.__data__ = d;
+ mainRect.setAttribute("class", "red-ui-flow-node "+(d.type == "unknown"?"red-ui-flow-node-unknown":""));
+ mainRect.setAttribute("rx", 5);
+ mainRect.setAttribute("ry", 5);
+ mainRect.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def));
+ node[0][0].__mainRect__ = mainRect;
+ d3.select(mainRect)
+ .on("mouseup",nodeMouseUp)
+ .on("mousedown",nodeMouseDown)
+ .on("touchstart",nodeTouchStart)
+ .on("touchend",nodeTouchEnd)
+ .on("mouseover",nodeMouseOver)
+ .on("mouseout",nodeMouseOut);
+ nodeContents.appendChild(mainRect);
+ //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");
+ //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none");
+
+ if (d._def.icon) {
+ var icon_url = RED.utils.getNodeIcon(d._def,d);
+ var icon_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+ icon_groupEl.__data__ = d;
+ icon_groupEl.setAttribute("class","red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":""));
+ icon_groupEl.setAttribute("x",0);
+ icon_groupEl.setAttribute("y",0);
+ icon_groupEl.style["pointer-events"] = "none";
+ node[0][0].__iconGroup__ = icon_groupEl;
+ var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","rect");
+ icon_shade.setAttribute("x",0);
+ icon_shade.setAttribute("y",0);
+ icon_shade.setAttribute("class","red-ui-flow-node-icon-shade")
+ icon_shade.setAttribute("width",30);
+ icon_shade.setAttribute("height",Math.min(50,d.h-4));
+ icon_groupEl.appendChild(icon_shade);
+ node[0][0].__iconShade__ = icon_shade;
+
+ var icon_group = d3.select(icon_groupEl)
+ createIconAttributes(icon_url, icon_group, d);
+
+ var icon_shade_border = document.createElementNS("http://www.w3.org/2000/svg","path");
+ icon_shade_border.setAttribute("d","right" != d._def.align ? "M 30 1 l 0 "+(d.h-2) : "M 0 1 l 0 "+(d.h-2) )
+ icon_shade_border.setAttribute("class", "red-ui-flow-node-icon-shade-border")
+ icon_groupEl.appendChild(icon_shade_border);
+ node[0][0].__iconShadeBorder__ = icon_shade_border;
+
+ nodeContents.appendChild(icon_groupEl);
+ }
+ var text = document.createElementNS("http://www.w3.org/2000/svg","g");
+ text.setAttribute("class","red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:""));
+ text.setAttribute("transform","translate(38,0)");
+ // text.setAttribute("dy", ".3px");
+ // text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end");
+ nodeContents.appendChild(text);
+ node[0][0].__textGroup__ = text;
+
+ var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g");
+ // statusEl.__data__ = d;
+ statusEl.setAttribute("class","red-ui-flow-node-status-group");
+ statusEl.style.display = "none";
+ node[0][0].__statusGroup__ = statusEl;
+
+ var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
+ statusRect.setAttribute("class","red-ui-flow-node-status");
+ statusRect.setAttribute("x",6);
+ statusRect.setAttribute("y",1);
+ statusRect.setAttribute("width",9);
+ statusRect.setAttribute("height",9);
+ statusRect.setAttribute("rx",2);
+ statusRect.setAttribute("ry",2);
+ statusRect.setAttribute("stroke-width","3");
+ statusEl.appendChild(statusRect);
+ node[0][0].__statusShape__ = statusRect;
+
+ var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text");
+ statusLabel.setAttribute("class","red-ui-flow-node-status-label");
+ statusLabel.setAttribute("x",20);
+ statusLabel.setAttribute("y",10);
+ statusEl.appendChild(statusLabel);
+ node[0][0].__statusLabel__ = statusLabel;
+
+ nodeContents.appendChild(statusEl);
+
+
+ var changeBadgeG = document.createElementNS("http://www.w3.org/2000/svg","g");
+ changeBadgeG.setAttribute("class","red-ui-flow-node-changed hide");
+ changeBadgeG.setAttribute("transform","translate(20, -2)");
+ node[0][0].__changeBadge__ = changeBadgeG;
+ var changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle");
+ changeBadge.setAttribute("r",5);
+ changeBadgeG.appendChild(changeBadge);
+ nodeContents.appendChild(changeBadgeG);
+
+
+ var errorBadgeG = document.createElementNS("http://www.w3.org/2000/svg","g");
+ errorBadgeG.setAttribute("class","red-ui-flow-node-error hide");
+ errorBadgeG.setAttribute("transform","translate(0, -2)");
+ node[0][0].__errorBadge__ = errorBadgeG;
+ var errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path");
+ errorBadge.setAttribute("d","M -5,4 l 10,0 -5,-8 z");
+ errorBadgeG.appendChild(errorBadge);
+ errorBadge.__data__ = d;
+ errorBadge.addEventListener("mouseenter", errorBadgeMouseEnter);
+ errorBadge.addEventListener("mouseleave", errorBadgeMouseLeave);
+ nodeContents.appendChild(errorBadgeG);
+
+ node[0][0].appendChild(nodeContents);
+ });
+ node.each(function(d,i) {
+ if (d.dirty) {
+ var thisNode = d3.select(this);
+
var isLink = (d.type === "link in" || d.type === "link out")
var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
- node.attr("id",d.id);
- var l = RED.utils.getNodeLabel(d);
- if (d.resize || d.w === undefined) {
+ dirtyNodes[d.id] = d;
+ //if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette
+
+ var label = RED.utils.getNodeLabel(d, d.type);
+ var labelParts;
+ if (d.resize || this.__hideLabel__ !== hideLabel || this.__label__ !== label || this.__outputs__.length !== d.outputs) {
+ labelParts = getLabelParts(label, "red-ui-flow-node-label");
+ this.__label__ = label;
+ if (labelParts.lines.length !== this.__labelLineCount__) {
+ d.resize = true;
+ }
+ this.__labelLineCount__ = labelParts.lines.length;
+
+ if (hideLabel) {
+ d.h = Math.max(node_height,(d.outputs || 0) * 15);
+ } else {
+ d.h = Math.max(6+24*labelParts.lines.length,(d.outputs || 0) * 15, 30);
+ }
+ this.__hideLabel__ = hideLabel;
+ }
+
+ if (d.resize) {
+ var ow = d.w;
if (hideLabel) {
d.w = node_height;
} else {
- d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
+ d.w = Math.max(node_width,20*(Math.ceil((labelParts.width+50+(d._def.inputs>0?7:0))/20)) );
}
- }
- d.h = Math.max(node_height,(d.outputs||0) * 15);
-
- // if (d._def.badge) {
- // var badge = node.append("svg:g").attr("class","node_badge_group");
- // var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15);
- // badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge());
- // if (d._def.onbadgeclick) {
- // badgeRect.attr("cursor","pointer")
- // .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();});
- // }
- // }
-
- if (d._def.button) {
- var nodeButtonGroup = node.append("svg:g")
- .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
- .attr("class","red-ui-flow-node-button");
- nodeButtonGroup.append("rect")
- .attr("class","red-ui-flow-node-button-background")
- .attr("rx",5)
- .attr("ry",5)
- .attr("width",32)
- .attr("height",node_height-4);
- nodeButtonGroup.append("rect")
- .attr("class","red-ui-flow-node-button-button")
- .attr("x",function(d) { return d._def.align == "right"? 11:5})
- .attr("y",4)
- .attr("rx",4)
- .attr("ry",4)
- .attr("width",16)
- .attr("height",node_height-12)
- .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
- .attr("cursor","pointer")
- .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}})
- .on("mouseup",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}})
- .on("mouseover",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);}})
- .on("mouseout",function(d) {if (!lasso && isButtonEnabled(d)) {
- var op = 1;
- if (d._def.button.toggle) {
- op = d[d._def.button.toggle]?1:0.2;
- }
- d3.select(this).attr("fill-opacity",op);
- }})
- .on("click",nodeButtonClicked)
- .on("touchstart",nodeButtonClicked)
- }
-
- var mainRect = node.append("rect")
- .attr("class", "red-ui-flow-node")
- .classed("red-ui-flow-node-unknown",function(d) { return d.type == "unknown"; })
- .attr("rx", 5)
- .attr("ry", 5)
- .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
- .on("mouseup",nodeMouseUp)
- .on("mousedown",nodeMouseDown)
- .on("touchstart",function(d) {
- var obj = d3.select(this);
- var touch0 = d3.event.touches.item(0);
- var pos = [touch0.pageX,touch0.pageY];
- startTouchCenter = [touch0.pageX,touch0.pageY];
- startTouchDistance = 0;
- touchStartTime = setTimeout(function() {
- showTouchMenu(obj,pos);
- },touchLongPressTimeout);
- nodeMouseDown.call(this,d)
- })
- .on("touchend", function(d) {
- clearTimeout(touchStartTime);
- touchStartTime = null;
- if (RED.touch.radialMenu.active()) {
- d3.event.stopPropagation();
- return;
- }
- nodeMouseUp.call(this,d);
- })
- .on("mouseover",function(d) {
- if (mouse_mode === 0 || mouse_mode === RED.state.SELECTING_NODE) {
- if (mouse_mode === RED.state.SELECTING_NODE && selectNodesOptions && selectNodesOptions.filter) {
- if (selectNodesOptions.filter(d)) {
- node.classed("red-ui-flow-node-hovered",true);
- }
- } else {
- node.classed("red-ui-flow-node-hovered",true);
- }
- clearTimeout(portLabelHoverTimeout);
- if (d.hasOwnProperty('l')?!d.l : (d.type === "link in" || d.type === "link out")) {
- portLabelHoverTimeout = setTimeout(function() {
- var tooltip;
- if (d._def.label) {
- tooltip = d._def.label;
- try {
- tooltip = (typeof tooltip === "function" ? tooltip.call(d) : tooltip)||"";
- } catch(err) {
- console.log("Definition error: "+d.type+".label",err);
- tooltip = d.type;
- }
- }
- if (tooltip !== "") {
- var pos = getElementPosition(node.node());
- portLabelHoverTimeout = null;
- portLabelHover = showTooltip(
- (pos[0] + d.w/2),
- (pos[1]-1),
- tooltip,
- "top"
- );
- }
- },500);
- }
- } else if (mouse_mode === RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
- if (drag_lines.length > 0) {
- var selectClass;
- var portType;
- if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
- selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
- portType = PORT_TYPE_INPUT;
- } else {
- selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
- portType = PORT_TYPE_OUTPUT;
- }
- portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
- }
- }
- })
- .on("mouseout",function(d) {
- node.classed("red-ui-flow-node-hovered",false);
- clearTimeout(portLabelHoverTimeout);
- if (portLabelHover) {
- portLabelHover.remove();
- portLabelHover = null;
- }
- if (mouse_mode === RED.state.JOINING || mouse_mode === RED.state.QUICK_JOINING) {
- if (drag_lines.length > 0) {
- var selectClass;
- var portType;
- if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
- selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
- portType = PORT_TYPE_INPUT;
- } else {
- selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
- portType = PORT_TYPE_OUTPUT;
- }
- portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
- }
- }
- });
-
- //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");
- //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none");
-
- if (d._def.icon) {
- var icon_url = RED.utils.getNodeIcon(d._def,d);
- var icon_group = node.append("g")
- .attr("class","red-ui-flow-node-icon-group")
- .attr("x",0).attr("y",0);
-
- var icon_shade = icon_group.append("rect")
- .attr("x",0).attr("y",0)
- .attr("class","red-ui-flow-node-icon-shade")
- .attr("width","30")
- .attr("height",function(d){return Math.min(50,d.h-4);});
-
- createIconAttributes(icon_url, icon_group, d);
-
- var icon_shade_border = icon_group.append("path")
- .attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
- .attr("class","red-ui-flow-node-icon-shade-border");
-
- if ("right" == d._def.align) {
- icon_group.attr("class","red-ui-flow-node-icon-group red-ui-flow-node-icon-group-"+d._def.align);
- icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
- //icon.attr("class","red-ui-flow-node-icon red-ui-flow-node-icon-"+d._def.align);
- //icon.attr("class","red-ui-flow-node-icon-shade red-ui-flow-node-icon-shade-"+d._def.align);
- //icon.attr("class","red-ui-flow-node-icon-shade-border red-ui-flow-node-icon-shade-border-"+d._def.align);
- }
-
- //if (d.inputs > 0 && d._def.align == null) {
- // icon_shade.attr("width",35);
- // icon.attr("transform","translate(5,0)");
- // icon_shade_border.attr("transform","translate(5,0)");
- //}
- //if (d._def.outputs > 0 && "right" == d._def.align) {
- // icon_shade.attr("width",35); //icon.attr("x",5);
- //}
-
- //icon.style("pointer-events","none");
- icon_group.style("pointer-events","none");
- }
- var text = node.append("svg:text")
- .attr("class","red-ui-flow-node-label")
- .attr("x", 38)
- .attr("dy", ".35em")
- .attr("text-anchor","start")
- .classed("hide",hideLabel);
-
- if (d._def.align) {
- text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
- if (d._def.align === "right") {
- text.attr("text-anchor","end");
- }
- }
-
- var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none");
- var statusRect = status.append("rect").attr("class","red-ui-flow-node-status")
- .attr("x",6).attr("y",1).attr("width",9).attr("height",9)
- .attr("rx",2).attr("ry",2).attr("stroke-width","3");
- var statusLabel = status.append("svg:text")
- .attr("class","red-ui-flow-node-status-label")
- .attr("x",20).attr("y",10);
-
- node.append("g").attr("class","red-ui-flow-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
- var nodeErrorButton = node.append("g").attr("class","red-ui-flow-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
- nodeErrorButton.on("mouseenter", function() {
- if (d.validationErrors && d.validationErrors.length > 0) {
- clearTimeout(portLabelHoverTimeout);
- portLabelHoverTimeout = setTimeout(function() {
- var pos = getElementPosition(nodeErrorButton.node());
- portLabelHoverTimeout = null;
- portLabelHover = showTooltip(
- (pos[0]),
- (pos[1]),
- RED._("editor.errors.invalidProperties")+"\n - "+d.validationErrors.join("\n - "),
- "top"
- );
- },500);
- }
- }).on("mouseleave", function() {
- clearTimeout(portLabelHoverTimeout);
- if (portLabelHover) {
- portLabelHover.remove();
- portLabelHover = null;
- }
- });
- });
-
- node.each(function(d,i) {
- if (d.dirty) {
- var isLink = (d.type === "link in" || d.type === "link out")
- var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
- dirtyNodes[d.id] = d;
- //if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette
- if (d.resize) {
- var l = RED.utils.getNodeLabel(d);
- var ow = d.w;
- if (hideLabel) {
- d.w = node_height;
- } else {
- d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
- }
- // d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
- d.h = Math.max(node_height,(d.outputs||0) * 15);
+ if (ow !== undefined) {
d.x += (d.w-ow)/2;
- d.resize = false;
}
- var thisNode = d3.select(this);
- thisNode.classed("red-ui-flow-node-disabled", function(d) { return d.d === true});
- thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
+ d.resize = false;
+ }
- //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
- thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
- if (mouse_mode != RED.state.MOVING_ACTIVE) {
- thisNode.classed("red-ui-flow-node-selected",function(d) { return d.selected })
- thisNode.selectAll(".red-ui-flow-node")
- .attr("width",function(d){return d.w})
- .attr("height",function(d){return d.h})
- .classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; })
- ;
- if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) {
- thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", true);
- thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end");
- } else {
- thisNode.selectAll(".red-ui-flow-node-icon-group").classed("red-ui-flow-node-icon-group-right", false);
- thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start");
+ //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
+ this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")");
+ if (mouse_mode != RED.state.MOVING_ACTIVE) {
+ this.classList.toggle("red-ui-flow-node-disabled", d.d === true);
+ this.classList.toggle("red-ui-flow-node-selected", !!d.selected )
+ this.__mainRect__.setAttribute("width", d.w)
+ this.__mainRect__.setAttribute("height", d.h)
+ this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
+
+ if (labelParts) {
+ // The label has changed
+ var sa = labelParts.lines;
+ var sn = labelParts.lines.length;
+ var textLines = this.__textGroup__.childNodes;
+ while(textLines.length > sn) {
+ textLines[textLines.length-1].remove();
}
- thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; });
- thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { return 38; });
- thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
- thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){return d.w-38});
- //thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
- //thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
- //thisNode.selectAll(".red-ui-flow-node-icon-shade-border-right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
-
- var inputPorts = thisNode.selectAll(".red-ui-flow-port-input");
- if ((!isLink || (showAllLinkPorts === -1 && !activeLinkNodes[d.id])) && d.inputs === 0 && !inputPorts.empty()) {
- inputPorts.remove();
- } else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) {
- var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
- var inputGroupPorts;
-
- if (d.type === "link in") {
- inputGroupPorts = inputGroup.append("circle")
- .attr("cx",-1).attr("cy",5)
- .attr("r",5)
- .attr("class","red-ui-flow-port red-ui-flow-link-port")
- } else {
- inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
+ for (var i=0; i numOutputs) {
+ var port = this.__outputs__.pop();
+ port.remove();
+ }
+ for(var portIndex = 0; portIndex < numOutputs; portIndex++ ) {
+ var portGroup;
+ if (portIndex === this.__outputs__.length) {
+ portGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
+ portGroup.setAttribute("class","red-ui-flow-port-output");
+ var portPort;
+ if (d.type === "link out") {
+ portPort = document.createElementNS("http://www.w3.org/2000/svg","circle");
+ portPort.setAttribute("cx",11);
+ portPort.setAttribute("cy",5);
+ portPort.setAttribute("r",5);
+ portPort.setAttribute("class","red-ui-flow-port red-ui-flow-link-port");
} else {
- current_url = faIcon.attr("xlink:href");
+ portPort = document.createElementNS("http://www.w3.org/2000/svg","rect");
+ portPort.setAttribute("rx",3);
+ portPort.setAttribute("ry",3);
+ portPort.setAttribute("width",10);
+ portPort.setAttribute("height",10);
+ portPort.setAttribute("class","red-ui-flow-port");
}
- var new_url = RED.utils.getNodeIcon(d._def,d);
- if (new_url !== current_url) {
- if (!icon.empty()) {
- icon.remove();
- } else {
- faIcon.remove();
- }
- var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
- createIconAttributes(new_url, iconGroup, d);
+ portGroup.appendChild(portPort);
+ portPort.__data__ = this.__data__;
+ portPort.__portType__ = PORT_TYPE_OUTPUT;
+ portPort.__portIndex__ = portIndex;
+ portPort.addEventListener("mousedown", portMouseDownProxy);
+ portPort.addEventListener("touchstart", portTouchStartProxy);
+ portPort.addEventListener("mouseup", portMouseUpProxy);
+ portPort.addEventListener("touchend", portTouchEndProxy);
+ portPort.addEventListener("mouseover", portMouseOverProxy);
+ portPort.addEventListener("mouseout", portMouseOutProxy);
+
+ this.appendChild(portGroup);
+ this.__outputs__.push(portGroup);
+ } else {
+ portGroup = this.__outputs__[portIndex];
+ }
+ var x = d.w - 5;
+ var y = (d.h/2)-((numOutputs-1)/2)*13;
+ portGroup.setAttribute("transform","translate("+x+","+((y+13*portIndex)-5)+")")
+ }
+ if (d._def.icon) {
+ var icon = thisNode.select(".red-ui-flow-node-icon");
+ var faIcon = thisNode.select(".fa-lg");
+ var current_url;
+ if (!icon.empty()) {
+ current_url = icon.attr("xlink:href");
+ } else {
+ current_url = faIcon.attr("xlink:href");
+ }
+ var new_url = RED.utils.getNodeIcon(d._def,d);
+ if (new_url !== current_url) {
+ if (!icon.empty()) {
+ icon.remove();
+ } else {
+ faIcon.remove();
}
+ var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
+ createIconAttributes(new_url, iconGroup, d);
+ icon = thisNode.select(".red-ui-flow-node-icon");
+ faIcon = thisNode.select(".fa-lg");
}
- thisNode.selectAll(".red-ui-flow-node-changed")
- .attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
- .classed("hide",function(d) { return !(d.changed||d.moved); });
+ icon.attr("y",function(){return (d.h-d3.select(this).attr("height"))/2;});
+ this.__iconShade__.setAttribute("height", d.h );
+ this.__iconShadeBorder__.setAttribute("d",
+ "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2)
+ );
+ faIcon.attr("y",(d.h+13)/2);
+ }
+ this.__changeBadge__.setAttribute("transform", "translate("+(d.w-10)+", -2)");
+ this.__changeBadge__.classList.toggle("hide", !(d.changed||d.moved));
+ this.__errorBadge__.setAttribute("transform", "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)");
+ this.__errorBadge__.classList.toggle("hide", d.valid);
- thisNode.selectAll(".red-ui-flow-node-error")
- .attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
- .classed("hide",function(d) { return d.valid; });
+ thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) {
+ var port = d3.select(this);
+ port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";})
+ });
- thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) {
- var port = d3.select(this);
- port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";})
- });
+ if (d._def.button) {
+ var buttonEnabled = isButtonEnabled(d);
+ this.__buttonGroup__.classList.toggle("red-ui-flow-node-button-disabled", !buttonEnabled);
- thisNode.selectAll(".red-ui-flow-node-icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
- thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height",function(d){return d.h;});
- thisNode.selectAll(".red-ui-flow-node-icon-shade-border").attr("d", function (d) {
- return "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2);
- });
- thisNode.selectAll(".fa-lg").attr("y",function(d){return (d.h+13)/2;});
+ var x = d._def.align == "right"?d.w-6:-25;
+ if (d._def.button.toggle && !d[d._def.button.toggle]) {
+ x = x - (d._def.align == "right"?8:-8);
+ }
+ this.__buttonGroup__.setAttribute("transform", "translate("+x+",2)");
- thisNode.selectAll(".red-ui-flow-node-button").attr("opacity",function(d) {
- return (!isButtonEnabled(d))?0.4:1
- });
- thisNode.selectAll(".red-ui-flow-node-button-button").attr("cursor",function(d) {
- return (!isButtonEnabled(d))?"":"pointer";
- });
- thisNode.selectAll(".red-ui-flow-node-button").attr("transform",function(d){
- var x = d._def.align == "right"?d.w-6:-25;
- if (d._def.button.toggle && !d[d._def.button.toggle]) {
- x = x - (d._def.align == "right"?8:-8);
- }
- return "translate("+x+",2)";
- });
- thisNode.selectAll(".red-ui-flow-node-button rect").attr("fill-opacity",function(d){
- if (d._def.button.toggle) {
- return d[d._def.button.toggle]?1:0.2;
- }
- return 1;
- });
+ if (d._def.button.toggle) {
+ this.__buttonGroupButton__.setAttribute("fill-opacity",d[d._def.button.toggle]?1:0.2)
+ this.__buttonGroupBackground__.setAttribute("fill-opacity",d[d._def.button.toggle]?1:0.2)
+ }
- if (d._def.button && (typeof d._def.button.visible === "function")) { // is defined and a function...
+ if (typeof d._def.button.visible === "function") { // is defined and a function...
if (d._def.button.visible.call(d) === false) {
- thisNode.selectAll(".red-ui-flow-node-button").style("display","none");
+ this.__buttonGroup__.style.display = "none";
}
else {
- thisNode.selectAll(".red-ui-flow-node-button").style("display","inherit");
+ this.__buttonGroup__.style.display = "inherit";
}
}
-
- // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
- // thisNode.selectAll("text.node_badge_label").text(function(d,i) {
- // if (d._def.badge) {
- // if (typeof d._def.badge == "function") {
- // try {
- // return d._def.badge.call(d);
- // } catch(err) {
- // console.log("Definition error: "+d.type+".badge",err);
- // return "";
- // }
- // } else {
- // return d._def.badge;
- // }
- // }
- // return "";
- // });
}
-
- if (d.dirtyStatus) {
- if (!showStatus || !d.status) {
- thisNode.selectAll(".red-ui-flow-node-status-group").style("display","none");
- } else {
- thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline");
- var fill = status_colours[d.status.fill]; // Only allow our colours for now
- if (d.status.shape == null && fill == null) {
- thisNode.selectAll(".red-ui-flow-node-status").style("display","none");
- thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(-14,"+(d.h+3)+")");
- } else {
- thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(3,"+(d.h+3)+")");
- var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
- thisNode.selectAll(".red-ui-flow-node-status").style("display","inline").attr("class","red-ui-flow-node-status "+statusClass);
- }
- if (d.status.hasOwnProperty('text')) {
- thisNode.selectAll(".red-ui-flow-node-status-label").text(d.status.text);
- } else {
- thisNode.selectAll(".red-ui-flow-node-status-label").text("");
- }
- }
- delete d.dirtyStatus;
- }
-
- d.dirty = false;
+ // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
+ // thisNode.selectAll("text.node_badge_label").text(function(d,i) {
+ // if (d._def.badge) {
+ // if (typeof d._def.badge == "function") {
+ // try {
+ // return d._def.badge.call(d);
+ // } catch(err) {
+ // console.log("Definition error: "+d.type+".badge",err);
+ // return "";
+ // }
+ // } else {
+ // return d._def.badge;
+ // }
+ // }
+ // return "";
+ // });
}
- });
+ if (d.dirtyStatus) {
+ if (!showStatus || !d.status) {
+ this.__statusGroup__.style.display = "none";
+ } else {
+ this.__statusGroup__.style.display = "inline";
+ var fill = status_colours[d.status.fill]; // Only allow our colours for now
+ if (d.status.shape == null && fill == null) {
+ this.__statusShape__.style.display = "none";
+ this.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")");
+ } else {
+ this.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")");
+ var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
+ this.__statusShape__.style.display = "inline";
+ this.__statusShape__.setAttribute("class","red-ui-flow-node-status "+statusClass);
+ }
+ if (d.status.hasOwnProperty('text')) {
+ this.__statusLabel__.textContent = d.status.text;
+ } else {
+ this.__statusLabel__.textContent = "";
+ }
+ }
+ delete d.dirtyStatus;
+ }
+ d.dirty = false;
+ if (d.g) {
+ if (!dirtyGroups[d.g]) {
+ var gg = d.g;
+ while (gg && !dirtyGroups[gg]) {
+ dirtyGroups[gg] = RED.nodes.group(gg);
+ gg = dirtyGroups[gg].g;
+ }
+ }
+ }
+ }
+ });
var link = linkLayer.selectAll(".red-ui-flow-link").data(
activeLinks,
function(d) {
@@ -3221,89 +3988,66 @@ RED.view = (function() {
linkEnter.each(function(d,i) {
var l = d3.select(this);
- d.added = true;
- l.append("svg:path").attr("class","red-ui-flow-link-background red-ui-flow-link-path")
- .classed("red-ui-flow-link-link", function(d) { return d.link })
- .on("mousedown",function(d) {
- if (mouse_mode === RED.state.SELECTING_NODE) {
- d3.event.stopPropagation();
- return;
- }
- mousedown_link = d;
- clearSelection();
- selected_link = mousedown_link;
- updateSelection();
- redraw();
- focusView();
- d3.event.stopPropagation();
- if (d3.event.metaKey || d3.event.ctrlKey) {
- l.classed("red-ui-flow-link-splice",true);
- showQuickAddDialog(d3.mouse(this), selected_link);
- }
- })
- .on("touchstart",function(d) {
- if (mouse_mode === RED.state.SELECTING_NODE) {
- d3.event.stopPropagation();
- return;
- }
- mousedown_link = d;
- clearSelection();
- selected_link = mousedown_link;
- updateSelection();
- redraw();
- focusView();
- d3.event.stopPropagation();
+ var pathContents = document.createDocumentFragment();
- var obj = d3.select(document.body);
- var touch0 = d3.event.touches.item(0);
- var pos = [touch0.pageX,touch0.pageY];
- touchStartTime = setTimeout(function() {
- touchStartTime = null;
- showTouchMenu(obj,pos);
- },touchLongPressTimeout);
- })
- l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path");
- l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path")
- .classed("red-ui-flow-link-link", function(d) { return d.link })
- .classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
+ d.added = true;
+ var pathBack = document.createElementNS("http://www.w3.org/2000/svg","path");
+ pathBack.__data__ = d;
+ pathBack.setAttribute("class","red-ui-flow-link-background red-ui-flow-link-path"+(d.link?" red-ui-flow-link-link":""));
+ this.__pathBack__ = pathBack;
+ pathContents.appendChild(pathBack);
+ d3.select(pathBack)
+ .on("mousedown",linkMouseDown)
+ .on("touchstart",linkTouchStart)
+
+ var pathOutline = document.createElementNS("http://www.w3.org/2000/svg","path");
+ pathOutline.__data__ = d;
+ pathOutline.setAttribute("class","red-ui-flow-link-outline red-ui-flow-link-path");
+ this.__pathOutline__ = pathOutline;
+ pathContents.appendChild(pathOutline);
+
+ var pathLine = document.createElementNS("http://www.w3.org/2000/svg","path");
+ pathLine.__data__ = d;
+ pathLine.setAttribute("class","red-ui-flow-link-line red-ui-flow-link-path"+
+ (d.link?" red-ui-flow-link-link":(activeSubflow?" red-ui-flow-subflow-link":"")));
+ this.__pathLine__ = pathLine;
+ pathContents.appendChild(pathLine);
+
+ l[0][0].appendChild(pathContents);
});
link.exit().remove();
- var links = linkLayer.selectAll(".red-ui-flow-link-path");
- links.each(function(d) {
+ link.each(function(d) {
var link = d3.select(this);
if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) {
- if (/red-ui-flow-link-line/.test(link.attr('class'))) {
- link.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
+ var numOutputs = d.source.outputs || 1;
+ var sourcePort = d.sourcePort || 0;
+ var y = -((numOutputs-1)/2)*13 +13*sourcePort;
+ d.x1 = d.source.x+d.source.w/2;
+ d.y1 = d.source.y+y;
+ d.x2 = d.target.x-d.target.w/2;
+ d.y2 = d.target.y;
+
+ // return "M "+d.x1+" "+d.y1+
+ // " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
+ // (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
+ // d.x2+" "+d.y2;
+ var path = generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
+ if (/NaN/.test(path)) {
+ path = ""
}
- link.attr("d",function(d){
- var numOutputs = d.source.outputs || 1;
- var sourcePort = d.sourcePort || 0;
- var y = -((numOutputs-1)/2)*13 +13*sourcePort;
- d.x1 = d.source.x+d.source.w/2;
- d.y1 = d.source.y+y;
- d.x2 = d.target.x-d.target.w/2;
- d.y2 = d.target.y;
-
- // return "M "+d.x1+" "+d.y1+
- // " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
- // (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
- // d.x2+" "+d.y2;
- var path = generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
- if (/NaN/.test(path)) {
- return ""
- }
- return path;
- });
- link.classed("red-ui-flow-node-disabled", function(d) { return d.source.d || d.target.d; });
+ this.__pathBack__.setAttribute("d",path);
+ this.__pathOutline__.setAttribute("d",path);
+ this.__pathLine__.setAttribute("d",path);
+ this.__pathLine__.classList.toggle("red-ui-flow-node-disabled",!!(d.source.d || d.target.d));
+ this.__pathLine__.classList.toggle("red-ui-flow-subflow-link", !d.link && activeSubflow);
}
- })
+ this.classList.toggle("red-ui-flow-link-selected", !!(d===selected_link||d.selected));
- link.classed("red-ui-flow-link-selected", function(d) { return d === selected_link || d.selected; });
- link.classed("red-ui-flow-link-unknown",function(d) {
+ var connectedToUnknown = !!(d.target.type == "unknown" || d.source.type == "unknown");
+ this.classList.toggle("red-ui-flow-link-unknown",!!(d.target.type == "unknown" || d.source.type == "unknown"))
delete d.added;
- return d.target.type == "unknown" || d.source.type == "unknown"
- });
+ })
var offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow").data(
activeFlowLinks,
function(d) {
@@ -3334,24 +4078,24 @@ RED.view = (function() {
var y = -(flows.length-1)*h/2;
var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows);
var enterLinkGroups = linkGroups.enter().append("g").attr("class","red-ui-flow-link-group")
- .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',true)})
- .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',false)})
- .on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); })
- .on('mouseup', function(f) {
- if (mouse_mode !== 0) {
- return
- }
- d3.event.stopPropagation();
- var targets = d.links[f];
- RED.workspaces.show(f);
- targets.forEach(function(n) {
- n.selected = true;
- n.dirty = true;
- moving_set.push({n:n});
- });
- updateSelection();
- redraw();
+ .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',true)})
+ .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',false)})
+ .on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); })
+ .on('mouseup', function(f) {
+ if (mouse_mode !== 0) {
+ return
+ }
+ d3.event.stopPropagation();
+ var targets = d.links[f];
+ RED.workspaces.show(f);
+ targets.forEach(function(n) {
+ n.selected = true;
+ n.dirty = true;
+ moving_set.push({n:n});
});
+ updateSelection();
+ redraw();
+ });
enterLinkGroups.each(function(f) {
var linkG = d3.select(this);
linkG.append("svg:path")
@@ -3423,6 +4167,200 @@ RED.view = (function() {
})
+ var group = groupLayer.selectAll(".red-ui-flow-group").data(activeGroups,function(d) { return d.id });
+ group.exit().each(function(d,i) {
+ document.getElementById("group_select_"+d.id).remove()
+ }).remove();
+ var groupEnter = group.enter().insert("svg:g").attr("class", "red-ui-flow-group")
+ var addedGroups = false;
+ groupEnter.each(function(d,i) {
+ addedGroups = true;
+ var g = d3.select(this);
+ g.attr("id",d.id);
+
+ var groupBorderRadius = 4;
+
+ var selectGroup = groupSelectLayer.append('g').attr("class", "red-ui-flow-group").attr("id","group_select_"+d.id);
+ selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
+ .attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
+ .attr("x",-4)
+ .attr("y",-4)
+ .style("stroke","rgba(255,255,255,0.8)")
+ .style("stroke-width",6)
+
+ selectGroup.append('rect').classed("red-ui-flow-group-outline-select",true)
+ .attr('rx',groupBorderRadius).attr('ry',groupBorderRadius)
+ .attr("x",-4)
+ .attr("y",-4)
+ selectGroup.on("mousedown", function() {groupMouseDown.call(g[0][0],d)});
+ selectGroup.on("mouseup", function() {groupMouseUp.call(g[0][0],d)});
+
+ g.append('rect').classed("red-ui-flow-group-outline",true).attr('rx',0.5).attr('ry',0.5);
+
+ g.append('rect').classed("red-ui-flow-group-body",true)
+ .attr('rx',groupBorderRadius).attr('ry',groupBorderRadius).style({
+ "fill":d.fill||"none",
+ "stroke": d.stroke||"none",
+ })
+ g.on("mousedown",groupMouseDown).on("mouseup",groupMouseUp)
+ g.append('svg:text').attr("class","red-ui-flow-group-label");
+ d.dirty = true;
+ });
+ if (addedGroups) {
+ group.sort(function(a,b) {
+ if (a._root === b._root) {
+ return a._depth - b._depth;
+ } else {
+ return a._root.localeCompare(b._root);
+ }
+ })
+ }
+ group[0].reverse();
+ group.each(function(d,i) {
+ if (d.resize) {
+ d.minWidth = 0;
+ delete d.resize;
+ }
+ if (d.dirty || dirtyGroups[d.id]) {
+ var g = d3.select(this);
+ if (d.nodes.length > 0) {
+ var minX = Number.POSITIVE_INFINITY;
+ var minY = Number.POSITIVE_INFINITY;
+ var maxX = 0;
+ var maxY = 0;
+ var margin = 26;
+ d.nodes.forEach(function(n) {
+ if (n.type !== "group") {
+ minX = Math.min(minX,n.x-n.w/2-margin-((n._def.button && n._def.align!=="right")?20:0));
+ minY = Math.min(minY,n.y-n.h/2-margin);
+ maxX = Math.max(maxX,n.x+n.w/2+margin+((n._def.button && n._def.align=="right")?20:0));
+ maxY = Math.max(maxY,n.y+n.h/2+margin);
+ } else {
+ minX = Math.min(minX,n.x-margin)
+ minY = Math.min(minY,n.y-margin)
+ maxX = Math.max(maxX,n.x+n.w+margin)
+ maxY = Math.max(maxY,n.y+n.h+margin)
+ }
+ });
+
+ d.x = minX;
+ d.y = minY;
+ d.w = maxX - minX;
+ d.h = maxY - minY;
+ } else {
+ d.w = 40;
+ d.h = 40;
+ }
+ if (!d.minWidth) {
+ if (d.style.label && d.name) {
+ var labelParts = getLabelParts(d.name||"","red-ui-flow-group-label");
+ d.minWidth = labelParts.width + 8;
+ d.labels = labelParts.lines;
+ } else {
+ d.minWidth = 40;
+ d.labels = [];
+ }
+ }
+ d.w = Math.max(d.minWidth,d.w);
+ if (d.style.label && d.labels.length > 0) {
+ var labelPos = d.style["label-position"] || "nw";
+ var h = (d.labels.length-1) * 16;
+ if (labelPos[0] === "s") {
+ h += 8;
+ }
+ d.h += h;
+ if (labelPos[0] === "n") {
+ if (d.nodes.length > 0) {
+ d.y -= h;
+ }
+ }
+ }
+
+ g.attr("transform","translate("+d.x+","+d.y+")")
+ g.selectAll(".red-ui-flow-group-outline")
+ .attr("width",d.w)
+ .attr("height",d.h)
+
+
+ var selectGroup = document.getElementById("group_select_"+d.id);
+ selectGroup.setAttribute("transform","translate("+d.x+","+d.y+")");
+ if (d.hovered) {
+ selectGroup.classList.add("red-ui-flow-group-hovered")
+ } else {
+ selectGroup.classList.remove("red-ui-flow-group-hovered")
+ }
+ var selectGroupRect = selectGroup.children[0];
+ selectGroupRect.setAttribute("width",d.w+8)
+ selectGroupRect.setAttribute("height",d.h+8)
+ selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
+ selectGroupRect.style.strokeDasharray = (d.active)?"10 4":"";
+ selectGroupRect = selectGroup.children[1];
+ selectGroupRect.setAttribute("width",d.w+8)
+ selectGroupRect.setAttribute("height",d.h+8)
+ selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
+ selectGroupRect.style.strokeDasharray = (d.active)?"10 4":"";
+
+ if (d.highlighted) {
+ selectGroup.classList.add("red-ui-flow-node-highlighted");
+ } else {
+ selectGroup.classList.remove("red-ui-flow-node-highlighted");
+ }
+
+
+ g.selectAll(".red-ui-flow-group-body")
+ .attr("width",d.w)
+ .attr("height",d.h)
+ .style("stroke", d.style.stroke || "")
+ .style("stroke-opacity", d.style.hasOwnProperty('stroke-opacity') ? d.style['stroke-opacity'] : "")
+ .style("fill", d.style.fill || "")
+ .style("fill-opacity", d.style.hasOwnProperty('fill-opacity') ? d.style['fill-opacity'] : "")
+
+ var label = g.selectAll(".red-ui-flow-group-label");
+ label.classed("hide",!!!d.style.label)
+ if (d.style.label) {
+ var labelPos = d.style["label-position"] || "nw";
+ var labelX = 0;
+ var labelY = 0;
+
+ if (labelPos[0] === 'n') {
+ labelY = 0+15; // Allow for font-height
+ } else {
+ labelY = d.h - 5 -(d.labels.length -1) * 16;
+ }
+ if (labelPos[1] === 'w') {
+ labelX = 5;
+ labelAnchor = "start"
+ } else if (labelPos[1] === 'e') {
+ labelX = d.w-5;
+ labelAnchor = "end"
+ } else {
+ labelX = d.w/2;
+ labelAnchor = "middle"
+ }
+ label
+ .style("fill", d.style.hasOwnProperty('color')?d.style.color:"#999")
+ .attr("transform","translate("+labelX+","+labelY+")")
+ .attr("text-anchor",labelAnchor);
+ if (d.labels) {
+ var ypos = 0;
+ g.selectAll(".red-ui-flow-group-label-text").remove();
+ d.labels.forEach(function (name) {
+ label.append("tspan")
+ .classed("red-ui-flow-group-label-text", true)
+ .text(name)
+ .attr("x", 0)
+ .attr("y", ypos);
+ ypos += 16;
+ });
+ } else {
+ g.selectAll(".red-ui-flow-group-label-text").remove();
+ }
+ }
+
+ delete dirtyGroups[d.id];
+ delete d.dirty;
+ }
+ })
} else {
// JOINING - unselect any selected links
linkLayer.selectAll(".red-ui-flow-link-selected").data(
@@ -3436,7 +4374,6 @@ RED.view = (function() {
if (d3.event) {
d3.event.preventDefault();
}
-
}
function focusView() {
@@ -3474,29 +4411,36 @@ RED.view = (function() {
if (result) {
var new_nodes = result[0];
var new_links = result[1];
- var new_workspaces = result[2];
- var new_subflows = result[3];
- var new_default_workspace = result[4];
+ var new_groups = result[2];
+ var new_workspaces = result[3];
+ var new_subflows = result[4];
+ var new_default_workspace = result[5];
if (addNewFlow && new_default_workspace) {
RED.workspaces.show(new_default_workspace.id);
}
var new_ms = new_nodes.filter(function(n) { return n.hasOwnProperty("x") && n.hasOwnProperty("y") && n.z == RED.workspaces.active() }).map(function(n) { return {n:n};});
+ new_ms = new_ms.concat(new_groups.filter(function(g) { return g.z === RED.workspaces.active()}).map(function(g) { return {n:g}}))
var new_node_ids = new_nodes.map(function(n){ n.changed = true; return n.id; });
-
// TODO: pick a more sensible root node
if (new_ms.length > 0) {
- var root_node = new_ms[0].n;
- var dx = root_node.x;
- var dy = root_node.y;
+
if (mouse_position == null) {
mouse_position = [0,0];
}
+ var dx = mouse_position[0];
+ var dy = mouse_position[1];
+ if (new_ms.length > 0) {
+ var root_node = new_ms[0].n;
+ dx = root_node.x;
+ dy = root_node.y;
+ }
+
var minX = 0;
var minY = 0;
var i;
- var node;
+ var node,group;
for (i=0;i 0) {
counts.push(RED._("clipboard.flow",{count:new_workspaces.length}));
}
if (newNodeCount > 0) {
counts.push(RED._("clipboard.node",{count:newNodeCount}));
}
+ if (newGroupCount > 0) {
+ counts.push(RED._("clipboard.group",{count:newGroupCount}));
+ }
if (newConfigNodeCount > 0) {
counts.push(RED._("clipboard.configNode",{count:newNodeCount}));
}
@@ -3640,22 +4597,25 @@ RED.view = (function() {
var historyEvents = [];
for (var i=0;i 0) {
@@ -3670,7 +4630,40 @@ RED.view = (function() {
RED.view.redraw();
}
+ function getSelection() {
+ var selection = {};
+ var allNodes = new Set();
+
+ if (moving_set.length > 0) {
+ moving_set.forEach(function(n) {
+ if (n.n.type !== 'group') {
+ allNodes.add(n.n);
+ }
+ });
+ }
+ var selectedGroups = activeGroups.filter(function(g) { return g.selected && !g.active });
+ if (selectedGroups.length > 0) {
+ if (selectedGroups.length === 1 && selectedGroups[0].active) {
+ // Let nodes be nodes
+ } else {
+ selectedGroups.forEach(function(g) {
+ var groupNodes = RED.group.getNodes(g,true);
+ groupNodes.forEach(function(n) {
+ allNodes.delete(n);
+ });
+ allNodes.add(g);
+ });
+ }
+ }
+ if (allNodes.size > 0) {
+ selection.nodes = Array.from(allNodes);
+ }
+ if (selected_link != null) {
+ selection.link = selected_link;
+ }
+ return selection;
+ }
return {
init: init,
state:function(state) {
@@ -3681,12 +4674,17 @@ RED.view = (function() {
}
},
- redraw: function(updateActive) {
+ updateActive: updateActiveNodes,
+ redraw: function(updateActive, syncRedraw) {
if (updateActive) {
updateActiveNodes();
updateSelection();
}
- redraw();
+ if (syncRedraw) {
+ _redraw();
+ } else {
+ redraw();
+ }
},
focus: focusView,
importNodes: importNodes,
@@ -3701,21 +4699,31 @@ RED.view = (function() {
selectedNode.dirty = true;
moving_set = [{n:selectedNode}];
}
+ } else if (selection) {
+ if (selection.nodes) {
+ updateActiveNodes();
+ moving_set = [];
+ // TODO: this selection group span groups
+ // - if all in one group -> activate the group
+ // - if in multiple groups (or group/no-group)
+ // -> select the first 'set' of things in the same group/no-group
+ selection.nodes.forEach(function(n) {
+ if (n.type !== "group") {
+ n.selected = true;
+ n.dirty = true;
+ moving_set.push({n:n});
+ } else {
+ selectGroup(n,true);
+ }
+ })
+ }
}
}
updateSelection();
- redraw();
- },
- selection: function() {
- var selection = {};
- if (moving_set.length > 0) {
- selection.nodes = moving_set.map(function(n) { return n.n;});
- }
- if (selected_link != null) {
- selection.link = selected_link;
- }
- return selection;
+ redraw(true);
},
+ selection: getSelection,
+
scale: function() {
return scaleFactor;
},
@@ -3730,47 +4738,57 @@ RED.view = (function() {
}
return result;
},
- reveal: function(id) {
+ getGroupAtPoint: getGroupAt,
+ getActiveGroup: function() { return activeGroup },
+ reveal: function(id,triggerHighlight) {
if (RED.nodes.workspace(id) || RED.nodes.subflow(id)) {
RED.workspaces.show(id);
} else {
- var node = RED.nodes.node(id);
- if (node._def.category !== 'config' && node.z) {
- node.highlighted = true;
- node.dirty = true;
- RED.workspaces.show(node.z);
+ var node = RED.nodes.node(id) || RED.nodes.group(id);
+ if (node) {
+ if (node.z && (node.type === "group" || node._def.category !== 'config')) {
+ node.dirty = true;
+ RED.workspaces.show(node.z);
- var screenSize = [chart.width()/scaleFactor,chart.height()/scaleFactor];
- var scrollPos = [chart.scrollLeft()/scaleFactor,chart.scrollTop()/scaleFactor];
-
- if (node.x < scrollPos[0] || node.y < scrollPos[1] || node.x > screenSize[0]+scrollPos[0] || node.y > screenSize[1]+scrollPos[1]) {
- var deltaX = '-='+(((scrollPos[0] - node.x) + screenSize[0]/2)*scaleFactor);
- var deltaY = '-='+(((scrollPos[1] - node.y) + screenSize[1]/2)*scaleFactor);
- chart.animate({
- scrollLeft: deltaX,
- scrollTop: deltaY
- },200);
- }
-
- if (!node._flashing) {
- node._flashing = true;
- var flash = 22;
- var flashFunc = function() {
- flash--;
- node.dirty = true;
- if (flash >= 0) {
- node.highlighted = !node.highlighted;
- setTimeout(flashFunc,100);
- } else {
- node.highlighted = false;
- delete node._flashing;
- }
- RED.view.redraw();
+ var screenSize = [chart.width()/scaleFactor,chart.height()/scaleFactor];
+ var scrollPos = [chart.scrollLeft()/scaleFactor,chart.scrollTop()/scaleFactor];
+ var cx = node.x;
+ var cy = node.y;
+ if (node.type === "group") {
+ cx += node.w/2;
+ cy += node.h/2;
}
- flashFunc();
+ if (cx < scrollPos[0] || cy < scrollPos[1] || cx > screenSize[0]+scrollPos[0] || cy > screenSize[1]+scrollPos[1]) {
+ var deltaX = '-='+(((scrollPos[0] - cx) + screenSize[0]/2)*scaleFactor);
+ var deltaY = '-='+(((scrollPos[1] - cy) + screenSize[1]/2)*scaleFactor);
+ chart.animate({
+ scrollLeft: deltaX,
+ scrollTop: deltaY
+ },200);
+ }
+ if (triggerHighlight !== false) {
+ node.highlighted = true;
+ if (!node._flashing) {
+ node._flashing = true;
+ var flash = 22;
+ var flashFunc = function() {
+ flash--;
+ node.dirty = true;
+ if (flash >= 0) {
+ node.highlighted = !node.highlighted;
+ setTimeout(flashFunc,100);
+ } else {
+ node.highlighted = false;
+ delete node._flashing;
+ }
+ RED.view.redraw();
+ }
+ flashFunc();
+ }
+ }
+ } else if (node._def.category === 'config') {
+ RED.sidebar.config.show(id);
}
- } else if (node._def.category === 'config') {
- RED.sidebar.config.show(id);
}
}
},
@@ -3795,7 +4813,6 @@ RED.view = (function() {
mouse_mode = RED.state.SELECTING_NODE;
clearSelection();
if (options.selected) {
- console.log(options.selected);
options.selected.forEach(function(id) {
var n = RED.nodes.node(id);
if (n) {
@@ -3848,6 +4865,15 @@ RED.view = (function() {
type: "compact",
buttons: buttons
})
+ },
+ scroll: function(x,y) {
+ chart.scrollLeft(chart.scrollLeft()+x);
+ chart.scrollTop(chart.scrollTop()+y)
+ },
+ clickNodeButton: function(n) {
+ if (n._def.button) {
+ nodeButtonClicked(n);
+ }
}
};
})();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
index 1f361d0f7..290083ea6 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js
@@ -128,10 +128,6 @@ RED.workspaces = (function() {
RED.history.push(historyEvent);
RED.nodes.dirty(true);
RED.sidebar.config.refresh();
- var selection = RED.view.selection();
- if (!selection.nodes && !selection.links) {
- RED.sidebar.info.refresh(workspace);
- }
if (changes.hasOwnProperty('disabled')) {
RED.nodes.eachNode(function(n) {
if (n.z === workspace.id) {
@@ -140,6 +136,7 @@ RED.workspaces = (function() {
});
RED.view.redraw();
}
+ RED.events.emit("flows:change",workspace);
}
RED.tray.close();
}
@@ -219,7 +216,10 @@ RED.workspaces = (function() {
if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
RED.view.state(RED.state.DEFAULT);
}
- RED.sidebar.info.refresh(workspace);
+ var selection = RED.view.selection();
+ if (!selection.nodes && !selection.links && workspace.id === activeWorkspace) {
+ RED.sidebar.info.refresh(workspace);
+ }
tabflowEditor.destroy();
}
}
@@ -371,7 +371,9 @@ RED.workspaces = (function() {
var changes = { disabled: workspace.disabled };
workspace.disabled = disabled;
$("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
- $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
+ if (id === activeWorkspace) {
+ $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
+ }
var historyEvent = {
t: "edit",
changes:changes,
@@ -380,10 +382,11 @@ RED.workspaces = (function() {
}
workspace.changed = true;
RED.history.push(historyEvent);
+ RED.events.emit("flows:change",workspace);
RED.nodes.dirty(true);
RED.sidebar.config.refresh();
var selection = RED.view.selection();
- if (!selection.nodes && !selection.links) {
+ if (!selection.nodes && !selection.links && workspace.id === activeWorkspace) {
RED.sidebar.info.refresh(workspace);
}
if (changes.hasOwnProperty('disabled')) {
@@ -412,9 +415,14 @@ RED.workspaces = (function() {
}
function setWorkspaceOrder(order) {
- RED.nodes.setWorkspaceOrder(order.filter(function(id) {
+ var newOrder = order.filter(function(id) {
return RED.nodes.workspace(id) !== undefined;
- }));
+ })
+ var currentOrder = RED.nodes.getWorkspaceOrder();
+ if (JSON.stringify(newOrder) !== JSON.stringify(currentOrder)) {
+ RED.nodes.setWorkspaceOrder(newOrder);
+ RED.events.emit("flows:reorder",newOrder);
+ }
workspace_tabs.order(order);
}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
index f9c00faac..cd3739800 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss
@@ -9,19 +9,15 @@
color: transparent !important;
}
}
-
-
.ace_gutter {
+ background: $text-editor-gutter-background;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.ace_scroller {
+ background: $text-editor-background;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
- }
-
- .ace_scroller {
- background: $text-editor-background;
color: $text-editor-color;
}
.ace_marker-layer .ace_active-line {
@@ -37,9 +33,6 @@
.ace_gutter-active-line {
background: $text-editor-gutter-active-line-background;
}
- .ace_gutter {
- background: $text-editor-gutter-background;
- }
.ace_tooltip {
font-family: $primary-font;
line-height: 1.4em;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
index 2aca0b8e1..391ddf83f 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss
@@ -67,6 +67,9 @@
text-decoration: none;
color: $primary-text-color;
}
+ a:focus {
+ outline: 1px solid $form-input-focus-color;
+ }
p {
margin: 0 0 10px;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
index 8411343c5..d8ffd9402 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss
@@ -23,7 +23,7 @@ $primary-background: #f3f3f3;//#0ff;
$secondary-background: #fff;//#ff0;
$secondary-background-selected: #efefef;//#e9e900;
$secondary-background-inactive: #f0f0f0;//#f0f000;
-$secondary-background-hover: #ddd;//#dd0;
+$secondary-background-hover: #e6e6e6;//#dd0;
$secondary-background-disabled: #f9f9f9;//#fafa0;
$tertiary-background: #f7f7f7;//#f0f;
@@ -94,7 +94,7 @@ $list-item-secondary-color: $secondary-text-color;
$list-item-background: $secondary-background;
$list-item-background-disabled: $secondary-background-inactive;
$list-item-background-hover: $secondary-background-hover;
-$list-item-background-selected: $secondary-background-selected;
+$list-item-background-selected: #ffebc7; // #fff1e5;
$list-item-border-selected: $secondary-text-color-selected;
$tab-text-color-active: $header-text-color;
@@ -129,7 +129,7 @@ $workspace-button-color-primary: #eee;
$workspace-button-background-primary: #AD1625;
$workspace-button-background-primary-hover: #6E0A1E;
-$workspace-button-color-focus-outline: $form-input-border-color;
+$workspace-button-color-focus-outline: $form-input-focus-color;
$shade-color: rgba(160,160,160,0.5);
@@ -284,3 +284,8 @@ $debug-message-border: #eee;
$debug-message-border-hover: #999;
$debug-message-border-warning: #ffdf9d;
$debug-message-border-error: #f99;
+
+$group-default-fill: none;
+$group-default-fill-opacity: 1;
+$group-default-stroke: #999;
+$group-default-stroke-opacity: 1;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index 658094571..bb91846bb 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
@@ -175,3 +175,38 @@
.red-ui-menu-dropdown-submenu.disabled > a:before {
border-right-color: $menuCaret;
}
+
+
+// Menu NG
+ul.red-ui-menu:not(.red-ui-menu-dropdown) {
+ font-family: $primary-font;
+ font-size: 12px;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ li a {
+ display: block;
+ padding: 4px 8px 4px 16px;
+ clear: both;
+ font-weight: normal;
+ line-height: 20px;
+ color: $menuColor;
+ white-space: nowrap;
+ text-decoration: none;
+
+ &:hover,&:focus {
+ color: $menuHoverColor;
+ text-decoration: none;
+ background-color: $menuHoverBackground;
+ border: none;
+ outline: none;
+ }
+ }
+ &.red-ui-menu-compact {
+ font-size: 12px;
+ li a {
+ line-height: 16px;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
index c95fecad6..4e0aca45b 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss
@@ -304,9 +304,6 @@ button.red-ui-button-small
&:first-child {
padding: 20px 20px 0;
}
- &:last-child {
- padding-bottom: 20px;
- }
}
}
.red-ui-editor-type-expression-tab-content {
@@ -411,6 +408,133 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
}
}
+.red-ui-group-layout-picker {
+ padding: 5px;
+ background: $secondary-background;
+}
+.red-ui-group-layout-picker-cell-text {
+ position: absolute;
+ width: 14px;
+ height: 2px;
+ border-top: 2px solid $secondary-text-color;
+ border-bottom: 2px solid $secondary-text-color;
+ margin: 2px;
+
+ &.red-ui-group-layout-text-pos-nw { top: 0; left: 0; }
+ &.red-ui-group-layout-text-pos-n { top: 0; left: calc(50% - 9px); }
+ &.red-ui-group-layout-text-pos-ne { top: 0; right: 0; }
+ &.red-ui-group-layout-text-pos-sw { bottom: 0; left: 0; }
+ &.red-ui-group-layout-text-pos-s { bottom: 0; left: calc(50% - 9px); }
+ &.red-ui-group-layout-text-pos-se { bottom: 0; right: 0; }
+ &.red-ui-group-layout-text-pos- {
+ width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ margin: 0;
+ background-color: #FFF;
+ background-size: 100% 100%;
+ background-position: 0 0, 50% 50%;
+ background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent);
+ border: none;
+ }
+}
+
+.red-ui-group-layout-picker button.red-ui-search-result-node {
+ float: none;
+ position: relative;
+ padding: 0;
+ margin: 5px;
+ width: 32px;
+ height: 27px;
+}
+
+button.red-ui-group-layout-picker-none {
+ width: 100%;
+}
+
+.red-ui-color-picker {
+ input[type="text"] {
+ border-radius:0;
+ width: 100%;
+ margin-bottom: 0;
+ border: none;
+ border-bottom: 1px solid $form-input-border-color;
+ }
+ small {
+ color: $secondary-text-color;
+ margin-left: 5px;
+ margin-right: 4px;
+ display: inline-block;
+ min-width: 35px;
+ text-align: right;
+ }
+ background: $primary-background;
+}
+.red-ui-editor-node-appearance-button {
+ .red-ui-search-result-node {
+ overflow: hidden
+ }
+}
+.red-ui-color-picker-cell {
+ padding: 0;
+ border-style: solid;
+ border-width: 1px;
+ border-color: $secondary-border-color;
+}
+.red-ui-color-picker-swatch {
+ position: absolute;
+ top:-1px;right:-1px;left:-1px;bottom:-1px;
+ border-radius: 4px;
+}
+
+.red-ui-color-picker-cell-none {
+ height: 100%;
+ background-color: #FFF;
+ background-size: 100% 100%;
+ background-position: 0 0, 50% 50%;
+ background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent)
+}
+.red-ui-search-result-node .red-ui-color-picker-cell-none {
+ border-radius: 4px;
+ background-size: 50% 50%;
+ background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
+}
+
+.red-ui-color-picker-opacity-slider {
+ position:relative;
+ vertical-align: middle;
+ display: inline-block;
+ width: calc(100% - 50px);
+ height: 14px;
+ margin: 6px 3px 8px;
+ box-sizing: border-box;
+ background-color: white;
+ background-image:
+ linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 25%),
+ linear-gradient(-45deg, #eee 25%, transparent 25%, transparent 75%, #eee 25%);
+ background-size: 6px 6px;
+}
+.red-ui-color-picker-opacity-slider-overlay {
+ position: absolute;
+ top:0;right:0;left:0;bottom:0;
+ background-image:linear-gradient(90deg, transparent 0%, #f00 100%);
+ background-size: 100% 100%;
+ border: 1px solid $primary-border-color;
+}
+
+div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
+ z-Index: 10;
+ top: -4px;
+ cursor: pointer;
+ min-width: 0;
+ width: 10px;
+ height: 22px;
+ padding: 0;
+ border: 1px solid $primary-border-color;
+ border-radius: 1px;
+ background: $secondary-background;
+ box-sizing: border-box;
+}
.red-ui-icon-picker {
select {
box-sizing: border-box;
@@ -591,6 +715,9 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
button.red-ui-toggleButton.toggle {
text-align: left;
+ i {
+ min-width: 15px;
+ }
}
@@ -704,8 +831,18 @@ span.red-ui-editor-subflow-env-lang-icon {
right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
-
}
+
+.red-ui-editor-subflow-env-input-type {
+ background: $secondary-background;
+ height: 100%;
+ box-sizing: border-box;
+}
+.red-ui-editor-subflow-env-input-type-placeholder {
+ color: $tertiary-text-color;
+ padding-left: 4px;
+}
+
// .red-ui-editor-subflow-ui-grid {
// width: 100%;
// .red-ui-editableList-container {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
index d92d1e964..0d41e43f6 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss
@@ -35,13 +35,21 @@
pointer-events: none;
-webkit-touch-callout: none;
@include disable-selection;
+
+ .red-ui-flow-node-label-text {
+ dominant-baseline: middle;
+ }
+
+ &.red-ui-flow-node-label-right .red-ui-flow-node-label-text {
+ text-anchor: end;
+ }
}
.red-ui-flow-port-label {
stroke-width: 0;
fill: $secondary-text-color;
font-size: 16px;
- alignment-baseline: middle;
+ dominant-baseline: middle;
text-anchor: middle;
pointer-events: none;
-webkit-touch-callout: none;
@@ -71,6 +79,48 @@
}
}
+.red-ui-flow-group {
+ &.red-ui-flow-group-hovered {
+ .red-ui-flow-group-outline-select {
+ stroke-opacity: 0.8 !important;
+ stroke-dasharray: 10 4 !important;
+ }
+ }
+ &.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) {
+ .red-ui-flow-group-outline-select {
+ stroke: $link-link-color;
+ }
+ }
+}
+
+.red-ui-flow-group-outline {
+ fill: none;
+ stroke: $node-selected-color;
+ stroke-opacity: 0;
+ stroke-width: 12;
+ pointer-events: stroke;
+}
+.red-ui-flow-group-outline-select {
+ fill: none;
+ stroke: $node-selected-color;
+ pointer-events: stroke;
+ stroke-opacity: 0;
+ stroke-width: 3;
+}
+.red-ui-flow-group-body {
+ pointer-events: none;
+ fill: $group-default-fill;
+ fill-opacity: $group-default-fill-opacity;
+ stroke-width: 2;
+ stroke: $group-default-stroke;
+ stroke-opacity: $group-default-stroke-opacity;
+}
+.red-ui-flow-group-label {
+ @include disable-selection;
+}
+
+
+
.red-ui-flow-node-unknown {
stroke-dasharray:10,4;
stroke: $node-border-unknown;
@@ -103,6 +153,15 @@
.red-ui-flow-node-button {
fill: inherit;
+ &.red-ui-flow-node-button-disabled {
+ opacity: 0.4;
+ .red-ui-flow-node-button-button {
+ cursor: default;
+ }
+ }
+}
+.red-ui-flow-node-button-button {
+ cursor: pointer;
}
.red-ui-flow-node-button-background {
fill: $node-background-placeholder;
@@ -166,6 +225,9 @@ g.red-ui-flow-node-selected {
fill-opacity: 1;
stroke-dasharray: none;
}
+ .red-ui-flow-group, .red-ui-flow-group-body {
+ stroke-dasharray: 8, 3;
+ }
}
.red-ui-flow-node-disabled {
&.red-ui-flow-node, .red-ui-flow-node {
@@ -248,6 +310,7 @@ g.red-ui-flow-node-selected {
.red-ui-flow-link-outline {
stroke: $view-background;
+ stroke-opacity: 0.4;
stroke-width: 5;
cursor: crosshair;
fill: none;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
index 60014b2e6..5cff53f44 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss
@@ -37,7 +37,7 @@
border-radius: 4px;
font-family: $monospace-font !important;
font-size: 13px !important;
- height: 300px;
+ height: 100%;
line-height: 1.3em;
padding: 6px 10px;
background: $clipboard-textarea-background;
@@ -62,6 +62,7 @@
background: $form-input-background;
&>div {
height: 100%;
+ box-sizing: border-box;
}
}
.red-ui-clipboard-dialog-box {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
index ea4b06c52..922a31e33 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss
@@ -186,6 +186,21 @@
background-size: contain;
background-repeat: no-repeat;
}
+.red-ui-search-result-node {
+ &.red-ui-palette-icon-flow,
+ &.red-ui-palette-icon-group,
+ &.red-ui-palette-icon-selection {
+ background: none;
+ border-color: transparent;
+ .red-ui-palette-icon-container {
+ background: none;
+ }
+ .red-ui-palette-icon-fa {
+ color: $secondary-text-color;
+ font-size: 18px;
+ }
+ }
+}
.red-ui-palette-icon-fa {
color: white;
position: absolute;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
index 9f99db5d4..455aab891 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss
@@ -22,9 +22,19 @@
// border: 1px solid red;
box-sizing: border-box;
}
+ display: flex;
+ flex-direction: column;
+
+ >.red-ui-panel:first-child {
+ flex: 0 0 auto;
+ }
+ >.red-ui-panel:last-child {
+ flex: 1 1 auto;
+ }
}
.red-ui-panels-separator {
+ flex: 0 0 auto;
border-top: 1px solid $secondary-border-color;
border-bottom: 1px solid $secondary-border-color;
height: 7px;
@@ -37,10 +47,13 @@
.red-ui-panel {
overflow: auto;
height: calc(50% - 4px);
+ position: relative;
}
.red-ui-panels.red-ui-panels-horizontal {
height: 100%;
+ flex-direction: row;
+
&>.red-ui-panel {
vertical-align: top;
display: inline-block;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
index 95097a30e..872f32024 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss
@@ -150,6 +150,16 @@
.red-ui-popover a.red-ui-button,
.red-ui-popover button.red-ui-button {
+ &:not(.primary) {
+ border-color: $popover-button-border-color;
+ background: $popover-background;
+ color: $popover-color !important;
+ }
+ &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
+ border-color: $popover-button-border-color-hover;
+ }
+
+
&.primary {
border-color: $popover-button-border-color;
}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index 9b1005f22..e42125c23 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -18,7 +18,12 @@
.red-ui-editableList-container {
padding: 0px;
}
-
+ padding: 0;
+ .red-ui-projects-dialog-box {
+ box-sizing: border-box;
+ overflow-y: auto;
+ padding: 25px 25px 10px 25px;
+ }
}
#red-ui-project-settings-tab-settings {
overflow-y: scroll;
@@ -99,6 +104,7 @@
.red-ui-projects-dialog-screen-create {
min-height: 500px;
button.red-ui-projects-dialog-screen-create-type {
+ position: relative;
height: auto;
padding: 10px;
}
@@ -169,9 +175,14 @@
.red-ui-projects-dialog-project-list-container {
border: 1px solid $secondary-border-color;
border-radius: 2px;
+ display: flex;
+ flex-direction: column;
+ .red-ui-search-container {
+ flex-grow: 0;
+ }
}
.red-ui-projects-dialog-project-list-inner-container {
- height: 300px;
+ flex-grow: 1 ;
overflow-y: scroll;
position:relative;
.red-ui-editableList-border {
@@ -254,6 +265,29 @@
}
}
}
+.red-ui-projects-dialog-project-list-entry-delete-confirm {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 100%;
+ width: 1000px;
+ overflow: hidden;
+ padding: 5px 20px;
+ background: $secondary-background;
+ transition: left 0.4s;
+ white-space: nowrap;
+ > span {
+ line-height: 40px;
+ }
+ button {
+ margin-left: 20px;
+ }
+}
+
+.red-ui-projects-dialog-screen-create-type {
+ position: relative;
+}
.red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
color: $secondary-text-color-active !important;
}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
index 0ec8b6525..b2710dfad 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss
@@ -24,6 +24,17 @@
top: 0px;
border: 1px solid $primary-border-color;
box-shadow: 0 0 10px $shadow;
+ background: $secondary-background;
+
+ .red-ui-searchBox-container {
+ display: inline-block;
+ margin-right: 6px;
+ width: 100%;
+ }
+
+ &:not(.red-ui-type-search) .red-ui-searchBox-container {
+ width: calc(100% - 30px);
+ }
}
.red-ui-type-search {
@@ -39,6 +50,7 @@
border: 1px dashed $primary-border-color;
border-bottom: none;
padding: 0;
+ width: 100%;
}
.red-ui-search-results-container {
display: none;
@@ -87,6 +99,8 @@
}
.red-ui-palette-icon {
width: 15px;
+ position:relative;
+ left: -1px;
}
.red-ui-search-result-description {
margin-left:28px;
@@ -153,7 +167,7 @@
width: 30px;
float:left;
height: 25px;
- border-radius: 5px;
+ border-radius: 3px;
border: 1px solid $node-border;
background-position: 5% 50%;
background-repeat: no-repeat;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style.scss b/packages/node_modules/@node-red/editor-client/src/sass/style.scss
index 088e5c1b8..ca572ea46 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/style.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/style.scss
@@ -42,6 +42,7 @@
@import "tab-config";
@import "tab-context";
@import "tab-info";
+@import "tab-help";
@import "popover";
@import "flow";
@import "palette-editor";
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
index f88cbfd73..787669fd7 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
@@ -20,6 +20,10 @@
height: 100%;
overflow-y:auto;
@include disable-selection;
+
+ &:focus {
+ outline: none;
+ }
}
ul.red-ui-sidebar-node-config-list {
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss
new file mode 100644
index 000000000..fe4f9fb84
--- /dev/null
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss
@@ -0,0 +1,27 @@
+.red-ui-sidebar-help-stack {
+ // height: calc(100% - 39px);
+}
+.red-ui-help-search {
+ border-bottom: 1px solid $secondary-border-color;
+}
+
+.red-ui-sidebar-help-toc {
+ .red-ui-treeList-label {
+ font-size: 13px;
+ padding: 2px 0;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+}
+#red-ui-sidebar-help-show-toc {
+ i.fa-angle-right {
+ transition: all 0.2s ease-in-out;
+ }
+ &.selected {
+ i.fa-angle-right {
+ transform: rotate(90deg);
+ }
+ }
+
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index bc72f7532..d401e0c70 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -14,9 +14,25 @@
* limitations under the License.
**/
+.red-ui-sidebar-info {
+ height: 100%;
+}
.red-ui-sidebar-info hr {
margin: 10px 0;
}
+.red-ui-info-header {
+ padding-left: 9px;
+ line-height: 21px;
+ cursor: default;
+ > * {
+ vertical-align: middle
+ }
+ > span {
+ display: inline-block;
+ margin-left: 5px;
+ }
+ border-bottom: 1px solid $secondary-border-color;
+}
table.red-ui-info-table {
font-size: 14px;
margin: 0 0 10px;
@@ -125,6 +141,9 @@ div.red-ui-info-table {
font-size: 1.296em;
line-height: 1.3em;
margin: 8px auto;
+ &.red-ui-help-title {
+ border-bottom: 1px solid $tertiary-border-color;
+ }
}
h2 {
font-weight: 500;
@@ -214,12 +233,13 @@ div.red-ui-info-table {
}
.red-ui-sidebar-info-stack {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- overflow-y: scroll;
+ height: 100%;
+ // position: absolute;
+ // top: 0;
+ // bottom: 0;
+ // left: 0;
+ // right: 0;
+ // overflow-y: scroll;
}
.red-ui-help-tips {
display: none;
@@ -227,20 +247,23 @@ div.red-ui-info-table {
left:0;
right:0;
bottom: 0;
- height: 150px;
+ height: 0;
+ transition: height 0.2s, padding 0.2s;
box-sizing: border-box;
border-top: 1px solid $secondary-border-color;
background-color: $secondary-background;
- padding: 20px;
+ padding: 0;
box-shadow: 0 5px 20px 0px $shadow;
overflow-y: auto;
}
.red-ui-sidebar-info.show-tips {
.red-ui-sidebar-info-stack {
- bottom: 150px;
+ height: calc(100% - 150px);
}
.red-ui-help-tips {
display: block;
+ height: 150px;
+ padding: 20px;
}
}
@@ -279,3 +302,208 @@ div.red-ui-info-table {
border-radius: 4px;
padding: 2px 4px 2px;
}
+
+.red-ui-info-outline,.red-ui-sidebar-help-toc {
+ display: flex;
+ flex-direction: column;
+
+ .red-ui-treeList {
+ flex-grow: 1;
+ position: relative;
+ }
+ .red-ui-treeList-container {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ }
+
+ .red-ui-treeList-container,.red-ui-editableList-border {
+ border: none;
+ border-radius: 0;
+ }
+ .red-ui-treeList-label {
+ font-size: 13px;
+ padding: 2px 0;
+ overflow: hidden;
+ }
+ .red-ui-info-outline-project {
+ border-bottom: 1px solid $secondary-border-color;
+ }
+
+ .red-ui-info-outline-item {
+ display: inline-block;
+ padding: 0;
+ font-size: 13px;
+ border: none;
+ .red-ui-palette-icon-fa {
+ position: relative;
+ top: 1px;
+ left: 0px;
+ }
+ &:hover {
+ background: inherit
+ }
+
+ &.red-ui-info-outline-item-flow {
+ .red-ui-search-result-description {
+ margin-left: 4px;
+ }
+ }
+ &.red-ui-info-outline-item-group .red-ui-search-result-node {
+ background: none;
+ border-color: transparent;
+ .red-ui-palette-icon-container {
+ background: none;
+ }
+ .red-ui-palette-icon-fa {
+ color: $secondary-text-color;
+ font-size: 18px;
+ }
+ }
+ &.red-ui-info-outline-item-empty {
+ font-style: italic;
+ color: $form-placeholder-color;
+ }
+ }
+
+ .red-ui-search-result-node {
+ width: 24px;
+ height: 20px;
+ margin-top: 1px;
+ }
+
+ .red-ui-palette-icon-container {
+ width: 24px;
+ }
+ .red-ui-palette-icon {
+ width: 20px;
+ }
+ .red-ui-search-result-description {
+ margin-left: 32px;
+ line-height: 22px;
+ white-space: nowrap;
+ }
+ .red-ui-search-result-node-label {
+ color: $secondary-text-color;
+ }
+}
+.red-ui-info-outline-item-control-spacer {
+ display: inline-block;
+ width: 23px;
+}
+.red-ui-info-outline-gutter {
+ display:none;
+ button {
+ position: absolute;
+ top: 1px;
+ left: 2px;
+ }
+ .red-ui-treeList-label:hover & {
+ display: inline;
+ }
+}
+.red-ui-info-outline-item-controls {
+ position: absolute;
+ top:0;
+ bottom: 0;
+ right: 0px;
+ padding: 2px 3px 0 1px;
+ text-align: right;
+ background: $list-item-background;
+
+ .red-ui-treeList-label:hover & {
+ background: $list-item-background-hover;
+ }
+ .red-ui-treeList-label.selected & {
+ background: $list-item-background-selected;
+ }
+
+
+ &.red-ui-info-outline-item-hover-controls button {
+ min-width: 23px;
+ }
+
+ .red-ui-treeList-label:not(:hover) &.red-ui-info-outline-item-hover-controls {
+ button {
+ border: none;
+ background: none;
+ }
+ }
+ .red-ui-info-outline-item-control-reveal,
+ .red-ui-info-outline-item-control-action {
+ display: none;
+ }
+ .red-ui-treeList-label:hover & {
+ .red-ui-info-outline-item-control-reveal,
+ .red-ui-info-outline-item-control-action {
+ display: inline-block;
+ }
+ }
+
+ .fa-ban {
+ display: none;
+ }
+ .red-ui-info-outline-item.red-ui-info-outline-item-disabled & {
+ .fa-ban {
+ display: inline-block;
+ }
+ .fa-circle-thin {
+ display: none;
+ }
+ }
+ button {
+ margin-right: 3px
+ }
+}
+.red-ui-info-outline-item-disabled {
+ .red-ui-search-result-node {
+ opacity: 0.4;
+ }
+ .red-ui-info-outline-item-label {
+ font-style: italic;
+ color: $secondary-text-color-disabled;
+ }
+ .red-ui-icons-flow {
+ opacity: 0.4;
+ }
+}
+
+
+
+.red-ui-icons {
+ display: inline-block;
+ width: 18px;
+ &:before {
+ white-space: pre;
+ content: ' '
+ }
+
+}
+
+.red-ui-icons-flow {
+ background-image: url('images/subflow_tab.svg');
+ background-repeat: no-repeat;
+ background-size: contain;
+ filter: brightness(2.5);
+}
+
+.red-ui-info-toolbar {
+ min-height: 39px;
+ height: 39px;
+ box-sizing: border-box;
+ text-align: left;
+ // padding-left: 9px;
+ // box-sizing: border-box;
+ // background: $palette-header-background;
+ // border-bottom: 1px solid $secondary-border-color;
+
+ .red-ui-searchBox-container {
+ position: absolute;
+ top: 6px;
+ right: 8px;
+ width: calc(100% - 130px);
+ max-width: 250px;
+ background: $palette-header-background;
+ }
+
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
index d0cd631fc..b925e5212 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss
@@ -18,23 +18,32 @@
.red-ui-searchBox-container {
position: relative;
i {
+ position: absolute;
+ top: 9px;
font-size: 10px;
color: $secondary-text-color;
}
i.fa-search {
- position: absolute;
pointer-events: none;
left: 8px;
- top: 9px;
+ }
+ i.fa-caret-down {
+ position: absolute;
+ right: 6px;
+ font-size: 12px;
}
i.fa-times {
position: absolute;
- right: 5px;
- top: 9px;
+ right: 4px;
}
+
form.red-ui-searchBox-form {
margin: 0;
}
+ a.red-ui-searchBox-opts:hover {
+ color: $workspace-button-color-hover;
+ background: $workspace-button-background-hover;
+ }
input.red-ui-searchBox-input {
border-radius: 0;
border: none;
@@ -57,9 +66,12 @@
right: 0;
top: 0;
bottom: 0;
- width: 20px;
+ width: 16px;
+ }
+ a.red-ui-searchBox-clear {
display: none;
}
+
.red-ui-searchBox-resultCount {
position: absolute;
right: 18px;
@@ -70,4 +82,36 @@
font-size: 9px;
border-radius: 4px;
}
+ &.red-ui-searchBox-has-options {
+ a.red-ui-searchBox-clear {
+ right: 16px;
+ }
+ .red-ui-searchBox-resultCount {
+ right: 33px;
+ }
+ input.red-ui-searchBox-input {
+ padding-right: 33px;
+ }
+ }
}
+.red-ui-searchBox-compact {
+
+ input:focus.red-ui-searchBox-input {
+ outline: 1px solid $form-input-focus-color;
+ }
+
+
+ input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input {
+ border: 1px solid $secondary-border-color;
+ border-radius: 3px;
+ font-size: 12px;
+ height: 26px;
+ }
+ i.fa-times,i.fa-search, i.fa-caret-down {
+ top: 7px;
+ }
+ .red-ui-searchBox-resultCount {
+ top: 3px;
+ padding: 0 6px;
+ }
+}
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
index 704ca10d6..ec865b116 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss
@@ -51,7 +51,10 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-
+ .red-ui-typedInput-value-label-inactive {
+ background: $secondary-background-disabled;
+ color: $secondary-text-color-disabled;
+ }
}
}
.red-ui-typedInput-options {
@@ -117,7 +120,7 @@ button.red-ui-typedInput-option-trigger
}
&.disabled {
cursor: default;
- i.red-ui-typedInput-icon {
+ > i.red-ui-typedInput-icon {
color: $secondary-text-color-disabled;
}
}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
index f6255eacf..2adfb89ba 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss
@@ -112,7 +112,7 @@
position: absolute;
bottom: 0;
right:0;
- zIndex: 101;
+ z-index: 101;
border-left: 1px solid $primary-border-color;
border-top: 1px solid $primary-border-color;
background: $view-navigator-background;
@@ -122,7 +122,7 @@
stroke-dasharray: 5,5;
pointer-events: none;
stroke: $secondary-border-color;
- strokeWidth: 1;
+ stroke-width: 1;
fill: $view-background;
}
@@ -172,3 +172,44 @@ button.red-ui-footer-button-toggle {
margin-right: 0;
}
}
+
+
+#red-ui-loading-progress {
+ position: absolute;
+ background: $primary-background;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ z-index: 200;
+ & > div {
+ position: absolute;
+ top: 30%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 300px;
+ height:80px;
+ text-align: center;
+ color: $secondary-text-color;
+
+ }
+}
+.red-ui-loading-bar {
+ box-sizing: border-box;
+ width: 300px;
+ height: 30px;
+ border: 2px solid $primary-border-color;
+ border-radius: 4px;
+
+ > span {
+ display: block;
+ height: 100%;
+ background: $secondary-border-color;
+ transition: width 0.2s;
+ width: 10%;
+ }
+}
+.red-ui-loading-bar-label {
+ font-size: 13px;
+ margin-bottom: 2px;
+}
diff --git a/packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js b/packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js
index 49a02c206..3d1af605c 100644
--- a/packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js
+++ b/packages/node_modules/@node-red/editor-client/src/vendor/jsonata/formatter.js
@@ -191,6 +191,7 @@
'$merge':{ args:[ 'array' ]},
'$millis':{ args:[ ]},
'$min':{ args:[ 'array' ]},
+ '$moment':{ args:[ ]},
'$not':{ args:[ 'arg' ]},
'$now':{ args:[ ]},
'$number':{ args:[ 'arg' ]},
diff --git a/packages/node_modules/@node-red/nodes/core/common/20-inject.html b/packages/node_modules/@node-red/nodes/core/common/20-inject.html
index 87ec3f86b..b5ba345bd 100644
--- a/packages/node_modules/@node-red/nodes/core/common/20-inject.html
+++ b/packages/node_modules/@node-red/nodes/core/common/20-inject.html
@@ -14,16 +14,14 @@
limitations under the License.
-->
-
diff --git a/packages/node_modules/@node-red/nodes/core/common/20-inject.js b/packages/node_modules/@node-red/nodes/core/common/20-inject.js
index c0d9e0c2f..54715e131 100644
--- a/packages/node_modules/@node-red/nodes/core/common/20-inject.js
+++ b/packages/node_modules/@node-red/nodes/core/common/20-inject.js
@@ -20,9 +20,32 @@ module.exports = function(RED) {
function InjectNode(n) {
RED.nodes.createNode(this,n);
- this.topic = n.topic;
- this.payload = n.payload;
- this.payloadType = n.payloadType;
+
+ /* Handle legacy */
+ if(!Array.isArray(n.props)){
+ n.props = [];
+ n.props.push({
+ p:'payload',
+ v:n.payload,
+ vt:n.payloadType
+ });
+ n.props.push({
+ p:'topic',
+ v:n.topic,
+ vt:'str'
+ });
+ } else {
+ for (var i=0,l=n.props.length; i 2147483) {
node.error(RED._("inject.errors.toolong", this));
delete node.repeat;
}
node.repeaterSetup = function () {
- if (this.repeat && !isNaN(this.repeat) && this.repeat > 0) {
- this.repeat = this.repeat * 1000;
- if (RED.settings.verbose) {
- this.log(RED._("inject.repeat", this));
+ if (this.repeat && !isNaN(this.repeat) && this.repeat > 0) {
+ this.repeat = this.repeat * 1000;
+ if (RED.settings.verbose) {
+ this.log(RED._("inject.repeat", this));
+ }
+ this.interval_id = setInterval(function() {
+ node.emit("input", {});
+ }, this.repeat);
+ } else if (this.crontab) {
+ if (RED.settings.verbose) {
+ this.log(RED._("inject.crontab", this));
+ }
+ this.cronjob = new cron.CronJob(this.crontab, function() { node.emit("input", {}); }, null, true);
}
- this.interval_id = setInterval(function() {
- node.emit("input", {});
- }, this.repeat);
- } else if (this.crontab) {
- if (RED.settings.verbose) {
- this.log(RED._("inject.crontab", this));
- }
- this.cronjob = new cron.CronJob(this.crontab, function() { node.emit("input", {}); }, null, true);
- }
};
if (this.once) {
this.onceTimeout = setTimeout( function() {
- node.emit("input",{});
- node.repeaterSetup();
+ node.emit("input",{});
+ node.repeaterSetup();
}, this.onceDelay);
} else {
- node.repeaterSetup();
+ node.repeaterSetup();
}
- this.on("input",function(msg) {
- msg.topic = this.topic;
- if (this.payloadType !== 'flow' && this.payloadType !== 'global') {
- try {
- if ( (this.payloadType == null && this.payload === "") || this.payloadType === "date") {
- msg.payload = Date.now();
- } else if (this.payloadType == null) {
- msg.payload = this.payload;
- } else if (this.payloadType === 'none') {
- msg.payload = "";
- } else {
- msg.payload = RED.util.evaluateNodeProperty(this.payload,this.payloadType,this,msg);
- }
- this.send(msg);
- msg = null;
- } catch(err) {
- this.error(err,msg);
- }
- } else {
- RED.util.evaluateNodeProperty(this.payload,this.payloadType,this,msg, function(err,res) {
- if (err) {
- node.error(err,msg);
- } else {
- msg.payload = res;
- node.send(msg);
- }
+ this.on("input", function(msg) {
+ var errors = [];
- });
+ this.props.forEach(p => {
+ var property = p.p;
+ var value = p.v ? p.v : '';
+ var valueType = p.vt ? p.vt : 'str';
+
+ if (!property) return;
+
+ if (valueType === "jsonata") {
+ if (p.exp) {
+ try {
+ var val = RED.util.evaluateJSONataExpression(p.exp, msg);
+ RED.util.setMessageProperty(msg, property, val, true);
+ }
+ catch (err) {
+ errors.push(err.message);
+ }
+ }
+ return;
+ }
+ try {
+ RED.util.setMessageProperty(msg,property,RED.util.evaluateNodeProperty(value, valueType, this, msg),true);
+ } catch (err) {
+ errors.push(err.toString());
+ }
+ });
+
+ if (errors.length) {
+ node.error(errors.join('; '), msg);
+ } else {
+ node.send(msg);
}
});
}
diff --git a/packages/node_modules/@node-red/nodes/core/common/21-debug.html b/packages/node_modules/@node-red/nodes/core/common/21-debug.html
index 5e2f3ba49..d12279c74 100644
--- a/packages/node_modules/@node-red/nodes/core/common/21-debug.html
+++ b/packages/node_modules/@node-red/nodes/core/common/21-debug.html
@@ -1,30 +1,35 @@
-
-
@@ -47,6 +49,24 @@
});
var candidateNodes = RED.nodes.filterNodes({type:targetType});
+ var search = $("#node-input-link-target-filter").searchBox({
+ style: "compact",
+ delay: 300,
+ change: function() {
+ var val = $(this).val().trim().toLowerCase();
+ if (val === "") {
+ treeList.treeList("filter", null);
+ search.searchBox("count","");
+ } else {
+ var count = treeList.treeList("filter", function(item) {
+ return item.label.toLowerCase().indexOf(val) > -1 || (item.node && item.node.type.toLowerCase().indexOf(val) > -1)
+ });
+ search.searchBox("count",count+" / "+candidateNodes.length);
+ }
+ }
+ });
+
+
var flows = [];
var flowMap = {};
@@ -83,7 +103,8 @@
id: n.id,
node: n,
label: n.name||n.id,
- selected: isChecked
+ selected: isChecked,
+ checkbox: true
})
}
});
diff --git a/packages/node_modules/@node-red/nodes/core/common/90-comment.html b/packages/node_modules/@node-red/nodes/core/common/90-comment.html
index 76c4547c0..cca7cd51d 100644
--- a/packages/node_modules/@node-red/nodes/core/common/90-comment.html
+++ b/packages/node_modules/@node-red/nodes/core/common/90-comment.html
@@ -1,5 +1,5 @@
-
diff --git a/packages/node_modules/@node-red/nodes/core/function/10-function.html b/packages/node_modules/@node-red/nodes/core/function/10-function.html
index 9202d96ba..f0e5c7d68 100644
--- a/packages/node_modules/@node-red/nodes/core/function/10-function.html
+++ b/packages/node_modules/@node-red/nodes/core/function/10-function.html
@@ -1,22 +1,57 @@
-
diff --git a/packages/node_modules/@node-red/nodes/core/function/10-function.js b/packages/node_modules/@node-red/nodes/core/function/10-function.js
index 65a1b4a61..a876ed741 100644
--- a/packages/node_modules/@node-red/nodes/core/function/10-function.js
+++ b/packages/node_modules/@node-red/nodes/core/function/10-function.js
@@ -57,22 +57,55 @@ module.exports = function(RED) {
}
}
+ function createVMOpt(node, kind) {
+ var opt = {
+ filename: 'Function node'+kind+':'+node.id+(node.name?' ['+node.name+']':''), // filename for stack traces
+ displayErrors: true
+ // Using the following options causes node 4/6 to not include the line number
+ // in the stack output. So don't use them.
+ // lineOffset: -11, // line number offset to be used for stack traces
+ // columnOffset: 0, // column number offset to be used for stack traces
+ };
+ return opt;
+ }
+
+ function updateErrorInfo(err) {
+ if (err.stack) {
+ var stack = err.stack.toString();
+ var m = /^([^:]+):([^:]+):(\d+).*/.exec(stack);
+ if (m) {
+ var line = parseInt(m[3]) -1;
+ var kind = "body:";
+ if (/setup/.exec(m[1])) {
+ kind = "setup:";
+ }
+ if (/cleanup/.exec(m[1])) {
+ kind = "cleanup:";
+ }
+ err.message += " ("+kind+"line "+line+")";
+ }
+ }
+ }
+
function FunctionNode(n) {
RED.nodes.createNode(this,n);
var node = this;
- this.name = n.name;
- this.func = n.func;
+ node.name = n.name;
+ node.func = n.func;
+ node.ini = n.initialize ? n.initialize.trim() : "";
+ node.fin = n.finalize ? n.finalize.trim() : "";
var handleNodeDoneCall = true;
+
// Check to see if the Function appears to call `node.done()`. If so,
// we will assume it is well written and does actually call node.done().
// Otherwise, we will call node.done() after the function returns regardless.
- if (/node\.done\s*\(\s*\)/.test(this.func)) {
+ if (/node\.done\s*\(\s*\)/.test(node.func)) {
handleNodeDoneCall = false;
}
var functionText = "var results = null;"+
- "results = (function(msg,__send__,__done__){ "+
+ "results = (async function(msg,__send__,__done__){ "+
"var __msgid__ = msg._msgid;"+
"var node = {"+
"id:__node__.id,"+
@@ -87,11 +120,13 @@ module.exports = function(RED) {
"send:function(msgs,cloneMsg){ __node__.send(__send__,__msgid__,msgs,cloneMsg);},"+
"done:__done__"+
"};\n"+
- this.func+"\n"+
+ node.func+"\n"+
"})(msg,send,done);";
- this.topic = n.topic;
- this.outstandingTimers = [];
- this.outstandingIntervals = [];
+ var finScript = null;
+ var finOpt = null;
+ node.topic = n.topic;
+ node.outstandingTimers = [];
+ node.outstandingIntervals = [];
var sandbox = {
console:console,
util:util,
@@ -182,12 +217,12 @@ module.exports = function(RED) {
arguments[0] = function() {
sandbox.clearTimeout(timerId);
try {
- func.apply(this,arguments);
+ func.apply(node,arguments);
} catch(err) {
node.error(err,{});
}
};
- timerId = setTimeout.apply(this,arguments);
+ timerId = setTimeout.apply(node,arguments);
node.outstandingTimers.push(timerId);
return timerId;
},
@@ -203,12 +238,12 @@ module.exports = function(RED) {
var timerId;
arguments[0] = function() {
try {
- func.apply(this,arguments);
+ func.apply(node,arguments);
} catch(err) {
node.error(err,{});
}
};
- timerId = setInterval.apply(this,arguments);
+ timerId = setInterval.apply(node,arguments);
node.outstandingIntervals.push(timerId);
return timerId;
},
@@ -226,37 +261,48 @@ module.exports = function(RED) {
sandbox.setTimeout(function(){ resolve(value); }, after);
});
};
+ sandbox.promisify = util.promisify;
}
var context = vm.createContext(sandbox);
try {
- this.script = vm.createScript(functionText, {
- filename: 'Function node:'+this.id+(this.name?' ['+this.name+']':''), // filename for stack traces
- displayErrors: true
- // Using the following options causes node 4/6 to not include the line number
- // in the stack output. So don't use them.
- // lineOffset: -11, // line number offset to be used for stack traces
- // columnOffset: 0, // column number offset to be used for stack traces
- });
- this.on("input", function(msg,send,done) {
- try {
- var start = process.hrtime();
- context.msg = msg;
- context.send = send;
- context.done = done;
+ var iniScript = null;
+ var iniOpt = null;
+ if (node.ini && (node.ini !== "")) {
+ var iniText = "(async function () {\n"+node.ini +"\n})();";
+ iniOpt = createVMOpt(node, " setup");
+ iniScript = new vm.Script(iniText, iniOpt);
+ }
+ node.script = vm.createScript(functionText, createVMOpt(node, ""));
+ if (node.fin && (node.fin !== "")) {
+ var finText = "(function () {\n"+node.fin +"\n})();";
+ finOpt = createVMOpt(node, " cleanup");
+ finScript = new vm.Script(finText, finOpt);
+ }
+ var promise = Promise.resolve();
+ if (iniScript) {
+ promise = iniScript.runInContext(context, iniOpt);
+ }
- this.script.runInContext(context);
- sendResults(this,send,msg._msgid,context.results,false);
+ function processMessage(msg, send, done) {
+ var start = process.hrtime();
+ context.msg = msg;
+ context.send = send;
+ context.done = done;
+
+ node.script.runInContext(context);
+ context.results.then(function(results) {
+ sendResults(node,send,msg._msgid,results,false);
if (handleNodeDoneCall) {
done();
}
var duration = process.hrtime(start);
var converted = Math.floor((duration[0] * 1e9 + duration[1])/10000)/100;
- this.metric("duration", msg, converted);
+ node.metric("duration", msg, converted);
if (process.env.NODE_RED_FUNCTION_TIME) {
- this.status({fill:"yellow",shape:"dot",text:""+converted});
+ node.status({fill:"yellow",shape:"dot",text:""+converted});
}
- } catch(err) {
+ }).catch(err => {
if ((typeof err === "object") && err.hasOwnProperty("stack")) {
//remove unwanted part
var index = err.stack.search(/\n\s*at ContextifyScript.Script.runInContext/);
@@ -294,23 +340,67 @@ module.exports = function(RED) {
else {
done(JSON.stringify(err));
}
+ });
+ }
+
+ const RESOLVING = 0;
+ const RESOLVED = 1;
+ const ERROR = 2;
+ var state = RESOLVING;
+ var messages = [];
+
+ node.on("input", function(msg,send,done) {
+ if(state === RESOLVING) {
+ messages.push({msg:msg, send:send, done:done});
+ }
+ else if(state === RESOLVED) {
+ processMessage(msg, send, done);
}
});
- this.on("close", function() {
+ node.on("close", function() {
+ if (finScript) {
+ try {
+ finScript.runInContext(context, finOpt);
+ }
+ catch (err) {
+ node.error(err);
+ }
+ }
while (node.outstandingTimers.length > 0) {
clearTimeout(node.outstandingTimers.pop());
}
while (node.outstandingIntervals.length > 0) {
clearInterval(node.outstandingIntervals.pop());
}
- this.status({});
+ node.status({});
});
- } catch(err) {
+
+ promise.then(function (v) {
+ var msgs = messages;
+ messages = [];
+ while (msgs.length > 0) {
+ msgs.forEach(function (s) {
+ processMessage(s.msg, s.send, s.done);
+ });
+ msgs = messages;
+ messages = [];
+ }
+ state = RESOLVED;
+ }).catch((error) => {
+ messages = [];
+ state = ERROR;
+ node.error(error);
+ });
+
+ }
+ catch(err) {
// eg SyntaxError - which v8 doesn't include line number information
// so we can't do better than this
- this.error(err);
+ updateErrorInfo(err);
+ node.error(err);
}
}
RED.nodes.registerType("function",FunctionNode);
RED.library.register("functions");
};
+
diff --git a/packages/node_modules/@node-red/nodes/core/function/10-switch.js b/packages/node_modules/@node-red/nodes/core/function/10-switch.js
index 1761853a6..2d91e4b8d 100644
--- a/packages/node_modules/@node-red/nodes/core/function/10-switch.js
+++ b/packages/node_modules/@node-red/nodes/core/function/10-switch.js
@@ -253,7 +253,7 @@ module.exports = function(RED) {
for (var i=0; i
+
@@ -74,6 +82,7 @@
category: 'function',
color:"#E6E0F8",
defaults: {
+ name: {value:""},
op1: {value:"1", validate: RED.validators.typedInput("op1type")},
op2: {value:"0", validate: RED.validators.typedInput("op2type")},
op1type: {value:"val"},
@@ -82,8 +91,9 @@
extend: {value:"false"},
units: {value:"ms"},
reset: {value:""},
- bytopic: {value: "all"},
- name: {value:""}
+ bytopic: {value:"all"},
+ topic: {value:"topic",required:true},
+ outputs: {value:1}
},
inputs:1,
outputs:1,
@@ -103,19 +113,48 @@
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
+ var that = this;
+ if (this.topic === undefined) { $("#node-input-topic").val("topic"); }
+ $("#node-input-topic").typedInput({default:'msg',types:['msg']});
+ $("#node-input-bytopic").on("change", function() {
+ if ($("#node-input-bytopic").val() === "all") {
+ $("#node-stream-topic").hide();
+ } else {
+ $("#node-stream-topic").show();
+ }
+ });
+
+ if (this.outputs == 2) { $("#node-input-second").prop('checked', true) }
+ else { $("#node-input-second").prop('checked', false) }
+
+ $("#node-input-second").change(function() {
+ if ($("#node-input-second").is(":checked")) {
+ $("#node-input-outputs").val(2);
+ }
+ else {
+ $("#node-input-outputs").val(1);
+ }
+ });
$("#node-then-type").on("change", function() {
if ($(this).val() == "block") {
$(".node-type-wait").hide();
$(".node-type-duration").hide();
+ $("#node-second-output").hide();
+ $("#node-input-second").prop('checked', false);
+ $("#node-input-outputs").val(1);
}
else if ($(this).val() == "loop") {
if ($("#node-input-duration").val() == 0) { $("#node-input-duration").val(250); }
$(".node-type-wait").hide();
$(".node-type-duration").show();
+ $("#node-second-output").hide();
+ $("#node-input-second").prop('checked', false);
+ $("#node-input-outputs").val(1);
} else {
if ($("#node-input-duration").val() == 0) { $("#node-input-duration").val(250); }
$(".node-type-wait").show();
$(".node-type-duration").show();
+ $("#node-second-output").show();
}
});
@@ -177,7 +216,7 @@
}
if ($("#node-then-type").val() == "loop") {
$("#node-input-duration").val($("#node-input-duration").val() * -1);
- }
+ }
}
});
diff --git a/packages/node_modules/@node-red/nodes/core/function/89-trigger.js b/packages/node_modules/@node-red/nodes/core/function/89-trigger.js
index 4debeacde..cda1afadf 100644
--- a/packages/node_modules/@node-red/nodes/core/function/89-trigger.js
+++ b/packages/node_modules/@node-red/nodes/core/function/89-trigger.js
@@ -24,6 +24,8 @@ module.exports = function(RED) {
this.op2 = n.op2 || "0";
this.op1type = n.op1type || "str";
this.op2type = n.op2type || "str";
+ this.second = (n.outputs == 2) ? true : false;
+ this.topic = n.topic || "topic";
if (this.op1type === 'val') {
if (this.op1 === 'true' || this.op1 === 'false') {
@@ -111,8 +113,15 @@ module.exports = function(RED) {
processMessageQueue(msg);
});
+ var stat = function() {
+ var l = Object.keys(node.topics).length;
+ if (l === 0) { return {} }
+ else if (l === 1) { return {fill:"blue",shape:"dot"} }
+ else return {fill:"blue",shape:"dot",text:l};
+ }
+
var processMessage = function(msg) {
- var topic = msg.topic || "_none";
+ var topic = RED.util.getMessageProperty(msg,node.topic) || "_none";
var promise;
if (node.bytopic === "all") { topic = "_none"; }
node.topics[topic] = node.topics[topic] || {};
@@ -120,7 +129,7 @@ module.exports = function(RED) {
if (node.loop === true) { clearInterval(node.topics[topic].tout); }
else { clearTimeout(node.topics[topic].tout); }
delete node.topics[topic];
- node.status({});
+ node.status(stat());
}
else {
if (node.op2type === "payl") { npay[topic] = RED.util.cloneMessage(msg); }
@@ -189,27 +198,29 @@ module.exports = function(RED) {
}
promise.then(() => {
if (node.op2type === "payl") {
- node.send(npay[topic]);
+ if (node.second === true) { node.send([null,npay[topic]]); }
+ else { node.send(npay[topic]); }
delete npay[topic];
}
- else {
+ else {
msg2.payload = node.topics[topic].m2;
- node.send(msg2);
+ if (node.second === true) { node.send([null,msg2]); }
+ else { node.send(msg2); }
}
delete node.topics[topic];
- node.status({});
+ node.status(stat());
}).catch(err => {
node.error(err);
});
} else {
delete node.topics[topic];
- node.status({});
+ node.status(stat());
}
}, node.duration);
}
}
- node.status({fill:"blue",shape:"dot",text:" "});
+ node.status(stat());
if (node.op1type !== "nul") { node.send(RED.util.cloneMessage(msg)); }
});
});
@@ -245,13 +256,17 @@ module.exports = function(RED) {
}
}
delete node.topics[topic];
- node.status({});
- node.send(msg2);
+ node.status(stat());
+ if (node.second === true) { node.send([null,msg2]); }
+ else { node.send(msg2); }
}).catch(err => {
node.error(err);
});
}, node.duration);
}
+ // else {
+ // if (node.op2type === "payl") {node.topics[topic].m2 = RED.util.cloneMessage(msg.payload); }
+ // }
}
return Promise.resolve();
}
@@ -264,7 +279,7 @@ module.exports = function(RED) {
delete node.topics[t];
}
}
- node.status({});
+ node.status(stat());
});
}
RED.nodes.registerType("trigger",TriggerNode);
diff --git a/packages/node_modules/@node-red/nodes/core/function/90-exec.html b/packages/node_modules/@node-red/nodes/core/function/90-exec.html
index c6102d397..636117d71 100644
--- a/packages/node_modules/@node-red/nodes/core/function/90-exec.html
+++ b/packages/node_modules/@node-red/nodes/core/function/90-exec.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
-
-
-
-
-
-
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/de/network/06-httpproxy.html b/packages/node_modules/@node-red/nodes/locales/de/network/06-httpproxy.html
index 228da487b..1ece7efe0 100755
--- a/packages/node_modules/@node-red/nodes/locales/de/network/06-httpproxy.html
+++ b/packages/node_modules/@node-red/nodes/locales/de/network/06-httpproxy.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
-
-
-
-
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/de/network/31-tcpin.html b/packages/node_modules/@node-red/nodes/locales/de/network/31-tcpin.html
index 2b22418dc..51ec15c6f 100755
--- a/packages/node_modules/@node-red/nodes/locales/de/network/31-tcpin.html
+++ b/packages/node_modules/@node-red/nodes/locales/de/network/31-tcpin.html
@@ -14,13 +14,13 @@
limitations under the License.
-->
-
-
-
-
-
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/function/90-exec.html b/packages/node_modules/@node-red/nodes/locales/en-US/function/90-exec.html
index 69447bc60..ff515e781 100644
--- a/packages/node_modules/@node-red/nodes/locales/en-US/function/90-exec.html
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/function/90-exec.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/network/06-httpproxy.html b/packages/node_modules/@node-red/nodes/locales/en-US/network/06-httpproxy.html
index b17012e72..12bb3684c 100644
--- a/packages/node_modules/@node-red/nodes/locales/en-US/network/06-httpproxy.html
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/network/06-httpproxy.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
-
-
-
-
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/network/32-udp.html b/packages/node_modules/@node-red/nodes/locales/en-US/network/32-udp.html
index 09e6aef34..666889be6 100644
--- a/packages/node_modules/@node-red/nodes/locales/en-US/network/32-udp.html
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/network/32-udp.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/parsers/70-HTML.html b/packages/node_modules/@node-red/nodes/locales/en-US/parsers/70-HTML.html
index b9231663d..7b081976c 100644
--- a/packages/node_modules/@node-red/nodes/locales/en-US/parsers/70-HTML.html
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/parsers/70-HTML.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/storage/23-watch.html b/packages/node_modules/@node-red/nodes/locales/en-US/storage/23-watch.html
index 4a28cfcab..bc6e4ad31 100644
--- a/packages/node_modules/@node-red/nodes/locales/en-US/storage/23-watch.html
+++ b/packages/node_modules/@node-red/nodes/locales/en-US/storage/23-watch.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/ja/function/90-exec.html b/packages/node_modules/@node-red/nodes/locales/ja/function/90-exec.html
index 7eb75b10a..d034f71e1 100644
--- a/packages/node_modules/@node-red/nodes/locales/ja/function/90-exec.html
+++ b/packages/node_modules/@node-red/nodes/locales/ja/function/90-exec.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
diff --git a/packages/node_modules/@node-red/nodes/locales/ja/network/06-httpproxy.html b/packages/node_modules/@node-red/nodes/locales/ja/network/06-httpproxy.html
index 03beddb8d..24b15aa29 100644
--- a/packages/node_modules/@node-red/nodes/locales/ja/network/06-httpproxy.html
+++ b/packages/node_modules/@node-red/nodes/locales/ja/network/06-httpproxy.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
-
-
-
-
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/ja/network/31-tcpin.html b/packages/node_modules/@node-red/nodes/locales/ja/network/31-tcpin.html
index efe82cbb1..e63c93ae5 100644
--- a/packages/node_modules/@node-red/nodes/locales/ja/network/31-tcpin.html
+++ b/packages/node_modules/@node-red/nodes/locales/ja/network/31-tcpin.html
@@ -14,12 +14,12 @@
limitations under the License.
-->
-
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/ja/network/32-udp.html b/packages/node_modules/@node-red/nodes/locales/ja/network/32-udp.html
index ec07a865e..fffcbcec5 100644
--- a/packages/node_modules/@node-red/nodes/locales/ja/network/32-udp.html
+++ b/packages/node_modules/@node-red/nodes/locales/ja/network/32-udp.html
@@ -14,13 +14,13 @@
limitations under the License.
-->
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/ja/parsers/70-HTML.html b/packages/node_modules/@node-red/nodes/locales/ja/parsers/70-HTML.html
index eb7b00dff..19be36aed 100644
--- a/packages/node_modules/@node-red/nodes/locales/ja/parsers/70-HTML.html
+++ b/packages/node_modules/@node-red/nodes/locales/ja/parsers/70-HTML.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
+
diff --git a/packages/node_modules/@node-red/nodes/locales/ja/storage/23-watch.html b/packages/node_modules/@node-red/nodes/locales/ja/storage/23-watch.html
index 45f658c05..3a4594ccc 100644
--- a/packages/node_modules/@node-red/nodes/locales/ja/storage/23-watch.html
+++ b/packages/node_modules/@node-red/nodes/locales/ja/storage/23-watch.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
diff --git a/packages/node_modules/@node-red/nodes/locales/ko/network/06-httpproxy.html b/packages/node_modules/@node-red/nodes/locales/ko/network/06-httpproxy.html
index 4357c7f2b..cdfccd799 100644
--- a/packages/node_modules/@node-red/nodes/locales/ko/network/06-httpproxy.html
+++ b/packages/node_modules/@node-red/nodes/locales/ko/network/06-httpproxy.html
@@ -14,7 +14,7 @@
limitations under the License.
-->
-
-
-
-
-
-
-
diff --git a/packages/node_modules/@node-red/nodes/locales/ko/network/31-tcpin.html b/packages/node_modules/@node-red/nodes/locales/ko/network/31-tcpin.html
index 1c665bb8d..53c61e679 100644
--- a/packages/node_modules/@node-red/nodes/locales/ko/network/31-tcpin.html
+++ b/packages/node_modules/@node-red/nodes/locales/ko/network/31-tcpin.html
@@ -14,12 +14,12 @@
limitations under the License.
-->
-
-
-
-
-
-
'+
'';
- RED.sidebar.info.set(aboutHeader+RED.utils.renderMarkdown(data));
- RED.sidebar.info.show();
+ RED.sidebar.help.set(aboutHeader+RED.utils.renderMarkdown(data));
});
}
@@ -472,6 +490,14 @@ var RED = (function() {
{id:"menu-item-subflow-create",label:RED._("menu.label.createSubflow"),onselect:"core:create-subflow"},
{id:"menu-item-subflow-convert",label:RED._("menu.label.selectionToSubflow"),disabled:true,onselect:"core:convert-to-subflow"},
]});
+ menuOptions.push({id:"menu-item-group",label:RED._("menu.label.groups"), options: [
+ {id:"menu-item-group-group",label:RED._("menu.label.groupSelection"),disabled:true,onselect:"core:group-selection"},
+ {id:"menu-item-group-ungroup",label:RED._("menu.label.ungroupSelection"),disabled:true,onselect:"core:ungroup-selection"},
+ null,
+ {id:"menu-item-group-merge",label:RED._("menu.label.groupMergeSelection"),disabled:true,onselect:"core:merge-selection-to-group"},
+ {id:"menu-item-group-remove",label:RED._("menu.label.groupRemoveSelection"),disabled:true,onselect:"core:remove-selection-from-group"}
+ ]});
+
menuOptions.push(null);
if (RED.settings.theme('palette.editable') !== false) {
menuOptions.push({id:"menu-item-edit-palette",label:RED._("menu.label.editPalette"),onselect:"core:manage-palette"});
@@ -497,7 +523,6 @@ var RED = (function() {
}
function loadEditor() {
-
RED.workspaces.init();
RED.statusBar.init();
RED.view.init();
@@ -524,6 +549,7 @@ var RED = (function() {
}
RED.subflow.init();
+ RED.group.init();
RED.clipboard.init();
RED.search.init();
RED.actionList.init();
@@ -539,13 +565,14 @@ var RED = (function() {
RED.comms.connect();
$("#red-ui-main-container").show();
- $(".red-ui-header-toolbar").show();
+
RED.actions.add("core:show-about", showAbout);
loadNodeList();
}
+
function buildEditor(options) {
var header = $('').appendTo(options.target);
var logo = $('').appendTo(header);
@@ -560,6 +587,10 @@ var RED = (function() {
'').appendTo(options.target);
$('').appendTo(options.target);
$('').appendTo(options.target);
+
+ loader.init().appendTo("#red-ui-main-container");
+ loader.start("...",0);
+
$.getJSON(options.apiRootUrl+"theme", function(theme) {
if (theme.header) {
if (theme.header.url) {
@@ -592,12 +623,39 @@ var RED = (function() {
options.target.addClass("red-ui-editor");
buildEditor(options);
+
RED.i18n.init(options, function() {
RED.settings.init(options, loadEditor);
})
}
+ var loader = {
+ init: function() {
+ var wrapper = $('').hide();
+ var container = $('