[NIFI-2888] Display processor fill color when zoomed in/out. This closes #1151.

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

@@ -28,9 +28,16 @@
             </div>
             <div class="setting-name" style="margin-top: 10px;">Preview</div>
             <div class="setting-field">
-                <div id="fill-color-processor-preview" class="icon icon-processor"></div>
+                <div id="fill-color-processor-preview">
+                    <div id="fill-color-processor-preview-icon" class="icon icon-processor"></div>
+                    <div id="fill-color-processor-preview-name" style="margin-left: 35px; line-height: 25px; font-size: 12px; height: 25px; color: #262626;">Processor Name</div>
+                    <div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div>
+                    <div style="width: 100%; height: 9px; border-bottom: 1px solid #c7d2d7; background-color: #ffffff;"></div>
+                    <div style="width: 100%; height: 10px; border-bottom: 1px solid #c7d2d7; background-color: #f4f6f7;"></div>
+                    <div style="width: 100%; height: 9px; background-color: #ffffff;"></div>
+                </div>
                 <div id="fill-color-label-preview">
-                    <div id="fill-color-label-preview-value">Label</div>
+                    <div id="fill-color-label-preview-value">Label Value</div>
                 </div>
             </div>
         </div>

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

@@ -33,21 +33,45 @@
 }
 
 #fill-color-processor-preview {
-    font-size: 64px;
+    width: 173px;
+    height: 65px;
+    border-width: 1px;
+    border-style: solid;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+
+#fill-color-processor-preview-icon {
+    float: left;
+    width: 25px;
+    height: 25px;
+}
+
+#fill-color-processor-preview-icon:before {
+    margin-top: 5px;
+    margin-left: 4px;
+    font-size: 15px;
+}
+
+#fill-color-processor-preview-name {
+    margin-left: 35px;
+    line-height: 25px;
+    font-size: 12px;
+    height: 25px;
 }
 
 #fill-color-label-preview {
-    width: 173px;
+    width: 83px;
-    height: 56px;
+    height: 83px;
     font-weight: bold;
-    border-width: 1px;
+    border: 1px solid rgba(0,0,0,0.25);
-    border-style: solid;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
 }
 
 #fill-color-label-preview-value {
-    margin-left: 5px;
+    margin-left: 10px;
-    margin-top: 5px;
+    margin-top: 10px;
     float: left;
+    font-size: 12px;
 }
 
 div.connections-component-name {

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

@@ -73,12 +73,16 @@ g.component rect.border {
 
 g.component rect.border.unauthorized {
     stroke-width: 1.5;
-    stroke: #ba554a;
+    stroke: #ba554a !important;
     stroke-dasharray: 3,3;
 }
 
+g.component rect.processor-icon-container.unauthorized {
+    fill: #f4f6f7 !important;
+}
+
 g.component.selected rect.border {
-    stroke: #004849;
+    stroke: #004849 !important;
     stroke-width: 3;
 }
 
@@ -166,6 +170,10 @@ text.processor-type {
     font-size: 12px;
 }
 
+rect.processor-icon-container {
+    fill: #ffffff;
+}
+
 text.processor-icon {
     font-family: flowfont;
     font-size: 30px;

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

@@ -405,12 +405,35 @@ nf.ng.Canvas.OperateCtrl = function () {
                                 $('#fill-color-value').val(hex);
 
                                 // always update the preview
-                                $('#fill-color-processor-preview').css('color', hex);
+                                if (hex.toLowerCase() === '#ffffff') {
-                                $('#fill-color-label-preview').css({
+                                    //special case #ffffff implies default fill
-                                    'border-color': hex,
+                                    $('#fill-color-processor-preview-icon').css({
-                                    'background': 'linear-gradient(to bottom, #ffffff, ' + hex + ')',
+                                        'color': nf.Processor.defaultIconColor(),
-                                    'filter': 'progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#ffffff, endColorstr=' + hex + ')'
+                                        'background-color': hex
+                                    });
+                                } else {
+                                    $('#fill-color-processor-preview-icon').css({
+                                        'color': nf.Common.determineContrastColor(
+                                            nf.Common.substringAfterLast(
+                                                hex, '#')),
+                                        'background-color': hex
+                                    });
+                                }
+
+                                var borderColor = hex;
+                                if (borderColor.toLowerCase() === '#ffffff') {
+                                    borderColor = 'rgba(0,0,0,0.25)';
+                                }
+                                $('#fill-color-processor-preview').css({
+                                    'border-color': borderColor
                                 });
+
+                                $('#fill-color-label-preview').css({
+                                    'background': hex
+                                });
+                                $('#fill-color-label-preview-value').css('color',
+                                    nf.Common.determineContrastColor(nf.Common.substringAfterLast(hex, '#'))
+                                );
                             }
                         });
 

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

@@ -1104,7 +1104,7 @@ nf.Actions = (function () {
 
                 var color;
                 if (allProcessors) {
-                    color = nf.Processor.defaultColor();
+                    color = nf.Processor.defaultFillColor();
                 } else {
                     color = nf.Label.defaultColor();
                 }

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

@@ -187,12 +187,18 @@ nf.Birdseye = (function () {
 
         // processors
         $.each(components.processors, function (_, d) {
+            //default color
             var color = '#dde4eb';
 
             if (d.permissions.canRead) {
                 // use the specified color if appropriate
                 if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
                     color = d.component.style['background-color'];
+
+                    //if the background color is #ffffff use the default instead
+                    if (color === '#ffffff') {
+                        color = '#dde4eb';
+                    }
                 }
             }
 

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

@@ -201,6 +201,13 @@ nf.Label = (function () {
                     lines.push('');
                 }
 
+                var color = nf.Label.defaultColor();
+
+                // use the specified color if appropriate
+                if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
+                    color = d.component.style['background-color'];
+                }
+
                 // add label value
                 $.each(lines, function (i, line) {
                     labelText.append('tspan')
@@ -208,6 +215,11 @@ nf.Label = (function () {
                         .attr('dy', '1.2em')
                         .text(function () {
                             return line;
+                        })
+                        .style('fill', function (d) {
+                            return nf.Common.determineContrastColor(
+                                nf.Common.substringAfterLast(
+                                    color, '#'));
                         });
                 });
 

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

@@ -106,18 +106,28 @@ nf.Processor = (function () {
         // processor name
         processor.append('text')
             .attr({
-                'x': 62,
+                'x': 72,
-                'y': 20,
+                'y': 23,
-                'width': 220,
+                'width': 210,
-                'height': 16,
+                'height': 14,
                 'class': 'processor-name'
             });
 
+        // processor icon container
+        processor.append('rect')
+            .attr({
+                'x': 0,
+                'y': 0,
+                'width': 50,
+                'height': 50,
+                'class': 'processor-icon-container'
+            });
+
         // processor icon
         processor.append('text')
             .attr({
-                'x': 6,
+                'x': 9,
-                'y': 32,
+                'y': 35,
                 'class': 'processor-icon'
             })
             .text('\ue807');
@@ -164,18 +174,18 @@ nf.Processor = (function () {
                     details.append('text')
                         .attr({
                             'class': 'run-status-icon',
-                            'x': 42,
+                            'x': 55,
-                            'y': 20
+                            'y': 23
                         });
 
                     // processor type
                     details.append('text')
                         .attr({
                             'class': 'processor-type',
-                            'x': 62,
+                            'x': 72,
-                            'y': 35,
+                            'y': 37,
-                            'width': 246,
+                            'width': 236,
-                            'height': 16
+                            'height': 12
                         });
 
                     // -----
@@ -533,30 +543,67 @@ nf.Processor = (function () {
                     details.remove();
                 }
             }
-        });
 
-        // ---------------
+            // ---------------
-        // processor color
+            // processor color
-        // ---------------
+            // ---------------
 
-        // update the processor color
+            //update the processor icon container
-        updated.select('text.processor-icon')
+            processor.select('rect.processor-icon-container').classed('unauthorized', !processorData.permissions.canRead);
-            .style('fill', function (d) {
 
-                // get the default color
+            //update the processor icon
-                var color = nf.Processor.defaultColor();
+            processor.select('text.processor-icon').classed('unauthorized', !processorData.permissions.canRead);
+
+            //update the processor border
+            processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
+
+            // use the specified color if appropriate
+            if (processorData.permissions.canRead){
+                if (nf.Common.isDefinedAndNotNull(processorData.component.style['background-color'])) {
+                    var color = processorData.component.style['background-color'];
+
+                    //update the processor icon container
+                    processor.select('rect.processor-icon-container')
+                        .style('fill', function (d) {
+                            return color;
+                        });
+
+                    //update the processor border
+                    processor.select('rect.border')
+                        .style('stroke', function (d) {
+                            return color;
+                        });
+                }
+            }
+
+            // update the processor color
+            processor.select('text.processor-icon')
+                .style('fill', function (d) {
+
+                    // get the default color
+                    var color = nf.Processor.defaultIconColor();
+
+                    if (!d.permissions.canRead) {
+                        return color;
+                    }
+
+                    // use the specified color if appropriate
+                    if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
+                        color = d.component.style['background-color'];
+
+                        //special case #ffffff implies default fill
+                        if (color.toLowerCase() === '#ffffff') {
+                            color = nf.Processor.defaultIconColor();
+                        } else {
+                            color = nf.Common.determineContrastColor(
+                                nf.Common.substringAfterLast(
+                                    color, '#'));
+                        }
+                    }
 
-                if (!d.permissions.canRead) {
                     return color;
-                }
+                });
-
+        });
-                // use the specified color if appropriate
-                if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) {
-                    color = d.component.style['background-color'];
-                }
-
-                return color;
-            });
     };
 
     /**
@@ -941,9 +988,16 @@ nf.Processor = (function () {
         },
 
         /**
-         * Returns the default color that should be used when drawing a processor.
+         * Returns the default fill color that should be used when drawing a processor.
          */
-        defaultColor: function () {
+        defaultFillColor: function () {
+            return '#FFFFFF';
+        },
+
+        /**
+         * Returns the default icon color that should be used when drawing a processor.
+         */
+        defaultIconColor: function () {
             return '#ad9897';
         }
     };

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

@@ -384,6 +384,20 @@ nf.Common = (function () {
             }
         },
 
+        /**
+         * Determines the contrast color of a given hex color.
+         *
+         * @param {string} hex  The hex color to test.
+         * @returns {string} The contrasting color string.
+         */
+        determineContrastColor: function (hex){
+            if (parseInt(hex, 16) > 0xffffff/1.5) {
+                return '#000000';
+            }
+            return '#ffffff';
+        },
+
+
         /**
          * Method for handling ajax errors.
          *