@checksub_team/peaks_timeline 1.4.17

package/src/keyboard-handler.js

@@ -0,0 +1,112 @@
+/**
+ * @file
+ *
+ * Defines the {@link KeyboardHandler} class.
+ *
+ * @module keyboard-handler
+ */
+
+define([], function() {
+  'use strict';
+
+  var nodes = ['OBJECT', 'TEXTAREA', 'INPUT', 'SELECT', 'OPTION'];
+
+  var keys = ['Spacebar', ' ', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+  /**
+   * Configures keyboard event handling.
+   *
+   * @class
+   * @alias KeyboardHandler
+   *
+   * @param {EventEmitter} eventEmitter
+   */
+
+  function KeyboardHandler(eventEmitter) {
+    this.eventEmitter = eventEmitter;
+
+    this._handleKeyEvent = this._handleKeyEvent.bind(this);
+
+    this._ctrlCmdPressed = false;
+
+    document.addEventListener('keydown', this._handleKeyEvent);
+    document.addEventListener('keypress', this._handleKeyEvent);
+    document.addEventListener('keyup', this._handleKeyEvent);
+  }
+
+  KeyboardHandler.prototype.isCtrlCmdPressed = function handleKeyEvent() {
+    return this._ctrlCmdPressed;
+  };
+
+  /**
+   * Keyboard event handler function.
+   *
+   * @note Arrow keys only triggered on keydown, not keypress.
+   *
+   * @param {KeyboardEvent} event
+   * @private
+   */
+
+  KeyboardHandler.prototype._handleKeyEvent = function handleKeyEvent(event) {
+    if (nodes.indexOf(event.target.nodeName) === -1) {
+      if (keys.indexOf(event.code) > -1) {
+        event.preventDefault();
+      }
+
+      if (event.type === 'keydown' || event.type === 'keypress') {
+        if ((event.ctrlKey || event.metaKey) && !this._ctrlCmdPressed) {
+          this.eventEmitter.emit('keyboard.ctrlCmdDown');
+          this._ctrlCmdPressed = true;
+        }
+        switch (event.code) {
+          case 'Spacebar':
+          case ' ':
+            this.eventEmitter.emit('keyboard.space');
+            break;
+
+          case 'Tab':
+            this.eventEmitter.emit('keyboard.tab');
+            break;
+        }
+      }
+      else if (event.type === 'keyup') {
+        if (!(event.ctrlKey || event.metaKey) && this._ctrlCmdPressed) {
+          this.eventEmitter.emit('keyboard.ctrlCmdUp');
+          this._ctrlCmdPressed = false;
+        }
+        switch (event.code) {
+          case 'ArrowLeft':
+            if (event.shiftKey) {
+              this.eventEmitter.emit('keyboard.shift_left');
+            }
+            else {
+              this.eventEmitter.emit('keyboard.left');
+            }
+            break;
+
+          case 'ArrowRight':
+            if (event.shiftKey) {
+              this.eventEmitter.emit('keyboard.shift_right');
+            }
+            else {
+              this.eventEmitter.emit('keyboard.right');
+            }
+            break;
+
+          case 'Delete':
+          case 'Backspace':
+            this.eventEmitter.emit('keyboard.delete');
+            break;
+        }
+      }
+    }
+  };
+
+  KeyboardHandler.prototype.destroy = function() {
+    document.removeEventListener('keydown', this._handleKeyEvent);
+    document.removeEventListener('keypress', this._handleKeyEvent);
+    document.removeEventListener('keyup', this._handleKeyEvent);
+  };
+
+  return KeyboardHandler;
+});

package/src/line-indicator.js

@@ -0,0 +1,312 @@
+/**
+ * @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();
+    }
+  }
+
+  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) {
+    var 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()
+    });
+
+    var self = this;
+
+    indicator.on('mouseover', function() {
+      indicator.fill(self._peaks.options.lineIndicatorSelected);
+      indicator.draw();
+    });
+
+    indicator.on('mouseout', function() {
+      indicator.fill(self._peaks.options.lineIndicatorColor);
+      indicator.draw();
+    });
+
+    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
+      };
+    }
+  };
+
+  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()
+              + (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._layer.add(this._indicators[lineId].indicator);
+        }
+        else {
+          this._indicators[lineId].indicator.y(y);
+        }
+      }
+      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;
+});