cyclejs-community / cycle-mouse-driver Goto Github PK

View Code? Open in Web Editor NEW

9.0 5.0 1.0 185 KB

Handles mouse events on the document in Cycle.js applications

License: MIT License

Shell 6.08% JavaScript 93.92%

cycle-mouse-driver's Introduction

Cycle Mouse Driver

Deprecated

Cycle DOM now supports selecting on document and body, so this driver is unnecessary.

A driver for Cycle.js to help you deal with mouse events in your application

Installation

$ npm install cycle-mouse-driver --save

Cycle Mouse Driver is stream library agnostic. You should be able to use it with RxJs, xstream, or whatever you like. Please open an issue if you have any troubles, and note which stream library you are using.

Usage

Install Cycle Mouse Driver with npm (see above)
Import the driver

import {makeMouseDriver} from 'cycle-mouse-driver';

Initialise the driver by calling makeMouseDriver() in your drivers object

const drivers = {
  Mouse: makeMouseDriver()
}

Add it to your main function's sources

function main({Mouse}) { /* Your amazing main function */ }

Methods

up(): returns a stream of mouseup events
down(): returns a stream of mousedown events
click(): returns a stream of click events
positions(): returns a stream of all mousemove events as a vector with an x and a y position.

const mousePosition$ = Mouse.positions();
const mouseUp$ = Mouse.up();

Example

Try this example online

import {run} from '@cycle/xstream-run';
import {makeDOMDriver, div, h1, h3} from '@cycle/dom';
import {makeMouseDriver} from 'cycle-mouse-position'
import xs from 'xstream';

export default function main({DOM, Mouse}){
  const mousePosition$ = Mouse.positions();

  return {
    DOM: mousePosition$.map(pos =>
      div(
        '.container', [
          h1('Where\'s my mouse at? 🐭'),
          h3(`X: ${pos.x}, Y: ${pos.y}`)
        ]
      )
    )
  }
}

const drivers = {
  DOM: makeDOMDriver('.app'),
  Mouse: makeMouseDriver()
};

run(app, drivers);

Feedback, Ideas, and Contributions welcome

We would love to hear from you if you have ideas for features we haven't implemented yet, feedback on the API and documentation, or would like to contribute. Feel free to write your ideas here, or open an issue. Thanks!

cycle-mouse-driver's People

Contributors

Stargazers

Watchers

Forkers

urkr

cycle-mouse-driver's Issues

Set up TravisCI

Ideas and Feedback

Users, contributors, collaborators, please let us know your thoughts this driver! We would love feedback about the api, ideas for features we haven't implemented yet, or any compliments you'd like to send our way 😉

Thanks for using Cycle Mouse Driver, and for taking the time to give feedback, it's appreciated!

User peer dependencies

Add TypeScript support

Would help people writing cycle.js apps with TypeScript (like me).
I could take this up.

Allow users to filter by DOM selector

i.e. const submitUp$ = Mouse.up('.submit-button'); returns a stream of mouse up events on .submit-button

Add a function for positions relative to an element

For example, relativePositions (element$): position$.

Add all MouseEvents

We could start with this as a reference:
http://javascript.info/tutorial/mouse-events

SImple Events:

Complex Events:

click
contextmenu
dblclick

We could also expose some more functionality, like the driver making a few events cross-platform.

Support Cycle Diversity

Deprecate this driver

Hey folks. Here's the good news: Cycle DOM now supports selecting document and body. Awesome! Users can now do things like:

DOM.select('document').events('mouseup');

Since this is now supported, we don't need to use a driver to do this.

What shall we do with Cycle Mouse Driver? Keep it, or deprecate it?

My preference would be to deprecate it, and encourage users to go ahead and use the new DOM feature.

Does anyone see a reason not to deprecate this driver?

Is cycle-mouse taken?

cycle-mouse sounds better than cycle-mouse-driver to me, and is also in line with other drivers like cycle dom and cycle http :)

Your thoughts, please?

Become a mouse driver instead

It would be great to have streams for mouseup, mousedown and click for the whole document. It can be useful in some components who want to know about mouse events in the outside world.