Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add arrow shape please #49

Open
soubinan opened this issue Oct 16, 2023 · 7 comments · May be fixed by #70
Open

Add arrow shape please #49

soubinan opened this issue Oct 16, 2023 · 7 comments · May be fixed by #70

Comments

@soubinan
Copy link

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
Copy link

nata11 commented Nov 10, 2023

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
Copy link

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

@vidoardes
Copy link

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
Copy link
Author

soubinan commented Mar 19, 2024

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
Copy link

derek-shnosh commented Mar 19, 2024

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
Copy link

mrstarke commented Jul 25, 2024

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
Copy link

extrememicro commented Jul 27, 2024

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

@extrememicro extrememicro linked a pull request Jul 27, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants