NIFI-325:

- Allowing the processor/label color to be entered by hand.
- Allowing the color of multiple processors or labels to be configured at the same time.

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

@@ -19,10 +19,14 @@
     <div class="dialog-content">
         <div class="setting">
             <div class="setting-name">Color</div>
+            <div class="setting-field">
+                <input type="text" id="fill-color" value="#FFFFFF"/>
+            </div>
+            <div class="setting-name" style="margin-top: 10px;">Value</div>
             <div class="setting-field">
                 <input type="text" id="fill-color-value" value="#FFFFFF"/>
             </div>
-            <div class="setting-name" style="margin-top: 5px;">Preview</div>
+            <div class="setting-name" style="margin-top: 10px;">Preview</div>
             <div class="setting-field">
                 <div id="fill-color-processor-preview">
                     <div id="fill-color-processor-preview-name">Processor</div>

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

@@ -88,10 +88,14 @@
     z-index: 1301;
     display: none;
     width: 195px;
-    height: 345px;
+    height: 400px;
     border: 1px solid #eee;
 }
 
+#fill-color-value {
+    width: 165px;
+}
+
 #fill-color-processor-preview {
     width: 173px;
     height: 56px;

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

@@ -843,20 +843,39 @@ nf.Actions = (function () {
          * @param {type} selection      The selection
          */
         fillColor: function (selection) {
-            if (selection.size() === 1 && (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isLabel(selection))) {
+            var selectedProcessors = selection.filter(function(d) {
+                return nf.CanvasUtils.isProcessor(d3.select(this));
+            });
+            var selectedLabels = selection.filter(function(d) {
+                return nf.CanvasUtils.isLabel(d3.select(this));
+            });
+            
+            var allProcessors = selectedProcessors.size() === selection.size();
+            var allLabels = selectedLabels.size() === selection.size();
+            
+            if (allProcessors || allLabels) {
+                var color;
+                if (allProcessors) {
+                    color = nf.Processor.defaultColor();
+                } else {
+                    color = nf.Label.defaultColor();
+                }
+                
+                // if there is only one component selected, get its color otherwise use default
+                if (selection.size() === 1) {
                     var selectionData = selection.datum();
-                var color = nf[selectionData.type].defaultColor();
                     
                     // use the specified color if appropriate
                     if (nf.Common.isDefinedAndNotNull(selectionData.component.style['background-color'])) {
                         color = selectionData.component.style['background-color'];
                     }
+                }
 
                 // set the color
-                $('#fill-color-value').minicolors('value', color);
+                $('#fill-color').minicolors('value', color);
 
                 // update the preview visibility
-                if (nf.CanvasUtils.isProcessor(selection)) {
+                if (allProcessors) {
                     $('#fill-color-processor-preview').show();
                     $('#fill-color-label-preview').hide();
                 } else {

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

@@ -170,22 +170,22 @@ nf.CanvasHeader = (function () {
                         buttonText: 'Apply',
                         handler: {
                             click: function () {
-                                // close the dialog
-                                $('#fill-color-dialog').modal('hide');
-
-                                // ensure the selection is a processor or label
                                 var selection = nf.CanvasUtils.getSelection();
-                                if (selection.size() === 1 && (nf.CanvasUtils.isProcessor(selection) || nf.CanvasUtils.isLabel(selection))) {
+                                
+                                // color the selected components
+                                selection.each(function (d) {
+                                    var selected = d3.select(this);
+                                    
                                     var revision = nf.Client.getRevision();
-                                    var selectionData = selection.datum();
+                                    var selectedData = selected.datum();
 
                                     // get the color and update the styles
-                                    var color = $('#fill-color-value').val();
+                                    var color = $('#fill-color').minicolors('value');
 
                                     // update the style for the specified component
                                     $.ajax({
                                         type: 'PUT',
-                                        url: selectionData.component.uri,
+                                        url: selectedData.component.uri,
                                         data: {
                                             'version': revision.version,
                                             'clientId': revision.clientId,
@@ -197,7 +197,7 @@ nf.CanvasHeader = (function () {
                                         nf.Client.setRevision(response.revision);
 
                                         // update the processor
-                                        if (nf.CanvasUtils.isProcessor(selection)) {
+                                        if (nf.CanvasUtils.isProcessor(selected)) {
                                             nf.Processor.set(response.processor);
                                         } else {
                                             nf.Label.set(response.label);
@@ -210,7 +210,10 @@ nf.CanvasHeader = (function () {
                                             });
                                         }
                                     });
-                                }
+                                });
+                                
+                                // close the dialog
+                                $('#fill-color-dialog').modal('hide');
                             }
                         }
                     }, {
@@ -221,13 +224,24 @@ nf.CanvasHeader = (function () {
                                 $('#fill-color-dialog').modal('hide');
                             }
                         }
-                    }]
+                    }],
+                handler: {
+                    close: function () {
+                        // clear the current color
+                        $('#fill-color-value').val('');
+                        $('#fill-color').minicolors('value', '');
+                    }
+                }
             });
 
             // initialize the fill color picker
-            $('#fill-color-value').minicolors({
+            $('#fill-color').minicolors({
                 inline: true,
                 change: function (hex, opacity) {
+                    // update the value
+                    $('#fill-color-value').val(hex);
+
+                    // always update the preview
                     $('#fill-color-processor-preview, #fill-color-label-preview').css({
                         'border-color': hex,
                         'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')',
@@ -236,6 +250,24 @@ nf.CanvasHeader = (function () {
                 }
             });
             
+            // updates the color if its a valid hex color string
+            var updateColor = function () {
+                var hex = $('#fill-color-value').val();
+                
+                // only update the fill color when its a valid hex color string
+                if (/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex)) {
+                    $('#fill-color').minicolors('value', hex);
+                }
+            };
+            
+            // initialize the fill color value
+            $('#fill-color-value').on('blur', updateColor).on('keyup', function(e) {
+                var code = e.keyCode ? e.keyCode : e.which;
+                if (code === $.ui.keyCode.ENTER) {
+                    updateColor();
+                }
+            });
+
             // mousewheel -> IE, Chrome
             // DOMMouseScroll -> FF
             // wheel -> FF, IE

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

@@ -141,14 +141,19 @@ nf.CanvasToolbar = (function () {
                     actions['group'].disable();
                 }
 
-                // determine how many colorable components are selected
+                // determine if the current selection is entirely processors or labels
-                var colorableComponents = selection.filter(function (d) {
+                var selectedProcessors = selection.filter(function(d) {
-                    var selected = d3.select(this);
+                    return nf.CanvasUtils.isProcessor(d3.select(this));
-                    return nf.CanvasUtils.isProcessor(selected) || nf.CanvasUtils.isLabel(selected);
+                });
+                var selectedLabels = selection.filter(function(d) {
+                    return nf.CanvasUtils.isLabel(d3.select(this));
                 });
 
+                var allProcessors = selectedProcessors.size() === selection.size();
+                var allLabels = selectedLabels.size() === selection.size();
+
                 // if there are any colorable components enable the button
-                if (colorableComponents.size() === 1 && colorableComponents.size() === selection.size()) {
+                if (allProcessors || allLabels) {
                     actions['fill'].enable();
                 } else {
                     actions['fill'].disable();