Add arrow shape please

[soubinan]

Hi, First of all, thank youh for this awesome plugin :100:

Please could you add the arrow shape to the list of available object/shapes usable ?

I would love to submit it as a PR but I am not a gnome dev and I do not really understand the code I checked (and I hate JS) So I will hope you guys could help to add this..

Thanks a lot again!

[nata11]

I agree. Great tool compared to grommit. For tutorials and such an arrow is necessity on an annotation tool. Probably just add another type of end cap. Thanks a lot!

[derek-shnosh]

+1 for this, the current option isn't as clean and a bit cumbersome.

[vidoardes]

To be honest I think using the Poly line tool is much easier and gives a better result than bending the line; You can draw on side of the arrow head, hit return (without letting go of left click), draw the other side, then just draw the line from the middle.

Screencast from 2024-03-18 17-38-20.webm

[soubinan]

I agree, this is possible It is what I use currently But it is quickly a pain when you have to do it many times, specially if you are presenting something You have to pause 2 or 3 seconds each time you want to point something (and the arrow is not always clean)

[derek-shnosh]

Not plugging another solution here, but here's an example from another tool that I've started using. My use case for arrows is typically to point something(s) out in a screenshot. The ease of dropping an arrow with a single click-drag motion has a beneficial impact on workflow, especially when creating screenshots for documentation/etc.

Screencast from 2024-03-19 09-10-21.webm

[mrstarke]

I made a change in the code to create an arrow when using the 'line' shape and pressing shift at the same time. I haven't tested it on the 'main' branch, but I see no reason why it shouldn't work. I am not very familiar with the extension's code, so feel free to modify it or not use it at all. I just created it to address a personal need.

Here is the code:

diff --git a/area.js b/area.js
index 2b78cd8..42e499e 100644
--- a/area.js
+++ b/area.js
@@ -698,6 +698,17 @@ export const DrawingArea = GObject.registerClass({
                 image: this.currentImage,
                 points: []
             });
+        } else if (this.currentTool == Shape.LINE) {
+            this.currentElement = new Elements.DrawingElement({
+                shape: this.currentTool,
+                color: this.currentColor,
+                arrow: shiftPressed,
+                fill: this.fill,
+                fillRule: this.currentFillRule,
+                line: { lineWidth: this.currentLineWidth, lineJoin: this.currentLineJoin, lineCap: this.currentLineCap },
+                dash: { active: this.dashedLine, array: this.dashedLine ? [this.dashArray[0] || this.currentLineWidth, this.dashArray[1] || this.currentLineWidth * 3] : [0, 0] , offset: this.dashOffset },
+                points: []
+            });
         } else {
             this.currentElement = new Elements.DrawingElement({
                 shape: this.currentTool,
diff --git a/elements.js b/elements.js
index eec7739..4ee89b6 100644
--- a/elements.js
+++ b/elements.js
@@ -256,6 +256,13 @@ const _DrawingElement = GObject.registerClass({
             for (let j = 1; j < points.length; j++) {
                 cr.lineTo(points[j][0], points[j][1]);
             }
+            if (shape == Shape.LINE && this.arrow){
+                let angle = Math.atan2((points[1][1] - points[0][1]) , (points[1][0] - points[0][0]));
+                let hyp = Math.sqrt((points[1][0] - points[0][0]) * (points[1][0] - points[0][0]) + (points[1][1] - points[0][1]) * (points[1][1] - points[0][1])) * 0.2;
+                cr.moveTo( points[1][0] - hyp * Math.cos( angle - Math.PI / 6 ), points[1][1] - hyp * Math.sin( angle - Math.PI / 6 ) );
+                cr.lineTo( points[1][0], points[1][1] );
+                cr.lineTo( points[1][0] - hyp * Math.cos( angle + Math.PI / 6 ), points[1][1] - hyp * Math.sin( angle + Math.PI / 6 ) );
+            }

         } else if (shape == Shape.ELLIPSE && points.length >= 2) {
             let radius = Math.hypot(points[1][0] - points[0][0], points[1][1] - points[0][1]);

[extrememicro]

that didn't work for me. Shift is used to remove shapes. @mrstarke @derek-shnosh @nata11 review #70 please, I added arrow tool.