Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Add NodeResizer package #2626

Merged
merged 16 commits into from
Dec 6, 2022
Merged

Feat: Add NodeResizer package #2626

merged 16 commits into from
Dec 6, 2022

Conversation

moklick
Copy link
Member

@moklick moklick commented Dec 1, 2022

This PR add a @reactflow/node-resizer package that exports two components that can be used inside a custom node as a helper to resize a node:

1. <NodeResizer />

This component adds four handles (top-left, top-right, bottom-right and bottom-left) and four lines (top, right, bottom, left) to resize a node.

Screenshot 2022-12-04 at 17 59 09

Props:

type NodeResizerProps = {
  nodeId: string;
  handleClassName?: string;
  handleStyle?: CSSProperties;
  lineClassName?: string;
  lineStyle?: CSSProperties;
};

2. <NodeResizeControl />

This component can be used for creating a custom resize UI.

Screenshot 2022-12-04 at 17 59 43

Props:

type ResizeControlProps = {
  nodeId: string;
  position: ControlPosition;
  variant?: ResizeControlVariant;
  className?: string;
  style?: CSSProperties;
  children?: ReactNode;
};

@moklick moklick marked this pull request as ready for review December 6, 2022 17:16
@moklick moklick merged commit e0fc4ae into next-release Dec 6, 2022
@moklick moklick deleted the feat/resize-node branch March 20, 2023 16:38
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.

None yet

2 participants