feat: improved performance

m.ivanov4 · m.ivanov4 · commit 47f167f9d60f · 2020-03-20T18:48:16.000+03:00
diff --git a/projects/table-builder/package.json b/projects/table-builder/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "0.23.0",
+    "version": "0.24.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"
diff --git a/projects/table-builder/src/lib/table/components/ngx-context-menu/ngx-context-menu.component.scss b/projects/table-builder/src/lib/table/components/ngx-context-menu/ngx-context-menu.component.scss
@@ -8,11 +8,18 @@
     .context-menu {
         display: flex;
         position: fixed;
-        background: #fff;
         z-index: 10;
         border: 1px solid #dcdcdc;
-        box-shadow: 1px 1px 2px #9c9c9c;
         flex-direction: column;
+        transition: max-height, height, min-height 0.3s;
+        min-height: 0;
+        max-height: 0;
+        height: 0;
+        overflow: hidden;
+        background: rgb(255, 255, 255);
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
+        border-radius: 4px;
+        font-family: Lucida Grande, sans-serif;
 
         &__item {
             margin-top: 0;
diff --git a/projects/table-builder/src/lib/table/components/table-thead/table-thead.component.html b/projects/table-builder/src/lib/table/components/table-thead/table-thead.component.html
@@ -40,15 +40,19 @@
             class="table-grid__column--sortable"
             *ngIf="columnSchema?.isModel && columnSchema?.sortable"
             [class.table-grid__column--sortable-active]="sortableDefinition[columnSchema.key]"
-            [class.table-grid__column--sortable-asc]="sortableDefinition[columnSchema.key] === orderType.ASC"
-            [class.table-grid__column--sortable-desc]="sortableDefinition[columnSchema.key] === orderType.DESC"
             (click)="columnSchema?.sortable ? sortByKey.emit(columnSchema.key) : null"
         >
             <img
+                alt="sort"
                 class="table-grid-icon--sortable"
+                [class.table-grid-icon--sortable-asc]="sortableDefinition[columnSchema.key] === orderType.ASC"
+                [class.table-grid-icon--sortable-desc]="sortableDefinition[columnSchema.key] === orderType.DESC"
                 src='data:image/svg+xml;utf8,<svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M128.4,189.3L233.4,89c5.8-6,13.7-9,22.4-9c8.7,0,16.5,3,22.4,9l105.4,100.3c12.5,11.9,12.5,31.3,0,43.2  c-12.5,11.9-32.7,11.9-45.2,0L288,184.4v217c0,16.9-14.3,30.6-32,30.6c-17.7,0-32-13.7-32-30.6v-217l-50.4,48.2  c-12.5,11.9-32.7,11.9-45.2,0C115.9,220.6,115.9,201.3,128.4,189.3z"/></svg>'
-                alt="sort"
             />
+
+            <span class="table-grid-icon--sortable-number" *ngIf="sortableCount > 1" [@fadeAnimation]>
+                {{ positionMap[columnSchema.key] }}
+            </span>
         </div>
 
         <div
diff --git a/projects/table-builder/src/lib/table/components/table-thead/table-thead.component.ts b/projects/table-builder/src/lib/table/components/table-thead/table-thead.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 
+import { NGX_ANIMATION } from '../../animations/fade.animation';
 import { ColumnsSchema } from '../../interfaces/table-builder.external';
 import { KeyMap, ResizeEvent } from '../../interfaces/table-builder.internal';
 import { FilterableService } from '../../services/filterable/filterable.service';
@@ -10,13 +11,16 @@ import { OVERLOAD_WIDTH_TABLE_HEAD_CELL } from '../../symbols';
     selector: 'table-thead',
     templateUrl: './table-thead.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations: [NGX_ANIMATION]
 })
 export class TableTheadComponent {
     @Input('header-top') public headerTop: number;
     @Input('column-width') public columnWidth: number;
     @Input('head-height') public headHeight: string | number;
     @Input('sortable-definition') public sortableDefinition: KeyMap<SortOrderType>;
+    @Input('sortable-position') public positionMap: KeyMap<number>;
+    @Input('sortable-count') public sortableCount: number;
     @Input('filterable-definition') public filterableDefinition: KeyMap<string>;
     @Input('client-row-height') public clientRowHeight: number;
     @Input('column-schema') public columnSchema: ColumnsSchema;
diff --git a/projects/table-builder/src/lib/table/config/table-global-options.ts b/projects/table-builder/src/lib/table/config/table-global-options.ts
@@ -16,6 +16,6 @@ export const TABLE_GLOBAL_OPTIONS: TableGlobalOptions = {
     FRAME_TIME: 66,
     ROW_HEIGHT: 45,
     TIME_IDLE: 200,
-    MIN_BUFFER: 20,
-    BUFFER_OFFSET: 5
+    MIN_BUFFER: 10,
+    BUFFER_OFFSET: 3
 };
diff --git a/projects/table-builder/src/lib/table/directives/virtual-for.directive.ts b/projects/table-builder/src/lib/table/directives/virtual-for.directive.ts
@@ -105,8 +105,9 @@ export class VirtualForDirective implements OnDestroy {
     }
 
     private removeEmbeddedViewByIndex(index: number): void {
-        const [, viewRefItem]: InternalVirtualRef = this.cache.get(index);
-        if (viewRefItem) {
+        const ref: InternalVirtualRef | undefined = this.cache.get(index);
+        if (ref) {
+            const [, viewRefItem]: InternalVirtualRef = ref;
             const stackId: number = this.view.indexOf(viewRefItem);
             this.cache.delete(index);
 
diff --git a/projects/table-builder/src/lib/table/interfaces/table-builder.external.ts b/projects/table-builder/src/lib/table/interfaces/table-builder.external.ts
@@ -110,3 +110,8 @@ export interface CalculateRange {
 }
 
 export type ProduceDisableFn = ((item: TableRow) => boolean) | null;
+
+export interface OrderedField {
+    field: string;
+    order: string;
+}
diff --git a/projects/table-builder/src/lib/table/services/sortable/sortable.service.ts b/projects/table-builder/src/lib/table/services/sortable/sortable.service.ts
@@ -1,22 +1,21 @@
-import { Injectable, NgZone } from '@angular/core';
+import { EventEmitter, Injectable, NgZone } from '@angular/core';
 
 import { TABLE_GLOBAL_OPTIONS } from '../../config/table-global-options';
-import { TableRow } from '../../interfaces/table-builder.external';
+import { OrderedField, TableRow } from '../../interfaces/table-builder.external';
 import { KeyMap, Resolver } from '../../interfaces/table-builder.internal';
 import { WebWorkerThreadService } from '../../worker/worker-thread.service';
-import { UtilsService } from '../utils/utils.service';
 import { sortWorker } from './sort.worker';
 import { SortableMessage, SortOrderType } from './sortable.interfaces';
 
 @Injectable()
 export class SortableService {
     public definition: KeyMap<SortOrderType> = {};
+    public positionMap: KeyMap<number> = {};
+    public sortableCount: number = 0;
+    private skipInternalSort: boolean = false;
+    private sortChanges: EventEmitter<OrderedField[]> | null;
 
-    constructor(
-        private readonly thread: WebWorkerThreadService,
-        private readonly utils: UtilsService,
-        private readonly zone: NgZone
-    ) {}
+    constructor(private readonly thread: WebWorkerThreadService, private readonly zone: NgZone) {}
 
     public get empty(): boolean {
         return Object.keys(this.definition).length === 0;
@@ -29,27 +28,59 @@ export class SortableService {
     public sort(data: TableRow[]): Promise<TableRow[]> {
         return new Promise(
             (resolve: Resolver<TableRow[]>): void => {
+                if (this.skipInternalSort) {
+                    resolve(data);
+                    return;
+                }
+
                 this.thread
                     .run<TableRow[], SortableMessage>(sortWorker, { definition: this.definition, source: data })
-                    .then(
-                        (sorted: TableRow[]): void => {
-                            this.zone.runOutsideAngular(
-                                (): void => {
-                                    window.setTimeout((): void => resolve(sorted), TABLE_GLOBAL_OPTIONS.TIME_IDLE);
-                                }
-                            );
-                        }
-                    );
+                    .then((sorted: TableRow[]): void => this.idleResolve(resolve, sorted));
             }
         );
     }
 
     public setDefinition(definition: KeyMap<string>): void {
         this.definition = this.empty ? (definition as KeyMap<SortOrderType>) || {} : this.definition;
+        this.triggerOnChanges();
+    }
+
+    public setSkipSort(skipInternalSort: boolean): void {
+        this.skipInternalSort = skipInternalSort;
+    }
+
+    public setSortChanges(emitter: EventEmitter<OrderedField[]>): void {
+        this.sortChanges = emitter;
     }
 
     public updateSortKey(key: string): void {
         this.definition = this.updateImmutableDefinitions(key);
+        this.triggerOnChanges();
+    }
+
+    private triggerOnChanges(): void {
+        const orderedFields: OrderedField[] = [];
+        this.positionMap = {};
+
+        if (this.sortChanges) {
+            Object.entries(this.definition).forEach(
+                ([key, ordered]: [string, SortOrderType], index: number): void => {
+                    this.positionMap[key] = index + 1;
+                    orderedFields.push({ field: key, order: ordered.toLocaleUpperCase() });
+                }
+            );
+
+            this.sortableCount = orderedFields.length;
+            this.sortChanges.emit(orderedFields);
+        }
+    }
+
+    private idleResolve(resolve: Resolver<TableRow[]>, sorted: TableRow[]): void {
+        this.zone.runOutsideAngular(
+            (): void => {
+                window.setTimeout((): void => resolve(sorted), TABLE_GLOBAL_OPTIONS.TIME_IDLE);
+            }
+        );
     }
 
     private updateImmutableDefinitions(key: string): KeyMap<SortOrderType> {
diff --git a/projects/table-builder/src/lib/table/styles/cell.scss b/projects/table-builder/src/lib/table/styles/cell.scss
@@ -157,7 +157,3 @@
         transform: translate(0);
     }
 }
-
-.cdk-drag-preview .table-grid__header-cell {
-    top: 0 !important;
-}
diff --git a/projects/table-builder/src/lib/table/styles/columns.scss b/projects/table-builder/src/lib/table/styles/columns.scss
@@ -97,10 +97,24 @@
             height: 20px;
             opacity: 0.2;
             font-size: 12px;
-            transition: all 0.2s ease-in-out;
-            transform: rotate(180deg);
             cursor: pointer;
 
+            .table-grid-icon--sortable {
+                transition: transform 0.4s;
+
+                &-number {
+                    position: absolute;
+                    font-family: Lucida Grande, sans-serif;
+                    font-size: 10px;
+                    font-weight: bold;
+                }
+            }
+
+            .table-grid-icon--sortable,
+            .table-grid-icon--sortable-asc {
+                transform: rotate(180deg);
+            }
+
             &-active {
                 opacity: 1;
             }
@@ -133,7 +147,7 @@
         }
 
         &--sortable {
-            &-desc {
+            .table-grid-icon--sortable-desc {
                 transform: rotate(0deg);
             }
         }
diff --git a/projects/table-builder/src/lib/table/styles/draggable.scss b/projects/table-builder/src/lib/table/styles/draggable.scss
@@ -7,5 +7,19 @@
 }
 
 .table-grid__column.cdk-drag-placeholder {
-    opacity: 0;
+    opacity: 0.3;
+}
+
+.cdk-drag-preview {
+    .table-grid__header-cell {
+        top: 0 !important;
+    }
+
+    &.table-grid__column {
+        background: none;
+
+        .table-grid__cell:not(.table-grid__header-cell) {
+            display: none;
+        }
+    }
 }
diff --git a/projects/table-builder/src/lib/table/table-builder.api.ts b/projects/table-builder/src/lib/table/table-builder.api.ts
@@ -29,6 +29,7 @@ import { NgxOptionsComponent } from './components/ngx-options/ngx-options.compon
 import { TABLE_GLOBAL_OPTIONS } from './config/table-global-options';
 import {
     ColumnsSchema,
+    OrderedField,
     ProduceDisableFn,
     SimpleSchemaColumns,
     TableRow,
@@ -57,6 +58,7 @@ export abstract class TableBuilderApiImpl
     @Input() public keys: string[] = [];
     @Input() public striped: boolean = true;
     @Input() public name: string = null;
+    @Input('skip-sort') public skipSort: boolean = false;
     @Input('sort-types') public sortTypes: KeyMap = null;
     @Input('exclude-keys') public excludeKeys: (string | RegExp)[] = [];
     @Input('auto-width') public autoWidth: boolean = false;
@@ -74,6 +76,7 @@ export abstract class TableBuilderApiImpl
     @Output() public afterRendered: EventEmitter<boolean> = new EventEmitter();
     @Output() public schemaChanges: EventEmitter<SimpleSchemaColumns> = new EventEmitter();
     @Output() public onChanges: EventEmitter<TableRow[] | null> = new EventEmitter();
+    @Output() public sortChanges: EventEmitter<OrderedField[]> = new EventEmitter();
 
     @ContentChild(NgxOptionsComponent, { static: false })
     public columnOptions: NgxOptionsComponent = null;
diff --git a/projects/table-builder/src/lib/table/table-builder.component.html b/projects/table-builder/src/lib/table/table-builder.component.html
@@ -95,6 +95,8 @@
                             [column-width]="column.offsetWidth"
                             [header-top]="headerRef?.nativeElement.offsetHeight || 0"
                             [sortable-definition]="sortable.definition"
+                            [sortable-position]="sortable.positionMap"
+                            [sortable-count]="sortable.sortableCount"
                             [filterable-definition]="filterable.definition"
                             [client-row-height]="clientRowHeight"
                             [head-height]="headHeight"
diff --git a/projects/table-builder/src/lib/table/table-builder.component.ts b/projects/table-builder/src/lib/table/table-builder.component.ts
@@ -162,6 +162,8 @@ export class TableBuilderComponent extends TableBuilderApiImpl
         const nonIdenticalStructure: boolean = this.sourceExists && this.getCountKeys() !== this.renderedCountKeys;
         this.sourceIsNull = this.checkSourceIsNull();
         this.sortable.setDefinition(this.sortTypes);
+        this.sortable.setSkipSort(this.skipSort);
+        this.sortable.setSortChanges(this.sortChanges);
 
         if (nonIdenticalStructure) {
             this.preRenderTable();
@@ -206,15 +208,14 @@ export class TableBuilderComponent extends TableBuilderApiImpl
 
     public cdkDragMoved(event: CdkDragStart, root: HTMLElement): void {
         const preview: HTMLElement = event.source._dragRef['_preview'];
-        const head: HTMLElement = root.querySelector('table-thead');
-
+        const top: number = root.getBoundingClientRect().top;
         const transform: string = event.source._dragRef['_preview'].style.transform || '';
         const [x, , z]: [number, number, number] = transform
             .replace(/translate3d|\(|\)|px/g, '')
             .split(',')
             .map((val: string): number => parseFloat(val)) as [number, number, number];
 
-        preview.style.transform = `translate3d(${x}px, ${head.getBoundingClientRect().top}px, ${z}px)`;
+        preview.style.transform = `translate3d(${x}px, ${top}px, ${z}px)`;
     }
 
     public ngAfterViewChecked(): void {
diff --git a/projects/table-builder/src/lib/tests/samples/lifecycle/lifecycle.spec.ts b/projects/table-builder/src/lib/tests/samples/lifecycle/lifecycle.spec.ts
@@ -1,9 +1,7 @@
 /* eslint-disable */
 import { NgxColumnComponent, NgxTableViewChangesService, TableBuilderComponent } from '@angular-ru/ng-table-builder';
-import { ApplicationRef, ChangeDetectorRef, Injector, NgZone, QueryList, SimpleChanges } from '@angular/core';
-import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-
-import { TABLE_GLOBAL_OPTIONS } from '../../../table/config/table-global-options';
+import { ApplicationRef, ChangeDetectorRef, NgZone, QueryList, SimpleChanges } from '@angular/core';
+import { fakeAsync, tick } from '@angular/core/testing';
 import { Any, Fn } from '../../../table/interfaces/table-builder.internal';
 import { ContextMenuService } from '../../../table/services/context-menu/context-menu.service';
 import { DraggableService } from '../../../table/services/draggable/draggable.service';
@@ -65,7 +63,7 @@ describe('[TEST]: Lifecycle table', () => {
         draggable = new DraggableService(parser);
 
         resizeService = new ResizableService();
-        sortable = new SortableService(worker, utils, zone);
+        sortable = new SortableService(worker, zone);
 
         table = new TableBuilderComponent(mockChangeDetector as ChangeDetectorRef, {
             get<T>(token: Any) {
diff --git a/src/app/samples/sample-fourteen/sample-fourteen.component.ts b/src/app/samples/sample-fourteen/sample-fourteen.component.ts
@@ -27,31 +27,6 @@ declare const hljs: Any;
                 text-transform: uppercase;
             }
 
-            .my-filter {
-                padding: 10px 5px 10px 5px;
-            }
-
-            .my-filter .mat-form-field {
-                width: 100%;
-            }
-
-            .my-filter .filter-form {
-                display: flex;
-            }
-
-            .my-filter .filter-options.mat-form-field {
-                margin-right: 0;
-            }
-
-            .my-filter .filter-options {
-                width: 40%;
-            }
-
-            .my-filter .mat-form-field-appearance-outline .mat-form-field-wrapper {
-                margin-bottom: 0;
-                padding: 2px 0;
-            }
-
             .filter-example .table-grid__cell > * {
                 font-size: 12px;
             }
diff --git a/src/app/samples/sample-night/sample-night.component.html b/src/app/samples/sample-night/sample-night.component.html
diff --git a/src/app/samples/sample-six/sample-six.component.html b/src/app/samples/sample-six/sample-six.component.html
diff --git a/src/app/samples/sample-six/sample-six.component.ts b/src/app/samples/sample-six/sample-six.component.ts
diff --git a/src/styles.css b/src/styles.css

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@angular-ru/ng-table-builder",`
`3`		`- "version": "0.23.0",`
	`3`	`+ "version": "0.24.0",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"bugs": {`
`6`	`6`	`"url": "https://github.com/Angular-RU/ng-table-builder/issues"`
Original file line number	Diff line number	Diff line change
`@@ -110,3 +110,8 @@ export interface CalculateRange {`
`110`	`110`	`}`
`111`	`111`
`112`	`112`	`export type ProduceDisableFn = ((item: TableRow) => boolean) \| null;`
	`113`	`+`
	`114`	`+export interface OrderedField {`
	`115`	`+ field: string;`
	`116`	`+ order: string;`
	`117`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,3 @@`
`157`	`157`	`transform: translate(0);`
`158`	`158`	`}`
`159`	`159`	`}`
`160`		`-`
`161`		`-.cdk-drag-preview .table-grid__header-cell {`
`162`		`- top: 0 !important;`
`163`		`-}`