support `extraBold` for all element types

packages/element/src/bounds.ts

@@ -5,6 +5,7 @@ import {
   invariant,
   rescalePoints,
   sizeOf,
+  STROKE_WIDTH,
 } from "@excalidraw/common";
 
 import {
@@ -808,9 +809,15 @@ export const getArrowheadPoints = (
   // This value is selected by minimizing a minimum size with the last segment of the arrowhead
   const lengthMultiplier =
     arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
-  const minSize = Math.min(size, length * lengthMultiplier);
-  const xs = x2 - nx * minSize;
-  const ys = y2 - ny * minSize;
+  // make arrowheads bigger for thick strokes
+  const strokeWidthMultiplier =
+    element.strokeWidth >= STROKE_WIDTH.extraBold ? 1.5 : 1;
+
+  const adjustedSize =
+    Math.min(size, length * lengthMultiplier) * strokeWidthMultiplier;
+
+  const xs = x2 - nx * adjustedSize;
+  const ys = y2 - ny * adjustedSize;
 
   if (
     arrowhead === "dot" ||
@@ -859,7 +866,7 @@ export const getArrowheadPoints = (
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 + minSize * 2, y2),
+        pointFrom(x2 + adjustedSize * 2, y2),
         pointFrom(x2, y2),
         Math.atan2(py - y2, px - x2) as Radians,
       );
@@ -870,7 +877,7 @@ export const getArrowheadPoints = (
           : [0, 0];
 
       [ox, oy] = pointRotateRads(
-        pointFrom(x2 - minSize * 2, y2),
+        pointFrom(x2 - adjustedSize * 2, y2),
         pointFrom(x2, y2),
         Math.atan2(y2 - py, x2 - px) as Radians,
       );

packages/element/src/shape.ts

@@ -21,6 +21,7 @@ import {
   assertNever,
   COLOR_PALETTE,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
+  STROKE_WIDTH,
 } from "@excalidraw/common";
 
 import { RoughGenerator } from "roughjs/bin/generator";
@@ -202,7 +203,7 @@ export const generateRoughOptions = (
     // hachureGap because if not specified, roughjs uses strokeWidth to
     // calculate them (and we don't want the fills to be modified)
     fillWeight: element.strokeWidth / 2,
-    hachureGap: element.strokeWidth * 4,
+    hachureGap: Math.min(element.strokeWidth, STROKE_WIDTH.bold) * 4,
     roughness: adjustRoughness(element),
     stroke: element.strokeColor,
     preserveVertices:

packages/excalidraw/actions/actionProperties.tsx

@@ -555,14 +555,7 @@ export const actionChangeStrokeWidth = register({
       <div className="buttonList">
         <RadioSelection
           group="stroke-width"
-          options={
-            appState.activeTool.type === "freedraw" ||
-            app.scene
-              .getSelectedElements(app.state)
-              .every((element) => isFreeDrawElement(element))
-              ? WIDTHS
-              : WIDTHS.slice(0, 3)
-          }
+          options={WIDTHS}
           value={getFormValue(
             elements,
             app,