[NIFI-13183] add drop shadow to connections to increase visibility on…

… top of colored labels in both light and dark mode
apache · May 8, 2024 · 7155b9b · 7155b9b
1 parent 43aca65
commit 7155b9b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts b/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
@@ -497,7 +497,11 @@ export class ConnectionManager {
             .attr('class', 'connection');
 
         // create a connection between the two components
-        connection.append('path').attr('class', 'connection-path').attr('pointer-events', 'none');
+        connection
+            .append('path')
+            .attr('class', 'connection-path')
+            .attr('filter', 'url(#connection-drop-shadow)')
+            .attr('pointer-events', 'none');
 
         // path to show when selection
         connection.append('path').attr('class', 'connection-selection-path').attr('pointer-events', 'none');
@@ -1669,7 +1673,7 @@ export class ConnectionManager {
                 if (self.isFullCount(d) || self.isFullBytes(d)) {
                     return 'url(#connection-full-drop-shadow)';
                 } else {
-                    return 'url(#component-drop-shadow)';
+                    return 'url(#connection-drop-shadow)';
                 }
             });
         });

diff --git a/...frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/...frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -48,8 +48,9 @@
     $nifi-theme-caution-palette-darker: mat.get-color-from-palette($nifi-theme-caution-palette, darker);
 
     // Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
-    $drop-shadow-color: black;
     $is-dark: map-get($nifi-theme-color-config, is-dark);
+    $drop-shadow-color: black;
+    $connection-drop-shadow-color: if($is-dark, black, white);
 
     $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
         $nifi-theme-surface-palette,
@@ -209,10 +210,6 @@
             flood-color: $drop-shadow-color;
         }
 
-        #connection-full-drop-shadow feFlood {
-            flood-color: $material-theme-warn-palette-darker;
-        }
-
         rect.processor-read-write-stats {
             fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
         }
@@ -261,6 +258,13 @@
         /*
           Connection
       */
+        #connection-drop-shadow feFlood {
+            flood-color: $connection-drop-shadow-color;
+        }
+
+        #connection-full-drop-shadow feFlood {
+            flood-color: $material-theme-warn-palette-darker;
+        }
 
         g.connection {
             font-family: mat.get-theme-typography($material-theme, body-1, font-family);

diff --git a/...nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts b/...nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
@@ -381,6 +381,44 @@ export class Canvas implements OnInit, OnDestroy {
         componentDropShadowFeMerge.append('feMergeNode').attr('in', 'offsetColorBlur');
         componentDropShadowFeMerge.append('feMergeNode').attr('in', 'SourceGraphic');
 
+        // filter for connection drop shadow
+        const connectionDropShadowFilter = defs
+            .append('filter')
+            .attr('id', 'connection-drop-shadow')
+            .attr('height', '140%')
+            .attr('y', '-20%');
+
+        // blur
+        connectionDropShadowFilter
+            .append('feGaussianBlur')
+            .attr('in', 'SourceAlpha')
+            .attr('stdDeviation', 3)
+            .attr('result', 'blur');
+
+        // offset
+        connectionDropShadowFilter
+            .append('feOffset')
+            .attr('in', 'blur')
+            .attr('dx', 0)
+            .attr('dy', 1)
+            .attr('result', 'offsetBlur');
+
+        // color/opacity
+        connectionDropShadowFilter.append('feFlood').attr('flood-opacity', 1).attr('result', 'offsetColor');
+
+        // combine
+        connectionDropShadowFilter
+            .append('feComposite')
+            .attr('in', 'offsetColor')
+            .attr('in2', 'offsetBlur')
+            .attr('operator', 'in')
+            .attr('result', 'offsetColorBlur');
+
+        // stack the effect under the source graph
+        const connectionDropShadowFeMerge = connectionDropShadowFilter.append('feMerge');
+        connectionDropShadowFeMerge.append('feMergeNode').attr('in', 'offsetColorBlur');
+        connectionDropShadowFeMerge.append('feMergeNode').attr('in', 'SourceGraphic');
+
         // filter for drop shadow
         const connectionFullDropShadowFilter = defs
             .append('filter')