feat: Add 'Fine' stroke width option for freehand tool

packages/element/src/renderElement.ts

@@ -1033,10 +1033,18 @@ export function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement) {
     ? element.points.map(([x, y], i) => [x, y, element.pressures[i]])
     : [[0, 0, 0.5]];
 
+  let size;
+  if (element.strokeWidth === 0.5) {
+    size = 1.5;
+  } else {
+    // existin stroke widths
+    size = element.strokeWidth * 4.25;
+  }
+
   // Consider changing the options for simulated pressure vs real pressure
   const options: StrokeOptions = {
     simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
+    size: size,
     thinning: 0.6,
     smoothing: 0.5,
     streamline: 0.5,

packages/excalidraw/actions/actionProperties.tsx

@@ -121,6 +121,7 @@ import {
   ArrowheadCrowfootIcon,
   ArrowheadCrowfootOneIcon,
   ArrowheadCrowfootOneOrManyIcon,
+  StrokeWidthFineIcon,
 } from "../components/icons";
 
 import { Fonts } from "../fonts";
@@ -491,6 +492,12 @@ export const actionChangeStrokeWidth = register({
       <ButtonIconSelect
         group="stroke-width"
         options={[
+          {
+            value: 0.5,
+            text: t("labels.fine"),
+            icon: StrokeWidthFineIcon,
+            testId: "strokeWidth-fine",
+          },
           {
             value: STROKE_WIDTH.thin,
             text: t("labels.thin"),

packages/excalidraw/components/icons.tsx

@@ -2236,3 +2236,16 @@ export const elementLinkIcon = createIcon(
   </g>,
   tablerIconProps,
 );
+
+export const StrokeWidthFineIcon = createIcon(
+  <>
+    <path
+      d="M4.167 10h11.666"
+      stroke="currentColor"
+      strokeWidth="0.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </>,
+  modifiedTablerIconProps,
+);

packages/excalidraw/locales/en.json

@@ -70,10 +70,11 @@
     "crossHatch": "Cross-hatch",
     "thin": "Thin",
     "bold": "Bold",
+    "extraBold": "Extra bold",
+    "fine": "Fine",
     "left": "Left",
     "center": "Center",
     "right": "Right",
-    "extraBold": "Extra bold",
     "architect": "Architect",
     "artist": "Artist",
     "cartoonist": "Cartoonist",