react-ink - npm Package Compare versions

Comparing version 4.0.0-rc5 to 4.0.0

dist/ink.js

@@ -1,1 +0,1 @@
-module.exports=function(t){function e(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){"use strict";var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},i=o(4),r=0,s=o(5),a=o(8),u=o(2),c=o(7),h=a.PropTypes,l=2*Math.PI,p=o(1),f=o(6),d=a.createClass({displayName:"Ink",shouldComponentUpdate:f,propTypes:{background:h.bool,duration:h.number,opacity:h.number,radius:h.number,recenter:h.bool},getDefaultProps:function(){return{background:!0,duration:1e3,opacity:.25,radius:150,recenter:!0}},getInitialState:function(){return{store:c(this.tick),touchEvents:this.touchEvents()}},touchEvents:function(){return i?{onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease}:{onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease}},tick:function(){var t=this.state.ctx,e=this.state.color,o=this.state.density,n=this.state.height,i=this.state.width,r=this.state.store;t.save(),t.scale(o,o),t.clearRect(0,0,i,n),t.fillStyle=e,this.props.background&&(t.globalAlpha=r.getTotalOpacity(this.props.opacity),t.fillRect(0,0,i,n)),r.each(this.makeBlot,this),t.restore()},makeBlot:function(t){var e=this.state.ctx,o=this.state.height,n=this.state.width,i=t.x,r=t.y,s=t.radius;if(e.globalAlpha=p.getBlotOpacity(t,this.props.opacity),e.beginPath(),this.props.recenter){var a=Math.max(o,n);i+=p.getBlotShiftX(t,a,n),r+=p.getBlotShiftY(t,a,o)}e.arc(i,r,s*p.getBlotScale(t),0,l),e.closePath(),e.fill()},componentWillUnmount:function(){this.state.store.stop()},pushBlot:function(t,e,o){var n=this,i=this.getDOMNode(),r=i.getBoundingClientRect(),a=r.top,u=r.bottom,c=r.left,h=r.right,l=window.getComputedStyle(i),f=l.color,d=this.state.ctx||i.getContext("2d"),g=this.state.density||s(d),m=u-a,v=h-c,x=p.getMaxRadius(m,v,this.props.radius);this.setState({color:f,ctx:d,density:g,height:m,width:v},function(){n.state.store.add({duration:n.props.duration,mouseDown:t,mouseUp:0,radius:x,x:e-c,y:o-a})})},render:function(){var t=this.state.density,e=this.state.height,o=this.state.width,i=this.state.touchEvents;return a.createElement("canvas",n({className:"ink",style:n({},u,this.props.style),height:e*t,width:o*t,onDragOver:this._onRelease},i))},_onPress:function(t){var e=t.button,o=t.ctrlKey,n=t.clientX,i=t.clientY,s=t.changedTouches,a=Date.now();if(s)for(var u=0;u<s.length;u++){var c=s[u].clientX,h=s[u].clientY;this.pushBlot(a,c,h)}else e!==r||o||this.pushBlot(a,n,i)},_onRelease:function(){this.state.store.release(Date.now())}});t.exports=d},function(t,e,o){"use strict";function n(t){return h(t.duration,Date.now()-t.mouseDown)}function i(t){return t.mouseUp>0?Date.now()-t.mouseUp:0}function r(t){var e=t.duration,o=t.radius,r=.85*s(n(t),0,o,e),a=.15*s(i(t),0,o,e),h=.02*o*u(Date.now()/e);return c(0,r+a+h)}var s=o(3),a=Math.sqrt(2),u=Math.cos,c=Math.max,h=Math.min;t.exports={getMaxRadius:function(t,e,o){return h(.5*c(t,e),o)},getBlotOpacity:function(t,e){return s(i(t),e,-e,t.duration)},getBlotOuterOpacity:function(t,e){return h(this.getBlotOpacity(t,e),s(n(t),0,.3,3*t.duration))},getBlotShiftX:function(t,e,o){return h(1,r(t)/e*2/a)*(o/2-t.x)},getBlotShiftY:function(t,e,o){return h(1,r(t)/e*2/a)*(o/2-t.y)},getBlotScale:function(t){return r(t)/t.radius}}},function(t){"use strict";t.exports={borderRadius:"inherit",height:"100%",left:0,position:"absolute",top:0,width:"100%"}},function(t){"use strict";t.exports=function(t,e,o,n){return o*((t=t/n-1)*t*t*t*t+1)+e}},function(t){"use strict";var e=!1;"undefined"!=typeof window&&(e="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch),t.exports=e},function(t){"use strict";t.exports=function(t){var e=window.devicePixelRatio||1,o=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/o}},function(t){"use strict";function e(t,e){for(var o in t)if(this.props[o]!==t[o])return!0;for(var n in e)if(this.state[n]!==e[n])return!0;return!1}t.exports=e},function(t,e,o){"use strict";var n=o(1),i=function(t){var e=t.mouseUp,o=t.duration;return!e||Date.now()-e<o};t.exports=function(t){var e=[],o=!1,r=void 0,s={each:function(t,o){for(var n=0,i=e.length;i>n;n++)t.call(o,e[n])},play:function(){o||(o=!0,s.update())},stop:function(){o=!1,cancelAnimationFrame(r)},getTotalOpacity:function(t){for(var o=0,i=0,r=e.length;r>i;i++)o+=n.getBlotOuterOpacity(e[i],t);return o},update:function(){e=e.filter(i),e.length?(r=requestAnimationFrame(s.update),t()):s.stop()},add:function(t){e.push(t),s.play()},release:function(t){for(var o=e.length-1;o>=0;o--)if(!e[o].mouseUp)return e[o].mouseUp=t}};return s}},function(t){t.exports=require("react")}]);
+module.exports=function(t){function e(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var o={};return e.m=t,e.c=o,e.p="",e(0)}([function(t,e,o){var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},i=o(4),r=0,a=o(5),s=o(8),u=o(2),c=o(7),l=s.PropTypes,h=2*Math.PI,p=o(1),f=o(6),d=s.createClass({displayName:"Ink",shouldComponentUpdate:f,propTypes:{background:l.bool,duration:l.number,opacity:l.number,radius:l.number,recenter:l.bool},getDefaultProps:function(){return{background:!0,duration:1e3,opacity:.25,radius:150,recenter:!0}},getInitialState:function(){return{color:"transparent",density:1,height:0,store:c(this.tick),touchEvents:this.touchEvents(),width:0}},touchEvents:function(){return i?{onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease}:{onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease}},tick:function(){var t=this.state,e=t.ctx,o=t.color,n=t.density,i=t.height,r=t.width,a=t.store;e.save(),e.scale(n,n),e.clearRect(0,0,r,i),e.fillStyle=o,this.props.background&&(e.globalAlpha=a.getTotalOpacity(this.props.opacity),e.fillRect(0,0,r,i)),a.each(this.makeBlot,this),e.restore()},makeBlot:function(t){var e=this.state,o=e.ctx,n=e.height,i=e.width,r=t.x,a=t.y,s=t.radius;if(o.globalAlpha=p.getBlotOpacity(t,this.props.opacity),o.beginPath(),this.props.recenter){var u=Math.max(n,i);r+=p.getBlotShiftX(t,u,i),a+=p.getBlotShiftY(t,u,n)}o.arc(r,a,s*p.getBlotScale(t),0,h),o.closePath(),o.fill()},componentWillUnmount:function(){this.state.store.stop()},pushBlot:function(t,e,o){var n=this,i=this.getDOMNode(),r=i.getBoundingClientRect(),s=r.top,u=r.bottom,c=r.left,l=r.right,h=window.getComputedStyle(i),f=h.color,d=this.state.ctx||i.getContext("2d"),g=a(d),m=u-s,v=l-c,x=p.getMaxRadius(m,v,this.props.radius);this.setState({color:f,ctx:d,density:g,height:m,width:v},function(){n.state.store.add({duration:n.props.duration,mouseDown:t,mouseUp:0,radius:x,x:e-c,y:o-s})})},render:function(){var t=this.state,e=t.density,o=t.height,i=t.width,r=t.touchEvents;return s.createElement("canvas",n({className:"ink",style:n({},u,this.props.style),height:o*e,width:i*e,onDragOver:this._onRelease},r))},_onPress:function(t){var e=t.button,o=t.ctrlKey,n=t.clientX,i=t.clientY,a=t.changedTouches,s=Date.now();if(a)for(var u=0;u<a.length;u++){var c=a[u],l=c.clientX,h=c.clientY;this.pushBlot(s,l,h)}else e!==r||o||this.pushBlot(s,n,i)},_onRelease:function(){this.state.store.release(Date.now())}});t.exports=d},function(t,e,o){function n(t){return l(t.duration,Date.now()-t.mouseDown)}function i(t){return t.mouseUp>0?Date.now()-t.mouseUp:0}function r(t){var e=t.duration,o=t.radius,r=.85*a(n(t),0,o,e),s=.15*a(i(t),0,o,e),l=.02*o*u(Date.now()/e);return c(0,r+s+l)}var a=o(3),s=Math.sqrt(2),u=Math.cos,c=Math.max,l=Math.min;t.exports={getMaxRadius:function(t,e,o){return l(.5*c(t,e),o)},getBlotOpacity:function(t,e){return a(i(t),e,-e,t.duration)},getBlotOuterOpacity:function(t,e){return l(this.getBlotOpacity(t,e),a(n(t),0,.3,3*t.duration))},getBlotShiftX:function(t,e,o){return l(1,r(t)/e*2/s)*(o/2-t.x)},getBlotShiftY:function(t,e,o){return l(1,r(t)/e*2/s)*(o/2-t.y)},getBlotScale:function(t){return r(t)/t.radius}}},function(t,e,o){t.exports={borderRadius:"inherit",height:"100%",left:0,position:"absolute",top:0,width:"100%"}},function(t,e,o){t.exports=function(t,e,o,n){return o*((t=t/n-1)*t*t*t*t+1)+e}},function(t,e,o){var n=!1;"undefined"!=typeof window&&(n="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch),t.exports=n},function(t,e,o){e.__esModule=!0,e["default"]=function(t){var e=window.devicePixelRatio||1,o=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/o},t.exports=e["default"]},function(t,e,o){function n(t,e){for(var o in t)if(this.props[o]!==t[o])return!0;for(var n in e)if(this.state[n]!==e[n])return!0;return!1}e.__esModule=!0,e["default"]=n,t.exports=e["default"]},function(t,e,o){var n=o(1),i=function(t){var e=t.mouseUp,o=t.duration;return!e||Date.now()-e<o};t.exports=function(t){var e=[],o=!1,r=void 0,a={each:function(t,o){for(var n=0,i=e.length;i>n;n++)t.call(o,e[n])},play:function(){o||(o=!0,a.update())},stop:function(){o=!1,cancelAnimationFrame(r)},getTotalOpacity:function(t){for(var o=0,i=0,r=e.length;r>i;i++)o+=n.getBlotOuterOpacity(e[i],t);return o},update:function(){e=e.filter(i),e.length?(r=requestAnimationFrame(a.update),t()):a.stop()},add:function(t){e.push(t),a.play()},release:function(t){for(var o=e.length-1;o>=0;o--)if(!e[o].mouseUp)return e[o].mouseUp=t}};return a}},function(t,e,o){t.exports=require("react")}]);

example/index.js

@@ -6,2 +6,4 @@ import React from 'react/addons'
 
+React.initializeTouchEvents(true)
+
 let Component = React.createClass({
@@ -8,0 +10,0 @@

package.json

 {
   "name": "react-ink",
-  "version": "4.0.0-rc5",
+  "version": "4.0.0",
   "description": "A React component for adding material design style ink.",
@@ -8,4 +8,3 @@ "main": "dist/ink.js",
     "start": "webpack-dev-server --config=webpack.example.config.js",
-    "prepublish": "webpack -pcmv && echo `gzip -c dist/ink.js | wc -c`",
-    "test": "jest"
+    "prepublish": "webpack -p && echo `gzip -c dist/ink.js | wc -c`"
   },
@@ -20,29 +19,14 @@ "repository": {
   ],
-  "jest": {
-    "scriptPreprocessor": "<rootDir>/node_modules/6to5-jest",
-    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/react"
-    ],
-    "globals": {
-      "__DEV__": true
-    }
-  },
   "author": "Nate Hunzaker",
   "license": "MIT",
   "devDependencies": {
-    "6to5": "^3.1.1",
-    "6to5-jest": "^3.0.0",
-    "6to5-loader": "^3.0.0",
-    "6to5-runtime": "^3.1.1",
-    "envify": "^3.2.0",
-    "jest-cli": "^0.1.18",
-    "react": "^0.12.2",
-    "react-tools": "^0.12.2",
-    "transform-loader": "^0.2.1",
-    "webpack": "^1.4.13",
-    "webpack-dev-server": "^1.6.6"
+    "babel-core": "~5",
+    "babel-loader": "~5",
+    "react": "~0.13",
+    "webpack": "~1",
+    "webpack-dev-server": "~1"
   },
   "peerDependencies": {
-    "react": ">= 0.12.x"
+    "react": ">= 0.12 < 0.14"
   }
 }

readme.md

@@ -39,9 +39,9 @@ [![NPM](https://nodei.co/npm/react-ink.png?compact=true)](https://npmjs.org/package/react-ink)
 {
-  background : true,           // When true, pressing the ink will cause the background to fill with the current color
-  duration   : 1000,           // Duration of the full animation completion
-  opacity    : 0.25,           // The opacity of the ink blob
-  radius     : 150,            // The size of the effect, will not exceed bounds of containing element
-  recenter   : true,           // When true, recenter will pull ink towards the center of the containing element
-  style      : {...}           // See src/style.js. Any rules set here will extend these values
+  background : true,  // When true, pressing the ink will cause the background to fill with the current color
+  duration   : 1000,  // Duration of the full animation completion
+  opacity    : 0.25,  // The opacity of the ink blob
+  radius     : 150,   // The size of the effect, will not exceed bounds of containing element
+  recenter   : true,  // When true, recenter will pull ink towards the center of the containing element
+  style      : {...}  // See src/style.js. Any rules set here will extend these values
 }
 ```

src/index.jsx

@@ -42,4 +42,8 @@ /**
     return {
+      color       : 'transparent',
+      density     : 1,
+      height      : 0,
       store       : Store(this.tick),
-      touchEvents : this.touchEvents()
+      touchEvents : this.touchEvents(),
+      width       : 0
     }
@@ -116,4 +120,4 @@ },
 
-    let ctx     = this.state.ctx     || el.getContext('2d');
-    let density = this.state.density || pixelRatio(ctx)
+    let ctx     = this.state.ctx || el.getContext('2d');
+    let density = pixelRatio(ctx)
     let height  = bottom - top
@@ -120,0 +124,0 @@ let width   = right - left

webpack.example.config.js

@@ -1,4 +0,1 @@
-var Path    = require('path')
-var WebPack = require('webpack')
-
 module.exports = {
@@ -15,4 +12,3 @@ entry: './example/index.js',
   resolve: {
-    extensions: ['', '.js', '.jsx', '.json'],
-    modulesDirectories: [ 'web_modules', 'node_modules' ]
+    extensions: ['', '.js', '.jsx']
   },
@@ -25,7 +21,3 @@
         exclude : /node_modules/,
-        loader  : '6to5?experimental'
-      },
-      {
-        test    : /\.json$/,
-        loader  : 'json-loader'
+        loader  : 'babel'
       }
@@ -32,0 +24,0 @@ ]

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

5

decreased by-54.55%

Number of package files

17

increased by6.25%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

17915

decreased by-2.06%

Lines of code

342

decreased by-0.58%

No dependency changes