Skip to content

fix handle diagonal#9

Merged
gfazioli merged 3 commits intomasterfrom
fix-handle-diagonal
Jan 30, 2026
Merged

fix handle diagonal#9
gfazioli merged 3 commits intomasterfrom
fix-handle-diagonal

Conversation

@gfazioli
Copy link
Copy Markdown
Owner

  • 🔧 chore(deps): Update core dependencies to latest patch releases
  • 🚀 feat(Compare): add min/max drag boundary props and clamp logic
  • feat(Compare): add min/max drag bound props

- bump next, react, react-dom to 15.5.11 / 19.2.4
- update @next/mdx, rollup, typescript-eslint, @types/react
- ensures compatibility with latest tooling and addresses security fixes
- Introduce `minDragBound` and `maxDragBound` props with defaults 0 and 100.
- Clamp drag coordinates to container bounds to prevent handle jumping.
- Apply boundaries to calculated position, keeping slider within specified limits.
- Introduce `minDragBound` and `maxDragBound` to limit slider movement range.
- Add a new dragBounds demo and documentation section explaining usage.
- Update story controls to expose the new props.
Copilot AI review requested due to automatic review settings January 30, 2026 16:06
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR updates core dependencies and enhances the Compare component’s drag behavior, especially for diagonal angles. It introduces configurable drag boundaries and improves pointer clamping so the handle behaves correctly within the container.

Changes:

  • Bumped React, Next, Rollup, TypeScript ESLint, and related type packages to newer patch versions in package.json, docs/package.json, and yarn.lock.
  • Added minDragBound and maxDragBound props to Compare, with default values, state wiring, and geometry updates so drag interactions are clamped to a configurable percentage range.
  • Updated Storybook stories and docs site: added configurator controls for the new props, a dedicated “Drag boundaries” demo, and documentation describing how to use the new bounds.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
yarn.lock Aligns lockfile with updated React, Next, Rollup, TypeScript ESLint, and related tooling and type versions referenced in package.json and docs/package.json.
package/src/CompareProps.story.tsx Extends the props Storybook story to expose minDragBound and maxDragBound with numeric controls and default values matching the component.
package/src/Compare.tsx Adds minDragBound/maxDragBound props and default values, clamps pointer coordinates to the container, and constrains computed slider position within the configured bounds while preserving diagonal angle behavior.
package.json Bumps React, React DOM, Rollup, TypeScript ESLint, and @types/react to newer patch versions for the main package.
docs/package.json Bumps Next, React, React DOM, @next/mdx, and @types/react to corresponding newer patch versions for the docs app.
docs/docs.mdx Documents the new drag boundary props, explaining their semantics and adding a demo section wired to the new dragBounds demo.
docs/demos/index.ts Re-exports the new dragBounds demo so it can be used in the docs.
docs/demos/Compare.demo.dragBounds.tsx Introduces a standalone demo showcasing minDragBound/maxDragBound on a diagonal (angle={30}) compare, with matching code snippet for docs.
docs/demos/Compare.demo.configurator.tsx Extends the configurator controls to include minDragBound and maxDragBound, allowing interactive exploration of drag boundaries.

@gfazioli gfazioli merged commit 0f85169 into master Jan 30, 2026
7 checks passed
@gfazioli gfazioli deleted the fix-handle-diagonal branch January 30, 2026 16:11
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