feat: refactor styles and add dragging mask backdrop

example/src/app/examples/examples.component.html

@@ -5,10 +5,15 @@
         {{ row.title }}
       </ng-template>
     </ngx-gantt-column>
-    <ngx-gantt-column width="400px">
+    <ngx-gantt-column width="200px">
       <ng-template #header let-column> 开始时间 -> </ng-template>
       <ng-template #cell let-row>
-        {{ row.start * 1000 | date }}
+        {{ row.start * 1000 | date: 'yyyy-MM-dd' }}
+      </ng-template>
+    </ngx-gantt-column>
+    <ngx-gantt-column name="截止时间" width="200px">
+      <ng-template #cell let-row>
+        {{ row.end * 1000 | date: 'yyyy-MM-dd' }}
       </ng-template>
     </ngx-gantt-column>
     <!-- <ng-template #group let-group>

example/src/styles.scss

@@ -1,6 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import '../../packages/gantt/src/gantt.scss';
+@import '../../packages/gantt/src/styles/index.scss';
 @import '~@docgeni/template/styles/index.scss';
 // html,body {
 //   width: 100%;

packages/gantt/src/bar/bar-drag.ts

@@ -113,35 +113,48 @@ export class GanttBarDrag implements OnDestroy {
             dragRef.moved.subscribe((event) => {
                 if (isBefore) {
                     const x = this.item.refs.x + event.distance.x;
-                    const width = Math.max(this.item.refs.width + event.distance.x * -1, dragMinWidth);
-                    this.barElement.style.width = width + 'px';
-                    this.barElement.style.left = x + 'px';
-                    this.openDragBackdrop(
-                        this.barElement,
-                        this.ganttRef.view.getDateByXPoint(x),
-                        this.ganttRef.view.getDateByXPoint(x + width)
-                    );
+                    const width = this.item.refs.width + event.distance.x * -1;
+                    if (width > dragMinWidth) {
+                        this.barElement.style.width = width + 'px';
+                        this.barElement.style.left = x + 'px';
+                        this.openDragBackdrop(
+                            this.barElement,
+                            this.ganttRef.view.getDateByXPoint(x),
+                            this.ganttRef.view.getDateByXPoint(x + width)
+                        );
+                    }
                 } else {
                     const width = this.item.refs.width + event.distance.x;
-                    this.barElement.style.width = width + 'px';
-                    this.openDragBackdrop(
-                        this.barElement,
-                        this.ganttRef.view.getDateByXPoint(this.item.refs.x),
-                        this.ganttRef.view.getDateByXPoint(this.item.refs.x + width)
-                    );
+                    if (width > dragMinWidth) {
+                        this.barElement.style.width = width + 'px';
+                        this.openDragBackdrop(
+                            this.barElement,
+                            this.ganttRef.view.getDateByXPoint(this.item.refs.x),
+                            this.ganttRef.view.getDateByXPoint(this.item.refs.x + width)
+                        );
+                    }
                 }
                 event.source.reset();
             });
 
             dragRef.ended.subscribe((event) => {
                 if (isBefore) {
-                    const start = this.ganttRef.view.getDateByXPoint(this.item.refs.x + event.distance.x);
-                    this.item.updateDate(start, this.item.end);
+                    const width = this.item.refs.width + event.distance.x * -1;
+                    if (width > dragMinWidth) {
+                        this.item.updateDate(this.ganttRef.view.getDateByXPoint(this.item.refs.x + event.distance.x), this.item.end);
+                    } else {
+                        this.item.updateDate(this.item.end.startOfDay(), this.item.end);
+                    }
                 } else {
-                    const end = this.ganttRef.view.getDateByXPoint(
-                        this.item.refs.x + this.item.refs.width + event.distance.x
-                    );
-                    this.item.updateDate(this.item.start, end);
+                    const width = this.item.refs.width + event.distance.x;
+                    if (width > dragMinWidth) {
+                        this.item.updateDate(
+                            this.item.start,
+                            this.ganttRef.view.getDateByXPoint(this.item.refs.x + this.item.refs.width + event.distance.x)
+                        );
+                    } else {
+                        this.item.updateDate(this.item.start, this.item.start.endOfDay());
+                    }
                 }
                 this.clearDraggingStyles();
                 this.closeDragBackdrop();
@@ -193,25 +206,25 @@ export class GanttBarDrag implements OnDestroy {
     }
 
     private openDragBackdrop(dragElement: HTMLElement, start: GanttDate, end: GanttDate) {
-        // const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
-        // const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
-        // const rootRect = this.dom.root.getBoundingClientRect();
-        // const dragRect = dragElement.getBoundingClientRect();
-        // const left = Math.max(400, dragRect.left - rootRect.left);
-        // const width = dragRect.right - rootRect.left - left;
-        // dragMaskElement.style.left = left + 'px';
-        // dragMaskElement.style.width = width + 'px';
-        // dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
-        // dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
-        // dragMaskElement.style.display = 'block';
-        // dragBackdropElement.style.display = 'block';
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
+        const rootRect = this.dom.root.getBoundingClientRect();
+        const dragRect = dragElement.getBoundingClientRect();
+        const left = dragRect.left - rootRect.left - 400;
+        const width = dragRect.right - dragRect.left;
+        dragMaskElement.style.left = left + 'px';
+        dragMaskElement.style.width = width + 'px';
+        dragMaskElement.querySelector('.start').innerHTML = start.format('MM-dd');
+        dragMaskElement.querySelector('.end').innerHTML = end.format('MM-dd');
+        dragMaskElement.style.display = 'block';
+        dragBackdropElement.style.display = 'block';
     }
 
     private closeDragBackdrop() {
-        // const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
-        // const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
-        // dragMaskElement.style.display = 'none';
-        // dragBackdropElement.style.display = 'none';
+        const dragMaskElement = this.dom.root.querySelector('.gantt-drag-mask') as HTMLElement;
+        const dragBackdropElement = this.dom.root.querySelector('.gantt-drag-backdrop') as HTMLElement;
+        dragMaskElement.style.display = 'none';
+        dragBackdropElement.style.display = 'none';
     }
 
     private setDraggingStyles() {
@@ -236,7 +249,7 @@ export class GanttBarDrag implements OnDestroy {
             x1: refs.x + appendX - container.scrollLeft,
             y1: refs.y + appendY - container.scrollTop,
             x2: targetRect.left + targetRect.width / 2 - containerRect.left,
-            y2: targetRect.top + targetRect.height / 2 - containerRect.top,
+            y2: targetRect.top + targetRect.height / 2 - containerRect.top
         };
     }
 

packages/gantt/src/drag-backdrop/drag-backdrop.component.html

@@ -0,0 +1,6 @@
+<div class="gantt-drag-mask">
+  <div class="date-range">
+    <span class="start"></span>
+    <span class="end"></span>
+  </div>
+</div>

packages/gantt/src/drag-backdrop/drag-backdrop.component.scss

@@ -0,0 +1,33 @@
+.gantt-drag-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    display: none;
+}
+
+.gantt-drag-mask {
+    position: absolute;
+    top: $gantt-header-height;
+    z-index: 1;
+    height: 100%;
+    display: none;
+    background: rgba($color: $gantt-item-drag-mask-color, $alpha: 0.05);
+
+    .date-range {
+        width: 100%;
+        min-width: 120px;
+        top: -23px;
+        background: $gantt-item-drag-mask-color;
+        line-height: 23px;
+        border-radius: 4px;
+        color: #fff;
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        box-sizing: border-box
+    }
+}

packages/gantt/src/drag-backdrop/drag-backdrop.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+
+@Component({
+    selector: 'gantt-drag-backdrop',
+    templateUrl: `./drag-backdrop.component.html`
+})
+export class GanttDragBackdropComponent implements OnInit {
+    @HostBinding('class.gantt-drag-backdrop') backdropClass = true;
+
+    constructor() {}
+
+    ngOnInit() {}
+}

packages/gantt/src/gantt-dom.service.ts

@@ -22,6 +22,8 @@ export class GanttDomService implements OnDestroy {
 
     public side: Element;
 
+    public container: Element;
+
     public sideContainer: Element;
 
     public mainContainer: Element;
@@ -60,6 +62,7 @@ export class GanttDomService implements OnDestroy {
     initialize(root: ElementRef<HTMLElement>) {
         this.root = root.nativeElement;
         this.side = this.root.getElementsByClassName('gantt-side')[0];
+        this.container = this.root.getElementsByClassName('gantt-container')[0];
         this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
         this.mainContainer = this.root.getElementsByClassName('gantt-main-container')[0];
         this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];

packages/gantt/src/gantt-drag-container.ts

@@ -1,6 +1,7 @@
 import { Injectable, EventEmitter } from '@angular/core';
 import { GanttDragEvent, GanttLinkDragEvent } from './class/event';
 import { GanttItemInternal } from './class/item';
+import { GanttDomService } from './gantt-dom.service';
 
 export type LinkDragFrom = 'source' | 'dependent';
 
@@ -33,7 +34,7 @@ export class GanttDragContainer {
         this.linkDragDependent = this.linkDragFrom === 'dependent' ? item : null;
         this.linkDragStarted.emit({
             source: this.linkDragSource && this.linkDragSource.origin,
-            dependent: this.linkDragDependent && this.linkDragDependent.origin,
+            dependent: this.linkDragDependent && this.linkDragDependent.origin
         });
     }
 
@@ -45,7 +46,7 @@ export class GanttDragContainer {
         }
         this.linkDragEntered.emit({
             source: this.linkDragSource.origin,
-            dependent: this.linkDragDependent.origin,
+            dependent: this.linkDragDependent.origin
         });
     }
 
@@ -63,7 +64,7 @@ export class GanttDragContainer {
             // this.linkDragSource.addLink(this.linkDragDependent._id);
             this.linkDragEnded.emit({
                 source: this.linkDragSource.origin,
-                dependent: this.linkDragDependent.origin,
+                dependent: this.linkDragDependent.origin
             });
         }
         this.linkDragSource = null;

packages/gantt/src/gantt.component.html

@@ -3,5 +3,6 @@
 </div>
 <div class="gantt-container">
   <gantt-calendar-overlay></gantt-calendar-overlay>
+  <gantt-drag-backdrop></gantt-drag-backdrop>
   <gantt-main [groups]="groups" [items]="items" [barTemplate]="barTemplate"></gantt-main>
 </div>

packages/gantt/src/gantt.component.scss

@@ -0,0 +1,74 @@
+.gantt {
+    width: 100%;
+    height: 100%;
+    background-color: $gantt-bg-color;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    color: $gantt-color;
+    opacity: 0;
+
+    .gantt-side {
+        border-right: 1px solid $gantt-border-color;
+        position: relative;
+        z-index: 1;
+        overflow: auto;
+
+
+        &-has-shadow {
+            box-shadow: $gantt-side-shadow;
+        }
+
+        .gantt-side-header {
+            box-sizing: border-box;
+            height: $gantt-header-height;
+        }
+
+        .gantt-side-container {
+            height: calc(100% - #{$gantt-header-height});
+            overflow: auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    .gantt-container {
+        flex: 1;
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        background-color: $gantt-container-background-color;
+    }
+
+    .gantt-main-container {
+        width: 100%;
+        height: calc(100% - #{$gantt-header-height});
+        flex: 1;
+        position: absolute;
+        top: $gantt-header-height;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        overflow: auto;
+
+        .gantt-main-groups .gantt-main-items {
+            height: 100%;
+        }
+
+        .gantt-group {
+            height: $gantt-group-height;
+            background: $gantt-group-background-color;
+            border-bottom: 1px solid $gantt-border-color;
+        }
+
+        .gantt-item {
+            height: $gantt-item-height;
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+            position: relative;
+        }
+    }
+
+}

packages/gantt/src/gantt.component.ts

@@ -50,8 +50,6 @@ export class GanttComponent extends GanttUpper implements GanttRef, OnInit, OnCh
 
     @ContentChildren(GanttTableColumnComponent) columns: QueryList<GanttTableColumnComponent>;
 
-    @HostBinding('class.gantt-table') ganttTableClass = true;
-
     constructor(
         elementRef: ElementRef<HTMLElement>,
         cdr: ChangeDetectorRef,
@@ -64,7 +62,7 @@ export class GanttComponent extends GanttUpper implements GanttRef, OnInit, OnCh
 
     private computeItemRef(item: GanttItemInternal) {
         item.updateRefs({
-            width: this.view.getDateRangeWidth(item.start, item.end),
+            width: this.view.getDateRangeWidth(item.start.startOfDay(), item.end.endOfDay()),
             x: this.view.getXPointByDate(item.start),
             y: (this.styles.lineHeight - this.styles.barHeight) / 2
         });

packages/gantt/src/gantt.module.ts

@@ -10,6 +10,7 @@ import { GanttTableItemsComponent } from './table/items/items.component';
 import { GanttComponent } from './gantt.component';
 import { GanttMainComponent } from './main/gantt-main.component';
 import { GanttIconComponent } from './icon/icon.component';
+import { GanttDragBackdropComponent } from './drag-backdrop/drag-backdrop.component';
 
 @NgModule({
     imports: [CommonModule],
@@ -24,7 +25,8 @@ import { GanttIconComponent } from './icon/icon.component';
         GanttTableItemsComponent,
         GanttCalendarComponent,
         GanttBarComponent,
-        GanttIconComponent
+        GanttIconComponent,
+        GanttDragBackdropComponent
     ],
     providers: []
 })