From 842e9d761e60b8d65cf74046f263c3b58e9e7875 Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sat, 1 Dec 2018 13:28:19 +0900 Subject: [PATCH 01/11] baseline --- editor/js/ui/palette.js | 3 +- editor/js/ui/view.js | 117 ++++++++++++++++++++++++++++++++------- editor/sass/palette.scss | 4 +- 3 files changed, 101 insertions(+), 23 deletions(-) diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index f783abd2e..9e15f6fd7 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -105,7 +105,8 @@ RED.palette = (function() { var labelElement = el.find(".palette_label"); labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); - el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"}); + el.find(".palette_port_output").css({top:(multiLineNodeHeight-5)+"px"}); + el.find(".palette_port_input").css({top: "-5px"}); var popOverContent; try { diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 0709f9531..9d116e4cd 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -540,6 +540,75 @@ RED.view = (function() { } } + function generateLinkPathV(origX,origY, destX, destY, sc) { + var dy = destY-origY; + var dx = destX-origX; + var delta = Math.sqrt(dy*dy+dx*dx); + var scale = lineCurveScale; + var scaleX = 0; + if (dy*sc > 0) { + if (delta < node_height) { + scale = 0.75-0.75*((node_height-delta)/node_height); + // scale += 2*(Math.min(5*node_height,Math.abs(dx))/(5*node_height)); + // if (Math.abs(dy) < 3*node_height) { + // scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_height,Math.abs(dx))/(node_height)) ; + // } + } + } else { + scale = 0.4-0.2*(Math.max(0,(node_height-Math.min(Math.abs(dx),Math.abs(dy)))/node_height)); + } + if (dy*sc > 0) { + return "M "+origX+" "+origY+ + " C "+(origX+(node_width*scaleX))+" "+(origY+sc*scale*node_height)+" "+ + (destX-(node_width*scaleX))+" "+(destY-sc*scale*node_height)+" "+ + destX+" "+destY + } else { + + var midX = Math.floor(destX-dx/2); + var midY = Math.floor(destY-dy/2); + // + if (dx === 0) { + midX = destX + node_width; + } + var cp_width = node_width/2; + var x1 = (destX + midX)/2; + var topX = dx>0? Math.min(x1 - dx/2 , origX+cp_width) : Math.max(x1 - dx/2 , origX-cp_width); + var topY = origY + sc*node_height*scale; + var bottomX = dx>0?Math.max(x1, destX-cp_width):Math.min(x1, destX+cp_width); + var bottomY = destY - sc*node_height*scale; + var y1 = (origY+topY)/2; + var scx = dx>0?1:-1; + var cp = [ + [origX,y1], + [dx>0 ? Math.max(origX, topX-cp_width) : Math.min(origX, topX+cp_width), topY], + [dx>0 ? Math.max(midX, topX-cp_width) : Math.min(midX, topX-cp_width), y1], + [dx>0 ? Math.max(midX, bottomX-cp_width): Math.min(midX, bottomX+cp_width), bottomY], + [destX,(destY+bottomY)/2] + ]; + if (cp[2][0] === topX+scx*cp_width) { + if (Math.abs(dx) < cp_width*10) { + cp[1][0] = topX-scx*cp_width/2; + cp[3][0] = bottomX-scx*cp_width/2; + } + cp[2][1] = topY; + } + return "M "+origX+" "+origY+ + " C "+ + cp[0][0]+" "+cp[0][1]+" "+ + cp[1][0]+" "+cp[1][1]+" "+ + topX+" "+topY+ + " S "+ + cp[2][0]+" "+cp[2][1]+" "+ + midX+" "+midY+ + " S "+ + cp[3][0]+" "+cp[3][1]+" "+ + bottomX+" "+bottomY+ + " S "+ + cp[4][0]+" "+cp[4][1]+" "+ + destX+" "+destY + } + } + function addNode(type,x,y) { var m = /^subflow:(.+)$/.exec(type); @@ -590,8 +659,10 @@ RED.view = (function() { nn.changed = true; nn.moved = true; - nn.w = node_width; - nn.h = Math.max(node_height,(nn.outputs||0) * 15); + // nn.w = node_width; + // nn.h = Math.max(node_height,(nn.outputs||0) * 15); + nn.w = Math.max(node_width,(nn.outputs||0) * 15); + nn.h = node_height; var historyEvent = { t:"add", @@ -866,11 +937,11 @@ RED.view = (function() { var drag_line = drag_lines[i]; var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1; var sourcePort = drag_line.port; - var portY = -((numOutputs-1)/2)*13 +13*sourcePort; + var portX = -((numOutputs-1)/2)*13 +13*sourcePort; var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1; - 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)); + drag_line.el.attr("d",generateLinkPathV(drag_line.node.x+portX,drag_line.node.y,mousePos[0],mousePos[1],sc)); } d3.event.preventDefault(); } else if (mouse_mode == RED.state.MOVING) { @@ -2006,9 +2077,10 @@ RED.view = (function() { 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.outputs||0) * 15 ); } - 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) { var badge = node.append("svg:g").attr("class","node_badge_group"); @@ -2194,8 +2266,9 @@ RED.view = (function() { 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)) ); - 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 = Math.max(node_height,(d.outputs||0) * 15); + d.h = node_height; d.x += (d.w-ow)/2; d.resize = false; } @@ -2235,7 +2308,8 @@ RED.view = (function() { } var numOutputs = d.outputs; - var y = (d.h/2)-((numOutputs-1)/2)*13; + // var y = (d.h/2)-((numOutputs-1)/2)*13; + var x = (d.w/2)-((numOutputs-1)/2)*13; d.ports = d.ports || d3.range(numOutputs); d._ports = thisNode.selectAll(".port_output").data(d.ports); var output_group = d._ports.enter().append("g").attr("class","port_output"); @@ -2251,12 +2325,15 @@ RED.view = (function() { d._ports.exit().remove(); if (d._ports) { numOutputs = d.outputs || 1; - y = (d.h/2)-((numOutputs-1)/2)*13; - var x = d.w - 5; + // y = (d.h/2)-((numOutputs-1)/2)*13; + // var x = d.w - 5; + x = (d.w/2)-((numOutputs-1)/2)*13; + var y = d.h - 5; d._ports.each(function(d,i) { var port = d3.select(this); //port.attr("y",(y+13*i)-5).attr("x",x); - port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); + // port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); + port.attr("transform", function(d) { return "translate("+((x+13*i)-5)+","+ y +")";}); }); } thisNode.selectAll("text.node_label").text(function(d,i){ @@ -2319,7 +2396,8 @@ RED.view = (function() { thisNode.selectAll(".port_input").each(function(d,i) { var port = d3.select(this); - port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) + // port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) + port.attr("transform",function(d){return "translate("+((d.w/2)-5)+", -5)";}) }); thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;}); @@ -2415,7 +2493,6 @@ RED.view = (function() { var l = d3.select(this); d.added = true; l.append("svg:path").attr("class","link_background link_path") - .classed("link_link", function(d) { return d.link }) .on("mousedown",function(d) { mousedown_link = d; clearSelection(); @@ -2456,18 +2533,18 @@ RED.view = (function() { link.attr("d",function(d){ var numOutputs = d.source.outputs || 1; var sourcePort = d.sourcePort || 0; - 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; + var x = -((numOutputs-1)/2)*13 +13*sourcePort; + d.x1 = d.source.x+x; + d.y1 = d.source.y+d.source.h/2; + d.x2 = d.target.x; + d.y2 = d.target.y-d.target.h/2; // return "M "+d.x1+" "+d.y1+ // " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+ // (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+ // d.x2+" "+d.y2; - return generateLinkPath(d.x1,d.y1,d.x2,d.y2,1); + return generateLinkPathV(d.x1,d.y1,d.x2,d.y2,1); }); } }) diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss index b81f97740..40f811747 100644 --- a/editor/sass/palette.scss +++ b/editor/sass/palette.scss @@ -146,7 +146,7 @@ .palette_port { position: absolute; top:8px; - left: -5px; + left: 55px; box-sizing: border-box; -moz-box-sizing: border-box; background:#d9d9d9; @@ -157,7 +157,7 @@ } .palette_port_output { left:auto; - right: -6px; + right: 55px; } .palette_node:hover .palette_port { From 8c64b2a898b763556b5f2b68d46cd3fafcb08118 Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sat, 1 Dec 2018 13:28:19 +0900 Subject: [PATCH 02/11] change flow view from horizontal to vertical --- editor/js/ui/palette.js | 3 +- editor/js/ui/view.js | 117 ++++++++++++++++++++++++++++++++------- editor/sass/palette.scss | 4 +- 3 files changed, 101 insertions(+), 23 deletions(-) diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index f783abd2e..9e15f6fd7 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -105,7 +105,8 @@ RED.palette = (function() { var labelElement = el.find(".palette_label"); labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); - el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"}); + el.find(".palette_port_output").css({top:(multiLineNodeHeight-5)+"px"}); + el.find(".palette_port_input").css({top: "-5px"}); var popOverContent; try { diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 0709f9531..9d116e4cd 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -540,6 +540,75 @@ RED.view = (function() { } } + function generateLinkPathV(origX,origY, destX, destY, sc) { + var dy = destY-origY; + var dx = destX-origX; + var delta = Math.sqrt(dy*dy+dx*dx); + var scale = lineCurveScale; + var scaleX = 0; + if (dy*sc > 0) { + if (delta < node_height) { + scale = 0.75-0.75*((node_height-delta)/node_height); + // scale += 2*(Math.min(5*node_height,Math.abs(dx))/(5*node_height)); + // if (Math.abs(dy) < 3*node_height) { + // scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_height,Math.abs(dx))/(node_height)) ; + // } + } + } else { + scale = 0.4-0.2*(Math.max(0,(node_height-Math.min(Math.abs(dx),Math.abs(dy)))/node_height)); + } + if (dy*sc > 0) { + return "M "+origX+" "+origY+ + " C "+(origX+(node_width*scaleX))+" "+(origY+sc*scale*node_height)+" "+ + (destX-(node_width*scaleX))+" "+(destY-sc*scale*node_height)+" "+ + destX+" "+destY + } else { + + var midX = Math.floor(destX-dx/2); + var midY = Math.floor(destY-dy/2); + // + if (dx === 0) { + midX = destX + node_width; + } + var cp_width = node_width/2; + var x1 = (destX + midX)/2; + var topX = dx>0? Math.min(x1 - dx/2 , origX+cp_width) : Math.max(x1 - dx/2 , origX-cp_width); + var topY = origY + sc*node_height*scale; + var bottomX = dx>0?Math.max(x1, destX-cp_width):Math.min(x1, destX+cp_width); + var bottomY = destY - sc*node_height*scale; + var y1 = (origY+topY)/2; + var scx = dx>0?1:-1; + var cp = [ + [origX,y1], + [dx>0 ? Math.max(origX, topX-cp_width) : Math.min(origX, topX+cp_width), topY], + [dx>0 ? Math.max(midX, topX-cp_width) : Math.min(midX, topX-cp_width), y1], + [dx>0 ? Math.max(midX, bottomX-cp_width): Math.min(midX, bottomX+cp_width), bottomY], + [destX,(destY+bottomY)/2] + ]; + if (cp[2][0] === topX+scx*cp_width) { + if (Math.abs(dx) < cp_width*10) { + cp[1][0] = topX-scx*cp_width/2; + cp[3][0] = bottomX-scx*cp_width/2; + } + cp[2][1] = topY; + } + return "M "+origX+" "+origY+ + " C "+ + cp[0][0]+" "+cp[0][1]+" "+ + cp[1][0]+" "+cp[1][1]+" "+ + topX+" "+topY+ + " S "+ + cp[2][0]+" "+cp[2][1]+" "+ + midX+" "+midY+ + " S "+ + cp[3][0]+" "+cp[3][1]+" "+ + bottomX+" "+bottomY+ + " S "+ + cp[4][0]+" "+cp[4][1]+" "+ + destX+" "+destY + } + } + function addNode(type,x,y) { var m = /^subflow:(.+)$/.exec(type); @@ -590,8 +659,10 @@ RED.view = (function() { nn.changed = true; nn.moved = true; - nn.w = node_width; - nn.h = Math.max(node_height,(nn.outputs||0) * 15); + // nn.w = node_width; + // nn.h = Math.max(node_height,(nn.outputs||0) * 15); + nn.w = Math.max(node_width,(nn.outputs||0) * 15); + nn.h = node_height; var historyEvent = { t:"add", @@ -866,11 +937,11 @@ RED.view = (function() { var drag_line = drag_lines[i]; var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1; var sourcePort = drag_line.port; - var portY = -((numOutputs-1)/2)*13 +13*sourcePort; + var portX = -((numOutputs-1)/2)*13 +13*sourcePort; var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1; - 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)); + drag_line.el.attr("d",generateLinkPathV(drag_line.node.x+portX,drag_line.node.y,mousePos[0],mousePos[1],sc)); } d3.event.preventDefault(); } else if (mouse_mode == RED.state.MOVING) { @@ -2006,9 +2077,10 @@ RED.view = (function() { 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.outputs||0) * 15 ); } - 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) { var badge = node.append("svg:g").attr("class","node_badge_group"); @@ -2194,8 +2266,9 @@ RED.view = (function() { 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)) ); - 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 = Math.max(node_height,(d.outputs||0) * 15); + d.h = node_height; d.x += (d.w-ow)/2; d.resize = false; } @@ -2235,7 +2308,8 @@ RED.view = (function() { } var numOutputs = d.outputs; - var y = (d.h/2)-((numOutputs-1)/2)*13; + // var y = (d.h/2)-((numOutputs-1)/2)*13; + var x = (d.w/2)-((numOutputs-1)/2)*13; d.ports = d.ports || d3.range(numOutputs); d._ports = thisNode.selectAll(".port_output").data(d.ports); var output_group = d._ports.enter().append("g").attr("class","port_output"); @@ -2251,12 +2325,15 @@ RED.view = (function() { d._ports.exit().remove(); if (d._ports) { numOutputs = d.outputs || 1; - y = (d.h/2)-((numOutputs-1)/2)*13; - var x = d.w - 5; + // y = (d.h/2)-((numOutputs-1)/2)*13; + // var x = d.w - 5; + x = (d.w/2)-((numOutputs-1)/2)*13; + var y = d.h - 5; d._ports.each(function(d,i) { var port = d3.select(this); //port.attr("y",(y+13*i)-5).attr("x",x); - port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); + // port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); + port.attr("transform", function(d) { return "translate("+((x+13*i)-5)+","+ y +")";}); }); } thisNode.selectAll("text.node_label").text(function(d,i){ @@ -2319,7 +2396,8 @@ RED.view = (function() { thisNode.selectAll(".port_input").each(function(d,i) { var port = d3.select(this); - port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) + // port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) + port.attr("transform",function(d){return "translate("+((d.w/2)-5)+", -5)";}) }); thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;}); @@ -2415,7 +2493,6 @@ RED.view = (function() { var l = d3.select(this); d.added = true; l.append("svg:path").attr("class","link_background link_path") - .classed("link_link", function(d) { return d.link }) .on("mousedown",function(d) { mousedown_link = d; clearSelection(); @@ -2456,18 +2533,18 @@ RED.view = (function() { link.attr("d",function(d){ var numOutputs = d.source.outputs || 1; var sourcePort = d.sourcePort || 0; - 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; + var x = -((numOutputs-1)/2)*13 +13*sourcePort; + d.x1 = d.source.x+x; + d.y1 = d.source.y+d.source.h/2; + d.x2 = d.target.x; + d.y2 = d.target.y-d.target.h/2; // return "M "+d.x1+" "+d.y1+ // " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+ // (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+ // d.x2+" "+d.y2; - return generateLinkPath(d.x1,d.y1,d.x2,d.y2,1); + return generateLinkPathV(d.x1,d.y1,d.x2,d.y2,1); }); } }) diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss index b81f97740..40f811747 100644 --- a/editor/sass/palette.scss +++ b/editor/sass/palette.scss @@ -146,7 +146,7 @@ .palette_port { position: absolute; top:8px; - left: -5px; + left: 55px; box-sizing: border-box; -moz-box-sizing: border-box; background:#d9d9d9; @@ -157,7 +157,7 @@ } .palette_port_output { left:auto; - right: -6px; + right: 55px; } .palette_node:hover .palette_port { From cc584331ed47af9b4480cff2feb929a5d5008224 Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sat, 1 Dec 2018 22:54:14 +0900 Subject: [PATCH 03/11] add user settings and toggle virtical view --- editor/js/ui/palette.js | 10 ++- editor/js/ui/userSettings.js | 3 +- editor/js/ui/view.js | 109 +++++++++++++++++------ editor/sass/palette.scss | 4 +- red/api/editor/locales/en-US/editor.json | 3 +- red/api/editor/locales/ja/editor.json | 3 +- red/api/editor/locales/zh-CN/editor.json | 3 +- 7 files changed, 98 insertions(+), 37 deletions(-) diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index 9e15f6fd7..0a1804f04 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -105,8 +105,14 @@ RED.palette = (function() { var labelElement = el.find(".palette_label"); labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); - el.find(".palette_port_output").css({top:(multiLineNodeHeight-5)+"px"}); - el.find(".palette_port_input").css({top: "-5px"}); + if (RED.view.virtical()) { + 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; try { diff --git a/editor/js/ui/userSettings.js b/editor/js/ui/userSettings.js index 59bf085b1..d7459e263 100644 --- a/editor/js/ui/userSettings.js +++ b/editor/js/ui/userSettings.js @@ -120,7 +120,8 @@ RED.userSettings = (function() { { title: "menu.label.other", 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} ] } ]; diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 9d116e4cd..32e324bf9 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -33,6 +33,7 @@ RED.view = (function() { var gridSize = 20; var snapGrid = false; + var virtical = false; var activeSpliceLink; var spliceActive = false; @@ -659,10 +660,13 @@ RED.view = (function() { nn.changed = true; nn.moved = true; - // nn.w = node_width; - // nn.h = Math.max(node_height,(nn.outputs||0) * 15); - nn.w = Math.max(node_width,(nn.outputs||0) * 15); - nn.h = node_height; + if (virtical) { + nn.w = Math.max(node_width,(nn.outputs||0) * 15); + nn.h = node_height; + }else{ + nn.w = node_width; + nn.h = Math.max(node_height,(nn.outputs||0) * 15); + } var historyEvent = { t:"add", @@ -937,11 +941,18 @@ RED.view = (function() { var drag_line = drag_lines[i]; var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1; 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; - - drag_line.el.attr("d",generateLinkPathV(drag_line.node.x+portX,drag_line.node.y,mousePos[0],mousePos[1],sc)); + if (virtical) { + 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(); } else if (mouse_mode == RED.state.MOVING) { @@ -2077,10 +2088,17 @@ RED.view = (function() { 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.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) { var badge = node.append("svg:g").attr("class","node_badge_group"); @@ -2266,9 +2284,13 @@ RED.view = (function() { 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)),(d.outputs||0) * 15 ); - // d.h = Math.max(node_height,(d.outputs||0) * 15); - d.h = node_height; + 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 ); + 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.resize = false; } @@ -2308,8 +2330,11 @@ RED.view = (function() { } var numOutputs = d.outputs; - // var y = (d.h/2)-((numOutputs-1)/2)*13; - var x = (d.w/2)-((numOutputs-1)/2)*13; + if (virtical) { + 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 = thisNode.selectAll(".port_output").data(d.ports); var output_group = d._ports.enter().append("g").attr("class","port_output"); @@ -2325,15 +2350,21 @@ RED.view = (function() { d._ports.exit().remove(); if (d._ports) { numOutputs = d.outputs || 1; - // y = (d.h/2)-((numOutputs-1)/2)*13; - // var x = d.w - 5; - x = (d.w/2)-((numOutputs-1)/2)*13; - var y = d.h - 5; + if (virtical) { + x = (d.w/2)-((numOutputs-1)/2)*13; + 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) { var port = d3.select(this); //port.attr("y",(y+13*i)-5).attr("x",x); - // port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";}); - port.attr("transform", function(d) { return "translate("+((x+13*i)-5)+","+ y +")";}); + if (virtical) { + 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){ @@ -2396,8 +2427,11 @@ RED.view = (function() { thisNode.selectAll(".port_input").each(function(d,i) { var port = d3.select(this); - // port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) - port.attr("transform",function(d){return "translate("+((d.w/2)-5)+", -5)";}) + if (virtical) { + 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;}); @@ -2533,18 +2567,27 @@ RED.view = (function() { link.attr("d",function(d){ var numOutputs = d.source.outputs || 1; var sourcePort = d.sourcePort || 0; - var x = -((numOutputs-1)/2)*13 +13*sourcePort; - d.x1 = d.source.x+x; - d.y1 = d.source.y+d.source.h/2; - d.x2 = d.target.x; - d.y2 = d.target.y-d.target.h/2; + if (virtical) { + var x = -((numOutputs-1)/2)*13 +13*sourcePort; + d.x1 = d.source.x+x; + d.y1 = d.source.y+d.source.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+ // " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+ // (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+ // d.x2+" "+d.y2; - return generateLinkPathV(d.x1,d.y1,d.x2,d.y2,1); }); } }) @@ -2955,6 +2998,14 @@ RED.view = (function() { updateGrid(); } }, + virtical: function(v) { + if (v === undefined) { + return virtical; + } else { + virtical = v; + RED.view.redraw(); + } + }, getActiveNodes: function() { return activeNodes; } diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss index 40f811747..b81f97740 100644 --- a/editor/sass/palette.scss +++ b/editor/sass/palette.scss @@ -146,7 +146,7 @@ .palette_port { position: absolute; top:8px; - left: 55px; + left: -5px; box-sizing: border-box; -moz-box-sizing: border-box; background:#d9d9d9; @@ -157,7 +157,7 @@ } .palette_port_output { left:auto; - right: 55px; + right: -6px; } .palette_node:hover .palette_port { diff --git a/red/api/editor/locales/en-US/editor.json b/red/api/editor/locales/en-US/editor.json index 689b030b1..ec6bd694d 100644 --- a/red/api/editor/locales/en-US/editor.json +++ b/red/api/editor/locales/en-US/editor.json @@ -41,7 +41,8 @@ "defaultDir": "Default", "ltr": "Left-to-right", "rtl": "Right-to-left", - "auto": "Contextual" + "auto": "Contextual", + "flowVirtical": "Virtical flow" }, "sidebar": { "show": "Show sidebar" diff --git a/red/api/editor/locales/ja/editor.json b/red/api/editor/locales/ja/editor.json index 3da5791dd..3e566c9b9 100644 --- a/red/api/editor/locales/ja/editor.json +++ b/red/api/editor/locales/ja/editor.json @@ -41,7 +41,8 @@ "defaultDir": "標準", "ltr": "左から右", "rtl": "右から左", - "auto": "文脈" + "auto": "文脈", + "flowVirtical": "縦フロー" }, "sidebar": { "show": "サイドバーを表示" diff --git a/red/api/editor/locales/zh-CN/editor.json b/red/api/editor/locales/zh-CN/editor.json index d4b07c1b2..af54621d0 100644 --- a/red/api/editor/locales/zh-CN/editor.json +++ b/red/api/editor/locales/zh-CN/editor.json @@ -37,7 +37,8 @@ "defaultDir": "默认方向", "ltr": "从左到右", "rtl": "从右到左", - "auto": "上下文" + "auto": "上下文", + "flowVirtical": "Virtical flow" }, "sidebar": { "show": "显示侧边栏" From 6de8b337690ec1bc6bcd76ebb8c41908d8790798 Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sun, 2 Dec 2018 14:27:48 +0900 Subject: [PATCH 04/11] fix typo --- editor/js/ui/palette.js | 2 +- editor/js/ui/userSettings.js | 2 +- editor/js/ui/view.js | 30 +++++++++++++++--------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index 0a1804f04..d647a086f 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -105,7 +105,7 @@ RED.palette = (function() { var labelElement = el.find(".palette_label"); labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); - if (RED.view.virtical()) { + if (RED.view.vertical()) { 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"}); diff --git a/editor/js/ui/userSettings.js b/editor/js/ui/userSettings.js index d7459e263..ae54bf09d 100644 --- a/editor/js/ui/userSettings.js +++ b/editor/js/ui/userSettings.js @@ -121,7 +121,7 @@ RED.userSettings = (function() { title: "menu.label.other", 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-flow-virtical",label:"menu.label.view.flowVirtical",toggle:true,default:true,onchange:RED.view.virtical} + {setting:"view-flow-vertical",label:"menu.label.view.flowVirtical",toggle:true,default:true,onchange:RED.view.vertical} ] } ]; diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 32e324bf9..4f399faff 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -33,7 +33,7 @@ RED.view = (function() { var gridSize = 20; var snapGrid = false; - var virtical = false; + var vertical = false; var activeSpliceLink; var spliceActive = false; @@ -660,7 +660,7 @@ RED.view = (function() { nn.changed = true; nn.moved = true; - if (virtical) { + if (vertical) { nn.w = Math.max(node_width,(nn.outputs||0) * 15); nn.h = node_height; }else{ @@ -941,14 +941,14 @@ RED.view = (function() { var drag_line = drag_lines[i]; var numOutputs = (drag_line.portType === PORT_TYPE_OUTPUT)?(drag_line.node.outputs || 1):1; var sourcePort = drag_line.port; - if (virtical) { + if (vertical) { 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; - if (virtical) { + if (vertical) { 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)) @@ -2088,13 +2088,13 @@ RED.view = (function() { if (isLink) { d.w = node_height; } else { - if (virtical) { + if (vertical) { 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) { + if (vertical) { d.h = node_height; }else{ d.h = Math.max(node_height,(d.outputs||0) * 15); @@ -2284,7 +2284,7 @@ RED.view = (function() { if (!isLink && d.resize) { var l = RED.utils.getNodeLabel(d); var ow = d.w; - if (virtical) { + if (vertical) { 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; }else{ @@ -2330,7 +2330,7 @@ RED.view = (function() { } var numOutputs = d.outputs; - if (virtical) { + if (vertical) { var x = (d.w/2)-((numOutputs-1)/2)*13; }else{ var y = (d.h/2)-((numOutputs-1)/2)*13; @@ -2350,7 +2350,7 @@ RED.view = (function() { d._ports.exit().remove(); if (d._ports) { numOutputs = d.outputs || 1; - if (virtical) { + if (vertical) { x = (d.w/2)-((numOutputs-1)/2)*13; var y = d.h - 5; }else{ @@ -2360,7 +2360,7 @@ RED.view = (function() { d._ports.each(function(d,i) { var port = d3.select(this); //port.attr("y",(y+13*i)-5).attr("x",x); - if (virtical) { + if (vertical) { 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)+")";}); @@ -2427,7 +2427,7 @@ RED.view = (function() { thisNode.selectAll(".port_input").each(function(d,i) { var port = d3.select(this); - if (virtical) { + if (vertical) { 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)+")";}) @@ -2567,7 +2567,7 @@ RED.view = (function() { link.attr("d",function(d){ var numOutputs = d.source.outputs || 1; var sourcePort = d.sourcePort || 0; - if (virtical) { + if (vertical) { var x = -((numOutputs-1)/2)*13 +13*sourcePort; d.x1 = d.source.x+x; d.y1 = d.source.y+d.source.h/2; @@ -2998,11 +2998,11 @@ RED.view = (function() { updateGrid(); } }, - virtical: function(v) { + vertical: function(v) { if (v === undefined) { - return virtical; + return vertical; } else { - virtical = v; + vertical = v; RED.view.redraw(); } }, From 43a07301fd36755bdc186188f65223ebf59db15d Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sun, 2 Dec 2018 14:42:14 +0900 Subject: [PATCH 05/11] fix scss --- editor/sass/palette.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor/sass/palette.scss b/editor/sass/palette.scss index 40f811747..b81f97740 100644 --- a/editor/sass/palette.scss +++ b/editor/sass/palette.scss @@ -146,7 +146,7 @@ .palette_port { position: absolute; top:8px; - left: 55px; + left: -5px; box-sizing: border-box; -moz-box-sizing: border-box; background:#d9d9d9; @@ -157,7 +157,7 @@ } .palette_port_output { left:auto; - right: 55px; + right: -6px; } .palette_node:hover .palette_port { From c3bc3f37804a54bd11896f96860ef96198e2c324 Mon Sep 17 00:00:00 2001 From: sakazuki Date: Mon, 3 Dec 2018 20:30:29 +0900 Subject: [PATCH 06/11] fix typo --- editor/js/ui/userSettings.js | 2 +- red/api/editor/locales/en-US/editor.json | 2 +- red/api/editor/locales/ja/editor.json | 2 +- red/api/editor/locales/zh-CN/editor.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/editor/js/ui/userSettings.js b/editor/js/ui/userSettings.js index ae54bf09d..1b9193ebe 100644 --- a/editor/js/ui/userSettings.js +++ b/editor/js/ui/userSettings.js @@ -121,7 +121,7 @@ RED.userSettings = (function() { title: "menu.label.other", 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-flow-vertical",label:"menu.label.view.flowVirtical",toggle:true,default:true,onchange:RED.view.vertical} + {setting:"view-flow-vertical",label:"menu.label.view.flowVertical",toggle:true,default:true,onchange:RED.view.vertical} ] } ]; diff --git a/red/api/editor/locales/en-US/editor.json b/red/api/editor/locales/en-US/editor.json index ec6bd694d..e7cc38fc6 100644 --- a/red/api/editor/locales/en-US/editor.json +++ b/red/api/editor/locales/en-US/editor.json @@ -42,7 +42,7 @@ "ltr": "Left-to-right", "rtl": "Right-to-left", "auto": "Contextual", - "flowVirtical": "Virtical flow" + "flowVertical": "Vertical flow" }, "sidebar": { "show": "Show sidebar" diff --git a/red/api/editor/locales/ja/editor.json b/red/api/editor/locales/ja/editor.json index 3e566c9b9..6f77cdd51 100644 --- a/red/api/editor/locales/ja/editor.json +++ b/red/api/editor/locales/ja/editor.json @@ -42,7 +42,7 @@ "ltr": "左から右", "rtl": "右から左", "auto": "文脈", - "flowVirtical": "縦フロー" + "flowVertical": "縦フロー" }, "sidebar": { "show": "サイドバーを表示" diff --git a/red/api/editor/locales/zh-CN/editor.json b/red/api/editor/locales/zh-CN/editor.json index af54621d0..172ea957e 100644 --- a/red/api/editor/locales/zh-CN/editor.json +++ b/red/api/editor/locales/zh-CN/editor.json @@ -38,7 +38,7 @@ "ltr": "从左到右", "rtl": "从右到左", "auto": "上下文", - "flowVirtical": "Virtical flow" + "flowVertical": "Vertical flow" }, "sidebar": { "show": "显示侧边栏" From 8b8bd83ec2eed3d3a5a8fc1e4a5b41d534e4a8d5 Mon Sep 17 00:00:00 2001 From: sakazuki Date: Tue, 30 Apr 2019 16:14:58 +0900 Subject: [PATCH 07/11] hand merge master --- packages/node_modules/@node-red/editor-client/src/js/ui/view.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index acab59483..6f1b7f552 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -3184,6 +3184,7 @@ RED.view = (function() { var l = d3.select(this); d.added = true; l.append("svg:path").attr("class","link_background link_path") + .classed("link_link", function(d) { return d.link }) .on("mousedown",function(d) { mousedown_link = d; clearSelection(); From 69d5ffe1edb30d6d133c2c97b996635a26f69029 Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sat, 2 Nov 2019 13:52:58 +0900 Subject: [PATCH 08/11] adjust source position of link to draw --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 274bf3540..460d50a08 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -870,7 +870,7 @@ RED.view = (function() { } var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1; if (vertical) { - quickAddLink.el.attr("d",generateLinkPathV(quickAddLink.node.x+portX+sc*quickAddLink.node.w/2,quickAddLink.node.y,point[0]-sc*node_width/2,point[1],sc)); + quickAddLink.el.attr("d",generateLinkPathV(quickAddLink.node.x+portX,quickAddLink.node.y+sc*quickAddLink.node.h/2,point[0]-sc*node_width/2,point[1],sc)); }else{ quickAddLink.el.attr("d",generateLinkPath(quickAddLink.node.x+sc*quickAddLink.node.w/2,quickAddLink.node.y+portY,point[0]-sc*node_width/2,point[1],sc)); } @@ -1235,7 +1235,7 @@ RED.view = (function() { var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1; if (vertical) { - 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+sc*drag_line.node.h/2,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)); } From 22dd2cd084a7e0eb0809c547d364f1db0c0b8c4d Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sat, 2 Nov 2019 16:44:51 +0900 Subject: [PATCH 09/11] fix position of status text, change & error mark --- .../@node-red/editor-client/src/js/ui/view.js | 35 ++++++++++++++----- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 460d50a08..3a789c57d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -3237,13 +3237,24 @@ RED.view = (function() { } } - thisNode.selectAll(".red-ui-flow-node-changed") - .attr("transform",function(d){return "translate("+(d.w-10)+", -2)"}) - .classed("hide",function(d) { return !(d.changed||d.moved); }); + if (vertical) { + thisNode.selectAll(".red-ui-flow-node-changed") + .attr("transform",function(d){return "translate("+(d.w-2)+", -2)"}) + .classed("hide",function(d) { return !(d.changed||d.moved); }); + + thisNode.selectAll(".red-ui-flow-node-error") + .attr("transform",function(d){ return "translate("+(d.w-2-((d.changed||d.moved)?14:0))+", -2)"}) + .classed("hide",function(d) { return d.valid; }); + } else { + thisNode.selectAll(".red-ui-flow-node-changed") + .attr("transform",function(d){return "translate("+(d.w-10)+", -2)"}) + .classed("hide",function(d) { return !(d.changed||d.moved); }); + + thisNode.selectAll(".red-ui-flow-node-error") + .attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"}) + .classed("hide",function(d) { return d.valid; }); + } - thisNode.selectAll(".red-ui-flow-node-error") - .attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"}) - .classed("hide",function(d) { return d.valid; }); thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) { var port = d3.select(this); @@ -3316,9 +3327,17 @@ RED.view = (function() { var fill = status_colours[d.status.fill]; // Only allow our colours for now if (d.status.shape == null && fill == null) { thisNode.selectAll(".red-ui-flow-node-status").style("display","none"); - thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(-14,"+(d.h+3)+")"); + if (vertical) { + thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(" + (-14+d.w/2) + ","+(d.h+3)+")"); + } else { + thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(-14,"+(d.h+3)+")"); + } } else { - thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(3,"+(d.h+3)+")"); + if (vertical) { + thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(" + (3 + d.w/2) + ","+(d.h+3)+")"); + } else { + thisNode.selectAll(".red-ui-flow-node-status-group").attr("transform","translate(3,"+(d.h+3)+")"); + } var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill; thisNode.selectAll(".red-ui-flow-node-status").style("display","inline").attr("class","red-ui-flow-node-status "+statusClass); } From 981a9c4f8febc89dc697bd0393d09eac2565214e Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sun, 3 Nov 2019 10:29:17 +0900 Subject: [PATCH 10/11] fix hideLabel handling --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 3a789c57d..87dd69738 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -3063,7 +3063,11 @@ RED.view = (function() { var l = RED.utils.getNodeLabel(d); var ow = d.w; if (vertical) { - d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 ); + if (hideLabel) { + d.w = node_height + } else { + d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 ); + } d.h = node_height; }else{ if (hideLabel) { From 45a634866967a6d75f3d32174cda5f7506921c1a Mon Sep 17 00:00:00 2001 From: sakazuki Date: Sat, 9 Nov 2019 11:14:45 +0900 Subject: [PATCH 11/11] change default vertical option to false --- .../@node-red/editor-client/src/js/ui/userSettings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js index f0063513d..9e52bdbf3 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js @@ -134,7 +134,7 @@ RED.userSettings = (function() { title: "menu.label.other", 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-flow-vertical",label:"menu.label.view.flowVertical",toggle:true,default:true,onchange:RED.view.vertical} + {setting:"view-flow-vertical",label:"menu.label.view.flowVertical",toggle:true,default:false,onchange:RED.view.vertical} ] } ];