@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.
Files changed (36) hide show
  1. package/package.json +1 -1
  2. package/peaks.js +4160 -3938
  3. package/peaks.js.d.ts +5 -5
  4. package/src/{timeline-axis.js → components/axis.js} +244 -244
  5. package/src/{data-retriever.js → components/data-retriever.js} +117 -117
  6. package/src/{default-segment-marker.js → components/default-segment-marker.js} +132 -132
  7. package/src/{invoker.js → components/invoker.js} +81 -81
  8. package/src/{line.js → components/line-group.js} +192 -187
  9. package/src/components/line-groups.js +584 -0
  10. package/src/{line-indicator.js → components/line-indicator.js} +308 -293
  11. package/src/{marker-factories.js → components/marker-factories.js} +1 -1
  12. package/src/{mode-layer.js → components/mode-layer.js} +8 -12
  13. package/src/{playhead-layer.js → components/playhead-layer.js} +3 -3
  14. package/src/{segment-marker.js → components/segment-marker.js} +2 -2
  15. package/src/{segment-shape.js → components/segment-shape.js} +508 -508
  16. package/src/{segments-group.js → components/segments-group.js} +805 -805
  17. package/src/{source-group.js → components/source-group.js} +1641 -1645
  18. package/src/{sources-layer.js → components/sources-layer.js} +716 -704
  19. package/src/{waveform-builder.js → components/waveform-builder.js} +2 -2
  20. package/src/{waveform-shape.js → components/waveform-shape.js} +214 -214
  21. package/src/keyboard-handler.js +9 -9
  22. package/src/line-handler.js +179 -0
  23. package/src/main.js +99 -64
  24. package/src/models/line.js +156 -0
  25. package/src/{segment.js → models/segment.js} +420 -419
  26. package/src/{source.js → models/source.js} +1262 -1269
  27. package/src/player.js +2 -2
  28. package/src/{timeline-segments.js → segment-handler.js} +427 -435
  29. package/src/{timeline-sources.js → source-handler.js} +510 -512
  30. package/src/utils.js +5 -1
  31. package/src/{timeline-zoomview.js → view.js} +133 -138
  32. package/src/lines.js +0 -533
  33. /package/src/{data.js → components/data.js} +0 -0
  34. /package/src/{loader.js → components/loader.js} +0 -0
  35. /package/src/{mouse-drag-handler.js → components/mouse-drag-handler.js} +0 -0
  36. /package/src/{svgs.js → components/svgs.js} +0 -0
package/src/lines.js DELETED
@@ -1,533 +0,0 @@
1
- /**
2
- * @file
3
- *
4
- * Defines the {@link lines} class.
5
- *
6
- * @module lines
7
- */
8
-
9
- define([
10
- './segments-group',
11
- './line',
12
- './line-indicator',
13
- './utils'
14
- ], function(
15
- SegmentsGroup,
16
- Line,
17
- LineIndicator,
18
- Utils) {
19
- 'use strict';
20
-
21
- function Lines(peaks, view, layer) {
22
- this._peaks = peaks;
23
- this._view = view;
24
- this._layer = layer;
25
- this._linesByPosition = {};
26
- this._autoAddToLayer = false;
27
- this._areSourceInteractionsAllowed = true;
28
- this._areSegmentInteractionsAllowed = true;
29
-
30
- this._automaticallyCreatedLineId = null;
31
- this._automaticLineCreationPosition = null;
32
- this._automaticLineCreationTimeout = null;
33
-
34
- this._segmentsGroups = {};
35
- this._segmentsGroupToLine = {};
36
-
37
- this._lineId = 0;
38
-
39
- this._lineIndicator = new LineIndicator(
40
- peaks,
41
- view,
42
- document.getElementById('line-indicator-container')
43
- );
44
-
45
- this._peaks.on('line.heightChanged', this._onLineHeightChanged.bind(this));
46
- this._peaks.on('line.remove', this._onLineRemove.bind(this));
47
-
48
- this._peaks.on('sources.show', this._onSourcesWrappingChanged.bind(this));
49
- this._peaks.on('sources.hide', this._onSourcesWrappingChanged.bind(this));
50
-
51
- this._peaks.on('segment.updated', this._onSegmentsUpdate.bind(this));
52
- this._peaks.on('segments.add', this._onSegmentsAdd.bind(this));
53
- this._peaks.on('segments.remove', this._onSegmentsRemove.bind(this));
54
- this._peaks.on('segments.remove_all', this._onSegmentsRemoveAll.bind(this));
55
- this._peaks.on('segments.dragend', this._onSegmentUpdated.bind(this));
56
- }
57
-
58
- Lines.prototype.fitToView = function() {
59
- this._lineIndicator.fitToView();
60
- };
61
-
62
- Lines.prototype._onSegmentsAdd = function(segments) {
63
- var self = this;
64
-
65
- segments.forEach(function(segment) {
66
- if (!self._segmentsGroups[segment.line]) {
67
- self._segmentsGroups[segment.line] = new SegmentsGroup(self._peaks, self._view, true);
68
- }
69
-
70
- self._segmentsGroups[segment.line].onSegmentsAdd([segment]);
71
- if (Utils.objectHasProperty(self._segmentsGroupToLine, segment.line)) {
72
- self._segmentsGroupToLine[segment.line].refreshSegmentsHeight();
73
- }
74
- });
75
- };
76
-
77
- Lines.prototype._onSegmentsUpdate = function(segment) {
78
- this._segmentsGroups[segment.line].onSegmentsUpdate(segment);
79
- };
80
-
81
- Lines.prototype._onSegmentUpdated = function(segment) {
82
- this._segmentsGroups[segment.line].onSegmentUpdated();
83
- };
84
-
85
- Lines.prototype._onSegmentsRemove = function(segments) {
86
- var self = this;
87
-
88
- segments.forEach(function(segment) {
89
- self._segmentsGroups[segment.line].onSegmentsRemove([segment]);
90
- });
91
- };
92
-
93
- Lines.prototype._onSegmentsRemoveAll = function(lineId) {
94
- this._segmentsGroups[lineId].onSegmentsRemoveAll();
95
-
96
- if (Utils.objectHasProperty(this._segmentsGroupToLine, lineId)) {
97
- this._segmentsGroupToLine[lineId].refreshSegmentsHeight();
98
- }
99
- };
100
-
101
- Lines.prototype._onLineHeightChanged = function(position) {
102
- this._updateLinesPosition(position);
103
- this._view.updateTimeline();
104
- };
105
-
106
- Lines.prototype._onLineRemove = function(position) {
107
- this._removeLine(position);
108
- this._updateLinesPosition(position);
109
- };
110
-
111
- Lines.prototype._onSourcesWrappingChanged = function(sources) {
112
- sources.forEach(function(source) {
113
- if (this._linesByPosition[source.position]) {
114
- this._linesByPosition[source.position].updateLineHeight(source, 'wrappingChanged');
115
- }
116
- }.bind(this));
117
- };
118
-
119
- Lines.prototype.addSourceGroup = function(source, sourceGroup, position) {
120
- if (!this._linesByPosition[position] || this._linesByPosition[position].isSegmentsLine()) {
121
- this._createLine(position);
122
- this._setInteractions(position);
123
- }
124
-
125
- source.position = position;
126
- this._linesByPosition[position].addSourceGroup(source, sourceGroup);
127
- };
128
-
129
- Lines.prototype.addSegments = function(lineId, position) {
130
- this._createLine(position);
131
-
132
- this._linesByPosition[position].allowInteractions(this._areSegmentInteractionsAllowed);
133
- this._linesByPosition[position].addSegments(this._segmentsGroups[lineId]);
134
-
135
- this._segmentsGroupToLine[lineId] = this._linesByPosition[position];
136
-
137
- this._setInteractions(position);
138
-
139
- this._updateLinesPosition(position);
140
- };
141
-
142
- Lines.prototype.removeSourceGroup = function(source, isPermanent) {
143
- if (!this._linesByPosition[source.position]) {
144
- return null;
145
- }
146
-
147
- var sourceGroup = this._linesByPosition[source.position].removeSourceGroup(source, isPermanent);
148
-
149
- if (isPermanent) {
150
- this._updateLinesPosition(source.position);
151
- }
152
-
153
- return sourceGroup;
154
- };
155
-
156
- Lines.prototype._removeLine = function(pos) {
157
- var oldLine = this._linesByPosition[pos];
158
- var lineId = oldLine.getId();
159
-
160
- if (this._automaticallyCreatedLineId === lineId) {
161
- this._automaticallyCreatedLineId = null;
162
- }
163
- oldLine.destroy();
164
-
165
- delete this._linesByPosition[pos];
166
-
167
- this._lineIndicator.removeIndicator(lineId, false);
168
-
169
- return oldLine;
170
- };
171
-
172
- Lines.prototype.isLineVisible = function(position) {
173
- return this._linesByPosition[position] ? this._linesByPosition[position].isVisible() : false;
174
- };
175
-
176
- Lines.prototype.getVisibleLines = function() {
177
- var positions = {};
178
-
179
- for (var position in this._linesByPosition) {
180
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
181
- if (this._linesByPosition[position].isVisible()) {
182
- positions[position] = true;
183
- }
184
- }
185
- }
186
- return positions;
187
- };
188
-
189
- Lines.prototype.getSourcesOnLineAfter = function(lineId, time) {
190
- return this._linesByPosition[lineId].getSourcesAfter(time);
191
- };
192
-
193
- Lines.prototype.getSegmentsGroups = function() {
194
- return this._segmentsGroups;
195
- };
196
-
197
- Lines.prototype.addToLayer = function(layer) {
198
- for (var position in this._linesByPosition) {
199
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
200
- this._linesByPosition[position].addToLayer(layer);
201
- }
202
- }
203
-
204
- this._autoAddToLayer = true;
205
- };
206
-
207
- Lines.prototype.updateLines = function(position) {
208
- this._updateLinesPosition(position);
209
- };
210
-
211
- Lines.prototype._updateLinesPosition = function(position) {
212
- var line = this._linesByPosition[position];
213
- var dy = null;
214
- var newY;
215
-
216
- if (line) {
217
- newY = line.getY() + line.lineHeight() + this._peaks.options.interline;
218
- }
219
- else {
220
- var previousLine;
221
-
222
- while ((previousLine === undefined || previousLine === null) && position > 0) {
223
- previousLine = this._linesByPosition[--position];
224
- }
225
-
226
- newY = previousLine ? previousLine.getY() + previousLine.lineHeight() + this._peaks.options.interline : 0;
227
- }
228
-
229
- for (var pos in this._linesByPosition) {
230
- if (Utils.objectHasProperty(this._linesByPosition, pos)) {
231
- if (parseInt(pos, 10) > position) {
232
- if (dy === null) {
233
- dy = newY - this._linesByPosition[pos].getY();
234
- this._linesByPosition[pos].moveOnY(dy);
235
- }
236
- else {
237
- this._linesByPosition[pos].moveOnY(dy);
238
- }
239
- }
240
- }
241
- }
242
-
243
- this._lineIndicator.updateIndicators();
244
- this._lineIndicator.draw();
245
- this._view.refresh();
246
- };
247
-
248
- Lines.prototype.setOffsetY = function(frameOffset) {
249
- for (var position in this._linesByPosition) {
250
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
251
- var line = this._linesByPosition[position];
252
-
253
- line.y(line.getInitialY() - frameOffset);
254
- }
255
- }
256
-
257
- this._lineIndicator.updateIndicators();
258
- this._lineIndicator.draw();
259
- };
260
-
261
- Lines.prototype.height = function() {
262
- var height = 2 * this._peaks.options.padding;
263
-
264
- for (var position in this._linesByPosition) {
265
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
266
- height += this._linesByPosition[position].lineHeight() + this._peaks.options.interline;
267
- }
268
- }
269
-
270
- height -= this._peaks.options.interline;
271
-
272
- return height;
273
- };
274
-
275
- Lines.prototype.linesLength = function() {
276
- var length = 0;
277
-
278
- for (var position in this._linesByPosition) {
279
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
280
- var lineLength = this._linesByPosition[position].lineLength();
281
-
282
- if (lineLength > length) {
283
- length = lineLength;
284
- }
285
- }
286
- }
287
-
288
- return length;
289
- };
290
-
291
- Lines.prototype.stopAutomaticLineCreation = function() {
292
- if (this._automaticLineCreationTimeout) {
293
- clearTimeout(this._automaticLineCreationTimeout);
294
- }
295
- this._automaticLineCreationTimeout = null;
296
- this._automaticLineCreationPosition = null;
297
- this._automaticallyCreatedLineId = null;
298
- };
299
-
300
- Lines.prototype.manageAutomaticLineCreation = function(newLinePosition, initialPosition, sources) {
301
- if (this._automaticallyCreatedLineId !== null) {
302
- return;
303
- }
304
- else if (
305
- this._automaticLineCreationPosition !== null
306
- && this._automaticLineCreationPosition !== newLinePosition
307
- ) {
308
- this.stopAutomaticLineCreation();
309
- }
310
-
311
- if (this._automaticLineCreationTimeout) {
312
- return;
313
- }
314
-
315
- this._automaticLineCreationPosition = newLinePosition;
316
- this._automaticLineCreationTimeout = setTimeout(function() {
317
- this._automaticLineCreationTimeout = null;
318
-
319
- var currentLine = this._linesByPosition[initialPosition];
320
-
321
- if (currentLine.countRemainingElements() === sources.length) {
322
- this.stopAutomaticLineCreation();
323
- return;
324
- }
325
-
326
- this._automaticallyCreatedLineId = this._createLine(newLinePosition);
327
- this._setInteractions(newLinePosition);
328
- this.moveSourcesToPosition(sources, currentLine.getPosition(), newLinePosition);
329
- }.bind(this), this._peaks.options.automaticLineCreationDelay);
330
- };
331
-
332
- Lines.prototype.manageVerticalPosition = function(sources, startTime, endTime, mouseX, mouseY) {
333
- if (mouseX === null || mouseX === undefined) {
334
- return;
335
- }
336
-
337
- const position = sources[0].position;
338
- const linePos = this.getLinesUnderY(mouseY);
339
-
340
- if (linePos[0] !== linePos[1]) {
341
- this.manageAutomaticLineCreation(linePos[0] + 1, position, sources);
342
- }
343
- else {
344
- this.stopAutomaticLineCreation();
345
-
346
- if (
347
- mouseX !== null && mouseX !== undefined
348
- && linePos[0] !== position
349
- && !this._linesByPosition[linePos[0]].isSegmentsLine()
350
- ) {
351
- var mouseTime = this._view.pixelsToTime(mouseX + this._view.getFrameOffset());
352
- var sourceDuration = Utils.roundTime(endTime - startTime);
353
-
354
- if (this._hasSpaceForSourceAt(linePos[0], mouseTime, sourceDuration)) {
355
- this.moveSourcesToPosition(sources, position, linePos[0]);
356
- }
357
- }
358
- }
359
- };
360
-
361
- Lines.prototype._hasSpaceForSourceAt = function(linePosition, mouseTime, sourceDuration) {
362
- var line = this._linesByPosition[linePosition];
363
-
364
- if (!line || line.isSegmentsLine()) {
365
- return false;
366
- }
367
-
368
- var sourcesAround = line.getSourcesAround(mouseTime);
369
-
370
- if (sourcesAround.overlapping) {
371
- return false;
372
- }
373
- else if (!sourcesAround.right) {
374
- return true;
375
- }
376
- else {
377
- var leftLimit = sourcesAround.left ? sourcesAround.left.endTime : 0;
378
- var rightLimit = sourcesAround.right.startTime;
379
-
380
- return sourceDuration <= Utils.roundTime(rightLimit - leftLimit);
381
- }
382
- };
383
-
384
- Lines.prototype.getLineByPosition = function(pos) {
385
- return this._linesByPosition[pos];
386
- };
387
-
388
- Lines.prototype.getLastPosition = function() {
389
- var keys = Object.keys(this._linesByPosition);
390
-
391
- return keys.pop();
392
- };
393
-
394
- Lines.prototype.getLinesUnderY = function(y) {
395
- var height;
396
- var pos = [-1, this.getLastPosition() + 1];
397
-
398
- for (var position in this._linesByPosition) {
399
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
400
- height = this._linesByPosition[position].lineHeight();
401
-
402
- if (y > this._linesByPosition[position].getY()) {
403
- pos[0] = Math.max(pos[0], parseInt(position, 10));
404
- }
405
-
406
- if (y < this._linesByPosition[position].getY() + height) {
407
- pos[1] = Math.min(pos[1], parseInt(position, 10));
408
- }
409
- }
410
- }
411
-
412
- return pos;
413
- };
414
-
415
- Lines.prototype.moveSourcesToPosition = function(sources, initialPosition, targetPosition) {
416
- sources.forEach(function(source) {
417
- var sourceGroup = this._linesByPosition[initialPosition].removeSourceGroup(source, true);
418
-
419
- if (sourceGroup) {
420
- sourceGroup.moveTo(this._linesByPosition[targetPosition].getKonvaGroup());
421
- }
422
-
423
- this.addSourceGroup(source, sourceGroup, targetPosition);
424
- }.bind(this));
425
-
426
- this._updateLinesPosition(initialPosition);
427
- };
428
-
429
- Lines.prototype._getNextLineId = function() {
430
- this._lineId++;
431
- return this._lineId;
432
- };
433
-
434
- Lines.prototype._createLine = function(position) {
435
- var y = this._peaks.options.padding;
436
- var currentPos;
437
- var newLinesByPosition = Object.assign({},this._linesByPosition);
438
-
439
- for (var pos in this._linesByPosition) {
440
- if (Utils.objectHasProperty(this._linesByPosition, pos)) {
441
- currentPos = parseInt(pos, 10);
442
- if (currentPos < position) {
443
- y += this._linesByPosition[pos].lineHeight() + this._peaks.options.interline;
444
- }
445
- else {
446
- // This code assumes that lines are ordered in ascending order of position
447
- // This is the case as the keys are integers
448
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
449
- var newPosition = currentPos + 1;
450
-
451
- this._linesByPosition[currentPos].updatePosition(newPosition);
452
- newLinesByPosition[newPosition] = this._linesByPosition[currentPos];
453
-
454
- if (!this._linesByPosition[newPosition]) {
455
- break;
456
- }
457
- }
458
- }
459
- }
460
- }
461
-
462
- var line = new Line(this._peaks, this._view, y, this._getNextLineId(), position);
463
-
464
- this._lineIndicator.addIndicator(line);
465
-
466
- if (this._autoAddToLayer) {
467
- line.addToLayer(this._layer);
468
- }
469
-
470
- newLinesByPosition[position] = line;
471
- this._linesByPosition = newLinesByPosition;
472
-
473
- return line.getId();
474
- };
475
-
476
- Lines.prototype.updateSegments = function(frameStartTime, frameEndTime) {
477
- for (var lineId in this._segmentsGroups) {
478
- if (Utils.objectHasProperty(this._segmentsGroups, lineId)) {
479
- this._segmentsGroups[lineId].updateSegments(frameStartTime, frameEndTime);
480
- }
481
- }
482
- };
483
-
484
- Lines.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
485
- return this._linesByPosition[sources[0].position].manageCollision(sources, newStartTime, newEndTime);
486
- };
487
-
488
- Lines.prototype.manageOrder = function(sources, startTime, endTime) {
489
- // Assuming all ordered elements have the same position
490
- return this._linesByPosition[sources[0].position].manageOrder(sources, startTime, endTime);
491
- };
492
-
493
- Lines.prototype._setInteractions = function(position) {
494
- var line = this._linesByPosition[position];
495
-
496
- if (this._areInteractionsOverridden) {
497
- line.allowInteractions(this._areInteractionsAllowed);
498
- }
499
- else {
500
- line.allowInteractions(
501
- line.isSegmentsLine() ?
502
- this._areSegmentInteractionsAllowed :
503
- this._areSourceInteractionsAllowed
504
- );
505
- }
506
- };
507
-
508
- Lines.prototype.overrideInteractions = function(bool, areInteractionsAllowed) {
509
- this._areInteractionsOverridden = typeof bool !== 'undefined' ?
510
- bool : this._areInteractionsOverridden;
511
- this._areInteractionsAllowed = typeof areInteractionsAllowed !== 'undefined' ?
512
- areInteractionsAllowed : this._areInteractionsAllowed;
513
- for (var position in this._linesByPosition) {
514
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
515
- this._setInteractions(position);
516
- }
517
- }
518
- };
519
-
520
- Lines.prototype.allowInteractions = function(forSources, forSegments) {
521
- this._areSourceInteractionsAllowed = typeof forSources !== 'undefined' ?
522
- forSources : this._areSourceInteractionsAllowed;
523
- this._areSegmentInteractionsAllowed = typeof forSegments !== 'undefined' ?
524
- forSegments : this._areSegmentInteractionsAllowed;
525
- for (var position in this._linesByPosition) {
526
- if (Utils.objectHasProperty(this._linesByPosition, position)) {
527
- this._setInteractions(position);
528
- }
529
- }
530
- };
531
-
532
- return Lines;
533
- });
File without changes
File without changes
File without changes