From 5fe4c15cd004015f6b18a2d4a5eb3d0cd9b02f7a Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Wed, 14 Jan 2015 11:33:58 -0500 Subject: [PATCH] NIFI-256: - Identifying more places where we should be manually hiding the context menu. --- .../main/webapp/js/nf/canvas/nf-birdseye.js | 4 ++ .../webapp/js/nf/canvas/nf-canvas-toolbox.js | 4 ++ .../src/main/webapp/js/nf/canvas/nf-canvas.js | 12 ++++-- .../webapp/js/nf/canvas/nf-context-menu.js | 8 ++++ .../webapp/js/nf/canvas/nf-graph-control.js | 40 +++++++++++++++---- .../src/main/webapp/js/nf/canvas/nf-search.js | 3 ++ .../webapp/js/nf/canvas/nf-toolbar-action.js | 4 ++ 7 files changed, 64 insertions(+), 11 deletions(-) diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js index 27e013e509..b317a6f4c7 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-birdseye.js @@ -272,6 +272,10 @@ nf.Birdseye = (function () { y: d.y }; }) + .on('dragstart', function () { + // hide the context menu + nf.ContextMenu.hide(); + }) .on('drag', function (d) { d.x += d3.event.dx; d.y += d3.event.dy; diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js index 43a5a17082..1d9ba16d56 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js @@ -71,6 +71,10 @@ nf.CanvasToolbox = (function () { return $('
').addClass(dragCls).appendTo('body'); }, 'containment': 'body', + 'start': function(e, ui) { + // hide the context menu if necessary + nf.ContextMenu.hide(); + }, 'stop': function (e, ui) { var translate = nf.Canvas.View.translate(); var scale = nf.Canvas.View.scale(); diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js index 5c1cbb8faf..26db8374dc 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js @@ -427,9 +427,6 @@ nf.Canvas = (function () { // reset the canvas click flag canvasClicked = false; - // hide the context menu if necessary - nf.ContextMenu.hide(); - // get the selection box var selectionBox = d3.select('rect.selection'); if (!selectionBox.empty()) { @@ -866,6 +863,9 @@ nf.Canvas = (function () { */ reload: function () { return $.Deferred(function (deferred) { + // hide the context menu + nf.ContextMenu.hide(); + // get the process group to refresh everything var processGroupXhr = reloadProcessGroup(nf.Canvas.getGroupId()); var statusXhr = reloadFlowStatus(); @@ -983,6 +983,7 @@ nf.Canvas = (function () { // initialize the application initCanvas(); nf.Canvas.View.init(); + nf.ContextMenu.init(); nf.CanvasHeader.init(); nf.CanvasToolbox.init(); nf.CanvasToolbar.init(); @@ -1077,6 +1078,7 @@ nf.Canvas = (function () { setGroupId: function (gi) { groupId = gi; }, + /** * Get the group id. */ @@ -1222,6 +1224,10 @@ nf.Canvas = (function () { .scaleExtent([MIN_SCALE, MAX_SCALE]) .translate(TRANSLATE) .scale(SCALE) + .on('zoomstart', function () { + // hide the context menu + nf.ContextMenu.hide(); + }) .on('zoom', function () { // if we have zoomed, indicate that we are panning // to prevent deselection elsewhere diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js index 6365dd5f6d..dfb8d7af04 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-context-menu.js @@ -382,6 +382,14 @@ nf.ContextMenu = (function () { }; return { + init: function () { + $('#context-menu').on('contextmenu', function(evt) { + // stop propagation and prevent default + evt.preventDefault(); + evt.stopPropagation(); + }); + }, + /** * Shows the context menu. */ diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js index 852fe72b84..65373447e7 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph-control.js @@ -26,10 +26,13 @@ nf.GraphControl = (function () { */ init: function () { // pan up - nf.Common.addHoverEffect('#pan-up-button', 'pan-up', 'pan-up-hover').click(function () { + nf.Common.addHoverEffect('#pan-up-button', 'pan-up', 'pan-up-hover').on('click', function () { var translate = nf.Canvas.View.translate(); nf.Canvas.View.translate([translate[0], translate[1] + config.translateIncrement]); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true @@ -37,10 +40,13 @@ nf.GraphControl = (function () { }); // pan down - nf.Common.addHoverEffect('#pan-down-button', 'pan-down', 'pan-down-hover').click(function () { + nf.Common.addHoverEffect('#pan-down-button', 'pan-down', 'pan-down-hover').on('click', function () { var translate = nf.Canvas.View.translate(); nf.Canvas.View.translate([translate[0], translate[1] - config.translateIncrement]); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true @@ -48,10 +54,13 @@ nf.GraphControl = (function () { }); // pan left - nf.Common.addHoverEffect('#pan-left-button', 'pan-left', 'pan-left-hover').click(function () { + nf.Common.addHoverEffect('#pan-left-button', 'pan-left', 'pan-left-hover').on('click', function () { var translate = nf.Canvas.View.translate(); nf.Canvas.View.translate([translate[0] + config.translateIncrement, translate[1]]); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true @@ -59,10 +68,13 @@ nf.GraphControl = (function () { }); // pan right - nf.Common.addHoverEffect('#pan-right-button', 'pan-right', 'pan-right-hover').click(function () { + nf.Common.addHoverEffect('#pan-right-button', 'pan-right', 'pan-right-hover').on('click', function () { var translate = nf.Canvas.View.translate(); nf.Canvas.View.translate([translate[0] - config.translateIncrement, translate[1]]); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true @@ -70,9 +82,12 @@ nf.GraphControl = (function () { }); // zoom in - nf.Common.addHoverEffect('#zoom-in-button', 'zoom-in', 'zoom-in-hover').click(function () { + nf.Common.addHoverEffect('#zoom-in-button', 'zoom-in', 'zoom-in-hover').on('click', function () { nf.Canvas.View.zoomIn(); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true @@ -80,9 +95,12 @@ nf.GraphControl = (function () { }); // zoom out - nf.Common.addHoverEffect('#zoom-out-button', 'zoom-out', 'zoom-out-hover').click(function () { + nf.Common.addHoverEffect('#zoom-out-button', 'zoom-out', 'zoom-out-hover').on('click', function () { nf.Canvas.View.zoomOut(); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true @@ -90,9 +108,12 @@ nf.GraphControl = (function () { }); // zoom fit - nf.Common.addHoverEffect('#zoom-fit-button', 'fit-image', 'fit-image-hover').click(function () { + nf.Common.addHoverEffect('#zoom-fit-button', 'fit-image', 'fit-image-hover').on('click', function () { nf.Canvas.View.fit(); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true @@ -100,9 +121,12 @@ nf.GraphControl = (function () { }); // one to one - nf.Common.addHoverEffect('#zoom-actual-button', 'actual-size', 'actual-size-hover').click(function () { + nf.Common.addHoverEffect('#zoom-actual-button', 'actual-size', 'actual-size-hover').on('click', function () { nf.Canvas.View.actualSize(); + // hide the context menu + nf.ContextMenu.hide(); + // refresh the canvas nf.Canvas.View.refresh({ transition: true diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-search.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-search.js index 20167219aa..2f7529e627 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-search.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-search.js @@ -166,6 +166,9 @@ nf.Search = (function () { $('div.search-glass-pane').remove(); } }).focus(function () { + // hide the context menu if necessary + nf.ContextMenu.hide(); + // clear the text for the user to type $(this).val('').removeClass('search-flow'); }).blur(function () { diff --git a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js index 67a6cc1963..d2cde9a503 100644 --- a/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js +++ b/nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js @@ -62,6 +62,10 @@ nf.ToolbarAction.prototype.initAction = function () { } }).click(function () { if (!$(this).hasClass(self.disableCls)) { + // hide the context menu + nf.ContextMenu.hide(); + + // execute the action nf.Actions[self.action](nf.CanvasUtils.getSelection()); } }).appendTo(this.container);