Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor's Path Properties section has 'Convert Node Type' (corner / smooth / symmetric) but the symmetric/smooth distinction is unclear in the UI — user clicks 'smooth' and gets 'symmetric' (or vice versa) #359

New issue

Closed

opened 2026-10-04 03:57:16 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:57:16 +00:00

Owner

Finding

The Convert Node Type (per #191) has 3 options: corner, smooth, symmetric.

Corner: the node is a sharp corner; the path makes a hard angle.
Smooth: the two handles at the node are collinear (180°), but they can have different lengths.
Symmetric: the two handles are collinear AND have the same length.

A user with a node:

Wants "smooth" (the path curves smoothly through the node, no kink)
Clicks "smooth"
Gets "symmetric" (the path curves smoothly AND the handles are equal length)
The "symmetric" is more restrictive than the user expected

The visual difference between smooth and symmetric is subtle when the handles are equal length. A user can't tell which they got.

The fix is clearer labeling or visual feedback.

Where

EditorContextMenu: src/components/editor/EditorContextMenu.tsx (the Convert Node Type submenu)
The right panel: src/components/editor/EditorRightPanel.tsx (Node Properties section)
Unclear: per my read, the labels are just "corner" / "smooth" / "symmetric" with no explanation

Suggested fix shape

Tooltips: each option has a tooltip:

<Tooltip>
  <TooltipTrigger>Corner</TooltipTrigger>
  <TooltipContent>
    Sharp corner. The two segments meet at an angle.
  </TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger>Smooth</TooltipTrigger>
  <TooltipContent>
    Smooth curve. The two segments are tangent at this node, but the handles can be different lengths.
  </TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger>Symmetric</TooltipTrigger>
  <TooltipContent>
    Symmetric curve. The two segments are tangent AND the handles are equal length.
  </TooltipContent>
</Tooltip>

Visual preview: a small SVG showing each type:

Corner: a sharp angle
Smooth: a smooth curve with different handle lengths
Symmetric: a smooth curve with equal handle lengths

Help page link: a "Learn more" link to the Help page's "Node types" section.
Use cases:

A user wanting to understand the difference
A user picking the wrong one and not realizing

Severity

Low. The user can experiment. New users notice the confusion.

Discovered by

Gap analysis (2026-10-02) of editor node type UI.

#191 (closed) — Editor right-click context menu. The Convert Node Type submenu is in place.
The Bezier handles (per #251) would visualize the difference better.
Figma's "node type" labels are clear (Corner, Smooth, Mirrored). The editor's labels match but the visual feedback is missing.

## Finding The Convert Node Type (per #191) has 3 options: corner, smooth, symmetric. - Corner: the node is a sharp corner; the path makes a hard angle. - Smooth: the two handles at the node are collinear (180°), but they can have different lengths. - Symmetric: the two handles are collinear AND have the same length. A user with a node: - Wants "smooth" (the path curves smoothly through the node, no kink) - Clicks "smooth" - Gets "symmetric" (the path curves smoothly AND the handles are equal length) - The "symmetric" is more restrictive than the user expected The visual difference between smooth and symmetric is subtle when the handles are equal length. A user can't tell which they got. The fix is clearer labeling or visual feedback. ## Where - EditorContextMenu: `src/components/editor/EditorContextMenu.tsx` (the Convert Node Type submenu) - The right panel: `src/components/editor/EditorRightPanel.tsx` (Node Properties section) - Unclear: per my read, the labels are just "corner" / "smooth" / "symmetric" with no explanation ## Suggested fix shape 1. **Tooltips**: each option has a tooltip: ```tsx <Tooltip> <TooltipTrigger>Corner</TooltipTrigger> <TooltipContent> Sharp corner. The two segments meet at an angle. </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger>Smooth</TooltipTrigger> <TooltipContent> Smooth curve. The two segments are tangent at this node, but the handles can be different lengths. </TooltipContent> </Tooltip> <Tooltip> <TooltipTrigger>Symmetric</TooltipTrigger> <TooltipContent> Symmetric curve. The two segments are tangent AND the handles are equal length. </TooltipContent> </Tooltip> ``` 2. **Visual preview**: a small SVG showing each type: - Corner: a sharp angle - Smooth: a smooth curve with different handle lengths - Symmetric: a smooth curve with equal handle lengths 3. **Help page link**: a "Learn more" link to the Help page's "Node types" section. 4. **Use cases**: - A user wanting to understand the difference - A user picking the wrong one and not realizing ## Severity Low. The user can experiment. New users notice the confusion. ## Discovered by Gap analysis (2026-10-02) of editor node type UI. ## Related - #191 (closed) — Editor right-click context menu. The Convert Node Type submenu is in place. - The Bezier handles (per #251) would visualize the difference better. - Figma's "node type" labels are clear (Corner, Smooth, Mirrored). The editor's labels match but the visual feedback is missing.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:57:16 +00:00

Mark referenced this issue

2026-10-04 03:57:34 +00:00

Editor's Node Properties has no 'break handles' or 'link handles' toggle — user with a smooth node wanting to make the two handles independent (smooth) or mirrored (symmetric) has no UI to toggle this #361

Mark referenced this issue

2026-10-04 04:01:01 +00:00

Editor's Path Properties has 'Stitch type' but the help text is not visible — user picking a stitch type doesn't see 'this is best for text and borders' until they read the help page #384

Mark referenced this issue from a commit

2026-10-05 13:28:31 +00:00

feat(#359): clarify corner/smooth/symmetric Node Type buttons + visual previews

Mark commented

2026-10-05 13:41:01 +00:00

Author

Owner

feat(#359): clarify corner/smooth/symmetric Node Type buttons + visual previews

The Node Type tri-button in the editor right panel only showed the labels 'corner / smooth / symmetric' — a user picking 'smooth' to avoid a corner could land on the more-restrictive 'symmetric' with no way to tell the difference visually. #359 adds three affordances:

Radix Tooltip on each button with a description of what the type actually means (corner = not tangent; smooth = tangent, handles can differ; symmetric = tangent AND equal-length handles).
Inline SVG preview under the label showing the type on a curve — corner = kink, smooth = tangent with one short handle, symmetric = tangent with equal handles. aria-hidden because the descriptive text lives in the tooltip for screen readers.
'Learn more' link next to the section header pointing at /help.

The fix lands on the right-panel surface (the context menu's Convert Node Type submenu already uses an inline tri-button group with active highlighting and adding tooltips there would conflict with hover navigation through the submenu — the educational content lives in the panel where the user is more likely to linger on the choice).

EditorRightPanel.tsx + new issue-359.test.tsx (6 tests, all pass). LSP clean, eslint clean, tsc -b clean. 20 pre-existing test failures (#329/#331/#333/#334 geometry error) are unchanged on main.

Commit: 07db222925

feat(#359): clarify corner/smooth/symmetric Node Type buttons + visual previews The Node Type tri-button in the editor right panel only showed the labels 'corner / smooth / symmetric' — a user picking 'smooth' to avoid a corner could land on the more-restrictive 'symmetric' with no way to tell the difference visually. #359 adds three affordances: - Radix Tooltip on each button with a description of what the type actually means (corner = not tangent; smooth = tangent, handles can differ; symmetric = tangent AND equal-length handles). - Inline SVG preview under the label showing the type on a curve — corner = kink, smooth = tangent with one short handle, symmetric = tangent with equal handles. aria-hidden because the descriptive text lives in the tooltip for screen readers. - 'Learn more' link next to the section header pointing at /help. The fix lands on the right-panel surface (the context menu's Convert Node Type submenu already uses an inline tri-button group with active highlighting and adding tooltips there would conflict with hover navigation through the submenu — the educational content lives in the panel where the user is more likely to linger on the choice). EditorRightPanel.tsx + new issue-359.test.tsx (6 tests, all pass). LSP clean, eslint clean, tsc -b clean. 20 pre-existing test failures (#329/#331/#333/#334 geometry error) are unchanged on main. Commit: 07db222925cccf246bd9ba11a22393b5bea5d631

Mark closed this issue

2026-10-05 13:41:04 +00:00

Mark referenced this issue

2026-10-05 13:48:50 +00:00