react-ink - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/ink.js

@@ -1,1 +0,1 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"));else if("function"==typeof define&&define.amd)define(["react"],e);else{var n=e("object"==typeof exports?require("react"):t.react);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(this,function(t){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var r=n(1),o=n(9),i=n(2),s=n(4),a=n(6),u=n(5),c=r.PropTypes,p=0,f=r.createClass({displayName:"Ink",mixins:[s],propTypes:{background:c.bool,duration:u(0),opacity:a(0,1),radius:u(0),recenter:c.bool},getDefaultProps:function(){return{background:!0,duration:1500,opacity:.2,radius:150,recenter:!0}},getInitialState:function(){return{store:o()}},tick:function(){this.forceUpdate()},componentDidMount:function(){this.state.store.subscribe(this.tick)},componentWillUnmount:function(){this.state.store.dispose()},pushBlot:function(t){var e=this.getDOMNode().getBoundingClientRect(),n=e.bottom-e.top,r=e.right-e.left;this.state.store.add({duration:this.props.duration,maxOpacity:this.props.opacity,mouseDown:i(),mouseUp:0,radius:Math.min(this.props.radius,Math.max(n,r)),recenter:this.props.recenter,x:t.clientX-e.left,y:t.clientY-e.top,size:Math.max(n,r),height:n,width:r})},popBlot:function(){this.state.store.release(i())},makeBlot:function(t,e){return r.createElement("circle",{key:e,r:t.radius,opacity:t.opacity,transform:t.transform})},getBackdrop:function(){var t=this.props.background?this.state.store.getTotalOpacity():0;return r.createElement("rect",{key:"__backdrop",width:"100%",height:"100%",opacity:t})},render:function(){return r.createElement("svg",{className:"ink",style:{color:this.props.color},onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease,onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease,onDragOver:this._onRelease},this.state.store.map(this.makeBlot),this.getBackdrop())},_onPress:function(t){var e=t.button,n=t.ctrlKey,r=t.touches;if(r)for(var o,i=r[Symbol.iterator]();!(o=i.next()).done;){var s=o.value;this.pushBlot(s)}else e!==p||n||this.pushBlot(t)},_onRelease:function(){this.popBlot()}});t.exports=f},function(e){e.exports=t},function(t){"use strict";var e=Date.now||function(){return+new Date};"undefined"!=typeof performance&&performance.now&&(e=performance.now.bind(performance)),t.exports=e},function(t,e,n){(function(e){"use strict";var n=function(t,n,r,o,i,s,a,u){if("production"!==e.env.NODE_ENV&&void 0===n)throw new Error("invariant requires an error message argument");if(!t){var c;if(void 0===n)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[r,o,i,s,a,u],f=0;c=new Error("Invariant Violation: "+n.replace(/%s/g,function(){return p[f++]}))}throw c.framesToPop=1,c}};t.exports=n}).call(e,n(11))},function(t,e,n){"use strict";var r=n(10),o={shouldComponentUpdate:function(t,e){return!r(this.props,t)||!r(this.state,e)}};t.exports=o},function(t,e,n){"use strict";var r=n(1).PropTypes;t.exports=function(t){return function(e,n,o){if(!e||n in e!=!1){var i=r.number(e,n,o);if(i)return i;var s=e[n];return t>s?new RangeError("Invalid `"+n+"` value given to component `"+o+"`. Expected >= "+t+" , instead got "+s+"."):void 0}}}},function(t,e,n){"use strict";var r=n(1).PropTypes,o=n(3);t.exports=function(t,e){return o(e>t,"Lower limit of type `inRange` must be greater than upper limit"),function(n,o,i){if(!n||o in n!=!1){var s=r.number(n,o,i);if(s)return s;var a=n[o];return t>a||a>e?new RangeError("Invalid `"+o+"` value given to component `"+i+"`. Expected between "+t+" and "+e+", instead got "+a+"."):void 0}}}},function(t){"use strict";t.exports={easeOutSin:function(t,e,n,r){return n*Math.sin(t/r*(Math.PI/2))+e},easeOutQuint:function(t,e,n,r){return n*((t=t/r-1)*t*t*t*t+1)+e}}},function(t,e,n){"use strict";var r=n(7).easeOutQuint,o=n(2),i=(Math.max,Math.min),s=Math.sqrt(2),a={getPress:function(t){return i(t.duration,o()-t.mouseDown)},getRelease:function(t){return t.mouseUp>0?o()-t.mouseUp:0},getBlotRadius:function(t){var e=.85*r(a.getPress(t),0,t.radius,t.duration),n=.15*r(a.getRelease(t),0,t.radius,t.duration);return e+n},getBlotOpacity:function(t){return r(a.getRelease(t),t.maxOpacity,-t.maxOpacity,t.duration)},getBlotOuterOpacity:function(t){return i(r(a.getPress(t),0,.3,3*t.duration),a.getBlotOpacity(t))},getBlotTransform:function(t){var e=(t.duration,t.recenter),n=t.x,r=t.y,o=t.size,u=t.width,c=t.height,p=n,f=r;if(e){var d=i(1,a.getBlotRadius(t)/o*2/s);p+=d*(u/2-n),f+=d*(c/2-r)}var l=(a.getBlotRadius(t)/t.radius).toFixed(3);return"translate("+p.toFixed(3)+","+f.toFixed(3)+") scale("+l+", "+l+") "}};t.exports=a},function(t,e,n){"use strict";var r=n(8),o=n(3);t.exports=function(){var t,e=[],n=[],i=!1,s={dispose:function(){e.length=0,s.stop()},publicize:function(){for(var t=0,n=e.length;n>t;t++)e[t]()},subscribe:function(t){o("function"==typeof t,"Ink.Store subscribe method expects a callback function"),e.push(t)},unsubscribe:function(t){var n=e.indexOf(t);n>-1&&e.splice(n,1)},forEach:function(t,e){return n.forEach(t,e)},map:function(t,e){return n.map(t,e)},play:function(){i||(i=!0,s.update())},stop:function(){i=!1,cancelAnimationFrame(t)},getTotalOpacity:function(){for(var t=0,e=0,r=n.length;r>e;e++)t+=n[e].outerOpacity;return t},update:function(){for(var e=0,o=n.length;o>e;e++)n[e].opacity=r.getBlotOpacity(n[e]),n[e].outerOpacity=r.getBlotOuterOpacity(n[e]),n[e].transform=r.getBlotTransform(n[e]);s.prune(),s.publicize(),n.length?t=requestAnimationFrame(s.update):s.stop()},prune:function(){for(var t=0;t<n.length;)n[t].opacity<=.01?n.splice(t,1):t++},add:function(t){n.push(t),s.play()},release:function(t){for(var e=0,r=n.length;r>e;e++)n[e].mouseUp=n[e].mouseUp||t;s.play()}};return s}},function(t){"use strict";function e(t,e){if(t===e)return!0;var n;for(n in t)if(t.hasOwnProperty(n)&&(!e.hasOwnProperty(n)||t[n]!==e[n]))return!1;for(n in e)if(e.hasOwnProperty(n)&&!t.hasOwnProperty(n))return!1;return!0}t.exports=e},function(t){function e(){}var n=t.exports={};n.nextTick=function(){var t="undefined"!=typeof window&&window.setImmediate,e="undefined"!=typeof window&&window.MutationObserver,n="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(t)return function(t){return window.setImmediate(t)};var r=[];if(e){var o=document.createElement("div"),i=new MutationObserver(function(){var t=r.slice();r.length=0,t.forEach(function(t){t()})});return i.observe(o,{attributes:!0}),function(t){r.length||o.setAttribute("yes","no"),r.push(t)}}return n?(window.addEventListener("message",function(t){var e=t.source;if((e===window||null===e)&&"process-tick"===t.data&&(t.stopPropagation(),r.length>0)){var n=r.shift();n()}},!0),function(t){r.push(t),window.postMessage("process-tick","*")}):function(t){setTimeout(t,0)}}(),n.title="browser",n.browser=!0,n.env={},n.argv=[],n.on=e,n.addListener=e,n.once=e,n.off=e,n.removeListener=e,n.removeAllListeners=e,n.emit=e,n.binding=function(){throw new Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(){throw new Error("process.chdir is not supported")}}])});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"));else if("function"==typeof define&&define.amd)define(["react"],e);else{var n=e("object"==typeof exports?require("react"):t.react);for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(this,function(t){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},o=n(1),i=n(10),s=n(2),a=n(4),u=n(6),c=n(5),p=n(9),f=o.PropTypes,d=0,l=o.createClass({displayName:"Ink",mixins:[a],propTypes:{background:f.bool,duration:c(0),opacity:u(0,1),radius:c(0),recenter:f.bool},getDefaultProps:function(){return{background:!0,duration:1500,opacity:.2,radius:150,recenter:!0}},getInitialState:function(){return{store:i()}},tick:function(){this.forceUpdate()},componentDidMount:function(){this.state.store.subscribe(this.tick)},componentWillUnmount:function(){this.state.store.dispose()},pushBlot:function(t){var e=this.getDOMNode().getBoundingClientRect(),n=e.bottom-e.top,r=e.right-e.left;this.state.store.add({duration:this.props.duration,maxOpacity:this.props.opacity,mouseDown:s(),mouseUp:0,radius:Math.min(this.props.radius,Math.max(n,r)),recenter:this.props.recenter,x:t.clientX-e.left,y:t.clientY-e.top,size:Math.max(n,r),height:n,width:r})},popBlot:function(){this.state.store.release(s())},makeBlot:function(t,e){return o.createElement("circle",{key:e,r:t.radius,opacity:t.opacity,transform:t.transform})},getBackdrop:function(){var t=this.props.background?this.state.store.getTotalOpacity():0;return o.createElement("rect",{key:"__backdrop",width:"100%",height:"100%",opacity:t})},touchEvents:function(){return p?{onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease}:{onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease}},render:function(){return o.createElement("svg",r({className:"ink",style:{color:this.props.color},onDragOver:this._onRelease},this.touchEvents()),this.state.store.map(this.makeBlot),this.getBackdrop())},_onPress:function(t){var e=t.button,n=t.ctrlKey,r=t.touches;if(r)for(var o=0,i=r.length;i>o;o++)this.pushBlot(r[o]);else e!==d||n||this.pushBlot(t)},_onRelease:function(){requestAnimationFrame(this.popBlot)}});t.exports=l},function(e){e.exports=t},function(t){"use strict";var e=Date.now||function(){return+new Date};"undefined"!=typeof performance&&performance.now&&(e=performance.now.bind(performance)),t.exports=e},function(t,e,n){(function(e){"use strict";var n=function(t,n,r,o,i,s,a,u){if("production"!==e.env.NODE_ENV&&void 0===n)throw new Error("invariant requires an error message argument");if(!t){var c;if(void 0===n)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var p=[r,o,i,s,a,u],f=0;c=new Error("Invariant Violation: "+n.replace(/%s/g,function(){return p[f++]}))}throw c.framesToPop=1,c}};t.exports=n}).call(e,n(12))},function(t,e,n){"use strict";var r=n(11),o={shouldComponentUpdate:function(t,e){return!r(this.props,t)||!r(this.state,e)}};t.exports=o},function(t,e,n){"use strict";var r=n(1).PropTypes;t.exports=function(t){return function(e,n,o){if(!e||n in e!=!1){var i=r.number(e,n,o);if(i)return i;var s=e[n];return t>s?new RangeError("Invalid `"+n+"` value given to component `"+o+"`. Expected >= "+t+" , instead got "+s+"."):void 0}}}},function(t,e,n){"use strict";var r=n(1).PropTypes,o=n(3);t.exports=function(t,e){return o(e>t,"Lower limit of type `inRange` must be greater than upper limit"),function(n,o,i){if(!n||o in n!=!1){var s=r.number(n,o,i);if(s)return s;var a=n[o];return t>a||a>e?new RangeError("Invalid `"+o+"` value given to component `"+i+"`. Expected between "+t+" and "+e+", instead got "+a+"."):void 0}}}},function(t){"use strict";t.exports={easeOutSin:function(t,e,n,r){return n*Math.sin(t/r*(Math.PI/2))+e},easeOutQuint:function(t,e,n,r){return n*((t=t/r-1)*t*t*t*t+1)+e}}},function(t,e,n){"use strict";var r=n(7).easeOutQuint,o=n(2),i=(Math.max,Math.min),s=Math.sqrt(2),a={getPress:function(t){return i(t.duration,o()-t.mouseDown)},getRelease:function(t){return t.mouseUp>0?o()-t.mouseUp:0},getBlotRadius:function(t){var e=.85*r(a.getPress(t),0,t.radius,t.duration),n=.15*r(a.getRelease(t),0,t.radius,t.duration);return e+n},getBlotOpacity:function(t){return r(a.getRelease(t),t.maxOpacity,-t.maxOpacity,t.duration)},getBlotOuterOpacity:function(t){return i(r(a.getPress(t),0,.3,3*t.duration),a.getBlotOpacity(t))},getBlotTransform:function(t){var e=(t.duration,t.recenter),n=t.x,r=t.y,o=t.size,u=t.width,c=t.height,p=n,f=r;if(e){var d=i(1,a.getBlotRadius(t)/o*2/s);p+=d*(u/2-n),f+=d*(c/2-r)}var l=(a.getBlotRadius(t)/t.radius).toFixed(3);return"translate("+p.toFixed(3)+","+f.toFixed(3)+") scale("+l+", "+l+") "}};t.exports=a},function(t){"use strict";t.exports="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch},function(t,e,n){"use strict";var r=n(8),o=n(3);t.exports=function(){var t,e=[],n=[],i=!1,s={dispose:function(){e.length=0,s.stop()},publicize:function(){for(var t=0,n=e.length;n>t;t++)e[t]()},subscribe:function(t){o("function"==typeof t,"Ink.Store subscribe method expects a callback function"),e.push(t)},unsubscribe:function(t){var n=e.indexOf(t);n>-1&&e.splice(n,1)},forEach:function(t,e){return n.forEach(t,e)},map:function(t,e){return n.map(t,e)},play:function(){i||(i=!0,s.update())},stop:function(){i=!1,cancelAnimationFrame(t)},getTotalOpacity:function(){for(var t=0,e=0,r=n.length;r>e;e++)t+=n[e].outerOpacity;return t},update:function(){for(var e=0,o=n.length;o>e;e++)n[e].opacity=r.getBlotOpacity(n[e]),n[e].outerOpacity=r.getBlotOuterOpacity(n[e]),n[e].transform=r.getBlotTransform(n[e]);s.prune(),s.publicize(),n.length?t=requestAnimationFrame(s.update):s.stop()},prune:function(){for(var t=0;t<n.length;)n[t].opacity<=.01?n.splice(t,1):t++},add:function(t){n.push(t),s.play()},release:function(t){for(var e=0,r=n.length;r>e;e++)n[e].mouseUp=n[e].mouseUp||t;s.play()}};return s}},function(t){"use strict";function e(t,e){if(t===e)return!0;var n;for(n in t)if(t.hasOwnProperty(n)&&(!e.hasOwnProperty(n)||t[n]!==e[n]))return!1;for(n in e)if(e.hasOwnProperty(n)&&!t.hasOwnProperty(n))return!1;return!0}t.exports=e},function(t){function e(){}var n=t.exports={};n.nextTick=function(){var t="undefined"!=typeof window&&window.setImmediate,e="undefined"!=typeof window&&window.MutationObserver,n="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(t)return function(t){return window.setImmediate(t)};var r=[];if(e){var o=document.createElement("div"),i=new MutationObserver(function(){var t=r.slice();r.length=0,t.forEach(function(t){t()})});return i.observe(o,{attributes:!0}),function(t){r.length||o.setAttribute("yes","no"),r.push(t)}}return n?(window.addEventListener("message",function(t){var e=t.source;if((e===window||null===e)&&"process-tick"===t.data&&(t.stopPropagation(),r.length>0)){var n=r.shift();n()}},!0),function(t){r.push(t),window.postMessage("process-tick","*")}):function(t){setTimeout(t,0)}}(),n.title="browser",n.browser=!0,n.env={},n.argv=[],n.on=e,n.addListener=e,n.once=e,n.off=e,n.removeListener=e,n.removeAllListeners=e,n.emit=e,n.binding=function(){throw new Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(){throw new Error("process.chdir is not supported")}}])});

package.json

 {
   "name": "react-ink",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/ink.js",

src/index.js

@@ -8,8 +8,9 @@ /**
 
-let React   = require('react')
-let Store   = require('./util/store')
-let now     = require('./util/now')
-let Pure    = require('./mixins/pure')
-let InRange = require('./types/inRange')
-let AtLeast = require('./types/atLeast')
+let React     = require('react')
+let Store     = require('./util/store')
+let now       = require('./util/now')
+let Pure      = require('./mixins/pure')
+let InRange   = require('./types/inRange')
+let AtLeast   = require('./types/atLeast')
+let HAS_TOUCH = require('./util/hasTouch')
 
@@ -20,2 +21,3 @@ let Types   = React.PropTypes
 
+
 let Ink = React.createClass({
@@ -87,3 +89,3 @@
     return (
-      <circle key={ i } r={ blot.radius } opacity={ blot.opacity } transform={ blot.transform } />
+        <circle key={ i } r={ blot.radius } opacity={ blot.opacity } transform={ blot.transform } />
     )
@@ -97,16 +99,20 @@ },
 
+  touchEvents() {
+    return HAS_TOUCH ? {
+      onTouchStart  : this._onPress,
+      onTouchEnd    : this._onRelease,
+      onTouchCancel : this._onRelease,
+      onTouchLeave  : this._onRelease
+    } : {
+      onMouseDown   : this._onPress,
+      onMouseUp     : this._onRelease,
+      onMouseLeave  : this._onRelease,
+    }
+  },
+
   render() {
     return (
-      <svg className="ink"
-           style={{ color: this.props.color }}
-           onTouchStart={ this._onPress }
-           onTouchEnd={ this._onRelease }
-           onTouchCancel={ this._onRelease }
-           onTouchLeave={ this._onRelease }
-           onMouseDown={ this._onPress }
-           onMouseUp={ this._onRelease }
-           onMouseLeave={ this._onRelease }
-           onDragOver={ this._onRelease }>
+        <svg className="ink" style={{ color: this.props.color }} onDragOver={ this._onRelease } { ...this.touchEvents() }>
         { this.state.store.map(this.makeBlot) }
-        { this.getBackdrop() }
+      { this.getBackdrop() }
       </svg>
@@ -120,4 +126,4 @@ )
     if (touches) {
-      for (let touch of touches) {
-        this.pushBlot(touch)
+      for (var i = 0, len = touches.length; i < len; i++) {
+        this.pushBlot(touches[i])
       }
@@ -130,3 +136,3 @@ } else if (button === MOUSE_LEFT && !ctrlKey) {
   _onRelease(e) {
-    this.popBlot()
+    requestAnimationFrame(this.popBlot)
   }
@@ -133,0 +139,0 @@ })

webpack.example.config.js

@@ -5,8 +5,10 @@ var Path    = require('path');
 module.exports = {
-  entry: './example/index.js',
+  entry: {
+    'example.build': './example/index.js'
+  },
 
   output: {
-    path: Path.join(__dirname, 'example'),
-    publicPath: './example',
-    filename: 'example.build.js'
+    path: './example',
+    publicPath: 'example',
+    filename: '[name].js'
   },
@@ -13,0 +15,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

46298

decreased by-97.69%

Number of package files

20

decreased by-9.09%

Lines of code

405

decreased by-98.82%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes