@relation-graph/react 3.0.0 → 3.0.1

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

@@ -1,59 +1,210 @@
 import { RelationGraphWith9EasyView } from './RelationGraphWith9EasyView';
-import { JsonLineLike, RGCtrlPointForLine44, RGJunctionPoint, RGLine, RGLineConnectEventHandler, RGLineVertexBeDroppedEventHandler, RGLink, RGNode, RGResizeHandlePosition, RGSelectionView, RGUserEvent } from '../types';
+import { JsonLineLike, RGCtrlPointForLine44, RGJunctionPoint, RGLine, RGLineConnectEventHandler, RGLineVertexBeDroppedEventHandler, RGNode, RGResizeHandlePosition, RGUserEvent } from '../../types';
+/**
+ * Capability extension class related to the editor of the relation-graph component
+ */
 export declare class RelationGraphWith91Editing extends RelationGraphWith9EasyView {
-    setEditingNodes(nodes: RGNode[]): void;
+    constructor();
+    /**
+     * Set the nodes being edited
+     * - Set to null or an empty array to cancel all nodes being edited
+     * - After setting, the position and size of the editing controller (<RGEditingNodeController>) will be automatically updated. If there are no editing nodes, the controller will be hidden.
+     * @param nodes
+     *
+     */
+    setEditingNodes(nodes: RGNode[] | null): void;
+    /**
+     * Add a node to the editing nodes
+     * @param node
+     */
     addEditingNode(node: RGNode): void;
+    /**
+     * Remove a node from the editing nodes
+     * @param node
+     */
     removeEditingNode(node: RGNode): void;
+    /**
+     * Toggle the editing state of a node
+     * @param node
+     */
     toggleEditingNode(node: RGNode): void;
+    /**
+     * Update the view of the editing controller
+     * - This method is automatically called when the editing nodes are set or changed.
+     */
     updateEditingControllerView(): void;
-    protected _getEventPoint(e: RGUserEvent): {
-        x: number;
-        y: number;
-    };
+    /**
+     * @inner
+     * @protected
+     */
+    protected _updateEditingControllerView(): void;
     protected _onResizing: any;
     protected _onResizeEnd: any;
     protected _startPoint: {
         x: number;
         y: number;
     };
+    protected _startEventCanvasXy: {
+        x: number;
+        y: number;
+    };
+    protected _startSizeCanvasXy: {
+        x: number;
+        y: number;
+    };
     protected _startSize: {
         x: number;
         y: number;
         width: number;
         height: number;
+        widthOnCanvas: number;
+        heightOnCanvas: number;
     };
     protected _resizeType: RGResizeHandlePosition;
-    protected nodeStartSizeMap: WeakMap<RGNode, any>;
-    protected resizeMiniLimit: {
+    protected _nodeStartSizeMap: WeakMap<RGNode, any>;
+    protected resizeMinLimit: {
         width: number;
         height: number;
     };
+    /**
+     * User starts resizing the editing controller
+     * @param type User handles the resize handle position: "t" | "r" | "b" | "l" | "tl" | "tr" | "bl" | "br"
+     * @param e
+     */
     onResizeStart(type: RGResizeHandlePosition, e: RGUserEvent): void;
-    onResizing(e: RGUserEvent): void;
+    private _resizeDraggingTimer;
+    private _resizeDraggingEvent;
+    private _resizeDraggingStoped;
+    /**
+     * @inner
+     * @private
+     */
+    private onResizing;
+    /**
+     * @inner
+     * @private
+     */
+    private onResizingRequest;
+    /**
+     * @inner
+     * @private
+     */
     private _applyResizeScale;
-    onResizeEnd(e: RGUserEvent): void;
+    /**
+     * @inner
+     * @private
+     */
+    private onResizeEnd;
+    /**
+     * When dragging a node, update the position of the dragged node and other nodes being edited
+     * - This method is called internally by relation-graph and does not need to be called by the user
+     * @inner
+     * @private
+     */
     protected draggingSelectedNodes(draggedNode: RGNode, newX: number, newY: number, buff_x: number, buff_y: number): void;
-    getNodesInSelectionView(selectionView: RGSelectionView): RGNode[];
-    updateEditingConnectControllerView(): void;
-    setEditingLine(line: RGLine | null, link: RGLink | null): void;
-    updateReferenceLineView(draggedNode: RGNode, newX: number, newY: number, buff_x: number, buff_y: number): {
-        showV: boolean;
-        fixedX: number;
-        showH: boolean;
-        fixedY: number;
-    } | undefined;
+    /**
+     * @inner
+     * @private
+     */
+    protected _updateEditingConnectControllerView(): void;
+    /**
+     * Set the line being edited
+     * - When set to null, the line being edited is canceled
+     * - When the line being edited is not null, the <RGEditingLineController> controller will automatically display and update its position
+     * @param line The line being edited
+     */
+    setEditingLine(line: RGLine | null): void;
+    /**
+     * @inner
+     * @private
+     */
+    private updateReferenceLineView;
+    /**
+     * Hide the editing line view
+     * - Generally used in this scenario: when editing a line, the line editing controller may block the display of the line. When modifying the appearance of the line (such as arrows, etc.), this method can be called to hide the line editing controller view, allowing users to preview the final effect of the line in time.
+     */
     hideEditingLineView(): void;
-    updateEditingLineView(updateLine49Points?: boolean): void;
-    private getStartAndEndPoint;
-    private _currentCreatingLineIsReverse;
+    /**
+     * Update the view of the editing line controller
+     * - This method is automatically called when the editing line is set or changed.
+     */
+    updateEditingLineView(): void;
+    /**
+     * @inner
+     * @private
+     */
+    protected _updateEditingLineView(): void;
+    /**
+     * Start dragging the start or end point of the line to reselect the start or end point of the line
+     * - During the process of changing the start or end point of the line, the line will be removed. When reconnecting, you can get the new line information (the new line information id and other attributes will be retained) through onLineConnectEventHandler(or through the onLineBeCreated event of the <RelationGraph> component). You need to complete the data change through graphInstance.addLines([newJsonLine]) to finally complete the modification of the line endpoint.
+     * @param type Choose to drag the start point or end point of the line, 'start' means dragging the start point, 'end' means dragging the end point
+     * @param $event
+     * @param onLineConnectEventHandler Callback function after line connection is completed, you can get the new line information through the parameters, you need to complete the data change through graphInstance.addLines([newJsonLine])
+     *
+     */
     startMoveLineVertex(type: 'start' | 'end', $event: RGUserEvent, onLineConnectEventHandler: RGLineConnectEventHandler): void;
     private _startCreateLineFromNodeTime;
-    startCreateLineFromNode(fromNode: RGNode | null | undefined, lineTemplate: JsonLineLike, $event: RGUserEvent, onLineConnectEventHandler: RGLineConnectEventHandler): void;
+    /**
+     * Start creating a line from a specified starting point
+     * - The <RGConnectSource> and <RGConnectTarget> components will use this method, and you can call this method yourself to create a line from a specified node
+     * - It is worth noting that: fromNode can be empty. If it is empty, it will try to automatically find the starting point. The logic is:
+     *     - 1. Determine whether lineTemplate.from is empty. If it is not empty, use the node corresponding to lineTemplate.from as the starting point
+     *     - 2. Find the only node from the currently edited nodes as the starting node.
+     *     - 3. If the starting node still cannot be found, an exception is thrown
+     * - When the user completes the connection of the line, the onLineConnectEventHandler callback will be triggered (or through the onLineBeCreated event of the <RelationGraph> component), and you need to add the line data in the callback, through
+     *
+     * @param fromNode
+     * @param useLineTemplate
+     * @param $event
+     * @param onLineConnectEventHandler
+     */
+    startCreateLineFromNode(fromNode: RGNode | null | undefined, useLineTemplate: JsonLineLike, $event: RGUserEvent, onLineConnectEventHandler: RGLineConnectEventHandler): void;
+    /**
+     * When the start or end point of the line is connected to the junction point of a node, this method is called
+     * - This method is called internally by relation-graph and does not need to be called by the user
+     * @param type
+     * @param $event
+     * @param junctionPointOffset
+     * @param onLineVertexBeDropped
+     * @inner
+     */
     onLineVertexBeDropped(type: RGJunctionPoint, $event: RGUserEvent, junctionPointOffset?: {
         x: number;
         y: number;
     }, onLineVertexBeDropped?: RGLineVertexBeDroppedEventHandler): void;
+    /**
+     * Start dragging the line text position
+     * - This method is called internally by relation-graph and does not need to be called by the user
+     * @param $event
+     * @param moveEndCallback
+     * @inner
+     */
     startMoveLineText($event: RGUserEvent, moveEndCallback: () => void): void;
-    startMoveLine6CtrlPoint(ctrlPointIndex: number, $event: RGUserEvent): Promise<void>;
-    startMoveLine44CtrlPoint(split: RGCtrlPointForLine44, $event: RGUserEvent): Promise<void>;
+    /**
+     * Start dragging the line control point (applicable to lines with curved line types)
+     * - This method is called internally by relation-graph and does not need to be called by the user
+     * @param ctrlPointIndex
+     * @param $event
+     * @param onLinePathChanged
+     * @inner
+     */
+    startMoveLine6CtrlPoint(ctrlPointIndex: number, $event: RGUserEvent, onLinePathChanged: (line: RGLine) => void): void;
+    /**
+     * Start dragging the line control point (applicable to lines with line type RGLineShape.StandardOrthogonal)
+     * - This method is called internally by relation-graph and does not need to be called by the user
+     * @param split
+     * @param $event
+     * @param onLinePathChanged
+     */
+    startMoveLine44CtrlPoint(split: RGCtrlPointForLine44, $event: RGUserEvent, onLinePathChanged: (line: RGLine) => void): void;
+    /**
+     * When the start or end point of the line is dropped onto the connection point on the node connection controller (<RGEditingConnectController />), this method is called
+     * - This method is called internally by relation-graph and does not need to be called by the user
+     * @param junctionPoint
+     * @param $event
+     * @param connectBoxDom
+     * @param lineVertexBeDroppedEventHandler
+     * @inner
+     */
+    onLineVertexBeDroppedOnConnectController(junctionPoint: RGJunctionPoint, $event: RGUserEvent, connectBoxDom?: HTMLElement, lineVertexBeDroppedEventHandler?: RGLineVertexBeDroppedEventHandler): void;
 }

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

@@ -1,19 +1,39 @@
-import { RGLine, RGLink, RGListeners, RGNode, RGOptions, RGUserEvent } from '../types';
+import { RGLine, RGLink, RGNode, RGNodeShape, RGUserEvent } from '../../types';
 import { RelationGraphWith91Editing } from './RelationGraphWith91Editing';
+/**
+ * Functionality related to the mini view(<RGMiniView />) in the relation-graph component
+ */
 export declare class RelationGraphWith92MiniView extends RelationGraphWith91Editing {
-    $miniViewCanvas: HTMLCanvasElement;
-    $mvCanvasCtx: CanvasRenderingContext2D;
-    private mediaDPR;
-    constructor(options: RGOptions, listeners: RGListeners);
-    protected initImageTool(): void;
+    private $miniViewCanvas;
+    private $mvCanvasCtx;
+    constructor();
+    /**
+     * relation-graph internal call, please do not use externally
+     * @inner
+     * @param canvas
+     */
     setMiniViewCanvas(canvas: HTMLCanvasElement): void;
+    /**
+     * relation-graph internal call, please do not use externally
+     * @inner
+     */
     updateMiniView(): void;
-    miniViewUpdating: boolean;
-    private miniViewUpdateHasNext;
+    /**
+     * @private
+     * @inner
+     */
     private _updateMiniView;
-    private canvasDomScale;
+    private _canvasDomScale;
+    /**
+     * @private
+     * @inner
+     */
     protected mvDosomethingBeforeDraw(): void;
-    protected mvDrawMask(): void;
+    /**
+     * @private
+     * @inner
+     */
+    private updateMiniViewVisibleArea;
     protected miniViewBox: {
         visibleAreaStart: {
             x: number;
@@ -37,14 +57,51 @@ export declare class RelationGraphWith92MiniView extends RelationGraphWith91Edit
         y: number;
     };
     private _canvasItemMiniSizeLimit;
+    /**
+     * @private
+     * @inner
+     */
     protected mvDrawAllNodes(): void;
-    protected mvDrawNode(node: RGNode, nodeWidth: number, nodeHeight: number): void;
+    /**
+     * @private
+     * @inner
+     */
+    protected mvDrawNode(node: RGNode, nodeShape: RGNodeShape, nodeWidth: number, nodeHeight: number): void;
+    /**
+     * @private
+     * @inner
+     */
     protected mvDrawNode4Rect(node: RGNode, nodeWidth: number, nodeHeight: number): void;
+    /**
+     * @private
+     * @inner
+     */
     protected mvDrawNode4Circle(node: RGNode, nodeWidth: number, nodeHeight: number): void;
+    /**
+     * @private
+     * @inner
+     */
     protected mvDrawAllLines(): void;
+    /**
+     * @private
+     * @inner
+     */
     protected mvDrawLine(link: RGLink, line: RGLine): void;
+    /**
+     * @private
+     * @inner
+     */
     protected mvDrawSvgPathOnCanvas(ctx: any, svgPath: any): void;
-    private miniviewVisiableHandleMoveing;
-    onVisiableViewHandleDragStart(e: RGUserEvent): void;
+    /**
+     * Triggered when dragging the visible area indicator in the MiniView
+     * @inner
+     * @param e
+     */
+    onVisibleViewHandleDragStart(e: RGUserEvent): void;
+    /**
+     * Triggered when the reset function in the MiniView is clicked
+     * @inner
+     * @param e
+     */
     resetByVisiableView(e: RGUserEvent): void;
 }

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

@@ -0,0 +1,36 @@
+import { RelationGraphWith92MiniView } from './RelationGraphWith92MiniView';
+/**
+ * API methods related to generating images in the relation-graph component,
+ * - The methods here are just to prepare for generating images, making the dom reach a state suitable for generating images, and then letting the user get the dom and call third-party libraries to generate images
+ * - Specific content includes: setting watermark dom, setting background dom, moving canvas position, adjusting node positions as necessary, adjusting canvas size, etc.
+ */
+export declare class RelationGraphWith93Image extends RelationGraphWith92MiniView {
+    constructor();
+    private $watermarkDom;
+    private $watermarkPosition;
+    private $backgroundDom;
+    /**
+     * Set the watermark dom element, which will be automatically called when using the <RGWatermark> component to set the watermark dom
+     * - Note that this is an internal method, please do not use it externally
+     * @inner
+     */
+    setWatermarkDom(watermarkDom: HTMLDivElement | null, forImage?: boolean, forDisplay?: boolean, position?: string): void;
+    private _originBackgroundColor;
+    /**
+     * Set the background dom element, which will be automatically called when using the <RGBackground> component to set the background dom
+     * - Note that this is an internal method, please do not use it externally
+     * @inner
+     */
+    setBackgroundDom(backgroundDom: HTMLDivElement | null, forImage?: boolean, forDisplay?: boolean): void;
+    /**
+     * Switch to a state suitable for generating images, allowing relation-graph to enter a state suitable for generating images
+     * - Note that this is an asynchronous method
+     * @return Returns the dom element used to generate the image
+     *
+     */
+    prepareForImageGeneration(): Promise<HTMLElement>;
+    /**
+     * After the image is generated, let relation-graph return to the previous state
+     */
+    restoreAfterImageGeneration(): Promise<void>;
+}

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

@@ -0,0 +1,36 @@
+import { RelationGraphWith92MiniView } from './RelationGraphWith92MiniView';
+/**
+ * API methods related to generating images in the relation-graph component,
+ * - The methods here are just to prepare for generating images, making the dom reach a state suitable for generating images, and then letting the user get the dom and call third-party libraries to generate images
+ * - Specific content includes: setting watermark dom, setting background dom, moving canvas position, adjusting node positions as necessary, adjusting canvas size, etc.
+ */
+export declare class RelationGraphWith93Image extends RelationGraphWith92MiniView {
+    constructor();
+    private $watermarkDom;
+    private $watermarkPosition;
+    private $backgroundDom;
+    /**
+     * Set the watermark dom element, which will be automatically called when using the <RGWatermark> component to set the watermark dom
+     * - Note that this is an internal method, please do not use it externally
+     * @inner
+     */
+    setWatermarkDom(watermarkDom: HTMLDivElement | null, forImage?: boolean, forDisplay?: boolean, position?: string): void;
+    private _originBackgroundColor;
+    /**
+     * Set the background dom element, which will be automatically called when using the <RGBackground> component to set the background dom
+     * - Note that this is an internal method, please do not use it externally
+     * @inner
+     */
+    setBackgroundDom(backgroundDom: HTMLDivElement | null, forImage?: boolean, forDisplay?: boolean): void;
+    /**
+     * Switch to a state suitable for generating images, allowing relation-graph to enter a state suitable for generating images
+     * - Note that this is an asynchronous method
+     * @return Returns the dom element used to generate the image
+     *
+     */
+    prepareForImageGeneration(): Promise<HTMLElement>;
+    /**
+     * After the image is generated, let relation-graph return to the previous state
+     */
+    restoreAfterImageGeneration(): Promise<void>;
+}

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

@@ -0,0 +1,108 @@
+import { RGNode } from '../../types';
+import { RelationGraphWith93Image } from './RelationGraphWith93Image';
+/**
+ * Enhancement class for relation-graph component to interact with DOM, monitor changes in the view and elements within the view, and respond accordingly
+ */
+export declare class RelationGraphWith95Dom extends RelationGraphWith93Image {
+    protected resizeObserver: ResizeObserver;
+    protected resizeListenerMap: WeakMap<object, any>;
+    protected domToNodeIdMap: WeakMap<Element, string>;
+    constructor();
+    /**
+     * [Used internally by relation-graph] This method will be called after the RelationGraph component is mounted, to facilitate DOM operations in the JS instance object (this will only obtain visual information of the DOM and monitor changes in size and position).
+     * @param relationGraphDom:HTMLDivElement RelationGraph container DOM
+     */
+    setDom(relationGraphDom: HTMLDivElement): void;
+    /**
+     * [Used internally by relation-graph] This method will be called after the RelationGraph component's canvas element is mounted, to facilitate DOM operations in the JS instance object (this will only obtain visual information of the DOM and monitor changes in size and position).
+     * @param relationGraphDom:HTMLDivElement canvas DOM
+     */
+    setCanvasDom(canvasDom: HTMLDivElement): void;
+    /**
+     * @inner
+     * @private
+     */
+    private getResizeObserver;
+    /**
+     * @inner
+     * @private
+     */
+    protected initDom(): void;
+    private mutationObserver4Nodes?;
+    private mutationObserver4CanvasSlotBehind?;
+    private mutationObserver4CanvasSlotAbove?;
+    /**
+     * @inner
+     * @private
+     */
+    private reinitMutationObservers;
+    private _updateCanvasConnectTargetsTask;
+    /**
+     * @inner
+     * @private
+     */
+    protected destroyMutationObserver(): void;
+    private onKeyDownHanlder;
+    private onKeyUpHanlder;
+    /**
+     * @inner
+     * @private
+     */
+    protected addKeyboardListener(): void;
+    /**
+     * @inner
+     * @private
+     */
+    protected removeKeyboardListener(): void;
+    /**
+     * Monitor the size changes of a DOM element using ResizeObserver
+     * @inner
+     * @param dom
+     * @param callback
+     * @protected
+     */
+    protected addResizeListener(dom: HTMLElement, callback: (width: number, height: number) => void): void;
+    /**
+     * Node DOM resize event handler
+     * @inner
+     * @param dom
+     * @param width
+     * @param height
+     * @private
+     */
+    private _onNodeDomResize;
+    /**
+     * Node DOM resize event handler
+     * @inner
+     * @param dom
+     * @param node
+     * @param width
+     * @param height
+     * @private
+     */
+    private _onNodeResize;
+    /**
+     * [Used internally by relation-graph] This method is called when the Node component is mounted to monitor changes in the size of the Node's DOM element.
+     * @param dom The DOM element corresponding to the Node component
+     * @param node The JS data object of the Node
+     * @inner
+     */
+    addNodeResizeListener(dom: HTMLElement, node: RGNode): void;
+    /**
+     * [Used internally by relation-graph] This method is called when the Node component is destroyed to remove monitoring of the corresponding DOM element of the Node.
+     * @param dom The DOM element corresponding to the Node component
+     * @inner
+     */
+    removeNodeResizeListener(dom: HTMLElement): void;
+    /**
+     * Remove size change monitoring for the DOM element
+     * @param dom
+     * @protected
+     */
+    protected removeResizeListener(dom: HTMLElement): void;
+    /**
+     * @inner
+     * @protected
+     */
+    protected destroyResizeObserver(): void;
+}

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

@@ -0,0 +1,125 @@
+import { JsonLine, JsonNode, RGJsonData, RGLine, RGLink, RGNode, RGOptions, RGRectTarget } from '../../types';
+import { RelationGraphWith95Dom } from './RelationGraphWith95Dom';
+/**
+ * Additional API methods provided by the relation-graph component
+ */
+export declare class RelationGraphWith99API extends RelationGraphWith95Dom {
+    constructor();
+    /**
+     * Call this method to notify the relation-graph component to update when the data changes
+     * - In general, there is no need to call this method manually, the relation-graph component will automatically monitor data changes and update, but in some special cases, you may need to call this method manually to ensure that the relation-graph component updates the display correctly.
+     */
+    dataUpdated(): void;
+    /**
+     * Set the configuration options of the relation-graph component, you need to set the configuration items you want to modify through options
+     * @param options RGOptions The configuration items that need to be modified, no need to pass in a complete object
+     *
+     */
+    setOptions(options: RGOptions): void;
+    /**
+     * Update the configuration options of the relation-graph component, you only need to pass in the configuration items you want to modify
+     * @param options Partial<RGOptions> The configuration items that need to be modified, no need to pass in a complete object
+     */
+    updateOptions(options: Partial<RGOptions>): void;
+    /**
+     * Move the canvas to the center position based on the distribution of nodes
+     * @param nodes Optional parameter, specify a group of nodes or rectangle target objects. If this parameter is not passed in, all nodes in the current graph are used by default.
+     *
+     */
+    moveToCenter(nodes?: (RGNode | RGRectTarget)[]): void;
+    /**
+     * relation-graph internal call, please do not use externally
+     * @inner
+     */
+    transToLinker(newValue?: boolean): void;
+    /**
+     * Set the root node ID of the graph
+     * - After setting the root node, it only affects the layout starting point when calling the graphInstance.doLayout() method subsequently.
+     * @param rootNodeId The specified root node ID
+     */
+    setRootNodeId(rootNodeId: string): void;
+    /**
+     * Get the root node object set in the current graph
+     */
+    getRootNode(): RGNode | undefined;
+    /**
+     * Get the currently selected node object in the graph
+     */
+    getCheckedNode(): RGNode | undefined;
+    /**
+     * Get the currently selected line object in the graph
+     */
+    getCheckedLine(): import('../../types').RGFakeLine | undefined;
+    /**
+     * Get all selected nodes in the graph
+     */
+    getSelectedNodes(): RGNode[];
+    /**
+     * Get all editing nodes in the graph
+     */
+    getEditingNodes(): RGNode[];
+    /**
+     * Set the entire data of the graph, and perform layout based on the rootId in the data
+     * - Use options.layout as the layout options
+     * @param jsonData
+     */
+    setJsonData(jsonData: RGJsonData): Promise<void>;
+    /**
+     * Append data to the graph
+     * @param jsonData
+     * @param isRelayout Whether to re-layout after appending data
+     */
+    appendJsonData(jsonData: RGJsonData, isRelayout?: boolean): Promise<void>;
+    /**
+     * Apply initial data to the graph, centering and zooming to fit
+     * @param initialData
+     */
+    applyInitialData(initialData: RGJsonData): Promise<void>;
+    /**
+     * Get all nodes and lines json data in the current graph.
+     * @param graphJsonData: RGJsonData
+     */
+    getGraphJsonData(): RGJsonData;
+    /**
+     * Convert an RGNode object to a JSON-serializable object
+     * @param nodeJson: JsonNode
+     */
+    transRGNodeToJsonObject(node: RGNode): JsonNode;
+    /**
+     * Convert an RGLink object to a JSON-serializable object
+     * @param lines: JsonLine
+     */
+    transRGLinkToJsonObject(link: RGLink): JsonLine;
+    /**
+     * Convert an RGLine object to a JSON-serializable object
+     * @param lineJson: JsonLine
+     */
+    transRGLineToJsonObject(line: RGLine): JsonLine;
+    /**
+     * Get the configuration information of the current graph
+     */
+    getGraphJsonOptions(): {};
+    /**
+     *  Clear the current graph data
+     *  - Including:
+     *  - All node data
+     *  - All line data
+     *  - All fake line data
+     *  - Reset root node ID
+     *  - Reset selected elements
+     *  - Reset editing elements
+     */
+    clearGraph(): void;
+    /**
+     * Print the current graph configuration information to the console
+     */
+    printOptions(): void;
+    /**
+     * Print all data of the current graph to the console
+     */
+    printData(): void;
+    /**
+     * Print the current graph configuration and JSON data to the console
+     */
+    printGraphJsonData(): void;
+}