feat: Add support for rounded corners in diamond (#4369)

src/renderer/renderElement.ts

@@ -400,15 +400,45 @@ const generateElementShape = (
       case "diamond": {
         const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
           getDiamondPoints(element);
-        shape = generator.polygon(
+        if (element.strokeSharpness === "round") {
-          [
+          shape = generator.path(
-            [topX, topY],
+            `M ${topX + (rightX - topX) * 0.25} ${
-            [rightX, rightY],
+              topY + (rightY - topY) * 0.25
-            [bottomX, bottomY],
+            } L ${rightX - (rightX - topX) * 0.25} ${
-            [leftX, leftY],
+              rightY - (rightY - topY) * 0.25
-          ],
+            } 
-          generateRoughOptions(element),
+            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${
-        );
+              rightX - (rightX - bottomX) * 0.25
+            } ${rightY + (bottomY - rightY) * 0.25} 
+            L ${bottomX + (rightX - bottomX) * 0.25} ${
+              bottomY - (bottomY - rightY) * 0.25
+            }  
+            C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${
+              bottomX - (bottomX - leftX) * 0.25
+            } ${bottomY - (bottomY - leftY) * 0.25} 
+            L ${leftX + (bottomX - leftX) * 0.25} ${
+              leftY + (bottomY - leftY) * 0.25
+            } 
+            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${
+              leftX + (topX - leftX) * 0.25
+            } ${leftY - (leftY - topY) * 0.25} 
+            L ${topX - (topX - leftX) * 0.25} ${topY + (leftY - topY) * 0.25} 
+            C ${topX} ${topY}, ${topX} ${topY}, ${
+              topX + (rightX - topX) * 0.25
+            } ${topY + (rightY - topY) * 0.25}`,
+            generateRoughOptions(element, true),
+          );
+        } else {
+          shape = generator.polygon(
+            [
+              [topX, topY],
+              [rightX, rightY],
+              [bottomX, bottomY],
+              [leftX, leftY],
+            ],
+            generateRoughOptions(element),
+          );
+        }
         break;
       }
       case "ellipse":

src/scene/comparisons.ts

@@ -29,7 +29,10 @@ export const hasStrokeStyle = (type: string) =>
   type === "line";
 
 export const canChangeSharpness = (type: string) =>
-  type === "rectangle" || type === "arrow" || type === "line";
+  type === "rectangle" ||
+  type === "arrow" ||
+  type === "line" ||
+  type === "diamond";
 
 export const hasText = (type: string) => type === "text";