Apache/nifi
1
0
Fork 0
mirror of https://github.com/apache/nifi.git synced 2025-02-07 18:48:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13276] improve property editor to handle large amounts of text (#8866)

Browse Source 
This closes #8866
This commit is contained in:
Scott Aslan 2024-05-22 11:08:48 -04:00 committed by GitHub
parent ac023db555
commit a963c2ce45
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 25 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.html
View File

@ -20,7 +20,7 @@
[style.width.px]="width"
cdkDrag
resizable
(resized)="resized()">
(resized)="resized($event)">
<form class="h-full" [formGroup]="nfEditorForm" cdkTrapFocus [cdkTrapFocusAutoCapture]="!readonly">
<div class="flex flex-col gap-y-3 h-full">
<div class="flex justify-end">

45
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.scss
View File

@ -22,52 +22,11 @@
min-height: 240px;
min-width: 245px;
max-height: 100vh;
max-width: 100vw;
cursor: move;
.property-hint {
cursor: default;
}
.nf-editor {
min-height: 100px;
min-width: 210px;
border-width: 1px;
border-style: solid;
cursor: default;
.CodeMirror {
border-width: 1px;
border-style: solid;
font-family: monospace;
cursor: default;
line-height: normal;
}
.CodeMirror-scroll {
overflow-x: auto;
overflow-y: auto;
}
/*
Override some defaults...
*/
.cm-s-default {
font-size: 13px;
font-family: monospace;
}
.cm-s-default .CodeMirror-matchingbracket {
opacity: 0.5;
filter: alpha(opacity=50);
}
.CodeMirror-vscrollbar {
bottom: 18px !important;
}
.CodeMirror-hscrollbar {
right: 18px !important;
}
}
}

19
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.ts
View File

@ -118,7 +118,14 @@ export class NfEditor implements OnDestroy {
codeMirrorLoaded(codeEditor: any): void {
this.editor = codeEditor.codeMirror;
this.editor.setSize('100%', '100%');
// The `.property-editor` minimum height is set to 240px. This is the height of the `.nf-editor` overlay. The
// height of the codemirror needs to be set in order to handle large amounts of text in the codemirror editor.
// The height of the codemirror should be the height of the `.nf-editor` overlay minus the 132px of spacing
// needed to display the EL and Param tooltips, the 'Set Empty String' checkbox, the action buttons,
// and the resize handle so the initial height of the codemirror when opening should be 108px for a 240px tall
// `.nf-editor` overlay. If the initial height of that overlay changes then this initial height should also be
// updated.
this.editor.setSize('100%', 108);
if (!this.readonly) {
this.editor.execCommand('selectAll');
@ -192,8 +199,14 @@ export class NfEditor implements OnDestroy {
};
}
resized(): void {
this.editor.setSize('100%', '100%');
resized(event: any): void {
// Note: We calculate the height of the codemirror to fit into an `.nf-editor` overlay. The
// height of the codemirror needs to be set in order to handle large amounts of text in the codemirror editor.
// The height of the codemirror should be the height of the `.nf-editor` overlay minus the 132px of spacing
// needed to display the EL and Param tooltips, the 'Set Empty String' checkbox, the action buttons,
// and the resize handle. If the amount of spacing needed for additional UX is needed for the `.nf-editor` is
// changed then this value should also be updated.
this.editor.setSize('100%', event.height - 132);
}
preventDrag(event: MouseEvent): void {

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.ts
View File

@ -459,7 +459,7 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
} else {
this.editorWidth = width + 100;
this.editorOffsetX = 8;
this.editorOffsetY = 56;
this.editorOffsetY = 66;
}
this.editorPositions.push(
new ConnectionPositionPair(

5
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_codemirror-theme.scss
View File

@ -53,6 +53,9 @@
.cm-s-nifi.CodeMirror {
@extend .surface-contrast;
height: 108px;
cursor: default;
line-height: normal;
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
border: 1px solid var(--mdc-outlined-text-field-label-text-color);
}
@ -215,6 +218,8 @@
text-decoration: underline;
color: $nifi-theme-surface-palette-darker-contrast !important;
background-color: $nifi-theme-surface-palette-default;
opacity: 0.5;
filter: alpha(opacity=50);
}
.cm-s-nifi .CodeMirror-nonmatchingbracket {