feat: add `showAngle` field to `LockedPolygonPointType` by mojadem · Pull Request #3730 · Khan/perseus

mojadem · 2026-06-05T17:30:56Z

Summary

This is a follow-up to #3705.

Added showAngle to locked polygon points, defaulting to false for parsed legacy data and newly created
points.
Reused existing polygon angle-label rendering so locked polygons can selectively show interior angle labels
per vertex.
Added editor controls for toggling angle labels on individual locked polygon points.
Updated defaults, fixtures, and tests for the new field.

Test plan

pnpm test

…edPolygonPointType`

github-actions · 2026-06-05T17:32:37Z

Size Change: +156 B (+0.03%)

Total Size: 507 kB

📦 View Changed

Filename	Size	Change
`packages/perseus-core/dist/es/index.item-splitting.js`	12.1 kB	+15 B (+0.12%)
`packages/perseus-core/dist/es/index.js`	26.2 kB	+16 B (+0.06%)
`packages/perseus-editor/dist/es/index.js`	105 kB	+40 B (+0.04%)
`packages/perseus/dist/es/index.js`	199 kB	+85 B (+0.04%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.6 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	6.32 kB
`packages/math-input/dist/es/index.js`	98.5 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-linter/dist/es/index.js`	9.42 kB
`packages/perseus-score/dist/es/index.js`	10.2 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	8.55 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2026-06-05T17:33:37Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (abed06b) and published it to npm. You
can install it using the tag PR3730.

Example:

pnpm add @khanacademy/perseus@PR3730

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3730

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3730

mojadem · 2026-06-05T17:33:44Z

+            {points.map((point, i) => {
+                const previous = points.at(i - 1);
+                const next = points.at((i + 1) % points.length);
+                // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions


This is mirroring the pattern in packages/perseus/src/widgets/interactive-graphs/graphs/polygon.tsx.

We could probably improve the undefined check to avoid the strict boolean expressions :) I think the old logic predated the inclusion of the linter rule

…ld to `LockedPolygonPointType`. This option controls the display of an angle label per-vertex. It defaults to false.

jeremywiebe

In the Chromatic version of Storybook, the editor layout looks pretty janky.

Could you double-check that before landing, please? If you need design help, please ask Caitlyn about the layout.

jeremywiebe · 2026-06-08T19:21:00Z

                    <Button
                        kind="tertiary"
                        startIcon={plusCircle}
                        onClick={() => {
                            props.onChangeProps({
-                                points: [...points, {coord: [0, 0]}],
+                                points: [
+                                    ...points,
+                                    {coord: [0, 0], showAngle: false},
+                                ],
                            });
                        }}
                    >


I know this button predates your change, but would you mind adding an aria-label to this button (it took me a bit to decipher that it was the "add point" button... right? 😬 ).

jeremywiebe · 2026-06-08T19:27:25Z

+                        showAngles={point.showAngle}
+                        // Locked polygons don't snap; "grid" is chosen as a
+                        // default to preserve decimal angle labels.
+                        snapTo="grid"


thought: This is an unfortunate instance where we propagate a value from higher up and its meaning is completely different inside this component. Ideally, this prop would be named something like roundLabelAngleToInteger or something.

No change required.

Yeah this does seem like a potential ticket I could throw in our LEMS backlog, since it's a little outside of this PR

jeremywiebe · 2026-06-08T19:32:58Z


 const parseLockedPolygonPointType = object({
    coord: pairOfNumbers,
+    showAngle: defaulted(boolean, () => false),


I think we want to add a regression test item now that we have a new value here.

See: https://github.com/Khan/perseus/blob/75d06c5a69d70d9783df34f26d5d5575f0068602/packages/perseus-core/src/parse-perseus-json/README.md#regression-testing-against-old-data

SonicScrewdriver

Great work! Overall this is nearly there I think we just need to polish up the design a little!

SonicScrewdriver · 2026-06-08T23:23:52Z

+                                        showAngle: newValue,
+                                    };
+                                    props.onChangeProps({points: newPoints});
+                                }}


I do think this needs some tweaking in the editor UI, as the option is clipping and doesn't quite match the rest of the styles. Unfortunately we're quite constrained in the width of the editor settings area right now. I'm happy to pair if you want to discuss how we could approach the layout!

I did notice that the start coordinates handle the extra input for a point by adding a new surrounding box:

SonicScrewdriver · 2026-06-08T23:52:32Z

+            {points.map((point, i) => {
+                const previous = points.at(i - 1);
+                const next = points.at((i + 1) % points.length);
+                // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions


We could probably improve the undefined check to avoid the strict boolean expressions :) I think the old logic predated the inclusion of the linter rule

SonicScrewdriver · 2026-06-09T00:00:26Z

+                        showAngles={point.showAngle}
+                        // Locked polygons don't snap; "grid" is chosen as a
+                        // default to preserve decimal angle labels.
+                        snapTo="grid"


Yeah this does seem like a potential ticket I could throw in our LEMS backlog, since it's a little outside of this PR

SonicScrewdriver · 2026-06-09T00:12:30Z

+                {coord: [-6.5, -4.5], showAngle: false},
            ],
            weight,
            color: "pink",


It'd be great if you could also add a story to this storybook regression test where showAngle is on for a locked polygon. These stories get snapshot and checked by Chromatic/Storybook so that we're notified on a PR if anything changes visually, which has been quite helpful for our Interactive Graph Widget.

[mojadem/locked-polygon-point/2] feat: add showAngle field to `Lock…

c378dff

…edPolygonPointType`

mojadem self-assigned this Jun 5, 2026

mojadem added the olc-5.0.7fb98 label Jun 5, 2026

mojadem mentioned this pull request Jun 5, 2026

refactor: locked polygon points shape #3705

Open

mojadem commented Jun 5, 2026

View reviewed changes

github-actions Bot added schema-change Attached to PRs when we detect Perseus Schema changes in it item-splitting-change labels Jun 5, 2026

[mojadem/locked-polygon-point/2] docs(changeset): Add showAngle fie…

abed06b

…ld to `LockedPolygonPointType`. This option controls the display of an angle label per-vertex. It defaults to false.

SonicScrewdriver requested review from SonicScrewdriver and jeremywiebe June 8, 2026 18:37

jeremywiebe requested changes Jun 8, 2026

View reviewed changes

SonicScrewdriver requested changes Jun 9, 2026

View reviewed changes

Conversation

mojadem commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeremywiebe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SonicScrewdriver left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mojadem commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading

github-actions Bot commented Jun 5, 2026 •

edited

Loading