@jsmlt/jsmlt/distribution/ui/datapoint.js

JavaScript Machine Learning

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Data point element to be drawn on the canvas
 */
var Datapoint = function () {
  /**
   * Constructor. Attach the datapoint to the canvas and its model.
   *
   * @param {jsml.UI.Canvas} canvas - Canvas to which this datapoint element is bound
   * @param {jsml.Dataset.Datapoint} datapoint - Datapoint model
   */
  function Datapoint(canvas, datapoint) {
    _classCallCheck(this, Datapoint);

    this.canvas = canvas;

    this.model = datapoint;
    this.radius = 0;
    this.steps = 0;
  }

  /**
   * Update information about this element from the model.
   */


  _createClass(Datapoint, [{
    key: 'updateFromModel',
    value: function updateFromModel() {
      var _model$features = _slicedToArray(this.model.features, 2);

      this.x = _model$features[0];
      this.y = _model$features[1];

      this.color = this.canvas.getClassColor(this.model.classIndex);
      this.marked = this.model.isMarked();
    }

    /**
     * Update drawing properties of the model.
     */

  }, {
    key: 'update',
    value: function update() {
      this.updateFromModel();

      // Update radius
      var progress = Math.min(this.steps / 20, 0.75);
      this.radius = Math.sin(progress * Math.PI) * 6;

      // Increase current step
      this.steps += 1;
    }

    /**
     * Draw the element on the canvas.
     */

  }, {
    key: 'draw',
    value: function draw() {
      var context = this.canvas.canvas.context;

      // Calculate position of point

      var _canvas$convertFeatur = this.canvas.convertFeaturesToCanvasCoordinates(this.x, this.y),
          _canvas$convertFeatur2 = _slicedToArray(_canvas$convertFeatur, 2),
          pointCx = _canvas$convertFeatur2[0],
          pointCy = _canvas$convertFeatur2[1];

      // Draw main point filled, stroked circle


      context.beginPath();
      context.arc(pointCx, pointCy, this.radius, 0, 2 * Math.PI, false);
      context.fillStyle = this.color;
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = '#555';
      context.stroke();

      // Mark point (e.g. for Support Vectors)
      if (this.marked) {
        context.beginPath();
        context.arc(pointCx, pointCy, this.radius + 3, 0, 2 * Math.PI, false);
        context.lineWidth = 1;
        context.strokeStyle = '#555'; // this.color;
        context.stroke();
      }
    }
  }]);

  return Datapoint;
}();

exports.default = Datapoint;
module.exports = exports['default'];