@worktile/gantt 11.0.2 → 12.0.1

package/packages/gantt/src/components/bar/bar.component.ts

@@ -0,0 +1,109 @@
+import {
+    Component,
+    OnInit,
+    Input,
+    TemplateRef,
+    HostBinding,
+    ElementRef,
+    OnChanges,
+    OnDestroy,
+    Inject,
+    ViewChild,
+    Output,
+    EventEmitter,
+    AfterViewInit
+} from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+import { GanttBarDrag } from './bar-drag';
+import { hexToRgb } from '../../utils/helpers';
+import { GanttDragContainer } from '../../gantt-drag-container';
+import { barBackground } from '../../gantt.styles';
+import { GanttBarClickEvent } from '../../class';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+import { GanttItemUpper } from '../../gantt-item-upper';
+
+function linearGradient(sideOrCorner: string, color: string, stop: string) {
+    return `linear-gradient(${sideOrCorner},${color} 0%,${stop} 40%)`;
+}
+
+@Component({
+    selector: 'ngx-gantt-bar,gantt-bar',
+    templateUrl: './bar.component.html',
+    providers: [GanttBarDrag]
+})
+export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+    @Output() barClick = new EventEmitter<GanttBarClickEvent>();
+
+    @ViewChild('content') contentElementRef: ElementRef<HTMLDivElement>;
+
+    @HostBinding('class.gantt-bar') ganttItemClass = true;
+
+    color = 'red';
+
+    constructor(
+        private dragContainer: GanttDragContainer,
+        private drag: GanttBarDrag,
+        elementRef: ElementRef<HTMLDivElement>,
+        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper
+    ) {
+        super(elementRef, ganttUpper);
+    }
+
+    ngOnInit() {
+        super.onInit();
+        this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.setContentBackground();
+        });
+    }
+
+    ngAfterViewInit() {
+        this.drag.createDrags(this.elementRef, this.item, this.ganttUpper);
+        this.setContentBackground();
+    }
+
+    ngOnChanges(): void {
+        super.onChanges();
+    }
+
+    onBarClick(event: Event) {
+        this.barClick.emit({ event, item: this.item.origin });
+    }
+
+    private setContentBackground() {
+        const contentElement = this.contentElementRef.nativeElement;
+        const color = this.item.color || barBackground;
+        const style: Partial<CSSStyleDeclaration> = this.item.barStyle || {};
+        if (this.item.origin.start && this.item.origin.end) {
+            style.background = color;
+            style.borderRadius = '';
+        }
+        if (this.item.origin.start && !this.item.origin.end) {
+            style.background = linearGradient('to left', hexToRgb(color, 0.55), hexToRgb(color, 1));
+            style.borderRadius = '4px 12.5px 12.5px 4px';
+        }
+        if (!this.item.origin.start && this.item.origin.end) {
+            style.background = linearGradient('to right', hexToRgb(color, 0.55), hexToRgb(color, 1));
+            style.borderRadius = '12.5px 4px 4px 12.5px';
+        }
+        if (this.item.progress >= 0) {
+            const contentProgressElement = contentElement.querySelector('.gantt-bar-content-progress') as HTMLDivElement;
+            style.background = hexToRgb(color, 0.3);
+            style.borderRadius = '';
+            contentProgressElement.style.background = color;
+        }
+
+        for (const key in style) {
+            if (style.hasOwnProperty(key)) {
+                contentElement.style[key] = style[key];
+            }
+        }
+    }
+
+    stopPropagation(event: Event) {
+        event.stopPropagation();
+    }
+
+    ngOnDestroy() {
+        super.onDestroy();
+    }
+}

package/packages/gantt/src/components/bar/test/bar.component.spec.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NgxGanttComponent } from '../../../gantt.component';
+import { NgxGanttModule } from '../../../gantt.module';
+import { GanttDate } from '../../../utils/date';
+
+const mockBarItems = [
+    {
+        id: 'item-0101',
+        title: 'VERSION 0101',
+        start: new GanttDate('2020-05-31 22:34:35').getUnixTime(),
+        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
+        progress: 0.5
+    }
+];
+
+@Component({
+    selector: 'test-gantt-bar',
+    template: ` <ngx-gantt #gantt [items]="items" [viewType]="viewType">
+        <ngx-gantt-table>
+            <ngx-gantt-column name="标题" width="200px">
+                <ng-template #cell let-item="item">
+                    {{ item.title }}
+                </ng-template>
+            </ngx-gantt-column>
+        </ngx-gantt-table>
+    </ngx-gantt>`
+})
+export class TestGanttBarComponent {
+    constructor() {}
+
+    viewType = 'month';
+
+    items = mockBarItems;
+}
+
+describe('ngx-gantt-bar', () => {
+    let fixture: ComponentFixture<TestGanttBarComponent>;
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [CommonModule, NgxGanttModule],
+            declarations: [TestGanttBarComponent]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestGanttBarComponent);
+        fixture.detectChanges();
+    });
+
+    it('should has bar progress', () => {
+        const barProgress = fixture.debugElement.queryAll(By.css('.gantt-bar-content-progress'));
+        expect(barProgress.length).toEqual(1);
+    });
+});

package/packages/gantt/src/components/bar/test/bar.drag.spec.ts

@@ -0,0 +1,196 @@
+import { CommonModule } from '@angular/common';
+import { Component, DebugElement, Directive } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { GanttDragEvent, GanttLinkDragEvent } from '../../../class';
+import { NgxGanttComponent } from '../../../gantt.component';
+import { NgxGanttModule } from '../../../gantt.module';
+import { NgxGanttRootComponent } from '../../../root.component';
+import { GanttDate } from '../../../utils/date';
+import { dispatchMouseEvent } from '../../../utils/testing';
+import { NgxGanttBarComponent } from '../bar.component';
+
+const activeClass = 'gantt-bar-active';
+
+const mockBarItems = [
+    {
+        id: 'item-0101',
+        title: 'VERSION 0101',
+        start: new GanttDate('2020-03-31 22:34:35').getUnixTime(),
+        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
+        color: '#FF0000'
+    },
+    {
+        id: 'item-0203',
+        title: 'VERSION 0203',
+        start: new GanttDate('2020-04-23 20:07:55').getUnixTime(),
+        end: new GanttDate('2020-06-23 00:00:00').getUnixTime(),
+        links: ['item-0204']
+    },
+    {
+        id: 'item-0204',
+        title: 'VERSION 0204',
+        start: new GanttDate('2020-06-02 02:21:15').getUnixTime(),
+        end: new GanttDate('2020-06-18 02:26:40').getUnixTime(),
+        links: ['item-0101']
+    }
+];
+
+@Component({
+    selector: 'test-gantt-bar',
+    template: ` <ngx-gantt
+        #gantt
+        [items]="items"
+        [viewType]="viewType"
+        [draggable]="draggable"
+        [linkable]="linkable"
+        (dragEnded)="dragEnded($event)"
+        (dragStarted)="dragStarted($event)"
+        (linkDragEnded)="linkDragEnded($event)"
+        (linkDragStarted)="linkDragStarted($event)"
+    >
+        <ngx-gantt-table>
+            <ngx-gantt-column name="标题" width="200px">
+                <ng-template #cell let-item="item">
+                    {{ item.title }}
+                </ng-template>
+            </ngx-gantt-column>
+        </ngx-gantt-table>
+    </ngx-gantt>`
+})
+export class TestGanttBarComponent {
+    constructor() {}
+
+    viewType = 'month';
+
+    items = mockBarItems;
+
+    draggable = true;
+
+    linkable = true;
+
+    dragEnded(event: GanttDragEvent) {
+        console.log(event);
+    }
+
+    dragStarted(event: GanttDragEvent) {
+        console.log(event);
+    }
+
+    linkDragEnded(event: GanttLinkDragEvent) {
+        console.log(event);
+    }
+
+    linkDragStarted(event: GanttLinkDragEvent) {
+        console.log(event);
+    }
+}
+
+function dragEvent(fixture: ComponentFixture<TestGanttBarComponent>, dragElement: HTMLElement, barElement?: HTMLElement) {
+    const dragMaskElement = fixture.debugElement.query(By.css('.gantt-drag-mask')).nativeElement;
+    const dragBackdropElement = fixture.debugElement.query(By.css('.gantt-drag-backdrop')).nativeElement;
+    const dragStartSpy = spyOn(fixture.componentInstance, 'dragStarted');
+    const dragEndSpy = spyOn(fixture.componentInstance, 'dragEnded');
+    barElement = barElement || dragElement;
+
+    dispatchMouseEvent(dragElement, 'mousedown');
+    fixture.detectChanges();
+
+    dispatchMouseEvent(document, 'mousemove', 50);
+    fixture.detectChanges();
+    expect(dragStartSpy).toHaveBeenCalledTimes(1);
+    expect(barElement.style.getPropertyValue('pointer-events')).toEqual('none');
+    expect(barElement.classList).toContain('gantt-bar-draggable-drag');
+
+    dispatchMouseEvent(document, 'mousemove', 200);
+    fixture.detectChanges();
+    expect(dragMaskElement.style.getPropertyValue('display')).toEqual('block');
+    expect(dragBackdropElement.style.getPropertyValue('display')).toEqual('block');
+
+    dispatchMouseEvent(document, 'mouseup', 200);
+    fixture.detectChanges();
+    expect(barElement.style.getPropertyValue('pointer-events')).toEqual('');
+    expect(barElement.classList).not.toContain('gantt-bar-draggable-drag');
+    expect(dragMaskElement.style.getPropertyValue('display')).toEqual('none');
+    expect(dragBackdropElement.style.getPropertyValue('display')).toEqual('none');
+    expect(dragEndSpy).toHaveBeenCalledTimes(1);
+}
+
+function linkDragEvent(fixture: ComponentFixture<TestGanttBarComponent>, dragElement: HTMLElement) {
+    const root = fixture.debugElement.query(By.directive(NgxGanttRootComponent));
+
+    dispatchMouseEvent(dragElement, 'mousedown');
+    fixture.detectChanges();
+
+    dispatchMouseEvent(document, 'mousemove', 10, 10);
+    fixture.detectChanges();
+
+    const ganttLinkDragContainer = root.nativeElement.querySelector('.gantt-link-drag-container');
+    const linkDraggingLine = root.nativeElement.querySelector('.link-dragging-line');
+    expect(ganttLinkDragContainer).toBeTruthy();
+    expect(linkDraggingLine).toBeTruthy();
+
+    dispatchMouseEvent(document, 'mousemove', 200, -30);
+    fixture.detectChanges();
+
+    dispatchMouseEvent(document, 'mouseup', 200, -30);
+    fixture.detectChanges();
+}
+
+describe('bar-drag', () => {
+    let fixture: ComponentFixture<TestGanttBarComponent>;
+    let ganttComponentInstance: TestGanttBarComponent;
+    let ganttDebugElement: DebugElement;
+
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [CommonModule, NgxGanttModule],
+            declarations: [TestGanttBarComponent]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestGanttBarComponent);
+        ganttDebugElement = fixture.debugElement.query(By.directive(NgxGanttComponent));
+        ganttComponentInstance = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should active when mouse enter bar', () => {
+        const barElement = fixture.debugElement.query(By.directive(NgxGanttBarComponent)).nativeElement;
+        dispatchMouseEvent(barElement, 'mouseenter');
+        expect(barElement.classList).toContain(activeClass);
+        dispatchMouseEvent(barElement, 'mouseleave');
+        expect(barElement.classList).not.toContain(activeClass);
+    });
+
+    it('should bar drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[0];
+        dragEvent(fixture, bar.nativeElement);
+        expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-04-21 00:00:00').getUnixTime());
+        expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-06-26 23:59:59').getUnixTime());
+    });
+
+    it('should first bar handle drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
+        const firstHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[0].nativeElement;
+        dragEvent(fixture, firstHandleElement, bar.nativeElement);
+        expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-05-14 00:00:00').getUnixTime());
+    });
+
+    it('should last bar handles drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
+        const lastHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[1].nativeElement;
+        dragEvent(fixture, lastHandleElement, bar.nativeElement);
+        expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-07-15 23:59:59').getUnixTime());
+    });
+
+    it('should first bar link handle drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2];
+        const firstHandleElement = bar.queryAll(By.css('.link-handles .handle'))[0].nativeElement;
+        linkDragEvent(fixture, firstHandleElement);
+    });
+
+    it('should last bar link handles drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2];
+        const lastHandleElement = bar.queryAll(By.css('.link-handles .handle'))[1].nativeElement;
+        linkDragEvent(fixture, lastHandleElement);
+    });
+});

package/packages/gantt/src/components/calendar/calendar.component.html

@@ -0,0 +1,52 @@
+<div class="gantt-calendar-today-overlay" [style.width.px]="view.width">
+  <span class="today-rect" [hidden]="ganttUpper.viewType !== viewTypes.day"> </span>
+  <span class="today-line" *ngIf="ganttUpper.showTodayLine"> </span>
+</div>
+
+<svg class="gantt-calendar-overlay-main" [attr.width]="view.width" [attr.height]="headerHeight">
+  <g>
+    <text class="primary-text" *ngFor="let point of view.primaryDatePoints; trackBy: trackBy" [attr.x]="point.x" [attr.y]="point.y">
+      {{ point.text }}
+    </text>
+    <ng-container *ngFor="let point of view.secondaryDatePoints; trackBy: trackBy">
+      <text class="secondary-text" [class.secondary-text-weekend]="point.additions?.isWeekend" [attr.x]="point.x" [attr.y]="point.y">
+        {{ point.text }}
+      </text>
+    </ng-container>
+
+    <g>
+      <line
+        *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
+        [attr.x1]="(i + 1) * view.primaryWidth"
+        [attr.x2]="(i + 1) * view.primaryWidth"
+        [attr.y1]="0"
+        [attr.y2]="mainHeight"
+        class="primary-line"
+      ></line>
+    </g>
+
+    <g>
+      <line [attr.x1]="0" [attr.x2]="view.width" [attr.y1]="headerHeight" [attr.y2]="headerHeight" class="header-line"></line>
+    </g>
+  </g>
+  <g>
+    <g *ngIf="view.showTimeline">
+      <line
+        *ngFor="let point of view.secondaryDatePoints; let i = index; trackBy: trackBy"
+        [attr.x1]="(i + 1) * view.cellWidth"
+        [attr.x2]="(i + 1) * view.cellWidth"
+        [attr.y1]="headerHeight"
+        [attr.y2]="mainHeight"
+        class="secondary-line"
+      ></line>
+      <line
+        *ngFor="let point of view.primaryDatePoints; let i = index; trackBy: trackBy"
+        [attr.x1]="(i + 1) * view.primaryWidth"
+        [attr.x2]="(i + 1) * view.primaryWidth"
+        [attr.y1]="0"
+        [attr.y2]="mainHeight"
+        class="primary-line"
+      ></line>
+    </g>
+  </g>
+</svg>

package/packages/gantt/src/components/calendar/calendar.component.scss

@@ -0,0 +1,77 @@
+.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: $gantt-date-today-color;
+      color: $gantt-date-today-text-color;
+      text-align: center;
+      border-radius: 4px;
+    }
+    .today-line {
+      position: absolute;
+      width: 3px;
+      background: $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: $gantt-bg-color;
+  }
+
+  svg {
+    overflow: visible;
+  }
+
+  line {
+    shape-rendering: crispEdges;
+  }
+
+  .primary-text {
+    fill: $gantt-date-primary-color;
+    font-size: $gantt-date-primary-font-size;
+  }
+
+  .secondary-text {
+    fill: $gantt-date-secondary-color;
+    font-size: $gantt-date-secondary-font-size;
+
+    &-weekend {
+      fill: $gantt-date-secondary-weekend-color;
+    }
+  }
+
+  .primary-text,
+  .secondary-text {
+    text-anchor: middle;
+  }
+
+  .primary-line {
+    stroke: $gantt-date-primary-border;
+  }
+
+  .secondary-line {
+    stroke-dasharray: 2px 5px;
+    stroke: #cacaca;
+  }
+
+  .header-line {
+    stroke: $gantt-border-color;
+  }
+
+  .secondary-backdrop {
+    fill: $gantt-date-week-backdrop-bg;
+  }
+}

package/packages/gantt/src/components/calendar/calendar.component.ts

@@ -0,0 +1,100 @@
+import {
+    Component,
+    OnInit,
+    HostBinding,
+    OnChanges,
+    SimpleChanges,
+    OnDestroy,
+    NgZone,
+    Inject,
+    ElementRef,
+    AfterViewInit
+} from '@angular/core';
+import { GanttDatePoint } from '../../class/date-point';
+import { Subject, merge } from 'rxjs';
+import { take, takeUntil } from 'rxjs/operators';
+import { headerHeight, todayHeight, todayWidth, todayBorderRadius } from '../../gantt.styles';
+import { isNumber } from '../../utils/helpers';
+import { GanttDate } from '../../utils/date';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+import { GanttViewType } from './../../class/view-type';
+
+const mainHeight = 5000;
+
+@Component({
+    selector: 'gantt-calendar-overlay',
+    templateUrl: './calendar.component.html'
+})
+export class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+    get view() {
+        return this.ganttUpper.view;
+    }
+
+    private unsubscribe$ = new Subject();
+
+    headerHeight = headerHeight;
+
+    mainHeight = mainHeight;
+
+    todayHeight = todayHeight;
+
+    todayWidth = todayWidth;
+
+    todayBorderRadius = todayBorderRadius;
+
+    viewTypes = GanttViewType;
+
+    @HostBinding('class.gantt-calendar-overlay') className = true;
+
+    constructor(
+        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
+        private ngZone: NgZone,
+        private elementRef: ElementRef<HTMLElement>
+    ) {}
+
+    setTodayPoint() {
+        const x = this.view.getTodayXPoint();
+        const today = new GanttDate().getDate();
+        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0] as HTMLElement;
+        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0] as HTMLElement;
+        const line = this.elementRef.nativeElement.getElementsByClassName('today-line')[0] as HTMLElement;
+
+        if (isNumber(x)) {
+            if (rect) {
+                rect.style.left = `${x - todayWidth / 2}px`;
+                rect.style.top = `${headerHeight - todayHeight}px`;
+                rect.innerHTML = today.toString();
+            }
+            if (line) {
+                line.style.left = `${x}px`;
+                line.style.top = `${headerHeight}px`;
+                line.style.bottom = `${-mainHeight}px`;
+            }
+        } else {
+            todayEle.style.display = 'none';
+        }
+    }
+
+    ngOnInit() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
+                .pipe(takeUntil(this.unsubscribe$))
+                .subscribe(() => {
+                    this.setTodayPoint();
+                });
+        });
+    }
+
+    ngAfterViewInit() {}
+
+    ngOnChanges(changes: SimpleChanges): void {}
+
+    trackBy(point: GanttDatePoint, index: number) {
+        return point.text || index;
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}

package/packages/gantt/src/components/drag-backdrop/drag-backdrop.component.html

@@ -0,0 +1,6 @@
+<div class="gantt-drag-mask">
+  <div class="date-range">
+    <span class="start"></span>
+    <span class="end"></span>
+  </div>
+</div>

package/packages/gantt/src/components/drag-backdrop/drag-backdrop.component.scss

@@ -0,0 +1,48 @@
+.gantt-drag-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    display: none;
+}
+
+.gantt-drag-mask {
+    position: absolute;
+    top: $gantt-header-height;
+    z-index: 1;
+    height: 100%;
+    display: none;
+    background: rgba($color: $gantt-item-drag-mask-color, $alpha: 0.05);
+
+    .date-range {
+        width: 100%;
+        min-width: 120px;
+        top: -23px;
+        background: $gantt-item-drag-mask-color;
+        line-height: 23px;
+        border-radius: 4px;
+        color: #fff;
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        box-sizing: border-box
+    }
+}
+
+.gantt-link-drag-container {
+    width: 100%;
+    height: 1px;
+    overflow: visible !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2000;
+
+    .link-dragging-line {
+        stroke: $gantt-link-dragging-line-color;
+        stroke-width: 2px;
+    }
+}

package/packages/gantt/src/components/drag-backdrop/drag-backdrop.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+
+@Component({
+    selector: 'gantt-drag-backdrop',
+    templateUrl: `./drag-backdrop.component.html`
+})
+export class GanttDragBackdropComponent implements OnInit {
+    @HostBinding('class.gantt-drag-backdrop') backdropClass = true;
+
+    constructor() {}
+
+    ngOnInit() {}
+}

package/packages/gantt/src/components/icon/icon.component.scss

@@ -0,0 +1,13 @@
+.gantt-icon {
+    font-size: 1rem;
+    line-height: 0;
+
+    svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+        vertical-align: -0.125em;
+        background-repeat: no-repeat;
+    }
+
+}