react-ink - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

CHANGELOG.md

 # CHANGELOG
 
+## v5.0.1
+
+- Fix case in React 0.13.3 where DOM node could not be found
+
 ## v5.0.0
@@ -4,0 +8,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,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")}]);
+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;i instanceof window.HTMLCanvasElement==!1&&(i=i.getDOMNode());var 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")}]);

package.json

 {
   "name": "react-ink",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "A React component for adding material design style ink.",
@@ -5,0 +5,0 @@ "main": "dist/ink.js",

src/index.jsx

@@ -118,2 +118,7 @@ /**
 
+    // 0.13 support
+    if (el instanceof window.HTMLCanvasElement === false) {
+      el = el.getDOMNode()
+    }
+
     let { top, bottom, left, right } = el.getBoundingClientRect()
@@ -120,0 +125,0 @@ let { color }                    = window.getComputedStyle(el)

No alert changes

Improved metrics

Total package byte prevSize

18578

increased by1.38%

Lines of code

349

increased by1.16%

No dependency changes