@dschz/solid-g6/dist/index.d.ts

A SolidJS component library for graph visualization, powered by @antv/g6

import { Accessor, ParentProps, JSX } from 'solid-js';
import { DragCanvasOptions, ZoomCanvasOptions, ScrollCanvasOptions, OptimizeViewportTransformOptions, ClickSelectOptions, BrushSelectOptions, LassoSelectOptions, CreateEdgeOptions, DragElementOptions, DragElementForceOptions, CollapseExpandOptions, FocusElementOptions, HoverActivateOptions, FixElementSizeOptions, AutoAdaptLabelOptions, BaseNodeStyleProps as BaseNodeStyleProps$2, NodeData as NodeData$1, NodeOptions as NodeOptions$1, Graph as Graph$1, BaseComboStyleProps as BaseComboStyleProps$1, ComboData as ComboData$1, ComboOptions as ComboOptions$1, BaseEdgeStyleProps, EdgeData as EdgeData$1, CubicStyleProps, CubicVerticalStyleProps, CubicHorizontalStyleProps, LineStyleProps, PolylineStyleProps, QuadraticStyleProps, EdgeOptions as EdgeOptions$1, WebWorkerLayoutOptions, AntVDagreLayoutOptions, CircularLayoutOptions as CircularLayoutOptions$1, ConcentricLayoutOptions as ConcentricLayoutOptions$1, RandomLayoutOptions as RandomLayoutOptions$1, D3ForceLayoutOptions as D3ForceLayoutOptions$1, D3Force3DLayoutOptions as D3Force3DLayoutOptions$1, DagreLayoutOptions as DagreLayoutOptions$1, FishboneLayoutOptions as FishboneLayoutOptions$1, Size, ForceLayoutOptions as ForceLayoutOptions$1, ForceAtlas2LayoutOptions as ForceAtlas2LayoutOptions$1, FruchtermanLayoutOptions as FruchtermanLayoutOptions$1, GridLayoutOptions as GridLayoutOptions$1, MDSLayoutOptions as MDSLayoutOptions$1, RadialLayoutOptions as RadialLayoutOptions$1, SnakeLayoutOptions as SnakeLayoutOptions$1, GraphOptions, CustomBehaviorOption, NodeEvent, EdgeEvent, CanvasEvent, GraphEvent, IEvent } from '@antv/g6';
import { EdgeStyle } from '@antv/g6/lib/spec/element/edge';

type BehaviorTypeConfigMap = {
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/drag-canvas
     */
    "drag-canvas": DragCanvasOptions & {
        type: "drag-canvas";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/zoom-canvas
     */
    "zoom-canvas": ZoomCanvasOptions & {
        type: "zoom-canvas";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/scroll-canvas
     */
    "scroll-canvas": ScrollCanvasOptions & {
        type: "scroll-canvas";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/optimize-viewport-transform
     */
    "optimize-viewport-transform": OptimizeViewportTransformOptions & {
        type: "optimize-viewport-transform";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/click-select
     */
    "click-select": ClickSelectOptions & {
        type: "click-select";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/brush-select
     */
    "brush-select": BrushSelectOptions & {
        type: "brush-select";
    };
    "lasso-select": LassoSelectOptions & {
        type: "lasso-select";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/create-edge
     */
    "create-edge": CreateEdgeOptions & {
        type: "create-edge";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/drag-element
     */
    "drag-element": DragElementOptions & {
        type: "drag-element";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/drag-element-force
     */
    "drag-element-force": DragElementForceOptions & {
        type: "drag-element-force";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/collapse-expand
     */
    "collapse-expand": CollapseExpandOptions & {
        type: "collapse-expand";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/focus-element
     */
    "focus-element": FocusElementOptions & {
        type: "focus-element";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/hover-activate
     */
    "hover-activate": HoverActivateOptions & {
        type: "hover-activate";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/fix-element-size
     */
    "fix-element-size": FixElementSizeOptions & {
        type: "fix-element-size";
    };
    /**
     * @see https://g6.antv.antgroup.com/en/manual/behavior/build-in/auto-adapt-label
     */
    "auto-adapt-label": AutoAdaptLabelOptions & {
        type: "auto-adapt-label";
    };
};
/**
 * All the built-in behavior types for G6
 */
type BuiltInBehaviorTypes = keyof BehaviorTypeConfigMap | (string & {});
type BuiltInBehaviorTypeConfig = BehaviorTypeConfigMap[keyof BehaviorTypeConfigMap];

/**
 * Preset states for nodes and edges.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/state
 */
type PresetState = "selected" | "active" | "highlight" | "inactive" | "disable";
type ElementState = PresetState | (string & {});

type UnknownStruct = Record<string, unknown>;

type BaseNodeStyleProps$1<NodeType extends UnknownStruct = UnknownStruct> = Omit<BaseNodeStyleProps$2, "childrenData"> & {
    /**
     * <zh/> 子节点数据
     *
     * <en/> The data of the child node
     * @remarks
     * <zh/> 仅在树图中生效。如果当前节点为收起状态，children 可能为空，通过 childrenData 能够获取完整的子元素数据
     *
     * <en/> Only valid in the tree graph. If the current node is collapsed, children may be empty, and the complete child element data can be obtained through childrenData
     * @ignore
     */
    childrenData?: NodeData<NodeType>[];
};

/**
 * Style configuration for circle nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/circle
 */
type CircleNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>>;

/**
 * Style configuration for custom nodes.
 */
type CustomNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>> & {
    [key: string]: unknown;
};

/**
 * Style configuration for diamond nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/diamond
 */
type DiamondNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>>;

/**
 * Style configuration for donut rounds.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/donut#donutround
 */
type DonutRound = {
    /** Color */
    color?: string;
    /**
     * Fill color
     * @default "#1783FF"
     */
    fill?: string;
    /**
     * Fill color opacity
     * @default 1
     */
    fillOpacity?: number | string;
    /**
     * Stroke end style
     * @default "butt"
     */
    lineCap?: "round" | "square" | "butt";
    /** Stroke dash style */
    lineDash?: number[];
    /** Stroke dash offset */
    lineDashOffset?: number;
    /**
     * Stroke join style
     * @default "miter"
     */
    lineJoin?: "round" | "bevel" | "miter";
    /**
     * Stroke width
     * @default 1
     */
    lineWidth?: number;
    /**
     * Opacity
     * @default 1
     */
    opacity?: number | string;
    /** Shadow blur */
    shadowBlur?: number;
    /** Shadow color */
    shadowColor?: string;
    /** Shadow offset in x-axis direction */
    shadowOffsetX?: number | string;
    /** Shadow offset in y-axis direction */
    shadowOffsetY?: number | string;
    /**
     * Shadow type
     * @default "outer"
     */
    shadowType?: "inner" | "outer";
    /**
     * Stroke color
     * @default "#000"
     */
    stroke?: string;
    /**
     * Stroke color opacity
     * @default 1
     */
    strokeOpacity?: number | string;
    /**
     * Value for ratio calculation
     * @required
     */
    value: number;
    /**
     * Visibility of the shape
     * @default "visible"
     */
    visibility?: "visible" | "hidden";
};
/**
 * Style configuration for donut nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/donut
 */
type DonutNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>> & {
    /**
     * Fill color
     *
     * @default "#1783FF"
     */
    donutFill?: string;
    /**
     * Fill color opacity
     *
     * @default 1
     */
    donutFillOpacity?: number | string;
    /**
     * Stroke end style
     *
     * @default "butt"
     */
    donutLineCap?: "round" | "square" | "butt";
    /**
     * Stroke dash style
     */
    donutLineDash?: number[];
    /**
     * Stroke dash offset
     */
    donutLineDashOffset?: number;
    /**
     * Stroke join style
     *
     * @default "miter"
     */
    donutLineJoin?: "round" | "bevel" | "miter";
    /**
     * Stroke width
     *
     * @default 1
     */
    donutLineWidth?: number;
    /**
     * Opacity
     *
     * @default 1
     */
    donutOpacity?: number | string;
    /**
     * Color or palette name
     *
     * @default "tableau"
     */
    donutPalette?: string | string[];
    /**
     * Donut data
     */
    donuts?: number[] | DonutRound[];
    /**
     * Shadow blur
     */
    donutShadowBlur?: number;
    /**
     * Shadow color
     */
    donutShadowColor?: string;
    /**
     * Shadow offset in x-axis direction
     */
    donutShadowOffsetX?: number | string;
    /**
     * Shadow offset in y-axis direction
     */
    donutShadowOffsetY?: number | string;
    /**
     * Shadow type
     *
     * @default "outer"
     */
    donutShadowType?: "inner" | "outer";
    /**
     * Stroke color
     *
     * @default "#000"
     */
    donutStroke?: string;
    /**
     * Stroke color opacity
     *
     * @default 1
     */
    donutStrokeOpacity?: number | string;
    /**
     * Visibility of the shape
     *
     * @default "visible"
     */
    donutVisibility?: "visible" | "hidden";
    /**
     * Inner ring radius, percentage or px
     *
     * @default "50%"
     */
    innerR?: string | number;
};

/**
 * Style configuration for ellipse nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/ellipse
 */
type EllipseNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>>;

/**
 * Style configuration for hexagon nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/hexagon
 */
type HexagonNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>> & {
    /**
     * Outer radius, the distance from the hexagon's center to any vertex.
     *
     * @default "Half of the minimum of width and height"
     */
    outerR?: number;
};

/**
 * Style configuration for html nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/html
 */
type HtmlNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>> & {
    /**
     * Horizontal offset. The HTML container defaults to the top-left corner as the origin, and dx is used for horizontal offset.
     *
     * @default 0
     */
    dx?: number;
    /**
     * Vertical offset. The HTML container defaults to the top-left corner as the origin, and dy is used for vertical offset.
     *
     * @default 0
     */
    dy?: number;
    /**
     * HTML content, can be a string or HTMLElement
     *
     * @default 0
     */
    innerHTML: string | HTMLElement;
};

/**
 * Style configuration for image nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/image
 */
type ImageNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>> & {
    /**
     * Alias for the img attribute.
     *
     * @default ""
     */
    readonly img?: string;
    /**
     * Image source, i.e., image URL string.
     */
    readonly src: string;
};

/**
 * Style configuration for rect nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/rect
 */
type RectNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>>;

/**
 * Style configuration for star nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/star
 */
type StarNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>> & {
    /**
     * Inner radius, the distance from the star's center to the inner vertex.
     *
     * @default "3/8 of the outer radius"
     */
    innerR?: number;
};

/**
 * Style configuration for triangle nodes.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/build-in/triangle
 */
type TriangleNodeStyle<NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseNodeStyleProps$1<NodeType>> & {
    /**
     * The direction of the triangle.
     *
     * @default "up"
     */
    direction?: "up" | "down" | "left" | "right";
};

type NodeTypeStyleMap<NodeType extends UnknownStruct = UnknownStruct> = {
    circle: CircleNodeStyle<NodeType>;
    diamond: DiamondNodeStyle<NodeType>;
    donut: DonutNodeStyle<NodeType>;
    ellipse: EllipseNodeStyle<NodeType>;
    hexagon: HexagonNodeStyle<NodeType>;
    html: HtmlNodeStyle<NodeType>;
    image: ImageNodeStyle<NodeType>;
    rect: RectNodeStyle<NodeType>;
    star: StarNodeStyle<NodeType>;
    triangle: TriangleNodeStyle<NodeType>;
};
type BuiltInNodeTypeName = keyof NodeTypeStyleMap;
type RefinedNodeData = Pick<NodeData$1, "id" | "combo" | "children" | "depth">;
type NodeData<NodeType extends UnknownStruct> = RefinedNodeData & {
    /**
     * <zh/> Node 类型
     *
     * <en/> Node type
     */
    type?: BuiltInNodeTypeName | (string & {});
    /**
     * <zh/> 节点数据
     *
     * <en/> Node data
     * @remarks
     * <zh/> 用于存储节点的自定义数据，可以在样式映射中通过回调函数获取
     *
     * <en/> Used to store custom data of the node, which can be obtained through callback functions in the style mapping
     */
    data?: NodeType;
    /**
     * <zh/> 节点样式
     *
     * <en/> Node style
     */
    style?: NodeTypeStyleMap<NodeType>[BuiltInNodeTypeName] | CustomNodeStyle<NodeType>;
    /**
     * <zh/> 节点初始状态
     *
     * <en/> Initial state of the node
     */
    states?: ElementState[];
    [key: string]: unknown;
};
type BaseNodeOptions = Omit<NodeOptions$1, "type" | "style" | "state">;
type BaseNodeStyleProps<NodeType extends UnknownStruct = UnknownStruct> = Omit<BaseNodeStyleProps$2, "childrenData"> & {
    /**
     * <zh/> 子节点数据
     *
     * <en/> The data of the child node
     * @remarks
     * <zh/> 仅在树图中生效。如果当前节点为收起状态，children 可能为空，通过 childrenData 能够获取完整的子元素数据
     *
     * <en/> Only valid in the tree graph. If the current node is collapsed, children may be empty, and the complete child element data can be obtained through childrenData
     * @ignore
     */
    childrenData?: NodeData<NodeType>[];
};
type NodeDataFn<R, NodeType extends UnknownStruct> = (this: Graph$1, datum: NodeData<NodeType>) => R;
type StyleFieldNodeDataFn<S, NodeType extends UnknownStruct = UnknownStruct> = {
    [K in keyof S]?: S[K] | NodeDataFn<S[K], NodeType>;
};
type NodeOptions<T extends string, S extends Partial<BaseNodeStyleProps<NodeType>>, NodeType extends UnknownStruct = UnknownStruct> = BaseNodeOptions & {
    type?: T | NodeDataFn<T, NodeType>;
    style?: S | NodeDataFn<S, NodeType> | StyleFieldNodeDataFn<S, NodeType>;
    /**
     * The state of the node.
     *
     * @see https://g6.antv.antgroup.com/en/manual/element/state
     * */
    state?: {
        [K in PresetState]?: S | NodeDataFn<S, NodeType> | StyleFieldNodeDataFn<S, NodeType>;
    } | {
        [customState: string]: S | NodeDataFn<S, NodeType> | StyleFieldNodeDataFn<S, NodeType>;
    };
};
type CircleNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"circle", CircleNodeStyle<NodeType>, NodeType>;
type DiamondNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"diamond", DiamondNodeStyle<NodeType>, NodeType>;
type DonutNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"donut", DonutNodeStyle<NodeType>, NodeType>;
type EllipseNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"ellipse", EllipseNodeStyle<NodeType>, NodeType>;
type HexagonNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"hexagon", HexagonNodeStyle<NodeType>, NodeType>;
type HtmlNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"html", HtmlNodeStyle<NodeType>, NodeType>;
type ImageNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"image", ImageNodeStyle<NodeType>, NodeType>;
type RectNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"rect", RectNodeStyle<NodeType>, NodeType>;
type StarNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"star", StarNodeStyle<NodeType>, NodeType>;
type TriangleNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<"triangle", TriangleNodeStyle<NodeType>, NodeType>;
type CustomNodeOptions<NodeType extends UnknownStruct = UnknownStruct> = NodeOptions<Exclude<string, BuiltInNodeTypeName>, CustomNodeStyle<NodeType>, NodeType>;
/**
 * The different node config options for the graph.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/node/overview
 */
type NodeConfigOptions<NodeType extends UnknownStruct = UnknownStruct> = CircleNodeOptions<NodeType> | DiamondNodeOptions<NodeType> | DonutNodeOptions<NodeType> | EllipseNodeOptions<NodeType> | HexagonNodeOptions<NodeType> | HtmlNodeOptions<NodeType> | ImageNodeOptions<NodeType> | RectNodeOptions<NodeType> | StarNodeOptions<NodeType> | TriangleNodeOptions<NodeType> | CustomNodeOptions<NodeType>;

type BaseComboStyleProps<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = Omit<BaseComboStyleProps$1, "childrenData"> & {
    /**
     * <zh/> 组合的子元素数据
     *
     * <en/> The data of the children of combo
     * @remarks
     * <zh/> 如果组合是收起状态，children 可能为空，通过 childrenData 能够获取完整的子元素数据
     *
     * <en/> If the combo is collapsed, children may be empty, and the complete child element data can be obtained through childrenData
     */
    childrenData?: (NodeData<NodeType> | ComboData<ComboType, NodeType>)[];
};

/**
 * Style configuration for circle combos.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/combo/build-in/circle-combo
 */
type CircleComboStyle<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseComboStyleProps<ComboType, NodeType>>;

/**
 * Style configuration for custom combos.
 *
 */
type CustomComboStyle<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseComboStyleProps<ComboType, NodeType>> & {
    [key: string]: unknown;
};

/**
 * Style configuration for rect combos.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/combo/build-in/rect-combo
 */
type RectComboStyle<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = Partial<BaseComboStyleProps<ComboType, NodeType>>;

type ComboTypeStyleMap = {
    circle: CircleComboStyle;
    rect: RectComboStyle;
};
type BuiltInComboTypeName = keyof ComboTypeStyleMap;
type RefinedComboData = Pick<ComboData$1, "id" | "style" | "combo">;
type ComboData<ComboType extends UnknownStruct, NodeType extends UnknownStruct> = RefinedComboData & {
    /**
     * <zh/> Combo 类型
     *
     * <en/> Combo type
     */
    type?: BuiltInComboTypeName | (string & {});
    data?: ComboType;
    style?: CircleComboOptions<ComboType, NodeType>["style"] | RectComboOptions<ComboType, NodeType>["style"] | CustomComboOptions<ComboType, NodeType>["style"];
    /**
     * <zh/> 组合初始状态
     *
     * <en/> Initial state of the combo
     */
    states?: ElementState[];
    [key: string]: unknown;
};
type BaseComboOptions = Omit<ComboOptions$1, "type" | "style" | "state">;
type ComboDataFn<R, ComboType extends UnknownStruct, NodeType extends UnknownStruct> = (this: Graph$1, datum: ComboData<ComboType, NodeType>) => R;
type StyleFieldComboDataFn<S extends Partial<BaseComboStyleProps<ComboType, NodeType>>, ComboType extends UnknownStruct, NodeType extends UnknownStruct> = {
    [K in keyof S]?: S[K] | ComboDataFn<S[K], ComboType, NodeType>;
};
type ComboOptions<T extends string = string, ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct, S extends Partial<BaseComboStyleProps<ComboType, NodeType>> = Partial<BaseComboStyleProps<ComboType, NodeType>>> = BaseComboOptions & {
    type?: T | ComboDataFn<T, ComboType, NodeType>;
    style?: S | ComboDataFn<S, ComboType, NodeType> | StyleFieldComboDataFn<S, ComboType, NodeType>;
    /**
     * The state of the node.
     *
     * @see https://g6.antv.antgroup.com/en/manual/element/state
     * */
    state?: {
        [K in PresetState]?: S | ComboDataFn<S, ComboType, NodeType> | StyleFieldComboDataFn<S, ComboType, NodeType>;
    } | {
        [customState: string]: S | ComboDataFn<S, ComboType, NodeType> | StyleFieldComboDataFn<S, ComboType, NodeType>;
    };
};
type CircleComboOptions<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = ComboOptions<"circle", ComboType, NodeType, CircleComboStyle<ComboType, NodeType>>;
type RectComboOptions<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = ComboOptions<"rect", ComboType, NodeType, RectComboStyle<ComboType, NodeType>>;
type CustomComboOptions<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = ComboOptions<Exclude<string, BuiltInComboTypeName>, ComboType, NodeType, CustomComboStyle<ComboType, NodeType>>;
/**
 * The different combo config options for the graph.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/combo/overview
 */
type ComboConfigOptions<ComboType extends UnknownStruct = UnknownStruct, NodeType extends UnknownStruct = UnknownStruct> = CircleComboOptions<ComboType, NodeType> | RectComboOptions<ComboType, NodeType> | CustomComboOptions<ComboType, NodeType>;

/**
 * Style configuration for custom edges.
 */
type CustomEdgeStyle = Partial<BaseEdgeStyleProps>;

type BaseEdgeOptions = Omit<EdgeOptions$1, "type" | "style" | "state">;
type EdgeTypeStyleMap = {
    cubic: CubicStyleProps;
    "cubic-vertical": CubicVerticalStyleProps;
    "cubic-horizontal": CubicHorizontalStyleProps;
    line: LineStyleProps;
    polyline: PolylineStyleProps;
    quadratic: QuadraticStyleProps;
};
type BuiltInEdgeTypeName = keyof EdgeTypeStyleMap;
type RefinedEdgeData = Pick<EdgeData$1, "id" | "source" | "target">;
type EdgeData<EdgeType extends UnknownStruct> = RefinedEdgeData & {
    /**
     * <zh/> 边类型
     *
     * <en/> Edge type
     */
    type?: BuiltInEdgeTypeName | (string & {});
    /**
     * <zh/> 边数据
     *
     * <en/> Edge data
     * @remarks
     * <zh/> 用于存储边的自定义数据，可以在样式映射中通过回调函数获取
     *
     * <en/> Used to store custom data of the edge, which can be obtained through callback functions in the style mapping
     */
    data?: EdgeType;
    /**
     * <zh/> 边样式
     *
     * <en/> Edge style
     */
    style?: EdgeTypeStyleMap[BuiltInEdgeTypeName] | CustomEdgeStyle;
    /**
     * <zh/> 边初始状态
     *
     * <en/> Initial state of the edge
     */
    states?: ElementState[];
    [key: string]: unknown;
};
type EdgeDataFn<R, EdgeType extends UnknownStruct> = (this: Graph$1, datum: EdgeData<EdgeType>) => R;
type StyleFieldEdgeDataFn<S, EdgeType extends UnknownStruct = UnknownStruct> = {
    [K in keyof S]?: S[K] | EdgeDataFn<S[K], EdgeType>;
};
type EdgeOptions<T extends string, S extends Partial<BaseEdgeStyleProps>, EdgeType extends UnknownStruct = UnknownStruct> = BaseEdgeOptions & {
    type?: T | EdgeDataFn<T, EdgeType>;
    style?: S | EdgeDataFn<S, EdgeType> | StyleFieldEdgeDataFn<S, EdgeType>;
    state?: {
        [K in PresetState]?: S | EdgeDataFn<S, EdgeType> | StyleFieldEdgeDataFn<S, EdgeType>;
    } | {
        [customState: string]: S | EdgeDataFn<S, EdgeType> | StyleFieldEdgeDataFn<S, EdgeType>;
    };
};
type CubicEdgeOptions<EdgeType extends UnknownStruct = UnknownStruct> = EdgeOptions<"cubic", EdgeTypeStyleMap["cubic"], EdgeType>;
type CubicVerticalEdgeOptions<EdgeType extends UnknownStruct = UnknownStruct> = EdgeOptions<"cubic-vertical", EdgeTypeStyleMap["cubic-vertical"], EdgeType>;
type CubicHorizontalEdgeOptions<EdgeType extends UnknownStruct = UnknownStruct> = EdgeOptions<"cubic-horizontal", EdgeTypeStyleMap["cubic-horizontal"], EdgeType>;
type LineEdgeOptions<EdgeType extends UnknownStruct = UnknownStruct> = EdgeOptions<"line", EdgeTypeStyleMap["line"], EdgeType>;
type PolylineEdgeOptions<EdgeType extends UnknownStruct = UnknownStruct> = EdgeOptions<"polyline", EdgeTypeStyleMap["polyline"], EdgeType>;
type QuadraticEdgeOptions<EdgeType extends UnknownStruct = UnknownStruct> = EdgeOptions<"quadratic", EdgeTypeStyleMap["quadratic"], EdgeType>;
type CustomEdgeOptions<EdgeType extends UnknownStruct = UnknownStruct> = EdgeOptions<Exclude<string, BuiltInEdgeTypeName>, EdgeStyle, EdgeType>;
/**
 * The different edge config options for the graph.
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/edge/overview
 */
type EdgeConfigOptions<EdgeType extends UnknownStruct = UnknownStruct> = CubicEdgeOptions<EdgeType> | CubicVerticalEdgeOptions<EdgeType> | CubicHorizontalEdgeOptions<EdgeType> | LineEdgeOptions<EdgeType> | PolylineEdgeOptions<EdgeType> | QuadraticEdgeOptions<EdgeType> | CustomEdgeOptions<EdgeType>;

type LayoutAnimationOptions = {
    /**
     * <zh/> 启用布局动画，对于迭代布局，会在两次迭代之间进行动画过渡
     *
     * <en/> Enable layout animation, for iterative layout, animation transition will be performed between two iterations
     */
    animation?: boolean;
};
type BaseLayoutOptions<NodeType extends UnknownStruct> = LayoutAnimationOptions & WebWorkerLayoutOptions & {
    /**
     * <zh/> 参与该布局的节点
     *
     * <en/> Nodes involved in the layout
     * @param node - <zh/> 节点数据 | <en/> node data
     * @returns <zh/> 是否参与布局 | <en/> Whether to participate in the layout
     */
    nodeFilter?: (node: NodeData<NodeType>) => boolean;
    /**
     * <zh/> 使用前布局，在初始化元素前计算布局
     *
     * <en/> Use pre-layout to calculate the layout before initializing the elements
     * @remarks
     * <zh/> 不适用于流水线布局
     *
     * <en/> Not applicable to pipeline layout
     */
    preLayout?: boolean;
    /**
     * <zh/> 不可见节点是否参与布局
     *
     * <en/> Whether invisible nodes participate in the layout
     * @remarks
     * <zh/> 当 preLayout 为 true 时生效
     *
     * <en/> Takes effect when preLayout is true
     */
    isLayoutInvisibleNodes?: boolean;
    [key: string]: unknown;
};

/**
 * Antv Dagre Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/antv-dagre-layout
 */
type AntvDagreLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & AntVDagreLayoutOptions & {
    type: "antv-dagre";
};

/**
 * Antv Dagre Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/circular-layout
 */
type CircularLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & CircularLayoutOptions$1 & {
    type: "circular";
};

/**
 * Concentric Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/concentric-layout
 */
type ConcentricLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & ConcentricLayoutOptions$1 & {
    type: "concentric";
};

/**
 * Custom Layout options
 */
type CustomLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & RandomLayoutOptions$1 & {
    /**
     * <zh/> 布局类型
     *
     * <en/> Layout type
     */
    type: string;
};

/**
 * D3 Force Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/d3-force-layout
 */
type D3ForceLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & D3ForceLayoutOptions$1 & {
    type: "d3-force";
};

/**
 * D3 Force 3D Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/d3-force-layout
 */
type D3Force3DLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & D3Force3DLayoutOptions$1 & {
    type: "d3-force3d";
};

/**
 * Antv Dagre Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/dagre-layout
 */
type DagreLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & DagreLayoutOptions$1 & {
    type: "dagre";
};

type CoreFishboneOptions = Pick<FishboneLayoutOptions$1, "direction" | "hGap" | "vGap" | "width" | "height">;
/**
 * Fishbone Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/fishbone
 */
type FishboneLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & CoreFishboneOptions & {
    type: "fishbone";
    /**
     * <zh/> 节点大小
     *
     * <en/> Node size
     */
    nodeSize?: Size | ((node: NodeData<NodeType>) => Size);
    /**
     * <zh/> 获取鱼骨间距
     *
     * <en/> Get rib separation
     * @defaultValue () => 60
     */
    getRibSep?: (node: NodeData<NodeType>) => number;
};

/**
 * Force Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/force-layout
 */
type ForceLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & ForceLayoutOptions$1 & {
    type: "force" | "gforce";
};

/**
 * Force Atlas 2 Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/force-atlas2-layout
 */
type ForceAtlas2LayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & ForceAtlas2LayoutOptions$1 & {
    type: "force-atlas2";
};

/**
 * Fruchterman Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/fruchterman-layout
 */
type FruchtermanLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & FruchtermanLayoutOptions$1 & {
    type: "fruchterman" | "fruchterman-gpu";
};

/**
 * Grid Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/grid-layout
 */
type GridLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & GridLayoutOptions$1 & {
    type: "grid";
};

/**
 * MDS High-dimensional Data Dimensionality Reduction Layout Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/mds-layout
 */
type MDSLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & MDSLayoutOptions$1 & {
    type: "mds";
};

/**
 * Radial Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/radial-layout
 */
type RadialLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & RadialLayoutOptions$1 & {
    type: "radial";
};

/**
 * Random Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/random-layout
 */
type RandomLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & RandomLayoutOptions$1 & {
    type: "random";
};

type CoreSnakeOptions = Pick<SnakeLayoutOptions$1, "padding" | "cols" | "rowGap" | "colGap" | "clockwise">;
/**
 * Snake Layout options
 *
 * @sse https://g6.antv.antgroup.com/en/manual/layout/build-in/snake
 */
type SnakeLayoutOptions<NodeType extends UnknownStruct> = BaseLayoutOptions<NodeType> & CoreSnakeOptions & {
    readonly type: "snake";
    /**
     * <zh/> 节点尺寸
     *
     * <en/> Node size
     */
    nodeSize?: Size | ((node: NodeData<NodeType>) => Size);
    /**
     * <zh/> 节点排序方法。默认按照在图中的路径顺序进行展示
     *
     * <en/> Node sorting method
     */
    sortBy?: (nodeA: NodeData<NodeType>, nodeB: NodeData<NodeType>) => -1 | 0 | 1;
};

type GraphLayoutOptions<NodeType extends UnknownStruct = UnknownStruct> = AntvDagreLayoutOptions<NodeType> | CircularLayoutOptions<NodeType> | ConcentricLayoutOptions<NodeType> | D3ForceLayoutOptions<NodeType> | D3Force3DLayoutOptions<NodeType> | DagreLayoutOptions<NodeType> | FishboneLayoutOptions<NodeType> | ForceLayoutOptions<NodeType> | ForceAtlas2LayoutOptions<NodeType> | FruchtermanLayoutOptions<NodeType> | GridLayoutOptions<NodeType> | MDSLayoutOptions<NodeType> | RadialLayoutOptions<NodeType> | RandomLayoutOptions<NodeType> | SnakeLayoutOptions<NodeType> | CustomLayoutOptions<NodeType>;

type G6EventName = `${NodeEvent}` | `${EdgeEvent}` | `${CanvasEvent}` | `${GraphEvent}`;
type G6EventHandler = ((e: IEvent) => void) | {
    handler: (e: IEvent) => void;
    once?: boolean;
};
type G6EventsMap = {
    [E in G6EventName]?: G6EventHandler;
};
/**
 * Generic type definition for G6 graph data structure.
 *
 * This type defines the complete data structure for a G6 graph, including nodes,
 * edges, and optional combos (hierarchical groupings). Each element type can be
 * customized with specific data structures while maintaining type safety.
 *
 * @template NodeType - Custom data type for individual nodes, defaults to UnknownStruct
 * @template EdgeType - Custom data type for individual edges, defaults to UnknownStruct
 * @template ComboType - Custom data type for individual combos, defaults to UnknownStruct
 *
 * @example
 * ```typescript
 * // Basic usage with default types
 * const basicData: G6GraphData = {
 *   nodes: [{ id: 'node1' }, { id: 'node2' }],
 *   edges: [{ id: 'edge1', source: 'node1', target: 'node2' }]
 * };
 *
 * // Usage with custom node and edge data types
 * interface MyNodeData {
 *   name: string;
 *   category: string;
 *   value: number;
 * }
 *
 * interface MyEdgeData {
 *   weight: number;
 *   type: 'direct' | 'indirect';
 * }
 *
 * const typedData: G6GraphData<MyNodeData, MyEdgeData> = {
 *   nodes: [
 *     { id: 'node1', data: { name: 'Node 1', category: 'A', value: 10 } },
 *     { id: 'node2', data: { name: 'Node 2', category: 'B', value: 20 } }
 *   ],
 *   edges: [
 *     { id: 'edge1', source: 'node1', target: 'node2', data: { weight: 5, type: 'direct' } }
 *   ]
 * };
 * ```
 *
 * @see {@link NodeData} for node structure details
 * @see {@link EdgeData} for edge structure details
 * @see {@link ComboData} for combo structure details
 */
type G6GraphData<NodeType extends UnknownStruct = UnknownStruct, EdgeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> = {
    /** Array of nodes in the graph, each with optional custom data */
    nodes?: NodeData<NodeType>[];
    /** Array of edges connecting nodes, each with optional custom data */
    edges?: EdgeData<EdgeType>[];
    /** Array of combos for hierarchical grouping of nodes, each with optional custom data */
    combos?: ComboData<ComboType, NodeType>[];
};
/**
 * Utility type for extracting individual data types from a G6GraphData generic type.
 *
 * This type uses conditional type inference to extract the node, edge, and combo
 * data types from a G6GraphData type. It's primarily used internally by other
 * types to maintain type safety when configuring graph options.
 *
 * The type leverages TypeScript's `infer` keyword to extract the generic type
 * parameters from G6GraphData and make them available as separate properties.
 *
 * @template D - The graph data type extending G6GraphData to extract types from
 *
 * @example
 * ```typescript
 * // Define custom data types
 * interface MyNodeData {
 *   name: string;
 *   category: string;
 * }
 *
 * interface MyEdgeData {
 *   weight: number;
 *   type: 'solid' | 'dashed';
 * }
 *
 * interface MyComboData {
 *   title: string;
 *   collapsed: boolean;
 * }
 *
 * // Create a typed graph data type
 * type MyGraphData = G6GraphData<MyNodeData, MyEdgeData, MyComboData>;
 *
 * // Extract individual types using the utility
 * type ExtractedTypes = InferGraphDataTypes<MyGraphData>;
 * // ExtractedTypes is:
 * // {
 * //   node: MyNodeData;
 * //   edge: MyEdgeData;
 * //   combo: MyComboData;
 * // }
 *
 * // Use in practice (this is how it's used internally)
 * type NodeOptions = NodeConfigOptions<ExtractedTypes["node"]>;
 * type EdgeOptions = EdgeConfigOptions<ExtractedTypes["edge"]>;
 * ```
 *
 * @see {@link G6GraphData} for the source data structure
 * @see {@link NodeConfigOptions} for how node types are used
 * @see {@link EdgeConfigOptions} for how edge types are used
 * @see {@link ComboConfigOptions} for how combo types are used
 */
type InferGraphDataTypes<D extends G6GraphData> = {
    /** The inferred node data type from the G6GraphData generic */
    node: D extends G6GraphData<infer N, UnknownStruct, UnknownStruct> ? N : never;
    /** The inferred edge data type from the G6GraphData generic */
    edge: D extends G6GraphData<UnknownStruct, infer E, UnknownStruct> ? E : never;
    /** The inferred combo data type from the G6GraphData generic */
    combo: D extends G6GraphData<UnknownStruct, UnknownStruct, infer C> ? C : never;
};
/**
 * The supported behaviors for the graph.
 *
 * @see https://g6.antv.antgroup.com/en/manual/behavior/overview
 */
type G6GraphBehaviors = BuiltInBehaviorTypes | BuiltInBehaviorTypeConfig | CustomBehaviorOption;
/**
 * Refined and type-safe version of G6's GraphOptions with enhanced type safety.
 *
 * This type extends the base G6 GraphOptions while providing better type inference
 * and safety for graph data, configurations, and behaviors. It replaces several
 * base options with type-safe alternatives that work seamlessly with custom data types.
 *
 * Key improvements over base GraphOptions:
 * - Type-safe data binding with custom node, edge, and combo types
 * - Enhanced layout options with node type inference
 * - Refined behavior configurations
 * - Better integration with the library's utility functions
 *
 * @template D - The graph data type extending G6GraphData, defaults to G6GraphData
 *
 * @example
 * ```typescript
 * // Basic usage with default types
 * const options: G6GraphOptions = {
 *   width: 800,
 *   height: 600,
 *   data: {
 *     nodes: [{ id: 'node1' }, { id: 'node2' }],
 *     edges: [{ id: 'edge1', source: 'node1', target: 'node2' }]
 *   },
 *   layout: { type: 'grid' },
 *   behaviors: ['drag-canvas', 'zoom-canvas']
 * };
 *
 * // Usage with custom typed data
 * interface MyNodeData {
 *   name: string;
 *   category: string;
 * }
 *
 * interface MyEdgeData {
 *   weight: number;
 * }
 *
 * const typedOptions: G6GraphOptions<G6GraphData<MyNodeData, MyEdgeData>> = {
 *   width: 800,
 *   height: 600,
 *   data: {
 *     nodes: [
 *       { id: 'node1', data: { name: 'Node 1', category: 'A' } },
 *       { id: 'node2', data: { name: 'Node 2', category: 'B' } }
 *     ],
 *     edges: [
 *       { id: 'edge1', source: 'node1', target: 'node2', data: { weight: 5 } }
 *     ]
 *   },
 *   node: {
 *     style: { fill: '#4A90E2', r: 10 },
 *     labelText: (d) => d.name // TypeScript knows d has 'name' property
 *   },
 *   edge: {
 *     labelText: (d) => d.weight.toString() // TypeScript knows d has 'weight' property
 *   },
 *   layout: { type: 'force', linkDistance: 100 },
 *   behaviors: ['drag-node', 'zoom-canvas']
 * };
 * ```
 *
 * @see {@link G6GraphData} for data structure details
 * @see {@link NodeConfigOptions} for node configuration options
 * @see {@link EdgeConfigOptions} for edge configuration options
 * @see {@link ComboConfigOptions} for combo configuration options
 * @see {@link GraphLayoutOptions} for layout configuration options
 * @see {@link G6GraphBehaviors} for behavior configuration options
 */
type G6GraphOptions<D extends G6GraphData = G6GraphData> = Omit<GraphOptions, "data" | "node" | "edge" | "combo" | "layout" | "behaviors"> & {
    /** Graph data containing nodes, edges, and optional combos with type safety */
    data?: D;
    /** Configuration options for node appearance and behavior with type inference */
    node?: NodeConfigOptions<InferGraphDataTypes<D>["node"]>;
    /** Configuration options for edge appearance and behavior with type inference */
    edge?: EdgeConfigOptions<InferGraphDataTypes<D>["edge"]>;
    /** Configuration options for combo appearance and behavior with type inference */
    combo?: ComboConfigOptions<InferGraphDataTypes<D>["combo"], InferGraphDataTypes<D>["node"]>;
    /** Layout algorithm configuration with node type inference */
    layout?: GraphLayoutOptions<InferGraphDataTypes<D>["node"]>;
    /** Array of interaction behaviors for the graph */
    behaviors?: G6GraphBehaviors[];
};

type G6GraphContextValue<D extends G6GraphData = G6GraphData> = {
    /**
     * The G6 graph instance.
     */
    readonly graph: Accessor<Graph$1>;
    /**
     * The G6 graph data.
     */
    readonly graphData: () => D;
    /**
     * Update the graph options.
     */
    readonly setGraphOptions: (options: G6GraphOptions<D>) => Promise<void>;
};
/**
 * Hook to access the G6 graph context and its associated methods.
 *
 * This hook provides access to the G6 graph instance, graph data, and methods
 * for updating graph options. It can only be used by child components of the
 * Graph component.
 *
 * @returns The G6 graph context value containing graph instance and methods
 * @throws Will throw an error if used outside of a Graph component's children
 *
 * @example
 * ```tsx
 * import { Graph, useGraph } from 'solid-g6';
 *
 * function MyGraphComponent() {
 *   const { graph, graphData, setGraphOptions } = useGraph();
 *
 *   // Access the G6 graph instance
 *   const graphInstance = graph();
 *
 *   // Get current graph data
 *   const currentData = graphData();
 *
 *   // Update graph options
 *   const handleUpdateLayout = async () => {
 *     await setGraphOptions({
 *       layout: { type: 'force', linkDistance: 150 }
 *     });
 *   };
 *
 *   return (
 *     <div>
 *       <button onClick={handleUpdateLayout}>
 *         Change Layout
 *       </button>
 *     </div>
 *   );
 * }
 *
 * // Must be used as a child of Graph component
 * function App() {
 *   return (
 *     <Graph {...graphOptions}>
 *       <MyGraphComponent />
 *     </Graph>
 *   );
 * }
 * ```
 *
 * @see {@link G6GraphContextValue} for available context properties and methods
 * @see {@link Graph} for the required parent component
 */
declare const useGraph: () => G6GraphContextValue;

/**
 * Props for the Graph component.
 *
 * This type extends G6GraphOptions with additional properties for container
 * styling, event handling, and lifecycle callbacks. It provides a complete
 * configuration interface for rendering and managing G6 graphs in SolidJS.
 *
 * @template D - The graph data type extending G6GraphData, defaults to G6GraphData
 *
 * @example
 * ```tsx
 * // Basic usage with default types
 * const basicProps: GraphProps = {
 *   width: 800,
 *   height: 600,
 *   data: {
 *     nodes: [{ id: 'node1' }, { id: 'node2' }],
 *     edges: [{ id: 'edge1', source: 'node1', target: 'node2' }]
 *   },
 *   layout: { type: 'grid' }
 * };
 *
 * // Advanced usage with custom types and events
 * interface MyNodeData {
 *   name: string;
 *   category: string;
 * }
 *
 * const advancedProps: GraphProps<G6GraphData<MyNodeData>> = {
 *   id: 'my-graph',
 *   class: 'graph-container',
 *   width: 1000,
 *   height: 700,
 *   data: {
 *     nodes: [
 *       { id: 'node1', data: { name: 'Node 1', category: 'A' } }
 *     ],
 *     edges: []
 *   },
 *   node: {
 *     style: { fill: '#4A90E2', r: 15 },
 *     labelText: (d) => d.name
 *   },
 *   layout: { type: 'force', linkDistance: 100 },
 *   behaviors: ['drag-node', 'zoom-canvas'],
 *   events: {
 *     'node:click': (e) => console.log('Node clicked:', e.target.id)
 *   },
 *   onReady: (graph) => console.log('Graph ready:', graph),
 *   onInit: (graph) => console.log('Graph initialized:', graph)
 * };
 * ```
 *
 * @see {@link G6GraphOptions} for base graph configuration options
 * @see {@link G6GraphData} for data structure details
 * @see {@link G6EventsMap} for event configuration options
 */
type GraphProps<D extends G6GraphData = G6GraphData> = G6GraphOptions<D> & {
    /**
     * The id for the container element.
     */
    readonly id?: string;
    /**
     * The class for the container element.
     */
    readonly class?: string;
    /**
     * The style for the container element.
     */
    readonly style?: JSX.CSSProperties;
    /**
     * The events for the graph.
     *
     * @see https://g6.antv.antgroup.com/en/manual/further-reading/event
     */
    readonly events?: G6EventsMap;
    /**
     * Callback for when the graph is initialized, after new Graph().
     */
    readonly onInit?: (graph: Graph$1) => void;
    /**
     * Callback for when the graph is ready, after graph.render().
     */
    readonly onReady?: (graph: Graph$1) => void;
    /**
     * Callback for when the graph is destroyed, after graph.destroy().
     */
    readonly onDestroy?: () => void;
};
/**
 * Main Graph component for rendering G6 graphs in SolidJS applications.
 *
 * This component creates and manages a G6 graph instance, providing a SolidJS-friendly
 * interface for graph visualization. It handles the complete lifecycle of the graph,
 * including initialization, rendering, event binding, and cleanup.
 *
 * The component creates a context provider that allows child components to access
 * the graph instance and methods through the useGraph hook.
 *
 * @template D - The graph data type extending G6GraphData, defaults to G6GraphData
 * @param props - Graph properties including G6 options, container styling, and callbacks
 * @returns JSX element containing the graph container and context provider
 *
 * @example
 * ```tsx
 * import { Graph, createGraphData } from 'solid-g6';
 *
 * // Basic usage
 * function BasicGraph() {
 *   const graphData = createGraphData({
 *     nodes: [
 *       { id: 'node1', data: { label: 'Node 1' } },
 *       { id: 'node2', data: { label: 'Node 2' } }
 *     ],
 *     edges: [
 *       { id: 'edge1', source: 'node1', target: 'node2' }
 *     ]
 *   });
 *
 *   return (
 *     <Graph
 *       width={800}
 *       height={600}
 *       data={graphData}
 *       layout={{ type: 'grid' }}
 *       behaviors={['drag-canvas', 'zoom-canvas']}
 *     />
 *   );
 * }
 *
 * // Advanced usage with events and child components
 * function AdvancedGraph() {
 *   const handleNodeClick = (e) => {
 *     console.log('Node clicked:', e.target.id);
 *   };
 *
 *   const handleGraphReady = (graph) => {
 *     console.log('Graph is ready!', graph);
 *   };
 *
 *   return (
 *     <Graph
 *       id="advanced-graph"
 *       class="my-graph"
 *       width={1000}
 *       height={700}
 *       data={complexData}
 *       layout={{ type: 'force', linkDistance: 150 }}
 *       node={{
 *         style: { fill: '#4A90E2', r: 20 },
 *         labelText: (d) => d.name
 *       }}
 *       events={{
 *         'node:click': handleNodeClick,
 *         'canvas:click': () => console.log('Canvas clicked')
 *       }}
 *       onReady={handleGraphReady}
 *       onInit={(graph) => console.log('Graph initialized')}
 *     >
 *       <GraphControls />
 *       <GraphLegend />
 *     </Graph>
 *   );
 * }
 *
 * // Child components can use useGraph hook
 * function GraphControls() {
 *   const { graph, setGraphOptions } = useGraph();
 *
 *   const changeLayout = async () => {
 *     await setGraphOptions({
 *       layout: { type: 'circular' }
 *     });
 *   };
 *
 *   return <button onClick={changeLayout}>Change Layout</button>;
 * }
 * ```
 *
 * @see {@link GraphProps} for available properties
 * @see {@link useGraph} for accessing graph context in child components
 * @see {@link G6GraphOptions} for graph configuration options
 * @see https://g6.antv.antgroup.com/en/api/graph/overview G6 Graph API documentation
 */
declare const Graph: <D extends G6GraphData = G6GraphData>(props: ParentProps<GraphProps<D>>) => JSX.Element;

/**
 * Creates a configuration for graph behaviors with type safety.
 *
 * Behaviors define how users can interact with the graph, such as drag-drop,
 * zoom, select, and other interactive features.
 *
 * @param behaviors - Array of behavior configurations to apply to the graph
 * @returns The same behaviors array with proper typing for G6 graph
 *
 * @example
 * ```typescript
 * const behaviors = createGraphBehaviors([
 *   'zoom-canvas',
 *   'drag-canvas',
 *   { type: 'drag-node', enableTransient: false }
 * ]);
 * ```
 *
 * @see https://g6.antv.antgroup.com/en/manual/behavior/overview
 */
declare const createGraphBehaviors: (behaviors: G6GraphBehaviors[]) => G6GraphBehaviors[];

/**
 * Creates a type-safe configuration for graph combo options.
 *
 * Combos are special nodes that can contain other nodes, allowing for
 * hierarchical grouping and organization of graph elements.
 *
 * @template D - The graph data type extending G6GraphData
 * @param combo - Configuration options for combo styling and behavior
 * @returns The same combo configuration with proper typing
 *
 * @example
 * ```typescript
 * const comboOptions = createGraphComboOptions({
 *   style: {
 *     fill: '#f0f0f0',
 *     stroke: '#666',
 *     lineWidth: 2
 *   },
 *   labelText: (data) => data.label || data.id
 * });
 * ```
 *
 * @see https://g6.antv.antgroup.com/en/manual/element/combo/build-in/base-combo
 */
declare const createGraphComboOptions: <D extends G6GraphData = G6GraphData>(combo: ComboConfigOptions<InferGraphDataTypes<D>["combo"], InferGraphDataTypes<D>["node"]>) => ComboConfigOptions<InferGraphDataTypes<D>["combo"], InferGraphDataTypes<D>["node"]>;

/**
 * Creates a type-safe graph data configuration.
 *
 * This function provides type safety for graph data containing nodes, edges,
 * and optionally combos. It ensures the data structure conforms to G6 requirements.
 *
 * @template D - The graph data type extending G6GraphData
 * @param data - The graph data object containing nodes, edges, and optional combos
 * @returns The same data object with proper typing for G6 graph
 *
 * @example
 * ```typescript
 * const graphData = createGraphData({
 *   nodes: [
 *     { id: 'node1', data: { label: 'Node 1' } },
 *     { id: 'node2', data: { label: 'Node 2' } }
 *   ],
 *   edges: [
 *     { id: 'edge1', source: 'node1',