/** * Copyright 2013, 2016 IBM Corp. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. **/ RED.editor = (function() { var editing_node = null; var editing_config_node = null; var subflowEditor; var editTrayWidthCache = {}; function getCredentialsURL(nodeType, nodeID) { var dashedType = nodeType.replace(/\s+/g, '-'); return 'credentials/' + dashedType + "/" + nodeID; } /** * Validate a node * @param node - the node being validated * @returns {boolean} whether the node is valid. Sets node.dirty if needed */ function validateNode(node) { var oldValue = node.valid; var oldChanged = node.changed; node.valid = true; var subflow; var isValid; var hasChanged; if (node.type.indexOf("subflow:")===0) { subflow = RED.nodes.subflow(node.type.substring(8)); isValid = subflow.valid; hasChanged = subflow.changed; if (isValid === undefined) { isValid = validateNode(subflow); hasChanged = subflow.changed; } node.valid = isValid; node.changed = node.changed || hasChanged; } else if (node._def) { node.valid = validateNodeProperties(node, node._def.defaults, node); if (node._def._creds) { node.valid = node.valid && validateNodeProperties(node, node._def.credentials, node._def._creds); } } else if (node.type == "subflow") { var subflowNodes = RED.nodes.filterNodes({z:node.id}); for (var i=0;i= node.outputs) { removedLinks.push(l); } }); } else if (node.outputs > node.ports.length) { while (node.outputs > node.ports.length) { node.ports.push(node.ports.length); } } } if (node.inputs === 0) { removedLinks.concat(RED.nodes.filterLinks({target:node})); } for (var l=0;l'); updateConfigNodeSelect(property,type,node[property]); var select = $("#node-input-"+property); select.after(' '); $('#node-input-lookup-'+property).click(function(e) { showEditConfigNodeDialog(property,type,select.find(":selected").val()); e.preventDefault(); }); var label = ""; var configNode = RED.nodes.node(node[property]); if (configNode && node_def.label) { if (typeof node_def.label == "function") { label = node_def.label.call(configNode); } else { label = node_def.label; } } input.val(label); } /** * Create a config-node button for this property * @param node - the node being edited * @param property - the name of the field * @param type - the type of the config-node */ function prepareConfigNodeButton(node,property,type) { var input = $("#node-input-"+property); input.val(node[property]); input.attr("type","hidden"); var button = $("",{id:"node-input-edit-"+property, class:"editor-button"}); input.after(button); if (node[property]) { button.text(RED._("editor.configEdit")); } else { button.text(RED._("editor.configAdd")); } button.click(function(e) { showEditConfigNodeDialog(property,type,input.val()||"_ADD_"); e.preventDefault(); }); } /** * Populate the editor dialog input field for this property * @param node - the node being edited * @param property - the name of the field * @param prefix - the prefix to use in the input element ids (node-input|node-config-input) */ function preparePropertyEditor(node,property,prefix) { var input = $("#"+prefix+"-"+property); if (input.attr('type') === "checkbox") { input.prop('checked',node[property]); } else { var val = node[property]; if (val == null) { val = ""; } input.val(val); } } /** * Add an on-change handler to revalidate a node field * @param node - the node being edited * @param definition - the definition of the node * @param property - the name of the field * @param prefix - the prefix to use in the input element ids (node-input|node-config-input) */ function attachPropertyChangeHandler(node,definition,property,prefix) { $("#"+prefix+"-"+property).change(function() { if (!validateNodeProperty(node, definition, property,this.value)) { $(this).addClass("input-error"); } else { $(this).removeClass("input-error"); } }); } /** * Assign the value to each credential field * @param node * @param credDef * @param credData * @param prefix */ function populateCredentialsInputs(node, credDef, credData, prefix) { var cred; for (cred in credDef) { if (credDef.hasOwnProperty(cred)) { if (credDef[cred].type == 'password') { if (credData[cred]) { $('#' + prefix + '-' + cred).val(credData[cred]); } else if (credData['has_' + cred]) { $('#' + prefix + '-' + cred).val('__PWRD__'); } else { $('#' + prefix + '-' + cred).val(''); } } else { preparePropertyEditor(credData, cred, prefix); } attachPropertyChangeHandler(node, credDef, cred, prefix); } } for (cred in credDef) { if (credDef.hasOwnProperty(cred)) { $("#" + prefix + "-" + cred).change(); } } } /** * Update the node credentials from the edit form * @param node - the node containing the credentials * @param credDefinition - definition of the credentials * @param prefix - prefix of the input fields * @return {boolean} whether anything has changed */ function updateNodeCredentials(node, credDefinition, prefix) { var changed = false; if(!node.credentials) { node.credentials = {_:{}}; } for (var cred in credDefinition) { if (credDefinition.hasOwnProperty(cred)) { var input = $("#" + prefix + '-' + cred); var value = input.val(); if (credDefinition[cred].type == 'password') { node.credentials['has_' + cred] = (value !== ""); if (value == '__PWRD__') { continue; } changed = true; } node.credentials[cred] = value; if (value != node.credentials._[cred]) { changed = true; } } } return changed; } /** * Prepare all of the editor dialog fields * @param node - the node being edited * @param definition - the node definition * @param prefix - the prefix to use in the input element ids (node-input|node-config-input) */ function prepareEditDialog(node,definition,prefix) { for (var d in definition.defaults) { if (definition.defaults.hasOwnProperty(d)) { if (definition.defaults[d].type) { var configTypeDef = RED.nodes.getType(definition.defaults[d].type); if (configTypeDef) { if (configTypeDef.exclusive) { prepareConfigNodeButton(node,d,definition.defaults[d].type); } else { prepareConfigNodeSelect(node,d,definition.defaults[d].type); } } else { console.log("Unknown type:", definition.defaults[d].type); preparePropertyEditor(node,d,prefix); } } else { preparePropertyEditor(node,d,prefix); } attachPropertyChangeHandler(node,definition.defaults,d,prefix); } } var completePrepare = function() { if (definition.oneditprepare) { definition.oneditprepare.call(node); } for (var d in definition.defaults) { if (definition.defaults.hasOwnProperty(d)) { $("#"+prefix+"-"+d).change(); } } } if (definition.credentials) { if (node.credentials) { populateCredentialsInputs(node, definition.credentials, node.credentials, prefix); completePrepare(); } else { $.getJSON(getCredentialsURL(node.type, node.id), function (data) { node.credentials = data; node.credentials._ = $.extend(true,{},data); populateCredentialsInputs(node, definition.credentials, node.credentials, prefix); completePrepare(); }); } } else { completePrepare(); } } function showEditDialog(node) { var editing_node = node; RED.view.state(RED.state.EDITING); var type = node.type; if (node.type.substring(0,8) == "subflow:") { type = "subflow"; } var trayOptions = { title: "Edit "+type+" node", buttons: [ { id: "node-dialog-ok", text: RED._("common.label.ok"), click: function() { var changes = {}; var changed = false; var wasDirty = RED.nodes.dirty(); var d; if (editing_node._def.oneditsave) { var oldValues = {}; for (d in editing_node._def.defaults) { if (editing_node._def.defaults.hasOwnProperty(d)) { if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") { oldValues[d] = editing_node[d]; } else { oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v; } } } var rc = editing_node._def.oneditsave.call(editing_node); if (rc === true) { changed = true; } for (d in editing_node._def.defaults) { if (editing_node._def.defaults.hasOwnProperty(d)) { if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") { if (oldValues[d] !== editing_node[d]) { changes[d] = oldValues[d]; changed = true; } } else { if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) { changes[d] = oldValues[d]; changed = true; } } } } } if (editing_node._def.defaults) { for (d in editing_node._def.defaults) { if (editing_node._def.defaults.hasOwnProperty(d)) { var input = $("#node-input-"+d); var newValue; if (input.attr('type') === "checkbox") { newValue = input.prop('checked'); } else { newValue = input.val(); } if (newValue != null) { if (d === "outputs" && (newValue.trim() === "" || isNaN(newValue))) { continue; } if (editing_node[d] != newValue) { if (editing_node._def.defaults[d].type) { if (newValue == "_ADD_") { newValue = ""; } // Change to a related config node var configNode = RED.nodes.node(editing_node[d]); if (configNode) { var users = configNode.users; users.splice(users.indexOf(editing_node),1); } configNode = RED.nodes.node(newValue); if (configNode) { configNode.users.push(editing_node); } } changes[d] = editing_node[d]; editing_node[d] = newValue; changed = true; } } } } } if (editing_node._def.credentials) { var prefix = 'node-input'; var credDefinition = editing_node._def.credentials; var credsChanged = updateNodeCredentials(editing_node,credDefinition,prefix); changed = changed || credsChanged; } var removedLinks = updateNodeProperties(editing_node); if (changed) { var wasChanged = editing_node.changed; editing_node.changed = true; RED.nodes.dirty(true); var activeSubflow = RED.nodes.subflow(RED.workspaces.active()); var subflowInstances = null; if (activeSubflow) { subflowInstances = []; RED.nodes.eachNode(function(n) { if (n.type == "subflow:"+RED.workspaces.active()) { subflowInstances.push({ id:n.id, changed:n.changed }); n.changed = true; n.dirty = true; updateNodeProperties(n); } }); } var historyEvent = { t:'edit', node:editing_node, changes:changes, links:removedLinks, dirty:wasDirty, changed:wasChanged }; if (subflowInstances) { historyEvent.subflow = { instances:subflowInstances } } RED.history.push(historyEvent); } editing_node.dirty = true; validateNode(editing_node); RED.view.redraw(true); RED.tray.close(); } }, { id: "node-dialog-cancel", text: RED._("common.label.cancel"), click: function() { if (editing_node._def) { if (editing_node._def.oneditcancel) { editing_node._def.oneditcancel.call(editing_node); } for (var d in editing_node._def.defaults) { if (editing_node._def.defaults.hasOwnProperty(d)) { var def = editing_node._def.defaults[d]; if (def.type) { var configTypeDef = RED.nodes.getType(def.type); if (configTypeDef && configTypeDef.exclusive) { var input = $("#node-input-"+d).val()||""; if (input !== "" && !editing_node[d]) { // This node has an exclusive config node that // has just been added. As the user is cancelling // the edit, need to delete the just-added config // node so that it doesn't get orphaned. RED.nodes.remove(input); } } } } } } RED.tray.close(); } } ], resize: function(dimensions) { editTrayWidthCache[type] = dimensions.width; if (editing_node && editing_node._def.oneditresize) { var form = $("#dialog-form"); editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()}); } }, open: function(tray) { if (editing_node) { RED.sidebar.info.refresh(editing_node); } var trayBody = tray.find('.editor-tray-body'); RED.keyboard.disable(); var dialogForm = $('
').appendTo(trayBody); dialogForm.html($("script[data-template-name='"+type+"']").html()); var ns; if (node._def.set.module === "node-red") { ns = "node-red"; } else { ns = node._def.set.id; } dialogForm.find('[data-i18n]').each(function() { var current = $(this).attr("data-i18n"); var keys = current.split(";"); for (var i=0;i').prependTo(dialogForm); prepareEditDialog(node,node._def,"node-input"); dialogForm.i18n(); // var minWidth = $(this).dialog('option','minWidth'); // if ($(this).outerWidth() < minWidth) { // $(this).dialog('option','width',minWidth); // } else { // $(this).dialog('option','width',$(this).outerWidth()); // } // if (editing_node) { // var size = $(this).dialog('option','sizeCache-'+editing_node.type); // if (size) { // $(this).dialog('option','width',size.width); // $(this).dialog('option','height',size.height); // } // if (editing_node._def.oneditresize) { // setTimeout(function() { // var form = $("#dialog-form"); // editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()}); // },0); // } // } }, close: function() { RED.keyboard.enable(); if (RED.view.state() != RED.state.IMPORT_DRAGGING) { RED.view.state(RED.state.DEFAULT); } if (editing_node) { RED.sidebar.info.refresh(editing_node); } RED.workspaces.refresh(); }, show: function() { if (editing_node) { RED.sidebar.info.refresh(editing_node); } } } /*).parent().on('keydown', function(evt) { if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) { $("#node-dialog-cancel").click(); } else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) { $("#node-dialog-ok").click(); } }); */ if (editTrayWidthCache[type]) { trayOptions.width = editTrayWidthCache[type]; } if (type === 'subflow') { var id = editing_node.type.substring(8); trayOptions.buttons.unshift({ class: 'leftButton', text: RED._("subflow.edit"), click: function() { RED.workspaces.show(id); $("#node-dialog-ok").click(); } }); } RED.tray.show(trayOptions); } /** * name - name of the property that holds this config node * type - type of config node * id - id of config node to edit. _ADD_ for a new one */ function showEditConfigNodeDialog(name,type,id) { var adding = (id == "_ADD_"); var node_def = RED.nodes.getType(type); var editing_config_node = RED.nodes.node(id); var ns; if (node_def.set.module === "node-red") { ns = "node-red"; } else { ns = node_def.set.id; } var activeWorkspace = RED.nodes.workspace(RED.workspaces.active()); if (!activeWorkspace) { activeWorkspace = RED.nodes.subflow(RED.workspaces.active()); } if (editing_config_node == null) { editing_config_node = { id: (1+Math.random()*4294967295).toString(16), _def: node_def, type: type, z: activeWorkspace.id, users: [] } for (var d in node_def.defaults) { if (node_def.defaults[d].value) { editing_config_node[d] = node_def.defaults[d].value; } } editing_config_node["_"] = node_def._; } RED.view.state(RED.state.EDITING); var trayOptions = { title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})), resize: function() { if (editing_config_node && editing_config_node._def.oneditresize) { var form = $("#node-config-dialog-edit-form"); editing_config_node._def.oneditresize.call(editing_config_node,{width:form.width(),height:form.height()}); } }, open: function(tray) { var trayHeader = tray.find(".editor-tray-header"); var trayBody = tray.find(".editor-tray-body"); var trayFooter = tray.find(".editor-tray-footer"); trayFooter.prepend('
'); trayHeader.append(''); if (RED.view.state() != RED.state.EDITING) { RED.keyboard.disable(); } var dialogForm = $('
').appendTo(trayBody); dialogForm.html($("script[data-template-name='"+type+"']").html()); dialogForm.find('[data-i18n]').each(function() { var current = $(this).attr("data-i18n"); if (current.indexOf(":") === -1) { var prefix = ""; if (current.indexOf("[")===0) { var parts = current.split("]"); prefix = parts[0]+"]"; current = parts[1]; } $(this).attr("data-i18n",prefix+ns+":"+current); } }); $('').prependTo(dialogForm); prepareEditDialog(editing_config_node,node_def,"node-config-input"); if (editing_config_node._def.exclusive) { $("#node-config-dialog-scope").hide(); } else { $("#node-config-dialog-scope").show(); } $("#node-config-dialog-scope-warning").hide(); var nodeUserFlows = {}; editing_config_node.users.forEach(function(n) { nodeUserFlows[n.z] = true; }); var flowCount = Object.keys(nodeUserFlows).length; var tabSelect = $("#node-config-dialog-scope").empty(); tabSelect.off("change"); tabSelect.append(''); tabSelect.append(''); RED.nodes.eachWorkspace(function(ws) { var workspaceLabel = ws.label; if (nodeUserFlows[ws.id]) { workspaceLabel = "* "+workspaceLabel; } tabSelect.append(''); }); tabSelect.append(''); RED.nodes.eachSubflow(function(ws) { var workspaceLabel = ws.name; if (nodeUserFlows[ws.id]) { workspaceLabel = "* "+workspaceLabel; } tabSelect.append(''); }); if (flowCount > 0) { tabSelect.on('change',function() { var newScope = $(this).val(); if (newScope === '') { // global scope - everyone can use it $("#node-config-dialog-scope-warning").hide(); } else if (!nodeUserFlows[newScope] || flowCount > 1) { // a user will loose access to it $("#node-config-dialog-scope-warning").show(); } else { $("#node-config-dialog-scope-warning").hide(); } }); } tabSelect.i18n(); dialogForm.i18n(); $("#node-config-dialog-user-count").find("span").html(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show(); }, close: function() { if (RED.view.state() != RED.state.EDITING) { RED.keyboard.enable(); } RED.workspaces.refresh(); }, show: function() { if (editing_config_node) { RED.sidebar.info.refresh(editing_config_node); } } } trayOptions.buttons = [ { id: "node-config-dialog-ok", text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"), click: function() { var configProperty = name; var configId = editing_config_node.id; var configType = type; var configAdding = adding; var configTypeDef = RED.nodes.getType(configType); var d; var input; var scope = $("#node-config-dialog-scope").val(); for (d in configTypeDef.defaults) { if (configTypeDef.defaults.hasOwnProperty(d)) { input = $("#node-config-input-"+d); if (input.attr('type') === "checkbox") { editing_config_node[d] = input.prop('checked'); } else { editing_config_node[d] = input.val(); } } } editing_config_node.label = configTypeDef.label; editing_config_node.z = scope; if (scope) { editing_config_node.users = editing_config_node.users.filter(function(n) { var keep = true; for (var d in n._def.defaults) { if (n._def.defaults.hasOwnProperty(d)) { if (n._def.defaults[d].type === editing_config_node.type && n[d] === editing_config_node.id && n.z !== scope) { keep = false; n[d] = null; n.dirty = true; n.changed = true; validateNode(n); } } } return keep; }); } if (configAdding) { RED.nodes.add(editing_config_node); } if (configTypeDef.oneditsave) { configTypeDef.oneditsave.call(editing_config_node); } if (configTypeDef.credentials) { updateNodeCredentials(editing_config_node,configTypeDef.credentials,"node-config-input"); } validateNode(editing_config_node); for (var i=0;i B.label) { return 1; } return 0; }); configNodes.forEach(function(cn) { select.append(''); }); select.append(''); window.setTimeout(function() { select.change();},50); } } function showEditSubflowDialog(subflow) { var editing_node = subflow; RED.view.state(RED.state.EDITING); var subflowEditor; var trayOptions = { title: RED._("subflow.editSubflow",{name:subflow.name}), buttons: [ { id: "node-dialog-ok", text: RED._("common.label.ok"), click: function() { var i; var changes = {}; var changed = false; var wasDirty = RED.nodes.dirty(); var newName = $("#subflow-input-name").val(); if (newName != editing_node.name) { changes['name'] = editing_node.name; editing_node.name = newName; changed = true; $("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName); } var newDescription = subflowEditor.getValue(); if (newDescription != editing_node.info) { changes['info'] = editing_node.info; editing_node.info = newDescription; changed = true; } RED.palette.refresh(); if (changed) { var subflowInstances = []; RED.nodes.eachNode(function(n) { if (n.type == "subflow:"+editing_node.id) { subflowInstances.push({ id:n.id, changed:n.changed }) n.changed = true; n.dirty = true; updateNodeProperties(n); } }); var wasChanged = editing_node.changed; editing_node.changed = true; RED.nodes.dirty(true); var historyEvent = { t:'edit', node:editing_node, changes:changes, dirty:wasDirty, changed:wasChanged, subflow: { instances:subflowInstances } }; RED.history.push(historyEvent); } editing_node.dirty = true; RED.tray.close(); } }, { id: "node-dialog-cancel", text: RED._("common.label.cancel"), click: function() { RED.tray.close(); } } ], resize: function() { var rows = $("#dialog-form>div:not(.node-text-editor-row)"); var editorRow = $("#dialog-form>div.node-text-editor-row"); var height = $("#dialog-form").height(); for (var i=0;i').appendTo(trayBody); dialogForm.html($("script[data-template-name='subflow-template']").html()); var ns = "node-red"; dialogForm.find('[data-i18n]').each(function() { var current = $(this).attr("data-i18n"); var keys = current.split(";"); for (var i=0;i').prependTo(dialogForm); dialogForm.submit(function(e) { e.preventDefault();}); subflowEditor = RED.editor.createEditor({ id: 'subflow-input-info-editor', mode: 'ace/mode/markdown', value: "" }); $("#subflow-input-name").val(subflow.name); subflowEditor.getSession().setValue(subflow.info,-1); var userCount = 0; var subflowType = "subflow:"+editing_node.id; RED.nodes.eachNode(function(n) { if (n.type === subflowType) { userCount++; } }); $("#subflow-dialog-user-count").html(RED._("subflow.subflowInstances", {count:userCount})).show(); dialogForm.i18n(); }, close: function() { RED.keyboard.enable(); if (RED.view.state() != RED.state.IMPORT_DRAGGING) { RED.view.state(RED.state.DEFAULT); } RED.sidebar.info.refresh(editing_node); RED.workspaces.refresh(); editing_node = null; }, show: function() { } } RED.tray.show(trayOptions); } return { init: function() { RED.tray.init(); }, edit: showEditDialog, editConfig: showEditConfigNodeDialog, editSubflow: showEditSubflowDialog, validateNode: validateNode, updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo createEditor: function(options) { var editor = ace.edit(options.id); editor.setTheme("ace/theme/tomorrow"); var session = editor.getSession(); if (options.mode) { session.setMode(options.mode); } if (options.foldStyle) { session.setFoldStyle(options.foldStyle); } else { session.setFoldStyle('markbeginend'); } if (options.options) { editor.setOptions(options.options); } else { editor.setOptions({ enableBasicAutocompletion:true, enableSnippets:true }); } editor.$blockScrolling = Infinity; if (options.value) { session.setValue(options.value,-1); } return editor; } } })();