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-z": "core:undo"
},
"workspace": {
"red-ui-workspace": {
"backspace": "core:delete-selection",
"delete": "core:delete-selection",
"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" });
RED.workspaces.init();
RED.statusBar.init();
RED.view.init();
RED.userSettings.init();
RED.user.init();
RED.notifications.init();
RED.library.init();
RED.keyboard.init();
RED.palette.init();
@ -516,7 +519,6 @@ var RED = (function() {
}
RED.subflow.init();
RED.workspaces.init();
RED.clipboard.init();
RED.search.init();
RED.editor.init();
@ -525,13 +527,12 @@ var RED = (function() {
RED.menu.init({id:"btn-sidemenu",options: menuOptions});
RED.deploy.init(RED.settings.theme("deployButton",null));
RED.notifications.init();
RED.actions.add("core:show-about", showAbout);
RED.nodes.init();
RED.comms.connect();
$("#main-container").show();
$("#red-ui-main-container").show();
$(".red-ui-header-toolbar").show();
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
*/
function enforceTextDirectionOnPage() {
$("#workspace").find('span.bidiAware').each(function() {
$("#red-ui-workspace").find('span.bidiAware').each(function() {
$(this).attr("dir", resolveBaseTextDir($(this).html()));
});
$("#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() {
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({
modal: true,
autoOpen: false,
@ -648,7 +648,7 @@ RED.clipboard = (function() {
}
function hideDropTarget() {
$("#dropTarget").hide();
$("#red-ui-drop-target").hide();
RED.keyboard.remove("escape");
}
function copyText(value,element,msg) {
@ -678,7 +678,7 @@ RED.clipboard = (function() {
if (truncated) {
msg += "_truncated";
}
$("#clipboard-hidden").val(value).select();
$("#red-ui-clipboard-hidden").val(value).select();
var result = document.execCommand("copy");
if (result && element) {
var popover = RED.popover.create({
@ -698,7 +698,7 @@ RED.clipboard = (function() {
init: function() {
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-import-dialog",importNodes);
@ -712,15 +712,17 @@ RED.clipboard = (function() {
RED.events.on("type-search:open",function() { disabled = true; });
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 ||
$.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
$("#dropTarget").css({display:'table'});
$("#red-ui-drop-target").css({display:'table'});
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 ||
$.inArray("Files",event.originalEvent.dataTransfer.types) != -1) {
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;
},
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">'+
'<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+
'</div>').prependTo(trayBody);
@ -1463,7 +1463,7 @@ RED.diff = (function() {
// trayWidth = dimensions.width;
},
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 codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel);
@ -1993,7 +1993,7 @@ RED.diff = (function() {
// trayWidth = dimensions.width;
},
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 codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel);
@ -2058,7 +2058,7 @@ RED.diff = (function() {
// trayWidth = dimensions.width;
},
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);
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) {
editTrayWidthCache[type] = dimensions.width;
$(".editor-tray-content").height(dimensions.height - 50);
var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40);
$(".red-ui-tray-content").height(dimensions.height - 50);
var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40);
if (editing_node && editing_node._def.oneditresize) {
try {
editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@ -1482,8 +1482,8 @@ RED.editor = (function() {
}
},
open: function(tray, done) {
var trayFooter = tray.find(".editor-tray-footer");
var trayBody = tray.find('.editor-tray-body');
var trayFooter = tray.find(".red-ui-tray-footer");
var trayBody = tray.find('.red-ui-tray-body');
trayBody.parent().css('overflow','hidden');
var editorTabEl = $('<ul></ul>').appendTo(trayBody);
@ -1525,7 +1525,7 @@ RED.editor = (function() {
id: "editor-tab-properties",
label: 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"
};
buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node);
@ -1536,7 +1536,7 @@ RED.editor = (function() {
id: "editor-tab-description",
label: 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",
onchange: function() {
nodeInfoEditor.focus();
@ -1550,7 +1550,7 @@ RED.editor = (function() {
id: "editor-tab-appearance",
label: 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",
onchange: function() {
refreshLabelForm(this.content,node);
@ -1649,7 +1649,7 @@ RED.editor = (function() {
var trayOptions = {
title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
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) {
var form = $("#node-config-dialog-edit-form");
try {
@ -1660,9 +1660,9 @@ RED.editor = (function() {
}
},
open: function(tray, done) {
var trayHeader = tray.find(".editor-tray-header");
var trayBody = tray.find('.editor-tray-body');
var trayFooter = tray.find(".editor-tray-footer");
var trayHeader = tray.find(".red-ui-tray-header");
var trayBody = tray.find('.red-ui-tray-body');
var trayFooter = tray.find(".red-ui-tray-footer");
if (node_def.hasUsers !== false) {
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",
label: 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"
};
editorTabs.addTab(nodePropertiesTab);
@ -1702,7 +1702,7 @@ RED.editor = (function() {
id: "editor-tab-description",
label: 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",
onchange: function() {
nodeInfoEditor.focus();
@ -2188,8 +2188,8 @@ RED.editor = (function() {
}
],
resize: function(size) {
$(".editor-tray-content").height(size.height - 50);
// var form = $(".editor-tray-content form").height(size.height - 50 - 40);
$(".red-ui-tray-content").height(size.height - 50);
// var form = $(".red-ui-tray-content form").height(size.height - 50 - 40);
var rows = $("#dialog-form>div:not(.node-input-env-container-row)");
var height = size.height;
for (var i=0; i<rows.size(); i++) {
@ -2200,8 +2200,8 @@ RED.editor = (function() {
$("#node-input-env-container").editableList('height',height-80);
},
open: function(tray) {
var trayFooter = tray.find(".editor-tray-footer");
var trayBody = tray.find('.editor-tray-body');
var trayFooter = tray.find(".red-ui-tray-footer");
var trayBody = tray.find('.red-ui-tray-body');
trayBody.parent().css('overflow','hidden');
@ -2231,7 +2231,7 @@ RED.editor = (function() {
id: "editor-tab-properties",
label: 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"
};
buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node);
@ -2241,7 +2241,7 @@ RED.editor = (function() {
id: "editor-tab-description",
label: 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",
onchange: function() {
subflowEditor.focus();
@ -2254,7 +2254,7 @@ RED.editor = (function() {
id: "editor-tab-appearance",
label: 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",
onchange: function() {
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) {
var trayBody = tray.find('.editor-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
bufferStringEditor = RED.editor.createEditor({
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) {
var trayBody = tray.find('.editor-tray-body');
var trayBody = tray.find('.red-ui-tray-body');
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");
Object.keys(jsonata.functions).forEach(function(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();
},
open: function(tray) {
var trayBody = tray.find('.editor-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
expressionEditor = RED.editor.createEditor({
id: 'node-input-js',
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();
},
open: function(tray) {
var trayBody = tray.find('.editor-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
expressionEditor = RED.editor.createEditor({
id: 'node-input-json',
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) {
var trayBody = tray.find('.editor-tray-body');
var trayBody = tray.find('.red-ui-tray-body');
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({
id: 'node-input-markdown',
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();
},
open: function(tray) {
var trayBody = tray.find('.editor-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor');
var trayBody = tray.find('.red-ui-tray-body');
var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
eventLogEditor = RED.editor.createEditor({
id: 'event-log-editor',
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) {
if (userKeymap.hasOwnProperty(action)) {
if (userKeymap.hasOwnProperty(action) && userKeymap[action]) {
var obj = userKeymap[action];
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);
})
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();
if (object.scope === "workspace") {
object.scope = "red-ui-workspace";
}
scopeSelect.val(object.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 {
init: function() {
$(_librarySave).appendTo(document.body);
$(_libraryLookup).appendTo(document.body);
$(_librarySave).appendTo("#red-ui-editor");
$(_libraryLookup).appendTo("#red-ui-editor");
$( "#node-dialog-library-save" ).dialog({
title: RED._("library.saveToLibrary"),

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

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"));
});
var chart = $("#chart");
var chart = $("#red-ui-workspace-chart");
var chartOffset = chart.offset();
var chartSVG = $("#chart>svg").get(0);
var chartSVG = $("#red-ui-workspace-chart>svg").get(0);
var activeSpliceLink;
var mouseX;
var mouseY;
@ -256,7 +256,7 @@ RED.palette = (function() {
appendTo: 'body',
revert: 'invalid',
revertDuration: 300,
containment:'#main-container',
containment:'#red-ui-main-container',
start: function() {
paletteWidth = $("#red-ui-palette").width();
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");
sidebarControls.on("click", function() {
@ -588,11 +588,11 @@ RED.palette = (function() {
}
function togglePalette(state) {
if (!state) {
$("#main-container").addClass("red-ui-palette-closed");
$("#red-ui-main-container").addClass("red-ui-palette-closed");
sidebarControls.hide();
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
} 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");
}
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) {
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 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() {
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({
modal: true,
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() {
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);
searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({
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;
var winWidth = $(window).width();
sidebarSeparator.start = ui.position.left;
sidebarSeparator.chartWidth = $("#workspace").width();
sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2;
sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
sidebarSeparator.dragging = true;
if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true;
var newChartRight = 7;
$("#red-ui-sidebar").addClass("closing");
$("#workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1);
$("#red-ui-workspace").css("right",newChartRight);
$("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(0);
RED.menu.setSelected("menu-item-sidebar",true);
RED.events.emit("sidebar:resize");
@ -136,8 +136,8 @@ RED.sidebar = (function() {
}
var newChartRight = sidebarSeparator.chartRight-d;
$("#workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1);
$("#red-ui-workspace").css("right",newChartRight);
$("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(newSidebarWidth);
sidebar_tabs.resize();
@ -150,8 +150,8 @@ RED.sidebar = (function() {
RED.menu.setSelected("menu-item-sidebar",false);
if ($("#red-ui-sidebar").width() < 180) {
$("#red-ui-sidebar").width(180);
$("#workspace").css("right",187);
$("#editor-stack").css("right",188);
$("#red-ui-workspace").css("right",187);
$("#red-ui-editor-stack").css("right",188);
}
}
$("#red-ui-sidebar-separator").css("left","auto");
@ -183,9 +183,9 @@ RED.sidebar = (function() {
function toggleSidebar(state) {
if (!state) {
$("#main-container").addClass("red-ui-sidebar-closed");
$("#red-ui-main-container").addClass("red-ui-sidebar-closed");
} else {
$("#main-container").removeClass("red-ui-sidebar-closed");
$("#red-ui-main-container").removeClass("red-ui-sidebar-closed");
sidebar_tabs.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 {
init: function() {
leftBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-left">').appendTo("#workspace-footer");
rightBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-right">').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("#red-ui-workspace-footer");
},
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) {
var toolbar = $("#workspace-toolbar");
var toolbar = $("#red-ui-workspace-toolbar");
toolbar.empty();
// Edit properties
@ -429,13 +429,13 @@ RED.subflow = (function() {
refreshToolbar(activeSubflow);
$("#chart").css({"margin-top": "40px"});
$("#workspace-toolbar").show();
$("#red-ui-workspace-chart").css({"margin-top": "40px"});
$("#red-ui-workspace-toolbar").show();
}
function hideWorkspaceToolbar() {
$("#workspace-toolbar").hide().empty();
$("#chart").css({"margin-top": "0"});
$("#red-ui-workspace-toolbar").hide().empty();
$("#red-ui-workspace-chart").css({"margin-top": "0"});
}
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() {
var stack = [];
var editorStack = $("#editor-stack");
var editorStack = $("#red-ui-editor-stack");
var openingTray = false;
function resize() {
}
function showTray(options) {
var el = $('<div class="editor-tray"></div>');
var header = $('<div class="editor-tray-header"></div>').appendTo(el);
var bodyWrapper = $('<div class="editor-tray-body-wrapper"></div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(bodyWrapper);
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-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 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 el = $('<div class="red-ui-tray"></div>');
var header = $('<div class="red-ui-tray-header"></div>').appendTo(el);
var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(el);
var body = $('<div class="red-ui-tray-body"></div>').appendTo(bodyWrapper);
var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="red-ui-tray-resize-handle"></div>').appendTo(el);
// 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="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) {
var titles = stack.map(function(e) { return e.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) {
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;
if (options.buttons) {
for (var i=0;i<options.buttons.length;i++) {
@ -124,8 +124,8 @@ RED.tray = (function() {
body.css({"minWidth":tray.preferredWidth-40});
}
if (options.width) {
if (options.width > $("#editor-stack").position().left-8) {
options.width = $("#editor-stack").position().left-8;
if (options.width > $("#red-ui-editor-stack").position().left-8) {
options.width = $("#red-ui-editor-stack").position().left-8;
}
el.width(options.width);
} else {
@ -133,15 +133,15 @@ RED.tray = (function() {
}
tray.width = el.width();
if (tray.width > $("#editor-stack").position().left-8) {
tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8);
if (tray.width > $("#red-ui-editor-stack").position().left-8) {
tray.width = Math.max(0/*tray.preferredWidth*/,$("#red-ui-editor-stack").position().left-8);
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({
right: -(el.width()+10)+"px",
transition: "right 0.25s ease"
@ -151,7 +151,7 @@ RED.tray = (function() {
setTimeout(function() {
setTimeout(function() {
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) {
options.resize({width:el.width()});
@ -186,12 +186,12 @@ RED.tray = (function() {
var tray = stack[stack.length-1];
var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
tray.body.height(trayHeight);
if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) {
tray.width = $("#editor-stack").position().left-8;
if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {
tray.width = $("#red-ui-editor-stack").position().left-8;
tray.tray.width(tray.width);
// tray.body.parent().width(tray.width);
} 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.body.parent().width(tray.width);
}
@ -209,7 +209,7 @@ RED.tray = (function() {
if (!openingTray) {
var tray = stack[stack.length-1];
if (tray && tray.primaryButton) {
tray.primaryButton.trigger("click");
tray.primaryButton.click();
}
}
});
@ -248,7 +248,7 @@ RED.tray = (function() {
if (stack.length > 0) {
var oldTray = stack[stack.length-1];
if (!oldTray.options.overlay) {
oldTray.tray.appendTo("#editor-stack");
oldTray.tray.appendTo("#red-ui-editor-stack");
setTimeout(function() {
handleWindowResize();
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() {
//shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#main-container");
dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).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("#red-ui-main-container");
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({
delay: 50,
@ -222,7 +222,7 @@ RED.typeSearch = (function() {
cancelCallback = opts.cancel;
RED.events.emit("type-search:open");
//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;
}
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;
},
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 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() {
if (navBorder) {
scaleFactor = RED.view.scale();
chartSize = [ $("#chart").width(), $("#chart").height()];
scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()];
scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
navBorder.attr('x',scrollPos[0]/nav_scale)
.attr('y',scrollPos[1]/nav_scale)
.attr('width',chartSize[0]/nav_scale/scaleFactor)
@ -71,12 +71,12 @@
$("#btn-navigate").addClass("selected");
resizeNavBorder();
refreshNodes();
$("#chart").on("scroll",onScroll);
$("#red-ui-workspace-chart").on("scroll",onScroll);
navContainer.fadeIn(200);
} else {
isShowing = false;
navContainer.fadeOut(100);
$("#chart").off("scroll",onScroll);
$("#red-ui-workspace-chart").off("scroll",onScroll);
$("#btn-navigate").removeClass("selected");
}
}
@ -91,10 +91,10 @@
navContainer = $('<div>').css({
"position":"absolute",
"bottom":$("#workspace-footer").height(),
"bottom":$("#red-ui-workspace-footer").height(),
"right":0,
zIndex: 1
}).appendTo("#workspace").hide();
}).appendTo("#red-ui-workspace").hide();
navBox = d3.select(navContainer[0])
.append("svg:svg")
@ -119,14 +119,14 @@
}).on("mousedown", function() {
// Update these in case they have changed
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];
var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
navBorder.attr('x',newX).attr('y',newY);
isDragging = true;
$("#chart").scrollLeft(newX*nav_scale*scaleFactor);
$("#chart").scrollTop(newY*nav_scale*scaleFactor);
$("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
$("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
}).on("mousemove", function() {
if (!isDragging) { return }
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 newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
navBorder.attr('x',newX).attr('y',newY);
$("#chart").scrollLeft(newX*nav_scale*scaleFactor);
$("#chart").scrollTop(newY*nav_scale*scaleFactor);
$("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor);
$("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor);
}).on("mouseup", function() {
isDragging = false;
})

509
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() {
var space_width = 5000,
space_height = 5000,
@ -79,249 +90,169 @@ RED.view = (function() {
var PORT_TYPE_INPUT = 1;
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")
.append("svg:svg")
.attr("width", space_width)
.attr("height", space_height)
.attr("pointer-events", "all")
.style("cursor","crosshair")
.on("mousedown", function() {
focusView();
})
.on("contextmenu", function(){
d3.event.preventDefault();
});
function init() {
var vis = outer
.append("svg:g")
.on("dblclick.zoom", null)
.append("svg:g")
.attr('class','innerCanvas')
.on("mousemove", canvasMouseMove)
.on("mousedown", canvasMouseDown)
.on("mouseup", canvasMouseUp)
.on("mouseenter", function() {
if (lasso) {
if (d3.event.buttons !== 1) {
lasso.remove();
lasso = null;
chart = $("#red-ui-workspace-chart");
outer = d3.select("#red-ui-workspace-chart")
.append("svg:svg")
.attr("width", space_width)
.attr("height", space_height)
.attr("pointer-events", "all")
.style("cursor","crosshair")
.on("mousedown", function() {
focusView();
})
.on("contextmenu", function(){
d3.event.preventDefault();
});
eventLayer = outer
.append("svg:g")
.on("dblclick.zoom", null)
.append("svg:g")
.attr('class','red-ui-workspace-chart-event-layer')
.on("mousemove", canvasMouseMove)
.on("mousedown", canvasMouseDown)
.on("mouseup", canvasMouseUp)
.on("mouseenter", function() {
if (lasso) {
if (d3.event.buttons !== 1) {
lasso.remove();
lasso = null;
}
} else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) {
resetMouseVars();
}
} else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) {
resetMouseVars();
}
})
.on("touchend", function() {
clearTimeout(touchStartTime);
touchStartTime = null;
if (RED.touch.radialMenu.active()) {
return;
}
if (lasso) {
outer_background.attr("fill","#fff");
}
canvasMouseUp.call(this);
})
.on("touchcancel", canvasMouseUp)
.on("touchstart", function() {
var touch0;
if (d3.event.touches.length>1) {
})
.on("touchend", function() {
clearTimeout(touchStartTime);
touchStartTime = null;
d3.event.preventDefault();
touch0 = d3.event.touches.item(0);
var touch1 = d3.event.touches.item(1);
var a = touch0["pageY"]-touch1["pageY"];
var b = touch0["pageX"]-touch1["pageX"];
var offset = $("#chart").offset();
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
startTouchCenter = [
(touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor,
(touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor
];
moveTouchCenter = [
touch1["pageX"]+(b/2),
touch1["pageY"]+(a/2)
]
startTouchDistance = Math.sqrt((a*a)+(b*b));
} else {
var obj = d3.select(document.body);
touch0 = d3.event.touches.item(0);
var pos = [touch0.pageX,touch0.pageY];
startTouchCenter = [touch0.pageX,touch0.pageY];
startTouchDistance = 0;
var point = d3.touches(this)[0];
touchStartTime = setTimeout(function() {
touchStartTime = null;
showTouchMenu(obj,pos);
//lasso = vis.append("rect")
// .attr("ox",point[0])
// .attr("oy",point[1])
// .attr("rx",2)
// .attr("ry",2)
// .attr("x",point[0])
// .attr("y",point[1])
// .attr("width",0)
// .attr("height",0)
// .attr("class","lasso");
//outer_background.attr("fill","#e3e3f3");
},touchLongPressTimeout);
}
})
.on("touchmove", function(){
if (RED.touch.radialMenu.active()) {
d3.event.preventDefault();
return;
}
canvasMouseUp.call(this);
})
.on("touchcancel", canvasMouseUp)
.on("touchstart", function() {
var touch0;
if (d3.event.touches.length<2) {
if (touchStartTime) {
touch0 = d3.event.touches.item(0);
var dx = (touch0.pageX-startTouchCenter[0]);
var dy = (touch0.pageY-startTouchCenter[1]);
var d = Math.abs(dx*dx+dy*dy);
if (d > 64) {
clearTimeout(touchStartTime);
touchStartTime = null;
}
} else if (lasso) {
d3.event.preventDefault();
}
canvasMouseMove.call(this);
} else {
if (d3.event.touches.length>1) {
clearTimeout(touchStartTime);
touchStartTime = null;
d3.event.preventDefault();
touch0 = d3.event.touches.item(0);
var touch1 = d3.event.touches.item(1);
var a = touch0["pageY"]-touch1["pageY"];
var b = touch0["pageX"]-touch1["pageX"];
var offset = $("#chart").offset();
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
var moveTouchDistance = Math.sqrt((a*a)+(b*b));
var touchCenter = [
var offset = chart.offset();
var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
startTouchCenter = [
(touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor,
(touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor
];
moveTouchCenter = [
touch1["pageX"]+(b/2),
touch1["pageY"]+(a/2)
];
if (!isNaN(moveTouchDistance)) {
oldScaleFactor = scaleFactor;
scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
var deltaTouchCenter = [ // Try to pan whilst zooming - not 100%
startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
]
startTouchDistance = Math.sqrt((a*a)+(b*b));
} else {
var obj = d3.select(document.body);
touch0 = d3.event.touches.item(0);
var pos = [touch0.pageX,touch0.pageY];
startTouchCenter = [touch0.pageX,touch0.pageY];
startTouchDistance = 0;
var point = d3.touches(this)[0];
touchStartTime = setTimeout(function() {
touchStartTime = null;
showTouchMenu(obj,pos);
//lasso = eventLayer.append("rect")
// .attr("ox",point[0])
// .attr("oy",point[1])
// .attr("rx",2)
// .attr("ry",2)
// .attr("x",point[0])
// .attr("y",point[1])
// .attr("width",0)
// .attr("height",0)
// .attr("class","lasso");
},touchLongPressTimeout);
}
})
.on("touchmove", function(){
if (RED.touch.radialMenu.active()) {
d3.event.preventDefault();
return;
}
var touch0;
if (d3.event.touches.length<2) {
if (touchStartTime) {
touch0 = d3.event.touches.item(0);
var dx = (touch0.pageX-startTouchCenter[0]);
var dy = (touch0.pageY-startTouchCenter[1]);
var d = Math.abs(dx*dx+dy*dy);
if (d > 64) {
clearTimeout(touchStartTime);
touchStartTime = null;
}
} else if (lasso) {
d3.event.preventDefault();
}
canvasMouseMove.call(this);
} else {
touch0 = d3.event.touches.item(0);
var touch1 = d3.event.touches.item(1);
var a = touch0["pageY"]-touch1["pageY"];
var b = touch0["pageX"]-touch1["pageX"];
var offset = chart.offset();
var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
var moveTouchDistance = Math.sqrt((a*a)+(b*b));
var touchCenter = [
touch1["pageX"]+(b/2),
touch1["pageY"]+(a/2)
];
startTouchDistance = moveTouchDistance;
moveTouchCenter = touchCenter;
if (!isNaN(moveTouchDistance)) {
oldScaleFactor = scaleFactor;
scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
$("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
$("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);
redraw();
var deltaTouchCenter = [ // Try to pan whilst zooming - not 100%
startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
];
startTouchDistance = moveTouchDistance;
moveTouchCenter = touchCenter;
chart.scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
chart.scrollTop(scrollPos[1]+deltaTouchCenter[1]);
redraw();
}
}
}
});
});
var outer_background = vis.append("svg:rect")
.attr("width", space_width)
.attr("height", space_height)
.attr("fill","#fff");
// Workspace Background
eventLayer.append("svg:rect")
.attr("class","red-ui-workspace-chart-background")
.attr("width", space_width)
.attr("height", space_height);
var grid = vis.append("g");
updateGrid();
gridLayer = eventLayer.append("g").attr("class","red-ui-workspace-chart-grid");
updateGrid();
function updateGrid() {
var gridTicks = [];
for (var i=0;i<space_width;i+=+gridSize) {
gridTicks.push(i);
}
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();
linkLayer = eventLayer.append("g");
dragGroupLayer = eventLayer.append("g");
nodeLayer = eventLayer.append("g");
drag_lines = [];
RED.events.on("workspace:change",function(event) {
if (event.old !== 0) {
@ -362,8 +293,6 @@ RED.view = (function() {
redraw();
});
RED.view.navigator.init();
RED.statusBar.add({
id: "view-zoom-controls",
align: "right",
@ -374,14 +303,13 @@ RED.view = (function() {
'</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-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-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');
$("#chart").on("DOMMouseScroll mousewheel", function (evt) {
chart.on("DOMMouseScroll mousewheel", function (evt) {
if ( evt.altKey ) {
evt.preventDefault();
evt.stopPropagation();
@ -392,7 +320,7 @@ RED.view = (function() {
});
// Handle nodes dragged from the palette
$("#chart").droppable({
chart.droppable({
accept:".red-ui-palette-node",
drop: function( event, ui ) {
d3.event = event;
@ -461,11 +389,11 @@ RED.view = (function() {
}
}
});
$("#chart").on("focus", function() {
$("#workspace-tabs").addClass("workspace-focussed");
chart.on("focus", function() {
$("#red-ui-workspace-tabs").addClass("red-ui-workspace-focussed");
});
$("#chart").on("blur", function() {
$("#workspace-tabs").removeClass("workspace-focussed");
chart.on("blur", function() {
$("#red-ui-workspace-tabs").removeClass("red-ui-workspace-focussed");
});
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();
}
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) {
var dy = destY-origY;
var dx = destX-origX;
@ -580,7 +587,6 @@ RED.view = (function() {
}
}
function addNode(type,x,y) {
var m = /^subflow:(.+)$/.exec(type);
@ -682,14 +688,14 @@ RED.view = (function() {
var oy = point[1];
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[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();
var mainPos = $("#main-container").position();
var mainPos = $("#red-ui-main-container").position();
if (mouse_mode !== RED.state.QUICK_JOINING) {
mouse_mode = RED.state.QUICK_JOINING;
@ -700,7 +706,7 @@ RED.view = (function() {
if (ghostNode) {
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")
.attr("class","node_placeholder")
.attr("rx", 5)
@ -738,7 +744,7 @@ RED.view = (function() {
return;
}
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 sourcePort = quickAddLink.port;
@ -947,7 +953,7 @@ RED.view = (function() {
if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
if (!touchStartTime) {
point = d3.mouse(this);
lasso = vis.append("rect")
lasso = eventLayer.append("rect")
.attr("ox",point[0])
.attr("oy",point[1])
.attr("rx",1)
@ -1746,7 +1752,6 @@ RED.view = (function() {
}
}
function calculateTextWidth(str, className, offset) {
return calculateTextDimensions(str,className,offset,0)[0];
}
@ -1792,7 +1797,7 @@ RED.view = (function() {
function portMouseDown(d,portType,portIndex) {
//console.log(d,portType,portIndex);
// disable zoom
//vis.call(d3.behavior.zoom().on("zoom"), null);
//eventLayer.call(d3.behavior.zoom().on("zoom"), null);
if (d3.event.button === 1) {
return;
}
@ -2001,7 +2006,7 @@ RED.view = (function() {
function getElementPosition(node) {
var d3Node = d3.select(node);
if (d3Node.attr('class') === 'innerCanvas') {
if (d3Node.attr('class') === 'red-ui-workspace-chart-event-layer') {
return [0,0];
}
var result = [];
@ -2041,7 +2046,7 @@ RED.view = (function() {
return result;
}
function showTooltip(x,y,content,direction) {
var tooltip = vis.append("g")
var tooltip = eventLayer.append("g")
.attr("transform","translate("+x+","+y+")")
.attr("class","port_tooltip");
@ -2374,7 +2379,7 @@ RED.view = (function() {
}
function redraw() {
vis.attr("transform","scale("+scaleFactor+")");
eventLayer.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
// Don't bother redrawing nodes if we're drawing links
@ -3295,12 +3300,12 @@ RED.view = (function() {
// setting the focus
var scrollX = window.parent.window.scrollX;
var scrollY = window.parent.window.scrollY;
$("#chart").trigger("focus");
chart.trigger("focus");
window.parent.window.scrollTo(scrollX,scrollY);
} catch(err) {
// In case we're iframed into a page of a different origin, just focus
// the view following the inevitable DOMException
$("#chart").trigger("focus");
chart.trigger("focus");
}
}
@ -3457,9 +3462,9 @@ RED.view = (function() {
function toggleShowGrid(state) {
if (state) {
grid.style("visibility","visible");
gridLayer.style("visibility","visible");
} else {
grid.style("visibility","hidden");
gridLayer.style("visibility","hidden");
}
}
function toggleSnapGrid(state) {
@ -3542,13 +3547,13 @@ RED.view = (function() {
node.dirty = true;
RED.workspaces.show(node.z);
var screenSize = [$("#chart").width(),$("#chart").height()];
var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
var screenSize = [chart.width(),chart.height()];
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]) {
var deltaX = '-='+((scrollPos[0] - node.x) + screenSize[0]/2);
var deltaY = '-='+((scrollPos[1] - node.y) + screenSize[1]/2);
$("#chart").animate({
chart.animate({
scrollLeft: deltaX,
scrollTop: deltaY
},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();
do {
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})};
RED.nodes.addWorkspace(ws,targetIndex);
@ -108,7 +108,7 @@ RED.workspaces = (function() {
workspace.info = info;
}
$("#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) {
var historyEvent = {
@ -150,7 +150,7 @@ RED.workspaces = (function() {
tabflowEditor.resize();
},
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);
$('<div class="form-row">'+
'<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;
function createWorkspaceTabs() {
workspace_tabs = RED.tabs.create({
id: "workspace-tabs",
id: "red-ui-workspace-tabs",
onchange: function(tab) {
var event = {
old: activeWorkspace
@ -250,7 +250,7 @@ RED.workspaces = (function() {
event.workspace = activeWorkspace;
RED.events.emit("workspace:change",event);
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.view.focus();
},
@ -294,14 +294,14 @@ RED.workspaces = (function() {
onselect: function(selectedTabs) {
RED.view.select(false)
if (selectedTabs.length === 0) {
$("#chart svg").css({"pointer-events":"auto",filter:"none"})
$("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
$("#red-ui-workspace-chart svg").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-sidebar-shade").hide();
} else {
RED.view.select(false)
$("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
$("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
$("#red-ui-workspace-chart svg").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-sidebar-shade").show();
}
@ -316,17 +316,24 @@ RED.workspaces = (function() {
workspaceTabCount = 0;
}
function showWorkspace() {
$("#workspace .red-ui-tabs").show()
$("#chart").show()
$("#workspace-footer").children().show()
$("#red-ui-workspace .red-ui-tabs").show()
$("#red-ui-workspace-chart").show()
$("#red-ui-workspace-footer").children().show()
}
function hideWorkspace() {
$("#workspace .red-ui-tabs").hide()
$("#chart").hide()
$("#workspace-footer").children().hide()
$("#red-ui-workspace .red-ui-tabs").hide()
$("#red-ui-workspace-chart").hide()
$("#red-ui-workspace-footer").children().hide()
}
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();
RED.events.on("sidebar:resize",workspace_tabs.resize);

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

@ -14,24 +14,26 @@
* limitations under the License.
**/
#dropTarget {
#red-ui-drop-target {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background: rgba(0,0,0,0.1);
background: rgba(0,0,0,0.3);
display:table;
width: 100%;
height: 100%;
display: none;
z-index:100;
}
#dropTarget div {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 40px;
color: #fff;
}
#dropTarget div i {
font-size: 80px;
div {
pointer-events: none;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 40px;
color: #fff;
i {
pointer-events: none;
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;
margin: 0;
top: 0;
@ -24,7 +24,7 @@
width: 0;
z-index: 5;
}
.editor-tray {
.red-ui-tray {
position:absolute;
margin: 0;
top: 0;
@ -37,15 +37,15 @@
border-bottom: 1px solid $primary-border-color;
box-sizing: content-box;
}
.editor-tray.open {
.red-ui-tray.open {
right: 0;
}
.editor-tray-body-wrapper {
.red-ui-tray-body-wrapper {
width: 100%;
box-sizing: border-box;
overflow: auto;
}
.editor-tray-body {
.red-ui-tray-body {
position: relative;
box-sizing: border-box;
padding: 0.1px; // prevent margin collapsing
@ -54,7 +54,7 @@
height: calc(100% - 40px);
}
}
.editor-tray-content {
.red-ui-tray-content {
overflow: auto;
position: relative;
.red-ui-palette-icon-fa {
@ -62,7 +62,7 @@
left: 4px;
}
}
.editor-tray-header {
.red-ui-tray-header {
@include disable-selection;
position: relative;
box-sizing: border-box;
@ -76,7 +76,7 @@
}
}
.editor-tray-footer {
.red-ui-tray-footer {
@include component-footer;
height: 35px;
@ -88,7 +88,7 @@
}
.editor-tray-toolbar {
.red-ui-tray-toolbar {
text-align: right;
padding: 6px;
@ -100,11 +100,11 @@
}
}
.editor-tray-titlebar {
.red-ui-tray-titlebar {
border-bottom: 1px solid $secondary-border-color;
padding: 8px;
}
.editor-tray-breadcrumbs {
.red-ui-tray-breadcrumbs {
list-style-type: none;
margin: 0;
padding:0;
@ -127,7 +127,7 @@
}
}
}
.editor-tray-resize-handle {
.red-ui-tray-resize-handle {
position: absolute;
top: 0px;
bottom: 0px;
@ -138,12 +138,12 @@
border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px rgba(0,0,0,0.1);
&.editor-tray-resize-maximised {
&.red-ui-tray-resize-maximised {
background: $background-color;
cursor: default;
}
}
.editor-tray-resize-button {
.red-ui-tray-resize-button {
@include workspace-button;
display: block;
height: 37px;
@ -163,7 +163,7 @@
top: -1px;
bottom: -1px;
}
#full-shade {
#red-ui-full-shade {
@include shade;
z-index: 15;
}
@ -355,7 +355,7 @@
background: #fff;
}
#clipboard-hidden {
#red-ui-clipboard-hidden {
position: absolute;
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.
**/
#notifications {
#red-ui-notifications {
z-index: 100;
width: 500px;
margin-left: -250px;
@ -22,7 +22,7 @@
position: absolute;
top: 1px;
}
.notification {
.red-ui-notification {
box-sizing: border-box;
position: relative;
padding: 14px 18px;
@ -34,33 +34,33 @@
border-left-width: 16px;
overflow: hidden;
}
.notification p:first-child {
.red-ui-notification p:first-child {
font-size: 1.1em;
font-weight: 400;
}
.notification a {
.red-ui-notification a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.notification-success {
.red-ui-notification-success {
border-color: #4B8400;
}
.notification-warning {
.red-ui-notification-warning {
border-color: #D74108;
}
.notification-error {
.red-ui-notification-error {
border-color: #AD1625;
}
.notification-shake-horizontal {
-webkit-animation: notification-shake-horizontal 0.3s steps(2, end) both;
animation: notification-shake-horizontal 0.3s steps(2, end) both;
.red-ui-notification-shake-horizontal {
-webkit-animation: red-ui-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%,
100% {
-webkit-transform: translateX(0);
@ -88,7 +88,7 @@
// transform: translateX(-1px);
// }
}
@keyframes notification-shake-horizontal {
@keyframes red-ui-notification-shake-horizontal {
0%,
100% {
-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-separator { right: 0px !important; }
.red-ui-sidebar-closed > #workspace { right: 7px !important; }
.red-ui-sidebar-closed > #editor-stack { right: 8px !important; }
.red-ui-sidebar-closed > #red-ui-workspace { right: 7px !important; }
.red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; }
#red-ui-sidebar .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;
}
#main-container {
#red-ui-editor {
position: absolute;
top: 100px; left: 100px; bottom: 100px; right: 100px;
}
#red-ui-main-container {
position: absolute;
top:40px; left:0; bottom: 0; right:0;
overflow:hidden;

26
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;
background: #e3e3e3;
position: absolute;
@ -25,13 +25,12 @@
right:0px;
box-sizing:border-box;
transition: right 0.2s ease;
&:focus {
outline: none;
}
}
#chart:focus {
outline: none;
}
#workspace {
#red-ui-workspace {
position: absolute;
margin: 0;
top:0px;
@ -41,10 +40,19 @@
overflow: hidden;
@include component-border;
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;
}
@ -60,7 +68,7 @@
// margin-right: 2px;
// }
#workspace-tabs:not(.workspace-focussed) {
#red-ui-workspace-tabs:not(.red-ui-workspace-focussed) {
opacity:0.8;
li.red-ui-tab.active a {
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;
color: $workspace-button-color;
font-size: 12px;

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

@ -35,32 +35,24 @@
</head>
<body spellcheck="false">
<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>
<ul class="red-ui-header-toolbar hide">
<li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
</ul>
<div id="red-ui-header-shade" class="hide"></div>
</div>
<div id="main-container" class="sidebar-closed hide">
<div id="workspace">
<ul id="workspace-tabs"></ul>
<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 id="red-ui-editor">
<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>
<ul class="red-ui-header-toolbar hide">
<li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
</ul>
<div id="red-ui-header-shade" class="hide"></div>
</div>
<div id="editor-stack"></div>
<div id="red-ui-palette"></div>
<div id="red-ui-sidebar"></div>
<div id="red-ui-sidebar-separator"></div>
<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">
<div id="red-ui-workspace"></div>
<div id="red-ui-editor-stack"></div>
<div id="red-ui-palette"></div>
<div id="red-ui-sidebar"></div>
<div id="red-ui-sidebar-separator"></div>
</div>
<div id="red-ui-full-shade" class="hide"></div>
</div>
<div id="full-shade" class="hide"></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/jsonata/jsonata.min.js"></script>