diff --git a/packages/node_modules/@node-red/editor-client/src/js/history.js b/packages/node_modules/@node-red/editor-client/src/js/history.js
index 2b95b35d3..8b9601fa6 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/history.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/history.js
@@ -490,6 +490,13 @@ RED.history = (function() {
}
}
});
+ } else if (i === "color" && ev.node.type === "subflow") {
+ // Handle the Subflow definition color change
+ RED.utils.clearNodeColorCache();
+ const subflowDef = RED.nodes.getType("subflow:" + ev.node.id);
+ if (subflowDef) {
+ subflowDef.color = ev.changes[i] || "#DDAA99";
+ }
}
if (i === "credentials" && ev.changes[i]) {
// Reset - Only want to keep the changes
@@ -556,6 +563,10 @@ RED.history = (function() {
if (node) {
node.changed = n.changed;
node.dirty = true;
+
+ if (ev.changes && ev.changes.hasOwnProperty('color')) {
+ node._colorChanged = true;
+ }
}
});
}
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index ca74b3eff..9266683ad 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
@@ -295,8 +295,8 @@ RED.editor = (function() {
* Called when the node's properties have changed.
* Marks the node as dirty and needing a size check.
* Removes any links to non-existant outputs.
- * @param node - the node that has been updated
- * @param outputMap - (optional) a map of old->new port numbers if wires should be moved
+ * @param {object} node - the node that has been updated
+ * @param {object} [outputMap] - (optional) a map of old->new port numbers if wires should be moved
* @returns {array} the links that were removed due to this update
*/
function updateNodeProperties(node, outputMap) {
@@ -1778,17 +1778,19 @@ RED.editor = (function() {
function showEditSubflowDialog(subflow, defaultTab) {
if (buildingEditDialog) { return }
buildingEditDialog = true;
- var editing_node = subflow;
- var activeEditPanes = [];
+
editStack.push(subflow);
RED.view.state(RED.state.EDITING);
- var trayOptions = {
+
+ let editingNode = subflow;
+ let activeEditPanes = [];
+ const trayOptions = {
title: getEditStackTitle(),
buttons: [
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
- click: function() {
+ click: function () {
RED.tray.close();
}
},
@@ -1796,39 +1798,32 @@ RED.editor = (function() {
id: "node-dialog-ok",
class: "primary",
text: RED._("common.label.done"),
- click: function() {
- var i;
- var editState = {
+ click: function () {
+ const wasDirty = RED.nodes.dirty();
+ const editState = {
changes: {},
changed: false,
outputMap: null
- }
- var wasDirty = RED.nodes.dirty();
+ };
- activeEditPanes.forEach(function(pane) {
+ // Search for changes in edit boxes (panes)
+ // NOTE: no `oneditsave` for Subflow def
+ activeEditPanes.forEach(function (pane) {
if (pane.apply) {
pane.apply.call(pane, editState);
}
- })
+ });
- var newName = $("#subflow-input-name").val();
+ // Search for env changes (not handled in properties pane)
+ const oldEnv = editingNode.env;
+ const newEnv = RED.subflow.exportSubflowTemplateEnv($("#node-input-env-container").editableList("items"));
- if (newName != editing_node.name) {
- editState.changes['name'] = editing_node.name;
- editing_node.name = newName;
- editState.changed = true;
- }
-
-
- var old_env = editing_node.env;
- var new_env = RED.subflow.exportSubflowTemplateEnv($("#node-input-env-container").editableList("items"));
-
- if (new_env && new_env.length > 0) {
- new_env.forEach(function(prop) {
+ if (newEnv && newEnv.length > 0) {
+ newEnv.forEach(function (prop) {
if (prop.type === "cred") {
- editing_node.credentials = editing_node.credentials || {_:{}};
- editing_node.credentials[prop.name] = prop.value;
- editing_node.credentials['has_'+prop.name] = (prop.value !== "");
+ editingNode.credentials = editingNode.credentials || { _: {} };
+ editingNode.credentials[prop.name] = prop.value;
+ editingNode.credentials['has_' + prop.name] = (prop.value !== "");
if (prop.value !== '__PWRD__') {
editState.changed = true;
}
@@ -1837,111 +1832,119 @@ RED.editor = (function() {
});
}
- if (!isSameObj(old_env, new_env)) {
- editState.changes.env = editing_node.env;
- editing_node.env = new_env;
+ if (!isSameObj(oldEnv, newEnv)) {
+ editState.changes.env = oldEnv;
+ editingNode.env = newEnv;
editState.changed = true;
}
-
-
if (editState.changed) {
- var wasChanged = editing_node.changed;
- editing_node.changed = true;
- validateNode(editing_node);
- var subflowInstances = [];
- RED.nodes.eachNode(function(n) {
- if (n.type == "subflow:"+editing_node.id) {
+ const wasChanged = editingNode.changed;
+ const subflowInstances = [];
+
+ // Marks the Subflow has changed and validate it
+ editingNode.changed = true;
+ validateNode(editingNode);
+
+ // Update each Subflow instances
+ RED.nodes.eachNode(function (n) {
+ if (n.type == "subflow:" + editingNode.id) {
subflowInstances.push({
- id:n.id,
- changed:n.changed
- })
- n._def.color = editing_node.color;
+ id: n.id,
+ changed: n.changed
+ });
+
+ if (editState.changes.hasOwnProperty("color")) {
+ // Redraw the node color
+ n._colorChanged = true;
+ }
+
n.changed = true;
n.dirty = true;
updateNodeProperties(n);
validateNode(n);
}
});
- RED.events.emit("subflows:change",editing_node);
- RED.nodes.dirty(true);
- var historyEvent = {
- t:'edit',
- node:editing_node,
- changes:editState.changes,
- dirty:wasDirty,
- changed:wasChanged,
+
+ const historyEvent = {
+ t: 'edit',
+ node: editingNode,
+ changes: editState.changes,
+ dirty: wasDirty,
+ changed: wasChanged,
subflow: {
- instances:subflowInstances
+ instances: subflowInstances
}
};
+ RED.events.emit("subflows:change", editingNode);
RED.history.push(historyEvent);
+ RED.nodes.dirty(true);
}
- editing_node.dirty = true;
+
+ editingNode.dirty = true;
RED.tray.close();
}
}
],
- resize: function(dimensions) {
+ resize: function (dimensions) {
$(".red-ui-tray-content").height(dimensions.height - 50);
- var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
- var size = {width:form.width(),height:form.height()};
- activeEditPanes.forEach(function(pane) {
+ const form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
+ const size = { width: form.width(), height: form.height() };
+ activeEditPanes.forEach(function (pane) {
if (pane.resize) {
pane.resize.call(pane, size);
}
- })
+ });
},
- open: function(tray, done) {
- var trayFooter = tray.find(".red-ui-tray-footer");
- var trayFooterLeft = $("", {
- class: "red-ui-tray-footer-left"
- }).appendTo(trayFooter)
- var trayBody = tray.find('.red-ui-tray-body');
- trayBody.parent().css('overflow','hidden');
+ open: function (tray, done) {
+ const trayBody = tray.find('.red-ui-tray-body');
+ const trayFooter = tray.find(".red-ui-tray-footer");
+ trayBody.parent().css('overflow', 'hidden');
+
+ const trayFooterLeft = $("", { class: "red-ui-tray-footer-left" }).appendTo(trayFooter);
$(' ').appendTo(trayFooterLeft);
- if (editing_node) {
- RED.sidebar.info.refresh(editing_node);
+ if (editingNode) {
+ RED.sidebar.info.refresh(editingNode);
}
- var nodeEditPanes = [
+ const nodeEditPanes = [
'editor-tab-properties',
'editor-tab-subflow-module',
'editor-tab-description',
'editor-tab-appearance'
];
-
- prepareEditDialog(trayBody, nodeEditPanes, subflow, subflow._def, "node-input", defaultTab, function(_activeEditPanes) {
+ prepareEditDialog(trayBody, nodeEditPanes, subflow, subflow._def, "subflow-input", defaultTab, function (_activeEditPanes) {
activeEditPanes = _activeEditPanes;
- $("#subflow-input-name").val(subflow.name);
- RED.text.bidi.prepareInput($("#subflow-input-name"));
trayBody.i18n();
trayFooter.i18n();
buildingEditDialog = false;
done();
});
},
- close: function() {
+ close: function () {
if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
RED.view.state(RED.state.DEFAULT);
}
- RED.sidebar.info.refresh(editing_node);
+
+ RED.sidebar.info.refresh(editingNode);
RED.workspaces.refresh();
- activeEditPanes.forEach(function(pane) {
+ activeEditPanes.forEach(function (pane) {
if (pane.close) {
pane.close.call(pane);
}
- })
+ });
+
editStack.pop();
- editing_node = null;
+ // TODO: useless?
+ editingNode = null;
},
- show: function() {
- }
+ show: function () {}
}
+
RED.tray.show(trayOptions);
}
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
index 88472f97e..5a08a68dc 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js
@@ -26,6 +26,8 @@
if (node._def.category === "config" && nodeType !== "group") {
this.inputClass = "node-config-input";
formStyle = "node-config-dialog-edit-form";
+ } else if (node.type === "subflow") {
+ this.inputClass = "subflow-input";
}
RED.editor.buildEditForm(container,formStyle,nodeType,i18nNamespace,node);
},
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
index 4437f6c40..be17776fa 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js
@@ -562,7 +562,7 @@ RED.palette = (function() {
}
}
- paletteNode.css("backgroundColor", sf.color);
+ paletteNode.css("backgroundColor", RED.utils.getNodeColor("subflow", sf._def));
}
function refreshFilter() {