SelectionHelper.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. function SelectionHelper ( selectionBox, renderer, cssClassName ) {
  2. this.element = document.createElement( "div" );
  3. this.element.classList.add( cssClassName );
  4. this.element.style.pointerEvents = "none";
  5. this.renderer = renderer;
  6. this.startPoint = { x: 0, y: 0 };
  7. this.pointTopLeft = { x: 0, y: 0 };
  8. this.pointBottomRight = { x: 0, y: 0 };
  9. this.isDown = false;
  10. this.renderer.domElement.addEventListener( "mousedown", function ( event ) {
  11. this.isDown = true;
  12. this.onSelectStart( event );
  13. }.bind( this ), false );
  14. this.renderer.domElement.addEventListener( "mousemove", function ( event ) {
  15. if ( this.isDown ) {
  16. this.onSelectMove( event );
  17. }
  18. }.bind( this ), false );
  19. this.renderer.domElement.addEventListener( "mouseup", function ( event ) {
  20. this.isDown = false;
  21. this.onSelectOver( event );
  22. }.bind( this ), false );
  23. }
  24. SelectionHelper.prototype.onSelectStart = function ( event ) {
  25. this.renderer.domElement.parentElement.appendChild( this.element );
  26. this.element.style.left = event.clientX + "px";
  27. this.element.style.top = event.clientY + "px";
  28. this.element.style.width = "0px";
  29. this.element.style.height = "0px";
  30. this.startPoint.x = event.clientX;
  31. this.startPoint.y = event.clientY;
  32. }
  33. SelectionHelper.prototype.onSelectMove = function ( event ) {
  34. this.pointBottomRight.x = Math.max( this.startPoint.x, event.clientX );
  35. this.pointBottomRight.y = Math.max( this.startPoint.y, event.clientY );
  36. this.pointTopLeft.x = Math.min( this.startPoint.x, event.clientX );
  37. this.pointTopLeft.y = Math.min( this.startPoint.y, event.clientY );
  38. this.element.style.left = this.pointTopLeft.x + "px";
  39. this.element.style.top = this.pointTopLeft.y + "px";
  40. this.element.style.width = ( this.pointBottomRight.x - this.pointTopLeft.x ) + "px";
  41. this.element.style.height = ( this.pointBottomRight.y - this.pointTopLeft.y ) + "px";
  42. }
  43. SelectionHelper.prototype.onSelectOver = function ( event ) {
  44. this.element.parentElement.removeChild( this.element );
  45. }