@linkurious/ogma-react/index.d.ts

A light adaptation of Ogma for React application

import OgmaLib from '@linkurious/ogma';
import { CanvasLayer as OgmaCanvasLayer, EdgeAttributesValue, EdgeFilter as EdgeFilterTransformation, EdgeFilterOptions, EdgeGrouping as EdgeGroupingTransformation, EdgeGroupingOptions, EdgeSelector, EventTypes, GeoModeOptions, HoverEdgeOptions, HoverNodeOptions, Layer as OgmaLayer, NeighborGeneration as NeighborGenerationTransformation, NeighborGenerationOptions, NeighborMerging as NeighborMergingTransformation, NeighborMergingOptions, NodeAttributesValue, NodeCollapsing as NodeCollapsingTransformation, NodeCollapsingOptions, NodeFilter as NodeFilterTransformation, NodeFilterOptions, NodeGrouping as NodeGroupingTransformation, NodeGroupingOptions, NodeSelector, Options as OgmaOptions, Overlay as OverlayLayer, Point, RawGraph, Size, StyleClass as OgmaStyleClass, StyleClassDefinition, StyleRule, Theme, Transformation } from '@linkurious/ogma';
import { ReactElement, ReactNode, Ref } from 'react';

export type EventNames<ND, ED> = keyof EventTypes<ND, ED>;
export type EventHandlers<ND, ED> = {
	[K in EventNames<ND, ED>]?: (event: EventTypes<ND, ED>[K]) => void;
};
export type EventHandlerProps<T> = {
	[K in keyof T as `on${Capitalize<string & K>}`]?: (event: T[K]) => void;
};
export declare function forEachEventHandler<ND, ED>(handlers: EventHandlers<ND, ED>, callback: <K extends EventNames<ND, ED>>(eventName: K, handler: (event: EventTypes<ND, ED>[K]) => void) => void): void;
export declare function getEventNameFromProp<ND, ED>(propName: string): keyof EventTypes<ND, ED> | null;
export interface OgmaProps<ND, ED> extends EventHandlerProps<EventTypes<ND, ED>> {
	options?: Partial<OgmaOptions>;
	onReady?: (ogma: OgmaLib) => void;
	graph?: RawGraph<ND, ED>;
	children?: ReactNode;
	theme?: Theme<ND, ED>;
	className?: string;
}
export declare const Ogma: import("react").NamedExoticComponent<OgmaProps<unknown, unknown> & import("react").RefAttributes<OgmaLib<unknown, unknown>>>;
/**
 * This is the hook that allows you to access the Ogma instance.
 * It should only be used in the context of the `Ogma` component.
 */
export declare const useOgma: <ND, ED>() => OgmaLib<ND, ED>;
export declare function useEvent<ND = unknown, ED = unknown, K extends EventNames<ND, ED> = EventNames<ND, ED>>(eventName: K, handler: (event: EventTypes<ND, ED>[K]) => void, dependencies?: any[]): (event: EventTypes<ND, ED>[K]) => void;
export interface NodeRuleProps<ND, ED> {
	selector?: NodeSelector<ND, ED>;
	attributes: NodeAttributesValue<ND, ED>;
}
export interface HoveredNodeProps<ND, ED> {
	attributes: HoverNodeOptions<ND, ED>;
	fullOverwrite?: boolean;
}
export interface SelectedNodeProps<ND, ED> {
	attributes: NodeAttributesValue<ND, ED>;
	fullOverwrite?: boolean;
}
/**
 * This component wraps around Ogma [`NodeStyle` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-styles-addNodeRule). It allows you to add a node style rule to the
 * Ogma instance to calculate the visual appearance attributes of the nodes.
 */
export declare const NodeStyle: import("react").ForwardRefExoticComponent<NodeRuleProps<unknown, unknown> & import("react").RefAttributes<StyleRule<unknown, unknown>>> & {
	Hovered: <ND, ED>({ attributes, fullOverwrite }: HoveredNodeProps<ND, ED>) => null;
	Selected: <ND, ED>({ attributes, fullOverwrite }: SelectedNodeProps<ND, ED>) => null;
};
export interface EdgeRuleProps<ND, ED> {
	selector?: EdgeSelector<ED, ND>;
	attributes: EdgeAttributesValue<ED, ND>;
}
export interface HoveredEdgeProps<ND, ED> {
	attributes: HoverEdgeOptions<ED, ND>;
	fullOverwrite?: boolean;
}
export interface SelectedEdgeProps<ND, ED> {
	attributes: EdgeAttributesValue<ED, ND>;
	fullOverwrite?: boolean;
}
/**
 * This component wraps around Ogma [`EdgeStyle` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-styles-addEdgeRule). It allows you to add a node style rule to the
 * Ogma instance to calculate the visual appearance attributes of the edges.
 */
export declare const EdgeStyle: import("react").ForwardRefExoticComponent<EdgeRuleProps<unknown, unknown> & import("react").RefAttributes<StyleRule<unknown, unknown>>> & {
	Hovered: <ND, ED>({ attributes, fullOverwrite }: HoveredEdgeProps<ND, ED>) => null;
	Selected: <ND, ED>({ attributes, fullOverwrite }: SelectedEdgeProps<ND, ED>) => null;
};
export interface StyleProps<ND, ED> extends StyleClassDefinition<ND, ED> {
	name: string;
}
/**
 * This component wraps around Ogma [`StyleClass`](https://doc.linkurio.us/ogma/latest/api.html#Ogma-styles-addClassStyle) API. It allows you to add a class style to the
 * Ogma instance to calculate the visual appearance attributes of the nodes and edges.
 */
export declare const StyleClass: import("react").NamedExoticComponent<StyleProps<unknown, unknown> & import("react").RefAttributes<OgmaStyleClass<unknown, unknown>>>;
export interface TransformationContext {
}
export interface TransformationProps<ND, ED, C extends TransformationContext = TransformationContext> {
	disabled?: boolean;
	onEnabled?: (transformation: Transformation<ND, ED, C>) => void;
	onDisabled?: (transformation: Transformation<ND, ED, C>) => void;
	onDestroyed?: (transformation: Transformation<ND, ED, C>) => void;
	onUpdated?: (transformation: Transformation<ND, ED, C>) => void;
	onSetIndex?: (transformation: Transformation<ND, ED, C>, index: number) => void;
}
export interface NodeGroupingProps<ND, ED> extends NodeGroupingOptions<ND, ED>, TransformationProps<ND, ED, NodeGroupingOptions<ND, ED>> {
}
export declare const NodeGrouping: import("react").ForwardRefExoticComponent<NodeGroupingProps<unknown, unknown> & import("react").RefAttributes<NodeGroupingTransformation<unknown, unknown>>>;
export interface EdgeGroupingProps<ED, ND> extends EdgeGroupingOptions<ED, ND>, TransformationProps<ED, ND, EdgeGroupingOptions<ED, ND>> {
}
/**
 * Edge grouping transformation component. It wraps around Ogma [`EdgeGrouping` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addEdgeGrouping).
 */
export declare const EdgeGrouping: import("react").ForwardRefExoticComponent<EdgeGroupingProps<unknown, unknown> & import("react").RefAttributes<EdgeGroupingTransformation<unknown, unknown>>>;
export interface NodeCollapsingProps<ND, ED> extends NodeCollapsingOptions<ND, ED>, TransformationProps<ND, ED, NodeCollapsingOptions<ND, ED>> {
}
export declare function NodeCollapsingComponent<ND = any, ED = any>(props: NodeCollapsingProps<ND, ED>, ref: Ref<NodeCollapsingTransformation<ND, ED>>): null;
export declare const NodeCollapsing: import("react").ForwardRefExoticComponent<NodeCollapsingProps<unknown, unknown> & import("react").RefAttributes<NodeCollapsingTransformation<unknown, unknown>>>;
export interface NeighborMergingProps<ND, ED> extends NeighborMergingOptions<ND, ED>, TransformationProps<ND, ED, NeighborMergingOptions<ND, ED>> {
}
export declare const NeighborMerging: import("react").ForwardRefExoticComponent<NeighborMergingProps<unknown, unknown> & import("react").RefAttributes<NeighborMergingTransformation<unknown, unknown>>>;
export interface NeighborGenerationProps<ND, ED> extends NeighborGenerationOptions<ND, ED>, TransformationProps<ND, ED, NeighborGenerationOptions<ND, ED>> {
}
export declare const NeighborGeneration: import("react").ForwardRefExoticComponent<NeighborGenerationProps<unknown, unknown> & import("react").RefAttributes<NeighborGenerationTransformation<unknown, unknown>>>;
export interface EdgeFilterProps<ND, ED> extends EdgeFilterOptions<ND, ED>, TransformationProps<ND, ED, EdgeFilterOptions<ND, ED>> {
}
/**
 * Edge Filter transformation component. It wraps around Ogma [`EdgeFilter` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addEdgeFilter).
 */
export declare const EdgeFilter: import("react").ForwardRefExoticComponent<EdgeFilterProps<unknown, unknown> & import("react").RefAttributes<EdgeFilterTransformation<unknown, unknown>>>;
export interface NodeFilterProps<ED, ND> extends NodeFilterOptions<ED, ND>, TransformationProps<ND, ED, NodeFilterOptions<ED, ND>> {
}
/**
 * Edge Filter transformation component. It wraps around Ogma [`NodeFilter` API](https://doc.linkurio.us/ogma/latest/api.html#Ogma-transformations-addNodeFilter).
 */
declare const NodeFilter$1: import("react").ForwardRefExoticComponent<NodeFilterProps<unknown, unknown> & import("react").RefAttributes<NodeFilterTransformation<unknown, unknown>>>;
export type Placement = "top" | "bottom" | "left" | "right" | "center";
export type Content = string | ReactElement | ((ogma: OgmaLib, position: Point | null) => ReactElement);
export interface PopupProps {
	/** Overlay content */
	content?: string | ReactElement;
	/** Overlay position */
	position: Point | ((ogma: OgmaLib) => Point | null);
	/** Overlay size */
	size?: Size;
	/** Open state, whether or not the overlay should be shown  */
	isOpen?: boolean;
	/** Close button */
	closeButton?: ReactNode | null;
	/** Close callback */
	onClose?: () => void;
	/** Overlay placement relative to the position */
	placement?: Placement;
	/** Close on Escape key */
	closeOnEsc?: boolean;
	/** Overlay container className */
	popupClass?: string;
	/** Overlay content className */
	contentClass?: string;
	/** Overlay body className */
	popupBodyClass?: string;
	/** Close button className */
	closeButtonClass?: string;
	children?: ReactNode;
}
/**
 * A popup component.
 * Use it to display information statically on top of your visualisation
 * or to display a modal dialog.
 */
export declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<OverlayLayer>>;
export type PositionGetter = (ogma: OgmaLib) => Point | null;
export interface TooltipProps {
	/** Tooltip id */
	id?: string;
	/** Tooltip position */
	position: Point | PositionGetter;
	/** Tooltip content */
	content?: Content;
	/** Tooltip size */
	size?: Size;
	/** Tooltip visibility */
	visible?: boolean;
	/** Tooltip placement relative to the position */
	placement?: Placement;
	/** Tooltip container className */
	tooltipClass?: string;
	children?: ReactNode;
}
/**
 * Tooltip layer is a custom component to render some dynamic data on top of
 * your visualisation. The position and contents can be changed quickly and it
 * will adapt the placement to the viewport size. See in in action in our
 * [example](linkurious.github.io/ogma-react/)
 */
export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<OverlayLayer>>;
export interface CanvasLayerProps {
	/** Rendering function */
	render: (ctx: CanvasRenderingContext2D) => void;
	/** Whether or not the layer should be moved with the graph */
	isStatic?: boolean;
	/** Avoid redraw */
	noClear?: boolean;
	/** Layer index */
	index?: number;
	/** Layer visibility */
	visible?: boolean;
}
/**
 * A canvas layer that can be added to the Ogma instance. See the [Ogma documentation](https://doc.linkurio.us/ogma/latest/api.html#Ogma-layers-addCanvasLayer) for more information.
 *
 * Useful to perform drawings in sync with the view. In the drawing function you
 * are given the CanvasRenderingContext2D, that is automatically scaled and
 * translated to be in sync with the graph. So you can simply use graph
 * coordinates to draw shapes and text in it. See our "Layers" examples for
 * the code snippets.
 */
export declare const CanvasLayer: import("react").ForwardRefExoticComponent<CanvasLayerProps & import("react").RefAttributes<OgmaCanvasLayer>>;
export interface OverlayProps {
	/** Overlay position */
	position: Point | ((ogma: OgmaLib) => Point | null);
	/** Overlay size */
	size?: Size;
	children?: ReactNode;
	/** Overlay container className */
	className?: string;
	/** Whether the overlay should be scaled with the graph */
	scaled?: boolean;
}
export declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<OverlayLayer>>;
export interface LayerProps {
	children?: ReactNode;
	/** Overlay container className */
	className?: string;
	/** Layer index */
	index?: number;
}
export declare const Layer: import("react").ForwardRefExoticComponent<LayerProps & import("react").RefAttributes<OgmaLayer>>;
export interface GeoModeProps extends GeoModeOptions {
	enabled?: boolean;
}
export declare function Geo({ enabled, ...options }: GeoModeProps): null;

export {
	EdgeStyle as EdgeStyleRule,
	NodeFilter$1 as NodeFilter,
	NodeStyle as NodeStyleRule,
};

export {};