@checksub_team/peaks_timeline 1.16.1 → 2.0.0-alpha.10

package/src/{line-indicator.js → components/line-indicator.js}

@@ -1,303 +1,313 @@
-/**
- * @file
- *
- * Defines the {@link LineIndicator} class.
- *
- * @module line-indicator
- */
-
-define([
-  'konva',
-  './utils',
-  './svgs'
-], function(
-  Konva,
-  Utils,
-  SVGs) {
-  '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._sizes = {
-      font: this._peaks.options.lineIndicatorFontSize,
-      icon: {
-        default: this._peaks.options.lineIndicatorDefaultIconSize,
-        volume: this._peaks.options.lineIndicatorVolumeIconSize,
-        noVolume: this._peaks.options.lineIndicatorNoVolumeIconSize,
-        visibility: this._peaks.options.lineIndicatorVisibilityIconSize,
-        noVisibility: this._peaks.options.lineIndicatorNoVisibilityIconSize
-      }
-    };
-
-    this._yPadding = 30;
-    this._defaultPadding = 5;
-    this._types = ['default'].concat(Object.keys(SVGs));
-
-    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._separatingLine = new Konva.Line({
-      points: [this._width, 0, this._width, this._height],
-      stroke: 'gray',
-      strokeWidth: 1,
-      listening: false
-    });
-
-    this._layer.add(this._separatingLine);
-
-    this._layer.draw();
-
-    this._peaks.on('lineIndicator.setType', this._onSetType.bind(this));
-    this._peaks.on('lineIndicator.setText', this._onSetText.bind(this));
-  }
-
-  LineIndicator.prototype.fitToView = function() {
-    this._height = this._view.getHeight();
-
-    this._stage.height(this._height);
-
-    this._separatingLine.points([this._width, 0, this._width, this._height]);
-  };
-
-  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._indicators[lineId].text
-    );
-
-    this._layer.add(indicator);
-
-    this._indicators[lineId].indicator = indicator;
-    this._indicators[lineId].type = type;
-
-    this.draw();
-  };
-
-  LineIndicator.prototype._onSetText = function(lineId, text) {
-    this.removeIndicator(lineId, true);
-
-    var indicator = this._createIndicator(
-      this._indicators[lineId].line,
-      this._indicators[lineId].type,
-      text
-    );
-
-    this._layer.add(indicator);
-
-    this._indicators[lineId].indicator = indicator;
-    this._indicators[lineId].text = text;
-
-    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, text) {
-    var indicator = new Konva.Group();
-    var indicatorHeight = 0;
-
-    if (text) {
-      var textNode = new Konva.Text({
-        text: text,
-        fontSize: this._sizes.font,
-        fontFamily: this._peaks.options.lineIndicatorFont,
-        fill: this._peaks.options.lineIndicatorTextColor,
-        align: 'center',
-        width: this._width,
-        listening: false
-      });
-
-      textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
-      textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
-
-      indicator.add(textNode);
-      indicatorHeight += this._sizes.font;
-    }
-
-    type = this._types.includes(type) ? type : 'default';
-
-    var iconNode;
-
-    if (type === 'default') {
-      var padding = text ? this._defaultPadding : 0;
-
-      iconNode = new Konva.Circle({
-        x: this._width / 2,
-        y: indicatorHeight + this._sizes.icon.default / 2 + padding,
-        radius: this._sizes.icon.default / 2,
-        fill: this._peaks.options.lineIndicatorIconColor,
-        strokeWidth: 0,
-        lineId: line.getId(),
-        listening: false
-      });
-
-      indicatorHeight += padding;
-    }
-    else {
-      iconNode = new Konva.Path({
-        x: (this._width - this._sizes.icon[type]) / 2,
-        y: indicatorHeight,
-        data: SVGs[type].path,
-        fill: this._peaks.options.lineIndicatorIconColor,
-        scale: {
-          x: (this._sizes.icon[type]) / SVGs[type].width,
-          y: (this._sizes.icon[type]) / SVGs[type].height
-        },
-        lineId: line.getId(),
-        listening: false
-      });
-    }
-
-    iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
-    iconNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedIconColor);
-
-    indicator.add(iconNode);
-    indicatorHeight += this._sizes.icon[type];
-
-    indicator.setAttr('trueHeight', indicatorHeight);
-
-    var backgroundRect = new Konva.Rect({
-      x: 0,
-      y: 0,
-      width: this._width,
-      height: indicatorHeight,
-      fill: 'transparent',
-      listening: true
-    });
-
-    indicator.add(backgroundRect);
-    backgroundRect.moveToTop();
-
-    indicator.y(line.getY() + (line.lineHeight() - indicatorHeight) / 2);
-
-    var self = this;
-
-    indicator.on('mouseenter', function() {
-      indicator.getChildren().forEach(function(child) {
-        child.fill(child.getAttr('selectedColor'));
-      });
-      self.draw();
-      self._stage.container().style.cursor = 'pointer';
-    });
-
-    indicator.on('mouseout', function() {
-      indicator.getChildren().forEach(function(child) {
-        child.fill(child.getAttr('defaultColor'));
-      });
-      self.draw();
-      self._stage.container().style.cursor = 'default';
-    });
-
-    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.updateIndicator = function(lineId) {
-    if (this._indicators[lineId]) {
-      var y = this._indicators[lineId].line.getY();
-      var isVisible = y + this._indicators[lineId].line.lineHeight() + this._yPadding > 0
-        && y - this._yPadding < this._height;
-
-      if (isVisible) {
-        if (!this._indicators[lineId].indicator) {
-          this._indicators[lineId].indicator = this._createIndicator(
-            this._indicators[lineId].line,
-            this._indicators[lineId].type,
-            this._indicators[lineId].text
-          );
-          this._layer.add(this._indicators[lineId].indicator);
-        }
-        else {
-          this._indicators[lineId].indicator.y(
-            y + this._indicators[lineId].line.lineHeight() / 2
-              - this._indicators[lineId].indicator.getAttr('trueHeight') / 2
-          );
-        }
-      }
-      else {
-        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();
-  };
-
-  return LineIndicator;
-});
+/**
+ * @file
+ *
+ * Defines the {@link LineIndicator} class.
+ *
+ * @module line-indicator
+ */
+
+define([
+  'konva',
+  './svgs',
+  '../utils'
+], function(
+  Konva,
+  SVGs,
+  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._sizes = {
+      font: this._peaks.options.lineIndicatorFontSize,
+      icon: {
+        default: this._peaks.options.lineIndicatorDefaultIconSize,
+        volume: this._peaks.options.lineIndicatorVolumeIconSize,
+        noVolume: this._peaks.options.lineIndicatorNoVolumeIconSize,
+        visibility: this._peaks.options.lineIndicatorVisibilityIconSize,
+        noVisibility: this._peaks.options.lineIndicatorNoVisibilityIconSize
+      }
+    };
+
+    this._yPadding = 30;
+    this._defaultPadding = 5;
+    this._types = ['default'].concat(Object.keys(SVGs));
+
+    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._separatingLine = new Konva.Line({
+      points: [this._width, 0, this._width, this._height],
+      stroke: 'gray',
+      strokeWidth: 1,
+      listening: false
+    });
+
+    this._layer.add(this._separatingLine);
+
+    this._layer.draw();
+  }
+
+  LineIndicator.prototype.fitToView = function() {
+    this._height = this._view.getHeight();
+
+    this._stage.height(this._height);
+
+    this._separatingLine.points([this._width, 0, this._width, this._height]);
+
+    this.refreshIndicators();
+  };
+
+  LineIndicator.prototype._createIndicator = function(lineGroup, type, text) {
+    const indicator = new Konva.Group();
+    let indicatorHeight = 0;
+
+    if (text) {
+      const textNode = new Konva.Text({
+        text: text,
+        fontSize: this._sizes.font,
+        fontFamily: this._peaks.options.lineIndicatorFont,
+        fill: this._peaks.options.lineIndicatorTextColor,
+        align: 'center',
+        width: this._width,
+        listening: false
+      });
+
+      textNode.setAttr('defaultColor', this._peaks.options.lineIndicatorTextColor);
+      textNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedTextColor);
+
+      indicator.add(textNode);
+      indicatorHeight += this._sizes.font;
+    }
+
+    type = this._types.includes(type) ? type : 'default';
+
+    var iconNode;
+
+    if (type === 'default') {
+      var padding = text ? this._defaultPadding : 0;
+
+      iconNode = new Konva.Circle({
+        x: this._width / 2,
+        y: indicatorHeight + this._sizes.icon.default / 2 + padding,
+        radius: this._sizes.icon.default / 2,
+        fill: this._peaks.options.lineIndicatorIconColor,
+        strokeWidth: 0,
+        lineId: lineGroup.getId(),
+        listening: false
+      });
+
+      indicatorHeight += padding;
+    }
+    else {
+      iconNode = new Konva.Path({
+        x: (this._width - this._sizes.icon[type]) / 2,
+        y: indicatorHeight,
+        data: SVGs[type].path,
+        fill: this._peaks.options.lineIndicatorIconColor,
+        scale: {
+          x: (this._sizes.icon[type]) / SVGs[type].width,
+          y: (this._sizes.icon[type]) / SVGs[type].height
+        },
+        lineId: lineGroup.getId(),
+        listening: false
+      });
+    }
+
+    iconNode.setAttr('defaultColor', this._peaks.options.lineIndicatorIconColor);
+    iconNode.setAttr('selectedColor', this._peaks.options.lineIndicatorSelectedIconColor);
+
+    indicator.add(iconNode);
+    indicatorHeight += this._sizes.icon[type];
+
+    indicator.setAttr('trueHeight', indicatorHeight);
+
+    var backgroundRect = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: this._width,
+      height: indicatorHeight,
+      fill: 'transparent',
+      listening: true
+    });
+
+    indicator.add(backgroundRect);
+    backgroundRect.moveToTop();
+
+    indicator.y(lineGroup.y() + (lineGroup.lineHeight() - indicatorHeight) / 2);
+
+    var self = this;
+
+    indicator.on('mouseenter', function() {
+      indicator.getChildren().forEach(function(child) {
+        child.fill(child.getAttr('selectedColor'));
+      });
+      self.draw();
+      self._stage.container().style.cursor = 'pointer';
+    });
+
+    indicator.on('mouseout', function() {
+      indicator.getChildren().forEach(function(child) {
+        child.fill(child.getAttr('defaultColor'));
+      });
+      self.draw();
+      self._stage.container().style.cursor = 'default';
+    });
+
+    indicator.on('click', function(e) {
+      self._peaks.emit('lineIndicator.click', self._indicators[lineGroup.getId()], e.evt);
+    });
+
+    return indicator;
+  };
+
+  LineIndicator.prototype.addIndicator = function(lineGroup) {
+    var line = lineGroup.getLine();
+
+    if (!this._indicators[lineGroup.id]) {
+      const indicator = this._createIndicator(
+        lineGroup,
+        line.indicatorType,
+        line.indicatorText
+      );
+
+      this._layer.add(indicator);
+
+      this._indicators[line.id] = {
+        lineGroup: lineGroup,
+        indicator: indicator,
+        type: line.indicatorType
+      };
+    }
+  };
+
+  LineIndicator.prototype.updateIndicator = function(line) {
+    const indicatorData = this._indicators[line.id];
+
+    if (!indicatorData) {
+      this._peaks.logger('peaks.line-indicator.update(): line indicator not found: ' + line.id);
+      return;
+    }
+
+    if (indicatorData.type === line.indicatorType && indicatorData.text === line.indicatorText) {
+      return;
+    }
+
+    this.removeIndicator(line.id, true);
+
+    var indicator = this._createIndicator(
+      indicatorData.lineGroup,
+      line.indicatorType,
+      line.indicatorText
+    );
+
+    this._layer.add(indicator);
+
+    indicatorData.indicator = indicator;
+    indicatorData.type = line.indicatorType;
+    indicatorData.text = line.indicatorText;
+
+    this.draw();
+  };
+
+  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.refreshIndicator = function(lineId) {
+    var anyChange = false;
+
+    if (this._indicators[lineId]) {
+      var y = this._indicators[lineId].lineGroup.y();
+      var isVisible = y + this._indicators[lineId].lineGroup.lineHeight() + this._yPadding > 0
+        && y - this._yPadding < this._height;
+      const hasNoIndicator = !this._indicators[lineId].indicator;
+
+      if (isVisible) {
+        if (hasNoIndicator) {
+          this._indicators[lineId].indicator = this._createIndicator(
+            this._indicators[lineId].lineGroup,
+            this._indicators[lineId].type,
+            this._indicators[lineId].text
+          );
+          this._layer.add(this._indicators[lineId].indicator);
+          anyChange = true;
+        }
+        else {
+          const newY = y
+            + this._indicators[lineId].lineGroup.lineHeight() / 2
+            - this._indicators[lineId].indicator.getAttr('trueHeight') / 2;
+
+          if (this._indicators[lineId].indicator.y() !== newY) {
+            this._indicators[lineId].indicator.y(
+              newY
+            );
+            anyChange = true;
+          }
+        }
+      }
+      else {
+        this.removeIndicator(lineId, true);
+        if (!hasNoIndicator) {
+          anyChange = true;
+        }
+      }
+    }
+
+    return anyChange;
+  };
+
+  LineIndicator.prototype.refreshIndicators = function() {
+    var anyChange = false;
+
+    for (var lineId in this._indicators) {
+      if (Utils.objectHasProperty(this._indicators, lineId)) {
+        anyChange = this.refreshIndicator(lineId) || anyChange;
+      }
+    }
+
+    if (anyChange) {
+      this.draw();
+    }
+    return anyChange;
+  };
+
+  LineIndicator.prototype.draw = function() {
+    this._layer.draw();
+  };
+
+  return LineIndicator;
+});

package/src/{marker-factories.js → components/marker-factories.js}

@@ -8,7 +8,7 @@
 
 define([
   './default-segment-marker',
-  './utils',
+  '../utils',
   'konva'
   ], function(
     DefaultSegmentMarker,