Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show Arrowheads on Locked Lines #1229

Merged
merged 15 commits into from
May 7, 2024
Merged

Show Arrowheads on Locked Lines #1229

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d8d44d8
Implement locked rays
nishasy Apr 24, 2024
17ce7bb
purple
nishasy Apr 24, 2024
591cc89
Add "showArrows" conditional logic to rays.
Apr 25, 2024
2fd6dc5
Refactor how line/ray arrowheads are generated and placed in the graph.
Apr 25, 2024
a439b2f
Merge main into branch and adjust for conflicts.
Apr 26, 2024
d12424c
Merge branch 'main' into lems-1929-show-arrows-on-locked-lines
Apr 26, 2024
f334fc5
Show arrowheads on segments in place of their endpoints, when flag is…
Apr 26, 2024
ce5fd5e
Prettier adjustments & changeset.
Apr 26, 2024
b621f67
Adjust editor to default to "show arrows" when a ray line type is added.
Apr 26, 2024
073859f
Adjust editor to default to "show arrows" when a ray or line, but not…
Apr 26, 2024
55cd0a2
Adjust editor to default to "show arrows" when a locked line is newly…
Apr 26, 2024
6ef7bd8
Update unit tests to account for new default settings for show arrows.
Apr 26, 2024
885982d
Refactor to have arrowheads in vector so that movable line can have a…
Apr 29, 2024
748cf45
Remove "showArrows" option from locked lines and editor.
May 6, 2024
27d720f
Merge changes from main.
May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gold-deers-heal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/perseus": minor
---

Show Arrowheads on Locked Lines in Interactive Graphs
2 changes: 1 addition & 1 deletion packages/perseus-editor/src/components/__tests__/util.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe("getDefaultFigureForType", () => {
],
color: "blue",
lineStyle: "solid",
showArrows: false,
showArrows: true,
showStartPoint: false,
showEndPoint: false,
});
Expand Down
5 changes: 4 additions & 1 deletion packages/perseus-editor/src/components/locked-line-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,10 @@ const LockedLineSettings = (props: Props) => {
id={kindSelectId}
selectedValue={kind}
onChange={(value: "line" | "segment" | "ray") =>
onChangeProps({kind: value})
onChangeProps({
kind: value,
showArrows: value !== "segment",
})
}
// Placeholder is required, but never gets used.
placeholder=""
Expand Down
2 changes: 1 addition & 1 deletion packages/perseus-editor/src/components/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
],
color: "blue",
lineStyle: "solid",
showArrows: false,
showArrows: true,
showStartPoint: false,
showEndPoint: false,
};
Expand Down
5 changes: 3 additions & 2 deletions ...ges/perseus-editor/src/widgets/__tests__/interactive-graph-editor-locked-figures.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,15 +518,15 @@ describe("InteractiveGraphEditor locked figures", () => {
const showArrowsInput = screen.getByRole("checkbox", {
name: "Show arrows",
});
await userEvent.click(showArrowsInput);
await userEvent.click(showArrowsInput); // Uncheck the "Show Arrows" setting

// Assert
expect(onChangeMock).toBeCalledWith(
expect.objectContaining({
lockedFigures: [
expect.objectContaining({
...defaultLine,
showArrows: true,
showArrows: false,
}),
],
}),
Expand Down Expand Up @@ -651,6 +651,7 @@ describe("InteractiveGraphEditor locked figures", () => {
expect.objectContaining({
...defaultLine,
kind: "segment",
showArrows: false,
}),
],
}),
Expand Down
114 changes: 114 additions & 0 deletions packages/perseus/src/widgets/__testdata__/interactive-graph.testdata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1159,6 +1159,120 @@ export const segmentWithLockedLineQuestion: PerseusRenderer = {
},
};

export const segmentWithLockedLineAndArrowheadsQuestion: PerseusRenderer = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: we now have an InteractiveGraphQuestionBuilder class that could help abbreviate test data definitions like this. It doesn't yet have a way to add locked figures, but you could add that fairly easily I think.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd be down to add that functionality for locked figures in a future PR. I can make an M2 ticket for it.

content:
"Line segment $\\overline{OG}$ is rotated $180^\\circ$ about the point $(-2,4)$. \n\n**Draw the image of this rotation using the interactive graph.**\n\n*The direction of a rotation by a positive angle is counter-clockwise.* \n\n[[☃ interactive-graph 1]]\n\n",
images: {},
widgets: {
"interactive-graph 1": {
graded: true,
options: {
correct: {
coords: [
[
[-7, -7],
[2, -5],
],
],
type: "segment",
},
graph: {
type: "segment",
},
gridStep: [1, 1],
labels: ["x", "y"],
markings: "graph",
range: [
[-10, 10],
[-10, 10],
],
rulerLabel: "",
rulerTicks: 10,
showProtractor: false,
showRuler: false,
snapStep: [0.5, 0.5],
step: [1, 1],
lockedFigures: [
{
type: "line",
kind: "line",
points: [
{
type: "point",
coord: [-7, -7],
color: "purple",
filled: true,
},
{
type: "point",
coord: [2, -5],
color: "purple",
filled: false,
},
],
color: "purple",
lineStyle: "solid",
showArrows: true,
showStartPoint: true,
showEndPoint: true,
},
{
type: "line",
kind: "segment",
points: [
{
type: "point",
coord: [-7, -6],
color: "green",
filled: false,
},
{
type: "point",
coord: [2, -4],
color: "green",
filled: true,
},
],
color: "green",
lineStyle: "solid",
showArrows: true,
showStartPoint: true,
showEndPoint: true,
},
{
type: "line",
kind: "ray",
points: [
{
type: "point",
coord: [-7, -8],
color: "pink",
filled: false,
},
{
type: "point",
coord: [2, -6],
color: "pink",
filled: true,
},
],
color: "pink",
lineStyle: "solid",
showArrows: true,
showStartPoint: true,
showEndPoint: false,
},
],
},
type: "interactive-graph",
version: {
major: 0,
minor: 0,
},
},
},
};

export const segmentQuestionDefaultCorrect: PerseusRenderer = {
content:
"Line segment $\\overline{OG}$ is rotated $180^\\circ$ about the point $(-2,4)$. \n\n**Draw the image of this rotation using the interactive graph.**\n\n*The direction of a rotation by a positive angle is counter-clockwise.* \n\n[[☃ interactive-graph 1]]\n\n",
Expand Down