Connector selection handles are still loud blue, out of step with the rest of the canvas's neutral selection chrome
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 21
- Forks
- 13
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 24
Description
Reported via manual QA
Selection appearance across the canvas reads as "loud" — most notably a connector's selection handles, which are still a saturated blue. Expected: faint, light selection chrome consistent everywhere, closer to how Frappe Slides marks a selection.
Where this stands today
Shapes, mind-map nodes and flowchart nodes already moved to a neutral, low-contrast selection style: frontend/src/diagram/selectionChrome.js defines NEUTRAL_SELECT = '#525252', consumed by SelectionLayer.vue, HoverOutline.vue, MindmapHoverHandles.vue and FlowchartHoverHandles.vue (dashed outline on shapes, solid on text) — this was the outcome of #414/#464/#261 (all closed).
Connectors were missed. frontend/src/components/canvas/ConnectorView.vue still draws its own selection handles — start/end endpoint circles and the curved-connector control-point circle — in a separate, saturated blue:
- Line ~428: endpoint handle,
#006EDB,stroke-width="1.5",r="6" - Line ~441: the other endpoint handle, same styling
- Line ~453: curve control-point handle, same styling
SelectionLayer.vue's live marquee (drag-select) rectangle (lines ~331-342) is also #006EDB — that one is arguably fine to keep visually distinct from a committed selection (a marquee is a transient drag gesture, not "this is selected"), but flag it for a design call rather than assuming it should change too.
Expected behavior
Connector selection handles (endpoints + curve control point) should use the same neutral, low-contrast palette as NEUTRAL_SELECT / the rest of the selection chrome, sized and weighted to match — faint and light, not a bright blue circle. Reference: Frappe Slides' selection affordance for the target visual weight.
Where to look
frontend/src/components/canvas/ConnectorView.vue(lines ~420-459) — the selection-handle circlesfrontend/src/diagram/selectionChrome.js— the existing neutral palette/constants to reusefrontend/src/components/canvas/SelectionLayer.vue— for comparison, and to decide on the marquee box separately
Related (closed) prior art
#414, #464, #261 — established the neutral selection style everywhere except connectors.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in frontend/src/components/canvas/ConnectorView.vue around lines 420-459, then compare the handle styling with NEUTRAL_SELECT in frontend/src/diagram/selectionChrome.js and the selection examples in SelectionLayer.vue. Done means endpoint and curve-control handles use the same faint neutral palette and matching visual weight; separately confirm whether the live marquee should retain its distinct blue styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 86/100