TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Timeline performance improvements (#5669)

Browse Source 
[ci skip]
pull/5681/head
Roman Roelofsen 7 years ago committed by Oliver Günther
parent 5db859ea39
commit 8d66228ec4
4 changed files with 190 additions and 121 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 30
      frontend/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts
  2. 68
      frontend/app/components/wp-table/timeline/grid/wp-timeline-grid.directive.ts
  3. 125
      frontend/app/components/wp-table/timeline/header/wp-timeline-header.directive.ts
  4. 88
      frontend/app/components/wp-table/timeline/wp-timeline.ts

30
frontend/app/components/wp-table/timeline/container/wp-timeline-container.directive.ts
Unescape View File

@ -45,6 +45,7 @@ import {RenderedRow} from '../../../wp-fast-table/builders/primary-render-pass';
import {WorkPackageTimelineCellsRenderer} from '../cells/wp-timeline-cells-renderer';
import {WorkPackageTimelineCell} from '../cells/wp-timeline-cell';
import {WorkPackageRelationsService} from '../../../wp-relations/wp-relations.service';
import {Moment} from "moment";
export class WorkPackageTimelineTableController {
@ -63,6 +64,7 @@ export class WorkPackageTimelineTableController {
private cellsRenderer = new WorkPackageTimelineCellsRenderer(this);
public outerContainer:JQuery;
public timelineBody:JQuery;
private selectionParams = {
@ -157,6 +159,10 @@ export class WorkPackageTimelineTableController {
return this.$element.offset().left;
}
getParentScrollContainer() {
return this.outerContainer.closest(selectorTimelineSide)[0];
}
get viewParameters():TimelineViewParameters {
return this._viewParameters;
}
@ -191,7 +197,7 @@ export class WorkPackageTimelineTableController {
// Calculate overflowing width to set to outer container
// required to match width in all child divs
const currentWidth = this.outerContainer.closest(selectorTimelineSide)[0].scrollWidth;
const currentWidth = this.getParentScrollContainer().scrollWidth;
this.outerContainer.width(currentWidth);
});
}
@ -230,6 +236,22 @@ export class WorkPackageTimelineTableController {
});
}
getFirstDayInViewport() {
const outerContainer = this.getParentScrollContainer();
const scrollLeft = outerContainer.scrollLeft;
const nonVisibleDaysLeft = Math.floor(scrollLeft / this.viewParameters.pixelPerDay);
return this.viewParameters.dateDisplayStart.clone().add(nonVisibleDaysLeft, "days");
}
getLastDayInViewport() {
const outerContainer = this.getParentScrollContainer();
const scrollLeft = outerContainer.scrollLeft;
const width = outerContainer.offsetWidth;
const viewPortRight = scrollLeft + width;
const daysUntilViewPortEnds = Math.ceil(viewPortRight / this.viewParameters.pixelPerDay) + 1;
return this.viewParameters.dateDisplayStart.clone().add(daysUntilViewPortEnds, "days");
}
private resetSelectionMode() {
this._viewParameters.activeSelectionMode = null;
this._viewParameters.selectionModeStart = null;
@ -323,6 +345,12 @@ export class WorkPackageTimelineTableController {
this._viewParameters.dateDisplayEnd = newParams.dateDisplayEnd;
}
// Calculate the visible viewport
const firstDayInViewport = this.getFirstDayInViewport();
const lastDayInViewport = this.getLastDayInViewport();
const viewport: [Moment, Moment] = [firstDayInViewport, lastDayInViewport];
this._viewParameters.visibleViewportAtCalculationTime = viewport;
return changed;
}
}

68
frontend/app/components/wp-table/timeline/grid/wp-timeline-grid.directive.ts
Unescape View File

@ -25,16 +25,18 @@
//
// See doc/COPYRIGHT.rdoc for more details.
// ++
import * as moment from 'moment';
import {openprojectModule} from '../../../../angular-modules';
import {TimelineZoomLevel} from '../../../api/api-v3/hal-resources/query-resource.service';
import {WorkPackageTimelineTableController} from '../container/wp-timeline-container.directive';
import {
TimelineViewParameters,
calculatePositionValueForDayCount,
getTimeSlicesForHeader,
timelineElementCssClass,
calculatePositionValueForDayCount, timelineGridElementCssClass
} from "../wp-timeline";
import {WorkPackageTimelineTableController} from "../container/wp-timeline-container.directive";
import * as moment from 'moment';
timelineGridElementCssClass,
TimelineViewParameters
} from '../wp-timeline';
import Moment = moment.Moment;
import {openprojectModule} from "../../../../angular-modules";
import {TimelineZoomLevel} from "../../../api/api-v3/hal-resources/query-resource.service";
export class WorkPackageTableTimelineGrid {
@ -80,43 +82,43 @@ export class WorkPackageTableTimelineGrid {
}
private renderLabelsDays(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "day", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.style.paddingTop = "1px";
this.renderTimeSlices(vp, 'day', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.style.paddingTop = '1px';
});
}
private renderLabelsWeeks(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "day", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'day', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
});
this.renderTimeSlices(vp, "week", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'week', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.classList.add('-grid-highlight');
});
}
private renderLabelsMonths(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "week", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'week', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
});
this.renderTimeSlices(vp, "month", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'month', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.classList.add('-grid-highlight');
});
}
private renderLabelsQuarters(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "month", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'month', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
});
this.renderTimeSlices(vp, "quarter", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'quarter', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.classList.add('-grid-highlight');
});
}
private renderLabelsYears(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "month", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'month', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
});
this.renderTimeSlices(vp, "year", vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'year', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.classList.add('-grid-highlight');
});
}
@ -127,30 +129,30 @@ export class WorkPackageTableTimelineGrid {
endView:Moment,
cellCallback:(start:Moment, cell:HTMLElement) => void) {
const slices:[Moment, Moment][] = [];
const time = startView.clone().startOf(unit);
const end = endView.clone().endOf(unit);
while (time.isBefore(end)) {
const sliceStart = moment.max(time, startView).clone();
const sliceEnd = moment.min(time.clone().endOf(unit), endView).clone();
time.add(1, unit);
slices.push([sliceStart, sliceEnd]);
}
const {inViewportAndBoundaries, rest} = getTimeSlicesForHeader(vp, unit, startView, endView);
for (let [start, end] of slices) {
const cell = document.createElement("div");
for (let [start, end] of inViewportAndBoundaries) {
const cell = document.createElement('div');
cell.classList.add(timelineElementCssClass, timelineGridElementCssClass);
cell.style.left = calculatePositionValueForDayCount(vp, start.diff(startView, "days"));
cell.style.width = calculatePositionValueForDayCount(vp, end.diff(start, "days") + 1);
cell.style.left = calculatePositionValueForDayCount(vp, start.diff(startView, 'days'));
cell.style.width = calculatePositionValueForDayCount(vp, end.diff(start, 'days') + 1);
this.gridContainer[0].appendChild(cell);
cellCallback(start, cell);
}
setTimeout(() => {
for (let [start, end] of rest) {
const cell = document.createElement('div');
cell.classList.add(timelineElementCssClass, timelineGridElementCssClass);
cell.style.left = calculatePositionValueForDayCount(vp, start.diff(startView, 'days'));
cell.style.width = calculatePositionValueForDayCount(vp, end.diff(start, 'days') + 1);
this.gridContainer[0].appendChild(cell);
cellCallback(start, cell);
}
}, 0);
}
}
openprojectModule.component("wpTimelineGrid", {
openprojectModule.component('wpTimelineGrid', {
template: '<div class="wp-table-timeline--grid"></div>',
controller: WorkPackageTableTimelineGrid,
require: {

125
frontend/app/components/wp-table/timeline/header/wp-timeline-header.directive.ts
Unescape View File

@ -1,3 +1,7 @@
import * as moment from 'moment';
import {openprojectModule} from '../../../../angular-modules';
import {TimelineZoomLevel} from '../../../api/api-v3/hal-resources/query-resource.service';
import {WorkPackageTimelineTableController} from '../container/wp-timeline-container.directive';
// -- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
@ -25,16 +29,8 @@
//
// See doc/COPYRIGHT.rdoc for more details.
// ++
import {
TimelineViewParameters,
timelineElementCssClass,
calculatePositionValueForDayCount
} from "../wp-timeline";
import {WorkPackageTimelineTableController} from "../container/wp-timeline-container.directive";
import * as moment from 'moment';
import {calculatePositionValueForDayCount, getTimeSlicesForHeader, TimelineViewParameters} from '../wp-timeline';
import Moment = moment.Moment;
import {openprojectModule} from "../../../../angular-modules";
import {TimelineZoomLevel} from "../../../api/api-v3/hal-resources/query-resource.service";
export const timelineHeaderCSSClass = 'wp-timeline--header-element';
@ -83,133 +79,132 @@ export class WorkPackageTimelineHeaderController {
}
private renderLabelsDays(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "month", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("MMM YYYY");
this.renderTimeSlices(vp, 'month', 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('MMM YYYY');
cell.classList.add('wp-timeline--header-top-bold-element');
cell.style.height = "13px";
cell.style.height = '13px';
});
this.renderTimeSlices(vp, "week", 13, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("ww");
this.renderTimeSlices(vp, 'week', 13, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('ww');
cell.classList.add('-top-border');
cell.style.height = '32px';
});
this.renderTimeSlices(vp, "day", 23, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("D");
this.renderTimeSlices(vp, 'day', 23, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('D');
cell.classList.add('-top-border');
cell.style.height = '22px';
});
this.renderTimeSlices(vp, "day", 33, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("dd");
this.renderTimeSlices(vp, 'day', 33, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('dd');
cell.classList.add('wp-timeline--header-day-element');
});
}
private renderLabelsWeeks(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "month", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("MMM YYYY");
this.renderTimeSlices(vp, 'month', 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('MMM YYYY');
cell.classList.add('wp-timeline--header-top-bold-element');
});
this.renderTimeSlices(vp, "week", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("ww");
this.renderTimeSlices(vp, 'week', 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('ww');
cell.classList.add('-top-border');
cell.style.height = '22px';
});
this.renderTimeSlices(vp, "day", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("D");
this.renderTimeSlices(vp, 'day', 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('D');
cell.classList.add('wp-timeline--header-middle-element');
});
}
private renderLabelsMonths(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "year", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("YYYY");
this.renderTimeSlices(vp, 'year', 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('YYYY');
cell.classList.add('wp-timeline--header-top-bold-element');
});
this.renderTimeSlices(vp, "month", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("MMM");
this.renderTimeSlices(vp, 'month', 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('MMM');
cell.classList.add('-top-border');
cell.style.height = '30px';
});
this.renderTimeSlices(vp, "week", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("ww");
this.renderTimeSlices(vp, 'week', 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('ww');
cell.classList.add('wp-timeline--header-middle-element');
});
}
private renderLabelsQuarters(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "year", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
this.renderTimeSlices(vp, 'year', 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.classList.add('wp-timeline--header-top-bold-element');
cell.innerHTML = start.format("YYYY");
cell.innerHTML = start.format('YYYY');
});
this.renderTimeSlices(vp, "quarter", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = "Q" + start.format("Q");
this.renderTimeSlices(vp, 'quarter', 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = 'Q' + start.format('Q');
cell.classList.add('-top-border');
cell.style.height = '30px';
});
this.renderTimeSlices(vp, "month", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("MMM");
this.renderTimeSlices(vp, 'month', 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('MMM');
cell.classList.add('wp-timeline--header-middle-element');
});
}
private renderLabelsYears(vp:TimelineViewParameters) {
this.renderTimeSlices(vp, "year", 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("YYYY");
this.renderTimeSlices(vp, 'year', 0, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('YYYY');
cell.classList.add('wp-timeline--header-top-bold-element');
});
this.renderTimeSlices(vp, "quarter", 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = "Q" + start.format("Q");
this.renderTimeSlices(vp, 'quarter', 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = 'Q' + start.format('Q');
cell.classList.add('-top-border');
cell.style.height = '30px';
});
this.renderTimeSlices(vp, "month", 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format("M");
this.renderTimeSlices(vp, 'month', 25, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
cell.innerHTML = start.format('M');
cell.classList.add('wp-timeline--header-middle-element');
});
}
renderTimeSlices(vp:TimelineViewParameters,
unit:moment.unitOfTime.DurationConstructor,
marginTop:number,
startView:Moment,
endView:Moment,
cellCallback:(start:Moment, cell:HTMLElement) => void) {
const slices:[Moment, Moment][] = [];
private renderTimeSlices(vp:TimelineViewParameters,
unit:moment.unitOfTime.DurationConstructor,
marginTop:number,
startView:Moment,
endView:Moment,
cellCallback:(start:Moment, cell:HTMLElement) => void) {
const time = startView.clone().startOf(unit);
const end = endView.clone().endOf(unit);
while (time.isBefore(end)) {
const sliceStart = moment.max(time, startView).clone();
const sliceEnd = moment.min(time.clone().endOf(unit), endView).clone();
time.add(1, unit);
slices.push([sliceStart, sliceEnd]);
}
const {inViewportAndBoundaries, rest} = getTimeSlicesForHeader(vp, unit, startView, endView);
for (let [start, end] of slices) {
for (let [start, end] of inViewportAndBoundaries) {
const cell = this.addLabelCell();
cell.style.top = marginTop + "px";
cell.style.left = calculatePositionValueForDayCount(vp, start.diff(startView, "days"));
cell.style.width = calculatePositionValueForDayCount(vp, end.diff(start, "days") + 1);
cell.style.top = marginTop + 'px';
cell.style.left = calculatePositionValueForDayCount(vp, start.diff(startView, 'days'));
cell.style.width = calculatePositionValueForDayCount(vp, end.diff(start, 'days') + 1);
cellCallback(start, cell);
}
setTimeout(() => {
for (let [start, end] of rest) {
const cell = this.addLabelCell();
cell.style.top = marginTop + 'px';
cell.style.left = calculatePositionValueForDayCount(vp, start.diff(startView, 'days'));
cell.style.width = calculatePositionValueForDayCount(vp, end.diff(start, 'days') + 1);
cellCallback(start, cell);
}
}, 0);
}
private addLabelCell():HTMLElement {
const label = document.createElement("div");
const label = document.createElement('div');
label.className = timelineHeaderCSSClass;
this.innerHeader.append(label);
@ -217,7 +212,7 @@ export class WorkPackageTimelineHeaderController {
}
}
openprojectModule.component("wpTimelineHeader", {
openprojectModule.component('wpTimelineHeader', {
templateUrl: '/components/wp-table/timeline/header/wp-timeline-header.html',
controller: WorkPackageTimelineHeaderController,
require: {

88
frontend/app/components/wp-table/timeline/wp-timeline.ts
Unescape View File

@ -25,24 +25,24 @@
//
// See doc/COPYRIGHT.rdoc for more details.
// ++
import * as moment from "moment";
import * as moment from 'moment';
import {TimelineZoomLevel} from '../../api/api-v3/hal-resources/query-resource.service';
import {
WorkPackageResourceInterface,
WorkPackageResource
} from "../../api/api-v3/hal-resources/work-package-resource.service";
WorkPackageResource,
WorkPackageResourceInterface
} from '../../api/api-v3/hal-resources/work-package-resource.service';
import Moment = moment.Moment;
import {TimelineZoomLevel} from "../../api/api-v3/hal-resources/query-resource.service";
export const timelineElementCssClass = "timeline-element";
export const timelineGridElementCssClass = "wp-timeline--grid-element";
export const timelineMarkerSelectionStartClass = "selection-start";
export const timelineElementCssClass = 'timeline-element';
export const timelineGridElementCssClass = 'wp-timeline--grid-element';
export const timelineMarkerSelectionStartClass = 'selection-start';
/**
*
*/
export class TimelineViewParametersSettings {
zoomLevel: TimelineZoomLevel = 'days';
zoomLevel:TimelineZoomLevel = 'days';
}
@ -57,19 +57,24 @@ export const zoomLevelOrder:TimelineZoomLevel[] = [
*/
export class TimelineViewParameters {
readonly now: Moment = moment({hour: 0, minute: 0, seconds: 0});
readonly now:Moment = moment({hour: 0, minute: 0, seconds: 0});
dateDisplayStart: Moment = moment({hour: 0, minute: 0, seconds: 0});
dateDisplayStart:Moment = moment({hour: 0, minute: 0, seconds: 0});
dateDisplayEnd: Moment = this.dateDisplayStart.clone().add(1, "day");
dateDisplayEnd:Moment = this.dateDisplayStart.clone().add(1, 'day');
settings: TimelineViewParametersSettings = new TimelineViewParametersSettings();
settings:TimelineViewParametersSettings = new TimelineViewParametersSettings();
activeSelectionMode: null|((wp: WorkPackageResource) => any) = null;
activeSelectionMode:null | ((wp:WorkPackageResource) => any) = null;
selectionModeStart: null|string = null;
selectionModeStart:null | string = null;
get pixelPerDay(): number {
/**
* The visible viewport (at the time the view parameters were calculated last!!!)
*/
visibleViewportAtCalculationTime:[Moment, Moment];
get pixelPerDay():number {
switch (this.settings.zoomLevel) {
case 'days':
return 30;
@ -89,7 +94,7 @@ export class TimelineViewParameters {
}
get maxSteps():number {
return this.dateDisplayEnd.diff(this.dateDisplayStart, "days");
return this.dateDisplayEnd.diff(this.dateDisplayStart, 'days');
}
}
@ -98,14 +103,14 @@ export class TimelineViewParameters {
*
*/
export interface RenderInfo {
viewParams: TimelineViewParameters;
workPackage: WorkPackageResourceInterface;
viewParams:TimelineViewParameters;
workPackage:WorkPackageResourceInterface;
}
/**
*
*/
export function calculatePositionValueForDayCountingPx(viewParams: TimelineViewParameters, days: number): number {
export function calculatePositionValueForDayCountingPx(viewParams:TimelineViewParameters, days:number):number {
const daysInPx = days * viewParams.pixelPerDay;
return daysInPx;
}
@ -113,9 +118,48 @@ export function calculatePositionValueForDayCountingPx(viewParams: TimelineViewP
/**
*
*/
export function calculatePositionValueForDayCount(viewParams: TimelineViewParameters, days: number): string {
export function calculatePositionValueForDayCount(viewParams:TimelineViewParameters, days:number):string {
const value = calculatePositionValueForDayCountingPx(viewParams, days);
return value + "px";
return value + 'px';
}
export function getTimeSlicesForHeader(vp:TimelineViewParameters,
unit:moment.unitOfTime.DurationConstructor,
startView:Moment,
endView:Moment) {
const inViewport:[Moment, Moment][] = [];
const rest:[Moment, Moment][] = [];
const time = startView.clone().startOf(unit);
const end = endView.clone().endOf(unit);
while (time.isBefore(end)) {
const sliceStart = moment.max(time, startView).clone();
const sliceEnd = moment.min(time.clone().endOf(unit), endView).clone();
time.add(1, unit);
const viewport = vp.visibleViewportAtCalculationTime;
if ((sliceStart.isSameOrAfter(viewport[0]) && sliceStart.isSameOrBefore(viewport[1]))
|| (sliceEnd.isSameOrAfter(viewport[0]) && sliceEnd.isSameOrBefore(viewport[1]))) {
inViewport.push([sliceStart, sliceEnd]);
} else {
rest.push([sliceStart, sliceEnd]);
}
}
const firstRest:[Moment, Moment] = rest.splice(0, 1)[0];
const lastRest:[Moment, Moment] = rest.pop()!;
const inViewportAndBoundaries = _.concat(
[firstRest].filter(e => !_.isNil(e)),
inViewport,
[lastRest].filter(e => !_.isNil(e))
);
return {
inViewportAndBoundaries,
rest
};
}

Write Preview
Loading…
Cancel
Save