chenxeed/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <div style="width:100%; height:100%; position:absolute;top:0; background:blue"></div>
  <!-- put markup and other contents here -->
</body>
</html>

## index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program

import xs from 'xstream';
import fromEvent from 'xstream/extra/fromEvent';
import Rx from 'rxjs';

// const mouseDown$ = fromEvent( document.body, 'mousedown');
// const mouseMove$ = fromEvent( document.body, 'mousemove');
// const mouseUp$ = fromEvent( document.body, 'mouseup');

// const between = (a$, b$) => source$ => a$.mapTo( source$.endWhen( b$ )).flatten()
// const mouseDrag$ = mouseMove$.compose( between( mouseDown$, mouseUp$ ));
// // const mouseDrag = stop$ => source$ => source$.endWhen(stop$);
// // const mouseDrag$ = mouseDown$.mapTo( mouseMove$.map(mouseDrag(mouseUp$) ) ).flatten();

// mouseDrag$.addListener({
//   next: e => console.log('mouse', e)
// })

const mouseDown$ = Rx.Observable.fromEvent( document.body, 'mousedown');
const mouseMove$ = Rx.Observable.fromEvent( document.body, 'mousemove');
const mouseUp$ = Rx.Observable.fromEvent( document.body, 'mouseup');

const between = (a$, b$) => source$ => {


  return a$.map( () => source$.takeUntil(b$) ).switch()
};

const mouseDrag$ = mouseMove$.let( between(mouseDown$, mouseUp$));

mouseDrag$.subscribe(console.log);

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "xstream": "10.2.0",
    "rxjs": "5.3.0"
  }
}

## transpiled.js
'use strict';

var _xstream = require('xstream');

var _xstream2 = _interopRequireDefault(_xstream);

var _fromEvent = require('xstream/extra/fromEvent');

var _fromEvent2 = _interopRequireDefault(_fromEvent);

var _rxjs = require('rxjs');

var _rxjs2 = _interopRequireDefault(_rxjs);

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

// const mouseDown$ = fromEvent( document.body, 'mousedown');
// const mouseMove$ = fromEvent( document.body, 'mousemove');
// const mouseUp$ = fromEvent( document.body, 'mouseup');

// const between = (a$, b$) => source$ => a$.mapTo( source$.endWhen( b$ )).flatten()
// const mouseDrag$ = mouseMove$.compose( between( mouseDown$, mouseUp$ ));
// // const mouseDrag = stop$ => source$ => source$.endWhen(stop$);
// // const mouseDrag$ = mouseDown$.mapTo( mouseMove$.map(mouseDrag(mouseUp$) ) ).flatten();

// mouseDrag$.addListener({
//   next: e => console.log('mouse', e)
// })

var mouseDown$ = _rxjs2.default.Observable.fromEvent(document.body, 'mousedown'); // write ES2015 code and import modules from npm
// and then press "Execute" to run your program

var mouseMove$ = _rxjs2.default.Observable.fromEvent(document.body, 'mousemove');
var mouseUp$ = _rxjs2.default.Observable.fromEvent(document.body, 'mouseup');

var between = function between(a$, b$) {
  return function (source$) {

    return a$.map(function () {
      return source$.takeUntil(b$);
    }).switch();
  };
};

var mouseDrag$ = mouseMove$.let(between(mouseDown$, mouseUp$));

mouseDrag$.subscribe(console.log);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<div style="width:100%; height:100%; position:absolute;top:0; background:blue"></div>
	<!-- put markup and other contents here -->
	</body>
	</html>
	// write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	import xs from 'xstream';
	import fromEvent from 'xstream/extra/fromEvent';
	import Rx from 'rxjs';

	// const mouseDown$ = fromEvent( document.body, 'mousedown');
	// const mouseMove$ = fromEvent( document.body, 'mousemove');
	// const mouseUp$ = fromEvent( document.body, 'mouseup');

	// const between = (a$, b$) => source$ => a$.mapTo( source$.endWhen( b$ )).flatten()
	// const mouseDrag$ = mouseMove$.compose( between( mouseDown$, mouseUp$ ));
	// // const mouseDrag = stop$ => source$ => source$.endWhen(stop$);
	// // const mouseDrag$ = mouseDown$.mapTo( mouseMove$.map(mouseDrag(mouseUp$) ) ).flatten();

	// mouseDrag$.addListener({
	// next: e => console.log('mouse', e)
	// })

	const mouseDown$ = Rx.Observable.fromEvent( document.body, 'mousedown');
	const mouseMove$ = Rx.Observable.fromEvent( document.body, 'mousemove');
	const mouseUp$ = Rx.Observable.fromEvent( document.body, 'mouseup');

	const between = (a$, b$) => source$ => {


	return a$.map( () => source$.takeUntil(b$) ).switch()
	};

	const mouseDrag$ = mouseMove$.let( between(mouseDown$, mouseUp$));

	mouseDrag$.subscribe(console.log);
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"xstream": "10.2.0",
	"rxjs": "5.3.0"
	}
	}
	'use strict';

	var _xstream = require('xstream');

	var _xstream2 = _interopRequireDefault(_xstream);

	var _fromEvent = require('xstream/extra/fromEvent');

	var _fromEvent2 = _interopRequireDefault(_fromEvent);

	var _rxjs = require('rxjs');

	var _rxjs2 = _interopRequireDefault(_rxjs);

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

	// const mouseDown$ = fromEvent( document.body, 'mousedown');
	// const mouseMove$ = fromEvent( document.body, 'mousemove');
	// const mouseUp$ = fromEvent( document.body, 'mouseup');

	// const between = (a$, b$) => source$ => a$.mapTo( source$.endWhen( b$ )).flatten()
	// const mouseDrag$ = mouseMove$.compose( between( mouseDown$, mouseUp$ ));
	// // const mouseDrag = stop$ => source$ => source$.endWhen(stop$);
	// // const mouseDrag$ = mouseDown$.mapTo( mouseMove$.map(mouseDrag(mouseUp$) ) ).flatten();

	// mouseDrag$.addListener({
	// next: e => console.log('mouse', e)
	// })

	var mouseDown$ = _rxjs2.default.Observable.fromEvent(document.body, 'mousedown'); // write ES2015 code and import modules from npm
	// and then press "Execute" to run your program

	var mouseMove$ = _rxjs2.default.Observable.fromEvent(document.body, 'mousemove');
	var mouseUp$ = _rxjs2.default.Observable.fromEvent(document.body, 'mouseup');

	var between = function between(a$, b$) {
	return function (source$) {

	return a$.map(function () {
	return source$.takeUntil(b$);
	}).switch();
	};
	};

	var mouseDrag$ = mouseMove$.let(between(mouseDown$, mouseUp$));

	mouseDrag$.subscribe(console.log);