antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use curved Bezier path for borrow arrow 

Replace straight diagonal line with proper curved arrow:
- Starts at top-right corner of borrow box
- Curves with convex side on upper right (control point at 0.3x, 0.2y)
- Ends at top-center of borrowed 10s box (1.225x right, 1.0y down)
- Arrowhead positioned just above endpoint
- Path anchored to top-right of borrow box for correct positioning
This commit is contained in:
Thomas Hallock 2025-11-08 06:40:09 -06:00
parent a9319c3bd8
commit 9b4eb14aaa
1 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web/src/app/create/worksheets/addition/typstHelpers.ts
View File

@ -453,22 +453,26 @@ export function generateSubtractionProblemStackFunction(
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: white, stroke: 0.3pt + black, weight: "bold")[1]
]
)
// Draw diagonal arrow from "1" to borrowed 10s box
// Draw curved arrow from top-right of borrow box to top of borrowed 10s box
#place(
top + center,
dx: 0.08in,
dy: 2pt,
line(
start: (0pt, 0pt),
end: (${cellSizeIn}, ${cellSizeIn}),
stroke: (paint: white, thickness: 0.8pt, dash: "solid")
top + right,
path(
stroke: (paint: white, thickness: 1pt),
// Start at top-right corner of borrow box
(0pt, 0pt),
// Bezier curve - convex on upper right
// Control point above and to the right
(${(cellSize * 0.3).toFixed(2)}in, ${(cellSize * 0.2).toFixed(2)}in),
// End at top-center of borrowed 10s box (one cell right, one cell down)
(${(cellSize * 1.0 + cellSize * 0.225).toFixed(2)}in, ${cellSizeIn}),
)
)
// Arrowhead at the end
#place(
top + center,
dx: ${cellSizeIn},
dy: ${cellSizeIn},
text(size: ${(cellSizePt * 0.3).toFixed(1)}pt, fill: white)[▼]
top + right,
dx: ${(cellSize * 1.0 + cellSize * 0.225).toFixed(2)}in,
dy: ${(cellSize * 0.95).toFixed(2)}in,
text(size: ${(cellSizePt * 0.4).toFixed(1)}pt, fill: white, weight: "bold")[▼]
)
]
} else {
@ -481,22 +485,26 @@ export function generateSubtractionProblemStackFunction(
#text(size: ${(cellSizePt * 0.25).toFixed(1)}pt, fill: gray.darken(30%), weight: "bold")[1]
]
)
// Draw diagonal arrow from "1" to borrowed 10s box
// Draw curved arrow from top-right of borrow box to top of borrowed 10s box
#place(
top + center,
dx: 0.08in,
dy: 2pt,
line(
start: (0pt, 0pt),
end: (${cellSizeIn}, ${cellSizeIn}),
stroke: (paint: gray.darken(30%), thickness: 0.8pt, dash: "solid")
top + right,
path(
stroke: (paint: gray.darken(30%), thickness: 1pt),
// Start at top-right corner of borrow box
(0pt, 0pt),
// Bezier curve - convex on upper right
// Control point above and to the right
(${(cellSize * 0.3).toFixed(2)}in, ${(cellSize * 0.2).toFixed(2)}in),
// End at top-center of borrowed 10s box (one cell right, one cell down)
(${(cellSize * 1.0 + cellSize * 0.225).toFixed(2)}in, ${cellSizeIn}),
)
)
// Arrowhead at the end
#place(
top + center,
dx: ${cellSizeIn},
dy: ${cellSizeIn},
text(size: ${(cellSizePt * 0.3).toFixed(1)}pt, fill: gray.darken(30%))[▼]
top + right,
dx: ${(cellSize * 1.0 + cellSize * 0.225).toFixed(2)}in,
dy: ${(cellSize * 0.95).toFixed(2)}in,
text(size: ${(cellSizePt * 0.4).toFixed(1)}pt, fill: gray.darken(30%), weight: "bold")[▼]
)
]
}