ami-cjs.js/lib/widgets/widgets.ruler.js

<p align="center"> <img src="https://cloud.githubusercontent.com/assets/214063/23213764/78ade038-f90c-11e6-8208-4fcade5f3832.png" width="60%"> </p>

'use strict';

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

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; }; }();

var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

var _widgets = require('../widgets/widgets.base');

var _widgets2 = _interopRequireDefault(_widgets);

var _widgets3 = require('../widgets/widgets.handle');

var _widgets4 = _interopRequireDefault(_widgets3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * @module widgets/handle
 *
 */

var WidgetsRuler = function (_WidgetsBase) {
  _inherits(WidgetsRuler, _WidgetsBase);

  function WidgetsRuler(targetMesh, controls, camera, container) {
    _classCallCheck(this, WidgetsRuler);

    var _this = _possibleConstructorReturn(this, (WidgetsRuler.__proto__ || Object.getPrototypeOf(WidgetsRuler)).call(this, container));

    _this._targetMesh = targetMesh;
    _this._controls = controls;
    _this._camera = camera;

    _this._active = true;

    _this._worldPosition = new THREE.Vector3();
    if (_this._targetMesh !== null) {
      _this._worldPosition = _this._targetMesh.position;
    }

    // mesh stuff
    _this._material = null;
    _this._geometry = null;
    _this._mesh = null;

    // dom stuff
    _this._line = null;
    _this._distance = null;

    // add handles
    _this._handles = [];

    // first handle
    var firstHandle = new _widgets4.default(_this._targetMesh, _this._controls, _this._camera, _this._container);
    firstHandle.worldPosition = _this._worldPosition;
    firstHandle.hovered = true;
    _this.add(firstHandle);

    _this._handles.push(firstHandle);

    var secondHandle = new _widgets4.default(_this._targetMesh, _this._controls, _this._camera, _this._container);
    secondHandle.worldPosition = _this._worldPosition;
    secondHandle.hovered = true;
    // active and tracking might be redundant
    secondHandle.active = true;
    secondHandle.tracking = true;
    _this.add(secondHandle);

    _this._handles.push(secondHandle);

    // Create ruler
    _this.create();

    _this.initOffsets();

    _this.onMove = _this.onMove.bind(_this);
    _this.addEventListeners();
    return _this;
  }

  _createClass(WidgetsRuler, [{
    key: 'addEventListeners',
    value: function addEventListeners() {
      this._container.addEventListener('mousewheel', this.onMove);
      this._container.addEventListener('DOMMouseScroll', this.onMove);
    }
  }, {
    key: 'onMove',
    value: function onMove(evt) {
      this._dragged = true;

      this._handles[0].onMove(evt);
      this._handles[1].onMove(evt);

      this._hovered = this._handles[0].hovered || this._handles[1].hovered;
      this.update();
    }
  }, {
    key: 'onStart',
    value: function onStart(evt) {
      this._dragged = false;

      this._handles[0].onStart(evt);
      this._handles[1].onStart(evt);

      this._active = this._handles[0].active || this._handles[1].active;
      this.update();
    }
  }, {
    key: 'onEnd',
    value: function onEnd(evt) {
      // First Handle
      this._handles[0].onEnd(evt);

      // window.console.log(this);

      // Second Handle
      if (this._dragged || !this._handles[1].tracking) {
        this._handles[1].tracking = false;
        this._handles[1].onEnd(evt);
      } else {
        this._handles[1].tracking = false;
      }

      // State of ruler widget
      this._active = this._handles[0].active || this._handles[1].active;
      this.update();
    }
  }, {
    key: 'create',
    value: function create() {
      this.createMesh();
      this.createDOM();
    }
  }, {
    key: 'update',
    value: function update() {
      this.updateColor();

      // mesh stuff
      this.updateMeshColor();
      this.updateMeshPosition();

      // DOM stuff
      this.updateDOMPosition();
      this.updateDOMColor();
    }
  }, {
    key: 'createMesh',
    value: function createMesh() {
      // geometry
      this._geometry = new THREE.Geometry();
      this._geometry.vertices.push(this._handles[0].worldPosition);
      this._geometry.vertices.push(this._handles[1].worldPosition);

      // material
      this._material = new THREE.LineBasicMaterial();
      this.updateMeshColor();

      // mesh
      this._mesh = new THREE.Line(this._geometry, this._material);
      this._mesh.visible = true;

      // add it!
      this.add(this._mesh);
    }
  }, {
    key: 'updateMeshColor',
    value: function updateMeshColor() {
      if (this._material) {
        this._material.color.set(this._color);
      }
    }
  }, {
    key: 'updateMeshPosition',
    value: function updateMeshPosition() {
      if (this._geometry) {
        this._geometry.verticesNeedUpdate = true;
      }
    }
  }, {
    key: 'createDOM',
    value: function createDOM() {
      // add line!
      this._line = document.createElement('div');
      this._line.setAttribute('class', 'widgets handle line');
      this._line.style.position = 'absolute';
      this._line.style.transformOrigin = '0 100%';
      this._line.style.marginTop = '-1px';
      this._line.style.height = '2px';
      this._line.style.width = '3px';
      this._container.appendChild(this._line);

      // add distance!
      this._distance = document.createElement('div');
      this._distance.setAttribute('class', 'widgets handle distance');
      this._distance.style.border = '2px solid';
      this._distance.style.backgroundColor = '#F9F9F9';
      // this._distance.style.opacity = '0.5';
      this._distance.style.color = '#353535';
      this._distance.style.padding = '4px';
      this._distance.style.position = 'absolute';
      this._distance.style.transformOrigin = '0 100%';
      this._distance.innerHTML = 'Hello, world!';
      this._container.appendChild(this._distance);

      this.updateDOMColor();
    }
  }, {
    key: 'updateDOMPosition',
    value: function updateDOMPosition() {
      // update rulers lines and text!
      var x1 = this._handles[0].screenPosition.x;
      var y1 = this._handles[0].screenPosition.y;
      var x2 = this._handles[1].screenPosition.x;
      var y2 = this._handles[1].screenPosition.y;

      var x0 = x1 + (x2 - x1) / 2;
      var y0 = y1 + (y2 - y1) / 2;

      var length = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
      var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

      var posY = y1 - this._container.offsetHeight;

      // update line
      var transform = 'translate3D(' + x1 + 'px,' + posY + 'px, 0)';
      transform += ' rotate(' + angle + 'deg)';

      this._line.style.transform = transform;
      this._line.style.width = length;

      // update distance
      var w0 = this._handles[0].worldPosition;
      var w1 = this._handles[1].worldPosition;

      this._distance.innerHTML = Math.sqrt((w0.x - w1.x) * (w0.x - w1.x) + (w0.y - w1.y) * (w0.y - w1.y) + (w0.z - w1.z) * (w0.z - w1.z)).toFixed(2) + ' mm';
      var posY0 = y0 - this._container.offsetHeight - this._distance.offsetHeight / 2;
      x0 -= this._distance.offsetWidth / 2;

      var transform2 = 'translate3D(' + Math.round(x0) + 'px,' + Math.round(posY0) + 'px, 0)';
      this._distance.style.transform = transform2;
    }
  }, {
    key: 'updateDOMColor',
    value: function updateDOMColor() {
      this._line.style.backgroundColor = '' + this._color;
      this._distance.style.borderColor = '' + this._color;
    }
  }, {
    key: 'offsetChanged',
    value: function offsetChanged() {

      //Trick to allow recalc screenPosition and update the handles
      //I guess there's a better way of doing this...
      this._handles[0].worldPosition = this._handles[0].worldPosition;
      this._handles[1].worldPosition = this._handles[1].worldPosition;

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

      this._container.removeEventListener('mousewheel', this.onMove);
      this._container.removeEventListener('DOMMouseScroll', this.onMove);

      this._handles.forEach(function (h) {
        h.free();
      });

      this._handles = [];

      this._container.removeChild(this._line);
      this._container.removeChild(this._distance);

      this.remove(this._mesh);

      _get(WidgetsRuler.prototype.__proto__ || Object.getPrototypeOf(WidgetsRuler.prototype), 'free', this).call(this);
    }
  }, {
    key: 'worldPosition',
    get: function get() {
      return this._worldPosition;
    },
    set: function set(worldPosition) {
      this._worldPosition = worldPosition;
      this._handles[0].worldPosition = this._worldPosition;
      this._handles[1].worldPosition = this._worldPosition;

      this.update();
    }
  }]);

  return WidgetsRuler;
}(_widgets2.default);

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