import { Size, Node } from '../../../types/core'; /** * @file Node resizer component for custom node renderers * This component standardizes size handling for custom node implementations. */ import * as React from "react"; export declare const useNodeResizerContext: () => Node | null; /** * Props for the NodeResizer component */ export type NodeResizerProps = { /** * Node object (optional - if not provided, will attempt to resolve from context) * Takes precedence over size prop */ node?: Node; /** * Node size (width and height may be undefined) * Only used if node prop is not provided and no node is available in context */ size?: Size; /** Child render function that receives normalized size */ children: (size: Required) => React.ReactNode; /** Optional default width (defaults to 150) */ defaultWidth?: number; /** Optional default height (defaults to 50) */ defaultHeight?: number; /** Optional className for the wrapper */ className?: string; /** Optional style overrides */ style?: React.CSSProperties; /** Indicates whether the node is currently being resized */ isResizing?: boolean; /** * Callback fired when the node is being resized * @param size - The current size during resize * @param isResizing - Whether the resize is in progress */ onResize?: (size: Required, isResizing: boolean) => void; }; /** * Normalizes node size with defaults * @param size - Optional size from node * @param defaultWidth - Default width to use if not provided * @param defaultHeight - Default height to use if not provided * @returns Normalized size with width and height guaranteed */ export declare const normalizeNodeSize: (size: Size | undefined, defaultWidth: number, defaultHeight: number) => Required; /** * NodeResizer component * * This component standardizes size handling for custom node renderers. * Instead of writing `style={{width: node.size?.width, height: node.size?.height}}` * in every custom renderer, you can use this wrapper. * * The node can be provided in three ways (priority order): * 1. Via `node` prop (highest priority) * 2. Via context from a parent NodeResizer * 3. Via `size` prop (fallback for backward compatibility) * * @example Method 1: Explicit node prop (recommended when node is available) * ```tsx * const MyNodeRenderer = ({ node }: NodeRendererProps) => ( * * {({width, height}) => ( *
* {node.data.title} *
* )} *
* ); * ``` * * @example Method 2: Implicit resolution from context (cleanest API) * ```tsx * const MyNodeRenderer = ({ node }: NodeRendererProps) => ( * * {() => } * * ); * * const MyNodeContent = () => { * // NodeResizer inside can access node from parent context automatically * return ( * * {({width, height}) => ( *
Content
* )} *
* ); * }; * ``` * * @example Method 3: Using size prop (backward compatible) * ```tsx * * {({width, height}) => ( *
Content
* )} *
* ``` * * @example Using context hook for deep nesting * ```tsx * const DeepNestedComponent = () => { * const node = useNodeResizerContext(); * return
{node?.data.title}
; * }; * ``` * * @example Listening to resize events * ```tsx * const MyNodeRenderer = ({ node, isResizing }: NodeRendererProps) => { * const handleResize = (size: Required, resizing: boolean) => { * console.log('Current size:', size, 'Is resizing:', resizing); * }; * * return ( * * {({width, height}) => ( *
Content
* )} *
* ); * }; * ``` */ export declare const NodeResizer: React.FC;