@worktile/gantt 15.0.0 → 15.1.0-next.0

package/class/event.d.ts

@@ -30,3 +30,16 @@ export declare class GanttSelectedEvent<T = unknown> {
     event: Event;
     selectedValue: GanttItem<T> | GanttItem<T>[];
 }
+export declare class GanttTableDragDroppedEvent<T = unknown> {
+    source: GanttItem<T>;
+    sourceParent: GanttItem<T>;
+    target: GanttItem<T>;
+    targetParent: GanttItem<T>;
+    dropPosition: GanttTableDropPosition;
+}
+export type GanttTableDropPosition = 'before' | 'inside' | 'after';
+export declare class GanttTableDragEnterPredicateContext<T = unknown> {
+    source: GanttItem<T>;
+    target: GanttItem<T>;
+    dropPosition: GanttTableDropPosition;
+}

package/class/item.d.ts

@@ -1,6 +1,7 @@
 import { GanttDate } from '../utils/date';
 import { BehaviorSubject } from 'rxjs';
 import { GanttLink } from './link';
+import { GanttViewType } from './view-type';
 export interface GanttItemRefs {
     width: number;
     x: number;
@@ -19,6 +20,7 @@ export interface GanttItem<T = unknown> {
     group_id?: string;
     links?: (GanttLink | string)[];
     draggable?: boolean;
+    itemDraggable?: boolean;
     linkable?: boolean;
     expandable?: boolean;
     expanded?: boolean;
@@ -38,6 +40,7 @@ export declare class GanttItemInternal {
     color?: string;
     barStyle?: Partial<CSSStyleDeclaration>;
     draggable?: boolean;
+    itemDraggable?: boolean;
     linkable?: boolean;
     origin: GanttItem;
     expandable?: boolean;
@@ -47,6 +50,8 @@ export declare class GanttItemInternal {
     type?: GanttItemType;
     progress?: number;
     fillDays?: number;
+    viewType?: GanttViewType;
+    level?: number;
     get refs(): {
         width: number;
         x: number;
@@ -57,12 +62,13 @@ export declare class GanttItemInternal {
         x: number;
         y: number;
     }>;
-    constructor(item: GanttItem, options?: {
+    constructor(item: GanttItem, level?: number, options?: {
         fillDays: number;
     });
     fillItemStartOrEnd(item: GanttItem): void;
     updateRefs(refs: GanttItemRefs): void;
     updateDate(start: GanttDate, end: GanttDate): void;
+    updateLevel(level: number): void;
     addChildren(items: GanttItem[]): void;
     setExpand(expanded: boolean): void;
     addLink(link: GanttLink): void;

package/components/bar/bar-drag.d.ts

@@ -17,10 +17,17 @@ export declare class GanttBarDrag implements OnDestroy {
     private get dragDisabled();
     private get linkDragDisabled();
     private linkDraggingLine;
+    private dropListRef;
     private barDragRef;
     private dragRefs;
     private destroy$;
+    private containerScrollLeft;
+    private barDragMoveDistance;
+    private barHandleDragMoveDistance;
+    private dragScrolling;
     constructor(dragDrop: DragDrop, dom: GanttDomService, dragContainer: GanttDragContainer, root: NgxGanttRootComponent);
+    private createDragRef;
+    private createDragScrollEvent;
     private createMouseEvents;
     private createBarDrag;
     private createBarHandleDrags;
@@ -29,10 +36,13 @@ export declare class GanttBarDrag implements OnDestroy {
     private closeDragBackdrop;
     private setDraggingStyles;
     private clearDraggingStyles;
+    private barDragMove;
+    private barHandleDragMove;
     private calcLinkLinePositions;
     private createLinkDraggingLine;
     private destroyLinkDraggingLine;
     createDrags(elementRef: ElementRef, item: GanttItemInternal, ganttUpper: GanttUpper): void;
+    updateItem(item: GanttItemInternal): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttBarDrag, [null, null, null, { skipSelf: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<GanttBarDrag>;

package/components/bar/bar.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, ElementRef, OnChanges, OnDestroy, EventEmitter, AfterViewInit, QueryList, NgZone } from '@angular/core';
+import { OnInit, ElementRef, OnChanges, OnDestroy, EventEmitter, AfterViewInit, QueryList, NgZone, SimpleChanges } from '@angular/core';
 import { GanttBarDrag } from './bar-drag';
 import { GanttDragContainer } from '../../gantt-drag-container';
 import { GanttBarClickEvent } from '../../class';
@@ -16,6 +16,7 @@ export declare class NgxGanttBarComponent extends GanttItemUpper implements OnIn
     handles: QueryList<ElementRef<HTMLElement>>;
     constructor(dragContainer: GanttDragContainer, drag: GanttBarDrag, elementRef: ElementRef<HTMLDivElement>, ganttUpper: GanttUpper, ngZone: NgZone);
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     onBarClick(event: Event): void;
     private setContentBackground;

package/components/bar/bar.component.scss

@@ -157,6 +157,12 @@ $gantt-bar-link-drop-border: 5px;
     }
   }
 
+  &-draggable-drag {
+    .gantt-bar-layer {
+      visibility: hidden;
+    }
+  }
+
   &-active {
     @include active-bar();
   }
@@ -198,4 +204,20 @@ $gantt-bar-link-drop-border: 5px;
       }
     }
   }
+
+  // 强制去掉 cdk drag placeholder 默认样式
+  &.cdk-drag-placeholder,
+  .drag-handles .handle.cdk-drag-placeholder {
+    background: none !important;
+  }
+}
+
+.handle.cdk-drag-preview {
+  visibility: hidden;
+}
+
+.gantt-bar.cdk-drag-preview {
+  .gantt-bar-layer {
+    display: none;
+  }
 }

package/components/calendar/calendar.scss

@@ -0,0 +1,91 @@
+@use '../../styles/variables';
+
+.gantt-calendar {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+
+  svg {
+    position: relative;
+    z-index: 1;
+    background-color: variables.$gantt-bg-color;
+    overflow: visible;
+  }
+  line {
+    shape-rendering: crispEdges;
+  }
+
+  .primary-line {
+    stroke: variables.$gantt-date-primary-border;
+  }
+
+  .gantt-calendar-today-overlay {
+    position: relative;
+    z-index: 1;
+    .today-rect {
+      width: 35px;
+      height: 24px;
+      position: absolute;
+      background: variables.$gantt-date-today-color;
+      color: variables.$gantt-date-today-text-color;
+      text-align: center;
+      border-radius: 4px;
+    }
+    .today-line {
+      position: absolute;
+      width: 3px;
+      background: variables.$gantt-date-today-color;
+      transform: scaleX(0.5);
+      transform-origin: 100% 0;
+      margin-left: -2px;
+    }
+  }
+}
+
+.gantt-calendar-header {
+  position: relative;
+  z-index: 2;
+  height: variables.$gantt-header-height;
+  .gantt-calendar-today-overlay {
+    z-index: 2;
+  }
+  .header-line {
+    stroke: variables.$gantt-border-color;
+  }
+
+  .primary-text {
+    fill: variables.$gantt-date-primary-color;
+    font-size: variables.$gantt-date-primary-font-size;
+  }
+
+  .secondary-text {
+    fill: variables.$gantt-date-secondary-color;
+    font-size: variables.$gantt-date-secondary-font-size;
+
+    &-weekend {
+      fill: variables.$gantt-date-secondary-weekend-color;
+    }
+  }
+
+  .primary-text,
+  .secondary-text {
+    text-anchor: middle;
+  }
+}
+
+.gantt-calendar-grid {
+  position: absolute;
+  width: 100%;
+  .gantt-calendar-grid-main {
+    background-color: transparent;
+  }
+
+  .secondary-line {
+    stroke-dasharray: 2px 5px;
+    stroke: #cacaca;
+  }
+
+  .secondary-backdrop {
+    fill: variables.$gantt-date-week-backdrop-bg;
+  }
+}

package/components/calendar/grid/calendar-grid.component.d.ts

@@ -0,0 +1,24 @@
+import { OnInit, OnDestroy, NgZone, ElementRef } from '@angular/core';
+import { GanttDatePoint } from '../../../class/date-point';
+import { GanttUpper } from '../../../gantt-upper';
+import { GanttViewType } from './../../../class/view-type';
+import * as i0 from "@angular/core";
+export declare class GanttCalendarGridComponent implements OnInit, OnDestroy {
+    ganttUpper: GanttUpper;
+    private ngZone;
+    private elementRef;
+    get view(): import("@worktile/gantt").GanttView;
+    private unsubscribe$;
+    headerHeight: number;
+    mainHeight: number;
+    todayBorderRadius: number;
+    viewTypes: typeof GanttViewType;
+    className: string;
+    constructor(ganttUpper: GanttUpper, ngZone: NgZone, elementRef: ElementRef<HTMLElement>);
+    setTodayPoint(): void;
+    ngOnInit(): void;
+    trackBy(point: GanttDatePoint, index: number): string | number;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GanttCalendarGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GanttCalendarGridComponent, "gantt-calendar-grid", never, {}, {}, never, never, false, never>;
+}

package/components/calendar/header/calendar-header.component.d.ts

@@ -0,0 +1,21 @@
+import { OnInit, NgZone, ElementRef } from '@angular/core';
+import { GanttDatePoint } from '../../../class/date-point';
+import { GanttUpper } from '../../../gantt-upper';
+import { GanttViewType } from '../../../class';
+import * as i0 from "@angular/core";
+export declare class GanttCalendarHeaderComponent implements OnInit {
+    ganttUpper: GanttUpper;
+    private ngZone;
+    private elementRef;
+    get view(): import("@worktile/gantt").GanttView;
+    private unsubscribe$;
+    headerHeight: number;
+    viewTypes: typeof GanttViewType;
+    className: string;
+    constructor(ganttUpper: GanttUpper, ngZone: NgZone, elementRef: ElementRef<HTMLElement>);
+    ngOnInit(): void;
+    setTodayPoint(): void;
+    trackBy(point: GanttDatePoint, index: number): string | number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GanttCalendarHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GanttCalendarHeaderComponent, "gantt-calendar-header", never, {}, {}, never, never, false, never>;
+}

package/components/icon/icons.d.ts

@@ -5,4 +5,5 @@ export declare const icons: {
     'minus-square': string;
     loading: string;
     empty: string;
+    drag: string;
 };

package/components/links/links.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, EventEmitter, ChangeDetectorRef, ElementRef, OnDestroy, OnChanges } from '@angular/core';
+import { OnInit, EventEmitter, ChangeDetectorRef, ElementRef, OnDestroy, OnChanges, NgZone } from '@angular/core';
 import { GanttGroupInternal } from '../../class/group';
 import { GanttItemInternal } from './../../class/item';
 import { GanttLineClickEvent } from '../../class/event';
@@ -11,8 +11,8 @@ export declare class GanttLinksComponent implements OnInit, OnChanges, OnDestroy
     private cdr;
     private elementRef;
     private ganttDragContainer;
-    groups: GanttGroupInternal[];
-    items: GanttItemInternal[];
+    private ngZone;
+    flatData: (GanttGroupInternal | GanttItemInternal)[];
     lineClick: EventEmitter<GanttLineClickEvent<unknown>>;
     links: LinkInternal[];
     ganttLinkTypes: typeof GanttLinkType;
@@ -22,7 +22,7 @@ export declare class GanttLinksComponent implements OnInit, OnChanges, OnDestroy
     private linkLine;
     private unsubscribe$;
     ganttLinksOverlay: boolean;
-    constructor(ganttUpper: GanttUpper, cdr: ChangeDetectorRef, elementRef: ElementRef, ganttDragContainer: GanttDragContainer);
+    constructor(ganttUpper: GanttUpper, cdr: ChangeDetectorRef, elementRef: ElementRef, ganttDragContainer: GanttDragContainer, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(): void;
     private computeItemPosition;
@@ -33,5 +33,5 @@ export declare class GanttLinksComponent implements OnInit, OnChanges, OnDestroy
     mouseLeavePath(link: LinkInternal): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttLinksComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GanttLinksComponent, "gantt-links-overlay", never, { "groups": "groups"; "items": "items"; }, { "lineClick": "lineClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GanttLinksComponent, "gantt-links-overlay", never, { "flatData": "flatData"; }, { "lineClick": "lineClick"; }, never, never, false, never>;
 }

package/components/main/gantt-main.component.d.ts

@@ -4,8 +4,8 @@ import { GanttUpper } from '../../gantt-upper';
 import * as i0 from "@angular/core";
 export declare class GanttMainComponent {
     ganttUpper: GanttUpper;
-    groups: GanttGroupInternal[];
-    items: GanttItemInternal[];
+    renderData: (GanttGroupInternal | GanttItemInternal)[];
+    flatData: (GanttGroupInternal | GanttItemInternal)[];
     groupHeaderTemplate: TemplateRef<any>;
     itemTemplate: TemplateRef<any>;
     barTemplate: TemplateRef<any>;
@@ -16,5 +16,5 @@ export declare class GanttMainComponent {
     constructor(ganttUpper: GanttUpper);
     trackBy(index: number, item: GanttGroupInternal | GanttItemInternal): string | number;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttMainComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GanttMainComponent, "gantt-main", never, { "groups": "groups"; "items": "items"; "groupHeaderTemplate": "groupHeaderTemplate"; "itemTemplate": "itemTemplate"; "barTemplate": "barTemplate"; "rangeTemplate": "rangeTemplate"; }, { "barClick": "barClick"; "lineClick": "lineClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GanttMainComponent, "gantt-main", never, { "renderData": "renderData"; "flatData": "flatData"; "groupHeaderTemplate": "groupHeaderTemplate"; "itemTemplate": "itemTemplate"; "barTemplate": "barTemplate"; "rangeTemplate": "rangeTemplate"; }, { "barClick": "barClick"; "lineClick": "lineClick"; }, never, never, false, never>;
 }

package/components/table/body/gantt-table-body.component.d.ts

@@ -0,0 +1,58 @@
+import { TemplateRef, QueryList, OnInit, EventEmitter, OnDestroy, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import { GanttItemInternal, GanttGroupInternal, GanttSelectedEvent, GanttTableDragEnterPredicateContext, GanttTableDragDroppedEvent } from '../../../class';
+import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
+import { GanttAbstractComponent } from '../../../gantt-abstract';
+import { GanttUpper } from '../../../gantt-upper';
+import { CdkDrag, CdkDragDrop, CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
+import * as i0 from "@angular/core";
+export declare class GanttTableBodyComponent implements OnInit, OnDestroy, AfterViewInit {
+    gantt: GanttAbstractComponent;
+    ganttUpper: GanttUpper;
+    private cdr;
+    private document;
+    private _renderData;
+    set renderData(data: (GanttGroupInternal | GanttItemInternal)[]);
+    get renderData(): (GanttGroupInternal | GanttItemInternal)[];
+    flatData: (GanttGroupInternal | GanttItemInternal)[];
+    columns: QueryList<NgxGanttTableColumnComponent>;
+    groupTemplate: TemplateRef<any>;
+    emptyTemplate: TemplateRef<any>;
+    rowBeforeTemplate: TemplateRef<any>;
+    rowAfterTemplate: TemplateRef<any>;
+    draggable: boolean;
+    dropEnterPredicate?: (context: GanttTableDragEnterPredicateContext) => boolean;
+    dragDropped: EventEmitter<GanttTableDragDroppedEvent<unknown>>;
+    itemClick: EventEmitter<GanttSelectedEvent<unknown>>;
+    ganttTableClass: boolean;
+    ganttTableEmptyClass: boolean;
+    ganttTableDragging: boolean;
+    cdkDrags: QueryList<CdkDrag<GanttItemInternal>>;
+    hasGroup: boolean;
+    hasExpandIcon: boolean;
+    private itemDragRefMap;
+    private itemDragMoved;
+    private itemDropTarget;
+    private destroy$;
+    constructor(gantt: GanttAbstractComponent, ganttUpper: GanttUpper, cdr: ChangeDetectorRef, document: Document);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    expandGroup(group: GanttGroupInternal): void;
+    expandChildren(event: MouseEvent, item: GanttItemInternal): void;
+    onItemDragStarted(event: CdkDragStart<GanttItemInternal>): void;
+    emitItemDragMoved(event: CdkDragMove): void;
+    onItemDragMoved(event: CdkDragMove<GanttItemInternal>): void;
+    onItemDragEnded(event: CdkDragEnd<GanttItemInternal>): void;
+    onListDropped(event: CdkDragDrop<GanttItemInternal[], GanttItemInternal[], GanttItemInternal>): void;
+    trackBy(index: number, item: GanttGroupInternal | GanttItemInternal): string | number;
+    ngOnDestroy(): void;
+    private removeItem;
+    private insertItem;
+    private insertChildrenItem;
+    private getParentByItem;
+    private getChildrenElementsByDragRef;
+    private getTargetPosition;
+    private showDropPositionPlaceholder;
+    private cleanupDragArtifacts;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GanttTableBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GanttTableBodyComponent, "gantt-table-body", never, { "renderData": "renderData"; "flatData": "flatData"; "columns": "columns"; "groupTemplate": "groupTemplate"; "emptyTemplate": "emptyTemplate"; "rowBeforeTemplate": "rowBeforeTemplate"; "rowAfterTemplate": "rowAfterTemplate"; "draggable": "draggable"; "dropEnterPredicate": "dropEnterPredicate"; }, { "dragDropped": "dragDropped"; "itemClick": "itemClick"; }, never, never, false, never>;
+}

package/components/table/gantt-table.component.scss

@@ -1,7 +1,148 @@
 @use '../../styles/variables';
 
+@mixin gantt-table-item-base() {
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  border-bottom: 1px solid variables.$gantt-border-color;
+
+  .gantt-table-column {
+    overflow: hidden;
+    border-right: 1px solid variables.$gantt-border-color;
+    box-sizing: border-box;
+    position: relative;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+}
+
+@mixin gantt-table-item {
+  @include gantt-table-item-base();
+  position: relative;
+  cursor: pointer;
+
+  &-first-level-group {
+    background: variables.$gantt-group-background-color;
+  }
+
+  &-with-group {
+    .gantt-table-column {
+      &:first-child {
+        padding: 0 15px 0 32px;
+      }
+    }
+  }
+
+  .gantt-table-column {
+    display: flex;
+    padding: variables.$gantt-table-td-padding;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .gantt-table-column-content {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .gantt-expand-icon {
+    display: inline-block;
+    width: 20px;
+    color: #aaa;
+  }
+
+  .gantt-drag-handle {
+    width: 1rem;
+    padding: 0 5px 0 0;
+    display: flex;
+    align-items: center;
+    margin-left: -10px;
+  }
+
+  &:hover {
+    background-color: variables.$gantt-container-background-color;
+  }
+
+  &-active {
+    background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
+    &:hover {
+      background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
+    }
+  }
+}
+
+@mixin gantt-items-drag-drop() {
+  .cdk-drag-preview.gantt-table-item {
+    box-sizing: border-box;
+    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
+    opacity: 0.9;
+    @include gantt-table-item();
+  }
+
+  .gantt-table.gantt-table-draggable {
+    .cdk-drag-placeholder {
+      display: none !important;
+      & + .cdk-drop-list {
+        display: none !important;
+      }
+    }
+
+    .cdk-drag-disabled.gantt-table-item {
+      .gantt-drag-handle {
+        svg {
+          display: none;
+        }
+      }
+    }
+
+    .drop-position-inside {
+      //   border: 2px dashed variables.$gantt-primary-color !important;
+      .gantt-table-column {
+        height: 100%;
+        border-top: 2px dashed variables.$gantt-primary-color !important;
+        border-bottom: 2px dashed variables.$gantt-primary-color !important;
+        &:first-child {
+          border-left: 2px dashed variables.$gantt-primary-color !important;
+        }
+        &:last-child {
+          border-right: 2px dashed variables.$gantt-primary-color !important;
+        }
+      }
+    }
+
+    .drop-position-before {
+      background: #f5f5f5;
+      border-top: 2px solid variables.$gantt-primary-color !important;
+    }
+
+    .drop-position-after {
+      background: #f5f5f5;
+      border-bottom: 2px solid variables.$gantt-primary-color !important;
+    }
+
+    &.gantt-table-dragging {
+      .gantt-table-item {
+        &:hover {
+          background: unset !important;
+          .gantt-drag-handle {
+            visibility: hidden !important;
+          }
+        }
+      }
+    }
+  }
+}
+
 .gantt-table {
   display: block;
+
   &-empty {
     height: 100%;
     position: relative;
@@ -24,48 +165,6 @@
     }
   }
 
-  &-drag-trigger {
-    width: variables.$gantt-table-header-drag-line-width;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    cursor: ew-resize;
-    z-index: 1;
-
-    &:hover {
-      background: variables.$gantt-table-header-drag-line-color;
-      z-index: 2;
-    }
-  }
-
-  &-drag-auxiliary-line {
-    width: variables.$gantt-table-header-drag-line-width;
-    background: variables.$gantt-table-header-drag-line-color;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 100;
-    display: none;
-  }
-
-  .gantt-table-row {
-    display: flex;
-    box-sizing: border-box;
-    border-bottom: 1px solid variables.$gantt-border-color;
-
-    .gantt-table-column {
-      overflow: hidden;
-      border-right: 1px solid variables.$gantt-border-color;
-      box-sizing: border-box;
-      position: relative;
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-  }
-
   .gantt-table-header {
     text-align: center;
     position: sticky;
@@ -75,6 +174,8 @@
     height: variables.$gantt-header-height;
     line-height: variables.$gantt-header-height;
 
+    @include gantt-table-item-base();
+
     .gantt-table-column {
       font-weight: 400;
     }
@@ -102,52 +203,35 @@
     }
 
     .gantt-table-item {
-      cursor: pointer;
-      &-first-level-group {
-        background: variables.$gantt-group-background-color;
-      }
-
-      &-with-group {
-        .gantt-table-column {
-          &:first-child {
-            padding: 0 15px 0 32px;
-          }
-        }
-      }
-
-      .gantt-table-column {
-        display: flex;
-        padding: variables.$gantt-table-td-padding;
-
-        &:last-child {
-          border-right: none;
-        }
-      }
-
-      .gantt-table-column-content {
-        flex: 1;
-        position: relative;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
+      @include gantt-table-item();
+    }
+  }
 
-      &:hover {
-        background-color: variables.$gantt-container-background-color;
-      }
+  .table-resize-trigger,
+  .column-resize-handle {
+    width: variables.$gantt-table-header-drag-line-width;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    cursor: ew-resize;
+    z-index: 1;
 
-      &-active {
-        background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
-        &:hover {
-          background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
-        }
-      }
+    &:hover {
+      background: variables.$gantt-table-header-drag-line-color;
+      z-index: 2;
     }
+  }
 
-    .gantt-expand-icon {
-      display: inline-block;
-      width: 20px;
-      color: #aaa;
-    }
+  .table-resize-line {
+    width: variables.$gantt-table-header-drag-line-width;
+    background: variables.$gantt-table-header-drag-line-color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    display: none;
   }
 }
+
+@include gantt-items-drag-drop();