mirror of https://github.com/node-red/node-red.git
Fix Subflow edit box and color change
GogoVega
parent
1e8f840993
commit
37aacd3e84
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = $("<div/>", {
|
||||
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 = $("<div/>", { class: "red-ui-tray-footer-left" }).appendTo(trayFooter);
|
||||
$('<span style="margin-left: 10px"><i class="fa fa-info-circle"></i> <i id="red-ui-editor-subflow-user-count"></i></span>').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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -562,7 +562,7 @@ RED.palette = (function() {
|
|||
}
|
||||
}
|
||||
|
||||
paletteNode.css("backgroundColor", sf.color);
|
||||
paletteNode.css("backgroundColor", RED.utils.getNodeColor("subflow", sf._def));
|
||||
}
|
||||
|
||||
function refreshFilter() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue