Type point values, snap and scrub the preview in the curve tab (#248)
game-maker / gate (push) Successful in 3m23s
game-maker / suite (push) Successful in 10m9s

Building a curve by mouse alone was fiddly: there was no way to put a
point on an exact value, no grid, and the running preview could not be
stopped at a chosen moment. The hand cursor over points also looked
like a link instead of a drawing tool.

- Number fields t and v in the header show the selected point. Typing
  or dragging on them goes through the same rules as a mouse drag, so
  points never overtake and handles stay clamped. One undo step each.
  t is greyed out on the two end points.
- The magnet button from Vector art snaps points and handles to a
  0.05 grid in t and v, when placing on free space and when dragging.
- Points and handles keep the default arrow in the curve tab and in
  Vector art. The pixel art palette dropped pointer as well, which is
  beyond the issue. Collider corners never had it.
- The preview now starts off. A vertical time line with a knob under
  the t axis sets t when dragged sideways. Dragging the dot on the
  rail jumps to the first t where the curve reaches that value, or to
  the closest one if it never does.
- The rules are pure functions in curveView.ts (withCurvePointSet,
  snappedToGrid, shareAtValue, previewSecondsAt), the canvas only
  calls them.

Tests:
- ./check.sh: 180 files, 2616 tests, CHECK EXIT 0
- GM_STEPS=1,47,53: ALL PASSED, 87 checks
- 4 new unit tests in curve-view.test.ts, 4 new e2e checks in 53
  (53h-53k) and 1 in 47, all with real mouse and keyboard
- Counter-probes bite: without "first t" 1 unit test fails, with
  pointer, no snap, no field commit, no scrub or preview on 5 browser
  checks fail, pointer in Vector art fails the new 47 check

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-09-27 16:45:53 +02:00
1 parent 393b8ec7f9
commit a5ae21481b
11 files changed
+461 -43

No files matched your search

+10
View File
@@ -28,6 +28,16 @@ export function curveHooks({ state, editor }: HookContext) {
...centreOf(curveEditor.previewButton),
toggled: curveEditor.previewButton.toggled,
}),
snapButton: () => ({
...centreOf(curveEditor.snap.button),
toggled: curveEditor.snap.button.toggled,
}),
/** The picked point's `t` and `v` fields as shown. */
placeField: (axis: 't' | 'v') => {
const field = axis === 't' ? curveEditor.tField : curveEditor.vField;
return { ...centreOf(field), text: field.value, enabled: field.enabled };
},
cursor: () => curveEditor.canvas.cursor,
/** The preview as drawn: the share of time, the value, and where its two dots are. */
preview: () => curveEditor.canvas.previewState(),
setPreviewTime: (seconds: number) => curveEditor.canvas.setPreviewTime(seconds),
+1
View File
@@ -14,6 +14,7 @@ export function vectorArtHooks({ state, editor }: HookContext) {
rect: () => vectorArtEditor.canvasRect(),
tool: () => vectorArtEditor.canvas.currentTool,
snapping: () => vectorArtEditor.canvas.snapping,
cursor: () => vectorArtEditor.canvas.cursor,
snapButton: () => snapButton(vectorArtEditor.snap),
/** Whether the pen has a line open that the next click would add a point to. */
drawing: () => vectorArtEditor.canvas.drawing,