@relation-graph/react 3.0.0 → 3.0.1

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

@@ -1,29 +1,84 @@
-import { RelationGraphWith3Image } from './RelationGraphWith3Image';
-import { RGJunctionPoint, RGElementLine, RGGenerateLineConfig, RGGenerateLinePrams, RGLine, RGLinePathInfo, RGLineTextPosition, RGLink, RGListeners, RGOptions, RGUserEvent } from '../types';
-import { RGLineVertexBeDroppedEventHandler } from '../../../types/types/relation-graph-models/types';
-export declare class RelationGraphWith4Line extends RelationGraphWith3Image {
-    constructor(options: RGOptions, listeners: RGListeners);
+import { RGElementLine, RGGenerateLineConfig, RGLine, RGLinePathInfo, RGLineTextPosition, RGLink } from '../../types';
+import { RelationGraphWith3Options2API } from './RelationGraphWith3Options2API';
+/**
+ * Methods related to line drawing in relation-graph component
+ */
+export declare class RelationGraphWith4Line extends RelationGraphWith3Options2API {
+    constructor();
+    /**
+     * Get the specific coordinate position of the junction point according to the junction point style
+     * @param junctionPointStyle Junction point position definition, type: RGJunctionPoint
+     * @param createJunctionPointParams Parameters required to create junction points
+     * @return Returns the coordinate position of the junction point
+     *
+     */
     private _getJunctionPoint;
+    /**
+     * @deprecated This method has been removed, please use createLineDrawInfo() instead.
+     */
     createLinePath(link: RGLink | RGElementLine, line: RGLine, ri: number): void;
+    /**
+     * Generate line drawing information based on line information
+     * - This method is generally used internally by components, but can also be called for external custom rendering of lines to obtain line drawing information.
+     * @param link The connection line object that contains the starting and ending point object information
+     * @param line The line object
+     * @return Returns the line drawing information object
+     *
+     */
     createLineDrawInfo(link: RGLink | RGElementLine, line: RGLine): RGLinePathInfo | undefined;
+    /**
+     * Generate line path data
+     * - This method is generally used internally by components, but can also be called for external custom rendering of lines to obtain line drawing information.
+     * @param generateConfig Data configuration for generating line paths
+     * @return Returns the line path information object
+     *
+     */
     generateLinePath(generateConfig: RGGenerateLineConfig): RGLinePathInfo;
-    throwLineError(errorCode: string, x: number, y: number): {
-        rgError: boolean;
-        errorCode: string;
-        x: number;
-        y: number;
-    };
-    createErrorLineValue(errorCode: string, x: number, y: number): RGLinePathInfo;
-    /**
-    this.options.layout.layoutDirection || 'h';
-    this.options.multiLineDistance
-    this.options.defaultJunctionPoint
-    lineRadius: this.options.defaultPolyLineRadius
-    **/
-    withLineJunctionPoints({ line, from, to, totalLinesBetweenNodes, currentLineIndex, defaultOptions }: RGGenerateLineConfig): RGGenerateLinePrams;
-    createLinePathData(linePathGenerateParmas: RGGenerateLinePrams): RGLinePathInfo;
+    /**
+     * @inner
+     * @private
+     */
+    private throwLineError;
+    /**
+     * @inner
+     * @private
+     */
+    private createErrorLineValue;
+    /**
+     * @inner
+     * @private
+     */
+    private withLineJunctionPoints;
+    /**
+     * @inner
+     * @private
+     */
+    private createLinePathData;
+    /**
+     * Get the arrow marker ID based on the line information, used to set the SVG marker-start or marker-end attribute value
+     * @param line The line object
+     * @param isStartArrow Whether it is the start arrow, the default value is false, indicating the end arrow
+     * @return Returns the arrow marker ID string, or undefined if the arrow is not displayed
+     *
+     */
     getArrowMarkerId(line: RGLine, isStartArrow?: boolean): string | undefined;
+    /**
+     * @inner
+     * @private
+     */
+    private getLineArrow;
+    /**
+     * @deprecated Will be removed in future versions
+     * @inner
+     */
     getTextTransform(line: RGLine, textPosition: RGLineTextPosition): string;
+    /**
+     * English: Generate text style information on the line, including position, alignment, rotation, and other CSS styles
+     * @param lineConfig RGGenerateLineConfig object, configuration information when generating the line
+     * @param linePathInfo RGLinePathInfo object, line path information
+     * @return Returns an object containing text content and CSS styles
+     *
+     */
     generateLineTextStyle(lineConfig: RGGenerateLineConfig, linePathInfo: RGLinePathInfo): {
         cssStyles: {
             transform: string;
@@ -37,6 +92,12 @@ export declare class RelationGraphWith4Line extends RelationGraphWith3Image {
             transformOrigin: string;
         };
     };
+    /**
+     * Generate text style information for textPath on the line, including position, alignment, rotation, and other CSS styles
+     * @param lineConfig RGGenerateLineConfig object, configuration information when generating the line
+     * @return Returns an object containing text content and CSS styles
+     *
+     */
     generateLineTextStyle4TextPath(lineConfig: RGGenerateLineConfig): {
         text: string;
         textOffset: string;
@@ -44,5 +105,4 @@ export declare class RelationGraphWith4Line extends RelationGraphWith3Image {
         onPathStartOffset: string;
         textRotate: number;
     } | null;
-    onLineVertexBeDroppedOnConnectController(junctionPoint: RGJunctionPoint, $event: RGUserEvent, connectBoxDom?: HTMLElement, lineVertexBeDroppedEventHandler?: RGLineVertexBeDroppedEventHandler): void;
 }

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

@@ -1,31 +1,29 @@
-import { RGListeners, RGOptions } from '../types';
+import { RGCoordinate } from '../../types';
 import { RelationGraphWith4Line } from './RelationGraphWith4Line';
-export type RGCoordinate = {
-    x: number;
-    y: number;
-};
 export type RGClientXy = RGCoordinate;
-export type RGCViewXy = RGCoordinate;
-export type RGCanvasXy = RGCoordinate;
+/**
+ * Class related to zoom functionality in the relation-graph component
+ */
 export declare class RelationGraphWith5Zoom extends RelationGraphWith4Line {
-    constructor(options: RGOptions, listeners: RGListeners);
-    private _zooming;
-    zoom(buff: number, userZoomCenter?: RGClientXy, e?: WheelEvent): Promise<void>;
-    protected _zoomEnd(oldZoomValue: number, newZoomValue: number): boolean;
-    setZoom(finalZoom: number, userZoomCenter?: RGClientXy): void;
+    constructor();
     /**
-     * Get the coordinates mapped on the "relation-graph Component viewport" from the canvas coordinates
-     * @param clientXY = {x: e.clientX, y: e.clientY}
+     * Zoom based on the current zoom level
+     * @param buff The additional zoom level to be added based on the current zoom level. A positive number indicates zooming in, and a negative number indicates zooming out, in percentage. For example: 10 means zoom in by 10%, -10 means zoom out by 10%
+     * @param userZoomCenter User zoom center point coordinates, default is the center point of the view
+     * @param e Mouse wheel event object, optional
+     *
      */
-    getCanvasXyByClientXy(clientXY: RGCoordinate): RGCoordinate;
+    zoom(buff: number, userZoomCenter?: RGClientXy, e?: WheelEvent): void;
     /**
-     * Get the coordinates mapped on the "relation-graph Component viewport" from the canvas coordinates
-     * @param viewXy = {x: e.clientX - relationGraphViewBox.left, y: e.clientY - relationGraphViewBox.top}
+     * @inner
+     * @protected
      */
-    getCanvasXyByViewXy(viewXy: RGCoordinate): RGCoordinate;
+    protected _performanceModeLogicHook(oldZoomValue: number, newZoomValue: number): void;
     /**
-     * Get the coordinates mapped on the canvas from the "relation-graph Component viewport" coordinates
-     * @param canvasCoordinate = {x: node.x, y: node.y}
+     * Set the canvas zoom to the specified zoom level
+     * @param finalZoom Target zoom level, expressed as a percentage, for example: 100 means 100%
+     * @param userZoomCenter User zoom center point coordinates, default is the center point of the view
+     *
      */
-    getViewXyByCanvasXy(canvasCoordinate: RGCoordinate): RGCoordinate;
+    setZoom(finalZoom: number, userZoomCenter?: RGClientXy): void;
 }

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

@@ -1,18 +1,70 @@
-import { RGListeners, RGNode, RGRectTarget, RGOptions } from '../types';
+import { RGNode, RGRectTarget } from '../../types';
 import { RelationGraphWith5Zoom } from './RelationGraphWith5Zoom';
+/**
+* Methods related to effects in the relation-graph component
+*/
 export declare class RelationGraphWith6Effect extends RelationGraphWith5Zoom {
-    constructor(options: RGOptions, listeners: RGListeners);
+    constructor();
     /**
-     * Move the center of the canvas to the center of the viewport. Note: The center of the canvas refers to the center calculated based on the distribution of nodes, not the center point of the canvas.
+     * <RelationGraph/> Automatically adjust the height of the canvas to fit the content, while maintaining the width of the canvas unchanged.
+     * - By default, the height of the <RelationGraph/> component is the height of the parent element. Sometimes we want to automatically adjust the height according to the amount of content to fit the content. This method can achieve this function.
+     * - Note: This method will modify the height attribute of the canvas. Please ensure that the parent element allows the height of the child element to change, otherwise it may not achieve the expected effect.
+     * - Note: This method is suitable for scenarios where there is less content and you want the canvas height to adapt to the content. If there is more content, it is recommended to use the zoomToFit method to ensure that the content is fully displayed.
+     * @param padding Padding around the content, default is 20px
+     *
      */
-    moveToCenter(nodes?: (RGNode | RGRectTarget)[]): void;
+    fitContentHeight(padding?: number): void;
+    /**
+     * Move the specified nodes to the center of the visible area
+     * @param nodes Optional, defaults to all nodes in the graph
+     * @inner
+     * @protected
+     */
+    protected _moveToCenter(nodes?: (RGNode | RGRectTarget)[]): void;
+    /**
+     * Move the specified coordinates on the canvas to the center of the visible area
+     * @param x X coordinate on the canvas
+     * @param y Y coordinate on the canvas
+     */
+    setCanvasCenter(x: number, y: number): void;
     /**
      * Zoom to fit the appropriate size, which means making the specified nodes visible in the view and occupying the view as much as possible.
      * @param nodes Optional, defaults to all nodes in the graph
      */
     zoomToFit(nodes?: (RGNode | RGRectTarget)[]): void;
+    /**
+     * Enable node position animation
+     * - After enabling, when the node position changes, there will be a smooth transition animation effect.
+     */
     enableNodeXYAnimation(): void;
+    /**
+     * Disable node position animation
+     * - After disabling, when the node position changes, it will directly jump to the new position without animation.
+     */
     disableNodeXYAnimation(): void;
+    /**
+     * Enable canvas transformation animation
+     * - After enabling, when the canvas is panned or zoomed, there will be a smooth transition animation effect.
+     */
     enableCanvasAnimation(): void;
+    /**
+     * Disable canvas transformation animation
+     * - After disabling, when the canvas is panned or zoomed, it will directly jump to the new position or scale without animation.
+     */
     disableCanvasAnimation(): void;
+    /**
+     * Focus on the specified node by its ID
+     * @param nodeId The ID of the node to focus on
+     */
+    focusNodeById(nodeId: string): void;
+    /**
+     * @deprecated
+     */
+    focusRootNode(): void;
+    /**
+     * @inner
+     * @param thisNode
+     * @private
+     */
+    private focusNode;
 }

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

@@ -1,24 +1,58 @@
-import { RGLayouter, RGLayoutOptions, RGListeners, RGNode, RGOptions } from '../types';
+import { RGLayout, RGLayoutOptions, RGNode } from '../../types';
 import { RelationGraphWith6Effect } from './RelationGraphWith6Effect';
+/**
+ * Methods related to layout in the relation-graph component
+ */
 export declare class RelationGraphWith6Layout extends RelationGraphWith6Effect {
-    constructor(options: RGOptions, listeners: RGListeners);
+    constructor();
     /**
      * Assign positions to the nodes in the current graph based on the layout configuration set in the options
+     * - By default, the first node in the graph is used as the root node for layout. You can also specify a custom root node by passing a node object or node id as a parameter.
+     * - If nodes were added to the graph shortly before calling this method, it will wait for a short time to ensure that the addition of nodes is completed before performing the layout.
+     * @param customRootNode Optional, specify a custom root node for layout, can be a node object or node id
+     * @return Promise<void>
      */
     doLayout(customRootNode?: RGNode | string): Promise<void>;
+    /**
+     * @inner
+     * @private
+     */
     private _doLayout;
-    refresh(doLayout?: boolean): void;
-    private _mainGroupNodes;
-    placeOtherNodes(): void;
-    placeSingleNodes(singleNodes: RGNode[]): void;
-    placeOtherGroup(notPlacedNodes: RGNode[], placedNodes: RGNode[]): void;
     /**
-     * If the current layout is force, you can call this method to start or stop the real-time force-directed calculation
+     * @inner
+     * @protected
+     * @param doLayout
+     */
+    refresh(doLayout?: boolean): Promise<void>;
+    /**
+     * @inner
+     * @private
+     */
+    private placeOtherNodes;
+    /**
+     * @inner
+     * @private
+     */
+    private placeSingleNodes;
+    /**
+     * @inner
+     * @private
+     */
+    private sortGroups;
+    /**
+     * @inner
+     * @private
+     */
+    private placeNextNetwork;
+    /**
+     * If the current layout is force-directed, you can call this method to start or stop the real-time force-directed calculation
+     * - Note: The center layout inherits the force layout and also supports auto layout functionality.
      */
     toggleAutoLayout(): void;
-    private layouter;
+    private layoutor;
     /**
      * If the current layout is force, you can call this method to start the force-directed calculation
+     * - Note: The center layout inherits the force layout and also supports auto layout functionality.
      */
     startAutoLayout(): void;
     /**
@@ -26,8 +60,22 @@ export declare class RelationGraphWith6Layout extends RelationGraphWith6Effect {
      */
     stopAutoLayout(): void;
     /**
-     * Create a layouter
-     * @param layoutOptions
+     * Create a layout instance. After creating the layout instance, you can use the placeNodes method of the layout instance to layout nodes.
+     * - Through this method, you can create multiple layout instances with different configurations to layout different nodes of the same graph in different ways, forming a composite layout effect.
+     * - Example:
+     * ```ts
+     * const layoutor = graphInstance.createLayout({
+     *    layoutName: 'tree',
+     *    from: 'left', // left, right, top, bottom
+     *    treeNodeGapH: 200, // Horizontal spacing between nodes
+     *    treeNodeGapV: 50, // Vertical spacing between nodes
+     * });
+     * layoutor.placeNodes(nodes, rootNode);
+     * ```
+     * @param layoutOptions Layout configuration items, type: RGLayoutOptions. When isMainLayout is true, the configuration items here will override the layout configuration items in the overall configuration items of the graph.
+     * @param isMainLayout Whether it is the main layout instance. The main layout instance will affect the layout-related configuration items of the graph, and can control the auto layout function through the startAutoLayout and stopAutoLayout methods of the graph. Default value: false
+     * @return Layout instance A layout instance with a placeNodes method
+     *
      */
-    createLayout(layoutOptions: RGLayoutOptions, isMainLayout?: boolean): RGLayouter;
+    createLayout<Layout extends RGLayout>(layoutOptions: RGLayoutOptions, isMainLayout?: boolean): Layout;
 }

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

@@ -1,54 +1,187 @@
-import { CreatingLinePlotOptions, CreatingNodePlotOptions, RGLine, RGLineConnectEventHandler, RGLineTarget, RGLink, RGListeners, RGNode, RGOptions, RGPosition, RGSelectionView, RGUserEvent } from '../types';
+import { CreatingLinePlotOptions, CreatingNodePlotOptions, RGLine, RGLineConnectEventHandler, RGLineTarget, RGLink, RGNode, RGPosition, RGUserEvent, RGCoordinate, JsonLine } from '../../types';
 import { RelationGraphWith6Layout } from './RelationGraphWith6Layout';
+/**
+ *  The relation-graph component UI and graphInstance event bus handle user interaction events.
+ *  - Most of the events handled here are user interaction events, while some other events are handled by the following classes:
+ *    - Editor-related events are handled in RelationGraphWith91Editing
+ *    - MiniView-related events are handled in RelationGraphWith92MiniView
+ *
+ */
 export declare class RelationGraphWith7Event extends RelationGraphWith6Layout {
-    constructor(options: RGOptions, listeners: RGListeners);
-    setCheckedNode(nodeId: string): void;
-    setCheckedLinkAndLine(link: RGLink, line: RGLine): void;
-    setCheckedLine(line: RGLine): void;
-    clearChecked(): void;
-    clearSelected(): void;
-    updateNodeOffsetSize(nodeId: string, width: number, height: number): void;
-    prevClickTime: number;
+    constructor();
+    private _prevClickNodeTime;
+    /**
+     * Triggered when the user clicks on a node
+     * @param node The clicked node object
+     * @param e MouseDown or TouchStart event
+     *
+     */
     onNodeClick(node: RGNode, e: RGUserEvent): void;
-    protected nodeXYBeforeDrag: {
+    protected _nodeXYMappingBeforeDrag: {
         [nodeId: string]: {
             x: number;
             y: number;
         };
     };
+    /**
+     * Triggered when the user starts dragging a node
+     * - When the user starts dragging but does not move the node, it is considered as clicking the node, and the onNodeClick event will be triggered instead.
+     * @param willMoveNode The node object that will be moved
+     * @param e MouseDown or TouchStart event
+     */
     onNodeDragStart(willMoveNode: RGNode, e: RGUserEvent): void;
-    onNodeDraged(node: RGNode, x_buff: number, y_buff: number, e: RGUserEvent): void;
-    onNodeDragEnd(node: RGNode, e: RGUserEvent, x_buff: number, y_buff: number): void;
+    /**
+     * @inner
+     * @protected
+     */
+    protected canvasAutoMoving: (draggingEventXy: RGCoordinate) => boolean;
+    private _canvasMovingTimer;
+    /**
+     * @inner
+     * @protected
+     */
+    private _onNodeDragEnd;
+    /**
+     * Triggered when the user clicks on a line
+     * - Triggered when the user clicks on a line path or line text
+     * @param line The clicked line object
+     * @param link The link object that the line belongs to
+     * @param e MouseDown or TouchStart event
+     */
     onLineClick(line: RGLine, link: RGLink, e: RGUserEvent): void;
+    /**
+     * Triggered when the node's expand/collapse button is clicked.
+     * - This method will expand or collapse all descendant nodes of the node.
+     * - If the node is collapsed, it will be expanded; if it is expanded, it will be collapsed.
+     * @param node The node object to be expanded or collapsed
+     * @param e
+     */
     expandOrCollapseNode(node: RGNode, e: RGUserEvent): void;
+    /**
+     * Expand the specified node
+     * - This method will expand the specified node and make its child nodes visible.
+     * @param node The node object to be expanded
+     * @param e
+     */
     expandNode(node: RGNode, e?: RGUserEvent): void;
+    /**
+     * Collapse the specified node
+     * - This method will collapse the specified node and hide its child nodes.
+     * @param node The node object to be collapsed
+     * @param e
+     */
     collapseNode(node: RGNode, e?: RGUserEvent): void;
-    private doLayoutWhenExpandedOrCollapsed;
-    onCanvasDragEnd(e: RGUserEvent): void;
+    private _relayoutTaskTimer;
+    /**
+     * After the node is expanded or collapsed, the visibility of the related nodes needs to be recalculated, and re-layout may be required.
+     * @inner
+     * @private
+     */
+    private _effectWhenExpandedOrCollapsed;
+    /**
+     * @inner
+     * @private
+     */
+    private onCanvasDragEnd;
+    /**
+     * User clicks on the canvas
+     * @param e
+     */
     onCanvasClick(e: RGUserEvent): void;
-    onCanvasSelectionEnd(selectionView: RGSelectionView, e: RGUserEvent): void;
+    /**
+     * @inner
+     * @private
+     */
+    private getNodeAtEvent;
+    /**
+     * @inner
+     * @private
+     */
+    private onCanvasSelectionEnd;
+    /**
+     * Start the "creating node" interaction state
+     * - You can set the callback function onCreateNode in the setting, and add the node to the graph data through graphInstance.addNodes([newNodeJson]); in the callback function.
+     * - You can also set templateMove in the setting to get the move event of the node during placement, so as to achieve complex logic (such as highlighting an existing node when moving to it, and recording the id of this highlighted node, so that in the onCreateNode callback function, you can directly create a new node associated with the highlighted node)
+     * @param e
+     * @param setting Settings used to set the template information of the node being created, the callback function when the creation is completed, etc.
+     */
     startCreatingNodePlot(e: RGUserEvent, setting: CreatingNodePlotOptions): void;
+    /**
+     * Start the "creating line" interaction state
+     * - When the line creation is completed, you need to call graphInstance.addLines([newLineJson]); in the onCreateLine callback function (or through the onLineBeCreated event of the <RelationGraph> component) to add the new line to the graph data.
+     * - You can also set fromNode in the setting to specify the starting node of the line.
+     * @param e
+     * @param setting Settings used to set the template information of the line being created, the callback function when the creation is completed, etc.
+     *
+     */
     startCreatingLinePlot(e: RGUserEvent, setting: CreatingLinePlotOptions): void;
-    movingListener: any;
+    private _onMovingWhenCreatingLine;
+    /**
+     * Stop the "creating line" interaction state
+     * - This method is generally called by relation-graph itself, and users do not need to call this method manually. Unless the user needs to complete complex special interaction logic.
+     *
+     */
     stopCreatingLinePlot(): void;
-    _currentMovingLineTarget: RGLineTarget | null;
-    onMovingWhenCreatingLinePlot($event: MouseEvent): void;
-    onCanvasClickWhenCreatingLinePlot($event: RGUserEvent): void;
-    step1EventTime: number;
-    onNodeClickWhenCreatingLinePlot(node: RGNode): void;
-    onCreateLineCallback: RGLineConnectEventHandler | undefined;
-    onCreateLine(from: RGNode, to: RGNode | RGPosition): boolean | import('../types').RGCoordinate | undefined;
-    isNode(el: HTMLElement): RGNode | undefined;
-    isLine(el: HTMLElement): RGLink | undefined;
-    isLink(el: HTMLElement): RGLink | undefined;
+    /**
+     * @inner
+     * @private
+     */
+    private onMovingWhenCreatingLinePlot;
+    /**
+     * @inner
+     * @private
+     */
+    private onCanvasClickWhenCreatingLinePlot;
+    _step1EventTime: number;
+    /**
+     * @inner
+     * @private
+     */
+    private onNodeClickWhenCreatingLinePlot;
+    _onCreateLineCallback: RGLineConnectEventHandler | undefined;
+    /**
+     * Triggered when the creation of a line is ready. You can modify the line data in this event, or return true to prevent the line from being created (for example, if the user selects a node that is not allowed to be connected and requires the user to select another node).
+     * - This method will ultimately trigger the `onLineBeCreated` event of the <RelationGraph /> component. In this event, users can obtain the line data and use the graphInstance.addLines([newLineJson]) method to complete the data change and add the line to the graph.
+     * @param from Current line start node, may be null
+     * @param to Current line end node, may be null or RGPosition, Position type means the user did not select a node to connect to, but clicked on the canvas to create a line to that position.
+     * @returns Return true to prevent the line from being created.
+     * @protected
+     */
+    protected onReadyToCreateLine(from: RGNode, to: RGNode | RGPosition): false | RGCoordinate | undefined;
+    /**
+     * User right-click context menu event
+     * - Finally, you can get this event through the onContextmenu event, and you can get the position where the user right-clicked and the type of object clicked (canvas | line | node) and the object through this event.
+     * @param e
+     */
     onContextmenu(e: RGUserEvent): void;
+    /**
+     * Toggle fullscreen mode
+     - If newValue is true, enter fullscreen mode
+     - If newValue is false, exit fullscreen mode
+     - If newValue is not provided, toggle fullscreen mode
+     * @param newValue
+     */
     fullscreen(newValue?: boolean): Promise<void>;
-    focusNodeById(nodeId: string): void;
-    focusRootNode(): void;
-    handleSelect(thisNode: RGNode): void;
-    private _wheelAction;
-    private _wheelBuff;
+    /**
+     * User scroll mouse wheel event
+     * - Supports touchpad and mouse wheel
+     * - This event will determine whether to zoom the canvas or scroll the canvas based on whether the user presses the Ctrl/Cmd key and options.wheelEventAction
+     * - When options.disableWheelEvent is true, there will be no response
+     * @param e
+     */
     onMouseWheel(e: WheelEvent): true | undefined;
+    /**
+     * @inner
+     * @private
+     */
+    private _applyWheelEvent;
+    private _mouseWheelTimer;
+    private _mouseWheelEventPrevApplyTime;
+    private _mouseWheelForce;
+    /**
+     * @inner
+     * @private
+     */
     private _onMouseWheel;
     /**
      * Scroll the canvas
@@ -56,19 +189,83 @@ export declare class RelationGraphWith7Event extends RelationGraphWith6Layout {
      * @param buffY - The amount to scroll
      */
     scrollView(buffX: number, buffY: number): void;
-    onLineDragStart(line: RGLine, e: RGUserEvent): void;
+    /**
+     * @inner
+     * @private
+     */
+    private onLineDragStart;
     onLineDragEnd(x_buff: number, y_buff: number, e: RGUserEvent): void;
+    /**
+     * User Start Drag Canvas
+     * - This method will determine whether to create a selection area or move the canvas based on whether the user is holding down the Shift key or the configuration item options.dragEventAction.
+     * - When options.dragEventAction is set to 'none', clicking and dragging on the canvas will only trigger a click event and will not create a selection area or move the canvas.
+     * @param e
+     */
     onCanvasDragStart(e: RGUserEvent): void;
+    /**
+     * User Start Move Canvas
+     *
+     * @param e
+     * @param forceStartMove
+     */
     startMoveCanvas(e: RGUserEvent, forceStartMove?: boolean): void;
+    /**
+     * @inner
+     * @private
+     */
     protected onCanvasDragging(newX: number, newY: number, buffX: number, buffY: number): void;
-    onCanvasDragStop(x_buff: number, y_buff: number, e: RGUserEvent): void;
-    startCreateSelection(e: RGUserEvent): void;
+    /**
+     * @inner
+     * @param e
+     */
+    private onCanvasDragStop;
+    /**
+     * @inner
+     * @param e
+     */
+    private startCreateSelection;
     private _fullscreenchangeHandler;
-    addFullscreenListener(): void;
-    removeFullscreenListener(): void;
+    /**
+     * Monitor fullscreen changes
+     * @inner
+     * @private
+     */
+    protected addFullscreenListener(): void;
+    /**
+     * Remove fullscreen change monitoring
+     * @inner
+     * @private
+     */
+    protected removeFullscreenListener(): void;
+    /**
+     * Default line connect end handler for <RGConnectTarget /> component
+     * - This method does not make any data changes. Users need to obtain the line information through the onLineConnectEnd event of the <RGConnectTarget /> component, and use the graphInstance.addLines([newLineJson]) method to complete the data change.
+     *
+     * @inner
+     * @private
+     */
+    defaultLineConnectEndHandler(from: RGNode | RGLineTarget | RGPosition, to: RGNode | RGLineTarget | RGPosition, newLine?: JsonLine): void;
+    /**
+     * Default line vertex change handler
+     * - This method does not make any data changes. Users need to obtain the line information through the onLineBeCreated event when the line is created or the line vertex is changed, and use the graphInstance.addLines([newLineJson]) method to complete the data change.
+     * - Why does the line vertex change also need to be added through addLines to add data?
+     *      - Because the implementation of line vertex change is to delete the original line data first, and then add a new line data to achieve it. However, the line data obtained through the onLineBeCreated event will be a line data with an id and all information identical to the original line.
+     *
+     * @inner
+     * @param from
+     * @param to
+     * @param newLine
+     */
+    defaultLineVertexBeChangedHandler(from: RGNode | RGLineTarget | RGPosition, to: RGNode | RGLineTarget | RGPosition, newLine?: JsonLine): void;
     /**
      * Sleep for a specified amount of time
      * @param time - The time to sleep in milliseconds
      */
     sleep(time: number): Promise<void>;
+    /**
+     * This method is called by the force layout engine to update the view after each iteration of the force layout calculation is completed.
+     * @inner
+     * @private
+     */
+    forceLayoutTickCallback(): void;
 }