@checksub_team/peaks_timeline 1.4.17

package/src/line.js

@@ -0,0 +1,629 @@
+/**
+ * @file
+ *
+ * Defines the {@link line} class.
+ *
+ * @module line
+ */
+
+define([
+  'konva',
+  './utils'
+], function(Konva, Utils) {
+  'use strict';
+
+  function Line(peaks, view, y, id, position) {
+    this._peaks = peaks;
+    this._view = view;
+
+    this._id = id;
+    this._position = position;
+
+    this._firstSourceId = null;
+    this._sources = {};
+
+    this._sourcesGroup = {};
+    this._wrapped = false;
+    this._y = y;
+
+    this._group = new Konva.Group({
+      x: 0,
+      y: y - this._view.getFrameOffsetY(),
+      draggable: true,
+      dragBoundFunc: function() {
+        return {
+          x: this.absolutePosition().x,
+          y: this.absolutePosition().y
+        };
+      }
+    });
+
+    this._sourceHeights = {};
+    this._height = this._peaks.options.emptyLineHeight;
+    this._unwrappedCount = 0;
+  }
+
+  Line.prototype.getPosition = function() {
+    return this._position;
+  };
+
+  Line.prototype.getId = function() {
+    return this._id;
+  };
+
+  Line.prototype.isEmpty = function() {
+    return Object.keys(this._sources).length === 0;
+  };
+
+  Line.prototype.isSegmentsLine = function() {
+    return Boolean(this._segmentsGroup);
+  };
+
+  Line.prototype.updateSegments = function(frameStartTime, frameEndTime) {
+    if (this.isSegmentsLine()) {
+      this._segmentsGroup.updateSegments(frameStartTime, frameEndTime);
+    }
+  };
+
+  Line.prototype.lineLength = function() {
+    var length = 0;
+
+    if (this.isSegmentsLine()) {
+      return this._segmentsGroup.getSegmentsGroupLength();
+    }
+
+    for (var sourceId in this._sources) {
+      if (Utils.objectHasProperty(this._sources, sourceId)) {
+        var sourceGroupLength = this._view.timeToPixels(
+          this._sources[sourceId].source.endTime
+        );
+
+        if (sourceGroupLength > length) {
+          length = sourceGroupLength;
+        }
+      }
+    }
+
+    return length;
+  };
+
+  Line.prototype.lineHeight = function() {
+    return this._height;
+  };
+
+  Line.prototype.updateLineHeight = function(sourceGroup, action) {
+    var oldHeight = this._height;
+    var sourceGroupHeight;
+
+    switch (action) {
+      case 'add':
+        sourceGroupHeight = sourceGroup.getCurrentHeight();
+
+        if (this._sourceHeights[sourceGroupHeight]) {
+          this._sourceHeights[sourceGroupHeight]++;
+        }
+        else {
+          this._sourceHeights[sourceGroupHeight] = 1;
+          if (sourceGroupHeight > this._height) {
+            this._height = sourceGroupHeight;
+          }
+        }
+        break;
+      case 'remove':
+        if (Object.keys(this._sources).length === 0) {
+          this._height = this._peaks.options.emptyLineHeight;
+          this._sourceHeights = {};
+        }
+        else {
+          sourceGroupHeight = sourceGroup.getCurrentHeight();
+
+          this._sourceHeights[sourceGroupHeight]--;
+
+          if (this._sourceHeights[sourceGroupHeight] === 0
+            && sourceGroupHeight === this._height) {
+            delete this._sourceHeights[sourceGroupHeight];
+            this._height = 0;
+            for (var height in this._sourceHeights) {
+              if (Utils.objectHasProperty(this._sourceHeights, height)) {
+                var parsedHeight = parseInt(height, 10);
+
+                if (parseInt(height, 10) > this._height) {
+                  this._height = parsedHeight;
+                }
+              }
+            }
+          }
+        }
+        break;
+    }
+
+    if (this._height !== oldHeight) {
+      this._peaks.emit('line.heightChanged', this._position);
+    }
+  };
+
+  Line.prototype.isVisible = function() {
+    return this._y < this._view.getFrameOffsetY() + this._view.getHeight()
+            && this._view.getFrameOffsetY() < this._y + this._height;
+  };
+
+  Line.prototype.addToLayer = function(layer) {
+    layer.add(this._group);
+  };
+
+  Line.prototype.addSourceGroup = function(sourceGroup) {
+    var source = sourceGroup.getSource();
+
+    this._sourcesGroup[source.id] = sourceGroup;
+
+    if (!this._sources[source.id]) {
+      var newSource = {
+        source: source,
+        prevSourceId: null,
+        nextSourceId: null
+      };
+
+      if (this._firstSourceId) {
+        var currentSource = null;
+
+        do {
+          if (!currentSource) {
+            currentSource = this._sources[this._firstSourceId];
+          }
+          else {
+            currentSource = this._sources[currentSource.nextSourceId];
+          }
+
+          if (source.endTime <= currentSource.source.startTime) {
+            var startLimit = currentSource.prevSourceId
+              ? this._sources[currentSource.prevSourceId].source.endTime
+              : 0;
+
+            var newTimes = this._canBePlacedBetween(
+              source.startTime,
+              source.endTime,
+              startLimit,
+              currentSource.source.startTime
+            );
+
+            if (newTimes) {
+              source.updateTimes(newTimes.startTime, newTimes.endTime);
+
+              if (currentSource.prevSourceId) {
+                this._sources[currentSource.prevSourceId].nextSourceId = source.id;
+                newSource.prevSourceId = currentSource.prevSourceId;
+              }
+              else {
+                this._firstSourceId = source.id;
+              }
+
+              currentSource.prevSourceId = source.id;
+              newSource.nextSourceId = currentSource.source.id;
+
+              this._sources[source.id] = newSource;
+              break;
+            }
+          }
+        } while (currentSource.nextSourceId);
+
+        if (!newSource.prevSourceId && !newSource.nextSourceId) {
+          if (source.startTime < currentSource.source.endTime) {
+            // Overlapping with last source
+            var timeWidth = source.endTime - source.startTime;
+
+            source.updateTimes(
+              currentSource.source.endTime,
+              currentSource.source.endTime + timeWidth
+            );
+          }
+          currentSource.nextSourceId = source.id;
+          newSource.prevSourceId = currentSource.source.id;
+          this._sources[source.id] = newSource;
+        }
+      }
+      else {
+        this._firstSourceId = source.id;
+        this._sources[source.id] = newSource;
+      }
+
+      this.updateLineHeight(sourceGroup, 'add');
+    }
+
+    if (!sourceGroup.getParent() || !sourceGroup.isDescendantOf(this._group)) {
+      sourceGroup.addToGroup(this._group);
+    }
+  };
+
+  Line.prototype.addSegments = function(segmentsGroup) {
+    this._segmentsGroup = segmentsGroup;
+
+    this._height = this._segmentsGroup.getCurrentHeight();
+
+    segmentsGroup.addToGroup(this._group);
+  };
+
+  Line.prototype._canBePlacedBetween = function(startTime, endTime, startLimit, endLimit) {
+    var timeWidth = endTime - startTime;
+    var newTimes = null;
+
+    if ((!endLimit && startTime > startLimit) || (startTime > startLimit && endTime < endLimit)) {
+      // Can be placed at its wanted position with wanted start/end time
+      newTimes = {
+        startTime: startTime,
+        endTime: endTime
+      };
+    }
+    else if (endLimit - startLimit >= timeWidth) {
+      // Can be placed at its wanted position but not with its wanted start/end time
+      if (startTime > startLimit) {
+        newTimes = {
+          startTime: endLimit - timeWidth,
+          endTime: endLimit
+        };
+      }
+      else {
+        newTimes = {
+          startTime: startLimit,
+          endTime: startLimit + timeWidth
+        };
+      }
+    }
+
+    return newTimes;
+  };
+
+  Line.prototype.removeSourceGroup = function(source, isPermanent) {
+    var sourceGroup = this._sourcesGroup[source.id];
+
+    delete this._sourcesGroup[source.id];
+
+    if (isPermanent) {
+      if (this._sources[source.id].prevSourceId) {
+        this._sources[this._sources[source.id].prevSourceId].nextSourceId
+          = this._sources[source.id].nextSourceId;
+      }
+
+      if (this._sources[source.id].nextSourceId) {
+        this._sources[this._sources[source.id].nextSourceId].prevSourceId
+          = this._sources[source.id].prevSourceId;
+      }
+
+      if (this._firstSourceId === source.id) {
+        this._firstSourceId = this._sources[source.id].nextSourceId;
+      }
+
+      delete this._sources[source.id];
+
+      this.updateLineHeight(sourceGroup, 'remove');
+    }
+
+    return sourceGroup;
+  };
+
+  Line.prototype.getKonvaGroup = function() {
+    return this._group;
+  };
+
+  Line.prototype.getY = function() {
+    return this._group.y();
+  };
+
+  Line.prototype.getInitialY = function() {
+    return this._y;
+  };
+
+  Line.prototype.y = function(value, changeInitialY) {
+    this._group.y(value);
+    if (changeInitialY) {
+      this._y = value;
+    }
+  };
+
+  Line.prototype.moveOnY = function(dy) {
+    this._y += dy;
+    this._group.y(this._group.y() + dy);
+  };
+
+  Line.prototype.manageSourceOrder = function(source, newStartX, newEndX) {
+    var cursorX = this._view.getPointerPosition().x;
+    var tmpXs;
+
+    var newXs = {
+      startX: newStartX,
+      endX: newEndX
+    };
+
+    var sourceWidth = this._view.timeToPixels(source.endTime - source.startTime);
+
+    if (newStartX !== null && newEndX !== null) {
+      if (this._sources[source.id].prevSourceId) {
+        // there is another source to the left
+        var previousStartX = this._view.timeToPixels(
+          this._sources[this._sources[source.id].prevSourceId].source.startTime
+        );
+
+        if (cursorX + this._view.getFrameOffset() < previousStartX) {
+          // we want to change order
+          tmpXs = this._changeSourcePosition(
+            source,
+            sourceWidth,
+            cursorX + this._view.getFrameOffset()
+          );
+
+          if (tmpXs) {
+            newXs.startX = tmpXs.startTime;
+            newXs.endX = tmpXs.endTime;
+          }
+        }
+      }
+
+      if (this._sources[source.id].nextSourceId) {
+        // there is another source to the right
+        var nextEndX = this._view.timeToPixels(
+          this._sources[this._sources[source.id].nextSourceId].source.endTime
+        );
+
+        if (cursorX + this._view.getFrameOffset() > nextEndX) {
+          // we want to change order
+          tmpXs = this._changeSourcePosition(
+            source,
+            sourceWidth,
+            cursorX + this._view.getFrameOffset()
+          );
+
+          if (tmpXs) {
+            newXs.startX = tmpXs.startTime;
+            newXs.endX = tmpXs.endTime;
+          }
+        }
+      }
+    }
+
+    return newXs;
+  };
+
+  Line.prototype._changeSourcePosition = function(source, sourceWidth, x) {
+    if (this._firstSourceId) {
+      var currentRange = {
+        start: null,
+        end: null
+      };
+      var startLimit = null;
+      var endLimit = null;
+
+      do {
+        if (!currentRange.end) {
+          currentRange.end = this._sources[this._firstSourceId];
+        }
+        else {
+          currentRange.start = currentRange.end;
+          currentRange.end = this._sources[currentRange.start.nextSourceId];
+        }
+
+        if (currentRange.start) {
+          startLimit = this._view.timeToPixels(
+            currentRange.start.source.endTime
+          );
+        }
+        else {
+          startLimit = 0;
+        }
+
+        if (currentRange.end) {
+          endLimit = this._view.timeToPixels(
+            currentRange.end.source.startTime
+          );
+        }
+        else {
+          endLimit = null;
+        }
+
+        if (x > startLimit && (endLimit === null || x < endLimit)) {
+          var newTimes = this._canBePlacedBetween(
+            x,
+            x + sourceWidth,
+            startLimit,
+            endLimit
+          );
+
+          if (newTimes) {
+            source.updateTimes(
+              this._view.pixelsToTime(newTimes.startTime),
+              this._view.pixelsToTime(newTimes.endTime)
+            );
+            var prevSourceId = currentRange.start
+                                ? currentRange.start.source.id
+                                : null;
+
+            this._moveSource(this._sources[source.id].source, prevSourceId);
+            return newTimes;
+          }
+        }
+      } while (currentRange.end);
+    }
+
+    return null;
+  };
+
+  Line.prototype._moveSource = function(source, prevSourceId) {
+    // Remove source from the list
+    var sourceObj = this._sources[source.id];
+    var prevSource = this._sources[sourceObj.prevSourceId];
+    var nextSource = this._sources[sourceObj.nextSourceId];
+
+    if (prevSource) {
+      this._sources[sourceObj.prevSourceId].nextSourceId = sourceObj.nextSourceId;
+    }
+    else {
+      this._firstSourceId = sourceObj.nextSourceId;
+    }
+
+    if (nextSource) {
+      this._sources[sourceObj.nextSourceId].prevSourceId = sourceObj.prevSourceId;
+    }
+
+    delete this._sources[source.id];
+
+    // Add source back to the list
+    sourceObj.prevSourceId = prevSourceId;
+
+    if (prevSourceId) {
+      sourceObj.nextSourceId = this._sources[prevSourceId].nextSourceId;
+      this._sources[prevSourceId].nextSourceId = source.id;
+    }
+    else {
+      sourceObj.nextSourceId = this._firstSourceId;
+      this._firstSourceId = source.id;
+    }
+
+    if (sourceObj.nextSourceId) {
+      this._sources[sourceObj.nextSourceId].prevSourceId = source.id;
+    }
+
+    this._sources[source.id] = sourceObj;
+  };
+
+  Line.prototype.manageCollision = function(source, newStartX, newEndX) {
+    var newStartTime = null;
+    var newEndTime = null;
+    var startLimited = false;
+    var endLimited = false;
+    var timeWidth = this._view.pixelsToTime(newEndX - newStartX);
+
+    var newXs = {
+      startX: newStartX,
+      endX: newEndX,
+      updateWidth: false,
+      updateTimelineLength: false
+    };
+
+    if (newStartX !== null) {
+      // startMarker changed
+      newStartTime = this._view.pixelsToTime(newStartX);
+
+      if (source.startTime > newStartTime) {
+        // startMarker moved to the left
+        if (this._sources[source.id].prevSourceId) {
+          // there is another source to the left
+          var previousSource = this._sources[this._sources[source.id].prevSourceId]
+                                .source;
+
+          if (newStartTime < previousSource.endTime) {
+            // there is collision
+            newStartTime = previousSource.endTime;
+            startLimited = true;
+          }
+        }
+        else {
+          if (newStartTime < 0) {
+            newStartTime = 0;
+            startLimited = true;
+          }
+        }
+      }
+    }
+
+    if (newEndX !== null) {
+      // endMarker changed
+      newEndTime = this._view.pixelsToTime(newEndX);
+
+      if (source.endTime < newEndTime) {
+        // endMarker moved to the right
+        if (this._sources[source.id].nextSourceId) {
+          // there is another source to the right
+          var nextSource = this._sources[this._sources[source.id].nextSourceId]
+                            .source;
+
+          if (newEndTime > nextSource.startTime) {
+            // there is collision
+            newEndTime = nextSource.startTime;
+            endLimited = true;
+          }
+        }
+      }
+    }
+
+    // Update the other edge if dragging and collision
+    if (newStartTime !== null && newEndTime !== null) {
+      if (startLimited) {
+        newEndTime = newStartTime + timeWidth;
+      }
+
+      if (endLimited) {
+        newStartTime = newEndTime - timeWidth;
+      }
+    }
+
+    // Check for minimal size of source
+    if (newStartTime !== null && newEndTime === null) {
+      if (source.endTime - newStartTime < source.minSize) {
+        newStartTime = source.endTime - source.minSize;
+      }
+    }
+    else if (newEndTime !== null && newStartTime === null) {
+      if (newEndTime - source.startTime < source.minSize) {
+        newEndTime = source.startTime + source.minSize;
+      }
+    }
+    else {
+      if (newEndTime - newStartTime < source.minSize) {
+        if (source.endTime !== newEndTime) {
+          newEndTime = newStartTime + source.minSize;
+        }
+        if (source.startTime !== newStartTime) {
+          newStartTime = newEndTime - source.minSize;
+        }
+      }
+    }
+
+    if (newStartTime !== null) {
+      newXs.startX = this._view.timeToPixels(newStartTime);
+    }
+
+    if (newEndTime !== null) {
+      newXs.endX = this._view.timeToPixels(newEndTime);
+
+      if (this._sources[source.id].nextSourceId === null) {
+        newXs.updateTimelineLength = true;
+      }
+    }
+
+    if ((newXs.startX !== null && newXs.endX === null)
+      || (newXs.startX === null && newXs.endX !== null)) {
+      newXs.updateWidth = true;
+    }
+
+    return newXs;
+  };
+
+  Line.prototype.rescale = function() {
+    for (var sourceId in this._sourcesGroup) {
+      if (Utils.objectHasProperty(this._sourcesGroup, sourceId)) {
+        this._sourcesGroup[sourceId].rescale();
+      }
+    }
+  };
+
+  Line.prototype.updatePosition = function(pos) {
+    for (var sourceId in this._sources) {
+      if (Utils.objectHasProperty(this._sources, sourceId)) {
+        this._sources[sourceId].source.position = pos;
+      }
+    }
+
+    this._position = pos;
+  };
+
+  Line.prototype.destroy = function() {
+    this._firstSourceId = null;
+    this._sources = {};
+    this._sourcesGroup = {};
+    this._group.destroy();
+  };
+
+  Line.prototype.allowInteractions = function(bool) {
+    this._group.listening(bool);
+  };
+
+  return Line;
+});