Add arrow shape please

[soubinan]

Hi,
First of all, thank youh for this awesome plugin 💯

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]);

[ofonseca-pyming]

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