Add borderRadius option (#34)

kurkle · Sep 1, 2021 · 32ba83d · 32ba83d
1 parent 21562af
commit 32ba83d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/element.js b/src/element.js
@@ -1,5 +1,5 @@
 import {Element} from 'chart.js';
-import {isObject} from 'chart.js/helpers';
+import {isObject, addRoundedRectPath, toTRBLCorners} from 'chart.js/helpers';
 
 /**
  * Helper function to get the bounds of the rect
@@ -86,21 +86,23 @@ export default class MatrixElement extends Element {
   draw(ctx) {
     const options = this.options;
     const {inner, outer} = boundingRects(this);
+    const radius = toTRBLCorners(options.borderRadius);
 
     ctx.save();
 
     if (outer.w !== inner.w || outer.h !== inner.h) {
       ctx.beginPath();
-      ctx.rect(outer.x, outer.y, outer.w, outer.h);
-      ctx.clip();
-      ctx.rect(inner.x, inner.y, inner.w, inner.h);
+      addRoundedRectPath(ctx, {x: outer.x, y: outer.y, w: outer.w, h: outer.h, radius});
+      addRoundedRectPath(ctx, {x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius});
       ctx.fillStyle = options.backgroundColor;
       ctx.fill();
       ctx.fillStyle = options.borderColor;
       ctx.fill('evenodd');
     } else {
+      ctx.beginPath();
+      addRoundedRectPath(ctx, {x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius});
       ctx.fillStyle = options.backgroundColor;
-      ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
+      ctx.fill();
     }
 
     ctx.restore();
@@ -140,6 +142,7 @@ MatrixElement.defaults = {
   backgroundColor: undefined,
   borderColor: undefined,
   borderWidth: undefined,
+  borderRadius: 0,
   anchorX: undefined,
   anchorY: undefined,
   width: 20,

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -1,4 +1,5 @@
 import {
+  BorderRadius,
   Chart,
   ChartType,
   ChartComponent,
@@ -46,6 +47,7 @@ export interface MatrixProps {
 export type AnchorX = 'left' | 'center' | 'right';
 export type AnchorY = 'top' | 'center' | 'bottom';
 export interface MatrixOptions extends CommonElementOptions {
+  borderRadius: number | BorderRadius;
   anchorX: AnchorX;
   anchorY: AnchorY;
   width: number;