[PR #52] [MERGED] feat(annotation): implement tapered arrow shapes with curve support #70

New issue

Closed

opened 2026-03-03 15:57:37 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 15:57:37 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/mrgoonie/winshot/pull/52
Author: @mrgoonie
Created: 12/24/2025
Status: ✅ Merged
Merged: 12/24/2025
Merged by: @mrgoonie

Base: dev ← Head: goon

📝 Commits (3)

8a1624b chore(release): include refactor commits in changelog without version bump
363f471 feat(annotation): implement tapered arrow shapes with curve support
d9adb5e refactor(shapes): increase curve samples to 31 for smoother tapered arrow rendering

📊 Changes

8 files changed (+502 additions, -33 deletions)

View changed files

📝 .releaserc.json (+32 -2)
📝 README.md (+4 -0)
📝 frontend/dist/index.html (+1 -1)
📝 frontend/src/App.tsx (+23 -1)
📝 frontend/src/components/annotation-shapes.tsx (+411 -27)
📝 frontend/src/components/annotation-toolbar.tsx (+7 -0)
📝 frontend/src/components/editor-canvas.tsx (+21 -1)
📝 frontend/src/types/index.ts (+3 -1)

📄 Description

Summary

Replace Konva's built-in Arrow component with custom Shape using sceneFunc for professional tapered/wedge-shaped arrows
Arrows now taper from thin tail (0.5x strokeWidth) to wide head junction (2x strokeWidth) with triangular arrowhead (4x width, 6x length)
Support both straight and curved arrow modes with smooth Bezier curve rendering (31 sample points)
Improved hit detection that follows the curve path for easier selection

Changes

Geometry helpers: unitVector(), perpendicular(), quadBezierPoint(), quadBezierTangent()
Straight arrows: 7-point polygon with tapered body
Curved arrows: Body edges follow quadratic Bezier, arrowhead aligned with endpoint tangent
Hit detection: Curve-following hit area for curved arrows

Test plan

Draw straight arrows - verify tapered wedge shape
Draw curved arrows - verify smooth curve and proper arrowhead orientation
Test selection/clicking on both straight and curved arrows
Drag arrow endpoints and control point - verify real-time updates
Test with various stroke widths

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/mrgoonie/winshot/pull/52 **Author:** [@mrgoonie](https://github.com/mrgoonie) **Created:** 12/24/2025 **Status:** ✅ Merged **Merged:** 12/24/2025 **Merged by:** [@mrgoonie](https://github.com/mrgoonie) **Base:** `dev` ← **Head:** `goon` --- ### 📝 Commits (3) - [`8a1624b`](https://github.com/mrgoonie/winshot/commit/8a1624b34af4f6d6fac79bf3ecc9549d42fa001e) chore(release): include refactor commits in changelog without version bump - [`363f471`](https://github.com/mrgoonie/winshot/commit/363f471fb826e808801b712435bc1c32dae78429) feat(annotation): implement tapered arrow shapes with curve support - [`d9adb5e`](https://github.com/mrgoonie/winshot/commit/d9adb5e600bfd5496da9cdf1b5c4ac59d5f2eb1e) refactor(shapes): increase curve samples to 31 for smoother tapered arrow rendering ### 📊 Changes **8 files changed** (+502 additions, -33 deletions) <details> <summary>View changed files</summary> 📝 `.releaserc.json` (+32 -2) 📝 `README.md` (+4 -0) 📝 `frontend/dist/index.html` (+1 -1) 📝 `frontend/src/App.tsx` (+23 -1) 📝 `frontend/src/components/annotation-shapes.tsx` (+411 -27) 📝 `frontend/src/components/annotation-toolbar.tsx` (+7 -0) 📝 `frontend/src/components/editor-canvas.tsx` (+21 -1) 📝 `frontend/src/types/index.ts` (+3 -1) </details> ### 📄 Description ## Summary - Replace Konva's built-in `Arrow` component with custom `Shape` using `sceneFunc` for professional tapered/wedge-shaped arrows - Arrows now taper from thin tail (0.5x strokeWidth) to wide head junction (2x strokeWidth) with triangular arrowhead (4x width, 6x length) - Support both straight and curved arrow modes with smooth Bezier curve rendering (31 sample points) - Improved hit detection that follows the curve path for easier selection ## Changes - **Geometry helpers**: `unitVector()`, `perpendicular()`, `quadBezierPoint()`, `quadBezierTangent()` - **Straight arrows**: 7-point polygon with tapered body - **Curved arrows**: Body edges follow quadratic Bezier, arrowhead aligned with endpoint tangent - **Hit detection**: Curve-following hit area for curved arrows ## Test plan - [x] Draw straight arrows - verify tapered wedge shape - [x] Draw curved arrows - verify smooth curve and proper arrowhead orientation - [x] Test selection/clicking on both straight and curved arrows - [x] Drag arrow endpoints and control point - verify real-time updates - [x] Test with various stroke widths --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>