@relation-graph/react 3.0.0

package/types/packages/relation-graph-models/types.d.ts

@@ -0,0 +1,903 @@
+import { RelationGraphFinal } from './models/RelationGraphFinal';
+import { RGLinePathCommands } from './utils/line/RGLinePath';
+export declare enum RGInnerConnectTargetType {
+    Node = "node",
+    NodePoint = "NodePoint",
+    HTMLElementId = "HTMLElementId",
+    CanvasPoint = "CanvasPoint",
+    ViewPoint = "ViewPoint"
+}
+export declare enum RGJunctionPoint {
+    border = "border",
+    ltrb = "ltrb",
+    tb = "tb",
+    lr = "lr",
+    left = "left",
+    right = "right",
+    top = "top",
+    bottom = "bottom"
+}
+export type RGConnectTarget4NodePoint = {
+    targetId: string;
+    targetType: string;
+    nodeId?: string;
+    junctionPoint: RGJunctionPoint;
+    width: number;
+    height: number;
+    offsetX: number;
+    offsetY: number;
+    offsetPercentX: number;
+    offsetPercentY: number;
+    targetData: Record<string, any>;
+};
+export type RGResizeHandlePosition = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'bl' | 'br';
+export type RGWidgetPosition = 'top' | 'right' | 'bottom' | 'left' | 'tl' | 'tr' | 'bl' | 'br';
+export type RGPositionPoint = 'left' | 'top' | 'right' | 'bottom';
+export type RGLineEditPoint = 'start' | 'end';
+export declare enum RGNodeShape {
+    circle = 0,
+    rect = 1
+}
+export declare enum RGLineShape {
+    StandardStraight = 1,
+    StandardCurve = 6,
+    Curve2 = 2,
+    Curve3 = 3,
+    Curve5 = 5,
+    Curve7 = 7,
+    Curve8 = 8,
+    SimpleOrthogonal = 4,
+    StandardOrthogonal = 44,
+    HardOrthogonal = 49
+}
+export type RGEventTargetType = 'canvas' | 'node' | 'line';
+export declare enum RGDirection {
+    Left = "left",
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom"
+}
+export type RGUserEvent = MouseEvent | TouchEvent;
+export interface JsonNode {
+    id: string;
+    text?: string;
+    type?: string;
+    targetType?: string;
+    expanded?: boolean;
+    selected?: boolean;
+    disablePointEvent?: boolean;
+    disableDrag?: boolean;
+    className?: string;
+    nodeShape?: RGNodeShape;
+    borderColor?: string;
+    borderWidth?: number;
+    borderRadius?: number;
+    fontColor?: string;
+    fontSize?: number;
+    color?: string;
+    opacity?: number;
+    fixed?: boolean;
+    width?: number;
+    height?: number;
+    x?: number;
+    y?: number;
+    expandHolderPosition?: string;
+    data?: Record<string, any>;
+    force_weight?: number;
+    zIndex?: number;
+    /**
+     * Will be ignored when importing data
+     */
+    children?: JsonNode[];
+    hidden?: boolean;
+    alwaysRender?: boolean;
+}
+export interface JsonLine {
+    id?: string;
+    from: string;
+    to: string;
+    text?: string;
+    selected?: boolean;
+    type?: string;
+    isFakeLine?: boolean;
+    fromType?: string;
+    toType?: string;
+    color?: string;
+    fontColor?: string;
+    fontSize?: number;
+    lineWidth?: number;
+    opacity?: number;
+    lineShape?: RGLineShape;
+    className?: string;
+    showStartArrow?: boolean;
+    showEndArrow?: boolean;
+    startMarkerId?: string;
+    endMarkerId?: string;
+    useTextPath?: boolean;
+    onPathStartOffset?: string;
+    textAnchor?: string;
+    reverseText?: boolean;
+    lineDirection?: string;
+    polyLineStartDistance?: number;
+    disablePointEvent?: boolean;
+    data?: Record<string, any>;
+    cssVars?: Record<string, any>;
+    force_elastic?: number;
+    textOffset_x?: number;
+    textOffset_y?: number;
+    animation?: number;
+    dashType?: number;
+    lineRadius?: number;
+    forDisplayOnly?: boolean;
+    junctionOffset?: number;
+    fromJunctionPoint?: RGJunctionPoint;
+    toJunctionPoint?: RGJunctionPoint;
+    fromJuctionPointOffsetX?: number;
+    fromJuctionPointOffsetY?: number;
+    toJuctionPointOffsetX?: number;
+    toJuctionPointOffsetY?: number;
+    hidden?: boolean;
+}
+export interface RGFakeLine extends JsonLine {
+    id: string;
+    fromType: string;
+    toType: string;
+}
+export interface RGNode extends JsonNode {
+    x: number;
+    y: number;
+    type: string;
+    nodeShape: RGNodeShape;
+    zIndex?: number;
+    lot: {
+        childs: RGNode[];
+        parent?: RGNode | undefined;
+        eached?: boolean;
+        strength?: number;
+        subling?: {
+            level: number;
+            all_size: number;
+            all_strength: number;
+        };
+        level?: number;
+        index_of_parent?: number;
+        strength_plus?: number;
+        index_of_level?: number;
+        childs_size?: number;
+        index_of_p_childs?: number;
+        level_index?: number;
+        strengthWithChilds?: number;
+        strengthWithChilds_from?: number;
+        placed?: boolean;
+        notLeafNode?: boolean;
+        x?: number;
+        y?: number;
+        to_x?: number;
+        to_y?: number;
+        from_x?: number;
+        from_y?: number;
+    };
+    dragging?: boolean;
+    el: {
+        offsetWidth: number;
+        offsetHeight: number;
+    };
+    Fx: number;
+    Fy: number;
+    rgShouldRender?: boolean;
+    rgCalcedVisible?: boolean;
+}
+export interface RGLine extends JsonLine {
+    reverseText?: boolean;
+    isReverse?: boolean;
+}
+export interface RGRectTarget {
+    x: number;
+    y: number;
+    el: {
+        offsetWidth: number;
+        offsetHeight: number;
+    };
+}
+export interface RGLineTarget extends RGRectTarget {
+    text?: string;
+    nodeShape: RGNodeShape;
+    targetType: RGInnerConnectTargetType | string;
+    id?: string;
+    targetData?: Record<string, any>;
+    rotate?: number;
+    hidden?: boolean;
+}
+export type RGLink = {
+    seeks_id: string;
+    fromNode: RGNode;
+    toNode: RGNode;
+    currentLineIndex: number;
+    totalLinesBetweenNodes: number;
+    forDisplayOnly: boolean;
+    rgShouldRender?: boolean;
+    rgCalcedVisible?: boolean;
+    line: RGLine;
+};
+export type RGElementLine = RGLink;
+export type RGJsonData = {
+    rootId?: string;
+    nodes: JsonNode[];
+    lines: JsonLine[];
+    [key: string]: any;
+    fakeLines?: RGFakeLine[];
+};
+export type RGGraphData = {
+    rootNode?: RGNode;
+    nodes: RGNode[];
+    normalLines: RGLine[];
+    elementLines: RGElementLine[];
+    fakeLines: RGFakeLine[];
+};
+export type RGCoordinate = {
+    x: number;
+    y: number;
+};
+export type RGPosition = RGCoordinate;
+export type RGDraggingCallback = (offsetX: number, offsetY: number, startElPosition: {
+    x: number;
+    y: number;
+}, startEventPosition: {
+    x: number;
+    y: number;
+}, event: MouseEvent | TouchEvent) => void;
+export type RGDragedCallback = (buffX: number, buffY: number, event: MouseEvent | TouchEvent) => void;
+export type RGLayoutOptions4Alignable = {
+    alignItemsX: 'start' | 'center' | 'end';
+    alignItemsY: 'start' | 'center' | 'end';
+};
+export type RGLayoutOptionsCore = RGLayoutOptions4Alignable & {
+    layoutName: string;
+    label?: string;
+    layoutDirection?: string;
+    centerOffset_x?: number;
+    centerOffset_y?: number;
+    fixedRootNode?: boolean;
+    autoLayouting?: boolean;
+    supportAutoLayout?: boolean;
+};
+export type RGForceLayoutOptions = RGLayoutOptionsCore & {
+    fastStart?: boolean;
+    maxLayoutTimes?: number;
+    byNode?: boolean;
+    byLine?: boolean;
+    force_node_repulsion?: number;
+    force_line_elastic?: number;
+    startAngle?: number;
+};
+export type RGCenterLayoutOptions = RGForceLayoutOptions & {
+    distance_coefficient?: number;
+    levelDistance?: number[];
+};
+export type RGTreeLayoutOptions = RGLayoutOptionsCore & {
+    from?: string;
+    treeNodeGapH?: number;
+    treeNodeGapV?: number;
+    levelGaps?: number[];
+    layoutExpansionDirection?: 'start' | 'center' | 'end';
+    simpleTree?: boolean;
+    ignoreNodeSize?: boolean;
+    alignParentItemsX: 'start' | 'center' | 'end';
+    alignParentItemsY: 'start' | 'center' | 'end';
+};
+export type RGLayoutOptions = RGLayoutOptionsCore & RGForceLayoutOptions & RGCenterLayoutOptions & RGTreeLayoutOptions;
+export interface RGLayouter {
+    isMainLayouer: boolean;
+    requireLinks: boolean;
+    allNodes: RGNode[];
+    rootNode?: RGNode;
+    layoutOptions: RGLayoutOptions;
+    setLinks: (links: RGLink[]) => void;
+    placeNodes: (allNodes: RGNode[], rootNode: RGNode) => void;
+    doLayout: (allNodes: RGNode[], rootNode: RGNode) => void;
+    autoLayout?: (forceLayout?: boolean, viewUpdate?: (() => void) | false) => void;
+    stop?: () => void;
+}
+export type RGOptionsInited = {
+    instanceId: string;
+    debug: boolean;
+    showDebugPanel: boolean;
+    showToolBar: boolean;
+    backgroundColor: string;
+    downloadImageFileName: string;
+    disableWheelEvent: boolean;
+    wheelEventAction: 'zoom' | 'scroll' | 'none';
+    disableDragNode: boolean;
+    disableDragLine: boolean;
+    selectionMode: boolean;
+    canvasMoveMode: boolean;
+    disableNodePointEvent: boolean;
+    disableLinePointEvent: boolean;
+    toolBarDirection: string;
+    toolBarPositionH: string;
+    toolBarPositionV: string;
+    defaultExpandHolderPosition: 'hide' | 'left' | 'top' | 'right' | 'bottom';
+    defaultExpandHolderColor?: string;
+    defaultNodeColor: string;
+    checkedItemBackgroundColor?: string;
+    defaultLineTextOffset_x?: number;
+    defaultLineTextOffset_y?: number;
+    defaultLineColor: string;
+    defaultLineShape?: RGLineShape;
+    defaultJunctionPoint?: RGJunctionPoint;
+    disableDragCanvas: boolean;
+    placeSingleNode: boolean;
+    placeOtherNodes: boolean;
+    lineUseTextPath: boolean;
+    lineTextMaxLength: number;
+    multiLineDistance: number;
+    checkedNodeId: string;
+    checkedLineId: string;
+    checkedLinkId: string;
+    performanceMode: boolean;
+    data: any;
+    viewHeight: string;
+    defaultLineMarker: {
+        markerWidth: number;
+        markerHeight: number;
+        refX: number;
+        refY: number;
+        viewBox: string;
+        data: string;
+    };
+    layout: RGLayoutOptions;
+    graphOffset_x: number;
+    graphOffset_y: number;
+    canvasZoom: number;
+    mouseWheelSpeed: number;
+    minCanvasZoom: number;
+    maxCanvasZoom: number;
+    placeOtherGroup: boolean;
+    defaultPolyLineRadius: number;
+    reLayoutWhenExpandedOrCollapsed: boolean;
+    useHorizontalView: boolean;
+    creatingSelection: boolean;
+    selectionView: any;
+    creatingNodePlot: boolean;
+    showTemplateNode: boolean;
+    newNodeTemplate: any;
+    creatingLinePlot: boolean;
+    newLineTemplate: RGLine;
+    newLinkTemplate: any;
+};
+export type RGOptions = Partial<RGOptionsInited>;
+export type RGLineColorItem = {
+    id: string;
+    color: string;
+};
+export type RGGraphReactiveData = {
+    options: RGOptions | undefined;
+};
+export type RGSelectionView = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export interface RGListeners {
+    onReady?: (graphInstance: RelationGraphInstance) => void;
+    /**
+     * 当节点被点击时触发
+     */
+    onNodeClick?: (node: RGNode, e: RGUserEvent) => boolean | void | Promise<boolean | void>;
+    /**
+     * 当节点被展开时触发
+     */
+    onNodeExpand?: (node: RGNode, e: RGUserEvent) => boolean | void | Promise<boolean | void>;
+    /**
+     * 当节点被折叠时触发
+     */
+    onNodeCollapse?: (node: RGNode, e: RGUserEvent) => boolean | void | Promise<boolean | void>;
+    /**
+     * 当连线被点击时触发, line是连线，link是line对应的RGLink对象
+     */
+    onLineClick?: (line: RGLine, link: RGLink, e: RGUserEvent) => boolean | void | Promise<boolean | void>;
+    /**
+     * 当节点被拖拽开始时触发
+     */
+    onNodeDragStart?: (node: RGNode, e: RGUserEvent) => void;
+    /**
+     * 当节点拖拽结束时触发
+     * @param node 被拖拽的节点
+     * @param e 触发事件
+     * @param x_buff 拖拽结束时的x偏移量，可能为undefined
+     * @param y_buff 拖拽结束时的y偏移量，可能为undefined
+     */
+    onNodeDragEnd?: (node: RGNode, e: RGUserEvent, x_buff: number, y_buff: number) => void;
+    /**
+     * 当节点正在被拖拽时触发
+     */
+    onNodeDragging?: (node: RGNode, newX: number, newY: number, buffX: number, buffY: number, e: RGUserEvent) => void | RGPosition | undefined;
+    /**
+     * 当画布被拖拽结束时触发
+     */
+    onCanvasDragEnd?: (e: RGUserEvent) => void;
+    /**
+     * 当画布正在被拖拽时触发
+     * @param newX 画布新的偏移量X
+     * @param newY 画布新的偏移量Y
+     * @param buffX 画布拖拽的X偏移量
+     * @param buffY 画布拖拽的Y偏移量
+     */
+    onCanvasDragging?: (newX: number, newY: number, buffX: number, buffY: number) => void | RGPosition | undefined;
+    /**
+     * 当画布被右键点击时触发
+     * @param e 触发事件
+     * @param objectType 对象类型，可能是'canvas'、'node'、'line'
+     * @param object 被点击的对象，可能是undefined、RGNode、RGLine
+     * @param eventPositionOnCanvas 事件在画布上的位置
+     * @param eventPositionOnView 事件在视图上的位置
+     */
+    onContextmenu?: (e: RGUserEvent, objectType: RGEventTargetType, object: RGNode | RGLine | undefined, eventPositionOnCanvas: RGCoordinate, eventPositionOnView: RGCoordinate) => void;
+    /**
+     *  当全屏状态改变时触发
+     */
+    onFullscreen?: (newValue: boolean, defaultFullscreen: () => Promise<void>) => void;
+    /**
+     * 当画布被点击时触发
+     */
+    onCanvasClick?: (e: RGUserEvent) => void;
+    /**
+     * 当画布选择结束时触发
+     * @param selectionView 画布选择的视图信息，包含x、y、width、height
+     * @param e 触发事件
+     */
+    onCanvasSelectionEnd?: (selectionView: RGSelectionView, e: RGUserEvent) => void;
+    /**
+     * 当缩放开始前触发
+     */
+    beforeZoomStart?: () => void | false;
+    /**
+     * 当缩放结束时触发
+     */
+    onZoomEnd?: () => void;
+    /**
+     * 当下载图像时触发
+     */
+    onImageDownload?: (dom: HTMLElement, format: string) => boolean | void;
+    /**
+     * 当保存图像为文件时触发
+     */
+    onImageSaveAsFile?: (canvas: HTMLCanvasElement, format: string, fileName: string) => boolean | void;
+    /**
+     * 当视图大小改变时触发
+     */
+    onViewResize?: () => void;
+    /**
+     * 在一个或者多个节点（通过RGEditingController）开始被调整大小时触发
+     */
+    onResizeStart?: (nodes: RGNode[], e: RGUserEvent) => void;
+    /**
+     * 调整节点大小之前触发，可以返回false来阻止调整大小
+     * @param node 被调整大小的节点
+     * @param newX 即将被调整到的新的X位置
+     * @param newY 即将被调整到的新的Y位置
+     * @param newW 即将被调整到的新的宽度
+     * @param newH 即将被调整到的新的高度
+     */
+    beforeNodeResize?: (node: RGNode, newX: number, newY: number, newW: number, newH: number) => void | false;
+    /**
+     * 在一个或者多个节点（通过RGEditingController）调整大小完成时触发
+     * @param nodes 被调整大小的节点数组
+     * @param buffX 调整大小结束时的X偏移量
+     * @param buffY 调整大小结束时的Y偏移量
+     * @param e 触发事件
+     */
+    onResizeEnd?: (nodes: RGNode[], buffX: number, buffY: number, e: RGUserEvent) => void;
+    /**
+     * 当线段的控制点被放置时触发
+     * @param fromNode 起始节点
+     * @param toNode 目标节点
+     * @param lineTemplate 线段模板
+     */
+    onLineVertexDropped?: (lineInfo: {
+        newLineTemplate: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }) => void;
+    /**
+     * 在创建线段之前触发，可以返回false来阻止创建线段
+     * @param fromNode 起始节点
+     * @param toNode 目标节点
+     * @param lineTemplate 线段模板
+     */
+    beforeCreateLine?: (lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }) => void | false;
+    /**
+     * 当一条新线段被创建时触发
+     * @param fromNode 起始节点
+     * @param toNode 目标节点
+     * @param lineTemplate 线段模板
+     */
+    onLineBeCreated?: (lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }) => void;
+    /**
+     * 当有新的节点被添加到图中之前时触发
+     * @param nodes 即将被添加的节点 jsonNode数组
+     */
+    beforeAddNodes?: (nodes: JsonNode[]) => void;
+    /**
+     * 当有新的线条被添加到图中之前时触发
+     * @param lines 即将被添加的线条哦 jsonLine数组
+     */
+    beforeAddLines?: (lines: JsonLine[]) => void;
+    /**
+     * 当键盘在图谱区域内被按下时触发
+     * @param e
+     */
+    onKeyboardDown?: (e: KeyboardEvent) => void;
+    /**
+     * 当键盘在图谱区域内被按起时触发
+     * @param e
+     */
+    onKeyboardUp?: (e: KeyboardEvent) => void;
+    /**
+     * onCanvasDragStart
+     * @param canvasMoveStartPosition
+     * @param eventClientStartPosition
+     * @param e
+     */
+    onCanvasDragStart?: (canvasMoveStartPosition: RGPosition, eventClientStartPosition: RGPosition, e: RGUserEvent) => void;
+    onForceLayoutFinish?: () => void;
+    /**
+     * 在执行画布移动滚动之前触发，返回 true表示阻止继续完成滚动
+     * @param e
+     * @param buffX
+     * @param buffY
+     * @return true = Abort Scroll
+     */
+    beforeScrollStart?: (buffX: number, buffY: number, e: Event) => true | undefined | void;
+}
+export type RGEventEmits = {
+    (e: 'onReady', graphInstance: RelationGraphInstance): void;
+    /** 警告：父组件的 boolean 返回值将丢失，无法阻止默认行为 */
+    (e: 'onNodeClick', node: RGNode, event: RGUserEvent): void;
+    /** 警告：父组件的 boolean 返回值将丢失，无法阻止默认行为 */
+    (e: 'onNodeExpand', node: RGNode, event: RGUserEvent): void;
+    /** 警告：父组件的 boolean 返回值将丢失，无法阻止默认行为 */
+    (e: 'onNodeCollapse', node: RGNode, event: RGUserEvent): void;
+    /** 警告：父组件的 boolean 返回值将丢失，无法阻止默认行为 */
+    (e: 'onLineClick', line: RGLine, link: RGLink, event: RGUserEvent): void;
+    (e: 'onNodeDragStart', node: RGNode, event: RGUserEvent): void;
+    (e: 'onNodeDragEnd', node: RGNode, event: RGUserEvent, x_buff: number, y_buff: number): void;
+    /** 警告：父组件返回的 RGPosition 值将丢失 */
+    (e: 'onNodeDragging', node: RGNode, newX: number, newY: number, buffX: number, buffY: number, event: RGUserEvent): void;
+    (e: 'onCanvasDragEnd', event: RGUserEvent): void;
+    /** 警告：父组件返回的 RGPosition 值将丢失 */
+    (e: 'onCanvasDragging', newX: number, newY: number, buffX: number, buffY: number): void;
+    (e: 'onContextmenu', event: RGUserEvent, objectType: RGEventTargetType, object: RGNode | RGLine | undefined, eventPositionOnCanvas: RGCoordinate, eventPositionOnView: RGCoordinate): void;
+    (e: 'onFullscreen', newValue: boolean, defaultFullscreen: () => Promise<void>): void;
+    (e: 'onCanvasClick', event: RGUserEvent): void;
+    (e: 'onCanvasSelectionEnd', selectionView: RGSelectionView, event: RGUserEvent): void;
+    /** 警告：父组件返回的 false 值将丢失，无法阻止缩放 */
+    (e: 'beforeZoomStart'): void;
+    (e: 'onZoomEnd'): void;
+    /** 警告：父组件的 boolean 返回值将丢失，无法阻止下载 */
+    (e: 'onImageDownload', dom: HTMLElement, format: string): void;
+    /** 警告：父组件的 boolean 返回值将丢失，无法阻止保存 */
+    (e: 'onImageSaveAsFile', canvas: HTMLCanvasElement, format: string, fileName: string): void;
+    (e: 'onViewResize'): void;
+    (e: 'onResizeStart', nodes: RGNode[], event: RGUserEvent): void;
+    /** 警告：父组件返回的 false 值将丢失，无法阻止调整大小 */
+    (e: 'beforeNodeResize', node: RGNode, newX: number, newY: number, newW: number, newH: number): void;
+    (e: 'onResizeEnd', nodes: RGNode[], buffX: number, buffY: number, event: RGUserEvent): void;
+    (e: 'onLineVertexDropped', lineInfo: {
+        newLineTemplate: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }): void;
+    /** 警告：父组件返回的 false 值将丢失，无法阻止创建连线 */
+    (e: 'beforeCreateLine', lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }): void;
+    (e: 'onLineBeCreated', lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }): void;
+    (e: 'beforeAddNodes', nodes: JsonNode[]): void;
+    (e: 'beforeAddLines', lines: JsonLine[]): void;
+    (e: 'onKeyboardDown', event: KeyboardEvent): void;
+    (e: 'onKeyboardUp', event: KeyboardEvent): void;
+    (e: 'onCanvasDragStart', canvasMoveStartPosition: RGPosition, eventClientStartPosition: RGPosition, event: RGUserEvent): void;
+    (e: 'onForceLayoutFinish'): void;
+    (e: 'beforeScrollStart', buffX: number, buffY: number, event: Event): true | undefined | void;
+};
+export declare enum RGEventNames {
+    onReady = "onReady",
+    onNodeClick = "onNodeClick",
+    onNodeExpand = "onNodeExpand",
+    onNodeCollapse = "onNodeCollapse",
+    onLineClick = "onLineClick",
+    onImageDownload = "onImageDownload",
+    onImageSaveAsFile = "onImageSaveAsFile",
+    onNodeDragStart = "onNodeDragStart",
+    onNodeDragEnd = "onNodeDragEnd",
+    onNodeDragging = "onNodeDragging",
+    onCanvasDragEnd = "onCanvasDragEnd",
+    onCanvasDragging = "onCanvasDragging",
+    onContextmenu = "onContextmenu",
+    onFullscreen = "onFullscreen",
+    onCanvasClick = "onCanvasClick",
+    onCanvasSelectionEnd = "onCanvasSelectionEnd",
+    beforeZoomStart = "beforeZoomStart",
+    onZoomEnd = "onZoomEnd",
+    onViewResize = "onViewResize",
+    onResizeStart = "onResizeStart",
+    beforeNodeResize = "beforeNodeResize",
+    onResizeEnd = "onResizeEnd",
+    onLineVertexDropped = "onLineVertexDropped",
+    beforeCreateLine = "beforeCreateLine",
+    onLineBeCreated = "onLineBeCreated",
+    beforeAddNodes = "beforeAddNodes",
+    beforeAddLines = "beforeAddLines",
+    onKeyboardDown = "onKeyboardDown",
+    onKeyboardUp = "onKeyboardUp",
+    onCanvasDragStart = "onCanvasDragStart",
+    onForceLayoutFinish = "onForceLayoutFinish",
+    beforeScrollStart = "beforeScrollStart"
+}
+export type RGEventHandler = (eventName: RGEventNames, ...args: any[]) => void | any;
+export type RGEventEmitHook = (eventName: RGEventNames, ...args: any[]) => void | any;
+export type RGCtrlPointForLine44 = {
+    pIndex: number;
+    optionName: string;
+    direction: 'v' | 'h';
+    x: number;
+    y: number;
+    startDirection: RGDirection;
+    endDirection: RGDirection;
+    hide?: boolean;
+};
+export type RGOptionsFull = RGOptionsInited & {
+    snapshotting: boolean;
+    graphLoading: boolean;
+    enableNodeXYAnimation: boolean;
+    enableCanvasTransformAnimation: boolean;
+    graphLoadingText: string;
+    instanceDestroyed: boolean;
+    editingLineController: {
+        show: boolean;
+        link: RGLink | null;
+        line: RGLine | null;
+        startPoint: RGPosition;
+        endPoint: RGPosition;
+        text: {
+            show: boolean;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        ctrlPoints: RGPosition[];
+        selectedLines: string[];
+        line44Splits: RGCtrlPointForLine44[];
+        line49Points: RGPosition[];
+        ctrlPoint1: RGPosition;
+        ctrlPoint2: RGPosition;
+        toolbar: RGPosition;
+    };
+    editingController: {
+        show: boolean;
+        nodes: RGNode[];
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    nodeConnectController: {
+        show: boolean;
+        node: RGNode;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    showReferenceLine: boolean;
+    referenceLineAdsorption: boolean;
+    editingReferenceLine: {
+        show: boolean;
+        directionV: boolean;
+        directionH: boolean;
+        v_x: number;
+        v_y: number;
+        v_height: number;
+        h_x: number;
+        h_y: number;
+        h_width: number;
+    };
+    showMiniView: boolean;
+    miniViewVisibleHandle: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        emptyContent: boolean;
+    };
+    instanceId: string;
+    viewSize: {
+        width: number;
+        height: number;
+    };
+    viewELSize: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    };
+    fullscreen: boolean;
+    canvasSize: {
+        width: number;
+        height: number;
+    };
+    canvasOffset: {
+        x: number;
+        y: number;
+        zoom_buff_x: number;
+        zoom_buff_y: number;
+    };
+    showEasyView?: boolean;
+    canvasOpacity?: number;
+};
+export type RGRefreshCallback = (graphInstance: any) => void;
+export type RelationGraphInstance = RelationGraphFinal;
+export interface RelationGraphExpose {
+    getInstance(): RelationGraphInstance;
+}
+export interface RGNodeSlotProps {
+    node: RGNode;
+    graphInstance: RelationGraphInstance;
+}
+export interface RGLinePeelProps {
+    line: RGLine | RGFakeLine;
+}
+export interface RGLineSlotProps {
+    lineConfig: RGGenerateLineConfig;
+}
+export interface RGLinePathProps {
+    lineConfig: RGGenerateLineConfig;
+    linePathInfo: RGLinePathInfo;
+}
+export interface RGLineTextProps {
+    lineConfig: RGGenerateLineConfig;
+    linePathInfo: RGLinePathInfo;
+}
+export type RelationGraphProps = RGListeners & {
+    options: RGOptions;
+    relationGraphCore?: RelationGraphFinal;
+};
+export interface RGToolBarProps {
+    direction?: 'v' | 'h' | string;
+    positionH?: 'left' | 'center' | 'right' | string;
+    positionV?: 'top' | 'center' | 'bottom' | string;
+}
+export interface RGMiniViewProps {
+    position?: RGWidgetPosition;
+    width?: string;
+    height?: string;
+}
+export interface RGWidgetProps {
+    position?: RGWidgetPosition;
+}
+export interface RGEditingLineControllerProps {
+    textEditable?: boolean;
+    moveLineVertexStart?: (type: RGLineEditPoint, line: RGLine) => void;
+    moveLineVertexEnd?: RGLineVertexBeDroppedEventHandler;
+    onLineTextDragEnd?: (line: RGLine) => void;
+    onLineTextChanged?: (line: RGLine) => void;
+}
+export type RGLineConnectEventHandler = (fromNode: RGNode | RGLineTarget, toNode: RGNode | RGLineTarget | RGPosition, newLineJson?: JsonLine) => void;
+export type RGLineVertexBeDroppedEventHandler = (fromNode: RGNode | RGLineTarget, toNode: RGNode | RGLineTarget | RGPosition, newLineJson?: JsonLine) => void;
+export type JsonNodeLike = Partial<JsonNode>;
+export type JsonLineLike = Partial<JsonLine>;
+export type JsonNodeTemplate = JsonNodeLike;
+export type JsonLineTemplate = JsonLineLike;
+export type CreatingLinePlotOptions = {
+    onCreateLine: RGLineConnectEventHandler | undefined;
+    template?: JsonLineLike;
+    fromNode?: RGLineTarget;
+};
+export type CreatingNodePlotOptions = {
+    templateText?: string;
+    templateClassName?: string;
+    templateNode?: JsonNodeLike;
+    templateMove?: (x: number, y: number) => void;
+    onCreateNode: (x: number, y: number, nodeTemplate?: JsonNodeLike) => void;
+};
+export interface RGConnectSourceProps {
+    fromNode?: RGNode;
+    lineTemplate: JsonLineLike;
+    onConnectStart?: (fromNode?: RGNode, newLineTemplate?: JsonLineLike, event?: RGUserEvent) => void;
+    onConnectEnd?: RGLineConnectEventHandler;
+    className?: string;
+    style?: Record<string, string | number | undefined>;
+}
+export interface RGConnectTargetProps {
+    junctionPoint: RGJunctionPoint;
+    targetId: string;
+    targetType?: string;
+    targetData?: Record<string, any>;
+    onLineVertexBeDropped?: RGLineVertexBeDroppedEventHandler;
+    lineTemplate?: JsonLineLike;
+    disableDrop?: boolean;
+    disableDrag?: boolean;
+    onDragConnectStart?: (newLineTemplate?: JsonLineLike, event?: RGUserEvent) => void;
+    onDragConnectEnd?: RGLineConnectEventHandler;
+    className?: string;
+    style?: Record<string, string | number | undefined>;
+}
+export interface RGWatermarkProps {
+    forImage?: boolean;
+    forDisplay?: boolean;
+    position?: RGWidgetPosition;
+    width?: string;
+    height?: string;
+}
+export interface RGBackgroundProps {
+    forImage?: boolean;
+    forDisplay?: boolean;
+}
+export type RGLineTextPosition = {
+    x: number;
+    y: number;
+    rotate: number;
+};
+export type RGGenerateLineConfig = {
+    line: RGLine | RGFakeLine;
+    from?: RGLineTarget;
+    to?: RGLineTarget;
+    totalLinesBetweenNodes?: number;
+    currentLineIndex?: number;
+    defaultOptions?: any;
+};
+export type RGFakeLineTargetRender = (nodeType: string, nodeId: string, fakeLine: RGFakeLine) => RGLineTarget;
+export type RGGenerateLinePrams = {
+    line: RGLine;
+    totalLinesBetweenNodes: number;
+    currentLineIndex: number;
+    lineDirection: 'v' | 'h';
+    lineShape: RGLineShape;
+    lineRadius: number;
+    fromJunctionPoint: RGJunctionPoint;
+    toJunctionPoint: RGJunctionPoint;
+    fx: number;
+    fy: number;
+    fcx: number;
+    fcy: number;
+    f_W: number;
+    f_H: number;
+    tx: number;
+    ty: number;
+    tcx: number;
+    tcy: number;
+    t_W: number;
+    t_H: number;
+};
+export type RGLinePathInfo = {
+    pathData: string;
+    pathCommands: RGLinePathCommands;
+    textPosition: RGLineTextPosition;
+    points: RGCoordinate[];
+    startDirection?: RGDirection;
+    endDirection?: RGDirection;
+};
+export type CalcNode = {
+    rgNode: RGNode;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};