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

Add: user settings to switch flow view horizontal and vertical

Browse Source
This commit is contained in:
sakazuki 2018-12-01 23:01:55 +09:00
commit 0950041d26
6 changed files with 96 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
editor/js/ui/palette.js
View File

@ -105,8 +105,14 @@ RED.palette = (function() {
var labelElement = el.find(".palette_label"); var labelElement = el.find(".palette_label");
labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines));
el.find(".palette_port_output").css({top:(multiLineNodeHeight-5)+"px"}); if (RED.view.virtical()) {
el.find(".palette_port_input").css({top: "-5px"}); el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px", left: "55px"});
el.find(".palette_port_output").css({top:(multiLineNodeHeight-5)+"px", right: "55px"});
el.find(".palette_port_input").css({top: "-5px"});
}else{
el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"});
// el.find(".palette_port_output").css({top:(multiLineNodeHeight/2-5)+"px", right: "-6px", left: "auto"});
}
var popOverContent; var popOverContent;
try { try {

3
editor/js/ui/userSettings.js
View File

@ -120,7 +120,8 @@ RED.userSettings = (function() {
{ {
title: "menu.label.other", title: "menu.label.other",
options: [ options: [
{setting:"view-show-tips",oldSettings:"menu-menu-item-show-tips",label:"menu.label.showTips",toggle:true,default:true,onchange:"core:toggle-show-tips"} {setting:"view-show-tips",oldSettings:"menu-menu-item-show-tips",label:"menu.label.showTips",toggle:true,default:true,onchange:"core:toggle-show-tips"},
{setting:"view-flow-virtical",label:"menu.label.view.flowVirtical",toggle:true,default:true,onchange:RED.view.virtical}
] ]
} }
]; ];

109
editor/js/ui/view.js
View File

@ -33,6 +33,7 @@ RED.view = (function() {
var gridSize = 20; var gridSize = 20;
var snapGrid = false; var snapGrid = false;
var virtical = false;
var activeSpliceLink; var activeSpliceLink;
var spliceActive = false; var spliceActive = false;
@ -659,10 +660,13 @@ RED.view = (function() {
nn.changed = true; nn.changed = true;
nn.moved = true; nn.moved = true;
// nn.w = node_width; if (virtical) {
// nn.h = Math.max(node_height,(nn.outputs||0) * 15); nn.w = Math.max(node_width,(nn.outputs||0) * 15);
nn.w = Math.max(node_width,(nn.outputs||0) * 15); nn.h = node_height;
nn.h = node_height; }else{
nn.w = node_width;
nn.h = Math.max(node_height,(nn.outputs||0) * 15);
}
var historyEvent = { var historyEvent = {
t:"add", t:"add",
@ -937,11 +941,18 @@ RED.view = (function() {
var drag_line = drag_lines[i]; var drag_line = drag_lines[i];
var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1; var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1;
var sourcePort = drag_line.port; var sourcePort = drag_line.port;
var portX = -((numOutputs-1)/2)*13 +13*sourcePort; if (virtical) {
var portX = -((numOutputs-1)/2)*13 +13*sourcePort;
}else{
var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
}
var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1; var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1;
if (virtical) {
drag_line.el.attr("d",generateLinkPathV(drag_line.node.x+portX,drag_line.node.y,mousePos[0],mousePos[1],sc)); drag_line.el.attr("d",generateLinkPathV(drag_line.node.x+portX,drag_line.node.y,mousePos[0],mousePos[1],sc));
}else{
drag_line.el.attr("d",generateLinkPath(drag_line.node.x+sc*drag_line.node.w/2,drag_line.node.y+portY,mousePos[0],mousePos[1],sc))
}
} }
d3.event.preventDefault(); d3.event.preventDefault();
} else if (mouse_mode == RED.state.MOVING) { } else if (mouse_mode == RED.state.MOVING) {
@ -2077,10 +2088,17 @@ RED.view = (function() {
if (isLink) { if (isLink) {
d.w = node_height; d.w = node_height;
} else { } else {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 ); if (virtical) {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 );
}else{
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
}
}
if (virtical) {
d.h = node_height;
}else{
d.h = Math.max(node_height,(d.outputs||0) * 15);
} }
// d.h = Math.max(node_height,(d.outputs||0) * 15);
d.h = node_height;
if (d._def.badge) { if (d._def.badge) {
var badge = node.append("svg:g").attr("class","node_badge_group"); var badge = node.append("svg:g").attr("class","node_badge_group");
@ -2266,9 +2284,13 @@ RED.view = (function() {
if (!isLink && d.resize) { if (!isLink && d.resize) {
var l = RED.utils.getNodeLabel(d); var l = RED.utils.getNodeLabel(d);
var ow = d.w; 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)),(d.outputs||0) * 15 ); if (virtical) {
// d.h = Math.max(node_height,(d.outputs||0) * 15); d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 );
d.h = node_height; d.h = 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.h = Math.max(node_height,(d.outputs||0) * 15);
}
d.x += (d.w-ow)/2; d.x += (d.w-ow)/2;
d.resize = false; d.resize = false;
} }
@ -2308,8 +2330,11 @@ RED.view = (function() {
} }
var numOutputs = d.outputs; var numOutputs = d.outputs;
// var y = (d.h/2)-((numOutputs-1)/2)*13; if (virtical) {
var x = (d.w/2)-((numOutputs-1)/2)*13; var x = (d.w/2)-((numOutputs-1)/2)*13;
}else{
var y = (d.h/2)-((numOutputs-1)/2)*13;
}
d.ports = d.ports || d3.range(numOutputs); d.ports = d.ports || d3.range(numOutputs);
d._ports = thisNode.selectAll(".port_output").data(d.ports); d._ports = thisNode.selectAll(".port_output").data(d.ports);
var output_group = d._ports.enter().append("g").attr("class","port_output"); var output_group = d._ports.enter().append("g").attr("class","port_output");
@ -2325,15 +2350,21 @@ RED.view = (function() {
d._ports.exit().remove(); d._ports.exit().remove();
if (d._ports) { if (d._ports) {
numOutputs = d.outputs || 1; numOutputs = d.outputs || 1;
// y = (d.h/2)-((numOutputs-1)/2)*13; if (virtical) {
// var x = d.w - 5; x = (d.w/2)-((numOutputs-1)/2)*13;
x = (d.w/2)-((numOutputs-1)/2)*13; var y = d.h - 5;
var y = d.h - 5; }else{
y = (d.h/2)-((numOutputs-1)/2)*13;
var x = d.w - 5;
}
d._ports.each(function(d,i) { d._ports.each(function(d,i) {
var port = d3.select(this); var port = d3.select(this);
//port.attr("y",(y+13*i)-5).attr("x",x); //port.attr("y",(y+13*i)-5).attr("x",x);
// port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); if (virtical) {
port.attr("transform", function(d) { return "translate("+((x+13*i)-5)+","+ y +")";}); port.attr("transform", function(d) { return "translate("+((x+13*i)-5)+","+ y +")";});
}else{
port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
}
}); });
} }
thisNode.selectAll("text.node_label").text(function(d,i){ thisNode.selectAll("text.node_label").text(function(d,i){
@ -2396,8 +2427,11 @@ RED.view = (function() {
thisNode.selectAll(".port_input").each(function(d,i) { thisNode.selectAll(".port_input").each(function(d,i) {
var port = d3.select(this); var port = d3.select(this);
// port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) if (virtical) {
port.attr("transform",function(d){return "translate("+((d.w/2)-5)+", -5)";}) port.attr("transform",function(d){return "translate("+((d.w/2)-5)+", -5)";})
}else{
port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";})
}
}); });
thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;}); thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
@ -2533,18 +2567,27 @@ RED.view = (function() {
link.attr("d",function(d){ link.attr("d",function(d){
var numOutputs = d.source.outputs || 1; var numOutputs = d.source.outputs || 1;
var sourcePort = d.sourcePort || 0; var sourcePort = d.sourcePort || 0;
var x = -((numOutputs-1)/2)*13 +13*sourcePort; if (virtical) {
d.x1 = d.source.x+x; var x = -((numOutputs-1)/2)*13 +13*sourcePort;
d.y1 = d.source.y+d.source.h/2; d.x1 = d.source.x+x;
d.x2 = d.target.x; d.y1 = d.source.y+d.source.h/2;
d.y2 = d.target.y-d.target.h/2; d.x2 = d.target.x;
d.y2 = d.target.y-d.target.h/2;
return generateLinkPathV(d.x1,d.y1,d.x2,d.y2,1);
}else{
var y = -((numOutputs-1)/2)*13 +13*sourcePort;
d.x1 = d.source.x+d.source.w/2;
d.y1 = d.source.y+y;
d.x2 = d.target.x-d.target.w/2;
d.y2 = d.target.y;
return generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
}
// return "M "+d.x1+" "+d.y1+ // return "M "+d.x1+" "+d.y1+
// " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+ // " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
// (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+ // (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
// d.x2+" "+d.y2; // d.x2+" "+d.y2;
return generateLinkPathV(d.x1,d.y1,d.x2,d.y2,1);
}); });
} }
}) })
@ -2955,6 +2998,14 @@ RED.view = (function() {
updateGrid(); updateGrid();
} }
}, },
virtical: function(v) {
if (v === undefined) {
return virtical;
} else {
virtical = v;
RED.view.redraw();
}
},
getActiveNodes: function() { getActiveNodes: function() {
return activeNodes; return activeNodes;
} }

3
red/api/editor/locales/en-US/editor.json
View File

@ -41,7 +41,8 @@
"defaultDir": "Default", "defaultDir": "Default",
"ltr": "Left-to-right", "ltr": "Left-to-right",
"rtl": "Right-to-left", "rtl": "Right-to-left",
"auto": "Contextual" "auto": "Contextual",
"flowVirtical": "Virtical flow"
}, },
"sidebar": { "sidebar": {
"show": "Show sidebar" "show": "Show sidebar"

3
red/api/editor/locales/ja/editor.json
View File

@ -41,7 +41,8 @@
"defaultDir": "標準", "defaultDir": "標準",
"ltr": "左から右", "ltr": "左から右",
"rtl": "右から左", "rtl": "右から左",
"auto": "文脈" "auto": "文脈",
"flowVirtical": "縦フロー"
}, },
"sidebar": { "sidebar": {
"show": "サイドバーを表示" "show": "サイドバーを表示"

3
red/api/editor/locales/zh-CN/editor.json
View File

@ -37,7 +37,8 @@
"defaultDir": "默认方向", "defaultDir": "默认方向",
"ltr": "从左到右", "ltr": "从左到右",
"rtl": "从右到左", "rtl": "从右到左",
"auto": "上下文" "auto": "上下文",
"flowVirtical": "Virtical flow"
}, },
"sidebar": { "sidebar": {
"show": "显示侧边栏" "show": "显示侧边栏"