ami-cjs.js/lib/widgets/widgets.handle.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 _core = require('../core/core.intersections');

var _core2 = _interopRequireDefault(_core);

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 WidgetsHandle = function (_WidgetsBase) {
  _inherits(WidgetsHandle, _WidgetsBase);

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

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

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

    // if no target mesh, use plane for FREE dragging.
    _this._plane = {
      position: new THREE.Vector3(),
      direction: new THREE.Vector3()
    };
    _this._offset = new THREE.Vector3();
    _this._raycaster = new THREE.Raycaster();

    _this._tracking = false;

    _this._mouse = new THREE.Vector2();

    // world (LPS) position of this handle
    _this._worldPosition = new THREE.Vector3();

    // screen position of this handle
    _this._screenPosition = new THREE.Vector2();

    // mesh stuff
    _this._material = null;
    _this._geometry = null;
    _this._mesh = null;
    _this._meshDisplayed = true;
    _this._meshHovered = false;
    _this._meshStyle = 'sphere'; // cube, etc.

    // dom stuff
    _this._dom = null;
    _this._domDisplayed = true;
    _this._domHovered = false;
    _this._domStyle = 'circle'; // square, triangle

    if (_this._targetMesh !== null) {
      _this._worldPosition.copy(_this._targetMesh.position);
    }

    _this._screenPosition = _this.worldToScreen(_this._worldPosition, _this._camera, _this._container);

    // create handle
    _this.create();

    _this.initOffsets();

    // event listeners
    _this.onMove = _this.onMove.bind(_this);
    _this.onHover = _this.onHover.bind(_this);
    _this.addEventListeners();
    return _this;
  }

  _createClass(WidgetsHandle, [{
    key: 'addEventListeners',
    value: function addEventListeners() {
      this._dom.addEventListener('mouseenter', this.onHover);
      this._dom.addEventListener('mouseleave', this.onHover);

      this._container.addEventListener('mousewheel', this.onMove);
      this._container.addEventListener('DOMMouseScroll', this.onMove);
    }
  }, {
    key: 'removeEventListeners',
    value: function removeEventListeners() {
      this._dom.removeEventListener('mouseenter', this.onHover);
      this._dom.removeEventListener('mouseleave', this.onHover);

      this._container.removeEventListener('mousewheel', this.onMove);
      this._container.removeEventListener('DOMMouseScroll', this.onMove);
    }
  }, {
    key: 'create',
    value: function create() {
      this.createMesh();
      this.createDOM();
    }
  }, {
    key: 'onStart',
    value: function onStart(evt) {
      evt.preventDefault();

      var offsets = this.getMouseOffsets(evt, this._container);

      this._mouse.set(offsets.x, offsets.y);

      // update raycaster
      this._raycaster.setFromCamera(this._mouse, this._camera);
      this._raycaster.ray.position = this._raycaster.ray.origin;

      if (this._hovered) {
        this._active = true;
        this._controls.enabled = false;

        if (this._targetMesh) {
          var intersectsTarget = this._raycaster.intersectObject(this._targetMesh);
          if (intersectsTarget.length > 0) {
            this._offset.copy(intersectsTarget[0].point).sub(this._mesh.position);
          }
        } else {
          // update raycaster
          var intersection = _core2.default.rayPlane(this._raycaster.ray, this._plane);
          if (intersection !== null) {
            this._offset.copy(intersection).sub(this._plane.position);
          }
        }

        this.update();
      }
    }
  }, {
    key: 'onEnd',
    value: function onEnd(evt) {
      evt.preventDefault();

      // stay active and keep controls disabled
      if (this._tracking === true) {
        return;
      }

      // unselect if go up without moving
      if (!this._dragged && this._active) {
        // change state if was not dragging
        this._selected = !this._selected;
      }

      this._active = false;
      this._dragged = false;
      this._controls.enabled = true;

      this.update();
    }

    /**
     *
     *
     */

  }, {
    key: 'onMove',
    value: function onMove(evt) {
      evt.preventDefault();

      var offsets = this.getMouseOffsets(evt, this._container);
      this._mouse.set(offsets.x, offsets.y);

      // update screen position of handle
      this._screenPosition = this.worldToScreen(this._worldPosition, this._camera, this._container);

      // update raycaster
      // set ray.position to satisfy CoreIntersections::rayPlane API
      this._raycaster.setFromCamera(this._mouse, this._camera);
      this._raycaster.ray.position = this._raycaster.ray.origin;

      if (this._active) {
        this._dragged = true;

        if (this._targetMesh !== null) {
          var intersectsTarget = this._raycaster.intersectObject(this._targetMesh);
          if (intersectsTarget.length > 0) {
            this._worldPosition.copy(intersectsTarget[0].point.sub(this._offset));
          }
        } else {
          if (this._plane.direction.length() === 0) {
            // free mode!this._targetMesh
            this._plane.position.copy(this._worldPosition);
            this._plane.direction.copy(this._camera.getWorldDirection());
          }

          var intersection = _core2.default.rayPlane(this._raycaster.ray, this._plane);
          if (intersection !== null) {
            this._worldPosition.copy(intersection.sub(this._offset));
          }
        }
      } else {
        this.onHover(null);
        if (this._targetMesh === null) {
          // free mode!this._targetMesh
          this._plane.position.copy(this._worldPosition);
          this._plane.direction.copy(this._camera.getWorldDirection());
        }
      }

      this.update();
    }
  }, {
    key: 'onHover',
    value: function onHover(evt) {
      if (evt) {
        evt.preventDefault();
        this.hoverDom(evt);
      }

      this.hoverMesh();

      this._hovered = this._meshHovered || this._domHovered;
      this._container.style.cursor = this._hovered ? 'pointer' : 'default';
    }
  }, {
    key: 'update',
    value: function update() {
      // general update
      this.updateColor();

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

      // DOM stuff
      this.updateDOMColor();
      this.updateDOMPosition();
    }

    //

  }, {
    key: 'updateMeshColor',
    value: function updateMeshColor() {
      if (this._material) {
        this._material.color.set(this._color);
      }
    }
  }, {
    key: 'updateMeshPosition',
    value: function updateMeshPosition() {
      if (this._mesh) {
        this._mesh.position.x = this._worldPosition.x;
        this._mesh.position.y = this._worldPosition.y;
        this._mesh.position.z = this._worldPosition.z;
      }
    }
  }, {
    key: 'hoverMesh',
    value: function hoverMesh() {
      // check raycast intersection, do we want to hover on mesh or just css?
      var intersectsHandle = this._raycaster.intersectObject(this._mesh);
      this._meshHovered = intersectsHandle.length > 0;
    }
  }, {
    key: 'hoverDom',
    value: function hoverDom(evt) {
      this._domHovered = evt.type === 'mouseenter';
    }
  }, {
    key: 'worldToScreen',
    value: function worldToScreen(worldCoordinate, camera, canvas) {
      var screenCoordinates = worldCoordinate.clone();
      screenCoordinates.project(camera);

      screenCoordinates.x = Math.round((screenCoordinates.x + 1) * canvas.offsetWidth / 2);
      screenCoordinates.y = Math.round((-screenCoordinates.y + 1) * canvas.offsetHeight / 2);
      screenCoordinates.z = 0;

      return screenCoordinates;
    }
  }, {
    key: 'createMesh',
    value: function createMesh() {
      // geometry
      this._geometry = new THREE.SphereGeometry(2, 32, 32);

      // material
      this._material = new THREE.MeshBasicMaterial({
        wireframe: true,
        wireframeLinewidth: 2
      });

      // mesh
      this._mesh = new THREE.Mesh(this._geometry, this._material);
      this._mesh.position.x = this._worldPosition.x;
      this._mesh.position.y = this._worldPosition.y;
      this._mesh.position.z = this._worldPosition.z;
      this._mesh.visible = true;

      this.updateMeshColor();

      // add it!
      this.add(this._mesh);
    }
  }, {
    key: 'createDOM',
    value: function createDOM() {
      // dom
      this._dom = document.createElement('div');
      this._dom.setAttribute('id', this.uuid);
      this._dom.setAttribute('class', 'widgets handle');
      // this._domStyles.circle();
      // this._domStyles.cross();
      this._dom.style.border = '2px solid';
      this._dom.style.backgroundColor = '#F9F9F9';
      this._dom.style.color = '#F9F9F9';
      this._dom.style.position = 'absolute';
      this._dom.style.width = '12px';
      this._dom.style.height = '12px';
      this._dom.style.margin = '-6px';
      this._dom.style.borderRadius = '50%';
      this._dom.style.transformOrigin = '0 100%';

      var posY = this._screenPosition.y - this._container.offsetHeight;
      this._dom.style.transform = 'translate3D(' + this._screenPosition.x + 'px, ' + posY + 'px, 0)';

      this.updateDOMColor();

      // add it!
      this._container.appendChild(this._dom);
    }
  }, {
    key: 'updateDOMPosition',
    value: function updateDOMPosition() {
      if (this._dom) {
        var posY = this._screenPosition.y - this._container.offsetHeight;
        this._dom.style.transform = 'translate3D(' + this._screenPosition.x + 'px, ' + posY + 'px, 0)';
      }
    }
  }, {
    key: 'updateDOMColor',
    value: function updateDOMColor() {
      this._dom.style.borderColor = '' + this._color;
    }
  }, {
    key: 'free',
    value: function free() {
      // threejs stuff

      // dom
      this._container.removeChild(this._dom);
      // event
      this.removeEventListeners();

      _get(WidgetsHandle.prototype.__proto__ || Object.getPrototypeOf(WidgetsHandle.prototype), 'free', this).call(this);
    }
  }, {
    key: 'worldPosition',
    set: function set(worldPosition) {
      this._worldPosition.copy(worldPosition);
      this._screenPosition = this.worldToScreen(this._worldPosition, this._camera, this._container);

      this.update();
    },
    get: function get() {
      return this._worldPosition;
    }
  }, {
    key: 'screenPosition',
    set: function set(screenPosition) {
      this._screenPosition = screenPosition;
    },
    get: function get() {
      return this._screenPosition;
    }
  }, {
    key: 'active',
    get: function get() {
      return this._active;
    },
    set: function set(active) {
      this._active = active;
      // this._tracking = this._active;
      this._controls.enabled = !this._active;

      this.update();
    }
  }, {
    key: 'tracking',
    get: function get() {
      return this._tracking;
    },
    set: function set(tracking) {
      this._tracking = tracking;
      this.update();
    }
  }]);

  return WidgetsHandle;
}(_widgets2.default);

// maybe just a string...
// this._domStyles = {
//   circle: function(){
//     this._dom.style.border = '2px solid #353535';
//     this._dom.style.backgroundColor = '#F9F9F9';
//     // this._dom.style.backgroundColor = 'rgba(230, 230, 230, 0.7)';
//     this._dom.style.color = '#F9F9F9';
//     this._dom.style.position = 'absolute';
//     this._dom.style.width = '12px';
//     this._dom.style.height = '12px';
//     this._dom.style.margin = '-6px';
//     this._dom.style.borderRadius =  '50%';
//     this._dom.style.transformOrigin = '0 100%';
//   },
//   cross: function(){

//   },
//   triangle: ``
// };

// <svg height="12" width="12">
//   <circle cx="6" cy="6" r="5" stroke="#353535" stroke-opacity="0.9" stroke-width="2" fill="#F9F9F9" fill-opacity="0.7" />
//   Sorry, your browser does not support inline SVG.
// </svg>

// <svg height="12" width="12">
// <line x1="0" y1="0" x2="12" y2="12" stroke="#353535" stroke-linecap="square" stroke-width="2" />
// <line x1="0" y1="12" x2="12" y2="0" stroke="#353535" stroke-linecap="square" stroke-width="2" />
// </svg>


// <svg height="12" width="12">
// <line x1="0" y1="12" x2="6" y2="6" stroke="#353535" stroke-linecap="square" stroke-width="2" />
// <line x1="6" y1="6" x2="12" y2="12" stroke="#353535" stroke-linecap="square" stroke-width="2" />
// </svg>
//


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