frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Defer resizing tray components until they have finished building

This commit is contained in:
Nick O'Leary 2017-02-16 21:41:20 +00:00
parent 89769fb0e5
commit e2a9be9cec
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 118 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
editor/js/ui/editor.js
View File

@ -430,7 +430,7 @@ RED.editor = (function() {
* @param definition - the node definition * @param definition - the node definition
* @param prefix - the prefix to use in the input element ids (node-input|node-config-input) * @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
*/ */
function prepareEditDialog(node,definition,prefix) { function prepareEditDialog(node,definition,prefix,done) {
for (var d in definition.defaults) { for (var d in definition.defaults) {
if (definition.defaults.hasOwnProperty(d)) { if (definition.defaults.hasOwnProperty(d)) {
if (definition.defaults[d].type) { if (definition.defaults[d].type) {
@ -474,6 +474,9 @@ RED.editor = (function() {
} }
} }
validateNodeEditor(node,prefix); validateNodeEditor(node,prefix);
if (done) {
done();
}
} }
if (definition.credentials) { if (definition.credentials) {
@ -791,7 +794,7 @@ RED.editor = (function() {
} }
} }
}, },
open: function(tray) { open: function(tray,done) {
if (editing_node) { if (editing_node) {
RED.sidebar.info.refresh(editing_node); RED.sidebar.info.refresh(editing_node);
} }
@ -802,8 +805,11 @@ RED.editor = (function() {
ns = node._def.set.id; ns = node._def.set.id;
} }
var dialogForm = buildEditForm(tray,"dialog-form",type,ns); var dialogForm = buildEditForm(tray,"dialog-form",type,ns);
prepareEditDialog(node,node._def,"node-input"); prepareEditDialog(node,node._def,"node-input", function() {
dialogForm.i18n(); dialogForm.i18n();
done();
});
}, },
close: function() { close: function() {
if (RED.view.state() != RED.state.IMPORT_DRAGGING) { if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
@ -888,11 +894,11 @@ RED.editor = (function() {
try { try {
editing_config_node._def.oneditresize.call(editing_config_node,{width:form.width(),height:form.height()}); editing_config_node._def.oneditresize.call(editing_config_node,{width:form.width(),height:form.height()});
} catch(err) { } catch(err) {
console.log("oneditresize",editing_node.id,editing_node.type,err.toString()); console.log("oneditresize",editing_config_node.id,editing_config_node.type,err.toString());
} }
} }
}, },
open: function(tray) { open: function(tray, done) {
var trayHeader = tray.find(".editor-tray-header"); var trayHeader = tray.find(".editor-tray-header");
var trayFooter = tray.find(".editor-tray-footer"); var trayFooter = tray.find(".editor-tray-footer");
@ -903,58 +909,60 @@ RED.editor = (function() {
var dialogForm = buildEditForm(tray,"node-config-dialog-edit-form",type,ns); var dialogForm = buildEditForm(tray,"node-config-dialog-edit-form",type,ns);
prepareEditDialog(editing_config_node,node_def,"node-config-input"); prepareEditDialog(editing_config_node,node_def,"node-config-input", function() {
if (editing_config_node._def.exclusive) { if (editing_config_node._def.exclusive) {
$("#node-config-dialog-scope").hide(); $("#node-config-dialog-scope").hide();
} else { } else {
$("#node-config-dialog-scope").show(); $("#node-config-dialog-scope").show();
} }
$("#node-config-dialog-scope-warning").hide(); $("#node-config-dialog-scope-warning").hide();
var nodeUserFlows = {}; var nodeUserFlows = {};
editing_config_node.users.forEach(function(n) { editing_config_node.users.forEach(function(n) {
nodeUserFlows[n.z] = true; nodeUserFlows[n.z] = true;
});
var flowCount = Object.keys(nodeUserFlows).length;
var tabSelect = $("#node-config-dialog-scope").empty();
tabSelect.off("change");
tabSelect.append('<option value=""'+(!editing_config_node.z?" selected":"")+' data-i18n="sidebar.config.global"></option>');
tabSelect.append('<option disabled data-i18n="sidebar.config.flows"></option>');
RED.nodes.eachWorkspace(function(ws) {
var workspaceLabel = ws.label;
if (nodeUserFlows[ws.id]) {
workspaceLabel = "* "+workspaceLabel;
}
tabSelect.append('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'>'+workspaceLabel+'</option>');
});
tabSelect.append('<option disabled data-i18n="sidebar.config.subflows"></option>');
RED.nodes.eachSubflow(function(ws) {
var workspaceLabel = ws.name;
if (nodeUserFlows[ws.id]) {
workspaceLabel = "* "+workspaceLabel;
}
tabSelect.append('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'>'+workspaceLabel+'</option>');
});
if (flowCount > 0) {
tabSelect.on('change',function() {
var newScope = $(this).val();
if (newScope === '') {
// global scope - everyone can use it
$("#node-config-dialog-scope-warning").hide();
} else if (!nodeUserFlows[newScope] || flowCount > 1) {
// a user will loose access to it
$("#node-config-dialog-scope-warning").show();
} else {
$("#node-config-dialog-scope-warning").hide();
}
}); });
} var flowCount = Object.keys(nodeUserFlows).length;
tabSelect.i18n(); var tabSelect = $("#node-config-dialog-scope").empty();
tabSelect.off("change");
tabSelect.append('<option value=""'+(!editing_config_node.z?" selected":"")+' data-i18n="sidebar.config.global"></option>');
tabSelect.append('<option disabled data-i18n="sidebar.config.flows"></option>');
RED.nodes.eachWorkspace(function(ws) {
var workspaceLabel = ws.label;
if (nodeUserFlows[ws.id]) {
workspaceLabel = "* "+workspaceLabel;
}
tabSelect.append('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'>'+workspaceLabel+'</option>');
});
tabSelect.append('<option disabled data-i18n="sidebar.config.subflows"></option>');
RED.nodes.eachSubflow(function(ws) {
var workspaceLabel = ws.name;
if (nodeUserFlows[ws.id]) {
workspaceLabel = "* "+workspaceLabel;
}
tabSelect.append('<option value="'+ws.id+'"'+(ws.id==editing_config_node.z?" selected":"")+'>'+workspaceLabel+'</option>');
});
if (flowCount > 0) {
tabSelect.on('change',function() {
var newScope = $(this).val();
if (newScope === '') {
// global scope - everyone can use it
$("#node-config-dialog-scope-warning").hide();
} else if (!nodeUserFlows[newScope] || flowCount > 1) {
// a user will loose access to it
$("#node-config-dialog-scope-warning").show();
} else {
$("#node-config-dialog-scope-warning").hide();
}
});
}
tabSelect.i18n();
dialogForm.i18n(); dialogForm.i18n();
if (node_def.hasUsers !== false) { if (node_def.hasUsers !== false) {
$("#node-config-dialog-user-count").find("span").html(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show(); $("#node-config-dialog-user-count").find("span").html(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
} }
done();
});
}, },
close: function() { close: function() {
RED.workspaces.refresh(); RED.workspaces.refresh();

125
editor/js/ui/tray.js
View File

@ -104,85 +104,70 @@ RED.tray = (function() {
} }
}); });
if (options.open) { function finishBuild() {
options.open(el); $("#header-shade").show();
} $("#editor-shade").show();
$("#palette-shade").show();
$(".sidebar-shade").show();
$("#header-shade").show(); tray.preferredWidth = Math.max(el.width(),500);
$("#editor-shade").show(); body.css({"minWidth":tray.preferredWidth-40});
$("#palette-shade").show();
$(".sidebar-shade").show();
tray.preferredWidth = Math.max(el.width(),500); if (options.width) {
body.css({"minWidth":tray.preferredWidth-40}); if (options.width > $("#editor-stack").position().left-8) {
options.width = $("#editor-stack").position().left-8;
if (options.width) { }
if (options.width > $("#editor-stack").position().left-8) { el.width(options.width);
options.width = $("#editor-stack").position().left-8; } else {
el.width(tray.preferredWidth);
} }
el.width(options.width);
} else {
el.width(tray.preferredWidth);
}
tray.width = el.width(); tray.width = el.width();
if (tray.width > $("#editor-stack").position().left-8) { if (tray.width > $("#editor-stack").position().left-8) {
tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8); tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8);
el.width(tray.width); el.width(tray.width);
} }
// tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width)); // tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width));
el.css({ el.css({
right: -(el.width()+10)+"px", right: -(el.width()+10)+"px",
transition: "right 0.25s ease" transition: "right 0.25s ease"
}); });
$("#workspace").scrollLeft(0); $("#workspace").scrollLeft(0);
handleWindowResize(); handleWindowResize();
openingTray = true; openingTray = true;
setTimeout(function() {
setTimeout(function() { setTimeout(function() {
if (!options.width) {
el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
}
if (options.resize) {
options.resize({width:el.width()});
}
if (options.show) {
options.show();
}
setTimeout(function() { setTimeout(function() {
// Delay resetting the flag, so we don't close prematurely if (!options.width) {
openingTray = false; el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8));
},200); }
body.find(":focusable:first").focus(); if (options.resize) {
options.resize({width:el.width()});
},150); }
el.css({right:0}); if (options.show) {
},0); options.show();
}
// growButton.click(function(e) { setTimeout(function() {
// e.preventDefault(); // Delay resetting the flag, so we don't close prematurely
// tray.lastWidth = tray.width; openingTray = false;
// tray.width = $("#editor-stack").position().left-8; },200);
// el.width(tray.width); body.find(":focusable:first").focus();
// if (options.resize) {
// options.resize({width:tray.width});
// }
// });
// shrinkButton.click(function(e) {
// e.preventDefault();
// if (tray.lastWidth && tray.width > tray.lastWidth) {
// tray.width = tray.lastWidth;
// } else if (tray.width > tray.preferredWidth) {
// tray.width = tray.preferredWidth;
// }
// el.width(tray.width);
// if (options.resize) {
// options.resize({width:tray.width});
// }
// });
},150);
el.css({right:0});
},0);
}
if (options.open) {
if (options.open.length === 1) {
options.open(el);
finishBuild();
} else {
options.open(el,finishBuild);
}
} else {
finishBuild();
}
} }
function handleWindowResize() { function handleWindowResize() {