Skip to content

fix(joint-react): reactive visual grid + inline-style precedence - #3430

Merged
kumilingus merged 1 commit into
clientIO:masterfrom
samuelgja:fix/joint-react-few-bugs
Jul 23, 2026
Merged

fix(joint-react): reactive visual grid + inline-style precedence#3430
kumilingus merged 1 commit into
clientIO:masterfrom
samuelgja:fix/joint-react-few-bugs

Conversation

@samuelgja

Copy link
Copy Markdown
Contributor

Description

Two <Paper/> bug fixes, split out of #3428 so they can ship ahead of the larger feature work in that PR.

1. Visual grid is not reactive (fix)

useCreatePortalPaper only pushed grid changes to the paper with per-prop setGrid / setGridSize calls. As a result:

  • drawGridSize changes updated snapping (gridSize) but left the rendered grid pattern stale — setGridSize deliberately skips the visual grid.
  • Grid options set through the options escape hatch were ignored entirely.

The fix recomputes the grid from paper.options (drawGrid / drawGridSize / gridSize) and re-runs setGrid whenever any of them actually changes, guarded by an equality check so unrelated re-renders don't trigger a redraw.

2. Inline style vs className precedence (regression test)

<Paper style={{ width: 1000 }} className="w-10" /> should let the inline width win over the class, exactly like a plain HTML element. This already resolves correctly on master (the inline style lands on the .jj-paper host element and the cascade favours it — there is no !important in paper.css), so this PR adds a regression test to lock the behaviour and guard against _setDimensions wiping the inline style.

Motivation and Context

These are triaged <Paper/> bugs (grid reactivity — Medium; style/className order — High) that users hit directly. They were developed alongside unrelated feature work in #3428; pulling them into their own PR lets the fixes be reviewed and released on their own timeline while the features continue separately. The changes remain in #3428 as well.

Verification: yarn test passes — typecheck, lint, knip, jest 93 suites / 1028 tests (React 19) and 92 / 1024 (React 18), including the two new regression tests.

Screenshots (if appropriate):

…anges

useCreatePortalPaper only called setGrid/setGridSize per-prop, so drawGridSize
changes and grid options set via the options escape hatch left the rendered
grid pattern stale. Recompute the grid from paper.options and re-run setGrid
whenever drawGrid/drawGridSize/gridSize actually changes, guarded by an
equality check to avoid needless redraws.

Adds regression tests: the reactive grid redraw, and that an inline style prop
stays authoritative over className on the paper host element.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@samuelgja
samuelgja requested a review from kumilingus July 22, 2026 08:22
@kumilingus
kumilingus merged commit c87f0b3 into clientIO:master Jul 23, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants