mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Namespace workspace/view css
This commit is contained in:
parent
126a42056d
commit
8dc1ad8168
@ -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",
|
||||||
|
@ -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();
|
||||||
|
@ -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() {
|
||||||
|
@ -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();
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
|
@ -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);
|
||||||
|
@ -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',
|
||||||
|
@ -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));
|
||||||
|
@ -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',
|
||||||
|
@ -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: "",
|
||||||
|
@ -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,
|
||||||
|
@ -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"),
|
||||||
|
@ -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);
|
||||||
|
@ -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"),
|
||||||
|
@ -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,14 +264,14 @@ 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();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
notify: notify
|
notify: notify
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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");
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
@ -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) {
|
||||||
|
@ -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});
|
||||||
|
@ -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();
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
@ -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;
|
||||||
})
|
})
|
||||||
|
@ -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,249 +90,169 @@ 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() {
|
||||||
.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();
|
|
||||||
});
|
|
||||||
|
|
||||||
var vis = outer
|
chart = $("#red-ui-workspace-chart");
|
||||||
.append("svg:g")
|
|
||||||
.on("dblclick.zoom", null)
|
outer = d3.select("#red-ui-workspace-chart")
|
||||||
.append("svg:g")
|
.append("svg:svg")
|
||||||
.attr('class','innerCanvas')
|
.attr("width", space_width)
|
||||||
.on("mousemove", canvasMouseMove)
|
.attr("height", space_height)
|
||||||
.on("mousedown", canvasMouseDown)
|
.attr("pointer-events", "all")
|
||||||
.on("mouseup", canvasMouseUp)
|
.style("cursor","crosshair")
|
||||||
.on("mouseenter", function() {
|
.on("mousedown", function() {
|
||||||
if (lasso) {
|
focusView();
|
||||||
if (d3.event.buttons !== 1) {
|
})
|
||||||
lasso.remove();
|
.on("contextmenu", function(){
|
||||||
lasso = null;
|
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() {
|
||||||
}
|
|
||||||
})
|
|
||||||
.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) {
|
|
||||||
clearTimeout(touchStartTime);
|
clearTimeout(touchStartTime);
|
||||||
touchStartTime = null;
|
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()) {
|
if (RED.touch.radialMenu.active()) {
|
||||||
d3.event.preventDefault();
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
canvasMouseUp.call(this);
|
||||||
|
})
|
||||||
|
.on("touchcancel", canvasMouseUp)
|
||||||
|
.on("touchstart", function() {
|
||||||
var touch0;
|
var touch0;
|
||||||
if (d3.event.touches.length<2) {
|
if (d3.event.touches.length>1) {
|
||||||
if (touchStartTime) {
|
clearTimeout(touchStartTime);
|
||||||
touch0 = d3.event.touches.item(0);
|
touchStartTime = null;
|
||||||
var dx = (touch0.pageX-startTouchCenter[0]);
|
d3.event.preventDefault();
|
||||||
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);
|
touch0 = d3.event.touches.item(0);
|
||||||
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 scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
|
var offset = chart.offset();
|
||||||
var moveTouchDistance = Math.sqrt((a*a)+(b*b));
|
var scrollPos = [chart.scrollLeft(),chart.scrollTop()];
|
||||||
var touchCenter = [
|
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["pageX"]+(b/2),
|
||||||
touch1["pageY"]+(a/2)
|
touch1["pageY"]+(a/2)
|
||||||
];
|
]
|
||||||
|
startTouchDistance = Math.sqrt((a*a)+(b*b));
|
||||||
if (!isNaN(moveTouchDistance)) {
|
} else {
|
||||||
oldScaleFactor = scaleFactor;
|
var obj = d3.select(document.body);
|
||||||
scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
|
touch0 = d3.event.touches.item(0);
|
||||||
|
var pos = [touch0.pageX,touch0.pageY];
|
||||||
var deltaTouchCenter = [ // Try to pan whilst zooming - not 100%
|
startTouchCenter = [touch0.pageX,touch0.pageY];
|
||||||
startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
|
startTouchDistance = 0;
|
||||||
startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1])
|
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;
|
if (!isNaN(moveTouchDistance)) {
|
||||||
moveTouchCenter = touchCenter;
|
oldScaleFactor = scaleFactor;
|
||||||
|
scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000)));
|
||||||
|
|
||||||
$("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]);
|
var deltaTouchCenter = [ // Try to pan whilst zooming - not 100%
|
||||||
$("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]);
|
startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]),
|
||||||
redraw();
|
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")
|
// Workspace Background
|
||||||
.attr("width", space_width)
|
eventLayer.append("svg:rect")
|
||||||
.attr("height", space_height)
|
.attr("class","red-ui-workspace-chart-background")
|
||||||
.attr("fill","#fff");
|
.attr("width", space_width)
|
||||||
|
.attr("height", space_height);
|
||||||
|
|
||||||
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);
|
||||||
|
@ -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,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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#chart:focus {
|
#red-ui-workspace {
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#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;
|
||||||
|
@ -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;
|
||||||
|
@ -35,32 +35,24 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body spellcheck="false">
|
<body spellcheck="false">
|
||||||
<div id="red-ui-header">
|
<div id="red-ui-editor">
|
||||||
<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>
|
<div id="red-ui-header">
|
||||||
<ul class="red-ui-header-toolbar hide">
|
<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>
|
||||||
<li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
|
<ul class="red-ui-header-toolbar hide">
|
||||||
</ul>
|
<li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
|
||||||
<div id="red-ui-header-shade" class="hide"></div>
|
</ul>
|
||||||
</div>
|
<div id="red-ui-header-shade" class="hide"></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>
|
</div>
|
||||||
<div id="editor-stack"></div>
|
<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">
|
||||||
<div id="red-ui-palette"></div>
|
<div id="red-ui-workspace"></div>
|
||||||
<div id="red-ui-sidebar"></div>
|
<div id="red-ui-editor-stack"></div>
|
||||||
|
<div id="red-ui-palette"></div>
|
||||||
<div id="red-ui-sidebar-separator"></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>
|
||||||
<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/vendor.js"></script>
|
||||||
<script src="vendor/jsonata/jsonata.min.js"></script>
|
<script src="vendor/jsonata/jsonata.min.js"></script>
|
||||||
|
Loading…
Reference in New Issue
Block a user