From 60112f242cbed1785d92f801e433cb8e25ca84e2 Mon Sep 17 00:00:00 2001 From: Rob Fellows Date: Thu, 16 May 2024 17:38:15 -0400 Subject: [PATCH] [NIFI-13226] - Support changing color of processors and labels (#8836) * [NIFI-13226] - Support changing color of processors and labels * style the processor icon for better support cross-themes This closes #8836 --- .../service/canvas-actions.service.ts | 30 ++++ .../service/canvas-context-menu.service.ts | 9 +- .../service/canvas-utils.service.ts | 26 +++ .../manager/processor-manager.service.ts | 3 + .../flow-designer/state/flow/flow.actions.ts | 6 + .../flow-designer/state/flow/flow.effects.ts | 72 ++++++++ .../pages/flow-designer/state/flow/index.ts | 9 + .../_change-color-dialog.component-theme.scss | 66 ++++++++ .../change-color-dialog.component.html | 65 ++++++++ .../change-color-dialog.component.scss | 25 +++ .../change-color-dialog.component.spec.ts | 52 ++++++ .../change-color-dialog.component.ts | 156 ++++++++++++++++++ .../operation-control.component.html | 19 +-- .../operation-control.component.ts | 5 +- ...ate-remote-process-group.component.spec.ts | 4 +- ...dit-remote-process-group.component.spec.ts | 4 +- .../src/main/nifi/src/styles.scss | 3 + 17 files changed, 530 insertions(+), 24 deletions(-) create mode 100644 nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss create mode 100644 nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html create mode 100644 nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.scss create mode 100644 nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.spec.ts create mode 100644 nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.ts diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-actions.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-actions.service.ts index c8268fd940..e07a0af6fa 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-actions.service.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-actions.service.ts @@ -29,6 +29,7 @@ import { navigateToEditComponent, navigateToEditCurrentProcessGroup, navigateToManageComponentPolicies, + openChangeColorDialog, paste, reloadFlow, selectComponents, @@ -38,6 +39,7 @@ import { stopCurrentProcessGroup } from '../state/flow/flow.actions'; import { + ChangeColorRequest, CopyComponentRequest, DeleteComponentRequest, DisableComponentRequest, @@ -422,6 +424,34 @@ export class CanvasActionsService { }) ); } + }, + changeColor: { + id: 'changeColor', + condition: (selection: d3.Selection) => { + return this.canvasUtils.isColorable(selection); + }, + action: (selection: d3.Selection) => { + const changeColorRequests: ChangeColorRequest[] = []; + selection.each((d) => { + let color = null; + if (d.component.style) { + color = d.component.style['background-color'] || null; + } + changeColorRequests.push({ + id: d.id, + uri: d.uri, + type: d.type, + color, + style: d.component.style || null, + revision: this.client.getRevision(d) + }); + }); + this.store.dispatch( + openChangeColorDialog({ + request: changeColorRequests + }) + ); + } } }; diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts index 3f69dbcbed..fad65e0d90 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-context-menu.service.ts @@ -1161,15 +1161,10 @@ export class CanvasContextMenu implements ContextMenuDefinitionProvider { } }, { - condition: (selection: any) => { - // TODO - isColorable - return false; - }, + condition: this.canvasActionsService.getConditionFunction('changeColor'), clazz: 'fa fa-paint-brush', text: 'Change Color', - action: () => { - // TODO - fillColor - } + action: this.canvasActionsService.getActionFunction('changeColor') }, { condition: (selection: d3.Selection) => { diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts index 44e33f0465..93956c5894 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts @@ -2028,4 +2028,30 @@ export class CanvasUtils { return this.isConnection(selection) || this.isLabel(selection); } + + public isColorable(selection: d3.Selection) { + if (selection.empty()) { + return false; + } + + // require read and write permissions + if (!this.canRead(selection) || !this.canModify(selection)) { + return false; + } + + // determine if the current selection is entirely processors or labels + const selectedProcessors = selection.filter((d, index, nodes) => { + const processor = d3.select(nodes[index]); + return this.isProcessor(processor) && this.canModify(processor); + }); + const selectedLabels = selection.filter((d, index, nodes) => { + const label = d3.select(nodes[index]); + return this.isLabel(label) && this.canModify(label); + }); + + const allProcessors = selectedProcessors.size() === selection.size(); + const allLabels = selectedLabels.size() === selection.size(); + + return allProcessors || allLabels; + } } diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts index d44be6f030..0655dc0d07 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts @@ -648,9 +648,12 @@ export class ProcessorManager { }); } } else { + // undo changes made above processor.select('text.processor-icon').attr('class', () => { return 'processor-icon accent-color'; }); + processor.select('rect.processor-icon-container').style('fill', null); + processor.select('rect.border').style('stroke', null); } } diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.actions.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.actions.ts index f008ba3a31..4d349b1494 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.actions.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.actions.ts @@ -18,6 +18,7 @@ import { createAction, props } from '@ngrx/store'; import { CenterComponentRequest, + ChangeColorRequest, ChangeVersionDialogRequest, ComponentEntity, ConfirmStopVersionControlRequest, @@ -863,3 +864,8 @@ export const openChangeProcessorVersionDialog = createAction( `${CANVAS_PREFIX} Open Change Processor Version Dialog`, props<{ request: FetchComponentVersionsRequest }>() ); + +export const openChangeColorDialog = createAction( + `${CANVAS_PREFIX} Open Change Color Dialog`, + props<{ request: ChangeColorRequest[] }>() +); diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts index cf01191cd1..b09d4d71ec 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts @@ -135,6 +135,7 @@ import { EditLabel } from '../../ui/canvas/items/label/edit-label/edit-label.com import { ErrorHelper } from '../../../../service/error-helper.service'; import { selectConnectedStateChanged } from '../../../../state/cluster-summary/cluster-summary.selectors'; import { resetConnectedStateChanged } from '../../../../state/cluster-summary/cluster-summary.actions'; +import { ChangeColorDialog } from '../../ui/canvas/change-color-dialog/change-color-dialog.component'; @Injectable() export class FlowEffects { @@ -3955,4 +3956,75 @@ export class FlowEffects { ), { dispatch: false } ); + + changeColor$ = createEffect( + () => + this.actions$.pipe( + ofType(FlowActions.openChangeColorDialog), + map((action) => action.request), + tap((request) => { + const dialogRef = this.dialog.open(ChangeColorDialog, { + ...SMALL_DIALOG, + data: request + }); + + dialogRef.componentInstance.changeColor.pipe(take(1)).subscribe((requests) => { + requests.forEach((request) => { + const style = { ...request.style } || {}; + if (request.type === ComponentType.Processor) { + if (request.color) { + style['background-color'] = request.color; + } else { + // for processors, removing the background-color from the style map effectively unsets it + delete style['background-color']; + } + this.store.dispatch( + FlowActions.updateProcessor({ + request: { + id: request.id, + type: ComponentType.Processor, + errorStrategy: 'snackbar', + uri: request.uri, + payload: { + revision: request.revision, + component: { + id: request.id, + style + } + } + } + }) + ); + } else if (request.type === ComponentType.Label) { + if (request.color) { + style['background-color'] = request.color; + } else { + // for labels, removing the setting the background-color style effectively unsets it + style['background-color'] = null; + } + this.store.dispatch( + FlowActions.updateComponent({ + request: { + id: request.id, + type: ComponentType.Label, + errorStrategy: 'snackbar', + uri: request.uri, + payload: { + revision: request.revision, + component: { + id: request.id, + style + } + } + } + }) + ); + } + }); + dialogRef.close(); + }); + }) + ), + { dispatch: false } + ); } diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts index bff002bfa8..f4e862d45d 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/index.ts @@ -854,3 +854,12 @@ export interface MoveToFrontRequest { revision: Revision; zIndex: number; } + +export interface ChangeColorRequest { + id: string; + uri: string; + type: ComponentType; + color: string | null; + revision: Revision; + style: any | null; +} diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss new file mode 100644 index 0000000000..8cfc850d80 --- /dev/null +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss @@ -0,0 +1,66 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin generate-theme($nifi-theme) { + // Get the color config from the theme. + $nifi-theme-color-config: mat.get-color-config($nifi-theme); + + $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary'); + + $is-dark: map-get($nifi-theme-color-config, is-dark); + $nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter); + $nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker); + + $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette( + $nifi-theme-surface-palette, + darker-contrast + ); + $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette( + $nifi-theme-surface-palette, + lighter-contrast + ); + + $alternate-surface: if( + $is-dark, + rgba($nifi-theme-surface-palette-darker-contrast, 0.28), + rgba($nifi-theme-surface-palette-lighter-contrast, 0.2) + ); + + .preview { + .processor { + background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter); + } + + .odd { + background-color: rgba( + if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-darker), + 0.025 + ); + } + + .even { + background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter); + } + + .row-border { + border-top: 1px solid $alternate-surface; + } + } +} diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html new file mode 100644 index 0000000000..883e587dad --- /dev/null +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html @@ -0,0 +1,65 @@ + + +

Change Color

+
+ +
+ + Color + + + Use default color +
+
+
Preview
+ @if (type === ComponentType.Processor) { +
+
+
+ +
+
Processor Name
+
+
+
+
+
+
+
+
+ } @else if (type === ComponentType.Label) { +
+ Label Value +
+ } +
+ + + + + +
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.scss new file mode 100644 index 0000000000..c5708e7c19 --- /dev/null +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.scss @@ -0,0 +1,25 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +.preview { + .processor { + .logo { + .icon { + font-size: 32px; + } + } + } +} diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.spec.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.spec.ts new file mode 100644 index 0000000000..78860155a0 --- /dev/null +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.spec.ts @@ -0,0 +1,52 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ChangeColorDialog } from './change-color-dialog.component'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { provideMockStore } from '@ngrx/store/testing'; +import { initialState } from '../../../state/flow/flow.reducer'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +describe('ChangeColorDialog', () => { + let component: ChangeColorDialog; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ChangeColorDialog, NoopAnimationsModule], + providers: [ + { + provide: MAT_DIALOG_DATA, + useValue: { + request: [] + } + }, + { provide: MatDialogRef, useValue: null }, + provideMockStore({ initialState }) + ] + }).compileComponents(); + + fixture = TestBed.createComponent(ChangeColorDialog); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.ts new file mode 100644 index 0000000000..9f18bbaf39 --- /dev/null +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.ts @@ -0,0 +1,156 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Component, EventEmitter, Inject, Output } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { + MAT_DIALOG_DATA, + MatDialogActions, + MatDialogClose, + MatDialogContent, + MatDialogTitle +} from '@angular/material/dialog'; +import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { MatButton } from '@angular/material/button'; +import { NifiSpinnerDirective } from '../../../../../ui/common/spinner/nifi-spinner.directive'; +import { ChangeColorRequest } from '../../../state/flow'; +import { MatFormField, MatLabel } from '@angular/material/form-field'; +import { MatInput } from '@angular/material/input'; +import { ComponentContext } from '../../../../../ui/common/component-context/component-context.component'; +import { ComponentType } from '../../../../../state/shared'; +import { CloseOnEscapeDialog } from '../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component'; +import { ComponentTypeNamePipe } from '../../../../../pipes/component-type-name.pipe'; +import { CanvasUtils } from '../../../service/canvas-utils.service'; +import { NiFiCommon } from '../../../../../service/nifi-common.service'; +import { MatCheckbox } from '@angular/material/checkbox'; + +@Component({ + selector: 'change-component-dialog', + standalone: true, + imports: [ + CommonModule, + MatDialogTitle, + ReactiveFormsModule, + MatDialogContent, + MatButton, + MatDialogActions, + MatDialogClose, + NifiSpinnerDirective, + MatFormField, + MatLabel, + MatInput, + ComponentContext, + ComponentTypeNamePipe, + MatCheckbox + ], + templateUrl: './change-color-dialog.component.html', + styleUrl: './change-color-dialog.component.scss' +}) +export class ChangeColorDialog extends CloseOnEscapeDialog { + color: string | null = null; + noColor: boolean = true; + contrastColor: string | null = null; + type: ComponentType | null = null; + changeColorForm: FormGroup; + private _data: ChangeColorRequest[] = []; + private DEFAULT_LABEL_COLOR = '#fff7d7'; + + @Output() changeColor = new EventEmitter(); + + constructor( + @Inject(MAT_DIALOG_DATA) private data: ChangeColorRequest[], + private canvasUtils: CanvasUtils, + private nifiCommon: NiFiCommon, + private formBuilder: FormBuilder + ) { + super(); + this._data = data; + let isDefaultColor = true; + + if (data.length > 0) { + this.color = data[0].color; + if (this.color !== null) { + const hex = this.nifiCommon.substringAfterLast(this.color, '#'); + this.contrastColor = this.canvasUtils.determineContrastColor(hex); + this.noColor = false; + isDefaultColor = false; + } + this.type = data[0].type; + if (this.type === ComponentType.Label && this.color === null) { + this.color = this.DEFAULT_LABEL_COLOR; + const hex = this.nifiCommon.substringAfterLast(this.color, '#'); + this.contrastColor = this.canvasUtils.determineContrastColor(hex); + isDefaultColor = true; + } + } + + this.changeColorForm = formBuilder.group({ + color: [this.color], + noColor: [isDefaultColor] + }); + } + + colorChanged(): void { + this.color = this.changeColorForm.get('color')?.value; + if (this.color !== null) { + const hex = this.nifiCommon.substringAfterLast(this.color, '#'); + this.contrastColor = this.canvasUtils.determineContrastColor(hex); + this.noColor = false; + } else { + this.contrastColor = null; + } + } + + noColorChanged(): void { + const noColorChecked = this.changeColorForm.get('noColor')?.value; + if (noColorChecked) { + this.noColor = true; + if (this.type === ComponentType.Label) { + this.color = this.DEFAULT_LABEL_COLOR; + const hex = this.nifiCommon.substringAfterLast(this.color, '#'); + this.contrastColor = this.canvasUtils.determineContrastColor(hex); + } else { + this.color = null; + this.contrastColor = null; + } + } else { + this.noColor = false; + this.color = this.changeColorForm.get('color')?.value; + if (this.color === null) { + if (this.type === ComponentType.Label) { + this.color = this.DEFAULT_LABEL_COLOR; + } else { + this.color = '#000000'; // default for the color picker + } + } + const hex = this.nifiCommon.substringAfterLast(this.color, '#'); + this.contrastColor = this.canvasUtils.determineContrastColor(hex); + } + } + + applyClicked() { + const result: ChangeColorRequest[] = this._data.map((changeColorRequest) => { + return { + ...changeColorRequest, + color: this.noColor ? null : this.color + }; + }); + this.changeColor.next(result); + } + + protected readonly ComponentType = ComponentType; +} diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html index 276e4f77fb..e56dcddbcc 100644 --- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html +++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html @@ -119,16 +119,15 @@ (click)="group(selection)"> - - - - - - - - - - +