Skip to content

Commit ebb3fb9

Browse files
knollearyknolleary
authored
Merge pull request node-red#1670 from node-red-hitachi/subflow-icon-change
Enable user defined icon for subflow
2 parents f31f23f + 8b0e76d commit ebb3fb9

5 files changed

Lines changed: 56 additions & 12 deletions

File tree

‎editor/js/history.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,10 +229,12 @@ RED.history = (function() {
229229
}
230230
});
231231
}
232+
RED.editor.validateNode(ev.node);
232233
RED.nodes.filterNodes({type:"subflow:"+ev.node.id}).forEach(function(n) {
233234
n.inputs = ev.node.in.length;
234235
n.outputs = ev.node.out.length;
235236
RED.editor.updateNodeProperties(n);
237+
RED.editor.validateNode(n);
236238
});
237239
} else {
238240
var outputMap;

‎editor/js/nodes.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,7 @@ RED.nodes = (function() {
355355
RED.nodes.registerType("subflow:"+sf.id, {
356356
defaults:{name:{value:""}},
357357
info: sf.info,
358-
icon:"subflow.png",
358+
icon: function() { return sf.icon||"subflow.png" },
359359
category: "subflows",
360360
inputs: sf.in.length,
361361
outputs: sf.out.length,
@@ -550,7 +550,11 @@ RED.nodes = (function() {
550550
if (node.out.length > 0 && n.outputLabels && !/^\s*$/.test(n.outputLabels.join(""))) {
551551
node.outputLabels = n.outputLabels.slice();
552552
}
553-
553+
if (n.icon) {
554+
if (n.icon !== "node-red/subflow.png") {
555+
node.icon = n.icon;
556+
}
557+
}
554558

555559
return node;
556560
}

‎editor/js/ui/editor.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ RED.editor = (function() {
4848
isValid = validateNode(subflow);
4949
hasChanged = subflow.changed;
5050
}
51-
node.valid = isValid;
51+
node.valid = isValid && validateNodeProperties(node, node._def.defaults, node);
5252
node.changed = node.changed || hasChanged;
5353
} else if (node._def) {
5454
node.valid = validateNodeProperties(node, node._def.defaults, node);
@@ -170,6 +170,10 @@ RED.editor = (function() {
170170
}
171171
}
172172
}
173+
validateIcon(node);
174+
}
175+
176+
function validateIcon(node) {
173177
if (node._def.hasOwnProperty("defaults") && !node._def.defaults.hasOwnProperty("icon") && node.icon) {
174178
var iconPath = RED.utils.separateIconPath(node.icon);
175179
var iconSets = RED.nodes.getIconSets();
@@ -188,6 +192,7 @@ RED.editor = (function() {
188192
}
189193
}
190194
}
195+
191196
function validateNodeEditorProperty(node,defaults,property,prefix) {
192197
var input = $("#"+prefix+"-"+property);
193198
if (input.length > 0) {
@@ -742,7 +747,7 @@ RED.editor = (function() {
742747
buildLabelRow().appendTo(outputsDiv);
743748
}
744749

745-
if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) && node.type !== "subflow") {
750+
if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
746751
$('<div class="form-row"><div id="node-settings-icon"></div></div>').appendTo(dialogForm);
747752
var iconDiv = $("#node-settings-icon");
748753
$('<label data-i18n="editor.settingIcon">').appendTo(iconDiv);
@@ -816,6 +821,7 @@ RED.editor = (function() {
816821
});
817822
}
818823
selectIconFile.prop("disabled", !iconFileList);
824+
selectIconFile.removeClass("input-error");
819825
selectIconModule.removeClass("input-error");
820826
}
821827

@@ -1686,10 +1692,22 @@ RED.editor = (function() {
16861692
if (updateLabels(editing_node, changes, null)) {
16871693
changed = true;
16881694
}
1695+
var iconModule = $("#node-settings-icon-module-hidden").val();
1696+
var iconFile = $("#node-settings-icon-file-hidden").val();
1697+
var icon = (iconModule && iconFile) ? iconModule+"/"+iconFile : "";
1698+
if ((editing_node.icon === undefined && icon !== "node-red/subflow.png") ||
1699+
(editing_node.icon !== undefined && editing_node.icon !== icon)) {
1700+
changes.icon = editing_node.icon;
1701+
editing_node.icon = icon;
1702+
changed = true;
1703+
}
16891704

16901705
RED.palette.refresh();
16911706

16921707
if (changed) {
1708+
var wasChanged = editing_node.changed;
1709+
editing_node.changed = true;
1710+
validateNode(editing_node);
16931711
var subflowInstances = [];
16941712
RED.nodes.eachNode(function(n) {
16951713
if (n.type == "subflow:"+editing_node.id) {
@@ -1700,10 +1718,9 @@ RED.editor = (function() {
17001718
n.changed = true;
17011719
n.dirty = true;
17021720
updateNodeProperties(n);
1721+
validateNode(n);
17031722
}
17041723
});
1705-
var wasChanged = editing_node.changed;
1706-
editing_node.changed = true;
17071724
RED.nodes.dirty(true);
17081725
var historyEvent = {
17091726
t:'edit',
@@ -1782,6 +1799,7 @@ RED.editor = (function() {
17821799
$("#subflow-dialog-user-count").html(RED._("subflow.subflowInstances", {count:userCount})).show();
17831800

17841801
buildLabelForm(portLabels.content,subflow);
1802+
validateIcon(subflow);
17851803
trayBody.i18n();
17861804
},
17871805
close: function() {

‎editor/js/ui/palette.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,12 @@ RED.palette = (function() {
116116
el.data('popover').setContent(popOverContent);
117117
}
118118

119+
function setIcon(element,sf) {
120+
var iconElement = element.find(".palette_icon");
121+
var icon_url = RED.utils.getNodeIcon(sf._def,sf);
122+
iconElement.attr("style", "background-image: url("+icon_url+")");
123+
}
124+
119125
function escapeNodeType(nt) {
120126
return nt.replace(" ","_").replace(".","_").replace(":","_");
121127
}
@@ -375,6 +381,7 @@ RED.palette = (function() {
375381
portOutput.remove();
376382
}
377383
setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info||""));
384+
setIcon(paletteNode,sf);
378385
});
379386
}
380387

‎editor/js/ui/utils.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -708,7 +708,9 @@ RED.utils = (function() {
708708

709709
function getDefaultNodeIcon(def,node) {
710710
var icon_url;
711-
if (typeof def.icon === "function") {
711+
if (node && node.type === "subflow") {
712+
icon_url = "node-red/subflow.png";
713+
} else if (typeof def.icon === "function") {
712714
try {
713715
icon_url = def.icon.call(node);
714716
} catch(err) {
@@ -731,25 +733,36 @@ RED.utils = (function() {
731733
return iconPath;
732734
}
733735

736+
function isIconExists(iconPath) {
737+
var iconSets = RED.nodes.getIconSets();
738+
var iconFileList = iconSets[iconPath.module];
739+
if (iconFileList && iconFileList.indexOf(iconPath.file) !== -1) {
740+
return true;
741+
} else {
742+
return false;
743+
}
744+
}
745+
734746
function getNodeIcon(def,node) {
735747
if (def.category === 'config') {
736748
return "icons/node-red/cog.png"
737749
} else if (node && node.type === 'tab') {
738750
return "icons/node-red/subflow.png"
739751
} else if (node && node.type === 'unknown') {
740752
return "icons/node-red/alert.png"
741-
} else if (node && node.type === 'subflow') {
742-
return "icons/node-red/subflow.png"
743753
} else if (node && node.icon) {
744754
var iconPath = separateIconPath(node.icon);
745-
var iconSets = RED.nodes.getIconSets();
746-
var iconFileList = iconSets[iconPath.module];
747-
if (iconFileList && iconFileList.indexOf(iconPath.file) !== -1) {
755+
if (isIconExists(iconPath)) {
748756
return "icons/" + node.icon;
749757
}
750758
}
751759

752760
var iconPath = getDefaultNodeIcon(def, node);
761+
if (def.category === 'subflows') {
762+
if (!isIconExists(iconPath)) {
763+
return "icons/node-red/subflow.png";
764+
}
765+
}
753766
return "icons/"+iconPath.module+"/"+iconPath.file;
754767
}
755768

0 commit comments

Comments
 (0)