Mouse Move RxJs Interval

Change class name on click in jQuery

by black strings

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>

CSS

#main{
  width: 200px;
  height:200px;
  border:thin solid grey;
}

JavaScript

//emit value every 1 second
var div = document.createElement('div');
div.innerHTML = 'status';
document.body.appendChild(div);

var display = function(val){
	var msg = val;
	div.innerHTML = msg;
  console.log(msg);
}

var points = [];
var oldPoint = new THREE.Vector3();
var newPoint = new THREE.Vector3();
var mouseDownPoint = new THREE.Vector3();

var isMouseDown = false;
var isPrecision = false;

const tickerInterval = Rx.Observable.interval(2000);

//  throttle for five seconds
//  last value emitted before throttle ends will be emitted from source


//const example = source.throttleTime(5000);
  //output: 0...6...12
var tickSubscriber; 
var isIntervalStarted = false;

var stopInterval = function(){
	isIntervalStarted = false;
	if(tickSubscriber){
  	tickSubscriber.unsubscribe();
  }
}

// trigger precision
var startInterval = function(){	
	isIntervalStarted = true;
	// interval helps swtich back into precision mode when
  // the mouse is not being moved
  tickSubscriber = tickerInterval.subscribe((val) => {
  	//display(ox + ',' + x + ': ' + oy + ',' + y);
    if(!isPrecision){
    	var dist = oldPoint.distanceTo(newPoint);
      var result = dist < 5;
      if(result){
        isPrecision = true;
      }
    }
    
    if(isPrecision) {
    	display('precision mode');
    }else{
    	display('normal mode');
    }
    
    //display(ox + ',' + x + ': ' + oy + ',' + y);
  });
}

var mousemove = Rx.Observable.fromEvent(document, 'mousemove');
mousemove.throttleTime(100).subscribe((evt) => {

	if(isMouseDown){
  	newPoint.x = evt.offsetX;
    newPoint.y = evt.offsetY;
    
    if(isPrecision){
      // threshold when to break out
      var threshold = 200;
      if(mouseDownPoint.distanceTo(newPoint) > threshold){
        console.log('break out precision');
        isPrecision = false;
        stopInterval();
      }
      
    }else{
      console.log('mousemove');
      oldPoint.copy(newPoint);
      newPoint.x = evt.offsetX;
      newPoint.y = evt.offsetY;
   ...