Merge pull request #14 from camiha/develop

feat: add border API

README.md

@@ -102,6 +102,9 @@ If you want to set styling globally, please refer to the StyleOption section. (I
 ##### PieStyle
 | Property        | Type                | Description                                       |
 |-----------------|---------------------|---------------------------------------------------|
+| `border`        | `boolean`           | if set `true`, set border for each pie segment    |
+| `borderColor`   | `string`            |                                                   |
+| `borderWidth`   | `number`            |                                                   |
 | `theme`         | `PieTheme[]`        | Array of theme options for the pie segments.      |
 
 ##### LabelStyle
@@ -146,6 +149,9 @@ const option = {
 			defaultColor: "#000",
 		},
 		pie: {
+			border: false,
+			borderColor: '#000',
+			borderWidth: 2,
 			theme: [
 				{
 					bg: "#e0e7ff",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hook-roulette",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Minimal roulette wheel component. built with React Hooks.",
   "homepage": "https://github.com/camiha/React-Hook-Roulette",
   "type": "module",

src/config.ts

@@ -42,6 +42,9 @@ export const defaultOptions: DefaultRouletteOptions = {
 			defaultColor: "#000",
 		},
 		pie: {
+			border: false,
+			borderColor: "#000",
+			borderWidth: 2,
 			theme: [
 				{
 					bg: "#e0e7ff",

src/functions/draw-canvas.ts

@@ -99,6 +99,7 @@ export const drawPie = ({
 	pie,
 	segmentStartAngle,
 	anglePerSegment,
+	style,
 }: DrawPie): void => {
 	const startDeg = degreesToCanvasRadians(segmentStartAngle);
 	const endDeg = degreesToCanvasRadians(segmentStartAngle + anglePerSegment);
@@ -114,6 +115,29 @@ export const drawPie = ({
 		true,
 	);
 	context.fill();
+
+	if (
+		style?.pie?.border == null ||
+		style?.pie?.borderWidth == null ||
+		style?.pie?.borderColor == null
+	) {
+		return;
+	}
+	// has border
+	context.beginPath();
+	context.strokeStyle = style.pie.borderColor;
+	context.lineWidth = style.pie.borderWidth;
+	context.moveTo(geometry.center.x, geometry.center.y);
+	context.lineTo(
+		geometry.center.x + geometry.radius * Math.cos(startDeg),
+		geometry.center.y + geometry.radius * Math.sin(startDeg),
+	);
+	context.moveTo(geometry.center.x, geometry.center.y);
+	context.lineTo(
+		geometry.center.x + geometry.radius * Math.cos(endDeg),
+		geometry.center.y + geometry.radius * Math.sin(endDeg),
+	);
+	context.stroke();
 };
 
 export interface DrawRoulette {
@@ -181,6 +205,30 @@ export const drawRoulette = ({
 		});
 		segmentEndAngle = segmentStartAngle;
 	}
+
+	// has border
+
+	if (
+		style?.pie?.border == null ||
+		style?.pie?.borderWidth == null ||
+		style?.pie?.borderColor == null
+	) {
+		return;
+	}
+
+	const lineWidth = style.pie.borderWidth;
+	context.beginPath();
+	context.strokeStyle = style.pie.borderColor;
+	context.lineWidth = lineWidth;
+	context.arc(
+		geometry.center.x,
+		geometry.center.y,
+		geometry.radius - lineWidth / 2,
+		0,
+		Math.PI * 2,
+		true,
+	);
+	context.stroke();
 };
 
 interface DrawCanvas {

src/hooks/use-roulette.ts

@@ -41,6 +41,7 @@ export const useRoulette = ({
 					...options.style?.arrow,
 				},
 				pie: {
+					...defaultOptions.style.pie,
 					theme: [
 						...(options.style?.pie?.theme || defaultOptions.style.pie.theme),
 					],

src/types.ts

@@ -44,6 +44,9 @@ interface PieTheme {
 }
 
 interface PieStyle {
+	border: boolean;
+	borderColor: string;
+	borderWidth: number;
 	theme: PieTheme[];
 }