mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
fix code indentation
This commit is contained in:
Hiroyasu Nishiyama
parent
5c5bebd689
commit
1c30584153
@ -3505,464 +3505,464 @@ RED.view = (function() {
|
|||||||
|
|
||||||
|
|
||||||
nodeEnter.each(function(d,i) {
|
nodeEnter.each(function(d,i) {
|
||||||
this.__outputs__ = [];
|
this.__outputs__ = [];
|
||||||
this.__inputs__ = [];
|
this.__inputs__ = [];
|
||||||
var node = d3.select(this);
|
var node = d3.select(this);
|
||||||
var nodeContents = document.createDocumentFragment();
|
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 isLink = (d.type === "link in" || d.type === "link out")
|
||||||
var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
|
var hideLabel = d.hasOwnProperty('l')?!d.l : isLink;
|
||||||
node.attr("id",d.id);
|
dirtyNodes[d.id] = d;
|
||||||
var labelWidth = calculateTextWidth(RED.utils.getNodeLabel(d), "red-ui-flow-node-label") + 50;
|
//if (d.x < -50) deleteSelection(); // Delete nodes if dragged back to palette
|
||||||
if (d.resize || d.w === undefined) {
|
|
||||||
|
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) {
|
if (hideLabel) {
|
||||||
d.w = node_height;
|
d.w = node_height;
|
||||||
} else {
|
} 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((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) {
|
if (hideLabel) {
|
||||||
d.h = Math.max(node_height,(d.outputs || 0) * 15);
|
d.h = Math.max(node_height,(d.outputs || 0) * 15);
|
||||||
} else {
|
} else {
|
||||||
d.h = Math.max(6+24*separateTextByLineBreak.length, (d.outputs || 0) * 15, 30);
|
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");
|
var thisNode = d3.select(this);
|
||||||
mainRect.__data__ = d;
|
//thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
|
||||||
mainRect.setAttribute("class", "red-ui-flow-node "+(d.type == "unknown"?"red-ui-flow-node-unknown":""));
|
this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")");
|
||||||
mainRect.setAttribute("rx", 5);
|
if (mouse_mode != RED.state.MOVING_ACTIVE) {
|
||||||
mainRect.setAttribute("ry", 5);
|
this.classList.toggle("red-ui-flow-node-disabled", d.d === true);
|
||||||
mainRect.setAttribute("fill", RED.utils.getNodeColor(d.type,d._def));
|
this.classList.toggle("red-ui-flow-subflow", activeSubflow != null)
|
||||||
node[0][0].__mainRect__ = mainRect;
|
this.classList.toggle("red-ui-flow-node-selected", !!d.selected )
|
||||||
d3.select(mainRect)
|
this.__mainRect__.setAttribute("width", d.w)
|
||||||
.on("mouseup",nodeMouseUp)
|
this.__mainRect__.setAttribute("height", d.h)
|
||||||
.on("mousedown",nodeMouseDown)
|
this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
|
||||||
.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 text = thisNode.selectAll(".red-ui-flow-node-label");
|
||||||
var icon_url = RED.utils.getNodeIcon(d._def,d);
|
thisNode.selectAll(".red-ui-flow-node-label-text").remove();
|
||||||
var icon_groupEl = document.createElementNS("http://www.w3.org/2000/svg","g");
|
var sa = convertLineBreakCharacter(label);
|
||||||
icon_groupEl.__data__ = d;
|
var sn = sa.length;
|
||||||
icon_groupEl.setAttribute("class","red-ui-flow-node-icon-group"+("right" == d._def.align?" red-ui-flow-node-icon-group-right":""));
|
var yp = d.h / 2 - (sn / 2) * 24 + 16
|
||||||
icon_groupEl.setAttribute("x",0);
|
sa.forEach(function (line) {
|
||||||
icon_groupEl.setAttribute("y",0);
|
text.append("tspan")
|
||||||
icon_groupEl.style["pointer-events"] = "none";
|
.classed("red-ui-flow-node-label-text", true)
|
||||||
node[0][0].__iconGroup__ = icon_groupEl;
|
.text(line)
|
||||||
var icon_shade = document.createElementNS("http://www.w3.org/2000/svg","rect");
|
.attr("x", 38)
|
||||||
icon_shade.setAttribute("x",0);
|
.attr("y", yp);
|
||||||
icon_shade.setAttribute("y",0);
|
yp += 24;
|
||||||
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)
|
var textClass = "";
|
||||||
createIconAttributes(icon_url, icon_group, d);
|
if (d._def.labelStyle) {
|
||||||
|
textClass = d._def.labelStyle;
|
||||||
var icon_shade_border = document.createElementNS("http://www.w3.org/2000/svg","path");
|
try {
|
||||||
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) )
|
textClass = (typeof textClass === "function" ? textClass.call(d) : textClass)||"";
|
||||||
icon_shade_border.setAttribute("class", "red-ui-flow-node-icon-shade-border")
|
} catch(err) {
|
||||||
icon_groupEl.appendChild(icon_shade_border);
|
console.log("Definition error: "+d.type+".labelStyle",err);
|
||||||
node[0][0].__iconShadeBorder__ = icon_shade_border;
|
textClass = "";
|
||||||
|
|
||||||
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)) );
|
|
||||||
}
|
}
|
||||||
// d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
|
textClass = " "+textClass;
|
||||||
d.x += (d.w-ow)/2;
|
|
||||||
d.resize = false;
|
|
||||||
}
|
}
|
||||||
if (hideLabel) {
|
textClass = "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+textClass+(hideLabel?" hide":"");
|
||||||
d.h = Math.max(node_height,(d.outputs || 0) * 15);
|
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 {
|
} 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(".red-ui-flow-node-label-text").attr("x", function () { return 38; });
|
||||||
//thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
|
thisNode.selectAll(".red-ui-flow-node-label-right").selectAll("tspan").attr("x", function(){ return d.w-38});
|
||||||
this.setAttribute("transform", "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")");
|
//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);});
|
||||||
if (mouse_mode != RED.state.MOVING_ACTIVE) {
|
//thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
|
||||||
this.classList.toggle("red-ui-flow-node-disabled", d.d === true);
|
//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)});
|
||||||
this.classList.toggle("red-ui-flow-subflow", activeSubflow != null)
|
var inputPorts = thisNode.selectAll(".red-ui-flow-port-input");
|
||||||
this.classList.toggle("red-ui-flow-node-selected", !!d.selected )
|
if ((!isLink || (showAllLinkPorts === -1 && !activeLinkNodes[d.id])) && d.inputs === 0 && !inputPorts.empty()) {
|
||||||
this.__mainRect__.setAttribute("width", d.w)
|
inputPorts.remove();
|
||||||
this.__mainRect__.setAttribute("height", d.h)
|
} else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) {
|
||||||
this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
|
var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
|
||||||
|
var inputGroupPorts;
|
||||||
|
|
||||||
var text = thisNode.selectAll(".red-ui-flow-node-label");
|
if (d.type === "link in") {
|
||||||
thisNode.selectAll(".red-ui-flow-node-label-text").remove();
|
inputGroupPorts = inputGroup.append("circle")
|
||||||
var sa = convertLineBreakCharacter(label);
|
.attr("cx",-1).attr("cy",5)
|
||||||
var sn = sa.length;
|
.attr("r",5)
|
||||||
var yp = d.h / 2 - (sn / 2) * 24 + 16
|
.attr("class","red-ui-flow-port red-ui-flow-link-port")
|
||||||
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");
|
|
||||||
} else {
|
} else {
|
||||||
if (this.__iconGroup__) {// is null for uknown nodes
|
inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
|
||||||
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;
|
inputGroupPorts.on("mousedown",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);})
|
||||||
// thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", "translate(0, 0)" );
|
.on("touchstart",function(d){portMouseDown(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();})
|
||||||
thisNode.selectAll(".red-ui-flow-node-label").attr("x", function () { alignX=38; return 38; });
|
.on("mouseup",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);} )
|
||||||
thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", "translate("+(d.w-30)+",0)");
|
.on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
|
||||||
thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(){ alignX=d.w-38; return d.w-38});
|
.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; });
|
// Remove extra ports
|
||||||
thisNode.selectAll(".red-ui-flow-node-label-right").selectAll("tspan").attr("x", function(){ return d.w-38});
|
while (this.__outputs__.length > numOutputs) {
|
||||||
//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);});
|
var port = this.__outputs__.pop();
|
||||||
//thisNode.selectAll(".red-ui-flow-node-icon-shade-right").attr("x",function(d){return d.w-30;});
|
port.remove();
|
||||||
//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");
|
for(var portIndex = 0; portIndex < numOutputs; portIndex++ ) {
|
||||||
if ((!isLink || (showAllLinkPorts === -1 && !activeLinkNodes[d.id])) && d.inputs === 0 && !inputPorts.empty()) {
|
var portGroup;
|
||||||
inputPorts.remove();
|
if (portIndex === this.__outputs__.length) {
|
||||||
} else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) {
|
portGroup = document.createElementNS("http://www.w3.org/2000/svg","g");
|
||||||
var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
|
portGroup.setAttribute("class","red-ui-flow-port-output");
|
||||||
var inputGroupPorts;
|
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") {
|
this.appendChild(portGroup);
|
||||||
inputGroupPorts = inputGroup.append("circle")
|
this.__outputs__.push(portGroup);
|
||||||
.attr("cx",-1).attr("cy",5)
|
} else {
|
||||||
.attr("r",5)
|
portGroup = this.__outputs__[portIndex];
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
var x = d.w - 5;
|
||||||
var y = (d.h/2)-((numOutputs-1)/2)*13;
|
var y = (d.h/2)-((numOutputs-1)/2)*13;
|
||||||
|
portGroup.setAttribute("transform","translate("+x+","+((y+13*portIndex)-5)+")")
|
||||||
// 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 "";
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
|
if (d._def.icon) {
|
||||||
if (d.dirtyStatus) {
|
var icon = thisNode.select(".red-ui-flow-node-icon");
|
||||||
if (!showStatus || !d.status) {
|
var faIcon = thisNode.select(".fa-lg");
|
||||||
this.__statusGroup__.style.display = "none";
|
var current_url;
|
||||||
|
if (!icon.empty()) {
|
||||||
|
current_url = icon.attr("xlink:href");
|
||||||
} else {
|
} else {
|
||||||
this.__statusGroup__.style.display = "inline";
|
current_url = faIcon.attr("xlink:href");
|
||||||
var fill = status_colours[d.status.fill]; // Only allow our colours for now
|
}
|
||||||
if (d.status.shape == null && fill == null) {
|
var new_url = RED.utils.getNodeIcon(d._def,d);
|
||||||
this.__statusShape__.style.display = "none";
|
if (new_url !== current_url) {
|
||||||
this.__statusGroup__.setAttribute("transform","translate(-14,"+(d.h+3)+")");
|
if (!icon.empty()) {
|
||||||
|
icon.remove();
|
||||||
} else {
|
} else {
|
||||||
this.__statusGroup__.setAttribute("transform","translate(3,"+(d.h+3)+")");
|
faIcon.remove();
|
||||||
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')) {
|
var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
|
||||||
this.__statusLabel__.textContent = d.status.text;
|
createIconAttributes(new_url, iconGroup, d);
|
||||||
} else {
|
icon = thisNode.select(".red-ui-flow-node-icon");
|
||||||
this.__statusLabel__.textContent = "";
|
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;
|
// thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
|
||||||
if (d.g) {
|
// thisNode.selectAll("text.node_badge_label").text(function(d,i) {
|
||||||
if (!dirtyGroups[d.g]) {
|
// if (d._def.badge) {
|
||||||
var gg = d.g;
|
// if (typeof d._def.badge == "function") {
|
||||||
while (gg && !dirtyGroups[gg]) {
|
// try {
|
||||||
dirtyGroups[gg] = RED.nodes.group(gg);
|
// return d._def.badge.call(d);
|
||||||
gg = dirtyGroups[gg].g;
|
// } 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(
|
var link = linkLayer.selectAll(".red-ui-flow-link").data(
|
||||||
activeLinks,
|
activeLinks,
|
||||||
@ -4064,24 +4064,24 @@ RED.view = (function() {
|
|||||||
var y = -(flows.length-1)*h/2;
|
var y = -(flows.length-1)*h/2;
|
||||||
var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows);
|
var linkGroups = g.selectAll(".red-ui-flow-link-group").data(flows);
|
||||||
var enterLinkGroups = linkGroups.enter().append("g").attr("class","red-ui-flow-link-group")
|
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('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('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('mousedown', function() { d3.event.preventDefault(); d3.event.stopPropagation(); })
|
||||||
.on('mouseup', function(f) {
|
.on('mouseup', function(f) {
|
||||||
if (mouse_mode !== 0) {
|
if (mouse_mode !== 0) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
d3.event.stopPropagation();
|
d3.event.stopPropagation();
|
||||||
var targets = d.links[f];
|
var targets = d.links[f];
|
||||||
RED.workspaces.show(f);
|
RED.workspaces.show(f);
|
||||||
targets.forEach(function(n) {
|
targets.forEach(function(n) {
|
||||||
n.selected = true;
|
n.selected = true;
|
||||||
n.dirty = true;
|
n.dirty = true;
|
||||||
moving_set.push({n:n});
|
moving_set.push({n:n});
|
||||||
});
|
|
||||||
updateSelection();
|
|
||||||
redraw();
|
|
||||||
});
|
});
|
||||||
|
updateSelection();
|
||||||
|
redraw();
|
||||||
|
});
|
||||||
enterLinkGroups.each(function(f) {
|
enterLinkGroups.each(function(f) {
|
||||||
var linkG = d3.select(this);
|
var linkG = d3.select(this);
|
||||||
linkG.append("svg:path")
|
linkG.append("svg:path")
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user