From 1c3058415386fc7111fb50cee930306e65e60097 Mon Sep 17 00:00:00 2001 From: Hiroyasu Nishiyama Date: Sat, 13 Jun 2020 23:33:45 +0900 Subject: [PATCH] fix code indentation --- .../@node-red/editor-client/src/js/ui/view.js | 876 +++++++++--------- 1 file changed, 438 insertions(+), 438 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 94da011b6..877730229 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 @@ -3505,464 +3505,464 @@ RED.view = (function() { nodeEnter.each(function(d,i) { - this.__outputs__ = []; - this.__inputs__ = []; - var node = d3.select(this); - var nodeContents = document.createDocumentFragment(); + this.__outputs__ = []; + this.__inputs__ = []; + var node = d3.select(this); + var nodeContents = document.createDocumentFragment(); + var isLink = (d.type === "link in" || d.type === "link out") + var hideLabel = d.hasOwnProperty('l')?!d.l : isLink; + node.attr("id",d.id); + var labelWidth = calculateTextWidth(RED.utils.getNodeLabel(d), "red-ui-flow-node-label") + 50; + if (d.resize || d.w === undefined) { + if (hideLabel) { + d.w = node_height; + } else { + d.w = Math.max(node_width,20*(Math.ceil((labelWidth+(d._def.inputs>0?7:0))/20)) ); + } + } + if (hideLabel) { + d.h = Math.max(node_height,(d.outputs || 0) * 15); + } else { + d.h = Math.max(6+24*separateTextByLineBreak.length, (d.outputs || 0) * 15, 30); + } + // if (d._def.badge) { + // var badge = node.append("svg:g").attr("class","node_badge_group"); + // var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15); + // badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge()); + // if (d._def.onbadgeclick) { + // badgeRect.attr("cursor","pointer") + // .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();}); + // } + // } + if (d._def.button) { + var buttonGroup = document.createElementNS("http://www.w3.org/2000/svg","g"); + buttonGroup.__data__ = d; + buttonGroup.setAttribute("transform", "translate("+((d._def.align == "right") ? 94 : -25)+",2)"); + buttonGroup.setAttribute("class","red-ui-flow-node-button"); + node[0][0].__buttonGroup__ = buttonGroup; + + var bgBackground = document.createElementNS("http://www.w3.org/2000/svg","rect"); + bgBackground.__data__ = d; + bgBackground.setAttribute("class","red-ui-flow-node-button-background"); + bgBackground.setAttribute("rx",5); + bgBackground.setAttribute("ry",5); + bgBackground.setAttribute("width",32); + bgBackground.setAttribute("height",node_height-4); + buttonGroup.appendChild(bgBackground); + node[0][0].__buttonGroupBackground__ = bgBackground; + + var bgButton = document.createElementNS("http://www.w3.org/2000/svg","rect"); + bgButton.__data__ = d; + bgButton.setAttribute("class","red-ui-flow-node-button-button"); + bgButton.setAttribute("x", d._def.align == "right"? 11:5); + bgButton.setAttribute("y",4); + bgButton.setAttribute("rx",4); + bgButton.setAttribute("ry",4); + bgButton.setAttribute("width",16); + bgButton.setAttribute("height",node_height-12); + bgButton.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def)); + bgButton.setAttribute("cursor","pointer"); + d3.select(bgButton) + .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}}) + .on("mouseup",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}}) + .on("mouseover",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);}}) + .on("mouseout",function(d) {if (!lasso && isButtonEnabled(d)) { + var op = 1; + if (d._def.button.toggle) { + op = d[d._def.button.toggle]?1:0.2; + } + d3.select(this).attr("fill-opacity",op); + }}) + .on("click",nodeButtonClicked) + .on("touchstart",function(d) { nodeButtonClicked.call(this,d); d3.event.preventDefault();}) + buttonGroup.appendChild(bgButton); + node[0][0].__buttonGroupButton__ = bgButton; + + nodeContents.appendChild(buttonGroup); + + } + + var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect"); + mainRect.__data__ = d; + mainRect.setAttribute("class", "red-ui-flow-node "+(d.type == "unknown"?"red-ui-flow-node-unknown":"")); + mainRect.setAttribute("rx", 5); + mainRect.setAttribute("ry", 5); + mainRect.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def)); + node[0][0].__mainRect__ = mainRect; + d3.select(mainRect) + .on("mouseup",nodeMouseUp) + .on("mousedown",nodeMouseDown) + .on("touchstart",nodeTouchStart) + .on("touchend",nodeTouchEnd) + .on("mouseover",nodeMouseOver) + .on("mouseout",nodeMouseOut); + nodeContents.appendChild(mainRect); + //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none"); + //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none"); + + if (d._def.icon) { + var icon_url = RED.utils.getNodeIcon(d._def,d); + var icon_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g"); + icon_groupEl.__data__ = d; + icon_groupEl.setAttribute("class","red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":"")); + icon_groupEl.setAttribute("x",0); + icon_groupEl.setAttribute("y",0); + icon_groupEl.style["pointer-events"] = "none"; + node[0][0].__iconGroup__ = icon_groupEl; + var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","rect"); + icon_shade.setAttribute("x",0); + icon_shade.setAttribute("y",0); + icon_shade.setAttribute("class","red-ui-flow-node-icon-shade") + icon_shade.setAttribute("width",30); + icon_shade.setAttribute("height",Math.min(50,d.h-4)); + icon_groupEl.appendChild(icon_shade); + node[0][0].__iconShade__ = icon_shade; + + var icon_group = d3.select(icon_groupEl) + createIconAttributes(icon_url, icon_group, d); + + var icon_shade_border = document.createElementNS("http://www.w3.org/2000/svg","path"); + icon_shade_border.setAttribute("d","right" != d._def.align ? "M 30 1 l 0 "+(d.h-2) : "M 0 1 l 0 "+(d.h-2) ) + icon_shade_border.setAttribute("class", "red-ui-flow-node-icon-shade-border") + icon_groupEl.appendChild(icon_shade_border); + node[0][0].__iconShadeBorder__ = icon_shade_border; + + nodeContents.appendChild(icon_groupEl); + } + var text = document.createElementNS("http://www.w3.org/2000/svg","text"); + text.setAttribute("class","red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")); + text.setAttribute("x", 38); + text.setAttribute("dy", ".3px"); + text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end"); + nodeContents.appendChild(text); + + var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g"); + // statusEl.__data__ = d; + statusEl.setAttribute("class","red-ui-flow-node-status-group"); + statusEl.style.display = "none"; + node[0][0].__statusGroup__ = statusEl; + + var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect"); + statusRect.setAttribute("class","red-ui-flow-node-status"); + statusRect.setAttribute("x",6); + statusRect.setAttribute("y",1); + statusRect.setAttribute("width",9); + statusRect.setAttribute("height",9); + statusRect.setAttribute("rx",2); + statusRect.setAttribute("ry",2); + statusRect.setAttribute("stroke-width","3"); + statusEl.appendChild(statusRect); + node[0][0].__statusShape__ = statusRect; + + var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text"); + statusLabel.setAttribute("class","red-ui-flow-node-status-label"); + statusLabel.setAttribute("x",20); + statusLabel.setAttribute("y",10); + statusEl.appendChild(statusLabel); + node[0][0].__statusLabel__ = statusLabel; + + nodeContents.appendChild(statusEl); + + + var changeBadgeG = document.createElementNS("http://www.w3.org/2000/svg","g"); + changeBadgeG.setAttribute("class","red-ui-flow-node-changed hide"); + changeBadgeG.setAttribute("transform","translate(20, -2)"); + node[0][0].__changeBadge__ = changeBadgeG; + var changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle"); + changeBadge.setAttribute("r",5); + changeBadgeG.appendChild(changeBadge); + nodeContents.appendChild(changeBadgeG); + + + var errorBadgeG = document.createElementNS("http://www.w3.org/2000/svg","g"); + errorBadgeG.setAttribute("class","red-ui-flow-node-error hide"); + errorBadgeG.setAttribute("transform","translate(0, -2)"); + node[0][0].__errorBadge__ = errorBadgeG; + var errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path"); + errorBadge.setAttribute("d","M -5,4 l 10,0 -5,-8 z"); + errorBadgeG.appendChild(errorBadge); + errorBadge.__data__ = d; + errorBadge.addEventListener("mouseenter", errorBadgeMouseEnter); + errorBadge.addEventListener("mouseleave", errorBadgeMouseLeave); + nodeContents.appendChild(errorBadgeG); + + node[0][0].appendChild(nodeContents); + }); + node.each(function(d,i) { + if (d.dirty) { var isLink = (d.type === "link in" || d.type === "link out") var hideLabel = d.hasOwnProperty('l')?!d.l : isLink; - node.attr("id",d.id); - var labelWidth = calculateTextWidth(RED.utils.getNodeLabel(d), "red-ui-flow-node-label") + 50; - if (d.resize || d.w === undefined) { + dirtyNodes[d.id] = d; + //if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette + + var label = RED.utils.getNodeLabel(d, d.type); + var labelWidth = calculateTextWidth(label, "red-ui-flow-node-label") + 50; + if (d.resize) { + var ow = d.w; if (hideLabel) { d.w = node_height; } else { d.w = Math.max(node_width,20*(Math.ceil((labelWidth+(d._def.inputs>0?7:0))/20)) ); } + // 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.x += (d.w-ow)/2; + d.resize = false; } if (hideLabel) { d.h = Math.max(node_height,(d.outputs || 0) * 15); } else { - d.h = Math.max(6+24*separateTextByLineBreak.length, (d.outputs || 0) * 15, 30); - } - // if (d._def.badge) { - // var badge = node.append("svg:g").attr("class","node_badge_group"); - // var badgeRect = badge.append("rect").attr("class","node_badge").attr("rx",5).attr("ry",5).attr("width",40).attr("height",15); - // badge.append("svg:text").attr("class","node_badge_label").attr("x",35).attr("y",11).attr("text-anchor","end").text(d._def.badge()); - // if (d._def.onbadgeclick) { - // badgeRect.attr("cursor","pointer") - // .on("click",function(d) { d._def.onbadgeclick.call(d);d3.event.preventDefault();}); - // } - // } - if (d._def.button) { - var buttonGroup = document.createElementNS("http://www.w3.org/2000/svg","g"); - buttonGroup.__data__ = d; - buttonGroup.setAttribute("transform", "translate("+((d._def.align == "right") ? 94 : -25)+",2)"); - buttonGroup.setAttribute("class","red-ui-flow-node-button"); - node[0][0].__buttonGroup__ = buttonGroup; - - var bgBackground = document.createElementNS("http://www.w3.org/2000/svg","rect"); - bgBackground.__data__ = d; - bgBackground.setAttribute("class","red-ui-flow-node-button-background"); - bgBackground.setAttribute("rx",5); - bgBackground.setAttribute("ry",5); - bgBackground.setAttribute("width",32); - bgBackground.setAttribute("height",node_height-4); - buttonGroup.appendChild(bgBackground); - node[0][0].__buttonGroupBackground__ = bgBackground; - - var bgButton = document.createElementNS("http://www.w3.org/2000/svg","rect"); - bgButton.__data__ = d; - bgButton.setAttribute("class","red-ui-flow-node-button-button"); - bgButton.setAttribute("x", d._def.align == "right"? 11:5); - bgButton.setAttribute("y",4); - bgButton.setAttribute("rx",4); - bgButton.setAttribute("ry",4); - bgButton.setAttribute("width",16); - bgButton.setAttribute("height",node_height-12); - bgButton.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def)); - bgButton.setAttribute("cursor","pointer"); - d3.select(bgButton) - .on("mousedown",function(d) {if (!lasso && isButtonEnabled(d)) {focusView();d3.select(this).attr("fill-opacity",0.2);d3.event.preventDefault(); d3.event.stopPropagation();}}) - .on("mouseup",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);d3.event.preventDefault();d3.event.stopPropagation();}}) - .on("mouseover",function(d) {if (!lasso && isButtonEnabled(d)) { d3.select(this).attr("fill-opacity",0.4);}}) - .on("mouseout",function(d) {if (!lasso && isButtonEnabled(d)) { - var op = 1; - if (d._def.button.toggle) { - op = d[d._def.button.toggle]?1:0.2; - } - d3.select(this).attr("fill-opacity",op); - }}) - .on("click",nodeButtonClicked) - .on("touchstart",function(d) { nodeButtonClicked.call(this,d); d3.event.preventDefault();}) - buttonGroup.appendChild(bgButton); - node[0][0].__buttonGroupButton__ = bgButton; - - nodeContents.appendChild(buttonGroup); - + d.h = Math.max(6+24*separateTextByLineBreak.length,(d.outputs || 0) * 15, 30); } - var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect"); - mainRect.__data__ = d; - mainRect.setAttribute("class", "red-ui-flow-node "+(d.type == "unknown"?"red-ui-flow-node-unknown":"")); - mainRect.setAttribute("rx", 5); - mainRect.setAttribute("ry", 5); - mainRect.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def)); - node[0][0].__mainRect__ = mainRect; - d3.select(mainRect) - .on("mouseup",nodeMouseUp) - .on("mousedown",nodeMouseDown) - .on("touchstart",nodeTouchStart) - .on("touchend",nodeTouchEnd) - .on("mouseover",nodeMouseOver) - .on("mouseout",nodeMouseOut); - nodeContents.appendChild(mainRect); - //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none"); - //node.append("rect").attr("class", "node-gradient-bottom").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-bottom)").style("pointer-events","none"); + var thisNode = d3.select(this); + //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}}); + this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"); + if (mouse_mode != RED.state.MOVING_ACTIVE) { + this.classList.toggle("red-ui-flow-node-disabled", d.d === true); + this.classList.toggle("red-ui-flow-subflow", activeSubflow != null) + this.classList.toggle("red-ui-flow-node-selected", !!d.selected ) + this.__mainRect__.setAttribute("width", d.w) + this.__mainRect__.setAttribute("height", d.h) + this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted ); - if (d._def.icon) { - var icon_url = RED.utils.getNodeIcon(d._def,d); - var icon_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g"); - icon_groupEl.__data__ = d; - icon_groupEl.setAttribute("class","red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":"")); - icon_groupEl.setAttribute("x",0); - icon_groupEl.setAttribute("y",0); - icon_groupEl.style["pointer-events"] = "none"; - node[0][0].__iconGroup__ = icon_groupEl; - var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","rect"); - icon_shade.setAttribute("x",0); - icon_shade.setAttribute("y",0); - icon_shade.setAttribute("class","red-ui-flow-node-icon-shade") - icon_shade.setAttribute("width",30); - icon_shade.setAttribute("height",Math.min(50,d.h-4)); - icon_groupEl.appendChild(icon_shade); - node[0][0].__iconShade__ = icon_shade; + var text = thisNode.selectAll(".red-ui-flow-node-label"); + thisNode.selectAll(".red-ui-flow-node-label-text").remove(); + var sa = convertLineBreakCharacter(label); + var sn = sa.length; + var yp = d.h / 2 - (sn / 2) * 24 + 16 + sa.forEach(function (line) { + text.append("tspan") + .classed("red-ui-flow-node-label-text", true) + .text(line) + .attr("x", 38) + .attr("y", yp); + yp += 24; + }); - var icon_group = d3.select(icon_groupEl) - createIconAttributes(icon_url, icon_group, d); - - var icon_shade_border = document.createElementNS("http://www.w3.org/2000/svg","path"); - icon_shade_border.setAttribute("d","right" != d._def.align ? "M 30 1 l 0 "+(d.h-2) : "M 0 1 l 0 "+(d.h-2) ) - icon_shade_border.setAttribute("class", "red-ui-flow-node-icon-shade-border") - icon_groupEl.appendChild(icon_shade_border); - node[0][0].__iconShadeBorder__ = icon_shade_border; - - nodeContents.appendChild(icon_groupEl); - } - var text = document.createElementNS("http://www.w3.org/2000/svg","text"); - text.setAttribute("class","red-ui-flow-node-label"+(hideLabel?" hide":"")+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")); - text.setAttribute("x", 38); - text.setAttribute("dy", ".3px"); - text.setAttribute("text-anchor",d._def.align !== "right" ? "start":"end"); - nodeContents.appendChild(text); - - var statusEl = document.createElementNS("http://www.w3.org/2000/svg","g"); - // statusEl.__data__ = d; - statusEl.setAttribute("class","red-ui-flow-node-status-group"); - statusEl.style.display = "none"; - node[0][0].__statusGroup__ = statusEl; - - var statusRect = document.createElementNS("http://www.w3.org/2000/svg","rect"); - statusRect.setAttribute("class","red-ui-flow-node-status"); - statusRect.setAttribute("x",6); - statusRect.setAttribute("y",1); - statusRect.setAttribute("width",9); - statusRect.setAttribute("height",9); - statusRect.setAttribute("rx",2); - statusRect.setAttribute("ry",2); - statusRect.setAttribute("stroke-width","3"); - statusEl.appendChild(statusRect); - node[0][0].__statusShape__ = statusRect; - - var statusLabel = document.createElementNS("http://www.w3.org/2000/svg","text"); - statusLabel.setAttribute("class","red-ui-flow-node-status-label"); - statusLabel.setAttribute("x",20); - statusLabel.setAttribute("y",10); - statusEl.appendChild(statusLabel); - node[0][0].__statusLabel__ = statusLabel; - - nodeContents.appendChild(statusEl); - - - var changeBadgeG = document.createElementNS("http://www.w3.org/2000/svg","g"); - changeBadgeG.setAttribute("class","red-ui-flow-node-changed hide"); - changeBadgeG.setAttribute("transform","translate(20, -2)"); - node[0][0].__changeBadge__ = changeBadgeG; - var changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle"); - changeBadge.setAttribute("r",5); - changeBadgeG.appendChild(changeBadge); - nodeContents.appendChild(changeBadgeG); - - - var errorBadgeG = document.createElementNS("http://www.w3.org/2000/svg","g"); - errorBadgeG.setAttribute("class","red-ui-flow-node-error hide"); - errorBadgeG.setAttribute("transform","translate(0, -2)"); - node[0][0].__errorBadge__ = errorBadgeG; - var errorBadge = document.createElementNS("http://www.w3.org/2000/svg","path"); - errorBadge.setAttribute("d","M -5,4 l 10,0 -5,-8 z"); - errorBadgeG.appendChild(errorBadge); - errorBadge.__data__ = d; - errorBadge.addEventListener("mouseenter", errorBadgeMouseEnter); - errorBadge.addEventListener("mouseleave", errorBadgeMouseLeave); - nodeContents.appendChild(errorBadgeG); - - node[0][0].appendChild(nodeContents); - }); - node.each(function(d,i) { - if (d.dirty) { - var isLink = (d.type === "link in" || d.type === "link out") - var hideLabel = d.hasOwnProperty('l')?!d.l : isLink; - dirtyNodes[d.id] = d; - //if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette - - var label = RED.utils.getNodeLabel(d, d.type); - var labelWidth = calculateTextWidth(label, "red-ui-flow-node-label") + 50; - if (d.resize) { - var ow = d.w; - if (hideLabel) { - d.w = node_height; - } else { - d.w = Math.max(node_width,20*(Math.ceil((labelWidth+(d._def.inputs>0?7:0))/20)) ); + var textClass = ""; + if (d._def.labelStyle) { + textClass = d._def.labelStyle; + try { + textClass = (typeof textClass === "function" ? textClass.call(d) : textClass)||""; + } catch(err) { + console.log("Definition error: "+d.type+".labelStyle",err); + textClass = ""; } - // 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.x += (d.w-ow)/2; - d.resize = false; + textClass = " "+textClass; } - if (hideLabel) { - d.h = Math.max(node_height,(d.outputs || 0) * 15); + textClass = "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+textClass+(hideLabel?" hide":""); + text.attr("class", textClass); + + if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) { + this.__iconGroup__.classList.toggle("red-ui-flow-node-icon-group-right", true); + thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end"); } else { - d.h = Math.max(6+24*separateTextByLineBreak.length,(d.outputs || 0) * 15, 30); + if (this.__iconGroup__) {// is null for uknown nodes + this.__iconGroup__.classList.toggle("red-ui-flow-node-icon-group-right", false); + } + thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start"); } + var alignX; + // thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", "translate(0, 0)" ); + thisNode.selectAll(".red-ui-flow-node-label").attr("x", function () { alignX=38; return 38; }); + thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", "translate("+(d.w-30)+",0)"); + thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(){ alignX=d.w-38; return d.w-38}); - var thisNode = d3.select(this); - //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}}); - this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"); - if (mouse_mode != RED.state.MOVING_ACTIVE) { - this.classList.toggle("red-ui-flow-node-disabled", d.d === true); - this.classList.toggle("red-ui-flow-subflow", activeSubflow != null) - this.classList.toggle("red-ui-flow-node-selected", !!d.selected ) - this.__mainRect__.setAttribute("width", d.w) - this.__mainRect__.setAttribute("height", d.h) - this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted ); + thisNode.selectAll(".red-ui-flow-node-label-text").attr("x", function () { return 38; }); + thisNode.selectAll(".red-ui-flow-node-label-right").selectAll("tspan").attr("x", function(){ return d.w-38}); + //thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);}); + //thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;}); + //thisNode.selectAll(".red-ui-flow-node-icon-shade-border-right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)}); + var inputPorts = thisNode.selectAll(".red-ui-flow-port-input"); + if ((!isLink || (showAllLinkPorts === -1 && !activeLinkNodes[d.id])) && d.inputs === 0 && !inputPorts.empty()) { + inputPorts.remove(); + } else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) { + var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input"); + var inputGroupPorts; - var text = thisNode.selectAll(".red-ui-flow-node-label"); - thisNode.selectAll(".red-ui-flow-node-label-text").remove(); - var sa = convertLineBreakCharacter(label); - var sn = sa.length; - var yp = d.h / 2 - (sn / 2) * 24 + 16 - sa.forEach(function (line) { - text.append("tspan") - .classed("red-ui-flow-node-label-text", true) - .text(line) - .attr("x", 38) - .attr("y", yp); - yp += 24; - }); - - var textClass = ""; - if (d._def.labelStyle) { - textClass = d._def.labelStyle; - try { - textClass = (typeof textClass === "function" ? textClass.call(d) : textClass)||""; - } catch(err) { - console.log("Definition error: "+d.type+".labelStyle",err); - textClass = ""; - } - textClass = " "+textClass; - } - textClass = "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+textClass+(hideLabel?" hide":""); - text.attr("class", textClass); - - if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) { - this.__iconGroup__.classList.toggle("red-ui-flow-node-icon-group-right", true); - thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", true).attr("text-anchor", "end"); + if (d.type === "link in") { + inputGroupPorts = inputGroup.append("circle") + .attr("cx",-1).attr("cy",5) + .attr("r",5) + .attr("class","red-ui-flow-port red-ui-flow-link-port") } else { - if (this.__iconGroup__) {// is null for uknown nodes - this.__iconGroup__.classList.toggle("red-ui-flow-node-icon-group-right", false); - } - thisNode.selectAll(".red-ui-flow-node-label").classed("red-ui-flow-node-label-right", false).attr("text-anchor", "start"); + inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) } - var alignX; - // thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", "translate(0, 0)" ); - thisNode.selectAll(".red-ui-flow-node-label").attr("x", function () { alignX=38; return 38; }); - thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", "translate("+(d.w-30)+",0)"); - thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(){ alignX=d.w-38; return d.w-38}); + inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) + .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();}) + .on("mouseup",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} ) + .on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} ) + .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) + .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); + } + var numOutputs = d.outputs; + if (isLink && d.type === "link out") { + if (showAllLinkPorts===PORT_TYPE_OUTPUT || activeLinkNodes[d.id]) { + numOutputs = 1; + } else { + numOutputs = 0; + } + } + var y = (d.h/2)-((numOutputs-1)/2)*13; - thisNode.selectAll(".red-ui-flow-node-label-text").attr("x", function () { return 38; }); - thisNode.selectAll(".red-ui-flow-node-label-right").selectAll("tspan").attr("x", function(){ return d.w-38}); - //thisNode.selectAll(".red-ui-flow-node-icon-right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);}); - //thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;}); - //thisNode.selectAll(".red-ui-flow-node-icon-shade-border-right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)}); - var inputPorts = thisNode.selectAll(".red-ui-flow-port-input"); - if ((!isLink || (showAllLinkPorts === -1 && !activeLinkNodes[d.id])) && d.inputs === 0 && !inputPorts.empty()) { - inputPorts.remove(); - } else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) { - var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input"); - var inputGroupPorts; + // Remove extra ports + while (this.__outputs__.length > numOutputs) { + var port = this.__outputs__.pop(); + port.remove(); + } + for(var portIndex = 0; portIndex < numOutputs; portIndex++ ) { + var portGroup; + if (portIndex === this.__outputs__.length) { + portGroup = document.createElementNS("http://www.w3.org/2000/svg","g"); + portGroup.setAttribute("class","red-ui-flow-port-output"); + 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("r",5); + portPort.setAttribute("class","red-ui-flow-port red-ui-flow-link-port"); + } else { + portPort = document.createElementNS("http://www.w3.org/2000/svg","rect"); + portPort.setAttribute("rx",3); + portPort.setAttribute("ry",3); + portPort.setAttribute("width",10); + portPort.setAttribute("height",10); + portPort.setAttribute("class","red-ui-flow-port"); + } + portGroup.appendChild(portPort); + portPort.__data__ = this.__data__; + portPort.__portType__ = PORT_TYPE_OUTPUT; + portPort.__portIndex__ = portIndex; + portPort.addEventListener("mousedown", portMouseDownProxy); + portPort.addEventListener("touchstart", portTouchStartProxy); + portPort.addEventListener("mouseup", portMouseUpProxy); + portPort.addEventListener("touchstart", portTouchEndProxy); + portPort.addEventListener("mouseover", portMouseOverProxy); + portPort.addEventListener("mouseout", portMouseOutProxy); - if (d.type === "link in") { - inputGroupPorts = inputGroup.append("circle") - .attr("cx",-1).attr("cy",5) - .attr("r",5) - .attr("class","red-ui-flow-port red-ui-flow-link-port") - } else { - inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10) - } - inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);}) - .on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();}) - .on("mouseup",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} ) - .on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} ) - .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) - .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); - } - var numOutputs = d.outputs; - if (isLink && d.type === "link out") { - if (showAllLinkPorts===PORT_TYPE_OUTPUT || activeLinkNodes[d.id]) { - numOutputs = 1; - } else { - numOutputs = 0; - } + this.appendChild(portGroup); + this.__outputs__.push(portGroup); + } else { + portGroup = this.__outputs__[portIndex]; } + var x = d.w - 5; var y = (d.h/2)-((numOutputs-1)/2)*13; - - // Remove extra ports - while (this.__outputs__.length > numOutputs) { - var port = this.__outputs__.pop(); - port.remove(); - } - for(var portIndex = 0; portIndex < numOutputs; portIndex++ ) { - var portGroup; - if (portIndex === this.__outputs__.length) { - portGroup = document.createElementNS("http://www.w3.org/2000/svg","g"); - portGroup.setAttribute("class","red-ui-flow-port-output"); - 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("r",5); - portPort.setAttribute("class","red-ui-flow-port red-ui-flow-link-port"); - } else { - portPort = document.createElementNS("http://www.w3.org/2000/svg","rect"); - portPort.setAttribute("rx",3); - portPort.setAttribute("ry",3); - portPort.setAttribute("width",10); - portPort.setAttribute("height",10); - portPort.setAttribute("class","red-ui-flow-port"); - } - portGroup.appendChild(portPort); - portPort.__data__ = this.__data__; - portPort.__portType__ = PORT_TYPE_OUTPUT; - portPort.__portIndex__ = portIndex; - portPort.addEventListener("mousedown", portMouseDownProxy); - portPort.addEventListener("touchstart", portTouchStartProxy); - portPort.addEventListener("mouseup", portMouseUpProxy); - portPort.addEventListener("touchstart", portTouchEndProxy); - portPort.addEventListener("mouseover", portMouseOverProxy); - portPort.addEventListener("mouseout", portMouseOutProxy); - - this.appendChild(portGroup); - this.__outputs__.push(portGroup); - } 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 (d._def.icon) { - var icon = thisNode.select(".red-ui-flow-node-icon"); - var faIcon = thisNode.select(".fa-lg"); - var current_url; - if (!icon.empty()) { - current_url = icon.attr("xlink:href"); - } else { - current_url = faIcon.attr("xlink:href"); - } - var new_url = RED.utils.getNodeIcon(d._def,d); - if (new_url !== current_url) { - if (!icon.empty()) { - icon.remove(); - } else { - faIcon.remove(); - } - var iconGroup = thisNode.select(".red-ui-flow-node-icon-group"); - createIconAttributes(new_url, iconGroup, d); - icon = thisNode.select(".red-ui-flow-node-icon"); - faIcon = thisNode.select(".fa-lg"); - } - - icon.attr("y",function(){return (d.h-d3.select(this).attr("height"))/2;}); - this.__iconShade__.setAttribute("height", d.h ); - this.__iconShadeBorder__.setAttribute("d", - "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2) - ); - faIcon.attr("y",(d.h+13)/2); - } - this.__changeBadge__.setAttribute("transform", "translate("+(d.w-10)+", -2)"); - this.__changeBadge__.classList.toggle("hide", !(d.changed||d.moved)); - this.__errorBadge__.setAttribute("transform", "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"); - this.__errorBadge__.classList.toggle("hide", d.valid); - - 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 (d._def.button) { - var buttonEnabled = isButtonEnabled(d); - this.__buttonGroup__.setAttribute("opacity", !buttonEnabled?0.4:1 ); - this.__buttonGroupButton__.setAttribute("cursor",buttonEnabled?"":"pointer"); - - var x = d._def.align == "right"?d.w-6:-25; - if (d._def.button.toggle && !d[d._def.button.toggle]) { - x = x - (d._def.align == "right"?8:-8); - } - this.__buttonGroup__.setAttribute("transform", "translate("+x+",2)"); - - this.__buttonGroupBackground__.setAttribute("fill-opacity",d._def.button.toggle?(d[d._def.button.toggle]?1:0.2):1) - - if (typeof d._def.button.visible === "function") { // is defined and a function... - if (d._def.button.visible.call(d) === false) { - this.__buttonGroup__.style.display = "none"; - } - else { - this.__buttonGroup__.style.display = "inherit"; - } - } - } - // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";}); - // thisNode.selectAll("text.node_badge_label").text(function(d,i) { - // if (d._def.badge) { - // if (typeof d._def.badge == "function") { - // try { - // return d._def.badge.call(d); - // } catch(err) { - // console.log("Definition error: "+d.type+".badge",err); - // return ""; - // } - // } else { - // return d._def.badge; - // } - // } - // return ""; - // }); + portGroup.setAttribute("transform","translate("+x+","+((y+13*portIndex)-5)+")") } - - if (d.dirtyStatus) { - if (!showStatus || !d.status) { - this.__statusGroup__.style.display = "none"; + if (d._def.icon) { + var icon = thisNode.select(".red-ui-flow-node-icon"); + var faIcon = thisNode.select(".fa-lg"); + var current_url; + if (!icon.empty()) { + current_url = icon.attr("xlink:href"); } else { - this.__statusGroup__.style.display = "inline"; - var fill = status_colours[d.status.fill]; // Only allow our colours for now - if (d.status.shape == null && fill == null) { - this.__statusShape__.style.display = "none"; - this.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")"); + current_url = faIcon.attr("xlink:href"); + } + var new_url = RED.utils.getNodeIcon(d._def,d); + if (new_url !== current_url) { + if (!icon.empty()) { + icon.remove(); } else { - this.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")"); - var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill; - this.__statusShape__.style.display = "inline"; - this.__statusShape__.setAttribute("class","red-ui-flow-node-status "+statusClass); + faIcon.remove(); } - if (d.status.hasOwnProperty('text')) { - this.__statusLabel__.textContent = d.status.text; - } else { - this.__statusLabel__.textContent = ""; + var iconGroup = thisNode.select(".red-ui-flow-node-icon-group"); + createIconAttributes(new_url, iconGroup, d); + icon = thisNode.select(".red-ui-flow-node-icon"); + faIcon = thisNode.select(".fa-lg"); + } + + icon.attr("y",function(){return (d.h-d3.select(this).attr("height"))/2;}); + this.__iconShade__.setAttribute("height", d.h ); + this.__iconShadeBorder__.setAttribute("d", + "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2) + ); + faIcon.attr("y",(d.h+13)/2); + } + this.__changeBadge__.setAttribute("transform", "translate("+(d.w-10)+", -2)"); + this.__changeBadge__.classList.toggle("hide", !(d.changed||d.moved)); + this.__errorBadge__.setAttribute("transform", "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"); + this.__errorBadge__.classList.toggle("hide", d.valid); + + 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 (d._def.button) { + var buttonEnabled = isButtonEnabled(d); + this.__buttonGroup__.setAttribute("opacity", !buttonEnabled?0.4:1 ); + this.__buttonGroupButton__.setAttribute("cursor",buttonEnabled?"":"pointer"); + + var x = d._def.align == "right"?d.w-6:-25; + if (d._def.button.toggle && !d[d._def.button.toggle]) { + x = x - (d._def.align == "right"?8:-8); + } + this.__buttonGroup__.setAttribute("transform", "translate("+x+",2)"); + + this.__buttonGroupBackground__.setAttribute("fill-opacity",d._def.button.toggle?(d[d._def.button.toggle]?1:0.2):1) + + if (typeof d._def.button.visible === "function") { // is defined and a function... + if (d._def.button.visible.call(d) === false) { + this.__buttonGroup__.style.display = "none"; + } + else { + this.__buttonGroup__.style.display = "inherit"; } } - delete d.dirtyStatus; } - d.dirty = false; - if (d.g) { - if (!dirtyGroups[d.g]) { - var gg = d.g; - while (gg && !dirtyGroups[gg]) { - dirtyGroups[gg] = RED.nodes.group(gg); - gg = dirtyGroups[gg].g; - } + // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";}); + // thisNode.selectAll("text.node_badge_label").text(function(d,i) { + // if (d._def.badge) { + // if (typeof d._def.badge == "function") { + // try { + // return d._def.badge.call(d); + // } catch(err) { + // console.log("Definition error: "+d.type+".badge",err); + // return ""; + // } + // } else { + // return d._def.badge; + // } + // } + // return ""; + // }); + } + + if (d.dirtyStatus) { + if (!showStatus || !d.status) { + this.__statusGroup__.style.display = "none"; + } else { + this.__statusGroup__.style.display = "inline"; + var fill = status_colours[d.status.fill]; // Only allow our colours for now + if (d.status.shape == null && fill == null) { + this.__statusShape__.style.display = "none"; + this.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")"); + } else { + this.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")"); + var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill; + this.__statusShape__.style.display = "inline"; + this.__statusShape__.setAttribute("class","red-ui-flow-node-status "+statusClass); + } + if (d.status.hasOwnProperty('text')) { + this.__statusLabel__.textContent = d.status.text; + } else { + this.__statusLabel__.textContent = ""; + } + } + delete d.dirtyStatus; + } + d.dirty = false; + if (d.g) { + if (!dirtyGroups[d.g]) { + var gg = d.g; + while (gg && !dirtyGroups[gg]) { + dirtyGroups[gg] = RED.nodes.group(gg); + gg = dirtyGroups[gg].g; } } } + } }); var link = linkLayer.selectAll(".red-ui-flow-link").data( activeLinks, @@ -4064,24 +4064,24 @@ RED.view = (function() { var y = -(flows.length-1)*h/2; var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows); var enterLinkGroups = linkGroups.enter().append("g").attr("class","red-ui-flow-link-group") - .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',true)}) - .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',false)}) - .on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); }) - .on('mouseup', function(f) { - if (mouse_mode !== 0) { - return - } - d3.event.stopPropagation(); - var targets = d.links[f]; - RED.workspaces.show(f); - targets.forEach(function(n) { - n.selected = true; - n.dirty = true; - moving_set.push({n:n}); - }); - updateSelection(); - redraw(); + .on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',true)}) + .on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('red-ui-flow-link-group-active',false)}) + .on('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); }) + .on('mouseup', function(f) { + if (mouse_mode !== 0) { + return + } + d3.event.stopPropagation(); + var targets = d.links[f]; + RED.workspaces.show(f); + targets.forEach(function(n) { + n.selected = true; + n.dirty = true; + moving_set.push({n:n}); }); + updateSelection(); + redraw(); + }); enterLinkGroups.each(function(f) { var linkG = d3.select(this); linkG.append("svg:path")