Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[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
This commit is contained in:
Scott Aslan 2024-04-16 11:39:44 -04:00 committed by GitHub
parent 7fdaa5f311
commit 44b1353440
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
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
View File

@ -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();

9
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
View File

@ -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;

4
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
View File

@ -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);
}