@checksub_team/peaks_timeline 1.16.0-alpha.1 → 1.16.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/src/line.js CHANGED
@@ -7,10 +7,9 @@
7
7
  */
8
8
 
9
9
  define([
10
- './source-group',
11
10
  'konva',
12
11
  './utils'
13
- ], function(SourceGroup, Konva, Utils) {
12
+ ], function(Konva, Utils) {
14
13
  'use strict';
15
14
 
16
15
  function Line(peaks, view, y, id, position) {
@@ -58,12 +57,6 @@ define([
58
57
  Object.keys(this._sources).length === 0;
59
58
  };
60
59
 
61
- Line.prototype.countRemainingElements = function() {
62
- return this.isSegmentsLine() ?
63
- this._segmentsGroup.countRemainingElements() :
64
- Object.keys(this._sources).length;
65
- };
66
-
67
60
  Line.prototype.isSegmentsLine = function() {
68
61
  return Boolean(this._segmentsGroup);
69
62
  };
@@ -137,71 +130,50 @@ define([
137
130
  }
138
131
  };
139
132
 
140
- Line.prototype._addHeight = function(height) {
141
- if (this._sourceHeights[height]) {
142
- this._sourceHeights[height]++;
143
- }
144
- else {
145
- this._sourceHeights[height] = 1;
146
- if (height > this._height) {
147
- this._height = height;
148
- }
149
- }
150
- };
151
-
152
- Line.prototype._subtractHeight = function(height) {
153
- if (Object.keys(this._sources).length === 0) {
154
- this._height = this._peaks.options.emptyLineHeight;
155
- this._sourceHeights = {};
156
- }
157
- else {
158
- this._sourceHeights[height]--;
159
-
160
- if (this._sourceHeights[height] === 0
161
- && height === this._height) {
162
- delete this._sourceHeights[height];
163
- this._height = 0;
164
- for (var sourceHeight in this._sourceHeights) {
165
- if (Utils.objectHasProperty(this._sourceHeights, sourceHeight)) {
166
- var parsedHeight = parseInt(sourceHeight, 10);
167
-
168
- if (parsedHeight > this._height) {
169
- this._height = parsedHeight;
170
- }
171
- }
172
- }
173
- }
174
- }
175
- };
176
-
177
- Line.prototype.updateLineHeight = function(source, action) {
133
+ Line.prototype.updateLineHeight = function(sourceGroup, action) {
178
134
  var oldHeight = this._height;
179
- var sourceGroup = this._sourcesGroup[source.id];
180
135
  var sourceGroupHeight;
181
136
 
182
137
  switch (action) {
183
138
  case 'add':
184
- sourceGroupHeight = sourceGroup ?
185
- sourceGroup.getCurrentHeight() :
186
- SourceGroup.getHeights(source, this._peaks).current;
139
+ sourceGroupHeight = sourceGroup.getCurrentHeight();
187
140
 
188
- this._addHeight(sourceGroupHeight);
141
+ if (this._sourceHeights[sourceGroupHeight]) {
142
+ this._sourceHeights[sourceGroupHeight]++;
143
+ }
144
+ else {
145
+ this._sourceHeights[sourceGroupHeight] = 1;
146
+ if (sourceGroupHeight > this._height) {
147
+ this._height = sourceGroupHeight;
148
+ }
149
+ }
189
150
  break;
190
151
  case 'remove':
191
- sourceGroupHeight = sourceGroup ?
192
- sourceGroup.getCurrentHeight() :
193
- SourceGroup.getHeights(source, this._peaks).current;
152
+ if (Object.keys(this._sources).length === 0) {
153
+ this._height = this._peaks.options.emptyLineHeight;
154
+ this._sourceHeights = {};
155
+ }
156
+ else {
157
+ sourceGroupHeight = sourceGroup.getCurrentHeight();
194
158
 
195
- this._subtractHeight(sourceGroupHeight);
196
- break;
197
- default:
198
- // wrappingChanged
199
- var { unwrapped, wrapped } = sourceGroup ?
200
- sourceGroup.getHeights() :
201
- SourceGroup.getHeights(source, this._peaks);
159
+ this._sourceHeights[sourceGroupHeight]--;
160
+
161
+ if (this._sourceHeights[sourceGroupHeight] === 0
162
+ && sourceGroupHeight === this._height) {
163
+ delete this._sourceHeights[sourceGroupHeight];
164
+ this._height = 0;
165
+ for (var height in this._sourceHeights) {
166
+ if (Utils.objectHasProperty(this._sourceHeights, height)) {
167
+ var parsedHeight = parseInt(height, 10);
202
168
 
203
- this._addHeight(source.wrapped ? wrapped : unwrapped);
204
- this._subtractHeight(source.wrapped ? unwrapped : wrapped);
169
+ if (parsedHeight > this._height) {
170
+ this._height = parsedHeight;
171
+ }
172
+ }
173
+ }
174
+ }
175
+ }
176
+ break;
205
177
  }
206
178
 
207
179
  if (this._height !== oldHeight) {
@@ -218,16 +190,10 @@ define([
218
190
  layer.add(this._group);
219
191
  };
220
192
 
221
- /**
222
- * Adds a source to the line.
223
- * @param {Source} source - The source to add.
224
- * @param {SourceGroup} sourceGroup - The source group of the source (optional).
225
- * @returns {void}
226
- */
227
- Line.prototype.addSourceGroup = function(source, sourceGroup) {
228
- if (sourceGroup) {
229
- this._sourcesGroup[source.id] = sourceGroup;
230
- }
193
+ Line.prototype.addSourceGroup = function(sourceGroup) {
194
+ var source = sourceGroup.getSource();
195
+
196
+ this._sourcesGroup[source.id] = sourceGroup;
231
197
 
232
198
  if (!this._sources[source.id]) {
233
199
  var newSource = {
@@ -252,15 +218,15 @@ define([
252
218
  ? this._sources[currentSource.prevSourceId].source.endTime
253
219
  : 0;
254
220
 
255
- const { newStartTime, newEndTime } = this._canBePlacedBetween(
221
+ var newTimes = this._canBePlacedBetween(
256
222
  source.startTime,
257
223
  source.endTime,
258
224
  startLimit,
259
225
  currentSource.source.startTime
260
226
  );
261
227
 
262
- if (newStartTime !== null && newEndTime !== null) {
263
- source.updateTimes(newStartTime, newEndTime);
228
+ if (newTimes) {
229
+ source.updateTimes(newTimes.start, newTimes.end);
264
230
 
265
231
  if (currentSource.prevSourceId) {
266
232
  this._sources[currentSource.prevSourceId].nextSourceId = source.id;
@@ -299,10 +265,10 @@ define([
299
265
  this._sources[source.id] = newSource;
300
266
  }
301
267
 
302
- this.updateLineHeight(source, 'add');
268
+ this.updateLineHeight(sourceGroup, 'add');
303
269
  }
304
270
 
305
- if (sourceGroup && (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group))) {
271
+ if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
306
272
  sourceGroup.addToGroup(this._group);
307
273
  }
308
274
  };
@@ -329,26 +295,32 @@ define([
329
295
 
330
296
  Line.prototype._canBePlacedBetween = function(startTime, endTime, startLimit, endLimit) {
331
297
  var timeWidth = Utils.roundTime(endTime - startTime);
332
- var newStartTime, newEndTime;
298
+ var newTimes = null;
333
299
 
334
300
  if ((!endLimit && startTime > startLimit) || (startTime > startLimit && endTime < endLimit)) {
335
301
  // Can be placed at its wanted position with wanted start/end time
336
- newStartTime = startTime;
337
- newEndTime = endTime;
302
+ newTimes = {
303
+ start: startTime,
304
+ end: endTime
305
+ };
338
306
  }
339
307
  else if (Utils.roundTime(endLimit - startLimit) >= timeWidth) {
340
308
  // Can be placed at its wanted position but not with its wanted start/end time
341
309
  if (startTime > startLimit) {
342
- newStartTime = Utils.roundTime(endLimit - timeWidth);
343
- newEndTime = endLimit;
310
+ newTimes = {
311
+ start: Utils.roundTime(endLimit - timeWidth),
312
+ end: endLimit
313
+ };
344
314
  }
345
315
  else {
346
- newStartTime = startLimit;
347
- newEndTime = Utils.roundTime(startLimit + timeWidth);
316
+ newTimes = {
317
+ start: startLimit,
318
+ end: Utils.roundTime(startLimit + timeWidth)
319
+ };
348
320
  }
349
321
  }
350
322
 
351
- return { newStartTime, newEndTime };
323
+ return newTimes;
352
324
  };
353
325
 
354
326
  Line.prototype.removeSourceGroup = function(source, isPermanent) {
@@ -357,32 +329,23 @@ define([
357
329
  delete this._sourcesGroup[source.id];
358
330
 
359
331
  if (isPermanent) {
360
- var sourceData = this._sources[source.id];
361
-
362
- delete this._sources[source.id];
363
-
364
- if (Object.keys(this._sources).length === 0) {
365
- setTimeout(function() {
366
- this._peaks.emit('line.remove', this._position);
367
- }.bind(this), 0);
368
- return sourceGroup;
369
- }
370
-
371
- if (sourceData.prevSourceId) {
372
- this._sources[sourceData.prevSourceId].nextSourceId
373
- = sourceData.nextSourceId;
332
+ if (this._sources[source.id].prevSourceId) {
333
+ this._sources[this._sources[source.id].prevSourceId].nextSourceId
334
+ = this._sources[source.id].nextSourceId;
374
335
  }
375
336
 
376
- if (sourceData.nextSourceId) {
377
- this._sources[sourceData.nextSourceId].prevSourceId
378
- = sourceData.prevSourceId;
337
+ if (this._sources[source.id].nextSourceId) {
338
+ this._sources[this._sources[source.id].nextSourceId].prevSourceId
339
+ = this._sources[source.id].prevSourceId;
379
340
  }
380
341
 
381
342
  if (this._firstSourceId === source.id) {
382
- this._firstSourceId = sourceData.nextSourceId;
343
+ this._firstSourceId = this._sources[source.id].nextSourceId;
383
344
  }
384
345
 
385
- this.updateLineHeight(source, 'remove');
346
+ delete this._sources[source.id];
347
+
348
+ this.updateLineHeight(sourceGroup, 'remove');
386
349
  }
387
350
 
388
351
  return sourceGroup;
@@ -412,105 +375,126 @@ define([
412
375
  this._group.y(this._group.y() + dy);
413
376
  };
414
377
 
415
- Line.prototype.manageOrder = function(sources, startTime, endTime) {
416
- const firstSource = sources[0];
417
- const lastSource = sources[sources.length - 1];
418
- const cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
419
- var newStartTime = startTime;
420
- var newEndTime = endTime;
378
+ Line.prototype.manageSourceOrder = function(source, newTimes) {
379
+ var cursorTime = this._view.pixelsToTime(this._view.getPointerPosition().x);
380
+ var tmpTimes;
421
381
 
422
- var sourceDuration = endTime - startTime;
382
+ var sourceDuration = source.endTime - source.startTime;
423
383
 
424
- if (newStartTime !== null && newEndTime !== null) {
425
- if (this._sources[firstSource.id].prevSourceId) {
384
+ if (newTimes.start !== null && newTimes.end !== null) {
385
+ if (this._sources[source.id].prevSourceId) {
426
386
  // there is another source to the left
427
- var previousStartTime = this._sources[this._sources[firstSource.id].prevSourceId].source.startTime;
387
+ var previousStartTime = this._sources[this._sources[source.id].prevSourceId].source.startTime;
428
388
 
429
389
  if (cursorTime + this._view.getTimeOffset() < previousStartTime) {
430
390
  // we want to change order
431
- ({ newStartTime, newEndTime } = this._changeSourcesPosition(
432
- sources,
391
+ tmpTimes = this._changeSourcePosition(
392
+ source,
433
393
  sourceDuration,
434
394
  cursorTime + this._view.getTimeOffset()
435
- ));
395
+ );
396
+
397
+ if (tmpTimes) {
398
+ newTimes.start = tmpTimes.start;
399
+ newTimes.end = tmpTimes.end;
400
+ }
436
401
  }
437
402
  }
438
403
 
439
- if (this._sources[lastSource.id].nextSourceId) {
404
+ if (this._sources[source.id].nextSourceId) {
440
405
  // there is another source to the right
441
- var nextEndTime = this._sources[this._sources[lastSource.id].nextSourceId].source.endTime;
406
+ var nextEndTime = this._sources[this._sources[source.id].nextSourceId].source.endTime;
442
407
 
443
408
  if (cursorTime + this._view.getTimeOffset() > nextEndTime) {
444
409
  // we want to change order
445
- ({ newStartTime, newEndTime } = this._changeSourcesPosition(
446
- sources,
410
+ tmpTimes = this._changeSourcePosition(
411
+ source,
447
412
  sourceDuration,
448
413
  cursorTime + this._view.getTimeOffset()
449
- ));
414
+ );
415
+
416
+ if (tmpTimes) {
417
+ newTimes.start = tmpTimes.start;
418
+ newTimes.end = tmpTimes.end;
419
+ }
450
420
  }
451
421
  }
452
422
  }
453
423
 
454
- return { newStartTime, newEndTime };
455
- };
424
+ if (newTimes.start) {
425
+ newTimes.start = Utils.roundTime(newTimes.start);
426
+ }
427
+ if (newTimes.end) {
428
+ newTimes.end = Utils.roundTime(newTimes.end);
429
+ }
456
430
 
457
- Line.prototype._changeSourcesPosition = function(sources, sourceDuration, time) {
458
- var currentRange = {
459
- start: null,
460
- end: null
461
- };
462
- var startLimit = null;
463
- var endLimit = null;
431
+ return newTimes;
432
+ };
464
433
 
465
- let newStartTime, newEndTime;
434
+ Line.prototype._changeSourcePosition = function(source, sourceDuration, time) {
435
+ if (source.orderable && this._firstSourceId) {
436
+ var currentRange = {
437
+ start: null,
438
+ end: null
439
+ };
440
+ var startLimit = null;
441
+ var endLimit = null;
466
442
 
467
- do {
468
- if (!currentRange.end) {
469
- currentRange.end = this._sources[this._firstSourceId];
470
- }
471
- else {
472
- currentRange.start = currentRange.end;
473
- currentRange.end = this._sources[currentRange.start.nextSourceId];
474
- }
443
+ do {
444
+ if (!currentRange.end) {
445
+ currentRange.end = this._sources[this._firstSourceId];
446
+ }
447
+ else {
448
+ currentRange.start = currentRange.end;
449
+ currentRange.end = this._sources[currentRange.start.nextSourceId];
450
+ }
475
451
 
476
- if (currentRange.start) {
477
- startLimit = currentRange.start.source.endTime;
478
- }
479
- else {
480
- startLimit = 0;
481
- }
452
+ if (currentRange.start) {
453
+ startLimit = currentRange.start.source.endTime;
454
+ }
455
+ else {
456
+ startLimit = 0;
457
+ }
482
458
 
483
- if (currentRange.end) {
484
- endLimit = currentRange.end.source.startTime;
485
- }
486
- else {
487
- endLimit = null;
488
- }
459
+ if (currentRange.end) {
460
+ endLimit = currentRange.end.source.startTime;
461
+ }
462
+ else {
463
+ endLimit = null;
464
+ }
489
465
 
490
- if (time > startLimit && (endLimit === null || time < endLimit)) {
491
- ({ newStartTime, newEndTime } = this._canBePlacedBetween(
492
- time,
493
- time + sourceDuration,
494
- startLimit,
495
- endLimit
496
- ));
466
+ if (time > startLimit && (endLimit === null || time < endLimit)) {
467
+ var newTimes = this._canBePlacedBetween(
468
+ time,
469
+ time + sourceDuration,
470
+ startLimit,
471
+ endLimit
472
+ );
473
+
474
+ if (newTimes) {
475
+ if (newTimes.start) {
476
+ newTimes.start = Utils.roundTime(newTimes.start);
477
+ }
478
+ if (newTimes.end) {
479
+ newTimes.end = Utils.roundTime(newTimes.end);
480
+ }
497
481
 
498
- if (newStartTime !== null && newEndTime !== null) {
499
- let prevSourceId = currentRange.start
500
- ? currentRange.start.source.id
501
- : null;
482
+ source.updateTimes(
483
+ newTimes.start,
484
+ newTimes.end
485
+ );
486
+ var prevSourceId = currentRange.start
487
+ ? currentRange.start.source.id
488
+ : null;
502
489
 
503
- sources.forEach(function(source) {
504
490
  this._moveSource(this._sources[source.id].source, prevSourceId);
505
- prevSourceId = source.id;
506
- }.bind(this));
491
+ return newTimes;
492
+ }
507
493
  }
494
+ } while (currentRange.end);
495
+ }
508
496
 
509
- return { newStartTime, newEndTime };
510
- }
511
- } while (currentRange.end);
512
-
513
- return { newStartTime, newEndTime };
497
+ return null;
514
498
  };
515
499
 
516
500
  Line.prototype._moveSource = function(source, prevSourceId) {
@@ -551,21 +535,26 @@ define([
551
535
  this._sources[source.id] = sourceObj;
552
536
  };
553
537
 
554
- Line.prototype.manageCollision = function(sources, newStartTime, newEndTime) {
555
- var originalStartTime = newStartTime;
556
- var originalEndTime = newEndTime;
538
+ Line.prototype.manageCollision = function(source, newTimes) {
539
+ var originalStartTime = null;
540
+ var originalEndTime = null;
541
+ var newStartTime = null;
542
+ var newEndTime = null;
557
543
  var startLimited = false;
558
544
  var endLimited = false;
559
- const firstSource = sources[0];
560
- const lastSource = sources[sources.length - 1];
561
545
 
562
- if (typeof newStartTime === 'number') {
546
+ newTimes.updateTimelineLength = false;
547
+
548
+ if (newTimes.start !== null) {
563
549
  // startMarker changed
564
- if (firstSource.startTime > newStartTime) {
550
+ originalStartTime = newTimes.start;
551
+ newStartTime = originalStartTime;
552
+
553
+ if (source.startTime > newStartTime) {
565
554
  // startMarker moved to the left
566
- if (this._sources[firstSource.id].prevSourceId) {
555
+ if (this._sources[source.id].prevSourceId) {
567
556
  // there is another source to the left
568
- var previousSource = this._sources[this._sources[firstSource.id].prevSourceId]
557
+ var previousSource = this._sources[this._sources[source.id].prevSourceId]
569
558
  .source;
570
559
 
571
560
  if (newStartTime < previousSource.endTime) {
@@ -583,13 +572,16 @@ define([
583
572
  }
584
573
  }
585
574
 
586
- if (typeof newEndTime === 'number') {
575
+ if (newTimes.end !== null) {
587
576
  // endMarker changed
588
- if (lastSource.endTime < newEndTime) {
577
+ originalEndTime = newTimes.end;
578
+ newEndTime = originalEndTime;
579
+
580
+ if (source.endTime < newEndTime) {
589
581
  // endMarker moved to the right
590
- if (this._sources[lastSource.id].nextSourceId) {
582
+ if (this._sources[source.id].nextSourceId) {
591
583
  // there is another source to the right
592
- var nextSource = this._sources[this._sources[lastSource.id].nextSourceId]
584
+ var nextSource = this._sources[this._sources[source.id].nextSourceId]
593
585
  .source;
594
586
 
595
587
  if (newEndTime > nextSource.startTime) {
@@ -615,29 +607,40 @@ define([
615
607
  }
616
608
 
617
609
  // Check for minimal size of source
618
- // We assume that only 1 source can be resized at a time
619
610
  if (newStartTime !== null && newEndTime === null) {
620
- if (Utils.roundTime(sources[0].endTime - newStartTime) < sources[0].minSize) {
621
- newStartTime = Utils.roundTime(sources[0].endTime - sources[0].minSize);
611
+ if (Utils.roundTime(source.endTime - newStartTime) < source.minSize) {
612
+ newStartTime = Utils.roundTime(source.endTime - source.minSize);
622
613
  }
623
614
  }
624
615
  else if (newEndTime !== null && newStartTime === null) {
625
- if (Utils.roundTime(newEndTime - sources[0].startTime) < sources[0].minSize) {
626
- newEndTime = Utils.roundTime(sources[0].startTime + sources[0].minSize);
616
+ if (Utils.roundTime(newEndTime - source.startTime) < source.minSize) {
617
+ newEndTime = Utils.roundTime(source.startTime + source.minSize);
627
618
  }
628
619
  }
629
620
  else {
630
- if (Utils.roundTime(newEndTime - newStartTime) < sources[0].minSize) {
631
- if (sources[0].endTime !== newEndTime) {
632
- newEndTime = Utils.roundTime(newStartTime + sources[0].minSize);
621
+ if (Utils.roundTime(newEndTime - newStartTime) < source.minSize) {
622
+ if (source.endTime !== newEndTime) {
623
+ newEndTime = Utils.roundTime(newStartTime + source.minSize);
633
624
  }
634
- if (sources[0].startTime !== newStartTime) {
635
- newStartTime = Utils.roundTime(newEndTime - sources[0].minSize);
625
+ if (source.startTime !== newStartTime) {
626
+ newStartTime = Utils.roundTime(newEndTime - source.minSize);
636
627
  }
637
628
  }
638
629
  }
639
630
 
640
- return { newStartTime, newEndTime };
631
+ if (newStartTime !== null && newStartTime !== originalStartTime) {
632
+ newTimes.start = newStartTime;
633
+ }
634
+
635
+ if (newEndTime !== null && newEndTime !== originalEndTime) {
636
+ newTimes.end = newEndTime;
637
+
638
+ if (this._sources[source.id].nextSourceId === null) {
639
+ newTimes.updateTimelineLength = true;
640
+ }
641
+ }
642
+
643
+ return newTimes;
641
644
  };
642
645
 
643
646
  Line.prototype.getSourcesAfter = function(time) {
@@ -662,38 +665,6 @@ define([
662
665
  return sources;
663
666
  };
664
667
 
665
- Line.prototype.getSourcesAround = function(time) {
666
- var left = null;
667
- var right = null;
668
- var overlapping = null;
669
- var currentId = this._firstSourceId;
670
-
671
- while (currentId) {
672
- var lineSource = this._sources[currentId];
673
- var source = lineSource.source;
674
-
675
- if (time < source.startTime) {
676
- right = source;
677
- break;
678
- }
679
- else if (time >= source.startTime && time <= source.endTime) {
680
- overlapping = source;
681
- break;
682
- }
683
- else {
684
- left = source;
685
- }
686
- currentId = lineSource.nextSourceId;
687
- }
688
-
689
- if (overlapping) {
690
- return { overlapping: overlapping };
691
- }
692
- else {
693
- return { left: left, right: right };
694
- }
695
- };
696
-
697
668
  Line.prototype.updatePosition = function(pos) {
698
669
  for (var sourceId in this._sources) {
699
670
  if (Utils.objectHasProperty(this._sources, sourceId)) {