1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Simplify edit pane api

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

View File

@ -442,10 +442,10 @@ RED.editor = (function() {
var editPaneDefinition = editPanes[id];
if (editPaneDefinition) {
if (typeof editPaneDefinition === 'function') {
editPaneDefinition = editPaneDefinition.call(editPaneDefinition);
editPaneDefinition = editPaneDefinition.call(editPaneDefinition, node);
}
var editPaneContent = $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide();
editPaneDefinition.create.call(editPaneDefinition,editPaneContent,node);
editPaneDefinition.create.call(editPaneDefinition,editPaneContent);
var editTab = {
id: id,
label: editPaneDefinition.label,
@ -454,7 +454,7 @@ RED.editor = (function() {
content: editPaneContent,
onchange: function() {
if (editPaneDefinition.show) {
editPaneDefinition.show.call(editPaneDefinition,node)
editPaneDefinition.show.call(editPaneDefinition)
}
}
}
@ -876,7 +876,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) {
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()};
activeEditPanes.forEach(function(pane) {
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) {
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()};
activeEditPanes.forEach(function(pane) {
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) {
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) {
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) {
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()};
activeEditPanes.forEach(function(pane) {
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();
activeEditPanes.forEach(function(pane) {
if (pane.close) {
pane.close.call(pane,editing_node);
pane.close.call(pane);
}
})
editStack.pop();
@ -1613,7 +1613,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) {
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()};
activeEditPanes.forEach(function(pane) {
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);
activeEditPanes.forEach(function(pane) {
if (pane.close) {
pane.close.call(pane,editing_node);
pane.close.call(pane);
}
})
editStack.pop();
@ -1730,7 +1730,7 @@ RED.editor = (function() {
activeEditPanes.forEach(function(pane) {
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()};
activeEditPanes.forEach(function(pane) {
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) {
if (pane.close) {
pane.close.call(pane,editing_node);
pane.close.call(pane);
}
})
var selection = RED.view.selection();

View File

@ -1,11 +1,11 @@
;(function() {
RED.editor.registerEditorPane("editor-tab-appearance", function() {
RED.editor.registerEditorPane("editor-tab-appearance", function(node) {
return {
label: RED._("editor-tab.appearance"),
name: RED._("editor-tab.appearance"),
iconClass: "fa fa-object-group",
create: function(container, node) {
create: function(container) {
this.content = container;
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);
},
apply: function(node, editState) {
apply: function(editState) {
if (updateLabels(node, editState.changes, editState.outputMap)) {
editState.changed = true;
}

View File

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

View File

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

View File

@ -1,11 +1,11 @@
;(function() {
RED.editor.registerEditorPane("editor-tab-flow-properties", function() {
RED.editor.registerEditorPane("editor-tab-flow-properties", function(node) {
return {
label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"),
iconClass: "fa fa-cog",
create: function(container, node) {
create: function(container) {
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>'+
@ -29,30 +29,30 @@
RED.text.bidi.prepareInput($("#node-input-name"));
this.tabflowEditor.getSession().setValue(node.info || "", -1);
},
resize: function(node, size) {
resize: function(size) {
$("#node-input-info").css("height", (size.height-70)+"px");
this.tabflowEditor.resize();
},
close: function(node) {
close: function() {
this.tabflowEditor.destroy();
},
apply: function(workspace, editState) {
apply: function(editState) {
var label = $( "#node-input-name" ).val();
if (workspace.label != label) {
editState.changes.label = workspace.label;
if (node.label != label) {
editState.changes.label = node.label;
editState.changed = true;
workspace.label = label;
node.label = label;
}
var info = this.tabflowEditor.getValue();
if (workspace.info !== info) {
editState.changes.info = workspace.info;
if (node.info !== info) {
editState.changes.info = node.info;
editState.changed = true;
workspace.info = info;
node.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);
$("#red-ui-tab-"+(node.id.replace(".","-"))).toggleClass('red-ui-workspace-disabled',!!node.disabled);
$("#red-ui-workspace").toggleClass("red-ui-workspace-disabled",!!node.disabled);
}
}

View File

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

View File

@ -30,20 +30,20 @@
'</div>'+
'</form>';
RED.editor.registerEditorPane("editor-tab-subflow-module", function() {
RED.editor.registerEditorPane("editor-tab-subflow-module", function(node) {
return {
label: RED._("editor-tab.module"),
name: RED._("editor-tab.module"),
iconClass: "fa fa-cube",
create: function(container, node) {
create: function(container) {
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);
if (!isSameObj(node.meta,newMeta)) {
editState.changes.meta = node.meta;

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);
}
}
});
})();