frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move all colours to sass variables

Browse Source
This commit is contained in:
Nick O'Leary
2019-05-15 13:54:29 +01:00
parent 4418f8bfce
commit 031362a633
51 changed files with 1303 additions and 1311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/node_modules/@node-red/editor-client/src/js/nodes.js vendored
View File

@@ -368,7 +368,7 @@ RED.nodes = (function() {
outputs: sf.out.length,
color: "#da9",
label: function() { return this.name||RED.nodes.subflow(sf.id).name },
labelStyle: function() { return this.name?"node_label_italic":""; },
labelStyle: function() { return this.name?"red-ui-flow-node-label-italic":""; },
paletteLabel: function() { return RED.nodes.subflow(sf.id).name },
inputLabels: function(i) { return sf.inputLabels?sf.inputLabels[i]:null },
outputLabels: function(i) { return sf.outputLabels?sf.outputLabels[i]:null },
@@ -1072,7 +1072,7 @@ RED.nodes = (function() {
color:"#fee",
defaults: {},
label: "unknown: "+n.type,
labelStyle: "node_label_italic",
labelStyle: "red-ui-flow-node-label-italic",
outputs: n.outputs||n.wires.length,
set: registry.getNodeSet("node-red/unknown")
}

4
packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js vendored
View File

@@ -172,7 +172,7 @@ RED.clipboard = (function() {
'<a id="export-range-full" class="editor-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
'</span>'+
'</div>'+
'<div style="height: 400px; position:relative; border:1px solid #999;">'+
'<div class="red-ui-clipboard-dialog-box">'+
'<div class="red-ui-clipboard-dialog-tabs">'+
'<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
'</div>'+
@@ -200,7 +200,7 @@ RED.clipboard = (function() {
importNodesDialog =
'<div style="height: 400px; position:relative; border:1px solid #999; margin-bottom: 12px">'+
'<div class="red-ui-clipboard-dialog-box" style="margin-bottom: 12px">'+
'<div class="red-ui-clipboard-dialog-tabs">'+
'<ul id="red-ui-clipboard-dialog-import-tabs"></ul>'+
'</div>'+

4
packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js vendored
View File

@@ -180,10 +180,10 @@ RED.deploy = (function() {
'<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+
'</div>').appendTo(message);
var conflictAutoMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
'<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
'<i class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
'</div>').hide().appendTo(message);
var conflictManualMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
'<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
'<i class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
'</div>').hide().appendTo(message);
message.i18n();

18
packages/node_modules/@node-red/editor-client/src/js/ui/diff.js vendored
View File

@@ -787,7 +787,7 @@ RED.diff = (function() {
$("<td>",{class:"red-ui-diff-list-cell-label"}).text("position").appendTo(row);
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y},
@@ -807,7 +807,7 @@ RED.diff = (function() {
if (remoteNode !== undefined) {
remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
if (remoteNode) {
$('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell);
@@ -856,7 +856,7 @@ RED.diff = (function() {
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) {
if (!conflict) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
} else {
localCell.addClass("red-ui-diff-status-conflict");
@@ -871,7 +871,7 @@ RED.diff = (function() {
remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
if (remoteNode) {
if (!conflict) {
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
} else {
remoteCell.addClass("red-ui-diff-status-conflict");
@@ -929,7 +929,7 @@ RED.diff = (function() {
localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) {
if (!conflict) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
localCell.addClass("red-ui-diff-status-"+(localChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
} else {
localCell.addClass("red-ui-diff-status-conflict");
@@ -954,7 +954,7 @@ RED.diff = (function() {
remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
if (remoteNode) {
if (!conflict) {
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
remoteCell.addClass("red-ui-diff-status-"+(remoteChanged?"changed":"unchanged"));
$('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
} else {
remoteCell.addClass("red-ui-diff-status-conflict");
@@ -1029,9 +1029,9 @@ RED.diff = (function() {
}
var localSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv);
var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
var localRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
var remoteSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv);
var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
var remoteRadio = $('<input>',{class:"red-ui-diff-selectbox-input",id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
if (state === 'local') {
localRadio.prop('checked',true);
} else if (state === 'remote') {
@@ -1549,7 +1549,7 @@ RED.diff = (function() {
}
currentBlock.end = diffLength;
diffBlocks.push(currentBlock);
// console.table(diffBlocks);
console.table(diffBlocks);
var diffRow;
for (var b = 0; b<diffBlocks.length; b++) {
currentBlock = diffBlocks[b];

2
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@@ -859,7 +859,7 @@ RED.editor = (function() {
var picker = $('<div class="red-ui-icon-picker">').css({
top: top+"px",
left: containerPos.left+"px",
}).appendTo("body");
}).appendTo("#red-ui-editor");
var hide = function() {
pickerBackground.remove();

2
packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js vendored
View File

@@ -15,7 +15,7 @@
**/
(function() {
var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="red-ui-editor-type-buffer-type"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></span></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
var template = '<script type="text/x-red" data-template-name="_buffer"><div id="red-ui-editor-type-buffer-panels"><div id="red-ui-editor-type-buffer-panel-str" class="red-ui-panel"><div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-buffer-type editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span id="red-ui-editor-type-buffer-type-string" data-i18n="bufferEditor.modeString"></span><span id="red-ui-editor-type-buffer-type-array" data-i18n="bufferEditor.modeArray"></span></button></div><div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-buffer-str"></div></div></div><div id="red-ui-editor-type-buffer-panel-bin" class="red-ui-panel"><div class="form-row node-text-editor-row" style="margin-top: 10px"><div class="node-text-editor" id="red-ui-editor-type-buffer-bin"></div></div></div></div></script>';
function stringToUTF8Array(str) {
var data = [];

6
packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js vendored
View File

@@ -19,7 +19,7 @@
var template = '<script type="text/x-red" data-template-name="_expression">'+
'<div id="red-ui-editor-type-expression-panels">'+
'<div id="red-ui-editor-type-expression-panel-expr" class="red-ui-panel">'+
'<div class="form-row" style="margin-bottom: 3px; text-align: right;"><span class="red-ui-editor-type-expression-legacy"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></span><button id="red-ui-editor-type-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
'<div class="form-row" style="margin-bottom: 3px; text-align: right;"><button class="red-ui-editor-type-expression-legacy editor-button editor-button-small"><i class="fa fa-exclamation-circle"></i> <span data-i18n="expressionEditor.compatMode"></span></button><button id="red-ui-editor-type-expression-reformat" class="editor-button editor-button-small"><span data-i18n="expressionEditor.format"></span></button></div>'+
'<div class="form-row node-text-editor-row"><div class="node-text-editor" id="red-ui-editor-type-expression"></div></div>'+
'</div>'+
'<div id="red-ui-editor-type-expression-panel-info" class="red-ui-panel">'+
@@ -35,10 +35,10 @@
'<div id="red-ui-editor-type-expression-tab-test" class="red-ui-editor-type-expression-tab-content hide">'+
'<div>'+
'<span style="display: inline-block; width: calc(50% - 5px);"><span data-i18n="expressionEditor.data"></span><button style="float: right; margin-right: 5px;" id="node-input-example-reformat" class="editor-button editor-button-small"><span data-i18n="jsonEditor.format"></span></button></span>'+
'<span style="display: inline-block; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
'<span style="display: inline-block; margin-left: 10px; width: calc(50% - 5px);" data-i18n="expressionEditor.result"></span>'+
'</div>'+
'<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-data"></div>'+
'<div style="display: inline-block; width: calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-result"></div>'+
'<div style="display: inline-block; margin-left: 10px; width:calc(50% - 5px);" class="node-text-editor" id="red-ui-editor-type-expression-test-result"></div>'+
'</div>'+
'</div>'+
'</div>'+

1
packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js vendored
View File

@@ -234,7 +234,6 @@ RED.notifications = (function() {
if (options.id) {
persistentNotifications[options.id] = n;
if (options.fixed) {
console.log("SHPW)")
notificationButtonWrapper.show();
}
}

4
packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js vendored
View File

@@ -815,8 +815,8 @@ RED.palette.editor = (function() {
if (object.info) {
var entry = object.info;
var headerRow = $('<div>',{class:"red-ui-palette-module-header"}).appendTo(container);
var titleRow = $('<div class="red-ui-palette-module-meta"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
$('<span>',{class:"red-ui-palette-module-name"}).text(entry.name||entry.id).appendTo(titleRow);
var titleRow = $('<div class="red-ui-palette-module-meta red-ui-palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
$('<span>').text(entry.name||entry.id).appendTo(titleRow);
$('<a target="_blank" class="red-ui-palette-module-link"><i class="fa fa-external-link"></i></a>').attr('href',entry.url).appendTo(titleRow);
var descRow = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
$('<div>',{class:"red-ui-palette-module-description"}).text(entry.description).appendTo(descRow);

14
packages/node_modules/@node-red/editor-client/src/js/ui/palette.js vendored
View File

@@ -253,16 +253,16 @@ RED.palette = (function() {
var paletteTop;
$(d).draggable({
helper: 'clone',
appendTo: 'body',
appendTo: '#red-ui-editor',
revert: 'invalid',
revertDuration: 300,
revertDuration: 200,
containment:'#red-ui-main-container',
start: function() {
paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
RED.view.focus();
},
stop: function() { d3.select('.link_splice').classed('link_splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
stop: function() { d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false); if (spliceTimer) { clearTimeout(spliceTimer); spliceTimer = null;}},
drag: function(e,ui) {
ui.originalPosition.left = $('#' + e.target.id).offset().left;
@@ -293,7 +293,7 @@ RED.palette = (function() {
for (var i=0;i<nodes.length;i++) {
var node = d3.select(nodes[i]);
if (node.classed('link_background') && !node.classed('link_link')) {
if (node.classed('red-ui-flow-link-background') && !node.classed('red-ui-flow-link-link')) {
var length = nodes[i].getTotalLength();
for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j);
@@ -306,12 +306,12 @@ RED.palette = (function() {
}
}
if (activeSpliceLink && activeSpliceLink !== bestLink) {
d3.select(activeSpliceLink.parentNode).classed('link_splice',false);
d3.select(activeSpliceLink.parentNode).classed('red-ui-flow-link-splice',false);
}
if (bestLink) {
d3.select(bestLink.parentNode).classed('link_splice',true)
d3.select(bestLink.parentNode).classed('red-ui-flow-link-splice',true)
} else {
d3.select('.link_splice').classed('link_splice',false);
d3.select('.red-ui-flow-link-splice').classed('red-ui-flow-link-splice',false);
}
if (activeSpliceLink !== bestLink) {
if (bestLink) {

2
packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js vendored
View File

@@ -490,7 +490,7 @@ RED.sidebar.versionControl = (function() {
commitBox = $('<div class="red-ui-sidebar-vc-slide-box red-ui-sidebar-vc-slide-box-bottom"></div>').hide().appendTo(localChanges.content);
var commitMessage = $('<textarea placeholder='+RED._("sidebar.project.versionControl.commitPlaceholder")+'></textarea>')
var commitMessage = $('<textarea></textarea>').attr("placeholder",RED._("sidebar.project.versionControl.commitPlaceholder"))
.appendTo(commitBox)
.on("change keyup paste",function() {
submitCommitButton.prop('disabled',$(this).val().trim()==="");

4
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@@ -70,9 +70,9 @@ RED.sidebar.info = (function() {
helpSection.expand();
helpSection.content.css("padding","6px");
var tipContainer = $('<div class="node-info-tips"></div>').appendTo(content);
var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
var tipButtons = $('<div class="node-info-tips-buttons"></div>').appendTo(tipContainer);
var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer);
var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
tipRefresh.on("click", function(e) {

2
packages/node_modules/@node-red/editor-client/src/js/ui/utils.js vendored
View File

@@ -424,7 +424,7 @@ RED.utils = (function() {
}
$('<pre class="red-ui-debug-msg-type-string"></pre>').text(stringEncoding).appendTo(sr);
var bufferOpts = $('<span class="red-ui-debug-msg-buffer-opts"></span>').appendTo(headerHead);
var switchFormat = $('<a href="#"></a>').addClass('selected').text('raw').appendTo(bufferOpts).on("click", function(e) {
var switchFormat = $('<a class="editor-button editor-button-small" href="#"></a>').text('raw').appendTo(bufferOpts).on("click", function(e) {
e.preventDefault();
e.stopPropagation();
formatBuffer(element,$(this),sourceId,path,true);

399
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@@ -79,6 +79,8 @@ RED.view = (function() {
var clipboard = "";
// Note: these are the permitted status colour aliases. The actual RGB values
// are set in the CSS - flow.scss/colors.scss
var status_colours = {
"red": "#c00",
"green": "#5a8",
@@ -438,23 +440,23 @@ RED.view = (function() {
for (var i=0;i<space_width;i+=+gridSize) {
gridTicks.push(i);
}
gridLayer.selectAll("line.horizontal").remove();
gridLayer.selectAll("line.horizontal").data(gridTicks).enter()
gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").remove();
gridLayer.selectAll("line.red-ui-workspace-chart-grid-h").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"horizontal",
"class":"red-ui-workspace-chart-grid-h",
"x1" : 0,
"x2" : space_width,
"y1" : function(d){ return d;},
"y2" : function(d){ return d;}
});
gridLayer.selectAll("line.vertical").remove();
gridLayer.selectAll("line.vertical").data(gridTicks).enter()
gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").remove();
gridLayer.selectAll("line.red-ui-workspace-chart-grid-v").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"vertical",
"class":"red-ui-workspace-chart-grid-v",
"y1" : 0,
"y2" : space_width,
"x1" : function(d){ return d;},
@@ -466,10 +468,10 @@ RED.view = (function() {
showAllLinkPorts = -1;
for (var i=0;i<nodes.length;i++) {
var node = nodes[i];
node.el = dragGroupLayer.append("svg:path").attr("class", "drag_line");
node.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
if ((node.node.type === "link out" && node.portType === PORT_TYPE_OUTPUT) ||
(node.node.type === "link in" && node.portType === PORT_TYPE_INPUT)) {
node.el.attr("class","link_link drag_line");
node.el.attr("class","red-ui-flow-link-link red-ui-flow-drag-line");
node.virtualLink = true;
showAllLinkPorts = (node.portType === PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
}
@@ -708,14 +710,14 @@ RED.view = (function() {
}
ghostNode = eventLayer.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
ghostNode.append("rect")
.attr("class","node_placeholder")
.attr("class","red-ui-flow-node-placeholder")
.attr("rx", 5)
.attr("ry", 5)
.attr("width",node_width)
.attr("height",node_height)
.attr("fill","none")
// var ghostLink = ghostNode.append("svg:path")
// .attr("class","link_link")
// .attr("class","red-ui-flow-link-link")
// .attr("d","M 0 "+(node_height/2)+" H "+(gridSize * -2))
// .attr("opacity",0);
@@ -744,7 +746,7 @@ RED.view = (function() {
return;
}
if (!quickAddLink.el) {
quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "drag_line");
quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "red-ui-flow-drag-line");
}
var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1;
var sourcePort = quickAddLink.port;
@@ -1188,7 +1190,7 @@ RED.view = (function() {
nodes = RED.view.getLinksAtPoint(mouseX,mouseY);
}
for (var i=0;i<nodes.length;i++) {
if (d3.select(nodes[i]).classed("link_background")) {
if (d3.select(nodes[i]).classed("red-ui-flow-link-background")) {
var length = nodes[i].getTotalLength();
for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j);
@@ -1201,12 +1203,12 @@ RED.view = (function() {
}
}
if (activeSpliceLink && activeSpliceLink !== bestLink) {
d3.select(activeSpliceLink.parentNode).classed("link_splice",false);
d3.select(activeSpliceLink.parentNode).classed("red-ui-flow-link-splice",false);
}
if (bestLink) {
d3.select(bestLink.parentNode).classed("link_splice",true)
d3.select(bestLink.parentNode).classed("red-ui-flow-link-splice",true)
} else {
d3.select(".link_splice").classed("link_splice",false);
d3.select(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false);
}
activeSpliceLink = bestLink;
spliceTimer = null;
@@ -1777,7 +1779,7 @@ RED.view = (function() {
mousedown_port_type = null;
activeSpliceLink = null;
spliceActive = false;
d3.select(".link_splice").classed("link_splice",false);
d3.select(".red-ui-flow-link-splice").classed("red-ui-flow-link-splice",false);
if (spliceTimer) {
clearTimeout(spliceTimer);
spliceTimer = null;
@@ -2048,7 +2050,7 @@ RED.view = (function() {
function showTooltip(x,y,content,direction) {
var tooltip = eventLayer.append("g")
.attr("transform","translate("+x+","+y+")")
.attr("class","port_tooltip");
.attr("class","red-ui-flow-port-tooltip");
var lines = content.split("\n");
var labelWidth = 0;
@@ -2056,7 +2058,7 @@ RED.view = (function() {
var labelHeights = [];
var lineHeight = 0;
lines.forEach(function(l,i) {
var labelDimensions = calculateTextDimensions(l||"&nbsp;", "port_tooltip_label", 8,0);
var labelDimensions = calculateTextDimensions(l||"&nbsp;", "red-ui-flow-port-tooltip-label", 8,0);
labelWidth = Math.max(labelWidth,labelDimensions[0]);
labelHeights.push(0.8*labelDimensions[1]);
if (i === 0) {
@@ -2090,7 +2092,7 @@ RED.view = (function() {
tooltip.append("path").attr("d",path);
lines.forEach(function(l,i) {
ly += labelHeights[i];
tooltip.append("svg:text").attr("class","port_tooltip_label")
tooltip.append("svg:text").attr("class","red-ui-flow-port-tooltip-label")
.attr("x", lx)
.attr("y", ly)
.attr("text-anchor",anchor)
@@ -2128,7 +2130,7 @@ RED.view = (function() {
);
},500);
}
port.classed("port_hovered",active);
port.classed("red-ui-flow-port-hovered",active);
}
function portMouseOut(port,d,portType,portIndex) {
clearTimeout(portLabelHoverTimeout);
@@ -2136,7 +2138,7 @@ RED.view = (function() {
portLabelHover.remove();
portLabelHover = null;
}
port.classed("port_hovered",false);
port.classed("red-ui-flow-port-hovered",false);
}
function nodeMouseUp(d) {
@@ -2168,7 +2170,7 @@ RED.view = (function() {
portMouseUp(d, direction, 0);
if (wasJoining) {
d3.selectAll(".port_hovered").classed("port_hovered",false);
d3.selectAll(".red-ui-flow-port-hovered").classed("red-ui-flow-port-hovered",false);
}
}
@@ -2352,15 +2354,11 @@ RED.view = (function() {
.attr("xlink:href",iconUrl)
.attr("class","fa-lg")
.attr("x",15)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome")
.text(fontAwesomeUnicode);
} else {
var icon = icon_group.append("image")
.attr("xlink:href",iconUrl)
.attr("class","node_icon")
.attr("class","red-ui-flow-node-icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
@@ -2392,14 +2390,14 @@ RED.view = (function() {
var dirtyNodes = {};
if (activeSubflow) {
var subflowOutputs = nodeLayer.selectAll(".subflowoutput").data(activeSubflow.out,function(d,i){ return d.id;});
var subflowOutputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-output").data(activeSubflow.out,function(d,i){ return d.id;});
subflowOutputs.exit().remove();
var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","node subflowoutput").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
var outGroup = subflowOutputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-output").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
outGroup.each(function(d,i) {
d.w=40;
d.h=40;
});
outGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
outGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
// TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
@@ -2424,7 +2422,7 @@ RED.view = (function() {
nodeMouseUp.call(this,d);
});
outGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
outGroup.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)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
@@ -2432,17 +2430,17 @@ RED.view = (function() {
.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);});
outGroup.append("svg:text").attr("class","port_label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
outGroup.append("svg:text").attr("class","port_label port_index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
outGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
outGroup.append("svg:text").attr("class","red-ui-flow-port-label red-ui-flow-port-index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
var subflowInputs = nodeLayer.selectAll(".subflowinput").data(activeSubflow.in,function(d,i){ return d.id;});
var subflowInputs = nodeLayer.selectAll(".red-ui-flow-subflow-port-input").data(activeSubflow.in,function(d,i){ return d.id;});
subflowInputs.exit().remove();
var inGroup = subflowInputs.enter().insert("svg:g").attr("class","node subflowinput").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
var inGroup = subflowInputs.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-input").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
inGroup.each(function(d,i) {
d.w=40;
d.h=40;
});
inGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
inGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
// TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
@@ -2467,7 +2465,7 @@ RED.view = (function() {
nodeMouseUp.call(this,d);
});
inGroup.append("g").attr('transform','translate(35,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
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)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_OUTPUT,i);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_OUTPUT,i);})
@@ -2475,17 +2473,17 @@ RED.view = (function() {
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_OUTPUT,0);})
.on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_OUTPUT,0);});
inGroup.append("svg:text").attr("class","port_label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
inGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",18).attr("y",20).style("font-size","10px").text("input");
var subflowStatus = nodeLayer.selectAll(".subflowstatus").data(activeSubflow.status?[activeSubflow.status]:[],function(d,i){ return d.id;});
var subflowStatus = nodeLayer.selectAll(".red-ui-flow-subflow-port-status").data(activeSubflow.status?[activeSubflow.status]:[],function(d,i){ return d.id;});
subflowStatus.exit().remove();
var statusGroup = subflowStatus.enter().insert("svg:g").attr("class","node subflowstatus").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
var statusGroup = subflowStatus.enter().insert("svg:g").attr("class","red-ui-flow-node red-ui-flow-subflow-port-status").attr("transform",function(d) { return "translate("+(d.x-20)+","+(d.y-20)+")"});
statusGroup.each(function(d,i) {
d.w=40;
d.h=40;
});
statusGroup.append("rect").attr("class","subflowport").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
statusGroup.append("rect").attr("class","red-ui-flow-subflow-port").attr("rx",8).attr("ry",8).attr("width",40).attr("height",40)
// TODO: This is exactly the same set of handlers used for regular nodes - DRY
.on("mouseup",nodeMouseUp)
.on("mousedown",nodeMouseDown)
@@ -2510,7 +2508,7 @@ RED.view = (function() {
nodeMouseUp.call(this,d);
});
statusGroup.append("g").attr('transform','translate(-5,15)').append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
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)
.on("mousedown", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("touchstart", function(d,i){portMouseDown(d,PORT_TYPE_INPUT,0);} )
.on("mouseup", function(d,i){portMouseUp(d,PORT_TYPE_INPUT,0);})
@@ -2518,13 +2516,13 @@ RED.view = (function() {
.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);});
statusGroup.append("svg:text").attr("class","port_label").attr("x",22).attr("y",20).style("font-size","10px").text("status");
statusGroup.append("svg:text").attr("class","red-ui-flow-port-label").attr("x",22).attr("y",20).style("font-size","10px").text("status");
subflowOutputs.each(function(d,i) {
if (d.dirty) {
var output = d3.select(this);
output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
output.selectAll(".port_index").text(function(d){ return d.i+1});
output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
output.selectAll(".red-ui-flow-port-index").text(function(d){ return d.i+1});
output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
dirtyNodes[d.id] = d;
d.dirty = false;
@@ -2533,7 +2531,7 @@ RED.view = (function() {
subflowInputs.each(function(d,i) {
if (d.dirty) {
var input = d3.select(this);
input.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
input.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
input.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
dirtyNodes[d.id] = d;
d.dirty = false;
@@ -2542,8 +2540,8 @@ RED.view = (function() {
subflowStatus.each(function(d,i) {
if (d.dirty) {
var output = d3.select(this);
output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
output.selectAll(".port_index").text(function(d){ return d.i+1});
output.selectAll(".red-ui-flow-subflow-port").classed("red-ui-flow-node-selected",function(d) { return d.selected; })
output.selectAll(".red-ui-flow-port-index").text(function(d){ return d.i+1});
output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
dirtyNodes[d.id] = d;
d.dirty = false;
@@ -2552,18 +2550,17 @@ RED.view = (function() {
} else {
nodeLayer.selectAll(".subflowoutput").remove();
nodeLayer.selectAll(".subflowinput").remove();
nodeLayer.selectAll(".subflowstatus").remove();
nodeLayer.selectAll(".red-ui-flow-subflow-port-output").remove();
nodeLayer.selectAll(".red-ui-flow-subflow-port-input").remove();
nodeLayer.selectAll(".red-ui-flow-subflow-port-status").remove();
}
var node = nodeLayer.selectAll(".nodegroup").data(activeNodes,function(d){return d.id});
var node = nodeLayer.selectAll(".red-ui-flow-node-group").data(activeNodes,function(d){return d.id});
node.exit().remove();
var nodeEnter = node.enter().insert("svg:g")
.attr("class", "node nodegroup")
.classed("node_subflow",function(d) { return activeSubflow != null; })
.classed("node_link",function(d) { return d.type === "link in" || d.type === "link out" });
.attr("class", "red-ui-flow-node red-ui-flow-node-group")
.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; });
nodeEnter.each(function(d,i) {
var node = d3.select(this);
@@ -2574,32 +2571,32 @@ RED.view = (function() {
if (hideLabel) {
d.w = node_height;
} else {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
}
d.h = Math.max(node_height,(d.outputs||0) * 15);
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.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 nodeButtonGroup = node.append("svg:g")
.attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
.attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
.attr("class","red-ui-flow-node-button");
nodeButtonGroup.append("rect")
.attr("class","red-ui-flow-node-button-background")
.attr("rx",5)
.attr("ry",5)
.attr("width",32)
.attr("height",node_height-4)
.attr("fill","#eee");//function(d) { return d._def.color;})
.attr("height",node_height-4);
nodeButtonGroup.append("rect")
.attr("class","node_button_button")
.attr("class","red-ui-flow-node-button-button")
.attr("x",function(d) { return d._def.align == "right"? 11:5})
.attr("y",4)
.attr("rx",4)
@@ -2623,8 +2620,8 @@ RED.view = (function() {
}
var mainRect = node.append("rect")
.attr("class", "node")
.classed("node_unknown",function(d) { return d.type == "unknown"; })
.attr("class", "red-ui-flow-node")
.classed("red-ui-flow-node-unknown",function(d) { return d.type == "unknown"; })
.attr("rx", 5)
.attr("ry", 5)
.attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
@@ -2684,10 +2681,10 @@ RED.view = (function() {
var selectClass;
var portType;
if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
selectClass = ".port_input .port";
selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
portType = PORT_TYPE_INPUT;
} else {
selectClass = ".port_output .port";
selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
portType = PORT_TYPE_OUTPUT;
}
portMouseOver(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@@ -2707,10 +2704,10 @@ RED.view = (function() {
var selectClass;
var portType;
if ((drag_lines[0].virtualLink && drag_lines[0].portType === PORT_TYPE_INPUT) || drag_lines[0].portType === PORT_TYPE_OUTPUT) {
selectClass = ".port_input .port";
selectClass = ".red-ui-flow-port-input .red-ui-flow-port";
portType = PORT_TYPE_INPUT;
} else {
selectClass = ".port_output .port";
selectClass = ".red-ui-flow-port-output .red-ui-flow-port";
portType = PORT_TYPE_OUTPUT;
}
portMouseOut(d3.select(this.parentNode).selectAll(selectClass),d,portType,0);
@@ -2724,33 +2721,27 @@ RED.view = (function() {
if (d._def.icon) {
var icon_url = RED.utils.getNodeIcon(d._def,d);
var icon_group = node.append("g")
.attr("class","node_icon_group")
.attr("class","red-ui-flow-node-icon-group")
.attr("x",0).attr("y",0);
var icon_shade = icon_group.append("rect")
.attr("x",0).attr("y",0)
.attr("class","node_icon_shade")
.attr("class","red-ui-flow-node-icon-shade")
.attr("width","30")
.attr("stroke","none")
.attr("fill","#000")
.attr("fill-opacity","0.05")
.attr("height",function(d){return Math.min(50,d.h-4);});
createIconAttributes(icon_url, icon_group, d);
var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
.attr("class","node_icon_shade_border")
.attr("stroke-opacity","0.1")
.attr("stroke","#000")
.attr("stroke-width","1");
.attr("class","red-ui-flow-node-icon-shade-border");
if ("right" == d._def.align) {
icon_group.attr("class","node_icon_group node_icon_group_"+d._def.align);
icon_group.attr("class","red-ui-flow-node-icon-group red-ui-flow-node-icon-group-"+d._def.align);
icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
//icon.attr("class","node_icon node_icon_"+d._def.align);
//icon.attr("class","node_icon_shade node_icon_shade_"+d._def.align);
//icon.attr("class","node_icon_shade_border node_icon_shade_border_"+d._def.align);
//icon.attr("class","red-ui-flow-node-icon red-ui-flow-node-icon-"+d._def.align);
//icon.attr("class","red-ui-flow-node-icon-shade red-ui-flow-node-icon-shade-"+d._def.align);
//icon.attr("class","red-ui-flow-node-icon-shade-border red-ui-flow-node-icon-shade-border-"+d._def.align);
}
//if (d.inputs > 0 && d._def.align == null) {
@@ -2766,29 +2757,29 @@ RED.view = (function() {
icon_group.style("pointer-events","none");
}
var text = node.append("svg:text")
.attr("class","node_label")
.attr("class","red-ui-flow-node-label")
.attr("x", 38)
.attr("dy", ".35em")
.attr("text-anchor","start")
.classed("hide",hideLabel);
if (d._def.align) {
text.attr("class","node_label node_label_"+d._def.align);
text.attr("class","red-ui-flow-node-label red-ui-flow-node-label-"+d._def.align);
if (d._def.align === "right") {
text.attr("text-anchor","end");
}
}
var status = node.append("svg:g").attr("class","node_status_group").style("display","none");
var statusRect = status.append("rect").attr("class","node_status")
var status = node.append("svg:g").attr("class","red-ui-flow-node-status-group").style("display","none");
var statusRect = status.append("rect").attr("class","red-ui-flow-node-status")
.attr("x",6).attr("y",1).attr("width",9).attr("height",9)
.attr("rx",2).attr("ry",2).attr("stroke-width","3");
var statusLabel = status.append("svg:text")
.attr("class","node_status_label")
.attr("class","red-ui-flow-node-status-label")
.attr("x",20).attr("y",10);
node.append("g").attr("class","red-ui-view-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
var nodeErrorButton = node.append("g").attr("class","red-ui-view-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
node.append("g").attr("class","red-ui-flow-node-changed hide").attr("transform","translate(20, -2)").append("circle").attr("r",5);
var nodeErrorButton = node.append("g").attr("class","red-ui-flow-node-error hide").attr("transform","translate(0, -2)").append("path").attr("d","M -5,4 l 10,0 -5,-8 z");
// nodeErrorButton.on("mouseenter", function() {
// clearTimeout(portLabelHoverTimeout);
// portLabelHoverTimeout = setTimeout(function() {
@@ -2822,60 +2813,54 @@ RED.view = (function() {
if (hideLabel) {
d.w = node_height;
} else {
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
}
// d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/20)) );
// d.w = Math.max(node_width,20*(Math.ceil((calculateTextWidth(l, "red-ui-flow-node-label", 50)+(d._def.inputs>0?7:0))/20)) );
d.h = Math.max(node_height,(d.outputs||0) * 15);
d.x += (d.w-ow)/2;
d.resize = false;
}
var thisNode = d3.select(this);
thisNode.classed("node_subflow",function(d) { return activeSubflow != null; })
thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
//thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
if (mouse_mode != RED.state.MOVING_ACTIVE) {
thisNode.selectAll(".node")
thisNode.selectAll(".red-ui-flow-node")
.attr("width",function(d){return d.w})
.attr("height",function(d){return d.h})
.classed("node_selected",function(d) { return d.selected; })
.classed("node_highlighted",function(d) { return d.highlighted; })
.classed("red-ui-flow-node-selected",function(d) { return d.selected; })
.classed("red-ui-flow-node-highlighted",function(d) { return d.highlighted; })
;
//thisNode.selectAll(".node-gradient-top").attr("width",function(d){return d.w});
//thisNode.selectAll(".node-gradient-bottom").attr("width",function(d){return d.w}).attr("y",function(d){return d.h-30});
if ((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) {
thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", true);
thisNode.selectAll(".node_label").classed("node_label_right", true).attr("text-anchor", "end");
thisNode.selectAll(".red-ui-flow-node-icon-group").classed("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 {
thisNode.selectAll(".node_icon_group").classed("node_icon_group_right", false);
thisNode.selectAll(".node_label").classed("node_label_right", false).attr("text-anchor", "start");
thisNode.selectAll(".red-ui-flow-node-icon-group").classed("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");
}
thisNode.selectAll(".node_icon_group").attr("transform", function (d) { return "translate(0, 0)"; });
thisNode.selectAll(".node_label").attr("x", function (d) { return 38; });
thisNode.selectAll(".node_icon_group_right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
thisNode.selectAll(".node_label_right").attr("x", function(d){return d.w-38});
//thisNode.selectAll(".node_icon_right").attr("x",function(d){return d.w-d3.select(this).attr("width")-1-(d.outputs>0?5:0);});
//thisNode.selectAll(".node_icon_shade_right").attr("x",function(d){return d.w-30;});
//thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
thisNode.selectAll(".red-ui-flow-node-icon-group").attr("transform", function (d) { return "translate(0, 0)"; });
thisNode.selectAll(".red-ui-flow-node-label").attr("x", function (d) { return 38; });
thisNode.selectAll(".red-ui-flow-node-icon-group-right").attr("transform", function(d){return "translate("+(d.w-30)+",0)"});
thisNode.selectAll(".red-ui-flow-node-label-right").attr("x", function(d){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(".port_input");
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","port_input");
var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
var inputGroupPorts;
if (d.type === "link in") {
inputGroupPorts = inputGroup.append("circle")
.attr("cx",-1).attr("cy",5)
.attr("r",5)
.attr("class","port link_port")
// inputGroupPorts = inputGroup.append("path")
// .attr("d","M 4 -1 h -3 a 6 6 0 1 0 0 12 h 3")
// .attr("class","port link_port")
.attr("class","red-ui-flow-port red-ui-flow-link-port")
} else {
inputGroupPorts = inputGroup.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
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);})
@@ -2897,21 +2882,18 @@ RED.view = (function() {
}
var y = (d.h/2)-((numOutputs-1)/2)*13;
d.ports = d.ports || d3.range(numOutputs);
d._ports = thisNode.selectAll(".port_output").data(d.ports);
var output_group = d._ports.enter().append("g").attr("class","port_output");
d._ports = thisNode.selectAll(".red-ui-flow-port-output").data(d.ports);
var output_group = d._ports.enter().append("g").attr("class","red-ui-flow-port-output");
var output_group_ports;
if (d.type === "link out") {
output_group_ports = output_group.append("circle")
.attr("cx",11).attr("cy",5)
.attr("r",5)
.attr("class","port link_port")
// output_group_ports = output_group.append("path")
// .attr("d","M 6 -1 h 3 a 6 6 0 1 1 0 12 h -3")
// .attr("class","port link_port")
.attr("class","red-ui-flow-port red-ui-flow-link-port")
} else {
output_group_ports = output_group.append("rect")
.attr("class","port")
.attr("class","red-ui-flow-port")
.attr("rx",3).attr("ry",3)
.attr("width",10)
.attr("height",10)
@@ -2931,11 +2913,10 @@ RED.view = (function() {
var x = d.w - 5;
d._ports.each(function(d,i) {
var port = d3.select(this);
//port.attr("y",(y+13*i)-5).attr("x",x);
port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
});
}
thisNode.selectAll("text.node_label").text(function(d,i){
thisNode.selectAll("text.red-ui-flow-node-label").text(function(d,i){
var l = "";
if (d._def.label) {
l = d._def.label;
@@ -2962,10 +2943,10 @@ RED.view = (function() {
}
s = " "+s;
}
return "node_label"+(d._def.align?" node_label_"+d._def.align:"")+s;
return "red-ui-flow-node-label"+(d._def.align?" red-ui-flow-node-label-"+d._def.align:"")+s;
}).classed("hide",hideLabel);
if (d._def.icon) {
var icon = thisNode.select(".node_icon");
var icon = thisNode.select(".red-ui-flow-node-icon");
var faIcon = thisNode.select(".fa-lg");
var current_url;
if (!icon.empty()) {
@@ -2980,45 +2961,45 @@ RED.view = (function() {
} else {
faIcon.remove();
}
var iconGroup = thisNode.select(".node_icon_group");
var iconGroup = thisNode.select(".red-ui-flow-node-icon-group");
createIconAttributes(new_url, iconGroup, d);
}
}
thisNode.selectAll(".red-ui-view-node-changed")
thisNode.selectAll(".red-ui-flow-node-changed")
.attr("transform",function(d){return "translate("+(d.w-10)+", -2)"})
.classed("hide",function(d) { return !(d.changed||d.moved); });
thisNode.selectAll(".red-ui-view-node-error")
thisNode.selectAll(".red-ui-flow-node-error")
.attr("transform",function(d){ return "translate("+(d.w-10-((d.changed||d.moved)?14:0))+", -2)"})
.classed("hide",function(d) { return d.valid; });
thisNode.selectAll(".port_input").each(function(d,i) {
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)+")";})
});
thisNode.selectAll(".node_icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
thisNode.selectAll(".node_icon_shade").attr("height",function(d){return d.h;});
thisNode.selectAll(".node_icon_shade_border").attr("d", function (d) {
thisNode.selectAll(".red-ui-flow-node-icon").attr("y",function(d){return (d.h-d3.select(this).attr("height"))/2;});
thisNode.selectAll(".red-ui-flow-node-icon-shade").attr("height",function(d){return d.h;});
thisNode.selectAll(".red-ui-flow-node-icon-shade-border").attr("d", function (d) {
return "M " + (((!d._def.align && d.inputs !== 0 && d.outputs === 0) || "right" === d._def.align) ? 0 : 30) + " 1 l 0 " + (d.h - 2);
});
thisNode.selectAll(".fa-lg").attr("y",function(d){return (d.h+13)/2;});
thisNode.selectAll(".node_button").attr("opacity",function(d) {
thisNode.selectAll(".red-ui-flow-node-button").attr("opacity",function(d) {
return (!isButtonEnabled(d))?0.4:1
});
thisNode.selectAll(".node_button_button").attr("cursor",function(d) {
thisNode.selectAll(".red-ui-flow-node-button-button").attr("cursor",function(d) {
return (!isButtonEnabled(d))?"":"pointer";
});
thisNode.selectAll(".node_button").attr("transform",function(d){
thisNode.selectAll(".red-ui-flow-node-button").attr("transform",function(d){
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);
}
return "translate("+x+",2)";
});
thisNode.selectAll(".node_button rect").attr("fill-opacity",function(d){
thisNode.selectAll(".red-ui-flow-node-button rect").attr("fill-opacity",function(d){
if (d._def.button.toggle) {
return d[d._def.button.toggle]?1:0.2;
}
@@ -3027,64 +3008,47 @@ RED.view = (function() {
if (d._def.button && (typeof d._def.button.visible === "function")) { // is defined and a function...
if (d._def.button.visible.call(d) === false) {
thisNode.selectAll(".node_button").style("display","none");
thisNode.selectAll(".red-ui-flow-node-button").style("display","none");
}
else {
thisNode.selectAll(".node_button").style("display","inherit");
thisNode.selectAll(".red-ui-flow-node-button").style("display","inherit");
}
}
//thisNode.selectAll(".node_right_button").attr("transform",function(d){return "translate("+(d.w - d._def.button.width.call(d))+","+0+")";}).attr("fill",function(d) {
// return typeof d._def.button.color === "function" ? d._def.button.color.call(d):(d._def.button.color != null ? d._def.button.color : d._def.color)
//});
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 "";
});
// 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 (!showStatus || !d.status) {
thisNode.selectAll(".node_status_group").style("display","none");
thisNode.selectAll(".red-ui-flow-node-status-group").style("display","none");
} else {
var fill = status_colours[d.status.fill]; // Only allow our colours for now
if (d.status.shape == null && fill == null) {
thisNode.selectAll(".node_status").style("display","none");
thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")");
thisNode.selectAll(".red-ui-flow-node-status").style("display","none");
thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(-14,"+(d.h+3)+")");
} else {
thisNode.selectAll(".node_status_group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
var style;
if (d.status.shape == null || d.status.shape == "dot") {
style = {
display: "inline",
fill: fill,
stroke: fill
};
} else if (d.status.shape == "ring" ){
style = {
display: "inline",
fill: "#fff",
stroke: fill
}
}
thisNode.selectAll(".node_status").style(style);
thisNode.selectAll(".red-ui-flow-node-status-group").style("display","inline").attr("transform","translate(3,"+(d.h+3)+")");
var statusClass = "red-ui-flow-node-status-"+(d.status.shape||"dot")+"-"+d.status.fill;
thisNode.selectAll(".red-ui-flow-node-status").attr("class","red-ui-flow-node-status "+statusClass);
}
if (d.status.text) {
thisNode.selectAll(".node_status_label").text(d.status.text);
thisNode.selectAll(".red-ui-flow-node-status-label").text(d.status.text);
} else {
thisNode.selectAll(".node_status_label").text("");
thisNode.selectAll(".red-ui-flow-node-status-label").text("");
}
}
@@ -3092,19 +3056,19 @@ RED.view = (function() {
}
});
var link = linkLayer.selectAll(".link").data(
var link = linkLayer.selectAll(".red-ui-flow-link").data(
activeLinks,
function(d) {
return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
}
);
var linkEnter = link.enter().insert("g",".node").attr("class","link");
var linkEnter = link.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link");
linkEnter.each(function(d,i) {
var l = d3.select(this);
d.added = true;
l.append("svg:path").attr("class","link_background link_path")
.classed("link_link", function(d) { return d.link })
l.append("svg:path").attr("class","red-ui-flow-link-background red-ui-flow-link-path")
.classed("red-ui-flow-link-link", function(d) { return d.link })
.on("mousedown",function(d) {
mousedown_link = d;
clearSelection();
@@ -3131,19 +3095,19 @@ RED.view = (function() {
showTouchMenu(obj,pos);
},touchLongPressTimeout);
})
l.append("svg:path").attr("class","link_outline link_path");
l.append("svg:path").attr("class","link_line link_path")
.classed("link_link", function(d) { return d.link })
.classed("link_subflow", function(d) { return !d.link && activeSubflow });
l.append("svg:path").attr("class","red-ui-flow-link-outline red-ui-flow-link-path");
l.append("svg:path").attr("class","red-ui-flow-link-line red-ui-flow-link-path")
.classed("red-ui-flow-link-link", function(d) { return d.link })
.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
});
link.exit().remove();
var links = linkLayer.selectAll(".link_path");
var links = linkLayer.selectAll(".red-ui-flow-link-path");
links.each(function(d) {
var link = d3.select(this);
if (d.added || d===selected_link || d.selected || dirtyNodes[d.source.id] || dirtyNodes[d.target.id]) {
if (/link_line/.test(link.attr('class'))) {
link.classed("link_subflow", function(d) { return !d.link && activeSubflow });
if (/red-ui-flow-link-line/.test(link.attr('class'))) {
link.classed("red-ui-flow-subflow-link", function(d) { return !d.link && activeSubflow });
}
link.attr("d",function(d){
var numOutputs = d.source.outputs || 1;
@@ -3167,19 +3131,19 @@ RED.view = (function() {
}
})
link.classed("link_selected", function(d) { return d === selected_link || d.selected; });
link.classed("link_unknown",function(d) {
link.classed("red-ui-flow-link-selected", function(d) { return d === selected_link || d.selected; });
link.classed("red-ui-flow-link-unknown",function(d) {
delete d.added;
return d.target.type == "unknown" || d.source.type == "unknown"
});
var offLinks = linkLayer.selectAll(".link_flow_link_g").data(
var offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow").data(
activeFlowLinks,
function(d) {
return d.node.id+":"+d.refresh
}
);
var offLinksEnter = offLinks.enter().insert("g",".node").attr("class","link_flow_link_g");
var offLinksEnter = offLinks.enter().insert("g",".red-ui-flow-node").attr("class","red-ui-flow-link-off-flow");
offLinksEnter.each(function(d,i) {
var g = d3.select(this);
var s = 1;
@@ -3190,8 +3154,7 @@ RED.view = (function() {
}
var stemLength = s*30;
var branchLength = s*20;
var l = g.append("svg:path").attr("class","link_flow_link")
.attr("class","link_link").attr("d","M 0 0 h "+stemLength);
var l = g.append("svg:path").attr("class","red-ui-flow-link-link").attr("d","M 0 0 h "+stemLength);
var links = d.links;
var flows = Object.keys(links);
var tabOrder = RED.nodes.getWorkspaceOrder();
@@ -3201,10 +3164,10 @@ RED.view = (function() {
var linkWidth = 10;
var h = node_height;
var y = -(flows.length-1)*h/2;
var linkGroups = g.selectAll(".link_group").data(flows);
var enterLinkGroups = linkGroups.enter().append("g").attr("class","link_group")
.on('mouseover', function() { if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',true)})
.on('mouseout', function() {if (mouse_mode !== 0) { return } d3.select(this).classed('link_group_active',false)})
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) {
@@ -3223,8 +3186,8 @@ RED.view = (function() {
});
enterLinkGroups.each(function(f) {
var linkG = d3.select(this);
linkG.append("svg:path").attr("class","link_flow_link")
.attr("class","link_link")
linkG.append("svg:path")
.attr("class","red-ui-flow-link-link")
.attr("d",
"M "+stemLength+" 0 "+
"C "+(stemLength+(1.7*branchLength))+" "+0+
@@ -3232,7 +3195,7 @@ RED.view = (function() {
(stemLength+branchLength*1.5)+" "+y+" "
);
linkG.append("svg:path")
.attr("class","link_port")
.attr("class","red-ui-flow-link-port")
.attr("d",
"M "+(stemLength+branchLength*1.5+s*(linkWidth+7))+" "+(y-12)+" "+
"h "+(-s*linkWidth)+" "+
@@ -3242,14 +3205,14 @@ RED.view = (function() {
"h "+(s*linkWidth)
);
linkG.append("svg:path")
.attr("class","link_port")
.attr("class","red-ui-flow-link-port")
.attr("d",
"M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y-12)+" "+
"h "+(s*(linkWidth*3))+" "+
"M "+(stemLength+branchLength*1.5+s*(linkWidth+10))+" "+(y+12)+" "+
"h "+(s*(linkWidth*3))
).style("stroke-dasharray","12 3 8 4 3");
linkG.append("rect").attr("class","port link_port")
linkG.append("rect").attr("class","red-ui-flow-port red-ui-flow-link-port")
.attr("x",stemLength+branchLength*1.5-4+(s*4))
.attr("y",y-4)
.attr("rx",2)
@@ -3269,7 +3232,7 @@ RED.view = (function() {
label = tab.label || tab.id;
}
linkG.append("svg:text")
.attr("class","port_label")
.attr("class","red-ui-flow-port-label")
.attr("x",stemLength+branchLength*1.5+(s*15))
.attr("y",y+1)
.style("font-size","10px")
@@ -3281,7 +3244,7 @@ RED.view = (function() {
linkGroups.exit().remove();
});
offLinks.exit().remove();
offLinks = linkLayer.selectAll(".link_flow_link_g");
offLinks = linkLayer.selectAll(".red-ui-flow-link-off-flow");
offLinks.each(function(d) {
var s = 1;
if (d.node.type === "link in") {
@@ -3294,12 +3257,12 @@ RED.view = (function() {
} else {
// JOINING - unselect any selected links
linkLayer.selectAll(".link_selected").data(
linkLayer.selectAll(".red-ui-flow-link-selected").data(
activeLinks,
function(d) {
return d.source.id+":"+d.sourcePort+":"+d.target.id+":"+d.target.i;
}
).classed("link_selected", false);
).classed("red-ui-flow-link-selected", false);
}
RED.view.navigator.refresh();
if (d3.event) {
@@ -3543,7 +3506,7 @@ RED.view = (function() {
},
getLinksAtPoint: function(x,y) {
var result = [];
var links = outer.selectAll(".link_background")[0];
var links = outer.selectAll(".red-ui-flow-link-background")[0];
for (var i=0;i<links.length;i++) {
var bb = links[i].getBBox();
if (x >= bb.x && y >= bb.y && x <= bb.x+bb.width && y <= bb.y+bb.height) {