react-ink - npm Package Compare versions

Comparing version 3.3.1 to 4.0.0-rc1

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(4),i=n(6),s=n(1),a=n(5),u=0,c=i.PropTypes,p=i.createClass({displayName:"Ink",shouldComponentUpdate:function(t,e){return!!e.frame},propTypes:{background:c.bool,duration:c.number,opacity:c.number,radius:c.number,recenter:c.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,n){var o=this.getDOMNode().getBoundingClientRect(),r=o.top,i=o.bottom,s=o.left,a=o.right,u=i-r,c=a-s,p=Math.max(u,c);this.state.store.add({duration:this.props.duration,maxOpacity:this.props.opacity,mouseDown:t,mouseUp:0,radius:Math.min(p,this.props.radius),recenter:this.props.recenter,x:e-s,y:n-r,size:p,height:u,width:c})},popBlot:function(t){this.state.store.release(t)},makeBlot:function(t,e){var n=t.radius,o=t.opacity,r=t.transform;return i.createElement("circle",{key:e,r:n,fillOpacity:o,transform:r})},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),i.createElement("rect",{width:"100%",height:"100%",fillOpacity:t?this.state.store.getTotalOpacity():0}))},_onPress:function(t){var e=t.button,n=t.ctrlKey,o=t.clientX,r=t.clientY,i=t.changedTouches,s=Date.now();if(i)for(var a=0;a<i.length;a++){var c=i[a].clientX,p=i[a].clientY;this.pushBlot(s,c,p)}else e!==u||n||this.pushBlot(s,o,r)},_onRelease:function(){this.popBlot(Date.now())}});t.exports=p},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 a(t.duration,Date.now()-t.mouseDown)}function r(t){return t.mouseUp>0?Date.now()-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(2),a=Math.min,u=Math.sqrt(2);t.exports={getBlotOpacity:function(t){return s(r(t),t.maxOpacity,-t.maxOpacity,t.duration)},getBlotOuterOpacity:function(t){return a(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,c=t.height,p=i(t);if(e){var l=a(1,p/r*2/u);n+=l*(s/2-n),o+=l*(c/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(3);t.exports=function(t){var e=[],n=!1,r=void 0,i={map:function(t,n){return e.map(t,n)},play:function(){n||(n=!0,i.update())},stop:function(){n=!1,cancelAnimationFrame(r)},getTotalOpacity:function(){return e.reduce(function(t,e){return t+o.getBlotOuterOpacity(e)},0)},update:function(){i.prune(),t(r),e.length?r=requestAnimationFrame(i.update):i.stop()},shouldPrune:function(t){return t.opacity=o.getBlotOpacity(t),t.transform=o.getBlotTransform(t),t.opacity>=.01},prune:function(){e=e.filter(this.shouldPrune)},add:function(t){e.push(t),i.play()},release:function(t){for(var n=e.length-1;n>=0;n--)if(!e[n].mouseUp)return e[n].mouseUp=t}};return i}},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){"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(7),u=o(2),c=o(6),l=a.PropTypes,h=2*Math.PI,p=o(1),f=a.createClass({displayName:"Ink",shouldComponentUpdate:function(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},propTypes:{background:l.bool,duration:l.number,opacity:l.number,radius:l.number,recenter:l.bool},getDefaultProps:function(){return{background:!0,duration:1500,opacity:.2,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.height,n=this.state.store,i=this.state.width,r=s(t);t.save(),t.scale(r,r),t.clearRect(0,0,i,o),t.fillStyle=e,t.globalAlpha=n.getTotalOpacity(),t.fillRect(0,0,i,o),n.map(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.save(),e.globalAlpha=p.getBlotOpacity(t),e.beginPath(),this.props.recenter){var a=Math.max(o,n);e.translate(p.getBlotShiftX(t,a,n),p.getBlotShiftY(t,a,o))}e.arc(i,r,s*p.getBlotScale(t),0,h),e.closePath(),e.fill(),e.restore()},componentWillUnmount:function(){this.state.store.stop()},pushBlot:function(t,e,o){var n=this,i=this.getDOMNode(),r=i.getBoundingClientRect(),s=r.top,a=r.bottom,u=r.left,c=r.right,l=a-s,h=c-u;this.setState({color:i.style.color,ctx:this.state.ctx||this.refs.canvas.getDOMNode().getContext("2d"),height:l,width:h},function(){n.state.store.add({duration:n.props.duration,opacity:n.props.opacity,mouseDown:t,mouseUp:0,radius:Math.min(Math.max(h,l),n.props.radius),x:e-u,y:o-s})})},popBlot:function(t){this.state.store.release(t)},render:function(){var t=this.state.height,e=this.state.width,o=this.state.touchEvents;return a.createElement("canvas",n({ref:"canvas",className:"ink",style:n({},u,this.props.style),height:2*t,width:2*e,onDragOver:this._onRelease},o))},_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,l=s[u].clientY;this.pushBlot(a,c,l)}else e!==r||o||this.pushBlot(a,n,i)},_onRelease:function(){this.popBlot(Date.now())}});t.exports=f},function(t,e,o){"use strict";function n(t){return a(t.duration,Date.now()-t.mouseDown)}function i(t){return t.mouseUp>0?Date.now()-t.mouseUp:0}function r(t){var e=.85*s(n(t),0,t.radius,t.duration),o=.15*s(i(t),0,t.radius,t.duration);return e+o}var s=o(3),a=Math.min,u=Math.sqrt(2);t.exports={getBlotOpacity:function(t){return s(i(t),t.opacity,-t.opacity,t.duration)},getBlotOuterOpacity:function(t){return a(this.getBlotOpacity(t),s(n(t),0,.3,3*t.duration))},getBlotShiftX:function(t,e,o){return a(1,r(t)/e*2/u)*(o/2-t.x)},getBlotShiftY:function(t,e,o){return a(1,r(t)/e*2/u)*(o/2-t.y)},getBlotScale:function(t){return r(t)/t.radius}}},function(t){"use strict";t.exports={borderRadius:"inherit",color:"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,e,o){"use strict";var n=o(1);t.exports=function(t){var e=[],o=!1,i=void 0,r={map:function(t,o){return e.map(t,o)},play:function(){o||(o=!0,r.update())},stop:function(){o=!1,cancelAnimationFrame(i)},getTotalOpacity:function(){return e.reduce(function(t,e){return t+n.getBlotOuterOpacity(e)},0)},update:function(){r.prune(),t(i),e.length?i=requestAnimationFrame(r.update):r.stop()},shouldPrune:function(t){return n.getBlotOpacity(t)>.01},prune:function(){e=e.filter(this.shouldPrune)},add:function(t){e.push(t),r.play()},release:function(t){for(var o=e.length-1;o>=0;o--)if(!e[o].mouseUp)return e[o].mouseUp=t}};return r}},function(t){t.exports=require("react")}]);

package.json

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

src/index.jsx

@@ -9,7 +9,10 @@ /**
 let HAS_TOUCH  = require('./util/hasTouch')
+let MOUSE_LEFT = 0
+let pixelRatio = require('./util/pixelRatio')
 let React      = require('react')
 let STYLE      = require('./style')
 let Store      = require('./util/store')
-let MOUSE_LEFT = 0
 let Types      = React.PropTypes
+let TAU        = Math.PI * 2
+let Equations  = require('./util/equations')
 
@@ -19,3 +22,11 @@ let Ink = React.createClass({
   shouldComponentUpdate(props, state) {
-    return !!state.frame
+    for (let p in props) {
+      if (this.props[p] !== props[p]) return true
+    }
+
+    for (let s in state) {
+      if (this.state[s] !== state[s]) return true
+    }
+
+    return false
   },
@@ -35,3 +46,2 @@
       duration   : 1500,
-      fill       : 'currentColor',
       opacity    : 0.2,
@@ -67,6 +77,43 @@ radius     : 150,
 
-  tick(frame) {
-    this.setState({ frame })
+  tick() {
+    let { ctx, color, height, store, width } = this.state
+
+    let density = pixelRatio(ctx)
+
+    ctx.save()
+
+    ctx.scale(density, density)
+
+    ctx.clearRect(0, 0, width, height)
+    ctx.fillStyle = color
+    ctx.globalAlpha = store.getTotalOpacity()
+    ctx.fillRect(0, 0, width, height)
+
+    store.map(this.makeBlot, this)
+
+    ctx.restore()
   },
 
+  makeBlot(blot) {
+    let { ctx, height, width } = this.state
+    let { x, y, radius } = blot
+
+    ctx.save()
+    ctx.globalAlpha = Equations.getBlotOpacity(blot)
+    ctx.beginPath()
+
+    if (this.props.recenter) {
+      let size = Math.max(height, width)
+
+      ctx.translate(Equations.getBlotShiftX(blot, size, width),
+                    Equations.getBlotShiftY(blot, size, height))
+    }
+
+    ctx.arc(x, y, radius * Equations.getBlotScale(blot), 0, TAU)
+
+    ctx.closePath()
+    ctx.fill()
+    ctx.restore()
+  },
+
   componentWillUnmount() {
@@ -77,20 +124,24 @@ this.state.store.stop()
   pushBlot(timeStamp, clientX, clientY) {
-    let { top, bottom, left, right }  = this.getDOMNode().getBoundingClientRect()
+    let el = this.getDOMNode()
 
+    let { top, bottom, left, right } = el.getBoundingClientRect()
+
     let height = bottom - top
     let width  = right - left
-    let size   = Math.max(height, width)
 
-    this.state.store.add({
-      duration   : this.props.duration,
-      maxOpacity : this.props.opacity,
-      mouseDown  : timeStamp,
-      mouseUp    : 0,
-      radius     : Math.min(size, this.props.radius),
-      recenter   : this.props.recenter,
-      x          : clientX - left,
-      y          : clientY - top,
-      size       : size,
-      height     : height,
-      width      : width
+    this.setState({
+      color  : el.style.color,
+      ctx    : this.state.ctx || this.refs.canvas.getDOMNode().getContext('2d'),
+      height : height,
+      width  : width
+    }, () => {
+      this.state.store.add({
+        duration  : this.props.duration,
+        opacity   : this.props.opacity,
+        mouseDown : timeStamp,
+        mouseUp   : 0,
+        radius    : Math.min(Math.max(width, height), this.props.radius),
+        x         : clientX - left,
+        y         : clientY - top
+      })
     })
@@ -103,16 +154,13 @@ },
 
-  makeBlot({ radius:r, opacity:fillOpacity, transform }, key) {
-    return React.createElement('circle', { key, r, fillOpacity, transform })
-  },
-
   render() {
-    let { background, fill, style } = this.props
-    let { store, touchEvents } = this.state
-    let css = { ...STYLE, ...style }
+    let { height, width, touchEvents } = this.state
 
     return (
-      <svg className="ink" style={ css } fill={ fill } { ...touchEvents } onDragOver={ this._onRelease }>
-        { store.map(this.makeBlot) }
-        <rect width="100%" height="100%" fillOpacity={ background ? this.state.store.getTotalOpacity() : 0 } />
-      </svg>
+        <canvas ref="canvas"
+                className="ink"
+                style={{ ...STYLE, ...this.props.style }}
+                height={ height * 2 }
+                width={ width * 2 }
+                onDragOver={ this._onRelease }
+                { ...touchEvents } />
     )
@@ -119,0 +167,0 @@ },

src/style.js

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

src/util/equations.js

@@ -23,24 +23,23 @@ let easing = require('./easing')
   getBlotOpacity(blot) {
-    return easing(getRelease(blot), blot.maxOpacity, -blot.maxOpacity, blot.duration)
+    return easing(getRelease(blot), blot.opacity, -blot.opacity, blot.duration)
   },
 
   getBlotOuterOpacity(blot) {
-    return min(blot.opacity, easing(getPress(blot), 0, 0.3, blot.duration * 3))
+    return min(this.getBlotOpacity(blot),
+               easing(getPress(blot), 0, 0.3, blot.duration * 3))
   },
 
-  getBlotTransform(blot) {
-    let { recenter, x, y, size, width, height } = blot
+  getBlotShiftX(blot, size, width) {
+    return min(1,
+               getRadius(blot) / size * 2 / SQRT_2) * (width / 2 - blot.x)
+  },
 
-    let radius = getRadius(blot)
+  getBlotShiftY(blot, size, height) {
+    return min(1,
+               getRadius(blot) / size * 2 / SQRT_2) * (height / 2 - blot.y)
+  },
 
-    if (recenter) {
-      let shift = min(1, radius / size * 2 / SQRT_2)
-      x += shift * (width / 2 - x)
-      y += shift * (height / 2 -y)
-    }
-
-    let scale = (radius / blot.radius)
-
-    return `translate(${ x },${ y }) scale(${ scale }, ${ scale }) `
+  getBlotScale(blot) {
+    return getRadius(blot) / blot.radius
   }
 }

src/util/store.js

@@ -12,3 +12,2 @@ /**
   let _playing = false
-  let _totalOpacity = 0
   let _frame
@@ -53,6 +52,3 @@
     shouldPrune(blot) {
-      blot.opacity   = Equations.getBlotOpacity(blot)
-      blot.transform = Equations.getBlotTransform(blot)
-
-      return blot.opacity >= 0.01
+      return Equations.getBlotOpacity(blot) > 0.01
     },
@@ -59,0 +55,0 @@

webpack.example.config.js

@@ -6,2 +6,3 @@ var Path    = require('path')
   entry: './example/index.js',
+  devtool: 'source-map',
 
@@ -8,0 +9,0 @@ output: {

New 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

Total package byte prevSize

17001

increased by13.09%

Number of package files

15

increased by7.14%

Lines of code

337

increased by15.02%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes