feat: scroll side and viewer scroll

worktile · May 28, 2020 · de7d358 · de7d358
1 parent 8cd2420
commit de7d358
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 48 deletions.
diff --git a/packages/gantt/src/bar/bar-drag.ts b/packages/gantt/src/bar/bar-drag.ts
@@ -226,7 +226,7 @@ export class GanttBarDrag implements OnDestroy {
 
     private calcDependencyLinePositions(target: HTMLElement, isBefore: boolean) {
         const dragHandleWidth = 16;
-        const container = this.dom.viewer;
+        const container = this.dom.viewerContainer;
         const targetRect = target.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
         const refs = this.item.refs;

diff --git a/packages/gantt/src/bar/bar.component.scss b/packages/gantt/src/bar/bar.component.scss
@@ -106,7 +106,6 @@ $gantt-bar-dependency-drop-border: 5px;
 
 .gantt-bar {
   position: absolute;
-  background-color: $gantt-item-bg-color;
   border-radius: 4px;
   z-index: 1;
 

diff --git a/packages/gantt/src/gantt-dom.service.ts b/packages/gantt/src/gantt-dom.service.ts
@@ -1,5 +1,5 @@
 import { Injectable, ElementRef, OnDestroy } from '@angular/core';
-import { fromEvent, Subject } from 'rxjs';
+import { fromEvent, Subject, merge } from 'rxjs';
 import { pairwise, map, auditTime, takeUntil } from 'rxjs/operators';
 import { isNumber } from './utils/helpers';
 
@@ -8,7 +8,7 @@ const scrollThreshold = 50;
 export enum ScrollDirection {
     NONE,
     LEFT,
-    RIGHT,
+    RIGHT
 }
 
 export interface ScrollEvent {
@@ -20,52 +20,58 @@ export interface ScrollEvent {
 export class GanttDomService implements OnDestroy {
     public root: Element;
 
-    public viewer: Element;
+    public sideContainer: Element;
 
-    public calendarOverlay: Element;
+    public viewerContainer: Element;
 
-    public side: Element;
+    public calendarOverlay: Element;
 
     private unsubscribe$ = new Subject<void>();
 
     constructor() {}
 
     private monitorScrollChange() {
-        fromEvent(this.viewer, 'scroll')
+        merge(fromEvent(this.viewerContainer, 'scroll'), fromEvent(this.sideContainer, 'scroll'))
             .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-                this.syncScroll();
+            .subscribe((event) => {
+                this.syncScroll(event);
             });
     }
 
-    private syncScroll() {
-        this.calendarOverlay.scrollLeft = this.viewer.scrollLeft;
+    private syncScroll(event: Event) {
+        const target = event.target as HTMLElement;
+        this.calendarOverlay.scrollLeft = this.viewerContainer.scrollLeft;
+        this.sideContainer.scrollTop = target.scrollTop;
+        this.viewerContainer.scrollTop = target.scrollTop;
     }
 
     initialize(root: ElementRef<HTMLElement>) {
         this.root = root.nativeElement;
-        this.viewer = this.root.getElementsByClassName('gantt-viewer-container')[0];
+        this.sideContainer = this.root.getElementsByClassName('gantt-side-container')[0];
+        this.viewerContainer = this.root.getElementsByClassName('gantt-viewer-container')[0];
         this.calendarOverlay = this.root.getElementsByClassName('gantt-calendar-overlay')[0];
-        this.side = this.root.getElementsByClassName('gantt-side')[0];
         this.monitorScrollChange();
     }
 
     getViewerScroll() {
-        return fromEvent<Event>(this.viewer, 'scroll').pipe(
-            map(() => this.viewer.scrollLeft),
+        return fromEvent<Event>(this.viewerContainer, 'scroll').pipe(
+            map(() => this.viewerContainer.scrollLeft),
             pairwise(),
             map(([previous, current]) => {
                 const event: ScrollEvent = {
-                    target: this.viewer,
-                    direction: ScrollDirection.NONE,
+                    target: this.viewerContainer,
+                    direction: ScrollDirection.NONE
                 };
                 if (current - previous < 0) {
-                    if (this.viewer.scrollLeft < scrollThreshold && this.viewer.scrollLeft > 0) {
+                    if (this.viewerContainer.scrollLeft < scrollThreshold && this.viewerContainer.scrollLeft > 0) {
                         event.direction = ScrollDirection.LEFT;
                     }
                 }
                 if (current - previous > 0) {
-                    if (this.viewer.scrollWidth - this.viewer.clientWidth - this.viewer.scrollLeft < scrollThreshold) {
+                    if (
+                        this.viewerContainer.scrollWidth - this.viewerContainer.clientWidth - this.viewerContainer.scrollLeft <
+                        scrollThreshold
+                    ) {
                         event.direction = ScrollDirection.RIGHT;
                     }
                 }
@@ -80,13 +86,9 @@ export class GanttDomService implements OnDestroy {
 
     scrollViewer(left: number) {
         if (isNumber(left)) {
-            const scrollLeft = left - this.viewer.clientWidth / 2;
-            if (scrollLeft > scrollThreshold) {
-                this.viewer.scrollLeft = scrollLeft;
-            } else {
-                this.viewer.scrollLeft = 0;
-            }
-            this.syncScroll();
+            const scrollLeft = left - this.viewerContainer.clientWidth / 2;
+            this.viewerContainer.scrollLeft = scrollLeft > scrollThreshold ? scrollLeft : 0;
+            this.calendarOverlay.scrollLeft = this.viewerContainer.scrollLeft;
         }
     }
 

diff --git a/packages/gantt/src/gantt.scss b/packages/gantt/src/gantt.scss
@@ -1,10 +1,11 @@
 $gantt-header-height: 44px !default;
-$gantt-side-width: 200px !default;
-$gantt-full-screen-width: 60px !default;
 $gantt-border-color: #eee !default;
 $gantt-bg-color: #fff !default;
-$gantt-item-bg-color: #fff !default;
+
+// mask
 $gantt-item-drag-mask-color: #348fe4 !default;
+
+//bar
 $gantt-bar-layer-bg: #fff !default;
 $gantt-bar-handle-color: #cacaca !default;
 $gantt-bar-handle-height: 12px !default;
@@ -16,15 +17,9 @@ $gantt-date-secondary-color: #333 !default;
 $gantt-date-secondary-font-size: 14px !default;
 $gantt-date-secondary-weekend-color: #aaa !default;
 $gantt-date-secondary-border-color: #ddd !default;
-$gantt-date-week-backdrop-bg: rgba(
-    $color: #f3f3f3,
-    $alpha: 0.5,
-) !default;
+$gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5) !default;
 $gantt-date-today-color: #ff9f73 !default;
 
-// @import './bar/bar.scss';
-// @import './dependencies/dependencies.scss';
-
 @import './calendar/calendar.component.scss';
 @import './table/gantt-table.component.scss';
 @import './bar/bar.component.scss';
@@ -39,7 +34,22 @@ $gantt-date-today-color: #ff9f73 !default;
 
     .gantt-side {
         width: 400px;
-        border-right: 1px solid #ddd;
+
+        .gantt-side-header {
+            box-sizing: border-box;
+            height: $gantt-header-height;
+            overflow: hidden;
+            border-bottom: 1px solid #eee;
+        }
+
+        .gantt-side-container {
+            height: calc(100% - #{$gantt-header-height});
+            overflow: auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
     }
 
     .gantt-container {

diff --git a/packages/gantt/src/gantt.styles.ts b/packages/gantt/src/gantt.styles.ts
@@ -1,8 +1,8 @@
 export const defaultStyles = {
     lineHeight: 44,
-    barHeight: 25,
+    barHeight: 25
 };
 
 export type GanttStyles = typeof defaultStyles;
 
-export const headerHeight = 50;
+export const headerHeight = 44;
diff --git a/packages/gantt/src/table/gantt-table.component.html b/packages/gantt/src/table/gantt-table.component.html
@@ -1,5 +1,5 @@
 <gantt-side>
-  <div class="gantt-table-header" *ngIf="columns?.length">
+  <div class="gantt-side-header" *ngIf="columns?.length">
     <table>
       <thead>
         <th *ngFor="let column of columns" [title]="column.name">
@@ -8,7 +8,7 @@
       </thead>
     </table>
   </div>
-  <div class="gantt-table-container">
+  <div class="gantt-side-container">
     <ng-container *ngIf="groups.length; else itemsTemplate">
       <gantt-table-group *ngFor="let group of groups" [group]="group" [groupHeader]="groupTemplate">
         <gantt-table-items [items]="group.items" [columns]="columns"></gantt-table-items>

diff --git a/packages/gantt/src/table/gantt-table.component.scss b/packages/gantt/src/table/gantt-table.component.scss
@@ -3,7 +3,6 @@ $gantt-table-td-height: 44px !default;
 $gantt-table-thead-height: 44px !default;
 $gantt-table-td-padding: 0 15px !default;
 $gantt-table-bg: #fff !default;
-$gantt-table-border-color: #eee !default;
 
 @import './group/group.component.scss';
 
@@ -27,8 +26,8 @@ $gantt-table-border-color: #eee !default;
             td {
                 padding: $gantt-table-td-padding;
                 background-color: $gantt-table-bg;
-                border-right: 1px solid $gantt-table-border-color;
-                border-bottom: 1px solid $gantt-table-border-color;
+                border-right: 1px solid $gantt-border-color;
+                border-bottom: 1px solid $gantt-border-color;
                 position: relative;
             }
 
@@ -45,7 +44,4 @@ $gantt-table-border-color: #eee !default;
         }
     }
 
-    .gantt-table-header {
-        box-sizing: border-box;
-    }
 }
diff --git a/packages/gantt/src/table/group/group.component.scss b/packages/gantt/src/table/group/group.component.scss
@@ -10,5 +10,6 @@
         .gantt-table-group-header-title {
             cursor: pointer;
         }
+        border-right: 1px solid $gantt-border-color;
     }
 }