updated export.test

* fix: updated link for documentation page under help section

* Update docs link

---------

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

dev-docs/docs/introduction/contributing.mdx

@@ -2,6 +2,11 @@
 
 Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.
 
+We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you.
+For new contributors we would recommend to start with *Easy* tasks.
+
+In case you want to pick up something from the roadmap, comment on that issue and one of the project maintainers will assign it to you, post which you can discuss in the issue and start working on it.
+
 ## Setup
 
 ### Option 1 - Manual

src/components/HelpDialog.tsx

@@ -12,7 +12,7 @@ const Header = () => (
   <div className="HelpDialog__header">
     <a
       className="HelpDialog__btn"
-      href="https://github.com/excalidraw/excalidraw#documentation"
+      href="https://docs.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
     >

src/packages/excalidraw/README.md

@@ -43,3 +43,7 @@ Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/
 ## API
 
 Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api)
+
+## Contributing
+
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing)

src/renderer/renderElement.ts

@@ -251,6 +251,7 @@ const drawImagePlaceholder = (
     size,
   );
 };
+
 const drawElementOnCanvas = (
   element: NonDeletedExcalidrawElement,
   rc: RoughCanvas,
@@ -300,17 +301,35 @@ const drawElementOnCanvas = (
       const img = isInitializedImageElement(element)
         ? renderConfig.imageCache.get(element.fileId)?.image
         : undefined;
+      context.save();
+      const { width, height } = element;
+      if (element.roundness) {
+        const r = getCornerRadius(Math.min(width, height), element) / 4;
+        context.beginPath();
+        context.moveTo(r, 0);
+        context.lineTo(width - r, 0);
+        context.quadraticCurveTo(width, 0, width, r);
+        context.lineTo(width, height - r);
+        context.quadraticCurveTo(width, height, width - r, height);
+        context.lineTo(r, height);
+        context.quadraticCurveTo(0, height, 0, height - r);
+        context.lineTo(0, r);
+        context.quadraticCurveTo(0, 0, r, 0);
+        context.closePath();
+        context.clip();
+      }
       if (img != null && !(img instanceof Promise)) {
         context.drawImage(
           img,
           0 /* hardcoded for the selection box*/,
           0,
-          element.width,
-          element.height,
+          width,
+          height,
         );
       } else {
         drawImagePlaceholder(element, context, renderConfig.zoom.value);
       }
+      context.restore();
       break;
     }
     default: {
@@ -1390,7 +1409,14 @@ export const renderElementToSvg = (
           image.setAttribute("width", "100%");
           image.setAttribute("height", "100%");
           image.setAttribute("href", fileData.dataURL);
-
+          if (element.roundness) {
+            const r =
+              getCornerRadius(
+                Math.min(element.width, element.height),
+                element,
+              ) / 4;
+            image.setAttribute("clip-path", `inset(0% round ${r}px)`);
+          }
           symbol.appendChild(image);
 
           root.prepend(symbol);

src/scene/comparisons.ts

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

src/tests/export.test.tsx

@@ -118,6 +118,7 @@ describe("export", () => {
         scale: [1, 1],
         width: 100,
         height: 100,
+        roundness: null,
         angle: normalizeAngle(315),
       }),
       API.createElement({
@@ -128,6 +129,7 @@ describe("export", () => {
         scale: [-1, 1],
         width: 50,
         height: 50,
+        roundness: null,
         angle: normalizeAngle(45),
       }),
       API.createElement({
@@ -138,6 +140,7 @@ describe("export", () => {
         scale: [1, -1],
         width: 100,
         height: 100,
+        roundness: null,
         angle: normalizeAngle(45),
       }),
       API.createElement({
@@ -148,6 +151,7 @@ describe("export", () => {
         scale: [-1, -1],
         width: 50,
         height: 50,
+        roundness: null,
         angle: normalizeAngle(315),
       }),
     ];