frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Move tab edit dialog into editor and use new edit panes

This commit is contained in:
Nick O'Leary 2021-09-02 14:29:58 +01:00
parent e910f3915d
commit 741fe3dd90
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
6 changed files with 225 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@ -529,7 +529,7 @@ RED.editor = (function() {
done(activeEditPanes);
}
}
if (definition.credentials || /^subflow:/.test(definition.type) || (node.type === "group")) {
if (definition.credentials || /^subflow:/.test(definition.type) || node.type === "group" || node.type === "tab") {
if (node.credentials) {
populateCredentialsInputs(node, definition.credentials, node.credentials, prefix);
completePrepare();
@ -1646,6 +1646,7 @@ RED.editor = (function() {
var nodeEditPanes = [
'editor-tab-properties',
'editor-tab-envProperties',
'editor-tab-description'
];
prepareEditDialog(trayBody, nodeEditPanes, group,group._def,"node-input", null, function(_activeEditPanes) {
@ -1679,6 +1680,137 @@ RED.editor = (function() {
RED.tray.show(trayOptions);
}
function showEditFlowDialog(workspace) {
if (buildingEditDialog) { return }
buildingEditDialog = true;
var activeEditPanes = [];
RED.view.state(RED.state.EDITING);
var trayOptions = {
title: RED._("workspace.editFlow",{name:RED.utils.sanitize(workspace.label)}),
buttons: [
{
id: "node-dialog-delete",
class: 'leftButton'+((RED.workspaces.count() === 1)?" disabled":""),
text: RED._("common.label.delete"), //'<i class="fa fa-trash"></i>',
click: function() {
RED.workspaces.delete(workspace);
RED.tray.close();
}
},
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
RED.tray.close();
}
},
{
id: "node-dialog-ok",
class: "primary",
text: RED._("common.label.done"),
click: function() {
var editState = {
changes: {},
changed: false,
outputMap: null
}
var wasDirty = RED.nodes.dirty();
activeEditPanes.forEach(function(pane) {
if (pane.apply) {
pane.apply.call(pane, workspace, editState);
}
})
var disabled = $("#node-input-disabled").prop("checked");
if (workspace.disabled !== disabled) {
editState.changes.disabled = workspace.disabled;
editState.changed = true;
workspace.disabled = disabled;
}
if (editState.changed) {
var historyEvent = {
t: "edit",
changes: editState.changes,
node: workspace,
dirty: wasDirty
}
workspace.changed = true;
RED.history.push(historyEvent);
RED.nodes.dirty(true);
if (editState.changes.hasOwnProperty('disabled')) {
RED.nodes.eachNode(function(n) {
if (n.z === workspace.id) {
n.dirty = true;
}
});
RED.view.redraw();
}
RED.workspaces.refresh();
RED.events.emit("flows:change",workspace);
}
RED.tray.close();
}
}
],
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) {
if (pane.resize) {
pane.resize.call(pane,editing_node, size);
}
})
},
open: function(tray, done) {
var trayFooter = tray.find(".red-ui-tray-footer");
var trayBody = tray.find('.red-ui-tray-body');
trayBody.parent().css('overflow','hidden');
var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
var nodeEditPanes = [
'editor-tab-flow-properties',
'editor-tab-envProperties'
];
if (!workspace.hasOwnProperty("disabled")) {
workspace.disabled = false;
}
$('<input id="node-input-disabled" type="checkbox">').prop("checked",workspace.disabled).appendTo(trayFooterLeft).toggleButton({
enabledIcon: "fa-circle-thin",
disabledIcon: "fa-ban",
invertState: true
})
prepareEditDialog(trayBody, nodeEditPanes, workspace, {}, "node-input", null, function(_activeEditPanes) {
activeEditPanes = _activeEditPanes;
trayBody.i18n();
trayFooter.i18n();
buildingEditDialog = false;
done();
});
},
close: function() {
if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
RED.view.state(RED.state.DEFAULT);
}
activeEditPanes.forEach(function(pane) {
if (pane.close) {
pane.close.call(pane,editing_node);
}
})
var selection = RED.view.selection();
if (!selection.nodes && !selection.links && workspace.id === RED.workspaces.active()) {
RED.sidebar.info.refresh(workspace);
}
}
}
RED.tray.show(trayOptions);
}
function showTypeEditor(type, options) {
if (customEditTypes.hasOwnProperty(type)) {
if (editStack.length > 0) {
@ -1713,6 +1845,7 @@ RED.editor = (function() {
},
edit: showEditDialog,
editConfig: showEditConfigNodeDialog,
editFlow: showEditFlowDialog,
editSubflow: showEditSubflowDialog,
editGroup: showEditGroupDialog,
editJavaScript: function(options) { showTypeEditor("_js",options) },

5
packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowProperties.js → packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/envVarProperties.js vendored
View File

@ -21,7 +21,10 @@
},
apply: function(node, editState) {
var old_env = node.env;
var new_env = RED.subflow.exportSubflowInstanceEnv(node);
var new_env = [];
if (/^subflow:/.test(node.type)) {
new_env = RED.subflow.exportSubflowInstanceEnv(node);
}
// Get the values from the Properties table tab
var items = this.list.editableList('items');

63
packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/flowProperties.js vendored Normal file
View File

@ -0,0 +1,63 @@
;(function() {
RED.editor.registerEditorPane("editor-tab-flow-properties", function() {
return {
label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"),
iconClass: "fa fa-cog",
create: function(container, node) {
var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(content);
$('<div class="form-row">'+
'<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
'<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
'</div>').appendTo(dialogForm);
var row = $('<div class="form-row node-text-editor-row">'+
'<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
'<div style="min-height:150px;" class="node-text-editor" id="node-input-info"></div>'+
'</div>').appendTo(dialogForm);
this.tabflowEditor = RED.editor.createEditor({
id: 'node-input-info',
mode: 'ace/mode/markdown',
value: ""
});
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
dialogForm.on("submit", function(e) { e.preventDefault();});
$("#node-input-name").val(node.label);
RED.text.bidi.prepareInput($("#node-input-name"));
this.tabflowEditor.getSession().setValue(node.info || "", -1);
return content;
},
resize: function(node, size) {
$("#node-input-info").css("height", (size.height-70)+"px");
this.tabflowEditor.resize();
},
close: function(node) {
this.tabflowEditor.destroy();
},
apply: function(workspace, editState) {
var label = $( "#node-input-name" ).val();
if (workspace.label != label) {
editState.changes.label = workspace.label;
editState.changed = true;
workspace.label = label;
}
var info = this.tabflowEditor.getValue();
if (workspace.info !== info) {
editState.changes.info = workspace.info;
editState.changed = true;
workspace.info = info;
}
$("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
$("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
}
}
});
})();

2
packages/node_modules/@node-red/editor-client/src/js/ui/group.js vendored
View File

@ -97,8 +97,6 @@ RED.group = (function() {
},
category: "config",
oneditprepare: function() {
RED.subflow.buildPropertiesForm(this);
var style = this.style || {};
RED.editor.colorPicker.create({
id:"node-input-style-stroke",

49
packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js vendored
View File

@ -948,9 +948,6 @@ RED.subflow = (function() {
function buildPropertiesList(envContainer, node) {
var isTemplateNode = (node.type === "subflow");
var isGroup = (node.type === "group");
var isTab = (node.type === "tab");
var kind = isGroup ? "group" : (isTab ? "tab" : "subflow");
if (isTemplateNode) {
buildEnvControl(envContainer, node);
@ -1812,30 +1809,26 @@ RED.subflow = (function() {
function exportSubflowInstanceEnv(node) {
var env = [];
var isGroup = (node.type === "group");
var isTab = (node.type === "tab");
if (!isGroup && !isTab) {
// First, get the values for the SubflowTemplate defined properties
// - these are the ones with custom UI elements
var parentEnv = getSubflowInstanceParentEnv(node);
parentEnv.forEach(function(data) {
var item;
var ui = data.ui || {};
if (!ui.type) {
if (data.parent && data.parent.type === "cred") {
ui.type = "cred";
} else {
ui.type = "input";
ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
}
// First, get the values for the SubflowTemplate defined properties
// - these are the ones with custom UI elements
var parentEnv = getSubflowInstanceParentEnv(node);
parentEnv.forEach(function(data) {
var item;
var ui = data.ui || {};
if (!ui.type) {
if (data.parent && data.parent.type === "cred") {
ui.type = "cred";
} else {
ui.opts = ui.opts || {};
ui.type = "input";
ui.opts = {types:DEFAULT_ENV_TYPE_LIST}
}
var input = $("#"+getSubflowEnvPropertyName(data.name));
if (input.length || ui.type === "cred") {
item = { name: data.name };
switch(ui.type) {
} else {
ui.opts = ui.opts || {};
}
var input = $("#"+getSubflowEnvPropertyName(data.name));
if (input.length || ui.type === "cred") {
item = { name: data.name };
switch(ui.type) {
case "input":
if (ui.opts.types && ui.opts.types.length > 0) {
item.value = input.typedInput('value');
@ -1861,10 +1854,6 @@ RED.subflow = (function() {
item.type = 'bool';
item.value = ""+input.prop("checked");
break;
}
if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
env.push(item);
}
}
if (ui.type === "cred" || item.type !== data.parent.type || item.value !== data.parent.value) {
env.push(item);
@ -1926,6 +1915,6 @@ RED.subflow = (function() {
buildPropertiesList: buildPropertiesList,
exportSubflowTemplateEnv: exportEnvList,
exportSubflowInstanceEnv: exportSubflowInstanceEnv,
exportSubflowInstanceEnv: exportSubflowInstanceEnv
}
})();

281
packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js vendored
View File

@ -75,81 +75,6 @@ RED.workspaces = (function() {
RED.sidebar.config.refresh();
}
var tabflowEditor;
function buildProperties(container, workspace) {
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
$('<div class="form-row">'+
'<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
'<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">'+
'</div>').appendTo(dialogForm);
var row = $('<div class="form-row node-text-editor-row">'+
'<label for="node-input-info" data-i18n="editor:workspace.info" style="width:300px;"></label>'+
'<div style="min-height:250px;" class="node-text-editor" id="node-input-info"></div>'+
'</div>').appendTo(dialogForm);
tabflowEditor = RED.editor.createEditor({
id: 'node-input-info',
mode: 'ace/mode/markdown',
value: ""
});
$('#node-info-input-info-expand').on("click", function(e) {
e.preventDefault();
var value = tabflowEditor.getValue();
RED.editor.editMarkdown({
value: value,
width: "Infinity",
cursor: tabflowEditor.getCursorPosition(),
complete: function(v,cursor) {
tabflowEditor.setValue(v, -1);
tabflowEditor.gotoLine(cursor.row+1,cursor.column,false);
setTimeout(function() {
tabflowEditor.focus();
},300);
}
})
});
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
dialogForm.on("submit", function(e) { e.preventDefault();});
$("#node-input-name").val(workspace.label);
RED.text.bidi.prepareInput($("#node-input-name"));
tabflowEditor.getSession().setValue(workspace.info || "", -1);
dialogForm.i18n();
}
function getNodeCredentials(type, id, done) {
var timeoutNotification;
var intialTimeout = setTimeout(function() {
timeoutNotification = RED.notify($('<p data-i18n="[prepend]editor.loadCredentials"> <img src="red/images/spin.svg"/></p>').i18n(),{fixed: true})
},800);
$.ajax({
url: "credentials/tab/" + id,
dataType: 'json',
success: function(data) {
if (timeoutNotification) {
timeoutNotification.close();
timeoutNotification = null;
}
clearTimeout(intialTimeout);
done(data);
},
error: function(jqXHR,status,error) {
if (timeoutNotification) {
timeoutNotification.close();
timeoutNotification = null;
}
clearTimeout(intialTimeout);
RED.notify(RED._("editor.errors.credentialLoadFailed"),"error")
done(null);
},
timeout: 30000,
});
}
function showEditWorkspaceDialog(id) {
var workspace = RED.nodes.workspace(id);
if (!workspace) {
@ -157,207 +82,9 @@ RED.workspaces = (function() {
if (subflow) {
RED.editor.editSubflow(subflow);
}
return;
} else {
RED.editor.editFlow(workspace);
}
RED.view.state(RED.state.EDITING);
var trayOptions = {
title: RED._("workspace.editFlow",{name:RED.utils.sanitize(workspace.label)}),
buttons: [
{
id: "node-dialog-delete",
class: 'leftButton'+((workspaceTabCount === 1)?" disabled":""),
text: RED._("common.label.delete"), //'<i class="fa fa-trash"></i>',
click: function() {
deleteWorkspace(workspace);
RED.tray.close();
}
},
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
RED.tray.close();
}
},
{
id: "node-dialog-ok",
class: "primary",
text: RED._("common.label.done"),
click: function() {
var label = $( "#node-input-name" ).val();
var changed = false;
var changes = {};
if (workspace.label != label) {
changes.label = workspace.label;
changed = true;
workspace.label = label;
workspace_tabs.renameTab(workspace.id,label);
}
var disabled = $("#node-input-disabled").prop("checked");
if (workspace.disabled !== disabled) {
changes.disabled = workspace.disabled;
changed = true;
workspace.disabled = disabled;
}
var info = tabflowEditor.getValue();
if (workspace.info !== info) {
changes.info = workspace.info;
changed = true;
workspace.info = info;
}
$("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled);
$("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled);
var old_env = workspace.env;
var new_env = RED.subflow.exportSubflowInstanceEnv(workspace);
if (new_env && (new_env.length > 0)) {
new_env.forEach(function(prop) {
if (prop.type === "cred") {
workspace.credentials = workspace.credentials || {_:{}};
workspace.credentials[prop.name] = prop.value;
workspace.credentials['has_'+prop.name] = (prop.value !== "");
if (prop.value !== '__PWRD__') {
changed = true;
}
delete prop.value;
}
});
}
if (!isSameObj(old_env, new_env)) {
workspace.env = new_env;
changes.env = old_env;
changed = true;
}
if (changed) {
var historyEvent = {
t: "edit",
changes:changes,
node: workspace,
dirty: RED.nodes.dirty()
}
workspace.changed = true;
RED.history.push(historyEvent);
RED.nodes.dirty(true);
RED.sidebar.config.refresh();
if (changes.hasOwnProperty('disabled')) {
RED.nodes.eachNode(function(n) {
if (n.z === workspace.id) {
n.dirty = true;
}
});
RED.view.redraw();
}
RED.events.emit("flows:change",workspace);
}
RED.tray.close();
}
}
],
resize: function(dimensions) {
var height = dimensions.height;
var rows = $("#dialog-form>div:not(.node-text-editor-row)");
var editorRow = $("#dialog-form>div.node-text-editor-row");
for (var i=0; i<rows.size(); i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorHeight = height -(parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom"))) -100;
$(".node-text-editor").css("height", editorHeight+"px");
tabflowEditor.resize();
$("#red-ui-editor-tab-env-list").editableList("height", height -70);
},
open: function(tray) {
var trayFooter = tray.find(".red-ui-tray-footer");
var trayBody = tray.find('.red-ui-tray-body');
var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
var editorTabEl = $('<ul></ul>').appendTo(trayBody);
var editorContent = $('<div></div>').appendTo(trayBody);
var finishedBuilding = false;
var editorTabs = RED.tabs.create({
element:editorTabEl,
onchange:function(tab) {
editorContent.children().hide();
if (tab.onchange) {
tab.onchange.call(tab);
}
tab.content.show();
if (finishedBuilding) {
RED.tray.resize();
}
},
collapsible: true,
menu: false
});
var nodePropertiesTab = {
id: "editor-tab-properties",
label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"),
content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-cog"
};
buildProperties(nodePropertiesTab.content, workspace);
editorTabs.addTab(nodePropertiesTab);
var tabPropertiesTab = {
id: "editor-tab-envProperties",
label: RED._("editor-tab.envProperties"),
name: RED._("editor-tab.envProperties"),
content: $('<div>', {
id: "editor-tab-envProperties-content",
class: "red-ui-tray-content"
}).appendTo(editorContent).hide(),
iconClass: "fa fa-list",
};
function cb() {
RED.subflow.buildPropertiesForm(workspace);
editorTabs.addTab(tabPropertiesTab);
if (!workspace.hasOwnProperty("disabled")) {
workspace.disabled = false;
}
$('<input id="node-input-disabled" type="checkbox">').prop("checked",workspace.disabled).appendTo(trayFooterLeft).toggleButton({
enabledIcon: "fa-circle-thin",
disabledIcon: "fa-ban",
invertState: true
})
finishedBuilding = true;
RED.tray.resize();
}
if (workspace.credentials) {
cb();
}
else {
getNodeCredentials("tab", workspace.id, function(data) {
if (data) {
workspace.credentials = data;
workspace.credentials._ = $.extend(true,{},data);
}
cb();
});
}
},
close: function() {
if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
RED.view.state(RED.state.DEFAULT);
}
var selection = RED.view.selection();
if (!selection.nodes && !selection.links && workspace.id === activeWorkspace) {
RED.sidebar.info.refresh(workspace);
}
tabflowEditor.destroy();
}
}
RED.tray.show(trayOptions);
}
@ -566,7 +293,6 @@ RED.workspaces = (function() {
}
}
function removeWorkspace(ws) {
if (!ws) {
deleteWorkspace(RED.nodes.workspace(activeWorkspace));
@ -595,7 +321,10 @@ RED.workspaces = (function() {
return {
init: init,
add: addWorkspace,
// remove: remove workspace without editor history etc
remove: removeWorkspace,
// delete: remove workspace and update editor history
delete: deleteWorkspace,
order: setWorkspaceOrder,
edit: editWorkspace,
contains: function(id) {