@worktile/gantt 15.1.0-next.9 → 15.1.1

package/gantt-dom.service.d.ts

@@ -18,6 +18,7 @@ export declare class GanttDomService implements OnDestroy {
     container: Element;
     sideContainer: Element;
     mainContainer: Element;
+    verticalScrollContainer: Element;
     calendarHeader: Element;
     mainItems: Element;
     calendarOverlay: Element;

package/gantt.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, ElementRef, EventEmitter, ChangeDetectorRef, NgZone, QueryList, AfterViewInit, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
+import { OnInit, ElementRef, EventEmitter, ChangeDetectorRef, NgZone, QueryList, AfterViewInit, TemplateRef, OnChanges, SimpleChanges, AfterViewChecked } from '@angular/core';
 import { Observable } from 'rxjs';
 import { GanttUpper } from './gantt-upper';
 import { GanttLinkDragEvent, GanttLineClickEvent, GanttItemInternal, GanttItem, GanttSelectedEvent, GanttGroupInternal } from './class';
@@ -7,17 +7,16 @@ import { NgxGanttTableComponent } from './table/gantt-table.component';
 import { GanttGlobalConfig } from './gantt.config';
 import { NgxGanttRootComponent } from './root.component';
 import { GanttDate } from './utils/date';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { GanttPrintService } from './gantt-print.service';
+import { CdkVirtualScrollViewport, ViewportRuler } from '@angular/cdk/scrolling';
 import * as i0 from "@angular/core";
-export declare class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges, AfterViewInit {
-    private printService;
+export declare class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges, AfterViewInit, AfterViewChecked {
+    private viewportRuler;
     maxLevel: number;
     async: boolean;
     childrenResolve: (GanttItem: any) => Observable<GanttItem[]>;
     linkable: boolean;
     set loading(loading: boolean);
-    get loading(): boolean;
+    virtualScrollEnabled: boolean;
     loadingDelay: number;
     linkDragStarted: EventEmitter<GanttLinkDragEvent<unknown>>;
     linkDragEnded: EventEmitter<GanttLinkDragEvent<unknown>>;
@@ -28,18 +27,20 @@ export declare class NgxGanttComponent extends GanttUpper implements OnInit, OnC
     tableEmptyTemplate: TemplateRef<any>;
     ganttRoot: NgxGanttRootComponent;
     virtualScroll: CdkVirtualScrollViewport;
-    flatData: (GanttGroupInternal | GanttItemInternal)[];
-    renderData: (GanttGroupInternal | GanttItemInternal)[];
+    get loading(): boolean;
+    flatItems: (GanttGroupInternal | GanttItemInternal)[];
+    viewportItems: (GanttGroupInternal | GanttItemInternal)[];
     private _loading;
     private loadingTimer;
     private rangeStart;
     private rangeEnd;
-    private flatDataMap;
-    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, ngZone: NgZone, printService: GanttPrintService, config: GanttGlobalConfig);
+    private flatItemsMap;
+    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, ngZone: NgZone, viewportRuler: ViewportRuler, config: GanttGlobalConfig);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
-    private buildVirtualFlatData;
+    ngAfterViewChecked(): void;
+    private buildFlatItems;
     private afterExpand;
     private computeTempDataRefs;
     expandChildren(item: GanttItemInternal): void;
@@ -48,6 +49,6 @@ export declare class NgxGanttComponent extends GanttUpper implements OnInit, OnC
     scrollToDate(date: number | GanttDate): void;
     expandGroups(expanded: boolean): void;
     expandGroup(group: GanttGroupInternal): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxGanttComponent, [null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxGanttComponent, "ngx-gantt", never, { "maxLevel": "maxLevel"; "async": "async"; "childrenResolve": "childrenResolve"; "linkable": "linkable"; "loading": "loading"; "loadingDelay": "loadingDelay"; }, { "linkDragStarted": "linkDragStarted"; "linkDragEnded": "linkDragEnded"; "lineClick": "lineClick"; "selectedChange": "selectedChange"; }, ["table", "tableEmptyTemplate", "columns"], never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxGanttComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxGanttComponent, "ngx-gantt", never, { "maxLevel": "maxLevel"; "async": "async"; "childrenResolve": "childrenResolve"; "linkable": "linkable"; "loading": "loading"; "virtualScrollEnabled": "virtualScrollEnabled"; "loadingDelay": "loadingDelay"; }, { "linkDragStarted": "linkDragStarted"; "linkDragEnded": "linkDragEnded"; "lineClick": "lineClick"; "selectedChange": "selectedChange"; }, ["table", "tableEmptyTemplate", "columns"], never, false, never>;
 }

package/gantt.component.scss

@@ -60,7 +60,6 @@
     right: 0;
     // 兼容火狐浏览器
     overflow: auto;
-    overflow: overlay;
     background-color: variables.$gantt-container-background-color;
 
     .gantt-main-groups,
@@ -87,6 +86,10 @@
     }
   }
 
+  .gantt-normal-viewport {
+    display: flex;
+  }
+
   .gantt-virtual-scroll-viewport {
     position: absolute;
     left: 0;
@@ -96,7 +99,6 @@
     z-index: 2;
     // 兼容火狐浏览器
     overflow: auto;
-    overflow: overlay;
     .cdk-virtual-scroll-content-wrapper {
       width: 100%;
       min-width: unset;
@@ -106,6 +108,21 @@
         .gantt-main-container {
           height: 100%;
           top: 0;
+          overflow-y: hidden;
+        }
+      }
+    }
+
+    &.gantt-normal-viewport {
+      .cdk-virtual-scroll-content-wrapper {
+        height: 100%;
+      }
+      .cdk-virtual-scroll-spacer {
+        display: none;
+      }
+      .gantt-container {
+        .gantt-main-container {
+          overflow-y: auto;
         }
       }
     }

package/gantt.styles.d.ts

@@ -8,7 +8,7 @@ export declare const sideWidth = 400;
 export declare const sideMiddleWidth = 500;
 export declare const sideMaxWidth = 600;
 export declare const sideMinWidth = 400;
-export declare const barBackground = "#348fe4";
+export declare const barBackground = "#6698ff";
 export declare const rangeHeight = 17;
 export declare const todayHeight = 24;
 export declare const todayWidth = 35;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/gantt",
-  "version": "15.1.0-next.9",
+  "version": "15.1.1",
   "schematics": "./schematics/collection.json",
   "exports": {
     ".": {

package/root.component.d.ts

@@ -17,10 +17,14 @@ export declare class NgxGanttRootComponent implements OnInit, OnDestroy {
     mainTemplate: TemplateRef<any>;
     /** The native `<gantt-drag-backdrop></gantt-drag-backdrop>` element. */
     backdrop: ElementRef<HTMLElement>;
+    verticalScrollbarWidth: number;
+    horizontalScrollbarHeight: number;
     private unsubscribe$;
     private get view();
+    onWindowResize(): void;
     constructor(elementRef: ElementRef<HTMLElement>, ngZone: NgZone, dom: GanttDomService, dragContainer: GanttDragContainer, ganttUpper: GanttUpper, printService: GanttPrintService);
     ngOnInit(): void;
+    computeScrollBarOffset(): void;
     ngOnDestroy(): void;
     private setupViewScroll;
     private setupResize;

package/styles/variables.scss

@@ -1,6 +1,6 @@
 // basic
 $gantt-color: #333 !default;
-$gantt-primary-color: #348fe4 !default;
+$gantt-primary-color: #6698ff !default;
 $gantt-header-height: 44px !default;
 $gantt-border-color: #eee !default;
 $gantt-bg-color: #fff !default;
@@ -33,6 +33,7 @@ $gantt-bar-bg: #fff !default;
 $gantt-bar-layer-bg: #fff !default;
 $gantt-bar-handle-color: #cacaca !default;
 $gantt-bar-handle-height: 12px !default;
+$gantt-bar-link-handle-point: $gantt-primary-color !default;
 $gantt-bar-background-color: $gantt-primary-color !default;
 
 // drag
@@ -54,4 +55,4 @@ $gantt-baseline-background-color: #cacaca !default;
 $gantt-toolbar-view-active-color: $gantt-primary-color !default;
 
 // loader
-$gantt-loader-loading-color: #6698ff !default;
+$gantt-loader-loading-color: $gantt-primary-color !default;

package/utils/drag-scroll.d.ts

@@ -18,3 +18,10 @@ export declare function getHorizontalScrollDirection(clientRect: DOMRect, pointe
  * @param pointerY Coordinates along the Y axis.
  */
 export declare function isPointerNearClientRect(rect: DOMRect, threshold: number, pointerX: number, pointerY: number): boolean;
+/**
+ * Gets the speed rate of auto scrolling
+ * @param clientRect Dimensions of the node.
+ * @param pointerX Position of the user's pointer along the x axis.
+ * @param horizontalScrollDirection The direction in which the mouse is dragged horizontally
+ */
+export declare function getAutoScrollSpeedRates(clientRect: DOMRect, pointerX: number, horizontalScrollDirection: AutoScrollHorizontalDirection): number;

package/components/calendar/calendar.component.scss

@@ -1,79 +0,0 @@
-@use '../../styles/variables';
-
-.gantt-calendar-overlay {
-  display: block;
-  height: 100%;
-  overflow: hidden;
-
-  .gantt-calendar-today-overlay {
-    position: relative;
-    z-index: 2;
-    .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-overlay-main {
-    position: relative;
-    z-index: 1;
-    background-color: variables.$gantt-bg-color;
-  }
-
-  svg {
-    overflow: visible;
-  }
-
-  line {
-    shape-rendering: crispEdges;
-  }
-
-  .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;
-  }
-
-  .primary-line {
-    stroke: variables.$gantt-date-primary-border;
-  }
-
-  .secondary-line {
-    stroke-dasharray: 2px 5px;
-    stroke: #cacaca;
-  }
-
-  .header-line {
-    stroke: variables.$gantt-border-color;
-  }
-
-  .secondary-backdrop {
-    fill: variables.$gantt-date-week-backdrop-bg;
-  }
-}

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

@@ -1,237 +0,0 @@
-@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;
-    .gantt-table-body {
-      position: absolute;
-      text-align: center;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      margin-top: 22px;
-      .empty-icon {
-        svg {
-          height: 78px;
-          width: 78px;
-        }
-      }
-      .empty-text {
-        color: #cacaca;
-      }
-    }
-  }
-
-  .gantt-table-header {
-    text-align: center;
-    position: sticky;
-    top: 0;
-    background: #fff;
-    z-index: 2;
-    height: variables.$gantt-header-height;
-    line-height: variables.$gantt-header-height;
-
-    @include gantt-table-item-base();
-
-    .gantt-table-column {
-      font-weight: 400;
-    }
-  }
-
-  .gantt-table-body {
-    .gantt-table-group {
-      display: flex;
-      height: variables.$gantt-group-height;
-      background: variables.$gantt-group-background-color;
-      padding: 0 10px;
-      align-items: center;
-      border-bottom: 1px solid variables.$gantt-border-color;
-      box-sizing: border-box;
-      position: relative;
-
-      .gantt-table-group-title {
-        cursor: pointer;
-
-        .expand-icon {
-          color: #aaa;
-          margin-right: 6px;
-        }
-      }
-    }
-
-    .gantt-table-item {
-      @include gantt-table-item();
-    }
-  }
-
-  .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;
-
-    &:hover {
-      background: variables.$gantt-table-header-drag-line-color;
-      z-index: 2;
-    }
-  }
-
-  .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();