@gravity-ui/graph
Version:
Modern graph editor component
102 lines (101 loc) • 2.79 kB
TypeScript
import React from "react";
import { Graph } from "../graph";
import { TComponentState } from "../lib/Component";
import { Layer, LayerContext, LayerProps } from "../services/Layer";
/**
* Properties for creating internal GraphPortal layer
*/
export interface GraphPortalLayerProps extends LayerProps {
/**
* Additional CSS classes for HTML element
*/
className?: string;
/**
* Layer position on Z axis
*/
zIndex?: number;
/**
* Whether HTML element should follow camera position
*/
transformByCameraPosition?: boolean;
}
/**
* Internal Layer class for GraphPortal
* Creates HTML element and provides it through portal
*/
declare class GraphPortalLayer extends Layer<GraphPortalLayerProps, LayerContext, TComponentState> {
constructor(props: GraphPortalLayerProps);
/**
* Get HTML element for creating portal
*/
getPortalTarget(): HTMLElement | null;
}
/**
* GraphPortal component properties
*/
export interface GraphPortalProps {
/**
* Additional CSS classes for layer
*/
className?: string;
/**
* Layer position on Z axis
*/
zIndex?: number;
/**
* Whether HTML element should follow camera position
* @default false
*/
transformByCameraPosition?: boolean;
/**
* Function for rendering portal content
*/
children: React.ReactNode | ((layer: GraphPortalLayer, graph: Graph) => React.ReactNode);
}
/**
* Declarative component for creating HTML layers using render prop pattern.
*
* Creates internal Layer with HTML element and renders passed
* React components through React Portal without need to create
* separate Layer class.
*
* @example
* ```tsx
* function MyGraph() {
* const { graph } = useGraph();
* const portalRef = useRef<GraphPortalLayer>(null);
*
* return (
* <GraphCanvas graph={graph} renderBlock={renderBlock}>
* <GraphPortal
* ref={portalRef}
* className="my-custom-layer"
* zIndex={200}
* transformByCameraPosition={true}
* >
* <div style={{ position: 'absolute', top: 10, left: 10 }}>
* <h3>Custom UI Layer</h3>
* <button onClick={() => portalRef.current?.hide()}>
* Hide layer
* </button>
* </div>
* </GraphPortal>
* </GraphCanvas>
* );
* }
* ```
*
* @example
* ```tsx
* // With render prop for accessing layer and graph
* <GraphPortal>
* {(layer, graph) => (
* <div onClick={() => layer.hide()}>
* Graph blocks count: {graph.api.getBlocks().length}
* </div>
* )}
* </GraphPortal>
* ```
*/
export declare const GraphPortal: React.ForwardRefExoticComponent<GraphPortalProps & React.RefAttributes<GraphPortalLayer>>;
export {};