@checksub_team/peaks_timeline 1.16.0-alpha.2 → 2.0.0-alpha.0
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/package.json +1 -1
- package/peaks.js +4160 -3938
- package/peaks.js.d.ts +5 -5
- package/src/{timeline-axis.js → components/axis.js} +244 -244
- package/src/{data-retriever.js → components/data-retriever.js} +117 -117
- package/src/{default-segment-marker.js → components/default-segment-marker.js} +132 -132
- package/src/{invoker.js → components/invoker.js} +81 -81
- package/src/{line.js → components/line-group.js} +192 -187
- package/src/components/line-groups.js +584 -0
- package/src/{line-indicator.js → components/line-indicator.js} +308 -293
- package/src/{marker-factories.js → components/marker-factories.js} +1 -1
- package/src/{mode-layer.js → components/mode-layer.js} +8 -12
- package/src/{playhead-layer.js → components/playhead-layer.js} +3 -3
- package/src/{segment-marker.js → components/segment-marker.js} +2 -2
- package/src/{segment-shape.js → components/segment-shape.js} +508 -508
- package/src/{segments-group.js → components/segments-group.js} +805 -805
- package/src/{source-group.js → components/source-group.js} +1641 -1645
- package/src/{sources-layer.js → components/sources-layer.js} +716 -704
- package/src/{waveform-builder.js → components/waveform-builder.js} +2 -2
- package/src/{waveform-shape.js → components/waveform-shape.js} +214 -214
- package/src/keyboard-handler.js +9 -9
- package/src/line-handler.js +179 -0
- package/src/main.js +99 -64
- package/src/models/line.js +156 -0
- package/src/{segment.js → models/segment.js} +420 -419
- package/src/{source.js → models/source.js} +1262 -1269
- package/src/player.js +2 -2
- package/src/{timeline-segments.js → segment-handler.js} +427 -435
- package/src/{timeline-sources.js → source-handler.js} +510 -512
- package/src/utils.js +5 -1
- package/src/{timeline-zoomview.js → view.js} +133 -138
- package/src/lines.js +0 -533
- /package/src/{data.js → components/data.js} +0 -0
- /package/src/{loader.js → components/loader.js} +0 -0
- /package/src/{mouse-drag-handler.js → components/mouse-drag-handler.js} +0 -0
- /package/src/{svgs.js → components/svgs.js} +0 -0
|
@@ -1,419 +1,420 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
*
|
|
4
|
-
* Defines the {@link Segment} class.
|
|
5
|
-
*
|
|
6
|
-
* @module segment
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
define([
|
|
10
|
-
'
|
|
11
|
-
], function(Utils) {
|
|
12
|
-
'use strict';
|
|
13
|
-
|
|
14
|
-
function validateSegment(peaks, options, context) {
|
|
15
|
-
var shouldNotifyUpdate = false;
|
|
16
|
-
|
|
17
|
-
if (!Utils.isValidTime(options.startTime)) {
|
|
18
|
-
throw new TypeError('peaks.segments.' + context + ': startTime should be a valid number');
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
if (!Utils.isValidTime(options.endTime)) {
|
|
22
|
-
options.endTime = options.startTime;
|
|
23
|
-
shouldNotifyUpdate = true;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
options.startTime = Utils.roundTime(options.startTime);
|
|
27
|
-
options.endTime = Utils.roundTime(options.endTime);
|
|
28
|
-
if (options.startTime < 0) {
|
|
29
|
-
options.startTime = 0;
|
|
30
|
-
shouldNotifyUpdate = true;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
if (options.endTime < 0) {
|
|
34
|
-
options.endTime = 0;
|
|
35
|
-
shouldNotifyUpdate = true;
|
|
36
|
-
}
|
|
37
|
-
else if (options.endTime - options.startTime < peaks.options.minSegmentSize) {
|
|
38
|
-
options.endTime = options.startTime + peaks.options.minSegmentSize;
|
|
39
|
-
shouldNotifyUpdate = true;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
options.startTime = Utils.roundTime(options.startTime);
|
|
43
|
-
options.endTime = Utils.roundTime(options.endTime);
|
|
44
|
-
|
|
45
|
-
if (options.opacity < 0 || options.opacity > 1) {
|
|
46
|
-
throw new RangeError('peaks.segments.' + context + ': opacity should be between 0 and 1');
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
if (Utils.isNullOrUndefined(options.labelText)) {
|
|
50
|
-
options.labelText = '';
|
|
51
|
-
}
|
|
52
|
-
else if (!Utils.isString(options.labelText)) {
|
|
53
|
-
throw new TypeError('peaks.segments.' + context + ': labelText must be a string');
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
if (!Utils.isInteger(options.line)) {
|
|
57
|
-
throw new TypeError('peaks.segments.' + context + ': line must be an integer');
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if (Utils.isNullOrUndefined(options.editable)) {
|
|
61
|
-
options.editable = true;
|
|
62
|
-
}
|
|
63
|
-
else if (!Utils.isBoolean(options.editable)) {
|
|
64
|
-
throw new TypeError('peaks.segments.' + context + ': editable must be a boolean');
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
if (Utils.isNullOrUndefined(options.hoverColor)) {
|
|
68
|
-
options.hoverColor = Utils.shadeColor(options.color, 20);
|
|
69
|
-
}
|
|
70
|
-
else if (!Utils.isValidColor(options.hoverColor)) {
|
|
71
|
-
throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
if (Utils.isNullOrUndefined(options.warningColor)) {
|
|
75
|
-
options.warningColor = '#E48023';
|
|
76
|
-
}
|
|
77
|
-
else if (!Utils.isValidColor(options.warningColor)) {
|
|
78
|
-
throw new TypeError('peaks.segments.' + context + ': warningColor must be a boolean');
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
return shouldNotifyUpdate;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* A segment is a region of time, with associated label and color.
|
|
86
|
-
*
|
|
87
|
-
* @class
|
|
88
|
-
* @alias Segment
|
|
89
|
-
*
|
|
90
|
-
* @param {Peaks} peaks A reference to the Peaks instance.
|
|
91
|
-
* @param {String} id A unique identifier for the segment.
|
|
92
|
-
* @param {Number} startTime Segment start time, in seconds.
|
|
93
|
-
* @param {Number} endTime Segment end time, in seconds.
|
|
94
|
-
* @param {String} labelText Segment label text.
|
|
95
|
-
* @param {String} color Segment waveform color.
|
|
96
|
-
* @param {Number} opacity Segment waveform opacity.
|
|
97
|
-
* @param {Boolean} editable If <code>true</code> the segment start and
|
|
98
|
-
* end times can be adjusted via the user interface.
|
|
99
|
-
* @param {Boolean} allowDeletion If <code>true</code> the segment can be
|
|
100
|
-
* deleted using the delete key.
|
|
101
|
-
* @param {Number} line The id of the line to add the segment to.
|
|
102
|
-
* @param {Array<String>} indicators Array containing the colors
|
|
103
|
-
* of all indicators.
|
|
104
|
-
*/
|
|
105
|
-
|
|
106
|
-
function Segment(peaks, id, startTime, endTime, duration, labelText,
|
|
107
|
-
color, textColor, handleTextColor, hoverColor, warningColor, opacity,
|
|
108
|
-
borderColor, borderWidth, borderRadius, editable, allowDeletion, line,
|
|
109
|
-
indicators) {
|
|
110
|
-
var opts = {
|
|
111
|
-
startTime: startTime,
|
|
112
|
-
endTime: endTime,
|
|
113
|
-
duration: duration,
|
|
114
|
-
labelText: labelText,
|
|
115
|
-
color: color,
|
|
116
|
-
textColor: textColor,
|
|
117
|
-
handleTextColor: handleTextColor,
|
|
118
|
-
hoverColor: hoverColor,
|
|
119
|
-
warningColor: warningColor,
|
|
120
|
-
opacity: opacity,
|
|
121
|
-
borderColor: borderColor,
|
|
122
|
-
borderWidth: borderWidth,
|
|
123
|
-
borderRadius: borderRadius,
|
|
124
|
-
editable: editable,
|
|
125
|
-
allowDeletion: allowDeletion,
|
|
126
|
-
line: line,
|
|
127
|
-
indicators: indicators
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
var shouldNotifyUpdate = validateSegment(peaks, opts, 'add()');
|
|
131
|
-
|
|
132
|
-
this._peaks = peaks;
|
|
133
|
-
this._id = id;
|
|
134
|
-
this._startTime = opts.startTime;
|
|
135
|
-
this._endTime = opts.endTime;
|
|
136
|
-
this._duration = opts.duration;
|
|
137
|
-
this._labelText = opts.labelText;
|
|
138
|
-
this._color = opts.color;
|
|
139
|
-
this._hoverColor = opts.hoverColor;
|
|
140
|
-
this._textColor = opts.textColor;
|
|
141
|
-
this._handleTextColor = opts.handleTextColor;
|
|
142
|
-
this._warningColor = opts.warningColor;
|
|
143
|
-
this._opacity = opts.opacity;
|
|
144
|
-
this._borderColor = opts.borderColor;
|
|
145
|
-
this._borderWidth = opts.borderWidth;
|
|
146
|
-
this._borderRadius = opts.borderRadius;
|
|
147
|
-
this._editable = opts.editable;
|
|
148
|
-
this._allowDeletion = opts.allowDeletion;
|
|
149
|
-
this._line = opts.line;
|
|
150
|
-
this._indicators = opts.indicators;
|
|
151
|
-
this._minSize = peaks.options.minSegmentSize;
|
|
152
|
-
this._relativeId = 0;
|
|
153
|
-
this._selected = false;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
this.
|
|
335
|
-
this.
|
|
336
|
-
this.
|
|
337
|
-
this.
|
|
338
|
-
this.
|
|
339
|
-
this.
|
|
340
|
-
this.
|
|
341
|
-
this.
|
|
342
|
-
this.
|
|
343
|
-
this.
|
|
344
|
-
this.
|
|
345
|
-
this.
|
|
346
|
-
this.
|
|
347
|
-
this.
|
|
348
|
-
this.
|
|
349
|
-
this.
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
this.
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
*
|
|
362
|
-
*
|
|
363
|
-
* @param {Number}
|
|
364
|
-
* @
|
|
365
|
-
*
|
|
366
|
-
*
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
*
|
|
376
|
-
*
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
this.
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
*
|
|
395
|
-
*
|
|
396
|
-
*
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
var
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @file
|
|
3
|
+
*
|
|
4
|
+
* Defines the {@link Segment} class.
|
|
5
|
+
*
|
|
6
|
+
* @module segment
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
define([
|
|
10
|
+
'../utils'
|
|
11
|
+
], function(Utils) {
|
|
12
|
+
'use strict';
|
|
13
|
+
|
|
14
|
+
function validateSegment(peaks, options, context) {
|
|
15
|
+
var shouldNotifyUpdate = false;
|
|
16
|
+
|
|
17
|
+
if (!Utils.isValidTime(options.startTime)) {
|
|
18
|
+
throw new TypeError('peaks.segments.' + context + ': startTime should be a valid number');
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (!Utils.isValidTime(options.endTime)) {
|
|
22
|
+
options.endTime = options.startTime;
|
|
23
|
+
shouldNotifyUpdate = true;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
options.startTime = Utils.roundTime(options.startTime);
|
|
27
|
+
options.endTime = Utils.roundTime(options.endTime);
|
|
28
|
+
if (options.startTime < 0) {
|
|
29
|
+
options.startTime = 0;
|
|
30
|
+
shouldNotifyUpdate = true;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (options.endTime < 0) {
|
|
34
|
+
options.endTime = 0;
|
|
35
|
+
shouldNotifyUpdate = true;
|
|
36
|
+
}
|
|
37
|
+
else if (options.endTime - options.startTime < peaks.options.minSegmentSize) {
|
|
38
|
+
options.endTime = options.startTime + peaks.options.minSegmentSize;
|
|
39
|
+
shouldNotifyUpdate = true;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
options.startTime = Utils.roundTime(options.startTime);
|
|
43
|
+
options.endTime = Utils.roundTime(options.endTime);
|
|
44
|
+
|
|
45
|
+
if (options.opacity < 0 || options.opacity > 1) {
|
|
46
|
+
throw new RangeError('peaks.segments.' + context + ': opacity should be between 0 and 1');
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (Utils.isNullOrUndefined(options.labelText)) {
|
|
50
|
+
options.labelText = '';
|
|
51
|
+
}
|
|
52
|
+
else if (!Utils.isString(options.labelText)) {
|
|
53
|
+
throw new TypeError('peaks.segments.' + context + ': labelText must be a string');
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
if (!Utils.isInteger(options.line)) {
|
|
57
|
+
throw new TypeError('peaks.segments.' + context + ': line must be an integer');
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if (Utils.isNullOrUndefined(options.editable)) {
|
|
61
|
+
options.editable = true;
|
|
62
|
+
}
|
|
63
|
+
else if (!Utils.isBoolean(options.editable)) {
|
|
64
|
+
throw new TypeError('peaks.segments.' + context + ': editable must be a boolean');
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (Utils.isNullOrUndefined(options.hoverColor)) {
|
|
68
|
+
options.hoverColor = Utils.shadeColor(options.color, 20);
|
|
69
|
+
}
|
|
70
|
+
else if (!Utils.isValidColor(options.hoverColor)) {
|
|
71
|
+
throw new TypeError('peaks.segments.' + context + ': hoverColor must be a boolean');
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (Utils.isNullOrUndefined(options.warningColor)) {
|
|
75
|
+
options.warningColor = '#E48023';
|
|
76
|
+
}
|
|
77
|
+
else if (!Utils.isValidColor(options.warningColor)) {
|
|
78
|
+
throw new TypeError('peaks.segments.' + context + ': warningColor must be a boolean');
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
return shouldNotifyUpdate;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* A segment is a region of time, with associated label and color.
|
|
86
|
+
*
|
|
87
|
+
* @class
|
|
88
|
+
* @alias Segment
|
|
89
|
+
*
|
|
90
|
+
* @param {Peaks} peaks A reference to the Peaks instance.
|
|
91
|
+
* @param {String} id A unique identifier for the segment.
|
|
92
|
+
* @param {Number} startTime Segment start time, in seconds.
|
|
93
|
+
* @param {Number} endTime Segment end time, in seconds.
|
|
94
|
+
* @param {String} labelText Segment label text.
|
|
95
|
+
* @param {String} color Segment waveform color.
|
|
96
|
+
* @param {Number} opacity Segment waveform opacity.
|
|
97
|
+
* @param {Boolean} editable If <code>true</code> the segment start and
|
|
98
|
+
* end times can be adjusted via the user interface.
|
|
99
|
+
* @param {Boolean} allowDeletion If <code>true</code> the segment can be
|
|
100
|
+
* deleted using the delete key.
|
|
101
|
+
* @param {Number} line The id of the line to add the segment to.
|
|
102
|
+
* @param {Array<String>} indicators Array containing the colors
|
|
103
|
+
* of all indicators.
|
|
104
|
+
*/
|
|
105
|
+
|
|
106
|
+
function Segment(peaks, id, startTime, endTime, duration, labelText,
|
|
107
|
+
color, textColor, handleTextColor, hoverColor, warningColor, opacity,
|
|
108
|
+
borderColor, borderWidth, borderRadius, editable, allowDeletion, line,
|
|
109
|
+
indicators) {
|
|
110
|
+
var opts = {
|
|
111
|
+
startTime: startTime,
|
|
112
|
+
endTime: endTime,
|
|
113
|
+
duration: duration,
|
|
114
|
+
labelText: labelText,
|
|
115
|
+
color: color,
|
|
116
|
+
textColor: textColor,
|
|
117
|
+
handleTextColor: handleTextColor,
|
|
118
|
+
hoverColor: hoverColor,
|
|
119
|
+
warningColor: warningColor,
|
|
120
|
+
opacity: opacity,
|
|
121
|
+
borderColor: borderColor,
|
|
122
|
+
borderWidth: borderWidth,
|
|
123
|
+
borderRadius: borderRadius,
|
|
124
|
+
editable: editable,
|
|
125
|
+
allowDeletion: allowDeletion,
|
|
126
|
+
line: line,
|
|
127
|
+
indicators: indicators
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
var shouldNotifyUpdate = validateSegment(peaks, opts, 'add()');
|
|
131
|
+
|
|
132
|
+
this._peaks = peaks;
|
|
133
|
+
this._id = id;
|
|
134
|
+
this._startTime = opts.startTime;
|
|
135
|
+
this._endTime = opts.endTime;
|
|
136
|
+
this._duration = opts.duration;
|
|
137
|
+
this._labelText = opts.labelText;
|
|
138
|
+
this._color = opts.color;
|
|
139
|
+
this._hoverColor = opts.hoverColor;
|
|
140
|
+
this._textColor = opts.textColor;
|
|
141
|
+
this._handleTextColor = opts.handleTextColor;
|
|
142
|
+
this._warningColor = opts.warningColor;
|
|
143
|
+
this._opacity = opts.opacity;
|
|
144
|
+
this._borderColor = opts.borderColor;
|
|
145
|
+
this._borderWidth = opts.borderWidth;
|
|
146
|
+
this._borderRadius = opts.borderRadius;
|
|
147
|
+
this._editable = opts.editable;
|
|
148
|
+
this._allowDeletion = opts.allowDeletion;
|
|
149
|
+
this._line = opts.line;
|
|
150
|
+
this._indicators = opts.indicators;
|
|
151
|
+
this._minSize = peaks.options.minSegmentSize;
|
|
152
|
+
this._relativeId = 0;
|
|
153
|
+
this._selected = false;
|
|
154
|
+
|
|
155
|
+
// TODO: remove this event
|
|
156
|
+
if (shouldNotifyUpdate) {
|
|
157
|
+
peaks.emit('segments.updated', [this]);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
Object.defineProperties(Segment.prototype, {
|
|
162
|
+
id: {
|
|
163
|
+
enumerable: true,
|
|
164
|
+
get: function() {
|
|
165
|
+
return this._id;
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
startTime: {
|
|
169
|
+
enumerable: true,
|
|
170
|
+
get: function() {
|
|
171
|
+
return this._startTime;
|
|
172
|
+
},
|
|
173
|
+
|
|
174
|
+
set: function(time) {
|
|
175
|
+
this._startTime = Utils.roundTime(time);
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
endTime: {
|
|
179
|
+
enumerable: true,
|
|
180
|
+
get: function() {
|
|
181
|
+
return this._endTime;
|
|
182
|
+
},
|
|
183
|
+
|
|
184
|
+
set: function(time) {
|
|
185
|
+
this._endTime = Utils.roundTime(time);
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
duration: {
|
|
189
|
+
enumerable: true,
|
|
190
|
+
get: function() {
|
|
191
|
+
return this._duration;
|
|
192
|
+
},
|
|
193
|
+
|
|
194
|
+
set: function(duration) {
|
|
195
|
+
this._duration = Utils.roundTime(duration);
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
labelText: {
|
|
199
|
+
enumerable: true,
|
|
200
|
+
get: function() {
|
|
201
|
+
return this._labelText;
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
color: {
|
|
205
|
+
enumerable: true,
|
|
206
|
+
get: function() {
|
|
207
|
+
return this._color;
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
hoverColor: {
|
|
211
|
+
enumerable: true,
|
|
212
|
+
get: function() {
|
|
213
|
+
return this._hoverColor;
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
textColor: {
|
|
217
|
+
enumerable: true,
|
|
218
|
+
get: function() {
|
|
219
|
+
return this._textColor;
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
handleTextColor: {
|
|
223
|
+
enumerable: true,
|
|
224
|
+
get: function() {
|
|
225
|
+
return this._handleTextColor;
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
warningColor: {
|
|
229
|
+
enumerable: true,
|
|
230
|
+
get: function() {
|
|
231
|
+
return this._warningColor;
|
|
232
|
+
}
|
|
233
|
+
},
|
|
234
|
+
opacity: {
|
|
235
|
+
enumerable: true,
|
|
236
|
+
get: function() {
|
|
237
|
+
return this._opacity;
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
borderColor: {
|
|
241
|
+
enumerable: true,
|
|
242
|
+
get: function() {
|
|
243
|
+
return this._borderColor;
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
borderWidth: {
|
|
247
|
+
enumerable: true,
|
|
248
|
+
get: function() {
|
|
249
|
+
return this._borderWidth;
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
borderRadius: {
|
|
253
|
+
enumerable: true,
|
|
254
|
+
get: function() {
|
|
255
|
+
return this._borderRadius;
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
editable: {
|
|
259
|
+
enumerable: true,
|
|
260
|
+
get: function() {
|
|
261
|
+
return this._editable;
|
|
262
|
+
}
|
|
263
|
+
},
|
|
264
|
+
allowDeletion: {
|
|
265
|
+
enumerable: true,
|
|
266
|
+
get: function() {
|
|
267
|
+
return this._allowDeletion;
|
|
268
|
+
}
|
|
269
|
+
},
|
|
270
|
+
line: {
|
|
271
|
+
enumerable: true,
|
|
272
|
+
get: function() {
|
|
273
|
+
return this._line;
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
indicators: {
|
|
277
|
+
enumerable: true,
|
|
278
|
+
get: function() {
|
|
279
|
+
return this._indicators;
|
|
280
|
+
}
|
|
281
|
+
},
|
|
282
|
+
minSize: {
|
|
283
|
+
enumerable: true,
|
|
284
|
+
get: function() {
|
|
285
|
+
return this._minSize;
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
relativeId: {
|
|
289
|
+
enumerable: true,
|
|
290
|
+
get: function() {
|
|
291
|
+
return this._relativeId;
|
|
292
|
+
},
|
|
293
|
+
set: function(newId) {
|
|
294
|
+
this._relativeId = newId;
|
|
295
|
+
}
|
|
296
|
+
},
|
|
297
|
+
selected: {
|
|
298
|
+
enumerable: true,
|
|
299
|
+
get: function() {
|
|
300
|
+
return this._selected;
|
|
301
|
+
},
|
|
302
|
+
|
|
303
|
+
set: function(selected) {
|
|
304
|
+
this._selected = selected;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
Segment.prototype.update = function(options) {
|
|
310
|
+
var opts = {
|
|
311
|
+
startTime: this.startTime,
|
|
312
|
+
endTime: this.endTime,
|
|
313
|
+
duration: this.duration,
|
|
314
|
+
labelText: this.labelText,
|
|
315
|
+
color: this.color,
|
|
316
|
+
textColor: this.textColor,
|
|
317
|
+
handleTextColor: this.handleTextColor,
|
|
318
|
+
hoverColor: this.hoverColor,
|
|
319
|
+
warningColor: this.warningColor,
|
|
320
|
+
opacity: this.opacity,
|
|
321
|
+
borderColor: this.borderColor,
|
|
322
|
+
borderWidth: this.borderWidth,
|
|
323
|
+
borderRadius: this.borderRadius,
|
|
324
|
+
editable: this.editable,
|
|
325
|
+
allowDeletion: this.allowDeletion,
|
|
326
|
+
line: this.line,
|
|
327
|
+
indicators: this.indicators
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
Utils.extend(opts, options);
|
|
331
|
+
|
|
332
|
+
validateSegment(this._peaks, opts, 'update()');
|
|
333
|
+
|
|
334
|
+
this._startTime = opts.startTime;
|
|
335
|
+
this._endTime = opts.endTime;
|
|
336
|
+
this._duration = opts.duration;
|
|
337
|
+
this._labelText = opts.labelText;
|
|
338
|
+
this._color = opts.color;
|
|
339
|
+
this._textColor = opts.textColor;
|
|
340
|
+
this._handleTextColor = opts.handleTextColor;
|
|
341
|
+
this._hoverColor = opts.hoverColor;
|
|
342
|
+
this._warningColor = opts.warningColor;
|
|
343
|
+
this._opacity = opts.opacity;
|
|
344
|
+
this._borderColor = opts.borderColor;
|
|
345
|
+
this._borderWidth = opts.borderWidth;
|
|
346
|
+
this._borderRadius = opts.borderRadius;
|
|
347
|
+
this._editable = opts.editable;
|
|
348
|
+
this._allowDeletion = opts.allowDeletion;
|
|
349
|
+
this._line = opts.line;
|
|
350
|
+
this._indicators = opts.indicators;
|
|
351
|
+
|
|
352
|
+
this._peaks.emit('model.segment.updated', this);
|
|
353
|
+
};
|
|
354
|
+
|
|
355
|
+
Segment.prototype.setSelected = function(selected) {
|
|
356
|
+
this._selected = selected;
|
|
357
|
+
this._peaks.emit('model.segment.selected', this);
|
|
358
|
+
};
|
|
359
|
+
|
|
360
|
+
/**
|
|
361
|
+
* Returns <code>true</code> if the segment overlaps a given time region.
|
|
362
|
+
*
|
|
363
|
+
* @param {Number} startTime The start of the time region, in seconds.
|
|
364
|
+
* @param {Number} endTime The end of the time region, in seconds.
|
|
365
|
+
* @returns {Boolean}
|
|
366
|
+
*
|
|
367
|
+
* @see http://wiki.c2.com/?TestIfDateRangesOverlap
|
|
368
|
+
*/
|
|
369
|
+
|
|
370
|
+
Segment.prototype.isVisible = function(startTime, endTime) {
|
|
371
|
+
return this.startTime < endTime && startTime < this.endTime;
|
|
372
|
+
};
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* Update the indicators of this segment.
|
|
376
|
+
*
|
|
377
|
+
* @param {Array<String>} newIndicators The new indicators.
|
|
378
|
+
*/
|
|
379
|
+
|
|
380
|
+
Segment.prototype.setIndicators = function(newIndicators) {
|
|
381
|
+
this._indicators = newIndicators;
|
|
382
|
+
this._peaks.emit('model.segment.setIndicators', this);
|
|
383
|
+
};
|
|
384
|
+
|
|
385
|
+
/**
|
|
386
|
+
* Returns <code>true</code> if a warning should be shown
|
|
387
|
+
*/
|
|
388
|
+
|
|
389
|
+
Segment.prototype.shouldShowWarning = function() {
|
|
390
|
+
return this.duration > Utils.roundTime(this.endTime - this.startTime);
|
|
391
|
+
};
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* Returns a serializable object containing only the properties defined with Object.defineProperties.
|
|
395
|
+
* This includes all enumerable properties that can be safely serialized.
|
|
396
|
+
*
|
|
397
|
+
* @returns {Object} A plain object containing the serializable properties of the segment.
|
|
398
|
+
*/
|
|
399
|
+
Segment.prototype.toSerializable = function() {
|
|
400
|
+
var serializable = {};
|
|
401
|
+
|
|
402
|
+
// Add all the enumerable properties from the prototype
|
|
403
|
+
var proto = Object.getPrototypeOf(this);
|
|
404
|
+
var descriptors = Object.getOwnPropertyDescriptors(proto);
|
|
405
|
+
|
|
406
|
+
for (var prop in descriptors) {
|
|
407
|
+
if (Object.prototype.hasOwnProperty.call(descriptors, prop)) {
|
|
408
|
+
var descriptor = descriptors[prop];
|
|
409
|
+
|
|
410
|
+
if (descriptor.enumerable && descriptor.get && typeof descriptor.get === 'function') {
|
|
411
|
+
serializable[prop] = this[prop];
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
return serializable;
|
|
417
|
+
};
|
|
418
|
+
|
|
419
|
+
return Segment;
|
|
420
|
+
});
|