diff --git a/package.json b/package.json index 424bf546..bb8da267 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-scripts": "4.0.3", - "roughjs": "4.3.1", + "roughjs": "4.4.0", "sass": "1.32.10", "socket.io-client": "2.3.1", "typescript": "4.2.4" diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts index d491d96e..a51cdb03 100644 --- a/src/renderer/renderElement.ts +++ b/src/renderer/renderElement.ts @@ -228,7 +228,10 @@ export const getShapeForElement = (element: ExcalidrawElement) => export const invalidateShapeForElement = (element: ExcalidrawElement) => shapeCache.delete(element); -export const generateRoughOptions = (element: ExcalidrawElement): Options => { +export const generateRoughOptions = ( + element: ExcalidrawElement, + continuousPath = false, +): Options => { const options: Options = { seed: element.seed, strokeLineDash: @@ -253,6 +256,7 @@ export const generateRoughOptions = (element: ExcalidrawElement): Options => { hachureGap: element.strokeWidth * 4, roughness: element.roughness, stroke: element.strokeColor, + preserveVertices: continuousPath, }; switch (element.type) { @@ -314,7 +318,7 @@ const generateElementShape = ( } Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${ h - r } L 0 ${r} Q 0 0, ${r} 0`, - generateRoughOptions(element), + generateRoughOptions(element, true), ); } else { shape = generator.rectangle( diff --git a/yarn.lock b/yarn.lock index 26f0b34a..9ff5fdcd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10851,9 +10851,10 @@ rollup@^1.31.1: "@types/node" "*" acorn "^7.1.0" -roughjs@4.3.1: - version "4.3.1" - resolved "https://registry.npmjs.org/roughjs/-/roughjs-4.3.1.tgz" +roughjs@4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.4.0.tgz#56ee4b3c8a453af8debc03b81e636dcab9efcdb2" + integrity sha512-mDjSVK/RdRwdi4Dw9u5eoMiEsblEr6y2ZpOSyYa5IAAPbpUqplPezWbj4+J2gJlnxKKcRX+ccH26LFDyplhXXQ== dependencies: path-data-parser "^0.1.0" points-on-curve "^0.2.0"