From 56a6bc4fe494828fbfe66b39a16d38cf4133c043 Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Tue, 10 Feb 2015 20:43:39 -0500
Subject: [PATCH 01/10] NIFI-340: - Adding screencasts.

---
 nifi-site/src/includes/topbar.hbs        |  1 +
 nifi-site/src/pages/html/screencasts.hbs | 35 ++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/nifi-site/src/includes/topbar.hbs b/nifi-site/src/includes/topbar.hbs
index dd8e80536a..6069a34a4f 100644
--- a/nifi-site/src/includes/topbar.hbs
+++ b/nifi-site/src/includes/topbar.hbs
@@ -28,6 +28,7 @@
                     <a href="#">Documentation</a>
                     <ul class="dropdown">
                         <li><a href="faq.html">FAQ</a></li>
+                        <li><a href="screencasts.html">Screencasts</a></li>
                         <li><a href="overview.html">NiFi Overview</a></li>
                         <li><a href="user-guide.html">User Guide</a></li>
                         <li><a href="developer-guide.html">Developer Guide</a></li>
diff --git a/nifi-site/src/pages/html/screencasts.hbs b/nifi-site/src/pages/html/screencasts.hbs
index 497cf252c1..78c0466876 100644
--- a/nifi-site/src/pages/html/screencasts.hbs
+++ b/nifi-site/src/pages/html/screencasts.hbs
@@ -11,5 +11,40 @@ title: Apache NiFi Screencasts
 <div class="medium-space"></div>
 <div class="row">
     <div class="large-12 columns">
+        <a href="#" data-reveal-id="toolbar-overview">NiFi Toolbar Overview</a>
+        <div id="toolbar-overview" class="reveal-modal medium" data-reveal>
+            <h2>NiFi Toolbar Overview</h2>
+            <div class="flex-video widescreen" style="display: block;">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/LGXRAVUzL4U" frameborder="0" allowfullscreen></iframe>
+            </div>
+            <a class="close-reveal-modal">&#215;</a>
+        </div>
+        <br/>
+        <a href="#" data-reveal-id="creating-process-groups">Creating Process Groups</a>
+        <div id="creating-process-groups" class="reveal-modal medium" data-reveal>
+            <h2>Creating Process Groups</h2>
+            <div class="flex-video widescreen" style="display: block;">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/hAveiDgDj-8" frameborder="0" allowfullscreen></iframe>
+            </div>
+            <a class="close-reveal-modal">&#215;</a>
+        </div>
+        <br/>
+        <a href="#" data-reveal-id="creating-templates">Creating Templates</a>
+        <div id="creating-templates" class="reveal-modal medium" data-reveal>
+            <h2>Creating Templates</h2>
+            <div class="flex-video widescreen" style="display: block;">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/PpmL-IMoCnU" frameborder="0" allowfullscreen></iframe>
+            </div>
+            <a class="close-reveal-modal">&#215;</a>
+        </div>
+        <br/>
+        <a href="#" data-reveal-id="managing-templates">Managing Templates</a>
+        <div id="managing-templates" class="reveal-modal medium" data-reveal>
+            <h2>Managing Templates</h2>
+            <div class="flex-video widescreen" style="display: block;">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/HU5_3PlNmtQ" frameborder="0" allowfullscreen></iframe>
+            </div>
+            <a class="close-reveal-modal">&#215;</a>
+        </div>
     </div>
 </div>
\ No newline at end of file

From ee3e92ce63f39d05383ac083d187254292e40935 Mon Sep 17 00:00:00 2001
From: David Medinets <david.medinets@gmail.com>
Date: Wed, 11 Feb 2015 23:06:38 -0500
Subject: [PATCH 02/10] Add link for main website.

This change makes it easy for users to find documentation.
---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 7bbc4dd327..14f1673f65 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,10 @@ Apache NiFi is a dataflow system based on the concepts of flow-based programming
 follow the directions found there.
 - Build nifi.  Change directory to 'nifi' and follow the directions found there.
 
+## Documentation
+
+See http://nifi.incubator.apache.org/ for the latest documentation.
+
 ## License
 
 Except as otherwise noted this software is licensed under the

From ab32bbff136a61294f5ee20890bf92340c29b16c Mon Sep 17 00:00:00 2001
From: Laszlo Hornyak <laszlo.hornyak@gmail.com>
Date: Thu, 12 Feb 2015 08:59:27 +0100
Subject: [PATCH 03/10] typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7bbc4dd327..9257edc5df 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 -->
 # Apache NiFi
 
-Apache NiFi is a dataflow system based on the concepts of flow-based programming. It is currently apart of the Apache Incubator.
+Apache NiFi is a dataflow system based on the concepts of flow-based programming. It is currently part of the Apache Incubator.
 
 ## Table of Contents
 

From e0390ec3f4c9f90112addb00eeaa5882a647cdfc Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Thu, 12 Feb 2015 07:09:18 -0500
Subject: [PATCH 04/10] NIFI-341: - Ensuring existing selection is cleared when
 adding a new label to the graph.

---
 .../src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js
index 8d005e2f0a..325564177f 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js
@@ -882,7 +882,9 @@ nf.CanvasToolbox = (function () {
                 nf.Client.setRevision(response.revision);
 
                 // add the label to the graph
-                nf.Label.add(response.label, true);
+                nf.Graph.add({
+                    'labels': [response.label]
+                }, true);
 
                 // update the birdseye
                 nf.Birdseye.refresh();

From e486c5642bf7bf0131f3c19a117e8448a75ba8af Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Thu, 12 Feb 2015 07:59:04 -0500
Subject: [PATCH 05/10] NIFI-343: - Preventing default action when shift/ctrl
 clicking images.

---
 .../nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
index 83a3117974..c9211b2a85 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js
@@ -393,7 +393,7 @@ nf.CanvasUtils = (function () {
          */
         disableImageHref: function (selection) {
             selection.on('click.disableImageHref', function () {
-                if (d3.event.ctrlKey) {
+                if (d3.event.ctrlKey || d3.event.shiftKey) {
                     d3.event.preventDefault();
                 }
             });

From 05c01952ad4604c5ca5ff3e75cc7823300de818b Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Thu, 12 Feb 2015 09:52:37 -0500
Subject: [PATCH 06/10] NIFI-342: - Setting focus in filter field on add
 processor dialog. - Ensuring toolbar button state is updated when adding a
 component. - Clear name/URL fields when canceling add port/group dialogs.

---
 .../main/webapp/js/nf/canvas/nf-actions.js    |  2 -
 .../webapp/js/nf/canvas/nf-canvas-toolbox.js  | 52 ++++++++++++-------
 .../src/main/webapp/js/nf/canvas/nf-graph.js  |  6 ++-
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
index 5fc94e1b4c..02e0c3a7fc 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
@@ -1065,7 +1065,6 @@ nf.Actions = (function () {
 
                             // refresh the birdseye/toolbar
                             nf.Birdseye.refresh();
-                            nf.CanvasToolbar.refresh();
 
                             // remove the original snippet
                             nf.Snippet.remove(snippet.id).fail(reject);
@@ -1078,7 +1077,6 @@ nf.Actions = (function () {
 
                                 // refresh the birdseye/toolbar
                                 nf.Birdseye.refresh();
-                                nf.CanvasToolbar.refresh();
                             });
 
                             // reject the deferred
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js
index 325564177f..7de17f4546 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbox.js
@@ -373,6 +373,9 @@ nf.CanvasToolbox = (function () {
 
         // show the dialog
         $('#new-processor-dialog').modal('show');
+        
+        // set the focus in the filter field
+        $('#processor-type-filter').focus();
 
         // adjust the grid canvas now that its been rendered
         grid.resizeCanvas();
@@ -427,12 +430,11 @@ nf.CanvasToolbox = (function () {
      */
     var promptForInputPortName = function (pt) {
         var addInputPort = function () {
-            // hide the dialog
-            $('#new-port-dialog').modal('hide');
-
             // get the name of the input port and clear the textfield
             var portName = $('#new-port-name').val();
-            $('#new-port-name').val('');
+            
+            // hide the dialog
+            $('#new-port-dialog').modal('hide');
 
             // create the input port
             createInputPort(portName, pt);
@@ -514,12 +516,11 @@ nf.CanvasToolbox = (function () {
      */
     var promptForOutputPortName = function (pt) {
         var addOutputPort = function () {
-            // hide the dialog
-            $('#new-port-dialog').modal('hide');
-
             // get the name of the output port and clear the textfield
             var portName = $('#new-port-name').val();
-            $('#new-port-name').val('');
+            
+            // hide the dialog
+            $('#new-port-dialog').modal('hide');
 
             // create the output port
             createOutputPort(portName, pt);
@@ -641,12 +642,11 @@ nf.CanvasToolbox = (function () {
      */
     var promptForRemoteProcessGroupUri = function (pt) {
         var addRemoteProcessGroup = function () {
-            // hide the dialog
-            $('#new-remote-process-group-dialog').modal('hide');
-
             // get the uri of the controller and clear the textfield
             var remoteProcessGroupUri = $('#new-remote-process-group-uri').val();
-            $('#new-remote-process-group-uri').val('');
+            
+            // hide the dialog
+            $('#new-remote-process-group-dialog').modal('hide');
 
             // create the remote process group
             createRemoteProcessGroup(remoteProcessGroupUri, pt);
@@ -1123,19 +1123,34 @@ nf.CanvasToolbox = (function () {
                 // configure the new port dialog
                 $('#new-port-dialog').modal({
                     headerText: 'Add Port',
-                    overlayBackground: false
+                    overlayBackground: false,
+                    handler: {
+                        close: function () {
+                            $('#new-port-name').val('');
+                        }
+                    }
                 });
 
                 // configure the new process group dialog
                 $('#new-process-group-dialog').modal({
                     headerText: 'Add Process Group',
-                    overlayBackground: false
+                    overlayBackground: false,
+                    handler: {
+                        close: function () {
+                            $('#new-process-group-name').val('');
+                        }
+                    }
                 });
 
                 // configure the new remote process group dialog
                 $('#new-remote-process-group-dialog').modal({
                     headerText: 'Add Remote Process Group',
-                    overlayBackground: false
+                    overlayBackground: false,
+                    handler: {
+                        close: function () {
+                            $('#new-remote-process-group-uri').val('');
+                        }
+                    }
                 });
 
                 // configure the instantiate template dialog
@@ -1164,12 +1179,11 @@ nf.CanvasToolbox = (function () {
         promptForGroupName: function (pt) {
             return $.Deferred(function (deferred) {
                 var addGroup = function () {
-                    // hide the dialog
-                    $('#new-process-group-dialog').modal('hide');
-
                     // get the name of the group and clear the textfield
                     var groupName = $('#new-process-group-name').val();
-                    $('#new-process-group-name').val('');
+
+                    // hide the dialog
+                    $('#new-process-group-dialog').modal('hide');
 
                     // create the group and resolve the deferred accordingly
                     createGroup(groupName, pt).done(function (response) {
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
index 100f0f8e4b..a9070c7fdc 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-graph.js
@@ -67,7 +67,6 @@ nf.Graph = (function () {
 
             // if we are going to select the new components, deselect the previous selection
             if (selectAll) {
-                // deselect the current selection
                 nf.CanvasUtils.getSelection().classed('selected', false);
             }
 
@@ -96,6 +95,11 @@ nf.Graph = (function () {
             if (!nf.Common.isEmpty(processGroupContents.connections)) {
                 nf.Connection.add(processGroupContents.connections, selectAll);
             }
+            
+            // trigger the toolbar to refresh if the selection is changing
+            if (selectAll) {
+                nf.CanvasToolbar.refresh();
+            }
         },
         
         /**

From a416dfdb0f453861c71aa66be70b0f01e8aee5a5 Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Thu, 12 Feb 2015 10:19:56 -0500
Subject: [PATCH 07/10] NIFI-346: - Fixing issue when attempting to close
 dialogs via Esc keystroke. Was exiting method early with dialogs open to
 prevent other shortcuts.

---
 .../src/main/webapp/js/nf/canvas/nf-canvas.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index 26db8374dc..f11ec30334 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
@@ -510,12 +510,24 @@ nf.Canvas = (function () {
         $(window).on('resize', function () {
             updateGraphSize();
         }).on('keydown', function (evt) {
+            var isCtrl = evt.ctrlKey || evt.metaKey;
+            
+            // consider escape, before checking dialogs
+            if (!isCtrl && evt.keyCode === 27) {
+                // esc
+                nf.Actions.hideDialogs();
+
+                evt.preventDefault();
+                return;
+            }
+            
             // if a dialog is open, disable canvas shortcuts
             if ($('.dialog').is(':visible')) {
                 return;
             }
 
-            if (evt.ctrlKey || evt.metaKey) {
+            // handle shortcuts
+            if (isCtrl) {
                 if (evt.keyCode === 82) {
                     // ctrl-r
                     nf.Actions.reloadStatus();
@@ -543,11 +555,6 @@ nf.Canvas = (function () {
                     // delete
                     nf.Actions['delete'](nf.CanvasUtils.getSelection());
 
-                    evt.preventDefault();
-                } else if (evt.keyCode === 27) {
-                    // esc
-                    nf.Actions.hideDialogs();
-
                     evt.preventDefault();
                 }
             }

From a7eb1b76447ead258973aee0e109db5b2c70ef89 Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Thu, 12 Feb 2015 12:33:59 -0500
Subject: [PATCH 08/10] NIFI-347: - Restoring the add connect image when
 stopping a drag event while still over the original source component and
 inside of where the source will become the destination (self loop).

---
 .../webapp/js/nf/canvas/nf-connectable.js     | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
index 598b2ef601..e34c2a25a9 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
+++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
@@ -122,19 +122,41 @@ nf.Connectable = (function () {
                         // stop further propagation
                         d3.event.sourceEvent.stopPropagation();
 
+                        // get the add connect img
+                        var addConnect = d3.select(this);
+
                         // get the connector, if it the current point is not over a new destination
                         // the connector will be removed. otherwise it will be removed after the
                         // connection has been configured/cancelled
                         var connector = d3.select('path.connector');
+                        var connectorData = connector.datum();
 
                         // get the destination
                         var destination = d3.select('g.connectable-destination');
 
                         // we are not over a new destination
                         if (destination.empty()) {
+                            // get the source to determine if we are still over it
+                            var source = d3.select('#id-' + connectorData.sourceId);
+                            var sourceData = source.datum();
+                            
+                            // get the mouse position relative to the source
+                            var position = d3.mouse(source.node());
+                            
+                            // if the position is outside the component, remove the add connect img
+                            if (position[0] < 0 || position[0] > sourceData.dimensions.width || position[1] < 0 || position[1] > sourceData.dimensions.height) {
+                                addConnect.remove();
+                            } else {
+                                // reset the add connect img by restoring the position and place in the DOM
+                                addConnect.classed('dragging', false).attr('transform', function () {
+                                    return 'translate(' + d.origX + ', ' + d.origY + ')';
+                                });
+                                source.node().appendChild(this);
+                            }
+                            
+                            // remove the connector
                             connector.remove();
                         } else {
-                            var connectorData = connector.datum();
                             var destinationData = destination.datum();
 
                             // if this is a self loop we need to insert some bend points
@@ -148,13 +170,13 @@ nf.Connectable = (function () {
                                     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
                             nf.ConnectionConfiguration.createConnection(connectorData.sourceId, destinationData.component.id);
                         }
-
-                        // remove this component
-                        d3.select(this).remove();
                     });
         },
         
@@ -173,6 +195,10 @@ nf.Connectable = (function () {
                                     var y = (d.dimensions.height / 2) - 14;
 
                                     selection.append('image')
+                                            .datum({
+                                                origX: x,
+                                                origY: y
+                                            })
                                             .call(connect)
                                             .call(nf.CanvasUtils.disableImageHref)
                                             .attr({

From 851fe298b836f19e2f3f0fa890639f070de62d3d Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Thu, 12 Feb 2015 14:17:36 -0500
Subject: [PATCH 09/10] 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.

---
 .../src/main/webapp/js/nf/canvas/nf-canvas.js |  6 +-
 .../webapp/js/nf/canvas/nf-connectable.js     | 77 +++++++++++--------
 2 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index f11ec30334..2886f2104d 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ b/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 () {
diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
index e34c2a25a9..24f0f4543d 100644
--- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connectable.js
+++ b/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
-                                var end = nf.CanvasUtils.getPerimeterPoint(pathDatum, {
-                                    '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;
+                                    // 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');
-                                if (anyConnector.empty()) {
+                                var addConnect = d3.select('image.add-connect');
+                                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');
-                        if (!connector.empty() && !connector.classed('dragging')) {
-                            connector.remove();
+                        var addConnect = d3.select(this).select('image.add-connect');
+                        if (!addConnect.empty() && !addConnect.classed('dragging')) {
+                            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);
-                        selection.classed('hover', function () {
-                            return !d3.event.shiftKey && !selection.classed('hover') && d3.select('rect.drag-selection').empty();
+                        d3.select(this).classed('hover', function () {
+                            return allowConnection();
                         });
                     })
                     .on('mouseout.connection', function () {

From b37d8fb73302933e33db106637498579aa775b47 Mon Sep 17 00:00:00 2001
From: joewitt <joewitt@apache.org>
Date: Thu, 12 Feb 2015 21:46:55 -0500
Subject: [PATCH 10/10] NIFI-162

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 385176148d..b2b054ae63 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 -->
 # Apache NiFi
 
-Apache NiFi is a dataflow system based on the concepts of flow-based programming. It is currently part of the Apache Incubator.
+Apache NiFi is an easy to use, powerful, and reliable system to process and distribute data. It is currently apart of the Apache Incubator.
 
 ## Table of Contents