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:
parent
4e92492165
commit
87ac831c8a
@ -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();
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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)) {
|
||||
|
@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
Loading…
Reference in New Issue
Block a user