react-ink - npm Package Compare versions

Comparing version 4.1.0 to 5.0.0

CHANGELOG.md

 # CHANGELOG
 
-## 4.1.0
+## v5.0.0
 
-- Added `hasTouch` property to force touch (thanks to @khinlatt)
+- Updates to internals to support React 0.14.0
+- Breaking peer dependency update to React 0.13.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){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,hasTouch:l.bool},getDefaultProps:function(){return{background:!0,duration:1e3,opacity:.25,radius:150,recenter:!0,hasTouch:i}},getInitialState:function(){return{color:"transparent",density:1,height:0,store:c(this.tick),touchEvents:this.touchEvents(),width:0}},touchEvents:function(){return this.props.hasTouch?{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 c(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),c=.15*a(i(t),0,o,e),l=.02*o*s(Date.now()/e);return u(0,r+c+l)}var a=o(3),s=Math.cos,u=Math.max,c=Math.min;t.exports={getMaxRadius:function(t,e,o){return c(.5*u(t,e),o)},getBlotOpacity:function(t,e){return a(i(t),e,-e,t.duration)},getBlotOuterOpacity:function(t,e){return c(this.getBlotOpacity(t,e),a(n(t),0,.3,3*t.duration))},getBlotShiftX:function(t,e,o){return c(1,r(t)/e*2/1.4142135623730951)*(o/2-t.x)},getBlotShiftY:function(t,e,o){return c(1,r(t)/e*2/1.4142135623730951)*(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")}]);
+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,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,hasTouch:l.bool},getDefaultProps:function(){return{background:!0,duration:1e3,opacity:.25,radius:150,recenter:!0,hasTouch:i}},getInitialState:function(){return{color:"transparent",density:1,height:0,store:c(this.tick),touchEvents:this.touchEvents(),width:0}},touchEvents:function(){return this.props.hasTouch?{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.refs.canvas,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),v=u-s,m=l-c,x=p.getMaxRadius(v,m,this.props.radius);this.setState({color:f,ctx:d,density:g,height:v,width:m},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",ref:"canvas",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){"use strict";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){"use strict";t.exports={borderRadius:"inherit",height:"100%",left:0,position:"absolute",top:0,width:"100%"}},function(t,e){"use strict";t.exports=function(t,e,o,n){return o*((t=t/n-1)*t*t*t*t+1)+e}},function(t,e){"use strict";var o=!1;"undefined"!=typeof window&&(o="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch),t.exports=o},function(t,e){"use strict";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){"use strict";function o(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"]=o,t.exports=e["default"]},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,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){t.exports=require("react")}]);

example/index.js

@@ -1,8 +0,6 @@
-import React from 'react/addons'
+import React from 'react'
+import ReactDOM from 'react-dom'
 import Ink   from '../src/index'
+import Test  from 'react-addons-test-utils'
 
-let Test = React.addons.TestUtils
-
-React.initializeTouchEvents(true)
-
 let Component = React.createClass({
@@ -30,3 +28,3 @@
 let playing = false
-let component = React.render(<Component />, document.body)
+let component = ReactDOM.render(<Component />, document.getElementById('app'))
 let delta = Date.now()
@@ -45,3 +43,3 @@ let frame = null
         delta = Date.now()
-        let dom = component.refs.background.getDOMNode()
+        let dom = ReactDOM.findDOMNode(component.refs.background)
 
@@ -48,0 +46,0 @@ Test.Simulate.mouseDown(dom, {

package.json

 {
   "name": "react-ink",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "A React component for adding material design style ink.",
@@ -18,2 +18,7 @@ "main": "dist/ink.js",
   ],
+  "babel": {
+    "stage": 2,
+    "loose": "all",
+    "optional": []
+  },
   "author": "Nate Hunzaker",
@@ -24,3 +29,5 @@ "license": "MIT",
     "babel-loader": "~5",
-    "react": "~0.13",
+    "react": "~0.14.0",
+    "react-addons-test-utils": "0.14.0",
+    "react-dom": "~0.14.0",
     "webpack": "~1",
@@ -30,4 +37,4 @@ "webpack-dev-server": "~1"
   "peerDependencies": {
-    "react": ">= 0.12 < 0.14"
+    "react": ">= 0.13"
   }
 }

src/index.jsx

@@ -116,3 +116,3 @@ /**
   pushBlot(timeStamp, clientX, clientY) {
-    let el = this.getDOMNode()
+    let el = this.refs.canvas
 
@@ -145,2 +145,3 @@ let { top, bottom, left, right } = el.getBoundingClientRect()
       <canvas className="ink"
+              ref="canvas"
               style={{ ...STYLE, ...this.props.style }}
@@ -147,0 +148,0 @@ height={ height * density }

No alert changes

Improved metrics

Total package byte prevSize

18325

increased by0.54%

Lines of code

345

increased by0.29%

Worsened metrics

Dev dependency count

7

increased by40%

Number of package files

17

decreased by-5.56%

No dependency changes