[PR #74] [MERGED] feat(editor): add fill color and corner radius controls for shape annotations #84

New issue

Closed

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

kerem commented

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

Owner

📋 Pull Request Information

Original PR: https://github.com/mrgoonie/winshot/pull/74
Author: @mrgoonie
Created: 1/12/2026
Status: ✅ Merged
Merged: 1/12/2026
Merged by: @mrgoonie

Base: dev ← Head: goon

📝 Commits (10+)

3960593 feat(types): add fill color and corner radius to annotation model
55ad971 refactor(toolbar): extract reusable ColorPickerDropdown with portal-based positioning
df5cfe6 feat(app): add fill color and corner radius controls to editor state
fa92942 feat(canvas): render fill colors and corner radius for shapes
4b78094 build: update manifest and gitignore
a10849d chore(agents): update agent docs
826b6e9 chore(release): 1.5.0-beta.2 [skip ci]
50f52df chore(release): 1.4.1 [skip ci]
c6f440c chore(release): 1.5.0 [skip ci]
0e1bfa1 chore: merge dev into goon

📊 Changes

12 files changed (+4541 additions, -526 deletions)

View changed files

📝 .gitignore (+2 -1)
➕ AGENTS.md (+46 -0)
📝 frontend/dist/index.html (+2 -2)
📝 frontend/src/App.tsx (+59 -7)
📝 frontend/src/components/annotation-shapes.tsx (+2 -1)
📝 frontend/src/components/annotation-toolbar.tsx (+252 -114)
📝 frontend/src/components/editor-canvas.tsx (+14 -5)
📝 frontend/src/components/settings-panel.tsx (+25 -0)
📝 frontend/src/types/index.ts (+3 -2)
📝 frontend/wailsjs/go/models.ts (+2 -0)
📝 internal/config/config.go (+9 -8)
📝 release-manifest.json (+4125 -386)

📄 Description

Summary

Add fill color picker for rectangle and ellipse shapes
Add corner radius control for rectangle shapes
Add "no stroke" option for shapes (fill-only mode)
Refactor color pickers to dropdown with React Portal for proper z-index handling

Changes

Types: Added optional fill and cornerRadius properties to Annotation interface
Toolbar: Extracted ColorPickerDropdown component using React Portal to escape overflow:hidden containers
App State: Added fillColor and shapeCornerRadius state with proper event handlers
Canvas: Implemented fill color and corner radius rendering on Konva shapes

Test Plan

Verify fill color picker dropdown appears above canvas
Test rectangle tool with various fill colors and corner radius values
Test ellipse tool with fill colors
Verify "no stroke" option works correctly for shapes
Test editing existing shapes to change fill/stroke/radius

_{🔄 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/74 **Author:** [@mrgoonie](https://github.com/mrgoonie) **Created:** 1/12/2026 **Status:** ✅ Merged **Merged:** 1/12/2026 **Merged by:** [@mrgoonie](https://github.com/mrgoonie) **Base:** `dev` ← **Head:** `goon` --- ### 📝 Commits (10+) - [`3960593`](https://github.com/mrgoonie/winshot/commit/396059311cf84eb8ed8df647b890f138562abdff) feat(types): add fill color and corner radius to annotation model - [`55ad971`](https://github.com/mrgoonie/winshot/commit/55ad9712eda985630b98344f101dcb7990252191) refactor(toolbar): extract reusable ColorPickerDropdown with portal-based positioning - [`df5cfe6`](https://github.com/mrgoonie/winshot/commit/df5cfe60d055e738967cf39a4ed77921a79db0f7) feat(app): add fill color and corner radius controls to editor state - [`fa92942`](https://github.com/mrgoonie/winshot/commit/fa929420c8bbb2e3ab9a3aeab12a3c5ef01916de) feat(canvas): render fill colors and corner radius for shapes - [`4b78094`](https://github.com/mrgoonie/winshot/commit/4b7809450fa0f544307df0dd83d1d0dacebcb513) build: update manifest and gitignore - [`a10849d`](https://github.com/mrgoonie/winshot/commit/a10849dfa1f249b6aa2c1f1046f9c6ea83d63875) chore(agents): update agent docs - [`826b6e9`](https://github.com/mrgoonie/winshot/commit/826b6e97767f2fffa5eaa4a58cd180aed738dbb2) chore(release): 1.5.0-beta.2 [skip ci] - [`50f52df`](https://github.com/mrgoonie/winshot/commit/50f52df97dcb0d70ebc32683c7a8354e4a9f7cd6) chore(release): 1.4.1 [skip ci] - [`c6f440c`](https://github.com/mrgoonie/winshot/commit/c6f440c3a14a0879b54ec1404de6d18e65c7f96f) chore(release): 1.5.0 [skip ci] - [`0e1bfa1`](https://github.com/mrgoonie/winshot/commit/0e1bfa1e6f58131d5ec7c45e2d5e567f089868ca) chore: merge dev into goon ### 📊 Changes **12 files changed** (+4541 additions, -526 deletions) <details> <summary>View changed files</summary> 📝 `.gitignore` (+2 -1) ➕ `AGENTS.md` (+46 -0) 📝 `frontend/dist/index.html` (+2 -2) 📝 `frontend/src/App.tsx` (+59 -7) 📝 `frontend/src/components/annotation-shapes.tsx` (+2 -1) 📝 `frontend/src/components/annotation-toolbar.tsx` (+252 -114) 📝 `frontend/src/components/editor-canvas.tsx` (+14 -5) 📝 `frontend/src/components/settings-panel.tsx` (+25 -0) 📝 `frontend/src/types/index.ts` (+3 -2) 📝 `frontend/wailsjs/go/models.ts` (+2 -0) 📝 `internal/config/config.go` (+9 -8) 📝 `release-manifest.json` (+4125 -386) </details> ### 📄 Description ## Summary - Add fill color picker for rectangle and ellipse shapes - Add corner radius control for rectangle shapes - Add "no stroke" option for shapes (fill-only mode) - Refactor color pickers to dropdown with React Portal for proper z-index handling ## Changes - **Types**: Added optional `fill` and `cornerRadius` properties to Annotation interface - **Toolbar**: Extracted `ColorPickerDropdown` component using React Portal to escape overflow:hidden containers - **App State**: Added `fillColor` and `shapeCornerRadius` state with proper event handlers - **Canvas**: Implemented fill color and corner radius rendering on Konva shapes ## Test Plan - [ ] Verify fill color picker dropdown appears above canvas - [ ] Test rectangle tool with various fill colors and corner radius values - [ ] Test ellipse tool with fill colors - [ ] Verify "no stroke" option works correctly for shapes - [ ] Test editing existing shapes to change fill/stroke/radius --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>