refactor(joint-react): drop Paper width/height props — CSS-only sizing#3312
Merged
Merged
Conversation
`<Paper>` no longer accepts `width` / `height` props. These were a redundant
way to set inline CSS on the host (`dia.Paper.setDimensions` writes
`$el.css({ width, height })` at the end), conflicting with `style` /
`className` on the same element.
Now the host element is sized exclusively by CSS:
- `useCreatePortalPaper` forces `width: undefined, height: undefined` into
the `dia.Paper` constructor options so prototype defaults (800/600) are
clobbered → `paper.getComputedSize()` falls back to
`el.clientWidth/clientHeight`.
- The dedicated `setDimensions` sync effect on prop change is gone.
All Paper callsites migrated from `<Paper width={N} height={M}>` to
`<Paper style={{ width: N, height: M }}>` (stories, tests, demos,
tutorials, the storybook decorator).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`getFitToContentArea` previously hard-anchored its grid at (0, 0): grid lines fell at `0, gridWidth, 2*gridWidth, …`. New `originX` / `originY` options (default `0`, paper-local coords) shift the anchor so grid lines land at `originX + n*gridWidth, originY + m*gridHeight` instead. Backward compatible — omitting the new opts reproduces today's behavior exactly. `paper.fitToContent` already forwards `opt` through, so it inherits the feature automatically. Tested via `paper.fitToContent()` with a few combinations of `allowNewOrigin` × non-zero origin. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<Paper>no longer exposeswidth/heightprops — they were a redundant alias for setting inline CSS on the host (dia.Paper.setDimensionswrites\$el.css({ width, height })atPaper.mjs:2286-2296) that conflicted withstyle/classNameon the same DOM element.useCreatePortalPaperforceswidth: undefined, height: undefinedinto thedia.Paperconstructor options so prototype defaults (800 / 600) get clobbered →paper.getComputedSize()(Paper.mjs:2263-2271) falls back toel.clientWidth / el.clientHeight. Host = CSS-sized, SVG = fills host.width/heightprop syncuseEffect(no longer needed).<Paper width={N} height={M}>callsite in stories / tests / demos / tutorials / the storybook decorator to<Paper style={{ width: N, height: M }}>.Why
Two sources of truth (
width/heightprops vsstyle.width/height/classNameCSS) both terminated in the same DOM property. Removing the props collapses to a single mechanism.This change is a prerequisite for the companion
@joint/react-plusPR that introduces PaperScroller-ownedsheetWidth/sheetHeight.Test plan
yarn workspace @joint/react typecheckyarn workspace @joint/react jestyarn workspace @joint/react storybook— spot-check that demos/examples still render at their previous sizes (now viastyle).🤖 Generated with Claude Code