frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Namespace workspace/view css

Browse Source
This commit is contained in:
Nick O'Leary 2019-05-01 22:41:20 +01:00
parent 126a42056d
commit 8dc1ad8168
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
36 changed files with 509 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@
"ctrl-a": "core:select-all-config-nodes", "ctrl-a": "core:select-all-config-nodes",
"ctrl-z": "core:undo" "ctrl-z": "core:undo"
}, },
"workspace": { "red-ui-workspace": {
"backspace": "core:delete-selection", "backspace": "core:delete-selection",
"delete": "core:delete-selection", "delete": "core:delete-selection",
"enter": "core:edit-selected-node", "enter": "core:edit-selected-node",

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

@ -494,9 +494,12 @@ var RED = (function() {
menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" }); menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
RED.workspaces.init();
RED.statusBar.init();
RED.view.init(); RED.view.init();
RED.userSettings.init(); RED.userSettings.init();
RED.user.init(); RED.user.init();
RED.notifications.init();
RED.library.init(); RED.library.init();
RED.keyboard.init(); RED.keyboard.init();
RED.palette.init(); RED.palette.init();
@ -516,7 +519,6 @@ var RED = (function() {
} }
RED.subflow.init(); RED.subflow.init();
RED.workspaces.init();
RED.clipboard.init(); RED.clipboard.init();
RED.search.init(); RED.search.init();
RED.editor.init(); RED.editor.init();
@ -525,13 +527,12 @@ var RED = (function() {
RED.menu.init({id:"btn-sidemenu",options: menuOptions}); RED.menu.init({id:"btn-sidemenu",options: menuOptions});
RED.deploy.init(RED.settings.theme("deployButton",null)); RED.deploy.init(RED.settings.theme("deployButton",null));
RED.notifications.init();
RED.actions.add("core:show-about", showAbout); RED.actions.add("core:show-about", showAbout);
RED.nodes.init(); RED.nodes.init();
RED.comms.connect(); RED.comms.connect();
$("#main-container").show(); $("#red-ui-main-container").show();
$(".red-ui-header-toolbar").show(); $(".red-ui-header-toolbar").show();
loadNodeList(); loadNodeList();

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

@ -101,7 +101,7 @@ RED.text.bidi = (function() {
* workspace or sidebar div * workspace or sidebar div
*/ */
function enforceTextDirectionOnPage() { function enforceTextDirectionOnPage() {
$("#workspace").find('span.bidiAware').each(function() { $("#red-ui-workspace").find('span.bidiAware').each(function() {
$(this).attr("dir", resolveBaseTextDir($(this).html())); $(this).attr("dir", resolveBaseTextDir($(this).html()));
}); });
$("#red-ui-sidebar").find('span.bidiAware').each(function() { $("#red-ui-sidebar").find('span.bidiAware').each(function() {

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

@ -29,7 +29,7 @@ RED.clipboard = (function() {
function setupDialogs() { function setupDialogs() {
dialog = $('<div id="clipboard-dialog" class="hide node-red-dialog"><form class="dialog-form form-horizontal"></form></div>') dialog = $('<div id="clipboard-dialog" class="hide node-red-dialog"><form class="dialog-form form-horizontal"></form></div>')
.appendTo("body") .appendTo("#red-ui-editor")
.dialog({ .dialog({
modal: true, modal: true,
autoOpen: false, autoOpen: false,
@ -648,7 +648,7 @@ RED.clipboard = (function() {
} }
function hideDropTarget() { function hideDropTarget() {
$("#dropTarget").hide(); $("#red-ui-drop-target").hide();
RED.keyboard.remove("escape"); RED.keyboard.remove("escape");
} }
function copyText(value,element,msg) { function copyText(value,element,msg) {
@ -678,7 +678,7 @@ RED.clipboard = (function() {
if (truncated) { if (truncated) {
msg += "_truncated"; msg += "_truncated";
} }
$("#clipboard-hidden").val(value).select(); $("#red-ui-clipboard-hidden").val(value).select();
var result = document.execCommand("copy"); var result = document.execCommand("copy");
if (result && element) { if (result && element) {
var popover = RED.popover.create({ var popover = RED.popover.create({
@ -698,7 +698,7 @@ RED.clipboard = (function() {
init: function() { init: function() {
setupDialogs(); setupDialogs();
$('<input type="text" id="clipboard-hidden">').appendTo("body"); $('<input type="text" id="red-ui-clipboard-hidden">').appendTo("#red-ui-editor");
RED.actions.add("core:show-export-dialog",exportNodes); RED.actions.add("core:show-export-dialog",exportNodes);
RED.actions.add("core:show-import-dialog",importNodes); RED.actions.add("core:show-import-dialog",importNodes);
@ -712,15 +712,17 @@ RED.clipboard = (function() {
RED.events.on("type-search:open",function() { disabled = true; }); RED.events.on("type-search:open",function() { disabled = true; });
RED.events.on("type-search:close",function() { disabled = false; }); RED.events.on("type-search:close",function() { disabled = false; });
$('#chart').on("dragenter",function(event) { $('<div id="red-ui-drop-target"><div data-i18n="[append]workspace.dropFlowHere"><i class="fa fa-download"></i><br></div></div>').appendTo('#red-ui-editor');
$('#red-ui-workspace-chart').on("dragenter",function(event) {
if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 || if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
$.inArray("Files",event.originalEvent.dataTransfer.types) != -1) { $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
$("#dropTarget").css({display:'table'}); $("#red-ui-drop-target").css({display:'table'});
RED.keyboard.add("*", "escape" ,hideDropTarget); RED.keyboard.add("*", "escape" ,hideDropTarget);
} }
}); });
$('#dropTarget').on("dragover",function(event) { $('#red-ui-drop-target').on("dragover",function(event) {
if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 || if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 ||
$.inArray("Files",event.originalEvent.dataTransfer.types) != -1) { $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
event.preventDefault(); event.preventDefault();

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

@ -1257,7 +1257,7 @@ RED.diff = (function() {
// trayWidth = dimensions.width; // trayWidth = dimensions.width;
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var toolbar = $('<div class="node-diff-toolbar">'+ var toolbar = $('<div class="node-diff-toolbar">'+
'<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+ '<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+
'</div>').prependTo(trayBody); '</div>').prependTo(trayBody);
@ -1463,7 +1463,7 @@ RED.diff = (function() {
// trayWidth = dimensions.width; // trayWidth = dimensions.width;
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody); var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody);
var codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel); var codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel);
@ -1993,7 +1993,7 @@ RED.diff = (function() {
// trayWidth = dimensions.width; // trayWidth = dimensions.width;
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody); var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody);
var codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel); var codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel);
@ -2058,7 +2058,7 @@ RED.diff = (function() {
// trayWidth = dimensions.width; // trayWidth = dimensions.width;
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody); var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody);
createUnifiedDiffTable(files,options).appendTo(diffPanel); createUnifiedDiffTable(files,options).appendTo(diffPanel);
}, },

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

@ -1471,8 +1471,8 @@ RED.editor = (function() {
], ],
resize: function(dimensions) { resize: function(dimensions) {
editTrayWidthCache[type] = dimensions.width; editTrayWidthCache[type] = dimensions.width;
$(".editor-tray-content").height(dimensions.height - 50); $(".red-ui-tray-content").height(dimensions.height - 50);
var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40); var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
if (editing_node && editing_node._def.oneditresize) { if (editing_node && editing_node._def.oneditresize) {
try { try {
editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()}); editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@ -1482,8 +1482,8 @@ RED.editor = (function() {
} }
}, },
open: function(tray, done) { open: function(tray, done) {
var trayFooter = tray.find(".editor-tray-footer"); var trayFooter = tray.find(".red-ui-tray-footer");
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
trayBody.parent().css('overflow','hidden'); trayBody.parent().css('overflow','hidden');
var editorTabEl = $('<ul></ul>').appendTo(trayBody); var editorTabEl = $('<ul></ul>').appendTo(trayBody);
@ -1525,7 +1525,7 @@ RED.editor = (function() {
id: "editor-tab-properties", id: "editor-tab-properties",
label: RED._("editor-tab.properties"), label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"), name: RED._("editor-tab.properties"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-cog" iconClass: "fa fa-cog"
}; };
buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node); buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node);
@ -1536,7 +1536,7 @@ RED.editor = (function() {
id: "editor-tab-description", id: "editor-tab-description",
label: RED._("editor-tab.description"), label: RED._("editor-tab.description"),
name: RED._("editor-tab.description"), name: RED._("editor-tab.description"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-file-text-o", iconClass: "fa fa-file-text-o",
onchange: function() { onchange: function() {
nodeInfoEditor.focus(); nodeInfoEditor.focus();
@ -1550,7 +1550,7 @@ RED.editor = (function() {
id: "editor-tab-appearance", id: "editor-tab-appearance",
label: RED._("editor-tab.appearance"), label: RED._("editor-tab.appearance"),
name: RED._("editor-tab.appearance"), name: RED._("editor-tab.appearance"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-object-group", iconClass: "fa fa-object-group",
onchange: function() { onchange: function() {
refreshLabelForm(this.content,node); refreshLabelForm(this.content,node);
@ -1649,7 +1649,7 @@ RED.editor = (function() {
var trayOptions = { var trayOptions = {
title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})), title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
resize: function(dimensions) { resize: function(dimensions) {
$(".editor-tray-content").height(dimensions.height - 50); $(".red-ui-tray-content").height(dimensions.height - 50);
if (editing_config_node && editing_config_node._def.oneditresize) { if (editing_config_node && editing_config_node._def.oneditresize) {
var form = $("#node-config-dialog-edit-form"); var form = $("#node-config-dialog-edit-form");
try { try {
@ -1660,9 +1660,9 @@ RED.editor = (function() {
} }
}, },
open: function(tray, done) { open: function(tray, done) {
var trayHeader = tray.find(".editor-tray-header"); var trayHeader = tray.find(".red-ui-tray-header");
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var trayFooter = tray.find(".editor-tray-footer"); var trayFooter = tray.find(".red-ui-tray-footer");
if (node_def.hasUsers !== false) { if (node_def.hasUsers !== false) {
trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>'); trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
@ -1691,7 +1691,7 @@ RED.editor = (function() {
id: "editor-tab-cproperties", id: "editor-tab-cproperties",
label: RED._("editor-tab.properties"), label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"), name: RED._("editor-tab.properties"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-cog" iconClass: "fa fa-cog"
}; };
editorTabs.addTab(nodePropertiesTab); editorTabs.addTab(nodePropertiesTab);
@ -1702,7 +1702,7 @@ RED.editor = (function() {
id: "editor-tab-description", id: "editor-tab-description",
label: RED._("editor-tab.description"), label: RED._("editor-tab.description"),
name: RED._("editor-tab.description"), name: RED._("editor-tab.description"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-file-text-o", iconClass: "fa fa-file-text-o",
onchange: function() { onchange: function() {
nodeInfoEditor.focus(); nodeInfoEditor.focus();
@ -2188,8 +2188,8 @@ RED.editor = (function() {
} }
], ],
resize: function(size) { resize: function(size) {
$(".editor-tray-content").height(size.height - 50); $(".red-ui-tray-content").height(size.height - 50);
// var form = $(".editor-tray-content form").height(size.height - 50 - 40); // var form = $(".red-ui-tray-content form").height(size.height - 50 - 40);
var rows = $("#dialog-form>div:not(.node-input-env-container-row)"); var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
var height = size.height; var height = size.height;
for (var i=0; i<rows.size(); i++) { for (var i=0; i<rows.size(); i++) {
@ -2200,8 +2200,8 @@ RED.editor = (function() {
$("#node-input-env-container").editableList('height',height-80); $("#node-input-env-container").editableList('height',height-80);
}, },
open: function(tray) { open: function(tray) {
var trayFooter = tray.find(".editor-tray-footer"); var trayFooter = tray.find(".red-ui-tray-footer");
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
trayBody.parent().css('overflow','hidden'); trayBody.parent().css('overflow','hidden');
@ -2231,7 +2231,7 @@ RED.editor = (function() {
id: "editor-tab-properties", id: "editor-tab-properties",
label: RED._("editor-tab.properties"), label: RED._("editor-tab.properties"),
name: RED._("editor-tab.properties"), name: RED._("editor-tab.properties"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-cog" iconClass: "fa fa-cog"
}; };
buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node); buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node);
@ -2241,7 +2241,7 @@ RED.editor = (function() {
id: "editor-tab-description", id: "editor-tab-description",
label: RED._("editor-tab.description"), label: RED._("editor-tab.description"),
name: RED._("editor-tab.description"), name: RED._("editor-tab.description"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-file-text-o", iconClass: "fa fa-file-text-o",
onchange: function() { onchange: function() {
subflowEditor.focus(); subflowEditor.focus();
@ -2254,7 +2254,7 @@ RED.editor = (function() {
id: "editor-tab-appearance", id: "editor-tab-appearance",
label: RED._("editor-tab.appearance"), label: RED._("editor-tab.appearance"),
name: RED._("editor-tab.appearance"), name: RED._("editor-tab.appearance"),
content: $('<div>', {class:"editor-tray-content"}).appendTo(editorContent).hide(), content: $('<div>', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(),
iconClass: "fa fa-object-group", iconClass: "fa fa-object-group",
onchange: function() { onchange: function() {
refreshLabelForm(this.content,editing_node); refreshLabelForm(this.content,editing_node);

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

@ -83,8 +83,8 @@
} }
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
bufferStringEditor = RED.editor.createEditor({ bufferStringEditor = RED.editor.createEditor({
id: 'node-input-buffer-str', id: 'node-input-buffer-str',

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

@ -88,9 +88,9 @@
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
trayBody.addClass("node-input-expression-editor") trayBody.addClass("node-input-expression-editor")
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form','_expression','editor'); var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form','_expression','editor');
var funcSelect = $("#node-input-expression-func"); var funcSelect = $("#node-input-expression-func");
Object.keys(jsonata.functions).forEach(function(f) { Object.keys(jsonata.functions).forEach(function(f) {
funcSelect.append($("<option></option>").val(f).text(f)); funcSelect.append($("<option></option>").val(f).text(f));

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

@ -59,8 +59,8 @@
expressionEditor.resize(); expressionEditor.resize();
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
expressionEditor = RED.editor.createEditor({ expressionEditor = RED.editor.createEditor({
id: 'node-input-js', id: 'node-input-js',
mode: options.mode || 'ace/mode/javascript', mode: options.mode || 'ace/mode/javascript',

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

@ -74,8 +74,8 @@
expressionEditor.resize(); expressionEditor.resize();
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
expressionEditor = RED.editor.createEditor({ expressionEditor = RED.editor.createEditor({
id: 'node-input-json', id: 'node-input-json',
value: "", value: "",

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

@ -88,9 +88,9 @@
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
trayBody.addClass("node-input-markdown-editor") trayBody.addClass("node-input-markdown-editor")
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
expressionEditor = RED.editor.createEditor({ expressionEditor = RED.editor.createEditor({
id: 'node-input-markdown', id: 'node-input-markdown',
value: value, value: value,

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

@ -70,8 +70,8 @@ RED.eventLog = (function() {
eventLogEditor.resize(); eventLogEditor.resize();
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
eventLogEditor = RED.editor.createEditor({ eventLogEditor = RED.editor.createEditor({
id: 'event-log-editor', id: 'event-log-editor',
value: backlog.join("\n"), value: backlog.join("\n"),

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

@ -94,10 +94,14 @@ RED.h = handlers;
} }
} }
for (var action in userKeymap) { for (var action in userKeymap) {
if (userKeymap.hasOwnProperty(action)) { if (userKeymap.hasOwnProperty(action) && userKeymap[action]) {
var obj = userKeymap[action]; var obj = userKeymap[action];
if (obj.hasOwnProperty('key')) { if (obj.hasOwnProperty('key')) {
addHandler(obj.scope, obj.key, action, true); var scope = obj.scope;
if (scope === "workspace") {
scope = "red-ui-workspace";
}
addHandler(scope, obj.key, action, true);
} }
} }
} }
@ -391,8 +395,11 @@ RED.h = handlers;
$(this).toggleClass("input-error",!valid); $(this).toggleClass("input-error",!valid);
}) })
var scopeSelect = $('<select><option value="*" data-i18n="keyboard.global"></option><option value="workspace" data-i18n="keyboard.workspace"></option></select>').appendTo(scope); var scopeSelect = $('<select><option value="*" data-i18n="keyboard.global"></option><option value="red-ui-workspace" data-i18n="keyboard.workspace"></option></select>').appendTo(scope);
scopeSelect.i18n(); scopeSelect.i18n();
if (object.scope === "workspace") {
object.scope = "red-ui-workspace";
}
scopeSelect.val(object.scope||'*'); scopeSelect.val(object.scope||'*');
var div = $('<div class="keyboard-shortcut-edit button-group-vertical"></div>').appendTo(scope); var div = $('<div class="keyboard-shortcut-edit button-group-vertical"></div>').appendTo(scope);

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

@ -421,8 +421,8 @@ RED.library = (function() {
return { return {
init: function() { init: function() {
$(_librarySave).appendTo(document.body); $(_librarySave).appendTo("#red-ui-editor");
$(_libraryLookup).appendTo(document.body); $(_libraryLookup).appendTo("#red-ui-editor");
$( "#node-dialog-library-save" ).dialog({ $( "#node-dialog-library-save" ).dialog({
title: RED._("library.saveToLibrary"), title: RED._("library.saveToLibrary"),

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

@ -62,7 +62,7 @@ RED.notifications = (function() {
} }
if (options.modal) { if (options.modal) {
$("#full-shade").show(); $("#red-ui-full-shade").show();
} }
if (currentNotifications.length > 4) { if (currentNotifications.length > 4) {
@ -77,14 +77,14 @@ RED.notifications = (function() {
} }
} }
var n = document.createElement("div"); var n = document.createElement("div");
n.id="red-notification-"+c; n.id="red-ui-notification-"+c;
n.className = "notification"; n.className = "red-ui-notification";
n.fixed = fixed; n.fixed = fixed;
if (type) { if (type) {
n.className = "notification notification-"+type; n.className = "red-ui-notification red-ui-notification-"+type;
} }
if (options.width) { if (options.width) {
var parentWidth = $("#notifications").width(); var parentWidth = $("#red-ui-notifications").width();
if (options.width > parentWidth) { if (options.width > parentWidth) {
var margin = -(options.width-parentWidth)/2; var margin = -(options.width-parentWidth)/2;
$(n).css({ $(n).css({
@ -116,7 +116,7 @@ RED.notifications = (function() {
} }
$("#notifications").append(n); $("#red-ui-notifications").append(n);
if (!RED.notifications.hide) { if (!RED.notifications.hide) {
$(n).slideDown(300); $(n).slideDown(300);
} }
@ -142,7 +142,7 @@ RED.notifications = (function() {
nn.parentNode.removeChild(nn); nn.parentNode.removeChild(nn);
} }
if (options.modal) { if (options.modal) {
$("#full-shade").hide(); $("#red-ui-full-shade").hide();
} }
}; };
})(); })();
@ -211,9 +211,9 @@ RED.notifications = (function() {
if (nn.hidden) { if (nn.hidden) {
nn.showNotification(); nn.showNotification();
} else if (!options || !options.silent){ } else if (!options || !options.silent){
$(nn).addClass("notification-shake-horizontal"); $(nn).addClass("red-ui-notification-shake-horizontal");
setTimeout(function() { setTimeout(function() {
$(nn).removeClass("notification-shake-horizontal"); $(nn).removeClass("red-ui-notification-shake-horizontal");
},300); },300);
} }
@ -234,6 +234,7 @@ RED.notifications = (function() {
if (options.id) { if (options.id) {
persistentNotifications[options.id] = n; persistentNotifications[options.id] = n;
if (options.fixed) { if (options.fixed) {
console.log("SHPW)")
notificationButtonWrapper.show(); notificationButtonWrapper.show();
} }
} }
@ -263,12 +264,12 @@ RED.notifications = (function() {
return { return {
init: function() { init: function() {
notificationButtonWrapper = $('<li>'+ $('<div id="red-ui-notifications"></div>').appendTo("#red-ui-editor");
'<a id="btn-notifications" class="button" href="#">'+
'<i class="fa fa-warning"></i>'+ notificationButtonWrapper = $('<li></li>').prependTo(".red-ui-header-toolbar").hide();
'</a>'+ $('<a class="button" href="#"><i class="fa fa-warning"></i></a>')
'</li>').prependTo(".red-ui-header-toolbar").hide(); .appendTo(notificationButtonWrapper)
$('#btn-notifications').on("click", function() { .on("click", function() {
showPersistent(); showPersistent();
}) })
}, },

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

@ -242,9 +242,9 @@ RED.palette = (function() {
} }
RED.sidebar.info.set(helpText,RED._("sidebar.info.nodeHelp")); RED.sidebar.info.set(helpText,RED._("sidebar.info.nodeHelp"));
}); });
var chart = $("#chart"); var chart = $("#red-ui-workspace-chart");
var chartOffset = chart.offset(); var chartOffset = chart.offset();
var chartSVG = $("#chart>svg").get(0); var chartSVG = $("#red-ui-workspace-chart>svg").get(0);
var activeSpliceLink; var activeSpliceLink;
var mouseX; var mouseX;
var mouseY; var mouseY;
@ -256,7 +256,7 @@ RED.palette = (function() {
appendTo: 'body', appendTo: 'body',
revert: 'invalid', revert: 'invalid',
revertDuration: 300, revertDuration: 300,
containment:'#main-container', containment:'#red-ui-main-container',
start: function() { start: function() {
paletteWidth = $("#red-ui-palette").width(); paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
@ -525,7 +525,7 @@ RED.palette = (function() {
} }
}) })
sidebarControls = $('<div class="sidebar-control-left"><i class="fa fa-chevron-left"</div>').appendTo($("#red-ui-palette")); sidebarControls = $('<div class="red-ui-sidebar-control-left"><i class="fa fa-chevron-left"></i></div>').appendTo($("#red-ui-palette"));
RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette"); RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette");
sidebarControls.on("click", function() { sidebarControls.on("click", function() {
@ -588,11 +588,11 @@ RED.palette = (function() {
} }
function togglePalette(state) { function togglePalette(state) {
if (!state) { if (!state) {
$("#main-container").addClass("red-ui-palette-closed"); $("#red-ui-main-container").addClass("red-ui-palette-closed");
sidebarControls.hide(); sidebarControls.hide();
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
} else { } else {
$("#main-container").removeClass("red-ui-palette-closed"); $("#red-ui-main-container").removeClass("red-ui-palette-closed");
sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
} }
setTimeout(function() { $(window).trigger("resize"); } ,200); setTimeout(function() { $(window).trigger("resize"); } ,200);

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

@ -66,7 +66,7 @@ RED.projects.settings = (function() {
open: function(tray) { open: function(tray) {
var project = RED.projects.getActiveProject(); var project = RED.projects.getActiveProject();
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var settingsContent = $('<div></div>').appendTo(trayBody); var settingsContent = $('<div></div>').appendTo(trayBody);
var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent); var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);

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

@ -2218,7 +2218,7 @@ RED.projects = (function() {
function init() { function init() {
dialog = $('<div id="projects-dialog" class="hide node-red-dialog projects-edit-form"><form class="form-horizontal"></form><div class="projects-dialog-spinner hide"><img src="red/images/spin.svg"/></div></div>') dialog = $('<div id="projects-dialog" class="hide node-red-dialog projects-edit-form"><form class="form-horizontal"></form><div class="projects-dialog-spinner hide"><img src="red/images/spin.svg"/></div></div>')
.appendTo("body") .appendTo("#red-ui-editor")
.dialog({ .dialog({
modal: true, modal: true,
autoOpen: false, autoOpen: false,

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

@ -147,7 +147,7 @@ RED.search = (function() {
} }
function createDialog() { function createDialog() {
dialog = $("<div>",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#main-container"); dialog = $("<div>",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#red-ui-main-container");
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog); var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({ searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({
delay: 200, delay: 200,

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

@ -89,16 +89,16 @@ RED.sidebar = (function() {
sidebarSeparator.opening = false; sidebarSeparator.opening = false;
var winWidth = $(window).width(); var winWidth = $(window).width();
sidebarSeparator.start = ui.position.left; sidebarSeparator.start = ui.position.left;
sidebarSeparator.chartWidth = $("#workspace").width(); sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2; sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
sidebarSeparator.dragging = true; sidebarSeparator.dragging = true;
if (!RED.menu.isSelected("menu-item-sidebar")) { if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true; sidebarSeparator.opening = true;
var newChartRight = 7; var newChartRight = 7;
$("#red-ui-sidebar").addClass("closing"); $("#red-ui-sidebar").addClass("closing");
$("#workspace").css("right",newChartRight); $("#red-ui-workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1); $("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(0); $("#red-ui-sidebar").width(0);
RED.menu.setSelected("menu-item-sidebar",true); RED.menu.setSelected("menu-item-sidebar",true);
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");
@ -136,8 +136,8 @@ RED.sidebar = (function() {
} }
var newChartRight = sidebarSeparator.chartRight-d; var newChartRight = sidebarSeparator.chartRight-d;
$("#workspace").css("right",newChartRight); $("#red-ui-workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1); $("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(newSidebarWidth); $("#red-ui-sidebar").width(newSidebarWidth);
sidebar_tabs.resize(); sidebar_tabs.resize();
@ -150,8 +150,8 @@ RED.sidebar = (function() {
RED.menu.setSelected("menu-item-sidebar",false); RED.menu.setSelected("menu-item-sidebar",false);
if ($("#red-ui-sidebar").width() < 180) { if ($("#red-ui-sidebar").width() < 180) {
$("#red-ui-sidebar").width(180); $("#red-ui-sidebar").width(180);
$("#workspace").css("right",187); $("#red-ui-workspace").css("right",187);
$("#editor-stack").css("right",188); $("#red-ui-editor-stack").css("right",188);
} }
} }
$("#red-ui-sidebar-separator").css("left","auto"); $("#red-ui-sidebar-separator").css("left","auto");
@ -183,9 +183,9 @@ RED.sidebar = (function() {
function toggleSidebar(state) { function toggleSidebar(state) {
if (!state) { if (!state) {
$("#main-container").addClass("red-ui-sidebar-closed"); $("#red-ui-main-container").addClass("red-ui-sidebar-closed");
} else { } else {
$("#main-container").removeClass("red-ui-sidebar-closed"); $("#red-ui-main-container").removeClass("red-ui-sidebar-closed");
sidebar_tabs.resize(); sidebar_tabs.resize();
} }
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");

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

@ -41,8 +41,8 @@ RED.statusBar = (function() {
return { return {
init: function() { init: function() {
leftBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-left">').appendTo("#workspace-footer"); leftBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-left">').appendTo("#red-ui-workspace-footer");
rightBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-right">').appendTo("#workspace-footer"); rightBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-right">').appendTo("#red-ui-workspace-footer");
}, },
add: addWidget add: addWidget
} }

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

@ -294,7 +294,7 @@ RED.subflow = (function() {
} }
function showWorkspaceToolbar(activeSubflow) { function showWorkspaceToolbar(activeSubflow) {
var toolbar = $("#workspace-toolbar"); var toolbar = $("#red-ui-workspace-toolbar");
toolbar.empty(); toolbar.empty();
// Edit properties // Edit properties
@ -429,13 +429,13 @@ RED.subflow = (function() {
refreshToolbar(activeSubflow); refreshToolbar(activeSubflow);
$("#chart").css({"margin-top": "40px"}); $("#red-ui-workspace-chart").css({"margin-top": "40px"});
$("#workspace-toolbar").show(); $("#red-ui-workspace-toolbar").show();
} }
function hideWorkspaceToolbar() { function hideWorkspaceToolbar() {
$("#workspace-toolbar").hide().empty(); $("#red-ui-workspace-toolbar").hide().empty();
$("#chart").css({"margin-top": "0"}); $("#red-ui-workspace-chart").css({"margin-top": "0"});
} }
function removeSubflow(id) { function removeSubflow(id) {

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

@ -16,33 +16,33 @@
RED.tray = (function() { RED.tray = (function() {
var stack = []; var stack = [];
var editorStack = $("#editor-stack"); var editorStack = $("#red-ui-editor-stack");
var openingTray = false; var openingTray = false;
function resize() { function resize() {
} }
function showTray(options) { function showTray(options) {
var el = $('<div class="editor-tray"></div>'); var el = $('<div class="red-ui-tray"></div>');
var header = $('<div class="editor-tray-header"></div>').appendTo(el); var header = $('<div class="red-ui-tray-header"></div>').appendTo(el);
var bodyWrapper = $('<div class="editor-tray-body-wrapper"></div>').appendTo(el); var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(bodyWrapper); var body = $('<div class="red-ui-tray-body"></div>').appendTo(bodyWrapper);
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el); var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el); var resizer = $('<div class="red-ui-tray-resize-handle"></div>').appendTo(el);
// var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer); // var growButton = $('<a class="red-ui-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
// var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer); // var shrinkButton = $('<a class="red-ui-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
if (options.title) { if (options.title) {
var titles = stack.map(function(e) { return e.options.title }); var titles = stack.map(function(e) { return e.options.title });
titles.push(options.title); titles.push(options.title);
var title = '<ul class="editor-tray-breadcrumbs"><li>'+titles.join("</li><li>")+'</li></ul>'; var title = '<ul class="red-ui-tray-breadcrumbs"><li>'+titles.join("</li><li>")+'</li></ul>';
$('<div class="editor-tray-titlebar">'+title+'</div>').appendTo(header); $('<div class="red-ui-tray-titlebar">'+title+'</div>').appendTo(header);
} }
if (options.width === Infinity) { if (options.width === Infinity) {
options.maximized = true; options.maximized = true;
resizer.addClass('editor-tray-resize-maximised'); resizer.addClass('red-ui-tray-resize-maximised');
} }
var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header); var buttonBar = $('<div class="red-ui-tray-toolbar"></div>').appendTo(header);
var primaryButton; var primaryButton;
if (options.buttons) { if (options.buttons) {
for (var i=0;i<options.buttons.length;i++) { for (var i=0;i<options.buttons.length;i++) {
@ -124,8 +124,8 @@ RED.tray = (function() {
body.css({"minWidth":tray.preferredWidth-40}); body.css({"minWidth":tray.preferredWidth-40});
} }
if (options.width) { if (options.width) {
if (options.width > $("#editor-stack").position().left-8) { if (options.width > $("#red-ui-editor-stack").position().left-8) {
options.width = $("#editor-stack").position().left-8; options.width = $("#red-ui-editor-stack").position().left-8;
} }
el.width(options.width); el.width(options.width);
} else { } else {
@ -133,15 +133,15 @@ RED.tray = (function() {
} }
tray.width = el.width(); tray.width = el.width();
if (tray.width > $("#editor-stack").position().left-8) { if (tray.width > $("#red-ui-editor-stack").position().left-8) {
tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8); tray.width = Math.max(0/*tray.preferredWidth*/,$("#red-ui-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($("#red-ui-editor-stack").position().left-8,tray.width));
$("#main-container").scrollLeft(0); $("#red-ui-main-container").scrollLeft(0);
el.css({ el.css({
right: -(el.width()+10)+"px", right: -(el.width()+10)+"px",
transition: "right 0.25s ease" transition: "right 0.25s ease"
@ -151,7 +151,7 @@ RED.tray = (function() {
setTimeout(function() { setTimeout(function() {
setTimeout(function() { setTimeout(function() {
if (!options.width) { if (!options.width) {
el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8)); el.width(Math.min(tray.preferredWidth,$("#red-ui-editor-stack").position().left-8));
} }
if (options.resize) { if (options.resize) {
options.resize({width:el.width()}); options.resize({width:el.width()});
@ -186,12 +186,12 @@ RED.tray = (function() {
var tray = stack[stack.length-1]; var tray = stack[stack.length-1];
var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight(); var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
tray.body.height(trayHeight); tray.body.height(trayHeight);
if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) { if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {
tray.width = $("#editor-stack").position().left-8; tray.width = $("#red-ui-editor-stack").position().left-8;
tray.tray.width(tray.width); tray.tray.width(tray.width);
// tray.body.parent().width(tray.width); // tray.body.parent().width(tray.width);
} else if (tray.width < tray.preferredWidth) { } else if (tray.width < tray.preferredWidth) {
tray.width = Math.min($("#editor-stack").position().left-8,tray.preferredWidth); tray.width = Math.min($("#red-ui-editor-stack").position().left-8,tray.preferredWidth);
tray.tray.width(tray.width); tray.tray.width(tray.width);
// tray.body.parent().width(tray.width); // tray.body.parent().width(tray.width);
} }
@ -209,7 +209,7 @@ RED.tray = (function() {
if (!openingTray) { if (!openingTray) {
var tray = stack[stack.length-1]; var tray = stack[stack.length-1];
if (tray && tray.primaryButton) { if (tray && tray.primaryButton) {
tray.primaryButton.trigger("click"); tray.primaryButton.click();
} }
} }
}); });
@ -248,7 +248,7 @@ RED.tray = (function() {
if (stack.length > 0) { if (stack.length > 0) {
var oldTray = stack[stack.length-1]; var oldTray = stack[stack.length-1];
if (!oldTray.options.overlay) { if (!oldTray.options.overlay) {
oldTray.tray.appendTo("#editor-stack"); oldTray.tray.appendTo("#red-ui-editor-stack");
setTimeout(function() { setTimeout(function() {
handleWindowResize(); handleWindowResize();
oldTray.tray.css({right:0}); oldTray.tray.css({right:0});

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

@ -45,8 +45,8 @@ RED.typeSearch = (function() {
} }
function createDialog() { function createDialog() {
//shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#main-container"); //shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#red-ui-main-container");
dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#main-container"); dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#red-ui-main-container");
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog); var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
searchInput = $('<input type="text" id="red-ui-type-search-input">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({ searchInput = $('<input type="text" id="red-ui-type-search-input">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({
delay: 50, delay: 50,
@ -222,7 +222,7 @@ RED.typeSearch = (function() {
cancelCallback = opts.cancel; cancelCallback = opts.cancel;
RED.events.emit("type-search:open"); RED.events.emit("type-search:open");
//shade.show(); //shade.show();
if ($("#main-container").height() - opts.y - 150 < 0) { if ($("#red-ui-main-container").height() - opts.y - 150 < 0) {
opts.y = opts.y - 235; opts.y = opts.y - 235;
} }
dialog.css({left:opts.x+"px",top:opts.y+"px"}).show(); dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();

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

@ -52,7 +52,7 @@ RED.userSettings = (function() {
trayWidth = dimensions.width; trayWidth = dimensions.width;
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var settingsContent = $('<div></div>').appendTo(trayBody); var settingsContent = $('<div></div>').appendTo(trayBody);
var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent); var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);

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

@ -57,8 +57,8 @@
function resizeNavBorder() { function resizeNavBorder() {
if (navBorder) { if (navBorder) {
scaleFactor = RED.view.scale(); scaleFactor = RED.view.scale();
chartSize = [ $("#chart").width(), $("#chart").height()]; chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()]; scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
navBorder.attr('x',scrollPos[0]/nav_scale) navBorder.attr('x',scrollPos[0]/nav_scale)
.attr('y',scrollPos[1]/nav_scale) .attr('y',scrollPos[1]/nav_scale)
.attr('width',chartSize[0]/nav_scale/scaleFactor) .attr('width',chartSize[0]/nav_scale/scaleFactor)
@ -71,12 +71,12 @@
$("#btn-navigate").addClass("selected"); $("#btn-navigate").addClass("selected");
resizeNavBorder(); resizeNavBorder();
refreshNodes(); refreshNodes();
$("#chart").on("scroll",onScroll); $("#red-ui-workspace-chart").on("scroll",onScroll);
navContainer.fadeIn(200); navContainer.fadeIn(200);
} else { } else {
isShowing = false; isShowing = false;
navContainer.fadeOut(100); navContainer.fadeOut(100);
$("#chart").off("scroll",onScroll); $("#red-ui-workspace-chart").off("scroll",onScroll);
$("#btn-navigate").removeClass("selected"); $("#btn-navigate").removeClass("selected");
} }
} }
@ -91,10 +91,10 @@
navContainer = $('<div>').css({ navContainer = $('<div>').css({
"position":"absolute", "position":"absolute",
"bottom":$("#workspace-footer").height(), "bottom":$("#red-ui-workspace-footer").height(),
"right":0, "right":0,
zIndex: 1 zIndex: 1
}).appendTo("#workspace").hide(); }).appendTo("#red-ui-workspace").hide();
navBox = d3.select(navContainer[0]) navBox = d3.select(navContainer[0])
.append("svg:svg") .append("svg:svg")
@ -119,14 +119,14 @@
}).on("mousedown", function() { }).on("mousedown", function() {
// Update these in case they have changed // Update these in case they have changed
scaleFactor = RED.view.scale(); scaleFactor = RED.view.scale();
chartSize = [ $("#chart").width(), $("#chart").height()]; chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor]; 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 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]); var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
navBorder.attr('x',newX).attr('y',newY); navBorder.attr('x',newX).attr('y',newY);
isDragging = true; isDragging = true;
$("#chart").scrollLeft(newX*nav_scale*scaleFactor); $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
$("#chart").scrollTop(newY*nav_scale*scaleFactor); $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
}).on("mousemove", function() { }).on("mousemove", function() {
if (!isDragging) { return } if (!isDragging) { return }
if (d3.event.buttons === 0) { if (d3.event.buttons === 0) {
@ -136,8 +136,8 @@
var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]); 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]); var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
navBorder.attr('x',newX).attr('y',newY); navBorder.attr('x',newX).attr('y',newY);
$("#chart").scrollLeft(newX*nav_scale*scaleFactor); $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
$("#chart").scrollTop(newY*nav_scale*scaleFactor); $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
}).on("mouseup", function() { }).on("mouseup", function() {
isDragging = false; isDragging = false;
}) })

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

@ -15,6 +15,17 @@
**/ **/
/* <div>#red-ui-workspace-chart
* \- <svg> "outer"
* \- <g>
* \- <g>.red-ui-workspace-chart-event-layer "eventLayer"
* |- <rect>.red-ui-workspace-chart-background
* |- <g>.red-ui-workspace-chart-grid "gridLayer"
* |- <g> "linkLayer"
* |- <g> "dragGroupLayer"
* \- <g> "nodeLayer"
*/
RED.view = (function() { RED.view = (function() {
var space_width = 5000, var space_width = 5000,
space_height = 5000, space_height = 5000,
@ -79,9 +90,20 @@ RED.view = (function() {
var PORT_TYPE_INPUT = 1; var PORT_TYPE_INPUT = 1;
var PORT_TYPE_OUTPUT = 0; var PORT_TYPE_OUTPUT = 0;
var chart = $("#chart"); var chart;
var outer;
var eventLayer;
var gridLayer;
var linkLayer;
var dragGroupLayer;
var nodeLayer;
var drag_lines;
var outer = d3.select("#chart") function init() {
chart = $("#red-ui-workspace-chart");
outer = d3.select("#red-ui-workspace-chart")
.append("svg:svg") .append("svg:svg")
.attr("width", space_width) .attr("width", space_width)
.attr("height", space_height) .attr("height", space_height)
@ -94,11 +116,11 @@ RED.view = (function() {
d3.event.preventDefault(); d3.event.preventDefault();
}); });
var vis = outer eventLayer = outer
.append("svg:g") .append("svg:g")
.on("dblclick.zoom", null) .on("dblclick.zoom", null)
.append("svg:g") .append("svg:g")
.attr('class','innerCanvas') .attr('class','red-ui-workspace-chart-event-layer')
.on("mousemove", canvasMouseMove) .on("mousemove", canvasMouseMove)
.on("mousedown", canvasMouseDown) .on("mousedown", canvasMouseDown)
.on("mouseup", canvasMouseUp) .on("mouseup", canvasMouseUp)
@ -118,9 +140,6 @@ RED.view = (function() {
if (RED.touch.radialMenu.active()) { if (RED.touch.radialMenu.active()) {
return; return;
} }
if (lasso) {
outer_background.attr("fill","#fff");
}
canvasMouseUp.call(this); canvasMouseUp.call(this);
}) })
.on("touchcancel", canvasMouseUp) .on("touchcancel", canvasMouseUp)
@ -135,8 +154,8 @@ RED.view = (function() {
var a = touch0["pageY"]-touch1["pageY"]; var a = touch0["pageY"]-touch1["pageY"];
var b = touch0["pageX"]-touch1["pageX"]; var b = touch0["pageX"]-touch1["pageX"];
var offset = $("#chart").offset(); var offset = chart.offset();
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
startTouchCenter = [ startTouchCenter = [
(touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor, (touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor,
(touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor (touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor
@ -156,7 +175,7 @@ RED.view = (function() {
touchStartTime = setTimeout(function() { touchStartTime = setTimeout(function() {
touchStartTime = null; touchStartTime = null;
showTouchMenu(obj,pos); showTouchMenu(obj,pos);
//lasso = vis.append("rect") //lasso = eventLayer.append("rect")
// .attr("ox",point[0]) // .attr("ox",point[0])
// .attr("oy",point[1]) // .attr("oy",point[1])
// .attr("rx",2) // .attr("rx",2)
@ -166,7 +185,6 @@ RED.view = (function() {
// .attr("width",0) // .attr("width",0)
// .attr("height",0) // .attr("height",0)
// .attr("class","lasso"); // .attr("class","lasso");
//outer_background.attr("fill","#e3e3f3");
},touchLongPressTimeout); },touchLongPressTimeout);
} }
}) })
@ -195,8 +213,8 @@ RED.view = (function() {
var touch1 = d3.event.touches.item(1); var touch1 = d3.event.touches.item(1);
var a = touch0["pageY"]-touch1["pageY"]; var a = touch0["pageY"]-touch1["pageY"];
var b = touch0["pageX"]-touch1["pageX"]; var b = touch0["pageX"]-touch1["pageX"];
var offset = $("#chart").offset(); var offset = chart.offset();
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
var moveTouchDistance = Math.sqrt((a*a)+(b*b)); var moveTouchDistance = Math.sqrt((a*a)+(b*b));
var touchCenter = [ var touchCenter = [
touch1["pageX"]+(b/2), touch1["pageX"]+(b/2),
@ -215,113 +233,26 @@ RED.view = (function() {
startTouchDistance = moveTouchDistance; startTouchDistance = moveTouchDistance;
moveTouchCenter = touchCenter; moveTouchCenter = touchCenter;
$("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]); chart.scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
$("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]); chart.scrollTop(scrollPos[1]+deltaTouchCenter[1]);
redraw(); redraw();
} }
} }
}); });
var outer_background = vis.append("svg:rect") // Workspace Background
eventLayer.append("svg:rect")
.attr("class","red-ui-workspace-chart-background")
.attr("width", space_width) .attr("width", space_width)
.attr("height", space_height) .attr("height", space_height);
.attr("fill","#fff");
var grid = vis.append("g"); gridLayer = eventLayer.append("g").attr("class","red-ui-workspace-chart-grid");
updateGrid(); updateGrid();
function updateGrid() { linkLayer = eventLayer.append("g");
var gridTicks = []; dragGroupLayer = eventLayer.append("g");
for (var i=0;i<space_width;i+=+gridSize) { nodeLayer = eventLayer.append("g");
gridTicks.push(i); drag_lines = [];
}
grid.selectAll("line.horizontal").remove();
grid.selectAll("line.horizontal").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"horizontal",
"x1" : 0,
"x2" : space_width,
"y1" : function(d){ return d;},
"y2" : function(d){ return d;},
"fill" : "none",
"shape-rendering" : "crispEdges",
"stroke" : "#eee",
"stroke-width" : "1px"
});
grid.selectAll("line.vertical").remove();
grid.selectAll("line.vertical").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"vertical",
"y1" : 0,
"y2" : space_width,
"x1" : function(d){ return d;},
"x2" : function(d){ return d;},
"fill" : "none",
"shape-rendering" : "crispEdges",
"stroke" : "#eee",
"stroke-width" : "1px"
});
}
var linkLayer = vis.append("g");
var dragGroup = vis.append("g");
var nodeLayer = vis.append("g");
var drag_lines = [];
function showDragLines(nodes) {
showAllLinkPorts = -1;
for (var i=0;i<nodes.length;i++) {
var node = nodes[i];
node.el = dragGroup.append("svg:path").attr("class", "drag_line");
if ((node.node.type === "link out" && node.portType === PORT_TYPE_OUTPUT) ||
(node.node.type === "link in" && node.portType === PORT_TYPE_INPUT)) {
node.el.attr("class","link_link drag_line");
node.virtualLink = true;
showAllLinkPorts = (node.portType === PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
}
drag_lines.push(node);
}
if (showAllLinkPorts !== -1) {
activeNodes.forEach(function(n) {
if (n.type === "link in" || n.type === "link out") {
n.dirty = true;
}
})
}
}
function hideDragLines() {
if (showAllLinkPorts !== -1) {
activeNodes.forEach(function(n) {
if (n.type === "link in" || n.type === "link out") {
n.dirty = true;
}
})
}
showAllLinkPorts = -1;
while(drag_lines.length) {
var line = drag_lines.pop();
if (line.el) {
line.el.remove();
}
}
}
function updateActiveNodes() {
var activeWorkspace = RED.workspaces.active();
activeNodes = RED.nodes.filterNodes({z:activeWorkspace});
activeLinks = RED.nodes.filterLinks({
source:{z:activeWorkspace},
target:{z:activeWorkspace}
});
}
function init() {
RED.statusBar.init();
RED.events.on("workspace:change",function(event) { RED.events.on("workspace:change",function(event) {
if (event.old !== 0) { if (event.old !== 0) {
@ -362,8 +293,6 @@ RED.view = (function() {
redraw(); redraw();
}); });
RED.view.navigator.init();
RED.statusBar.add({ RED.statusBar.add({
id: "view-zoom-controls", id: "view-zoom-controls",
align: "right", align: "right",
@ -374,14 +303,13 @@ RED.view = (function() {
'</span>') '</span>')
}) })
$("#red-ui-view-zoom-out").on("click", function() {zoomOut();}); $("#red-ui-view-zoom-out").on("click", zoomOut);
RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out');
$("#red-ui-view-zoom-zero").on("click", function() {zoomZero();}); $("#red-ui-view-zoom-zero").on("click", zoomZero);
RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset');
$("#red-ui-view-zoom-in").on("click", function() {zoomIn();}); $("#red-ui-view-zoom-in").on("click", zoomIn);
RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in');
$("#chart").on("DOMMouseScroll mousewheel", function (evt) { chart.on("DOMMouseScroll mousewheel", function (evt) {
if ( evt.altKey ) { if ( evt.altKey ) {
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation(); evt.stopPropagation();
@ -392,7 +320,7 @@ RED.view = (function() {
}); });
// Handle nodes dragged from the palette // Handle nodes dragged from the palette
$("#chart").droppable({ chart.droppable({
accept:".red-ui-palette-node", accept:".red-ui-palette-node",
drop: function( event, ui ) { drop: function( event, ui ) {
d3.event = event; d3.event = event;
@ -461,11 +389,11 @@ RED.view = (function() {
} }
} }
}); });
$("#chart").on("focus", function() { chart.on("focus", function() {
$("#workspace-tabs").addClass("workspace-focussed"); $("#red-ui-workspace-tabs").addClass("red-ui-workspace-focussed");
}); });
$("#chart").on("blur", function() { chart.on("blur", function() {
$("#workspace-tabs").removeClass("workspace-focussed"); $("#red-ui-workspace-tabs").removeClass("red-ui-workspace-focussed");
}); });
RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection); RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
@ -501,9 +429,88 @@ RED.view = (function() {
} }
}); });
RED.view.navigator.init();
RED.view.tools.init(); RED.view.tools.init();
} }
function updateGrid() {
var gridTicks = [];
for (var i=0;i<space_width;i+=+gridSize) {
gridTicks.push(i);
}
gridLayer.selectAll("line.horizontal").remove();
gridLayer.selectAll("line.horizontal").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"horizontal",
"x1" : 0,
"x2" : space_width,
"y1" : function(d){ return d;},
"y2" : function(d){ return d;}
});
gridLayer.selectAll("line.vertical").remove();
gridLayer.selectAll("line.vertical").data(gridTicks).enter()
.append("line")
.attr(
{
"class":"vertical",
"y1" : 0,
"y2" : space_width,
"x1" : function(d){ return d;},
"x2" : function(d){ return d;}
});
}
function showDragLines(nodes) {
showAllLinkPorts = -1;
for (var i=0;i<nodes.length;i++) {
var node = nodes[i];
node.el = dragGroupLayer.append("svg:path").attr("class", "drag_line");
if ((node.node.type === "link out" && node.portType === PORT_TYPE_OUTPUT) ||
(node.node.type === "link in" && node.portType === PORT_TYPE_INPUT)) {
node.el.attr("class","link_link drag_line");
node.virtualLink = true;
showAllLinkPorts = (node.portType === PORT_TYPE_OUTPUT)?PORT_TYPE_INPUT:PORT_TYPE_OUTPUT;
}
drag_lines.push(node);
}
if (showAllLinkPorts !== -1) {
activeNodes.forEach(function(n) {
if (n.type === "link in" || n.type === "link out") {
n.dirty = true;
}
})
}
}
function hideDragLines() {
if (showAllLinkPorts !== -1) {
activeNodes.forEach(function(n) {
if (n.type === "link in" || n.type === "link out") {
n.dirty = true;
}
})
}
showAllLinkPorts = -1;
while(drag_lines.length) {
var line = drag_lines.pop();
if (line.el) {
line.el.remove();
}
}
}
function updateActiveNodes() {
var activeWorkspace = RED.workspaces.active();
activeNodes = RED.nodes.filterNodes({z:activeWorkspace});
activeLinks = RED.nodes.filterLinks({
source:{z:activeWorkspace},
target:{z:activeWorkspace}
});
}
function generateLinkPath(origX,origY, destX, destY, sc) { function generateLinkPath(origX,origY, destX, destY, sc) {
var dy = destY-origY; var dy = destY-origY;
var dx = destX-origX; var dx = destX-origX;
@ -580,7 +587,6 @@ RED.view = (function() {
} }
} }
function addNode(type,x,y) { function addNode(type,x,y) {
var m = /^subflow:(.+)$/.exec(type); var m = /^subflow:(.+)$/.exec(type);
@ -682,14 +688,14 @@ RED.view = (function() {
var oy = point[1]; var oy = point[1];
if (RED.settings.get("editor").view['view-snap-grid']) { if (RED.settings.get("editor").view['view-snap-grid']) {
// vis.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red') // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red')
point[0] = Math.round(point[0] / gridSize) * gridSize; point[0] = Math.round(point[0] / gridSize) * gridSize;
point[1] = Math.round(point[1] / gridSize) * gridSize; point[1] = Math.round(point[1] / gridSize) * gridSize;
// vis.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','blue') // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','blue')
} }
d3.event.stopPropagation(); d3.event.stopPropagation();
var mainPos = $("#main-container").position(); var mainPos = $("#red-ui-main-container").position();
if (mouse_mode !== RED.state.QUICK_JOINING) { if (mouse_mode !== RED.state.QUICK_JOINING) {
mouse_mode = RED.state.QUICK_JOINING; mouse_mode = RED.state.QUICK_JOINING;
@ -700,7 +706,7 @@ RED.view = (function() {
if (ghostNode) { if (ghostNode) {
ghostNode.remove(); ghostNode.remove();
} }
ghostNode = vis.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')'); ghostNode = eventLayer.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
ghostNode.append("rect") ghostNode.append("rect")
.attr("class","node_placeholder") .attr("class","node_placeholder")
.attr("rx", 5) .attr("rx", 5)
@ -738,7 +744,7 @@ RED.view = (function() {
return; return;
} }
if (!quickAddLink.el) { if (!quickAddLink.el) {
quickAddLink.el = dragGroup.append("svg:path").attr("class", "drag_line"); quickAddLink.el = dragGroupLayer.append("svg:path").attr("class", "drag_line");
} }
var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1; var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1;
var sourcePort = quickAddLink.port; var sourcePort = quickAddLink.port;
@ -947,7 +953,7 @@ RED.view = (function() {
if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) { if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
if (!touchStartTime) { if (!touchStartTime) {
point = d3.mouse(this); point = d3.mouse(this);
lasso = vis.append("rect") lasso = eventLayer.append("rect")
.attr("ox",point[0]) .attr("ox",point[0])
.attr("oy",point[1]) .attr("oy",point[1])
.attr("rx",1) .attr("rx",1)
@ -1746,7 +1752,6 @@ RED.view = (function() {
} }
} }
function calculateTextWidth(str, className, offset) { function calculateTextWidth(str, className, offset) {
return calculateTextDimensions(str,className,offset,0)[0]; return calculateTextDimensions(str,className,offset,0)[0];
} }
@ -1792,7 +1797,7 @@ RED.view = (function() {
function portMouseDown(d,portType,portIndex) { function portMouseDown(d,portType,portIndex) {
//console.log(d,portType,portIndex); //console.log(d,portType,portIndex);
// disable zoom // disable zoom
//vis.call(d3.behavior.zoom().on("zoom"), null); //eventLayer.call(d3.behavior.zoom().on("zoom"), null);
if (d3.event.button === 1) { if (d3.event.button === 1) {
return; return;
} }
@ -2001,7 +2006,7 @@ RED.view = (function() {
function getElementPosition(node) { function getElementPosition(node) {
var d3Node = d3.select(node); var d3Node = d3.select(node);
if (d3Node.attr('class') === 'innerCanvas') { if (d3Node.attr('class') === 'red-ui-workspace-chart-event-layer') {
return [0,0]; return [0,0];
} }
var result = []; var result = [];
@ -2041,7 +2046,7 @@ RED.view = (function() {
return result; return result;
} }
function showTooltip(x,y,content,direction) { function showTooltip(x,y,content,direction) {
var tooltip = vis.append("g") var tooltip = eventLayer.append("g")
.attr("transform","translate("+x+","+y+")") .attr("transform","translate("+x+","+y+")")
.attr("class","port_tooltip"); .attr("class","port_tooltip");
@ -2374,7 +2379,7 @@ RED.view = (function() {
} }
function redraw() { function redraw() {
vis.attr("transform","scale("+scaleFactor+")"); eventLayer.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor); outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
// Don't bother redrawing nodes if we're drawing links // Don't bother redrawing nodes if we're drawing links
@ -3295,12 +3300,12 @@ RED.view = (function() {
// setting the focus // setting the focus
var scrollX = window.parent.window.scrollX; var scrollX = window.parent.window.scrollX;
var scrollY = window.parent.window.scrollY; var scrollY = window.parent.window.scrollY;
$("#chart").trigger("focus"); chart.trigger("focus");
window.parent.window.scrollTo(scrollX,scrollY); window.parent.window.scrollTo(scrollX,scrollY);
} catch(err) { } catch(err) {
// In case we're iframed into a page of a different origin, just focus // In case we're iframed into a page of a different origin, just focus
// the view following the inevitable DOMException // the view following the inevitable DOMException
$("#chart").trigger("focus"); chart.trigger("focus");
} }
} }
@ -3457,9 +3462,9 @@ RED.view = (function() {
function toggleShowGrid(state) { function toggleShowGrid(state) {
if (state) { if (state) {
grid.style("visibility","visible"); gridLayer.style("visibility","visible");
} else { } else {
grid.style("visibility","hidden"); gridLayer.style("visibility","hidden");
} }
} }
function toggleSnapGrid(state) { function toggleSnapGrid(state) {
@ -3542,13 +3547,13 @@ RED.view = (function() {
node.dirty = true; node.dirty = true;
RED.workspaces.show(node.z); RED.workspaces.show(node.z);
var screenSize = [$("#chart").width(),$("#chart").height()]; var screenSize = [chart.width(),chart.height()];
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
if (node.x < scrollPos[0] || node.y < scrollPos[1] || node.x > screenSize[0]+scrollPos[0] || node.y > screenSize[1]+scrollPos[1]) { if (node.x < scrollPos[0] || node.y < scrollPos[1] || node.x > screenSize[0]+scrollPos[0] || node.y > screenSize[1]+scrollPos[1]) {
var deltaX = '-='+((scrollPos[0] - node.x) + screenSize[0]/2); var deltaX = '-='+((scrollPos[0] - node.x) + screenSize[0]/2);
var deltaY = '-='+((scrollPos[1] - node.y) + screenSize[1]/2); var deltaY = '-='+((scrollPos[1] - node.y) + screenSize[1]/2);
$("#chart").animate({ chart.animate({
scrollLeft: deltaX, scrollLeft: deltaX,
scrollTop: deltaY scrollTop: deltaY
},200); },200);

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

@ -28,7 +28,7 @@ RED.workspaces = (function() {
var tabId = RED.nodes.id(); var tabId = RED.nodes.id();
do { do {
workspaceIndex += 1; workspaceIndex += 1;
} while ($("#workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0); } while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0);
ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})}; ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})};
RED.nodes.addWorkspace(ws,targetIndex); RED.nodes.addWorkspace(ws,targetIndex);
@ -108,7 +108,7 @@ RED.workspaces = (function() {
workspace.info = info; workspace.info = info;
} }
$("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('workspace-disabled',!!workspace.disabled); $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('workspace-disabled',!!workspace.disabled);
$("#workspace").toggleClass("workspace-disabled",!!workspace.disabled); $("#red-ui-workspace").toggleClass("workspace-disabled",!!workspace.disabled);
if (changed) { if (changed) {
var historyEvent = { var historyEvent = {
@ -150,7 +150,7 @@ RED.workspaces = (function() {
tabflowEditor.resize(); tabflowEditor.resize();
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.editor-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody); var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
$('<div class="form-row">'+ $('<div class="form-row">'+
'<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+ '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
@ -241,7 +241,7 @@ RED.workspaces = (function() {
var workspaceTabCount = 0; var workspaceTabCount = 0;
function createWorkspaceTabs() { function createWorkspaceTabs() {
workspace_tabs = RED.tabs.create({ workspace_tabs = RED.tabs.create({
id: "workspace-tabs", id: "red-ui-workspace-tabs",
onchange: function(tab) { onchange: function(tab) {
var event = { var event = {
old: activeWorkspace old: activeWorkspace
@ -250,7 +250,7 @@ RED.workspaces = (function() {
event.workspace = activeWorkspace; event.workspace = activeWorkspace;
RED.events.emit("workspace:change",event); RED.events.emit("workspace:change",event);
window.location.hash = 'flow/'+tab.id; window.location.hash = 'flow/'+tab.id;
$("#workspace").toggleClass("workspace-disabled",!!tab.disabled); $("#red-ui-workspace").toggleClass("workspace-disabled",!!tab.disabled);
RED.sidebar.config.refresh(); RED.sidebar.config.refresh();
RED.view.focus(); RED.view.focus();
}, },
@ -294,14 +294,14 @@ RED.workspaces = (function() {
onselect: function(selectedTabs) { onselect: function(selectedTabs) {
RED.view.select(false) RED.view.select(false)
if (selectedTabs.length === 0) { if (selectedTabs.length === 0) {
$("#chart svg").css({"pointer-events":"auto",filter:"none"}) $("#red-ui-workspace-chart svg").css({"pointer-events":"auto",filter:"none"})
$("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"}) $("#red-ui-workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
$("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"}) $("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"})
$(".red-ui-sidebar-shade").hide(); $(".red-ui-sidebar-shade").hide();
} else { } else {
RED.view.select(false) RED.view.select(false)
$("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#red-ui-workspace-chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
$("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#red-ui-workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
$("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
$(".red-ui-sidebar-shade").show(); $(".red-ui-sidebar-shade").show();
} }
@ -316,17 +316,24 @@ RED.workspaces = (function() {
workspaceTabCount = 0; workspaceTabCount = 0;
} }
function showWorkspace() { function showWorkspace() {
$("#workspace .red-ui-tabs").show() $("#red-ui-workspace .red-ui-tabs").show()
$("#chart").show() $("#red-ui-workspace-chart").show()
$("#workspace-footer").children().show() $("#red-ui-workspace-footer").children().show()
} }
function hideWorkspace() { function hideWorkspace() {
$("#workspace .red-ui-tabs").hide() $("#red-ui-workspace .red-ui-tabs").hide()
$("#chart").hide() $("#red-ui-workspace-chart").hide()
$("#workspace-footer").children().hide() $("#red-ui-workspace-footer").children().hide()
} }
function init() { function init() {
$('<ul id="red-ui-workspace-tabs"></ul>').appendTo("#red-ui-workspace");
$('<div id="red-ui-workspace-chart" tabindex="1"></div>').appendTo("#red-ui-workspace");
$('<div id="red-ui-workspace-toolbar"></div>').appendTo("#red-ui-workspace");
$('<div id="red-ui-workspace-footer" class="red-ui-component-footer"></div>').appendTo("#red-ui-workspace");
$('<div id="editor-shade" class="hide"></div>').appendTo("#red-ui-workspace");
createWorkspaceTabs(); createWorkspaceTabs();
RED.events.on("sidebar:resize",workspace_tabs.resize); RED.events.on("sidebar:resize",workspace_tabs.resize);

14
packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss vendored
View File

@ -14,24 +14,26 @@
* limitations under the License. * limitations under the License.
**/ **/
#dropTarget { #red-ui-drop-target {
position: absolute; position: absolute;
top: 0; bottom: 0; top: 0; bottom: 0;
left: 0; right: 0; left: 0; right: 0;
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.3);
display:table; display:table;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: none; display: none;
z-index:100; z-index:100;
} div {
#dropTarget div { pointer-events: none;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
color: #fff; color: #fff;
} i {
#dropTarget div i { pointer-events: none;
font-size: 80px; font-size: 80px;
} }
}
}

32
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -15,7 +15,7 @@
**/ **/
#editor-stack { #red-ui-editor-stack {
position: absolute; position: absolute;
margin: 0; margin: 0;
top: 0; top: 0;
@ -24,7 +24,7 @@
width: 0; width: 0;
z-index: 5; z-index: 5;
} }
.editor-tray { .red-ui-tray {
position:absolute; position:absolute;
margin: 0; margin: 0;
top: 0; top: 0;
@ -37,15 +37,15 @@
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
box-sizing: content-box; box-sizing: content-box;
} }
.editor-tray.open { .red-ui-tray.open {
right: 0; right: 0;
} }
.editor-tray-body-wrapper { .red-ui-tray-body-wrapper {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
} }
.editor-tray-body { .red-ui-tray-body {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 0.1px; // prevent margin collapsing padding: 0.1px; // prevent margin collapsing
@ -54,7 +54,7 @@
height: calc(100% - 40px); height: calc(100% - 40px);
} }
} }
.editor-tray-content { .red-ui-tray-content {
overflow: auto; overflow: auto;
position: relative; position: relative;
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
@ -62,7 +62,7 @@
left: 4px; left: 4px;
} }
} }
.editor-tray-header { .red-ui-tray-header {
@include disable-selection; @include disable-selection;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -76,7 +76,7 @@
} }
} }
.editor-tray-footer { .red-ui-tray-footer {
@include component-footer; @include component-footer;
height: 35px; height: 35px;
@ -88,7 +88,7 @@
} }
.editor-tray-toolbar { .red-ui-tray-toolbar {
text-align: right; text-align: right;
padding: 6px; padding: 6px;
@ -100,11 +100,11 @@
} }
} }
.editor-tray-titlebar { .red-ui-tray-titlebar {
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
padding: 8px; padding: 8px;
} }
.editor-tray-breadcrumbs { .red-ui-tray-breadcrumbs {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding:0; padding:0;
@ -127,7 +127,7 @@
} }
} }
} }
.editor-tray-resize-handle { .red-ui-tray-resize-handle {
position: absolute; position: absolute;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
@ -138,12 +138,12 @@
border-left: 1px solid $primary-border-color; border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px rgba(0,0,0,0.1); box-shadow: -1px 0 6px rgba(0,0,0,0.1);
&.editor-tray-resize-maximised { &.red-ui-tray-resize-maximised {
background: $background-color; background: $background-color;
cursor: default; cursor: default;
} }
} }
.editor-tray-resize-button { .red-ui-tray-resize-button {
@include workspace-button; @include workspace-button;
display: block; display: block;
height: 37px; height: 37px;
@ -163,7 +163,7 @@
top: -1px; top: -1px;
bottom: -1px; bottom: -1px;
} }
#full-shade { #red-ui-full-shade {
@include shade; @include shade;
z-index: 15; z-index: 15;
} }
@ -355,7 +355,7 @@
background: #fff; background: #fff;
} }
#clipboard-hidden { #red-ui-clipboard-hidden {
position: absolute; position: absolute;
top: -3000px; top: -3000px;
} }

24
packages/node_modules/@node-red/editor-client/src/sass/notifications.scss vendored
View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
**/ **/
#notifications { #red-ui-notifications {
z-index: 100; z-index: 100;
width: 500px; width: 500px;
margin-left: -250px; margin-left: -250px;
@ -22,7 +22,7 @@
position: absolute; position: absolute;
top: 1px; top: 1px;
} }
.notification { .red-ui-notification {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
padding: 14px 18px; padding: 14px 18px;
@ -34,33 +34,33 @@
border-left-width: 16px; border-left-width: 16px;
overflow: hidden; overflow: hidden;
} }
.notification p:first-child { .red-ui-notification p:first-child {
font-size: 1.1em; font-size: 1.1em;
font-weight: 400; font-weight: 400;
} }
.notification a { .red-ui-notification a {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.notification-success { .red-ui-notification-success {
border-color: #4B8400; border-color: #4B8400;
} }
.notification-warning { .red-ui-notification-warning {
border-color: #D74108; border-color: #D74108;
} }
.notification-error { .red-ui-notification-error {
border-color: #AD1625; border-color: #AD1625;
} }
.notification-shake-horizontal { .red-ui-notification-shake-horizontal {
-webkit-animation: notification-shake-horizontal 0.3s steps(2, end) both; -webkit-animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
animation: notification-shake-horizontal 0.3s steps(2, end) both; animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
} }
@-webkit-keyframes notification-shake-horizontal { @-webkit-keyframes red-ui-notification-shake-horizontal {
0%, 0%,
100% { 100% {
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
@ -88,7 +88,7 @@
// transform: translateX(-1px); // transform: translateX(-1px);
// } // }
} }
@keyframes notification-shake-horizontal { @keyframes red-ui-notification-shake-horizontal {
0%, 0%,
100% { 100% {
-webkit-transform: translateX(0); -webkit-transform: translateX(0);

4
packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss vendored
View File

@ -54,8 +54,8 @@
.red-ui-sidebar-closed > #red-ui-sidebar { display: none; } .red-ui-sidebar-closed > #red-ui-sidebar { display: none; }
.red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; } .red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; }
.red-ui-sidebar-closed > #workspace { right: 7px !important; } .red-ui-sidebar-closed > #red-ui-workspace { right: 7px !important; }
.red-ui-sidebar-closed > #editor-stack { right: 8px !important; } .red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; }
#red-ui-sidebar .button { #red-ui-sidebar .button {
@include workspace-button; @include workspace-button;

7
packages/node_modules/@node-red/editor-client/src/sass/style.scss vendored
View File

@ -74,7 +74,12 @@ body {
color: #333333; color: #333333;
} }
#main-container { #red-ui-editor {
position: absolute;
top: 100px; left: 100px; bottom: 100px; right: 100px;
}
#red-ui-main-container {
position: absolute; position: absolute;
top:40px; left:0; bottom: 0; right:0; top:40px; left:0; bottom: 0; right:0;
overflow:hidden; overflow:hidden;

24
packages/node_modules/@node-red/editor-client/src/sass/workspace.scss vendored
View File

@ -15,7 +15,7 @@
**/ **/
#chart { #red-ui-workspace-chart {
overflow: auto; overflow: auto;
background: #e3e3e3; background: #e3e3e3;
position: absolute; position: absolute;
@ -25,13 +25,12 @@
right:0px; right:0px;
box-sizing:border-box; box-sizing:border-box;
transition: right 0.2s ease; transition: right 0.2s ease;
} &:focus {
#chart:focus {
outline: none; outline: none;
} }
}
#workspace { #red-ui-workspace {
position: absolute; position: absolute;
margin: 0; margin: 0;
top:0px; top:0px;
@ -41,10 +40,19 @@
overflow: hidden; overflow: hidden;
@include component-border; @include component-border;
transition: left 0.1s ease-in-out; transition: left 0.1s ease-in-out;
} }
.red-ui-palette-closed #workspace { .red-ui-workspace-chart-background {
fill: #fff;
}
.red-ui-workspace-chart-grid line {
fill: none;
shape-rendering: crispEdges;
stroke: #eee;
stroke-width: 1px;
}
.red-ui-palette-closed #red-ui-workspace {
left: 7px; left: 7px;
} }
@ -60,7 +68,7 @@
// margin-right: 2px; // margin-right: 2px;
// } // }
#workspace-tabs:not(.workspace-focussed) { #red-ui-workspace-tabs:not(.red-ui-workspace-focussed) {
opacity:0.8; opacity:0.8;
li.red-ui-tab.active a { li.red-ui-tab.active a {
color:#666; color:#666;

2
packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss vendored
View File

@ -15,7 +15,7 @@
**/ **/
#workspace-toolbar { #red-ui-workspace-toolbar {
display: none; display: none;
color: $workspace-button-color; color: $workspace-button-color;
font-size: 12px; font-size: 12px;

20
packages/node_modules/@node-red/editor-client/templates/index.mst vendored
View File

@ -35,6 +35,7 @@
</head> </head>
<body spellcheck="false"> <body spellcheck="false">
<div id="red-ui-editor">
<div id="red-ui-header"> <div id="red-ui-header">
<span class="red-ui-header-logo">{{#header.url}}<a href="{{.}}">{{/header.url}}{{#header.image}}<img src="{{.}}">{{/header.image}} <span>{{ header.title }}</span>{{#header.url}}</a>{{/header.url}}</span> <span class="red-ui-header-logo">{{#header.url}}<a href="{{.}}">{{/header.url}}{{#header.image}}<img src="{{.}}">{{/header.image}} <span>{{ header.title }}</span>{{#header.url}}</a>{{/header.url}}</span>
<ul class="red-ui-header-toolbar hide"> <ul class="red-ui-header-toolbar hide">
@ -42,25 +43,16 @@
</ul> </ul>
<div id="red-ui-header-shade" class="hide"></div> <div id="red-ui-header-shade" class="hide"></div>
</div> </div>
<div id="main-container" class="sidebar-closed hide"> <div id="red-ui-main-container" class="red-ui-sidebar-closed hide">
<div id="workspace"> <div id="red-ui-workspace"></div>
<ul id="workspace-tabs"></ul> <div id="red-ui-editor-stack"></div>
<div id="chart" tabindex="1"></div>
<div id="workspace-toolbar"></div>
<div id="workspace-footer" class="red-ui-component-footer"></div>
<div id="editor-shade" class="hide"></div>
</div>
<div id="editor-stack"></div>
<div id="red-ui-palette"></div> <div id="red-ui-palette"></div>
<div id="red-ui-sidebar"></div> <div id="red-ui-sidebar"></div>
<div id="red-ui-sidebar-separator"></div> <div id="red-ui-sidebar-separator"></div>
</div> </div>
<div id="full-shade" class="hide"></div> <div id="red-ui-full-shade" class="hide"></div>
</div>
<div id="notifications"></div>
<div id="dropTarget"><div data-i18n="[append]workspace.dropFlowHere"><br/><i class="fa fa-download"></i></div></div>
<script src="vendor/vendor.js"></script> <script src="vendor/vendor.js"></script>
<script src="vendor/jsonata/jsonata.min.js"></script> <script src="vendor/jsonata/jsonata.min.js"></script>