Added dynamic row resize indicator

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,

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) {

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

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

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

packages/qgrid-ngx-theme-material/src/lib/templates/body-cell-row-indicator.tpl.html

@@ -10,10 +10,11 @@
 	</ng-container>
 	<ng-container *ngIf="$view.row.canResize">
 		<div [q-grid-drag]="$view.row.resize"
-			 [q-grid-resize]="$cell.row"
-			 q-grid-resize-selector="parent"
+				 [q-grid-resize]="$cell.row"
+			 	 q-grid-resize-selector="parent"
 		     q-grid-resize-path="rows"
 		     [q-grid-can-resize]="$view.row.resize.canExecute">
+				 <mat-icon class="q-grid-icon q-grid-row-size-indicator">unfold_more</mat-icon>
 		</div>
 	</ng-container>
 </ng-template>

packages/qgrid-ngx/src/lib/layer/layer.service.ts

@@ -25,22 +25,26 @@ 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() {

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: '<ng-content></ng-content>',
+	template: `<ng-container></ng-container>`,
 	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);
+	}
 }

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,

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;