@yworks/react-yfiles-core/dist/index.d.ts

This module provides shared functionality for the yFiles React components.

import * as react_jsx_runtime from 'react/jsx-runtime';
import React, { ComponentType, PropsWithChildren, JSX, JSXElementConstructor, Dispatch, SetStateAction } from 'react';
import { GraphComponent, IRenderContext, INode, Visual, NodeStyleBase, TypedHtmlVisual, PolylineEdgeStyle, HighlightIndicatorManager, IModelItem, IHighlightRenderer, IObservableCollection, IObjectRenderer } from '@yfiles/yfiles';

/**
 * A callback type representing an action to be performed when a context menu item is clicked.
 */
type ContextMenuItemAction<TDataItem> = (item: TDataItem | null) => void;
/**
 * An entry in the context menu.
 */
interface ContextMenuItem<TDataItem> {
    /**
     * The displayed text on the context menu item.
     */
    title: string;
    /**
     * The function that is triggered when clicking the context menu item.
     */
    action: ContextMenuItemAction<TDataItem>;
}
/**
 * The props for rendering the context menu.
 */
interface RenderContextMenuProps<TDataItem> {
    /**
     * The data item for which the context menu was opened, or null.
     */
    item: TDataItem | null;
    /**
     * The menu items to be rendered.
     */
    menuItems: ContextMenuItem<TDataItem>[];
    /**
     * A function that closes the context menu.
     */
    onClose: Function;
}
/**
 * A function type specifying the context menu items for a data item.
 */
type ContextMenuItemProvider<TDataItem> = (item: TDataItem | null) => ContextMenuItem<TDataItem>[];
/**
 * The props provided by the context menu.
 */
interface ContextMenuProps<TDataItem> {
    /**
     * A function specifying the context menu items for a data item.
     */
    menuItems?: ContextMenuItemProvider<TDataItem>;
    /**
     * An optional component used for rendering a custom context menu.
     */
    renderMenu?: ComponentType<RenderContextMenuProps<TDataItem>>;
    /**
     * Optional global props that get passed to the context-menu component
     */
    extraProps?: Record<string, any>;
}
/**
 * The ContextMenu component adds a context menu to the graph items. It is designed to be used inside a
 * parent component that displays the graph.
 */
declare function ContextMenu<TDataItem>({ menuItems, renderMenu, extraProps }: ContextMenuProps<TDataItem> & PropsWithChildren): react_jsx_runtime.JSX.Element;

/**
 * Specifies the possible positions for placing a component.
 */
type Position = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';

/**
 * A button in the {@link Controls} component.
 */
interface ControlButton {
    /**
     * The function that is triggered when clicking the control button.
     */
    action: () => void;
    /**
     * The url or element to be used as the button icon.
     */
    icon?: string | JSX.Element;
    /**
     * The class name to style the control button.
     */
    className?: string;
    /**
     * Whether the control button is active.
     */
    disabled?: boolean;
    /**
     * The tooltip that is displayed when hovering the control button.
     */
    tooltip?: string;
}
/**
 * The props for rendering the {@link Controls} component.
 */
interface RenderControlsProps {
    /**
     * The buttons that are rendered by the {@link Controls} component.
     */
    buttons: ControlButton[];
    /**
     * The orientation of the {@link Controls} component.
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * The CSS class of the {@link Controls} component.
     */
    className?: string;
    /**
     * The position of the {@link Controls} component.
     */
    position?: Position | 'custom';
}
/**
 * A function type specifying the buttons of the  {@link Controls} component.
 */
type ControlsButtonProvider = () => ControlButton[];
/**
 * The props provided by the {@link Controls}.
 */
interface ControlsProps {
    /**
     * A function specifying the buttons that are rendered by the {@link Controls} component.
     */
    buttons: ControlsButtonProvider;
    /**
     * The orientation of the {@link Controls} component.
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * The CSS class of the {@link Controls} component.
     */
    className?: string;
    /**
     * The position of the {@link Controls} component.
     */
    position?: Position | 'custom';
    /**
     * An optional component used for rendering a custom {@link Controls} component.
     */
    renderControls?: ComponentType<RenderControlsProps>;
}
/**
 * The Controls component renders buttons that perform actions on the graph.
 * This component must be used inside a parent component that displays the graph, or its corresponding provider.
 *
 * ```tsx
 * function App() {
 *   const button1 = { action: () => alert('Button 1 clicked!'), icon: <div>Button 1</div> }
 *   const button2 = { action: () => alert('Button 2 clicked!'), icon: <div>Button 2</div> }
 *   return (
 *     <MyReactYFilesComponent data={data}>
 *       <Controls buttons={() => [button1, button2]}></Controls>
 *     </MyReactYFilesComponent>
 *   )
 * }
 * ```
 */
declare function Controls({ buttons, orientation, position, className, renderControls }: ControlsProps & PropsWithChildren): react_jsx_runtime.JSX.Element;

/**
 * A function returning the default control buttons to be used in {@link ControlsProps.buttons}.
 */
declare function DefaultControlButtons(): ControlButton[];

/**
 * A hook that returns the [yFiles GraphComponent]{@link http://docs.yworks.com/yfileshtml/#/api/GraphComponent}
 * that is used by the parent component to display the graph.
 * This hook provides the option to use the yFiles API for customizing graph layout, visualization, and interaction.
 * While it is highly versatile, proficiency is required for effective application.
 * @returns the GraphComponent used to display the graph.
 */
declare function useGraphComponent(): GraphComponent;
/**
 * Creates a [yFiles GraphComponent]{@link http://docs.yworks.com/yfileshtml/#/api/GraphComponent} and wraps
 * the provided component in a provider that provides the created GraphComponent.
 */
declare function withGraphComponentProvider<T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<any>>(Component: T): (props: React.ComponentProps<T>) => react_jsx_runtime.JSX.Element;
/**
 * A hook that adds the given [yFiles GraphComponent]{@link http://docs.yworks.com/yfileshtml/#/api/GraphComponent}
 * to a parent in useLayoutEffect().
 */
declare function useAddGraphComponent(parentRef: React.RefObject<HTMLElement | null>, graphComponent: GraphComponent): void;

/**
 * A React component rendering a node described by the {@link RenderNodeProps}.
 */
type NodeTemplate<TDataItem> = ComponentType<RenderNodeProps<TDataItem>>;
/**
 * Helper for the ReactComponentHtmlNodeStyle to factor out the props retrieval per node.
 */
type TagProvider<TDataItem> = (context: IRenderContext, node: INode) => TDataItem;
/**
 * The default implementation just uses the props from the tag of the item to be rendered.
 */
declare const defaultTagProvider: TagProvider<any>;
/**
 * The information necessary to render a node in the context of its parent component with portals.
 */
type NodeRenderInfo<TDataItem> = {
    domNode: HTMLDivElement;
    component: NodeTemplate<TDataItem>;
    props: RenderNodeProps<TDataItem>;
    node: INode;
    visual: Visual;
};
/**
 * The interface of the props passed to the HTML react component for rendering the node contents.
 */
interface RenderNodeProps<TDataItem> {
    /**
     * Whether the item is currently selected.
     */
    selected: boolean;
    /**
     * Whether the item is currently being hovered.
     */
    hovered: boolean;
    /**
     * Whether the item is currently focused.
     */
    focused: boolean;
    /**
     * The width of the item.
     */
    width: number;
    /**
     * The height of the item.
     */
    height: number;
    /**
     * The detail level of the visualization. Use this value to implement level-of-detail rendering.
     */
    detail: 'low' | 'high';
    /**
     * The data item to render.
     */
    dataItem: TDataItem;
}
/**
 * A simple INodeStyle implementation that uses React Components/render functions
 * for rendering the node visualizations as an HtmlVisual.
 * Use it like this:
 * ```
 *  declare type TagType = { name: string }
 *
 *  const MyHtmlNodeTemplate = ({ name }: ReactComponentHtmlNodeStyleProps) => (
 *    <>
 *      <span>{name}</span>
 *   </>
 *  )
 *
 *  const style = new ReactComponentNodeStyle(MyHtmlNodeTemplate)
 *
 *  const tag: TagType = { name: 'yFiles' }
 *  graph.createNode({ style, tag })
 * ```
 */
declare class ReactComponentHtmlNodeStyle<TDataItem> extends NodeStyleBase<TypedHtmlVisual<HTMLDivElement>> {
    private readonly setNodeInfos;
    private readonly tagProvider;
    readonly component: NodeTemplate<TDataItem>;
    /**
     * Creates a new instance.
     * @param reactComponent The React component rendering the HTML content.
     * @param setNodeInfos Callback for setting the node infos to be rendered.
     * @param tagProvider The optional provider function that provides the "tag" in the props.
     * By default, this will use the node's tag.
     */
    constructor(reactComponent: ComponentType<RenderNodeProps<TDataItem>>, setNodeInfos: Dispatch<SetStateAction<NodeRenderInfo<TDataItem>[]>>, tagProvider?: TagProvider<TDataItem>);
    protected createProps(context: IRenderContext, node: INode, cloneData: boolean): RenderNodeProps<TDataItem>;
    protected createVisual(context: IRenderContext, node: INode): TypedHtmlVisual<HTMLDivElement>;
    protected updateVisual(context: IRenderContext, oldVisual: TypedHtmlVisual<HTMLDivElement>, node: INode): TypedHtmlVisual<HTMLDivElement>;
    protected areEqual(oldProps: RenderNodeProps<TDataItem>, newProps: RenderNodeProps<TDataItem>): boolean;
    private deepEquals;
}

interface RenderGroupNodeProps<TDataItem> extends RenderNodeProps<TDataItem> {
    /**
     * Whether the node is folded.
     */
    isFolderNode: boolean;
}
declare class ReactComponentHtmlGroupNodeStyle<TDataItem> extends ReactComponentHtmlNodeStyle<TDataItem> {
    constructor(reactComponent: ComponentType<RenderGroupNodeProps<TDataItem>>, setNodeInfos: Dispatch<SetStateAction<NodeRenderInfo<TDataItem>[]>>, tagProvider?: TagProvider<TDataItem>);
    protected createProps(context: IRenderContext, node: INode, cloneData: boolean): RenderGroupNodeProps<TDataItem>;
    protected areEqual(oldProps: RenderGroupNodeProps<TDataItem>, newProps: RenderGroupNodeProps<TDataItem>): boolean;
}

declare function withGraphComponent(Component: ComponentType<any>): (props: any) => react_jsx_runtime.JSX.Element;

/**
 * A connection style configuration.
 */
interface EdgeStyle {
    /**
     * An optional CSS class that's used by the connection.
     */
    className?: string;
    /**
     * The thickness of the connection.
     */
    thickness?: number;
    /**
     * The bend smoothing of the connection.
     */
    smoothingLength?: number;
    /**
     * The source arrow type.
     */
    sourceArrow?: Arrow;
    /**
     * The target arrow type.
     */
    targetArrow?: Arrow;
}
/**
 * A connection arrow configuration.
 */
interface Arrow {
    /**
     * The arrow color.
     */
    color?: string;
    /**
     * The shape of the arrow.
     */
    type?: 'ellipse' | 'cross' | 'stealth' | 'diamond' | 'none' | 'open' | 'triangle' | 'deltoid' | 'kite' | 'chevron';
}
/**
 * Converts the input style to a yFiles PolylineEdgeStyle.
 */
declare function convertToPolylineEdgeStyle(style: EdgeStyle): PolylineEdgeStyle;

declare class GraphSearch<TNeedle> {
    graphComponent: GraphComponent;
    searchHighlightIndicatorManager: SearchHighlightIndicatorManager;
    matchingNodes: INode[];
    /**
     * Registers event listeners at the search box.
     *
     * The search result is updated on every key press and the 'ENTER' key zooms the viewport to the currently
     * matching nodes.
     *
     * @param searchBox The search box element.
     * @param graphSearch The GraphSearch instance.
     * @param autoCompleteSuggestions A list of possible auto-complete suggestion strings. If omitted, no auto-complete will be available
     */
    static registerEventListener(searchBox: HTMLElement, graphSearch: GraphSearch<string>, autoCompleteSuggestions?: string[]): void;
    /**
     * Creates a new instance of this class with the default highlight style.
     *
     * @param graphComponent The graphComponent on which the search will be applied
     */
    constructor(graphComponent: GraphComponent);
    /**
     * Gets the decoration style used for highlighting the matching nodes.
     */
    get highlightRenderer(): IHighlightRenderer;
    /**
     * Sets the decoration style used for highlighting the matching nodes.
     * @param highlightRenderer The given highlight style.
     */
    set highlightStyle(highlightRenderer: IHighlightRenderer);
    /**
     * Updates the search results for the given search query.
     * @param needle The data of the search query.
     */
    updateSearch(needle?: TNeedle): void;
    /**
     * Updates the auto-complete list for the given search field with
     * the given new suggestions.
     *
     * This will do nothing, unless auto-complete has been configured with initial suggestions
     * in the {@link registerEventListener} call.
     *
     * @param input An HTML `input` element that is used as a search input.
     * @param autoCompleteSuggestions A list of possible auto-complete suggestion strings.
     */
    updateAutoCompleteSuggestions(input: HTMLInputElement, autoCompleteSuggestions: string[]): void;
    /**
     * Zooms to the nodes that match the result of the current search.
     */
    zoomToSearchResult(): Promise<void>;
    /**
     * Specifies whether the given node is a match when searching for the given text.
     *
     * This implementation searches for the given string in the label text of the nodes.
     * Overwrite this method to implement custom matching rules.
     *
     * @param node The node to be examined.
     * @param needle The search data to be queried.
     * @returns True if the node matches the text, false otherwise
     */
    matches(node: INode, needle: TNeedle): boolean;
}
/**
 * A highlight indicator manager allows setting a specific renderer for the node highlights.
 */
declare class SearchHighlightIndicatorManager extends HighlightIndicatorManager<IModelItem> {
    nodeRenderer: IHighlightRenderer;
    constructor({ nodeRenderer, domain }: {
        nodeRenderer: IHighlightRenderer;
        domain: IObservableCollection<IModelItem>;
    });
    protected getRenderer(item: IModelItem): IObjectRenderer<IModelItem> | null;
}

declare function useGraphSearch<TDataItem, TNeedle>(graphComponent: GraphComponent, searchQuery?: TNeedle, onSearch?: (item: TDataItem, needle: TNeedle) => boolean): NodeTagSearch<TDataItem, TNeedle>;
declare class NodeTagSearch<TDataItem, TNeedle> extends GraphSearch<TNeedle> {
    onSearch?: ((item: TDataItem, needle: TNeedle) => boolean) | undefined;
    constructor(graphComponent: GraphComponent, onSearch?: ((item: TDataItem, needle: TNeedle) => boolean) | undefined);
    matches(node: INode, needle: TNeedle): boolean;
}

/**
 * The props for rendering the tooltip.
 */
interface RenderTooltipProps<TDataItem> {
    /**
     * The data item for which the tooltip should be rendered.
     */
    data: TDataItem;
}
/**
 * The props provided by the tooltip.
 */
interface TooltipProps<TDataItem> {
    renderTooltip?: ComponentType<RenderTooltipProps<TDataItem>>;
    extraProps?: Record<string, any>;
}
/**
 * The Tooltip component adds an item tooltip to its parent component. It is designed to be used inside a
 * parent component that displays the graph.
 */
declare function Tooltip<TDataItem>({ renderTooltip, extraProps }: TooltipProps<TDataItem>): react_jsx_runtime.JSX.Element;

/**
 * The props for the {@link Overview} component.
 */
interface OverviewProps {
    /**
     * The {@link Overview} title.
     */
    title?: string;
    /**
     * An optional CSS class to be used by the {@link Overview} component.
     */
    className?: string;
    /**
     * The position of the {@link Overview} component.
     * When position is set to 'custom', the overview can be placed using a CSS-class.
     */
    position?: Position | 'custom';
}
/**
 * The Overview component provides an overview of the graph displayed by its parent component.
 * This component has to be used inside a parent component that displays the graph, or its corresponding provider.
 *
 * ```tsx
 * function App() {
 *   return (
 *     <MyReactYFilesComponent data={data}>
 *       <Overview></Overview>
 *     </MyReactYFilesComponent>
 *   )
 * }
 * ```
 */
declare function Overview({ title, className, position }: OverviewProps): react_jsx_runtime.JSX.Element;

interface LicenseErrorProps {
    componentName: string;
    codeSample: string;
}
declare function LicenseError(props: LicenseErrorProps): react_jsx_runtime.JSX.Element;

/**
 * Registers the [yFiles license]{@link http://docs.yworks.com/yfileshtml/#/dguide/licensing} which is needed to
 * use the yFiles React component.
 *
 * ```tsx
 * function App() {
 *   registerLicense(yFilesLicense)
 *
 *   return (
 *     <MyReactYFilesComponent data={data}></MyReactYFilesComponent>
 *   )
 * }
 * ```
 *
 * @param licenseKey - The license key to register
 */
declare function registerLicense(licenseKey: Record<string, unknown>): void;
/**
 * Checks whether there is a valid yfiles license registered.
 */
declare function checkLicense(): boolean;

/****************************************************************************
 ** @license
 ** This demo file is part of yFiles for HTML 2.6.0.1.
 ** Copyright (c) 2000-2023 by yWorks GmbH, Vor dem Kreuzberg 28,
 ** 72070 Tuebingen, Germany. All rights reserved.
 **
 ** yFiles demo files exhibit yFiles for HTML functionalities. Any redistribution
 ** of demo files in source code or binary form, with or without
 ** modification, is not permitted.
 **
 ** Owners of a valid software license for a yFiles for HTML version that this
 ** demo is shipped with are allowed to use the demo source code as basis
 ** for their own yFiles for HTML powered applications. Use of such programs is
 ** governed by the rights and conditions as set out in the yFiles for HTML
 ** license agreement.
 **
 ** THIS SOFTWARE IS PROVIDED ''AS IS'' AND ANY EXPRESS OR IMPLIED
 ** WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 ** MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN
 ** NO EVENT SHALL yWorks BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
 ** TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 ** PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
 ** LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 ** NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 **
 ***************************************************************************/

type LegendTextStyle = Partial<{
    textFill: string;
    backgroundFill: string;
    font: string;
}>;
type LegendItemStyle = Partial<{
    fill: string;
    stroke: string;
}>;
type TimelineStyle = Partial<{
    timeframe: LegendItemStyle;
    bars: LegendItemStyle;
    inTimeframeBars: LegendItemStyle;
    barHover: LegendItemStyle;
    barSelect: LegendItemStyle;
    sectionSelect: LegendItemStyle;
    legend: Partial<{
        even: LegendTextStyle;
        odd: LegendTextStyle;
    }>;
}>;

type TimelineTooltipProps = {
    timeLabel: string;
    entries: number | null;
};
declare function TimelineTooltip({ entries, timeLabel }: TimelineTooltipProps): react_jsx_runtime.JSX.Element;

/**
 * A time entry specifies the time range or points in time when the corresponding data item should be visible.
 */
type TimeRange = {
    start?: number;
    end?: number;
} | {
    start?: number;
    end?: number;
}[] | number[];
type DataItemFilter<TDataItem> = (item: TDataItem) => boolean;

type TimelinePlayButtonProps = {
    state: 'playing' | 'idle';
    toggle: () => void;
};
declare function TimelinePlayButton({ state, toggle }: TimelinePlayButtonProps): react_jsx_runtime.JSX.Element;

interface TimelineProps<TDataItem> {
    /** Data items for populating the timeline */
    dataItems: TDataItem[];
    /** Time range getter */
    getTimeRange: (item: TDataItem) => TimeRange;
    /** Callback for receiving a filter function for items in the current timeframe. */
    onFilterChange?: (filter: DataItemFilter<TDataItem>) => void;
    /** Callback for receiving the list of items that match the currently hovered timeline bar. */
    onBarHover?: (items: TDataItem[]) => void;
    /** Callback for receiving the list of items that match the currently selected timeline bar. */
    onBarSelected?: (items: TDataItem[]) => void;
    TooltipComponent?: typeof TimelineTooltip | null;
    PlayButtonComponent?: typeof TimelinePlayButton | null;
    style?: TimelineStyle;
}
declare function Timeline<TDataItem>({ dataItems, getTimeRange, onFilterChange, onBarHover, onBarSelected, TooltipComponent, PlayButtonComponent, style }: TimelineProps<TDataItem>): JSX.Element;

/**
 * The props for rendering the popup.
 */
interface RenderPopupProps<TDataItem> {
    /**
     * The data item for which the popup was opened.
     */
    item: TDataItem;
    /**
     * A function that closes the popup.
     */
    onClose: Function;
}
/**
 * The props provided by the popup.
 */
interface PopupProps<TDataItem> {
    /**
     * The position of the popup.
     */
    position?: 'right' | 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left' | 'left';
    /**
     * An optional custom that renders a custom popup.
     */
    renderPopup?: ComponentType<RenderPopupProps<TDataItem>>;
    /**
     * Determines after which input event the pop-up appears:
     * single-click or double-click on the left mouse button, as well as
     * single-tap or double-tap on a touch device
     *
     * The default is single-click.
     */
    clickMode?: 'single' | 'double';
    /**
     * Optional global props that get passed to the popup component
     */
    extraProps?: Record<string, any>;
}
/**
 * The Popup component adds a popup to the graph items, i.e., items and connections. It is designed to be used inside a
 * parent component that displays the graph.
 */
declare function Popup<TDataItem>({ renderPopup, position, clickMode, extraProps }: PopupProps<TDataItem> & PropsWithChildren): react_jsx_runtime.JSX.Element;

declare function useReactNodeRendering<TDataItem>(): {
    nodeInfos: NodeRenderInfo<TDataItem>[];
    setNodeInfos: Dispatch<SetStateAction<NodeRenderInfo<TDataItem>[]>>;
};
type SizedDataItem = {
    width?: number;
    height?: number;
};
type NodeMeasurementProps<TDataItem extends SizedDataItem> = {
    nodeData: TDataItem[];
    nodeSize?: {
        width: number;
        height: number;
    };
    maxSize?: {
        width: number;
        height: number;
    };
    onMeasured?: () => void;
    measureTrigger?: boolean;
};
type RenderNodesProps<TDataItem> = {
    nodeInfos: NodeRenderInfo<TDataItem>[];
    onRendered?: () => void;
    extraProps?: Record<string, any>;
};
type ReactNodeRenderingProps<TDataItem extends SizedDataItem> = NodeMeasurementProps<TDataItem> & RenderNodesProps<TDataItem>;
declare function ReactNodeRendering<TDataItem extends SizedDataItem>({ nodeData, nodeInfos, nodeSize, maxSize, onMeasured, onRendered, extraProps, measureTrigger }: ReactNodeRenderingProps<TDataItem>): react_jsx_runtime.JSX.Element;

declare function printDiagram(printSettings: PrintSettings, graphComponent: GraphComponent): Promise<void>;
/**
 * Settings to configure how the graph is printed.
 */
type PrintSettings = {
    /**
     * Gets or sets the scale for the printing.
     *
     * A scale of 1 preserves the original size, a scale of 0.5 results in a target image with half the original size and so on.
     * This value has to be strictly greater than 0 and finite. Its default value is 1.0
     */
    scale?: number;
    /**
     * Gets or sets the bounds of the content to print in world coordinates.
     * The default behavior is to use bounds to encompass the whole diagram.
     */
    bounds?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    /**
     * Gets or sets the margins for the printed image.
     *
     * The margins are added to the content.
     * This means that an image with non-zero margins is larger than the printed area even if the scale is 1.0.
     * The margins are not scaled. They are interpreted to be in units (pixels for bitmaps) for the resulting image.
     * The default is an empty margin.
     */
    margins?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    /**
     * Gets or sets to print the diagram in multiple pages if the content does not fit on a single page.
     * The default is false.
     */
    tiledPrinting?: boolean;
    /**
     * Gets or sets the width of a single tile (page) in pt (1/72 inch), if {@link PrintSettings.tiledPrinting} is enabled.
     * The default width is 595.
     */
    tileWidth?: number;
    /**
     * Gets or sets the height of a single tile (page) in pt (1/72 inch), if {@link PrintSettings.tiledPrinting} is enabled.
     * The default height is 842.
     */
    tileHeight?: number;
};

/**
 * Exports the content of the graphComponent as an SVG Element.
 */
declare function exportSvgElement(exportSettings: ExportSettings, graphComponent: GraphComponent): Promise<Element>;
/**
 * Exports the content of the graphComponent as an SVG string.
 * @throws Exception if the diagram cannot be exported.
 * The exception may occur when the diagram contains images from cross-origin sources.
 * In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
 */
declare function exportSvg(exportSettings: ExportSettings, graphComponent: GraphComponent, onRendered: (cb: () => void) => void): Promise<string>;
/**
 * Settings to configure how the graph is exported.
 */
interface ExportSettings {
    /**
     * Gets or sets the scale for the export.
     *
     * A scale of 1 preserves the original size, a scale of 0.5 results in a target image with half the original size and so on.
     * This value has to be strictly greater than 0 and finite. Its default value is 1.0
     */
    scale?: number;
    /**
     * Gets or sets the bounds of the content to export in world coordinates.
     * The default behavior is to use bounds to encompass the whole diagram.
     */
    bounds?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    /**
     * Gets or sets the zoom property to use during the creation of the visualization.
     *
     * In contrast to the scale property, which works on the output graphics, this property determines what zoom value is
     * to be assumed on the canvas when creating the visual. This can affect the rendering of zoom-dependent visuals,
     * especially level-of-detail rendering.
     *
     * This value has to be strictly greater than 0. Its default value is 1.0
     */
    zoom?: number;
    /**
     * Gets or sets the background color for the exported SVG.
     * CSS color values are supported.
     * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
     */
    background?: string;
    /**
     * Gets or sets the margins for the exported image.
     *
     * The margins are added to the content.
     * This means that an image with non-zero margins is larger than the export area even if the scale is 1.0.
     * The margins are not scaled. They are interpreted to be in units (pixels for bitmaps) for the resulting image.
     * The default is an empty margin.
     */
    margins?: {
        top: number;
        right: number;
        bottom: number;
        left: number;
    };
    /**
     * Gets or sets a value indicating whether all external images should be inlined and encoded as Base64 data URIs.
     * Note that this feature is not applicable when loading images from cross-origin sources.
     * The default is true.
     */
    inlineImages?: boolean;
}
/**
 * Exports and saves the content of the graphComponent in an SVG file.
 * @throws Exception if the diagram cannot be exported.
 * The exception may occur when the diagram contains images from cross-origin sources.
 * In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
 */
declare function exportSvgAndSave(exportSettings: ExportSettings, graphComponent: GraphComponent, onRendered: (cb: () => void) => void, fileName?: string): Promise<void>;
/**
 * Exports the graph using the SVG Export and renders the SVG as a PNG image.
 * @throws Exception if the diagram cannot be exported.
 * The exception may occur when the diagram contains images from cross-origin sources.
 * In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
 */
declare function exportImage(exportSettings: ExportSettings, graphComponent: GraphComponent, onRendered: (cb: () => void) => void): Promise<Element>;
/**
 * Exports the graph using the SVG Export, renders the SVG and saves it as a PNG image.
 * @throws Exception if the diagram cannot be exported.
 * The exception may occur when the diagram contains images from cross-origin sources.
 * In this case, disable {@link ExportSettings.inlineImages} and encode the icons manually to base64.
 */
declare function exportImageAndSave(exportSettings: ExportSettings, graphComponent: GraphComponent, onRendered: (cb: () => void) => void, fileName?: string): Promise<void>;

/**
 * Waits for the Web Worker to ready up and sends the license to it.
 * Returns a promise that resolves to the worker once the worker has sent
 * a 'licensed' message.
 *
 * Every worker should therefore include the following or similar code
 * at the beginning of its message handler:
 *
 * ```tsx
 * if (e.data.license) {
 *   License.value = e.data.license
 *   postMessage('licensed')
 *   return
 * }
 * ```
 *
 */
declare function registerWebWorker(worker: Worker): Promise<Worker>;

declare function checkStylesheetLoaded(root: HTMLElement, name: string): void;

export { type Arrow, ContextMenu, type ContextMenuItem, type ContextMenuItemAction, type ContextMenuItemProvider, type ContextMenuProps, type ControlButton, Controls, type ControlsButtonProvider, type ControlsProps, DefaultControlButtons, type EdgeStyle, type ExportSettings, LicenseError, type LicenseErrorProps, type NodeRenderInfo, Overview, type OverviewProps, Popup, type PopupProps, type Position, type PrintSettings, ReactComponentHtmlGroupNodeStyle, ReactComponentHtmlNodeStyle, ReactNodeRendering, type ReactNodeRenderingProps, type RenderContextMenuProps, type RenderControlsProps, type RenderGroupNodeProps, type RenderNodeProps, type RenderPopupProps, type RenderTooltipProps, type TagProvider, Timeline, type DataItemFilter as TimelineFilter, TimelinePlayButton, type TimelinePlayButtonProps, type TimelineProps, TimelineTooltip, type TimelineTooltipProps, Tooltip, type TooltipProps, checkLicense, checkStylesheetLoaded, convertToPolylineEdgeStyle, defaultTagProvider, exportImage, exportImageAndSave, exportSvg, exportSvgAndSave, exportSvgElement, printDiagram, registerLicense, registerWebWorker, useAddGraphComponent, useGraphComponent, useGraphSearch, useReactNodeRendering, withGraphComponent, withGraphComponentProvider };