diff --git a/packages/qgrid-core/src/highlight/highlight.let.js b/packages/qgrid-core/src/highlight/highlight.let.js index a12fefef6..bfd4032e1 100644 --- a/packages/qgrid-core/src/highlight/highlight.let.js +++ b/packages/qgrid-core/src/highlight/highlight.let.js @@ -69,7 +69,6 @@ export class HighlightLet { hasChanges = true; } } - if (hasChanges) { model.highlight({ rows }, { source: 'highlight.view' @@ -78,6 +77,36 @@ export class HighlightLet { } }); + this.oneRow = new Command({ + source: 'highlight.oneRow', + canExecute: () => !this.isRendering, + execute: (row, state) => { + let rows = Array.from(model.highlight().rows); + const index = rows.indexOf(row); + let hasChanges = false; + if (state) { + if (index < 0) { + rows.push(row); + hasChanges = true; + } + } + else { + if (index >= 0) { + rows.splice(index, 1); + hasChanges = true; + } + } + if (hasChanges) { + if(rows.length > 1) { + rows = rows.splice(rows.length-1, 1); + } + model.highlight({ rows }, { + source: 'highlight.oneRow' + }); + } + } + }); + this.cell = new Command({ source: 'highlight.view', canExecute: () => !this.isRendering, diff --git a/packages/qgrid-core/src/model/model.bind.js b/packages/qgrid-core/src/model/model.bind.js index 01340a990..c25f71696 100644 --- a/packages/qgrid-core/src/model/model.bind.js +++ b/packages/qgrid-core/src/model/model.bind.js @@ -1,5 +1,5 @@ -import { noop, toCamelCase, isUndefined, isArray } from '../utility/kit'; import { Log } from '../infrastructure//log'; +import { isArray, isUndefined, noop, toCamelCase } from '../utility/kit'; export class ModelBinder { constructor(host, plugin) { diff --git a/packages/qgrid-core/src/model/model.js b/packages/qgrid-core/src/model/model.js index 672ec0eea..15112869e 100644 --- a/packages/qgrid-core/src/model/model.js +++ b/packages/qgrid-core/src/model/model.js @@ -1,8 +1,8 @@ -import { GridError } from '../infrastructure/error'; import { Event } from '../event/event'; +import { GridError } from '../infrastructure/error'; import { Guard } from '../infrastructure/guard'; -import { isArray, isObject, getTypeName } from '../utility/kit'; import { Log } from '../infrastructure/log'; +import { getTypeName, isArray, isObject } from '../utility/kit'; function equals(x, y) { // TODO: improve equality algorithm diff --git a/packages/qgrid-core/src/view/view.host.js b/packages/qgrid-core/src/view/view.host.js index c29c00b88..d95f1294a 100644 --- a/packages/qgrid-core/src/view/view.host.js +++ b/packages/qgrid-core/src/view/view.host.js @@ -1,7 +1,7 @@ import { final } from '../infrastructure/final'; import { - checkButtonCode, getButtonCode, LEFT_BUTTON, - NO_BUTTON, stringify + checkButtonCode, getButtonCode, LEFT_BUTTON, + NO_BUTTON, stringify } from '../mouse/mouse.code'; import { PathService } from '../path/path.service'; import { PipeUnit } from '../pipe/pipe.unit'; @@ -209,12 +209,8 @@ export class ViewHost { if (tr) { const { index } = tr; - if (highlight.row.canExecute(index)) { - rows - .filter(i => i !== index) - .forEach(i => highlight.row.execute(i, false)); - - highlight.row.execute(index, true); + if (highlight.oneRow.canExecute(index)) { + highlight.oneRow.execute(index, true); } } diff --git a/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts b/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts index 3c7ca0dcc..3dde031ca 100644 --- a/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts +++ b/packages/qgrid-ngx-plugins/src/lib/cell-tooltip/cell-tooltip.directive.ts @@ -10,9 +10,16 @@ import { GridPlugin, TemplateHostService } from '@qgrid/ngx'; providers: [GridPlugin, TemplateHostService], }) +//TODO: Re-name to TooltipDirective export class CellTooltipDirective implements OnChanges { @Input() host: HTMLElement; @Input() showDelay = 1000; + @Input() position: (host: HTMLElement) => [number, number] = (host) => { + const { top, left, height } = host.getBoundingClientRect(); + const box = this.getBoxRect(host); + + return [left - box.left, top - box.top + height]; + }; private job = jobLine(this.showDelay); @@ -28,13 +35,12 @@ export class CellTooltipDirective implements OnChanges { } if (e.host && this.host) { - const { top, left, height } = this.host.getBoundingClientRect(); - const box = this.getBoxRect(this.host); - const host = this.elementRef.nativeElement; + const nativeElement = this.elementRef.nativeElement; this.job(() => { - this.renderer.setStyle(host, 'top', top - box.top + height + 'px'); - this.renderer.setStyle(host, 'left', left - box.left + 'px'); - this.renderer.removeClass(host, 'q-grid-hide'); + const [left, top] = this.position(this.host); + this.renderer.setStyle(nativeElement, 'top', top + 'px'); + this.renderer.setStyle(nativeElement, 'left', left + 'px'); + this.renderer.removeClass(nativeElement, 'q-grid-hide'); }); } diff --git a/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html b/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html index 4f610c638..bebb11688 100644 --- a/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html +++ b/packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html @@ -10,10 +10,11 @@
+ unfold_more
\ No newline at end of file diff --git a/packages/qgrid-ngx/src/lib/layer/layer.service.ts b/packages/qgrid-ngx/src/lib/layer/layer.service.ts index 6c3938da0..b2a6d34b3 100644 --- a/packages/qgrid-ngx/src/lib/layer/layer.service.ts +++ b/packages/qgrid-ngx/src/lib/layer/layer.service.ts @@ -25,22 +25,25 @@ export class LayerService { const { nativeElement } = container.element; nativeElement.parentElement.classList.add(`q-grid-layer-${name}`); this.getHostElement()?.classList.add(`q-grid-${name}`); - container.createEmbeddedView(link.template, {}); - } + const embeddedViewRef = container.createEmbeddedView(link.template, {}); + - const destroy = container - ? () => { + const destroy = () => { this.layers.delete(name); const { nativeElement } = container.element; - nativeElement.parentElement.classList.add(`q-grid-layer-${name}`); + nativeElement.parentElement.classList.remove(`q-grid-layer-${name}`); this.getHostElement()?.classList.remove(`q-grid-${name}`); - container.clear(); + embeddedViewRef.destroy(); } - : () => this.layers.delete(name); - const layer = new Layer(destroy); - this.layers.set(name, layer); - return layer; + const layer = new Layer(destroy); + this.layers.set(name, layer); + return layer; + } + const noopLayer = new Layer(() => this.layers.delete(name)); + this.layers.set(name, noopLayer); + + return noopLayer; } get count() { diff --git a/packages/qgrid-ngx/src/lib/row/row.component.ts b/packages/qgrid-ngx/src/lib/row/row.component.ts index a18427f21..19ac3475f 100644 --- a/packages/qgrid-ngx/src/lib/row/row.component.ts +++ b/packages/qgrid-ngx/src/lib/row/row.component.ts @@ -8,7 +8,7 @@ import { TemplateHostService } from '../template/template-host.service'; @Component({ selector: 'q-grid-row', - template: '', + template: ``, providers: [ TemplateHostService, GridPlugin, @@ -90,10 +90,22 @@ export class RowComponent implements OnChanges, OnInit { }); } } + + } ngOnChanges() { const { model } = this.plugin; this.stateAccessor.write(model); } + + private addRowResizeLayer(): void { + const rowResizeLayer = 'row-resize'; + const table = this.plugin.table; + if (table.view.hasLayer(rowResizeLayer)) { + table.view.removeLayer(rowResizeLayer); + } + + table.view.addLayer(rowResizeLayer); + } } diff --git a/packages/qgrid-ngx/src/lib/row/row.module.ts b/packages/qgrid-ngx/src/lib/row/row.module.ts index 53ac0d245..62b506a69 100644 --- a/packages/qgrid-ngx/src/lib/row/row.module.ts +++ b/packages/qgrid-ngx/src/lib/row/row.module.ts @@ -1,9 +1,15 @@ import { NgModule } from '@angular/core'; +import { LayerModule } from '../layer/layer.module'; +import { TemplateModule } from '../template/template.module'; import { RowComponent } from './row.component'; import { TrCoreDirective } from './tr-core.directive'; import { TrhCoreDirective } from './trh-core.directive'; @NgModule({ + imports: [ + LayerModule, + TemplateModule + ], declarations: [ RowComponent, TrCoreDirective, diff --git a/packages/qgrid-styles/focus.scss b/packages/qgrid-styles/focus.scss index 556869242..a4bb604b4 100644 --- a/packages/qgrid-styles/focus.scss +++ b/packages/qgrid-styles/focus.scss @@ -7,6 +7,19 @@ td.q-grid-focused { } } + +.q-grid-row-size-indicator { + display: none; +} + +.q-grid-highlighted { + .q-grid-row-size-indicator { + display: block; + position: absolute; + bottom: 0; + } +} + .q-grid-view.q-grid-active { td.q-grid-focused { outline-color: $blue-outline025;