cycle-canvas - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

lib/canvas-driver.js

@@ -26,2 +26,10 @@ 'use strict';
 
+var _fromEvent = require('xstream/extra/fromEvent');
+
+var _fromEvent2 = _interopRequireDefault(_fromEvent);
+
+var _windowOrGlobal = require('window-or-global');
+
+var _windowOrGlobal2 = _interopRequireDefault(_windowOrGlobal);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -364,8 +372,8 @@
 
-  var canvas = document.querySelector(selector);
+  var canvas = _windowOrGlobal2.default.document.querySelector(selector);
 
   if (!canvas) {
-    canvas = document.createElement('canvas');
+    canvas = _windowOrGlobal2.default.document.createElement('canvas');
 
-    document.body.appendChild(canvas);
+    _windowOrGlobal2.default.document.body.appendChild(canvas);
   }
@@ -406,3 +414,7 @@
 
-    return (0, _adapt.adapt)(_xstream2.default.empty());
+    return {
+      events: function events(eventName) {
+        return (0, _adapt.adapt)((0, _fromEvent2.default)(canvas, eventName));
+      }
+    };
   };
@@ -409,0 +421,0 @@

package.json

 {
   "name": "cycle-canvas",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A canvas driver for Cycle.js",
@@ -59,2 +59,3 @@ "main": "lib/canvas-driver.js",
     "eslint-plugin-standard": "^3.0.1",
+    "jsdom": "^11.3.0",
     "keycode": "^2.1.1",
@@ -67,4 +68,5 @@ "lodash": "^4.8.1",
   "dependencies": {
+    "window-or-global": "^1.0.1",
     "xstream": "^10.3.0"
   }
 }

README.md

@@ -77,2 +77,6 @@ # cycle-canvas [![npm version](https://badge.fury.io/js/cycle-canvas.svg)](https://badge.fury.io/js/cycle-canvas) [![Build Status](https://travis-ci.org/cyclejs-community/cycle-canvas.svg?branch=master)](https://travis-ci.org/cyclejs-community/cycle-canvas)
 
+#### Using event streams of the canvas element
+
+- [`sources.Canvas.events`](#events)
+
 #### Drawing shapes and text
@@ -82,2 +86,4 @@
 - [`line`](#line)
+- [`arc`](#arc)
+- [`polygon`](#polygon)
 - [`text`](#text)
@@ -108,3 +114,43 @@ - [`image`](#image)
 
+## Using event streams of the canvas element
 
+### <a id="events"></a> `sources.Canvas.events(eventName)`
+
+Canvas driver exposes a source object with an `events` method, which works similarly to the `events` method of the DOM driver.
+
+#### Example:
+```js
+import {run} from '@cycle/rxjs-run';
+import {makeCanvasDriver, rect, text} from 'cycle-canvas';
+import 'rxjs'
+
+function main (sources) {
+  const canvasClick$ = sources.Canvas.events('click')
+  const counter$ = canvasClick$.startWith(0).scan(counter => counter + 1)
+  return {
+    Canvas: counter$.map(counter =>
+      rect({
+        children: [
+          text({
+            x: 15,
+            y: 25,
+            value: `Canvas was clicked ${counter} times`,
+            font: '18pt Arial',
+            draw: [
+              {fill: 'black'}
+            ]
+          })
+        ]
+      })
+    )
+  };
+}
+
+const drivers = {
+  Canvas: makeCanvasDriver(null, {width: 800, height: 600})
+};
+
+run(main, drivers);
+```
+
 ## Drawing shapes and text
@@ -188,2 +234,31 @@
 
+### <a id="arc"></a> `arc(params = {})`
+
+Draws an arc given an object containing drawing parameters.
+
+#### params {}:
+- `x: number` The x coordinate of the arc's center.
+- `y: number` The y coordinate of the arc's center.
+- `radius: number` The arc's radius.
+- `startAngle: number` The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
+- `endAngle: number` The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.
+- `anticlockwise` An optional Boolean which, if true, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.
+- `draw: array` List of drawing operation objects.
+  - `fill: string` The color or style to use inside the arc.
+  - `stroke: string` The color or style to use as the stroke style.
+- `children: array` List of child drawing shapes or text. This property is **optional**.
+
+#### Example:
+```js
+arc({
+  x: 50,
+  y: 50,
+  radius: 50,
+  startAngle: 0,
+  endAngle: 2 * Math.PI,
+  false,
+  draw: [{fill: 'red'}, {stroke: 'black'}]
+})
+```
+
 ### <a id="polygon"></a> `polygon(params = {})`
@@ -190,0 +265,0 @@

No alert changes

Improved metrics

Total package byte prevSize

24386

increased by12.12%

Lines of code

328

increased by2.5%

Number of lines in readme file

425

increased by21.43%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

27

increased by3.85%

Dependency changes

• + Addedwindow-or-global@^1.0.1

• + Addedwindow-or-global@1.0.1(transitive)