@checksub_team/peaks_timeline 1.4.34 → 1.4.37

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.
@@ -1,395 +1,395 @@
1
- /**
2
- * @file
3
- *
4
- * Defines the {@link TimelineSegments} class.
5
- *
6
- * @module timeline-segments
7
- */
8
-
9
- define([
10
- 'colors.css',
11
- './segment',
12
- './utils'
13
- ], function(Colors, Segment, Utils) {
14
- 'use strict';
15
-
16
- /**
17
- * Segment parameters.
18
- *
19
- * @typedef {Object} SegmentOptions
20
- * @global
21
- * @property {Number} startTime Segment start time, in seconds.
22
- * @property {Number} endTime Segment end time, in seconds.
23
- * @property {Boolean=} editable If <code>true</code> the segment start and
24
- * end times can be adjusted via the user interface.
25
- * Default: <code>false</code>.
26
- * @property {String=} color Segment waveform color.
27
- * Default: a random color.
28
- * @property {String=} labelText Segment label text.
29
- * Default: an empty string.
30
- * @property {String=} id A unique segment identifier.
31
- * Default: an automatically generated identifier.
32
- */
33
-
34
- /**
35
- * Handles all functionality related to the adding, removing and manipulation
36
- * of segments.
37
- *
38
- * @class
39
- * @alias TimelineSegments
40
- *
41
- * @param {Peaks} peaks The parent Peaks object.
42
- */
43
-
44
- function TimelineSegments(peaks) {
45
- this._peaks = peaks;
46
- this._segments = [];
47
- this._segmentsById = {};
48
- this._segmentIdCounter = 0;
49
- this._colorIndex = 0;
50
- }
51
-
52
- /**
53
- * Returns a new unique segment id value.
54
- *
55
- * @private
56
- * @returns {String}
57
- */
58
-
59
- TimelineSegments.prototype._getNextSegmentId = function() {
60
- return 'peaks.segment.' + this._segmentIdCounter++;
61
- };
62
-
63
- var colors = [
64
- Colors.navy,
65
- Colors.blue,
66
- Colors.aqua,
67
- Colors.teal,
68
- // Colors.olive,
69
- // Colors.lime,
70
- // Colors.green,
71
- Colors.yellow,
72
- Colors.orange,
73
- Colors.red,
74
- Colors.maroon,
75
- Colors.fuchsia,
76
- Colors.purple
77
- // Colors.black,
78
- // Colors.gray,
79
- // Colors.silver
80
- ];
81
-
82
- /**
83
- * @private
84
- * @returns {String}
85
- */
86
-
87
- TimelineSegments.prototype._getSegmentColor = function() {
88
- if (this._peaks.options.randomizeSegmentColor) {
89
- if (++this._colorIndex === colors.length) {
90
- this._colorIndex = 0;
91
- }
92
-
93
- return colors[this._colorIndex];
94
- }
95
- else {
96
- return this._peaks.options.segmentColor;
97
- }
98
- };
99
-
100
- /**
101
- * Adds a new segment object.
102
- *
103
- * @private
104
- * @param {Segment} segment
105
- */
106
-
107
- TimelineSegments.prototype._addSegment = function(segment) {
108
- this._segments.push(segment);
109
-
110
- this._segmentsById[segment.id] = segment;
111
- };
112
-
113
- /**
114
- * Creates a new segment object.
115
- *
116
- * @private
117
- * @param {SegmentOptions} options
118
- * @return {Segment}
119
- */
120
-
121
- TimelineSegments.prototype._createSegment = function(options) {
122
- // Watch for anyone still trying to use the old
123
- // createSegment(startTime, endTime, ...) API
124
- if (!Utils.isObject(options)) {
125
- // eslint-disable-next-line max-len
126
- throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
127
- }
128
-
129
- var segment = new Segment(
130
- this._peaks,
131
- Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id,
132
- options.startTime,
133
- options.endTime,
134
- options.labelText,
135
- options.color || this._getSegmentColor(),
136
- options.textColor || '#000000',
137
- options.handleTextColor || '#000000',
138
- options.hoverColor,
139
- options.opacity || 1,
140
- options.editable,
141
- options.allowDeletion || false,
142
- options.line
143
- );
144
-
145
- return segment;
146
- };
147
-
148
- /**
149
- * Returns all segments.
150
- *
151
- * @returns {Array<Segment>}
152
- */
153
-
154
- TimelineSegments.prototype.getSegments = function() {
155
- return this._segments;
156
- };
157
-
158
- /**
159
- * Add segments to the given line so they can be displayed.
160
- */
161
-
162
- TimelineSegments.prototype.addSegmentsToPosition = function(lineId, position) {
163
- this._peaks.emit('segments.show', lineId, position);
164
- };
165
-
166
- /**
167
- * Returns the segment with the given id, or <code>null</code> if not found.
168
- *
169
- * @param {String} id
170
- * @returns {Segment|null}
171
- */
172
-
173
- TimelineSegments.prototype.getSegment = function(id) {
174
- return this._segmentsById[id] || null;
175
- };
176
-
177
- /**
178
- * Returns all segments that overlap a given point in time.
179
- *
180
- * @param {Number} time
181
- * @returns {Array<Segment>}
182
- */
183
-
184
- TimelineSegments.prototype.getSegmentsAtTime = function(time) {
185
- return this._segments.filter(function(segment) {
186
- return time >= segment.startTime && time < segment.endTime;
187
- });
188
- };
189
-
190
- TimelineSegments.prototype.setMagnetizing = function(bool) {
191
- this._peaks.emit('segments.setMagnetizing', bool);
192
- };
193
-
194
- /**
195
- * Returns all segments that overlap a given time region.
196
- *
197
- * @param {Number} startTime The start of the time region, in seconds.
198
- * @param {Number} endTime The end of the time region, in seconds.
199
- *
200
- * @returns {Array<Segment>}
201
- */
202
-
203
- TimelineSegments.prototype.find = function(startTime, endTime) {
204
- return this._segments.filter(function(segment) {
205
- return segment.isVisible(startTime, endTime);
206
- });
207
- };
208
-
209
- /**
210
- * Adds one or more segments to the timeline.
211
- *
212
- * @param {SegmentOptions|Array<SegmentOptions>} segmentOrSegments
213
- */
214
-
215
- TimelineSegments.prototype.add = function(/* segmentOrSegments */) {
216
- var self = this;
217
-
218
- var segments = Array.isArray(arguments[0]) ?
219
- arguments[0] :
220
- Array.prototype.slice.call(arguments);
221
-
222
- segments = segments.map(function(segmentOptions) {
223
- var segment = self._createSegment(segmentOptions);
224
-
225
- if (Utils.objectHasProperty(self._segmentsById, segment.id)) {
226
- var seg = Object.values(self._segmentsById)[0];
227
-
228
- throw new Error('peaks.segments.add(): duplicate id. \n\n Segment I = ' +
229
- JSON.stringify(
230
- {
231
- id: seg.id,
232
- startTime: seg.startTime,
233
- endTime: seg.endTime
234
- }
235
- ) + ' Segment II = ' +
236
- JSON.stringify(
237
- {
238
- id: segment.id,
239
- startTime: segment.startTime,
240
- endTime: segment.endTime
241
- }
242
- )
243
- );
244
- }
245
-
246
- return segment;
247
- });
248
-
249
- segments.forEach(function(segment) {
250
- self._addSegment(segment);
251
- });
252
-
253
- this._peaks.emit('segments.add', segments);
254
- };
255
-
256
- /**
257
- * Returns the indexes of segments that match the given predicate.
258
- *
259
- * @private
260
- * @param {Function} predicate Predicate function to find matching segments.
261
- * @returns {Array<Number>} An array of indexes into the segments array of
262
- * the matching elements.
263
- */
264
-
265
- TimelineSegments.prototype._findSegment = function(predicate) {
266
- var indexes = [];
267
-
268
- for (var i = 0, length = this._segments.length; i < length; i++) {
269
- if (predicate(this._segments[i])) {
270
- indexes.push(i);
271
- }
272
- }
273
-
274
- return indexes;
275
- };
276
-
277
- /**
278
- * Removes the segments at the given array indexes.
279
- *
280
- * @private
281
- * @param {Array<Number>} indexes The array indexes to remove.
282
- * @returns {Array<Segment>} The removed {@link Segment} objects.
283
- */
284
-
285
- TimelineSegments.prototype._removeIndexes = function(indexes) {
286
- var removed = [];
287
-
288
- for (var i = 0; i < indexes.length; i++) {
289
- var index = indexes[i] - removed.length;
290
-
291
- var itemRemoved = this._segments.splice(index, 1)[0];
292
-
293
- delete this._segmentsById[itemRemoved.id];
294
-
295
- removed.push(itemRemoved);
296
- }
297
-
298
- return removed;
299
- };
300
-
301
- /**
302
- * Removes all segments that match a given predicate function.
303
- *
304
- * After removing the segments, this function also emits a
305
- * <code>segments.remove</code> event with the removed {@link Segment}
306
- * objects.
307
- *
308
- * @private
309
- * @param {Function} predicate A predicate function that identifies which
310
- * segments to remove.
311
- * @returns {Array<Segment>} The removed {@link Segment} objects.
312
- */
313
-
314
- TimelineSegments.prototype._removeSegments = function(predicate) {
315
- var indexes = this._findSegment(predicate);
316
-
317
- var removed = this._removeIndexes(indexes);
318
-
319
- this._peaks.emit('segments.remove', removed);
320
-
321
- return removed;
322
- };
323
-
324
- /**
325
- * Removes the given segment.
326
- *
327
- * @param {Segment} segment The segment to remove.
328
- * @returns {Array<Segment>} The removed segment.
329
- */
330
-
331
- TimelineSegments.prototype.remove = function(segment) {
332
- return this._removeSegments(function(s) {
333
- return s === segment;
334
- });
335
- };
336
-
337
- /**
338
- * Removes any segments with the given id.
339
- *
340
- * @param {String} id
341
- * @returns {Array<Segment>} The removed {@link Segment} objects.
342
- */
343
-
344
- TimelineSegments.prototype.removeById = function(segmentId) {
345
- return this._removeSegments(function(segment) {
346
- return segment.id === segmentId;
347
- });
348
- };
349
-
350
- /**
351
- * Removes any segments with the given start time, and optional end time.
352
- *
353
- * @param {Number} startTime Segments with this start time are removed.
354
- * @param {Number?} endTime If present, only segments with both the given
355
- * start time and end time are removed.
356
- * @returns {Array<Segment>} The removed {@link Segment} objects.
357
- */
358
-
359
- TimelineSegments.prototype.removeByTime = function(startTime, endTime) {
360
- endTime = (typeof endTime === 'number') ? endTime : 0;
361
-
362
- var fnFilter;
363
-
364
- if (endTime > 0) {
365
- fnFilter = function(segment) {
366
- return segment.startTime === startTime && segment.endTime === endTime;
367
- };
368
- }
369
- else {
370
- fnFilter = function(segment) {
371
- return segment.startTime === startTime;
372
- };
373
- }
374
-
375
- return this._removeSegments(fnFilter);
376
- };
377
-
378
- /**
379
- * Removes all segments.
380
- *
381
- * After removing the segments, this function emits a
382
- * <code>segments.remove_all</code> event.
383
- */
384
-
385
- TimelineSegments.prototype.removeAll = function(lineId) {
386
- var indexes = this._findSegment(function(segment) {
387
- return segment.line === lineId;
388
- });
389
-
390
- this._removeIndexes(indexes);
391
- this._peaks.emit('segments.remove_all', lineId);
392
- };
393
-
394
- return TimelineSegments;
395
- });
1
+ /**
2
+ * @file
3
+ *
4
+ * Defines the {@link TimelineSegments} class.
5
+ *
6
+ * @module timeline-segments
7
+ */
8
+
9
+ define([
10
+ 'colors.css',
11
+ './segment',
12
+ './utils'
13
+ ], function(Colors, Segment, Utils) {
14
+ 'use strict';
15
+
16
+ /**
17
+ * Segment parameters.
18
+ *
19
+ * @typedef {Object} SegmentOptions
20
+ * @global
21
+ * @property {Number} startTime Segment start time, in seconds.
22
+ * @property {Number} endTime Segment end time, in seconds.
23
+ * @property {Boolean=} editable If <code>true</code> the segment start and
24
+ * end times can be adjusted via the user interface.
25
+ * Default: <code>false</code>.
26
+ * @property {String=} color Segment waveform color.
27
+ * Default: a random color.
28
+ * @property {String=} labelText Segment label text.
29
+ * Default: an empty string.
30
+ * @property {String=} id A unique segment identifier.
31
+ * Default: an automatically generated identifier.
32
+ */
33
+
34
+ /**
35
+ * Handles all functionality related to the adding, removing and manipulation
36
+ * of segments.
37
+ *
38
+ * @class
39
+ * @alias TimelineSegments
40
+ *
41
+ * @param {Peaks} peaks The parent Peaks object.
42
+ */
43
+
44
+ function TimelineSegments(peaks) {
45
+ this._peaks = peaks;
46
+ this._segments = [];
47
+ this._segmentsById = {};
48
+ this._segmentIdCounter = 0;
49
+ this._colorIndex = 0;
50
+ }
51
+
52
+ /**
53
+ * Returns a new unique segment id value.
54
+ *
55
+ * @private
56
+ * @returns {String}
57
+ */
58
+
59
+ TimelineSegments.prototype._getNextSegmentId = function() {
60
+ return 'peaks.segment.' + this._segmentIdCounter++;
61
+ };
62
+
63
+ var colors = [
64
+ Colors.navy,
65
+ Colors.blue,
66
+ Colors.aqua,
67
+ Colors.teal,
68
+ // Colors.olive,
69
+ // Colors.lime,
70
+ // Colors.green,
71
+ Colors.yellow,
72
+ Colors.orange,
73
+ Colors.red,
74
+ Colors.maroon,
75
+ Colors.fuchsia,
76
+ Colors.purple
77
+ // Colors.black,
78
+ // Colors.gray,
79
+ // Colors.silver
80
+ ];
81
+
82
+ /**
83
+ * @private
84
+ * @returns {String}
85
+ */
86
+
87
+ TimelineSegments.prototype._getSegmentColor = function() {
88
+ if (this._peaks.options.randomizeSegmentColor) {
89
+ if (++this._colorIndex === colors.length) {
90
+ this._colorIndex = 0;
91
+ }
92
+
93
+ return colors[this._colorIndex];
94
+ }
95
+ else {
96
+ return this._peaks.options.segmentColor;
97
+ }
98
+ };
99
+
100
+ /**
101
+ * Adds a new segment object.
102
+ *
103
+ * @private
104
+ * @param {Segment} segment
105
+ */
106
+
107
+ TimelineSegments.prototype._addSegment = function(segment) {
108
+ this._segments.push(segment);
109
+
110
+ this._segmentsById[segment.id] = segment;
111
+ };
112
+
113
+ /**
114
+ * Creates a new segment object.
115
+ *
116
+ * @private
117
+ * @param {SegmentOptions} options
118
+ * @return {Segment}
119
+ */
120
+
121
+ TimelineSegments.prototype._createSegment = function(options) {
122
+ // Watch for anyone still trying to use the old
123
+ // createSegment(startTime, endTime, ...) API
124
+ if (!Utils.isObject(options)) {
125
+ // eslint-disable-next-line max-len
126
+ throw new TypeError('peaks.segments.add(): expected a Segment object parameter');
127
+ }
128
+
129
+ var segment = new Segment(
130
+ this._peaks,
131
+ Utils.isNullOrUndefined(options.id) ? this._getNextSegmentId() : options.id,
132
+ options.startTime,
133
+ options.endTime,
134
+ options.labelText,
135
+ options.color || this._getSegmentColor(),
136
+ options.textColor || '#000000',
137
+ options.handleTextColor || '#000000',
138
+ options.hoverColor,
139
+ options.opacity || 1,
140
+ options.editable,
141
+ options.allowDeletion || false,
142
+ options.line
143
+ );
144
+
145
+ return segment;
146
+ };
147
+
148
+ /**
149
+ * Returns all segments.
150
+ *
151
+ * @returns {Array<Segment>}
152
+ */
153
+
154
+ TimelineSegments.prototype.getSegments = function() {
155
+ return this._segments;
156
+ };
157
+
158
+ /**
159
+ * Add segments to the given line so they can be displayed.
160
+ */
161
+
162
+ TimelineSegments.prototype.addSegmentsToPosition = function(lineId, position) {
163
+ this._peaks.emit('segments.show', lineId, position);
164
+ };
165
+
166
+ /**
167
+ * Returns the segment with the given id, or <code>null</code> if not found.
168
+ *
169
+ * @param {String} id
170
+ * @returns {Segment|null}
171
+ */
172
+
173
+ TimelineSegments.prototype.getSegment = function(id) {
174
+ return this._segmentsById[id] || null;
175
+ };
176
+
177
+ /**
178
+ * Returns all segments that overlap a given point in time.
179
+ *
180
+ * @param {Number} time
181
+ * @returns {Array<Segment>}
182
+ */
183
+
184
+ TimelineSegments.prototype.getSegmentsAtTime = function(time) {
185
+ return this._segments.filter(function(segment) {
186
+ return time >= segment.startTime && time < segment.endTime;
187
+ });
188
+ };
189
+
190
+ TimelineSegments.prototype.setMagnetizing = function(bool) {
191
+ this._peaks.emit('segments.setMagnetizing', bool);
192
+ };
193
+
194
+ /**
195
+ * Returns all segments that overlap a given time region.
196
+ *
197
+ * @param {Number} startTime The start of the time region, in seconds.
198
+ * @param {Number} endTime The end of the time region, in seconds.
199
+ *
200
+ * @returns {Array<Segment>}
201
+ */
202
+
203
+ TimelineSegments.prototype.find = function(startTime, endTime) {
204
+ return this._segments.filter(function(segment) {
205
+ return segment.isVisible(startTime, endTime);
206
+ });
207
+ };
208
+
209
+ /**
210
+ * Adds one or more segments to the timeline.
211
+ *
212
+ * @param {SegmentOptions|Array<SegmentOptions>} segmentOrSegments
213
+ */
214
+
215
+ TimelineSegments.prototype.add = function(/* segmentOrSegments */) {
216
+ var self = this;
217
+
218
+ var segments = Array.isArray(arguments[0]) ?
219
+ arguments[0] :
220
+ Array.prototype.slice.call(arguments);
221
+
222
+ segments = segments.map(function(segmentOptions) {
223
+ var segment = self._createSegment(segmentOptions);
224
+
225
+ if (Utils.objectHasProperty(self._segmentsById, segment.id)) {
226
+ var seg = Object.values(self._segmentsById)[0];
227
+
228
+ throw new Error('peaks.segments.add(): duplicate id. \n\n Segment I = ' +
229
+ JSON.stringify(
230
+ {
231
+ id: seg.id,
232
+ startTime: seg.startTime,
233
+ endTime: seg.endTime
234
+ }
235
+ ) + ' Segment II = ' +
236
+ JSON.stringify(
237
+ {
238
+ id: segment.id,
239
+ startTime: segment.startTime,
240
+ endTime: segment.endTime
241
+ }
242
+ )
243
+ );
244
+ }
245
+
246
+ return segment;
247
+ });
248
+
249
+ segments.forEach(function(segment) {
250
+ self._addSegment(segment);
251
+ });
252
+
253
+ this._peaks.emit('segments.add', segments);
254
+ };
255
+
256
+ /**
257
+ * Returns the indexes of segments that match the given predicate.
258
+ *
259
+ * @private
260
+ * @param {Function} predicate Predicate function to find matching segments.
261
+ * @returns {Array<Number>} An array of indexes into the segments array of
262
+ * the matching elements.
263
+ */
264
+
265
+ TimelineSegments.prototype._findSegment = function(predicate) {
266
+ var indexes = [];
267
+
268
+ for (var i = 0, length = this._segments.length; i < length; i++) {
269
+ if (predicate(this._segments[i])) {
270
+ indexes.push(i);
271
+ }
272
+ }
273
+
274
+ return indexes;
275
+ };
276
+
277
+ /**
278
+ * Removes the segments at the given array indexes.
279
+ *
280
+ * @private
281
+ * @param {Array<Number>} indexes The array indexes to remove.
282
+ * @returns {Array<Segment>} The removed {@link Segment} objects.
283
+ */
284
+
285
+ TimelineSegments.prototype._removeIndexes = function(indexes) {
286
+ var removed = [];
287
+
288
+ for (var i = 0; i < indexes.length; i++) {
289
+ var index = indexes[i] - removed.length;
290
+
291
+ var itemRemoved = this._segments.splice(index, 1)[0];
292
+
293
+ delete this._segmentsById[itemRemoved.id];
294
+
295
+ removed.push(itemRemoved);
296
+ }
297
+
298
+ return removed;
299
+ };
300
+
301
+ /**
302
+ * Removes all segments that match a given predicate function.
303
+ *
304
+ * After removing the segments, this function also emits a
305
+ * <code>segments.remove</code> event with the removed {@link Segment}
306
+ * objects.
307
+ *
308
+ * @private
309
+ * @param {Function} predicate A predicate function that identifies which
310
+ * segments to remove.
311
+ * @returns {Array<Segment>} The removed {@link Segment} objects.
312
+ */
313
+
314
+ TimelineSegments.prototype._removeSegments = function(predicate) {
315
+ var indexes = this._findSegment(predicate);
316
+
317
+ var removed = this._removeIndexes(indexes);
318
+
319
+ this._peaks.emit('segments.remove', removed);
320
+
321
+ return removed;
322
+ };
323
+
324
+ /**
325
+ * Removes the given segment.
326
+ *
327
+ * @param {Segment} segment The segment to remove.
328
+ * @returns {Array<Segment>} The removed segment.
329
+ */
330
+
331
+ TimelineSegments.prototype.remove = function(segment) {
332
+ return this._removeSegments(function(s) {
333
+ return s === segment;
334
+ });
335
+ };
336
+
337
+ /**
338
+ * Removes any segments with the given id.
339
+ *
340
+ * @param {String} id
341
+ * @returns {Array<Segment>} The removed {@link Segment} objects.
342
+ */
343
+
344
+ TimelineSegments.prototype.removeById = function(segmentId) {
345
+ return this._removeSegments(function(segment) {
346
+ return segment.id === segmentId;
347
+ });
348
+ };
349
+
350
+ /**
351
+ * Removes any segments with the given start time, and optional end time.
352
+ *
353
+ * @param {Number} startTime Segments with this start time are removed.
354
+ * @param {Number?} endTime If present, only segments with both the given
355
+ * start time and end time are removed.
356
+ * @returns {Array<Segment>} The removed {@link Segment} objects.
357
+ */
358
+
359
+ TimelineSegments.prototype.removeByTime = function(startTime, endTime) {
360
+ endTime = (typeof endTime === 'number') ? endTime : 0;
361
+
362
+ var fnFilter;
363
+
364
+ if (endTime > 0) {
365
+ fnFilter = function(segment) {
366
+ return segment.startTime === startTime && segment.endTime === endTime;
367
+ };
368
+ }
369
+ else {
370
+ fnFilter = function(segment) {
371
+ return segment.startTime === startTime;
372
+ };
373
+ }
374
+
375
+ return this._removeSegments(fnFilter);
376
+ };
377
+
378
+ /**
379
+ * Removes all segments.
380
+ *
381
+ * After removing the segments, this function emits a
382
+ * <code>segments.remove_all</code> event.
383
+ */
384
+
385
+ TimelineSegments.prototype.removeAll = function(lineId) {
386
+ var indexes = this._findSegment(function(segment) {
387
+ return segment.line === lineId;
388
+ });
389
+
390
+ this._removeIndexes(indexes);
391
+ this._peaks.emit('segments.remove_all', lineId);
392
+ };
393
+
394
+ return TimelineSegments;
395
+ });