diff --git a/blocks/sketch/src/edit.js b/blocks/sketch/src/edit.js index 26ef88c3..01bae9c0 100644 --- a/blocks/sketch/src/edit.js +++ b/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 ; }; -// 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; diff --git a/package.json b/package.json index 3d1f74e7..7bc04844 100644 --- a/package.json +++ b/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" } } diff --git a/yarn.lock b/yarn.lock index 964e6dd3..96b6aa3d 100644 --- a/yarn.lock +++ b/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"