From b35fa441165749c7774e5c0f9fd4e06a24909c83 Mon Sep 17 00:00:00 2001 From: smile1016 <1017652509@qq.com> Date: Tue, 3 Dec 2024 14:05:46 +0800 Subject: [PATCH] feat(gantt): add gantt-quick-time-focus-item --- .../components/main/gantt-main.component.html | 23 +++++------------ .../components/main/gantt-main.component.ts | 9 ++----- .../quick-time-focus.component.html | 15 +++++++++++ .../quick-time-focus.component.ts | 25 +++++++++++++++++++ packages/gantt/src/gantt.module.ts | 5 +++- packages/gantt/src/public-api.ts | 1 + 6 files changed, 53 insertions(+), 25 deletions(-) create mode 100644 packages/gantt/src/components/quick-time-focus/quick-time-focus.component.html create mode 100644 packages/gantt/src/components/quick-time-focus/quick-time-focus.component.ts diff --git a/packages/gantt/src/components/main/gantt-main.component.html b/packages/gantt/src/components/main/gantt-main.component.html index 8449f32..36360a0 100644 --- a/packages/gantt/src/components/main/gantt-main.component.html +++ b/packages/gantt/src/components/main/gantt-main.component.html @@ -40,23 +40,12 @@
-
- - @if ((data.refs?.x < dom.mainViewport().leftBoundary ) && data.refs?.width ) { - - - - } - - - - @if((data.refs?.x + data.refs?.width > dom.mainViewport().rightBoundary) && data.refs.width) { - - - - } - -
+
diff --git a/packages/gantt/src/components/main/gantt-main.component.ts b/packages/gantt/src/components/main/gantt-main.component.ts index e6bd9b9..14a3aee 100644 --- a/packages/gantt/src/components/main/gantt-main.component.ts +++ b/packages/gantt/src/components/main/gantt-main.component.ts @@ -7,8 +7,8 @@ import { NgxGanttBarComponent } from '../bar/bar.component'; import { NgxGanttRangeComponent } from '../range/range.component'; import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common'; import { GanttLinksComponent } from '../links/links.component'; -import { GanttIconComponent } from '../icon/icon.component'; import { GanttDomService } from '../../gantt-dom.service'; +import { GanttQuickTimeFocusItemComponent } from '../quick-time-focus/quick-time-focus.component'; @Component({ selector: 'gantt-main', @@ -26,7 +26,7 @@ import { GanttDomService } from '../../gantt-dom.service'; IsGanttRangeItemPipe, IsGanttBarItemPipe, IsGanttCustomItemPipe, - GanttIconComponent + GanttQuickTimeFocusItemComponent ] }) export class GanttMainComponent { @@ -57,9 +57,4 @@ export class GanttMainComponent { trackBy(index: number, item: GanttGroupInternal | GanttItemInternal) { return item.id || index; } - - quickTime(item: GanttItemInternal, type: 'left' | 'right') { - const date = type === 'left' ? item.start || item.end : item.end || item.start; - this.ganttUpper.scrollToDate(date); - } } diff --git a/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.html b/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.html new file mode 100644 index 0000000..93feeda --- /dev/null +++ b/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.html @@ -0,0 +1,15 @@ + + @if ((item.refs?.x < mainViewport().leftBoundary ) && item.refs?.width ) { + + + + } + + + + @if((item.refs?.x + item.refs?.width > mainViewport().rightBoundary) && item.refs.width) { + + + + } + diff --git a/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.ts b/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.ts new file mode 100644 index 0000000..cfba71d --- /dev/null +++ b/packages/gantt/src/components/quick-time-focus/quick-time-focus.component.ts @@ -0,0 +1,25 @@ +import { Component, HostBinding, Inject, Input, input, InputSignal } from '@angular/core'; +import { GanttItemInternal } from '../../class/item'; +import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper'; +import { GanttIconComponent } from '../icon/icon.component'; + +@Component({ + selector: 'gantt-quick-time-focus-item', + templateUrl: './quick-time-focus.component.html', + standalone: true, + imports: [GanttIconComponent] +}) +export class GanttQuickTimeFocusItemComponent { + @HostBinding('class.gantt-quick-time-focus-item') class = true; + + mainViewport: InputSignal<{ clientWidth?: number; leftBoundary?: number; rightBoundary?: number }> = input(); + + @Input() item: GanttItemInternal; + + constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {} + + quickTime(item: GanttItemInternal, type: 'left' | 'right') { + const date = type === 'left' ? item.start || item.end : item.end || item.start; + this.ganttUpper.scrollToDate(date); + } +} diff --git a/packages/gantt/src/gantt.module.ts b/packages/gantt/src/gantt.module.ts index dc03b8c..793f62c 100644 --- a/packages/gantt/src/gantt.module.ts +++ b/packages/gantt/src/gantt.module.ts @@ -23,6 +23,7 @@ import { NgxGanttRootComponent } from './root.component'; import { NgxGanttTableColumnComponent } from './table/gantt-column.component'; import { NgxGanttTableComponent } from './table/gantt-table.component'; import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component'; +import { GanttQuickTimeFocusItemComponent } from './components/quick-time-focus/quick-time-focus.component'; @NgModule({ imports: [ @@ -47,6 +48,7 @@ import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.compon NgxGanttBaselineComponent, NgxGanttToolbarComponent, GanttScrollbarComponent, + GanttQuickTimeFocusItemComponent, IsGanttRangeItemPipe, IsGanttBarItemPipe, IsGanttCustomItemPipe @@ -63,7 +65,8 @@ import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.compon GanttCalendarHeaderComponent, GanttCalendarGridComponent, GanttDragBackdropComponent, - GanttScrollbarComponent + GanttScrollbarComponent, + GanttQuickTimeFocusItemComponent ], providers: [ CdkVirtualScrollViewport, diff --git a/packages/gantt/src/public-api.ts b/packages/gantt/src/public-api.ts index f41f45d..019b402 100644 --- a/packages/gantt/src/public-api.ts +++ b/packages/gantt/src/public-api.ts @@ -25,3 +25,4 @@ export * from './components/calendar/header/calendar-header.component'; export * from './components/calendar/grid/calendar-grid.component'; export * from './components/drag-backdrop/drag-backdrop.component'; export * from './components/scrollbar/scrollbar.component'; +export * from './components/quick-time-focus/quick-time-focus.component';