NIFI-140:

- Address style issues with slider widget in processor configuration and provenance lineage.
- Documentation in count, center, and ellipsis plugins.
- Disable text selection over canvas, new processor dialog, and context menu.
- Updated the draggable component icons to support dragging over all parts of the page. Only creating new component when the drop occurs over the canvas. Other drops will be disabled.

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp

@@ -84,7 +84,7 @@
         <jsp:include page="/WEB-INF/partials/canvas/fill-color-dialog.jsp"/>
         <jsp:include page="/WEB-INF/partials/canvas/connections-dialog.jsp"/>
         <jsp:include page="/WEB-INF/partials/canvas/flow-status.jsp"/>
-        <div id="canvas-container"><!-- inject canvas here --></div>
+        <div id="canvas-container" class="unselectable"></div>
         <div id="canvas-tooltips">
             <div id="processor-tooltips"></div>
             <div id="port-tooltips"></div>
@@ -111,6 +111,6 @@
         <jsp:include page="/WEB-INF/partials/connection-details.jsp"/>
         <div id="faded-background"></div>
         <div id="glass-pane"></div>
-        <div id="context-menu"></div>
+        <div id="context-menu" class="unselectable"></div>
     </body>
 </html>

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp

@@ -53,5 +53,5 @@
 </div>
 <div id="birdseye-collapse" class="birdseye-expanded"></div>
 <div id="birdseye-container">
-    <div id="birdseye"><!-- inject outline here --></div>
+    <div id="birdseye"></div>
 </div>

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp

@@ -37,7 +37,7 @@
             </div>
         </div>
         <div id="processor-types-container">
-            <div id="processor-types-table"></div>
+            <div id="processor-types-table" class="unselectable"></div>
             <div id="processor-description-container">
                 <div id="processor-type-name" class="ellipsis"></div>
                 <div id="processor-type-description" class="ellipsis multiline"></div>

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/main.css

@@ -76,6 +76,15 @@ div.context-menu-item-text {
     General Styles
 */
 
+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 .clear {
     clear: both;
 }

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/processor-configuration.css

@@ -143,6 +143,7 @@ div.relationship-description {
 
 #run-duration-slider {
     margin-top: 5px;
+    border-radius: 0;
 }
 
 #run-duration-slider .ui-slider-handle {

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/css/provenance.css

@@ -529,6 +529,16 @@ div.progress-label {
     margin-left: 10px;
 }
 
+#provenance-lineage-slider {
+    border-radius: 0;
+}
+
+#provenance-lineage-slider .ui-slider-handle {
+    border-radius: 0;
+    border: 1px solid #999;
+    outline: none;
+}
+
 #event-timeline {
     margin-top: 8px;
     color: #9F6000;

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/jquery/jquery.center.js

@@ -14,6 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/**
+ * Simple jQuery plugin to center any matched elements. Implementation
+ * specifics suggested on StackOverflow.
+ * 
+ * @param {type} $
+ * @returns {undefined}
+ */
 (function ($) {
     $.fn.center = function () {
         return this.each(function () {
@@ -23,5 +31,5 @@
                 'left': ($(window).width() - $(this).outerWidth()) / 2 + $(window).scrollLeft() + 'px'
             });
         });
-    }
+    };
 })(jQuery);

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/jquery/jquery.count.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * Adds a simple character counter functionality to the matched elements. The 
  * options are specified in the following format:
@@ -22,6 +23,11 @@
  *   charCountField: element or dom id for displaying the remaining characters (must support .text())
  *   maxLength: maxlength in case the matched element does not have a max length set
  * }
+ * 
+ * Implementation specifics suggested on StackOverflow.
+ * 
+ * @param {type} $
+ * @returns {undefined}
  */
 (function ($) {
 
@@ -38,14 +44,16 @@
     };
 
     var methods = {
+        
         /**
-         * Initializes the combo box.
+         * Initializes the count widget.
+         * 
+         * @param {type} options
          */
         init: function (options) {
             return this.each(function () {
                 // ensure the options have been properly specified
-                if (isDefinedAndNotNull(options) &&
+                if (isDefinedAndNotNull(options) && isDefinedAndNotNull(options.charCountField)) {
-                        isDefinedAndNotNull(options.charCountField)) {
 
                     // get the field
                     var field = $(this);
@@ -87,5 +95,5 @@
         } else {
             return methods.init.apply(this, arguments);
         }
-    }
+    };
 })(jQuery);

nar-bundles/framework-bundle/framework/web/nifi-web-ui/src/main/webapp/js/jquery/jquery.ellipsis.js

@@ -14,6 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/**
+ * Plugin to provide support for generating ellipsis. This plugin comprises
+ * a number of suggested techniques found on StackOverflow.
+ * 
+ * @param {type} $
+ * @returns {undefined}
+ */
 (function ($) {
 
     var entityMap = {
@@ -40,6 +48,8 @@
      * white-space: nowrap;
      * 
      * If multiline is desired, add a 'multiline' class to the element.
+     * 
+     * @param {type} addTooltip
      */
     $.fn.ellipsis = function (addTooltip) {
         addTooltip = (typeof addTooltip === 'undefined' || addTooltip === null) ? true : addTooltip;
@@ -50,7 +60,6 @@
             return ('textOverflow' in s || 'OTextOverflow' in s);
         }
 
-        // function to performing a binary search - this approach was found on stackoverflow
         function binarySearch(length, funct) {
             var low = 0;
             var high = length - 1;

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

@@ -66,10 +66,11 @@ nf.CanvasToolbox = (function () {
         }, function () {
             $(this).removeClass(hoverCls).addClass(cls);
         }).draggable({
+            'zIndex': 1011,
             'helper': function () {
-                return $('<div class="toolbox-icon"></div>').addClass(dragCls);
+                return $('<div class="toolbox-icon"></div>').addClass(dragCls).appendTo('body');
             },
-            'containment': '#canvas-container',
+            'containment': 'body',
             'stop': function (e, ui) {
                 var translate = nf.Canvas.View.translate();
                 var scale = nf.Canvas.View.scale();
@@ -77,15 +78,17 @@ nf.CanvasToolbox = (function () {
                 var mouseX = e.originalEvent.pageX;
                 var mouseY = e.originalEvent.pageY - nf.Canvas.CANVAS_OFFSET;
 
-                // adjust the x and y coordinates accordingly
+                // invoke the drop handler if we're over the canvas
-                var x = (mouseX / scale) - (translate[0] / scale);
+                if (mouseX >= 0 && mouseY >= 0) {
-                var y = (mouseY / scale) - (translate[1] / scale);
+                    // adjust the x and y coordinates accordingly
+                    var x = (mouseX / scale) - (translate[0] / scale);
+                    var y = (mouseY / scale) - (translate[1] / scale);
 
-                // invoke the drop handler
+                    dropHandler({
-                dropHandler({
+                        x: x,
-                    x: x,
+                        y: y
-                    y: y
+                    });
-                });
+                } 
             }
         }).appendTo(toolbox);
     };