From 8dc1ad81689c6576eaf3dcc64fd183f2dc72b42d Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 1 May 2019 22:41:20 +0100 Subject: [PATCH] Namespace workspace/view css --- .../editor-client/src/js/keymap.json | 2 +- .../@node-red/editor-client/src/js/red.js | 7 +- .../editor-client/src/js/text/bidi.js | 2 +- .../editor-client/src/js/ui/clipboard.js | 16 +- .../@node-red/editor-client/src/js/ui/diff.js | 8 +- .../editor-client/src/js/ui/editor.js | 40 +- .../editor-client/src/js/ui/editors/buffer.js | 4 +- .../src/js/ui/editors/expression.js | 4 +- .../editor-client/src/js/ui/editors/js.js | 4 +- .../editor-client/src/js/ui/editors/json.js | 4 +- .../src/js/ui/editors/markdown.js | 4 +- .../editor-client/src/js/ui/event-log.js | 4 +- .../editor-client/src/js/ui/keyboard.js | 13 +- .../editor-client/src/js/ui/library.js | 4 +- .../editor-client/src/js/ui/notifications.js | 35 +- .../editor-client/src/js/ui/palette.js | 12 +- .../src/js/ui/projects/projectSettings.js | 2 +- .../src/js/ui/projects/projects.js | 2 +- .../editor-client/src/js/ui/search.js | 2 +- .../editor-client/src/js/ui/sidebar.js | 20 +- .../editor-client/src/js/ui/statusBar.js | 4 +- .../editor-client/src/js/ui/subflow.js | 10 +- .../@node-red/editor-client/src/js/ui/tray.js | 50 +- .../editor-client/src/js/ui/typeSearch.js | 6 +- .../editor-client/src/js/ui/userSettings.js | 2 +- .../editor-client/src/js/ui/view-navigator.js | 22 +- .../@node-red/editor-client/src/js/ui/view.js | 509 +++++++++--------- .../editor-client/src/js/ui/workspaces.js | 37 +- .../editor-client/src/sass/dragdrop.scss | 26 +- .../editor-client/src/sass/editor.scss | 32 +- .../editor-client/src/sass/notifications.scss | 24 +- .../editor-client/src/sass/sidebar.scss | 4 +- .../editor-client/src/sass/style.scss | 7 +- .../editor-client/src/sass/workspace.scss | 26 +- .../src/sass/workspaceToolbar.scss | 2 +- .../editor-client/templates/index.mst | 38 +- 36 files changed, 509 insertions(+), 479 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index 4de4726cd..3f232647d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -29,7 +29,7 @@ "ctrl-a": "core:select-all-config-nodes", "ctrl-z": "core:undo" }, - "workspace": { + "red-ui-workspace": { "backspace": "core:delete-selection", "delete": "core:delete-selection", "enter": "core:edit-selected-node", diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 1014dcbe8..8fd56e601 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -494,9 +494,12 @@ var RED = (function() { menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" }); + RED.workspaces.init(); + RED.statusBar.init(); RED.view.init(); RED.userSettings.init(); RED.user.init(); + RED.notifications.init(); RED.library.init(); RED.keyboard.init(); RED.palette.init(); @@ -516,7 +519,6 @@ var RED = (function() { } RED.subflow.init(); - RED.workspaces.init(); RED.clipboard.init(); RED.search.init(); RED.editor.init(); @@ -525,13 +527,12 @@ var RED = (function() { RED.menu.init({id:"btn-sidemenu",options: menuOptions}); RED.deploy.init(RED.settings.theme("deployButton",null)); - RED.notifications.init(); RED.actions.add("core:show-about", showAbout); RED.nodes.init(); RED.comms.connect(); - $("#main-container").show(); + $("#red-ui-main-container").show(); $(".red-ui-header-toolbar").show(); loadNodeList(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js b/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js index 6bc6d60ef..6a1f883b2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js +++ b/packages/node_modules/@node-red/editor-client/src/js/text/bidi.js @@ -101,7 +101,7 @@ RED.text.bidi = (function() { * workspace or sidebar div */ function enforceTextDirectionOnPage() { - $("#workspace").find('span.bidiAware').each(function() { + $("#red-ui-workspace").find('span.bidiAware').each(function() { $(this).attr("dir", resolveBaseTextDir($(this).html())); }); $("#red-ui-sidebar").find('span.bidiAware').each(function() { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js index 07eb2c414..c7b0d1c06 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js @@ -29,7 +29,7 @@ RED.clipboard = (function() { function setupDialogs() { dialog = $('
') - .appendTo("body") + .appendTo("#red-ui-editor") .dialog({ modal: true, autoOpen: false, @@ -648,7 +648,7 @@ RED.clipboard = (function() { } function hideDropTarget() { - $("#dropTarget").hide(); + $("#red-ui-drop-target").hide(); RED.keyboard.remove("escape"); } function copyText(value,element,msg) { @@ -678,7 +678,7 @@ RED.clipboard = (function() { if (truncated) { msg += "_truncated"; } - $("#clipboard-hidden").val(value).select(); + $("#red-ui-clipboard-hidden").val(value).select(); var result = document.execCommand("copy"); if (result && element) { var popover = RED.popover.create({ @@ -698,7 +698,7 @@ RED.clipboard = (function() { init: function() { setupDialogs(); - $('').appendTo("body"); + $('').appendTo("#red-ui-editor"); RED.actions.add("core:show-export-dialog",exportNodes); RED.actions.add("core:show-import-dialog",importNodes); @@ -712,15 +712,17 @@ RED.clipboard = (function() { RED.events.on("type-search:open",function() { disabled = true; }); RED.events.on("type-search:close",function() { disabled = false; }); - $('#chart').on("dragenter",function(event) { + $('

').appendTo('#red-ui-editor'); + + $('#red-ui-workspace-chart').on("dragenter",function(event) { if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 || $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) { - $("#dropTarget").css({display:'table'}); + $("#red-ui-drop-target").css({display:'table'}); RED.keyboard.add("*", "escape" ,hideDropTarget); } }); - $('#dropTarget').on("dragover",function(event) { + $('#red-ui-drop-target').on("dragover",function(event) { if ($.inArray("text/plain",event.originalEvent.dataTransfer.types) != -1 || $.inArray("Files",event.originalEvent.dataTransfer.types) != -1) { event.preventDefault(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js index 32883d970..dbb2199c6 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js @@ -1257,7 +1257,7 @@ RED.diff = (function() { // trayWidth = dimensions.width; }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var toolbar = $('
'+ ' '+ '
').prependTo(trayBody); @@ -1463,7 +1463,7 @@ RED.diff = (function() { // trayWidth = dimensions.width; }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var diffPanel = $('
').appendTo(trayBody); var codeTable = $("",{class:"node-text-diff-content"}).appendTo(diffPanel); @@ -1993,7 +1993,7 @@ RED.diff = (function() { // trayWidth = dimensions.width; }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var diffPanel = $('
').appendTo(trayBody); var codeTable = $("
",{class:"node-text-diff-content"}).appendTo(diffPanel); @@ -2058,7 +2058,7 @@ RED.diff = (function() { // trayWidth = dimensions.width; }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var diffPanel = $('
').appendTo(trayBody); createUnifiedDiffTable(files,options).appendTo(diffPanel); }, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index aa4dd1f16..d6fc3411c 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -1471,8 +1471,8 @@ RED.editor = (function() { ], resize: function(dimensions) { editTrayWidthCache[type] = dimensions.width; - $(".editor-tray-content").height(dimensions.height - 50); - var form = $(".editor-tray-content form").height(dimensions.height - 50 - 40); + $(".red-ui-tray-content").height(dimensions.height - 50); + var form = $(".red-ui-tray-content form").height(dimensions.height - 50 - 40); if (editing_node && editing_node._def.oneditresize) { try { editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()}); @@ -1482,8 +1482,8 @@ RED.editor = (function() { } }, open: function(tray, done) { - var trayFooter = tray.find(".editor-tray-footer"); - var trayBody = tray.find('.editor-tray-body'); + var trayFooter = tray.find(".red-ui-tray-footer"); + var trayBody = tray.find('.red-ui-tray-body'); trayBody.parent().css('overflow','hidden'); var editorTabEl = $('').appendTo(trayBody); @@ -1525,7 +1525,7 @@ RED.editor = (function() { id: "editor-tab-properties", label: RED._("editor-tab.properties"), name: RED._("editor-tab.properties"), - content: $('
', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-cog" }; buildEditForm(nodePropertiesTab.content,"dialog-form",type,ns,node); @@ -1536,7 +1536,7 @@ RED.editor = (function() { id: "editor-tab-description", label: RED._("editor-tab.description"), name: RED._("editor-tab.description"), - content: $('
', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-file-text-o", onchange: function() { nodeInfoEditor.focus(); @@ -1550,7 +1550,7 @@ RED.editor = (function() { id: "editor-tab-appearance", label: RED._("editor-tab.appearance"), name: RED._("editor-tab.appearance"), - content: $('
', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-object-group", onchange: function() { refreshLabelForm(this.content,node); @@ -1649,7 +1649,7 @@ RED.editor = (function() { var trayOptions = { title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})), resize: function(dimensions) { - $(".editor-tray-content").height(dimensions.height - 50); + $(".red-ui-tray-content").height(dimensions.height - 50); if (editing_config_node && editing_config_node._def.oneditresize) { var form = $("#node-config-dialog-edit-form"); try { @@ -1660,9 +1660,9 @@ RED.editor = (function() { } }, open: function(tray, done) { - var trayHeader = tray.find(".editor-tray-header"); - var trayBody = tray.find('.editor-tray-body'); - var trayFooter = tray.find(".editor-tray-footer"); + var trayHeader = tray.find(".red-ui-tray-header"); + var trayBody = tray.find('.red-ui-tray-body'); + var trayFooter = tray.find(".red-ui-tray-footer"); if (node_def.hasUsers !== false) { trayFooter.prepend('
'); @@ -1691,7 +1691,7 @@ RED.editor = (function() { id: "editor-tab-cproperties", label: RED._("editor-tab.properties"), name: RED._("editor-tab.properties"), - content: $('
', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-cog" }; editorTabs.addTab(nodePropertiesTab); @@ -1702,7 +1702,7 @@ RED.editor = (function() { id: "editor-tab-description", label: RED._("editor-tab.description"), name: RED._("editor-tab.description"), - content: $('
', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-file-text-o", onchange: function() { nodeInfoEditor.focus(); @@ -2188,8 +2188,8 @@ RED.editor = (function() { } ], resize: function(size) { - $(".editor-tray-content").height(size.height - 50); - // var form = $(".editor-tray-content form").height(size.height - 50 - 40); + $(".red-ui-tray-content").height(size.height - 50); + // var form = $(".red-ui-tray-content form").height(size.height - 50 - 40); var rows = $("#dialog-form>div:not(.node-input-env-container-row)"); var height = size.height; for (var i=0; i', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-cog" }; buildEditForm(nodePropertiesTab.content,"dialog-form","subflow-template", undefined, editing_node); @@ -2241,7 +2241,7 @@ RED.editor = (function() { id: "editor-tab-description", label: RED._("editor-tab.description"), name: RED._("editor-tab.description"), - content: $('
', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-file-text-o", onchange: function() { subflowEditor.focus(); @@ -2254,7 +2254,7 @@ RED.editor = (function() { id: "editor-tab-appearance", label: RED._("editor-tab.appearance"), name: RED._("editor-tab.appearance"), - content: $('
', {class:"editor-tray-content"}).appendTo(editorContent).hide(), + content: $('
', {class:"red-ui-tray-content"}).appendTo(editorContent).hide(), iconClass: "fa fa-object-group", onchange: function() { refreshLabelForm(this.content,editing_node); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js index ed8e19240..d1c14d008 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js @@ -83,8 +83,8 @@ } }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); - var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); + var trayBody = tray.find('.red-ui-tray-body'); + var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor'); bufferStringEditor = RED.editor.createEditor({ id: 'node-input-buffer-str', diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js index e4d154fbb..1803e4d22 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js @@ -88,9 +88,9 @@ }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); trayBody.addClass("node-input-expression-editor") - var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form','_expression','editor'); + var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form','_expression','editor'); var funcSelect = $("#node-input-expression-func"); Object.keys(jsonata.functions).forEach(function(f) { funcSelect.append($("").val(f).text(f)); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/js.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/js.js index c0ce56411..4e8740055 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/js.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/js.js @@ -59,8 +59,8 @@ expressionEditor.resize(); }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); - var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); + var trayBody = tray.find('.red-ui-tray-body'); + var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor'); expressionEditor = RED.editor.createEditor({ id: 'node-input-js', mode: options.mode || 'ace/mode/javascript', diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js index 848c0105d..8800a1473 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js @@ -74,8 +74,8 @@ expressionEditor.resize(); }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); - var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); + var trayBody = tray.find('.red-ui-tray-body'); + var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor'); expressionEditor = RED.editor.createEditor({ id: 'node-input-json', value: "", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js index 77619b61d..253d47257 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js @@ -88,9 +88,9 @@ }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); trayBody.addClass("node-input-markdown-editor") - var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); + var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor'); expressionEditor = RED.editor.createEditor({ id: 'node-input-markdown', value: value, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/event-log.js b/packages/node_modules/@node-red/editor-client/src/js/ui/event-log.js index c024b06fe..566fe7bde 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/event-log.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/event-log.js @@ -70,8 +70,8 @@ RED.eventLog = (function() { eventLogEditor.resize(); }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); - var dialogForm = RED.editor.buildEditForm(tray.find('.editor-tray-body'),'dialog-form',type,'editor'); + var trayBody = tray.find('.red-ui-tray-body'); + var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor'); eventLogEditor = RED.editor.createEditor({ id: 'event-log-editor', value: backlog.join("\n"), diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js index ab06edfdf..6a0e6237d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js @@ -94,10 +94,14 @@ RED.h = handlers; } } for (var action in userKeymap) { - if (userKeymap.hasOwnProperty(action)) { + if (userKeymap.hasOwnProperty(action) && userKeymap[action]) { var obj = userKeymap[action]; if (obj.hasOwnProperty('key')) { - addHandler(obj.scope, obj.key, action, true); + var scope = obj.scope; + if (scope === "workspace") { + scope = "red-ui-workspace"; + } + addHandler(scope, obj.key, action, true); } } } @@ -391,8 +395,11 @@ RED.h = handlers; $(this).toggleClass("input-error",!valid); }) - var scopeSelect = $('').appendTo(scope); + var scopeSelect = $('').appendTo(scope); scopeSelect.i18n(); + if (object.scope === "workspace") { + object.scope = "red-ui-workspace"; + } scopeSelect.val(object.scope||'*'); var div = $('
').appendTo(scope); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js index a939e8e23..409bc2970 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/library.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/library.js @@ -421,8 +421,8 @@ RED.library = (function() { return { init: function() { - $(_librarySave).appendTo(document.body); - $(_libraryLookup).appendTo(document.body); + $(_librarySave).appendTo("#red-ui-editor"); + $(_libraryLookup).appendTo("#red-ui-editor"); $( "#node-dialog-library-save" ).dialog({ title: RED._("library.saveToLibrary"), diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js index f2d04aa02..f0a7b24d1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js @@ -62,7 +62,7 @@ RED.notifications = (function() { } if (options.modal) { - $("#full-shade").show(); + $("#red-ui-full-shade").show(); } if (currentNotifications.length > 4) { @@ -77,14 +77,14 @@ RED.notifications = (function() { } } var n = document.createElement("div"); - n.id="red-notification-"+c; - n.className = "notification"; + n.id="red-ui-notification-"+c; + n.className = "red-ui-notification"; n.fixed = fixed; if (type) { - n.className = "notification notification-"+type; + n.className = "red-ui-notification red-ui-notification-"+type; } if (options.width) { - var parentWidth = $("#notifications").width(); + var parentWidth = $("#red-ui-notifications").width(); if (options.width > parentWidth) { var margin = -(options.width-parentWidth)/2; $(n).css({ @@ -116,7 +116,7 @@ RED.notifications = (function() { } - $("#notifications").append(n); + $("#red-ui-notifications").append(n); if (!RED.notifications.hide) { $(n).slideDown(300); } @@ -142,7 +142,7 @@ RED.notifications = (function() { nn.parentNode.removeChild(nn); } if (options.modal) { - $("#full-shade").hide(); + $("#red-ui-full-shade").hide(); } }; })(); @@ -211,9 +211,9 @@ RED.notifications = (function() { if (nn.hidden) { nn.showNotification(); } else if (!options || !options.silent){ - $(nn).addClass("notification-shake-horizontal"); + $(nn).addClass("red-ui-notification-shake-horizontal"); setTimeout(function() { - $(nn).removeClass("notification-shake-horizontal"); + $(nn).removeClass("red-ui-notification-shake-horizontal"); },300); } @@ -234,6 +234,7 @@ RED.notifications = (function() { if (options.id) { persistentNotifications[options.id] = n; if (options.fixed) { + console.log("SHPW)") notificationButtonWrapper.show(); } } @@ -263,14 +264,14 @@ RED.notifications = (function() { return { init: function() { - notificationButtonWrapper = $('
  • '+ - ''+ - ''+ - ''+ - '
    • ').prependTo(".red-ui-header-toolbar").hide(); - $('#btn-notifications').on("click", function() { - showPersistent(); - }) + $('
    ').appendTo("#red-ui-editor"); + + notificationButtonWrapper = $('
  • ').prependTo(".red-ui-header-toolbar").hide(); + $('') + .appendTo(notificationButtonWrapper) + .on("click", function() { + showPersistent(); + }) }, notify: notify } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index a4268140e..ee702f8e4 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -242,9 +242,9 @@ RED.palette = (function() { } RED.sidebar.info.set(helpText,RED._("sidebar.info.nodeHelp")); }); - var chart = $("#chart"); + var chart = $("#red-ui-workspace-chart"); var chartOffset = chart.offset(); - var chartSVG = $("#chart>svg").get(0); + var chartSVG = $("#red-ui-workspace-chart>svg").get(0); var activeSpliceLink; var mouseX; var mouseY; @@ -256,7 +256,7 @@ RED.palette = (function() { appendTo: 'body', revert: 'invalid', revertDuration: 300, - containment:'#main-container', + containment:'#red-ui-main-container', start: function() { paletteWidth = $("#red-ui-palette").width(); paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; @@ -525,7 +525,7 @@ RED.palette = (function() { } }) - sidebarControls = $('
    ').appendTo($("#red-ui-palette")); + sidebarControls = $('
    ').appendTo($("#red-ui-palette")); RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette"); sidebarControls.on("click", function() { @@ -588,11 +588,11 @@ RED.palette = (function() { } function togglePalette(state) { if (!state) { - $("#main-container").addClass("red-ui-palette-closed"); + $("#red-ui-main-container").addClass("red-ui-palette-closed"); sidebarControls.hide(); sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); } else { - $("#main-container").removeClass("red-ui-palette-closed"); + $("#red-ui-main-container").removeClass("red-ui-palette-closed"); sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); } setTimeout(function() { $(window).trigger("resize"); } ,200); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js index 4d762ac1b..4f90d677e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js @@ -66,7 +66,7 @@ RED.projects.settings = (function() { open: function(tray) { var project = RED.projects.getActiveProject(); - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var settingsContent = $('
    ').appendTo(trayBody); var tabContainer = $('
    ',{id:"user-settings-tabs-container"}).appendTo(settingsContent); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js index ea4a85117..caba0dc05 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js @@ -2218,7 +2218,7 @@ RED.projects = (function() { function init() { dialog = $('
    ') - .appendTo("body") + .appendTo("#red-ui-editor") .dialog({ modal: true, autoOpen: false, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index de957b3f6..3e8b3feb8 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -147,7 +147,7 @@ RED.search = (function() { } function createDialog() { - dialog = $("
    ",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#main-container"); + dialog = $("
    ",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#red-ui-main-container"); var searchDiv = $("
    ",{class:"red-ui-search-container"}).appendTo(dialog); searchInput = $('').appendTo(searchDiv).searchBox({ delay: 200, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 7bb7f1d92..4fb041cbf 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -89,16 +89,16 @@ RED.sidebar = (function() { sidebarSeparator.opening = false; var winWidth = $(window).width(); sidebarSeparator.start = ui.position.left; - sidebarSeparator.chartWidth = $("#workspace").width(); - sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2; + sidebarSeparator.chartWidth = $("#red-ui-workspace").width(); + sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2; sidebarSeparator.dragging = true; if (!RED.menu.isSelected("menu-item-sidebar")) { sidebarSeparator.opening = true; var newChartRight = 7; $("#red-ui-sidebar").addClass("closing"); - $("#workspace").css("right",newChartRight); - $("#editor-stack").css("right",newChartRight+1); + $("#red-ui-workspace").css("right",newChartRight); + $("#red-ui-editor-stack").css("right",newChartRight+1); $("#red-ui-sidebar").width(0); RED.menu.setSelected("menu-item-sidebar",true); RED.events.emit("sidebar:resize"); @@ -136,8 +136,8 @@ RED.sidebar = (function() { } var newChartRight = sidebarSeparator.chartRight-d; - $("#workspace").css("right",newChartRight); - $("#editor-stack").css("right",newChartRight+1); + $("#red-ui-workspace").css("right",newChartRight); + $("#red-ui-editor-stack").css("right",newChartRight+1); $("#red-ui-sidebar").width(newSidebarWidth); sidebar_tabs.resize(); @@ -150,8 +150,8 @@ RED.sidebar = (function() { RED.menu.setSelected("menu-item-sidebar",false); if ($("#red-ui-sidebar").width() < 180) { $("#red-ui-sidebar").width(180); - $("#workspace").css("right",187); - $("#editor-stack").css("right",188); + $("#red-ui-workspace").css("right",187); + $("#red-ui-editor-stack").css("right",188); } } $("#red-ui-sidebar-separator").css("left","auto"); @@ -183,9 +183,9 @@ RED.sidebar = (function() { function toggleSidebar(state) { if (!state) { - $("#main-container").addClass("red-ui-sidebar-closed"); + $("#red-ui-main-container").addClass("red-ui-sidebar-closed"); } else { - $("#main-container").removeClass("red-ui-sidebar-closed"); + $("#red-ui-main-container").removeClass("red-ui-sidebar-closed"); sidebar_tabs.resize(); } RED.events.emit("sidebar:resize"); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js index 809f2c315..4c9156207 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js @@ -41,8 +41,8 @@ RED.statusBar = (function() { return { init: function() { - leftBucket = $('').appendTo("#workspace-footer"); - rightBucket = $('').appendTo("#workspace-footer"); + leftBucket = $('').appendTo("#red-ui-workspace-footer"); + rightBucket = $('').appendTo("#red-ui-workspace-footer"); }, add: addWidget } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js index dfe61efce..801c0c9d6 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js @@ -294,7 +294,7 @@ RED.subflow = (function() { } function showWorkspaceToolbar(activeSubflow) { - var toolbar = $("#workspace-toolbar"); + var toolbar = $("#red-ui-workspace-toolbar"); toolbar.empty(); // Edit properties @@ -429,13 +429,13 @@ RED.subflow = (function() { refreshToolbar(activeSubflow); - $("#chart").css({"margin-top": "40px"}); - $("#workspace-toolbar").show(); + $("#red-ui-workspace-chart").css({"margin-top": "40px"}); + $("#red-ui-workspace-toolbar").show(); } function hideWorkspaceToolbar() { - $("#workspace-toolbar").hide().empty(); - $("#chart").css({"margin-top": "0"}); + $("#red-ui-workspace-toolbar").hide().empty(); + $("#red-ui-workspace-chart").css({"margin-top": "0"}); } function removeSubflow(id) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js index 68151e192..7f6bdcf4d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js @@ -16,33 +16,33 @@ RED.tray = (function() { var stack = []; - var editorStack = $("#editor-stack"); + var editorStack = $("#red-ui-editor-stack"); var openingTray = false; function resize() { } function showTray(options) { - var el = $('
    '); - var header = $('
    ').appendTo(el); - var bodyWrapper = $('
    ').appendTo(el); - var body = $('
    ').appendTo(bodyWrapper); - var footer = $('
    ').appendTo(el); - var resizer = $('
    ').appendTo(el); - // var growButton = $('').appendTo(resizer); - // var shrinkButton = $('').appendTo(resizer); + var el = $('
    '); + var header = $('
    ').appendTo(el); + var bodyWrapper = $('
    ').appendTo(el); + var body = $('
    ').appendTo(bodyWrapper); + var footer = $('
    ').appendTo(el); + var resizer = $('
    ').appendTo(el); + // var growButton = $('').appendTo(resizer); + // var shrinkButton = $('').appendTo(resizer); if (options.title) { var titles = stack.map(function(e) { return e.options.title }); titles.push(options.title); - var title = '
    • '+titles.join("
    • ")+'
    '; + var title = '
    • '+titles.join("
    • ")+'
    '; - $('
    '+title+'
    ').appendTo(header); + $('
    '+title+'
    ').appendTo(header); } if (options.width === Infinity) { options.maximized = true; - resizer.addClass('editor-tray-resize-maximised'); + resizer.addClass('red-ui-tray-resize-maximised'); } - var buttonBar = $('
    ').appendTo(header); + var buttonBar = $('
    ').appendTo(header); var primaryButton; if (options.buttons) { for (var i=0;i $("#editor-stack").position().left-8) { - options.width = $("#editor-stack").position().left-8; + if (options.width > $("#red-ui-editor-stack").position().left-8) { + options.width = $("#red-ui-editor-stack").position().left-8; } el.width(options.width); } else { @@ -133,15 +133,15 @@ RED.tray = (function() { } tray.width = el.width(); - if (tray.width > $("#editor-stack").position().left-8) { - tray.width = Math.max(0/*tray.preferredWidth*/,$("#editor-stack").position().left-8); + if (tray.width > $("#red-ui-editor-stack").position().left-8) { + tray.width = Math.max(0/*tray.preferredWidth*/,$("#red-ui-editor-stack").position().left-8); el.width(tray.width); } - // tray.body.parent().width(Math.min($("#editor-stack").position().left-8,tray.width)); + // tray.body.parent().width(Math.min($("#red-ui-editor-stack").position().left-8,tray.width)); - $("#main-container").scrollLeft(0); + $("#red-ui-main-container").scrollLeft(0); el.css({ right: -(el.width()+10)+"px", transition: "right 0.25s ease" @@ -151,7 +151,7 @@ RED.tray = (function() { setTimeout(function() { setTimeout(function() { if (!options.width) { - el.width(Math.min(tray.preferredWidth,$("#editor-stack").position().left-8)); + el.width(Math.min(tray.preferredWidth,$("#red-ui-editor-stack").position().left-8)); } if (options.resize) { options.resize({width:el.width()}); @@ -186,12 +186,12 @@ RED.tray = (function() { var tray = stack[stack.length-1]; var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight(); tray.body.height(trayHeight); - if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) { - tray.width = $("#editor-stack").position().left-8; + if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) { + tray.width = $("#red-ui-editor-stack").position().left-8; tray.tray.width(tray.width); // tray.body.parent().width(tray.width); } else if (tray.width < tray.preferredWidth) { - tray.width = Math.min($("#editor-stack").position().left-8,tray.preferredWidth); + tray.width = Math.min($("#red-ui-editor-stack").position().left-8,tray.preferredWidth); tray.tray.width(tray.width); // tray.body.parent().width(tray.width); } @@ -209,7 +209,7 @@ RED.tray = (function() { if (!openingTray) { var tray = stack[stack.length-1]; if (tray && tray.primaryButton) { - tray.primaryButton.trigger("click"); + tray.primaryButton.click(); } } }); @@ -248,7 +248,7 @@ RED.tray = (function() { if (stack.length > 0) { var oldTray = stack[stack.length-1]; if (!oldTray.options.overlay) { - oldTray.tray.appendTo("#editor-stack"); + oldTray.tray.appendTo("#red-ui-editor-stack"); setTimeout(function() { handleWindowResize(); oldTray.tray.css({right:0}); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js index 7a1a70dd0..cb4f86724 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js @@ -45,8 +45,8 @@ RED.typeSearch = (function() { } function createDialog() { - //shade = $('
    ',{class:"red-ui-type-search-shade"}).appendTo("#main-container"); - dialog = $("
    ",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#main-container"); + //shade = $('
    ',{class:"red-ui-type-search-shade"}).appendTo("#red-ui-main-container"); + dialog = $("
    ",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#red-ui-main-container"); var searchDiv = $("
    ",{class:"red-ui-search-container"}).appendTo(dialog); searchInput = $('').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({ delay: 50, @@ -222,7 +222,7 @@ RED.typeSearch = (function() { cancelCallback = opts.cancel; RED.events.emit("type-search:open"); //shade.show(); - if ($("#main-container").height() - opts.y - 150 < 0) { + if ($("#red-ui-main-container").height() - opts.y - 150 < 0) { opts.y = opts.y - 235; } dialog.css({left:opts.x+"px",top:opts.y+"px"}).show(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js index 41dd21482..bfb485728 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js @@ -52,7 +52,7 @@ RED.userSettings = (function() { trayWidth = dimensions.width; }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var settingsContent = $('
    ').appendTo(trayBody); var tabContainer = $('
    ',{id:"user-settings-tabs-container"}).appendTo(settingsContent); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index b78e6acb7..d47c60a43 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -57,8 +57,8 @@ function resizeNavBorder() { if (navBorder) { scaleFactor = RED.view.scale(); - chartSize = [ $("#chart").width(), $("#chart").height()]; - scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()]; + chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()]; + scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()]; navBorder.attr('x',scrollPos[0]/nav_scale) .attr('y',scrollPos[1]/nav_scale) .attr('width',chartSize[0]/nav_scale/scaleFactor) @@ -71,12 +71,12 @@ $("#btn-navigate").addClass("selected"); resizeNavBorder(); refreshNodes(); - $("#chart").on("scroll",onScroll); + $("#red-ui-workspace-chart").on("scroll",onScroll); navContainer.fadeIn(200); } else { isShowing = false; navContainer.fadeOut(100); - $("#chart").off("scroll",onScroll); + $("#red-ui-workspace-chart").off("scroll",onScroll); $("#btn-navigate").removeClass("selected"); } } @@ -91,10 +91,10 @@ navContainer = $('
    ').css({ "position":"absolute", - "bottom":$("#workspace-footer").height(), + "bottom":$("#red-ui-workspace-footer").height(), "right":0, zIndex: 1 - }).appendTo("#workspace").hide(); + }).appendTo("#red-ui-workspace").hide(); navBox = d3.select(navContainer[0]) .append("svg:svg") @@ -119,14 +119,14 @@ }).on("mousedown", function() { // Update these in case they have changed scaleFactor = RED.view.scale(); - chartSize = [ $("#chart").width(), $("#chart").height()]; + chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()]; dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor]; var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]); var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]); navBorder.attr('x',newX).attr('y',newY); isDragging = true; - $("#chart").scrollLeft(newX*nav_scale*scaleFactor); - $("#chart").scrollTop(newY*nav_scale*scaleFactor); + $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor); + $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor); }).on("mousemove", function() { if (!isDragging) { return } if (d3.event.buttons === 0) { @@ -136,8 +136,8 @@ var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]); var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]); navBorder.attr('x',newX).attr('y',newY); - $("#chart").scrollLeft(newX*nav_scale*scaleFactor); - $("#chart").scrollTop(newY*nav_scale*scaleFactor); + $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor); + $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor); }).on("mouseup", function() { isDragging = false; }) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 2bec92f81..9ecd33d90 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -15,6 +15,17 @@ **/ + /*
    #red-ui-workspace-chart + * \- "outer" + * \- + * \- .red-ui-workspace-chart-event-layer "eventLayer" + * |- .red-ui-workspace-chart-background + * |- .red-ui-workspace-chart-grid "gridLayer" + * |- "linkLayer" + * |- "dragGroupLayer" + * \- "nodeLayer" + */ + RED.view = (function() { var space_width = 5000, space_height = 5000, @@ -79,249 +90,169 @@ RED.view = (function() { var PORT_TYPE_INPUT = 1; var PORT_TYPE_OUTPUT = 0; - var chart = $("#chart"); + var chart; + var outer; + var eventLayer; + var gridLayer; + var linkLayer; + var dragGroupLayer; + var nodeLayer; + var drag_lines; - var outer = d3.select("#chart") - .append("svg:svg") - .attr("width", space_width) - .attr("height", space_height) - .attr("pointer-events", "all") - .style("cursor","crosshair") - .on("mousedown", function() { - focusView(); - }) - .on("contextmenu", function(){ - d3.event.preventDefault(); - }); + function init() { - var vis = outer - .append("svg:g") - .on("dblclick.zoom", null) - .append("svg:g") - .attr('class','innerCanvas') - .on("mousemove", canvasMouseMove) - .on("mousedown", canvasMouseDown) - .on("mouseup", canvasMouseUp) - .on("mouseenter", function() { - if (lasso) { - if (d3.event.buttons !== 1) { - lasso.remove(); - lasso = null; + chart = $("#red-ui-workspace-chart"); + + outer = d3.select("#red-ui-workspace-chart") + .append("svg:svg") + .attr("width", space_width) + .attr("height", space_height) + .attr("pointer-events", "all") + .style("cursor","crosshair") + .on("mousedown", function() { + focusView(); + }) + .on("contextmenu", function(){ + d3.event.preventDefault(); + }); + + eventLayer = outer + .append("svg:g") + .on("dblclick.zoom", null) + .append("svg:g") + .attr('class','red-ui-workspace-chart-event-layer') + .on("mousemove", canvasMouseMove) + .on("mousedown", canvasMouseDown) + .on("mouseup", canvasMouseUp) + .on("mouseenter", function() { + if (lasso) { + if (d3.event.buttons !== 1) { + lasso.remove(); + lasso = null; + } + } else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) { + resetMouseVars(); } - } else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) { - resetMouseVars(); - } - }) - .on("touchend", function() { - clearTimeout(touchStartTime); - touchStartTime = null; - if (RED.touch.radialMenu.active()) { - return; - } - if (lasso) { - outer_background.attr("fill","#fff"); - } - canvasMouseUp.call(this); - }) - .on("touchcancel", canvasMouseUp) - .on("touchstart", function() { - var touch0; - if (d3.event.touches.length>1) { + }) + .on("touchend", function() { clearTimeout(touchStartTime); touchStartTime = null; - d3.event.preventDefault(); - touch0 = d3.event.touches.item(0); - var touch1 = d3.event.touches.item(1); - var a = touch0["pageY"]-touch1["pageY"]; - var b = touch0["pageX"]-touch1["pageX"]; - - var offset = $("#chart").offset(); - var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()]; - startTouchCenter = [ - (touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor, - (touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor - ]; - moveTouchCenter = [ - touch1["pageX"]+(b/2), - touch1["pageY"]+(a/2) - ] - startTouchDistance = Math.sqrt((a*a)+(b*b)); - } else { - var obj = d3.select(document.body); - touch0 = d3.event.touches.item(0); - var pos = [touch0.pageX,touch0.pageY]; - startTouchCenter = [touch0.pageX,touch0.pageY]; - startTouchDistance = 0; - var point = d3.touches(this)[0]; - touchStartTime = setTimeout(function() { - touchStartTime = null; - showTouchMenu(obj,pos); - //lasso = vis.append("rect") - // .attr("ox",point[0]) - // .attr("oy",point[1]) - // .attr("rx",2) - // .attr("ry",2) - // .attr("x",point[0]) - // .attr("y",point[1]) - // .attr("width",0) - // .attr("height",0) - // .attr("class","lasso"); - //outer_background.attr("fill","#e3e3f3"); - },touchLongPressTimeout); - } - }) - .on("touchmove", function(){ if (RED.touch.radialMenu.active()) { - d3.event.preventDefault(); return; } + canvasMouseUp.call(this); + }) + .on("touchcancel", canvasMouseUp) + .on("touchstart", function() { var touch0; - if (d3.event.touches.length<2) { - if (touchStartTime) { - touch0 = d3.event.touches.item(0); - var dx = (touch0.pageX-startTouchCenter[0]); - var dy = (touch0.pageY-startTouchCenter[1]); - var d = Math.abs(dx*dx+dy*dy); - if (d > 64) { - clearTimeout(touchStartTime); - touchStartTime = null; - } - } else if (lasso) { - d3.event.preventDefault(); - } - canvasMouseMove.call(this); - } else { + if (d3.event.touches.length>1) { + clearTimeout(touchStartTime); + touchStartTime = null; + d3.event.preventDefault(); touch0 = d3.event.touches.item(0); var touch1 = d3.event.touches.item(1); var a = touch0["pageY"]-touch1["pageY"]; var b = touch0["pageX"]-touch1["pageX"]; - var offset = $("#chart").offset(); - var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()]; - var moveTouchDistance = Math.sqrt((a*a)+(b*b)); - var touchCenter = [ + + var offset = chart.offset(); + var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; + startTouchCenter = [ + (touch1["pageX"]+(b/2)-offset.left+scrollPos[0])/scaleFactor, + (touch1["pageY"]+(a/2)-offset.top+scrollPos[1])/scaleFactor + ]; + moveTouchCenter = [ touch1["pageX"]+(b/2), touch1["pageY"]+(a/2) - ]; - - if (!isNaN(moveTouchDistance)) { - oldScaleFactor = scaleFactor; - scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000))); - - var deltaTouchCenter = [ // Try to pan whilst zooming - not 100% - startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]), - startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1]) + ] + startTouchDistance = Math.sqrt((a*a)+(b*b)); + } else { + var obj = d3.select(document.body); + touch0 = d3.event.touches.item(0); + var pos = [touch0.pageX,touch0.pageY]; + startTouchCenter = [touch0.pageX,touch0.pageY]; + startTouchDistance = 0; + var point = d3.touches(this)[0]; + touchStartTime = setTimeout(function() { + touchStartTime = null; + showTouchMenu(obj,pos); + //lasso = eventLayer.append("rect") + // .attr("ox",point[0]) + // .attr("oy",point[1]) + // .attr("rx",2) + // .attr("ry",2) + // .attr("x",point[0]) + // .attr("y",point[1]) + // .attr("width",0) + // .attr("height",0) + // .attr("class","lasso"); + },touchLongPressTimeout); + } + }) + .on("touchmove", function(){ + if (RED.touch.radialMenu.active()) { + d3.event.preventDefault(); + return; + } + var touch0; + if (d3.event.touches.length<2) { + if (touchStartTime) { + touch0 = d3.event.touches.item(0); + var dx = (touch0.pageX-startTouchCenter[0]); + var dy = (touch0.pageY-startTouchCenter[1]); + var d = Math.abs(dx*dx+dy*dy); + if (d > 64) { + clearTimeout(touchStartTime); + touchStartTime = null; + } + } else if (lasso) { + d3.event.preventDefault(); + } + canvasMouseMove.call(this); + } else { + touch0 = d3.event.touches.item(0); + var touch1 = d3.event.touches.item(1); + var a = touch0["pageY"]-touch1["pageY"]; + var b = touch0["pageX"]-touch1["pageX"]; + var offset = chart.offset(); + var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; + var moveTouchDistance = Math.sqrt((a*a)+(b*b)); + var touchCenter = [ + touch1["pageX"]+(b/2), + touch1["pageY"]+(a/2) ]; - startTouchDistance = moveTouchDistance; - moveTouchCenter = touchCenter; + if (!isNaN(moveTouchDistance)) { + oldScaleFactor = scaleFactor; + scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000))); - $("#chart").scrollLeft(scrollPos[0]+deltaTouchCenter[0]); - $("#chart").scrollTop(scrollPos[1]+deltaTouchCenter[1]); - redraw(); + var deltaTouchCenter = [ // Try to pan whilst zooming - not 100% + startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]), + startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1]) + ]; + + startTouchDistance = moveTouchDistance; + moveTouchCenter = touchCenter; + + chart.scrollLeft(scrollPos[0]+deltaTouchCenter[0]); + chart.scrollTop(scrollPos[1]+deltaTouchCenter[1]); + redraw(); + } } - } - }); + }); - var outer_background = vis.append("svg:rect") - .attr("width", space_width) - .attr("height", space_height) - .attr("fill","#fff"); + // Workspace Background + eventLayer.append("svg:rect") + .attr("class","red-ui-workspace-chart-background") + .attr("width", space_width) + .attr("height", space_height); - var grid = vis.append("g"); - updateGrid(); + gridLayer = eventLayer.append("g").attr("class","red-ui-workspace-chart-grid"); + updateGrid(); - function updateGrid() { - var gridTicks = []; - for (var i=0;i') }) - $("#red-ui-view-zoom-out").on("click", function() {zoomOut();}); - + $("#red-ui-view-zoom-out").on("click", zoomOut); RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); - $("#red-ui-view-zoom-zero").on("click", function() {zoomZero();}); + $("#red-ui-view-zoom-zero").on("click", zoomZero); RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); - $("#red-ui-view-zoom-in").on("click", function() {zoomIn();}); + $("#red-ui-view-zoom-in").on("click", zoomIn); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); - $("#chart").on("DOMMouseScroll mousewheel", function (evt) { + chart.on("DOMMouseScroll mousewheel", function (evt) { if ( evt.altKey ) { evt.preventDefault(); evt.stopPropagation(); @@ -392,7 +320,7 @@ RED.view = (function() { }); // Handle nodes dragged from the palette - $("#chart").droppable({ + chart.droppable({ accept:".red-ui-palette-node", drop: function( event, ui ) { d3.event = event; @@ -461,11 +389,11 @@ RED.view = (function() { } } }); - $("#chart").on("focus", function() { - $("#workspace-tabs").addClass("workspace-focussed"); + chart.on("focus", function() { + $("#red-ui-workspace-tabs").addClass("red-ui-workspace-focussed"); }); - $("#chart").on("blur", function() { - $("#workspace-tabs").removeClass("workspace-focussed"); + chart.on("blur", function() { + $("#red-ui-workspace-tabs").removeClass("red-ui-workspace-focussed"); }); RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection); @@ -501,9 +429,88 @@ RED.view = (function() { } }); + RED.view.navigator.init(); RED.view.tools.init(); } + function updateGrid() { + var gridTicks = []; + for (var i=0;i screenSize[0]+scrollPos[0] || node.y > screenSize[1]+scrollPos[1]) { var deltaX = '-='+((scrollPos[0] - node.x) + screenSize[0]/2); var deltaY = '-='+((scrollPos[1] - node.y) + screenSize[1]/2); - $("#chart").animate({ + chart.animate({ scrollLeft: deltaX, scrollTop: deltaY },200); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js index c686549c8..7a409013a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js @@ -28,7 +28,7 @@ RED.workspaces = (function() { var tabId = RED.nodes.id(); do { workspaceIndex += 1; - } while ($("#workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0); + } while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0); ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})}; RED.nodes.addWorkspace(ws,targetIndex); @@ -108,7 +108,7 @@ RED.workspaces = (function() { workspace.info = info; } $("#red-ui-tab-"+(workspace.id.replace(".","-"))).toggleClass('workspace-disabled',!!workspace.disabled); - $("#workspace").toggleClass("workspace-disabled",!!workspace.disabled); + $("#red-ui-workspace").toggleClass("workspace-disabled",!!workspace.disabled); if (changed) { var historyEvent = { @@ -150,7 +150,7 @@ RED.workspaces = (function() { tabflowEditor.resize(); }, open: function(tray) { - var trayBody = tray.find('.editor-tray-body'); + var trayBody = tray.find('.red-ui-tray-body'); var dialogForm = $('
    ').appendTo(trayBody); $('
    '+ ''+ @@ -241,7 +241,7 @@ RED.workspaces = (function() { var workspaceTabCount = 0; function createWorkspaceTabs() { workspace_tabs = RED.tabs.create({ - id: "workspace-tabs", + id: "red-ui-workspace-tabs", onchange: function(tab) { var event = { old: activeWorkspace @@ -250,7 +250,7 @@ RED.workspaces = (function() { event.workspace = activeWorkspace; RED.events.emit("workspace:change",event); window.location.hash = 'flow/'+tab.id; - $("#workspace").toggleClass("workspace-disabled",!!tab.disabled); + $("#red-ui-workspace").toggleClass("workspace-disabled",!!tab.disabled); RED.sidebar.config.refresh(); RED.view.focus(); }, @@ -294,14 +294,14 @@ RED.workspaces = (function() { onselect: function(selectedTabs) { RED.view.select(false) if (selectedTabs.length === 0) { - $("#chart svg").css({"pointer-events":"auto",filter:"none"}) - $("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"}) + $("#red-ui-workspace-chart svg").css({"pointer-events":"auto",filter:"none"}) + $("#red-ui-workspace-toolbar").css({"pointer-events":"auto",filter:"none"}) $("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"}) $(".red-ui-sidebar-shade").hide(); } else { RED.view.select(false) - $("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"}) - $("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"}) + $("#red-ui-workspace-chart svg").css({"pointer-events":"none",filter:"opacity(60%)"}) + $("#red-ui-workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"}) $(".red-ui-sidebar-shade").show(); } @@ -316,17 +316,24 @@ RED.workspaces = (function() { workspaceTabCount = 0; } function showWorkspace() { - $("#workspace .red-ui-tabs").show() - $("#chart").show() - $("#workspace-footer").children().show() + $("#red-ui-workspace .red-ui-tabs").show() + $("#red-ui-workspace-chart").show() + $("#red-ui-workspace-footer").children().show() } function hideWorkspace() { - $("#workspace .red-ui-tabs").hide() - $("#chart").hide() - $("#workspace-footer").children().hide() + $("#red-ui-workspace .red-ui-tabs").hide() + $("#red-ui-workspace-chart").hide() + $("#red-ui-workspace-footer").children().hide() } function init() { + $('
      ').appendTo("#red-ui-workspace"); + $('
      ').appendTo("#red-ui-workspace"); + $('
      ').appendTo("#red-ui-workspace"); + $('').appendTo("#red-ui-workspace"); + $('
      ').appendTo("#red-ui-workspace"); + + createWorkspaceTabs(); RED.events.on("sidebar:resize",workspace_tabs.resize); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss index 7f3191682..8757412c5 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss @@ -14,24 +14,26 @@ * limitations under the License. **/ -#dropTarget { +#red-ui-drop-target { position: absolute; top: 0; bottom: 0; left: 0; right: 0; - background: rgba(0,0,0,0.1); + background: rgba(0,0,0,0.3); display:table; width: 100%; height: 100%; display: none; z-index:100; -} -#dropTarget div { - display: table-cell; - vertical-align: middle; - text-align: center; - font-size: 40px; - color: #fff; -} -#dropTarget div i { - font-size: 80px; + div { + pointer-events: none; + display: table-cell; + vertical-align: middle; + text-align: center; + font-size: 40px; + color: #fff; + i { + pointer-events: none; + font-size: 80px; + } + } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index 48ff5a941..32c075dc2 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -15,7 +15,7 @@ **/ -#editor-stack { +#red-ui-editor-stack { position: absolute; margin: 0; top: 0; @@ -24,7 +24,7 @@ width: 0; z-index: 5; } -.editor-tray { +.red-ui-tray { position:absolute; margin: 0; top: 0; @@ -37,15 +37,15 @@ border-bottom: 1px solid $primary-border-color; box-sizing: content-box; } -.editor-tray.open { +.red-ui-tray.open { right: 0; } -.editor-tray-body-wrapper { +.red-ui-tray-body-wrapper { width: 100%; box-sizing: border-box; overflow: auto; } -.editor-tray-body { +.red-ui-tray-body { position: relative; box-sizing: border-box; padding: 0.1px; // prevent margin collapsing @@ -54,7 +54,7 @@ height: calc(100% - 40px); } } -.editor-tray-content { +.red-ui-tray-content { overflow: auto; position: relative; .red-ui-palette-icon-fa { @@ -62,7 +62,7 @@ left: 4px; } } -.editor-tray-header { +.red-ui-tray-header { @include disable-selection; position: relative; box-sizing: border-box; @@ -76,7 +76,7 @@ } } -.editor-tray-footer { +.red-ui-tray-footer { @include component-footer; height: 35px; @@ -88,7 +88,7 @@ } -.editor-tray-toolbar { +.red-ui-tray-toolbar { text-align: right; padding: 6px; @@ -100,11 +100,11 @@ } } -.editor-tray-titlebar { +.red-ui-tray-titlebar { border-bottom: 1px solid $secondary-border-color; padding: 8px; } -.editor-tray-breadcrumbs { +.red-ui-tray-breadcrumbs { list-style-type: none; margin: 0; padding:0; @@ -127,7 +127,7 @@ } } } -.editor-tray-resize-handle { +.red-ui-tray-resize-handle { position: absolute; top: 0px; bottom: 0px; @@ -138,12 +138,12 @@ border-left: 1px solid $primary-border-color; box-shadow: -1px 0 6px rgba(0,0,0,0.1); - &.editor-tray-resize-maximised { + &.red-ui-tray-resize-maximised { background: $background-color; cursor: default; } } -.editor-tray-resize-button { +.red-ui-tray-resize-button { @include workspace-button; display: block; height: 37px; @@ -163,7 +163,7 @@ top: -1px; bottom: -1px; } -#full-shade { +#red-ui-full-shade { @include shade; z-index: 15; } @@ -355,7 +355,7 @@ background: #fff; } -#clipboard-hidden { +#red-ui-clipboard-hidden { position: absolute; top: -3000px; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss index 31a9d62ae..5987f4d91 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss @@ -14,7 +14,7 @@ * limitations under the License. **/ -#notifications { +#red-ui-notifications { z-index: 100; width: 500px; margin-left: -250px; @@ -22,7 +22,7 @@ position: absolute; top: 1px; } -.notification { +.red-ui-notification { box-sizing: border-box; position: relative; padding: 14px 18px; @@ -34,33 +34,33 @@ border-left-width: 16px; overflow: hidden; } -.notification p:first-child { +.red-ui-notification p:first-child { font-size: 1.1em; font-weight: 400; } -.notification a { +.red-ui-notification a { text-decoration: none; &:hover { text-decoration: underline; } } -.notification-success { +.red-ui-notification-success { border-color: #4B8400; } -.notification-warning { +.red-ui-notification-warning { border-color: #D74108; } -.notification-error { +.red-ui-notification-error { border-color: #AD1625; } -.notification-shake-horizontal { - -webkit-animation: notification-shake-horizontal 0.3s steps(2, end) both; - animation: notification-shake-horizontal 0.3s steps(2, end) both; +.red-ui-notification-shake-horizontal { + -webkit-animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both; + animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both; } -@-webkit-keyframes notification-shake-horizontal { +@-webkit-keyframes red-ui-notification-shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); @@ -88,7 +88,7 @@ // transform: translateX(-1px); // } } -@keyframes notification-shake-horizontal { +@keyframes red-ui-notification-shake-horizontal { 0%, 100% { -webkit-transform: translateX(0); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 36ee99e4f..f7b92eecb 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -54,8 +54,8 @@ .red-ui-sidebar-closed > #red-ui-sidebar { display: none; } .red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; } -.red-ui-sidebar-closed > #workspace { right: 7px !important; } -.red-ui-sidebar-closed > #editor-stack { right: 8px !important; } +.red-ui-sidebar-closed > #red-ui-workspace { right: 7px !important; } +.red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; } #red-ui-sidebar .button { @include workspace-button; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style.scss b/packages/node_modules/@node-red/editor-client/src/sass/style.scss index a48291659..21aed7c17 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/style.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/style.scss @@ -74,7 +74,12 @@ body { color: #333333; } -#main-container { +#red-ui-editor { + position: absolute; + top: 100px; left: 100px; bottom: 100px; right: 100px; +} + +#red-ui-main-container { position: absolute; top:40px; left:0; bottom: 0; right:0; overflow:hidden; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index d8b0aa0d6..83e1512ed 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -15,7 +15,7 @@ **/ -#chart { +#red-ui-workspace-chart { overflow: auto; background: #e3e3e3; position: absolute; @@ -25,13 +25,12 @@ right:0px; box-sizing:border-box; transition: right 0.2s ease; + &:focus { + outline: none; + } } -#chart:focus { - outline: none; -} - -#workspace { +#red-ui-workspace { position: absolute; margin: 0; top:0px; @@ -41,10 +40,19 @@ overflow: hidden; @include component-border; transition: left 0.1s ease-in-out; - } -.red-ui-palette-closed #workspace { +.red-ui-workspace-chart-background { + fill: #fff; +} +.red-ui-workspace-chart-grid line { + fill: none; + shape-rendering: crispEdges; + stroke: #eee; + stroke-width: 1px; +} + +.red-ui-palette-closed #red-ui-workspace { left: 7px; } @@ -60,7 +68,7 @@ // margin-right: 2px; // } -#workspace-tabs:not(.workspace-focussed) { +#red-ui-workspace-tabs:not(.red-ui-workspace-focussed) { opacity:0.8; li.red-ui-tab.active a { color:#666; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss index 3224707fe..e70ca019e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss @@ -15,7 +15,7 @@ **/ -#workspace-toolbar { +#red-ui-workspace-toolbar { display: none; color: $workspace-button-color; font-size: 12px; diff --git a/packages/node_modules/@node-red/editor-client/templates/index.mst b/packages/node_modules/@node-red/editor-client/templates/index.mst index 10f4ada76..767cb7e0b 100644 --- a/packages/node_modules/@node-red/editor-client/templates/index.mst +++ b/packages/node_modules/@node-red/editor-client/templates/index.mst @@ -35,32 +35,24 @@ - -