Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@losting/timeline

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@losting/timeline - npm Package Compare versions

Comparing version 1.2.2 to 2.0.0

17

lib/draw-helper.d.ts

@@ -1,13 +0,12 @@

export declare function drawHelper({ beforePointCount, afterPointCount, centerTimePoint, xOffset, timeOffset, timeSpacing, pointHeight, spacing, currentTime, drawLine, drawText }: {
beforePointCount: any;
afterPointCount: any;
centerTimePoint: any;
xOffset: any;
timeOffset: any;
export declare function drawHelper({ pointWidth, timePerPixel, timeSpacing, screenScaleCount, scaleSpacing, scaleHeight, startTime, drawLine, drawText, drawTimelineScale, }: {
pointWidth: any;
timePerPixel: any;
timeSpacing: any;
pointHeight: any;
spacing: any;
currentTime: any;
screenScaleCount: any;
scaleSpacing: any;
scaleHeight: any;
startTime: any;
drawLine: any;
drawText: any;
drawTimelineScale: any;
}): void;

42

lib/index.d.ts

@@ -1,2 +0,2 @@

declare type AreaItemType = {
declare type AreaItemState = {
startTime: number;

@@ -6,18 +6,21 @@ endTime: number;

};
declare type DrawType = {
startTime: number;
endTime: number;
declare type DrawState = {
currentTime?: number;
zoom?: number;
areas?: AreaItemType[];
areas?: AreaItemState[];
_privateFlag?: boolean;
};
declare type OptionsType = {
declare type TimeLineOptionState = {
fill?: boolean;
width?: number;
height?: number;
bgColor?: string;
textColor?: string;
scaleColor?: string;
scaleSpacing?: number;
areaBgColor?: string;
pointColor?: string;
areaColor?: string;
centerTimePointColor?: string;
centerTimePointWidth?: number;
spacing?: number;
pointWidth?: number;
fps?: number;
zoom?: number;
};

@@ -28,14 +31,14 @@ declare class TimeLine {

canvasContext: CanvasRenderingContext2D;
private startTime;
private endTime;
private currentTime;
private areas?;
spacing: number;
centerTimePointWidth: number;
centerTimePointColor: string;
scaleSpacing: number;
bgColor: string;
pointWidth: number;
pointColor: string;
textColor: string;
pointColor: string;
areaColor: string;
constructor(id: string, { fill, textColor, pointColor, areaColor, centerTimePointColor, centerTimePointWidth, spacing, }: OptionsType);
draw({ startTime, endTime, currentTime, areas, _privateFlag }: DrawType): void;
scaleColor: string;
areaBgColor: string;
fps: number;
constructor(id: string, options: TimeLineOptionState);
draw({ currentTime, areas, _privateFlag }?: DrawState): void;
private _onDrag;

@@ -45,2 +48,3 @@ private _onZoom;

private clear;
private drawTimelineScale;
private drawLine;

@@ -47,0 +51,0 @@ private drawText;

605

lib/timeline.cjs.js

@@ -622,60 +622,31 @@ 'use strict';

};
const getWeekStartDate = (timestamp = Math.floor(Date.now() / 1000)) => {
const time = timestamp * 1000;
const year = dayjs(time).year();
const month = dayjs(time).month();
const date = dayjs(time).date();
const day = dayjs(time).day();
const weekStartDate = new Date(year, month, date - day).getTime();
return Math.floor(weekStartDate / 1000);
};
function drawHelper({ beforePointCount, afterPointCount, centerTimePoint, xOffset, timeOffset, timeSpacing, pointHeight, spacing, currentTime, drawLine, drawText }) {
if (timeSpacing === 5) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
function drawHelper({ pointWidth, timePerPixel, timeSpacing, screenScaleCount, scaleSpacing, scaleHeight, startTime, drawLine, drawText, drawTimelineScale, }) {
drawTimelineScale(timeSpacing);
if (timeSpacing === 1) {
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing + pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing);
if (time % 10 === 0) {
drawLine(x, scaleHeight.height5);
drawText(x - 15, 40, `${dateTime(time, 'HH:mm:ss')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 5 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height3);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
if (time % 1 === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 5 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}

@@ -685,267 +656,179 @@ return;

if (timeSpacing === 10) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
const timeOffset = +dateTime(startTime, 's') % 10;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 2) === 0) {
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
}
drawLine(x, scaleHeight.height4);
drawText(x - 15, 40, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 10 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height1);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 2) === 0) {
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
}
continue;
}
if (time % 10 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 30) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
const timeOffset = +dateTime(startTime, 's') % 30;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 5) === 0) {
drawLine(x, scaleHeight.height4);
drawText(x - 15, 40, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.minute1);
continue;
}
if (time % 30 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height1);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.minute1);
continue;
}
if (time % 30 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 60) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
const timeOffset = +dateTime(startTime, 's') % 60;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.minute1);
drawLine(x, scaleHeight.height3);
if (time % (60 * 10) === 0) {
drawText(x - 15, 40, `${dateTime(time, 'HH:mm')}`);
}
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height1);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
return;
}
if (timeSpacing === 120) {
const timeArr = dateTime(startTime, 'm:s').split(':');
const timestamp = +timeArr[0] * 60 + +timeArr[1];
const timeOffset = timestamp % 120;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
drawLine(x, scaleHeight.height3);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 2) === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 120) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (timeSpacing === 300) {
const timeArr = dateTime(startTime, 'm:s').split(':');
const timestamp = +timeArr[0] * 60 + +timeArr[1];
const timeOffset = timestamp % 300;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height3);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 5) === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
return;
}
if (timeSpacing === 7200) {
const timeArr = dateTime(startTime, 'H:m:s').split(':');
const timestamp = +timeArr[0] * 3600 + +timeArr[1] * 60 + +timeArr[2];
const timeOffset = timestamp % 7200;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (3600 * 24) === 0) {
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time, 'MM/DD HH:mm')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
if (time % (3600 * 12) === 0) {
drawLine(x, scaleHeight.height3);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute1);
if (time % 7200 === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 300) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
if (timeSpacing === 86400) {
const timeArr = dateTime(startTime, 'H:m:s').split(':');
const timestamp = +timeArr[0] * 3600 + +timeArr[1] * 60 + +timeArr[2];
const timeOffset = timestamp % 86400;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (dateTime(time, 'D') === '1') {
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time, 'YYYY/MM/DD')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute10);
if (time % 86400 === 57600) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
return;
}
if (timeSpacing === 604800) {
const timeOffset = startTime - getWeekStartDate(startTime);
const xOffset = timeOffset / timePerPixel;
const yearText = new Array(screenScaleCount).fill(false);
const canDrawYearScale = (index) => {
for (let i = index; i > index - 7; i--) {
if (yearText[i]) {
return false;
}
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute10);
return true;
};
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (dayjs(time * 1000).month() === 0 && (dayjs(time * 1000).date() > 0 || dayjs(time * 1000).date() <= 31) && canDrawYearScale(i)) {
yearText[i] = true;
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time, 'YYYY/MM/DD')}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.second5);
if (dayjs(time * 1000).day() === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}

@@ -956,9 +839,21 @@ return;

var _TimeLine_event, _TimeLine_timeSpacingMap, _TimeLine_timeSpacing, _TimeLine_pointHeight, _TimeLine_isDraging;
var _TimeLine_event, _TimeLine_timeSpacingMap, _TimeLine_timeSpacing, _TimeLine_scaleHeight, _TimeLine_isDraging;
const defaultOptions = {
fill: false,
bgColor: 'rgba(0,0,0,0.5)',
textColor: '#ffffff',
scaleColor: '#ffffff',
areaBgColor: '#ffffff55',
pointColor: '#00aeec',
pointWidth: 3,
scaleSpacing: 7,
fps: 60,
zoom: 2
};
class TimeLine {
constructor(id, { fill = false, textColor = '#ffffff', pointColor = '#ffffff', areaColor = '#ffffff55', centerTimePointColor = '#00aeec', centerTimePointWidth = 3, spacing = 5, }) {
constructor(id, options) {
_TimeLine_event.set(this, void 0);
_TimeLine_timeSpacingMap.set(this, void 0);
_TimeLine_timeSpacing.set(this, void 0);
_TimeLine_pointHeight.set(this, void 0);
_TimeLine_scaleHeight.set(this, void 0);
_TimeLine_isDraging.set(this, void 0);

@@ -970,70 +865,75 @@ if (!id) {

this.canvasContext = this.$canvas.getContext('2d');
const { fill, width, height, bgColor, textColor, scaleColor, areaBgColor, pointColor, pointWidth, scaleSpacing, fps, zoom } = Object.assign(Object.assign({}, defaultOptions), options);
if (zoom < 1 || zoom > 9 || zoom % 1 !== 0) {
throw new Error('zoom must be 1 ~ 9, and must be an integer');
}
if (fill) {
const $canvasParent = this.$canvas.parentElement;
if ($canvasParent) {
this.$canvas.width = $canvasParent.clientWidth;
this.$canvas.height = $canvasParent.clientHeight;
const parentResizeObserver = new ResizeObserver(lodash_throttle(this._onParentResize.bind(this), 200));
parentResizeObserver.observe($canvasParent);
}
this.$canvas.width = $canvasParent.clientWidth;
this.$canvas.height = $canvasParent.clientHeight;
const parentResizeObserver = new ResizeObserver(lodash_throttle(this._onParentResize.bind(this), 200));
parentResizeObserver.observe($canvasParent);
}
else {
if (width)
this.$canvas.width = width;
if (height)
this.$canvas.height = height;
}
__classPrivateFieldSet(this, _TimeLine_isDraging, false, "f");
__classPrivateFieldSet(this, _TimeLine_event, new ZnuEvent(), "f");
this.startTime = 0;
this.endTime = 0;
this.currentTime = 0;
__classPrivateFieldSet(this, _TimeLine_timeSpacingMap, [5, 10, 30, 60, 120, 300], "f");
__classPrivateFieldSet(this, _TimeLine_timeSpacing, 30, "f");
this.spacing = spacing;
__classPrivateFieldSet(this, _TimeLine_pointHeight, {
hour1: this.$canvas.height / 2,
minute30: this.$canvas.height / 3,
minute10: this.$canvas.height / 4,
minute1: this.$canvas.height / 5,
second10: this.$canvas.height / 8,
second5: this.$canvas.height / 10,
__classPrivateFieldSet(this, _TimeLine_timeSpacingMap, [1, 10, 30, 60, 120, 300, 7200, 86400, 604800], "f");
__classPrivateFieldSet(this, _TimeLine_timeSpacing, __classPrivateFieldGet(this, _TimeLine_timeSpacingMap, "f")[zoom - 1], "f");
this.scaleSpacing = scaleSpacing;
__classPrivateFieldSet(this, _TimeLine_scaleHeight, {
height6: this.$canvas.height / 2,
height5: this.$canvas.height / 3,
height4: this.$canvas.height / 4,
height3: this.$canvas.height / 5,
height2: this.$canvas.height / 8,
height1: this.$canvas.height / 10,
}, "f");
this.centerTimePointWidth = centerTimePointWidth;
this.centerTimePointColor = centerTimePointColor;
this.bgColor = bgColor;
this.pointWidth = pointWidth;
this.pointColor = pointColor;
this.textColor = textColor;
this.pointColor = pointColor;
this.areaColor = areaColor;
this.scaleColor = scaleColor;
this.areaBgColor = areaBgColor;
this.fps = fps;
}
draw({ startTime, endTime, currentTime, areas, _privateFlag }) {
if (!startTime || !endTime) {
throw new Error('startTime and endTime is required!');
}
draw({ currentTime = 0, areas, _privateFlag } = {}) {
if (__classPrivateFieldGet(this, _TimeLine_isDraging, "f") && !_privateFlag) {
return;
}
this.currentTime = currentTime || Math.floor(Date.now() / 1000);
this.areas = areas || [];
const screenScaleCount = Math.ceil(this.$canvas.width / this.scaleSpacing);
const screenSecondCount = screenScaleCount * __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f");
const startTime = this.currentTime - screenSecondCount / 2;
const endTime = this.currentTime + screenSecondCount / 2;
const xCenterPoint = this.$canvas.width / 2;
const timePerPixel = screenSecondCount / this.$canvas.width;
this.clear();
this.startTime = startTime;
this.endTime = endTime;
this.currentTime = currentTime || this.startTime;
this.areas = areas || [];
this.drawArea(0, 0, this.$canvas.width, this.$canvas.height, this.bgColor);
this.areas.forEach(item => {
this.drawArea(item.startTime, item.endTime, item.bgColor);
const startX = item.startTime < startTime ? 0 : Math.floor((item.startTime - startTime) / timePerPixel);
const endX = item.endTime > endTime ? this.$canvas.width : Math.floor((item.endTime - startTime) / timePerPixel);
this.drawArea(startX, 0, endX, this.$canvas.height, item.bgColor || this.areaBgColor);
});
const halfScreenPointCount = Math.ceil(this.$canvas.width / this.spacing / 2);
const _beforePointCount = Math.ceil((this.currentTime - this.startTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f"));
const _afterPointCount = Math.ceil((this.endTime - this.currentTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f"));
const beforePointCount = _beforePointCount < halfScreenPointCount ? _beforePointCount : halfScreenPointCount;
const afterPointCount = _afterPointCount < halfScreenPointCount ? _afterPointCount : halfScreenPointCount;
const centerTimePoint = this.$canvas.width / 2 - this.centerTimePointWidth / 2;
const xOffset = this.currentTime % this.spacing;
const timeOffset = this.currentTime % __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f");
drawHelper.bind(this)({
beforePointCount,
afterPointCount,
centerTimePoint,
xOffset,
timeOffset,
pointWidth: this.pointWidth,
timePerPixel,
scaleHeight: __classPrivateFieldGet(this, _TimeLine_scaleHeight, "f"),
scaleSpacing: this.scaleSpacing,
timeSpacing: __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f"),
pointHeight: __classPrivateFieldGet(this, _TimeLine_pointHeight, "f"),
spacing: this.spacing,
currentTime: this.currentTime,
screenScaleCount,
startTime,
drawLine: this.drawLine.bind(this),
drawText: this.drawText.bind(this),
drawTimelineScale: this.drawTimelineScale.bind(this),
});
this.drawLine(centerTimePoint, this.$canvas.height, this.centerTimePointWidth, this.centerTimePointColor);
this.drawLine(xCenterPoint - this.pointWidth / 2, this.$canvas.height, this.pointWidth, this.pointColor);
this.drawArea(xCenterPoint - 52, 5, xCenterPoint + 52, 25, this.pointColor);
this.drawText(xCenterPoint - 50, 20, `${dateTime(this.currentTime, 'YYYY/MM/DD HH:mm:ss')}`);
this.$canvas.onwheel = this._onZoom.bind(this);

@@ -1045,20 +945,12 @@ this.$canvas.onmousedown = this._onDrag.bind(this);

let prexOffset = 0;
document.onmousemove = lodash_throttle((emoveEvent) => {
const curxOffset = emoveEvent.clientX - clientX;
if (curxOffset < 0 && this.currentTime >= this.endTime) {
return;
}
if (curxOffset > 0 && this.currentTime <= this.startTime) {
return;
}
const currentTime = this.currentTime - __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f") / this.spacing * (curxOffset - prexOffset);
document.onmousemove = lodash_throttle((moveEvent) => {
const curxOffset = moveEvent.clientX - clientX;
const currentTime = this.currentTime - __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f") / this.scaleSpacing * (curxOffset - prexOffset);
prexOffset = curxOffset;
this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: Math.floor(currentTime),
currentTime: Math.round(currentTime),
areas: this.areas,
_privateFlag: true,
});
}, 40);
}, __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f") === 1 ? 100 : 1000 / this.fps);
document.onmouseup = () => {

@@ -1077,4 +969,2 @@ document.onmousemove = null;

this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: this.currentTime,

@@ -1088,4 +978,2 @@ areas: this.areas,

this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: this.currentTime,

@@ -1104,13 +992,11 @@ areas: this.areas,

this.$canvas.height = $canvasParent.clientHeight;
__classPrivateFieldSet(this, _TimeLine_pointHeight, {
hour1: this.$canvas.height / 2,
minute30: this.$canvas.height / 3,
minute10: this.$canvas.height / 4,
minute1: this.$canvas.height / 5,
second10: this.$canvas.height / 8,
second5: this.$canvas.height / 10,
__classPrivateFieldSet(this, _TimeLine_scaleHeight, {
height6: this.$canvas.height / 2,
height5: this.$canvas.height / 3,
height4: this.$canvas.height / 4,
height3: this.$canvas.height / 5,
height2: this.$canvas.height / 8,
height1: this.$canvas.height / 10,
}, "f");
this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: this.currentTime,

@@ -1129,4 +1015,60 @@ areas: this.areas,

}
drawLine(x, y, width = 1, color = this.pointColor) {
drawTimelineScale(timespacing) {
switch (timespacing) {
case 1:
this.drawText(25, 12, `1s`);
break;
case 10:
this.drawText(25, 12, `10s`);
break;
case 30:
this.drawText(25, 12, `30s`);
break;
case 60:
this.drawText(25, 12, `1min`);
break;
case 120:
this.drawText(25, 12, `2min`);
break;
case 300:
this.drawText(25, 12, `5min`);
break;
case 7200:
this.drawText(25, 12, `1hour`);
break;
case 86400:
this.drawText(25, 12, `1day`);
break;
case 604800:
this.drawText(25, 12, `1week`);
break;
}
this.drawLine(0, 0);
this.canvasContext.beginPath();
this.canvasContext.moveTo(5, 5);
this.canvasContext.lineTo(5, 10);
this.canvasContext.stroke();
this.canvasContext.strokeStyle = this.scaleColor;
this.canvasContext.lineWidth = 1;
this.canvasContext.stroke();
this.canvasContext.closePath();
this.canvasContext.beginPath();
this.canvasContext.moveTo(4, 10);
this.canvasContext.lineTo(20, 10);
this.canvasContext.stroke();
this.canvasContext.strokeStyle = this.scaleColor;
this.canvasContext.lineWidth = 1;
this.canvasContext.stroke();
this.canvasContext.closePath();
this.canvasContext.beginPath();
this.canvasContext.moveTo(20, 11);
this.canvasContext.lineTo(20, 5);
this.canvasContext.stroke();
this.canvasContext.strokeStyle = this.scaleColor;
this.canvasContext.lineWidth = 1;
this.canvasContext.stroke();
this.canvasContext.closePath();
}
drawLine(x, y, width = 1, color = this.scaleColor) {
this.canvasContext.beginPath();
this.canvasContext.moveTo(x, this.$canvas.height);

@@ -1143,13 +1085,10 @@ this.canvasContext.lineTo(x, this.$canvas.height - y);

this.canvasContext.fillStyle = color;
this.canvasContext.font = '12px';
this.canvasContext.fillText(text, x, y);
this.canvasContext.closePath();
}
drawArea(startTime, endTime, bgColor) {
const centerTimePoint = this.$canvas.width / 2 - this.centerTimePointWidth / 2;
const xOffset = this.currentTime % this.spacing;
const startX = (centerTimePoint - xOffset) + Math.floor((startTime - this.currentTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f")) * this.spacing;
const endX = (centerTimePoint - xOffset) + Math.floor((endTime - this.currentTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f")) * this.spacing;
drawArea(startX, startY, endX, endY, bgColor) {
this.canvasContext.beginPath();
this.canvasContext.rect(startX, 0, endX - startX, this.$canvas.height);
this.canvasContext.fillStyle = bgColor || this.areaColor;
this.canvasContext.rect(startX, startY, endX - startX, endY - startY);
this.canvasContext.fillStyle = bgColor;
this.canvasContext.fill();

@@ -1168,4 +1107,4 @@ this.canvasContext.closePath();

}
_TimeLine_event = new WeakMap(), _TimeLine_timeSpacingMap = new WeakMap(), _TimeLine_timeSpacing = new WeakMap(), _TimeLine_pointHeight = new WeakMap(), _TimeLine_isDraging = new WeakMap();
_TimeLine_event = new WeakMap(), _TimeLine_timeSpacingMap = new WeakMap(), _TimeLine_timeSpacing = new WeakMap(), _TimeLine_scaleHeight = new WeakMap(), _TimeLine_isDraging = new WeakMap();
module.exports = TimeLine;

4

lib/timeline.cjs.min.js

@@ -15,3 +15,3 @@ "use strict";

PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function t(t,e,i,n){if("a"===i&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(t):n?n.value:e.get(t)}function e(t,e,i,n,r){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?r.call(t,i):r?r.value=i:e.set(t,i),i
***************************************************************************** */function t(t,e,i,n){if("a"===i&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(t):n?n.value:e.get(t)}function e(t,e,i,n,s){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?s.call(t,i):s?s.value=i:e.set(t,i),i
/*!

@@ -36,3 +36,3 @@ * znu-event v0.0.10

PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */}function i(t){var e="function"==typeof Symbol&&Symbol.iterator,i=e&&t[e],n=0;if(i)return i.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function n(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,r,s=i.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(n=s.next()).done;)o.push(n.value)}catch(t){r={error:t}}finally{try{n&&!n.done&&(i=s.return)&&i.call(s)}finally{if(r)throw r.error}}return o}function r(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(n(arguments[e]));return t}var s=function(){function t(){this._listenersMap={}}return t.prototype.on=function(t,e){return void 0===this._listenersMap[t]&&(this._listenersMap[t]=[]),this._listenersMap[t].push(e),this},t.prototype.once=function(t,e){return e.isOnce=!0,this.on(t,e),this},t.prototype.off=function(t,e){var i=this._listenersMap[t];if(void 0!==i)if(void 0===e)delete this._listenersMap[t];else{var n=i.findIndex((function(t){return t===e}));i.splice(n,1)}return this},t.prototype.offAll=function(){this._listenersMap={}},t.prototype.emit=function(t){for(var e,s,o=[],a=1;a<arguments.length;a++)o[a-1]=arguments[a];var h=this._listenersMap[t];if(void 0!==h&&h.length>0){try{for(var u=i(h.entries()),c=u.next();!c.done;c=u.next()){var f=n(c.value,2),l=f[0],d=f[1];if(d.isOnce){var m=d;h.splice(l,1),m.apply(void 0,r(o))}else d.apply(void 0,r(o))}}catch(t){e={error:t}}finally{try{c&&!c.done&&(s=u.return)&&s.call(u)}finally{if(e)throw e.error}}return!0}return!1},t.prototype.has=function(t){return void 0!==this._listenersMap[t]&&this._listenersMap[t].length>0},t.prototype.eventNames=function(){var t=[];for(var e in this._listenersMap)t.push(e);return t},t.prototype.destroy=function(){this.offAll()},t}(),o="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},a=/^\s+|\s+$/g,h=/^[-+]0x[0-9a-f]+$/i,u=/^0b[01]+$/i,c=/^0o[0-7]+$/i,f=parseInt,l="object"==typeof o&&o&&o.Object===Object&&o,d="object"==typeof self&&self&&self.Object===Object&&self,m=l||d||Function("return this")(),v=Object.prototype.toString,$=Math.max,p=Math.min,g=function(){return m.Date.now()};function T(t,e,i){var n,r,s,o,a,h,u=0,c=!1,f=!1,l=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function d(e){var i=n,s=r;return n=r=void 0,u=e,o=t.apply(s,i)}function m(t){return u=t,a=setTimeout(T,e),c?d(t):o}function v(t){var i=t-h;return void 0===h||i>=e||i<0||f&&t-u>=s}function T(){var t=g();if(v(t))return M(t);a=setTimeout(T,function(t){var i=e-(t-h);return f?p(i,s-(t-u)):i}(t))}function M(t){return a=void 0,l&&n?d(t):(n=r=void 0,o)}function b(){var t=g(),i=v(t);if(n=arguments,r=this,h=t,i){if(void 0===a)return m(h);if(f)return a=setTimeout(T,e),d(h)}return void 0===a&&(a=setTimeout(T,e)),o}return e=w(e)||0,y(i)&&(c=!!i.leading,s=(f="maxWait"in i)?$(w(i.maxWait)||0,e):s,l="trailing"in i?!!i.trailing:l),b.cancel=function(){void 0!==a&&clearTimeout(a),u=0,n=h=r=a=void 0},b.flush=function(){return void 0===a?o:M(g())},b}function y(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function w(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==v.call(t)}(t))return NaN;if(y(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=y(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=u.test(t);return i||c.test(t)?f(t.slice(2),i?2:8):h.test(t)?NaN:+t}var M=function(t,e,i){var n=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return y(i)&&(n="leading"in i?!!i.leading:n,r="trailing"in i?!!i.trailing:r),T(t,e,{leading:n,maxWait:e,trailing:r})},b={exports:{}},x=b.exports=function(){var t=1e3,e=6e4,i=36e5,n="millisecond",r="second",s="minute",o="hour",a="day",h="week",u="month",c="quarter",f="year",l="date",d="Invalid Date",m=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,v=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,$={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},p=function(t,e,i){var n=String(t);return!n||n.length>=e?t:""+Array(e+1-n.length).join(i)+t},g={s:p,z:function(t){var e=-t.utcOffset(),i=Math.abs(e),n=Math.floor(i/60),r=i%60;return(e<=0?"+":"-")+p(n,2,"0")+":"+p(r,2,"0")},m:function t(e,i){if(e.date()<i.date())return-t(i,e);var n=12*(i.year()-e.year())+(i.month()-e.month()),r=e.clone().add(n,u),s=i-r<0,o=e.clone().add(n+(s?-1:1),u);return+(-(n+(i-r)/(s?r-o:o-r))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:u,y:f,w:h,d:a,D:l,h:o,m:s,s:r,ms:n,Q:c}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},T="en",y={};y[T]=$;var w=function(t){return t instanceof C},M=function t(e,i,n){var r;if(!e)return T;if("string"==typeof e){var s=e.toLowerCase();y[s]&&(r=s),i&&(y[s]=i,r=s);var o=e.split("-");if(!r&&o.length>1)return t(o[0])}else{var a=e.name;y[a]=e,r=a}return!n&&r&&(T=r),r||!n&&T},b=function(t,e){if(w(t))return t.clone();var i="object"==typeof e?e:{};return i.date=t,i.args=arguments,new C(i)},x=g;x.l=M,x.i=w,x.w=function(t,e){return b(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var C=function(){function $(t){this.$L=M(t.locale,null,!0),this.parse(t)}var p=$.prototype;return p.parse=function(t){this.$d=function(t){var e=t.date,i=t.utc;if(null===e)return new Date(NaN);if(x.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var n=e.match(m);if(n){var r=n[2]-1||0,s=(n[7]||"0").substring(0,3);return i?new Date(Date.UTC(n[1],r,n[3]||1,n[4]||0,n[5]||0,n[6]||0,s)):new Date(n[1],r,n[3]||1,n[4]||0,n[5]||0,n[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},p.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},p.$utils=function(){return x},p.isValid=function(){return!(this.$d.toString()===d)},p.isSame=function(t,e){var i=b(t);return this.startOf(e)<=i&&i<=this.endOf(e)},p.isAfter=function(t,e){return b(t)<this.startOf(e)},p.isBefore=function(t,e){return this.endOf(e)<b(t)},p.$g=function(t,e,i){return x.u(t)?this[e]:this.set(i,t)},p.unix=function(){return Math.floor(this.valueOf()/1e3)},p.valueOf=function(){return this.$d.getTime()},p.startOf=function(t,e){var i=this,n=!!x.u(e)||e,c=x.p(t),d=function(t,e){var r=x.w(i.$u?Date.UTC(i.$y,e,t):new Date(i.$y,e,t),i);return n?r:r.endOf(a)},m=function(t,e){return x.w(i.toDate()[t].apply(i.toDate("s"),(n?[0,0,0,0]:[23,59,59,999]).slice(e)),i)},v=this.$W,$=this.$M,p=this.$D,g="set"+(this.$u?"UTC":"");switch(c){case f:return n?d(1,0):d(31,11);case u:return n?d(1,$):d(0,$+1);case h:var T=this.$locale().weekStart||0,y=(v<T?v+7:v)-T;return d(n?p-y:p+(6-y),$);case a:case l:return m(g+"Hours",0);case o:return m(g+"Minutes",1);case s:return m(g+"Seconds",2);case r:return m(g+"Milliseconds",3);default:return this.clone()}},p.endOf=function(t){return this.startOf(t,!1)},p.$set=function(t,e){var i,h=x.p(t),c="set"+(this.$u?"UTC":""),d=(i={},i[a]=c+"Date",i[l]=c+"Date",i[u]=c+"Month",i[f]=c+"FullYear",i[o]=c+"Hours",i[s]=c+"Minutes",i[r]=c+"Seconds",i[n]=c+"Milliseconds",i)[h],m=h===a?this.$D+(e-this.$W):e;if(h===u||h===f){var v=this.clone().set(l,1);v.$d[d](m),v.init(),this.$d=v.set(l,Math.min(this.$D,v.daysInMonth())).$d}else d&&this.$d[d](m);return this.init(),this},p.set=function(t,e){return this.clone().$set(t,e)},p.get=function(t){return this[x.p(t)]()},p.add=function(n,c){var l,d=this;n=Number(n);var m=x.p(c),v=function(t){var e=b(d);return x.w(e.date(e.date()+Math.round(t*n)),d)};if(m===u)return this.set(u,this.$M+n);if(m===f)return this.set(f,this.$y+n);if(m===a)return v(1);if(m===h)return v(7);var $=(l={},l[s]=e,l[o]=i,l[r]=t,l)[m]||1,p=this.$d.getTime()+n*$;return x.w(p,this)},p.subtract=function(t,e){return this.add(-1*t,e)},p.format=function(t){var e=this,i=this.$locale();if(!this.isValid())return i.invalidDate||d;var n=t||"YYYY-MM-DDTHH:mm:ssZ",r=x.z(this),s=this.$H,o=this.$m,a=this.$M,h=i.weekdays,u=i.months,c=function(t,i,r,s){return t&&(t[i]||t(e,n))||r[i].slice(0,s)},f=function(t){return x.s(s%12||12,t,"0")},l=i.meridiem||function(t,e,i){var n=t<12?"AM":"PM";return i?n.toLowerCase():n},m={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:x.s(a+1,2,"0"),MMM:c(i.monthsShort,a,u,3),MMMM:c(u,a),D:this.$D,DD:x.s(this.$D,2,"0"),d:String(this.$W),dd:c(i.weekdaysMin,this.$W,h,2),ddd:c(i.weekdaysShort,this.$W,h,3),dddd:h[this.$W],H:String(s),HH:x.s(s,2,"0"),h:f(1),hh:f(2),a:l(s,o,!0),A:l(s,o,!1),m:String(o),mm:x.s(o,2,"0"),s:String(this.$s),ss:x.s(this.$s,2,"0"),SSS:x.s(this.$ms,3,"0"),Z:r};return n.replace(v,(function(t,e){return e||m[t]||r.replace(":","")}))},p.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},p.diff=function(n,l,d){var m,v=x.p(l),$=b(n),p=($.utcOffset()-this.utcOffset())*e,g=this-$,T=x.m(this,$);return T=(m={},m[f]=T/12,m[u]=T,m[c]=T/3,m[h]=(g-p)/6048e5,m[a]=(g-p)/864e5,m[o]=g/i,m[s]=g/e,m[r]=g/t,m)[v]||g,d?T:x.a(T)},p.daysInMonth=function(){return this.endOf(u).$D},p.$locale=function(){return y[this.$L]},p.locale=function(t,e){if(!t)return this.$L;var i=this.clone(),n=M(t,e,!0);return n&&(i.$L=n),i},p.clone=function(){return x.w(this.$d,this)},p.toDate=function(){return new Date(this.valueOf())},p.toJSON=function(){return this.isValid()?this.toISOString():null},p.toISOString=function(){return this.$d.toISOString()},p.toString=function(){return this.$d.toUTCString()},$}(),H=C.prototype;return b.prototype=H,[["$ms",n],["$s",r],["$m",s],["$H",o],["$W",a],["$M",u],["$y",f],["$D",l]].forEach((function(t){H[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),b.extend=function(t,e){return t.$i||(t(e,C,b),t.$i=!0),b},b.locale=M,b.isDayjs=w,b.unix=function(t){return b(1e3*t)},b.en=y[T],b.Ls=y,b.p={},b}();const C=(t,e="MM/DD HH:mm")=>x(1e3*t).format(e);function H({beforePointCount:t,afterPointCount:e,centerTimePoint:i,xOffset:n,timeOffset:r,timeSpacing:s,pointHeight:o,spacing:a,currentTime:h,drawLine:u,drawText:c}){if(5!==s)if(10!==s)if(30!==s)if(60!==s)if(120!==s)if(300!==s);else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0&&f%300!=0||u(t,o.second5):u(t,o.minute10):(u(t,o.hour1),c(t-15,20,`${C(f,"HH:mm")}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0&&f%300!=0||u(e,o.second5):u(e,o.minute10):(u(e,o.hour1),c(e-15,20,`${C(f,"HH:mm")}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0||u(t,o.second5):u(t,o.minute1):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0||u(e,o.second5):u(e,o.minute1):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%300!=0?f%60!=0||u(t,o.second5):u(t,o.minute1):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%300!=0?f%60!=0||u(e,o.second5):u(e,o.minute1):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0?f%30!=0||u(t,o.second5):u(t,o.minute1):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0?f%30!=0||u(e,o.second5):u(e,o.minute1):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%10!=0||u(t,o.second5):(u(t,o.minute1),f%120==0&&c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%10!=0||u(e,o.second5):(u(e,o.minute1),f%120==0&&c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%5!=0||u(t,o.second5):(u(t,o.minute1),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%5!=0||u(e,o.second5):(u(e,o.minute1),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}}var S,D,_,O,P;S=new WeakMap,D=new WeakMap,_=new WeakMap,O=new WeakMap,P=new WeakMap,module.exports=class{constructor(t,{fill:i=!1,textColor:n="#ffffff",pointColor:r="#ffffff",areaColor:o="#ffffff55",centerTimePointColor:a="#00aeec",centerTimePointWidth:h=3,spacing:u=5}){if(S.set(this,void 0),D.set(this,void 0),_.set(this,void 0),O.set(this,void 0),P.set(this,void 0),!t)throw new Error("canvas id is required!");if(this.$canvas=document.getElementById(t),this.canvasContext=this.$canvas.getContext("2d"),i){const t=this.$canvas.parentElement;if(t){this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight;new ResizeObserver(M(this._onParentResize.bind(this),200)).observe(t)}}e(this,P,!1,"f"),e(this,S,new s,"f"),this.startTime=0,this.endTime=0,this.currentTime=0,e(this,D,[5,10,30,60,120,300],"f"),e(this,_,30,"f"),this.spacing=u,e(this,O,{hour1:this.$canvas.height/2,minute30:this.$canvas.height/3,minute10:this.$canvas.height/4,minute1:this.$canvas.height/5,second10:this.$canvas.height/8,second5:this.$canvas.height/10},"f"),this.centerTimePointWidth=h,this.centerTimePointColor=a,this.textColor=n,this.pointColor=r,this.areaColor=o}draw({startTime:e,endTime:i,currentTime:n,areas:r,_privateFlag:s}){if(!e||!i)throw new Error("startTime and endTime is required!");if(t(this,P,"f")&&!s)return;this.clear(),this.startTime=e,this.endTime=i,this.currentTime=n||this.startTime,this.areas=r||[],this.areas.forEach((t=>{this.drawArea(t.startTime,t.endTime,t.bgColor)}));const o=Math.ceil(this.$canvas.width/this.spacing/2),a=Math.ceil((this.currentTime-this.startTime)/t(this,_,"f")),h=Math.ceil((this.endTime-this.currentTime)/t(this,_,"f")),u=a<o?a:o,c=h<o?h:o,f=this.$canvas.width/2-this.centerTimePointWidth/2,l=this.currentTime%this.spacing,d=this.currentTime%t(this,_,"f");H.bind(this)({beforePointCount:u,afterPointCount:c,centerTimePoint:f,xOffset:l,timeOffset:d,timeSpacing:t(this,_,"f"),pointHeight:t(this,O,"f"),spacing:this.spacing,currentTime:this.currentTime,drawLine:this.drawLine.bind(this),drawText:this.drawText.bind(this)}),this.drawLine(f,this.$canvas.height,this.centerTimePointWidth,this.centerTimePointColor),this.$canvas.onwheel=this._onZoom.bind(this),this.$canvas.onmousedown=this._onDrag.bind(this)}_onDrag({clientX:i}){e(this,P,!0,"f");let n=0;document.onmousemove=M((e=>{const r=e.clientX-i;if(r<0&&this.currentTime>=this.endTime)return;if(r>0&&this.currentTime<=this.startTime)return;const s=this.currentTime-t(this,_,"f")/this.spacing*(r-n);n=r,this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:Math.floor(s),areas:this.areas,_privateFlag:!0})}),40),document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,e(this,P,!1,"f"),this.emit("timeUpdate",this.currentTime)}}_onZoom(i){i.preventDefault();const n=t(this,D,"f").findIndex((e=>e===t(this,_,"f")));i.deltaY<0&&n>0?(e(this,_,t(this,D,"f")[n-1],"f"),this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:this.currentTime,areas:this.areas,_privateFlag:!0})):i.deltaY>0&&n<t(this,D,"f").length-1&&(e(this,_,t(this,D,"f")[n+1],"f"),this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:this.currentTime,areas:this.areas,_privateFlag:!0}))}_onParentResize(){const t=this.$canvas.parentNode;t&&(this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight,e(this,O,{hour1:this.$canvas.height/2,minute30:this.$canvas.height/3,minute10:this.$canvas.height/4,minute1:this.$canvas.height/5,second10:this.$canvas.height/8,second5:this.$canvas.height/10},"f"),this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:this.currentTime,areas:this.areas}))}clear(){this.canvasContext&&this.canvasContext.clearRect(0,0,this.$canvas.width,this.$canvas.height),this.$canvas&&(this.$canvas.onwheel=null,this.$canvas.onmousedown=null)}drawLine(t,e,i=1,n=this.pointColor){this.canvasContext.beginPath(),this.canvasContext.moveTo(t,this.$canvas.height),this.canvasContext.lineTo(t,this.$canvas.height-e),this.canvasContext.stroke(),this.canvasContext.strokeStyle=n,this.canvasContext.lineWidth=i,this.canvasContext.stroke(),this.canvasContext.closePath()}drawText(t,e,i,n=this.textColor){this.canvasContext.beginPath(),this.canvasContext.fillStyle=n,this.canvasContext.fillText(i,t,e),this.canvasContext.closePath()}drawArea(e,i,n){const r=this.$canvas.width/2-this.centerTimePointWidth/2,s=this.currentTime%this.spacing,o=r-s+Math.floor((e-this.currentTime)/t(this,_,"f"))*this.spacing,a=r-s+Math.floor((i-this.currentTime)/t(this,_,"f"))*this.spacing;this.canvasContext.beginPath(),this.canvasContext.rect(o,0,a-o,this.$canvas.height),this.canvasContext.fillStyle=n||this.areaColor,this.canvasContext.fill(),this.canvasContext.closePath()}on(e,i){t(this,S,"f").on(e,i)}off(e,i){t(this,S,"f").off(e,i)}emit(...e){t(this,S,"f").emit(...e)}};
***************************************************************************** */}function i(t){var e="function"==typeof Symbol&&Symbol.iterator,i=e&&t[e],n=0;if(i)return i.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function n(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,s,r=i.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(n=r.next()).done;)a.push(n.value)}catch(t){s={error:t}}finally{try{n&&!n.done&&(i=r.return)&&i.call(r)}finally{if(s)throw s.error}}return a}function s(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(n(arguments[e]));return t}var r=function(){function t(){this._listenersMap={}}return t.prototype.on=function(t,e){return void 0===this._listenersMap[t]&&(this._listenersMap[t]=[]),this._listenersMap[t].push(e),this},t.prototype.once=function(t,e){return e.isOnce=!0,this.on(t,e),this},t.prototype.off=function(t,e){var i=this._listenersMap[t];if(void 0!==i)if(void 0===e)delete this._listenersMap[t];else{var n=i.findIndex((function(t){return t===e}));i.splice(n,1)}return this},t.prototype.offAll=function(){this._listenersMap={}},t.prototype.emit=function(t){for(var e,r,a=[],o=1;o<arguments.length;o++)a[o-1]=arguments[o];var h=this._listenersMap[t];if(void 0!==h&&h.length>0){try{for(var c=i(h.entries()),l=c.next();!l.done;l=c.next()){var u=n(l.value,2),f=u[0],d=u[1];if(d.isOnce){var v=d;h.splice(f,1),v.apply(void 0,s(a))}else d.apply(void 0,s(a))}}catch(t){e={error:t}}finally{try{l&&!l.done&&(r=c.return)&&r.call(c)}finally{if(e)throw e.error}}return!0}return!1},t.prototype.has=function(t){return void 0!==this._listenersMap[t]&&this._listenersMap[t].length>0},t.prototype.eventNames=function(){var t=[];for(var e in this._listenersMap)t.push(e);return t},t.prototype.destroy=function(){this.offAll()},t}(),a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},o=/^\s+|\s+$/g,h=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt,f="object"==typeof a&&a&&a.Object===Object&&a,d="object"==typeof self&&self&&self.Object===Object&&self,v=f||d||Function("return this")(),g=Object.prototype.toString,m=Math.max,p=Math.min,$=function(){return v.Date.now()};function w(t,e,i){var n,s,r,a,o,h,c=0,l=!1,u=!1,f=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function d(e){var i=n,r=s;return n=s=void 0,c=e,a=t.apply(r,i)}function v(t){return c=t,o=setTimeout(w,e),l?d(t):a}function g(t){var i=t-h;return void 0===h||i>=e||i<0||u&&t-c>=r}function w(){var t=$();if(g(t))return M(t);o=setTimeout(w,function(t){var i=e-(t-h);return u?p(i,r-(t-c)):i}(t))}function M(t){return o=void 0,f&&n?d(t):(n=s=void 0,a)}function C(){var t=$(),i=g(t);if(n=arguments,s=this,h=t,i){if(void 0===o)return v(h);if(u)return o=setTimeout(w,e),d(h)}return void 0===o&&(o=setTimeout(w,e)),a}return e=x(e)||0,y(i)&&(l=!!i.leading,r=(u="maxWait"in i)?m(x(i.maxWait)||0,e):r,f="trailing"in i?!!i.trailing:f),C.cancel=function(){void 0!==o&&clearTimeout(o),c=0,n=h=s=o=void 0},C.flush=function(){return void 0===o?a:M($())},C}function y(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function x(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==g.call(t)}(t))return NaN;if(y(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=y(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(o,"");var i=c.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):h.test(t)?NaN:+t}var M=function(t,e,i){var n=!0,s=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return y(i)&&(n="leading"in i?!!i.leading:n,s="trailing"in i?!!i.trailing:s),w(t,e,{leading:n,maxWait:e,trailing:s})},C={exports:{}},T=C.exports=function(){var t=1e3,e=6e4,i=36e5,n="millisecond",s="second",r="minute",a="hour",o="day",h="week",c="month",l="quarter",u="year",f="date",d="Invalid Date",v=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,g=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,m={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},p=function(t,e,i){var n=String(t);return!n||n.length>=e?t:""+Array(e+1-n.length).join(i)+t},$={s:p,z:function(t){var e=-t.utcOffset(),i=Math.abs(e),n=Math.floor(i/60),s=i%60;return(e<=0?"+":"-")+p(n,2,"0")+":"+p(s,2,"0")},m:function t(e,i){if(e.date()<i.date())return-t(i,e);var n=12*(i.year()-e.year())+(i.month()-e.month()),s=e.clone().add(n,c),r=i-s<0,a=e.clone().add(n+(r?-1:1),c);return+(-(n+(i-s)/(r?s-a:a-s))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:c,y:u,w:h,d:o,D:f,h:a,m:r,s:s,ms:n,Q:l}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},w="en",y={};y[w]=m;var x=function(t){return t instanceof b},M=function t(e,i,n){var s;if(!e)return w;if("string"==typeof e){var r=e.toLowerCase();y[r]&&(s=r),i&&(y[r]=i,s=r);var a=e.split("-");if(!s&&a.length>1)return t(a[0])}else{var o=e.name;y[o]=e,s=o}return!n&&s&&(w=s),s||!n&&w},C=function(t,e){if(x(t))return t.clone();var i="object"==typeof e?e:{};return i.date=t,i.args=arguments,new b(i)},T=$;T.l=M,T.i=x,T.w=function(t,e){return C(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var b=function(){function m(t){this.$L=M(t.locale,null,!0),this.parse(t)}var p=m.prototype;return p.parse=function(t){this.$d=function(t){var e=t.date,i=t.utc;if(null===e)return new Date(NaN);if(T.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var n=e.match(v);if(n){var s=n[2]-1||0,r=(n[7]||"0").substring(0,3);return i?new Date(Date.UTC(n[1],s,n[3]||1,n[4]||0,n[5]||0,n[6]||0,r)):new Date(n[1],s,n[3]||1,n[4]||0,n[5]||0,n[6]||0,r)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},p.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},p.$utils=function(){return T},p.isValid=function(){return!(this.$d.toString()===d)},p.isSame=function(t,e){var i=C(t);return this.startOf(e)<=i&&i<=this.endOf(e)},p.isAfter=function(t,e){return C(t)<this.startOf(e)},p.isBefore=function(t,e){return this.endOf(e)<C(t)},p.$g=function(t,e,i){return T.u(t)?this[e]:this.set(i,t)},p.unix=function(){return Math.floor(this.valueOf()/1e3)},p.valueOf=function(){return this.$d.getTime()},p.startOf=function(t,e){var i=this,n=!!T.u(e)||e,l=T.p(t),d=function(t,e){var s=T.w(i.$u?Date.UTC(i.$y,e,t):new Date(i.$y,e,t),i);return n?s:s.endOf(o)},v=function(t,e){return T.w(i.toDate()[t].apply(i.toDate("s"),(n?[0,0,0,0]:[23,59,59,999]).slice(e)),i)},g=this.$W,m=this.$M,p=this.$D,$="set"+(this.$u?"UTC":"");switch(l){case u:return n?d(1,0):d(31,11);case c:return n?d(1,m):d(0,m+1);case h:var w=this.$locale().weekStart||0,y=(g<w?g+7:g)-w;return d(n?p-y:p+(6-y),m);case o:case f:return v($+"Hours",0);case a:return v($+"Minutes",1);case r:return v($+"Seconds",2);case s:return v($+"Milliseconds",3);default:return this.clone()}},p.endOf=function(t){return this.startOf(t,!1)},p.$set=function(t,e){var i,h=T.p(t),l="set"+(this.$u?"UTC":""),d=(i={},i[o]=l+"Date",i[f]=l+"Date",i[c]=l+"Month",i[u]=l+"FullYear",i[a]=l+"Hours",i[r]=l+"Minutes",i[s]=l+"Seconds",i[n]=l+"Milliseconds",i)[h],v=h===o?this.$D+(e-this.$W):e;if(h===c||h===u){var g=this.clone().set(f,1);g.$d[d](v),g.init(),this.$d=g.set(f,Math.min(this.$D,g.daysInMonth())).$d}else d&&this.$d[d](v);return this.init(),this},p.set=function(t,e){return this.clone().$set(t,e)},p.get=function(t){return this[T.p(t)]()},p.add=function(n,l){var f,d=this;n=Number(n);var v=T.p(l),g=function(t){var e=C(d);return T.w(e.date(e.date()+Math.round(t*n)),d)};if(v===c)return this.set(c,this.$M+n);if(v===u)return this.set(u,this.$y+n);if(v===o)return g(1);if(v===h)return g(7);var m=(f={},f[r]=e,f[a]=i,f[s]=t,f)[v]||1,p=this.$d.getTime()+n*m;return T.w(p,this)},p.subtract=function(t,e){return this.add(-1*t,e)},p.format=function(t){var e=this,i=this.$locale();if(!this.isValid())return i.invalidDate||d;var n=t||"YYYY-MM-DDTHH:mm:ssZ",s=T.z(this),r=this.$H,a=this.$m,o=this.$M,h=i.weekdays,c=i.months,l=function(t,i,s,r){return t&&(t[i]||t(e,n))||s[i].slice(0,r)},u=function(t){return T.s(r%12||12,t,"0")},f=i.meridiem||function(t,e,i){var n=t<12?"AM":"PM";return i?n.toLowerCase():n},v={YY:String(this.$y).slice(-2),YYYY:this.$y,M:o+1,MM:T.s(o+1,2,"0"),MMM:l(i.monthsShort,o,c,3),MMMM:l(c,o),D:this.$D,DD:T.s(this.$D,2,"0"),d:String(this.$W),dd:l(i.weekdaysMin,this.$W,h,2),ddd:l(i.weekdaysShort,this.$W,h,3),dddd:h[this.$W],H:String(r),HH:T.s(r,2,"0"),h:u(1),hh:u(2),a:f(r,a,!0),A:f(r,a,!1),m:String(a),mm:T.s(a,2,"0"),s:String(this.$s),ss:T.s(this.$s,2,"0"),SSS:T.s(this.$ms,3,"0"),Z:s};return n.replace(g,(function(t,e){return e||v[t]||s.replace(":","")}))},p.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},p.diff=function(n,f,d){var v,g=T.p(f),m=C(n),p=(m.utcOffset()-this.utcOffset())*e,$=this-m,w=T.m(this,m);return w=(v={},v[u]=w/12,v[c]=w,v[l]=w/3,v[h]=($-p)/6048e5,v[o]=($-p)/864e5,v[a]=$/i,v[r]=$/e,v[s]=$/t,v)[g]||$,d?w:T.a(w)},p.daysInMonth=function(){return this.endOf(c).$D},p.$locale=function(){return y[this.$L]},p.locale=function(t,e){if(!t)return this.$L;var i=this.clone(),n=M(t,e,!0);return n&&(i.$L=n),i},p.clone=function(){return T.w(this.$d,this)},p.toDate=function(){return new Date(this.valueOf())},p.toJSON=function(){return this.isValid()?this.toISOString():null},p.toISOString=function(){return this.$d.toISOString()},p.toString=function(){return this.$d.toUTCString()},m}(),S=b.prototype;return C.prototype=S,[["$ms",n],["$s",s],["$m",r],["$H",a],["$W",o],["$M",c],["$y",u],["$D",f]].forEach((function(t){S[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),C.extend=function(t,e){return t.$i||(t(e,b,C),t.$i=!0),C},C.locale=M,C.isDayjs=x,C.unix=function(t){return C(1e3*t)},C.en=y[w],C.Ls=y,C.p={},C}();const b=(t,e="MM/DD HH:mm")=>T(1e3*t).format(e);function S({pointWidth:t,timePerPixel:e,timeSpacing:i,screenScaleCount:n,scaleSpacing:s,scaleHeight:r,startTime:a,drawLine:o,drawText:h,drawTimelineScale:c}){if(c(i),1!==i)if(10!==i)if(30!==i)if(60!==i)if(120!==i)if(300!==i)if(7200!==i)if(86400!==i)if(604800!==i);else{const t=a-((t=Math.floor(Date.now()/1e3))=>{const e=1e3*t,i=T(e).year(),n=T(e).month(),s=T(e).date(),r=T(e).day(),a=new Date(i,n,s-r).getTime();return Math.floor(a/1e3)})(a),c=t/e,l=new Array(n).fill(!1),u=t=>{for(let e=t;e>t-7;e--)if(l[e])return!1;return!0};for(let e=0;e<n;e++){const n=e*s-c,f=Math.ceil(a+e*i-t);0===T(1e3*f).month()&&(T(1e3*f).date()>0||T(1e3*f).date()<=31)&&u(e)?(l[e]=!0,o(n,r.height5),h(n-30,40,`${b(f,"YYYY/MM/DD")}`)):0!==T(1e3*f).day()||o(n,r.height1)}}else{const c=b(a,"H:m:s").split(":"),l=(3600*+c[0]+60*+c[1]+ +c[2])%86400,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);"1"!==b(c,"D")?c%86400!=57600||o(n,r.height1):(o(n,r.height5),h(n-30,40,`${b(c,"YYYY/MM/DD")}`))}}else{const c=b(a,"H:m:s").split(":"),l=(3600*+c[0]+60*+c[1]+ +c[2])%7200,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);c%86400!=0?c%43200!=0?c%7200!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-30,40,`${b(c,"MM/DD HH:mm")}`))}}else{const c=b(a,"m:s").split(":"),l=(60*+c[0]+ +c[1])%300,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);c%3600!=0?c%1800!=0?c%300!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-30,40,`${b(c)}`))}}else{const c=b(a,"m:s").split(":"),l=(60*+c[0]+ +c[1])%120,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);c%1800!=0?c%600!=0?c%120!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-30,40,`${b(c)}`))}}else{const c=+b(a,"s")%60,l=c/e;for(let e=0;e<n;e++){const n=e*s-l-t/2,u=Math.ceil(a+e*i-c);u%3600!=0?u%300!=0?u%60!=0||o(n,r.height1):(o(n,r.height3),u%600==0&&h(n-15,40,`${b(u,"HH:mm")}`)):(o(n,r.height5),h(n-30,40,`${b(u)}`))}}else{const c=+b(a,"s")%30,l=c/e;for(let e=0;e<n;e++){const n=e*s-l-t/2,u=Math.ceil(a+e*i-c);u%300!=0?u%30!=0||o(n,r.height1):(o(n,r.height4),h(n-15,40,`${b(u,"HH:mm")}`))}}else{const c=+b(a,"s")%10,l=c/e;for(let e=0;e<n;e++){const n=e*s-l-t/2,u=Math.ceil(a+e*i-c);u%60!=0?u%10!=0||o(n,r.height1):(o(n,r.height4),h(n-15,40,`${b(u,"HH:mm")}`))}}else for(let e=0;e<n;e++){const n=e*s+t/2,c=Math.ceil(a+e*i);c%10!=0?c%5!=0?c%1!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-15,40,`${b(c,"HH:mm:ss")}`))}}var D,_,O,k,H;const W={fill:!1,bgColor:"rgba(0,0,0,0.5)",textColor:"#ffffff",scaleColor:"#ffffff",areaBgColor:"#ffffff55",pointColor:"#00aeec",pointWidth:3,scaleSpacing:7,fps:60,zoom:2};D=new WeakMap,_=new WeakMap,O=new WeakMap,k=new WeakMap,H=new WeakMap,module.exports=class{constructor(i,n){if(D.set(this,void 0),_.set(this,void 0),O.set(this,void 0),k.set(this,void 0),H.set(this,void 0),!i)throw new Error("canvas id is required!");this.$canvas=document.getElementById(i),this.canvasContext=this.$canvas.getContext("2d");const{fill:s,width:a,height:o,bgColor:h,textColor:c,scaleColor:l,areaBgColor:u,pointColor:f,pointWidth:d,scaleSpacing:v,fps:g,zoom:m}=Object.assign(Object.assign({},W),n);if(m<1||m>9||m%1!=0)throw new Error("zoom must be 1 ~ 9, and must be an integer");if(s){const t=this.$canvas.parentElement;this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight;new ResizeObserver(M(this._onParentResize.bind(this),200)).observe(t)}else a&&(this.$canvas.width=a),o&&(this.$canvas.height=o);e(this,H,!1,"f"),e(this,D,new r,"f"),this.currentTime=0,e(this,_,[1,10,30,60,120,300,7200,86400,604800],"f"),e(this,O,t(this,_,"f")[m-1],"f"),this.scaleSpacing=v,e(this,k,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10},"f"),this.bgColor=h,this.pointWidth=d,this.pointColor=f,this.textColor=c,this.scaleColor=l,this.areaBgColor=u,this.fps=g}draw({currentTime:e=0,areas:i,_privateFlag:n}={}){if(t(this,H,"f")&&!n)return;this.currentTime=e||Math.floor(Date.now()/1e3),this.areas=i||[];const s=Math.ceil(this.$canvas.width/this.scaleSpacing),r=s*t(this,O,"f"),a=this.currentTime-r/2,o=this.currentTime+r/2,h=this.$canvas.width/2,c=r/this.$canvas.width;this.clear(),this.drawArea(0,0,this.$canvas.width,this.$canvas.height,this.bgColor),this.areas.forEach((t=>{const e=t.startTime<a?0:Math.floor((t.startTime-a)/c),i=t.endTime>o?this.$canvas.width:Math.floor((t.endTime-a)/c);this.drawArea(e,0,i,this.$canvas.height,t.bgColor||this.areaBgColor)})),S.bind(this)({pointWidth:this.pointWidth,timePerPixel:c,scaleHeight:t(this,k,"f"),scaleSpacing:this.scaleSpacing,timeSpacing:t(this,O,"f"),screenScaleCount:s,startTime:a,drawLine:this.drawLine.bind(this),drawText:this.drawText.bind(this),drawTimelineScale:this.drawTimelineScale.bind(this)}),this.drawLine(h-this.pointWidth/2,this.$canvas.height,this.pointWidth,this.pointColor),this.drawArea(h-52,5,h+52,25,this.pointColor),this.drawText(h-50,20,`${b(this.currentTime,"YYYY/MM/DD HH:mm:ss")}`),this.$canvas.onwheel=this._onZoom.bind(this),this.$canvas.onmousedown=this._onDrag.bind(this)}_onDrag({clientX:i}){e(this,H,!0,"f");let n=0;document.onmousemove=M((e=>{const s=e.clientX-i,r=this.currentTime-t(this,O,"f")/this.scaleSpacing*(s-n);n=s,this.draw({currentTime:Math.round(r),areas:this.areas,_privateFlag:!0})}),1===t(this,O,"f")?100:1e3/this.fps),document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,e(this,H,!1,"f"),this.emit("timeUpdate",this.currentTime)}}_onZoom(i){i.preventDefault();const n=t(this,_,"f").findIndex((e=>e===t(this,O,"f")));i.deltaY<0&&n>0?(e(this,O,t(this,_,"f")[n-1],"f"),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0})):i.deltaY>0&&n<t(this,_,"f").length-1&&(e(this,O,t(this,_,"f")[n+1],"f"),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0}))}_onParentResize(){const t=this.$canvas.parentNode;t&&(this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight,e(this,k,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10},"f"),this.draw({currentTime:this.currentTime,areas:this.areas}))}clear(){this.canvasContext&&this.canvasContext.clearRect(0,0,this.$canvas.width,this.$canvas.height),this.$canvas&&(this.$canvas.onwheel=null,this.$canvas.onmousedown=null)}drawTimelineScale(t){switch(t){case 1:this.drawText(25,12,"1s");break;case 10:this.drawText(25,12,"10s");break;case 30:this.drawText(25,12,"30s");break;case 60:this.drawText(25,12,"1min");break;case 120:this.drawText(25,12,"2min");break;case 300:this.drawText(25,12,"5min");break;case 7200:this.drawText(25,12,"1hour");break;case 86400:this.drawText(25,12,"1day");break;case 604800:this.drawText(25,12,"1week")}this.drawLine(0,0),this.canvasContext.beginPath(),this.canvasContext.moveTo(5,5),this.canvasContext.lineTo(5,10),this.canvasContext.stroke(),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1,this.canvasContext.stroke(),this.canvasContext.closePath(),this.canvasContext.beginPath(),this.canvasContext.moveTo(4,10),this.canvasContext.lineTo(20,10),this.canvasContext.stroke(),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1,this.canvasContext.stroke(),this.canvasContext.closePath(),this.canvasContext.beginPath(),this.canvasContext.moveTo(20,11),this.canvasContext.lineTo(20,5),this.canvasContext.stroke(),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1,this.canvasContext.stroke(),this.canvasContext.closePath()}drawLine(t,e,i=1,n=this.scaleColor){this.canvasContext.beginPath(),this.canvasContext.moveTo(t,this.$canvas.height),this.canvasContext.lineTo(t,this.$canvas.height-e),this.canvasContext.stroke(),this.canvasContext.strokeStyle=n,this.canvasContext.lineWidth=i,this.canvasContext.stroke(),this.canvasContext.closePath()}drawText(t,e,i,n=this.textColor){this.canvasContext.beginPath(),this.canvasContext.fillStyle=n,this.canvasContext.font="12px",this.canvasContext.fillText(i,t,e),this.canvasContext.closePath()}drawArea(t,e,i,n,s){this.canvasContext.beginPath(),this.canvasContext.rect(t,e,i-t,n-e),this.canvasContext.fillStyle=s,this.canvasContext.fill(),this.canvasContext.closePath()}on(e,i){t(this,D,"f").on(e,i)}off(e,i){t(this,D,"f").off(e,i)}emit(...e){t(this,D,"f").emit(...e)}};
//# sourceMappingURL=timeline.cjs.min.js.map

605

lib/timeline.esm.js

@@ -620,60 +620,31 @@ /*! *****************************************************************************

};
const getWeekStartDate = (timestamp = Math.floor(Date.now() / 1000)) => {
const time = timestamp * 1000;
const year = dayjs(time).year();
const month = dayjs(time).month();
const date = dayjs(time).date();
const day = dayjs(time).day();
const weekStartDate = new Date(year, month, date - day).getTime();
return Math.floor(weekStartDate / 1000);
};
function drawHelper({ beforePointCount, afterPointCount, centerTimePoint, xOffset, timeOffset, timeSpacing, pointHeight, spacing, currentTime, drawLine, drawText }) {
if (timeSpacing === 5) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
function drawHelper({ pointWidth, timePerPixel, timeSpacing, screenScaleCount, scaleSpacing, scaleHeight, startTime, drawLine, drawText, drawTimelineScale, }) {
drawTimelineScale(timeSpacing);
if (timeSpacing === 1) {
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing + pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing);
if (time % 10 === 0) {
drawLine(x, scaleHeight.height5);
drawText(x - 15, 40, `${dateTime(time, 'HH:mm:ss')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 5 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height3);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
if (time % 1 === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 5 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}

@@ -683,267 +654,179 @@ return;

if (timeSpacing === 10) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
const timeOffset = +dateTime(startTime, 's') % 10;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 2) === 0) {
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
}
drawLine(x, scaleHeight.height4);
drawText(x - 15, 40, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 10 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height1);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 2) === 0) {
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
}
continue;
}
if (time % 10 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 30) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
const timeOffset = +dateTime(startTime, 's') % 30;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 5) === 0) {
drawLine(x, scaleHeight.height4);
drawText(x - 15, 40, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.minute1);
continue;
}
if (time % 30 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height1);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.minute1);
continue;
}
if (time % 30 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 60) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
const timeOffset = +dateTime(startTime, 's') % 60;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.minute1);
drawLine(x, scaleHeight.height3);
if (time % (60 * 10) === 0) {
drawText(x - 15, 40, `${dateTime(time, 'HH:mm')}`);
}
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.second5);
drawLine(x, scaleHeight.height1);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
continue;
}
return;
}
if (timeSpacing === 120) {
const timeArr = dateTime(startTime, 'm:s').split(':');
const timestamp = +timeArr[0] * 60 + +timeArr[1];
const timeOffset = timestamp % 120;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time)}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute10);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
drawLine(x, scaleHeight.height3);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 2) === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % 60 === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 120) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (timeSpacing === 300) {
const timeArr = dateTime(startTime, 'm:s').split(':');
const timestamp = +timeArr[0] * 60 + +timeArr[1];
const timeOffset = timestamp % 300;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time)}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
drawLine(x, scaleHeight.height3);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute1);
if (time % (60 * 5) === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 30, 20, `${dateTime(time)}`);
return;
}
if (timeSpacing === 7200) {
const timeArr = dateTime(startTime, 'H:m:s').split(':');
const timestamp = +timeArr[0] * 3600 + +timeArr[1] * 60 + +timeArr[2];
const timeOffset = timestamp % 7200;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (time % (3600 * 24) === 0) {
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time, 'MM/DD HH:mm')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute30);
drawText(x - 30, 20, `${dateTime(time)}`);
if (time % (3600 * 12) === 0) {
drawLine(x, scaleHeight.height3);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.minute1);
if (time % 7200 === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 2) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
return;
}
if (timeSpacing === 300) {
for (let i = 0; i < beforePointCount; i++) {
const x = centerTimePoint - i * spacing - xOffset;
const time = currentTime - i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
if (timeSpacing === 86400) {
const timeArr = dateTime(startTime, 'H:m:s').split(':');
const timestamp = +timeArr[0] * 3600 + +timeArr[1] * 60 + +timeArr[2];
const timeOffset = timestamp % 86400;
const xOffset = timeOffset / timePerPixel;
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset - pointWidth / 2;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (dateTime(time, 'D') === '1') {
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time, 'YYYY/MM/DD')}`);
continue;
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute10);
if (time % 86400 === 57600) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}
for (let i = 0; i < afterPointCount; i++) {
const x = centerTimePoint + i * spacing - xOffset;
const time = currentTime + i * timeSpacing - timeOffset;
if (time % (60 * 60) === 0) {
drawLine(x, pointHeight.hour1);
drawText(x - 15, 20, `${dateTime(time, 'HH:mm')}`);
continue;
return;
}
if (timeSpacing === 604800) {
const timeOffset = startTime - getWeekStartDate(startTime);
const xOffset = timeOffset / timePerPixel;
const yearText = new Array(screenScaleCount).fill(false);
const canDrawYearScale = (index) => {
for (let i = index; i > index - 7; i--) {
if (yearText[i]) {
return false;
}
}
if (time % (60 * 30) === 0) {
drawLine(x, pointHeight.minute10);
return true;
};
for (let i = 0; i < screenScaleCount; i++) {
const x = i * scaleSpacing - xOffset;
const time = Math.ceil(startTime + i * timeSpacing - timeOffset);
if (dayjs(time * 1000).month() === 0 && (dayjs(time * 1000).date() > 0 || dayjs(time * 1000).date() <= 31) && canDrawYearScale(i)) {
yearText[i] = true;
drawLine(x, scaleHeight.height5);
drawText(x - 30, 40, `${dateTime(time, 'YYYY/MM/DD')}`);
continue;
}
if (time % (60 * 10) === 0) {
drawLine(x, pointHeight.second5);
if (dayjs(time * 1000).day() === 0) {
drawLine(x, scaleHeight.height1);
continue;
}
if (time % (60 * 5) === 0) {
drawLine(x, pointHeight.second5);
continue;
}
}

@@ -954,9 +837,21 @@ return;

var _TimeLine_event, _TimeLine_timeSpacingMap, _TimeLine_timeSpacing, _TimeLine_pointHeight, _TimeLine_isDraging;
var _TimeLine_event, _TimeLine_timeSpacingMap, _TimeLine_timeSpacing, _TimeLine_scaleHeight, _TimeLine_isDraging;
const defaultOptions = {
fill: false,
bgColor: 'rgba(0,0,0,0.5)',
textColor: '#ffffff',
scaleColor: '#ffffff',
areaBgColor: '#ffffff55',
pointColor: '#00aeec',
pointWidth: 3,
scaleSpacing: 7,
fps: 60,
zoom: 2
};
class TimeLine {
constructor(id, { fill = false, textColor = '#ffffff', pointColor = '#ffffff', areaColor = '#ffffff55', centerTimePointColor = '#00aeec', centerTimePointWidth = 3, spacing = 5, }) {
constructor(id, options) {
_TimeLine_event.set(this, void 0);
_TimeLine_timeSpacingMap.set(this, void 0);
_TimeLine_timeSpacing.set(this, void 0);
_TimeLine_pointHeight.set(this, void 0);
_TimeLine_scaleHeight.set(this, void 0);
_TimeLine_isDraging.set(this, void 0);

@@ -968,70 +863,75 @@ if (!id) {

this.canvasContext = this.$canvas.getContext('2d');
const { fill, width, height, bgColor, textColor, scaleColor, areaBgColor, pointColor, pointWidth, scaleSpacing, fps, zoom } = Object.assign(Object.assign({}, defaultOptions), options);
if (zoom < 1 || zoom > 9 || zoom % 1 !== 0) {
throw new Error('zoom must be 1 ~ 9, and must be an integer');
}
if (fill) {
const $canvasParent = this.$canvas.parentElement;
if ($canvasParent) {
this.$canvas.width = $canvasParent.clientWidth;
this.$canvas.height = $canvasParent.clientHeight;
const parentResizeObserver = new ResizeObserver(lodash_throttle(this._onParentResize.bind(this), 200));
parentResizeObserver.observe($canvasParent);
}
this.$canvas.width = $canvasParent.clientWidth;
this.$canvas.height = $canvasParent.clientHeight;
const parentResizeObserver = new ResizeObserver(lodash_throttle(this._onParentResize.bind(this), 200));
parentResizeObserver.observe($canvasParent);
}
else {
if (width)
this.$canvas.width = width;
if (height)
this.$canvas.height = height;
}
__classPrivateFieldSet(this, _TimeLine_isDraging, false, "f");
__classPrivateFieldSet(this, _TimeLine_event, new ZnuEvent(), "f");
this.startTime = 0;
this.endTime = 0;
this.currentTime = 0;
__classPrivateFieldSet(this, _TimeLine_timeSpacingMap, [5, 10, 30, 60, 120, 300], "f");
__classPrivateFieldSet(this, _TimeLine_timeSpacing, 30, "f");
this.spacing = spacing;
__classPrivateFieldSet(this, _TimeLine_pointHeight, {
hour1: this.$canvas.height / 2,
minute30: this.$canvas.height / 3,
minute10: this.$canvas.height / 4,
minute1: this.$canvas.height / 5,
second10: this.$canvas.height / 8,
second5: this.$canvas.height / 10,
__classPrivateFieldSet(this, _TimeLine_timeSpacingMap, [1, 10, 30, 60, 120, 300, 7200, 86400, 604800], "f");
__classPrivateFieldSet(this, _TimeLine_timeSpacing, __classPrivateFieldGet(this, _TimeLine_timeSpacingMap, "f")[zoom - 1], "f");
this.scaleSpacing = scaleSpacing;
__classPrivateFieldSet(this, _TimeLine_scaleHeight, {
height6: this.$canvas.height / 2,
height5: this.$canvas.height / 3,
height4: this.$canvas.height / 4,
height3: this.$canvas.height / 5,
height2: this.$canvas.height / 8,
height1: this.$canvas.height / 10,
}, "f");
this.centerTimePointWidth = centerTimePointWidth;
this.centerTimePointColor = centerTimePointColor;
this.bgColor = bgColor;
this.pointWidth = pointWidth;
this.pointColor = pointColor;
this.textColor = textColor;
this.pointColor = pointColor;
this.areaColor = areaColor;
this.scaleColor = scaleColor;
this.areaBgColor = areaBgColor;
this.fps = fps;
}
draw({ startTime, endTime, currentTime, areas, _privateFlag }) {
if (!startTime || !endTime) {
throw new Error('startTime and endTime is required!');
}
draw({ currentTime = 0, areas, _privateFlag } = {}) {
if (__classPrivateFieldGet(this, _TimeLine_isDraging, "f") && !_privateFlag) {
return;
}
this.currentTime = currentTime || Math.floor(Date.now() / 1000);
this.areas = areas || [];
const screenScaleCount = Math.ceil(this.$canvas.width / this.scaleSpacing);
const screenSecondCount = screenScaleCount * __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f");
const startTime = this.currentTime - screenSecondCount / 2;
const endTime = this.currentTime + screenSecondCount / 2;
const xCenterPoint = this.$canvas.width / 2;
const timePerPixel = screenSecondCount / this.$canvas.width;
this.clear();
this.startTime = startTime;
this.endTime = endTime;
this.currentTime = currentTime || this.startTime;
this.areas = areas || [];
this.drawArea(0, 0, this.$canvas.width, this.$canvas.height, this.bgColor);
this.areas.forEach(item => {
this.drawArea(item.startTime, item.endTime, item.bgColor);
const startX = item.startTime < startTime ? 0 : Math.floor((item.startTime - startTime) / timePerPixel);
const endX = item.endTime > endTime ? this.$canvas.width : Math.floor((item.endTime - startTime) / timePerPixel);
this.drawArea(startX, 0, endX, this.$canvas.height, item.bgColor || this.areaBgColor);
});
const halfScreenPointCount = Math.ceil(this.$canvas.width / this.spacing / 2);
const _beforePointCount = Math.ceil((this.currentTime - this.startTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f"));
const _afterPointCount = Math.ceil((this.endTime - this.currentTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f"));
const beforePointCount = _beforePointCount < halfScreenPointCount ? _beforePointCount : halfScreenPointCount;
const afterPointCount = _afterPointCount < halfScreenPointCount ? _afterPointCount : halfScreenPointCount;
const centerTimePoint = this.$canvas.width / 2 - this.centerTimePointWidth / 2;
const xOffset = this.currentTime % this.spacing;
const timeOffset = this.currentTime % __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f");
drawHelper.bind(this)({
beforePointCount,
afterPointCount,
centerTimePoint,
xOffset,
timeOffset,
pointWidth: this.pointWidth,
timePerPixel,
scaleHeight: __classPrivateFieldGet(this, _TimeLine_scaleHeight, "f"),
scaleSpacing: this.scaleSpacing,
timeSpacing: __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f"),
pointHeight: __classPrivateFieldGet(this, _TimeLine_pointHeight, "f"),
spacing: this.spacing,
currentTime: this.currentTime,
screenScaleCount,
startTime,
drawLine: this.drawLine.bind(this),
drawText: this.drawText.bind(this),
drawTimelineScale: this.drawTimelineScale.bind(this),
});
this.drawLine(centerTimePoint, this.$canvas.height, this.centerTimePointWidth, this.centerTimePointColor);
this.drawLine(xCenterPoint - this.pointWidth / 2, this.$canvas.height, this.pointWidth, this.pointColor);
this.drawArea(xCenterPoint - 52, 5, xCenterPoint + 52, 25, this.pointColor);
this.drawText(xCenterPoint - 50, 20, `${dateTime(this.currentTime, 'YYYY/MM/DD HH:mm:ss')}`);
this.$canvas.onwheel = this._onZoom.bind(this);

@@ -1043,20 +943,12 @@ this.$canvas.onmousedown = this._onDrag.bind(this);

let prexOffset = 0;
document.onmousemove = lodash_throttle((emoveEvent) => {
const curxOffset = emoveEvent.clientX - clientX;
if (curxOffset < 0 && this.currentTime >= this.endTime) {
return;
}
if (curxOffset > 0 && this.currentTime <= this.startTime) {
return;
}
const currentTime = this.currentTime - __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f") / this.spacing * (curxOffset - prexOffset);
document.onmousemove = lodash_throttle((moveEvent) => {
const curxOffset = moveEvent.clientX - clientX;
const currentTime = this.currentTime - __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f") / this.scaleSpacing * (curxOffset - prexOffset);
prexOffset = curxOffset;
this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: Math.floor(currentTime),
currentTime: Math.round(currentTime),
areas: this.areas,
_privateFlag: true,
});
}, 40);
}, __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f") === 1 ? 100 : 1000 / this.fps);
document.onmouseup = () => {

@@ -1075,4 +967,2 @@ document.onmousemove = null;

this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: this.currentTime,

@@ -1086,4 +976,2 @@ areas: this.areas,

this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: this.currentTime,

@@ -1102,13 +990,11 @@ areas: this.areas,

this.$canvas.height = $canvasParent.clientHeight;
__classPrivateFieldSet(this, _TimeLine_pointHeight, {
hour1: this.$canvas.height / 2,
minute30: this.$canvas.height / 3,
minute10: this.$canvas.height / 4,
minute1: this.$canvas.height / 5,
second10: this.$canvas.height / 8,
second5: this.$canvas.height / 10,
__classPrivateFieldSet(this, _TimeLine_scaleHeight, {
height6: this.$canvas.height / 2,
height5: this.$canvas.height / 3,
height4: this.$canvas.height / 4,
height3: this.$canvas.height / 5,
height2: this.$canvas.height / 8,
height1: this.$canvas.height / 10,
}, "f");
this.draw({
startTime: this.startTime,
endTime: this.endTime,
currentTime: this.currentTime,

@@ -1127,4 +1013,60 @@ areas: this.areas,

}
drawLine(x, y, width = 1, color = this.pointColor) {
drawTimelineScale(timespacing) {
switch (timespacing) {
case 1:
this.drawText(25, 12, `1s`);
break;
case 10:
this.drawText(25, 12, `10s`);
break;
case 30:
this.drawText(25, 12, `30s`);
break;
case 60:
this.drawText(25, 12, `1min`);
break;
case 120:
this.drawText(25, 12, `2min`);
break;
case 300:
this.drawText(25, 12, `5min`);
break;
case 7200:
this.drawText(25, 12, `1hour`);
break;
case 86400:
this.drawText(25, 12, `1day`);
break;
case 604800:
this.drawText(25, 12, `1week`);
break;
}
this.drawLine(0, 0);
this.canvasContext.beginPath();
this.canvasContext.moveTo(5, 5);
this.canvasContext.lineTo(5, 10);
this.canvasContext.stroke();
this.canvasContext.strokeStyle = this.scaleColor;
this.canvasContext.lineWidth = 1;
this.canvasContext.stroke();
this.canvasContext.closePath();
this.canvasContext.beginPath();
this.canvasContext.moveTo(4, 10);
this.canvasContext.lineTo(20, 10);
this.canvasContext.stroke();
this.canvasContext.strokeStyle = this.scaleColor;
this.canvasContext.lineWidth = 1;
this.canvasContext.stroke();
this.canvasContext.closePath();
this.canvasContext.beginPath();
this.canvasContext.moveTo(20, 11);
this.canvasContext.lineTo(20, 5);
this.canvasContext.stroke();
this.canvasContext.strokeStyle = this.scaleColor;
this.canvasContext.lineWidth = 1;
this.canvasContext.stroke();
this.canvasContext.closePath();
}
drawLine(x, y, width = 1, color = this.scaleColor) {
this.canvasContext.beginPath();
this.canvasContext.moveTo(x, this.$canvas.height);

@@ -1141,13 +1083,10 @@ this.canvasContext.lineTo(x, this.$canvas.height - y);

this.canvasContext.fillStyle = color;
this.canvasContext.font = '12px';
this.canvasContext.fillText(text, x, y);
this.canvasContext.closePath();
}
drawArea(startTime, endTime, bgColor) {
const centerTimePoint = this.$canvas.width / 2 - this.centerTimePointWidth / 2;
const xOffset = this.currentTime % this.spacing;
const startX = (centerTimePoint - xOffset) + Math.floor((startTime - this.currentTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f")) * this.spacing;
const endX = (centerTimePoint - xOffset) + Math.floor((endTime - this.currentTime) / __classPrivateFieldGet(this, _TimeLine_timeSpacing, "f")) * this.spacing;
drawArea(startX, startY, endX, endY, bgColor) {
this.canvasContext.beginPath();
this.canvasContext.rect(startX, 0, endX - startX, this.$canvas.height);
this.canvasContext.fillStyle = bgColor || this.areaColor;
this.canvasContext.rect(startX, startY, endX - startX, endY - startY);
this.canvasContext.fillStyle = bgColor;
this.canvasContext.fill();

@@ -1166,4 +1105,4 @@ this.canvasContext.closePath();

}
_TimeLine_event = new WeakMap(), _TimeLine_timeSpacingMap = new WeakMap(), _TimeLine_timeSpacing = new WeakMap(), _TimeLine_pointHeight = new WeakMap(), _TimeLine_isDraging = new WeakMap();
_TimeLine_event = new WeakMap(), _TimeLine_timeSpacingMap = new WeakMap(), _TimeLine_timeSpacing = new WeakMap(), _TimeLine_scaleHeight = new WeakMap(), _TimeLine_isDraging = new WeakMap();
export { TimeLine as default };

4

lib/timeline.esm.min.js

@@ -15,3 +15,3 @@ /*! *****************************************************************************

***************************************************************************** */
function t(t,e,i,n){if("a"===i&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(t):n?n.value:e.get(t)}function e(t,e,i,n,r){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?r.call(t,i):r?r.value=i:e.set(t,i),i
function t(t,e,i,n){if("a"===i&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(t):n?n.value:e.get(t)}function e(t,e,i,n,s){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?s.call(t,i):s?s.value=i:e.set(t,i),i
/*!

@@ -36,3 +36,3 @@ * znu-event v0.0.10

PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */}function i(t){var e="function"==typeof Symbol&&Symbol.iterator,i=e&&t[e],n=0;if(i)return i.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function n(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,r,s=i.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(n=s.next()).done;)o.push(n.value)}catch(t){r={error:t}}finally{try{n&&!n.done&&(i=s.return)&&i.call(s)}finally{if(r)throw r.error}}return o}function r(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(n(arguments[e]));return t}var s=function(){function t(){this._listenersMap={}}return t.prototype.on=function(t,e){return void 0===this._listenersMap[t]&&(this._listenersMap[t]=[]),this._listenersMap[t].push(e),this},t.prototype.once=function(t,e){return e.isOnce=!0,this.on(t,e),this},t.prototype.off=function(t,e){var i=this._listenersMap[t];if(void 0!==i)if(void 0===e)delete this._listenersMap[t];else{var n=i.findIndex((function(t){return t===e}));i.splice(n,1)}return this},t.prototype.offAll=function(){this._listenersMap={}},t.prototype.emit=function(t){for(var e,s,o=[],a=1;a<arguments.length;a++)o[a-1]=arguments[a];var h=this._listenersMap[t];if(void 0!==h&&h.length>0){try{for(var u=i(h.entries()),c=u.next();!c.done;c=u.next()){var f=n(c.value,2),l=f[0],d=f[1];if(d.isOnce){var m=d;h.splice(l,1),m.apply(void 0,r(o))}else d.apply(void 0,r(o))}}catch(t){e={error:t}}finally{try{c&&!c.done&&(s=u.return)&&s.call(u)}finally{if(e)throw e.error}}return!0}return!1},t.prototype.has=function(t){return void 0!==this._listenersMap[t]&&this._listenersMap[t].length>0},t.prototype.eventNames=function(){var t=[];for(var e in this._listenersMap)t.push(e);return t},t.prototype.destroy=function(){this.offAll()},t}(),o="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},a=/^\s+|\s+$/g,h=/^[-+]0x[0-9a-f]+$/i,u=/^0b[01]+$/i,c=/^0o[0-7]+$/i,f=parseInt,l="object"==typeof o&&o&&o.Object===Object&&o,d="object"==typeof self&&self&&self.Object===Object&&self,m=l||d||Function("return this")(),v=Object.prototype.toString,$=Math.max,p=Math.min,g=function(){return m.Date.now()};function T(t,e,i){var n,r,s,o,a,h,u=0,c=!1,f=!1,l=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function d(e){var i=n,s=r;return n=r=void 0,u=e,o=t.apply(s,i)}function m(t){return u=t,a=setTimeout(T,e),c?d(t):o}function v(t){var i=t-h;return void 0===h||i>=e||i<0||f&&t-u>=s}function T(){var t=g();if(v(t))return M(t);a=setTimeout(T,function(t){var i=e-(t-h);return f?p(i,s-(t-u)):i}(t))}function M(t){return a=void 0,l&&n?d(t):(n=r=void 0,o)}function b(){var t=g(),i=v(t);if(n=arguments,r=this,h=t,i){if(void 0===a)return m(h);if(f)return a=setTimeout(T,e),d(h)}return void 0===a&&(a=setTimeout(T,e)),o}return e=w(e)||0,y(i)&&(c=!!i.leading,s=(f="maxWait"in i)?$(w(i.maxWait)||0,e):s,l="trailing"in i?!!i.trailing:l),b.cancel=function(){void 0!==a&&clearTimeout(a),u=0,n=h=r=a=void 0},b.flush=function(){return void 0===a?o:M(g())},b}function y(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function w(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==v.call(t)}(t))return NaN;if(y(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=y(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(a,"");var i=u.test(t);return i||c.test(t)?f(t.slice(2),i?2:8):h.test(t)?NaN:+t}var M=function(t,e,i){var n=!0,r=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return y(i)&&(n="leading"in i?!!i.leading:n,r="trailing"in i?!!i.trailing:r),T(t,e,{leading:n,maxWait:e,trailing:r})},b={exports:{}},x=b.exports=function(){var t=1e3,e=6e4,i=36e5,n="millisecond",r="second",s="minute",o="hour",a="day",h="week",u="month",c="quarter",f="year",l="date",d="Invalid Date",m=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,v=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,$={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},p=function(t,e,i){var n=String(t);return!n||n.length>=e?t:""+Array(e+1-n.length).join(i)+t},g={s:p,z:function(t){var e=-t.utcOffset(),i=Math.abs(e),n=Math.floor(i/60),r=i%60;return(e<=0?"+":"-")+p(n,2,"0")+":"+p(r,2,"0")},m:function t(e,i){if(e.date()<i.date())return-t(i,e);var n=12*(i.year()-e.year())+(i.month()-e.month()),r=e.clone().add(n,u),s=i-r<0,o=e.clone().add(n+(s?-1:1),u);return+(-(n+(i-r)/(s?r-o:o-r))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:u,y:f,w:h,d:a,D:l,h:o,m:s,s:r,ms:n,Q:c}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},T="en",y={};y[T]=$;var w=function(t){return t instanceof C},M=function t(e,i,n){var r;if(!e)return T;if("string"==typeof e){var s=e.toLowerCase();y[s]&&(r=s),i&&(y[s]=i,r=s);var o=e.split("-");if(!r&&o.length>1)return t(o[0])}else{var a=e.name;y[a]=e,r=a}return!n&&r&&(T=r),r||!n&&T},b=function(t,e){if(w(t))return t.clone();var i="object"==typeof e?e:{};return i.date=t,i.args=arguments,new C(i)},x=g;x.l=M,x.i=w,x.w=function(t,e){return b(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var C=function(){function $(t){this.$L=M(t.locale,null,!0),this.parse(t)}var p=$.prototype;return p.parse=function(t){this.$d=function(t){var e=t.date,i=t.utc;if(null===e)return new Date(NaN);if(x.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var n=e.match(m);if(n){var r=n[2]-1||0,s=(n[7]||"0").substring(0,3);return i?new Date(Date.UTC(n[1],r,n[3]||1,n[4]||0,n[5]||0,n[6]||0,s)):new Date(n[1],r,n[3]||1,n[4]||0,n[5]||0,n[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},p.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},p.$utils=function(){return x},p.isValid=function(){return!(this.$d.toString()===d)},p.isSame=function(t,e){var i=b(t);return this.startOf(e)<=i&&i<=this.endOf(e)},p.isAfter=function(t,e){return b(t)<this.startOf(e)},p.isBefore=function(t,e){return this.endOf(e)<b(t)},p.$g=function(t,e,i){return x.u(t)?this[e]:this.set(i,t)},p.unix=function(){return Math.floor(this.valueOf()/1e3)},p.valueOf=function(){return this.$d.getTime()},p.startOf=function(t,e){var i=this,n=!!x.u(e)||e,c=x.p(t),d=function(t,e){var r=x.w(i.$u?Date.UTC(i.$y,e,t):new Date(i.$y,e,t),i);return n?r:r.endOf(a)},m=function(t,e){return x.w(i.toDate()[t].apply(i.toDate("s"),(n?[0,0,0,0]:[23,59,59,999]).slice(e)),i)},v=this.$W,$=this.$M,p=this.$D,g="set"+(this.$u?"UTC":"");switch(c){case f:return n?d(1,0):d(31,11);case u:return n?d(1,$):d(0,$+1);case h:var T=this.$locale().weekStart||0,y=(v<T?v+7:v)-T;return d(n?p-y:p+(6-y),$);case a:case l:return m(g+"Hours",0);case o:return m(g+"Minutes",1);case s:return m(g+"Seconds",2);case r:return m(g+"Milliseconds",3);default:return this.clone()}},p.endOf=function(t){return this.startOf(t,!1)},p.$set=function(t,e){var i,h=x.p(t),c="set"+(this.$u?"UTC":""),d=(i={},i[a]=c+"Date",i[l]=c+"Date",i[u]=c+"Month",i[f]=c+"FullYear",i[o]=c+"Hours",i[s]=c+"Minutes",i[r]=c+"Seconds",i[n]=c+"Milliseconds",i)[h],m=h===a?this.$D+(e-this.$W):e;if(h===u||h===f){var v=this.clone().set(l,1);v.$d[d](m),v.init(),this.$d=v.set(l,Math.min(this.$D,v.daysInMonth())).$d}else d&&this.$d[d](m);return this.init(),this},p.set=function(t,e){return this.clone().$set(t,e)},p.get=function(t){return this[x.p(t)]()},p.add=function(n,c){var l,d=this;n=Number(n);var m=x.p(c),v=function(t){var e=b(d);return x.w(e.date(e.date()+Math.round(t*n)),d)};if(m===u)return this.set(u,this.$M+n);if(m===f)return this.set(f,this.$y+n);if(m===a)return v(1);if(m===h)return v(7);var $=(l={},l[s]=e,l[o]=i,l[r]=t,l)[m]||1,p=this.$d.getTime()+n*$;return x.w(p,this)},p.subtract=function(t,e){return this.add(-1*t,e)},p.format=function(t){var e=this,i=this.$locale();if(!this.isValid())return i.invalidDate||d;var n=t||"YYYY-MM-DDTHH:mm:ssZ",r=x.z(this),s=this.$H,o=this.$m,a=this.$M,h=i.weekdays,u=i.months,c=function(t,i,r,s){return t&&(t[i]||t(e,n))||r[i].slice(0,s)},f=function(t){return x.s(s%12||12,t,"0")},l=i.meridiem||function(t,e,i){var n=t<12?"AM":"PM";return i?n.toLowerCase():n},m={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:x.s(a+1,2,"0"),MMM:c(i.monthsShort,a,u,3),MMMM:c(u,a),D:this.$D,DD:x.s(this.$D,2,"0"),d:String(this.$W),dd:c(i.weekdaysMin,this.$W,h,2),ddd:c(i.weekdaysShort,this.$W,h,3),dddd:h[this.$W],H:String(s),HH:x.s(s,2,"0"),h:f(1),hh:f(2),a:l(s,o,!0),A:l(s,o,!1),m:String(o),mm:x.s(o,2,"0"),s:String(this.$s),ss:x.s(this.$s,2,"0"),SSS:x.s(this.$ms,3,"0"),Z:r};return n.replace(v,(function(t,e){return e||m[t]||r.replace(":","")}))},p.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},p.diff=function(n,l,d){var m,v=x.p(l),$=b(n),p=($.utcOffset()-this.utcOffset())*e,g=this-$,T=x.m(this,$);return T=(m={},m[f]=T/12,m[u]=T,m[c]=T/3,m[h]=(g-p)/6048e5,m[a]=(g-p)/864e5,m[o]=g/i,m[s]=g/e,m[r]=g/t,m)[v]||g,d?T:x.a(T)},p.daysInMonth=function(){return this.endOf(u).$D},p.$locale=function(){return y[this.$L]},p.locale=function(t,e){if(!t)return this.$L;var i=this.clone(),n=M(t,e,!0);return n&&(i.$L=n),i},p.clone=function(){return x.w(this.$d,this)},p.toDate=function(){return new Date(this.valueOf())},p.toJSON=function(){return this.isValid()?this.toISOString():null},p.toISOString=function(){return this.$d.toISOString()},p.toString=function(){return this.$d.toUTCString()},$}(),H=C.prototype;return b.prototype=H,[["$ms",n],["$s",r],["$m",s],["$H",o],["$W",a],["$M",u],["$y",f],["$D",l]].forEach((function(t){H[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),b.extend=function(t,e){return t.$i||(t(e,C,b),t.$i=!0),b},b.locale=M,b.isDayjs=w,b.unix=function(t){return b(1e3*t)},b.en=y[T],b.Ls=y,b.p={},b}();const C=(t,e="MM/DD HH:mm")=>x(1e3*t).format(e);function H({beforePointCount:t,afterPointCount:e,centerTimePoint:i,xOffset:n,timeOffset:r,timeSpacing:s,pointHeight:o,spacing:a,currentTime:h,drawLine:u,drawText:c}){if(5!==s)if(10!==s)if(30!==s)if(60!==s)if(120!==s)if(300!==s);else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0&&f%300!=0||u(t,o.second5):u(t,o.minute10):(u(t,o.hour1),c(t-15,20,`${C(f,"HH:mm")}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0&&f%300!=0||u(e,o.second5):u(e,o.minute10):(u(e,o.hour1),c(e-15,20,`${C(f,"HH:mm")}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0||u(t,o.second5):u(t,o.minute1):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0||u(e,o.second5):u(e,o.minute1):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%300!=0?f%60!=0||u(t,o.second5):u(t,o.minute1):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%300!=0?f%60!=0||u(e,o.second5):u(e,o.minute1):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0?f%30!=0||u(t,o.second5):u(t,o.minute1):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%120!=0?f%30!=0||u(e,o.second5):u(e,o.minute1):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%10!=0||u(t,o.second5):(u(t,o.minute1),f%120==0&&c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%10!=0||u(e,o.second5):(u(e,o.minute1),f%120==0&&c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}else{for(let e=0;e<t;e++){const t=i-e*a-n,f=h-e*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%5!=0||u(t,o.second5):(u(t,o.minute1),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute10),c(t-15,20,`${C(f,"HH:mm")}`)):(u(t,o.minute30),c(t-30,20,`${C(f)}`)):(u(t,o.hour1),c(t-30,20,`${C(f)}`))}for(let t=0;t<e;t++){const e=i+t*a-n,f=h+t*s-r;f%3600!=0?f%1800!=0?f%600!=0?f%60!=0?f%5!=0||u(e,o.second5):(u(e,o.minute1),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute10),c(e-15,20,`${C(f,"HH:mm")}`)):(u(e,o.minute30),c(e-30,20,`${C(f)}`)):(u(e,o.hour1),c(e-30,20,`${C(f)}`))}}}var S,D,_,O,P;class W{constructor(t,{fill:i=!1,textColor:n="#ffffff",pointColor:r="#ffffff",areaColor:o="#ffffff55",centerTimePointColor:a="#00aeec",centerTimePointWidth:h=3,spacing:u=5}){if(S.set(this,void 0),D.set(this,void 0),_.set(this,void 0),O.set(this,void 0),P.set(this,void 0),!t)throw new Error("canvas id is required!");if(this.$canvas=document.getElementById(t),this.canvasContext=this.$canvas.getContext("2d"),i){const t=this.$canvas.parentElement;if(t){this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight;new ResizeObserver(M(this._onParentResize.bind(this),200)).observe(t)}}e(this,P,!1,"f"),e(this,S,new s,"f"),this.startTime=0,this.endTime=0,this.currentTime=0,e(this,D,[5,10,30,60,120,300],"f"),e(this,_,30,"f"),this.spacing=u,e(this,O,{hour1:this.$canvas.height/2,minute30:this.$canvas.height/3,minute10:this.$canvas.height/4,minute1:this.$canvas.height/5,second10:this.$canvas.height/8,second5:this.$canvas.height/10},"f"),this.centerTimePointWidth=h,this.centerTimePointColor=a,this.textColor=n,this.pointColor=r,this.areaColor=o}draw({startTime:e,endTime:i,currentTime:n,areas:r,_privateFlag:s}){if(!e||!i)throw new Error("startTime and endTime is required!");if(t(this,P,"f")&&!s)return;this.clear(),this.startTime=e,this.endTime=i,this.currentTime=n||this.startTime,this.areas=r||[],this.areas.forEach((t=>{this.drawArea(t.startTime,t.endTime,t.bgColor)}));const o=Math.ceil(this.$canvas.width/this.spacing/2),a=Math.ceil((this.currentTime-this.startTime)/t(this,_,"f")),h=Math.ceil((this.endTime-this.currentTime)/t(this,_,"f")),u=a<o?a:o,c=h<o?h:o,f=this.$canvas.width/2-this.centerTimePointWidth/2,l=this.currentTime%this.spacing,d=this.currentTime%t(this,_,"f");H.bind(this)({beforePointCount:u,afterPointCount:c,centerTimePoint:f,xOffset:l,timeOffset:d,timeSpacing:t(this,_,"f"),pointHeight:t(this,O,"f"),spacing:this.spacing,currentTime:this.currentTime,drawLine:this.drawLine.bind(this),drawText:this.drawText.bind(this)}),this.drawLine(f,this.$canvas.height,this.centerTimePointWidth,this.centerTimePointColor),this.$canvas.onwheel=this._onZoom.bind(this),this.$canvas.onmousedown=this._onDrag.bind(this)}_onDrag({clientX:i}){e(this,P,!0,"f");let n=0;document.onmousemove=M((e=>{const r=e.clientX-i;if(r<0&&this.currentTime>=this.endTime)return;if(r>0&&this.currentTime<=this.startTime)return;const s=this.currentTime-t(this,_,"f")/this.spacing*(r-n);n=r,this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:Math.floor(s),areas:this.areas,_privateFlag:!0})}),40),document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,e(this,P,!1,"f"),this.emit("timeUpdate",this.currentTime)}}_onZoom(i){i.preventDefault();const n=t(this,D,"f").findIndex((e=>e===t(this,_,"f")));i.deltaY<0&&n>0?(e(this,_,t(this,D,"f")[n-1],"f"),this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:this.currentTime,areas:this.areas,_privateFlag:!0})):i.deltaY>0&&n<t(this,D,"f").length-1&&(e(this,_,t(this,D,"f")[n+1],"f"),this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:this.currentTime,areas:this.areas,_privateFlag:!0}))}_onParentResize(){const t=this.$canvas.parentNode;t&&(this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight,e(this,O,{hour1:this.$canvas.height/2,minute30:this.$canvas.height/3,minute10:this.$canvas.height/4,minute1:this.$canvas.height/5,second10:this.$canvas.height/8,second5:this.$canvas.height/10},"f"),this.draw({startTime:this.startTime,endTime:this.endTime,currentTime:this.currentTime,areas:this.areas}))}clear(){this.canvasContext&&this.canvasContext.clearRect(0,0,this.$canvas.width,this.$canvas.height),this.$canvas&&(this.$canvas.onwheel=null,this.$canvas.onmousedown=null)}drawLine(t,e,i=1,n=this.pointColor){this.canvasContext.beginPath(),this.canvasContext.moveTo(t,this.$canvas.height),this.canvasContext.lineTo(t,this.$canvas.height-e),this.canvasContext.stroke(),this.canvasContext.strokeStyle=n,this.canvasContext.lineWidth=i,this.canvasContext.stroke(),this.canvasContext.closePath()}drawText(t,e,i,n=this.textColor){this.canvasContext.beginPath(),this.canvasContext.fillStyle=n,this.canvasContext.fillText(i,t,e),this.canvasContext.closePath()}drawArea(e,i,n){const r=this.$canvas.width/2-this.centerTimePointWidth/2,s=this.currentTime%this.spacing,o=r-s+Math.floor((e-this.currentTime)/t(this,_,"f"))*this.spacing,a=r-s+Math.floor((i-this.currentTime)/t(this,_,"f"))*this.spacing;this.canvasContext.beginPath(),this.canvasContext.rect(o,0,a-o,this.$canvas.height),this.canvasContext.fillStyle=n||this.areaColor,this.canvasContext.fill(),this.canvasContext.closePath()}on(e,i){t(this,S,"f").on(e,i)}off(e,i){t(this,S,"f").off(e,i)}emit(...e){t(this,S,"f").emit(...e)}}S=new WeakMap,D=new WeakMap,_=new WeakMap,O=new WeakMap,P=new WeakMap;export{W as default};
***************************************************************************** */}function i(t){var e="function"==typeof Symbol&&Symbol.iterator,i=e&&t[e],n=0;if(i)return i.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function n(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,s,r=i.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(n=r.next()).done;)a.push(n.value)}catch(t){s={error:t}}finally{try{n&&!n.done&&(i=r.return)&&i.call(r)}finally{if(s)throw s.error}}return a}function s(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(n(arguments[e]));return t}var r=function(){function t(){this._listenersMap={}}return t.prototype.on=function(t,e){return void 0===this._listenersMap[t]&&(this._listenersMap[t]=[]),this._listenersMap[t].push(e),this},t.prototype.once=function(t,e){return e.isOnce=!0,this.on(t,e),this},t.prototype.off=function(t,e){var i=this._listenersMap[t];if(void 0!==i)if(void 0===e)delete this._listenersMap[t];else{var n=i.findIndex((function(t){return t===e}));i.splice(n,1)}return this},t.prototype.offAll=function(){this._listenersMap={}},t.prototype.emit=function(t){for(var e,r,a=[],o=1;o<arguments.length;o++)a[o-1]=arguments[o];var h=this._listenersMap[t];if(void 0!==h&&h.length>0){try{for(var c=i(h.entries()),l=c.next();!l.done;l=c.next()){var u=n(l.value,2),f=u[0],d=u[1];if(d.isOnce){var v=d;h.splice(f,1),v.apply(void 0,s(a))}else d.apply(void 0,s(a))}}catch(t){e={error:t}}finally{try{l&&!l.done&&(r=c.return)&&r.call(c)}finally{if(e)throw e.error}}return!0}return!1},t.prototype.has=function(t){return void 0!==this._listenersMap[t]&&this._listenersMap[t].length>0},t.prototype.eventNames=function(){var t=[];for(var e in this._listenersMap)t.push(e);return t},t.prototype.destroy=function(){this.offAll()},t}(),a="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},o=/^\s+|\s+$/g,h=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt,f="object"==typeof a&&a&&a.Object===Object&&a,d="object"==typeof self&&self&&self.Object===Object&&self,v=f||d||Function("return this")(),g=Object.prototype.toString,m=Math.max,p=Math.min,$=function(){return v.Date.now()};function w(t,e,i){var n,s,r,a,o,h,c=0,l=!1,u=!1,f=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function d(e){var i=n,r=s;return n=s=void 0,c=e,a=t.apply(r,i)}function v(t){return c=t,o=setTimeout(w,e),l?d(t):a}function g(t){var i=t-h;return void 0===h||i>=e||i<0||u&&t-c>=r}function w(){var t=$();if(g(t))return M(t);o=setTimeout(w,function(t){var i=e-(t-h);return u?p(i,r-(t-c)):i}(t))}function M(t){return o=void 0,f&&n?d(t):(n=s=void 0,a)}function C(){var t=$(),i=g(t);if(n=arguments,s=this,h=t,i){if(void 0===o)return v(h);if(u)return o=setTimeout(w,e),d(h)}return void 0===o&&(o=setTimeout(w,e)),a}return e=x(e)||0,y(i)&&(l=!!i.leading,r=(u="maxWait"in i)?m(x(i.maxWait)||0,e):r,f="trailing"in i?!!i.trailing:f),C.cancel=function(){void 0!==o&&clearTimeout(o),c=0,n=h=s=o=void 0},C.flush=function(){return void 0===o?a:M($())},C}function y(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function x(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==g.call(t)}(t))return NaN;if(y(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=y(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(o,"");var i=c.test(t);return i||l.test(t)?u(t.slice(2),i?2:8):h.test(t)?NaN:+t}var M=function(t,e,i){var n=!0,s=!0;if("function"!=typeof t)throw new TypeError("Expected a function");return y(i)&&(n="leading"in i?!!i.leading:n,s="trailing"in i?!!i.trailing:s),w(t,e,{leading:n,maxWait:e,trailing:s})},C={exports:{}},T=C.exports=function(){var t=1e3,e=6e4,i=36e5,n="millisecond",s="second",r="minute",a="hour",o="day",h="week",c="month",l="quarter",u="year",f="date",d="Invalid Date",v=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,g=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,m={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},p=function(t,e,i){var n=String(t);return!n||n.length>=e?t:""+Array(e+1-n.length).join(i)+t},$={s:p,z:function(t){var e=-t.utcOffset(),i=Math.abs(e),n=Math.floor(i/60),s=i%60;return(e<=0?"+":"-")+p(n,2,"0")+":"+p(s,2,"0")},m:function t(e,i){if(e.date()<i.date())return-t(i,e);var n=12*(i.year()-e.year())+(i.month()-e.month()),s=e.clone().add(n,c),r=i-s<0,a=e.clone().add(n+(r?-1:1),c);return+(-(n+(i-s)/(r?s-a:a-s))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:c,y:u,w:h,d:o,D:f,h:a,m:r,s:s,ms:n,Q:l}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},w="en",y={};y[w]=m;var x=function(t){return t instanceof b},M=function t(e,i,n){var s;if(!e)return w;if("string"==typeof e){var r=e.toLowerCase();y[r]&&(s=r),i&&(y[r]=i,s=r);var a=e.split("-");if(!s&&a.length>1)return t(a[0])}else{var o=e.name;y[o]=e,s=o}return!n&&s&&(w=s),s||!n&&w},C=function(t,e){if(x(t))return t.clone();var i="object"==typeof e?e:{};return i.date=t,i.args=arguments,new b(i)},T=$;T.l=M,T.i=x,T.w=function(t,e){return C(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var b=function(){function m(t){this.$L=M(t.locale,null,!0),this.parse(t)}var p=m.prototype;return p.parse=function(t){this.$d=function(t){var e=t.date,i=t.utc;if(null===e)return new Date(NaN);if(T.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var n=e.match(v);if(n){var s=n[2]-1||0,r=(n[7]||"0").substring(0,3);return i?new Date(Date.UTC(n[1],s,n[3]||1,n[4]||0,n[5]||0,n[6]||0,r)):new Date(n[1],s,n[3]||1,n[4]||0,n[5]||0,n[6]||0,r)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},p.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},p.$utils=function(){return T},p.isValid=function(){return!(this.$d.toString()===d)},p.isSame=function(t,e){var i=C(t);return this.startOf(e)<=i&&i<=this.endOf(e)},p.isAfter=function(t,e){return C(t)<this.startOf(e)},p.isBefore=function(t,e){return this.endOf(e)<C(t)},p.$g=function(t,e,i){return T.u(t)?this[e]:this.set(i,t)},p.unix=function(){return Math.floor(this.valueOf()/1e3)},p.valueOf=function(){return this.$d.getTime()},p.startOf=function(t,e){var i=this,n=!!T.u(e)||e,l=T.p(t),d=function(t,e){var s=T.w(i.$u?Date.UTC(i.$y,e,t):new Date(i.$y,e,t),i);return n?s:s.endOf(o)},v=function(t,e){return T.w(i.toDate()[t].apply(i.toDate("s"),(n?[0,0,0,0]:[23,59,59,999]).slice(e)),i)},g=this.$W,m=this.$M,p=this.$D,$="set"+(this.$u?"UTC":"");switch(l){case u:return n?d(1,0):d(31,11);case c:return n?d(1,m):d(0,m+1);case h:var w=this.$locale().weekStart||0,y=(g<w?g+7:g)-w;return d(n?p-y:p+(6-y),m);case o:case f:return v($+"Hours",0);case a:return v($+"Minutes",1);case r:return v($+"Seconds",2);case s:return v($+"Milliseconds",3);default:return this.clone()}},p.endOf=function(t){return this.startOf(t,!1)},p.$set=function(t,e){var i,h=T.p(t),l="set"+(this.$u?"UTC":""),d=(i={},i[o]=l+"Date",i[f]=l+"Date",i[c]=l+"Month",i[u]=l+"FullYear",i[a]=l+"Hours",i[r]=l+"Minutes",i[s]=l+"Seconds",i[n]=l+"Milliseconds",i)[h],v=h===o?this.$D+(e-this.$W):e;if(h===c||h===u){var g=this.clone().set(f,1);g.$d[d](v),g.init(),this.$d=g.set(f,Math.min(this.$D,g.daysInMonth())).$d}else d&&this.$d[d](v);return this.init(),this},p.set=function(t,e){return this.clone().$set(t,e)},p.get=function(t){return this[T.p(t)]()},p.add=function(n,l){var f,d=this;n=Number(n);var v=T.p(l),g=function(t){var e=C(d);return T.w(e.date(e.date()+Math.round(t*n)),d)};if(v===c)return this.set(c,this.$M+n);if(v===u)return this.set(u,this.$y+n);if(v===o)return g(1);if(v===h)return g(7);var m=(f={},f[r]=e,f[a]=i,f[s]=t,f)[v]||1,p=this.$d.getTime()+n*m;return T.w(p,this)},p.subtract=function(t,e){return this.add(-1*t,e)},p.format=function(t){var e=this,i=this.$locale();if(!this.isValid())return i.invalidDate||d;var n=t||"YYYY-MM-DDTHH:mm:ssZ",s=T.z(this),r=this.$H,a=this.$m,o=this.$M,h=i.weekdays,c=i.months,l=function(t,i,s,r){return t&&(t[i]||t(e,n))||s[i].slice(0,r)},u=function(t){return T.s(r%12||12,t,"0")},f=i.meridiem||function(t,e,i){var n=t<12?"AM":"PM";return i?n.toLowerCase():n},v={YY:String(this.$y).slice(-2),YYYY:this.$y,M:o+1,MM:T.s(o+1,2,"0"),MMM:l(i.monthsShort,o,c,3),MMMM:l(c,o),D:this.$D,DD:T.s(this.$D,2,"0"),d:String(this.$W),dd:l(i.weekdaysMin,this.$W,h,2),ddd:l(i.weekdaysShort,this.$W,h,3),dddd:h[this.$W],H:String(r),HH:T.s(r,2,"0"),h:u(1),hh:u(2),a:f(r,a,!0),A:f(r,a,!1),m:String(a),mm:T.s(a,2,"0"),s:String(this.$s),ss:T.s(this.$s,2,"0"),SSS:T.s(this.$ms,3,"0"),Z:s};return n.replace(g,(function(t,e){return e||v[t]||s.replace(":","")}))},p.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},p.diff=function(n,f,d){var v,g=T.p(f),m=C(n),p=(m.utcOffset()-this.utcOffset())*e,$=this-m,w=T.m(this,m);return w=(v={},v[u]=w/12,v[c]=w,v[l]=w/3,v[h]=($-p)/6048e5,v[o]=($-p)/864e5,v[a]=$/i,v[r]=$/e,v[s]=$/t,v)[g]||$,d?w:T.a(w)},p.daysInMonth=function(){return this.endOf(c).$D},p.$locale=function(){return y[this.$L]},p.locale=function(t,e){if(!t)return this.$L;var i=this.clone(),n=M(t,e,!0);return n&&(i.$L=n),i},p.clone=function(){return T.w(this.$d,this)},p.toDate=function(){return new Date(this.valueOf())},p.toJSON=function(){return this.isValid()?this.toISOString():null},p.toISOString=function(){return this.$d.toISOString()},p.toString=function(){return this.$d.toUTCString()},m}(),S=b.prototype;return C.prototype=S,[["$ms",n],["$s",s],["$m",r],["$H",a],["$W",o],["$M",c],["$y",u],["$D",f]].forEach((function(t){S[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),C.extend=function(t,e){return t.$i||(t(e,b,C),t.$i=!0),C},C.locale=M,C.isDayjs=x,C.unix=function(t){return C(1e3*t)},C.en=y[w],C.Ls=y,C.p={},C}();const b=(t,e="MM/DD HH:mm")=>T(1e3*t).format(e);function S({pointWidth:t,timePerPixel:e,timeSpacing:i,screenScaleCount:n,scaleSpacing:s,scaleHeight:r,startTime:a,drawLine:o,drawText:h,drawTimelineScale:c}){if(c(i),1!==i)if(10!==i)if(30!==i)if(60!==i)if(120!==i)if(300!==i)if(7200!==i)if(86400!==i)if(604800!==i);else{const t=a-((t=Math.floor(Date.now()/1e3))=>{const e=1e3*t,i=T(e).year(),n=T(e).month(),s=T(e).date(),r=T(e).day(),a=new Date(i,n,s-r).getTime();return Math.floor(a/1e3)})(a),c=t/e,l=new Array(n).fill(!1),u=t=>{for(let e=t;e>t-7;e--)if(l[e])return!1;return!0};for(let e=0;e<n;e++){const n=e*s-c,f=Math.ceil(a+e*i-t);0===T(1e3*f).month()&&(T(1e3*f).date()>0||T(1e3*f).date()<=31)&&u(e)?(l[e]=!0,o(n,r.height5),h(n-30,40,`${b(f,"YYYY/MM/DD")}`)):0!==T(1e3*f).day()||o(n,r.height1)}}else{const c=b(a,"H:m:s").split(":"),l=(3600*+c[0]+60*+c[1]+ +c[2])%86400,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);"1"!==b(c,"D")?c%86400!=57600||o(n,r.height1):(o(n,r.height5),h(n-30,40,`${b(c,"YYYY/MM/DD")}`))}}else{const c=b(a,"H:m:s").split(":"),l=(3600*+c[0]+60*+c[1]+ +c[2])%7200,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);c%86400!=0?c%43200!=0?c%7200!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-30,40,`${b(c,"MM/DD HH:mm")}`))}}else{const c=b(a,"m:s").split(":"),l=(60*+c[0]+ +c[1])%300,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);c%3600!=0?c%1800!=0?c%300!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-30,40,`${b(c)}`))}}else{const c=b(a,"m:s").split(":"),l=(60*+c[0]+ +c[1])%120,u=l/e;for(let e=0;e<n;e++){const n=e*s-u-t/2,c=Math.ceil(a+e*i-l);c%1800!=0?c%600!=0?c%120!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-30,40,`${b(c)}`))}}else{const c=+b(a,"s")%60,l=c/e;for(let e=0;e<n;e++){const n=e*s-l-t/2,u=Math.ceil(a+e*i-c);u%3600!=0?u%300!=0?u%60!=0||o(n,r.height1):(o(n,r.height3),u%600==0&&h(n-15,40,`${b(u,"HH:mm")}`)):(o(n,r.height5),h(n-30,40,`${b(u)}`))}}else{const c=+b(a,"s")%30,l=c/e;for(let e=0;e<n;e++){const n=e*s-l-t/2,u=Math.ceil(a+e*i-c);u%300!=0?u%30!=0||o(n,r.height1):(o(n,r.height4),h(n-15,40,`${b(u,"HH:mm")}`))}}else{const c=+b(a,"s")%10,l=c/e;for(let e=0;e<n;e++){const n=e*s-l-t/2,u=Math.ceil(a+e*i-c);u%60!=0?u%10!=0||o(n,r.height1):(o(n,r.height4),h(n-15,40,`${b(u,"HH:mm")}`))}}else for(let e=0;e<n;e++){const n=e*s+t/2,c=Math.ceil(a+e*i);c%10!=0?c%5!=0?c%1!=0||o(n,r.height1):o(n,r.height3):(o(n,r.height5),h(n-15,40,`${b(c,"HH:mm:ss")}`))}}var D,_,O,k,H;const W={fill:!1,bgColor:"rgba(0,0,0,0.5)",textColor:"#ffffff",scaleColor:"#ffffff",areaBgColor:"#ffffff55",pointColor:"#00aeec",pointWidth:3,scaleSpacing:7,fps:60,zoom:2};class Y{constructor(i,n){if(D.set(this,void 0),_.set(this,void 0),O.set(this,void 0),k.set(this,void 0),H.set(this,void 0),!i)throw new Error("canvas id is required!");this.$canvas=document.getElementById(i),this.canvasContext=this.$canvas.getContext("2d");const{fill:s,width:a,height:o,bgColor:h,textColor:c,scaleColor:l,areaBgColor:u,pointColor:f,pointWidth:d,scaleSpacing:v,fps:g,zoom:m}=Object.assign(Object.assign({},W),n);if(m<1||m>9||m%1!=0)throw new Error("zoom must be 1 ~ 9, and must be an integer");if(s){const t=this.$canvas.parentElement;this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight;new ResizeObserver(M(this._onParentResize.bind(this),200)).observe(t)}else a&&(this.$canvas.width=a),o&&(this.$canvas.height=o);e(this,H,!1,"f"),e(this,D,new r,"f"),this.currentTime=0,e(this,_,[1,10,30,60,120,300,7200,86400,604800],"f"),e(this,O,t(this,_,"f")[m-1],"f"),this.scaleSpacing=v,e(this,k,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10},"f"),this.bgColor=h,this.pointWidth=d,this.pointColor=f,this.textColor=c,this.scaleColor=l,this.areaBgColor=u,this.fps=g}draw({currentTime:e=0,areas:i,_privateFlag:n}={}){if(t(this,H,"f")&&!n)return;this.currentTime=e||Math.floor(Date.now()/1e3),this.areas=i||[];const s=Math.ceil(this.$canvas.width/this.scaleSpacing),r=s*t(this,O,"f"),a=this.currentTime-r/2,o=this.currentTime+r/2,h=this.$canvas.width/2,c=r/this.$canvas.width;this.clear(),this.drawArea(0,0,this.$canvas.width,this.$canvas.height,this.bgColor),this.areas.forEach((t=>{const e=t.startTime<a?0:Math.floor((t.startTime-a)/c),i=t.endTime>o?this.$canvas.width:Math.floor((t.endTime-a)/c);this.drawArea(e,0,i,this.$canvas.height,t.bgColor||this.areaBgColor)})),S.bind(this)({pointWidth:this.pointWidth,timePerPixel:c,scaleHeight:t(this,k,"f"),scaleSpacing:this.scaleSpacing,timeSpacing:t(this,O,"f"),screenScaleCount:s,startTime:a,drawLine:this.drawLine.bind(this),drawText:this.drawText.bind(this),drawTimelineScale:this.drawTimelineScale.bind(this)}),this.drawLine(h-this.pointWidth/2,this.$canvas.height,this.pointWidth,this.pointColor),this.drawArea(h-52,5,h+52,25,this.pointColor),this.drawText(h-50,20,`${b(this.currentTime,"YYYY/MM/DD HH:mm:ss")}`),this.$canvas.onwheel=this._onZoom.bind(this),this.$canvas.onmousedown=this._onDrag.bind(this)}_onDrag({clientX:i}){e(this,H,!0,"f");let n=0;document.onmousemove=M((e=>{const s=e.clientX-i,r=this.currentTime-t(this,O,"f")/this.scaleSpacing*(s-n);n=s,this.draw({currentTime:Math.round(r),areas:this.areas,_privateFlag:!0})}),1===t(this,O,"f")?100:1e3/this.fps),document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,e(this,H,!1,"f"),this.emit("timeUpdate",this.currentTime)}}_onZoom(i){i.preventDefault();const n=t(this,_,"f").findIndex((e=>e===t(this,O,"f")));i.deltaY<0&&n>0?(e(this,O,t(this,_,"f")[n-1],"f"),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0})):i.deltaY>0&&n<t(this,_,"f").length-1&&(e(this,O,t(this,_,"f")[n+1],"f"),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0}))}_onParentResize(){const t=this.$canvas.parentNode;t&&(this.$canvas.width=t.clientWidth,this.$canvas.height=t.clientHeight,e(this,k,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10},"f"),this.draw({currentTime:this.currentTime,areas:this.areas}))}clear(){this.canvasContext&&this.canvasContext.clearRect(0,0,this.$canvas.width,this.$canvas.height),this.$canvas&&(this.$canvas.onwheel=null,this.$canvas.onmousedown=null)}drawTimelineScale(t){switch(t){case 1:this.drawText(25,12,"1s");break;case 10:this.drawText(25,12,"10s");break;case 30:this.drawText(25,12,"30s");break;case 60:this.drawText(25,12,"1min");break;case 120:this.drawText(25,12,"2min");break;case 300:this.drawText(25,12,"5min");break;case 7200:this.drawText(25,12,"1hour");break;case 86400:this.drawText(25,12,"1day");break;case 604800:this.drawText(25,12,"1week")}this.drawLine(0,0),this.canvasContext.beginPath(),this.canvasContext.moveTo(5,5),this.canvasContext.lineTo(5,10),this.canvasContext.stroke(),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1,this.canvasContext.stroke(),this.canvasContext.closePath(),this.canvasContext.beginPath(),this.canvasContext.moveTo(4,10),this.canvasContext.lineTo(20,10),this.canvasContext.stroke(),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1,this.canvasContext.stroke(),this.canvasContext.closePath(),this.canvasContext.beginPath(),this.canvasContext.moveTo(20,11),this.canvasContext.lineTo(20,5),this.canvasContext.stroke(),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1,this.canvasContext.stroke(),this.canvasContext.closePath()}drawLine(t,e,i=1,n=this.scaleColor){this.canvasContext.beginPath(),this.canvasContext.moveTo(t,this.$canvas.height),this.canvasContext.lineTo(t,this.$canvas.height-e),this.canvasContext.stroke(),this.canvasContext.strokeStyle=n,this.canvasContext.lineWidth=i,this.canvasContext.stroke(),this.canvasContext.closePath()}drawText(t,e,i,n=this.textColor){this.canvasContext.beginPath(),this.canvasContext.fillStyle=n,this.canvasContext.font="12px",this.canvasContext.fillText(i,t,e),this.canvasContext.closePath()}drawArea(t,e,i,n,s){this.canvasContext.beginPath(),this.canvasContext.rect(t,e,i-t,n-e),this.canvasContext.fillStyle=s,this.canvasContext.fill(),this.canvasContext.closePath()}on(e,i){t(this,D,"f").on(e,i)}off(e,i){t(this,D,"f").off(e,i)}emit(...e){t(this,D,"f").emit(...e)}}D=new WeakMap,_=new WeakMap,O=new WeakMap,k=new WeakMap,H=new WeakMap;export{Y as default};
//# sourceMappingURL=timeline.esm.min.js.map

2

lib/utils/time.d.ts
export declare const dateTime: (time: number, format?: string) => string;
export declare const getWeekStartDate: (timestamp?: number) => number;
export declare const getWeekEndDate: (timestamp?: number) => number;

8

package.json
{
"name": "@losting/timeline",
"version": "1.2.2",
"version": "2.0.0",
"description": "canvas timeline",

@@ -10,2 +10,3 @@ "main": "lib/timeline.cjs.min.js",

"dev": "rollup -c -w",
"demo-server": "http-server -p 8080 -o example -c-1",
"build": "rollup -c",

@@ -17,3 +18,5 @@ "test": "jest --no-cache"

"media timeline",
"video timeline"
"video timeline",
"canvas timeline",
"时间轴"
],

@@ -38,2 +41,3 @@ "author": "losting",

"dayjs": "^1.11.2",
"http-server": "^14.1.0",
"jest": "^27.5.1",

@@ -40,0 +44,0 @@ "lodash.throttle": "^4.1.1",

37

README.md
<!--
* @Author: losting
* @Date: 2022-05-07 15:31:25
* @LastEditTime: 2022-05-11 12:24:38
* @LastEditTime: 2022-05-17 19:16:16
* @LastEditors: losting

@@ -10,3 +10,3 @@ * @Description:

# timeline
canvas 时间轴，支持缩放、拖拽
canvas 时间轴，支持缩放、拖拽、无限滚动
![preview](./example/demo.png)

@@ -19,5 +19,4 @@

``` html
<!-- fill为 false 时，canvas元素属性width、height必须设置，不能使用style和css -->
<div id="root" style="width: 100%;height: 70px;">
<canvas id="timeline" style="background-color: rgba(0, 0, 0, .5);"></canvas>
<canvas id="timeline"></canvas>
</div>

@@ -27,11 +26,10 @@ ```

``` JavaScript
import MoeTimeline from '@losting/timeline';
import Timeline from '@losting/timeline';
// new MoeTimeline(canvasId, options)
const timeline = new MoeTimeline('timeline', {
// new Timeline(canvasId, options)
const timeline = new Timeline('timeline', {
fill: true,
});
timeline.draw({
startTime: 1651823833,
endTime: 1651910233,
currentTime: 1651829532,

@@ -57,9 +55,14 @@ areas: [{

| --- | --- | --- | --- |
| width | number | 无 | canvas宽度 |
| width | number | 无 | canvas高度 |
| fill | boolean | false | 是否适应父容器宽高,若为false则需要手动设定canvas宽高 |
| bgColor | string | rgba(0,0,0,0.5) | canvas背景色 |
| textColor | string | #ffffff | 文字颜色 |
| pointColor | string | #ffffff | 刻度颜色 |
| areaColor | string | #ffffff55 | 阴影区域背景颜色 |
| centerTimePointColor | string | #00aeec | 当前时间指针颜色 |
| centerTimePointWidth | number | 3 | 当前时间指针宽度 |
| spacing | number | 5 | 刻度间距 |
| fill | boolean | false | 是否适应父容器宽高 |
| scaleColor | string | #ffffff | 刻度颜色 |
| scaleSpacing | number | 7 | 刻度间距 |
| areaBgColor | string | #ffffff55 | 阴影区域背景颜色 |
| pointColor | string | #00aeec | 当前时间指针颜色 |
| pointWidth | number | 3 | 当前时间指针宽度 |
| fps | number | 60 | 绘制帧率。数字越大越流畅，建议不要大于90 |
| zoom | number | 2 | 缩放比，1~9之间的正整数 |

@@ -77,5 +80,3 @@

| --- | --- | --- | --- |
| startTime | number | 是 | 时间轴起始时间 |
| endTime | number | 是 | 时间轴终止时间 |
| currentTime | number | 否 | 当前所在时间，默认为起始时间 |
| currentTime | number | 否 | 当前所在时间，默认为当前时间 |
| areas | array | 否 | 阴影区域 |

@@ -82,0 +83,0 @@ 

lib/timeline.cjs.min.js.map

Sorry, the diff of this file is not supported yet

lib/timeline.esm.min.js.map

Sorry, the diff of this file is not supported yet

pnpm-lock.yaml

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc