You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add a filled arrowhead to the gesture diagrams in the Gesture Menu, and render circular gestures there as arcs.
Part of the Gesture Menu redesign in #3708. The mock below shows the target: a thick solid stroke with a filled triangle at the tip, its base flush with the end of the stroke.
(mock to be attached)
Current Behavior
Gesture Menu diagrams render with arrowhead='none', so the stroke simply stops at the last direction. Commands that have rounded set, such as New Thought (above) (→↓→ with rounded corners), render as straight segments in the menu because the menu does not pass rounded to GestureDiagram, while Help and Command Universe render the same commands as circular arcs. Stroke ends are round-capped.
Expected Behavior
In this case
In the Gesture Menu, every gesture diagram should end in a filled triangular arrowhead pointing along the final direction, with the base of the triangle flush against the end of the stroke. Relative to the rendered stroke width, the arrowhead should be about 4.5 times as wide at the base and about 4.3 times as long, giving an apex angle of roughly 56 degrees.
The arrowhead should use the same color as the untraced part of the path, and switch to the highlight color only when every direction of the gesture has been traced. Traced directions stay bright and untraced directions stay dim, as they do today.
Commands with rounded set should render as circular arcs in the menu, as they do in Help and Command Universe, with the arrowhead following the arc's end tangent.
Stroke ends should be flat rather than round-capped.
In general
A filled arrowhead should be available on GestureDiagram for any caller, scale with the stroke width, and stay inside the diagram's frame at any rendered size, so that the menu's 18px diagrams and the tutorial's large diagrams get the same shape.
The existing filled arrowhead is an SVG marker and is the default for every caller that does not pass arrowhead: Help, the command table, the tutorial, the inline swipe hints, and the latest-commands overlay. Its viewBox allowance (arrowSize + strokeWidth * 4) is the padding rule carried over from main that Fix inconsistent gesture sizing and stroke thickness #5319 left in place. The recommended shape of the fix is to make the geometry triangle the new default arrowhead app-wide, then remove ArrowheadMarker, the arrowSize prop, and that padding rule together. The Gesture Menu then becomes one more caller rather than a special case. This changes snapshots on every surface that renders a default arrowhead, so it needs a visual review across those surfaces, not only the menu.
outlined is used in one place, the large diagram in CommandItem. It either gains a geometry variant or moves to outlined-wide. Otherwise one marker survives and the padding rule has to stay for it.
The solid renderer uses a single continuous path with round caps to avoid visible beads where segments join. Switching to flat ends needs a check that joins still look clean, especially where the traced and untraced paths meet.
Add a filled arrowhead to the gesture diagrams in the Gesture Menu, and render circular gestures there as arcs.
Part of the Gesture Menu redesign in #3708. The mock below shows the target: a thick solid stroke with a filled triangle at the tip, its base flush with the end of the stroke.
(mock to be attached)
Current Behavior
Gesture Menu diagrams render with
arrowhead='none', so the stroke simply stops at the last direction. Commands that haveroundedset, such as New Thought (above) (→↓→with rounded corners), render as straight segments in the menu because the menu does not passroundedtoGestureDiagram, while Help and Command Universe render the same commands as circular arcs. Stroke ends are round-capped.Expected Behavior
In this case
In the Gesture Menu, every gesture diagram should end in a filled triangular arrowhead pointing along the final direction, with the base of the triangle flush against the end of the stroke. Relative to the rendered stroke width, the arrowhead should be about 4.5 times as wide at the base and about 4.3 times as long, giving an apex angle of roughly 56 degrees.
The arrowhead should use the same color as the untraced part of the path, and switch to the highlight color only when every direction of the gesture has been traced. Traced directions stay bright and untraced directions stay dim, as they do today.
Commands with
roundedset should render as circular arcs in the menu, as they do in Help and Command Universe, with the arrowhead following the arc's end tangent.Stroke ends should be flat rather than round-capped.
In general
A filled arrowhead should be available on
GestureDiagramfor any caller, scale with the stroke width, and stay inside the diagram's frame at any rendered size, so that the menu's 18px diagrams and the tutorial's large diagrams get the same shape.Notes
outlined-wideis introduced by Fix inconsistent gesture sizing and stroke thickness #5319 and Adopt restyled gestures in Command Universe #5320. This arrowhead should be built the same way, as points emitted bygetGestureGeometryfrom the final tangent and painted by the renderer as a closed filled path, rather than as an SVG<marker>. That keeps the arrowhead insidegetGestureBounds, so framing stays exact and DOM-free.filledarrowhead is an SVG marker and is the default for every caller that does not passarrowhead: Help, the command table, the tutorial, the inline swipe hints, and the latest-commands overlay. Its viewBox allowance (arrowSize + strokeWidth * 4) is the padding rule carried over frommainthat Fix inconsistent gesture sizing and stroke thickness #5319 left in place. The recommended shape of the fix is to make the geometry triangle the new default arrowhead app-wide, then removeArrowheadMarker, thearrowSizeprop, and that padding rule together. The Gesture Menu then becomes one more caller rather than a special case. This changes snapshots on every surface that renders a default arrowhead, so it needs a visual review across those surfaces, not only the menu.outlinedis used in one place, the large diagram inCommandItem. It either gains a geometry variant or moves tooutlined-wide. Otherwise one marker survives and the padding rule has to stay for it.