Simplify strokes using simplify-js

Author: oskosk

blocks/sketch/src/edit.js

@@ -3,6 +3,7 @@
  */
 import getStroke from 'perfect-freehand';
 import { useCallback } from '@wordpress/element';
+import simplify from 'simplify-js';
 
 /**
  * Internal dependencies
@@ -68,7 +69,7 @@ const Edit = ( { attributes, isSelected, setAttributes } ) => {
 				strokes: [
 					...strokes,
 					{
-						stroke,
+						stroke: simplifyPath( stroke ),
 						color,
 					},
 				],
@@ -190,5 +191,10 @@ export const StrokePath = ( { stroke } ) => {
 	return <path fill={ color } d={ getSvgPathFromStroke( stroke.stroke ) } />;
 };
 
-// export default Edit;
+export const simplifyPath = ( stroke ) => {
+	const mapped = stroke.map( item => ( { x: item[ 0 ], y: item[ 1 ] } ) );
+	const simplified = simplify( mapped ).map( item => ( [ item.x, item.y ] ) );
+	return simplified;
+};
+
 export default Edit;

package.json

@@ -61,6 +61,7 @@
 		"classnames": "^2.3.1",
 		"fast-average-color": "^7.0.1",
 		"perfect-freehand": "1.2.0",
+		"simplify-js": "1.2.4",
 		"tinycolor2": "^1.4.2"
 	}
 }

yarn.lock

@@ -14335,6 +14335,11 @@ simple-html-tokenizer@^0.5.7:
   resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.5.11.tgz#4c5186083c164ba22a7b477b7687ac056ad6b1d9"
   integrity sha512-C2WEK/Z3HoSFbYq8tI7ni3eOo/NneSPRoPpcM7WdLjFOArFuyXEjAoCdOC3DgMfRyziZQ1hCNR4mrNdWEvD0og==
 
+simplify-js@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/simplify-js/-/simplify-js-1.2.4.tgz#7aab22d6df547ffd40ef0761ccd82b75287d45c7"
+  integrity sha512-vITfSlwt7h/oyrU42R83mtzFpwYk3+mkH9bOHqq/Qw6n8rtR7aE3NZQ5fbcyCUVVmuMJR6ynsAhOfK2qoah8Jg==
+
 sirv@^1.0.7:
   version "1.0.19"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"