mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Merge branch 'master' into runtime-api
This commit is contained in:
Nick O'Leary
@@ -10,6 +10,7 @@
|
||||
"ctrl-g i": "core:show-info-tab",
|
||||
"ctrl-g d": "core:show-debug-tab",
|
||||
"ctrl-g c": "core:show-config-tab",
|
||||
"ctrl-g x": "core:show-context-tab",
|
||||
"ctrl-e": "core:show-export-dialog",
|
||||
"ctrl-i": "core:show-import-dialog",
|
||||
"ctrl-space": "core:toggle-sidebar",
|
||||
|
||||
@@ -133,7 +133,7 @@ RED.nodes = (function() {
|
||||
registerNodeType: function(nt,def) {
|
||||
nodeDefinitions[nt] = def;
|
||||
def.type = nt;
|
||||
if (def.category != "subflows") {
|
||||
if (nt.substring(0,8) != "subflow:") {
|
||||
def.set = nodeSets[typeToId[nt]];
|
||||
nodeSets[typeToId[nt]].added = true;
|
||||
nodeSets[typeToId[nt]].enabled = true;
|
||||
@@ -356,7 +356,7 @@ RED.nodes = (function() {
|
||||
defaults:{name:{value:""}},
|
||||
info: sf.info,
|
||||
icon: function() { return sf.icon||"subflow.png" },
|
||||
category: "subflows",
|
||||
category: sf.category || "subflows",
|
||||
inputs: sf.in.length,
|
||||
outputs: sf.out.length,
|
||||
color: "#da9",
|
||||
@@ -519,6 +519,7 @@ RED.nodes = (function() {
|
||||
node.type = n.type;
|
||||
node.name = n.name;
|
||||
node.info = n.info;
|
||||
node.category = n.category;
|
||||
node.in = [];
|
||||
node.out = [];
|
||||
|
||||
|
||||
@@ -276,9 +276,20 @@ RED.clipboard = (function() {
|
||||
if (typeof value !== "string" ) {
|
||||
value = JSON.stringify(value, function(key,value) {
|
||||
if (value !== null && typeof value === 'object') {
|
||||
if (value.__encoded__ && value.hasOwnProperty('data') && value.hasOwnProperty('length')) {
|
||||
truncated = value.data.length !== value.length;
|
||||
return value.data;
|
||||
if (value.__enc__) {
|
||||
if (value.hasOwnProperty('data') && value.hasOwnProperty('length')) {
|
||||
truncated = value.data.length !== value.length;
|
||||
return value.data;
|
||||
}
|
||||
if (value.type === 'function' || value.type === 'internal') {
|
||||
return undefined
|
||||
}
|
||||
if (value.type === 'number') {
|
||||
// Handle NaN and Infinity - they are not permitted
|
||||
// in JSON. We can either substitute with a String
|
||||
// representation or null
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
return value;
|
||||
|
||||
@@ -48,23 +48,31 @@ RED.popover = (function() {
|
||||
|
||||
var openPopup = function(instant) {
|
||||
if (active) {
|
||||
div = $('<div class="red-ui-popover red-ui-popover-'+direction+'"></div>').appendTo("body");
|
||||
div = $('<div class="red-ui-popover red-ui-popover-'+direction+'"></div>');
|
||||
if (size !== "default") {
|
||||
div.addClass("red-ui-popover-size-"+size);
|
||||
}
|
||||
if (typeof content === 'function') {
|
||||
content.call(res).appendTo(div);
|
||||
var result = content.call(res);
|
||||
if (result === null) {
|
||||
return;
|
||||
}
|
||||
if (typeof result === 'string') {
|
||||
div.text(result);
|
||||
} else {
|
||||
div.append(result);
|
||||
}
|
||||
} else {
|
||||
div.html(content);
|
||||
}
|
||||
if (width !== "auto") {
|
||||
div.width(width);
|
||||
}
|
||||
|
||||
div.appendTo("body");
|
||||
|
||||
var targetPos = target.offset();
|
||||
var targetWidth = target.width();
|
||||
var targetHeight = target.height();
|
||||
var targetWidth = target.outerWidth();
|
||||
var targetHeight = target.outerHeight();
|
||||
var divHeight = div.height();
|
||||
var divWidth = div.width();
|
||||
if (direction === 'right') {
|
||||
@@ -147,7 +155,17 @@ RED.popover = (function() {
|
||||
}
|
||||
|
||||
return {
|
||||
create: createPopover
|
||||
create: createPopover,
|
||||
tooltip: function(target,content) {
|
||||
RED.popover.create({
|
||||
target:target,
|
||||
trigger: "hover",
|
||||
size: "small",
|
||||
direction: "bottom",
|
||||
content: content,
|
||||
delay: { show: 550, hide: 10 }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@@ -17,6 +17,9 @@
|
||||
|
||||
|
||||
RED.tabs = (function() {
|
||||
|
||||
var defaultTabIcon = "fa fa-lemon-o";
|
||||
|
||||
function createTabs(options) {
|
||||
var tabs = {};
|
||||
var pinnedTabsCount = 0;
|
||||
@@ -71,6 +74,7 @@ RED.tabs = (function() {
|
||||
var id = $(el).data('tabId');
|
||||
var opt = {
|
||||
id:"red-ui-tabs-menu-option-"+id,
|
||||
icon: tabs[id].iconClass || defaultTabIcon,
|
||||
label: tabs[id].name,
|
||||
onselect: function() {
|
||||
activateTab(id);
|
||||
@@ -90,12 +94,12 @@ RED.tabs = (function() {
|
||||
collapsibleMenu.on('mouseleave', function(){ $(this).hide() });
|
||||
collapsibleMenu.on('mouseup', function() { $(this).hide() });
|
||||
collapsibleMenu.appendTo("body");
|
||||
var elementPos = selectButton.offset();
|
||||
collapsibleMenu.css({
|
||||
top: (elementPos.top+selectButton.height()-20)+"px",
|
||||
left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
|
||||
})
|
||||
}
|
||||
var elementPos = selectButton.offset();
|
||||
collapsibleMenu.css({
|
||||
top: (elementPos.top+selectButton.height()-20)+"px",
|
||||
left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
|
||||
})
|
||||
collapsibleMenu.toggle();
|
||||
})
|
||||
|
||||
@@ -170,8 +174,8 @@ RED.tabs = (function() {
|
||||
ul.children().css({"transition": "width 100ms"});
|
||||
link.parent().addClass("active");
|
||||
var parentId = link.parent().attr('id');
|
||||
wrapper.find(".red-ui-tab-link-button").removeClass("active");
|
||||
$("#"+parentId+"-link-button").addClass("active");
|
||||
wrapper.find(".red-ui-tab-link-button").removeClass("active selected");
|
||||
$("#"+parentId+"-link-button").addClass("active selected");
|
||||
if (options.scrollable) {
|
||||
var pos = link.parent().position().left;
|
||||
if (pos-21 < 0) {
|
||||
@@ -339,7 +343,7 @@ RED.tabs = (function() {
|
||||
if (tab.iconClass) {
|
||||
$('<i>',{class:tab.iconClass}).appendTo(pinnedLink);
|
||||
} else {
|
||||
$('<i>',{class:"fa fa-lemon-o"}).appendTo(pinnedLink);
|
||||
$('<i>',{class:defaultTabIcon}).appendTo(pinnedLink);
|
||||
}
|
||||
pinnedLink.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
@@ -349,14 +353,7 @@ RED.tabs = (function() {
|
||||
pinnedLink.addClass("red-ui-tab-link-button-pinned");
|
||||
pinnedTabsCount++;
|
||||
}
|
||||
RED.popover.create({
|
||||
target:$(pinnedLink),
|
||||
trigger: "hover",
|
||||
size: "small",
|
||||
direction: "bottom",
|
||||
content: tab.name,
|
||||
delay: { show: 550, hide: 10 }
|
||||
});
|
||||
RED.popover.tooltip($(pinnedLink), tab.name);
|
||||
|
||||
}
|
||||
link.on("click",onTabClick);
|
||||
@@ -370,7 +367,6 @@ RED.tabs = (function() {
|
||||
removeTab(tab.id);
|
||||
});
|
||||
}
|
||||
updateTabWidths();
|
||||
if (options.onadd) {
|
||||
options.onadd(tab);
|
||||
}
|
||||
@@ -455,6 +451,9 @@ RED.tabs = (function() {
|
||||
}
|
||||
})
|
||||
}
|
||||
setTimeout(function() {
|
||||
updateTabWidths();
|
||||
},10);
|
||||
collapsibleMenu = null;
|
||||
},
|
||||
removeTab: removeTab,
|
||||
|
||||
@@ -14,10 +14,38 @@
|
||||
* limitations under the License.
|
||||
**/
|
||||
(function($) {
|
||||
var contextParse = function(v) {
|
||||
var parts = RED.utils.parseContextKey(v);
|
||||
return {
|
||||
option: parts.store,
|
||||
value: parts.key
|
||||
}
|
||||
}
|
||||
var contextExport = function(v,opt) {
|
||||
if (!opt) {
|
||||
return v;
|
||||
}
|
||||
var store = ((typeof opt === "string")?opt:opt.value)
|
||||
if (store !== RED.settings.context.default) {
|
||||
return "#:("+store+")::"+v;
|
||||
} else {
|
||||
return v;
|
||||
}
|
||||
}
|
||||
var allOptions = {
|
||||
msg: {value:"msg",label:"msg.",validate:RED.utils.validatePropertyExpression},
|
||||
flow: {value:"flow",label:"flow.",validate:RED.utils.validatePropertyExpression},
|
||||
global: {value:"global",label:"global.",validate:RED.utils.validatePropertyExpression},
|
||||
flow: {value:"flow",label:"flow.",hasValue:true,
|
||||
options:[],
|
||||
validate:RED.utils.validatePropertyExpression,
|
||||
parse: contextParse,
|
||||
export: contextExport
|
||||
},
|
||||
global: {value:"global",label:"global.",hasValue:true,
|
||||
options:[],
|
||||
validate:RED.utils.validatePropertyExpression,
|
||||
parse: contextParse,
|
||||
export: contextExport
|
||||
},
|
||||
str: {value:"str",label:"string",icon:"red/images/typedInput/az.png"},
|
||||
num: {value:"num",label:"number",icon:"red/images/typedInput/09.png",validate:/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/},
|
||||
bool: {value:"bool",label:"boolean",icon:"red/images/typedInput/bool.png",options:["true","false"]},
|
||||
@@ -87,25 +115,40 @@
|
||||
|
||||
$.widget( "nodered.typedInput", {
|
||||
_create: function() {
|
||||
try {
|
||||
if (!nlsd && RED && RED._) {
|
||||
for (var i in allOptions) {
|
||||
if (allOptions.hasOwnProperty(i)) {
|
||||
allOptions[i].label = RED._("typedInput.type."+i,{defaultValue:allOptions[i].label});
|
||||
}
|
||||
}
|
||||
var contextStores = RED.settings.context.stores;
|
||||
var contextOptions = contextStores.map(function(store) {
|
||||
return {value:store,label: store, icon:'<i class="red-ui-typedInput-icon fa fa-database" style="color: #'+(store==='memory'?'ddd':'777')+'"></i>'}
|
||||
})
|
||||
if (contextOptions.length < 2) {
|
||||
allOptions.flow.options = [];
|
||||
allOptions.global.options = [];
|
||||
} else {
|
||||
allOptions.flow.options = contextOptions;
|
||||
allOptions.global.options = contextOptions;
|
||||
}
|
||||
}
|
||||
nlsd = true;
|
||||
var that = this;
|
||||
|
||||
this.disarmClick = false;
|
||||
this.input = $('<input type="text"></input>');
|
||||
this.input.insertAfter(this.element);
|
||||
this.input.val(this.element.val());
|
||||
this.element.addClass('red-ui-typedInput');
|
||||
this.uiWidth = this.element.outerWidth();
|
||||
this.elementDiv = this.element.wrap("<div>").parent().addClass('red-ui-typedInput-input');
|
||||
this.elementDiv = this.input.wrap("<div>").parent().addClass('red-ui-typedInput-input');
|
||||
this.uiSelect = this.elementDiv.wrap( "<div>" ).parent();
|
||||
var attrStyle = this.element.attr('style');
|
||||
var m;
|
||||
if ((m = /width\s*:\s*(calc\s*\(.*\)|\d+(%|px))/i.exec(attrStyle)) !== null) {
|
||||
this.element.css('width','100%');
|
||||
this.input.css('width','100%');
|
||||
this.uiSelect.width(m[1]);
|
||||
this.uiWidth = null;
|
||||
} else {
|
||||
@@ -114,17 +157,19 @@
|
||||
["Right","Left"].forEach(function(d) {
|
||||
var m = that.element.css("margin"+d);
|
||||
that.uiSelect.css("margin"+d,m);
|
||||
that.element.css("margin"+d,0);
|
||||
that.input.css("margin"+d,0);
|
||||
});
|
||||
|
||||
this.uiSelect.addClass("red-ui-typedInput-container");
|
||||
|
||||
this.element.attr('type','hidden');
|
||||
|
||||
this.options.types = this.options.types||Object.keys(allOptions);
|
||||
|
||||
this.selectTrigger = $('<button tabindex="0"></button>').prependTo(this.uiSelect);
|
||||
if (this.options.types.length > 1) {
|
||||
$('<i class="fa fa-sort-desc"></i>').appendTo(this.selectTrigger);
|
||||
}
|
||||
this.selectLabel = $('<span></span>').appendTo(this.selectTrigger);
|
||||
$('<i class="red-ui-typedInput-icon fa fa-sort-desc"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
|
||||
|
||||
this.selectLabel = $('<span class="red-ui-typedInput-type-label"></span>').appendTo(this.selectTrigger);
|
||||
|
||||
this.types(this.options.types);
|
||||
|
||||
@@ -138,14 +183,16 @@
|
||||
this.typeField = $("<input>",{type:'hidden'}).appendTo(this.uiSelect);
|
||||
}
|
||||
|
||||
this.element.on('focus', function() {
|
||||
this.input.on('focus', function() {
|
||||
that.uiSelect.addClass('red-ui-typedInput-focus');
|
||||
});
|
||||
this.element.on('blur', function() {
|
||||
this.input.on('blur', function() {
|
||||
that.uiSelect.removeClass('red-ui-typedInput-focus');
|
||||
});
|
||||
this.element.on('change', function() {
|
||||
this.input.on('change', function() {
|
||||
that.validate();
|
||||
that.element.val(that.value());
|
||||
that.element.trigger('change',that.propertyType,that.value());
|
||||
})
|
||||
this.selectTrigger.click(function(event) {
|
||||
event.preventDefault();
|
||||
@@ -161,8 +208,11 @@
|
||||
})
|
||||
|
||||
// explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
|
||||
this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="fa fa-sort-desc"></i></span></button>').appendTo(this.uiSelect);
|
||||
this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-sort-desc"></i></span></button>').appendTo(this.uiSelect);
|
||||
this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
|
||||
RED.popover.tooltip(this.optionSelectLabel,function() {
|
||||
return that.optionValue;
|
||||
});
|
||||
this.optionSelectTrigger.click(function(event) {
|
||||
event.preventDefault();
|
||||
that._showOptionSelectMenu();
|
||||
@@ -177,17 +227,18 @@
|
||||
that.uiSelect.addClass('red-ui-typedInput-focus');
|
||||
});
|
||||
|
||||
this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"><i class="fa fa-ellipsis-h"></i></button>').appendTo(this.uiSelect);
|
||||
|
||||
|
||||
this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"><i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i></button>').appendTo(this.uiSelect);
|
||||
this.type(this.options.default||this.typeList[0].value);
|
||||
}catch(err) {
|
||||
console.log(err.stack);
|
||||
}
|
||||
},
|
||||
_showTypeMenu: function() {
|
||||
if (this.typeList.length > 1) {
|
||||
this._showMenu(this.menu,this.selectTrigger);
|
||||
this.menu.find("[value='"+this.propertyType+"']").focus();
|
||||
} else {
|
||||
this.element.focus();
|
||||
this.input.focus();
|
||||
}
|
||||
},
|
||||
_showOptionSelectMenu: function() {
|
||||
@@ -196,8 +247,8 @@
|
||||
minWidth:this.optionSelectLabel.width()
|
||||
});
|
||||
|
||||
this._showMenu(this.optionMenu,this.optionSelectLabel);
|
||||
var selectedOption = this.optionMenu.find("[value='"+this.value()+"']");
|
||||
this._showMenu(this.optionMenu,this.optionSelectTrigger);
|
||||
var selectedOption = this.optionMenu.find("[value='"+this.optionValue+"']");
|
||||
if (selectedOption.length === 0) {
|
||||
selectedOption = this.optionMenu.children(":first");
|
||||
}
|
||||
@@ -209,7 +260,7 @@
|
||||
$(document).off("mousedown.close-property-select");
|
||||
menu.hide();
|
||||
if (this.elementDiv.is(":visible")) {
|
||||
this.element.focus();
|
||||
this.input.focus();
|
||||
} else if (this.optionSelectTrigger.is(":visible")){
|
||||
this.optionSelectTrigger.focus();
|
||||
} else {
|
||||
@@ -228,10 +279,19 @@
|
||||
op.text(opt.label);
|
||||
}
|
||||
if (opt.icon) {
|
||||
$('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
|
||||
if (opt.icon.indexOf("<") === 0) {
|
||||
$(opt.icon).prependTo(op);
|
||||
} else if (opt.icon.indexOf("/") !== -1) {
|
||||
$('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
|
||||
} else {
|
||||
$('<i>',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(op);
|
||||
}
|
||||
} else {
|
||||
op.css({paddingLeft: "18px"});
|
||||
}
|
||||
if (!opt.icon && !opt.label) {
|
||||
op.text(opt.value);
|
||||
}
|
||||
|
||||
op.click(function(event) {
|
||||
event.preventDefault();
|
||||
@@ -310,7 +370,8 @@
|
||||
if (this.uiWidth !== null) {
|
||||
this.uiSelect.width(this.uiWidth);
|
||||
}
|
||||
if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) {
|
||||
var type = this.typeMap[this.propertyType];
|
||||
if (type && type.hasValue === false) {
|
||||
this.selectTrigger.addClass("red-ui-typedInput-full-width");
|
||||
} else {
|
||||
this.selectTrigger.removeClass("red-ui-typedInput-full-width");
|
||||
@@ -320,13 +381,68 @@
|
||||
this.elementDiv.css('right',"22px");
|
||||
} else {
|
||||
this.elementDiv.css('right','0');
|
||||
this.input.css({
|
||||
'border-top-right-radius': '4px',
|
||||
'border-bottom-right-radius': '4px'
|
||||
});
|
||||
}
|
||||
|
||||
// if (this.optionSelectTrigger) {
|
||||
// this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'});
|
||||
// }
|
||||
|
||||
if (this.optionSelectTrigger) {
|
||||
this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'});
|
||||
if (type && type.options && type.hasValue === true) {
|
||||
this.optionSelectLabel.css({'left':'auto'})
|
||||
var lw = this._getLabelWidth(this.optionSelectLabel);
|
||||
this.optionSelectTrigger.css({'width':(23+lw)+"px"});
|
||||
this.elementDiv.css('right',(23+lw)+"px");
|
||||
this.input.css({
|
||||
'border-top-right-radius': 0,
|
||||
'border-bottom-right-radius': 0
|
||||
});
|
||||
} else {
|
||||
this.optionSelectLabel.css({'left':'0'})
|
||||
this.optionSelectTrigger.css({'width':'calc( 100% - '+labelWidth+'px )'});
|
||||
if (!this.optionExpandButton.is(":visible")) {
|
||||
this.elementDiv.css({'right':0});
|
||||
this.input.css({
|
||||
'border-top-right-radius': '4px',
|
||||
'border-bottom-right-radius': '4px'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_updateOptionSelectLabel: function(o) {
|
||||
var opt = this.typeMap[this.propertyType];
|
||||
this.optionSelectLabel.empty();
|
||||
if (o.icon) {
|
||||
if (o.icon.indexOf("<") === 0) {
|
||||
$(o.icon).prependTo(this.optionSelectLabel);
|
||||
} else if (o.icon.indexOf("/") !== -1) {
|
||||
// url
|
||||
$('<img>',{src:o.icon,style:"height: 18px;"}).prependTo(this.optionSelectLabel);
|
||||
} else {
|
||||
// icon class
|
||||
$('<i>',{class:"red-ui-typedInput-icon "+o.icon}).prependTo(this.optionSelectLabel);
|
||||
}
|
||||
} else if (o.label) {
|
||||
this.optionSelectLabel.text(o.label);
|
||||
} else {
|
||||
this.optionSelectLabel.text(o.value);
|
||||
}
|
||||
if (opt.hasValue) {
|
||||
this.optionValue = o.value;
|
||||
this._resize();
|
||||
this.input.trigger('change',this.propertyType,this.value());
|
||||
}
|
||||
},
|
||||
_destroy: function() {
|
||||
if (this.optionMenu) {
|
||||
this.optionMenu.remove();
|
||||
}
|
||||
this.menu.remove();
|
||||
},
|
||||
types: function(types) {
|
||||
@@ -344,13 +460,18 @@
|
||||
return result;
|
||||
});
|
||||
this.selectTrigger.toggleClass("disabled", this.typeList.length === 1);
|
||||
this.selectTrigger.find(".fa-sort-desc").toggle(this.typeList.length > 1)
|
||||
if (this.menu) {
|
||||
this.menu.remove();
|
||||
}
|
||||
this.menu = this._createMenu(this.typeList, function(v) { that.type(v) });
|
||||
if (currentType && !this.typeMap.hasOwnProperty(currentType)) {
|
||||
this.type(this.typeList[0].value);
|
||||
} else {
|
||||
this.propertyType = null;
|
||||
this.type(currentType);
|
||||
}
|
||||
setTimeout(function() {that._resize();},0);
|
||||
},
|
||||
width: function(desiredWidth) {
|
||||
this.uiWidth = desiredWidth;
|
||||
@@ -358,33 +479,33 @@
|
||||
},
|
||||
value: function(value) {
|
||||
if (!arguments.length) {
|
||||
return this.element.val();
|
||||
var v = this.input.val();
|
||||
if (this.typeMap[this.propertyType].export) {
|
||||
v = this.typeMap[this.propertyType].export(v,this.optionValue)
|
||||
}
|
||||
return v;
|
||||
} else {
|
||||
var selectedOption;
|
||||
if (this.typeMap[this.propertyType].options) {
|
||||
var validValue = false;
|
||||
var label;
|
||||
for (var i=0;i<this.typeMap[this.propertyType].options.length;i++) {
|
||||
var op = this.typeMap[this.propertyType].options[i];
|
||||
if (typeof op === "string") {
|
||||
if (op === value) {
|
||||
label = value;
|
||||
validValue = true;
|
||||
selectedOption = this.activeOptions[op];
|
||||
break;
|
||||
}
|
||||
} else if (op.value === value) {
|
||||
label = op.label||op.value;
|
||||
validValue = true;
|
||||
selectedOption = op;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!validValue) {
|
||||
value = "";
|
||||
label = "";
|
||||
if (!selectedOption) {
|
||||
selectedOption = {value:""}
|
||||
}
|
||||
this.optionSelectLabel.text(label);
|
||||
this._updateOptionSelectLabel(selectedOption)
|
||||
}
|
||||
this.element.val(value);
|
||||
this.element.trigger('change',this.type(),value);
|
||||
this.input.val(value);
|
||||
this.input.trigger('change',this.type(),value);
|
||||
}
|
||||
},
|
||||
type: function(type) {
|
||||
@@ -395,7 +516,9 @@
|
||||
var opt = this.typeMap[type];
|
||||
if (opt && this.propertyType !== type) {
|
||||
this.propertyType = type;
|
||||
this.typeField.val(type);
|
||||
if (this.typeField) {
|
||||
this.typeField.val(type);
|
||||
}
|
||||
this.selectLabel.empty();
|
||||
var image;
|
||||
if (opt.icon) {
|
||||
@@ -412,37 +535,88 @@
|
||||
}
|
||||
if (this.optionSelectTrigger) {
|
||||
this.optionSelectTrigger.show();
|
||||
this.elementDiv.hide();
|
||||
this.optionMenu = this._createMenu(opt.options,function(v){
|
||||
that.optionSelectLabel.text(v);
|
||||
that.value(v);
|
||||
if (!opt.hasValue) {
|
||||
this.elementDiv.hide();
|
||||
} else {
|
||||
this.elementDiv.show();
|
||||
}
|
||||
this.activeOptions = {};
|
||||
opt.options.forEach(function(o) {
|
||||
if (typeof o === 'string') {
|
||||
that.activeOptions[o] = {label:o,value:o};
|
||||
} else {
|
||||
that.activeOptions[o.value] = o;
|
||||
}
|
||||
});
|
||||
|
||||
if (!that.activeOptions.hasOwnProperty(that.optionValue)) {
|
||||
that.optionValue = null;
|
||||
}
|
||||
this.optionMenu = this._createMenu(opt.options,function(v){
|
||||
that._updateOptionSelectLabel(that.activeOptions[v]);
|
||||
if (!opt.hasValue) {
|
||||
that.value(that.activeOptions[v].value)
|
||||
}
|
||||
});
|
||||
var currentVal = this.element.val();
|
||||
var validValue = false;
|
||||
var op;
|
||||
for (var i=0;i<opt.options.length;i++) {
|
||||
op = opt.options[i];
|
||||
if (typeof op === "string") {
|
||||
if (op === currentVal) {
|
||||
this.optionSelectLabel.text(currentVal);
|
||||
if (!opt.hasValue) {
|
||||
var currentVal = this.input.val();
|
||||
var validValue = false;
|
||||
for (var i=0;i<opt.options.length;i++) {
|
||||
op = opt.options[i];
|
||||
if (typeof op === "string" && op === currentVal) {
|
||||
that._updateOptionSelectLabel({value:currentVal});
|
||||
validValue = true;
|
||||
break;
|
||||
} else if (op.value === currentVal) {
|
||||
that._updateOptionSelectLabel(op);
|
||||
validValue = true;
|
||||
break;
|
||||
}
|
||||
} else if (op.value === currentVal) {
|
||||
this.optionSelectLabel.text(op.label||op.value);
|
||||
validValue = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!validValue) {
|
||||
op = opt.options[0];
|
||||
if (typeof op === "string") {
|
||||
this.value(op);
|
||||
if (!validValue) {
|
||||
op = opt.options[0];
|
||||
if (typeof op === "string") {
|
||||
this.value(op);
|
||||
that._updateOptionSelectLabel({value:op});
|
||||
} else {
|
||||
this.value(op.value);
|
||||
that._updateOptionSelectLabel(op);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var selectedOption = this.optionValue||opt.options[0];
|
||||
if (opt.parse) {
|
||||
var parts = opt.parse(this.input.val());
|
||||
if (parts.option) {
|
||||
selectedOption = parts.option;
|
||||
if (!this.activeOptions.hasOwnProperty(selectedOption)) {
|
||||
parts.option = Object.keys(this.activeOptions)[0];
|
||||
selectedOption = parts.option
|
||||
}
|
||||
}
|
||||
this.input.val(parts.value);
|
||||
if (opt.export) {
|
||||
this.element.val(opt.export(parts.value,parts.option||selectedOption));
|
||||
}
|
||||
}
|
||||
if (typeof selectedOption === "string") {
|
||||
this.optionValue = selectedOption;
|
||||
if (!this.activeOptions.hasOwnProperty(selectedOption)) {
|
||||
selectedOption = Object.keys(this.activeOptions)[0];
|
||||
}
|
||||
if (!selectedOption) {
|
||||
this.optionSelectTrigger.hide();
|
||||
} else {
|
||||
this._updateOptionSelectLabel(this.activeOptions[selectedOption]);
|
||||
}
|
||||
} else if (selectedOption) {
|
||||
this.optionValue = selectedOption.value;
|
||||
this._updateOptionSelectLabel(selectedOption);
|
||||
} else {
|
||||
this.value(op.value);
|
||||
this.optionSelectTrigger.hide();
|
||||
}
|
||||
}
|
||||
console.log(validValue);
|
||||
}
|
||||
} else {
|
||||
if (this.optionMenu) {
|
||||
@@ -453,27 +627,29 @@
|
||||
this.optionSelectTrigger.hide();
|
||||
}
|
||||
if (opt.hasValue === false) {
|
||||
this.oldValue = this.element.val();
|
||||
this.element.val("");
|
||||
this.oldValue = this.input.val();
|
||||
this.input.val("");
|
||||
this.elementDiv.hide();
|
||||
} else {
|
||||
if (this.oldValue !== undefined) {
|
||||
this.element.val(this.oldValue);
|
||||
this.input.val(this.oldValue);
|
||||
delete this.oldValue;
|
||||
}
|
||||
this.elementDiv.show();
|
||||
}
|
||||
if (opt.expand && typeof opt.expand === 'function') {
|
||||
this.optionExpandButton.show();
|
||||
this.optionExpandButton.off('click');
|
||||
this.optionExpandButton.on('click',function(evt) {
|
||||
evt.preventDefault();
|
||||
opt.expand.call(that);
|
||||
})
|
||||
} else {
|
||||
this.optionExpandButton.hide();
|
||||
if (this.optionExpandButton) {
|
||||
if (opt.expand && typeof opt.expand === 'function') {
|
||||
this.optionExpandButton.show();
|
||||
this.optionExpandButton.off('click');
|
||||
this.optionExpandButton.on('click',function(evt) {
|
||||
evt.preventDefault();
|
||||
opt.expand.call(that);
|
||||
})
|
||||
} else {
|
||||
this.optionExpandButton.hide();
|
||||
}
|
||||
}
|
||||
this.element.trigger('change',this.propertyType,this.value());
|
||||
this.input.trigger('change',this.propertyType,this.value());
|
||||
}
|
||||
if (image) {
|
||||
image.onload = function() { that._resize(); }
|
||||
|
||||
@@ -490,7 +490,7 @@ RED.diff = (function() {
|
||||
}
|
||||
function createNodeIcon(node,def) {
|
||||
var nodeDiv = $("<div>",{class:"node-diff-node-entry-node"});
|
||||
var colour = def.color;
|
||||
var colour = RED.utils.getNodeColor(node.type,def);
|
||||
var icon_url = RED.utils.getNodeIcon(def,node);
|
||||
if (node.type === 'tab') {
|
||||
colour = "#C0DEED";
|
||||
|
||||
@@ -108,17 +108,6 @@ RED.editor = (function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (node.icon) {
|
||||
var iconPath = RED.utils.separateIconPath(node.icon);
|
||||
if (!iconPath.module) {
|
||||
return isValid;
|
||||
}
|
||||
var iconSets = RED.nodes.getIconSets();
|
||||
var iconFileList = iconSets[iconPath.module];
|
||||
if (!iconFileList || iconFileList.indexOf(iconPath.file) === -1) {
|
||||
isValid = false;
|
||||
}
|
||||
}
|
||||
return isValid;
|
||||
}
|
||||
|
||||
@@ -170,27 +159,6 @@ RED.editor = (function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
validateIcon(node);
|
||||
}
|
||||
|
||||
function validateIcon(node) {
|
||||
if (node._def.hasOwnProperty("defaults") && !node._def.defaults.hasOwnProperty("icon") && node.icon) {
|
||||
var iconPath = RED.utils.separateIconPath(node.icon);
|
||||
var iconSets = RED.nodes.getIconSets();
|
||||
var iconFileList = iconSets[iconPath.module];
|
||||
var iconModule = $("#node-settings-icon-module");
|
||||
var iconFile = $("#node-settings-icon-file");
|
||||
if (!iconFileList) {
|
||||
iconModule.addClass("input-error");
|
||||
iconFile.removeClass("input-error");
|
||||
} else if (iconFileList.indexOf(iconPath.file) === -1) {
|
||||
iconModule.removeClass("input-error");
|
||||
iconFile.addClass("input-error");
|
||||
} else {
|
||||
iconModule.removeClass("input-error");
|
||||
iconFile.removeClass("input-error");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function validateNodeEditorProperty(node,defaults,property,prefix) {
|
||||
@@ -528,6 +496,8 @@ RED.editor = (function() {
|
||||
label = node.type;
|
||||
if (node.type === '_expression') {
|
||||
label = RED._("expressionEditor.title");
|
||||
} else if (node.type === '_js') {
|
||||
label = RED._("jsEditor.title");
|
||||
} else if (node.type === '_json') {
|
||||
label = RED._("jsonEditor.title");
|
||||
} else if (node.type === '_markdown') {
|
||||
@@ -711,6 +681,97 @@ RED.editor = (function() {
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function showIconPicker(container, node, iconPath, done) {
|
||||
var containerPos = container.offset();
|
||||
var pickerBackground = $('<div>').css({
|
||||
position: "absolute",top:0,bottom:0,left:0,right:0,zIndex:20
|
||||
}).appendTo("body");
|
||||
|
||||
var top = containerPos.top - 30;
|
||||
|
||||
if (top+280 > $( window ).height()) {
|
||||
top = $( window ).height() - 280;
|
||||
}
|
||||
var picker = $('<div class="red-ui-icon-picker">').css({
|
||||
top: top+"px",
|
||||
left: containerPos.left+"px",
|
||||
}).appendTo("body");
|
||||
|
||||
var hide = function() {
|
||||
pickerBackground.remove();
|
||||
picker.remove();
|
||||
RED.keyboard.remove("escape");
|
||||
}
|
||||
RED.keyboard.add("*","escape",function(){hide()});
|
||||
pickerBackground.on("mousedown", hide);
|
||||
|
||||
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
|
||||
searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
|
||||
delay: 50,
|
||||
change: function() {
|
||||
var searchTerm = $(this).val().trim();
|
||||
if (searchTerm === "") {
|
||||
iconList.find(".red-ui-icon-list-module").show();
|
||||
iconList.find(".red-ui-icon-list-icon").show();
|
||||
} else {
|
||||
iconList.find(".red-ui-icon-list-module").hide();
|
||||
iconList.find(".red-ui-icon-list-icon").each(function(i,n) {
|
||||
if ($(n).data('icon').indexOf(searchTerm) === -1) {
|
||||
$(n).hide();
|
||||
} else {
|
||||
$(n).show();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var row = $('<div>').appendTo(picker);
|
||||
var iconList = $('<div class="red-ui-icon-list">').appendTo(picker);
|
||||
var metaRow = $('<div class="red-ui-icon-meta"></div>').appendTo(picker);
|
||||
var summary = $('<span>').appendTo(metaRow);
|
||||
var resetButton = $('<button class="editor-button editor-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).click(function(e) {
|
||||
e.preventDefault();
|
||||
hide();
|
||||
done(null);
|
||||
});
|
||||
var iconSets = RED.nodes.getIconSets();
|
||||
Object.keys(iconSets).forEach(function(moduleName) {
|
||||
var icons = iconSets[moduleName];
|
||||
if (icons.length > 0) {
|
||||
// selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
|
||||
var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
|
||||
$('<i class="fa fa-cube"></i>').prependTo(header);
|
||||
icons.forEach(function(icon) {
|
||||
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
|
||||
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
|
||||
var colour = RED.utils.getNodeColor(node.type, node._def);
|
||||
var icon_url = "icons/"+moduleName+"/"+icon;
|
||||
iconDiv.data('icon',icon_url)
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
|
||||
|
||||
if (iconPath.module === moduleName && iconPath.file === icon) {
|
||||
iconDiv.addClass("selected");
|
||||
}
|
||||
iconDiv.on("mouseover", function() {
|
||||
summary.text(icon);
|
||||
})
|
||||
iconDiv.on("mouseout", function() {
|
||||
summary.html(" ");
|
||||
})
|
||||
iconDiv.click(function() {
|
||||
hide();
|
||||
done(moduleName+"/"+icon);
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
picker.slideDown(100);
|
||||
searchInput.focus();
|
||||
}
|
||||
|
||||
function buildLabelForm(container,node) {
|
||||
var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
|
||||
|
||||
@@ -748,81 +809,36 @@ RED.editor = (function() {
|
||||
}
|
||||
|
||||
if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
|
||||
$('<div class="form-row"><div id="node-settings-icon"></div></div>').appendTo(dialogForm);
|
||||
var iconDiv = $("#node-settings-icon");
|
||||
$('<label data-i18n="editor.settingIcon">').appendTo(iconDiv);
|
||||
var iconForm = $('<div>',{class:"node-label-form-row"});
|
||||
iconForm.appendTo(iconDiv);
|
||||
$('<label>').appendTo(iconForm);
|
||||
$('<hr>').appendTo(dialogForm);
|
||||
var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
|
||||
$('<label style="width: 50px" data-i18n="editor.settingIcon">').appendTo(iconRow);
|
||||
|
||||
var selectIconModule = $('<select id="node-settings-icon-module"><option value=""></option></select>').appendTo(iconForm);
|
||||
var iconPath;
|
||||
if (node.icon) {
|
||||
iconPath = RED.utils.separateIconPath(node.icon);
|
||||
} else {
|
||||
iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
|
||||
}
|
||||
var iconSets = RED.nodes.getIconSets();
|
||||
Object.keys(iconSets).forEach(function(moduleName) {
|
||||
selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
|
||||
});
|
||||
if (iconPath.module && !iconSets[iconPath.module]) {
|
||||
selectIconModule.append($("<option disabled></option>").val(iconPath.module).text(iconPath.module));
|
||||
}
|
||||
selectIconModule.val(iconPath.module);
|
||||
var iconModuleHidden = $('<input type="hidden" id="node-settings-icon-module-hidden"></input>').appendTo(iconForm);
|
||||
iconModuleHidden.val(iconPath.module);
|
||||
var iconButton = $('<button class="editor-button">').appendTo(iconRow);
|
||||
|
||||
var selectIconFile = $('<select id="node-settings-icon-file"><option value=""></option></select>').appendTo(iconForm);
|
||||
selectIconModule.change(function() {
|
||||
moduleChange(selectIconModule, selectIconFile, iconModuleHidden, iconFileHidden, iconSets, true);
|
||||
});
|
||||
var iconFileHidden = $('<input type="hidden" id="node-settings-icon-file-hidden"></input>').appendTo(iconForm);
|
||||
iconFileHidden.val(iconPath.file);
|
||||
selectIconFile.change(function() {
|
||||
selectIconFile.removeClass("input-error");
|
||||
var fileName = selectIconFile.val();
|
||||
iconFileHidden.val(fileName);
|
||||
});
|
||||
var clear = $('<button class="editor-button editor-button-small"><i class="fa fa-times"></i></button>').appendTo(iconForm);
|
||||
clear.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
var iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
|
||||
selectIconModule.val(iconPath.module);
|
||||
moduleChange(selectIconModule, selectIconFile, iconModuleHidden, iconFileHidden, iconSets, true);
|
||||
selectIconFile.removeClass("input-error");
|
||||
selectIconFile.val(iconPath.file);
|
||||
iconFileHidden.val(iconPath.file);
|
||||
});
|
||||
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
|
||||
var colour = RED.utils.getNodeColor(node.type, node._def);
|
||||
var icon_url = RED.utils.getNodeIcon(node._def,node);
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
var iconDiv = $('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
|
||||
|
||||
moduleChange(selectIconModule, selectIconFile, iconModuleHidden, iconFileHidden, iconSets, false);
|
||||
var iconFileList = iconSets[selectIconModule.val()];
|
||||
if (!iconFileList || iconFileList.indexOf(iconPath.file) === -1) {
|
||||
selectIconFile.append($("<option disabled></option>").val(iconPath.file).text(iconPath.file));
|
||||
}
|
||||
selectIconFile.val(iconPath.file);
|
||||
}
|
||||
}
|
||||
|
||||
function moduleChange(selectIconModule, selectIconFile, iconModuleHidden, iconFileHidden, iconSets, updateIconFile) {
|
||||
selectIconFile.children().remove();
|
||||
var moduleName = selectIconModule.val();
|
||||
if (moduleName !== null) {
|
||||
iconModuleHidden.val(moduleName);
|
||||
}
|
||||
var iconFileList = iconSets[moduleName];
|
||||
if (iconFileList) {
|
||||
iconFileList.forEach(function(fileName) {
|
||||
if (updateIconFile) {
|
||||
updateIconFile = false;
|
||||
iconFileHidden.val(fileName);
|
||||
iconButton.click(function(e) {
|
||||
e.preventDefault();
|
||||
var iconPath;
|
||||
var icon = $("#node-settings-icon").text()||"";
|
||||
if (icon) {
|
||||
iconPath = RED.utils.separateIconPath(icon);
|
||||
} else {
|
||||
iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
|
||||
}
|
||||
selectIconFile.append($("<option></option>").val(fileName).text(fileName));
|
||||
});
|
||||
showIconPicker(iconRow,node,iconPath,function(newIcon) {
|
||||
$("#node-settings-icon").text(newIcon||"");
|
||||
var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
|
||||
iconDiv.css("backgroundImage","url("+icon_url+")");
|
||||
});
|
||||
})
|
||||
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);
|
||||
}
|
||||
selectIconFile.prop("disabled", !iconFileList);
|
||||
selectIconFile.removeClass("input-error");
|
||||
selectIconModule.removeClass("input-error");
|
||||
}
|
||||
|
||||
function updateLabels(editing_node, changes, outputMap) {
|
||||
@@ -1086,9 +1102,7 @@ RED.editor = (function() {
|
||||
}
|
||||
|
||||
if (!editing_node._def.defaults || !editing_node._def.defaults.hasOwnProperty("icon")) {
|
||||
var iconModule = $("#node-settings-icon-module-hidden").val();
|
||||
var iconFile = $("#node-settings-icon-file-hidden").val();
|
||||
var icon = (iconModule && iconFile) ? iconModule+"/"+iconFile : "";
|
||||
var icon = $("#node-settings-icon").text()||""
|
||||
if (!isDefaultIcon) {
|
||||
if (icon !== editing_node.icon) {
|
||||
changes.icon = editing_node.icon;
|
||||
@@ -1692,15 +1706,28 @@ RED.editor = (function() {
|
||||
if (updateLabels(editing_node, changes, null)) {
|
||||
changed = true;
|
||||
}
|
||||
var iconModule = $("#node-settings-icon-module-hidden").val();
|
||||
var iconFile = $("#node-settings-icon-file-hidden").val();
|
||||
var icon = (iconModule && iconFile) ? iconModule+"/"+iconFile : "";
|
||||
var icon = $("#node-settings-icon").text()||"";
|
||||
if ((editing_node.icon === undefined && icon !== "node-red/subflow.png") ||
|
||||
(editing_node.icon !== undefined && editing_node.icon !== icon)) {
|
||||
changes.icon = editing_node.icon;
|
||||
editing_node.icon = icon;
|
||||
changed = true;
|
||||
}
|
||||
var newCategory = $("#subflow-input-category").val().trim();
|
||||
if (newCategory === "_custom_") {
|
||||
newCategory = $("#subflow-input-custom-category").val().trim();
|
||||
if (newCategory === "") {
|
||||
newCategory = editing_node.category;
|
||||
}
|
||||
}
|
||||
if (newCategory === 'subflows') {
|
||||
newCategory = '';
|
||||
}
|
||||
if (newCategory != editing_node.category) {
|
||||
changes['category'] = editing_node.category;
|
||||
editing_node.category = newCategory;
|
||||
changed = true;
|
||||
}
|
||||
|
||||
RED.palette.refresh();
|
||||
|
||||
@@ -1773,8 +1800,6 @@ RED.editor = (function() {
|
||||
});
|
||||
portLabels.content.addClass("editor-tray-content");
|
||||
|
||||
|
||||
|
||||
if (editing_node) {
|
||||
RED.sidebar.info.refresh(editing_node);
|
||||
}
|
||||
@@ -1787,6 +1812,33 @@ RED.editor = (function() {
|
||||
|
||||
$("#subflow-input-name").val(subflow.name);
|
||||
RED.text.bidi.prepareInput($("#subflow-input-name"));
|
||||
|
||||
$("#subflow-input-category").empty();
|
||||
var categories = RED.palette.getCategories();
|
||||
categories.sort(function(A,B) {
|
||||
return A.label.localeCompare(B.label);
|
||||
})
|
||||
categories.forEach(function(cat) {
|
||||
$("#subflow-input-category").append($("<option></option>").val(cat.id).text(cat.label));
|
||||
})
|
||||
$("#subflow-input-category").append($("<option></option>").attr('disabled',true).text("---"));
|
||||
$("#subflow-input-category").append($("<option></option>").val("_custom_").text(RED._("palette.addCategory")));
|
||||
|
||||
|
||||
$("#subflow-input-category").change(function() {
|
||||
var val = $(this).val();
|
||||
if (val === "_custom_") {
|
||||
$("#subflow-input-category").width(120);
|
||||
$("#subflow-input-custom-category").show();
|
||||
} else {
|
||||
$("#subflow-input-category").width(250);
|
||||
$("#subflow-input-custom-category").hide();
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
$("#subflow-input-category").val(subflow.category||"subflows");
|
||||
|
||||
subflowEditor.getSession().setValue(subflow.info||"",-1);
|
||||
var userCount = 0;
|
||||
var subflowType = "subflow:"+editing_node.id;
|
||||
@@ -1799,7 +1851,6 @@ RED.editor = (function() {
|
||||
$("#subflow-dialog-user-count").text(RED._("subflow.subflowInstances", {count:userCount})).show();
|
||||
|
||||
buildLabelForm(portLabels.content,subflow);
|
||||
validateIcon(subflow);
|
||||
trayBody.i18n();
|
||||
},
|
||||
close: function() {
|
||||
@@ -1857,6 +1908,7 @@ RED.editor = (function() {
|
||||
edit: showEditDialog,
|
||||
editConfig: showEditConfigNodeDialog,
|
||||
editSubflow: showEditSubflowDialog,
|
||||
editJavaScript: function(options) { showTypeEditor("_js",options) },
|
||||
editExpression: function(options) { showTypeEditor("_expression", options) },
|
||||
editJSON: function(options) { showTypeEditor("_json", options) },
|
||||
editMarkdown: function(options) { showTypeEditor("_markdown", options) },
|
||||
|
||||
103
editor/js/ui/editors/js.js
Normal file
103
editor/js/ui/editors/js.js
Normal file
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* Copyright JS Foundation and other contributors, http://js.foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
RED.editor.types._js = (function() {
|
||||
|
||||
|
||||
var template = '<script type="text/x-red" data-template-name="_js"><div class="form-row node-text-editor-row" style="width: 700px"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-js"></div></div></script>';
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
$(template).appendTo(document.body);
|
||||
},
|
||||
show: function(options) {
|
||||
var value = options.value;
|
||||
var onComplete = options.complete;
|
||||
var type = "_js"
|
||||
RED.view.state(RED.state.EDITING);
|
||||
var expressionEditor;
|
||||
var changeTimer;
|
||||
|
||||
var trayOptions = {
|
||||
title: options.title,
|
||||
width: "inherit",
|
||||
buttons: [
|
||||
{
|
||||
id: "node-dialog-cancel",
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
RED.tray.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-ok",
|
||||
text: RED._("common.label.done"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
|
||||
RED.tray.close();
|
||||
}
|
||||
}
|
||||
],
|
||||
resize: function(dimensions) {
|
||||
var rows = $("#dialog-form>div:not(.node-text-editor-row)");
|
||||
var editorRow = $("#dialog-form>div.node-text-editor-row");
|
||||
var height = $("#dialog-form").height();
|
||||
for (var i=0;i<rows.size();i++) {
|
||||
height -= $(rows[i]).outerHeight(true);
|
||||
}
|
||||
height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
|
||||
$(".node-text-editor").css("height",height+"px");
|
||||
expressionEditor.resize();
|
||||
},
|
||||
open: function(tray) {
|
||||
var trayBody = tray.find('.editor-tray-body');
|
||||
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
|
||||
expressionEditor = RED.editor.createEditor({
|
||||
id: 'node-input-js',
|
||||
mode: 'ace/mode/javascript',
|
||||
value: value,
|
||||
globals: {
|
||||
msg:true,
|
||||
context:true,
|
||||
RED: true,
|
||||
util: true,
|
||||
flow: true,
|
||||
global: true,
|
||||
console: true,
|
||||
Buffer: true,
|
||||
setTimeout: true,
|
||||
clearTimeout: true,
|
||||
setInterval: true,
|
||||
clearInterval: true
|
||||
}
|
||||
});
|
||||
if (options.cursor) {
|
||||
expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
|
||||
}
|
||||
dialogForm.i18n();
|
||||
},
|
||||
close: function() {
|
||||
expressionEditor.destroy();
|
||||
if (options.onclose) {
|
||||
options.onclose();
|
||||
}
|
||||
},
|
||||
show: function() {}
|
||||
}
|
||||
RED.tray.show(trayOptions);
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -96,7 +96,7 @@ RED.notifications = (function() {
|
||||
if (options.buttons) {
|
||||
var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(n)
|
||||
options.buttons.forEach(function(buttonDef) {
|
||||
var b = $('<button>').text(buttonDef.text).click(buttonDef.click).appendTo(buttonSet);
|
||||
var b = $('<button>').html(buttonDef.text).click(buttonDef.click).appendTo(buttonSet);
|
||||
if (buttonDef.id) {
|
||||
b.attr('id',buttonDef.id);
|
||||
}
|
||||
|
||||
@@ -233,7 +233,7 @@ RED.palette.editor = (function() {
|
||||
if (set.enabled) {
|
||||
var def = RED.nodes.getType(t);
|
||||
if (def && def.color) {
|
||||
swatch.css({background:def.color});
|
||||
swatch.css({background:RED.utils.getNodeColor(t,def)});
|
||||
swatch.css({border: "1px solid "+getContrastingBorder(swatch.css('backgroundColor'))})
|
||||
|
||||
} else {
|
||||
|
||||
@@ -21,7 +21,18 @@ RED.palette = (function() {
|
||||
|
||||
var categoryContainers = {};
|
||||
|
||||
function createCategoryContainer(category, label) {
|
||||
|
||||
function createCategory(originalCategory,rootCategory,category,ns) {
|
||||
if ($("#palette-base-category-"+rootCategory).length === 0) {
|
||||
createCategoryContainer(originalCategory,rootCategory, ns+":palette.label."+rootCategory);
|
||||
}
|
||||
$("#palette-container-"+rootCategory).show();
|
||||
if ($("#palette-"+category).length === 0) {
|
||||
$("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
|
||||
}
|
||||
}
|
||||
function createCategoryContainer(originalCategory,category, labelId) {
|
||||
var label = RED._(labelId, {defaultValue:category});
|
||||
label = (label || category).replace(/_/g, " ");
|
||||
var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close hide">'+
|
||||
'<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
|
||||
@@ -31,7 +42,8 @@ RED.palette = (function() {
|
||||
'<div id="palette-'+category+'-function"></div>'+
|
||||
'</div>'+
|
||||
'</div>').appendTo("#palette-container");
|
||||
|
||||
catDiv.data('category',originalCategory);
|
||||
catDiv.data('label',label);
|
||||
categoryContainers[category] = {
|
||||
container: catDiv,
|
||||
close: function() {
|
||||
@@ -133,6 +145,7 @@ RED.palette = (function() {
|
||||
}
|
||||
if (exclusion.indexOf(def.category)===-1) {
|
||||
|
||||
var originalCategory = def.category;
|
||||
var category = def.category.replace(/ /g,"_");
|
||||
var rootCategory = category.split("-")[0];
|
||||
|
||||
@@ -153,14 +166,13 @@ RED.palette = (function() {
|
||||
|
||||
d.className="palette_node";
|
||||
|
||||
|
||||
if (def.icon) {
|
||||
var icon_url = RED.utils.getNodeIcon(def);
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
|
||||
$('<div/>',{class:"palette_icon",style:"background-image: url("+icon_url+")"}).appendTo(iconContainer);
|
||||
}
|
||||
|
||||
d.style.backgroundColor = def.color;
|
||||
d.style.backgroundColor = RED.utils.getNodeColor(nt,def);
|
||||
|
||||
if (def.outputs > 0) {
|
||||
var portOut = document.createElement("div");
|
||||
@@ -174,21 +186,12 @@ RED.palette = (function() {
|
||||
d.appendChild(portIn);
|
||||
}
|
||||
|
||||
if ($("#palette-base-category-"+rootCategory).length === 0) {
|
||||
if(coreCategories.indexOf(rootCategory) !== -1){
|
||||
createCategoryContainer(rootCategory, RED._("node-red:palette.label."+rootCategory, {defaultValue:rootCategory}));
|
||||
} else {
|
||||
var ns = def.set.id;
|
||||
createCategoryContainer(rootCategory, RED._(ns+":palette.label."+rootCategory, {defaultValue:rootCategory}));
|
||||
}
|
||||
}
|
||||
$("#palette-container-"+rootCategory).show();
|
||||
|
||||
if ($("#palette-"+category).length === 0) {
|
||||
$("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
|
||||
}
|
||||
createCategory(def.category,rootCategory,category,(coreCategories.indexOf(rootCategory) !== -1)?"node-red":def.set.id);
|
||||
|
||||
$("#palette-"+category).append(d);
|
||||
|
||||
$(d).data('category',rootCategory);
|
||||
|
||||
d.onmousedown = function(e) { e.preventDefault(); };
|
||||
|
||||
var popover = RED.popover.create({
|
||||
@@ -308,7 +311,7 @@ RED.palette = (function() {
|
||||
});
|
||||
|
||||
var nodeInfo = null;
|
||||
if (def.category == "subflows") {
|
||||
if (nt.indexOf("subflow:") === 0) {
|
||||
$(d).dblclick(function(e) {
|
||||
RED.workspaces.show(nt.substring(8));
|
||||
e.preventDefault();
|
||||
@@ -382,6 +385,31 @@ RED.palette = (function() {
|
||||
}
|
||||
setLabel(sf.type+":"+sf.id,paletteNode,sf.name,marked(sf.info||""));
|
||||
setIcon(paletteNode,sf);
|
||||
|
||||
var currentCategory = paletteNode.data('category');
|
||||
var newCategory = (sf.category||"subflows");
|
||||
if (currentCategory !== newCategory) {
|
||||
var category = newCategory.replace(/ /g,"_");
|
||||
createCategory(newCategory,category,category,"node-red");
|
||||
|
||||
var currentCategoryNode = paletteNode.closest(".palette-category");
|
||||
var newCategoryNode = $("#palette-"+category);
|
||||
newCategoryNode.append(paletteNode);
|
||||
if (newCategoryNode.find(".palette_node").length === 1) {
|
||||
categoryContainers[category].open();
|
||||
}
|
||||
|
||||
paletteNode.data('category',newCategory);
|
||||
if (currentCategoryNode.find(".palette_node").length === 0) {
|
||||
if (currentCategoryNode.find("i").hasClass("expanded")) {
|
||||
currentCategoryNode.find(".palette-content").slideToggle();
|
||||
currentCategoryNode.find("i").toggleClass("expanded");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -470,7 +498,7 @@ RED.palette = (function() {
|
||||
categoryList = coreCategories
|
||||
}
|
||||
categoryList.forEach(function(category){
|
||||
createCategoryContainer(category, RED._("palette.label."+category,{defaultValue:category}));
|
||||
createCategoryContainer(category, category, "palette.label."+category);
|
||||
});
|
||||
|
||||
$("#palette-collapse-all").on("click", function(e) {
|
||||
@@ -490,13 +518,20 @@ RED.palette = (function() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getCategories() {
|
||||
var categories = [];
|
||||
$("#palette-container .palette-category").each(function(i,d) {
|
||||
categories.push({id:$(d).data('category'),label:$(d).data('label')});
|
||||
})
|
||||
return categories;
|
||||
}
|
||||
return {
|
||||
init: init,
|
||||
add:addNodeType,
|
||||
remove:removeNodeType,
|
||||
hide:hideNodeType,
|
||||
show:showNodeType,
|
||||
refresh:refreshNodeTypes
|
||||
refresh:refreshNodeTypes,
|
||||
getCategories: getCategories
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -622,7 +622,7 @@ RED.projects = (function() {
|
||||
},
|
||||
400: {
|
||||
'project_exists': function(error) {
|
||||
console.log(RED._("projects.clone-project.already-exists"));
|
||||
console.log(RED._("projects.clone-project.already-exists2"));
|
||||
},
|
||||
'git_error': function(error) {
|
||||
console.log(RED._("projects.clone-project.git-error"),error);
|
||||
@@ -1983,7 +1983,7 @@ RED.projects = (function() {
|
||||
notification.close();
|
||||
}
|
||||
},{
|
||||
text: $('<span><i class="fa fa-refresh"></i> Retry</span>'),
|
||||
text: '<span><i class="fa fa-refresh"></i> ' +RED._("projects.send-req.retry") +'</span>',
|
||||
click: function() {
|
||||
body = body || {};
|
||||
var authBody = {};
|
||||
|
||||
@@ -26,6 +26,24 @@ RED.search = (function() {
|
||||
var keys = [];
|
||||
var results = [];
|
||||
|
||||
|
||||
function indexProperty(node,label,property) {
|
||||
if (typeof property === 'string' || typeof property === 'number') {
|
||||
property = (""+property).toLowerCase();
|
||||
index[property] = index[property] || {};
|
||||
index[property][node.id] = {node:node,label:label};
|
||||
} else if (Array.isArray(property)) {
|
||||
property.forEach(function(prop) {
|
||||
indexProperty(node,label,prop);
|
||||
})
|
||||
} else if (typeof property === 'object') {
|
||||
for (var prop in property) {
|
||||
if (property.hasOwnProperty(prop)) {
|
||||
indexProperty(node,label,property[prop])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function indexNode(n) {
|
||||
var l = RED.utils.getNodeLabel(n);
|
||||
if (l) {
|
||||
@@ -42,17 +60,11 @@ RED.search = (function() {
|
||||
}
|
||||
for (var i=0;i<properties.length;i++) {
|
||||
if (n.hasOwnProperty(properties[i])) {
|
||||
var v = n[properties[i]];
|
||||
if (typeof v === 'string' || typeof v === 'number') {
|
||||
v = (""+v).toLowerCase();
|
||||
index[v] = index[v] || {};
|
||||
index[v][n.id] = {node:n,label:l};
|
||||
}
|
||||
indexProperty(n, l, n[properties[i]]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function indexWorkspace() {
|
||||
index = {};
|
||||
RED.nodes.eachWorkspace(indexNode);
|
||||
@@ -181,7 +193,7 @@ RED.search = (function() {
|
||||
var div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
|
||||
|
||||
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
|
||||
var colour = def.color;
|
||||
var colour = RED.utils.getNodeColor(node.type,def);
|
||||
var icon_url = RED.utils.getNodeIcon(def,node);
|
||||
if (node.type === 'tab') {
|
||||
colour = "#C0DEED";
|
||||
|
||||
@@ -61,7 +61,7 @@ RED.sidebar = (function() {
|
||||
}
|
||||
|
||||
delete options.closeable;
|
||||
|
||||
|
||||
options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#sidebar-content")
|
||||
options.wrapper.append(options.content);
|
||||
options.wrapper.hide();
|
||||
@@ -218,6 +218,7 @@ RED.sidebar = (function() {
|
||||
showSidebar();
|
||||
RED.sidebar.info.init();
|
||||
RED.sidebar.config.init();
|
||||
RED.sidebar.context.init();
|
||||
// hide info bar at start if screen rather narrow...
|
||||
if ($(window).width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); }
|
||||
}
|
||||
|
||||
292
editor/js/ui/tab-context.js
Normal file
292
editor/js/ui/tab-context.js
Normal file
@@ -0,0 +1,292 @@
|
||||
/**
|
||||
* Copyright JS Foundation and other contributors, http://js.foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
RED.sidebar.context = (function() {
|
||||
|
||||
var content;
|
||||
var sections;
|
||||
|
||||
var localCache = {};
|
||||
|
||||
|
||||
var nodeSection;
|
||||
// var subflowSection;
|
||||
var flowSection;
|
||||
var globalSection;
|
||||
|
||||
var currentNode;
|
||||
var currentFlow;
|
||||
|
||||
function init() {
|
||||
|
||||
content = $("<div>").css({"position":"relative","height":"100%"});
|
||||
content.className = "sidebar-context"
|
||||
// var toolbar = $('<div class="sidebar-header">'+
|
||||
// '</div>').appendTo(content);
|
||||
|
||||
var footerToolbar = $('<div>'+
|
||||
// '<span class="button-group"><a class="sidebar-footer-button" href="#" data-i18n="[title]node-red:debug.sidebar.openWindow"><i class="fa fa-desktop"></i></a></span> ' +
|
||||
'</div>');
|
||||
|
||||
|
||||
|
||||
var stackContainer = $("<div>",{class:"sidebar-context-stack"}).appendTo(content);
|
||||
sections = RED.stack.create({
|
||||
container: stackContainer
|
||||
});
|
||||
|
||||
nodeSection = sections.add({
|
||||
title: RED._("sidebar.context.node"),
|
||||
collapsible: true,
|
||||
// onexpand: function() {
|
||||
// updateNode(currentNode,true);
|
||||
// }
|
||||
});
|
||||
nodeSection.expand();
|
||||
nodeSection.content.css({height:"100%"});
|
||||
nodeSection.timestamp = $('<div class="sidebar-context-updated"> </div>').appendTo(nodeSection.content);
|
||||
var table = $('<table class="node-info"></table>').appendTo(nodeSection.content);
|
||||
nodeSection.table = $('<tbody>').appendTo(table);
|
||||
var bg = $('<div style="float: right"></div>').appendTo(nodeSection.header);
|
||||
$('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
|
||||
.appendTo(bg)
|
||||
.click(function(evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
updateNode(currentNode, true);
|
||||
})
|
||||
|
||||
// subflowSection = sections.add({
|
||||
// title: "Subflow",
|
||||
// collapsible: true
|
||||
// });
|
||||
// subflowSection.expand();
|
||||
// subflowSection.content.css({height:"100%"});
|
||||
// bg = $('<div style="float: right"></div>').appendTo(subflowSection.header);
|
||||
// $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
|
||||
// .appendTo(bg)
|
||||
// .click(function(evt) {
|
||||
// evt.stopPropagation();
|
||||
// evt.preventDefault();
|
||||
// })
|
||||
//
|
||||
// subflowSection.container.hide();
|
||||
|
||||
flowSection = sections.add({
|
||||
title: RED._("sidebar.context.flow"),
|
||||
collapsible: true
|
||||
});
|
||||
flowSection.expand();
|
||||
flowSection.content.css({height:"100%"});
|
||||
flowSection.timestamp = $('<div class="sidebar-context-updated"> </div>').appendTo(flowSection.content);
|
||||
var table = $('<table class="node-info"></table>').appendTo(flowSection.content);
|
||||
flowSection.table = $('<tbody>').appendTo(table);
|
||||
bg = $('<div style="float: right"></div>').appendTo(flowSection.header);
|
||||
$('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
|
||||
.appendTo(bg)
|
||||
.click(function(evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
updateFlow(currentFlow);
|
||||
})
|
||||
|
||||
globalSection = sections.add({
|
||||
title: RED._("sidebar.context.global"),
|
||||
collapsible: true
|
||||
});
|
||||
globalSection.expand();
|
||||
globalSection.content.css({height:"100%"});
|
||||
globalSection.timestamp = $('<div class="sidebar-context-updated"> </div>').appendTo(globalSection.content);
|
||||
var table = $('<table class="node-info"></table>').appendTo(globalSection.content);
|
||||
globalSection.table = $('<tbody>').appendTo(table);
|
||||
|
||||
bg = $('<div style="float: right"></div>').appendTo(globalSection.header);
|
||||
$('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>')
|
||||
.appendTo(bg)
|
||||
.click(function(evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
updateEntry(globalSection,"context/global","global");
|
||||
})
|
||||
|
||||
|
||||
RED.actions.add("core:show-context-tab",show);
|
||||
|
||||
RED.sidebar.addTab({
|
||||
id: "context",
|
||||
label: RED._("sidebar.context.label"),
|
||||
name: RED._("sidebar.context.name"),
|
||||
iconClass: "fa fa-database",
|
||||
content: content,
|
||||
toolbar: footerToolbar,
|
||||
// pinned: true,
|
||||
enableOnEdit: false
|
||||
});
|
||||
|
||||
// var toggleLiveButton = $("#sidebar-context-toggle-live");
|
||||
// toggleLiveButton.click(function(evt) {
|
||||
// evt.preventDefault();
|
||||
// if ($(this).hasClass("selected")) {
|
||||
// $(this).removeClass("selected");
|
||||
// $(this).find("i").removeClass("fa-pause");
|
||||
// $(this).find("i").addClass("fa-play");
|
||||
// } else {
|
||||
// $(this).addClass("selected");
|
||||
// $(this).find("i").removeClass("fa-play");
|
||||
// $(this).find("i").addClass("fa-pause");
|
||||
// }
|
||||
// });
|
||||
// RED.popover.tooltip(toggleLiveButton, function() {
|
||||
// if (toggleLiveButton.hasClass("selected")) {
|
||||
// return "Pause live updates"
|
||||
// } else {
|
||||
// return "Start live updates"
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
RED.events.on("view:selection-changed", function(event) {
|
||||
var selectedNode = event.nodes && event.nodes.length === 1 && event.nodes[0];
|
||||
updateNode(selectedNode);
|
||||
})
|
||||
|
||||
RED.events.on("workspace:change", function(event) {
|
||||
updateFlow(RED.nodes.workspace(event.workspace));
|
||||
})
|
||||
|
||||
updateEntry(globalSection,"context/global","global");
|
||||
|
||||
}
|
||||
|
||||
function updateNode(node,force) {
|
||||
currentNode = node;
|
||||
if (force) {
|
||||
if (node) {
|
||||
updateEntry(nodeSection,"context/node/"+node.id,node.id);
|
||||
// if (/^subflow:/.test(node.type)) {
|
||||
// subflowSection.container.show();
|
||||
// updateEntry(subflowSection,"context/flow/"+node.id,node.id);
|
||||
// } else {
|
||||
// subflowSection.container.hide();
|
||||
// }
|
||||
} else {
|
||||
// subflowSection.container.hide();
|
||||
updateEntry(nodeSection)
|
||||
}
|
||||
} else {
|
||||
$(nodeSection.table).empty();
|
||||
if (node) {
|
||||
$('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(nodeSection.table).i18n();
|
||||
} else {
|
||||
$('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(nodeSection.table).i18n();
|
||||
}
|
||||
nodeSection.timestamp.html(" ");
|
||||
|
||||
}
|
||||
}
|
||||
function updateFlow(flow) {
|
||||
currentFlow = flow;
|
||||
if (flow) {
|
||||
updateEntry(flowSection,"context/flow/"+flow.id,flow.id);
|
||||
} else {
|
||||
updateEntry(flowSection)
|
||||
}
|
||||
}
|
||||
|
||||
function refreshEntry(section,baseUrl,id) {
|
||||
|
||||
var contextStores = RED.settings.context.stores;
|
||||
var container = section.table;
|
||||
|
||||
$.getJSON(baseUrl, function(data) {
|
||||
$(container).empty();
|
||||
var sortedData = {};
|
||||
for (var store in data) {
|
||||
if (data.hasOwnProperty(store)) {
|
||||
for (var key in data[store]) {
|
||||
if (data[store].hasOwnProperty(key)) {
|
||||
if (!sortedData.hasOwnProperty(key)) {
|
||||
sortedData[key] = [];
|
||||
}
|
||||
data[store][key].store = store;
|
||||
sortedData[key].push(data[store][key])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var keys = Object.keys(sortedData);
|
||||
keys.sort();
|
||||
var l = keys.length;
|
||||
for (var i = 0; i < l; i++) {
|
||||
sortedData[keys[i]].forEach(function(v) {
|
||||
var k = keys[i];
|
||||
var l2 = sortedData[k].length;
|
||||
var propRow = $('<tr class="node-info-node-row"><td class="sidebar-context-property"></td><td></td></tr>').appendTo(container);
|
||||
var obj = $(propRow.children()[0]);
|
||||
obj.text(k);
|
||||
var tools = $('<span class="debug-message-tools button-group"></span>').appendTo(obj);
|
||||
var refreshItem = $('<button class="editor-button editor-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).click(function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$.getJSON(baseUrl+"/"+k+"?store="+v.store, function(data) {
|
||||
$(propRow.children()[1]).empty();
|
||||
var payload = data.msg;
|
||||
var format = data.format;
|
||||
payload = RED.utils.decodeObject(payload,format);
|
||||
RED.utils.createObjectElement(payload, {
|
||||
typeHint: data.format,
|
||||
sourceId: id+"."+k
|
||||
}).appendTo(propRow.children()[1]);
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
var payload = v.msg;
|
||||
var format = v.format;
|
||||
payload = RED.utils.decodeObject(payload,format);
|
||||
RED.utils.createObjectElement(payload, {
|
||||
typeHint: v.format,
|
||||
sourceId: id+"."+k
|
||||
}).appendTo(propRow.children()[1]);
|
||||
if (contextStores.length > 1) {
|
||||
$("<span>",{class:"sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0]))
|
||||
}
|
||||
});
|
||||
}
|
||||
if (l === 0) {
|
||||
$('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n();
|
||||
}
|
||||
$(section.timestamp).text(new Date().toLocaleString());
|
||||
});
|
||||
}
|
||||
function updateEntry(section,baseUrl,id) {
|
||||
var container = section.table;
|
||||
if (id) {
|
||||
refreshEntry(section,baseUrl,id);
|
||||
} else {
|
||||
$(container).empty();
|
||||
$('<tr class="node-info-node-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(container).i18n();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function show() {
|
||||
RED.sidebar.show("context");
|
||||
}
|
||||
return {
|
||||
init: init
|
||||
}
|
||||
})();
|
||||
@@ -170,25 +170,41 @@ RED.sidebar.info = (function() {
|
||||
if (node.type === "tab") {
|
||||
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.status")+'</td><td></td></tr>').appendTo(tableBody);
|
||||
$(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled"))
|
||||
} else if (node.type === "subflow") {
|
||||
propRow = $('<tr class="node-info-node-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
|
||||
var category = node.category||"subflows";
|
||||
$(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
|
||||
}
|
||||
} else {
|
||||
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.node")+"</td><td></td></tr>").appendTo(tableBody);
|
||||
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
|
||||
|
||||
|
||||
if (node.type !== "subflow" && node.name) {
|
||||
if (node.type !== "subflow" && node.type !== "unknown" && node.name) {
|
||||
propRow = $('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td></td></tr>').appendTo(tableBody);
|
||||
$('<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'"></span>').text(node.name).appendTo(propRow.children()[1]);
|
||||
}
|
||||
if (!m) {
|
||||
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td></td></tr>").appendTo(tableBody);
|
||||
$(propRow.children()[1]).text(node.type);
|
||||
$(propRow.children()[1]).text((node.type === "unknown")?node._orig.type:node.type);
|
||||
if (node.type === "unknown") {
|
||||
$('<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>').prependTo($(propRow.children()[1]))
|
||||
}
|
||||
}
|
||||
|
||||
if (!m && node.type != "subflow" && node.type != "comment") {
|
||||
if (node._def) {
|
||||
var defaults;
|
||||
if (node.type === 'unknown') {
|
||||
defaults = {};
|
||||
Object.keys(node._orig).forEach(function(k) {
|
||||
if (k !== 'type') {
|
||||
defaults[k] = {};
|
||||
}
|
||||
})
|
||||
} else if (node._def) {
|
||||
defaults = node._def.defaults;
|
||||
}
|
||||
if (defaults) {
|
||||
var count = 0;
|
||||
var defaults = node._def.defaults;
|
||||
for (var n in defaults) {
|
||||
if (n != "name" && defaults.hasOwnProperty(n)) {
|
||||
var val = node[n];
|
||||
@@ -205,7 +221,7 @@ RED.sidebar.info = (function() {
|
||||
|
||||
var div = $('<span>',{class:""}).appendTo(container);
|
||||
var nodeDiv = $('<div>',{class:"palette_node palette_node_small"}).appendTo(div);
|
||||
var colour = configNode._def.color;
|
||||
var colour = RED.utils.getNodeColor(configNode.type,configNode._def);
|
||||
var icon_url = RED.utils.getNodeIcon(configNode._def);
|
||||
nodeDiv.css({'backgroundColor':colour, "cursor":"pointer"});
|
||||
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
|
||||
@@ -235,6 +251,9 @@ RED.sidebar.info = (function() {
|
||||
}
|
||||
}
|
||||
if (m) {
|
||||
propRow = $('<tr class="node-info-node-row"><td>'+RED._("subflow.category")+'</td><td></td></tr>').appendTo(tableBody);
|
||||
var category = subflowNode.category||"subflows";
|
||||
$(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category}))
|
||||
$('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+subflowUserCount+'</td></tr>').appendTo(tableBody);
|
||||
}
|
||||
|
||||
|
||||
@@ -128,7 +128,7 @@ RED.typeSearch = (function() {
|
||||
var div = $('<a>',{href:'#',class:"red-ui-search-result"}).appendTo(container);
|
||||
|
||||
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
|
||||
var colour = def.color;
|
||||
var colour = RED.utils.getNodeColor(object.type,def);
|
||||
var icon_url = RED.utils.getNodeIcon(def);
|
||||
nodeDiv.css('backgroundColor',colour);
|
||||
|
||||
|
||||
@@ -34,6 +34,10 @@ RED.utils = (function() {
|
||||
result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').text('buffer['+value.length+']');
|
||||
} else if (value.hasOwnProperty('type') && value.type === 'array' && value.hasOwnProperty('data')) {
|
||||
result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').text('array['+value.length+']');
|
||||
} else if (value.hasOwnProperty('type') && value.type === 'function') {
|
||||
result = $('<span class="debug-message-object-value debug-message-type-meta"></span>').text('function');
|
||||
} else if (value.hasOwnProperty('type') && value.type === 'number') {
|
||||
result = $('<span class="debug-message-object-value debug-message-type-number"></span>').text(value.data);
|
||||
} else {
|
||||
result = $('<span class="debug-message-object-value debug-message-type-meta">object</span>');
|
||||
}
|
||||
@@ -45,6 +49,8 @@ RED.utils = (function() {
|
||||
subvalue = sanitize(value);
|
||||
}
|
||||
result = $('<span class="debug-message-object-value debug-message-type-string"></span>').html('"'+formatString(subvalue)+'"');
|
||||
} else if (typeof value === 'number') {
|
||||
result = $('<span class="debug-message-object-value debug-message-type-number"></span>').text(""+value);
|
||||
} else {
|
||||
result = $('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value);
|
||||
}
|
||||
@@ -125,7 +131,7 @@ RED.utils = (function() {
|
||||
e.stopPropagation();
|
||||
RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue");
|
||||
})
|
||||
if (strippedKey !== '') {
|
||||
if (strippedKey !== undefined && strippedKey !== '') {
|
||||
var isPinned = pinnedPaths[sourceId].hasOwnProperty(strippedKey);
|
||||
|
||||
var pinPath = $('<button class="editor-button editor-button-small debug-message-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).click(function(e) {
|
||||
@@ -292,13 +298,18 @@ RED.utils = (function() {
|
||||
|
||||
var isArray = Array.isArray(obj);
|
||||
var isArrayObject = false;
|
||||
if (obj && typeof obj === 'object' && obj.hasOwnProperty('type') && obj.hasOwnProperty('data') && ((obj.__encoded__ && obj.type === 'array') || obj.type === 'Buffer')) {
|
||||
if (obj && typeof obj === 'object' && obj.hasOwnProperty('type') && obj.hasOwnProperty('data') && ((obj.__enc__ && obj.type === 'array') || obj.type === 'Buffer')) {
|
||||
isArray = true;
|
||||
isArrayObject = true;
|
||||
}
|
||||
|
||||
if (obj === null || obj === undefined) {
|
||||
$('<span class="debug-message-type-null">'+obj+'</span>').appendTo(entryObj);
|
||||
} else if (obj.__enc__ && obj.type === 'number') {
|
||||
e = $('<span class="debug-message-type-number debug-message-object-header"></span>').text(obj.data).appendTo(entryObj);
|
||||
} else if (typeHint === "function" || (obj.__enc__ && obj.type === 'function')) {
|
||||
e = $('<span class="debug-message-type-meta debug-message-object-header"></span>').text("function").appendTo(entryObj);
|
||||
} else if (typeHint === "internal" || (obj.__enc__ && obj.type === 'internal')) {
|
||||
e = $('<span class="debug-message-type-meta debug-message-object-header"></span>').text("[internal]").appendTo(entryObj);
|
||||
} else if (typeof obj === 'string') {
|
||||
if (/[\t\n\r]/.test(obj)) {
|
||||
element.addClass('collapsed');
|
||||
@@ -343,7 +354,7 @@ RED.utils = (function() {
|
||||
if (originalLength === undefined) {
|
||||
originalLength = data.length;
|
||||
}
|
||||
if (data.__encoded__) {
|
||||
if (data.__enc__) {
|
||||
data = data.data;
|
||||
}
|
||||
type = obj.type.toLowerCase();
|
||||
@@ -783,6 +794,40 @@ RED.utils = (function() {
|
||||
return RED.text.bidi.enforceTextDirectionWithUCC(l);
|
||||
}
|
||||
|
||||
var nodeColorCache = {};
|
||||
function getNodeColor(type, def) {
|
||||
var result = def.color;
|
||||
var paletteTheme = RED.settings.theme('palette.theme') || [];
|
||||
if (paletteTheme.length > 0) {
|
||||
if (!nodeColorCache.hasOwnProperty(type)) {
|
||||
var l = paletteTheme.length;
|
||||
for (var i=0;i<l;i++ ){
|
||||
var themeRule = paletteTheme[i];
|
||||
if (themeRule.hasOwnProperty('category')) {
|
||||
if (!themeRule.hasOwnProperty('_category')) {
|
||||
themeRule._category = new RegExp(themeRule.category);
|
||||
}
|
||||
if (!themeRule._category.test(def.category)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (themeRule.hasOwnProperty('type')) {
|
||||
if (!themeRule.hasOwnProperty('_type')) {
|
||||
themeRule._type = new RegExp(themeRule.type);
|
||||
}
|
||||
if (!themeRule._type.test(type)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
nodeColorCache[type] = themeRule.color || def.color;
|
||||
break;
|
||||
}
|
||||
}
|
||||
result = nodeColorCache[type];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function addSpinnerOverlay(container,contain) {
|
||||
var spinner = $('<div class="projects-dialog-spinner "><img src="red/images/spin.svg"/></div>').appendTo(container);
|
||||
if (contain) {
|
||||
@@ -791,6 +836,47 @@ RED.utils = (function() {
|
||||
return spinner;
|
||||
}
|
||||
|
||||
function decodeObject(payload,format) {
|
||||
if ((format === 'number') && (payload === "NaN")) {
|
||||
payload = Number.NaN;
|
||||
} else if ((format === 'number') && (payload === "Infinity")) {
|
||||
payload = Infinity;
|
||||
} else if ((format === 'number') && (payload === "-Infinity")) {
|
||||
payload = -Infinity;
|
||||
} else if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) {
|
||||
payload = JSON.parse(payload);
|
||||
} else if (/error/i.test(format)) {
|
||||
payload = JSON.parse(payload);
|
||||
payload = (payload.name?payload.name+": ":"")+payload.message;
|
||||
} else if (format === 'null') {
|
||||
payload = null;
|
||||
} else if (format === 'undefined') {
|
||||
payload = undefined;
|
||||
} else if (/^buffer/.test(format)) {
|
||||
var buffer = payload;
|
||||
payload = [];
|
||||
for (var c = 0; c < buffer.length; c += 2) {
|
||||
payload.push(parseInt(buffer.substr(c, 2), 16));
|
||||
}
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
function parseContextKey(key) {
|
||||
var parts = {};
|
||||
var m = /^#:\((\S+?)\)::(.*)$/.exec(key);
|
||||
if (m) {
|
||||
parts.store = m[1];
|
||||
parts.key = m[2];
|
||||
} else {
|
||||
parts.key = key;
|
||||
if (RED.settings.context) {
|
||||
parts.store = RED.settings.context.default;
|
||||
}
|
||||
}
|
||||
return parts;
|
||||
}
|
||||
|
||||
return {
|
||||
createObjectElement: buildMessageElement,
|
||||
getMessageProperty: getMessageProperty,
|
||||
@@ -800,6 +886,9 @@ RED.utils = (function() {
|
||||
getDefaultNodeIcon: getDefaultNodeIcon,
|
||||
getNodeIcon: getNodeIcon,
|
||||
getNodeLabel: getNodeLabel,
|
||||
addSpinnerOverlay: addSpinnerOverlay
|
||||
getNodeColor: getNodeColor,
|
||||
addSpinnerOverlay: addSpinnerOverlay,
|
||||
decodeObject: decodeObject,
|
||||
parseContextKey: parseContextKey
|
||||
}
|
||||
})();
|
||||
|
||||
164
editor/js/ui/view-navigator.js
Normal file
164
editor/js/ui/view-navigator.js
Normal file
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* Copyright 2016 IBM Corp.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
**/
|
||||
|
||||
|
||||
RED.view.navigator = (function() {
|
||||
|
||||
var nav_scale = 25;
|
||||
var nav_width = 5000/nav_scale;
|
||||
var nav_height = 5000/nav_scale;
|
||||
|
||||
var navContainer;
|
||||
var navBox;
|
||||
var navBorder;
|
||||
var navVis;
|
||||
var scrollPos;
|
||||
var scaleFactor;
|
||||
var chartSize;
|
||||
var dimensions;
|
||||
var isDragging;
|
||||
var isShowing = false;
|
||||
|
||||
function refreshNodes() {
|
||||
if (!isShowing) {
|
||||
return;
|
||||
}
|
||||
var navNode = navVis.selectAll(".navnode").data(RED.view.getActiveNodes(),function(d){return d.id});
|
||||
navNode.exit().remove();
|
||||
navNode.enter().insert("rect")
|
||||
.attr('class','navnode')
|
||||
.attr("pointer-events", "none");
|
||||
navNode.each(function(d) {
|
||||
d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
|
||||
.attr("y",function(d) { return (d.y-d.h/2)/nav_scale })
|
||||
.attr("width",function(d) { return Math.max(9,d.w/nav_scale) })
|
||||
.attr("height",function(d) { return Math.max(3,d.h/nav_scale) })
|
||||
.attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);})
|
||||
});
|
||||
}
|
||||
function onScroll() {
|
||||
if (!isDragging) {
|
||||
resizeNavBorder();
|
||||
}
|
||||
}
|
||||
function resizeNavBorder() {
|
||||
if (navBorder) {
|
||||
scaleFactor = RED.view.scale();
|
||||
chartSize = [ $("#chart").width(), $("#chart").height()];
|
||||
scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
|
||||
navBorder.attr('x',scrollPos[0]/nav_scale)
|
||||
.attr('y',scrollPos[1]/nav_scale)
|
||||
.attr('width',chartSize[0]/nav_scale/scaleFactor)
|
||||
.attr('height',chartSize[1]/nav_scale/scaleFactor)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
$(window).resize(resizeNavBorder);
|
||||
RED.events.on("sidebar:resize",resizeNavBorder);
|
||||
|
||||
var hideTimeout;
|
||||
|
||||
navContainer = $('<div>').css({
|
||||
"position":"absolute",
|
||||
"bottom":$("#workspace-footer").height(),
|
||||
"right":0,
|
||||
zIndex: 1
|
||||
}).appendTo("#workspace").hide();
|
||||
|
||||
navBox = d3.select(navContainer[0])
|
||||
.append("svg:svg")
|
||||
.attr("width", nav_width)
|
||||
.attr("height", nav_height)
|
||||
.attr("pointer-events", "all")
|
||||
.style({
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
right:0,
|
||||
zIndex: 101,
|
||||
"border-left": "1px solid #ccc",
|
||||
"border-top": "1px solid #ccc",
|
||||
background: "rgba(245,245,245,0.5)",
|
||||
"box-shadow": "-1px 0 3px rgba(0,0,0,0.1)"
|
||||
});
|
||||
|
||||
navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
|
||||
fill:"none",
|
||||
stroke:"none",
|
||||
pointerEvents:"all"
|
||||
}).on("mousedown", function() {
|
||||
// Update these in case they have changed
|
||||
scaleFactor = RED.view.scale();
|
||||
chartSize = [ $("#chart").width(), $("#chart").height()];
|
||||
dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
|
||||
var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
|
||||
var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
|
||||
navBorder.attr('x',newX).attr('y',newY);
|
||||
isDragging = true;
|
||||
$("#chart").scrollLeft(newX*nav_scale*scaleFactor);
|
||||
$("#chart").scrollTop(newY*nav_scale*scaleFactor);
|
||||
}).on("mousemove", function() {
|
||||
if (!isDragging) { return }
|
||||
if (d3.event.buttons === 0) {
|
||||
isDragging = false;
|
||||
return;
|
||||
}
|
||||
var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
|
||||
var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
|
||||
navBorder.attr('x',newX).attr('y',newY);
|
||||
$("#chart").scrollLeft(newX*nav_scale*scaleFactor);
|
||||
$("#chart").scrollTop(newY*nav_scale*scaleFactor);
|
||||
}).on("mouseup", function() {
|
||||
isDragging = false;
|
||||
})
|
||||
|
||||
navBorder = navBox.append("rect")
|
||||
.attr("stroke-dasharray","5,5")
|
||||
.attr("pointer-events", "none")
|
||||
.style({
|
||||
stroke: "#999",
|
||||
strokeWidth: 1,
|
||||
fill: "white",
|
||||
});
|
||||
|
||||
navVis = navBox.append("svg:g")
|
||||
|
||||
|
||||
$("#btn-navigate").click(function(evt) {
|
||||
evt.preventDefault();
|
||||
if (!isShowing) {
|
||||
isShowing = true;
|
||||
$("#btn-navigate").addClass("selected");
|
||||
resizeNavBorder();
|
||||
refreshNodes();
|
||||
$("#chart").on("scroll",onScroll);
|
||||
navContainer.fadeIn(200);
|
||||
} else {
|
||||
isShowing = false;
|
||||
navContainer.fadeOut(100);
|
||||
$("#chart").off("scroll",onScroll);
|
||||
$("#btn-navigate").removeClass("selected");
|
||||
}
|
||||
})
|
||||
},
|
||||
refresh: refreshNodes,
|
||||
resize: resizeNavBorder
|
||||
}
|
||||
|
||||
|
||||
})();
|
||||
@@ -59,7 +59,9 @@ RED.view = (function() {
|
||||
dblClickPrimed = null,
|
||||
clickTime = 0,
|
||||
clickElapsed = 0,
|
||||
scroll_position;
|
||||
scroll_position = [],
|
||||
quickAddActive = false,
|
||||
quickAddLink = null;
|
||||
|
||||
var clipboard = "";
|
||||
|
||||
@@ -332,6 +334,8 @@ RED.view = (function() {
|
||||
redraw();
|
||||
});
|
||||
|
||||
RED.view.navigator.init();
|
||||
|
||||
$("#btn-zoom-out").click(function() {zoomOut();});
|
||||
$("#btn-zoom-zero").click(function() {zoomZero();});
|
||||
$("#btn-zoom-in").click(function() {zoomIn();});
|
||||
@@ -460,6 +464,82 @@ RED.view = (function() {
|
||||
RED.actions.add("core:step-selection-left", function() { moveSelection(-20,0);});
|
||||
}
|
||||
|
||||
function generateLinkPath(origX,origY, destX, destY, sc) {
|
||||
var dy = destY-origY;
|
||||
var dx = destX-origX;
|
||||
var delta = Math.sqrt(dy*dy+dx*dx);
|
||||
var scale = lineCurveScale;
|
||||
var scaleY = 0;
|
||||
if (dx*sc > 0) {
|
||||
if (delta < node_width) {
|
||||
scale = 0.75-0.75*((node_width-delta)/node_width);
|
||||
// scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
|
||||
// if (Math.abs(dy) < 3*node_height) {
|
||||
// scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
|
||||
// }
|
||||
}
|
||||
} else {
|
||||
scale = 0.4-0.2*(Math.max(0,(node_width-Math.min(Math.abs(dx),Math.abs(dy)))/node_width));
|
||||
}
|
||||
if (dx*sc > 0) {
|
||||
return "M "+origX+" "+origY+
|
||||
" C "+(origX+sc*(node_width*scale))+" "+(origY+scaleY*node_height)+" "+
|
||||
(destX-sc*(scale)*node_width)+" "+(destY-scaleY*node_height)+" "+
|
||||
destX+" "+destY
|
||||
} else {
|
||||
|
||||
var midX = Math.floor(destX-dx/2);
|
||||
var midY = Math.floor(destY-dy/2);
|
||||
//
|
||||
if (dy === 0) {
|
||||
midY = destY + node_height;
|
||||
}
|
||||
var cp_height = node_height/2;
|
||||
var y1 = (destY + midY)/2
|
||||
var topX =origX + sc*node_width*scale;
|
||||
var topY = dy>0?Math.min(y1 - dy/2 , origY+cp_height):Math.max(y1 - dy/2 , origY-cp_height);
|
||||
var bottomX = destX - sc*node_width*scale;
|
||||
var bottomY = dy>0?Math.max(y1, destY-cp_height):Math.min(y1, destY+cp_height);
|
||||
var x1 = (origX+topX)/2;
|
||||
var scy = dy>0?1:-1;
|
||||
var cp = [
|
||||
// Orig -> Top
|
||||
[x1,origY],
|
||||
[topX,dy>0?Math.max(origY, topY-cp_height):Math.min(origY, topY+cp_height)],
|
||||
// Top -> Mid
|
||||
// [Mirror previous cp]
|
||||
[x1,dy>0?Math.min(midY, topY+cp_height):Math.max(midY, topY-cp_height)],
|
||||
// Mid -> Bottom
|
||||
// [Mirror previous cp]
|
||||
[bottomX,dy>0?Math.max(midY, bottomY-cp_height):Math.min(midY, bottomY+cp_height)],
|
||||
// Bottom -> Dest
|
||||
// [Mirror previous cp]
|
||||
[(destX+bottomX)/2,destY]
|
||||
];
|
||||
if (cp[2][1] === topY+scy*cp_height) {
|
||||
if (Math.abs(dy) < cp_height*10) {
|
||||
cp[1][1] = topY-scy*cp_height/2;
|
||||
cp[3][1] = bottomY-scy*cp_height/2;
|
||||
}
|
||||
cp[2][0] = topX;
|
||||
}
|
||||
return "M "+origX+" "+origY+
|
||||
" C "+
|
||||
cp[0][0]+" "+cp[0][1]+" "+
|
||||
cp[1][0]+" "+cp[1][1]+" "+
|
||||
topX+" "+topY+
|
||||
" S "+
|
||||
cp[2][0]+" "+cp[2][1]+" "+
|
||||
midX+" "+midY+
|
||||
" S "+
|
||||
cp[3][0]+" "+cp[3][1]+" "+
|
||||
bottomX+" "+bottomY+
|
||||
" S "+
|
||||
cp[4][0]+" "+cp[4][1]+" "+
|
||||
destX+" "+destY
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function addNode(type,x,y) {
|
||||
var m = /^subflow:(.+)$/.exec(type);
|
||||
@@ -567,14 +647,16 @@ RED.view = (function() {
|
||||
mouse_mode = RED.state.QUICK_JOINING;
|
||||
$(window).on('keyup',disableQuickJoinEventHandler);
|
||||
}
|
||||
|
||||
quickAddActive = true;
|
||||
RED.typeSearch.show({
|
||||
x:d3.event.clientX-mainPos.left-node_width/2,
|
||||
y:d3.event.clientY-mainPos.top-node_height/2,
|
||||
cancel: function() {
|
||||
quickAddActive = false;
|
||||
resetMouseVars();
|
||||
},
|
||||
add: function(type) {
|
||||
quickAddActive = false;
|
||||
var result = addNode(type);
|
||||
if (!result) {
|
||||
return;
|
||||
@@ -583,11 +665,10 @@ RED.view = (function() {
|
||||
var historyEvent = result.historyEvent;
|
||||
nn.x = point[0];
|
||||
nn.y = point[1];
|
||||
if (mouse_mode === RED.state.QUICK_JOINING) {
|
||||
if (drag_lines.length > 0) {
|
||||
var drag_line = drag_lines[0];
|
||||
if (mouse_mode === RED.state.QUICK_JOINING || quickAddLink) {
|
||||
if (quickAddLink || drag_lines.length > 0) {
|
||||
var drag_line = quickAddLink||drag_lines[0];
|
||||
var src = null,dst,src_port;
|
||||
|
||||
if (drag_line.portType === PORT_TYPE_OUTPUT && nn.inputs > 0) {
|
||||
src = drag_line.node;
|
||||
src_port = drag_line.port;
|
||||
@@ -602,9 +683,9 @@ RED.view = (function() {
|
||||
RED.nodes.addLink(link);
|
||||
historyEvent.links = [link];
|
||||
hideDragLines();
|
||||
if (drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
|
||||
if (!quickAddLink && drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
|
||||
showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
|
||||
} else if (drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) {
|
||||
} else if (!quickAddLink && drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) {
|
||||
showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
|
||||
} else {
|
||||
resetMouseVars();
|
||||
@@ -622,9 +703,9 @@ RED.view = (function() {
|
||||
resetMouseVars();
|
||||
}
|
||||
}
|
||||
quickAddLink = null;
|
||||
}
|
||||
|
||||
|
||||
RED.history.push(historyEvent);
|
||||
RED.nodes.add(nn);
|
||||
RED.editor.validateNode(nn);
|
||||
@@ -789,28 +870,7 @@ RED.view = (function() {
|
||||
|
||||
var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1;
|
||||
|
||||
var dy = mousePos[1]-(drag_line.node.y+portY);
|
||||
var dx = mousePos[0]-(drag_line.node.x+sc*drag_line.node.w/2);
|
||||
var delta = Math.sqrt(dy*dy+dx*dx);
|
||||
var scale = lineCurveScale;
|
||||
var scaleY = 0;
|
||||
|
||||
if (delta < node_width) {
|
||||
scale = 0.75-0.75*((node_width-delta)/node_width);
|
||||
}
|
||||
if (dx*sc < 0) {
|
||||
scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
|
||||
if (Math.abs(dy) < 3*node_height) {
|
||||
scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
|
||||
}
|
||||
}
|
||||
|
||||
drag_line.el.attr("d",
|
||||
"M "+(drag_line.node.x+sc*drag_line.node.w/2)+" "+(drag_line.node.y+portY)+
|
||||
" C "+(drag_line.node.x+sc*(drag_line.node.w/2+node_width*scale))+" "+(drag_line.node.y+portY+scaleY*node_height)+" "+
|
||||
(mousePos[0]-sc*(scale)*node_width)+" "+(mousePos[1]-scaleY*node_height)+" "+
|
||||
mousePos[0]+" "+mousePos[1]
|
||||
);
|
||||
drag_line.el.attr("d",generateLinkPath(drag_line.node.x+sc*drag_line.node.w/2,drag_line.node.y+portY,mousePos[0],mousePos[1],sc));
|
||||
}
|
||||
d3.event.preventDefault();
|
||||
} else if (mouse_mode == RED.state.MOVING) {
|
||||
@@ -1060,17 +1120,20 @@ RED.view = (function() {
|
||||
function zoomIn() {
|
||||
if (scaleFactor < 2) {
|
||||
scaleFactor += 0.1;
|
||||
RED.view.navigator.resize();
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
function zoomOut() {
|
||||
if (scaleFactor > 0.3) {
|
||||
scaleFactor -= 0.1;
|
||||
RED.view.navigator.resize();
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
function zoomZero() {
|
||||
scaleFactor = 1;
|
||||
RED.view.navigator.resize();
|
||||
redraw();
|
||||
}
|
||||
|
||||
@@ -1407,6 +1470,9 @@ RED.view = (function() {
|
||||
function disableQuickJoinEventHandler(evt) {
|
||||
// Check for ctrl (all browsers), "Meta" (Chrome/FF), keyCode 91 (Safari)
|
||||
if (evt.keyCode === 17 || evt.key === "Meta" || evt.keyCode === 91) {
|
||||
if (quickAddActive && drag_lines.length > 0) {
|
||||
quickAddLink = drag_lines[0];
|
||||
}
|
||||
resetMouseVars();
|
||||
hideDragLines();
|
||||
redraw();
|
||||
@@ -1418,6 +1484,10 @@ RED.view = (function() {
|
||||
//console.log(d,portType,portIndex);
|
||||
// disable zoom
|
||||
//vis.call(d3.behavior.zoom().on("zoom"), null);
|
||||
if (d3.event.button === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
mousedown_node = d;
|
||||
mousedown_port_type = portType;
|
||||
mousedown_port_index = portIndex || 0;
|
||||
@@ -1649,6 +1719,9 @@ RED.view = (function() {
|
||||
|
||||
function nodeMouseDown(d) {
|
||||
focusView();
|
||||
if (d3.event.button === 1) {
|
||||
return;
|
||||
}
|
||||
//var touch0 = d3.event;
|
||||
//var pos = [touch0.pageX,touch0.pageY];
|
||||
//RED.touch.radialMenu.show(d3.select(this),pos);
|
||||
@@ -1692,7 +1765,9 @@ RED.view = (function() {
|
||||
clickElapsed = now-clickTime;
|
||||
clickTime = now;
|
||||
|
||||
dblClickPrimed = (lastClickNode == mousedown_node);
|
||||
dblClickPrimed = (lastClickNode == mousedown_node &&
|
||||
d3.event.buttons === 1 &&
|
||||
!d3.event.shiftKey && !d3.event.metaKey && !d3.event.altKey && !d3.event.ctrlKey);
|
||||
lastClickNode = mousedown_node;
|
||||
|
||||
var i;
|
||||
@@ -1963,7 +2038,7 @@ RED.view = (function() {
|
||||
.attr("ry",4)
|
||||
.attr("width",16)
|
||||
.attr("height",node_height-12)
|
||||
.attr("fill",function(d) { return d._def.color;})
|
||||
.attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
|
||||
.attr("cursor","pointer")
|
||||
.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();}})
|
||||
@@ -1984,7 +2059,7 @@ RED.view = (function() {
|
||||
.classed("node_unknown",function(d) { return d.type == "unknown"; })
|
||||
.attr("rx", 5)
|
||||
.attr("ry", 5)
|
||||
.attr("fill",function(d) { return d._def.color;})
|
||||
.attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def); /*d._def.color;*/})
|
||||
.on("mouseup",nodeMouseUp)
|
||||
.on("mousedown",nodeMouseDown)
|
||||
.on("touchstart",function(d) {
|
||||
@@ -2381,32 +2456,17 @@ RED.view = (function() {
|
||||
var numOutputs = d.source.outputs || 1;
|
||||
var sourcePort = d.sourcePort || 0;
|
||||
var y = -((numOutputs-1)/2)*13 +13*sourcePort;
|
||||
|
||||
var dy = d.target.y-(d.source.y+y);
|
||||
var dx = (d.target.x-d.target.w/2)-(d.source.x+d.source.w/2);
|
||||
var delta = Math.sqrt(dy*dy+dx*dx);
|
||||
var scale = lineCurveScale;
|
||||
var scaleY = 0;
|
||||
if (delta < node_width) {
|
||||
scale = 0.75-0.75*((node_width-delta)/node_width);
|
||||
}
|
||||
|
||||
if (dx < 0) {
|
||||
scale += 2*(Math.min(5*node_width,Math.abs(dx))/(5*node_width));
|
||||
if (Math.abs(dy) < 3*node_height) {
|
||||
scaleY = ((dy>0)?0.5:-0.5)*(((3*node_height)-Math.abs(dy))/(3*node_height))*(Math.min(node_width,Math.abs(dx))/(node_width)) ;
|
||||
}
|
||||
}
|
||||
|
||||
d.x1 = d.source.x+d.source.w/2;
|
||||
d.y1 = d.source.y+y;
|
||||
d.x2 = d.target.x-d.target.w/2;
|
||||
d.y2 = d.target.y;
|
||||
|
||||
return "M "+d.x1+" "+d.y1+
|
||||
" C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
|
||||
(d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
|
||||
d.x2+" "+d.y2;
|
||||
// return "M "+d.x1+" "+d.y1+
|
||||
// " C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
|
||||
// (d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
|
||||
// d.x2+" "+d.y2;
|
||||
|
||||
return generateLinkPath(d.x1,d.y1,d.x2,d.y2,1);
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -2542,7 +2602,7 @@ RED.view = (function() {
|
||||
}
|
||||
).classed("link_selected", false);
|
||||
}
|
||||
|
||||
RED.view.navigator.refresh();
|
||||
if (d3.event) {
|
||||
d3.event.preventDefault();
|
||||
}
|
||||
@@ -2816,7 +2876,9 @@ RED.view = (function() {
|
||||
gridSize = Math.max(5,v);
|
||||
updateGrid();
|
||||
}
|
||||
},
|
||||
getActiveNodes: function() {
|
||||
return activeNodes;
|
||||
}
|
||||
|
||||
};
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user