@checksub_team/peaks_timeline 1.4.35 → 1.4.36

package/src/mode-layer.js

@@ -1,391 +1,391 @@
-/**
- * @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.selectElement = function(element, notify) {
-    this.deselectElement(notify);
-    if (element) {
-      this._selectedElement = element;
-      this._selectedElement.setSelected(true);
-      if (notify) {
-        if (element instanceof SourceGroup) {
-          this._peaks.emit('source.selected', this._selectedElement.getSource());
-        }
-        else {
-          this._peaks.emit('segment.selected', this._selectedElement.getSegment());
-        }
-      }
-    }
-  };
-
-  ModeLayer.prototype.deselectElement = function(notify) {
-    if (this._selectedElement) {
-      this._selectedElement.setSelected(false);
-      if (notify) {
-        if (this._selectedElement instanceof SourceGroup) {
-          this._peaks.emit('source.deselected', this._selectedElement.getSource());
-        }
-        else {
-          this._peaks.emit('segment.deselected', this._selectedElement.getSegment());
-        }
-      }
-      this._selectedElement = null;
-    }
-  };
-
-  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) {
-      this.selectElement(hoveredElement, true);
-    }
-    else {
-      this.deselectElement(true);
-    }
-  };
-
-  ModeLayer.prototype._onKeyboardDelete = function() {
-    if (this._selectedElement) {
-      var selectedElement = this._selectedElement;
-
-      this.deselectElement(true);
-
-      if (selectedElement instanceof SourceGroup) {
-        this._peaks.destroySource(selectedElement.getSource().id);
-      }
-      else {
-        if (selectedElement.getSegment().allowDeletion) {
-          this._peaks.destroySegment(selectedElement.getSegment().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);
-        break;
-    }
-
-    this.deselectElement(true);
-
-    // 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;
-});
+/**
+ * @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.selectElement = function(element, notify) {
+    this.deselectElement(notify);
+    if (element) {
+      this._selectedElement = element;
+      this._selectedElement.setSelected(true);
+      if (notify) {
+        if (element instanceof SourceGroup) {
+          this._peaks.emit('source.selected', this._selectedElement.getSource());
+        }
+        else {
+          this._peaks.emit('segment.selected', this._selectedElement.getSegment());
+        }
+      }
+    }
+  };
+
+  ModeLayer.prototype.deselectElement = function(notify) {
+    if (this._selectedElement) {
+      this._selectedElement.setSelected(false);
+      if (notify) {
+        if (this._selectedElement instanceof SourceGroup) {
+          this._peaks.emit('source.deselected', this._selectedElement.getSource());
+        }
+        else {
+          this._peaks.emit('segment.deselected', this._selectedElement.getSegment());
+        }
+      }
+      this._selectedElement = null;
+    }
+  };
+
+  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) {
+      this.selectElement(hoveredElement, true);
+    }
+    else {
+      this.deselectElement(true);
+    }
+  };
+
+  ModeLayer.prototype._onKeyboardDelete = function() {
+    if (this._selectedElement) {
+      var selectedElement = this._selectedElement;
+
+      this.deselectElement(true);
+
+      if (selectedElement instanceof SourceGroup) {
+        this._peaks.destroySource(selectedElement.getSource().id);
+      }
+      else {
+        if (selectedElement.getSegment().allowDeletion) {
+          this._peaks.destroySegment(selectedElement.getSegment().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);
+        break;
+    }
+
+    this.deselectElement(true);
+
+    // 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;
+});