frappe / frappe/draw

Connector selection handles are still loud blue, out of step with the rest of the canvas's neutral selection chrome

Open Beginner friendly
#567 0 comments 0 reactions 0 assignees View on GitHub

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 circles
  • frontend/src/diagram/selectionChrome.js — the existing neutral palette/constants to reuse
  • frontend/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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.