NIFI-347:

- Fixing threshold for self loops.
- Drawing preview of self loops while dragging the new connection.
- Addressing all cases when we want to prevent new connection attempts.

nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js

@@ -409,10 +409,10 @@ nf.Canvas = (function () {
 
                     // update the selection box
                     selectionBox.attr(d);
+                    
+                    // prevent further propagation (to parents)
+                    d3.event.stopPropagation();
                 }
-
-                // prevent further propagation (to parents)
-                d3.event.stopPropagation();
             }
         })
         .on('mouseup.selection', function () {

nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js

@@ -20,6 +20,21 @@ nf.Connectable = (function () {
     var canvas;
     var origin;
 
+    /**
+     * Determines if we want to allow adding connections in the current state:
+     * 
+     * 1) When shift is down, we could be adding components to the current selection.
+     * 2) When the selection box is visible, we are in the process of moving all the
+     * components currently selected.
+     * 3) When the drag selection box is visible, we are in the process or selecting components
+     * using the selection box.
+     * 
+     * @returns {boolean}
+     */
+    var allowConnection = function () {
+        return !d3.event.shiftKey && d3.select('rect.drag-selection').empty() && d3.select('rect.selection').empty();
+    };
+
     return {
         init: function () {
             canvas = d3.select('#canvas');
@@ -102,17 +117,27 @@ nf.Connectable = (function () {
                         }).attr('d', function (pathDatum) {
                             if (!destination.empty() && destination.classed('connectable-destination')) {
                                 var destinationData = destination.datum();
+                                
+                                // show the line preview as appropriate
+                                if (pathDatum.sourceId === destinationData.component.id) {
+                                    var x = pathDatum.x;
+                                    var y = pathDatum.y;
+                                    var componentOffset = pathDatum.sourceWidth / 2;
+                                    var xOffset = nf.Connection.config.selfLoopXOffset;
+                                    var yOffset = nf.Connection.config.selfLoopYOffset;
+                                    return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z';
+                                } else {
+                                    // get the position on the destination perimeter
+                                    var end = nf.CanvasUtils.getPerimeterPoint(pathDatum, {
+                                        'x': destinationData.component.position.x,
+                                        'y': destinationData.component.position.y,
+                                        'width': destinationData.dimensions.width,
+                                        'height': destinationData.dimensions.height
+                                    });
 
-                                // get the position on the destination perimeter
+                                    // direct line between components to provide a 'snap feel'
-                                var end = nf.CanvasUtils.getPerimeterPoint(pathDatum, {
+                                    return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
-                                    'x': destinationData.component.position.x,
+                                }
-                                    'y': destinationData.component.position.y,
-                                    'width': destinationData.dimensions.width,
-                                    'height': destinationData.dimensions.height
-                                });
-
-                                // direct line between components to provide a 'snap feel'
-                                return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + end.x + ' ' + end.y;
                             } else {
                                 return 'M' + pathDatum.x + ' ' + pathDatum.y + 'L' + d3.event.x + ' ' + d3.event.y;
                             }
@@ -157,24 +182,11 @@ nf.Connectable = (function () {
                             // remove the connector
                             connector.remove();
                         } else {
-                            var destinationData = destination.datum();
-
-                            // if this is a self loop we need to insert some bend points
-                            if (connectorData.sourceId === destinationData.component.id) {
-                                connector.attr('d', function (pathDatum) {
-                                    var x = pathDatum.x;
-                                    var y = pathDatum.y;
-                                    var componentOffset = pathDatum.sourceWidth / 2;
-                                    var xOffset = nf.Connection.config.selfLoopXOffset;
-                                    var yOffset = nf.Connection.config.selfLoopYOffset;
-                                    return 'M' + x + ' ' + y + 'L' + (x + componentOffset + xOffset) + ' ' + (y - yOffset) + 'L' + (x + componentOffset + xOffset) + ' ' + (y + yOffset) + 'Z';
-                                });
-                            }
-                            
                             // remove the add connect img
                             addConnect.remove();
 
                             // create the connection
+                            var destinationData = destination.datum();
                             nf.ConnectionConfiguration.createConnection(connectorData.sourceId, destinationData.component.id);
                         }
                     });
@@ -183,14 +195,14 @@ nf.Connectable = (function () {
         activate: function (components) {
             components
                     .on('mouseenter.connectable', function (d) {
-                        if (!d3.event.shiftKey && d3.select('rect.drag-selection').empty()) {
+                        if (allowConnection()) {
                             var selection = d3.select(this);
 
                             // ensure the current component supports connection source
                             if (nf.CanvasUtils.isValidConnectionSource(selection)) {
                                 // see if theres already a connector rendered
-                                var anyConnector = d3.select('image.add-connect');
+                                var addConnect = d3.select('image.add-connect');
-                                if (anyConnector.empty()) {
+                                if (addConnect.empty()) {
                                     var x = (d.dimensions.width / 2) - 14;
                                     var y = (d.dimensions.height / 2) - 14;
 
@@ -214,17 +226,16 @@ nf.Connectable = (function () {
                     })
                     .on('mouseleave.connectable', function () {
                         // conditionally remove the connector
-                        var connector = d3.select(this).select('image.add-connect');
+                        var addConnect = d3.select(this).select('image.add-connect');
-                        if (!connector.empty() && !connector.classed('dragging')) {
+                        if (!addConnect.empty() && !addConnect.classed('dragging')) {
-                            connector.remove();
+                            addConnect.remove();
                         }
                     })
                     // Using mouseover/out to workaround chrome issue #122746
                     .on('mouseover.connectable', function () {
                         // mark that we are hovering when appropriate
-                        var selection = d3.select(this);
+                        d3.select(this).classed('hover', function () {
-                        selection.classed('hover', function () {
+                            return allowConnection();
-                            return !d3.event.shiftKey && !selection.classed('hover') && d3.select('rect.drag-selection').empty();
                         });
                     })
                     .on('mouseout.connection', function () {