@joint/react/dist/types/hooks/use-update-element.d.ts

React bindings and hooks for JointJS to build interactive diagrams and graphs.

import type { dia } from '@joint/core';
import { type Setter } from '../utils/is';
export interface BaseAttributes extends dia.Cell.Attributes {
    readonly markup?: string | dia.MarkupJSON;
    readonly position?: dia.Point;
    readonly size?: dia.Size;
    readonly angle?: number;
    readonly data?: Record<string, unknown> | unknown;
}
/**
 * Set the element attribute in the graph.
 * It returns a function to set the element attribute.
 *
 * It must be used inside the GraphProvider.
 * @group Hooks
 * @param id The ID of the element.
 * @param attribute The attribute to set.
 * @returns The function to set the element attribute. It can be reactive.
 * @experimental
 *
 * It can be used in three ways:
 * @example
 * 1. Use empty hook and define ID, attribute, and value inside the set function
 * ```tsx
 * const setElement = useUpdateElement();
 * setElement('element-id', 'position', { x: 100, y: 100 });
 * ```
 * @example
 * 2. Provide ID and attribute, and use the returned function to set value
 * ```tsx
 * const setElement = useUpdateElement('element-id', 'position');
 * setElement({ x: 100, y: 100 });
 * ```
 * @example
 * 3. Provide ID and use the returned function to set attribute and value
 * ```tsx
 * const setElement = useUpdateElement('element-id');
 * setElement('position', { x: 100, y: 100 });
 * ```
 */
export declare function useUpdateElement<Attributes = BaseAttributes, Attribute extends keyof Attributes = keyof Attributes>(id: dia.Cell.ID, attribute: Attribute): (value: Attributes[Attribute] | Setter<Attributes[Attribute]>) => void;
export declare function useUpdateElement<Attributes = BaseAttributes>(id: dia.Cell.ID): <Attribute extends keyof Attributes>(attribute: Attribute, value: Attributes[Attribute] | Setter<Attributes[Attribute]>) => void;
export declare function useUpdateElement<Attributes = BaseAttributes>(): <Attribute extends keyof Attributes>(id: dia.Cell.ID, attribute: Attribute, value: Attributes[Attribute] | Setter<Attributes[Attribute]>) => void;
export type SetCell = ReturnType<typeof useUpdateElement>;