frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Simplify edit pane api

Browse Source
This commit is contained in:
Nick O'Leary 2021-09-02 21:59:30 +01:00
parent 4e92492165
commit 87ac831c8a
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
8 changed files with 72 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -442,10 +442,10 @@ RED.editor = (function() {
var editPaneDefinition = editPanes[id]; var editPaneDefinition = editPanes[id];
if (editPaneDefinition) { if (editPaneDefinition) {
if (typeof editPaneDefinition === 'function') { if (typeof editPaneDefinition === 'function') {
editPaneDefinition = editPaneDefinition.call(editPaneDefinition); editPaneDefinition = editPaneDefinition.call(editPaneDefinition, node);
} }
var editPaneContent = $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(); var editPaneContent = $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide();
editPaneDefinition.create.call(editPaneDefinition,editPaneContent,node); editPaneDefinition.create.call(editPaneDefinition,editPaneContent);
var editTab = { var editTab = {
id: id, id: id,
label: editPaneDefinition.label, label: editPaneDefinition.label,
@ -454,7 +454,7 @@ RED.editor = (function() {
content: editPaneContent, content: editPaneContent,
onchange: function() { onchange: function() {
if (editPaneDefinition.show) { if (editPaneDefinition.show) {
editPaneDefinition.show.call(editPaneDefinition,node) editPaneDefinition.show.call(editPaneDefinition)
} }
} }
} }
@ -876,7 +876,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.apply) { if (pane.apply) {
pane.apply.call(pane, editing_node, editState); pane.apply.call(pane, editState);
} }
}) })
@ -952,7 +952,7 @@ RED.editor = (function() {
var size = {width:form.width(),height:form.height()}; var size = {width:form.width(),height:form.height()};
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.resize) { if (pane.resize) {
pane.resize.call(pane,editing_node, size); pane.resize.call(pane, size);
} }
}) })
}, },
@ -1001,7 +1001,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.close) { if (pane.close) {
pane.close.call(pane,editing_node); pane.close.call(pane);
} }
}) })
@ -1079,7 +1079,7 @@ RED.editor = (function() {
var size = {width:form.width(),height:form.height()}; var size = {width:form.width(),height:form.height()};
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.resize) { if (pane.resize) {
pane.resize.call(pane, editing_config_node, size); pane.resize.call(pane, size);
} }
}) })
}, },
@ -1168,7 +1168,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.close) { if (pane.close) {
pane.close.call(pane,editing_config_node); pane.close.call(pane);
} }
}) })
@ -1274,7 +1274,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.apply) { if (pane.apply) {
pane.apply.call(pane, editing_config_node, editState); pane.apply.call(pane, editState);
} }
}) })
@ -1441,7 +1441,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.apply) { if (pane.apply) {
pane.apply.call(pane, editing_node, editState); pane.apply.call(pane, editState);
} }
}) })
@ -1524,7 +1524,7 @@ RED.editor = (function() {
var size = {width:form.width(),height:form.height()}; var size = {width:form.width(),height:form.height()};
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.resize) { if (pane.resize) {
pane.resize.call(pane,editing_node, size); pane.resize.call(pane, size);
} }
}) })
}, },
@ -1567,7 +1567,7 @@ RED.editor = (function() {
RED.workspaces.refresh(); RED.workspaces.refresh();
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.close) { if (pane.close) {
pane.close.call(pane,editing_node); pane.close.call(pane);
} }
}) })
editStack.pop(); editStack.pop();
@ -1613,7 +1613,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.apply) { if (pane.apply) {
pane.apply.call(pane, editing_node, editState); pane.apply.call(pane, editState);
} }
}) })
@ -1644,7 +1644,7 @@ RED.editor = (function() {
var size = {width:form.width(),height:form.height()}; var size = {width:form.width(),height:form.height()};
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.resize) { if (pane.resize) {
pane.resize.call(pane,editing_node, size); pane.resize.call(pane, size);
} }
}) })
}, },
@ -1676,7 +1676,7 @@ RED.editor = (function() {
RED.sidebar.info.refresh(editing_node); RED.sidebar.info.refresh(editing_node);
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.close) { if (pane.close) {
pane.close.call(pane,editing_node); pane.close.call(pane);
} }
}) })
editStack.pop(); editStack.pop();
@ -1730,7 +1730,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.apply) { if (pane.apply) {
pane.apply.call(pane, workspace, editState); pane.apply.call(pane, editState);
} }
}) })
@ -1773,7 +1773,7 @@ RED.editor = (function() {
var size = {width:form.width(),height:form.height()}; var size = {width:form.width(),height:form.height()};
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.resize) { if (pane.resize) {
pane.resize.call(pane,editing_node, size); pane.resize.call(pane, size);
} }
}) })
}, },
@ -1811,7 +1811,7 @@ RED.editor = (function() {
} }
activeEditPanes.forEach(function(pane) { activeEditPanes.forEach(function(pane) {
if (pane.close) { if (pane.close) {
pane.close.call(pane,editing_node); pane.close.call(pane);
} }
}) })
var selection = RED.view.selection(); var selection = RED.view.selection();

12
packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js vendored
View File

@ -1,11 +1,11 @@
;(function() { ;(function() {
RED.editor.registerEditorPane("editor-tab-appearance", function() { RED.editor.registerEditorPane("editor-tab-appearance", function(node) {
return { return {
label: RED._("editor-tab.appearance"), label: RED._("editor-tab.appearance"),
name: RED._("editor-tab.appearance"), name: RED._("editor-tab.appearance"),
iconClass: "fa fa-object-group", iconClass: "fa fa-object-group",
create: function(container, node) { create: function(container) {
this.content = container; this.content = container;
buildAppearanceForm(this.content,node); buildAppearanceForm(this.content,node);
@ -21,16 +21,16 @@
} }
} }
}, },
resize: function(node, size) { resize: function(size) {
}, },
close: function(node) { close: function() {
}, },
show: function(node) { show: function() {
refreshLabelForm(this.content, node); refreshLabelForm(this.content, node);
}, },
apply: function(node, editState) { apply: function(editState) {
if (updateLabels(node, editState.changes, editState.outputMap)) { if (updateLabels(node, editState.changes, editState.outputMap)) {
editState.changed = true; editState.changed = true;
} }

10
packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js vendored
View File

@ -1,26 +1,26 @@
;(function() { ;(function() {
RED.editor.registerEditorPane("editor-tab-description", function() { RED.editor.registerEditorPane("editor-tab-description", function(node) {
return { return {
label: RED._("editor-tab.description"), label: RED._("editor-tab.description"),
name: RED._("editor-tab.description"), name: RED._("editor-tab.description"),
iconClass: "fa fa-file-text-o", iconClass: "fa fa-file-text-o",
create: function(container, node) { create: function(container) {
this.editor = buildDescriptionForm(container,node); this.editor = buildDescriptionForm(container,node);
RED.e = this.editor; RED.e = this.editor;
}, },
resize: function(node, size) { resize: function(size) {
this.editor.resize(); this.editor.resize();
}, },
close: function(node) { close: function() {
this.editor.destroy(); this.editor.destroy();
this.editor = null; this.editor = null;
}, },
show: function() { show: function() {
this.editor.focus(); this.editor.focus();
}, },
apply: function(node, editState) { apply: function(editState) {
var oldInfo = node.info; var oldInfo = node.info;
var newInfo = this.editor.getValue(); var newInfo = this.editor.getValue();
if (!!oldInfo) { if (!!oldInfo) {

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

@ -1,23 +1,23 @@
;(function() { ;(function() {
RED.editor.registerEditorPane("editor-tab-envProperties", function() { RED.editor.registerEditorPane("editor-tab-envProperties", function(node) {
return { return {
label: RED._("editor-tab.envProperties"), label: RED._("editor-tab.envProperties"),
name: RED._("editor-tab.envProperties"), name: RED._("editor-tab.envProperties"),
iconClass: "fa fa-list", iconClass: "fa fa-list",
create: function(container, node) { create: function(container) {
var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container); var form = $('<form class="dialog-form form-horizontal"></form>').appendTo(container);
var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form); var listContainer = $('<div class="form-row node-input-env-container-row"></div>').appendTo(form);
this.list = $('<ol></ol>').appendTo(listContainer); this.list = $('<ol></ol>').appendTo(listContainer);
RED.editor.envVarList.create(this.list, node); RED.editor.envVarList.create(this.list, node);
}, },
resize: function(node, size) { resize: function(size) {
this.list.editableList('height',size.height); this.list.editableList('height',size.height);
}, },
close: function(node) { close: function() {
}, },
apply: function(node, editState) { apply: function(editState) {
var old_env = node.env; var old_env = node.env;
var new_env = []; var new_env = [];
if (/^subflow:/.test(node.type)) { if (/^subflow:/.test(node.type)) {

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

@ -1,11 +1,11 @@
;(function() { ;(function() {
RED.editor.registerEditorPane("editor-tab-flow-properties", function() { RED.editor.registerEditorPane("editor-tab-flow-properties", function(node) {
return { return {
label: RED._("editor-tab.properties"), label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"), name: RED._("editor-tab.properties"),
iconClass: "fa fa-cog", iconClass: "fa fa-cog",
create: function(container, node) { create: function(container) {
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container); var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(container);
$('<div class="form-row">'+ $('<div class="form-row">'+
'<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+ '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
@ -29,30 +29,30 @@
RED.text.bidi.prepareInput($("#node-input-name")); RED.text.bidi.prepareInput($("#node-input-name"));
this.tabflowEditor.getSession().setValue(node.info || "", -1); this.tabflowEditor.getSession().setValue(node.info || "", -1);
}, },
resize: function(node, size) { resize: function(size) {
$("#node-input-info").css("height", (size.height-70)+"px"); $("#node-input-info").css("height", (size.height-70)+"px");
this.tabflowEditor.resize(); this.tabflowEditor.resize();
}, },
close: function(node) { close: function() {
this.tabflowEditor.destroy(); this.tabflowEditor.destroy();
}, },
apply: function(workspace, editState) { apply: function(editState) {
var label = $( "#node-input-name" ).val(); var label = $( "#node-input-name" ).val();
if (workspace.label != label) { if (node.label != label) {
editState.changes.label = workspace.label; editState.changes.label = node.label;
editState.changed = true; editState.changed = true;
workspace.label = label; node.label = label;
} }
var info = this.tabflowEditor.getValue(); var info = this.tabflowEditor.getValue();
if (workspace.info !== info) { if (node.info !== info) {
editState.changes.info = workspace.info; editState.changes.info = node.info;
editState.changed = true; editState.changed = true;
workspace.info = info; node.info = info;
} }
$("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!workspace.disabled); $("#red-ui-tab-"+(node.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!node.disabled);
$("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!workspace.disabled); $("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!node.disabled);
} }
} }

40
packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/properties.js vendored
View File

@ -1,11 +1,11 @@
;(function() { ;(function() {
RED.editor.registerEditorPane("editor-tab-properties", function() { RED.editor.registerEditorPane("editor-tab-properties", function(node) {
return { return {
label: RED._("editor-tab.properties"), label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"), name: RED._("editor-tab.properties"),
iconClass: "fa fa-cog", iconClass: "fa fa-cog",
create: function(container, node) { create: function(container) {
var nodeType = node.type; var nodeType = node.type;
if (node.type === "subflow") { if (node.type === "subflow") {
@ -29,7 +29,7 @@
} }
RED.editor.buildEditForm(container,formStyle,nodeType,i18nNamespace,node); RED.editor.buildEditForm(container,formStyle,nodeType,i18nNamespace,node);
}, },
resize: function(node, size) { resize: function(size) {
if (node && node._def.oneditresize) { if (node && node._def.oneditresize) {
try { try {
node._def.oneditresize.call(node,size); node._def.oneditresize.call(node,size);
@ -38,15 +38,15 @@
} }
} }
}, },
close: function(node) { close: function() {
}, },
apply: function(editing_node, editState) { apply: function(editState) {
var newValue; var newValue;
var d; var d;
if (editing_node._def.defaults) { if (node._def.defaults) {
for (d in editing_node._def.defaults) { for (d in node._def.defaults) {
if (editing_node._def.defaults.hasOwnProperty(d)) { if (node._def.defaults.hasOwnProperty(d)) {
var input = $("#"+this.inputClass+"-"+d); var input = $("#"+this.inputClass+"-"+d);
if (input.attr('type') === "checkbox") { if (input.attr('type') === "checkbox") {
newValue = input.prop('checked'); newValue = input.prop('checked');
@ -57,7 +57,7 @@
if (newValue == null) { if (newValue == null) {
newValue = []; newValue = [];
} }
} else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") { } else if ("format" in node._def.defaults[d] && node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
newValue = input.text(); newValue = input.text();
} else { } else {
newValue = input.val(); newValue = input.val();
@ -102,37 +102,37 @@
newValue = parseInt(newValue); newValue = parseInt(newValue);
} }
} }
if (editing_node._def.defaults[d].type) { if (node._def.defaults[d].type) {
if (newValue == "_ADD_") { if (newValue == "_ADD_") {
newValue = ""; newValue = "";
} }
} }
if (editing_node[d] != newValue) { if (node[d] != newValue) {
if (editing_node._def.defaults[d].type) { if (node._def.defaults[d].type) {
// Change to a related config node // Change to a related config node
var configNode = RED.nodes.node(editing_node[d]); var configNode = RED.nodes.node(node[d]);
if (configNode) { if (configNode) {
var users = configNode.users; var users = configNode.users;
users.splice(users.indexOf(editing_node),1); users.splice(users.indexOf(node),1);
RED.events.emit("nodes:change",configNode); RED.events.emit("nodes:change",configNode);
} }
configNode = RED.nodes.node(newValue); configNode = RED.nodes.node(newValue);
if (configNode) { if (configNode) {
configNode.users.push(editing_node); configNode.users.push(node);
RED.events.emit("nodes:change",configNode); RED.events.emit("nodes:change",configNode);
} }
} }
editState.changes[d] = editing_node[d]; editState.changes[d] = node[d];
editing_node[d] = newValue; node[d] = newValue;
editState.changed = true; editState.changed = true;
} }
} }
} }
} }
} }
if (editing_node._def.credentials) { if (node._def.credentials) {
var credDefinition = editing_node._def.credentials; var credDefinition = node._def.credentials;
var credsChanged = updateNodeCredentials(editing_node,credDefinition,this.inputClass); var credsChanged = updateNodeCredentials(node,credDefinition,this.inputClass);
editState.changed = editState.changed || credsChanged; editState.changed = editState.changed || credsChanged;
} }
} }

10
packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/subflowModule.js vendored
View File

@ -30,20 +30,20 @@
'</div>'+ '</div>'+
'</form>'; '</form>';
RED.editor.registerEditorPane("editor-tab-subflow-module", function() { RED.editor.registerEditorPane("editor-tab-subflow-module", function(node) {
return { return {
label: RED._("editor-tab.module"), label: RED._("editor-tab.module"),
name: RED._("editor-tab.module"), name: RED._("editor-tab.module"),
iconClass: "fa fa-cube", iconClass: "fa fa-cube",
create: function(container, node) { create: function(container) {
buildModuleForm(container, node); buildModuleForm(container, node);
}, },
resize: function(node, size) { resize: function(size) {
}, },
close: function(node) { close: function() {
}, },
apply: function(node, editState) { apply: function(editState) {
var newMeta = exportSubflowModuleProperties(node); var newMeta = exportSubflowModuleProperties(node);
if (!isSameObj(node.meta,newMeta)) { if (!isSameObj(node.meta,newMeta)) {
editState.changes.meta = node.meta; editState.changes.meta = node.meta;

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

@ -1,60 +0,0 @@
;(function() {
RED.editor.registerEditorPane("editor-tab-subflow-properties", function() {
return {
label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"),
iconClass: "fa fa-cog",
create: function(container, node) {
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: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);
},
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);
}
}
});
})();