fix(table): fixed drag when column width less than min column width

worktile · Jan 13, 2021 · a11735b · a11735b
1 parent 826f2d2
commit a11735b
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 16 deletions.
diff --git 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)"
   >
-    <ngx-gantt-table>
+    <ngx-gantt-table (columnChange)="columnChange($event)">
       <ngx-gantt-column name="标题" width="120px">
         <ng-template #cell let-item="item">
           {{ item.title }}

diff --git 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
@@ -1,11 +1,13 @@
+import { QueryList } from '@angular/core';
+import { NgxGanttTableColumnComponent } from '../table/gantt-column.component';
 import { GanttItem } from './item';
 
 export class GanttDragEvent<T = unknown> {
     item: GanttItem<T>;
 }
 
-export class GanttColumnEvent {
-    width: number;
+export class GanttTableEvent {
+    columns: QueryList<NgxGanttTableColumnComponent>;
 }
 
 export class GanttLinkDragEvent<T = unknown> {

diff --git a/packages/gantt/src/components/table/gantt-table.component.html b/packages/gantt/src/components/table/gantt-table.component.html
@@ -1,5 +1,5 @@
 <div class="gantt-table-header gantt-table-row">
-  <div class="gantt-table-column" *ngFor="let column of columnList" [style.width]="column.columnWidth">
+  <div class="gantt-table-column" *ngFor="let column of columnList; let i = index" [style.width]="column.columnWidth">
     <ng-container *ngIf="column.headerTemplateRef; else default" [ngTemplateOutlet]="column.headerTemplateRef"></ng-container>
     <ng-template #default>
       {{ 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)"
     ></div>

diff --git 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
@@ -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<GanttLineClickEvent>();
 
+    @ContentChild(NgxGanttTableComponent, { static: false }) table: NgxGanttTableComponent;
+
     @ContentChildren(NgxGanttTableColumnComponent, { descendants: true }) columns: QueryList<NgxGanttTableColumnComponent>;
 
     private ngUnsubscribe$ = new Subject();

diff --git 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<GanttColumnEvent>();
-
     @ContentChild('cell', { static: true }) templateRef: TemplateRef<any>;
 
     @ContentChild('header', { static: true }) headerTemplateRef: TemplateRef<any>;

diff --git 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<GanttTableEvent>();
+
     constructor() {}
 
     ngOnInit() {}