This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 44b1353440 [NIFI-13041] birdseye honor user set processor background
color (#8643)
44b1353440 is described below
commit 44b13534401facb564844451b386105178313c43
Author: Scott Aslan <[email protected]>
AuthorDate: Tue Apr 16 11:39:44 2024 -0400
[NIFI-13041] birdseye honor user set processor background color (#8643)
* [NIFI-13041] birdseye honor user set processor background color
* add stroke border color to make #fff and #000 colored processors visible
in light and dark mode
* border for labels in birdseye
This closes #8643
---
.../flow-designer/service/birdseye-view.service.ts | 28 ++++++++++++++++------
.../app/pages/flow-designer/state/flow/index.ts | 9 +++++++
.../ui/canvas/_canvas.component-theme.scss | 4 ----
3 files changed, 30 insertions(+), 11 deletions(-)
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/birdseye-view.service.ts
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/birdseye-view.service.ts
index 33c090eac8..603b1893a4 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/birdseye-view.service.ts
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/birdseye-view.service.ts
@@ -31,6 +31,9 @@ import { FunnelManager } from
'./manager/funnel-manager.service';
import { LabelManager } from './manager/label-manager.service';
import { selectNavigationCollapsed } from '../state/flow/flow.selectors';
import { initialState } from '../state/flow/flow.reducer';
+import { CanvasUtils } from './canvas-utils.service';
+import { NiFiCommon } from '../../../service/nifi-common.service';
+import { ComponentEntityWithDimensions } from '../state/flow';
@Injectable({
providedIn: 'root'
@@ -49,6 +52,8 @@ export class BirdseyeView {
constructor(
private store: Store<CanvasState>,
private canvasView: CanvasView,
+ private nifiCommon: NiFiCommon,
+ private canvasUtils: CanvasUtils,
private processorManager: ProcessorManager,
private processGroupManager: ProcessGroupManager,
private remoteProcessGroupManager: RemoteProcessGroupManager,
@@ -272,7 +277,7 @@ export class BirdseyeView {
context.scale(birdseyeScale, birdseyeScale);
// labels
- this.labelManager.selectAll().each(function (d: any) {
+ this.labelManager.selectAll().each((d: ComponentEntityWithDimensions)
=> {
// default color
let color = '#fff7d7';
@@ -283,8 +288,15 @@ export class BirdseyeView {
}
}
+ // determine border color
+ const strokeColor: string =
this.canvasUtils.determineContrastColor(
+ this.nifiCommon.substringAfterLast(color, '#')
+ );
+
context.fillStyle = color;
context.fillRect(d.position.x, d.position.y, d.dimensions.width,
d.dimensions.height);
+ context.strokeStyle = strokeColor;
+ context.strokeRect(d.position.x, d.position.y, d.dimensions.width,
d.dimensions.height);
});
// funnels
@@ -311,7 +323,7 @@ export class BirdseyeView {
});
// processors
- this.processorManager.selectAll().each(function (d: any) {
+ this.processorManager.selectAll().each((d:
ComponentEntityWithDimensions) => {
// default color
let color = '#dde4eb';
@@ -319,16 +331,18 @@ export class BirdseyeView {
// use the specified color if appropriate
if (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';
- }
}
}
+ // determine border color
+ const strokeColor: string =
this.canvasUtils.determineContrastColor(
+ this.nifiCommon.substringAfterLast(color, '#')
+ );
+
context.fillStyle = color;
context.fillRect(d.position.x, d.position.y, d.dimensions.width,
d.dimensions.height);
+ context.strokeStyle = strokeColor;
+ context.strokeRect(d.position.x, d.position.y, d.dimensions.width,
d.dimensions.height);
});
context.restore();
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts
index 1eb052cf38..01e96fc0c3 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts
@@ -522,6 +522,15 @@ export interface ComponentEntity {
component: any;
}
+export interface ComponentEntityWithDimensions extends ComponentEntity {
+ dimensions: Dimensions;
+}
+
+export interface Dimensions {
+ width: number;
+ height: number;
+}
+
export interface Relationship {
autoTerminate: boolean;
description: string;
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index 066c78eba4..ae039b5195 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -459,10 +459,6 @@
fill: utils.get-color-on-surface($material-theme-color-config,
$surface);
}
- text.remote-process-group-transmission-status {
- fill: $material-theme-primary-palette-default-contrast;
- }
-
text.remote-process-group-transmission-secure {
fill: utils.get-color-on-surface($material-theme-color-config,
$surface);
}
