@ezuikit/player-theme 0.0.1-alpha.6 → 1.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +145 -1405
- package/dist/index.mjs +145 -1405
- package/dist/index.umd.js +619 -1292
- package/dist/style.css +1 -1
- package/dist/style.js +2 -2
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/player-theme
|
|
3
|
-
* Copyright (c) 2025-10-
|
|
2
|
+
* @ezuikit/player-theme v1.0.0-beta.1
|
|
3
|
+
* Copyright (c) 2025-10-27 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
6
|
'use strict';
|
|
@@ -15,6 +15,7 @@ var utilsTools = require('@ezuikit/utils-tools');
|
|
|
15
15
|
var screenfull = require('screenfull');
|
|
16
16
|
var I18n = require('@ezuikit/utils-i18n');
|
|
17
17
|
var Logger = require('@ezuikit/utils-logger');
|
|
18
|
+
var controlTimeLine = require('@ezuikit/control-time-line');
|
|
18
19
|
|
|
19
20
|
/**
|
|
20
21
|
* 播放器的类名前缀
|
|
@@ -386,8 +387,8 @@ function getLocale(locales, language = 'zh') {
|
|
|
386
387
|
}
|
|
387
388
|
}
|
|
388
389
|
|
|
389
|
-
function _extends$
|
|
390
|
-
_extends$
|
|
390
|
+
function _extends$q() {
|
|
391
|
+
_extends$q = Object.assign || function(target) {
|
|
391
392
|
for(var i = 1; i < arguments.length; i++){
|
|
392
393
|
var source = arguments[i];
|
|
393
394
|
for(var key in source){
|
|
@@ -398,7 +399,7 @@ function _extends$r() {
|
|
|
398
399
|
}
|
|
399
400
|
return target;
|
|
400
401
|
};
|
|
401
|
-
return _extends$
|
|
402
|
+
return _extends$q.apply(this, arguments);
|
|
402
403
|
}
|
|
403
404
|
const LOADING_DEFAULT_OPTIONS = {};
|
|
404
405
|
/**
|
|
@@ -438,7 +439,7 @@ const LOADING_DEFAULT_OPTIONS = {};
|
|
|
438
439
|
this.$popupContainer.classList.remove(`${PREFIX_CLASS}-has-loading`);
|
|
439
440
|
}
|
|
440
441
|
constructor(options = {}){
|
|
441
|
-
super(Object.assign({}, LOADING_DEFAULT_OPTIONS, _extends$
|
|
442
|
+
super(Object.assign({}, LOADING_DEFAULT_OPTIONS, _extends$q({}, options, {
|
|
442
443
|
tagName: 'div',
|
|
443
444
|
controlType: 'block',
|
|
444
445
|
classNameSuffix: 'loading'
|
|
@@ -449,8 +450,8 @@ const LOADING_DEFAULT_OPTIONS = {};
|
|
|
449
450
|
}
|
|
450
451
|
}
|
|
451
452
|
|
|
452
|
-
function _extends$
|
|
453
|
-
_extends$
|
|
453
|
+
function _extends$p() {
|
|
454
|
+
_extends$p = Object.assign || function(target) {
|
|
454
455
|
for(var i = 1; i < arguments.length; i++){
|
|
455
456
|
var source = arguments[i];
|
|
456
457
|
for(var key in source){
|
|
@@ -461,7 +462,7 @@ function _extends$q() {
|
|
|
461
462
|
}
|
|
462
463
|
return target;
|
|
463
464
|
};
|
|
464
|
-
return _extends$
|
|
465
|
+
return _extends$p.apply(this, arguments);
|
|
465
466
|
}
|
|
466
467
|
// 不放在服务器上 是因为有可能http加载失败
|
|
467
468
|
// prettier-ignore
|
|
@@ -520,7 +521,7 @@ const POSTER_OPTIONS = {
|
|
|
520
521
|
super.destroy();
|
|
521
522
|
}
|
|
522
523
|
constructor(options = {}){
|
|
523
|
-
super(Object.assign({}, POSTER_OPTIONS, _extends$
|
|
524
|
+
super(Object.assign({}, POSTER_OPTIONS, _extends$p({}, options, {
|
|
524
525
|
tagName: 'div',
|
|
525
526
|
controlType: 'block',
|
|
526
527
|
classNameSuffix: 'poster'
|
|
@@ -755,8 +756,8 @@ const IconComponents = {
|
|
|
755
756
|
reduce: (attr = {})=>createIcon(Icons.reduce, 'reduce', attr)
|
|
756
757
|
};
|
|
757
758
|
|
|
758
|
-
function _extends$
|
|
759
|
-
_extends$
|
|
759
|
+
function _extends$o() {
|
|
760
|
+
_extends$o = Object.assign || function(target) {
|
|
760
761
|
for(var i = 1; i < arguments.length; i++){
|
|
761
762
|
var source = arguments[i];
|
|
762
763
|
for(var key in source){
|
|
@@ -767,7 +768,7 @@ function _extends$p() {
|
|
|
767
768
|
}
|
|
768
769
|
return target;
|
|
769
770
|
};
|
|
770
|
-
return _extends$
|
|
771
|
+
return _extends$o.apply(this, arguments);
|
|
771
772
|
}
|
|
772
773
|
const MESSAGE_DEFAULT_OPTIONS = {};
|
|
773
774
|
/**
|
|
@@ -892,7 +893,7 @@ const MESSAGE_DEFAULT_OPTIONS = {};
|
|
|
892
893
|
return icon;
|
|
893
894
|
}
|
|
894
895
|
constructor(options = {}){
|
|
895
|
-
super(Object.assign({}, MESSAGE_DEFAULT_OPTIONS, _extends$
|
|
896
|
+
super(Object.assign({}, MESSAGE_DEFAULT_OPTIONS, _extends$o({}, options, {
|
|
896
897
|
tagName: 'div',
|
|
897
898
|
controlType: 'block'
|
|
898
899
|
})));
|
|
@@ -901,8 +902,8 @@ const MESSAGE_DEFAULT_OPTIONS = {};
|
|
|
901
902
|
}
|
|
902
903
|
}
|
|
903
904
|
|
|
904
|
-
function _extends$
|
|
905
|
-
_extends$
|
|
905
|
+
function _extends$n() {
|
|
906
|
+
_extends$n = Object.assign || function(target) {
|
|
906
907
|
for(var i = 1; i < arguments.length; i++){
|
|
907
908
|
var source = arguments[i];
|
|
908
909
|
for(var key in source){
|
|
@@ -913,7 +914,7 @@ function _extends$o() {
|
|
|
913
914
|
}
|
|
914
915
|
return target;
|
|
915
916
|
};
|
|
916
|
-
return _extends$
|
|
917
|
+
return _extends$n.apply(this, arguments);
|
|
917
918
|
}
|
|
918
919
|
/**
|
|
919
920
|
* 播放/暂停控件
|
|
@@ -946,7 +947,7 @@ function _extends$o() {
|
|
|
946
947
|
}
|
|
947
948
|
}
|
|
948
949
|
constructor(options){
|
|
949
|
-
super(_extends$
|
|
950
|
+
super(_extends$n({}, options, {
|
|
950
951
|
tagName: 'span',
|
|
951
952
|
controlType: 'button',
|
|
952
953
|
classNameSuffix: 'play'
|
|
@@ -1456,8 +1457,8 @@ const PROGRESS_DEFAULT_OPTIONS = {
|
|
|
1456
1457
|
}
|
|
1457
1458
|
}
|
|
1458
1459
|
|
|
1459
|
-
function _extends$
|
|
1460
|
-
_extends$
|
|
1460
|
+
function _extends$m() {
|
|
1461
|
+
_extends$m = Object.assign || function(target) {
|
|
1461
1462
|
for(var i = 1; i < arguments.length; i++){
|
|
1462
1463
|
var source = arguments[i];
|
|
1463
1464
|
for(var key in source){
|
|
@@ -1468,7 +1469,7 @@ function _extends$n() {
|
|
|
1468
1469
|
}
|
|
1469
1470
|
return target;
|
|
1470
1471
|
};
|
|
1471
|
-
return _extends$
|
|
1472
|
+
return _extends$m.apply(this, arguments);
|
|
1472
1473
|
}
|
|
1473
1474
|
const VOLUME_DEFAULT_OPTIONS = {
|
|
1474
1475
|
volume: 0.8,
|
|
@@ -1613,7 +1614,7 @@ const VOLUME_DEFAULT_OPTIONS = {
|
|
|
1613
1614
|
}
|
|
1614
1615
|
constructor(options = {}){
|
|
1615
1616
|
var _this__options_props, _this__options_props1, _this__options_props2, _this__options_props3;
|
|
1616
|
-
super(_extends$
|
|
1617
|
+
super(_extends$m({}, options, {
|
|
1617
1618
|
tagName: 'span',
|
|
1618
1619
|
classNameSuffix: 'volume',
|
|
1619
1620
|
controlType: 'button'
|
|
@@ -1629,8 +1630,7 @@ const VOLUME_DEFAULT_OPTIONS = {
|
|
|
1629
1630
|
// 轻应用私有暂时不支持调节音量
|
|
1630
1631
|
if (!(Utils.isMobile || this._options.PLAY_TYPE === 'ezopen')) {
|
|
1631
1632
|
var _this__options_props4, _this__options_props5;
|
|
1632
|
-
this.picker = new Picker({
|
|
1633
|
-
container: this.$container,
|
|
1633
|
+
this.picker = new Picker(this.$container, {
|
|
1634
1634
|
getPopupContainer: ()=>this.$container,
|
|
1635
1635
|
trigger: this._options.trigger,
|
|
1636
1636
|
// trigger: "click",
|
|
@@ -1942,8 +1942,8 @@ const __fullscreenProvider__ = Provider.getInstance();
|
|
|
1942
1942
|
}
|
|
1943
1943
|
};
|
|
1944
1944
|
|
|
1945
|
-
function _extends$
|
|
1946
|
-
_extends$
|
|
1945
|
+
function _extends$l() {
|
|
1946
|
+
_extends$l = Object.assign || function(target) {
|
|
1947
1947
|
for(var i = 1; i < arguments.length; i++){
|
|
1948
1948
|
var source = arguments[i];
|
|
1949
1949
|
for(var key in source){
|
|
@@ -1954,7 +1954,7 @@ function _extends$m() {
|
|
|
1954
1954
|
}
|
|
1955
1955
|
return target;
|
|
1956
1956
|
};
|
|
1957
|
-
return _extends$
|
|
1957
|
+
return _extends$l.apply(this, arguments);
|
|
1958
1958
|
}
|
|
1959
1959
|
/**
|
|
1960
1960
|
* 全屏控件
|
|
@@ -2003,7 +2003,7 @@ function _extends$m() {
|
|
|
2003
2003
|
_event() {}
|
|
2004
2004
|
constructor(options){
|
|
2005
2005
|
var _options_props, _this_options;
|
|
2006
|
-
super(_extends$
|
|
2006
|
+
super(_extends$l({
|
|
2007
2007
|
tagName: 'span',
|
|
2008
2008
|
classNameSuffix: 'fullscreen',
|
|
2009
2009
|
controlType: 'button'
|
|
@@ -2024,8 +2024,8 @@ function _extends$m() {
|
|
|
2024
2024
|
}
|
|
2025
2025
|
}
|
|
2026
2026
|
|
|
2027
|
-
function _extends$
|
|
2028
|
-
_extends$
|
|
2027
|
+
function _extends$k() {
|
|
2028
|
+
_extends$k = Object.assign || function(target) {
|
|
2029
2029
|
for(var i = 1; i < arguments.length; i++){
|
|
2030
2030
|
var source = arguments[i];
|
|
2031
2031
|
for(var key in source){
|
|
@@ -2036,7 +2036,7 @@ function _extends$l() {
|
|
|
2036
2036
|
}
|
|
2037
2037
|
return target;
|
|
2038
2038
|
};
|
|
2039
|
-
return _extends$
|
|
2039
|
+
return _extends$k.apply(this, arguments);
|
|
2040
2040
|
}
|
|
2041
2041
|
/**
|
|
2042
2042
|
* 回放类型切换(本地回放(sdk 卡), 云存储回放, 云录制回放)控件
|
|
@@ -2119,7 +2119,7 @@ function _extends$l() {
|
|
|
2119
2119
|
*/ _onControlClick(e) {}
|
|
2120
2120
|
constructor(options){
|
|
2121
2121
|
var _options_props;
|
|
2122
|
-
super(_extends$
|
|
2122
|
+
super(_extends$k({}, options, {
|
|
2123
2123
|
tagName: 'div',
|
|
2124
2124
|
controlType: 'block',
|
|
2125
2125
|
classNameSuffix: 'rec'
|
|
@@ -3237,8 +3237,8 @@ var en = {
|
|
|
3237
3237
|
}
|
|
3238
3238
|
}
|
|
3239
3239
|
|
|
3240
|
-
function _extends$
|
|
3241
|
-
_extends$
|
|
3240
|
+
function _extends$j() {
|
|
3241
|
+
_extends$j = Object.assign || function(target) {
|
|
3242
3242
|
for(var i = 1; i < arguments.length; i++){
|
|
3243
3243
|
var source = arguments[i];
|
|
3244
3244
|
for(var key in source){
|
|
@@ -3249,7 +3249,7 @@ function _extends$k() {
|
|
|
3249
3249
|
}
|
|
3250
3250
|
return target;
|
|
3251
3251
|
};
|
|
3252
|
-
return _extends$
|
|
3252
|
+
return _extends$j.apply(this, arguments);
|
|
3253
3253
|
}
|
|
3254
3254
|
/**
|
|
3255
3255
|
* 更多控件
|
|
@@ -3262,8 +3262,7 @@ function _extends$k() {
|
|
|
3262
3262
|
}) : IconComponents.moreDot({
|
|
3263
3263
|
title: (_this_locale1 = this.locale) == null ? void 0 : _this_locale1.BTN_MORE
|
|
3264
3264
|
});
|
|
3265
|
-
this.picker = new Picker({
|
|
3266
|
-
container: this.$container,
|
|
3265
|
+
this.picker = new Picker(this.$container, {
|
|
3267
3266
|
getPopupContainer: ()=>this.$container,
|
|
3268
3267
|
trigger: Utils.isMobile ? 'click' : 'hover',
|
|
3269
3268
|
wrapClassName: `${PREFIX_CLASS}-more ${this.options.wrapClassName}`,
|
|
@@ -3320,7 +3319,7 @@ function _extends$k() {
|
|
|
3320
3319
|
// this._options.onClick?.(e);
|
|
3321
3320
|
}
|
|
3322
3321
|
constructor(options){
|
|
3323
|
-
super(_extends$
|
|
3322
|
+
super(_extends$j({}, options, {
|
|
3324
3323
|
tagName: 'span',
|
|
3325
3324
|
controlType: 'button',
|
|
3326
3325
|
classNameSuffix: 'more'
|
|
@@ -3784,8 +3783,8 @@ const ignoreList = [
|
|
|
3784
3783
|
if (theme.$container) theme.$container.style.cssText += cssText;
|
|
3785
3784
|
}
|
|
3786
3785
|
|
|
3787
|
-
function _extends$
|
|
3788
|
-
_extends$
|
|
3786
|
+
function _extends$i() {
|
|
3787
|
+
_extends$i = Object.assign || function(target) {
|
|
3789
3788
|
for(var i = 1; i < arguments.length; i++){
|
|
3790
3789
|
var source = arguments[i];
|
|
3791
3790
|
for(var key in source){
|
|
@@ -3796,7 +3795,7 @@ function _extends$j() {
|
|
|
3796
3795
|
}
|
|
3797
3796
|
return target;
|
|
3798
3797
|
};
|
|
3799
|
-
return _extends$
|
|
3798
|
+
return _extends$i.apply(this, arguments);
|
|
3800
3799
|
}
|
|
3801
3800
|
const ZOOM_DEFAULT_OPTIONS = {
|
|
3802
3801
|
open: false,
|
|
@@ -3905,7 +3904,7 @@ const ZOOM_DEFAULT_OPTIONS = {
|
|
|
3905
3904
|
super._onControlClick(e);
|
|
3906
3905
|
}
|
|
3907
3906
|
constructor(options){
|
|
3908
|
-
super(_extends$
|
|
3907
|
+
super(_extends$i({}, options, {
|
|
3909
3908
|
tagName: 'span',
|
|
3910
3909
|
controlType: 'button',
|
|
3911
3910
|
classNameSuffix: 'zoom'
|
|
@@ -4597,8 +4596,8 @@ const ZOOM_DEFAULT_OPTIONS = {
|
|
|
4597
4596
|
}
|
|
4598
4597
|
Zoom.VERSION = '0.0.2';
|
|
4599
4598
|
|
|
4600
|
-
function _extends$
|
|
4601
|
-
_extends$
|
|
4599
|
+
function _extends$h() {
|
|
4600
|
+
_extends$h = Object.assign || function(target) {
|
|
4602
4601
|
for(var i = 1; i < arguments.length; i++){
|
|
4603
4602
|
var source = arguments[i];
|
|
4604
4603
|
for(var key in source){
|
|
@@ -4609,10 +4608,10 @@ function _extends$i() {
|
|
|
4609
4608
|
}
|
|
4610
4609
|
return target;
|
|
4611
4610
|
};
|
|
4612
|
-
return _extends$
|
|
4611
|
+
return _extends$h.apply(this, arguments);
|
|
4613
4612
|
}
|
|
4614
4613
|
function __zoom(theme, container, options) {
|
|
4615
|
-
theme.zoomUtil = new Zoom(container, _extends$
|
|
4614
|
+
theme.zoomUtil = new Zoom(container, _extends$h({}, options || {}, {
|
|
4616
4615
|
min: 1,
|
|
4617
4616
|
onChange: (zoom, reset)=>{
|
|
4618
4617
|
if (zoom !== theme._zoom) {
|
|
@@ -4718,8 +4717,8 @@ function _async_to_generator$5(fn) {
|
|
|
4718
4717
|
});
|
|
4719
4718
|
};
|
|
4720
4719
|
}
|
|
4721
|
-
function _extends$
|
|
4722
|
-
_extends$
|
|
4720
|
+
function _extends$g() {
|
|
4721
|
+
_extends$g = Object.assign || function(target) {
|
|
4723
4722
|
for(var i = 1; i < arguments.length; i++){
|
|
4724
4723
|
var source = arguments[i];
|
|
4725
4724
|
for(var key in source){
|
|
@@ -4730,7 +4729,7 @@ function _extends$h() {
|
|
|
4730
4729
|
}
|
|
4731
4730
|
return target;
|
|
4732
4731
|
};
|
|
4733
|
-
return _extends$
|
|
4732
|
+
return _extends$g.apply(this, arguments);
|
|
4734
4733
|
}
|
|
4735
4734
|
/** 兼容 themeData中不规范的 key */ const replaceKey = {
|
|
4736
4735
|
sound: 'volume',
|
|
@@ -4767,7 +4766,7 @@ function _extends$h() {
|
|
|
4767
4766
|
}
|
|
4768
4767
|
if (item.isrender === 1 && REC_GROUP.includes(item.iconId)) {
|
|
4769
4768
|
// TODO: 因为回放是一组, 位置以第一个位置为准
|
|
4770
|
-
recControls.push(recControls[0] ? _extends$
|
|
4769
|
+
recControls.push(recControls[0] ? _extends$g({}, item, {
|
|
4771
4770
|
part: recControls[0].part
|
|
4772
4771
|
}) : item);
|
|
4773
4772
|
return false;
|
|
@@ -4790,7 +4789,7 @@ function _extends$h() {
|
|
|
4790
4789
|
}
|
|
4791
4790
|
if (item.isrender === 1 && REC_GROUP.includes(item.iconId)) {
|
|
4792
4791
|
// TODO: 因为回放是一组, 位置以第一个位置为准
|
|
4793
|
-
recControls.push(recControls[0] ? _extends$
|
|
4792
|
+
recControls.push(recControls[0] ? _extends$g({}, item, {
|
|
4794
4793
|
part: recControls[0].part
|
|
4795
4794
|
}) : item);
|
|
4796
4795
|
return false;
|
|
@@ -4981,8 +4980,8 @@ function rgbOrHexToRgbaWithOpacity(color, opacity = 0.8) {
|
|
|
4981
4980
|
}
|
|
4982
4981
|
}
|
|
4983
4982
|
|
|
4984
|
-
function _extends$
|
|
4985
|
-
_extends$
|
|
4983
|
+
function _extends$f() {
|
|
4984
|
+
_extends$f = Object.assign || function(target) {
|
|
4986
4985
|
for(var i = 1; i < arguments.length; i++){
|
|
4987
4986
|
var source = arguments[i];
|
|
4988
4987
|
for(var key in source){
|
|
@@ -4993,18 +4992,18 @@ function _extends$g() {
|
|
|
4993
4992
|
}
|
|
4994
4993
|
return target;
|
|
4995
4994
|
};
|
|
4996
|
-
return _extends$
|
|
4995
|
+
return _extends$f.apply(this, arguments);
|
|
4997
4996
|
}
|
|
4998
4997
|
class Footer extends Component {
|
|
4999
4998
|
constructor(options = {}){
|
|
5000
|
-
super(_extends$
|
|
4999
|
+
super(_extends$f({}, options, {
|
|
5001
5000
|
cType: 'footer'
|
|
5002
5001
|
}));
|
|
5003
5002
|
}
|
|
5004
5003
|
}
|
|
5005
5004
|
|
|
5006
|
-
function _extends$
|
|
5007
|
-
_extends$
|
|
5005
|
+
function _extends$e() {
|
|
5006
|
+
_extends$e = Object.assign || function(target) {
|
|
5008
5007
|
for(var i = 1; i < arguments.length; i++){
|
|
5009
5008
|
var source = arguments[i];
|
|
5010
5009
|
for(var key in source){
|
|
@@ -5015,11 +5014,11 @@ function _extends$f() {
|
|
|
5015
5014
|
}
|
|
5016
5015
|
return target;
|
|
5017
5016
|
};
|
|
5018
|
-
return _extends$
|
|
5017
|
+
return _extends$e.apply(this, arguments);
|
|
5019
5018
|
}
|
|
5020
5019
|
class Header extends Component {
|
|
5021
5020
|
constructor(options = {}){
|
|
5022
|
-
super(_extends$
|
|
5021
|
+
super(_extends$e({}, options, {
|
|
5023
5022
|
cType: 'header'
|
|
5024
5023
|
}));
|
|
5025
5024
|
}
|
|
@@ -5183,8 +5182,8 @@ function interactiveHF($container, second = 3000, callback) {
|
|
|
5183
5182
|
};
|
|
5184
5183
|
}
|
|
5185
5184
|
|
|
5186
|
-
function _extends$
|
|
5187
|
-
_extends$
|
|
5185
|
+
function _extends$d() {
|
|
5186
|
+
_extends$d = Object.assign || function(target) {
|
|
5188
5187
|
for(var i = 1; i < arguments.length; i++){
|
|
5189
5188
|
var source = arguments[i];
|
|
5190
5189
|
for(var key in source){
|
|
@@ -5195,7 +5194,7 @@ function _extends$e() {
|
|
|
5195
5194
|
}
|
|
5196
5195
|
return target;
|
|
5197
5196
|
};
|
|
5198
|
-
return _extends$
|
|
5197
|
+
return _extends$d.apply(this, arguments);
|
|
5199
5198
|
}
|
|
5200
5199
|
/**
|
|
5201
5200
|
* 全局全屏
|
|
@@ -5225,15 +5224,15 @@ function _extends$e() {
|
|
|
5225
5224
|
}
|
|
5226
5225
|
}
|
|
5227
5226
|
constructor(options){
|
|
5228
|
-
super(_extends$
|
|
5227
|
+
super(_extends$d({}, options, {
|
|
5229
5228
|
controlType: 'button',
|
|
5230
5229
|
classNameSuffix: 'global-fullscreen'
|
|
5231
5230
|
}));
|
|
5232
5231
|
}
|
|
5233
5232
|
}
|
|
5234
5233
|
|
|
5235
|
-
function _extends$
|
|
5236
|
-
_extends$
|
|
5234
|
+
function _extends$c() {
|
|
5235
|
+
_extends$c = Object.assign || function(target) {
|
|
5237
5236
|
for(var i = 1; i < arguments.length; i++){
|
|
5238
5237
|
var source = arguments[i];
|
|
5239
5238
|
for(var key in source){
|
|
@@ -5244,7 +5243,7 @@ function _extends$d() {
|
|
|
5244
5243
|
}
|
|
5245
5244
|
return target;
|
|
5246
5245
|
};
|
|
5247
|
-
return _extends$
|
|
5246
|
+
return _extends$c.apply(this, arguments);
|
|
5248
5247
|
}
|
|
5249
5248
|
/**
|
|
5250
5249
|
* 截图控件,点击后会触发截图事件, 截图数据会通过 onCapture 回调函数返回
|
|
@@ -5287,7 +5286,7 @@ function _extends$d() {
|
|
|
5287
5286
|
super._onControlClick(e);
|
|
5288
5287
|
}
|
|
5289
5288
|
constructor(options){
|
|
5290
|
-
super(_extends$
|
|
5289
|
+
super(_extends$c({}, options, {
|
|
5291
5290
|
tagName: 'span',
|
|
5292
5291
|
classNameSuffix: 'capture-picture'
|
|
5293
5292
|
})), this._timer = null;
|
|
@@ -6065,8 +6064,8 @@ function _async_to_generator$4(fn) {
|
|
|
6065
6064
|
}
|
|
6066
6065
|
};
|
|
6067
6066
|
|
|
6068
|
-
function _extends$
|
|
6069
|
-
_extends$
|
|
6067
|
+
function _extends$b() {
|
|
6068
|
+
_extends$b = Object.assign || function(target) {
|
|
6070
6069
|
for(var i = 1; i < arguments.length; i++){
|
|
6071
6070
|
var source = arguments[i];
|
|
6072
6071
|
for(var key in source){
|
|
@@ -6077,7 +6076,7 @@ function _extends$c() {
|
|
|
6077
6076
|
}
|
|
6078
6077
|
return target;
|
|
6079
6078
|
};
|
|
6080
|
-
return _extends$
|
|
6079
|
+
return _extends$b.apply(this, arguments);
|
|
6081
6080
|
}
|
|
6082
6081
|
/**
|
|
6083
6082
|
* 云台控件
|
|
@@ -6115,7 +6114,7 @@ function _extends$c() {
|
|
|
6115
6114
|
this.$turntable.classList.add(`${PREFIX_CLASS}-ptz-turntable`);
|
|
6116
6115
|
this.$panel.appendChild(this.$turntable);
|
|
6117
6116
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
6118
|
-
this._ptzControl = new Ptz$1(this.$turntable, _extends$
|
|
6117
|
+
this._ptzControl = new Ptz$1(this.$turntable, _extends$b({}, this._options, {
|
|
6119
6118
|
onSpeedChange: this._onSpeedChange.bind(this),
|
|
6120
6119
|
onDirection: this._onDirection.bind(this)
|
|
6121
6120
|
}));
|
|
@@ -6124,7 +6123,7 @@ function _extends$c() {
|
|
|
6124
6123
|
}
|
|
6125
6124
|
renderMobileExtend($container) {
|
|
6126
6125
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
6127
|
-
if (!this._ptzControl1) this._ptzControl1 = new MobilePtz($container, _extends$
|
|
6126
|
+
if (!this._ptzControl1) this._ptzControl1 = new MobilePtz($container, _extends$b({}, this._options, {
|
|
6128
6127
|
onSpeedChange: this._onSpeedChange.bind(this),
|
|
6129
6128
|
onDirection: this._onDirection.bind(this)
|
|
6130
6129
|
}));
|
|
@@ -6192,7 +6191,7 @@ function _extends$c() {
|
|
|
6192
6191
|
this.active = false;
|
|
6193
6192
|
}
|
|
6194
6193
|
constructor(options){
|
|
6195
|
-
super(_extends$
|
|
6194
|
+
super(_extends$b({}, options, {
|
|
6196
6195
|
tagName: 'span',
|
|
6197
6196
|
controlType: 'button',
|
|
6198
6197
|
classNameSuffix: 'ptz'
|
|
@@ -6211,8 +6210,8 @@ function formatTime(seconds, format = 'MM:SS') {
|
|
|
6211
6210
|
return format.replace('HH', pad(hours)).replace('MM', pad(minutes)).replace('SS', pad(secs));
|
|
6212
6211
|
}
|
|
6213
6212
|
|
|
6214
|
-
function _extends$
|
|
6215
|
-
_extends$
|
|
6213
|
+
function _extends$a() {
|
|
6214
|
+
_extends$a = Object.assign || function(target) {
|
|
6216
6215
|
for(var i = 1; i < arguments.length; i++){
|
|
6217
6216
|
var source = arguments[i];
|
|
6218
6217
|
for(var key in source){
|
|
@@ -6223,7 +6222,7 @@ function _extends$b() {
|
|
|
6223
6222
|
}
|
|
6224
6223
|
return target;
|
|
6225
6224
|
};
|
|
6226
|
-
return _extends$
|
|
6225
|
+
return _extends$a.apply(this, arguments);
|
|
6227
6226
|
}
|
|
6228
6227
|
const RECORD_DEFAULT_OPTIONS = {
|
|
6229
6228
|
maxDuration: 3600
|
|
@@ -6318,7 +6317,7 @@ const RECORD_DEFAULT_OPTIONS = {
|
|
|
6318
6317
|
super._onControlClick(e);
|
|
6319
6318
|
}
|
|
6320
6319
|
constructor(options){
|
|
6321
|
-
super(_extends$
|
|
6320
|
+
super(_extends$a({}, options, {
|
|
6322
6321
|
tagName: 'span',
|
|
6323
6322
|
controlType: 'button',
|
|
6324
6323
|
classNameSuffix: 'record'
|
|
@@ -6357,8 +6356,8 @@ function _async_to_generator$3(fn) {
|
|
|
6357
6356
|
});
|
|
6358
6357
|
};
|
|
6359
6358
|
}
|
|
6360
|
-
function _extends$
|
|
6361
|
-
_extends$
|
|
6359
|
+
function _extends$9() {
|
|
6360
|
+
_extends$9 = Object.assign || function(target) {
|
|
6362
6361
|
for(var i = 1; i < arguments.length; i++){
|
|
6363
6362
|
var source = arguments[i];
|
|
6364
6363
|
for(var key in source){
|
|
@@ -6369,7 +6368,7 @@ function _extends$a() {
|
|
|
6369
6368
|
}
|
|
6370
6369
|
return target;
|
|
6371
6370
|
};
|
|
6372
|
-
return _extends$
|
|
6371
|
+
return _extends$9.apply(this, arguments);
|
|
6373
6372
|
}
|
|
6374
6373
|
/**
|
|
6375
6374
|
* 对讲控件
|
|
@@ -6447,7 +6446,7 @@ function _extends$a() {
|
|
|
6447
6446
|
}).call(this);
|
|
6448
6447
|
}
|
|
6449
6448
|
constructor(options){
|
|
6450
|
-
super(_extends$
|
|
6449
|
+
super(_extends$9({}, options, {
|
|
6451
6450
|
tagName: 'span',
|
|
6452
6451
|
controlType: 'button',
|
|
6453
6452
|
classNameSuffix: 'talk'
|
|
@@ -6468,8 +6467,8 @@ function _extends$a() {
|
|
|
6468
6467
|
}
|
|
6469
6468
|
}
|
|
6470
6469
|
|
|
6471
|
-
function _extends$
|
|
6472
|
-
_extends$
|
|
6470
|
+
function _extends$8() {
|
|
6471
|
+
_extends$8 = Object.assign || function(target) {
|
|
6473
6472
|
for(var i = 1; i < arguments.length; i++){
|
|
6474
6473
|
var source = arguments[i];
|
|
6475
6474
|
for(var key in source){
|
|
@@ -6480,7 +6479,7 @@ function _extends$9() {
|
|
|
6480
6479
|
}
|
|
6481
6480
|
return target;
|
|
6482
6481
|
};
|
|
6483
|
-
return _extends$
|
|
6482
|
+
return _extends$8.apply(this, arguments);
|
|
6484
6483
|
}
|
|
6485
6484
|
const SELECT_DEFAULT_OPTIONS = {
|
|
6486
6485
|
fieldNames: {
|
|
@@ -6679,7 +6678,7 @@ const SELECT_DEFAULT_OPTIONS = {
|
|
|
6679
6678
|
}
|
|
6680
6679
|
constructor(options){
|
|
6681
6680
|
var _this__options_fieldNames, _this__picker_$body;
|
|
6682
|
-
super(_extends$
|
|
6681
|
+
super(_extends$8({
|
|
6683
6682
|
tagName: 'span',
|
|
6684
6683
|
type: 'button',
|
|
6685
6684
|
controlType: 'button'
|
|
@@ -6693,8 +6692,7 @@ const SELECT_DEFAULT_OPTIONS = {
|
|
|
6693
6692
|
}
|
|
6694
6693
|
var _this__options_fieldNames_value;
|
|
6695
6694
|
const valueKey = (_this__options_fieldNames_value = (_this__options_fieldNames = this._options.fieldNames) == null ? void 0 : _this__options_fieldNames.value) != null ? _this__options_fieldNames_value : 'value';
|
|
6696
|
-
this._picker = new Picker({
|
|
6697
|
-
container: this.$container,
|
|
6695
|
+
this._picker = new Picker(this.$container, {
|
|
6698
6696
|
// 由于某些原因, 移动端强制渲染在 body 上
|
|
6699
6697
|
getPopupContainer: ()=>Utils.isMobile ? options.rootContainer : this.$container,
|
|
6700
6698
|
trigger: Utils.isMobile ? 'click' : 'hover',
|
|
@@ -6722,8 +6720,8 @@ const SELECT_DEFAULT_OPTIONS = {
|
|
|
6722
6720
|
}
|
|
6723
6721
|
}
|
|
6724
6722
|
|
|
6725
|
-
function _extends$
|
|
6726
|
-
_extends$
|
|
6723
|
+
function _extends$7() {
|
|
6724
|
+
_extends$7 = Object.assign || function(target) {
|
|
6727
6725
|
for(var i = 1; i < arguments.length; i++){
|
|
6728
6726
|
var source = arguments[i];
|
|
6729
6727
|
for(var key in source){
|
|
@@ -6734,7 +6732,7 @@ function _extends$8() {
|
|
|
6734
6732
|
}
|
|
6735
6733
|
return target;
|
|
6736
6734
|
};
|
|
6737
|
-
return _extends$
|
|
6735
|
+
return _extends$7.apply(this, arguments);
|
|
6738
6736
|
}
|
|
6739
6737
|
const DEFINITION_LEVELS_LOCALE = [
|
|
6740
6738
|
'VIDEO_LEVEL_FLUENT',
|
|
@@ -6787,7 +6785,7 @@ function __filter(list, locale = {}) {
|
|
|
6787
6785
|
}
|
|
6788
6786
|
constructor(options = {}){
|
|
6789
6787
|
var _options_props, _options_props1, _options_locales_options_language;
|
|
6790
|
-
super(_extends$
|
|
6788
|
+
super(_extends$7({}, DEFINITION_DEFAULT_OPTIONS, {
|
|
6791
6789
|
value: (_options_props = options.props) == null ? void 0 : _options_props.videoLevel
|
|
6792
6790
|
}, options, {
|
|
6793
6791
|
fieldNames: {
|
|
@@ -6799,14 +6797,12 @@ function __filter(list, locale = {}) {
|
|
|
6799
6797
|
controlType: 'button',
|
|
6800
6798
|
classNameSuffix: 'definition',
|
|
6801
6799
|
renderLabel: (label, item, list)=>{
|
|
6802
|
-
var _list_;
|
|
6803
6800
|
if ((item == null ? void 0 : item.level) === 'auto') {
|
|
6804
6801
|
var _options_locales_options_language;
|
|
6805
|
-
const
|
|
6806
|
-
return `<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(
|
|
6802
|
+
const realIitem = list.find((it)=>it.level === this._level);
|
|
6803
|
+
return `<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realIitem == null ? void 0 : realIitem.name) || ''})</span>`;
|
|
6807
6804
|
}
|
|
6808
|
-
|
|
6809
|
-
return `<span>${label || ((_list_ = list[0]) == null ? void 0 : _list_.label) || ''}</span>`;
|
|
6805
|
+
return `<span>${label}</span>`;
|
|
6810
6806
|
},
|
|
6811
6807
|
onChange: (value, item)=>{
|
|
6812
6808
|
var _options_onChange;
|
|
@@ -6833,9 +6829,9 @@ function __filter(list, locale = {}) {
|
|
|
6833
6829
|
this._level = realLevel + '';
|
|
6834
6830
|
if (l === 'auto') {
|
|
6835
6831
|
var _options_locales_options_language;
|
|
6836
|
-
const
|
|
6832
|
+
const realIitem = this.list.find((it)=>it.level === this._level);
|
|
6837
6833
|
this.$container.querySelector(`.${PREFIX_CLASS}-select-btn`).innerHTML = `
|
|
6838
|
-
<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(
|
|
6834
|
+
<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realIitem == null ? void 0 : realIitem.name) || ''})</span>
|
|
6839
6835
|
`;
|
|
6840
6836
|
} else {
|
|
6841
6837
|
if (this.value !== this._level + '') this.value = this._level + '';
|
|
@@ -6844,8 +6840,8 @@ function __filter(list, locale = {}) {
|
|
|
6844
6840
|
}
|
|
6845
6841
|
}
|
|
6846
6842
|
|
|
6847
|
-
function _extends$
|
|
6848
|
-
_extends$
|
|
6843
|
+
function _extends$6() {
|
|
6844
|
+
_extends$6 = Object.assign || function(target) {
|
|
6849
6845
|
for(var i = 1; i < arguments.length; i++){
|
|
6850
6846
|
var source = arguments[i];
|
|
6851
6847
|
for(var key in source){
|
|
@@ -6856,7 +6852,7 @@ function _extends$7() {
|
|
|
6856
6852
|
}
|
|
6857
6853
|
return target;
|
|
6858
6854
|
};
|
|
6859
|
-
return _extends$
|
|
6855
|
+
return _extends$6.apply(this, arguments);
|
|
6860
6856
|
}
|
|
6861
6857
|
// 支持的倍速列表, 需要是 2 的指数,不能小于 0.5, 最大 16 倍
|
|
6862
6858
|
const SUPPORT_SPEED = [
|
|
@@ -6892,7 +6888,7 @@ const SPEED_DEFAULT_OPTIONS = {
|
|
|
6892
6888
|
}
|
|
6893
6889
|
constructor(options){
|
|
6894
6890
|
var _options_locales_options_language, _options_locales;
|
|
6895
|
-
super(_extends$
|
|
6891
|
+
super(_extends$6({}, SPEED_DEFAULT_OPTIONS, options, {
|
|
6896
6892
|
value: (options.props.speed || 1) + '',
|
|
6897
6893
|
classNameSuffix: 'speed',
|
|
6898
6894
|
controlType: 'button',
|
|
@@ -7287,8 +7283,8 @@ const DEFAULT_OPTIONS = {
|
|
|
7287
7283
|
}
|
|
7288
7284
|
}
|
|
7289
7285
|
|
|
7290
|
-
function _extends$
|
|
7291
|
-
_extends$
|
|
7286
|
+
function _extends$5() {
|
|
7287
|
+
_extends$5 = Object.assign || function(target) {
|
|
7292
7288
|
for(var i = 1; i < arguments.length; i++){
|
|
7293
7289
|
var source = arguments[i];
|
|
7294
7290
|
for(var key in source){
|
|
@@ -7299,7 +7295,7 @@ function _extends$6() {
|
|
|
7299
7295
|
}
|
|
7300
7296
|
return target;
|
|
7301
7297
|
};
|
|
7302
|
-
return _extends$
|
|
7298
|
+
return _extends$5.apply(this, arguments);
|
|
7303
7299
|
}
|
|
7304
7300
|
/**
|
|
7305
7301
|
* 日历选择器控件
|
|
@@ -7380,7 +7376,7 @@ function _extends$6() {
|
|
|
7380
7376
|
}
|
|
7381
7377
|
constructor(options){
|
|
7382
7378
|
var _this_options_props_urlInfo_searchParams, _this_options_props_urlInfo, _this_options_props;
|
|
7383
|
-
super(_extends$
|
|
7379
|
+
super(_extends$5({}, options, {
|
|
7384
7380
|
tagName: 'span',
|
|
7385
7381
|
controlType: 'button',
|
|
7386
7382
|
classNameSuffix: 'date'
|
|
@@ -7391,1274 +7387,6 @@ function _extends$6() {
|
|
|
7391
7387
|
}
|
|
7392
7388
|
}
|
|
7393
7389
|
|
|
7394
|
-
/*
|
|
7395
|
-
* @ezuikit/control-time-line v0.0.1
|
|
7396
|
-
* Copyright (c) 2025-09-21 Ezviz-OpenBiz
|
|
7397
|
-
* Released under the MIT License.
|
|
7398
|
-
*/
|
|
7399
|
-
|
|
7400
|
-
const BASE_TIME_LINE_DEFAULT_OPTIONS = {
|
|
7401
|
-
language: 'zh',
|
|
7402
|
-
records: [],
|
|
7403
|
-
onChange: ()=>{},
|
|
7404
|
-
onDragStart: ()=>{},
|
|
7405
|
-
onDragging: ()=>{},
|
|
7406
|
-
onDragEnd: ()=>{}
|
|
7407
|
-
};
|
|
7408
|
-
class BaseTimeLine {
|
|
7409
|
-
get current() {
|
|
7410
|
-
return this._current;
|
|
7411
|
-
}
|
|
7412
|
-
/**
|
|
7413
|
-
* 更新当前时间
|
|
7414
|
-
* @param time 能转成时间的值, 如 时间对象 Date, 时间戳,时间戳字符串
|
|
7415
|
-
*/ update(current) {}
|
|
7416
|
-
updateRecords(records) {
|
|
7417
|
-
if (records) {
|
|
7418
|
-
this.records = records;
|
|
7419
|
-
}
|
|
7420
|
-
}
|
|
7421
|
-
resize(width, height) {}
|
|
7422
|
-
/**
|
|
7423
|
-
* 改变时间轴刻度
|
|
7424
|
-
*/ changeScale(timelag) {}
|
|
7425
|
-
setReadOnly(readOnly) {}
|
|
7426
|
-
destroy() {
|
|
7427
|
-
this._current = undefined;
|
|
7428
|
-
}
|
|
7429
|
-
constructor(container, options){
|
|
7430
|
-
this.records = [];
|
|
7431
|
-
this.$container = container;
|
|
7432
|
-
this.options = deepmerge(BASE_TIME_LINE_DEFAULT_OPTIONS, options, {
|
|
7433
|
-
clone: false
|
|
7434
|
-
});
|
|
7435
|
-
}
|
|
7436
|
-
}
|
|
7437
|
-
|
|
7438
|
-
function toDate(time) {
|
|
7439
|
-
let date = null;
|
|
7440
|
-
if (typeof time === 'string' && time.includes(':')) {
|
|
7441
|
-
date = new Date(time);
|
|
7442
|
-
} else if ((typeof time === 'string' || typeof time === 'number') && /\d/.test(time + '') && (time + '').length === 10) {
|
|
7443
|
-
date = new Date(+time * 1000);
|
|
7444
|
-
} else if ((typeof time === 'string' || typeof time === 'number') && /\d/.test(time + '') && (time + '').length === 13) {
|
|
7445
|
-
date = new Date(+time);
|
|
7446
|
-
} else if (time instanceof Date) {
|
|
7447
|
-
date = time;
|
|
7448
|
-
}
|
|
7449
|
-
return date;
|
|
7450
|
-
}
|
|
7451
|
-
/**
|
|
7452
|
-
*
|
|
7453
|
-
* @param time
|
|
7454
|
-
* @returns
|
|
7455
|
-
*/ function formatDateToHHmmss(time) {
|
|
7456
|
-
const date = toDate(time);
|
|
7457
|
-
if (date) {
|
|
7458
|
-
const h = date.getHours(); // 返回日期中的小时数(0到23)
|
|
7459
|
-
const m = date.getMinutes(); // 返回日期中的分钟数(0到59)
|
|
7460
|
-
const s = date.getSeconds(); // 返回日期中的秒数(0到59)
|
|
7461
|
-
return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
|
|
7462
|
-
}
|
|
7463
|
-
return '00:00:00';
|
|
7464
|
-
}
|
|
7465
|
-
function subTime(time) {
|
|
7466
|
-
if (+time < 10) {
|
|
7467
|
-
return '0' + time;
|
|
7468
|
-
} else {
|
|
7469
|
-
return time;
|
|
7470
|
-
}
|
|
7471
|
-
}
|
|
7472
|
-
function tranTime(time, fmt = 'YYYY-MM-DD HH:mm:ss') {
|
|
7473
|
-
const newDate = toDate(time);
|
|
7474
|
-
if (newDate) {
|
|
7475
|
-
if (fmt === 'YYYY-MM-DD') {
|
|
7476
|
-
return newDate.getFullYear() + '-' + subTime(newDate.getMonth() + 1) + '-' + subTime(newDate.getDate());
|
|
7477
|
-
} else if (fmt === 'HH:mm:ss') {
|
|
7478
|
-
return subTime(newDate.getHours()) + ':' + subTime(newDate.getMinutes()) + ':' + subTime(newDate.getSeconds());
|
|
7479
|
-
}
|
|
7480
|
-
// prettier-ignore
|
|
7481
|
-
return newDate.getFullYear() + "-" + subTime(newDate.getMonth() + 1) + "-" + subTime(newDate.getDate()) + " " + subTime(newDate.getHours()) + ":" + subTime(newDate.getMinutes()) + ":" + subTime(newDate.getSeconds());
|
|
7482
|
-
}
|
|
7483
|
-
return '';
|
|
7484
|
-
}
|
|
7485
|
-
/**
|
|
7486
|
-
* @description 判读两个区间是否重叠
|
|
7487
|
-
* @param {number} a_start 一个区间的开始
|
|
7488
|
-
* @param {number} a_end 一个区间的结束
|
|
7489
|
-
* @param {number} b_start 另一个区间的开始
|
|
7490
|
-
* @param {number} b_end 另一个区间的结束
|
|
7491
|
-
* @returns {boolean}
|
|
7492
|
-
*/ function isOverlap(a_start, a_end, b_start, b_end) {
|
|
7493
|
-
return Math.max(a_start, b_start) <= Math.min(a_end, b_end);
|
|
7494
|
-
}
|
|
7495
|
-
|
|
7496
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable eqeqeq */ /* eslint-disable no-unneeded-ternary */ /* eslint-disable @typescript-eslint/no-this-alias */ /* eslint-disable @typescript-eslint/prefer-includes */ function _extends$5() {
|
|
7497
|
-
_extends$5 = Object.assign || function(target) {
|
|
7498
|
-
for(var i = 1; i < arguments.length; i++){
|
|
7499
|
-
var source = arguments[i];
|
|
7500
|
-
for(var key in source){
|
|
7501
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7502
|
-
target[key] = source[key];
|
|
7503
|
-
}
|
|
7504
|
-
}
|
|
7505
|
-
}
|
|
7506
|
-
return target;
|
|
7507
|
-
};
|
|
7508
|
-
return _extends$5.apply(this, arguments);
|
|
7509
|
-
}
|
|
7510
|
-
const PREFIX = 'ez-time-line';
|
|
7511
|
-
/**
|
|
7512
|
-
* 0: 1分钟,
|
|
7513
|
-
* 1: 10分钟
|
|
7514
|
-
* 2: 半小时
|
|
7515
|
-
* 3: 1小时
|
|
7516
|
-
* 4: 2小时
|
|
7517
|
-
*/ const scaleEnum = {
|
|
7518
|
-
0: 1,
|
|
7519
|
-
1: 10,
|
|
7520
|
-
2: 30,
|
|
7521
|
-
3: 60,
|
|
7522
|
-
4: 120
|
|
7523
|
-
};
|
|
7524
|
-
const MOBILE_TIME_LINE_DEFAULT_OPTIONS = Object.assign({}, BASE_TIME_LINE_DEFAULT_OPTIONS, {
|
|
7525
|
-
// height: 400,
|
|
7526
|
-
scale: 0,
|
|
7527
|
-
readOnly: false
|
|
7528
|
-
});
|
|
7529
|
-
let TimeLine$1 = class TimeLine extends BaseTimeLine {
|
|
7530
|
-
/**
|
|
7531
|
-
* 更新状态
|
|
7532
|
-
* @param obj
|
|
7533
|
-
*/ setState(obj) {
|
|
7534
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
7535
|
-
Object.keys(obj).forEach((key)=>{
|
|
7536
|
-
this.state[key] = obj[key];
|
|
7537
|
-
if (key === 'scrollTop' && this._$itemList) {
|
|
7538
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
7539
|
-
this._$itemContainer.scrollTo(0, obj[key]);
|
|
7540
|
-
}
|
|
7541
|
-
if (key === 'current' && this._$currentTime) {
|
|
7542
|
-
this._$currentTime.querySelector(`.${PREFIX}-current-value`).innerHTML = obj[key];
|
|
7543
|
-
}
|
|
7544
|
-
});
|
|
7545
|
-
}
|
|
7546
|
-
/**
|
|
7547
|
-
* 设置只读或取消只读
|
|
7548
|
-
* @param readOnly - 只读或取消只读
|
|
7549
|
-
* @returns
|
|
7550
|
-
*/ setReadOnly(readOnly) {
|
|
7551
|
-
this._readOnly = readOnly;
|
|
7552
|
-
if (this._$itemList) this._$itemContainer.style.overflowY = readOnly ? 'hidden' : 'scroll';
|
|
7553
|
-
}
|
|
7554
|
-
/**
|
|
7555
|
-
* 改变时间轴刻度
|
|
7556
|
-
* 0: 1分钟,
|
|
7557
|
-
* 1: 10分钟
|
|
7558
|
-
* 2: 半小时
|
|
7559
|
-
* 3: 1小时
|
|
7560
|
-
* 4: 2小时
|
|
7561
|
-
* @param value 120: 2小时, 60:1小时, 30:半小时,10:10分钟,1:1分钟
|
|
7562
|
-
*/ changeScale(scale) {
|
|
7563
|
-
if (scaleEnum[scale]) {
|
|
7564
|
-
this._scale = scale;
|
|
7565
|
-
this._matchTimeDot();
|
|
7566
|
-
}
|
|
7567
|
-
}
|
|
7568
|
-
get scale() {
|
|
7569
|
-
return this._scale;
|
|
7570
|
-
}
|
|
7571
|
-
/**
|
|
7572
|
-
* 获取真实时间刻度(时间单位 分钟)
|
|
7573
|
-
*/ get _scaleWidth() {
|
|
7574
|
-
return scaleEnum[this._scale] || scaleEnum[0];
|
|
7575
|
-
}
|
|
7576
|
-
updateRecords(records, defaultIndex) {
|
|
7577
|
-
const list = records.map((record)=>{
|
|
7578
|
-
return _extends$5({}, record, {
|
|
7579
|
-
startTime: formatDateToHHmmss(record.startTime),
|
|
7580
|
-
endTime: formatDateToHHmmss(record.endTime)
|
|
7581
|
-
});
|
|
7582
|
-
});
|
|
7583
|
-
if (list.length > 0) {
|
|
7584
|
-
if (typeof defaultIndex === 'undefined') {
|
|
7585
|
-
defaultIndex = list.length - 1;
|
|
7586
|
-
}
|
|
7587
|
-
// 若current不为0,则不重置current,避免拖动后时间轴回弹
|
|
7588
|
-
const { current } = this.state;
|
|
7589
|
-
this.setState({
|
|
7590
|
-
availTimeLine: list,
|
|
7591
|
-
start: list[defaultIndex].startTime,
|
|
7592
|
-
end: list[defaultIndex].endTime,
|
|
7593
|
-
current: current === 0 ? list[defaultIndex].startTime : current
|
|
7594
|
-
});
|
|
7595
|
-
this._matchRecTimeDot();
|
|
7596
|
-
this._primaryOffsetH();
|
|
7597
|
-
} else {
|
|
7598
|
-
this.setState({
|
|
7599
|
-
availTimeLine: []
|
|
7600
|
-
});
|
|
7601
|
-
this._matchRecTimeDot();
|
|
7602
|
-
}
|
|
7603
|
-
}
|
|
7604
|
-
_matchTimeDot() {
|
|
7605
|
-
const { end } = this.state;
|
|
7606
|
-
const scaleWidth = this._scaleWidth;
|
|
7607
|
-
const timeArr = [];
|
|
7608
|
-
// 时间转分钟
|
|
7609
|
-
let minute = this._timeToMinute(end);
|
|
7610
|
-
minute = Math.floor(minute / scaleWidth) * scaleWidth;
|
|
7611
|
-
for(let i = minute; i >= 0;){
|
|
7612
|
-
let marginTop = 0;
|
|
7613
|
-
let marginBottom = 0;
|
|
7614
|
-
// 视频片段
|
|
7615
|
-
if (i == minute) marginTop = 70;
|
|
7616
|
-
if (i == 0) {
|
|
7617
|
-
const height = this.$container.clientHeight;
|
|
7618
|
-
marginBottom = height - 70;
|
|
7619
|
-
}
|
|
7620
|
-
const time = this._minuteToTime(i);
|
|
7621
|
-
timeArr.push({
|
|
7622
|
-
id: i,
|
|
7623
|
-
current: time,
|
|
7624
|
-
label: 'a' + i,
|
|
7625
|
-
marginTop,
|
|
7626
|
-
marginBottom,
|
|
7627
|
-
recArr: []
|
|
7628
|
-
});
|
|
7629
|
-
i = i - scaleWidth;
|
|
7630
|
-
}
|
|
7631
|
-
this.setState({
|
|
7632
|
-
timeArr
|
|
7633
|
-
});
|
|
7634
|
-
this._renderDateLine();
|
|
7635
|
-
}
|
|
7636
|
-
_matchRecTimeDot() {
|
|
7637
|
-
const { start, end, availTimeLine, timeArr } = this.state;
|
|
7638
|
-
const scaleWidth = this._scaleWidth;
|
|
7639
|
-
const len = availTimeLine.length;
|
|
7640
|
-
if (len === 0) {
|
|
7641
|
-
for(let j = 0; j < timeArr.length; j++){
|
|
7642
|
-
timeArr[j].recArr = [];
|
|
7643
|
-
}
|
|
7644
|
-
} else {
|
|
7645
|
-
for(let k = 0; k < timeArr.length; k++){
|
|
7646
|
-
timeArr[k].recArr = [];
|
|
7647
|
-
}
|
|
7648
|
-
for(let i = 0; i < len; i++){
|
|
7649
|
-
const temp = availTimeLine[i];
|
|
7650
|
-
const st = this._timeToSecond(temp.startTime);
|
|
7651
|
-
const et = this._timeToSecond(temp.endTime);
|
|
7652
|
-
// console.log('st: ', st, 'et:', et);
|
|
7653
|
-
let stAvailPercent = 0;
|
|
7654
|
-
let etAvailPercent = 0;
|
|
7655
|
-
const stMinute = Math.floor(st / (scaleWidth * 60)) * scaleWidth;
|
|
7656
|
-
stAvailPercent = (st - stMinute * 60) / scaleWidth;
|
|
7657
|
-
const etMinute = Math.floor(et / (scaleWidth * 60)) * scaleWidth;
|
|
7658
|
-
etAvailPercent = (et - etMinute * 60) / scaleWidth;
|
|
7659
|
-
for(let j = 0; j < timeArr.length; j++){
|
|
7660
|
-
if (timeArr[j].id == stMinute && timeArr[j].id == etMinute) {
|
|
7661
|
-
const height = etAvailPercent - stAvailPercent;
|
|
7662
|
-
const top = 60 - etAvailPercent;
|
|
7663
|
-
timeArr[j].recArr.push({
|
|
7664
|
-
height,
|
|
7665
|
-
top
|
|
7666
|
-
});
|
|
7667
|
-
} else {
|
|
7668
|
-
if (timeArr[j].id == stMinute) {
|
|
7669
|
-
timeArr[j].recArr.push({
|
|
7670
|
-
height: 60 - stAvailPercent,
|
|
7671
|
-
top: 0
|
|
7672
|
-
});
|
|
7673
|
-
} else if (timeArr[j].id == etMinute) {
|
|
7674
|
-
timeArr[j].recArr.push({
|
|
7675
|
-
height: etAvailPercent,
|
|
7676
|
-
top: 60 - etAvailPercent
|
|
7677
|
-
});
|
|
7678
|
-
} else if (timeArr[j].id > stMinute && timeArr[j].id < etMinute) {
|
|
7679
|
-
timeArr[j].recArr.push({
|
|
7680
|
-
height: 60,
|
|
7681
|
-
top: 0
|
|
7682
|
-
});
|
|
7683
|
-
}
|
|
7684
|
-
}
|
|
7685
|
-
}
|
|
7686
|
-
}
|
|
7687
|
-
}
|
|
7688
|
-
this.setState({
|
|
7689
|
-
timeArr
|
|
7690
|
-
});
|
|
7691
|
-
this._renderDateLine();
|
|
7692
|
-
}
|
|
7693
|
-
_renderDateLine() {
|
|
7694
|
-
const { timeArr } = this.state;
|
|
7695
|
-
const container = this._$itemList;
|
|
7696
|
-
container.innerHTML = '';
|
|
7697
|
-
timeArr.forEach((item, index)=>{
|
|
7698
|
-
const timeItemDOM = document.createElement('div');
|
|
7699
|
-
timeItemDOM.setAttribute('class', PREFIX + '-time-scale-area');
|
|
7700
|
-
timeItemDOM.style.cssText = `margin-top: ${item.marginTop}px; margin-bottom: ${item.marginBottom}px; border-right-color: ${item.borderColor};`;
|
|
7701
|
-
const scaleDOM = document.createElement('div');
|
|
7702
|
-
scaleDOM.setAttribute('class', PREFIX + '-scale');
|
|
7703
|
-
let timeItemHtml = `
|
|
7704
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7705
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7706
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7707
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7708
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7709
|
-
<div class="${PREFIX}-time-scale" style="width:10px"></div>
|
|
7710
|
-
`;
|
|
7711
|
-
item.recArr.forEach((i, j)=>{
|
|
7712
|
-
timeItemHtml += `<div class="${PREFIX}-time-unavail" style="height: ${i.height}px;background-color:#A8B9ED; top: ${i.top}px"></div>`;
|
|
7713
|
-
});
|
|
7714
|
-
timeItemHtml += `<div id=${item.label} class="${PREFIX}-time-label"> ${item.current}</div>`;
|
|
7715
|
-
timeItemDOM.innerHTML = timeItemHtml;
|
|
7716
|
-
container.appendChild(timeItemDOM);
|
|
7717
|
-
});
|
|
7718
|
-
}
|
|
7719
|
-
_primaryOffsetH() {
|
|
7720
|
-
const { start, timeArr, current } = this.state;
|
|
7721
|
-
const scaleWidth = this._scaleWidth;
|
|
7722
|
-
const currentItem = timeArr[0].current;
|
|
7723
|
-
const currentTime = this._timeToSecond(currentItem);
|
|
7724
|
-
// current不为0时,从当前时间开始计算偏移量,避免拖动时间轴后回弹
|
|
7725
|
-
const startSecond = this._timeToSecond(current === 0 ? start : current);
|
|
7726
|
-
const offsetS = currentTime - startSecond;
|
|
7727
|
-
const offsetH = Math.ceil(offsetS / scaleWidth) + 60; // offsetS / (scaleWidth * 60) * 60
|
|
7728
|
-
this.setState({
|
|
7729
|
-
scrollTop: offsetH
|
|
7730
|
-
});
|
|
7731
|
-
}
|
|
7732
|
-
_currentOffsetH() {
|
|
7733
|
-
const { current, timeArr } = this.state;
|
|
7734
|
-
const scale = this._scaleWidth;
|
|
7735
|
-
const startItem = timeArr[0].current;
|
|
7736
|
-
const startSecond = this._timeToSecond(startItem);
|
|
7737
|
-
const currentSecond = this._timeToSecond(current);
|
|
7738
|
-
const offsetS = startSecond - currentSecond;
|
|
7739
|
-
const offsetH = Math.ceil(offsetS / scale) + 60; // offsetS / (scale * 60) * 60
|
|
7740
|
-
this.setState({
|
|
7741
|
-
scrollTop: offsetH
|
|
7742
|
-
});
|
|
7743
|
-
}
|
|
7744
|
-
_rectTopToTime(reactTop) {
|
|
7745
|
-
const scaleWidth = this._scaleWidth;
|
|
7746
|
-
// let rectTop = rect.top; // 获取当前元素距离父元素顶部的高度
|
|
7747
|
-
// let reactTop = 0 - rectTop; // 实际偏移高度
|
|
7748
|
-
const index = Math.floor(reactTop / 60); // 以分钟为刻度时,每个元素初始高度为60px, 向下取整并除以时刻倍数得出偏移item;
|
|
7749
|
-
const offsetH = reactTop - index * 60; // 偏移高度
|
|
7750
|
-
let current;
|
|
7751
|
-
let offsetSecond;
|
|
7752
|
-
if (offsetH == 0) {
|
|
7753
|
-
var _this_state_timeArr_;
|
|
7754
|
-
current = (_this_state_timeArr_ = this.state.timeArr[index - 1]) == null ? void 0 : _this_state_timeArr_.current;
|
|
7755
|
-
offsetSecond = 0;
|
|
7756
|
-
} else {
|
|
7757
|
-
// 当scaleWidth==120, scaleWidth==60, scaleWidth==30, scaleWidth==10, scaleWidth==1
|
|
7758
|
-
const time = this.state.timeArr[index].current;
|
|
7759
|
-
const minute = this._timeToMinute(time);
|
|
7760
|
-
// 相对于下一元素偏移
|
|
7761
|
-
const offsetY = 60 - offsetH;
|
|
7762
|
-
const offsetS = offsetY * scaleWidth; // offsetY / 60 * scaleWidth * 60
|
|
7763
|
-
const offsetM = Math.floor(offsetS / 60) + minute;
|
|
7764
|
-
const second = Math.floor(offsetS / 60) * 60;
|
|
7765
|
-
offsetSecond = Math.ceil(offsetS - second); // 保留两位小数
|
|
7766
|
-
current = this._minuteToTime(offsetM);
|
|
7767
|
-
}
|
|
7768
|
-
if (current === undefined || +current.split(':')[0] >= 24 && (+current.split(':')[1] > 0 || offsetSecond > 0)) {
|
|
7769
|
-
// 超出 24h 后不允许
|
|
7770
|
-
this.update(new Date(`${new Date().getFullYear()}-${subTime(new Date().getMonth() + 1)}-${subTime(new Date().getDate())} 23:59:59`));
|
|
7771
|
-
return;
|
|
7772
|
-
}
|
|
7773
|
-
this.setState({
|
|
7774
|
-
current: current + ':' + (offsetSecond > 9 ? offsetSecond : '0' + offsetSecond),
|
|
7775
|
-
scrollTop: reactTop
|
|
7776
|
-
});
|
|
7777
|
-
}
|
|
7778
|
-
/**
|
|
7779
|
-
* 更新当前时间
|
|
7780
|
-
* @param time 能转成时间的值, 如 时间对象 Date, 时间戳,时间戳字符串
|
|
7781
|
-
*/ update(time) {
|
|
7782
|
-
if (time && !this._isTouchStart) {
|
|
7783
|
-
this.setState({
|
|
7784
|
-
current: tranTime(time, 'HH:mm:ss')
|
|
7785
|
-
});
|
|
7786
|
-
this._currentOffsetH();
|
|
7787
|
-
}
|
|
7788
|
-
}
|
|
7789
|
-
destroy() {
|
|
7790
|
-
if (this._scrollTimer) {
|
|
7791
|
-
clearInterval(this._scrollTimer);
|
|
7792
|
-
this._scrollTimer = null;
|
|
7793
|
-
}
|
|
7794
|
-
this._removeEventListener();
|
|
7795
|
-
super.destroy();
|
|
7796
|
-
}
|
|
7797
|
-
_timeToSecond(time) {
|
|
7798
|
-
const e = time.split(':');
|
|
7799
|
-
const h = Number(e[0]);
|
|
7800
|
-
const m = Number(e[1]);
|
|
7801
|
-
const s = Number(e[2]);
|
|
7802
|
-
return h * 60 * 60 + m * 60 + (s ? s : 0);
|
|
7803
|
-
}
|
|
7804
|
-
_minuteToTime(minute) {
|
|
7805
|
-
const hour = Math.floor(minute / 60);
|
|
7806
|
-
const m = minute % 60;
|
|
7807
|
-
return (hour > 9 ? hour : '0' + hour) + ':' + (m > 9 ? m : '0' + m);
|
|
7808
|
-
}
|
|
7809
|
-
_timeToMinute(time) {
|
|
7810
|
-
const e = time.split(':');
|
|
7811
|
-
const h = Number(e[0]);
|
|
7812
|
-
const m = Number(e[1]);
|
|
7813
|
-
// const s = Number(e[2]);
|
|
7814
|
-
return h * 60 + m;
|
|
7815
|
-
}
|
|
7816
|
-
_render() {
|
|
7817
|
-
this._$currentTime = document.createElement('div');
|
|
7818
|
-
this._$currentTime.classList.add(PREFIX + '-current');
|
|
7819
|
-
this._$currentTime.innerHTML = `<div class="${PREFIX}-current-value">00:00:00</div>`;
|
|
7820
|
-
this.$container.appendChild(this._$currentTime);
|
|
7821
|
-
this._$itemContainer = document.createElement('div');
|
|
7822
|
-
this._$itemContainer.classList.add(PREFIX + '-item-container');
|
|
7823
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
7824
|
-
if (/\d/.test(this.options.height)) {
|
|
7825
|
-
this._$itemContainer.style.cssText += `height: ${this.options.height}px`;
|
|
7826
|
-
} else if (typeof this.options.height === 'string') {
|
|
7827
|
-
this._$itemContainer.style.cssText += `height: ${this.options.height}`;
|
|
7828
|
-
} else {
|
|
7829
|
-
const height = this.$container.clientHeight;
|
|
7830
|
-
this._$itemContainer.style.cssText += `height: ${height}px`;
|
|
7831
|
-
}
|
|
7832
|
-
this._$itemList = document.createElement('div');
|
|
7833
|
-
this._$itemList.classList.add(PREFIX + '-item');
|
|
7834
|
-
this._$itemContainer.appendChild(this._$itemList);
|
|
7835
|
-
this.$container.appendChild(this._$itemContainer);
|
|
7836
|
-
this._addEventListener();
|
|
7837
|
-
}
|
|
7838
|
-
_addEventListener() {
|
|
7839
|
-
// js安卓、IOS、鸿蒙系统监听开始触摸
|
|
7840
|
-
if (this._$itemContainer) {
|
|
7841
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7842
|
-
this._$itemContainer.addEventListener('touchstart', this._touchstart, false);
|
|
7843
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7844
|
-
this._$itemContainer.addEventListener('touchmove', this._touchmove, false);
|
|
7845
|
-
// 手动滚动停止,选定时刻自动播放
|
|
7846
|
-
this._$itemContainer.addEventListener('touchend', this._touchend, false);
|
|
7847
|
-
}
|
|
7848
|
-
this._matchTimeDot();
|
|
7849
|
-
}
|
|
7850
|
-
_removeEventListener() {
|
|
7851
|
-
if (this._$itemContainer) {
|
|
7852
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7853
|
-
this._$itemContainer.removeEventListener('touchstart', this._touchstart);
|
|
7854
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7855
|
-
this._$itemContainer.removeEventListener('touchmove', this._touchmove);
|
|
7856
|
-
// 手动滚动停止,选定时刻自动播放
|
|
7857
|
-
this._$itemContainer.removeEventListener('touchend', this._touchend);
|
|
7858
|
-
}
|
|
7859
|
-
}
|
|
7860
|
-
_touchstart() {
|
|
7861
|
-
if (this._readOnly) return false;
|
|
7862
|
-
this._isTouchStart = true;
|
|
7863
|
-
this.options.onDragStart == null ? void 0 : this.options.onDragStart.call(this.options, this.state.current);
|
|
7864
|
-
}
|
|
7865
|
-
_touchmove() {
|
|
7866
|
-
var _this__$itemContainer;
|
|
7867
|
-
if (this._readOnly) return false;
|
|
7868
|
-
const reactTop = (_this__$itemContainer = this._$itemContainer) == null ? void 0 : _this__$itemContainer.scrollTop; // 实际偏移高度
|
|
7869
|
-
this._rectTopToTime(reactTop);
|
|
7870
|
-
this.options.onDragging == null ? void 0 : this.options.onDragging.call(this.options, this.state.current);
|
|
7871
|
-
}
|
|
7872
|
-
_touchend() {
|
|
7873
|
-
if (this._readOnly) return false;
|
|
7874
|
-
// 这里有问题, 滚动是利用滚动操作(overflow-y: scroll;)的
|
|
7875
|
-
new Promise((resolve, _reject)=>{
|
|
7876
|
-
let preTop = -1;
|
|
7877
|
-
if (this._scrollTimer) {
|
|
7878
|
-
clearInterval(this._scrollTimer);
|
|
7879
|
-
this._scrollTimer = null;
|
|
7880
|
-
}
|
|
7881
|
-
this._scrollTimer = setInterval(()=>{
|
|
7882
|
-
var _this__$itemContainer;
|
|
7883
|
-
// debugger
|
|
7884
|
-
const reactTop = (_this__$itemContainer = this._$itemContainer) == null ? void 0 : _this__$itemContainer.scrollTop; // 实际偏移高度
|
|
7885
|
-
if (reactTop !== preTop) {
|
|
7886
|
-
preTop = reactTop;
|
|
7887
|
-
} else {
|
|
7888
|
-
if (this._scrollTimer) {
|
|
7889
|
-
clearInterval(this._scrollTimer);
|
|
7890
|
-
this._scrollTimer = null;
|
|
7891
|
-
}
|
|
7892
|
-
this._isTouchStart = false;
|
|
7893
|
-
resolve(reactTop);
|
|
7894
|
-
}
|
|
7895
|
-
}, 100);
|
|
7896
|
-
}).then((reactTop)=>{
|
|
7897
|
-
this._rectTopToTime(reactTop);
|
|
7898
|
-
this.options.onDragEnd == null ? void 0 : this.options.onDragEnd.call(this.options, this.state.current);
|
|
7899
|
-
this.options.onChange == null ? void 0 : this.options.onChange.call(this.options, this.state.current);
|
|
7900
|
-
});
|
|
7901
|
-
}
|
|
7902
|
-
constructor(container, options){
|
|
7903
|
-
super(container, deepmerge(MOBILE_TIME_LINE_DEFAULT_OPTIONS, options, {
|
|
7904
|
-
clone: false
|
|
7905
|
-
})), // 禁用拖动轴
|
|
7906
|
-
this._readOnly = false, this._isTouchStart = false, this.state = {
|
|
7907
|
-
start: '00:00:00',
|
|
7908
|
-
end: '24:00:00',
|
|
7909
|
-
current: 0,
|
|
7910
|
-
timeArr: [],
|
|
7911
|
-
availTimeLine: [],
|
|
7912
|
-
scrollTop: 0,
|
|
7913
|
-
index: 0,
|
|
7914
|
-
date: '',
|
|
7915
|
-
noTimeLineTxt: ''
|
|
7916
|
-
};
|
|
7917
|
-
this._scale = this.options.scale || 0;
|
|
7918
|
-
this.setReadOnly(!!this.options.readOnly);
|
|
7919
|
-
this._touchstart = this._touchstart.bind(this);
|
|
7920
|
-
this._touchmove = this._touchmove.bind(this);
|
|
7921
|
-
this._touchend = this._touchend.bind(this);
|
|
7922
|
-
this._render();
|
|
7923
|
-
}
|
|
7924
|
-
};
|
|
7925
|
-
|
|
7926
|
-
/**
|
|
7927
|
-
* 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 说明]
|
|
7928
|
-
* 需要满足 (24 * 60 * 60) % ([0] * [2]) = 0, 这样 0 点刻度才能正确显示
|
|
7929
|
-
*/ /**
|
|
7930
|
-
* 时间刻度宽度, 需要满足 (24 * 60 * 60) % ([0] * [2]) = 0
|
|
7931
|
-
*/ const TIME_WIDTH = [
|
|
7932
|
-
[
|
|
7933
|
-
1,
|
|
7934
|
-
10,
|
|
7935
|
-
10,
|
|
7936
|
-
'单位 1秒'
|
|
7937
|
-
],
|
|
7938
|
-
[
|
|
7939
|
-
60,
|
|
7940
|
-
20,
|
|
7941
|
-
5,
|
|
7942
|
-
'单位 1分钟'
|
|
7943
|
-
],
|
|
7944
|
-
[
|
|
7945
|
-
600,
|
|
7946
|
-
20,
|
|
7947
|
-
6,
|
|
7948
|
-
'单位 10分钟'
|
|
7949
|
-
],
|
|
7950
|
-
[
|
|
7951
|
-
3600,
|
|
7952
|
-
30,
|
|
7953
|
-
6,
|
|
7954
|
-
'单位 1小时'
|
|
7955
|
-
],
|
|
7956
|
-
[
|
|
7957
|
-
14400,
|
|
7958
|
-
40,
|
|
7959
|
-
2,
|
|
7960
|
-
'单位 4小时'
|
|
7961
|
-
],
|
|
7962
|
-
[
|
|
7963
|
-
43200,
|
|
7964
|
-
80,
|
|
7965
|
-
2,
|
|
7966
|
-
'单位 12小时'
|
|
7967
|
-
]
|
|
7968
|
-
];
|
|
7969
|
-
|
|
7970
|
-
/**
|
|
7971
|
-
* 时间轴配置项
|
|
7972
|
-
*/ const TIMELINE_DEFAULT_OPTIONS = {
|
|
7973
|
-
height: 36,
|
|
7974
|
-
className: '',
|
|
7975
|
-
wrapClassName: '',
|
|
7976
|
-
timeSections: [],
|
|
7977
|
-
timeWidth: 0,
|
|
7978
|
-
currentTime: new Date(new Date().setHours(0, 0, 8, 0)),
|
|
7979
|
-
dpr: window.devicePixelRatio || 2,
|
|
7980
|
-
wheelSpeed: 0.1,
|
|
7981
|
-
readOnly: false,
|
|
7982
|
-
scaleOffsetTop: 4,
|
|
7983
|
-
showYearMonthDay: true,
|
|
7984
|
-
// --------------------只支持初始化时,不支持动态变更 (不做对象冻结)--------------------
|
|
7985
|
-
timePointColor: '#1890ff',
|
|
7986
|
-
timeTextColor: '#FFF',
|
|
7987
|
-
timeScaleColor: '#FFF',
|
|
7988
|
-
timeSectionColor: 'rgba(24, 144, 255, 0.5)',
|
|
7989
|
-
timeAxisBgColor: '#000',
|
|
7990
|
-
onChange: ()=>{},
|
|
7991
|
-
onDragEnd: ()=>{},
|
|
7992
|
-
onHover: ()=>{},
|
|
7993
|
-
onDestroy: ()=>{}
|
|
7994
|
-
};
|
|
7995
|
-
/**
|
|
7996
|
-
* 时间轴控件类, 支持PC/Mobile 拖动和缩放
|
|
7997
|
-
* @beta
|
|
7998
|
-
* @example
|
|
7999
|
-
* ```ts
|
|
8000
|
-
* import TimeLine from './TimeLine';
|
|
8001
|
-
* const timeLine = new TimeLine(document.getElementById('container'), {})
|
|
8002
|
-
* ```
|
|
8003
|
-
*/ let TimeLine$2 = class TimeLine {
|
|
8004
|
-
/**
|
|
8005
|
-
* 初始化 (canvas)
|
|
8006
|
-
*/ _init() {
|
|
8007
|
-
this._$canvas = document.createElement('canvas');
|
|
8008
|
-
this._ctx = this._$canvas.getContext('2d');
|
|
8009
|
-
if (this._options.className) {
|
|
8010
|
-
this._$canvas.className = this._options.className;
|
|
8011
|
-
}
|
|
8012
|
-
this._$canvas.style.cssText += 'cursor: pointer;';
|
|
8013
|
-
this.width = this._options.width || this.$container.offsetWidth;
|
|
8014
|
-
this.height = this._options.height || this.$container.offsetHeight;
|
|
8015
|
-
if (this._options.wrapClassName) this.$container.classList.add(this._options.wrapClassName);
|
|
8016
|
-
this.$container.appendChild(this._$canvas);
|
|
8017
|
-
this._addEventListener();
|
|
8018
|
-
this.setReadOnly(this._options.readOnly);
|
|
8019
|
-
this._update({
|
|
8020
|
-
currentTime: this._options.currentTime,
|
|
8021
|
-
timeWidth: this._options.timeWidth,
|
|
8022
|
-
timeSections: this._options.timeSections
|
|
8023
|
-
});
|
|
8024
|
-
}
|
|
8025
|
-
/**
|
|
8026
|
-
* 获取当前时间
|
|
8027
|
-
* @returns
|
|
8028
|
-
*/ get currentTime() {
|
|
8029
|
-
return this._currentTime;
|
|
8030
|
-
}
|
|
8031
|
-
set currentTime(time) {
|
|
8032
|
-
if (!this._isMouseDown && !this._destroyed) {
|
|
8033
|
-
this._update({
|
|
8034
|
-
currentTime: new Date(time)
|
|
8035
|
-
});
|
|
8036
|
-
}
|
|
8037
|
-
}
|
|
8038
|
-
/**
|
|
8039
|
-
* 获取 TimeLine 的宽度
|
|
8040
|
-
* @returns
|
|
8041
|
-
*/ get width() {
|
|
8042
|
-
return this._width;
|
|
8043
|
-
}
|
|
8044
|
-
set width(width) {
|
|
8045
|
-
if (this._$canvas && width) {
|
|
8046
|
-
width = Math.floor(width);
|
|
8047
|
-
this._$canvas.width = width * this._options.dpr;
|
|
8048
|
-
this._$canvas.style.cssText += `width: ${width}px;`;
|
|
8049
|
-
this.$container.style.width = width + 'px';
|
|
8050
|
-
this._width = width;
|
|
8051
|
-
this._update();
|
|
8052
|
-
}
|
|
8053
|
-
}
|
|
8054
|
-
/**
|
|
8055
|
-
* 获取 TimeLine 的高度
|
|
8056
|
-
* @returns
|
|
8057
|
-
*/ get height() {
|
|
8058
|
-
return this._height;
|
|
8059
|
-
}
|
|
8060
|
-
set height(height) {
|
|
8061
|
-
height = Math.floor(height);
|
|
8062
|
-
if (this._$canvas && height) {
|
|
8063
|
-
this._$canvas.height = height * this._options.dpr;
|
|
8064
|
-
this._$canvas.style.cssText += `height: ${height}px;`;
|
|
8065
|
-
this.$container.style.height = height + 'px';
|
|
8066
|
-
this._height = height;
|
|
8067
|
-
this._update();
|
|
8068
|
-
}
|
|
8069
|
-
}
|
|
8070
|
-
/**
|
|
8071
|
-
* 设置时间轴刻度宽度
|
|
8072
|
-
* @param timeWidth - 时间轴刻度宽度 [0, TIME_WIDTH.length - 1]
|
|
8073
|
-
* @returns
|
|
8074
|
-
*/ setTimeWidth(timeWidth) {
|
|
8075
|
-
this._update({
|
|
8076
|
-
timeWidth
|
|
8077
|
-
});
|
|
8078
|
-
}
|
|
8079
|
-
get scale() {
|
|
8080
|
-
return this._timeWidth;
|
|
8081
|
-
}
|
|
8082
|
-
/**
|
|
8083
|
-
* 设置时间轴刻度宽度
|
|
8084
|
-
* @param timeWidth - 时间轴刻度宽度 [0, TIME_WIDTH.length - 1]
|
|
8085
|
-
* @returns
|
|
8086
|
-
*/ changeScale(scale) {
|
|
8087
|
-
this.setTimeWidth(scale);
|
|
8088
|
-
}
|
|
8089
|
-
/**
|
|
8090
|
-
* 设置片段数组
|
|
8091
|
-
* @param timeSections - 片段数组
|
|
8092
|
-
* @returns
|
|
8093
|
-
*/ updateRecords(timeSections) {
|
|
8094
|
-
this._update({
|
|
8095
|
-
timeSections
|
|
8096
|
-
});
|
|
8097
|
-
}
|
|
8098
|
-
/**
|
|
8099
|
-
* 更新当前时间
|
|
8100
|
-
* @param time 能转成时间的值, 如 时间对象 Date, 时间戳,时间戳字符串
|
|
8101
|
-
*/ update(time) {
|
|
8102
|
-
if (time && !this._isMouseDown) {
|
|
8103
|
-
this._update({
|
|
8104
|
-
currentTime: new Date(tranTime(time, 'YYYY-MM-DD HH:mm:ss'))
|
|
8105
|
-
});
|
|
8106
|
-
}
|
|
8107
|
-
}
|
|
8108
|
-
/**
|
|
8109
|
-
* 更新
|
|
8110
|
-
* @param options - 更新参数
|
|
8111
|
-
* @returns
|
|
8112
|
-
*/ _update(options) {
|
|
8113
|
-
if ((options == null ? void 0 : options.currentTime) && options.currentTime instanceof Date) {
|
|
8114
|
-
this._currentTime = options.currentTime;
|
|
8115
|
-
}
|
|
8116
|
-
if (options == null ? void 0 : options.timeSections) {
|
|
8117
|
-
this._timeSections = this._mergeTimeSections(options.timeSections);
|
|
8118
|
-
}
|
|
8119
|
-
if (typeof (options == null ? void 0 : options.timeWidth) === 'number' && (options == null ? void 0 : options.timeWidth) < TIME_WIDTH.length) {
|
|
8120
|
-
this._timeWidth = options == null ? void 0 : options.timeWidth;
|
|
8121
|
-
this._timeWidthArray = TIME_WIDTH[Math.floor(this._timeWidth)];
|
|
8122
|
-
}
|
|
8123
|
-
if (!this._timeWidthArray) {
|
|
8124
|
-
// 不存在 默认取第一个
|
|
8125
|
-
this._timeWidth = 0;
|
|
8126
|
-
this._timeWidthArray = TIME_WIDTH[0];
|
|
8127
|
-
}
|
|
8128
|
-
if (typeof (options == null ? void 0 : options.timeWidth) === 'number' && this._timeWidthArray) {
|
|
8129
|
-
if (this._timeWidthArray[3]) {
|
|
8130
|
-
var _this__$canvas;
|
|
8131
|
-
(_this__$canvas = this._$canvas) == null ? void 0 : _this__$canvas.setAttribute('data-title', this._timeWidthArray[3]);
|
|
8132
|
-
}
|
|
8133
|
-
}
|
|
8134
|
-
// 清空画布
|
|
8135
|
-
if (this._ctx) {
|
|
8136
|
-
this._ctx.fillStyle = this._options.timeAxisBgColor;
|
|
8137
|
-
// prettier-ignore
|
|
8138
|
-
this._ctx.fillRect(0, 0, this._width * this._options.dpr, this._height * this._options.dpr);
|
|
8139
|
-
}
|
|
8140
|
-
this._draw();
|
|
8141
|
-
}
|
|
8142
|
-
/**
|
|
8143
|
-
* 设置只读或取消只读
|
|
8144
|
-
* @param readOnly - 只读或取消只读
|
|
8145
|
-
* @returns
|
|
8146
|
-
*/ setReadOnly(readOnly) {
|
|
8147
|
-
this._readOnly = readOnly;
|
|
8148
|
-
if (this._$canvas) {
|
|
8149
|
-
if (this._readOnly) {
|
|
8150
|
-
this._$canvas.style.cursor = 'not-allowed';
|
|
8151
|
-
} else {
|
|
8152
|
-
this._$canvas.style.cursor = 'pointer';
|
|
8153
|
-
}
|
|
8154
|
-
}
|
|
8155
|
-
}
|
|
8156
|
-
/**
|
|
8157
|
-
* 销毁
|
|
8158
|
-
* @returns
|
|
8159
|
-
*/ destroy() {
|
|
8160
|
-
this._removeEventListener();
|
|
8161
|
-
if (this._$canvas) {
|
|
8162
|
-
this.$container.removeChild(this._$canvas);
|
|
8163
|
-
this._timeSections = [];
|
|
8164
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
8165
|
-
this._$canvas = null;
|
|
8166
|
-
}
|
|
8167
|
-
this._destroyed = true;
|
|
8168
|
-
this._options.onDestroy == null ? void 0 : this._options.onDestroy.call(this._options);
|
|
8169
|
-
// if (this._$tip) {
|
|
8170
|
-
// this.$container.removeChild(this._$tip);
|
|
8171
|
-
// // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
8172
|
-
// this._$tip = null!;
|
|
8173
|
-
// }
|
|
8174
|
-
}
|
|
8175
|
-
// -----------------------------------------------------------------------------------------
|
|
8176
|
-
// private
|
|
8177
|
-
// -----------------------------------------------------------------------------------------
|
|
8178
|
-
/**
|
|
8179
|
-
* 缩放时间轴 动态减少间距 (没处理 dpr)
|
|
8180
|
-
* @returns 刻度间距
|
|
8181
|
-
*/ get _curScaleSpacing() {
|
|
8182
|
-
var _this__timeWidthArray, _this__timeWidthArray1;
|
|
8183
|
-
return Math.floor(((_this__timeWidthArray = this._timeWidthArray) == null ? void 0 : _this__timeWidthArray[1]) - ((_this__timeWidthArray1 = this._timeWidthArray) == null ? void 0 : _this__timeWidthArray1[1]) * +(this._timeWidth % 1 / 2).toFixed(2)); // 刻度间距
|
|
8184
|
-
}
|
|
8185
|
-
/**
|
|
8186
|
-
* 绘制
|
|
8187
|
-
*/ _draw() {
|
|
8188
|
-
this._drawScale();
|
|
8189
|
-
this._drawSections();
|
|
8190
|
-
}
|
|
8191
|
-
/**
|
|
8192
|
-
* 绘制刻度
|
|
8193
|
-
*/ _drawScale() {
|
|
8194
|
-
const lineWidth = 1 * this._options.dpr;
|
|
8195
|
-
/** 中心位置 */ this._centerPositionX = parseInt(this._width * this._options.dpr / 2 + '');
|
|
8196
|
-
const centerPosition = {
|
|
8197
|
-
x: this._width * this._options.dpr / 2,
|
|
8198
|
-
y: this._height * this._options.dpr
|
|
8199
|
-
};
|
|
8200
|
-
const curScaleTime = Math.floor(this._currentTime.getTime() / 1000); // currentTime 秒
|
|
8201
|
-
// 由于时区问题 当前时间戳(秒)处理但前刻度有偏移,所以改成使用当天便宜量, 这样就能保证当天的 0 点刻度能展示
|
|
8202
|
-
// prettier-ignore
|
|
8203
|
-
const offsetSecond = (curScaleTime - Math.floor(new Date(tranTime(new Date(curScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000)) % this._timeWidthArray[0];
|
|
8204
|
-
const padding = this._height * this._options.dpr / 20; // 刻度顶部偏移量 高度的 1/8
|
|
8205
|
-
const spacing = this._curScaleSpacing * this._options.dpr;
|
|
8206
|
-
// 因为右偏移 右侧靠近中心点的X坐标 减去偏移量
|
|
8207
|
-
// prettier-ignore
|
|
8208
|
-
const rightLastScaleTimeX = Math.floor(this._centerPositionX + (this._timeWidthArray[0] - offsetSecond) / this._timeWidthArray[0] * spacing);
|
|
8209
|
-
let leftLastScaleTime = curScaleTime - offsetSecond;
|
|
8210
|
-
let rightLastScaleTime = leftLastScaleTime + this._timeWidthArray[0];
|
|
8211
|
-
const leftLastScaleTimeX = rightLastScaleTimeX - spacing;
|
|
8212
|
-
// 左扩展刻度
|
|
8213
|
-
for(let x = leftLastScaleTimeX; x > 0; x -= spacing){
|
|
8214
|
-
// prettier-ignore
|
|
8215
|
-
const leftOffsetSecond = leftLastScaleTime - Math.floor(new Date(tranTime(new Date(leftLastScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000);
|
|
8216
|
-
// prettier-ignore
|
|
8217
|
-
const curScale = leftOffsetSecond % (this._timeWidthArray[0] * this._timeWidthArray[2]);
|
|
8218
|
-
if (curScale === 0) {
|
|
8219
|
-
// prettier-ignore
|
|
8220
|
-
this._drawSolidLine(x, padding, x, padding + (this._options.scaleOffsetTop + 4) * this._options.dpr, lineWidth);
|
|
8221
|
-
// prettier-ignore
|
|
8222
|
-
this._drawTextString(tranTime(new Date(leftLastScaleTime * 1000)), x, padding + (this._options.scaleOffsetTop + 4 + 4) * this._options.dpr, "center");
|
|
8223
|
-
} else {
|
|
8224
|
-
this._drawSolidLine(x, padding, x, padding + this._options.scaleOffsetTop * this._options.dpr, lineWidth);
|
|
8225
|
-
}
|
|
8226
|
-
leftLastScaleTime = leftLastScaleTime - this._timeWidthArray[0];
|
|
8227
|
-
}
|
|
8228
|
-
// 右扩展刻度
|
|
8229
|
-
// prettier-ignore
|
|
8230
|
-
for(let x = rightLastScaleTimeX; x <= this._width * this._options.dpr; x += spacing){
|
|
8231
|
-
// prettier-ignore
|
|
8232
|
-
const rightOffsetSecond = rightLastScaleTime - Math.floor(new Date(tranTime(new Date(rightLastScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000);
|
|
8233
|
-
// prettier-ignore
|
|
8234
|
-
const curScale = rightOffsetSecond % (this._timeWidthArray[0] * this._timeWidthArray[2]);
|
|
8235
|
-
if (curScale === 0) {
|
|
8236
|
-
// prettier-ignore
|
|
8237
|
-
this._drawSolidLine(x, padding, x, padding + (this._options.scaleOffsetTop + 4) * this._options.dpr, lineWidth);
|
|
8238
|
-
// prettier-ignore
|
|
8239
|
-
this._drawTextString(tranTime(new Date(rightLastScaleTime * 1000)), x, padding + (this._options.scaleOffsetTop + 4 + 4) * this._options.dpr, "center");
|
|
8240
|
-
} else {
|
|
8241
|
-
this._drawSolidLine(x, padding, x, padding + this._options.scaleOffsetTop * this._options.dpr, lineWidth);
|
|
8242
|
-
}
|
|
8243
|
-
rightLastScaleTime = rightLastScaleTime + this._timeWidthArray[0];
|
|
8244
|
-
}
|
|
8245
|
-
// 当前中心位置(当前时间 currentTime)
|
|
8246
|
-
// prettier-ignore
|
|
8247
|
-
this._drawSolidLine(centerPosition.x, 0, centerPosition.x, centerPosition.y, lineWidth, this._options.timePointColor);
|
|
8248
|
-
}
|
|
8249
|
-
/**
|
|
8250
|
-
* 绘制线
|
|
8251
|
-
* @param startX - 线起点 x 坐标
|
|
8252
|
-
* @param startY - 线起点 y 坐标
|
|
8253
|
-
* @param endX - 线终点 x 坐标
|
|
8254
|
-
* @param endY - 线终点 y 坐标
|
|
8255
|
-
* @param lineWidth - 线宽度
|
|
8256
|
-
* @param color - 线颜色
|
|
8257
|
-
*
|
|
8258
|
-
*/ // prettier-ignore
|
|
8259
|
-
_drawSolidLine(startX, startY, endX, endY, lineWidth, color) {
|
|
8260
|
-
if (this._ctx) {
|
|
8261
|
-
this._ctx.save();
|
|
8262
|
-
this._ctx.strokeStyle = color != null ? color : this._options.timeScaleColor;
|
|
8263
|
-
this._ctx.lineWidth = lineWidth;
|
|
8264
|
-
this._ctx.beginPath();
|
|
8265
|
-
this._ctx.moveTo(startX, startY);
|
|
8266
|
-
this._ctx.lineTo(endX, endY);
|
|
8267
|
-
this._ctx.stroke();
|
|
8268
|
-
this._ctx.restore();
|
|
8269
|
-
}
|
|
8270
|
-
}
|
|
8271
|
-
/**
|
|
8272
|
-
* 绘制刻度文字
|
|
8273
|
-
* @param text - 文本
|
|
8274
|
-
* @param x - X
|
|
8275
|
-
* @param y - Y
|
|
8276
|
-
* @param align - 文本对齐方式
|
|
8277
|
-
*/ _drawTextString(text, x, y, align) {
|
|
8278
|
-
if (this._ctx) {
|
|
8279
|
-
const timeTexts = text.split(' ');
|
|
8280
|
-
this._ctx.font = `${12 * this._options.dpr * 1}px serif`;
|
|
8281
|
-
this._ctx.fillStyle = this._options.timeTextColor;
|
|
8282
|
-
this._ctx.textAlign = align || 'left';
|
|
8283
|
-
if (this._timeWidthArray[0] % 60 === 0) {
|
|
8284
|
-
// 仅展示 hh:mm
|
|
8285
|
-
timeTexts[1] = timeTexts[1].replace(/:00$/, '');
|
|
8286
|
-
}
|
|
8287
|
-
this._ctx.fillText(timeTexts[1], x, y + 8 * this._options.dpr);
|
|
8288
|
-
// prettier-ignore
|
|
8289
|
-
if (this._options.showYearMonthDay && (timeTexts[1] === "00:00:00" || timeTexts[1] === "00:00" || this._timeWidthArray[0] * this._timeWidthArray[2] === 24 * 3600)) {
|
|
8290
|
-
// 展示年月日
|
|
8291
|
-
this._ctx.textAlign = align || "left";
|
|
8292
|
-
this._ctx.fillText(timeTexts[0], x, y + (8 + 10) * this._options.dpr);
|
|
8293
|
-
}
|
|
8294
|
-
}
|
|
8295
|
-
}
|
|
8296
|
-
/**
|
|
8297
|
-
* 画录像区间
|
|
8298
|
-
*/ _drawSections() {
|
|
8299
|
-
// 绘制蓝色区域
|
|
8300
|
-
const timeArr = this._timeSections || [];
|
|
8301
|
-
// 根据时间查找当前位置
|
|
8302
|
-
for(let i = 0; i < timeArr.length; i++){
|
|
8303
|
-
const position = this._findPosition(timeArr[i]);
|
|
8304
|
-
// 判断一下绘制区域是否在画布区域, 不在可以不用绘制
|
|
8305
|
-
// prettier-ignore
|
|
8306
|
-
if (this._ctx && isOverlap(0, this._width * this._options.dpr, position.x1, position.x2)) {
|
|
8307
|
-
this._ctx.fillStyle = this._options.timeSectionColor;
|
|
8308
|
-
// prettier-ignore
|
|
8309
|
-
this._ctx.fillRect(position.x1, 0, position.x2 - position.x1, this._height * this._options.dpr);
|
|
8310
|
-
}
|
|
8311
|
-
}
|
|
8312
|
-
}
|
|
8313
|
-
/**
|
|
8314
|
-
* 获取时间片段在时间轴中的x1 ,x2坐标 (已做 dpr 处理)
|
|
8315
|
-
* @param item - 时间片段
|
|
8316
|
-
* @returns {void}
|
|
8317
|
-
*/ _findPosition(item) {
|
|
8318
|
-
// 中间的当前时间 currentTime 为基准, 然后计算时间片段的 x 坐标和 y 坐标
|
|
8319
|
-
// prettier-ignore
|
|
8320
|
-
const x1 = (parseInt((item.startTime - this._currentTime.getTime()) / 1000 + '', 10) / this._timeWidthArray[0] // 多少个刻度
|
|
8321
|
-
* this._curScaleSpacing // 乘刻度宽度
|
|
8322
|
-
+ this._width / 2) * this._options.dpr;
|
|
8323
|
-
const x2 = x1 + parseInt((item.endTime - item.startTime) / 1000 + '', 10) / this._timeWidthArray[0] * this._curScaleSpacing * this._options.dpr;
|
|
8324
|
-
return {
|
|
8325
|
-
x1,
|
|
8326
|
-
x2
|
|
8327
|
-
};
|
|
8328
|
-
}
|
|
8329
|
-
/**
|
|
8330
|
-
* 合并相邻两个时间区间
|
|
8331
|
-
* @param timeSections - 时间区间数组
|
|
8332
|
-
*
|
|
8333
|
-
* @returns 合并后的时间区间
|
|
8334
|
-
*/ _mergeTimeSections(timeSections) {
|
|
8335
|
-
if (timeSections.length === 0) return timeSections;
|
|
8336
|
-
timeSections = timeSections.map((item)=>{
|
|
8337
|
-
// 处理秒
|
|
8338
|
-
if ((item.startTime + '').length === 10) {
|
|
8339
|
-
item.startTime = item.startTime * 1000;
|
|
8340
|
-
}
|
|
8341
|
-
if ((item.endTime + '').length === 10) {
|
|
8342
|
-
item.endTime = item.endTime * 1000;
|
|
8343
|
-
}
|
|
8344
|
-
return {
|
|
8345
|
-
startTime: item.startTime,
|
|
8346
|
-
endTime: item.endTime
|
|
8347
|
-
};
|
|
8348
|
-
});
|
|
8349
|
-
const merged = [
|
|
8350
|
-
timeSections[0]
|
|
8351
|
-
];
|
|
8352
|
-
for(let i = 1; i < timeSections.length; i++){
|
|
8353
|
-
const prev = merged[merged.length - 1];
|
|
8354
|
-
const curr = timeSections[i];
|
|
8355
|
-
// 如果当前区间与上一个区间重叠或相邻(即 prev.end >= curr.start)
|
|
8356
|
-
if (prev.endTime >= curr.startTime) {
|
|
8357
|
-
// 合并区间
|
|
8358
|
-
prev.endTime = Math.max(prev.endTime, curr.endTime);
|
|
8359
|
-
} else {
|
|
8360
|
-
merged.push(curr);
|
|
8361
|
-
}
|
|
8362
|
-
}
|
|
8363
|
-
return merged;
|
|
8364
|
-
}
|
|
8365
|
-
// -------------------------------------
|
|
8366
|
-
// mouse event
|
|
8367
|
-
// -------------------------------------
|
|
8368
|
-
/**
|
|
8369
|
-
* 添加事件监听
|
|
8370
|
-
* @returns
|
|
8371
|
-
*/ _addEventListener() {
|
|
8372
|
-
if (this._$canvas) {
|
|
8373
|
-
// 事件监听
|
|
8374
|
-
this._$canvas.addEventListener('mousemove', this._mousemoveFun);
|
|
8375
|
-
// prettier-ignore
|
|
8376
|
-
this._$canvas.addEventListener("mouseover", this._mouseoverFun);
|
|
8377
|
-
// prettier-ignore
|
|
8378
|
-
this._$canvas.addEventListener("mouseleave", this._mouseleaveFun);
|
|
8379
|
-
// prettier-ignore
|
|
8380
|
-
this._$canvas.addEventListener("mousedown", this._mousedownFun);
|
|
8381
|
-
// prettier-ignore
|
|
8382
|
-
this._$canvas.addEventListener("mouseup", this._mouseUpFun);
|
|
8383
|
-
this._$canvas.addEventListener('wheel', this._mousewheelFun);
|
|
8384
|
-
// prettier-ignore
|
|
8385
|
-
this.$container.addEventListener("wheel", (e)=>{
|
|
8386
|
-
e.preventDefault();
|
|
8387
|
-
}, {
|
|
8388
|
-
passive: false
|
|
8389
|
-
});
|
|
8390
|
-
this._$canvas.addEventListener('keydown', this._ctrlKeyDownFun);
|
|
8391
|
-
this._$canvas.addEventListener('keyup', this._ctrlKeyUpFun);
|
|
8392
|
-
// ctrl 键事件
|
|
8393
|
-
document.addEventListener('keydown', this._ctrlKeyDownFun, false);
|
|
8394
|
-
document.addEventListener('keyup', this._ctrlKeyUpFun, false);
|
|
8395
|
-
this._$canvas.addEventListener('touchstart', this._touchstartFun, {
|
|
8396
|
-
passive: false
|
|
8397
|
-
});
|
|
8398
|
-
this._$canvas.addEventListener('touchmove', this._touchmoveFun, {
|
|
8399
|
-
passive: false
|
|
8400
|
-
});
|
|
8401
|
-
this._$canvas.addEventListener('touchend', this._touchendFun, {
|
|
8402
|
-
passive: false
|
|
8403
|
-
});
|
|
8404
|
-
}
|
|
8405
|
-
}
|
|
8406
|
-
/**
|
|
8407
|
-
* 移除事件监听
|
|
8408
|
-
* @returns
|
|
8409
|
-
*/ _removeEventListener() {
|
|
8410
|
-
if (this._$canvas) {
|
|
8411
|
-
// 事件监听
|
|
8412
|
-
this._$canvas.removeEventListener('mousemove', this._mousemoveFun);
|
|
8413
|
-
// prettier-ignore
|
|
8414
|
-
this._$canvas.removeEventListener("mouseover", this._mouseoverFun);
|
|
8415
|
-
// prettier-ignore
|
|
8416
|
-
this._$canvas.removeEventListener("mouseleave", this._mouseleaveFun);
|
|
8417
|
-
// prettier-ignore
|
|
8418
|
-
this._$canvas.removeEventListener("mousedown", this._mousedownFun);
|
|
8419
|
-
// prettier-ignore
|
|
8420
|
-
this._$canvas.removeEventListener("mouseup", this._mouseUpFun);
|
|
8421
|
-
this._$canvas.removeEventListener('wheel', this._mousewheelFun);
|
|
8422
|
-
this._$canvas.removeEventListener('keydown', this._ctrlKeyDownFun);
|
|
8423
|
-
this._$canvas.removeEventListener('keyup', this._ctrlKeyUpFun);
|
|
8424
|
-
// ctrl 键事件
|
|
8425
|
-
document.removeEventListener('keydown', this._ctrlKeyDownFun);
|
|
8426
|
-
document.removeEventListener('keyup', this._ctrlKeyUpFun);
|
|
8427
|
-
// touch
|
|
8428
|
-
this._$canvas.removeEventListener('touchstart', this._touchstartFun);
|
|
8429
|
-
this._$canvas.removeEventListener('touchmove', this._touchmoveFun);
|
|
8430
|
-
this._$canvas.removeEventListener('touchend', this._touchendFun);
|
|
8431
|
-
}
|
|
8432
|
-
}
|
|
8433
|
-
/**
|
|
8434
|
-
* 鼠标按下事件监听
|
|
8435
|
-
* @param e - 鼠标事件
|
|
8436
|
-
* @returns
|
|
8437
|
-
*/ _mousedownFun(e) {
|
|
8438
|
-
if (this._readOnly) return;
|
|
8439
|
-
this._isMouseDown = true;
|
|
8440
|
-
this._mousePosition = e.pageX;
|
|
8441
|
-
this._oldTime = this._currentTime;
|
|
8442
|
-
this._options.onDragStart == null ? void 0 : this._options.onDragStart.call(this._options, this._currentTime);
|
|
8443
|
-
}
|
|
8444
|
-
/**
|
|
8445
|
-
* 鼠标移入事件监听
|
|
8446
|
-
* @returns
|
|
8447
|
-
*/ _mouseoverFun() {
|
|
8448
|
-
if (this._readOnly) return;
|
|
8449
|
-
this._isOver = true;
|
|
8450
|
-
}
|
|
8451
|
-
/**
|
|
8452
|
-
* 鼠标离开事件监听
|
|
8453
|
-
* @returns
|
|
8454
|
-
*/ _mouseleaveFun(e) {
|
|
8455
|
-
if (this._readOnly) return;
|
|
8456
|
-
this._isOver = false;
|
|
8457
|
-
this._moveEndOrTouchEndFun(e);
|
|
8458
|
-
}
|
|
8459
|
-
/**
|
|
8460
|
-
* 鼠标抬起事件监听
|
|
8461
|
-
* @returns
|
|
8462
|
-
*/ _mouseUpFun(e) {
|
|
8463
|
-
this._moveEndOrTouchEndFun(e);
|
|
8464
|
-
}
|
|
8465
|
-
/**
|
|
8466
|
-
* 鼠标移动事件监听
|
|
8467
|
-
* @param e - 鼠标事件
|
|
8468
|
-
* @returns
|
|
8469
|
-
*/ _mousemoveFun(e) {
|
|
8470
|
-
if (this._readOnly) return;
|
|
8471
|
-
if (this._isMouseDown && this._isOver) {
|
|
8472
|
-
// 鼠标按下位置和移动位置的偏移量
|
|
8473
|
-
this._moveUpdateFun(e.pageX);
|
|
8474
|
-
} else {
|
|
8475
|
-
const left = parseInt(this.$container.offsetLeft + '', 10);
|
|
8476
|
-
this._mousePosition = e.pageX - left;
|
|
8477
|
-
this._update(); // 更新画面
|
|
8478
|
-
}
|
|
8479
|
-
new Date(// prettier-ignore
|
|
8480
|
-
this._currentTime.getTime() + parseInt((e.pageX - this._width / 2) / this._curScaleSpacing * this._timeWidthArray[0] + "", 10) * 1000);
|
|
8481
|
-
}
|
|
8482
|
-
/**
|
|
8483
|
-
* 鼠标滚轮滚动
|
|
8484
|
-
* @param e - 鼠标滚轮滚动事件
|
|
8485
|
-
* @returns
|
|
8486
|
-
*/ _mousewheelFun(e) {
|
|
8487
|
-
e.preventDefault(); // 阻止默认滚动行为
|
|
8488
|
-
// eslint-disable-next-line no-useless-return
|
|
8489
|
-
if (this._readOnly) return;
|
|
8490
|
-
// if (this._isCtrlKeyDown) {
|
|
8491
|
-
// const zoom = e.deltaY > 0 ? -this._options.wheelSpeed : this._options.wheelSpeed;
|
|
8492
|
-
// this._timeWidth = +(this._timeWidth + zoom).toFixed(2);
|
|
8493
|
-
// if (this._timeWidth <= 0) {
|
|
8494
|
-
// this._timeWidth = 0;
|
|
8495
|
-
// } else if (this._timeWidth >= TIME_WIDTH.length) {
|
|
8496
|
-
// this._timeWidth = TIME_WIDTH.length - 0.01;
|
|
8497
|
-
// }
|
|
8498
|
-
// this._update({
|
|
8499
|
-
// timeWidth: Math.floor(this._timeWidth),
|
|
8500
|
-
// });
|
|
8501
|
-
// }
|
|
8502
|
-
}
|
|
8503
|
-
/**
|
|
8504
|
-
* ctrl键按下事件
|
|
8505
|
-
* @param e - 键盘按下事件
|
|
8506
|
-
*/ _ctrlKeyDownFun(e) {
|
|
8507
|
-
if (e.ctrlKey || e.key === 'Control') {
|
|
8508
|
-
this._isCtrlKeyDown = true;
|
|
8509
|
-
}
|
|
8510
|
-
}
|
|
8511
|
-
/**
|
|
8512
|
-
* ctrl键抬起事件
|
|
8513
|
-
* @param e - 键盘按下事件
|
|
8514
|
-
*/ _ctrlKeyUpFun(e) {
|
|
8515
|
-
if (e.ctrlKey || e.key === 'Control') {
|
|
8516
|
-
this._isCtrlKeyDown = false;
|
|
8517
|
-
}
|
|
8518
|
-
}
|
|
8519
|
-
// ----------------------------------------------------------------------
|
|
8520
|
-
// touch
|
|
8521
|
-
// ----------------------------------------------------------------------
|
|
8522
|
-
/**
|
|
8523
|
-
* 触摸距离
|
|
8524
|
-
* @param touches - 两指触摸点
|
|
8525
|
-
* @returns
|
|
8526
|
-
*/ _getTouchDistance(touches) {
|
|
8527
|
-
const [touch1, touch2] = touches;
|
|
8528
|
-
const dx = touch2.clientX - touch1.clientX;
|
|
8529
|
-
const dy = touch2.clientY - touch1.clientY;
|
|
8530
|
-
return Math.sqrt(dx * dx + dy * dy);
|
|
8531
|
-
}
|
|
8532
|
-
/**
|
|
8533
|
-
* 触摸开始
|
|
8534
|
-
* @param e - 触摸事件
|
|
8535
|
-
* @returns
|
|
8536
|
-
*/ _touchstartFun(e) {
|
|
8537
|
-
if (this._readOnly) return;
|
|
8538
|
-
this._oldTime = this._currentTime;
|
|
8539
|
-
this._isOver = true;
|
|
8540
|
-
if (e.touches.length === 1) {
|
|
8541
|
-
// 单指
|
|
8542
|
-
const touch = e.touches[0];
|
|
8543
|
-
this._isMouseDown = true;
|
|
8544
|
-
this._mousePosition = touch.clientX;
|
|
8545
|
-
// this._touchmoveFun(e);
|
|
8546
|
-
} else if (e.touches.length === 2) {
|
|
8547
|
-
// 双指
|
|
8548
|
-
this._lastTouchDist = this._getTouchDistance(e.touches);
|
|
8549
|
-
}
|
|
8550
|
-
}
|
|
8551
|
-
/**
|
|
8552
|
-
* 触摸移动
|
|
8553
|
-
* @param e - 触摸事件
|
|
8554
|
-
* @returns
|
|
8555
|
-
*/ _touchmoveFun(e) {
|
|
8556
|
-
e.preventDefault(); // 防止页面缩放
|
|
8557
|
-
e.stopPropagation();
|
|
8558
|
-
if (this._readOnly) return;
|
|
8559
|
-
if (e.touches.length === 1) {
|
|
8560
|
-
// 单指
|
|
8561
|
-
const touch = e.touches[0];
|
|
8562
|
-
this._moveUpdateFun(touch.clientX);
|
|
8563
|
-
} else if (e.touches.length === 2) {
|
|
8564
|
-
// 双指
|
|
8565
|
-
const newDist = this._getTouchDistance(e.touches);
|
|
8566
|
-
newDist / this._lastTouchDist;
|
|
8567
|
-
// scale *= zoom;
|
|
8568
|
-
// // 限制缩放范围
|
|
8569
|
-
// scale = Math.max(0.5, Math.min(3, scale));
|
|
8570
|
-
// img.style.transform = `scale(${scale})`;
|
|
8571
|
-
// lastDist = newDist;
|
|
8572
|
-
}
|
|
8573
|
-
}
|
|
8574
|
-
/**
|
|
8575
|
-
* 触摸结束
|
|
8576
|
-
* @param e - 触摸事件
|
|
8577
|
-
* @returns
|
|
8578
|
-
*/ _touchendFun(e) {
|
|
8579
|
-
if (this._readOnly) return;
|
|
8580
|
-
this._moveEndOrTouchEndFun(e);
|
|
8581
|
-
}
|
|
8582
|
-
/**
|
|
8583
|
-
* 拖动结束
|
|
8584
|
-
* @returns
|
|
8585
|
-
*/ _moveEndOrTouchEndFun(e) {
|
|
8586
|
-
if (this._readOnly) return;
|
|
8587
|
-
if (this._isMouseDown) {
|
|
8588
|
-
this._isMouseDown = false;
|
|
8589
|
-
if (this._moved) {
|
|
8590
|
-
this._moved = false;
|
|
8591
|
-
this._update({
|
|
8592
|
-
currentTime: this._currentTime
|
|
8593
|
-
});
|
|
8594
|
-
this._oldTime = this._currentTime;
|
|
8595
|
-
this._options.onDragEnd == null ? void 0 : this._options.onDragEnd.call(this._options, this._currentTime, this._isOver);
|
|
8596
|
-
}
|
|
8597
|
-
if (this._isOver && Math.abs(this._mousePosition - (e.pageX || e.clientX)) > 5) {
|
|
8598
|
-
this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, this._currentTime);
|
|
8599
|
-
}
|
|
8600
|
-
this._mousePosition = 0;
|
|
8601
|
-
this._lastTouchDist = 0;
|
|
8602
|
-
}
|
|
8603
|
-
}
|
|
8604
|
-
/**
|
|
8605
|
-
* 移动更新时间
|
|
8606
|
-
* @param x - 移动的x坐标
|
|
8607
|
-
* @returns
|
|
8608
|
-
*/ _moveUpdateFun(x) {
|
|
8609
|
-
// 鼠标按下位置和移动位置的偏移量
|
|
8610
|
-
const mouseOffset = this._mousePosition - x;
|
|
8611
|
-
// fix点击引起mousemove的问题
|
|
8612
|
-
if (mouseOffset === 0) return;
|
|
8613
|
-
if (this._oldTime) {
|
|
8614
|
-
// prettier-ignore
|
|
8615
|
-
const currentTime = this._oldTime.getTime() + parseInt(mouseOffset / this._curScaleSpacing * this._timeWidthArray[0] + "", 10) * 1000;
|
|
8616
|
-
this._update({
|
|
8617
|
-
currentTime: new Date(currentTime)
|
|
8618
|
-
});
|
|
8619
|
-
this._options.onDragging == null ? void 0 : this._options.onDragging.call(this._options, new Date(currentTime));
|
|
8620
|
-
}
|
|
8621
|
-
this._moved = true;
|
|
8622
|
-
}
|
|
8623
|
-
constructor(container, options){
|
|
8624
|
-
this._$canvas = null;
|
|
8625
|
-
this._ctx = null;
|
|
8626
|
-
this._width = 0;
|
|
8627
|
-
this._height = 0;
|
|
8628
|
-
this._currentTime = new Date(new Date().setHours(0, 0, 0, 0));
|
|
8629
|
-
this._timeWidth = 0;
|
|
8630
|
-
/** 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 中文说明] */ this._timeWidthArray = TIME_WIDTH[0];
|
|
8631
|
-
this._centerPositionX = 0;
|
|
8632
|
-
this._timeSections = [];
|
|
8633
|
-
/** 只读 */ this._readOnly = false;
|
|
8634
|
-
// mouse
|
|
8635
|
-
this._isMouseDown = false;
|
|
8636
|
-
this._mousePosition = 0; // 鼠标在画布中X轴的位置
|
|
8637
|
-
this._oldTime = null;
|
|
8638
|
-
this._isOver = false;
|
|
8639
|
-
this._moved = false;
|
|
8640
|
-
this._isCtrlKeyDown = false;
|
|
8641
|
-
this._destroyed = false;
|
|
8642
|
-
this._lastTouchDist = 0;
|
|
8643
|
-
this.$container = container;
|
|
8644
|
-
// prettier-ignore
|
|
8645
|
-
this._options = Object.assign({}, TIMELINE_DEFAULT_OPTIONS, options);
|
|
8646
|
-
this._mousemoveFun = this._mousemoveFun.bind(this);
|
|
8647
|
-
this._mouseoverFun = this._mouseoverFun.bind(this);
|
|
8648
|
-
this._mouseleaveFun = this._mouseleaveFun.bind(this);
|
|
8649
|
-
this._mousedownFun = this._mousedownFun.bind(this);
|
|
8650
|
-
this._mouseUpFun = this._mouseUpFun.bind(this);
|
|
8651
|
-
this._mousewheelFun = this._mousewheelFun.bind(this);
|
|
8652
|
-
this._touchstartFun = this._touchstartFun.bind(this);
|
|
8653
|
-
this._touchmoveFun = this._touchmoveFun.bind(this);
|
|
8654
|
-
this._touchendFun = this._touchendFun.bind(this);
|
|
8655
|
-
this._ctrlKeyDownFun = this._ctrlKeyDownFun.bind(this);
|
|
8656
|
-
this._ctrlKeyUpFun = this._ctrlKeyUpFun.bind(this);
|
|
8657
|
-
this._init();
|
|
8658
|
-
}
|
|
8659
|
-
};
|
|
8660
|
-
TimeLine$2.TIME_WIDTH = TIME_WIDTH;
|
|
8661
|
-
|
|
8662
7390
|
function _extends$4() {
|
|
8663
7391
|
_extends$4 = Object.assign || function(target) {
|
|
8664
7392
|
for(var i = 1; i < arguments.length; i++){
|
|
@@ -8675,58 +7403,70 @@ function _extends$4() {
|
|
|
8675
7403
|
}
|
|
8676
7404
|
/**
|
|
8677
7405
|
* 回放时间轴控件
|
|
8678
|
-
*/ class
|
|
7406
|
+
*/ class TimeLineControl extends Control {
|
|
8679
7407
|
_render() {
|
|
8680
|
-
var
|
|
7408
|
+
var _this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
|
|
8681
7409
|
const _timeLineOptions = {
|
|
8682
7410
|
// locale: this._options.locale,
|
|
8683
7411
|
onChange: (date)=>{
|
|
8684
7412
|
this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, date);
|
|
8685
7413
|
this.emit(EVENTS.control.timeLineChange, date);
|
|
7414
|
+
},
|
|
7415
|
+
// 2025-10-27 仅移动端支持
|
|
7416
|
+
onPickerSelect: (item)=>{
|
|
7417
|
+
let date = null;
|
|
7418
|
+
try {
|
|
7419
|
+
if ((item.startTime + '').length === 10) date = new Date(item.startTime * 1000);
|
|
7420
|
+
else if ((item.startTime + '').length === 13) date = new Date(item.startTime);
|
|
7421
|
+
else date = new Date(item.startTime);
|
|
7422
|
+
this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, date);
|
|
7423
|
+
this.emit(EVENTS.control.timeLineChange, date);
|
|
7424
|
+
} catch (error) {
|
|
7425
|
+
}
|
|
8686
7426
|
}
|
|
8687
7427
|
};
|
|
8688
7428
|
if (utilsTools.isMobile()) {
|
|
8689
|
-
this.timeLineUtil = new
|
|
7429
|
+
this.timeLineUtil = new controlTimeLine.MobileTimeLine(this.$container, _timeLineOptions);
|
|
8690
7430
|
} else {
|
|
8691
|
-
this.timeLineUtil = new TimeLine
|
|
7431
|
+
this.timeLineUtil = new controlTimeLine.TimeLine(this.$container, _timeLineOptions);
|
|
8692
7432
|
this._renderAddReduce();
|
|
8693
7433
|
}
|
|
8694
|
-
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (
|
|
7434
|
+
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, this.records);
|
|
8695
7435
|
this.timeLineUtil.update(new Date());
|
|
8696
7436
|
}
|
|
8697
7437
|
setWidth(width) {
|
|
8698
|
-
if (!utilsTools.isMobile()) this.timeLineUtil.width
|
|
7438
|
+
if (!utilsTools.isMobile()) this.timeLineUtil.resize(width);
|
|
8699
7439
|
}
|
|
8700
7440
|
_renderAddReduce() {
|
|
8701
|
-
this
|
|
8702
|
-
this
|
|
8703
|
-
this
|
|
8704
|
-
this
|
|
7441
|
+
this._$add = document.createElement('span');
|
|
7442
|
+
this._$add.classList.add(`${PREFIX_CLASS}-time-line-scale-add`);
|
|
7443
|
+
this._$add.innerHTML = IconComponents.add();
|
|
7444
|
+
this._$add.addEventListener('click', ()=>{
|
|
8705
7445
|
if (this.timeLineUtil) {
|
|
8706
|
-
const currentScale = Math.floor(this.timeLineUtil.
|
|
8707
|
-
this.timeLineUtil.
|
|
7446
|
+
const currentScale = Math.floor(this.timeLineUtil.timeWidth);
|
|
7447
|
+
this.timeLineUtil.setTimeWidth(currentScale + 1);
|
|
8708
7448
|
}
|
|
8709
7449
|
});
|
|
8710
|
-
this
|
|
8711
|
-
this
|
|
8712
|
-
this
|
|
8713
|
-
this
|
|
7450
|
+
this._$reduce = document.createElement('span');
|
|
7451
|
+
this._$reduce.classList.add(`${PREFIX_CLASS}-time-line-scale-sub`);
|
|
7452
|
+
this._$reduce.innerHTML = IconComponents.reduce();
|
|
7453
|
+
this._$reduce.addEventListener('click', ()=>{
|
|
8714
7454
|
if (this.timeLineUtil) {
|
|
8715
|
-
const currentScale = Math.floor(this.timeLineUtil.
|
|
8716
|
-
this.timeLineUtil.
|
|
7455
|
+
const currentScale = Math.floor(this.timeLineUtil.timeWidth);
|
|
7456
|
+
this.timeLineUtil.setTimeWidth(currentScale - 1);
|
|
8717
7457
|
}
|
|
8718
7458
|
});
|
|
8719
|
-
this.$container.appendChild(this
|
|
8720
|
-
this.$container.appendChild(this
|
|
7459
|
+
this.$container.appendChild(this._$add);
|
|
7460
|
+
this.$container.appendChild(this._$reduce);
|
|
8721
7461
|
}
|
|
8722
7462
|
destroy() {
|
|
8723
|
-
if (this
|
|
8724
|
-
this
|
|
8725
|
-
this
|
|
7463
|
+
if (this._$add) {
|
|
7464
|
+
this._$add.remove();
|
|
7465
|
+
this._$add = null;
|
|
8726
7466
|
}
|
|
8727
|
-
if (this
|
|
8728
|
-
this
|
|
8729
|
-
this
|
|
7467
|
+
if (this._$reduce) {
|
|
7468
|
+
this._$reduce.remove();
|
|
7469
|
+
this._$reduce = null;
|
|
8730
7470
|
}
|
|
8731
7471
|
if (this.timeLineUtil) {
|
|
8732
7472
|
this.timeLineUtil.destroy();
|
|
@@ -8746,15 +7486,15 @@ function _extends$4() {
|
|
|
8746
7486
|
tagName: 'div',
|
|
8747
7487
|
controlType: 'block',
|
|
8748
7488
|
classNameSuffix: 'time-line'
|
|
8749
|
-
})), this.records = [];
|
|
7489
|
+
})), this._$add = null, this._$reduce = null, this.records = [];
|
|
8750
7490
|
this._options = options;
|
|
8751
7491
|
this.records = ((_this__options = this._options) == null ? void 0 : (_this__options_props = _this__options.props) == null ? void 0 : _this__options_props.recordList) || [];
|
|
8752
7492
|
this._render();
|
|
8753
7493
|
this.on(EVENTS.setAllDayRecTimes, (records)=>{
|
|
8754
7494
|
var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
8755
|
-
|
|
7495
|
+
_this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
|
|
8756
7496
|
this.records = records;
|
|
8757
|
-
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (
|
|
7497
|
+
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, records);
|
|
8758
7498
|
});
|
|
8759
7499
|
this.on(EVENTS.getOSDTime, (time)=>{
|
|
8760
7500
|
var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
@@ -8826,7 +7566,7 @@ const Controls = {
|
|
|
8826
7566
|
rec: Rec,
|
|
8827
7567
|
speed: Speed,
|
|
8828
7568
|
date: DatePicker,
|
|
8829
|
-
timeLine:
|
|
7569
|
+
timeLine: TimeLineControl
|
|
8830
7570
|
};
|
|
8831
7571
|
|
|
8832
7572
|
class RecFooter extends EventEmitter {
|
|
@@ -10607,7 +9347,7 @@ const THEME_DEFAULT_OPTIONS = {
|
|
|
10607
9347
|
zh,
|
|
10608
9348
|
en
|
|
10609
9349
|
};
|
|
10610
|
-
/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '0.0.1
|
|
9350
|
+
/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.0-beta.1';
|
|
10611
9351
|
|
|
10612
9352
|
exports.Control = Control;
|
|
10613
9353
|
exports.Fullscreen = Fullscreen;
|