From 7d8d5aa7dee8a4cca137de2cb56842ce38a62d96 Mon Sep 17 00:00:00 2001 From: Maple13 Date: Fri, 2 Aug 2024 14:07:06 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8feat(grid):=20optimize=20styles=20?= =?UTF-8?q?#WIK-16181?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - click on a blank space to deselect - use textarea to support text editing and limit the height --- .../components/cell-editors/cell-editor.scss | 9 +++ .../text/text-editor.component.ts | 58 +++++++++++++++---- packages/grid/src/services/event.service.ts | 17 ++++-- .../grid/src/services/selection.servive.ts | 4 ++ packages/grid/src/styles/styles.scss | 13 ++++- 5 files changed, 82 insertions(+), 19 deletions(-) diff --git a/packages/grid/src/components/cell-editors/cell-editor.scss b/packages/grid/src/components/cell-editors/cell-editor.scss index 7e9ff161..1b70a7d3 100644 --- a/packages/grid/src/components/cell-editors/cell-editor.scss +++ b/packages/grid/src/components/cell-editors/cell-editor.scss @@ -3,3 +3,12 @@ height: 100%; } } + +.text-cell-editor { + display: block; + + textarea { + min-height: 44px; + resize: none; + } +} diff --git a/packages/grid/src/components/cell-editors/text/text-editor.component.ts b/packages/grid/src/components/cell-editors/text/text-editor.component.ts index c981343e..ca2606c8 100644 --- a/packages/grid/src/components/cell-editors/text/text-editor.component.ts +++ b/packages/grid/src/components/cell-editors/text/text-editor.component.ts @@ -1,5 +1,5 @@ import { NgIf } from '@angular/common'; -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, inject, Renderer2 } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ThyInputDirective } from 'ngx-tethys/input'; import { ThyAutofocusDirective, ThyEnterDirective } from 'ngx-tethys/shared'; @@ -7,19 +7,55 @@ import { AbstractEditCellEditor } from '../abstract-cell-editor.component'; @Component({ selector: 'text-cell-editor', - template: ` `, + template: ` + + `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective] + imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective], + host: { + class: 'd-block' + } }) -export class TextCellEditorComponent extends AbstractEditCellEditor { +export class TextCellEditorComponent extends AbstractEditCellEditor implements AfterViewInit { + private elementRef = inject(ElementRef); + + private render2 = inject(Renderer2); + + private maxHeight = 148; + + constructor() { + super(); + } + + ngAfterViewInit() { + setTimeout(() => { + this.updateStyle(); + }); + } + + updateStyle() { + const textarea = this.elementRef.nativeElement.querySelector('textarea'); + const height = textarea.scrollHeight <= this.maxHeight ? textarea.scrollHeight : this.maxHeight; + + this.render2.setStyle(textarea, 'height', `${height}px`); + this.render2.setStyle(textarea, 'min-height', `44px`); + this.render2.setStyle(textarea, 'max-height', `${this.maxHeight}px`); + this.render2.setStyle(textarea, 'resize', 'none'); + } + + valueChange() { + this.updateStyle(); + } + updateValue() { this.updateFieldValue(); this.closePopover(); diff --git a/packages/grid/src/services/event.service.ts b/packages/grid/src/services/event.service.ts index 489fdf16..c4c8d490 100644 --- a/packages/grid/src/services/event.service.ts +++ b/packages/grid/src/services/event.service.ts @@ -1,12 +1,12 @@ import { Injectable, Signal } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { ThyPopover } from 'ngx-tethys/popover'; import { fromEvent, Subject } from 'rxjs'; import { DBL_CLICK_EDIT_TYPE } from '../constants'; -import { getRecordOrField } from '../utils'; -import { AITable, AITableField, AITableFieldType, AITableRecord } from '../core'; import { GRID_CELL_EDITOR_MAP } from '../constants/editor'; -import { ThyPopover } from 'ngx-tethys/popover'; +import { AITable, AITableField, AITableFieldType, AITableRecord } from '../core'; import { AITableGridCellRenderSchema } from '../types'; +import { getRecordOrField } from '../utils'; @Injectable() export class AITableGridEventService { @@ -37,11 +37,17 @@ export class AITableGridEventService { .subscribe((event) => { this.mousedownEvent$.next(event as MouseEvent); }); + + fromEvent(document, 'mousedown') + .pipe(this.takeUntilDestroyed) + .subscribe((event) => { + this.mousedownEvent$.next(event as MouseEvent); + }); } private dblClick(event: MouseEvent) { const cellDom = (event.target as HTMLElement).closest('.grid-cell') as HTMLElement; - const type = cellDom && cellDom.getAttribute('type')! as AITableFieldType; + const type = cellDom && (cellDom.getAttribute('type')! as AITableFieldType); if (type && DBL_CLICK_EDIT_TYPE.includes(type)) { this.openEdit(cellDom); } @@ -83,7 +89,8 @@ export class AITableGridEventService { outsideClosable: false, hasBackdrop: false, manualClosure: true, - animationDisabled: true + animationDisabled: true, + autoAdaptive: true }); } } diff --git a/packages/grid/src/services/selection.servive.ts b/packages/grid/src/services/selection.servive.ts index d909f6b1..f842281f 100644 --- a/packages/grid/src/services/selection.servive.ts +++ b/packages/grid/src/services/selection.servive.ts @@ -64,5 +64,9 @@ export class AITableGridSelectionService { const fieldId = colDom.getAttribute('fieldId'); fieldId && this.selectField(fieldId); } + + if (!cellDom && !colDom) { + this.clearSelection(); + } } } diff --git a/packages/grid/src/styles/styles.scss b/packages/grid/src/styles/styles.scss index d0bd77dc..89c6a98d 100644 --- a/packages/grid/src/styles/styles.scss +++ b/packages/grid/src/styles/styles.scss @@ -9,6 +9,12 @@ .grid-header { border-top: 1px solid variables.$gray-200; + + .grid-field:not(.highlight) { + &:hover { + background-color: variables.$gray-80; + } + } } .grid-body { @@ -47,10 +53,11 @@ justify-content: space-between; .autofill-container { position: absolute; - width: 4px; - height: 4px; + width: 8px; + height: 8px; right: 0; bottom: 0; + border: 2px solid variables.$white; background: variables.$primary; cursor: crosshair; z-index: 100; @@ -142,7 +149,7 @@ } .thy-icon-plus { - font-size: 14px; + font-size: 16px; color: variables.$gray-600; } } From cf5179deecc97704178ff047de41b00449fbe6b6 Mon Sep 17 00:00:00 2001 From: Maple13 Date: Fri, 2 Aug 2024 17:28:43 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8feat(grid):=20click=20on=20a=20bla?= =?UTF-8?q?nk=20space=20to=20deselect?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - use textarea to support text editing and limit the height --- packages/grid/src/grid.component.ts | 12 +++++++----- packages/grid/src/services/event.service.ts | 6 ++++-- packages/grid/src/services/selection.servive.ts | 7 +++++-- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts index 33aca06e..c3a609d0 100644 --- a/packages/grid/src/grid.component.ts +++ b/packages/grid/src/grid.component.ts @@ -26,6 +26,7 @@ import { ThyProgress } from 'ngx-tethys/progress'; import { ThyRate } from 'ngx-tethys/rate'; import { ThyStopPropagationDirective } from 'ngx-tethys/shared'; import { ThyTag } from 'ngx-tethys/tag'; +import { mergeWith } from 'rxjs/operators'; import { ProgressEditorComponent } from './components'; import { FieldMenu } from './components/field-menu/field-menu.component'; import { AITableFieldPropertyEditor } from './components/field-property-editor/field-property-editor.component'; @@ -178,11 +179,12 @@ export class AITableGrid implements OnInit { this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => { this.dblClick(event); }); - this.aiTableGridEventService.mousedownEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => { - if ((event as MouseEvent)?.target) { - this.aiTableGridSelectionService.updateSelect(event as MouseEvent); - } - }); + this.aiTableGridEventService.mousedownEvent$ + .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef)) + .subscribe((event) => { + this.aiTableGridSelectionService.updateSelect(event); + }); + this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => { this.mouseoverHandle(event); }); diff --git a/packages/grid/src/services/event.service.ts b/packages/grid/src/services/event.service.ts index 66481fdf..f75c15f7 100644 --- a/packages/grid/src/services/event.service.ts +++ b/packages/grid/src/services/event.service.ts @@ -21,6 +21,8 @@ export class AITableGridEventService { globalMouseoverEvent$ = new Subject(); + globalMousedownEvent$ = new Subject(); + private destroyRef = inject(DestroyRef); private thyPopover = inject(ThyPopover); @@ -56,9 +58,9 @@ export class AITableGridEventService { }); fromEvent(document, 'mousedown') - .pipe(this.takeUntilDestroyed) + .pipe(takeUntilDestroyed(this.destroyRef)) .subscribe((event) => { - this.mousedownEvent$.next(event as MouseEvent); + this.globalMousedownEvent$.next(event as MouseEvent); }); } diff --git a/packages/grid/src/services/selection.servive.ts b/packages/grid/src/services/selection.servive.ts index f842281f..25caba82 100644 --- a/packages/grid/src/services/selection.servive.ts +++ b/packages/grid/src/services/selection.servive.ts @@ -52,7 +52,11 @@ export class AITableGridSelectionService { } updateSelect(event: MouseEvent) { - const target = event.target as HTMLElement; + const target = event?.target as HTMLElement; + if (!target) { + return; + } + const cellDom = target.closest('.grid-cell'); const colDom = target.closest('.grid-field'); if (cellDom) { @@ -64,7 +68,6 @@ export class AITableGridSelectionService { const fieldId = colDom.getAttribute('fieldId'); fieldId && this.selectField(fieldId); } - if (!cellDom && !colDom) { this.clearSelection(); }