Skip to content

Commit

Permalink
fix(links): add linkDragEnded in example (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
HandsomeButterball authored Jun 12, 2020
1 parent d33780c commit 5ef8441
Show file tree
Hide file tree
Showing 9 changed files with 39 additions and 13 deletions.
1 change: 1 addition & 0 deletions example/src/app/examples/examples.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
(barClick)="barClick($event)"
(lineClick)="lineClick($event)"
(dragEnded)="dragEnded($event)"
(linkDragEnded)="linkDragEnded($event)"
(loadOnScroll)="loadOnScroll($event)"
>
<ngx-gantt-table>
Expand Down
22 changes: 21 additions & 1 deletion example/src/app/examples/examples.component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { Component, OnInit, HostBinding } from '@angular/core';
import { mockItems, mockGroups } from './mocks';
import { GanttBarClickEvent, GanttViewType, GanttDragEvent, GanttLoadOnScrollEvent, GanttLineClickEvent } from 'ngx-gantt';
import {
GanttBarClickEvent,
GanttViewType,
GanttDragEvent,
GanttLoadOnScrollEvent,
GanttLineClickEvent,
GanttLinkDragEvent
} from 'ngx-gantt';

@Component({
selector: 'app-examples-gantt',
Expand Down Expand Up @@ -37,5 +44,18 @@ export class AppExamplesComponent implements OnInit {
this.items = [...this.items];
}

linkDragEnded(event: GanttLinkDragEvent) {
if (event.source.links && event.source.links.includes(event.target.id)) {
return;
}

this.items.forEach((item) => {
if (item.id === event.source.id) {
item.links = [...(item.links || []), event.target.id];
}
});
this.items = [...this.items];
}

loadOnScroll(event: GanttLoadOnScrollEvent) {}
}
5 changes: 5 additions & 0 deletions packages/gantt/src/class/item.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,9 @@ export class GanttItemInternal {
this.origin.start = this.start.getUnixTime();
this.origin.end = this.end.getUnixTime();
}

addLink(linkId: string) {
this.links = [...this.links, linkId];
this.origin.links = this.links;
}
}
3 changes: 2 additions & 1 deletion packages/gantt/src/components/links/links.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export class GanttLinksComponent implements OnInit, OnDestroy {
});

merge(this.ganttDragContainer.dragEnded, this.ganttDragContainer.linkDragEnded, this.gantt.view.start$, this.gantt.groupExpand$)
.pipe(takeUntil(this.unsubscribe$), skip(2))
.pipe(takeUntil(this.unsubscribe$), skip(1))
.subscribe(() => {
this.elementRef.nativeElement.style.visibility = 'visible';
this.buildLinks();
Expand Down Expand Up @@ -153,6 +153,7 @@ export class GanttLinksComponent implements OnInit, OnDestroy {
}

buildLinks() {
console.log(1);
this.computeItemPosition();
this.links = [];
this.linkItems.forEach((source) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export class GanttTableComponent implements OnInit {

expandGroup(group: GanttGroupInternal) {
group.expand = !group.expand;
this.ganttRef.groupExpand$.next(group.expand);
this.ganttRef.groupExpand$.next();
this.ganttRef.detectChanges();
}
}
1 change: 0 additions & 1 deletion packages/gantt/src/gantt-dom.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export class GanttDomService implements OnDestroy {
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];
this.linksOverlay = this.root.getElementsByClassName('gantt-links-overlay')[0];
this.monitorScrollChange();
this.disableBrowserWheelEvent();
}
Expand Down
3 changes: 2 additions & 1 deletion packages/gantt/src/gantt-drag-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ export class GanttDragContainer {
emitLinkDragEnded() {
this.linkDraggingId = null;
if (this.linkDragSource && this.linkDragTarget) {
// this.linkDragSource.addLink(this.linkDragDependent._id);
this.linkDragSource.addLink(this.linkDragTarget.id);

this.linkDragEnded.emit({
source: this.linkDragSource.origin,
target: this.linkDragTarget.origin
Expand Down
4 changes: 2 additions & 2 deletions packages/gantt/src/gantt-ref.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { InjectionToken } from '@angular/core';
import { GanttView } from './views/view';
import { GanttStyles } from './gantt.styles';
import { BehaviorSubject } from 'rxjs';
import { Subject } from 'rxjs';

export interface GanttRef {
element: HTMLElement;
view: GanttView;
styles: GanttStyles;
draggable: boolean;
linkable?: boolean;
groupExpand$: BehaviorSubject<boolean>;
groupExpand$: Subject<void>;
detectChanges(): void;
}

Expand Down
11 changes: 5 additions & 6 deletions packages/gantt/src/gantt.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@ import {
TemplateRef,
ContentChildren,
QueryList,
AfterViewInit,
ViewChild
AfterViewInit
} from '@angular/core';
import { startWith, takeUntil } from 'rxjs/operators';
import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { Subject } from 'rxjs';
import { GanttUpper } from './gantt-upper';
import { GanttRef, GANTT_REF_TOKEN } from './gantt-ref';
import { GanttLinkDragEvent, GanttLineClickEvent, GanttItemInternal, GanttBarClickEvent } from './class';
Expand Down Expand Up @@ -47,7 +46,7 @@ export class NgxGanttComponent extends GanttUpper implements GanttRef, OnInit, A

public sideTableWidth = sideWidth;

public groupExpand$ = new BehaviorSubject<boolean>(null);
public groupExpand$ = new Subject<void>();

@Input() linkable: boolean;

Expand Down Expand Up @@ -95,10 +94,10 @@ export class NgxGanttComponent extends GanttUpper implements GanttRef, OnInit, A
ngOnInit() {
super.onInit();

this.dragContainer.linkDragStarted.subscribe((event) => {
this.dragContainer.linkDragStarted.subscribe((event: GanttLinkDragEvent) => {
this.linkDragStarted.emit(event);
});
this.dragContainer.linkDragEnded.subscribe((event) => {
this.dragContainer.linkDragEnded.subscribe((event: GanttLinkDragEvent) => {
this.linkDragEnded.emit(event);
});
}
Expand Down

0 comments on commit 5ef8441

Please sign in to comment.