');
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
index 9ee508de6..d4523f88f 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js
@@ -24,6 +24,9 @@
* - rootSortable: boolean - if 'sortable' is set, then setting this to
* false, prevents items being sorted to the
* top level of the tree
+ * - autoSelect: boolean - default true - triggers item selection when navigating
+ * list by keyboard. If the list has checkboxed items
+ * you probably want to set this to false
*
* methods:
* - data(items) - clears existing items and replaces with new data
@@ -50,6 +53,7 @@
* deferBuild: true/false, // don't build any ui elements for the item's children
* until it is expanded by the user.
* element: // custom dom element to use for the item - ignored if `label` is set
+ * collapsible: true/false, // prevent a parent item from being collapsed. default true.
* }
* ]
*
@@ -90,77 +94,99 @@
$.widget( "nodered.treeList", {
_create: function() {
var that = this;
-
+ var autoSelect = true;
+ if (that.options.autoSelect === false) {
+ autoSelect = false;
+ }
this.element.addClass('red-ui-treeList');
this.element.attr("tabIndex",0);
var wrapper = $('
',{class:'red-ui-treeList-container'}).appendTo(this.element);
this.element.on('keydown', function(evt) {
- var selected = that._topList.find(".selected").parent().data('data');
- if (!selected && (evt.keyCode === 40 || evt.keyCode === 38)) {
- that.select(that._data[0]);
+ var focussed = that._topList.find(".focus").parent().data('data');
+ if (!focussed && (evt.keyCode === 40 || evt.keyCode === 38)) {
+ if (that._data[0]) {
+ if (autoSelect) {
+ that.select(that._data[0]);
+ } else {
+ that._topList.find(".focus").removeClass("focus")
+ }
+ that._data[0].treeList.label.addClass('focus')
+ }
return;
}
var target;
switch(evt.keyCode) {
+ case 32: // SPACE
case 13: // ENTER
+ if (evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {
+ return
+ }
evt.preventDefault();
evt.stopPropagation();
- if (selected.children) {
- if (selected.treeList.container.hasClass("expanded")) {
- selected.treeList.collapse()
+ if (focussed.checkbox) {
+ focussed.treeList.checkbox.trigger("click");
+ } else if (focussed.radio) {
+ focussed.treeList.radio.trigger("click");
+ } else if (focussed.children) {
+ if (focussed.treeList.container.hasClass("expanded")) {
+ focussed.treeList.collapse()
} else {
- selected.treeList.expand()
+ focussed.treeList.expand()
}
} else {
- that._trigger("confirm",null,selected)
+ that._trigger("confirm",null,focussed)
}
-
break;
case 37: // LEFT
evt.preventDefault();
evt.stopPropagation();
- if (selected.children&& selected.treeList.container.hasClass("expanded")) {
- selected.treeList.collapse()
- } else if (selected.parent) {
- target = selected.parent;
+ if (focussed.children&& focussed.treeList.container.hasClass("expanded")) {
+ focussed.treeList.collapse()
+ } else if (focussed.parent) {
+ target = focussed.parent;
}
break;
case 38: // UP
evt.preventDefault();
evt.stopPropagation();
- target = that._getPreviousSibling(selected);
+ target = that._getPreviousSibling(focussed);
if (target) {
target = that._getLastDescendant(target);
}
- if (!target && selected.parent) {
- target = selected.parent;
+ if (!target && focussed.parent) {
+ target = focussed.parent;
}
break;
case 39: // RIGHT
evt.preventDefault();
evt.stopPropagation();
- if (selected.children) {
- if (!selected.treeList.container.hasClass("expanded")) {
- selected.treeList.expand()
+ if (focussed.children) {
+ if (!focussed.treeList.container.hasClass("expanded")) {
+ focussed.treeList.expand()
}
}
break
case 40: //DOWN
evt.preventDefault();
evt.stopPropagation();
- if (selected.children && Array.isArray(selected.children) && selected.children.length > 0 && selected.treeList.container.hasClass("expanded")) {
- target = selected.children[0];
+ if (focussed.children && Array.isArray(focussed.children) && focussed.children.length > 0 && focussed.treeList.container.hasClass("expanded")) {
+ target = focussed.children[0];
} else {
- target = that._getNextSibling(selected);
- while (!target && selected.parent) {
- selected = selected.parent;
- target = that._getNextSibling(selected);
+ target = that._getNextSibling(focussed);
+ while (!target && focussed.parent) {
+ focussed = focussed.parent;
+ target = that._getNextSibling(focussed);
}
}
break
}
if (target) {
- that.select(target);
+ if (autoSelect) {
+ that.select(target);
+ } else {
+ that._topList.find(".focus").removeClass("focus")
+ }
+ target.treeList.label.addClass('focus')
}
});
this._data = [];
@@ -463,6 +489,9 @@
container.addClass("expanded");
}
item.treeList.collapse = function() {
+ if (item.collapsible === false) {
+ return
+ }
if (!item.children) {
return;
}
@@ -583,7 +612,7 @@
// Already a parent because we've got the angle-right icon
return;
}
- $('').appendTo(treeListIcon);
+ $('').toggleClass("hide",item.collapsible === false).appendTo(treeListIcon);
treeListIcon.on("click.red-ui-treeList-expand", function(e) {
e.stopPropagation();
e.preventDefault();
@@ -634,6 +663,8 @@
label.on("click", function(e) {
e.stopPropagation();
cb.trigger("click");
+ that._topList.find(".focus").removeClass("focus")
+ label.addClass('focus')
})
}
item.treeList.select = function(v) {
@@ -641,6 +672,7 @@
cb.trigger("click");
}
}
+ item.treeList.checkbox = cb;
selectWrapper.appendTo(label)
} else if (item.radio) {
var selectWrapper = $('');
@@ -669,6 +701,8 @@
label.on("click", function(e) {
e.stopPropagation();
cb.trigger("click");
+ that._topList.find(".focus").removeClass("focus")
+ label.addClass('focus')
})
}
item.treeList.select = function(v) {
@@ -677,6 +711,7 @@
}
}
selectWrapper.appendTo(label)
+ item.treeList.radio = cb;
} else {
label.on("click", function(e) {
if (!that.options.multi) {
@@ -684,10 +719,14 @@
}
label.addClass("selected");
that._selected.add(item);
+ that._topList.find(".focus").removeClass("focus")
+ label.addClass('focus')
that._trigger("select",e,item)
})
label.on("dblclick", function(e) {
+ that._topList.find(".focus").removeClass("focus")
+ label.addClass('focus')
if (!item.children) {
that._trigger("confirm",e,item);
}
@@ -835,6 +874,9 @@
if (item.treeList.label) {
item.treeList.label.addClass("selected");
}
+
+ that._topList.find(".focus").removeClass("focus");
+
if (triggerEvent !== false) {
this._trigger("select",null,item)
}
@@ -842,6 +884,9 @@
clearSelection: function() {
this._selected.forEach(function(item) {
item.selected = false;
+ if (item.treeList.checkbox) {
+ item.treeList.checkbox.prop('checked',false)
+ }
if (item.treeList.label) {
item.treeList.label.removeClass("selected")
}
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
index 1386a8ea5..ba7e48900 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
@@ -345,6 +345,47 @@
}
}
};
+
+ // For a type with options, check value is a valid selection
+ // If !opt.multiple, returns the valid option object
+ // if opt.multiple, returns an array of valid option objects
+ // If not valid, returns null;
+
+ function isOptionValueValid(opt, currentVal) {
+ if (!opt.multiple) {
+ for (var i=0;i').appendTo(this.uiSelect);
this.optionExpandButtonIcon = $('').appendTo(this.optionExpandButton);
- // Used to remember selections per-type to restore them when switching between types
- this.oldValues = {};
-
this.type(this.options.default||this.typeList[0].value);
}catch(err) {
console.log(err.stack);
@@ -859,22 +899,44 @@
return this.propertyType;
} else {
var that = this;
+ var previousValue = null;
var opt = this.typeMap[type];
if (opt && this.propertyType !== type) {
// If previousType is !null, then this is a change of the type, rather than the initialisation
var previousType = this.typeMap[this.propertyType];
var typeChanged = !!previousType;
+ previousValue = this.input.val();
if (typeChanged) {
if (previousType.options && opt.hasValue !== true) {
- this.oldValues[previousType.value] = this.input.val();
+ this.oldValues[previousType.value] = previousValue;
} else if (previousType.hasValue === false) {
- this.oldValues[previousType.value] = this.input.val();
+ this.oldValues[previousType.value] = previousValue;
} else {
- this.oldValues["_"] = this.input.val();
+ this.oldValues["_"] = previousValue;
}
if ((opt.options && opt.hasValue !== true) || opt.hasValue === false) {
- this.input.val(this.oldValues.hasOwnProperty(opt.value)?this.oldValues[opt.value]:(opt.default||[]).join(","))
+ if (this.oldValues.hasOwnProperty(opt.value)) {
+ this.input.val(this.oldValues[opt.value]);
+ } else {
+ // No old value for the option type.
+ // It is possible code has called 'value' then 'type'
+ // to set the selected option. This is what the Inject/Switch/Change
+ // nodes did before 2.1.
+ // So we need to be careful to not reset the value if it is a valid option.
+ var validOptions = isOptionValueValid(opt,previousValue);
+ if (previousValue && validOptions) {
+ this.input.val(previousValue);
+ } else {
+ if (typeof opt.default === "string") {
+ this.input.val(opt.default);
+ } else if (Array.isArray(opt.default)) {
+ this.input.val(opt.default.join(","))
+ } else {
+ this.input.val("");
+ }
+ }
+ }
} else {
this.input.val(this.oldValues.hasOwnProperty("_")?this.oldValues["_"]:(opt.default||""))
}
@@ -951,22 +1013,12 @@
var op;
if (!opt.hasValue) {
- var validValue = false;
- var currentVal = this.input.val();
+ // Check the value is valid for the available options
+ var validValues = isOptionValueValid(opt,this.input.val());
if (!opt.multiple) {
- for (var i=0;iLink Callノードを用いることで、Link Inノードから始まるフローを呼び出し、Link Outノードに到達した時に、結果を取得できます。"
}
},
+ {
+ title: {
+ "en-US": "MQTT nodes support dynamic connections",
+ "ja": "MQTTノードが動的接続をサポート"
+ },
+ prepare(done) {
+ $('[data-palette-type="mqtt out"]')[0].scrollIntoView({block:"center"})
+ setTimeout(done,100);
+ },
+ element: '[data-palette-type="mqtt out"]',
+ direction: "right",
+ description: {
+ "en-US": '
The MQTT nodes now support creating their connections and subscriptions dynamically.