@theclearsky/react-blender-nodes 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,501 @@
+import { ActionDispatch } from 'react';
+import { ClassProp } from 'class-variance-authority/types';
+import { ClassValue } from 'clsx';
+import { ComponentProps } from 'react';
+import { Connection } from '@xyflow/react';
+import { ControlLinePosition } from '@xyflow/react';
+import { ControlPosition } from '@xyflow/react';
+import { Edge } from '@xyflow/react';
+import { EdgeChange } from '@xyflow/react';
+import { EdgeLabelOptions } from '@xyflow/react';
+import { EdgePosition } from '@xyflow/system';
+import { EdgeProps } from '@xyflow/react';
+import { ForwardRefExoticComponent } from 'react';
+import { HandleType } from '@xyflow/react';
+import { HTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { Node as Node_2 } from '@xyflow/react';
+import { NodeChange } from '@xyflow/react';
+import { NodeProps } from '@xyflow/react';
+import { NodeResizerProps } from '@xyflow/react';
+import { Position } from '@xyflow/react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { RefObject } from 'react';
+import { ResizeControlDirection } from '@xyflow/system';
+import { VariantProps } from 'class-variance-authority';
+import { XYPosition } from '@xyflow/react';
+import { z } from 'zod';
+
+declare type Action<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never> = {
+    type: typeof actionTypesMap.ADD_NODE;
+    payload: {
+        type: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['nodeIdToNodeType'][string];
+        position: XYPosition;
+    };
+} | {
+    type: typeof actionTypesMap.UPDATE_NODE_BY_REACT_FLOW;
+    payload: {
+        changes: NodeChanges;
+    };
+} | {
+    type: typeof actionTypesMap.UPDATE_EDGES_BY_REACT_FLOW;
+    payload: {
+        changes: EdgeChanges;
+    };
+} | {
+    type: typeof actionTypesMap.ADD_EDGE_BY_REACT_FLOW;
+    payload: {
+        edge: Connection;
+    };
+} | {
+    type: typeof actionTypesMap.UPDATE_INPUT_VALUE;
+    payload: {
+        nodeId: string;
+        inputId: string;
+        value: string | number;
+    };
+};
+
+declare const actionTypesMap: {
+    readonly ADD_NODE: "ADD_NODE";
+    readonly UPDATE_NODE_BY_REACT_FLOW: "UPDATE_NODE_BY_REACT_FLOW";
+    readonly UPDATE_EDGES_BY_REACT_FLOW: "UPDATE_EDGES_BY_REACT_FLOW";
+    readonly ADD_EDGE_BY_REACT_FLOW: "ADD_EDGE_BY_REACT_FLOW";
+    readonly UPDATE_INPUT_VALUE: "UPDATE_INPUT_VALUE";
+};
+
+export declare type Box = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};
+
+export declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+
+export declare type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+};
+
+declare const buttonVariants: (props?: ({
+    color?: "dark" | "lightNonPriority" | "lightPriority" | "lightParentGroupBasedHover" | null | undefined;
+    applyHoverStyles?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare function cn(...inputs: ClassValue[]): string;
+
+export declare const ConfigurableEdge: ForwardRefExoticComponent<Pick<ConfigurableEdgeState, "data" | "source" | "style" | "id" | "target" | "selectable" | "deletable" | "selected" | "animated"> & EdgePosition & EdgeLabelOptions & {
+sourceHandleId?: string | null;
+targetHandleId?: string | null;
+markerStart?: string;
+markerEnd?: string;
+pathOptions?: any;
+interactionWidth?: number;
+} & RefAttributes<HTMLDivElement>>;
+
+export declare type ConfigurableEdgeProps = EdgeProps<ConfigurableEdgeState>;
+
+export declare type ConfigurableEdgeState = Edge<{}, 'configurableEdge'>;
+
+export declare const ConfigurableNode: ForwardRefExoticComponent<    {
+name?: string;
+headerColor?: string;
+inputs?: (ConfigurableNodeInput | ConfigurableNodeInputPanel)[];
+outputs?: ConfigurableNodeOutput[];
+isCurrentlyInsideReactFlow?: boolean;
+nodeResizerProps?: NodeResizerWithMoreControlsProps;
+} & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+
+export declare type ConfigurableNodeInput = {
+    id: string;
+    name: string;
+    handleColor?: string;
+    handleShape?: HandleShape;
+    allowInput?: boolean;
+} & ({
+    type: 'string';
+    value?: string;
+    onChange?: (value: string) => void;
+} | {
+    type: 'number';
+    value?: number;
+    onChange?: (value: number) => void;
+});
+
+export declare type ConfigurableNodeInputPanel = {
+    id: string;
+    name: string;
+    inputs: ConfigurableNodeInput[];
+};
+
+export declare type ConfigurableNodeOutput = {
+    id: string;
+    name: string;
+    handleColor?: string;
+    handleShape?: HandleShape;
+} & ({
+    type: 'string';
+} | {
+    type: 'number';
+});
+
+export declare type ConfigurableNodeProps = {
+    name?: string;
+    headerColor?: string;
+    inputs?: (ConfigurableNodeInput | ConfigurableNodeInputPanel)[];
+    outputs?: ConfigurableNodeOutput[];
+    isCurrentlyInsideReactFlow?: boolean;
+    nodeResizerProps?: NodeResizerWithMoreControlsProps;
+} & HTMLAttributes<HTMLDivElement>;
+
+export declare const ConfigurableNodeReactFlowWrapper: ForwardRefExoticComponent<Pick<ConfigurableNodeState, "data" | "id" | "width" | "height" | "sourcePosition" | "targetPosition" | "dragHandle" | "parentId"> & Required<Pick<ConfigurableNodeState, "type" | "draggable" | "dragging" | "zIndex" | "selectable" | "deletable" | "selected">> & {
+isConnectable: boolean;
+positionAbsoluteX: number;
+positionAbsoluteY: number;
+} & RefAttributes<HTMLDivElement>>;
+
+export declare type ConfigurableNodeReactFlowWrapperProps = NodeProps<ConfigurableNodeState>;
+
+export declare type ConfigurableNodeState = Node_2<Omit<ConfigurableNodeProps, 'isCurrentlyInsideReactFlow'>, 'configurableNode'>;
+
+export declare const ContextAwareHandle: ForwardRefExoticComponent<    {
+type: HandleType;
+position: Position;
+id: string;
+color?: string;
+shape?: HandleShape;
+isCurrentlyInsideReactFlow?: boolean;
+} & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+
+export declare type ContextAwareHandleProps = {
+    type: HandleType;
+    position: Position;
+    id: string;
+    color?: string;
+    shape?: HandleShape;
+    isCurrentlyInsideReactFlow?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+export declare const ContextAwareInput: ({ input, isCurrentlyInsideReactFlow, }: ContextAwareInputProps) => JSX.Element;
+
+export declare type ContextAwareInputProps = {
+    input: ConfigurableNodeInput;
+    isCurrentlyInsideReactFlow: boolean;
+};
+
+export declare const ContextMenu: ({ subItems, className, onItemClick, }: ContextMenuProps) => JSX.Element;
+
+export declare type ContextMenuItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    subItems?: ContextMenuItem[];
+    onClick?: () => void;
+    shortcut?: string;
+    separator?: boolean;
+};
+
+export declare type ContextMenuProps = {
+    subItems: ContextMenuItem[];
+    className?: string;
+    onItemClick?: (item: ContextMenuItem) => void;
+};
+
+/**
+ * Converts a string to a number, handling the case where the string contains a decimal point
+ * - Can handle numbers with decimals and negative numbers
+ * - Incase of multiple decimal points, the first one is used and the rest are ignored
+ * - Incase of multiple negative signs, the first one is used and the rest are ignored
+ * @param inputNumberAsString - The string to convert to a number
+ * @returns The number
+ */
+export declare function convertStringToNumber(inputNumberAsString: string): number;
+
+export declare type Coordinate = {
+    x: number;
+    y: number;
+};
+
+/**
+ * Creates a context menu tree for adding nodes
+ * @param typeOfNodes - The available node types
+ * @param dispatch - The dispatch function for state management
+ * @param setContextMenu - Function to close the context menu
+ * @param contextMenuPosition - The position where the context menu was opened
+ * @returns ContextMenuItem array for the context menu
+ */
+export declare function createNodeContextMenu<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends 'string' | 'number' | 'complex' = 'string' | 'number' | 'complex', ComplexSchemaType extends UnderlyingType extends 'complex' ? any : never = never>({ typeOfNodes, dispatch, setContextMenu, contextMenuPosition, }: CreateNodeContextMenuProps<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): ContextMenuItem[];
+
+export declare type CreateNodeContextMenuProps<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends 'string' | 'number' | 'complex' = 'string' | 'number' | 'complex', ComplexSchemaType extends UnderlyingType extends 'complex' ? any : never = never> = {
+    typeOfNodes: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>['typeOfNodes'];
+    dispatch: ActionDispatch<[
+    action: Action<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>
+    ]>;
+    setContextMenu: (menu: {
+        isOpen: boolean;
+        position: XYPosition;
+    }) => void;
+    contextMenuPosition: XYPosition;
+};
+
+declare type DataType<UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never> = UnderlyingType extends 'complex' ? {
+    name: string;
+    underlyingType: UnderlyingType;
+    complexSchema: ComplexSchemaType;
+    color: string;
+} : {
+    name: string;
+    underlyingType: UnderlyingType;
+    complexSchema?: undefined;
+    color: string;
+};
+
+export declare type EdgeChanges = EdgeChange<ConfigurableEdgeState>[];
+
+export declare type Edges = ConfigurableEdgeState[];
+
+export declare function FullGraph<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>({ state, dispatch, }: FullGraphProps<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): JSX.Element;
+
+export declare type FullGraphProps<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never> = {
+    state: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>;
+    dispatch: ActionDispatch<[
+    action: Action<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>
+    ]>;
+};
+
+export declare type HandleShape = (typeof handleShapesMap)[keyof typeof handleShapesMap];
+
+export declare const handleShapesMap: {
+    readonly circle: "circle";
+    readonly square: "square";
+    readonly rectangle: "rectangle";
+    readonly list: "list";
+    readonly grid: "grid";
+    readonly diamond: "diamond";
+    readonly trapezium: "trapezium";
+    readonly hexagon: "hexagon";
+    readonly star: "star";
+    readonly cross: "cross";
+    readonly zigzag: "zigzag";
+    readonly sparkle: "sparkle";
+    readonly parallelogram: "parallelogram";
+};
+
+/**
+ * The Input component
+ * - Allows the user to input a string or a number, with the ability to only allow numbers
+ * - Temporarily internally manages the value when focused, only sets the value when the user clicks outside the input
+ * - Can cancel the change for numbers by clearing the input and clicking outside the input
+ */
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+/**
+ * Props for the Input component
+ */
+export declare type InputProps = {
+    /**
+     * The placeholder for the input
+     */
+    placeholder?: string;
+    /**
+     * The class name for the input, overrides the default styles
+     */
+    className?: string;
+} & ({
+    /**
+     * The value of the input, should be a number when allowOnlyNumbers is true
+     */
+    value?: number;
+    /**
+     * Whether the input should only allow numbers, influences the type of the value and the onChange function
+     * - If true, the value should be a number and the onChange function should accept a number
+     * - If false, the value should be a string and the onChange function should accept a string
+     * @default false
+     */
+    allowOnlyNumbers: true;
+    /**
+     * The onChange function, should accept a number when allowOnlyNumbers is true
+     */
+    onChange?: (value: number) => void;
+    /**
+     * The number of decimals to show for the number, only used when allowOnlyNumbers is true
+     * @default 5
+     */
+    numberOfDecimals?: number;
+} | {
+    /**
+     * The value of the input, should be a string when allowOnlyNumbers is false
+     */
+    value?: string;
+    /**
+     * Whether the input should only allow numbers, influences the type of the value and the onChange function
+     * - If true, the value should be a number and the onChange function should accept a number
+     * - If false, the value should be a string and the onChange function should accept a string
+     * @default false
+     */
+    allowOnlyNumbers?: false;
+    /**
+     * The onChange function, should accept a string when allowOnlyNumbers is false
+     */
+    onChange?: (value: string) => void;
+    /**
+     * When type is string, this prop is not used and shouldn't be provided
+     */
+    numberOfDecimals?: never;
+});
+
+export declare function isCoordinateInBox(coordinate: Coordinate, box: Box, xAxisInclusive?: boolean, yAxisInclusive?: boolean): boolean;
+
+export declare function isNumberInRange(number: number, min: number, max: number, minInclusive?: boolean, maxInclusive?: boolean): boolean;
+
+export declare type NodeChanges = NodeChange<ConfigurableNodeState>[];
+
+declare type NodeIdToNodeType<NodeTypeUniqueId extends string = string> = Record<string, NodeTypeUniqueId>;
+
+/**
+ * The `<NodeResizer />` component can be used to add a resize functionality to your
+ * nodes. It renders draggable controls around the node to resize in all directions.
+ * @public
+ *
+ * @example
+ *```jsx
+ *import { memo } from 'react';
+ *import { Handle, Position, NodeResizer } from '@xyflow/react';
+ *
+ *function ResizableNode({ data }) {
+ *  return (
+ *    <>
+ *      <NodeResizer minWidth={100} minHeight={30} />
+ *      <Handle type="target" position={Position.Left} />
+ *      <div style={{ padding: 10 }}>{data.label}</div>
+ *      <Handle type="source" position={Position.Right} />
+ *    </>
+ *  );
+ *};
+ *
+ *export default memo(ResizableNode);
+ *```
+ */
+export declare function NodeResizerWithMoreControls({ nodeId, isVisible, handleClassName, handleStyle, lineClassName, lineStyle, color, minWidth, minHeight, maxWidth, maxHeight, keepAspectRatio, autoScale, shouldResize, onResizeStart, onResize, onResizeEnd, linePosition, handlePosition, resizeDirection, }: NodeResizerWithMoreControlsProps): JSX.Element | null;
+
+export declare type NodeResizerWithMoreControlsProps = NodeResizerProps & {
+    linePosition?: ControlLinePosition[];
+    handlePosition?: ControlPosition[];
+    resizeDirection?: ResizeControlDirection;
+};
+
+export declare type Nodes = ConfigurableNodeState[];
+
+export declare const ReactFlowAwareInput: ({ input }: ReactFlowAwareInputProps) => JSX.Element;
+
+export declare type ReactFlowAwareInputProps = {
+    input: ConfigurableNodeInput;
+};
+
+/**
+ * Sanitizes a number to be shown as a text, removing the trailing zeros after the decimal point if the number is an integer
+ * @param value - The number to sanitize
+ * @param numberOfDecimals - The number of decimals to show for the number
+ * @returns The sanitized number as a string
+ */
+export declare function sanitizeNumberToShowAsText(value: number, numberOfDecimals: number): string;
+
+export declare const SliderNumberInput: ForwardRefExoticComponent<SliderNumberInputProps & RefAttributes<HTMLInputElement & HTMLDivElement>>;
+
+export declare type SliderNumberInputProps = {
+    name?: string;
+    value?: number;
+    onChange?: (value: number) => void;
+    className?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+
+declare type State<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never> = {
+    dataTypes: Record<DataTypeUniqueId, DataType<UnderlyingType, ComplexSchemaType>>;
+    typeOfNodes: Record<NodeTypeUniqueId, TypeOfNode<DataTypeUniqueId>>;
+    nodes: Nodes;
+    nodeIdToNodeType: NodeIdToNodeType<NodeTypeUniqueId>;
+    edges: Edges;
+};
+
+declare type SupportedUnderlyingTypes = (typeof supportedUnderlyingTypes)[number];
+
+declare const supportedUnderlyingTypes: readonly ["string", "number", "complex", "noEquivalent", "inferFromConnection"];
+
+declare type TypeOfInput<DataTypeUniqueId extends string = string> = {
+    name: string;
+    dataType: DataTypeUniqueId;
+    allowInput?: boolean;
+};
+
+declare type TypeOfInputPanel<DataTypeUniqueId extends string = string> = {
+    name: string;
+    inputs: TypeOfInput<DataTypeUniqueId>[];
+};
+
+declare type TypeOfNode<DataTypeUniqueId extends string = string> = {
+    name: string;
+    headerColor?: string;
+    inputs: (TypeOfInput<DataTypeUniqueId> | TypeOfInputPanel<DataTypeUniqueId>)[];
+    outputs: TypeOfInput<DataTypeUniqueId>[];
+};
+
+export declare function useClickedOutside<T extends HTMLElement>(ref: RefObject<T | null> | T | null, callback: () => void, checkDescendants?: boolean, checkCoordinates?: boolean): void;
+
+/**
+ * Custom hook for handling drag functionality
+ *
+ * @param options - Configuration options for the drag behavior
+ * @returns Object containing drag state and ref for the draggable element
+ */
+export declare function useDrag({ onMove, onClick, clickThreshold, enabled, preventDefaultAndStopPropagation, }?: UseDragOptions): UseDragReturn;
+
+export declare type UseDragOptions = {
+    /**
+     * Callback when dragging occurs
+     * @param movementX - The horizontal movement in pixels
+     * @param movementY - The vertical movement in pixels
+     * @param deltaX - The horizontal movement ratio (movementX / elementWidth)
+     * @param deltaY - The vertical movement ratio (movementY / elementHeight)
+     * @param width - The width of the element
+     * @param height - The height of the element
+     */
+    onMove?: (movementX: number, movementY: number, deltaX: number, deltaY: number, width: number, height: number) => void;
+    /**
+     * Callback when a click is detected (small drag distance)
+     */
+    onClick?: () => void;
+    /**
+     * The maximum distance in pixels to consider as a click (default: 2)
+     */
+    clickThreshold?: number;
+    /**
+     * Whether dragging is enabled (default: true)
+     */
+    enabled?: boolean;
+    /**
+     * Whether to prevent the default behavior of the drag event and stop propagation
+     */
+    preventDefaultAndStopPropagation?: boolean;
+};
+
+export declare type UseDragReturn = {
+    /**
+     * Whether the user is currently dragging
+     */
+    isDragging: boolean;
+    /**
+     * Ref to attach to the draggable element
+     */
+    dragRef: (element: HTMLElement | null) => void;
+};
+
+export declare function useFullGraph<DataTypeUniqueId extends string = string, NodeTypeUniqueId extends string = string, UnderlyingType extends SupportedUnderlyingTypes = SupportedUnderlyingTypes, ComplexSchemaType extends UnderlyingType extends 'complex' ? z.ZodType : never = never>(initialState: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>): {
+    state: State<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>;
+    dispatch: ActionDispatch<[action: Action<DataTypeUniqueId, NodeTypeUniqueId, UnderlyingType, ComplexSchemaType>]>;
+};
+
+export { }