perfect-freehand - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

CHANGELOG.md

@@ -0,1 +1,9 @@
+# 0.2.3
+
+- Brings back `simulatePressure` until I have a better way of guessing.
+
+# 0.2.2
+
+- Slight fix to line starts.
+
 # 0.2.1
@@ -2,0 +10,0 @@

dist/index.d.ts

@@ -6,2 +6,3 @@ import polygonClipping from 'polygon-clipping';
 export interface StrokeOutlineOptions extends StrokePointsOptions {
+    simulatePressure?: boolean;
     pressure?: boolean;
@@ -8,0 +9,0 @@ minSize?: number;

dist/perfect-freehand.cjs.development.js

@@ -200,2 +200,4 @@ 'use strict';
   var _options3 = options,
+      _options3$simulatePre = _options3.simulatePressure,
+      simulatePressure = _options3$simulatePre === void 0 ? true : _options3$simulatePre,
       _options3$pressure = _options3.pressure,
@@ -239,4 +241,4 @@ pressure = _options3$pressure === void 0 ? true : _options3$pressure,
     if (pressure) {
-      if (i > 1 && ip === points[i - 1][2]) {
-        // Accellerate the reported pressure.
+      if (simulatePressure) {
+        // Simulate pressure by accellerating the reported pressure.
         var rp = min(1 - distance / maxSize, 1);
@@ -250,3 +252,2 @@ var sp = min(distance / maxSize, 1);
     } else {
-      // If we're not using pressure, size is maxSize.
       size = maxSize;
@@ -253,0 +254,0 @@ } // 3. Shape

dist/perfect-freehand.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,t=(r=require("polygon-clipping"))&&"object"==typeof r&&"default"in r?r.default:r;function e(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=new Array(t);e<t;e++)n[e]=r[e];return n}function n(r,t){var n;if("undefined"==typeof Symbol||null==r[Symbol.iterator]){if(Array.isArray(r)||(n=function(r,t){if(r){if("string"==typeof r)return e(r,void 0);var n=Object.prototype.toString.call(r).slice(8,-1);return"Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n?Array.from(r):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(r,void 0):void 0}}(r))||t&&r&&"number"==typeof r.length){n&&(r=n);var o=0;return function(){return o>=r.length?{done:!0}:{done:!1,value:r[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=r[Symbol.iterator]()).next.bind(n)}var o=Math.hypot,i=Math.cos,a=Math.max,u=Math.min,v=Math.sin,f=Math.atan2,l=Math.PI,s=l/2;function h(r,t,e,n){return[i(e)*n+r,v(e)*n+t]}function p(r,t,e,n,o){return void 0===o&&(o=.5),[r+(e-r)*o,t+(n-t)*o]}function d(r,t){void 0===t&&(t={});var e,n,i,a=t.streamline,u=void 0===a?.5:a,v=function(r){return Array.isArray(r[0])?r.map((function(r){var t=r[2];return[r[0],r[1],void 0===t?.5:t]})):r.map((function(r){var t=r.pressure;return[r.x,r.y,void 0===t?.5:t]}))}(r),l=0,s=.01,h=v.length,p=[].concat(v[0],[0,0,0]),d=[p];if(0===h)return[];for(var c=1;c<h;c++){var m=v[c],y=m[2],g=p[0],S=p[1];i=f((n=S+(m[1]-S)*(1-u))-S,(e=g+(m[0]-g)*(1-u))-g),s=o(n-S,e-g),d.push(p=[e,n,y,i,s,l+=s])}return d.length>1&&(d[0][2]=d[1][2]),d}function c(r,t){void 0===t&&(t={});var e=t.minSize,n=void 0===e?2.5:e,o=t.maxSize,i=void 0===o?8:o,a=r.length;if(0===a)return[];var u=r[0],v=r[a-1],d=u[2]===v[2]?i:n+(i-n)*v[2],c=u===v?Math.random()*(2*l):f(v[1]-u[1],v[0]-u[0]),m=p(u[0],u[1],v[0],v[1],.5);return[h(m[0],m[1],c+s,d),h(u[0],u[1],c+l,d),h(m[0],m[1],c-s,d),h(v[0],v[1],c,d),h(m[0],m[1],c+s,d)]}function m(r,t){void 0===t&&(t={});var e=t.pressure,n=void 0===e||e,o=t.minSize,i=void 0===o?2.5:o,v=t.maxSize,f=void 0===v?8:v,l=t.smooth,d=void 0===l?8:l,c=r.length,m=r[0],y=r[0],g=m,S=y,b=m,M=m,x=0,A=.5,j=y,P=[];if(0===c)return[];for(var z=1;z<c;z++){var O=r[z],I=O[0],k=O[1],w=O[2],Q=O[3],_=O[4];if(n){if(z>1&&w===r[z-1][2]){var q=u(1-_/f,1),C=u(_/f,1);w=u(1,A+C/2*(q-A))}x=a(i,u(f,i+w*(f-i)))}else x=f;m=h(I,k,Q-s,x),y=h(I,k,Q+s,x),0===z?(g=m,S=y):(Math.hypot(m[0]-g[0],m[1]-g[1])>d&&(P.push(b),b=p(g[0],g[1],m[0],m[1],.5),g=m),Math.hypot(y[0]-S[0],y[1]-S[1])>d&&(P.unshift(M),M=p(S[0],S[1],y[0],y[1],.5),S=y)),A=w,j=[I,k]}return P.push(j),P.unshift(j),P}function y(r){return t.union([r])}exports.clipPath=y,exports.default=function(r,t){if(void 0===t&&(t={}),0===r.length)return"";var e=t.clip,o=void 0===e||e,i=t.maxSize,a=void 0===i?8:i,u=d(r,t),v=u[u.length-1][5]<2*a?c(u,t):m(u,t),f=[];if(o)for(var l,s=n(y(v));!(l=s()).done;)for(var h,g=n(l.value);!(h=g()).done;){var S=h.value,b=S[0],M=S[1];S.push(b),f.push("M "+b[0]+" "+b[1]);for(var x=1;x<S.length;x++){var A=p(b[0],b[1],M[0],M[1],.5);f.push(" Q "+b[0]+","+b[1]+" "+A[0]+","+A[1]),b=M,M=S[x+1]}}else{var j=v[0],P=v[1];v.push(j),f.push("M "+j[0]+" "+j[1]);for(var z=1;z<v.length;z++){var O=p(j[0],j[1],P[0],P[1],.5);f.push("Q "+j[0]+","+j[1]+" "+O[0]+","+O[1]),j=P,P=v[z+1]}}return f.join(" ")},exports.getShortStrokeOutlinePoints=c,exports.getStrokeOutlinePoints=m,exports.getStrokePoints=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r,t=(r=require("polygon-clipping"))&&"object"==typeof r&&"default"in r?r.default:r;function e(r,t){(null==t||t>r.length)&&(t=r.length);for(var e=0,n=new Array(t);e<t;e++)n[e]=r[e];return n}function n(r,t){var n;if("undefined"==typeof Symbol||null==r[Symbol.iterator]){if(Array.isArray(r)||(n=function(r,t){if(r){if("string"==typeof r)return e(r,void 0);var n=Object.prototype.toString.call(r).slice(8,-1);return"Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n?Array.from(r):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(r,void 0):void 0}}(r))||t&&r&&"number"==typeof r.length){n&&(r=n);var o=0;return function(){return o>=r.length?{done:!0}:{done:!1,value:r[o++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(n=r[Symbol.iterator]()).next.bind(n)}var o=Math.hypot,i=Math.cos,a=Math.max,u=Math.min,v=Math.sin,s=Math.atan2,l=Math.PI,f=l/2;function h(r,t,e,n){return[i(e)*n+r,v(e)*n+t]}function p(r,t,e,n,o){return void 0===o&&(o=.5),[r+(e-r)*o,t+(n-t)*o]}function d(r,t){void 0===t&&(t={});var e,n,i,a=t.streamline,u=void 0===a?.5:a,v=function(r){return Array.isArray(r[0])?r.map((function(r){var t=r[2];return[r[0],r[1],void 0===t?.5:t]})):r.map((function(r){var t=r.pressure;return[r.x,r.y,void 0===t?.5:t]}))}(r),l=0,f=.01,h=v.length,p=[].concat(v[0],[0,0,0]),d=[p];if(0===h)return[];for(var c=1;c<h;c++){var m=v[c],y=m[2],g=p[0],S=p[1];i=s((n=S+(m[1]-S)*(1-u))-S,(e=g+(m[0]-g)*(1-u))-g),f=o(n-S,e-g),d.push(p=[e,n,y,i,f,l+=f])}return d.length>1&&(d[0][2]=d[1][2]),d}function c(r,t){void 0===t&&(t={});var e=t.minSize,n=void 0===e?2.5:e,o=t.maxSize,i=void 0===o?8:o,a=r.length;if(0===a)return[];var u=r[0],v=r[a-1],d=u[2]===v[2]?i:n+(i-n)*v[2],c=u===v?Math.random()*(2*l):s(v[1]-u[1],v[0]-u[0]),m=p(u[0],u[1],v[0],v[1],.5);return[h(m[0],m[1],c+f,d),h(u[0],u[1],c+l,d),h(m[0],m[1],c-f,d),h(v[0],v[1],c,d),h(m[0],m[1],c+f,d)]}function m(r,t){void 0===t&&(t={});var e=t.simulatePressure,n=void 0===e||e,o=t.pressure,i=void 0===o||o,v=t.minSize,s=void 0===v?2.5:v,l=t.maxSize,d=void 0===l?8:l,c=t.smooth,m=void 0===c?8:c,y=r.length,g=r[0],S=r[0],b=g,M=S,x=g,A=g,P=0,j=.5,z=S,O=[];if(0===y)return[];for(var I=1;I<y;I++){var k=r[I],w=k[0],Q=k[1],_=k[2],q=k[3],C=k[4];if(i){if(n){var E=u(1-C/d,1),T=u(C/d,1);_=u(1,j+T/2*(E-j))}P=a(s,u(d,s+_*(d-s)))}else P=d;g=h(w,Q,q-f,P),S=h(w,Q,q+f,P),0===I?(b=g,M=S):(Math.hypot(g[0]-b[0],g[1]-b[1])>m&&(O.push(x),x=p(b[0],b[1],g[0],g[1],.5),b=g),Math.hypot(S[0]-M[0],S[1]-M[1])>m&&(O.unshift(A),A=p(M[0],M[1],S[0],S[1],.5),M=S)),j=_,z=[w,Q]}return O.push(z),O.unshift(z),O}function y(r){return t.union([r])}exports.clipPath=y,exports.default=function(r,t){if(void 0===t&&(t={}),0===r.length)return"";var e=t.clip,o=void 0===e||e,i=t.maxSize,a=void 0===i?8:i,u=d(r,t),v=u[u.length-1][5]<2*a?c(u,t):m(u,t),s=[];if(o)for(var l,f=n(y(v));!(l=f()).done;)for(var h,g=n(l.value);!(h=g()).done;){var S=h.value,b=S[0],M=S[1];S.push(b),s.push("M "+b[0]+" "+b[1]);for(var x=1;x<S.length;x++){var A=p(b[0],b[1],M[0],M[1],.5);s.push(" Q "+b[0]+","+b[1]+" "+A[0]+","+A[1]),b=M,M=S[x+1]}}else{var P=v[0],j=v[1];v.push(P),s.push("M "+P[0]+" "+P[1]);for(var z=1;z<v.length;z++){var O=p(P[0],P[1],j[0],j[1],.5);s.push("Q "+P[0]+","+P[1]+" "+O[0]+","+O[1]),P=j,j=v[z+1]}}return s.join(" ")},exports.getShortStrokeOutlinePoints=c,exports.getStrokeOutlinePoints=m,exports.getStrokePoints=d;
 //# sourceMappingURL=perfect-freehand.cjs.production.min.js.map

dist/perfect-freehand.esm.js

@@ -194,2 +194,4 @@ import polygonClipping from 'polygon-clipping';
   var _options3 = options,
+      _options3$simulatePre = _options3.simulatePressure,
+      simulatePressure = _options3$simulatePre === void 0 ? true : _options3$simulatePre,
       _options3$pressure = _options3.pressure,
@@ -233,4 +235,4 @@ pressure = _options3$pressure === void 0 ? true : _options3$pressure,
     if (pressure) {
-      if (i > 1 && ip === points[i - 1][2]) {
-        // Accellerate the reported pressure.
+      if (simulatePressure) {
+        // Simulate pressure by accellerating the reported pressure.
         var rp = min(1 - distance / maxSize, 1);
@@ -244,3 +246,2 @@ var sp = min(distance / maxSize, 1);
     } else {
-      // If we're not using pressure, size is maxSize.
       size = maxSize;
@@ -247,0 +248,0 @@ } // 3. Shape

package.json

 {
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

README.md

@@ -63,10 +63,11 @@ # Perfect Freehand
 
-| Property     | Type    | Default | Description                                                    |
-| ------------ | ------- | ------- | -------------------------------------------------------------- |
-| `minSize`    | number  | 2.5     | The thinnest size of the stroke.                               |
-| `maxSize`    | number  | 8       | The thickest size of the stroke.                               |
-| `pressure`   | boolean | true    | Whether to apply (or simulate) pressure from the input device. |
-| `streamline` | number  | .5      | How much to streamline the stroke.                             |
-| `smooth`     | number  | .5      | How much to soften the stroke's edges.                         |
-| `clip`       | boolean | true    | Whether to flatten the stroke into a single polygon.           |
+| Property           | Type    | Default | Description                                          |
+| ------------------ | ------- | ------- | ---------------------------------------------------- |
+| `minSize`          | number  | 2.5     | The thinnest size of the stroke.                     |
+| `maxSize`          | number  | 8       | The thickest size of the stroke.                     |
+| `simulatePressure` | boolean | true    | Whether to simulate pressure based on velocity.      |
+| `pressure`         | boolean | true    | Whether to apply pressure.                           |
+| `streamline`       | number  | .5      | How much to streamline the stroke.                   |
+| `smooth`           | number  | .5      | How much to soften the stroke's edges.               |
+| `clip`             | boolean | true    | Whether to flatten the stroke into a single polygon. |
 
@@ -77,2 +78,3 @@ ```js
   maxSize: 8,
+  simulatePressure: true,
   pressure: true,
@@ -92,6 +94,9 @@ streamline: 0.5,
 export default function Example() {
-  const [currentMark, setCurrentMark] = React.useState([])
+  const [currentMark, setCurrentMark] = React.useState({})
 
   function handlePointerDown(e) {
-    setCurrentMark([[e.pageX, e.pageY, e.pressure]])
+    setCurrentMark({
+      type: e.pointerType,
+      point: [e.pageX, e.pageY, e.pressure],
+    })
   }
@@ -101,3 +106,6 @@
     if (e.buttons === 1) {
-      setCurrentMark([...currentMark, [e.pageX, e.pageY, e.pressure]])
+      setCurrentMark({
+        ...currentMark,
+        points: [...currentMark.points, [e.pageX, e.pageY, e.pressure]],
+      })
     }
@@ -114,3 +122,8 @@ }
     >
-      <path d={getPath(currentMark)} />
+      <path
+        d={getPath(currentMark, {
+          pressure: true,
+          simulatePressure: currentMark.type !== 'pen',
+        })}
+      />
     </svg>
@@ -117,0 +130,0 @@ )

src/index.ts

@@ -52,2 +52,3 @@ import polygonClipping from 'polygon-clipping'
 export interface StrokeOutlineOptions extends StrokePointsOptions {
+  simulatePressure?: boolean
   pressure?: boolean
@@ -169,3 +170,9 @@ minSize?: number
 ): number[][] {
-  const { pressure = true, minSize = 2.5, maxSize = 8, smooth = 8 } = options
+  const {
+    simulatePressure = true,
+    pressure = true,
+    minSize = 2.5,
+    maxSize = 8,
+    smooth = 8,
+  } = options
 
@@ -198,4 +205,4 @@ let d0: number,
     if (pressure) {
-      if (i > 1 && ip === points[i - 1][2]) {
-        // Accellerate the reported pressure.
+      if (simulatePressure) {
+        // Simulate pressure by accellerating the reported pressure.
         let rp = min(1 - distance / maxSize, 1)
@@ -205,7 +212,5 @@ const sp = min(distance / maxSize, 1)
       }
-
       // Compute the size based on the pressure.
       size = clamp(minSize + ip * (maxSize - minSize), minSize, maxSize)
     } else {
-      // If we're not using pressure, size is maxSize.
       size = maxSize
@@ -212,0 +217,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92244

increased by0.8%

Number of downloads

198649

increased by6.24%

Lines of code

960

increased by0.95%

Number of lines in readme file

150

increased by9.49%

No dependency changes