diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 1ab148217..349812ade 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -1,4 +1,5 @@ { + "_comment" : "2022 Modification Copyright - Defense Unicorns", "common": { "label": { "name": "Name", @@ -86,7 +87,8 @@ "rtl": "Right-to-left", "auto": "Contextual", "language": "Language", - "browserDefault": "Browser default" + "browserDefault": "Browser default", + "flowVertical": "Vertical flow" }, "sidebar": { "show": "Show sidebar" diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 09f4758f1..2e1f9ad78 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -14,6 +14,8 @@ * limitations under the License. **/ +// 2022 Modification Copyright - Defense Unicorns + RED.palette = (function() { var exclusion = ['config','unknown','deprecated']; @@ -147,7 +149,14 @@ RED.palette = (function() { var labelElement = el.find(".red-ui-palette-label"); labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(lines)); - el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px"}); + if (RED.view.vertical()) { + el.find(".red-ui-palette-port").css({top:(multiLineNodeHeight/2-5)+"px", left: "55px"}); + el.find(".red-ui-palette-port-output").css({top:(multiLineNodeHeight-5)+"px", right: "55px"}); + el.find(".red-ui-palette-port-input").css({top: "-5px"}); + }else{ + el.find(".red-ui-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/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 1b61f396e..9befbd717 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 @@ -14,6 +14,8 @@ * limitations under the License. **/ +// 2022 Modification Copyright - Defense Unicorns + RED.userSettings = (function() { var trayWidth = 700; @@ -133,7 +135,8 @@ RED.userSettings = (function() { options: [ {setting:"view-show-grid",oldSetting:"menu-menu-item-view-show-grid",label:"menu.label.view.showGrid", default: true, toggle:true,onchange:"core:toggle-show-grid"}, {setting:"view-snap-grid",oldSetting:"menu-menu-item-view-snap-grid",label:"menu.label.view.snapGrid", default: true, toggle:true,onchange:"core:toggle-snap-grid"}, - {setting:"view-grid-size",label:"menu.label.view.gridSize",type:"number",default: 20, onchange:RED.view.gridSize} + {setting:"view-grid-size",label:"menu.label.view.gridSize",type:"number",default: 10, onchange:RED.view.gridSize}, + {setting:"view-flow-vertical",label:"menu.label.view.flowVertical",toggle:true,default:true,onchange:RED.view.vertical} ] }, { 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 5b9285152..72f0eed0a 100755 --- 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 @@ -14,6 +14,7 @@ * limitations under the License. **/ +// 2022 Modification Copyright - Defense Unicorns /*
#red-ui-workspace-chart * \- "outer" @@ -28,7 +29,7 @@ * |- "nodeLayer" */ -RED.view = (function() { + RED.view = (function() { var space_width = 5000, space_height = 5000, lineCurveScale = 0.75, @@ -47,6 +48,7 @@ RED.view = (function() { var gridSize = 20; var snapGrid = false; + var vertical = false; var activeSpliceLink; var spliceActive = false; @@ -927,6 +929,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); @@ -976,8 +1047,13 @@ RED.view = (function() { nn.changed = true; nn.moved = true; - nn.w = node_width; - nn.h = Math.max(node_height,(nn.outputs||0) * 15); + if (vertical) { + 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); + } nn.resize = true; var historyEvent = { @@ -1143,9 +1219,17 @@ RED.view = (function() { } var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1; var sourcePort = quickAddLink.port; - var portY = -((numOutputs-1)/2)*13 +13*sourcePort; + if (vertical) { + var portX = -((numOutputs-1)/2)*13 +13*sourcePort; + } else { + var portY = -((numOutputs-1)/2)*13 +13*sourcePort; + } var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1; - 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)); + if (vertical) { + 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)); + } } if (quickAddLink) { rebuildQuickAddLink(); @@ -1554,10 +1638,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 portY = -((numOutputs-1)/2)*13 +13*sourcePort; + 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; - 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)); + if (vertical) { + 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)); + } } d3.event.preventDefault(); } else if (mouse_mode == RED.state.MOVING) { @@ -4051,8 +4143,9 @@ RED.view = (function() { node[0][0].__textGroup__ = text; nodeContents.append(text); + var attr_output_translate = (vertical) ? 'translate(15,-5)' : 'translate(-5,15)'; var portEl = document.createElementNS("http://www.w3.org/2000/svg","g"); - portEl.setAttribute('transform','translate(-5,15)') + portEl.setAttribute('transform',attr_output_translate) var port = document.createElementNS("http://www.w3.org/2000/svg","rect"); port.setAttribute("class","red-ui-flow-port"); @@ -4090,7 +4183,8 @@ RED.view = (function() { .on("touchstart",nodeTouchStart) .on("touchend", nodeTouchEnd); - inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) + var attr_input_translate = (vertical) ? 'translate(15,35)' : 'translate(35,15)'; + inGroup.append("g").attr('transform',attr_input_translate).append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);d3.event.preventDefault();} ) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);}) @@ -4115,7 +4209,8 @@ RED.view = (function() { .on("touchstart",nodeTouchStart) .on("touchend", nodeTouchEnd); - statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) + var attr_status_translate = (vertical) ? 'translate(15,-5)' : 'translate(-5,15)'; + statusGroup.append("g").attr('transform',attr_status_translate).append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) .on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} ) .on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} ) .on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);}) @@ -4432,7 +4527,11 @@ RED.view = (function() { if (hideLabel) { d.w = node_height; } else { - d.w = Math.max(node_width,20*(Math.ceil((labelParts.width+50+(d._def.inputs>0?7:0))/20)) ); + if (vertical) { + d.w = Math.max(node_width,20*(Math.ceil((labelParts.width+50+(d._def.inputs>0?7:0))/20)),(d.outputs||0) * 15 ); + }else{ + d.w = Math.max(node_width,20*(Math.ceil((labelParts.width+50+(d._def.inputs>0?7:0))/20)) ); + } } if (ow !== undefined) { d.x += (d.w-ow)/2; @@ -4527,7 +4626,7 @@ RED.view = (function() { if (d.type === "link in") { inputGroupPorts = inputGroup.append("circle") - .attr("cx",-1).attr("cy",5) + .attr("cx",vertical ? 5 : -1).attr("cy",vertical ? -1 : 5) .attr("r",5) .attr("class","red-ui-flow-port red-ui-flow-link-port") } else { @@ -4553,7 +4652,11 @@ RED.view = (function() { numOutputs = 0; } } - var y = (d.h/2)-((numOutputs-1)/2)*13; + if (vertical) { + var x = (d.w/2)-((numOutputs-1)/2)*13; + }else{ + var y = (d.h/2)-((numOutputs-1)/2)*13; + } // Remove extra ports while (this.__outputs__.length > numOutputs) { @@ -4575,8 +4678,8 @@ RED.view = (function() { var portPort; if (d.type === "link out") { portPort = document.createElementNS("http://www.w3.org/2000/svg","circle"); - portPort.setAttribute("cx",11); - portPort.setAttribute("cy",5); + portPort.setAttribute("cx",vertical ? 6 : 11); + portPort.setAttribute("cy",vertical ? 11 : 6); portPort.setAttribute("r",5); portPort.setAttribute("class","red-ui-flow-port red-ui-flow-link-port"); } else { @@ -4605,9 +4708,18 @@ RED.view = (function() { } else { portGroup = this.__outputs__[portIndex]; } - var x = d.w - 5; - var y = (d.h/2)-((numOutputs-1)/2)*13; - portGroup.setAttribute("transform","translate("+x+","+((y+13*portIndex)-5)+")") + if (vertical) { + 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; + } + if (vertical) { + portGroup.setAttribute("transform","translate("+((d.w/2)-5)+", 25)") + }else{ + portGroup.setAttribute("transform","translate("+x+","+((y+13*i)-5)+")") + } } if (d._def.icon) { var icon = thisNode.select(".red-ui-flow-node-icon"); @@ -4645,7 +4757,11 @@ RED.view = (function() { thisNode.selectAll(".red-ui-flow-port-input").each(function(d,i) { var port = d3.select(this); - port.attr("transform",function(d){return "translate(-5,"+((d.h/2)-5)+")";}) + 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)+")";}) + } }); if (d._def.button) { @@ -4765,17 +4881,23 @@ RED.view = (function() { if (d.added || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) { 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 path; + 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; + d.x2 = d.target.x; + d.y2 = d.target.y-d.target.h/2; + path = 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; + path = 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; - var path = generateLinkPath(d.x1,d.y1,d.x2,d.y2,1); if (/NaN/.test(path)) { path = "" } @@ -5664,6 +5786,14 @@ RED.view = (function() { updateGrid(); } }, + vertical: function(v) { + if (v === undefined) { + return vertical; + } else { + vertical = v; + RED.view.redraw(); + } + }, getActiveNodes: function() { return activeNodes; },