@checksub_team/peaks_timeline 1.4.17

package/src/marker-factories.js

@@ -0,0 +1,91 @@
+/**
+ * @file
+ *
+ * Factory functions for creating point and segment marker handles.
+ *
+ * @module marker-factories
+ */
+
+define([
+  './default-segment-marker',
+  './utils',
+  'konva'
+  ], function(
+    DefaultSegmentMarker,
+    Utils,
+    Konva) {
+  'use strict';
+
+  /**
+   * Parameters for the {@link createSegmentMarker} function.
+   *
+   * @typedef {Object} CreateSegmentMarkerOptions
+   * @global
+   * @property {Object} peaks
+   * @property {Segment} segment
+   * @property {Boolean} draggable If true, marker is draggable.
+   * @property {Boolean} startMarker
+   * @property {String} color
+   * @property {Group} group
+   * @property {String} view
+   */
+
+  /**
+   * Creates a left or right side segment marker handle.
+   *
+   * @param {CreateSegmentMarkerOptions} options
+   * @returns {Marker}
+   */
+
+  function createSegmentMarker(options) {
+    if (options.view.getName() === 'zoomview') {
+      return new DefaultSegmentMarker(options);
+    }
+
+    return null;
+  }
+
+  /**
+   * Parameters for the {@link createSegmentLabel} function.
+   *
+   * @typedef {Object} SegmentLabelOptions
+   * @global
+   * @property {Segment} segment The {@link Segment} object associated with this
+   *   label.
+   * @property {String} view The name of the view that the label is being
+   *   created in, either <code>zoomview</code> or <code>overview</code>.
+   * @property {SegmentsLayer} layer
+   */
+
+  /**
+   * Creates a Konva object that renders information about a segment, such as
+   * its label text.
+   *
+   * @param {SegmentLabelOptions} options
+   * @returns {Konva.Text}
+   */
+
+  function createSegmentLabel(options) {
+    return new Konva.Text({
+      x:             options.x,
+      y:             options.y,
+      width:         options.width,
+      height:        options.height,
+      text:          Utils.removeLineBreaks(options.segment.labelText),
+      textAlign:     'left',
+      verticalAlign: 'middle',
+      wrap:          'none',
+      ellipsis:      true,
+      padding:       5,
+      fontSize:      options.fontSize,
+      fontFamily:    'Open Sans',
+      fill:          options.segment.textColor,
+      listening:     false
+    });
+  }
+
+  return {
+    createSegmentMarker: createSegmentMarker,
+    createSegmentLabel: createSegmentLabel
+  };
+});

package/src/mode-layer.js

@@ -0,0 +1,361 @@
+/**
+ * @file
+ *
+ * Defines the {@link ModeLayer} class.
+ *
+ * @module mode-layer
+ */
+
+define([
+  './utils',
+  './source-group',
+  'konva'
+  ], function(Utils, SourceGroup, Konva) {
+  'use strict';
+
+  var TIME_X_OFFSET = 20;
+  var TIME_Y_OFFSET = 10;
+
+  /**
+   * Creates a Konva.Layer that displays additionnal information for alternative modes.
+   *
+   * @class
+   * @alias ModeLayer
+   *
+   * @param {Peaks} peaks
+   * @param {WaveformOverview|WaveformZoomView} view
+   * @param {String} initialMode
+   */
+
+  function ModeLayer(peaks, view, stage, initialMode) {
+    this._peaks = peaks;
+    this._view = view;
+    this._stage = stage;
+
+    this._layer = new Konva.Layer({
+      listening: this._mode !== 'default'
+    });
+
+    this._prepareDefaultMode();
+
+    this._onMouseClickInDefaultMode = this._onMouseClickInDefaultMode.bind(this);
+    this._onKeyboardDelete = this._onKeyboardDelete.bind(this);
+
+    this._prepareCutMode();
+
+    this._onMouseEnterInCutMode = this._onMouseEnterInCutMode.bind(this);
+    this._onMouseMoveInCutMode = this._onMouseMoveInCutMode.bind(this);
+    this._onMouseLeaveInCutMode = this._onMouseLeaveInCutMode.bind(this);
+    this._onMouseClickInCutMode = this._onMouseClickInCutMode.bind(this);
+
+    this.setMode(initialMode);
+  }
+
+  /**
+   * Adds the layer to the given {Konva.Stage}.
+   *
+   * @param {Konva.Stage} stage
+   */
+
+  ModeLayer.prototype.addToStage = function(stage) {
+    stage.add(this._layer);
+  };
+
+  ModeLayer.prototype._prepareDefaultMode = function() {
+    this._selectedElement = null;
+  };
+
+  ModeLayer.prototype._prepareCutMode = function() {
+    this._cutGroup = new Konva.Group({
+      width: this._view.getWidth(),
+      height: this._view.getHeight(),
+      visible: false,
+      listening: false
+    });
+
+    this._cursorTime = new Konva.Group({
+      listening: false
+    });
+
+    this._timeLabel = new Konva.Text({
+      x: 4,
+      y: 2,
+      text: '00:00:00',
+      fontSize: 11,
+      fontFamily: 'Open Sans',
+      fill: '#999b9d',
+      align: 'center',
+      listening: false
+    });
+
+    this._timeBackground = new Konva.Rect({
+      width: this._timeLabel.width() + 8,
+      height: this._timeLabel.height() + 4,
+      cornerRadius: 3,
+      fill: '#37373c',
+      strokeWidth: 0,
+      listening: false
+    });
+
+    this._cursorTime.add(this._timeBackground);
+    this._cursorTime.add(this._timeLabel);
+
+    this._cuttingLine = new Konva.Line({
+      points: [0, 0, 0, 10],
+      stroke: 'red',
+      strokeWidth: 1,
+      opacity: 0.8,
+      listening: false,
+      visible: false
+    });
+
+    this._cutGroup.add(this._cursorTime);
+    this._cutGroup.add(this._cuttingLine);
+
+    this._layer.add(this._cutGroup);
+  };
+
+  ModeLayer.prototype._onMouseClickInDefaultMode = function() {
+    var hoveredElement = this._view.getHoveredElement();
+
+    if (hoveredElement) {
+      if (this._selectedElement) {
+        this._selectedElement.setSelected(false);
+      }
+
+      this._selectedElement = hoveredElement;
+
+      this._selectedElement.setSelected(true);
+    }
+    else {
+      if (this._selectedElement) {
+        this._selectedElement.setSelected(false);
+        this._selectedElement = null;
+      }
+    }
+  };
+
+  ModeLayer.prototype._onKeyboardDelete = function() {
+    if (this._selectedElement && this._view.isFocused()) {
+      this._peaks.destroySource(this._selectedElement.getSource().id);
+    }
+  };
+
+  ModeLayer.prototype._onMouseEnterInCutMode = function() {
+    this._cutGroup.visible(true);
+
+    this._layer.draw();
+  };
+
+  ModeLayer.prototype._updateCursorTime = function(mousePosition) {
+    var hoveredElement = this._view.getHoveredElement();
+
+    if (hoveredElement && hoveredElement instanceof SourceGroup) {
+      this._timeLabel.text(
+        Utils.formatTime(
+          this._view.pixelsToTime(mousePosition.x + this._view.getFrameOffset()),
+          false
+        )
+      );
+
+      this._timeBackground.width(this._timeLabel.width() + 8);
+
+      this._cursorTime.x(mousePosition.x + TIME_X_OFFSET);
+
+      if (mousePosition.y > this._view.getHeight()
+                            - this._timeBackground.height() - TIME_Y_OFFSET) {
+        this._cursorTime.y(mousePosition.y - TIME_Y_OFFSET);
+      }
+      else {
+        this._cursorTime.y(mousePosition.y + TIME_Y_OFFSET);
+      }
+
+      this._cursorTime.visible(true);
+    }
+    else {
+      this._cursorTime.visible(false);
+    }
+  };
+
+  ModeLayer.prototype._updateCuttingLine = function(mousePosition) {
+    var hoveredElement = this._view.getHoveredElement();
+
+    if (hoveredElement && hoveredElement instanceof SourceGroup) {
+      var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
+
+      if (hoveredElement.getWidth() >= 2 * minSize) {
+        var height = hoveredElement.getCurrentHeight();
+        var y = hoveredElement.getY();
+
+        if (mousePosition.x < hoveredElement.x() + minSize) {
+          this._cuttingLine.points([
+            hoveredElement.x() + minSize,
+            y,
+            hoveredElement.x() + minSize,
+            y + height
+          ]);
+        }
+        else if (mousePosition.x
+          > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
+          this._cuttingLine.points([
+            hoveredElement.x() + hoveredElement.getWidth() - minSize,
+            y,
+            hoveredElement.x() + hoveredElement.getWidth() - minSize,
+            y + height
+          ]);
+        }
+        else {
+          this._cuttingLine.points([mousePosition.x, y, mousePosition.x, y + height]);
+        }
+        this._cuttingLine.visible(true);
+      }
+      else {
+        this._view.setCursor('not-allowed');
+      }
+    }
+    else {
+      this._cuttingLine.visible(false);
+
+      if (this._view.getCursor('not-allowed')) {
+        this._view.setCursor('default');
+      }
+    }
+  };
+
+  ModeLayer.prototype._onMouseMoveInCutMode = function() {
+    var mousePosition = this._stage.getPointerPosition();
+
+    mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
+
+    this._updateCursorTime(mousePosition);
+    this._updateCuttingLine(mousePosition);
+
+    this._layer.draw();
+  };
+
+  ModeLayer.prototype._onMouseLeaveInCutMode = function() {
+    this._cutGroup.visible(false);
+
+    this._layer.draw();
+  };
+
+  ModeLayer.prototype._onMouseClickInCutMode = function() {
+    var mousePosition = this._stage.getPointerPosition();
+
+    mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
+
+    var hoveredElement = this._view.getHoveredElement();
+
+    if (hoveredElement && hoveredElement instanceof SourceGroup) {
+      var minSize = this._view.timeToPixels(hoveredElement.getSource().minSize);
+
+      if (hoveredElement.getWidth() >= 2 * minSize) {
+        var cuttingPixel;
+
+        if (mousePosition.x < hoveredElement.x() + minSize) {
+          cuttingPixel = hoveredElement.x() + minSize;
+        }
+        else if (mousePosition.x
+          > hoveredElement.x() + hoveredElement.getWidth() - minSize) {
+          cuttingPixel = hoveredElement.x()
+                          + hoveredElement.getWidth() - minSize;
+        }
+        else {
+          cuttingPixel = mousePosition.x;
+        }
+
+        // Relative cuttingPixel
+        cuttingPixel -= hoveredElement.x();
+
+        this._cuttingLine.visible(false);
+
+        this._peaks.emit(
+          'source.cut',
+          hoveredElement.getSource(),
+          this._view.pixelsToTime(cuttingPixel)
+        );
+      }
+    }
+  };
+
+  ModeLayer.prototype.setMode = function(mode) {
+    if (this._mode === mode) {
+      return;
+    }
+    var hoveredElement = this._view.getHoveredElement();
+
+    // Clean current mode
+    switch (this._mode) {
+      case 'cut':
+        this._stage.off('mouseover', this._onMouseEnterInCutMode);
+        this._stage.off('mousemove', this._onMouseMoveInCutMode);
+        this._stage.off('mouseleave', this._onMouseLeaveInCutMode);
+        this._stage.off('click', this._onMouseClickInCutMode);
+        this._cutGroup.visible(false);
+
+        if (hoveredElement && hoveredElement instanceof SourceGroup) {
+          hoveredElement.toggleDragging(hoveredElement.getSource().draggable);
+          hoveredElement.toggleResizing(hoveredElement.getSource().resizable);
+        }
+
+        this._view.toggleMainCursor(false);
+        break;
+      case 'default':
+        this._stage.off('click', this._onMouseClickInDefaultMode);
+        this._peaks.off('keyboard.delete', this._onKeyboardDelete);
+        if (this._selectedElement) {
+          this._selectedElement.setSelected(false);
+        }
+        break;
+    }
+
+    this._selectedElement = null;
+
+    // Set new mode
+    switch (mode) {
+      case 'cut':
+        this._stage.on('mouseover', this._onMouseEnterInCutMode);
+        this._stage.on('mousemove', this._onMouseMoveInCutMode);
+        this._stage.on('mouseleave', this._onMouseLeaveInCutMode);
+        this._stage.on('click', this._onMouseClickInCutMode);
+
+        var mousePosition = this._stage.getPointerPosition();
+
+        if (mousePosition) {
+          mousePosition.x = this._view.timeToPixels(this._view.pixelsToTime(mousePosition.x));
+
+          if (mousePosition.x > 0 && mousePosition.x < this._view.getWidth()
+            && mousePosition.y > 0 && mousePosition.y < this._view.getHeight()) {
+            this._cutGroup.visible(true);
+
+            this._updateCursorTime(mousePosition);
+            this._updateCuttingLine(mousePosition);
+          }
+        }
+
+        if (hoveredElement && hoveredElement instanceof SourceGroup) {
+          hoveredElement.toggleDragging(false);
+          hoveredElement.toggleResizing(false);
+        }
+
+        this._view.toggleMainCursor(true, 'default');
+        break;
+      case 'default':
+        this._stage.on('click', this._onMouseClickInDefaultMode);
+        this._peaks.on('keyboard.delete', this._onKeyboardDelete);
+        break;
+      default:
+        return;
+    }
+
+    this._mode = mode;
+    this._layer.draw();
+    this._view.drawSourcesLayer();
+  };
+
+  ModeLayer.prototype.getCurrentMode = function() {
+    return this._mode;
+  };
+
+  return ModeLayer;
+});

package/src/mouse-drag-handler.js

@@ -0,0 +1,207 @@
+/**
+ * @file
+ *
+ * Defines the {@link MouseDragHandler} class.
+ *
+ * @module mouse-drag-handler
+ */
+
+define([
+  'konva'
+  ], function(Konva) {
+  'use strict';
+
+  function getMarkerObject(obj) {
+    while (obj.parent !== null) {
+      if (obj.parent instanceof Konva.Layer) {
+        return obj;
+      }
+
+      obj = obj.parent;
+    }
+
+    return null;
+  }
+
+  /**
+   * An object to receive callbacks on mouse drag events. Each function is
+   * called with the current mouse X position, relative to the stage's
+   * container HTML element.
+   *
+   * @typedef {Object} MouseDragHandlers
+   * @global
+   * @property {Function} onMouseDown Mouse down event handler.
+   * @property {Function} onMouseMove Mouse move event handler.
+   * @property {Function} onMouseUp Mouse up event handler.
+   */
+
+  /**
+   * Creates a handler for mouse events to allow interaction with the waveform
+   * views by clicking and dragging the mouse.
+   *
+   * @class
+   * @alias MouseDragHandler
+   *
+   * @param {Konva.Stage} stage
+   * @param {MouseDragHandlers} handlers
+   */
+
+  function MouseDragHandler(stage, handlers) {
+    this._stage     = stage;
+    this._handlers  = handlers;
+    this._dragging  = false;
+    this._mouseDown = this._mouseDown.bind(this);
+    this._mouseUp   = this._mouseUp.bind(this);
+    this._mouseMove = this._mouseMove.bind(this);
+
+    this._stage.on('mousedown', this._mouseDown);
+    this._stage.on('touchstart', this._mouseDown);
+
+    this._mouseDownClientX = null;
+  }
+
+  /**
+   * Mouse down event handler.
+   *
+   * @param {MouseEvent} event
+   */
+
+  MouseDragHandler.prototype._mouseDown = function(event) {
+    var marker = getMarkerObject(event.target);
+
+    // Avoid interfering with drag/drop of point and segment markers.
+    if (marker && marker.attrs.draggable) {
+      return;
+    }
+
+    if (event.type === 'touchstart') {
+      this._mouseDownClientX = Math.floor(event.evt.touches[0].clientX);
+    }
+    else {
+      this._mouseDownClientX = event.evt.clientX;
+    }
+
+    if (this._handlers.onMouseDown) {
+      var mouseDownPosX = this._getMousePosX(this._mouseDownClientX);
+      var mouseDownPosY = this._getMousePosY(event.evt.clientY);
+
+      this._handlers.onMouseDown(mouseDownPosX, mouseDownPosY);
+    }
+
+    // Use the window mousemove and mouseup handlers instead of the
+    // Konva.Stage ones so that we still receive events if the user moves the
+    // mouse outside the stage.
+    window.addEventListener('mousemove', this._mouseMove, false);
+    window.addEventListener('touchmove', this._mouseMove, false);
+    window.addEventListener('mouseup', this._mouseUp, false);
+    window.addEventListener('touchend', this._mouseUp, false);
+    window.addEventListener('blur', this._mouseUp, false);
+  };
+
+  /**
+   * Mouse move event handler.
+   *
+   * @param {MouseEvent} event
+   */
+
+  MouseDragHandler.prototype._mouseMove = function(event) {
+    var clientX = null;
+
+    if (event.type === 'touchmove') {
+      clientX = Math.floor(event.changedTouches[0].clientX);
+    }
+    else {
+      clientX = event.clientX;
+    }
+
+    // Don't update on vertical mouse movement.
+    if (clientX === this._mouseDownClientX) {
+      return;
+    }
+
+    this._dragging = true;
+
+    if (this._handlers.onMouseMove) {
+      var mousePosX = this._getMousePosX(clientX);
+      var mousePosY = this._getMousePosY(event.clientY);
+
+      this._handlers.onMouseMove(mousePosX, mousePosY);
+    }
+  };
+
+  /**
+   * Mouse up event handler.
+   *
+   * @param {MouseEvent} event
+   */
+
+  MouseDragHandler.prototype._mouseUp = function(event) {
+    var clientX = null;
+
+    if (event.type === 'touchend') {
+      clientX = Math.floor(event.changedTouches[0].clientX);
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    }
+    else {
+      clientX = event.clientX;
+    }
+
+    if (this._handlers.onMouseUp) {
+      var mousePosX = this._getMousePosX(clientX);
+      var mousePosY = this._getMousePosY(event.clientY);
+
+      this._handlers.onMouseUp(mousePosX, event, mousePosY);
+    }
+
+    window.removeEventListener('mousemove', this._mouseMove, false);
+    window.removeEventListener('touchmove', this._mouseMove, false);
+    window.removeEventListener('mouseup', this._mouseUp, false);
+    window.removeEventListener('touchend', this._mouseUp, false);
+    window.removeEventListener('blur', this._mouseUp, false);
+
+    this._dragging = false;
+  };
+
+  /**
+   * @returns {Number} The mouse X position, relative to the container that
+   * received the mouse down event.
+   *
+   * @private
+   * @param {Number} clientX Mouse client X position.
+   */
+
+  MouseDragHandler.prototype._getMousePosX = function(clientX) {
+    var containerPos = this._stage.getContainer().getBoundingClientRect();
+
+    return clientX - containerPos.left;
+  };
+
+  /**
+   * @returns {Number} The mouse Y position, relative to the container that
+   * received the mouse down event.
+   *
+   * @private
+   * @param {Number} clientY Mouse client X position.
+   */
+
+   MouseDragHandler.prototype._getMousePosY = function(clientY) {
+    var containerPos = this._stage.getContainer().getBoundingClientRect();
+
+    return clientY - containerPos.top;
+  };
+
+  /**
+   * Returns <code>true</code> if the mouse is being dragged, i.e., moved with
+   * the mouse button held down.
+   *
+   * @returns {Boolean}
+   */
+
+  MouseDragHandler.prototype.isDragging = function() {
+    return this._dragging;
+  };
+
+  return MouseDragHandler;
+});