react-ink - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

dist/ink.js

@@ -1,1 +0,1 @@
-module.exports=function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},r=n(5),i=n(7),s=n(2),a=n(6),u=n(1),c=0,p=i.PropTypes,l=i.createClass({displayName:"Ink",shouldComponentUpdate:function(t,e){return!!e.frame},propTypes:{background:p.bool,duration:p.number,opacity:p.number,radius:p.number,recenter:p.bool},getDefaultProps:function(){return{background:!0,duration:1500,fill:"currentColor",opacity:.2,radius:150,recenter:!0}},getInitialState:function(){return{store:a(this.tick),touchEvents:this.touchEvents()}},touchEvents:function(){return r?{onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease}:{onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease}},tick:function(t){this.setState({frame:t})},componentWillUnmount:function(){this.state.store.stop()},pushBlot:function(t){var e=this.getDOMNode().getBoundingClientRect(),n=e.top,o=e.bottom,r=e.left,i=e.right,s=o-n,a=i-r,c=Math.max(s,a);this.state.store.add({duration:this.props.duration,maxOpacity:this.props.opacity,mouseDown:u(),mouseUp:0,radius:Math.min(this.props.radius,c),recenter:this.props.recenter,x:t.clientX-r,y:t.clientY-n,size:c,height:s,width:a})},popBlot:function(){this.state.store.release(u())},makeBlot:function(t,e){var n=t.radius,o=t.opacity,r=t.transform;return i.createElement("circle",{key:e,r:n,opacity:o,transform:r})},getBackdrop:function(){return i.createElement("rect",{width:"100%",height:"100%",opacity:this.state.store.getTotalOpacity()})},render:function(){var t=this.props.background,e=this.props.fill,n=this.props.style,r=this.state.store,a=this.state.touchEvents,u=o({},s,n);return i.createElement("svg",o({className:"ink",style:u,fill:e},a,{onDragOver:this._onRelease}),r.map(this.makeBlot),t&&this.getBackdrop())},_onPress:function(t){var e=t.button,n=t.ctrlKey,o=t.touches;if(o)for(var r=0,i=o.length;i>r;r++)this.pushBlot(o[r]);else e!==c||n||this.pushBlot(t)},_onRelease:function(){requestAnimationFrame(this.popBlot)}});t.exports=l},function(t){"use strict";var e=Date.now;"undefined"!=typeof performance&&performance.now&&(e=performance.now.bind(performance)),t.exports=e},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,n,o){return n*((t=t/o-1)*t*t*t*t+1)+e}},function(t,e,n){"use strict";function o(t){return u(t.duration,a()-t.mouseDown)}function r(t){return t.mouseUp>0?a()-t.mouseUp:0}function i(t){var e=.85*s(o(t),0,t.radius,t.duration),n=.15*s(r(t),0,t.radius,t.duration);return e+n}var s=n(3),a=n(1),u=Math.min,c=Math.sqrt(2);t.exports={getBlotOpacity:function(t){return s(r(t),t.maxOpacity,-t.maxOpacity,t.duration)},getBlotOuterOpacity:function(t){return u(t.opacity,s(o(t),0,.3,3*t.duration))},getBlotTransform:function(t){var e=t.recenter,n=t.x,o=t.y,r=t.size,s=t.width,a=t.height,p=i(t);if(e){var l=u(1,p/r*2/c);n+=l*(s/2-n),o+=l*(a/2-o)}var h=p/t.radius;return"translate("+n+","+o+") scale("+h+", "+h+") "}}},function(t){"use strict";var e=!1;"undefined"!=typeof window&&(e="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch),t.exports=e},function(t,e,n){"use strict";var o=n(4);t.exports=function(t){var e=[],n=!1,r=0,i=void 0,s={map:function(t,n){return e.map(t,n)},play:function(){n||(n=!0,s.update())},stop:function(){n=!1,cancelAnimationFrame(i)},getTotalOpacity:function(){return r},update:function(){r=0,s.prune(),t(i),e.length?i=requestAnimationFrame(s.update):s.stop()},shouldPrune:function(t){return t.opacity=o.getBlotOpacity(t),t.transform=o.getBlotTransform(t),r+=o.getBlotOuterOpacity(t),t.opacity>=.01},prune:function(){e=e.filter(this.shouldPrune)},add:function(t){e.push(t),s.play()},release:function(t){for(var n=e.length-1;n>=0;n--)if(!e[n].mouseUp)return e[n].mouseUp=t}};return s}},function(t){t.exports=require("react")}]);
+module.exports=function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},r=n(5),i=n(7),s=n(2),a=n(6),u=n(1),c=0,p=i.PropTypes,l=i.createClass({displayName:"Ink",shouldComponentUpdate:function(t,e){return!!e.frame},propTypes:{background:p.bool,duration:p.number,opacity:p.number,radius:p.number,recenter:p.bool},getDefaultProps:function(){return{background:!0,duration:1500,fill:"currentColor",opacity:.2,radius:150,recenter:!0}},getInitialState:function(){return{store:a(this.tick),touchEvents:this.touchEvents()}},touchEvents:function(){return r?{onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease}:{onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease}},tick:function(t){this.setState({frame:t})},componentWillUnmount:function(){this.state.store.stop()},pushBlot:function(t,e){var n=this.state.rect||this.getDOMNode().getBoundingClientRect(),o=n.top,r=n.bottom,i=n.left,s=n.right,a=r-o,c=s-i,p=Math.max(a,c);this.state.store.add({duration:this.props.duration,maxOpacity:this.props.opacity,mouseDown:u(),mouseUp:0,radius:Math.min(p,this.props.radius),recenter:this.props.recenter,x:t-i,y:e-o,size:p,height:a,width:c}),this.state.rect||this.setState({rect:n})},popBlot:function(){this.state.store.release(u())},makeBlot:function(t,e){var n=t.radius,o=t.opacity,r=t.transform;return i.createElement("circle",{key:e,r:n,opacity:o,transform:r})},getBackdrop:function(){return i.createElement("rect",{width:"100%",height:"100%",opacity:this.state.store.getTotalOpacity()})},render:function(){var t=this.props.background,e=this.props.fill,n=this.props.style,r=this.state.store,a=this.state.touchEvents,u=o({},s,n);return i.createElement("svg",o({className:"ink",style:u,fill:e},a,{onDragOver:this._onRelease}),r.map(this.makeBlot),t&&this.getBackdrop())},_onPress:function(t){var e=this,n=t.button,o=t.ctrlKey,r=t.touches;r?!function(){var t=Array.prototype.slice.call(r,0).map(function(t){return[t.clientX,t.clientY]});requestAnimationFrame(function(){t.forEach(function(t){return e.pushBlot.apply(e,t)})})}():n!==c||o||!function(){var n=t.clientX,o=t.clientY;requestAnimationFrame(function(){return e.pushBlot(n,o)})}()},_onRelease:function(){requestAnimationFrame(this.popBlot)}});t.exports=l},function(t){"use strict";var e=Date.now;"undefined"!=typeof performance&&performance.now&&(e=performance.now.bind(performance)),t.exports=e},function(t){"use strict";t.exports={borderRadius:"inherit",height:"100%",left:0,position:"absolute",top:0,width:"100%",willChange:"transform, opacity"}},function(t){"use strict";t.exports=function(t,e,n,o){return n*((t=t/o-1)*t*t*t*t+1)+e}},function(t,e,n){"use strict";function o(t){return u(t.duration,a()-t.mouseDown)}function r(t){return t.mouseUp>0?a()-t.mouseUp:0}function i(t){var e=.85*s(o(t),0,t.radius,t.duration),n=.15*s(r(t),0,t.radius,t.duration);return e+n}var s=n(3),a=n(1),u=Math.min,c=Math.sqrt(2);t.exports={getBlotOpacity:function(t){return s(r(t),t.maxOpacity,-t.maxOpacity,t.duration)},getBlotOuterOpacity:function(t){return u(t.opacity,s(o(t),0,.3,3*t.duration))},getBlotTransform:function(t){var e=t.recenter,n=t.x,o=t.y,r=t.size,s=t.width,a=t.height,p=i(t);if(e){var l=u(1,p/r*2/c);n+=l*(s/2-n),o+=l*(a/2-o)}var f=p/t.radius;return"translate("+n+","+o+") scale("+f+", "+f+") "}}},function(t){"use strict";var e=!1;"undefined"!=typeof window&&(e="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch),t.exports=e},function(t,e,n){"use strict";var o=n(4);t.exports=function(t){var e=[],n=!1,r=0,i=void 0,s={map:function(t,n){return e.map(t,n)},play:function(){n||(n=!0,s.update())},stop:function(){n=!1,cancelAnimationFrame(i)},getTotalOpacity:function(){return r},update:function(){r=0,s.prune(),t(i),e.length?i=requestAnimationFrame(s.update):s.stop()},shouldPrune:function(t){return t.opacity=o.getBlotOpacity(t),t.transform=o.getBlotTransform(t),r+=o.getBlotOuterOpacity(t),t.opacity>=.01},prune:function(){e=e.filter(this.shouldPrune)},add:function(t){e.push(t),s.play()},release:function(t){for(var n=e.length-1;n>=0;n--)if(!e[n].mouseUp)return e[n].mouseUp=t}};return s}},function(t){t.exports=require("react")}]);

example/index.js

@@ -1,7 +0,8 @@
-var React = require('react/addons');
-var Test  = React.addons.TestUtils
-var Ink   = require('../src/index');
+import React from 'react/addons'
+import Ink   from '../src/index'
 
-var Component = React.createClass({
+let Test = React.addons.TestUtils
 
+let Component = React.createClass({
+
   render() {
@@ -17,3 +18,3 @@ return (
       </div>
-    );
+    )
   },
@@ -25,5 +26,5 @@
 
-});
+})
 
-let component = React.render(<Component />, document.body);
+let component = React.render(<Component />, document.body)
 let delta = Date.now()
@@ -30,0 +31,0 @@

package.json

 {
   "name": "react-ink",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A React component for adding material design style ink.",
@@ -8,3 +8,3 @@ "main": "dist/ink.js",
     "start": "webpack-dev-server --config=webpack.example.config.js",
-    "prepublish": "webpack -pvcm && echo `gzip -c dist/ink.js | wc -c`",
+    "prepublish": "webpack -pcmv && echo `gzip -c dist/ink.js | wc -c`",
     "test": "jest"
@@ -11,0 +11,0 @@ },

src/index.js

@@ -73,5 +73,7 @@ /**
 
-  pushBlot(event) {
-    let { top, bottom, left, right } = this.getDOMNode().getBoundingClientRect()
+  pushBlot(clientX, clientY) {
+    let rect = this.state.rect || this.getDOMNode().getBoundingClientRect()
 
+    let { top, bottom, left, right } = rect
+
     let height = bottom - top
@@ -86,6 +88,6 @@ let width  = right - left
       mouseUp    : 0,
-      radius     : Math.min(this.props.radius, size),
+      radius     : Math.min(size, this.props.radius),
       recenter   : this.props.recenter,
-      x          : event.clientX - left,
-      y          : event.clientY - top,
+      x          : clientX - left,
+      y          : clientY - top,
       size       : size,
@@ -95,2 +97,6 @@ height     : height,
     })
+
+    if (!this.state.rect) {
+      this.setState({ rect })
+    }
   },
@@ -127,7 +133,10 @@
     if (touches) {
-      for (var i = 0, len = touches.length; i < len; i++) {
-        this.pushBlot(touches[i])
-      }
+      let presses = Array.prototype.slice.call(touches, 0).map(i => [i.clientX, i.clientY])
+
+      requestAnimationFrame(e => {
+        presses.forEach(touch => this.pushBlot.apply(this, touch))
+      })
     } else if (button === MOUSE_LEFT && !ctrlKey) {
-      this.pushBlot(e)
+      let { clientX, clientY } = e
+      requestAnimationFrame(() => this.pushBlot(clientX, clientY))
     }
@@ -134,0 +143,0 @@ },

src/style.js

@@ -7,3 +7,4 @@ module.exports = {
   top: 0,
-  width: "100%"
+  width: "100%",
+  willChange: 'transform, opacity'
 }

webpack.example.config.js

@@ -1,8 +0,6 @@
-var Path    = require('path');
-var WebPack = require('webpack');
+var Path    = require('path')
+var WebPack = require('webpack')
 
 module.exports = {
-  entry: {
-    'example.build': './example/index.js'
-  },
+  entry: './example/index.js',
 
@@ -12,3 +10,3 @@ output: {
     publicPath: 'example',
-    filename: '[name].js'
+    filename: 'example.build.js'
   },
@@ -26,3 +24,3 @@
         exclude : /node_modules/,
-        loader  : 'envify!6to5?experimental'
+        loader  : '6to5?experimental'
       },
@@ -29,0 +27,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

15774

increased by3.79%

Lines of code

307

increased by1.66%

No dependency changes