Событие Angular dragMove снижает производительность приложения - PullRequest
Новая
       42

Событие Angular dragMove снижает производительность приложения

0 голосов
/ 08 ноября 2019

Я разрабатываю приложение, используя угловой каркас в веб-интерфейсе. Я перетаскиваю черную линию с шагом 30 пикселей, поэтому я меняю стиль каждого события перетаскивания. И перетаскивание происходит очень медленно. Есть ли какое-либо решение для повышения производительности приложения? Кстати, перетаскивание работает лучше в Chrome, чем в Firefox.

enter image description here

это мой компонент 

import { ConstantesGda } from './../../../shared/models/constantes-gda';
import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Cycle } from '../../../shared/models/Cycle';
import { Planning } from 'app/gda/shared/models/Planning';
import * as Moment from 'moment';
import { extendMoment } from 'moment-range';
import { CdkDragStart, CdkDragMove, CdkDragEnd } from '@angular/cdk/drag-drop';

const moment = extendMoment(Moment);
export interface PeriodeEtude {
    week: number;
    year: number;
}
@Component({
    selector: 'jhi-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.scss']
})
export class GridComponent implements OnInit, OnChanges {
    public dates = [];
    moment = moment;
    startDatePeriode: PeriodeEtude = { week: 0, year: 0 };
    endDatePeriode: PeriodeEtude = { week: 0, year: 0 };

    clientRect: ClientRect;
    parentClientRect: ClientRect;
    leftPosition: number;
    oldLeftPosition: number;

    @Input()
    public planning: Planning;
    today = moment().format('YYYY-MM-DD');

    constructor() {}
    ngOnInit() {}

    ngOnChanges(changes: SimpleChanges) {
        if (changes['planning'].currentValue) {
            this.startDatePeriode.week = this.planning.semaineDebutEtude;
            this.startDatePeriode.year = this.planning.anneeDebutEtude;

            this.endDatePeriode.week = this.planning.semaineFinEtude;
            this.endDatePeriode.year = this.planning.anneeFinEtude;

            let start = moment().set({ year: this.planning.anneeDebutEtude, week: this.planning.semaineDebutEtude });
            start = start.startOf('week');
            let end = moment()
                .startOf('week')
                .set({ year: this.planning.anneeFinEtude, week: this.planning.semaineFinEtude });
            end = end.startOf('week');
            const range = moment().range(start, end);
            const days = Array.from(range.by('weeks'));
            this.dates = days.map(d => d.format('WW-YYYY'));
            this.traiterArray(this.dates);
            localStorage.setItem('weeksMap', JSON.stringify(this.dates));
        }
    }

    isInPeriod(cycle: Cycle): boolean {
        let isInPeriod = false;
        if (cycle.arret) {
            let weeksArray: string[] = [];
            weeksArray = JSON.parse(localStorage.getItem('weeksMap'));
            isInPeriod = weeksArray.includes(cycle.arret.semaineDebutArret + '-' + cycle.arret.anneeDebutArret);
        }

        return isInPeriod;
    }

    dragStart(event: CdkDragStart<Cycle>) {
        this.clientRect = event.source.element.nativeElement.getBoundingClientRect();
        this.parentClientRect = event.source.getRootElement().parentElement.getBoundingClientRect();
        this.oldLeftPosition = this.clientRect.left;
    }

    dragMove(event: CdkDragMove<Cycle>) {
        this.parentClientRect = event.source.getRootElement().parentElement.getBoundingClientRect();
        this.clientRect = event.source.element.nativeElement.getBoundingClientRect();
        this.clientRect = event.source.element.nativeElement.getBoundingClientRect();

        this.leftPosition =
            this.clientRect.left - this.parentClientRect.left - ((this.clientRect.left - this.parentClientRect.left) % ConstantesGda.STEP);
        if (this.leftPosition < 0) {
            this.leftPosition = 0;
        }
        event.source.element.nativeElement.style.transform = `translate3d(${this.leftPosition}px, 0px, 0px)`;
    }
    dragEnd(event: CdkDragEnd<Cycle>) {
       /* const semaineAnneeDebutArret: string = this.dates[this.leftPosition / ConstantesGda.STEP];
        event.source.data.arret.semaineDebutArret = Number(semaineAnneeDebutArret.split('-')[0]);
        event.source.data.arret.anneeDebutArret = Number(semaineAnneeDebutArret.split('-')[1]);*/
    }

    traiterArray(array: string[]) {
        array.forEach((element, i) => {
            array[i] = Number(element.split('-')[0]) + '-' + Number(element.split('-')[1]);
        });
    }
}

, и этомой HTML 

  <jhi-arret class="arret-box" [codeTranche]="tranche.codeTranche" [cycle]="cycle"
                    *ngIf="cycle.arret.anneeDebutArret&&cycle.arret.semaineDebutArret" class="arret-box"
                    jhiPositonnerSurGrid [anneeDebut]="cycle.arret.anneeDebutArret"
                    [semaineDebut]="cycle.arret.semaineDebutArret"
                    draggable="true"         cdkDrag cdkDragLockAxis="x"
                    (cdkDragStarted)="dragStart($event)" (cdkDragMoved)="dragMove($event)"
                    (cdkDragEnded)="dragEnd($event)" [cdkDragData]="cycle"
                   >
                </jhi-arret>
...