@checksub_team/peaks_timeline 1.4.17

package/src/segment-marker.js

@@ -0,0 +1,155 @@
+/**
+ * @file
+ *
+ * Defines the {@link SegmentMarker} class.
+ *
+ * @module segment-marker
+ */
+
+define([
+  'konva'
+  ], function(Konva) {
+  'use strict';
+
+  /**
+   * Parameters for the {@link SegmentMarker} constructor.
+   *
+   * @typedef {Object} SegmentMarkerOptions
+   * @global
+   * @property {Segment} segment
+   * @property {SegmentShape} segmentShape
+   * @property {Boolean} draggable If true, marker is draggable.
+   * @property {Boolean} startMarker If <code>true</code>, the marker indicates
+   *   the start time of the segment. If <code>false</code>, the marker
+   *   indicates the end time of the segment.
+   * @property {Function} onDrag
+   * @property {Function} onDragStart
+   * @property {Function} onDragEnd
+   */
+
+  /**
+   * Creates a Left or Right side segment handle marker.
+   *
+   * @class
+   * @alias SegmentMarker
+   *
+   * @param {SegmentMarkerOptions} options
+   */
+
+  function SegmentMarker(options) {
+    this._segment       = options.segment;
+    this._marker        = options.marker;
+    this._segmentShape  = options.segmentShape;
+    this._draggable     = options.draggable;
+    this._startMarker   = options.startMarker;
+
+    this._onDrag      = options.onDrag;
+    this._onDragStart = options.onDragStart;
+    this._onDragEnd   = options.onDragEnd;
+
+    this._view = options.view;
+
+    this._dragBoundFunc = this._dragBoundFunc.bind(this);
+
+    this._group = new Konva.Group({
+      draggable:     this._draggable,
+      dragBoundFunc: this._dragBoundFunc
+    });
+
+    this._bindDefaultEventHandlers();
+
+    this._marker.init(this._group);
+
+    if (this._startMarker) {
+      this._group.x(this._view.timeToPixels(this._segment.startTime));
+    }
+    else {
+      this._group.x(this._view.timeToPixels(this._segment.endTime));
+    }
+  }
+
+  SegmentMarker.prototype._bindDefaultEventHandlers = function() {
+    var self = this;
+
+    if (self._draggable) {
+      self._group.on('dragmove', function() {
+        self._onDrag(self);
+      });
+
+      self._group.on('dragstart', function() {
+        self._onDragStart(self);
+      });
+
+      self._group.on('dragend', function() {
+        self._onDragEnd(self);
+      });
+    }
+  };
+
+  SegmentMarker.prototype._dragBoundFunc = function(pos) {
+    if (this._startMarker) {
+      this._segmentShape.getSegmentsGroup().updateSegment(
+        this._segment,
+        pos.x + this._view.getFrameOffset(),
+        null
+      );
+    }
+    else {
+      this._segmentShape.getSegmentsGroup().updateSegment(
+        this._segment,
+        null,
+        pos.x + this._view.getFrameOffset() + this._marker.getHandleWidth()
+      );
+    }
+
+    return {
+      x: this._group.getAbsolutePosition().x,
+      y: this._group.getAbsolutePosition().y
+    };
+  };
+
+  SegmentMarker.prototype.addToGroup = function(group) {
+    group.add(this._group);
+  };
+
+  SegmentMarker.prototype.getSegment = function() {
+    return this._segment;
+  };
+
+  SegmentMarker.prototype.getX = function() {
+    return this._group.getX();
+  };
+
+  SegmentMarker.prototype.getWidth = function() {
+    return this._group.getWidth();
+  };
+
+  SegmentMarker.prototype.getHandleWidth = function() {
+    return this._marker.getWidth();
+  };
+
+  SegmentMarker.prototype.setHandleWidth = function(value) {
+    this._marker.setWidth(value);
+  };
+
+  SegmentMarker.prototype.isStartMarker = function() {
+    return this._startMarker;
+  };
+
+  SegmentMarker.prototype.setX = function(x) {
+    this._group.setX(x);
+  };
+
+  SegmentMarker.prototype.timeUpdated = function(time) {
+    if (this._marker.timeUpdated) {
+      this._marker.timeUpdated(time);
+    }
+  };
+
+  SegmentMarker.prototype.destroy = function() {
+    this._group.destroyChildren();
+    this._group.destroy();
+  };
+
+  return SegmentMarker;
+});

package/src/segment-shape.js

@@ -0,0 +1,345 @@
+/**
+ * @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._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: true
+    });
+
+    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._rectangle.fill(this._segment.selectedColor + 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._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.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;
+});