From a11735b54c8835601dc9d3a1fd0ec5e0a34e63a9 Mon Sep 17 00:00:00 2001 From: zhangwen <1062680993@qq.com> Date: Wed, 13 Jan 2021 15:01:52 +0800 Subject: [PATCH] fix(table): fixed drag when column width less than min column width --- example/src/app/gantt/gantt.component.html | 2 +- example/src/app/gantt/gantt.component.ts | 7 ++- packages/gantt/src/class/event.ts | 6 ++- .../table/gantt-table.component.html | 4 +- .../components/table/gantt-table.component.ts | 52 +++++++++++++++++-- packages/gantt/src/gantt.component.ts | 7 ++- .../gantt/src/table/gantt-column.component.ts | 3 -- .../gantt/src/table/gantt-table.component.ts | 5 +- 8 files changed, 70 insertions(+), 16 deletions(-) diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html index ac2812ce..6e72b685 100644 --- a/example/src/app/gantt/gantt.component.html +++ b/example/src/app/gantt/gantt.component.html @@ -55,7 +55,7 @@ (linkDragEnded)="linkDragEnded($event)" (loadOnScroll)="loadOnScroll($event)" > - + {{ item.title }} diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts index b58df494..dd581070 100644 --- a/example/src/app/gantt/gantt.component.ts +++ b/example/src/app/gantt/gantt.component.ts @@ -10,7 +10,8 @@ import { GanttLinkDragEvent, GanttItem, GanttViewOptions, - GanttDate + GanttDate, + GanttTableEvent } from 'ngx-gantt'; import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; @@ -86,4 +87,8 @@ export class AppGanttExampleComponent implements OnInit { print(name: string) { this.printService.print(name); } + + columnChange(event: GanttTableEvent) { + console.log(event); + } } diff --git a/packages/gantt/src/class/event.ts b/packages/gantt/src/class/event.ts index b4964b52..83d01f00 100644 --- a/packages/gantt/src/class/event.ts +++ b/packages/gantt/src/class/event.ts @@ -1,11 +1,13 @@ +import { QueryList } from '@angular/core'; +import { NgxGanttTableColumnComponent } from '../table/gantt-column.component'; import { GanttItem } from './item'; export class GanttDragEvent { item: GanttItem; } -export class GanttColumnEvent { - width: number; +export class GanttTableEvent { + columns: QueryList; } export class GanttLinkDragEvent { diff --git a/packages/gantt/src/components/table/gantt-table.component.html b/packages/gantt/src/components/table/gantt-table.component.html index df198b69..d8cd3a63 100644 --- a/packages/gantt/src/components/table/gantt-table.component.html +++ b/packages/gantt/src/components/table/gantt-table.component.html @@ -1,5 +1,5 @@
-
+
{{ column.name }} @@ -9,7 +9,7 @@ cdkDrag cdkDragLockAxis="x" cdkDragBoundary=".gantt" - (cdkDragMoved)="dragMoved($event)" + (cdkDragMoved)="dragMoved($event, column)" (cdkDragStarted)="dragStarted($event)" (cdkDragEnded)="columnDragEnded($event, column)" >
diff --git a/packages/gantt/src/components/table/gantt-table.component.ts b/packages/gantt/src/components/table/gantt-table.component.ts index 8925bdf6..3c542ea5 100644 --- a/packages/gantt/src/components/table/gantt-table.component.ts +++ b/packages/gantt/src/components/table/gantt-table.component.ts @@ -1,9 +1,16 @@ -import { Component, HostBinding, TemplateRef, QueryList, Input, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core'; +import { Component, HostBinding, TemplateRef, QueryList, Input, OnInit, ViewChild, ElementRef } from '@angular/core'; import { GanttItemInternal, GanttGroupInternal } from '../../class'; import { NgxGanttTableColumnComponent } from '../../table/gantt-column.component'; import { defaultColumnWidth, minColumnWidth, NgxGanttComponent } from '../../gantt.component'; import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop'; import { coerceCssPixelValue } from '@angular/cdk/coercion'; + +interface DragFixedConfig { + target: HTMLElement; + originWidth: number; + movedWidth: number; + minWidth: number; +} @Component({ selector: 'gantt-table', templateUrl: './gantt-table.component.html' @@ -33,10 +40,16 @@ export class GanttTableComponent implements OnInit { @HostBinding('class.gantt-table') ganttTableClass = true; - constructor(public gantt: NgxGanttComponent, private elementRef: ElementRef, private cdr: ChangeDetectorRef) {} + constructor(public gantt: NgxGanttComponent, private elementRef: ElementRef) {} ngOnInit() {} + private dragFixed(config: DragFixedConfig) { + if (config.movedWidth <= config.minWidth) { + config.target.style.transform = `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`; + } + } + expandGroup(group: GanttGroupInternal) { this.gantt.expandGroup(group); } @@ -50,7 +63,30 @@ export class GanttTableComponent implements OnInit { this.dragStartLeft = target.getBoundingClientRect().left; } - dragMoved(event: CdkDragMove) { + dragMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent) { + const target = event.source.element.nativeElement; + const left = target.getBoundingClientRect().left; + + let originWidth: number; + let movedWidth: number; + let minWidth: number; + if (column) { + originWidth = parseInt(column.columnWidth, 10); + movedWidth = originWidth + (left - this.dragStartLeft); + minWidth = minColumnWidth; + } else { + originWidth = this.elementRef.nativeElement.getBoundingClientRect().width; + movedWidth = originWidth + (left - this.dragStartLeft); + minWidth = minColumnWidth * this.columnList.length; + } + + this.dragFixed({ + target, + originWidth, + movedWidth, + minWidth + }); + this.showAuxiliaryLine(event); } @@ -60,7 +96,10 @@ export class GanttTableComponent implements OnInit { const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft); const columnWidth = Math.max(width || 0, minColumnWidth); column.columnWidth = coerceCssPixelValue(columnWidth); - column.columnChang.emit({ width: columnWidth }); + if (this.gantt.table) { + this.gantt.table.columnChange.emit({ columns: this.columnList }); + } + this.hideAuxiliaryLine(); event.source.reset(); } @@ -75,9 +114,12 @@ export class GanttTableComponent implements OnInit { const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10); const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth); column.columnWidth = coerceCssPixelValue(columnWidth); - column.columnChang.emit({ width: columnWidth }); }); + if (this.gantt.table) { + this.gantt.table.columnChange.emit({ columns: this.columnList }); + } + this.hideAuxiliaryLine(); event.source.reset(); } diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts index 41bc1f35..b00093e1 100644 --- a/packages/gantt/src/gantt.component.ts +++ b/packages/gantt/src/gantt.component.ts @@ -13,7 +13,9 @@ import { SimpleChanges, ContentChildren, QueryList, - AfterViewInit + AfterViewInit, + ViewChild, + ContentChild } from '@angular/core'; import { startWith, takeUntil, take, finalize } from 'rxjs/operators'; import { Subject, Observable } from 'rxjs'; @@ -22,6 +24,7 @@ import { GanttLinkDragEvent, GanttLineClickEvent, GanttItemInternal, GanttItem } import { NgxGanttTableColumnComponent } from './table/gantt-column.component'; import { sideWidth } from './gantt.styles'; import { coerceCssPixelValue } from '@angular/cdk/coercion'; +import { NgxGanttTableComponent } from './table/gantt-table.component'; export const defaultColumnWidth = 100; export const minColumnWidth = 80; @@ -52,6 +55,8 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, AfterViewIn @Output() lineClick = new EventEmitter(); + @ContentChild(NgxGanttTableComponent, { static: false }) table: NgxGanttTableComponent; + @ContentChildren(NgxGanttTableColumnComponent, { descendants: true }) columns: QueryList; private ngUnsubscribe$ = new Subject(); diff --git a/packages/gantt/src/table/gantt-column.component.ts b/packages/gantt/src/table/gantt-column.component.ts index bd8a5f89..f7194884 100644 --- a/packages/gantt/src/table/gantt-column.component.ts +++ b/packages/gantt/src/table/gantt-column.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit, ContentChild, TemplateRef, Input, EventEmitter, Inject, Output } from '@angular/core'; import { coerceCssPixelValue } from '@angular/cdk/coercion'; import { GanttUpper, GANTT_UPPER_TOKEN } from '../gantt-upper'; -import { GanttColumnEvent } from '../class'; @Component({ selector: 'ngx-gantt-column', template: '' @@ -16,8 +15,6 @@ export class NgxGanttTableColumnComponent implements OnInit { @Input() name: string; - @Output() columnChang = new EventEmitter(); - @ContentChild('cell', { static: true }) templateRef: TemplateRef; @ContentChild('header', { static: true }) headerTemplateRef: TemplateRef; diff --git a/packages/gantt/src/table/gantt-table.component.ts b/packages/gantt/src/table/gantt-table.component.ts index 7fc1f749..019b9977 100644 --- a/packages/gantt/src/table/gantt-table.component.ts +++ b/packages/gantt/src/table/gantt-table.component.ts @@ -1,10 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { GanttTableEvent } from '../class'; @Component({ selector: 'ngx-gantt-table', template: '' }) export class NgxGanttTableComponent implements OnInit { + @Output() columnChange = new EventEmitter(); + constructor() {} ngOnInit() {}