@checksub_team/peaks_timeline 1.4.34 → 1.4.37

package/src/segment-shape.js

@@ -1,354 +1,354 @@
-/**
- * @file
- *
- * Defines the {@link SegmentShape} class.
- *
- * @module segment-shape
- */
-
-define([
-  'konva',
-  './segment-marker'
-], function(
-  Konva,
-  SegmentMarker) {
-  'use strict';
-
-  var SEGMENT_WIDTH = 10;
-
-  /**
-   * Creates a waveform segment shape with optional start and end markers.
-   *
-   * @class
-   * @alias SegmentShape
-   *
-   * @param {Segment} segment
-   * @param {Peaks} peaks
-   * @param {SegmentsGroup} group
-   * @param {WaveformOverview|WaveformZoomView} view
-   */
-
-  function SegmentShape(segment, peaks, group, view) {
-    this._segment       = segment;
-    this._peaks         = peaks;
-    this._group         = group;
-    this._view          = view;
-    // this._waveformShape = null;
-    this._segmentsGroup = null;
-    this._label         = null;
-    this._startMarker   = null;
-    this._endMarker     = null;
-    this._rectangle     = null;
-    this._isSelected    = false;
-
-    this._segmentHeight = this._peaks.options.segmentHeight;
-
-    this._rectangle = new Konva.Rect({
-      x: this._view.timeToPixels(this._segment.startTime),
-      y: 0,
-      width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
-      height: this._segmentHeight,
-      cornerRadius: 10,
-      fill: segment.color + Math.round(segment.opacity * 255).toString(16),
-      stroke: segment.textColor + 'FF',
-      strokeWidth: 1,
-      draggable: this._segment.editable
-    });
-
-    var self = this;
-
-    this._rectangle.dragBoundFunc(function() {
-      var diff = self._view.getPointerPosition().x - self._mouseDownX;
-
-      self._group.updateSegment(
-        self._segment,
-        self._initialStartPixel + diff, self._initialEndPixel + diff
-      );
-
-      self._startMarker.timeUpdated(self._segment.startTime);
-      self._endMarker.timeUpdated(self._segment.endTime);
-
-      return {
-        x: this.absolutePosition().x,
-        y: this.absolutePosition().y
-      };
-    });
-
-    // Set up event handlers to show/hide the segment label text when the user
-    // hovers the mouse over the segment.
-    this._rectangle.on('mouseenter', this._onMouseEnter.bind(this));
-    this._rectangle.on('mouseleave', this._onMouseLeave.bind(this));
-    this._rectangle.on('click', this._onClick.bind(this));
-
-    this._rectangle.on('dragstart', this._onSegmentDragStart.bind(this));
-    this._rectangle.on('dragend', this._onSegmentDragEnd.bind(this));
-
-    // Event handlers for markers
-    this._onSegmentHandleDrag      = this._onSegmentHandleDrag.bind(this);
-    this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
-    this._onSegmentHandleDragEnd   = this._onSegmentHandleDragEnd.bind(this);
-
-    this._label = this._peaks.options.createSegmentLabel({
-      x:        this._view.timeToPixels(segment.startTime),
-      y:        this._segmentY,
-      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
-      height:   this._segmentHeight,
-      segment:  segment,
-      view:     this._view.getName(),
-      group:    this._group,
-      fontSize: 12
-    });
-
-    this._createMarkers();
-  }
-
-  SegmentShape.prototype.update = function() {
-    var startPixel  = this._view.timeToPixels(this._segment.startTime);
-    var endPixel    = this._view.timeToPixels(this._segment.endTime);
-    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
-
-    this._rectangle.x(startPixel - frameOffset);
-
-    this._rectangle.width(endPixel - startPixel);
-
-    var newWidth = Math.floor(this._rectangle.width() / 2);
-
-    if (this._rectangle.width()
-      < this._startMarker.getHandleWidth() + this._endMarker.getHandleWidth()) {
-      this._startMarker.setHandleWidth(newWidth);
-      this._endMarker.setHandleWidth(newWidth);
-    }
-    else if (this._startMarker.getHandleWidth() < SEGMENT_WIDTH
-      && newWidth > this._startMarker.getHandleWidth()) {
-      this._startMarker.setHandleWidth(Math.min(newWidth, SEGMENT_WIDTH));
-      this._endMarker.setHandleWidth(Math.min(newWidth, SEGMENT_WIDTH));
-    }
-
-    if (this._startMarker) {
-      this._startMarker.setX(startPixel - frameOffset);
-      this._startMarker.timeUpdated(this._segment.startTime);
-    }
-
-    if (this._endMarker) {
-      this._endMarker.setX(endPixel - this._endMarker.getHandleWidth() - frameOffset);
-      this._endMarker.timeUpdated(this._segment.endTime);
-    }
-
-    if (this._label) {
-      this._label.setX(startPixel - frameOffset);
-      this._label.setWidth(endPixel - startPixel);
-    }
-  };
-
-  SegmentShape.prototype.getSegmentHeight = function() {
-    return this._segmentHeight;
-  };
-
-  SegmentShape.prototype.getText = function() {
-    return this._label;
-  };
-
-  SegmentShape.prototype.getSegment = function() {
-    return this._segment;
-  };
-
-  SegmentShape.prototype.getSegmentsGroup = function() {
-    return this._segmentsGroup;
-  };
-
-  SegmentShape.prototype.getStartMarker = function() {
-    return this._startMarker;
-  };
-
-  SegmentShape.prototype.getEndMarker = function() {
-    return this._endMarker;
-  };
-
-  SegmentShape.prototype.addToGroup = function(group, segmentsGroup) {
-    if (segmentsGroup) {
-      this._segmentsGroup = segmentsGroup;
-    }
-
-    group.add(this._rectangle);
-
-    if (this._label) {
-      group.add(this._label);
-    }
-
-    if (this._startMarker) {
-      this._startMarker.addToGroup(group);
-    }
-
-    if (this._endMarker) {
-      this._endMarker.addToGroup(group);
-    }
-  };
-
-  SegmentShape.prototype._createMarkers = function() {
-    var editable = this._group.isEditingEnabled() && this._segment.editable;
-
-    var startMarker = this._peaks.options.createSegmentMarker({
-      peaks:              this._peaks,
-      segment:            this._segment,
-      draggable:          editable,
-      startMarker:        true,
-      group:              this._group,
-      view:               this._view,
-      showSegmentMarkers: this._peaks.options.showSegmentMarkers,
-      segmentHeight:      this._segmentHeight,
-      segmentWidth:       SEGMENT_WIDTH,
-      y:                  this._segmentY
-    });
-
-    if (startMarker) {
-      this._startMarker = new SegmentMarker({
-        segment:      this._segment,
-        segmentShape: this,
-        draggable:    editable,
-        startMarker:  true,
-        marker:       startMarker,
-        onDrag:       this._onSegmentHandleDrag,
-        onDragStart:  this._onSegmentHandleDragStart,
-        onDragEnd:    this._onSegmentHandleDragEnd,
-        view:         this._view
-      });
-    }
-
-    var endMarker = this._peaks.options.createSegmentMarker({
-      peaks:              this._peaks,
-      segment:            this._segment,
-      draggable:          editable,
-      startMarker:        false,
-      group:              this._group,
-      view:               this._view,
-      showSegmentMarkers: this._peaks.options.showSegmentMarkers,
-      segmentHeight:      this._segmentHeight,
-      segmentWidth:       SEGMENT_WIDTH,
-      y:                  this._segmentY
-    });
-
-    if (endMarker) {
-      this._endMarker = new SegmentMarker({
-        segment:      this._segment,
-        segmentShape: this,
-        draggable:    editable,
-        startMarker:  false,
-        marker:       endMarker,
-        onDrag:       this._onSegmentHandleDrag,
-        onDragStart:  this._onSegmentHandleDragStart,
-        onDragEnd:    this._onSegmentHandleDragEnd,
-        view:         this._view
-      });
-    }
-  };
-
-  SegmentShape.prototype._onMouseEnter = function() {
-    this._view.setCursor('pointer');
-
-    this._view.setHoveredElement(this);
-
-    this._rectangle.fill(this._segment.hoverColor + Math.round(
-      this._segment.opacity * 255
-    ).toString(16));
-
-    this._view.drawSourcesLayer();
-
-    this._peaks.emit('segments.mouseenter', this._segment);
-  };
-
-  SegmentShape.prototype._onMouseLeave = function() {
-    this._view.setCursor('default');
-
-    this._view.setHoveredElement(null);
-
-    this._rectangle.fill(this._segment.color + Math.round(
-      this._segment.opacity * 255
-    ).toString(16));
-
-    this._view.drawSourcesLayer();
-
-    this._peaks.emit('segments.mouseleave', this._segment);
-  };
-
-  SegmentShape.prototype._onClick = function() {
-    this._peaks.emit('segments.click', this._segment);
-  };
-
-  SegmentShape.prototype._onSegmentDragStart = function() {
-    this._view.setCursor('grab');
-
-    this._mouseDownX = this._view.getPointerPosition().x;
-    this._initialStartTime = this._segment.startTime;
-    this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
-    this._initialEndTime = this._segment.endTime;
-    this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
-
-    this._peaks.emit('segments.dragstart', this._segment);
-  };
-
-  SegmentShape.prototype._onSegmentDragEnd = function() {
-    this._view.setCursor('pointer');
-
-    this._peaks.emit('segments.dragend', this._segment);
-  };
-
-  /**
-   * @param {SegmentMarker} segmentMarker
-   */
-
-  SegmentShape.prototype._onSegmentHandleDrag = function() {
-    this._peaks.emit('segments.dragged');
-  };
-
-  /**
-   * @param {SegmentMarker} segmentMarker
-   */
-
-  SegmentShape.prototype._onSegmentHandleDragStart = function(segmentMarker) {
-    var startMarker = segmentMarker.isStartMarker();
-
-    this._peaks.emit('segments.dragstart', this._segment, startMarker);
-  };
-
-  /**
-   * @param {SegmentMarker} segmentMarker
-   */
-
-  SegmentShape.prototype._onSegmentHandleDragEnd = function(segmentMarker) {
-    var startMarker = segmentMarker.isStartMarker();
-
-    this._peaks.emit('segments.dragend', this._segment, startMarker);
-  };
-
-  SegmentShape.prototype.setSelected = function(isSelected) {
-    this._isSelected = isSelected;
-  };
-
-  SegmentShape.prototype.fitToView = function() {
-    if (this._startMarker) {
-      this._startMarker.fitToView();
-    }
-
-    if (this._endMarker) {
-      this._endMarker.fitToView();
-    }
-  };
-
-  SegmentShape.prototype.destroy = function() {
-    this._rectangle.destroy();
-
-    if (this._label) {
-      this._label.destroy();
-    }
-
-    if (this._startMarker) {
-      this._startMarker.destroy();
-    }
-
-    if (this._endMarker) {
-      this._endMarker.destroy();
-    }
-  };
-
-  return SegmentShape;
-});
+/**
+ * @file
+ *
+ * Defines the {@link SegmentShape} class.
+ *
+ * @module segment-shape
+ */
+
+define([
+  'konva',
+  './segment-marker'
+], function(
+  Konva,
+  SegmentMarker) {
+  'use strict';
+
+  var SEGMENT_WIDTH = 10;
+
+  /**
+   * Creates a waveform segment shape with optional start and end markers.
+   *
+   * @class
+   * @alias SegmentShape
+   *
+   * @param {Segment} segment
+   * @param {Peaks} peaks
+   * @param {SegmentsGroup} group
+   * @param {WaveformOverview|WaveformZoomView} view
+   */
+
+  function SegmentShape(segment, peaks, group, view) {
+    this._segment       = segment;
+    this._peaks         = peaks;
+    this._group         = group;
+    this._view          = view;
+    // this._waveformShape = null;
+    this._segmentsGroup = null;
+    this._label         = null;
+    this._startMarker   = null;
+    this._endMarker     = null;
+    this._rectangle     = null;
+    this._isSelected    = false;
+
+    this._segmentHeight = this._peaks.options.segmentHeight;
+
+    this._rectangle = new Konva.Rect({
+      x: this._view.timeToPixels(this._segment.startTime),
+      y: 0,
+      width: this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+      height: this._segmentHeight,
+      cornerRadius: 10,
+      fill: segment.color + Math.round(segment.opacity * 255).toString(16),
+      stroke: segment.textColor + 'FF',
+      strokeWidth: 1,
+      draggable: this._segment.editable
+    });
+
+    var self = this;
+
+    this._rectangle.dragBoundFunc(function() {
+      var diff = self._view.getPointerPosition().x - self._mouseDownX;
+
+      self._group.updateSegment(
+        self._segment,
+        self._initialStartPixel + diff, self._initialEndPixel + diff
+      );
+
+      self._startMarker.timeUpdated(self._segment.startTime);
+      self._endMarker.timeUpdated(self._segment.endTime);
+
+      return {
+        x: this.absolutePosition().x,
+        y: this.absolutePosition().y
+      };
+    });
+
+    // Set up event handlers to show/hide the segment label text when the user
+    // hovers the mouse over the segment.
+    this._rectangle.on('mouseenter', this._onMouseEnter.bind(this));
+    this._rectangle.on('mouseleave', this._onMouseLeave.bind(this));
+    this._rectangle.on('click', this._onClick.bind(this));
+
+    this._rectangle.on('dragstart', this._onSegmentDragStart.bind(this));
+    this._rectangle.on('dragend', this._onSegmentDragEnd.bind(this));
+
+    // Event handlers for markers
+    this._onSegmentHandleDrag      = this._onSegmentHandleDrag.bind(this);
+    this._onSegmentHandleDragStart = this._onSegmentHandleDragStart.bind(this);
+    this._onSegmentHandleDragEnd   = this._onSegmentHandleDragEnd.bind(this);
+
+    this._label = this._peaks.options.createSegmentLabel({
+      x:        this._view.timeToPixels(segment.startTime),
+      y:        this._segmentY,
+      width:    this._view.timeToPixels(this._segment.endTime - this._segment.startTime),
+      height:   this._segmentHeight,
+      segment:  segment,
+      view:     this._view.getName(),
+      group:    this._group,
+      fontSize: 12
+    });
+
+    this._createMarkers();
+  }
+
+  SegmentShape.prototype.update = function() {
+    var startPixel  = this._view.timeToPixels(this._segment.startTime);
+    var endPixel    = this._view.timeToPixels(this._segment.endTime);
+    var frameOffset = this._view.timeToPixels(this._view.getTimeOffset());
+
+    this._rectangle.x(startPixel - frameOffset);
+
+    this._rectangle.width(endPixel - startPixel);
+
+    var newWidth = Math.floor(this._rectangle.width() / 2);
+
+    if (this._rectangle.width()
+      < this._startMarker.getHandleWidth() + this._endMarker.getHandleWidth()) {
+      this._startMarker.setHandleWidth(newWidth);
+      this._endMarker.setHandleWidth(newWidth);
+    }
+    else if (this._startMarker.getHandleWidth() < SEGMENT_WIDTH
+      && newWidth > this._startMarker.getHandleWidth()) {
+      this._startMarker.setHandleWidth(Math.min(newWidth, SEGMENT_WIDTH));
+      this._endMarker.setHandleWidth(Math.min(newWidth, SEGMENT_WIDTH));
+    }
+
+    if (this._startMarker) {
+      this._startMarker.setX(startPixel - frameOffset);
+      this._startMarker.timeUpdated(this._segment.startTime);
+    }
+
+    if (this._endMarker) {
+      this._endMarker.setX(endPixel - this._endMarker.getHandleWidth() - frameOffset);
+      this._endMarker.timeUpdated(this._segment.endTime);
+    }
+
+    if (this._label) {
+      this._label.setX(startPixel - frameOffset);
+      this._label.setWidth(endPixel - startPixel);
+    }
+  };
+
+  SegmentShape.prototype.getSegmentHeight = function() {
+    return this._segmentHeight;
+  };
+
+  SegmentShape.prototype.getText = function() {
+    return this._label;
+  };
+
+  SegmentShape.prototype.getSegment = function() {
+    return this._segment;
+  };
+
+  SegmentShape.prototype.getSegmentsGroup = function() {
+    return this._segmentsGroup;
+  };
+
+  SegmentShape.prototype.getStartMarker = function() {
+    return this._startMarker;
+  };
+
+  SegmentShape.prototype.getEndMarker = function() {
+    return this._endMarker;
+  };
+
+  SegmentShape.prototype.addToGroup = function(group, segmentsGroup) {
+    if (segmentsGroup) {
+      this._segmentsGroup = segmentsGroup;
+    }
+
+    group.add(this._rectangle);
+
+    if (this._label) {
+      group.add(this._label);
+    }
+
+    if (this._startMarker) {
+      this._startMarker.addToGroup(group);
+    }
+
+    if (this._endMarker) {
+      this._endMarker.addToGroup(group);
+    }
+  };
+
+  SegmentShape.prototype._createMarkers = function() {
+    var editable = this._group.isEditingEnabled() && this._segment.editable;
+
+    var startMarker = this._peaks.options.createSegmentMarker({
+      peaks:              this._peaks,
+      segment:            this._segment,
+      draggable:          editable,
+      startMarker:        true,
+      group:              this._group,
+      view:               this._view,
+      showSegmentMarkers: this._peaks.options.showSegmentMarkers,
+      segmentHeight:      this._segmentHeight,
+      segmentWidth:       SEGMENT_WIDTH,
+      y:                  this._segmentY
+    });
+
+    if (startMarker) {
+      this._startMarker = new SegmentMarker({
+        segment:      this._segment,
+        segmentShape: this,
+        draggable:    editable,
+        startMarker:  true,
+        marker:       startMarker,
+        onDrag:       this._onSegmentHandleDrag,
+        onDragStart:  this._onSegmentHandleDragStart,
+        onDragEnd:    this._onSegmentHandleDragEnd,
+        view:         this._view
+      });
+    }
+
+    var endMarker = this._peaks.options.createSegmentMarker({
+      peaks:              this._peaks,
+      segment:            this._segment,
+      draggable:          editable,
+      startMarker:        false,
+      group:              this._group,
+      view:               this._view,
+      showSegmentMarkers: this._peaks.options.showSegmentMarkers,
+      segmentHeight:      this._segmentHeight,
+      segmentWidth:       SEGMENT_WIDTH,
+      y:                  this._segmentY
+    });
+
+    if (endMarker) {
+      this._endMarker = new SegmentMarker({
+        segment:      this._segment,
+        segmentShape: this,
+        draggable:    editable,
+        startMarker:  false,
+        marker:       endMarker,
+        onDrag:       this._onSegmentHandleDrag,
+        onDragStart:  this._onSegmentHandleDragStart,
+        onDragEnd:    this._onSegmentHandleDragEnd,
+        view:         this._view
+      });
+    }
+  };
+
+  SegmentShape.prototype._onMouseEnter = function() {
+    this._view.setCursor('pointer');
+
+    this._view.setHoveredElement(this);
+
+    this._rectangle.fill(this._segment.hoverColor + Math.round(
+      this._segment.opacity * 255
+    ).toString(16));
+
+    this._view.drawSourcesLayer();
+
+    this._peaks.emit('segments.mouseenter', this._segment);
+  };
+
+  SegmentShape.prototype._onMouseLeave = function() {
+    this._view.setCursor('default');
+
+    this._view.setHoveredElement(null);
+
+    this._rectangle.fill(this._segment.color + Math.round(
+      this._segment.opacity * 255
+    ).toString(16));
+
+    this._view.drawSourcesLayer();
+
+    this._peaks.emit('segments.mouseleave', this._segment);
+  };
+
+  SegmentShape.prototype._onClick = function() {
+    this._peaks.emit('segments.click', this._segment);
+  };
+
+  SegmentShape.prototype._onSegmentDragStart = function() {
+    this._view.setCursor('grab');
+
+    this._mouseDownX = this._view.getPointerPosition().x;
+    this._initialStartTime = this._segment.startTime;
+    this._initialStartPixel = this._view.timeToPixels(this._initialStartTime);
+    this._initialEndTime = this._segment.endTime;
+    this._initialEndPixel = this._view.timeToPixels(this._initialEndTime);
+
+    this._peaks.emit('segments.dragstart', this._segment);
+  };
+
+  SegmentShape.prototype._onSegmentDragEnd = function() {
+    this._view.setCursor('pointer');
+
+    this._peaks.emit('segments.dragend', this._segment);
+  };
+
+  /**
+   * @param {SegmentMarker} segmentMarker
+   */
+
+  SegmentShape.prototype._onSegmentHandleDrag = function() {
+    this._peaks.emit('segments.dragged');
+  };
+
+  /**
+   * @param {SegmentMarker} segmentMarker
+   */
+
+  SegmentShape.prototype._onSegmentHandleDragStart = function(segmentMarker) {
+    var startMarker = segmentMarker.isStartMarker();
+
+    this._peaks.emit('segments.dragstart', this._segment, startMarker);
+  };
+
+  /**
+   * @param {SegmentMarker} segmentMarker
+   */
+
+  SegmentShape.prototype._onSegmentHandleDragEnd = function(segmentMarker) {
+    var startMarker = segmentMarker.isStartMarker();
+
+    this._peaks.emit('segments.dragend', this._segment, startMarker);
+  };
+
+  SegmentShape.prototype.setSelected = function(isSelected) {
+    this._isSelected = isSelected;
+  };
+
+  SegmentShape.prototype.fitToView = function() {
+    if (this._startMarker) {
+      this._startMarker.fitToView();
+    }
+
+    if (this._endMarker) {
+      this._endMarker.fitToView();
+    }
+  };
+
+  SegmentShape.prototype.destroy = function() {
+    this._rectangle.destroy();
+
+    if (this._label) {
+      this._label.destroy();
+    }
+
+    if (this._startMarker) {
+      this._startMarker.destroy();
+    }
+
+    if (this._endMarker) {
+      this._endMarker.destroy();
+    }
+  };
+
+  return SegmentShape;
+});