@checksub_team/peaks_timeline 1.4.38 → 1.4.39

package/src/line-indicator.js

@@ -1,377 +1,377 @@
-/**
- * @file
- *
- * Defines the {@link LineIndicator} class.
- *
- * @module line-indicator
- */
-
-define([
-  'konva',
-  './utils'
-], function(
-  Konva,
-  Utils) {
-  'use strict';
-
-  /**
-   * Creates a Konva.Stage that displays a representation of each line.
-   *
-   * @class
-   * @alias LineIndicator
-   *
-   * @param {Peaks} peaks
-   * @param {WaveformOverview|WaveformZoomView} view
-   */
-
-  function LineIndicator(peaks, view, container) {
-    this._peaks = peaks;
-    this._view = view;
-    this._container = container;
-
-    this._width = this._peaks.options.lineIndicatorWidth;
-    this._height = this._view.getHeight();
-
-    this._indicatorRadius = this._width / 4;
-
-    this._stage = new Konva.Stage({
-      container: container,
-      width: this._width,
-      height: this._height
-    });
-    this._layer = new Konva.Layer();
-    this._stage.add(this._layer);
-
-    this._indicators = {};
-
-    this._layer.add(
-      new Konva.Line({
-        points: [this._width, 0, this._width, this._height],
-        stroke: 'gray',
-        strokeWidth: 1,
-        listening: false
-      })
-    );
-
-    this._layer.draw();
-
-    if (this._peaks.options.enableLineIndicatorContextMenu) {
-      this._createContextMenu();
-    }
-
-    /* eslint-disable max-len */
-    this.ICON_SIZE = 18;
-    this._volumeSVGPath = 'M0 6.00001V12H4L9 17V1.00001L4 6.00001H0ZM13.5 9.00001C13.5 7.23001 12.48 5.71001 11 4.97001V13.02C12.48 12.29 13.5 10.77 13.5 9.00001ZM11 0.230011V2.29001C13.89 3.15001 16 5.83001 16 9.00001C16 12.17 13.89 14.85 11 15.71V17.77C15.01 16.86 18 13.28 18 9.00001C18 4.72001 15.01 1.14001 11 0.230011Z';
-    this._noVolumeSVGPath = 'M13.5 9C13.5 7.23 12.48 5.71 11 4.97V7.18L13.45 9.63C13.48 9.43 13.5 9.22 13.5 9ZM16 9C16 9.94 15.8 10.82 15.46 11.64L16.97 13.15C17.63 11.91 18 10.5 18 9C18 4.72 15.01 1.14 11 0.23V2.29C13.89 3.15 16 5.83 16 9ZM1.27 0L0 1.27L4.73 6H0V12H4L9 17V10.27L13.25 14.52C12.58 15.04 11.83 15.45 11 15.7V17.76C12.38 17.45 13.63 16.81 14.69 15.95L16.73 18L18 16.73L9 7.73L1.27 0ZM9 1L6.91 3.09L9 5.18V1Z';
-    /* eslint-enable max-len */
-
-    this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
-
-    this._types = ['default', 'volume', 'noVolume'];
-  }
-
-  LineIndicator.prototype._onSetType = function(lineId, type) {
-    this.removeIndicator(lineId, true);
-
-    type = this._types.includes(type) ? type : 'default';
-
-    var indicator = this._createIndicator(
-      this._indicators[lineId].line,
-      type
-    );
-
-    this._layer.add(indicator);
-
-    this._indicators[lineId].indicator = indicator;
-    this._indicators[lineId].type = type;
-
-    this.draw();
-  };
-
-  LineIndicator.prototype._showMenu = function(menu) {
-    menu.style.display = 'block';
-    var containerRect = this._stage.container().getBoundingClientRect();
-
-    menu.style.top = containerRect.top
-                      + this._stage.getPointerPosition().y
-                      - menu.offsetHeight + 'px';
-    menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
-  };
-
-  LineIndicator.prototype._createIndicator = function(line, type) {
-    var indicator;
-
-    type = typeof type !== 'undefined' ? type : 'default';
-
-    if (type === 'default') {
-      indicator = new Konva.Circle({
-        x: this._width / 2,
-        y: line.getY() + (line.lineHeight() / 2),
-        radius: this._indicatorRadius,
-        fill: this._peaks.options.lineIndicatorColor,
-        strokeWidth: 0,
-        lineId: line.getId()
-      });
-    }
-    else {
-      var scaleFactor = (this._width / 2) / this.ICON_SIZE;
-
-      indicator = new Konva.Path({
-        x: this._width / 4,
-        y: line.getY() + (line.lineHeight() / 2) - (this._width / 4),
-        data: type === 'volume' ?
-          this._volumeSVGPath :
-          this._noVolumeSVGPath,
-        fill: this._peaks.options.lineIndicatorColor,
-        scale: {
-          x: scaleFactor,
-          y: scaleFactor
-        },
-        lineId: line.getId()
-      });
-    }
-
-    var self = this;
-
-    indicator.on('mouseover', function() {
-      indicator.fill(self._peaks.options.lineIndicatorSelected);
-      self.draw();
-    });
-
-    indicator.on('mouseout', function() {
-      indicator.fill(self._peaks.options.lineIndicatorColor);
-      self.draw();
-    });
-
-    indicator.on('click', function(e) {
-      self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt);
-    });
-
-    return indicator;
-  };
-
-  LineIndicator.prototype.addIndicator = function(line) {
-    if (!this._indicators[line.getId()]) {
-      var indicator = this._createIndicator(line);
-
-      this._layer.add(indicator);
-
-      this._indicators[line.getId()] = {
-        indicator: indicator,
-        line: line,
-        type: 'default'
-      };
-    }
-  };
-
-  LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
-    if (this._indicators[lineId]) {
-      if (this._indicators[lineId].indicator) {
-        this._indicators[lineId].indicator.destroy();
-      }
-      if (!keepInList) {
-        delete this._indicators[lineId];
-      }
-      else {
-        this._indicators[lineId].indicator = null;
-      }
-    }
-  };
-
-  LineIndicator.prototype.getPixelsFromCenter = function(lineId) {
-    return this._indicators[lineId].type === 'default' ?
-      0 :
-      this._width / 4;
-  };
-
-  LineIndicator.prototype.updateIndicator = function(lineId) {
-    if (this._indicators[lineId]) {
-      var y = this._indicators[lineId].line.getY()
-              + (this._indicators[lineId].line.lineHeight() / 2);
-
-      if (y + this._indicatorRadius > 0 && y - this._indicatorRadius < this._height) {
-        // The indicator is visible
-        if (!this._indicators[lineId].indicator) {
-          this._indicators[lineId].indicator = this._createIndicator(
-            this._indicators[lineId].line,
-            this._indicators[lineId].type
-          );
-          this._layer.add(this._indicators[lineId].indicator);
-        }
-        else {
-          this._indicators[lineId].indicator.y(y - this.getPixelsFromCenter(lineId));
-        }
-      }
-      else {
-        // The indicator is out of the view, we remove it
-        this.removeIndicator(lineId, true);
-      }
-    }
-  };
-
-  LineIndicator.prototype.updateIndicators = function() {
-    for (var lineId in this._indicators) {
-      if (Utils.objectHasProperty(this._indicators, lineId)) {
-        this.updateIndicator(lineId);
-      }
-    }
-  };
-
-  LineIndicator.prototype.draw = function() {
-    this._layer.draw();
-  };
-
-  LineIndicator.prototype._createContextMenu = function() {
-    var menu = document.createElement('div');
-    var addLine = document.createElement('button');
-    var addLineAbove = document.createElement('button');
-    var addLineBelow = document.createElement('button');
-    var deleteLine = document.createElement('button');
-    var currentIndicator = null;
-    var self = this;
-
-    menu.style.display         = 'none';
-    menu.style.position        = 'absolute';
-    menu.style.backgroundColor = 'white';
-    menu.style.boxShadow       = '0 0 5px grey';
-    menu.style.borderRadius    = '3px';
-    menu.style.zIndex          = 2;
-
-    addLine.style.display         = 'none';
-    addLine.style.border          = 'none';
-    addLine.style.margin          = '0';
-    addLine.style.width           = '100%';
-    addLine.style.backgroundColor = 'white';
-    addLine.style.padding         = '10px';
-
-    addLine.textContent           = 'Add first line';
-
-    addLine.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    addLine.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    addLineAbove.style.display         = 'none';
-    addLineAbove.style.border          = 'none';
-    addLineAbove.style.margin          = '0';
-    addLineAbove.style.width           = '100%';
-    addLineAbove.style.backgroundColor = 'white';
-    addLineAbove.style.padding         = '10px';
-
-    addLineAbove.textContent           = 'Add line above';
-
-    addLineAbove.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    addLineAbove.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    addLineBelow.style.display         = 'none';
-    addLineBelow.style.border          = 'none';
-    addLineBelow.style.margin          = '0';
-    addLineBelow.style.width           = '100%';
-    addLineBelow.style.backgroundColor = 'white';
-    addLineBelow.style.padding         = '10px';
-
-    addLineBelow.textContent           = 'Add line below';
-
-    addLineBelow.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    addLineBelow.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    deleteLine.style.display         = 'none';
-    deleteLine.style.border          = 'none';
-    deleteLine.style.margin          = '0';
-    deleteLine.style.width           = '100%';
-    deleteLine.style.backgroundColor = 'white';
-    deleteLine.style.padding         = '10px';
-
-    deleteLine.textContent           = 'Delete line';
-
-    deleteLine.onmouseover = function() {
-      this.style.backgroundColor = 'lightgray';
-    };
-
-    deleteLine.onmouseout = function() {
-      this.style.backgroundColor = 'white';
-    };
-
-    menu.appendChild(addLine);
-    menu.appendChild(addLineAbove);
-    menu.appendChild(addLineBelow);
-    menu.appendChild(deleteLine);
-    this._container.appendChild(menu);
-
-    addLine.addEventListener('click', function() {
-      self._peaks.emit('line.add', 0);
-      self.draw();
-    });
-
-    addLineAbove.addEventListener('click', function() {
-      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-
-      self._peaks.emit('line.add', Number(line.getPosition()));
-      self.draw();
-    });
-
-    addLineBelow.addEventListener('click', function() {
-      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-
-      self._peaks.emit('line.add', Number(line.getPosition()) + 1);
-      self.draw();
-    });
-
-    deleteLine.addEventListener('click', function() {
-      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
-
-      self._peaks.emit('line.remove', Number(line.getPosition()));
-      self.draw();
-    });
-
-    window.addEventListener('click', function() {
-      // hide menu
-      menu.style.display = 'none';
-    });
-
-    this._stage.on('contextmenu', function(e) {
-      // prevent default behavior
-      e.evt.preventDefault();
-
-      if (e.target === self._stage && Object.keys(self._indicators).length === 0) {
-        // if we are on empty place of the stage
-        // we will show the possibility to add a first line
-        addLine.style.display = 'block';
-        addLineAbove.style.display = 'none';
-        addLineBelow.style.display = 'none';
-        deleteLine.style.display = 'none';
-
-        // show menu
-        self._showMenu(menu);
-      }
-      else if (e.target !== self._stage) {
-        currentIndicator = e.target;
-
-        addLine.style.display = 'none';
-        addLineAbove.style.display = 'block';
-        addLineBelow.style.display = 'block';
-        deleteLine.style.display = 'block';
-
-        deleteLine.disabled = !self._indicators[currentIndicator.getAttr('lineId')].line.isEmpty();
-
-        // show menu
-        self._showMenu(menu);
-      }
-    });
-  };
-
-  return LineIndicator;
-});
+/**
+ * @file
+ *
+ * Defines the {@link LineIndicator} class.
+ *
+ * @module line-indicator
+ */
+
+define([
+  'konva',
+  './utils'
+], function(
+  Konva,
+  Utils) {
+  'use strict';
+
+  /**
+   * Creates a Konva.Stage that displays a representation of each line.
+   *
+   * @class
+   * @alias LineIndicator
+   *
+   * @param {Peaks} peaks
+   * @param {WaveformOverview|WaveformZoomView} view
+   */
+
+  function LineIndicator(peaks, view, container) {
+    this._peaks = peaks;
+    this._view = view;
+    this._container = container;
+
+    this._width = this._peaks.options.lineIndicatorWidth;
+    this._height = this._view.getHeight();
+
+    this._indicatorRadius = this._width / 4;
+
+    this._stage = new Konva.Stage({
+      container: container,
+      width: this._width,
+      height: this._height
+    });
+    this._layer = new Konva.Layer();
+    this._stage.add(this._layer);
+
+    this._indicators = {};
+
+    this._layer.add(
+      new Konva.Line({
+        points: [this._width, 0, this._width, this._height],
+        stroke: 'gray',
+        strokeWidth: 1,
+        listening: false
+      })
+    );
+
+    this._layer.draw();
+
+    if (this._peaks.options.enableLineIndicatorContextMenu) {
+      this._createContextMenu();
+    }
+
+    /* eslint-disable max-len */
+    this.ICON_SIZE = 18;
+    this._volumeSVGPath = 'M0 6.00001V12H4L9 17V1.00001L4 6.00001H0ZM13.5 9.00001C13.5 7.23001 12.48 5.71001 11 4.97001V13.02C12.48 12.29 13.5 10.77 13.5 9.00001ZM11 0.230011V2.29001C13.89 3.15001 16 5.83001 16 9.00001C16 12.17 13.89 14.85 11 15.71V17.77C15.01 16.86 18 13.28 18 9.00001C18 4.72001 15.01 1.14001 11 0.230011Z';
+    this._noVolumeSVGPath = 'M13.5 9C13.5 7.23 12.48 5.71 11 4.97V7.18L13.45 9.63C13.48 9.43 13.5 9.22 13.5 9ZM16 9C16 9.94 15.8 10.82 15.46 11.64L16.97 13.15C17.63 11.91 18 10.5 18 9C18 4.72 15.01 1.14 11 0.23V2.29C13.89 3.15 16 5.83 16 9ZM1.27 0L0 1.27L4.73 6H0V12H4L9 17V10.27L13.25 14.52C12.58 15.04 11.83 15.45 11 15.7V17.76C12.38 17.45 13.63 16.81 14.69 15.95L16.73 18L18 16.73L9 7.73L1.27 0ZM9 1L6.91 3.09L9 5.18V1Z';
+    /* eslint-enable max-len */
+
+    this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
+
+    this._types = ['default', 'volume', 'noVolume'];
+  }
+
+  LineIndicator.prototype._onSetType = function(lineId, type) {
+    this.removeIndicator(lineId, true);
+
+    type = this._types.includes(type) ? type : 'default';
+
+    var indicator = this._createIndicator(
+      this._indicators[lineId].line,
+      type
+    );
+
+    this._layer.add(indicator);
+
+    this._indicators[lineId].indicator = indicator;
+    this._indicators[lineId].type = type;
+
+    this.draw();
+  };
+
+  LineIndicator.prototype._showMenu = function(menu) {
+    menu.style.display = 'block';
+    var containerRect = this._stage.container().getBoundingClientRect();
+
+    menu.style.top = containerRect.top
+                      + this._stage.getPointerPosition().y
+                      - menu.offsetHeight + 'px';
+    menu.style.left = containerRect.left + this._stage.getPointerPosition().x + 6 + 'px';
+  };
+
+  LineIndicator.prototype._createIndicator = function(line, type) {
+    var indicator;
+
+    type = typeof type !== 'undefined' ? type : 'default';
+
+    if (type === 'default') {
+      indicator = new Konva.Circle({
+        x: this._width / 2,
+        y: line.getY() + (line.lineHeight() / 2),
+        radius: this._indicatorRadius,
+        fill: this._peaks.options.lineIndicatorColor,
+        strokeWidth: 0,
+        lineId: line.getId()
+      });
+    }
+    else {
+      var scaleFactor = (this._width / 2) / this.ICON_SIZE;
+
+      indicator = new Konva.Path({
+        x: this._width / 4,
+        y: line.getY() + (line.lineHeight() / 2) - (this._width / 4),
+        data: type === 'volume' ?
+          this._volumeSVGPath :
+          this._noVolumeSVGPath,
+        fill: this._peaks.options.lineIndicatorColor,
+        scale: {
+          x: scaleFactor,
+          y: scaleFactor
+        },
+        lineId: line.getId()
+      });
+    }
+
+    var self = this;
+
+    indicator.on('mouseover', function() {
+      indicator.fill(self._peaks.options.lineIndicatorSelected);
+      self.draw();
+    });
+
+    indicator.on('mouseout', function() {
+      indicator.fill(self._peaks.options.lineIndicatorColor);
+      self.draw();
+    });
+
+    indicator.on('click', function(e) {
+      self._peaks.emit('lineIndicator.click', self._indicators[line.getId()], e.evt);
+    });
+
+    return indicator;
+  };
+
+  LineIndicator.prototype.addIndicator = function(line) {
+    if (!this._indicators[line.getId()]) {
+      var indicator = this._createIndicator(line);
+
+      this._layer.add(indicator);
+
+      this._indicators[line.getId()] = {
+        indicator: indicator,
+        line: line,
+        type: 'default'
+      };
+    }
+  };
+
+  LineIndicator.prototype.removeIndicator = function(lineId, keepInList) {
+    if (this._indicators[lineId]) {
+      if (this._indicators[lineId].indicator) {
+        this._indicators[lineId].indicator.destroy();
+      }
+      if (!keepInList) {
+        delete this._indicators[lineId];
+      }
+      else {
+        this._indicators[lineId].indicator = null;
+      }
+    }
+  };
+
+  LineIndicator.prototype.getPixelsFromCenter = function(lineId) {
+    return this._indicators[lineId].type === 'default' ?
+      0 :
+      this._width / 4;
+  };
+
+  LineIndicator.prototype.updateIndicator = function(lineId) {
+    if (this._indicators[lineId]) {
+      var y = this._indicators[lineId].line.getY()
+              + (this._indicators[lineId].line.lineHeight() / 2);
+
+      if (y + this._indicatorRadius > 0 && y - this._indicatorRadius < this._height) {
+        // The indicator is visible
+        if (!this._indicators[lineId].indicator) {
+          this._indicators[lineId].indicator = this._createIndicator(
+            this._indicators[lineId].line,
+            this._indicators[lineId].type
+          );
+          this._layer.add(this._indicators[lineId].indicator);
+        }
+        else {
+          this._indicators[lineId].indicator.y(y - this.getPixelsFromCenter(lineId));
+        }
+      }
+      else {
+        // The indicator is out of the view, we remove it
+        this.removeIndicator(lineId, true);
+      }
+    }
+  };
+
+  LineIndicator.prototype.updateIndicators = function() {
+    for (var lineId in this._indicators) {
+      if (Utils.objectHasProperty(this._indicators, lineId)) {
+        this.updateIndicator(lineId);
+      }
+    }
+  };
+
+  LineIndicator.prototype.draw = function() {
+    this._layer.draw();
+  };
+
+  LineIndicator.prototype._createContextMenu = function() {
+    var menu = document.createElement('div');
+    var addLine = document.createElement('button');
+    var addLineAbove = document.createElement('button');
+    var addLineBelow = document.createElement('button');
+    var deleteLine = document.createElement('button');
+    var currentIndicator = null;
+    var self = this;
+
+    menu.style.display         = 'none';
+    menu.style.position        = 'absolute';
+    menu.style.backgroundColor = 'white';
+    menu.style.boxShadow       = '0 0 5px grey';
+    menu.style.borderRadius    = '3px';
+    menu.style.zIndex          = 2;
+
+    addLine.style.display         = 'none';
+    addLine.style.border          = 'none';
+    addLine.style.margin          = '0';
+    addLine.style.width           = '100%';
+    addLine.style.backgroundColor = 'white';
+    addLine.style.padding         = '10px';
+
+    addLine.textContent           = 'Add first line';
+
+    addLine.onmouseover = function() {
+      this.style.backgroundColor = 'lightgray';
+    };
+
+    addLine.onmouseout = function() {
+      this.style.backgroundColor = 'white';
+    };
+
+    addLineAbove.style.display         = 'none';
+    addLineAbove.style.border          = 'none';
+    addLineAbove.style.margin          = '0';
+    addLineAbove.style.width           = '100%';
+    addLineAbove.style.backgroundColor = 'white';
+    addLineAbove.style.padding         = '10px';
+
+    addLineAbove.textContent           = 'Add line above';
+
+    addLineAbove.onmouseover = function() {
+      this.style.backgroundColor = 'lightgray';
+    };
+
+    addLineAbove.onmouseout = function() {
+      this.style.backgroundColor = 'white';
+    };
+
+    addLineBelow.style.display         = 'none';
+    addLineBelow.style.border          = 'none';
+    addLineBelow.style.margin          = '0';
+    addLineBelow.style.width           = '100%';
+    addLineBelow.style.backgroundColor = 'white';
+    addLineBelow.style.padding         = '10px';
+
+    addLineBelow.textContent           = 'Add line below';
+
+    addLineBelow.onmouseover = function() {
+      this.style.backgroundColor = 'lightgray';
+    };
+
+    addLineBelow.onmouseout = function() {
+      this.style.backgroundColor = 'white';
+    };
+
+    deleteLine.style.display         = 'none';
+    deleteLine.style.border          = 'none';
+    deleteLine.style.margin          = '0';
+    deleteLine.style.width           = '100%';
+    deleteLine.style.backgroundColor = 'white';
+    deleteLine.style.padding         = '10px';
+
+    deleteLine.textContent           = 'Delete line';
+
+    deleteLine.onmouseover = function() {
+      this.style.backgroundColor = 'lightgray';
+    };
+
+    deleteLine.onmouseout = function() {
+      this.style.backgroundColor = 'white';
+    };
+
+    menu.appendChild(addLine);
+    menu.appendChild(addLineAbove);
+    menu.appendChild(addLineBelow);
+    menu.appendChild(deleteLine);
+    this._container.appendChild(menu);
+
+    addLine.addEventListener('click', function() {
+      self._peaks.emit('line.add', 0);
+      self.draw();
+    });
+
+    addLineAbove.addEventListener('click', function() {
+      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
+
+      self._peaks.emit('line.add', Number(line.getPosition()));
+      self.draw();
+    });
+
+    addLineBelow.addEventListener('click', function() {
+      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
+
+      self._peaks.emit('line.add', Number(line.getPosition()) + 1);
+      self.draw();
+    });
+
+    deleteLine.addEventListener('click', function() {
+      var line = self._indicators[currentIndicator.getAttr('lineId')].line;
+
+      self._peaks.emit('line.remove', Number(line.getPosition()));
+      self.draw();
+    });
+
+    window.addEventListener('click', function() {
+      // hide menu
+      menu.style.display = 'none';
+    });
+
+    this._stage.on('contextmenu', function(e) {
+      // prevent default behavior
+      e.evt.preventDefault();
+
+      if (e.target === self._stage && Object.keys(self._indicators).length === 0) {
+        // if we are on empty place of the stage
+        // we will show the possibility to add a first line
+        addLine.style.display = 'block';
+        addLineAbove.style.display = 'none';
+        addLineBelow.style.display = 'none';
+        deleteLine.style.display = 'none';
+
+        // show menu
+        self._showMenu(menu);
+      }
+      else if (e.target !== self._stage) {
+        currentIndicator = e.target;
+
+        addLine.style.display = 'none';
+        addLineAbove.style.display = 'block';
+        addLineBelow.style.display = 'block';
+        deleteLine.style.display = 'block';
+
+        deleteLine.disabled = !self._indicators[currentIndicator.getAttr('lineId')].line.isEmpty();
+
+        // show menu
+        self._showMenu(menu);
+      }
+    });
+  };
+
+  return LineIndicator;
+});