mirror of https://github.com/node-red/node-red.git
Allow a node label to be hidden
This commit is contained in:
Nick O'Leary
parent
6bd0682e8c
commit
0376e0d711
|
|
@ -509,6 +509,12 @@ RED.nodes = (function() {
|
|||
node.icon = n.icon;
|
||||
}
|
||||
}
|
||||
if ((!n._def.defaults || !n._def.defaults.hasOwnProperty("l")) && n.hasOwnProperty('l')) {
|
||||
var isLink = /^link (in|out)$/.test(node.type);
|
||||
if (isLink == n.l) {
|
||||
node.l = n.l;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (n.info) {
|
||||
node.info = n.info;
|
||||
|
|
@ -961,6 +967,9 @@ RED.nodes = (function() {
|
|||
changed:false,
|
||||
_config:{}
|
||||
};
|
||||
if (n.hasOwnProperty('l')) {
|
||||
node.l = n.l;
|
||||
}
|
||||
if (createNewIds) {
|
||||
if (subflow_blacklist[n.z]) {
|
||||
continue;
|
||||
|
|
|
|||
|
|
@ -775,41 +775,21 @@ RED.editor = (function() {
|
|||
function buildAppearanceForm(container,node) {
|
||||
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
|
||||
|
||||
var inputCount = node.inputs || node._def.inputs || 0;
|
||||
var outputCount = node.outputs || node._def.outputs || 0;
|
||||
if (node.type === 'subflow') {
|
||||
inputCount = node.in.length;
|
||||
outputCount = node.out.length;
|
||||
}
|
||||
|
||||
var inputLabels = node.inputLabels || [];
|
||||
var outputLabels = node.outputLabels || [];
|
||||
|
||||
var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
|
||||
var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
|
||||
|
||||
var i,row;
|
||||
$('<div class="form-row"><span data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm);
|
||||
var inputsDiv = $("#node-label-form-inputs");
|
||||
if (inputCount > 0) {
|
||||
for (i=0;i<inputCount;i++) {
|
||||
buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
|
||||
}
|
||||
} else {
|
||||
buildLabelRow().appendTo(inputsDiv);
|
||||
}
|
||||
$('<div class="form-row"><span data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm);
|
||||
var outputsDiv = $("#node-label-form-outputs");
|
||||
if (outputCount > 0) {
|
||||
for (i=0;i<outputCount;i++) {
|
||||
buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
|
||||
}
|
||||
} else {
|
||||
buildLabelRow().appendTo(outputsDiv);
|
||||
|
||||
$('<div class="form-row">'+
|
||||
'<label style="margin:0; margin-right: 20px; width: auto" for="node-input-show-label" data-i18n="">Show node label</label>'+
|
||||
'<input style="margin:0;" type="checkbox" id="node-input-show-label"/>'+
|
||||
'</div>').appendTo(dialogForm);
|
||||
|
||||
if (!node.hasOwnProperty("l")) {
|
||||
// Show label if type not link
|
||||
node.l = !/^link (in|out)$/.test(node._def.type);
|
||||
}
|
||||
|
||||
$("#node-input-show-label").prop("checked",node.l);
|
||||
|
||||
if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
|
||||
$('<hr>').appendTo(dialogForm);
|
||||
var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
|
||||
$('<label style="width: 50px" data-i18n="editor.settingIcon">').appendTo(iconRow);
|
||||
|
||||
|
|
@ -839,6 +819,41 @@ RED.editor = (function() {
|
|||
})
|
||||
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);
|
||||
}
|
||||
|
||||
$('<hr>').appendTo(dialogForm);
|
||||
|
||||
|
||||
var inputCount = node.inputs || node._def.inputs || 0;
|
||||
var outputCount = node.outputs || node._def.outputs || 0;
|
||||
if (node.type === 'subflow') {
|
||||
inputCount = node.in.length;
|
||||
outputCount = node.out.length;
|
||||
}
|
||||
|
||||
var inputLabels = node.inputLabels || [];
|
||||
var outputLabels = node.outputLabels || [];
|
||||
|
||||
var inputPlaceholder = node._def.inputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
|
||||
var outputPlaceholder = node._def.outputLabels?RED._("editor.defaultLabel"):RED._("editor.noDefaultLabel");
|
||||
|
||||
$('<div class="form-row"><span data-i18n="editor.labelInputs"></span><div id="node-label-form-inputs"></div></div>').appendTo(dialogForm);
|
||||
var inputsDiv = $("#node-label-form-inputs");
|
||||
if (inputCount > 0) {
|
||||
for (i=0;i<inputCount;i++) {
|
||||
buildLabelRow("input",i,inputLabels[i],inputPlaceholder).appendTo(inputsDiv);
|
||||
}
|
||||
} else {
|
||||
buildLabelRow().appendTo(inputsDiv);
|
||||
}
|
||||
$('<div class="form-row"><span data-i18n="editor.labelOutputs"></span><div id="node-label-form-outputs"></div></div>').appendTo(dialogForm);
|
||||
var outputsDiv = $("#node-label-form-outputs");
|
||||
if (outputCount > 0) {
|
||||
for (i=0;i<outputCount;i++) {
|
||||
buildLabelRow("output",i,outputLabels[i],outputPlaceholder).appendTo(outputsDiv);
|
||||
}
|
||||
} else {
|
||||
buildLabelRow().appendTo(outputsDiv);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLabels(editing_node, changes, outputMap) {
|
||||
|
|
@ -1165,6 +1180,42 @@ RED.editor = (function() {
|
|||
}
|
||||
}
|
||||
|
||||
if (!$("#node-input-show-label").prop('checked')) {
|
||||
// Not checked - hide label
|
||||
if (!/^link (in|out)$/.test(node.type)) {
|
||||
// Not a link node - default state is true
|
||||
if (node.l !== false) {
|
||||
changes.l = node.l
|
||||
changed = true;
|
||||
}
|
||||
node.l = false;
|
||||
} else {
|
||||
// A link node - default state is false
|
||||
if (node.hasOwnProperty('l')) {
|
||||
changes.l = node.l
|
||||
changed = true;
|
||||
}
|
||||
delete node.l;
|
||||
}
|
||||
} else {
|
||||
// Checked - show label
|
||||
if (!/^link (in|out)$/.test(node.type)) {
|
||||
// Not a link node - default state is true
|
||||
if (node.hasOwnProperty('l')) {
|
||||
changes.l = node.l
|
||||
changed = true;
|
||||
}
|
||||
delete node.l;
|
||||
} else {
|
||||
if (!node.l) {
|
||||
changes.l = node.l
|
||||
changed = true;
|
||||
}
|
||||
node.l = true;
|
||||
}
|
||||
}
|
||||
node.resize = true;
|
||||
|
||||
var oldInfo = node.info;
|
||||
if (nodeInfoEditor) {
|
||||
var newInfo = nodeInfoEditor.getValue();
|
||||
|
|
|
|||
|
|
@ -2073,7 +2073,7 @@ RED.view = (function() {
|
|||
|
||||
nodeEnter.each(function(d,i) {
|
||||
var node = d3.select(this);
|
||||
var isLink = d.type === "link in" || d.type === "link out";
|
||||
var isLink = d.hasOwnProperty('l')?!d.l : (d.type === "link in" || d.type === "link out")
|
||||
node.attr("id",d.id);
|
||||
var l = RED.utils.getNodeLabel(d);
|
||||
if (isLink) {
|
||||
|
|
@ -2160,7 +2160,7 @@ RED.view = (function() {
|
|||
var nodeBody = d3.select(this);
|
||||
nodeBody.classed("node_hovered",true);
|
||||
clearTimeout(portLabelHoverTimeout);
|
||||
if (d.type === "link in" || d.type === "link out") {
|
||||
if (d.hasOwnProperty('l')?!d.l : (d.type === "link in" || d.type === "link out")) {
|
||||
portLabelHoverTimeout = setTimeout(function() {
|
||||
var tooltip;
|
||||
if (d._def.label) {
|
||||
|
|
@ -2243,25 +2243,28 @@ RED.view = (function() {
|
|||
//icon.style("pointer-events","none");
|
||||
icon_group.style("pointer-events","none");
|
||||
}
|
||||
if (!isLink) {
|
||||
var text = node.append("svg:text").attr("class","node_label").attr("x", 38).attr("dy", ".35em").attr("text-anchor","start");
|
||||
if (d._def.align) {
|
||||
text.attr("class","node_label node_label_"+d._def.align);
|
||||
if (d._def.align === "right") {
|
||||
text.attr("text-anchor","end");
|
||||
}
|
||||
var text = node.append("svg:text")
|
||||
.attr("class","node_label")
|
||||
.attr("x", 38)
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor","start")
|
||||
.classed("hidden",isLink);
|
||||
|
||||
if (d._def.align) {
|
||||
text.attr("class","node_label node_label_"+d._def.align);
|
||||
if (d._def.align === "right") {
|
||||
text.attr("text-anchor","end");
|
||||
}
|
||||
|
||||
var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
|
||||
|
||||
var statusRect = status.append("rect").attr("class","node_status")
|
||||
.attr("x",6).attr("y",1).attr("width",9).attr("height",9)
|
||||
.attr("rx",2).attr("ry",2).attr("stroke-width","3");
|
||||
|
||||
var statusLabel = status.append("svg:text")
|
||||
.attr("class","node_status_label")
|
||||
.attr("x",20).attr("y",9);
|
||||
}
|
||||
|
||||
var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
|
||||
var statusRect = status.append("rect").attr("class","node_status")
|
||||
.attr("x",6).attr("y",1).attr("width",9).attr("height",9)
|
||||
.attr("rx",2).attr("ry",2).attr("stroke-width","3");
|
||||
var statusLabel = status.append("svg:text")
|
||||
.attr("class","node_status_label")
|
||||
.attr("x",20).attr("y",9);
|
||||
|
||||
//node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
|
||||
|
||||
//node.append("path").attr("class","node_error").attr("d","M 3,-3 l 10,0 l -5,-8 z");
|
||||
|
|
@ -2273,13 +2276,18 @@ RED.view = (function() {
|
|||
|
||||
node.each(function(d,i) {
|
||||
if (d.dirty) {
|
||||
var isLink = d.type === "link in" || d.type === "link out";
|
||||
var isLink = d.hasOwnProperty('l')?!d.l : (d.type === "link in" || d.type === "link out")
|
||||
dirtyNodes[d.id] = d;
|
||||
//if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette
|
||||
if (!isLink && d.resize) {
|
||||
if (/*!isLink &&*/ d.resize) {
|
||||
var l = RED.utils.getNodeLabel(d);
|
||||
var ow = d.w;
|
||||
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
|
||||
if (isLink) {
|
||||
d.w = node_height;
|
||||
} else {
|
||||
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
|
||||
}
|
||||
// d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
|
||||
d.h = Math.max(node_height,(d.outputs||0) * 15);
|
||||
d.x += (d.w-ow)/2;
|
||||
d.resize = false;
|
||||
|
|
@ -2287,7 +2295,6 @@ RED.view = (function() {
|
|||
var thisNode = d3.select(this);
|
||||
//thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
|
||||
thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
|
||||
|
||||
if (mouse_mode != RED.state.MOVING_ACTIVE) {
|
||||
thisNode.selectAll(".node")
|
||||
.attr("width",function(d){return d.w})
|
||||
|
|
@ -2373,8 +2380,7 @@ RED.view = (function() {
|
|||
}
|
||||
return "node_label"+
|
||||
(d._def.align?" node_label_"+d._def.align:"")+s;
|
||||
});
|
||||
|
||||
}).classed("hidden",isLink);
|
||||
if (d._def.icon) {
|
||||
var icon = thisNode.select(".node_icon");
|
||||
var faIcon = thisNode.select(".fa-lg");
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ RED.workspaces = (function() {
|
|||
RED.sidebar.config.refresh();
|
||||
}
|
||||
|
||||
function showRenameWorkspaceDialog(id) {
|
||||
function showEditWorkspaceDialog(id) {
|
||||
var workspace = RED.nodes.workspace(id);
|
||||
RED.view.state(RED.state.EDITING);
|
||||
var tabflowEditor;
|
||||
|
|
@ -235,7 +235,7 @@ RED.workspaces = (function() {
|
|||
},
|
||||
ondblclick: function(tab) {
|
||||
if (tab.type != "subflow") {
|
||||
showRenameWorkspaceDialog(tab.id);
|
||||
showEditWorkspaceDialog(tab.id);
|
||||
} else {
|
||||
RED.editor.editSubflow(RED.nodes.subflow(tab.id));
|
||||
}
|
||||
|
|
@ -309,7 +309,7 @@ RED.workspaces = (function() {
|
|||
}
|
||||
|
||||
function editWorkspace(id) {
|
||||
showRenameWorkspaceDialog(id||activeWorkspace);
|
||||
showEditWorkspaceDialog(id||activeWorkspace);
|
||||
}
|
||||
|
||||
function removeWorkspace(ws) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue