fix(node-resizer): pass minWidth and minHeight to child components
This commit is contained in:
@@ -4,10 +4,10 @@ import { Handle, Position, NodeProps } from 'reactflow';
|
|||||||
import { NodeResizer } from '@reactflow/node-resizer';
|
import { NodeResizer } from '@reactflow/node-resizer';
|
||||||
import '@reactflow/node-resizer/dist/style.css';
|
import '@reactflow/node-resizer/dist/style.css';
|
||||||
|
|
||||||
const CustomNode: FC<NodeProps> = ({ id, data, selected }) => {
|
const CustomNode: FC<NodeProps> = ({ data, selected }) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NodeResizer isVisible={selected} />
|
<NodeResizer minWidth={100} minHeight={100} isVisible={selected} />
|
||||||
<Handle type="target" position={Position.Left} />
|
<Handle type="target" position={Position.Left} />
|
||||||
<div>{data.label}</div>
|
<div>{data.label}</div>
|
||||||
<Handle type="source" position={Position.Right} />
|
<Handle type="source" position={Position.Right} />
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
# @reactflow/node-resizer
|
# @reactflow/node-resizer
|
||||||
|
|
||||||
|
## 1.0.1
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- pass `minWidth` and `minHeight` from `NodeResizer` component to `NodeResizeControl`
|
||||||
|
|
||||||
## 1.0.0
|
## 1.0.0
|
||||||
|
|
||||||
This is a new package that exports components to build a UI for resizing a node 🎉 It exports a [`<NodeResizer />`](https://reactflow.dev/docs/api/nodes/node-resizer/) component and a [`<NodeResizeControl />`](https://reactflow.dev/docs/api/nodes/node-resizer/#noderesizecontrol--component) component.
|
This is a new package that exports components to build a UI for resizing a node 🎉 It exports a [`<NodeResizer />`](https://reactflow.dev/docs/api/nodes/node-resizer/) component and a [`<NodeResizeControl />`](https://reactflow.dev/docs/api/nodes/node-resizer/#noderesizecontrol--component) component.
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@reactflow/node-resizer",
|
"name": "@reactflow/node-resizer",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"description": "A helper component for resizing nodes.",
|
"description": "A helper component for resizing nodes.",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"react",
|
"react",
|
||||||
|
|||||||
@@ -12,6 +12,8 @@ export default function NodeResizer({
|
|||||||
lineClassName,
|
lineClassName,
|
||||||
lineStyle,
|
lineStyle,
|
||||||
color,
|
color,
|
||||||
|
minWidth = 10,
|
||||||
|
minHeight = 10,
|
||||||
}: NodeResizerProps) {
|
}: NodeResizerProps) {
|
||||||
if (!isVisible) {
|
if (!isVisible) {
|
||||||
return null;
|
return null;
|
||||||
@@ -28,6 +30,8 @@ export default function NodeResizer({
|
|||||||
position={c}
|
position={c}
|
||||||
variant={ResizeControlVariant.Line}
|
variant={ResizeControlVariant.Line}
|
||||||
color={color}
|
color={color}
|
||||||
|
minWidth={minWidth}
|
||||||
|
minHeight={minHeight}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{handleControls.map((c) => (
|
{handleControls.map((c) => (
|
||||||
@@ -38,6 +42,8 @@ export default function NodeResizer({
|
|||||||
nodeId={nodeId}
|
nodeId={nodeId}
|
||||||
position={c}
|
position={c}
|
||||||
color={color}
|
color={color}
|
||||||
|
minWidth={minWidth}
|
||||||
|
minHeight={minHeight}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -9,6 +9,8 @@ export type NodeResizerProps = {
|
|||||||
lineClassName?: string;
|
lineClassName?: string;
|
||||||
lineStyle?: CSSProperties;
|
lineStyle?: CSSProperties;
|
||||||
isVisible?: boolean;
|
isVisible?: boolean;
|
||||||
|
minWidth?: number;
|
||||||
|
minHeight?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
|
export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
|
||||||
|
|||||||
Reference in New Issue
Block a user