feat: Better rendering of curved rectangles (#3562)

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"

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(

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"