[Bug] Arrow annotate tool ui's become broken when increase the line width

[MustafaEminn]

Describe the Bug

When I set annotations line width to 10 than I'm getting following result.

Steps to Reproduce

1. Set ArrowAnnotationTool lineWidth style to 10.
2. Draw an arrow.

The current behavior

When I draw arrow the arrow line overflows outside of arrow.

The expected behavior

The line should not overflow.

OS

Windows 10

Node version

20

Browser

Chrome 131.0.6778.108

[sedghi]

what do you want to do

[MustafaEminn]

I want to provide dynamic line widths to user. The default size of line is not visible for most of the screens.

[sedghi]

I mean 10 is a bit much, i wonder if we/you should put a max on it

[MustafaEminn]

Let's say max is 4. The arrow lose the shape. It is usable but it would be good to see a proper arrow.

Default:

[sedghi]

I see the issue now, i'm wondering what is a good fix for it, but really when width increases the issue become like this

I can guide you on how to implement it

Here is the code

packages/tools/src/tools/annotation/ArrowAnnotateTool.ts

in the render annotation tool method renderAnnotation

you see there is this part

 const arrowUID = '1';
      if (this.configuration.arrowFirst) {
        drawArrowSvg(
          svgDrawingHelper,
          annotationUID,
          arrowUID,
          canvasCoordinates[1],
          canvasCoordinates[0],
          {
            color,
            width: lineWidth,
            lineDash: lineDash,
          }
        );
      } else {
        drawArrowSvg(
          svgDrawingHelper,
          annotationUID,
          arrowUID,
          canvasCoordinates[0],
          canvasCoordinates[1],
          {
            color,
            width: lineWidth,
            lineDash: lineDash,
          }
        );
      }

if you look inside drawArrowSVG

there is a

// The line itself
  drawLine(svgDrawingHelper, annotationUID, arrowUID, start, end, {
    color,
    width,
    lineWidth,
    lineDash,
  });

which is the line

and there is the point draw (2 lines)

drawLine(
svgDrawingHelper,
annotationUID,
'2',
firstLine.start,
firstLine.end,
{
color,
width,
lineWidth,
}
);

drawLine(
svgDrawingHelper,
annotationUID,
'3',
secondLine.start,
secondLine.end,
{
color,
width,
lineWidth,
}
);

we should make the calculation PI/2 instead of PI/7?

const firstLine = {
start: [
end[0] - headLength * Math.cos(angle - Math.PI / 7),
end[1] - headLength * Math.sin(angle - Math.PI / 7),
] as Types.Point2,
end: end,
};

const secondLine = {
start: [
end[0] - headLength * Math.cos(angle + Math.PI / 7),
end[1] - headLength * Math.sin(angle + Math.PI / 7),
] as Types.Point2,
end: end,
};

[MustafaEminn]

I'm not good at geometry. I have tried to change 7 to 2. The arrow line just become straight line

[sedghi]

try another value

[MustafaEminn]

I tried from 7 to 3. The end point is not correctly overlapped.

[daker]

it can be easily fixed with svg marker element

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- A marker to be used as an arrowhead -->
    <marker markerWidth="5" markerHeight="5" refX="2.5" refY="2.5" viewBox="0 0 5 5" orient="auto" id="arrow">
      <polyline points="0,2.5 2.5,1.25 0,0" fill="none" stroke-width="0.8333333333333334" stroke="black" stroke-linecap="round" transform="matrix(1,0,0,1,0.8333333333333334,1.25)" stroke-linejoin="round" orient="auto-start-reverse"></polyline>
    </marker>
  </defs>
  <!-- A line with a marker -->
  <line x1="10" y1="10" x2="50" y2="50" stroke="black" stroke-width="1" marker-end="url(#arrow)" />
  <line x1="50" y1="10" x2="100" y2="55" stroke="black" stroke-width="8" marker-end="url(#arrow)" />
</svg>

[sedghi]

Oh didn't know about marker element!