@relation-graph/react 3.0.0 → 3.0.1

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

@@ -0,0 +1,172 @@
+import { RGFakeLine, RGLine, RGLink, RGNode, RGNodesRectBox, RGRectTarget, RGSelectionView } from '../../types';
+import { RelationGraphWith2Data1Getter } from './RelationGraphWith2Data1Getter';
+/**
+ * The relation-graph component class related to data analysis functions
+ */
+export declare class RelationGraphWith2Data2Analysis extends RelationGraphWith2Data1Getter {
+    constructor();
+    /**
+     * Get all lines related to the given node
+     * - e.g.
+     * ```
+     * A --> B
+     * A --> C
+     * D --> A
+     * getRelatedLinesByNode(A) will return [A-->B, A-->C, D-->A]
+     * ```
+     * @param node
+     */
+    getRelatedLinesByNode(node: RGNode): RGLine[];
+    /**
+     * Get all links between the given nodes
+     * - e.g.
+     * ```
+     * A --> B
+     * A --> C
+     * B --> C
+     * D --> E
+     * getLinksBetweenNodes([A,B,C]) will return [A-->B, A-->C, B-->C]
+     * ```
+     * @param nodes
+     */
+    getLinksBetweenNodes(nodes: RGNode[]): RGLink[];
+    /**
+     * Get all lines between the given nodes
+     * - e.g.
+     * ```
+     * A --> B
+     * A --> C
+     * B --> C
+     * D --> E
+     * getLinesBetweenNodes([A,B,C]) will return [A-->B, A-->C, B-->C]
+     * ```
+     * @param nodes
+     */
+    getLinesBetweenNodes(nodes: RGNode[]): RGLine[];
+    /**
+     * Get all nodes that have a direct relationship with the given node
+     * - e.g.
+     * ```
+     * A --> X
+     * B --> X
+     * C --> X
+     * X --> F
+     * X --> M
+     * getNodeRelatedNodes(X) will return [A,B,C,F,M]
+     * ```
+     * @param node
+     */
+    getNodeRelatedNodes(node: RGNode): RGNode[];
+    /**
+     * Get all nodes that have an incoming relationship to the given node
+     * - e.g.
+     * ```
+     * A --> X
+     * B --> X
+     * C --> X
+     * X --> F
+     * X --> M
+     * getNodeIncomingNodes(X) will return [A,B,C]
+     * ```
+     * @param node
+     */
+    getNodeIncomingNodes(node: RGNode): RGNode[];
+    /**
+     * Get all nodes that have an outgoing relationship from the given node
+     * - e.g.
+     * ```
+     * A --> X
+     * B --> X
+     * C --> X
+     * X --> F
+     * X --> M
+     * getNodeOutgoingNodes(X) will return [F,M]
+     * ```
+     * @param node
+     */
+    getNodeOutgoingNodes(node: RGNode): RGNode[];
+    /**
+     * Get all nodes that have a direct or indirect relationship with a given node
+     * @deprecated Please use getNetworkNodesByNode instead
+     */
+    findGroupNodes(node: RGNode, groupNodes?: RGNode[]): RGNode[];
+    /**
+     * Get all nodes that have a direct or indirect relationship with a given node
+     * @deprecated Please use getNetworkNodesByNode instead
+     */
+    getGroupNodesByNode(node: RGNode, groupNodes?: RGNode[]): RGNode[];
+    /**
+     * Get all nodes that have a direct or indirect relationship with a given node
+     * @param node
+     * @param networkNodes
+     */
+    getNetworkNodesByNode(node: RGNode): RGNode[];
+    /**
+     * Get all nodes that have a direct or indirect relationship with a given node
+     * @param node
+     * @param networkNodes
+     */
+    private _getNetworkNodesByNode;
+    /**
+     * @deprecated
+     * @param nodes
+     * @protected
+     */
+    protected getStuffSize(nodes?: (RGNode | RGRectTarget)[]): RGNodesRectBox;
+    /**
+     * @deprecated
+     * @param nodes
+     * @protected
+     */
+    protected getNodesViewInfo(nodes?: (RGNode | RGRectTarget)[]): RGNodesRectBox;
+    /**
+     * Calculate the plane space information occupied by all nodes
+     * @param nodes Optional, if not specified, it will be calculated based on all nodes
+     */
+    getNodesRectBox(nodes?: (RGNode | RGRectTarget)[]): RGNodesRectBox;
+    /**
+     * Get the center coordinates of the plane space occupied by the node collection
+     * @param nodes Optional, if not specified, it will be calculated based on all nodes
+     */
+    getNodesCenter(nodes?: (RGNode | RGRectTarget)[]): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get all descendant nodes in the relationship network where the node is located. Descendant nodes are completely calculated based on the connection relationship and the root node used by the current layout (for the same node, using different root nodes for layout will result in different descendants).
+     * @return All descendant nodes
+     */
+    getDescendantNodes(node: RGNode): RGNode[];
+    /**
+     * Get nodes within the selection area
+     * - This method is generally used in conjunction with the onCanvasSelectionEnd event, where you can obtain information about the selection area through the event's parameters.
+     * - After obtaining the nodes within this area, you can use the graphInstance.getLinesBetweenNodes(nodesInSelection) method to get the lines between the nodes in the area.
+     * @param selectionView The position and size of the selection area in the view
+     * @return Nodes within the selection area
+     */
+    getNodesInSelectionView(selectionView: RGSelectionView): RGNode[];
+    /**
+     * Get the list of nodes to be rendered, this method is used internally by relation-graph
+     * - To get the list of nodes to be rendered outside the <relation-graph> component, please use hook: const { shouldRenderNodes } = useGraphStore();
+     * This allows you to get reactive data and let the data drive your UI
+     * @param nodes
+     * @return RGNode[]
+     */
+    getShouldRenderNodes(nodes?: (RGNode | RGRectTarget)[]): RGNode[];
+    /**
+     * Get the list of lines to be rendered, this method is used internally by relation-graph
+     - To get the list of lines to be rendered outside the <relation-graph> component, please use hook: const { shouldRenderLines } = useGraphStore();
+     * This allows you to get reactive data and let the data drive your UI
+     * @param lines
+     * @return RGLine[]
+     */
+    getShouldRenderLines(lines?: RGLine[]): RGLine[];
+    /**
+     * Get the list of fake lines to be rendered, this method is used internally by relation-graph
+     - To get the list of fake lines to be rendered outside the <relation-graph> component, please use hook: const { shouldRenderFakeLines } = useGraphStore();
+     * This allows you to get reactive data and let the data drive your UI
+     * @param fakeLines
+     * @return RGFakeLine[]
+     */
+    getShouldRenderFakeLines(fakeLines?: RGFakeLine[]): RGFakeLine[];
+}

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

@@ -0,0 +1,257 @@
+import { JsonLine, JsonNode, RGFakeLine, RGJsonData, RGLine, RGLink, RGNode } from '../../types';
+import { RelationGraphWith2Data2Analysis } from './RelationGraphWith2Data2Analysis';
+/**
+ * API class related to data (nodes, lines, etc.) updates in the relation-graph component, providing operations such as adding, deleting, and modifying graph data
+ */
+export declare class RelationGraphWith2Data3Update extends RelationGraphWith2Data2Analysis {
+    constructor();
+    /**
+     * Remove a line
+     * @param line
+     */
+    removeLine(line: RGLine): void;
+    /**
+     * Remove multiple lines
+     * @param lines
+     */
+    removeLines(lines: RGLine[]): void;
+    /**
+     * Remove line by lineId
+     * @param lineId
+     */
+    removeLineById(lineId: string): void;
+    /**
+     * Remove multiple lines by lineIds
+     * @param lineIds
+     */
+    removeLineByIds(lineIds: string[]): void;
+    /**
+     * Remove a fake line
+     * @param line
+     */
+    removeFakeLine(line: RGFakeLine): void;
+    /**
+     * Remove a fake line by lineId
+     * @param lineId
+     */
+    removeFakeLineById(lineId: string): void;
+    /**
+     * Remove a link
+     * @param link
+     */
+    removeLink(link: RGLink): void;
+    /**
+     * Remove a link by lineId
+     * @param lineId
+     */
+    removeLinkByLineId(lineId: string): void;
+    /**
+     * Remove node by nodeId
+     * @param nodeId
+     */
+    removeNodeById(nodeId: string): void;
+    /**
+     * Remove multiple nodes by nodeIds
+     * @param nodeIds
+     */
+    removeNodesByIds(nodeIds: string[]): void;
+    /**
+     * Remove multiple nodes
+     * @param nodes
+     */
+    removeNodes(nodes: RGNode[]): void;
+    /**
+     * Remove a node
+     * @param node
+     */
+    removeNode(node: RGNode): void;
+    /**
+     * @deprecated Use removeFakeLineById instead of removeELementLineById, this method is compatible with older api versions.
+     * @param elementLineId
+     */
+    removeELementLineById(elementLineId: string): void;
+    /**
+     * Add a node
+     * @param node
+     */
+    addNode(node: JsonNode): void;
+    /**
+     * Add multiple nodes
+     * @param nodes
+     */
+    addNodes(nodes: JsonNode[]): void;
+    /**
+     * Add a line
+     * @param line
+     */
+    addLine(line: JsonLine): void;
+    /**
+     * Add multiple lines
+     * @param lines
+     */
+    addLines(lines: JsonLine[]): void;
+    /**
+     * @inner
+     * @protected
+     */
+    protected _addFakeLines(lines: JsonLine[]): void;
+    /**
+     * Add multiple fake lines
+     * @param lines
+     */
+    addFakeLines(lines: JsonLine[]): void;
+    private _elLineUpdateTimer;
+    /**
+     * Update the position information of all element lines
+     * - Generally, there is no need to call this method, relation-graph will automatically call this method to update the position information of element lines at appropriate times. This method is only for special scenarios.
+     */
+    updateElementLines(): void;
+    /**
+     * @inner
+     * @private
+     */
+    private _updateElementLines;
+    /**
+     * @inner
+     * @private
+     */
+    private _updateCanvasBoxInfo;
+    /**
+     * @inner
+     * @private
+     */
+    private updateElementTarget;
+    private _canvasCurrentInfo;
+    /**
+     * @inner
+     * @private
+     */
+    private _getElementTargetPosition;
+    /**
+     * Add multiple element lines
+     * @deprecated Please use addFakeLines instead of addElementLines, this method is compatible with older api versions.
+     * @param lines
+     */
+    addElementLines(lines: JsonLine[]): void;
+    private _nodeResizeEffectTimer;
+    /**
+     * @inner
+     * @private
+     */
+    protected updateNodeOffsetSize(nodeId: string, width: number, height: number): void;
+    /**
+     * Clear all fake lines
+     */
+    clearFakeLines(): void;
+    /**
+     * Clear all element lines
+     * @deprecated Please use clearFakeLines instead of clearElementLines, this method is compatible with older api versions.
+     */
+    clearElementLines(): void;
+    protected prevAddNodeTimestamp: number;
+    /**
+     * Convert JsonNode to RGNode object and add it to the graph
+     * @inner
+     * @param _nodes
+     * @protected
+     */
+    protected _addNodes(_nodes: JsonNode[]): void;
+    /**
+     * Convert JsonLine to RGLine object and add it to the graph
+     * @inner
+     * @param _lines
+     * @protected
+     */
+    protected _addLines(_lines: JsonLine[]): void;
+    /**
+     * Modify node property values, you only need to pass in the properties you want to modify, and the properties that are not passed in will remain unchanged
+     * @param nodeOrId RGNode object or nodeId
+     * @param nodeProperties
+     */
+    updateNode(nodeOrId: RGNode | string, nodeProperties: Partial<RGNode>): void;
+    /**
+     * Modify node position
+     * @param nodeOrId RGNode object or nodeId
+     * @param x
+     * @param y
+     */
+    updateNodePosition(nodeOrId: RGNode | string, x: number, y: number): void;
+    /**
+     * Modify the specified attribute values in node.data. It is a shortcut method, equivalent to:
+     * ```ts
+     *         this.updateNode(node.id, {
+     *             data: {...node.data, ...nodeData}
+     *         });
+     *  ```
+     * @param nodeOrId RGNode object or nodeId
+     * @param nodeData
+     *
+     */
+    updateNodeData(nodeOrId: RGNode | string, nodeData: Record<string, any>): void;
+    /**
+     * Modify line property values, you only need to pass in the properties you want to modify, and the properties that are not passed in will remain unchanged
+     * @param lineOrId RGLine object or lineId
+     * @param lineProperties
+     */
+    updateLine(lineOrId: string | RGLine, lineProperties: Partial<RGLine>): void;
+    /**
+     * Modify the specified attribute values in line.data. It is a shortcut method, equivalent to:
+     * ```ts
+     *         this.updateLine(line.id, {
+     *             data: {...line.data, ...lineData}
+     *         });
+     *  ```
+     * @param lineOrId RGLine object or lineId
+     * @param lineData
+     */
+    updateLineData(lineOrId: string | RGLine, lineData: Record<string, any>): void;
+    /**
+     * Modify fake line property values, you only need to pass in the properties you want to modify, and the properties that are not passed in will remain unchanged
+     * @param lineOrId RGLine object or lineId
+     * @param lineProperties
+     */
+    updateFakeLine(lineOrId: string | RGLine, lineProperties: Partial<RGFakeLine>): void;
+    /**
+     * Expand tree-structured data into flattened data
+     * @param orign_nodes Tree-structured data, e.g., [{id:'a',children:[{id:'a-1'},{id:'a-1', children: [{id:'a-1-1'}]}]}]
+     * @param parentNode Please pass null
+     * @param nodes_collect All expanded nodes will be stored here
+     * @param lines_collect All expanded lines will be stored here
+     */
+    flatNodeData(orign_nodes: JsonNode[], parentNode: JsonNode | null, nodes_collect: JsonNode[], lines_collect: JsonLine[]): void;
+    /**
+     * @inner
+     * @param jsonData
+     * @protected
+     */
+    protected loadGraphJsonData(jsonData: RGJsonData): void;
+    /**
+     * Recalculate all visible nodes
+     * relation-graph外部无需调用这个方法，因为当你修改数据后，relation-graph会自动调用这个方法
+     * @inner
+     * @param force
+     */
+    protected updateShouldRenderGraphData(force?: boolean): void;
+    /**
+     * Update the visible property of nodes
+     *  - When you expand/collapse nodes, there is no need to call this method outside of relation-graph, because relation-graph will automatically call this method. However, when you directly modify the visibility property of a node (for example, if you modify a node's parent node to be hidden, then you need to call this method to make the child node invisible), you need to call this method to update the visibility of the nodes.
+     * @param nodes
+     */
+    updateNodesVisibleProperty(nodes?: RGNode[]): void;
+    /**
+     * @inner
+     */
+    updateVisibleNodesSize(): void;
+    /**
+     * @inner
+     * @protected
+     */
+    protected _clearGraph(): void;
+    /**
+     * @inner
+     * @param jsonData
+     * @param resetViewSize
+     * @protected
+     */
+    protected _setJsonData(jsonData: RGJsonData, resetViewSize?: boolean): void;
+}

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

@@ -0,0 +1,85 @@
+import { RGConnectTarget4NodePoint, RGJunctionPoint } from '../../types';
+import { RelationGraphWith2Data3Update } from './RelationGraphWith2Data3Update';
+/**
+ * The class related to connection point management in the relation-graph component, where the connection point refers to the connection point registered through the <RGConnectTarget> component
+ */
+export declare class RelationGraphWith2Data4ConnectTarget extends RelationGraphWith2Data3Update {
+    constructor();
+    private canvasConnectTargetsMap;
+    private nodeConnectTargetsMap;
+    private connectTargetElementMap;
+    /**
+     * In general, relation-graph will automatically update the position of the connection points.
+     * - This method is only used for manual calls in some special scenarios.
+     * - It is provided for external calls to update the connection point positions of the specified canvas slot, and is not suitable for high-frequency calls.
+     * @param by
+     * @param canvasSlotDom
+     * @protected
+     */
+    protected updateConnectTargetsOnCanvas(by: string, canvasSlotDom: Element): void;
+    /**
+     * In general, relation-graph will automatically update the position of the connection points.
+     * - This method is only used for manual calls in some special scenarios.
+     * - It is provided for external calls to update the connection point positions of the specified node, and is not suitable for high-frequency calls.
+     *
+     */
+    updateConnectTargetsByNodeId(nodeId: string): void;
+    /**
+     * @inner
+     */
+    private getNodeElByNodeId;
+    /**
+     * @inner
+     */
+    protected updateConnectTargetsOnNode(by: string, nodeId: string, nodeEl: HTMLDivElement): void;
+    /**
+     * @inner
+     */
+    protected updateConnectTargetList(by: string, relativeNodeEl: Element, connectTargetList: RGConnectTarget4NodePoint[]): void;
+    /**
+     * @inner
+     */
+    private _connectTargetUpdateRequestedSet;
+    /**
+     * @inner
+     */
+    private _requestUpdateConnectTargetOffset;
+    private _updateTimer;
+    /**
+     * @inner
+     */
+    private _updateAllRequestedConnectTargetOffsets;
+    /**
+     * @inner
+     */
+    private _updateConnectTargetOffset;
+    /**
+     * @inner
+     */
+    private _onConnectTargetMounted;
+    /**
+     * @inner
+     */
+    private getNodeElByChildrenTarget;
+    /**
+     * @inner
+     */
+    registerConnectTarget(connectTargetEl: HTMLDivElement, targetId: string, targetType: string, junctionPoint: RGJunctionPoint, targetData?: Record<string, any>): RGConnectTarget4NodePoint | undefined;
+    /**
+     * @inner
+     */
+    private _addConnectTargetToNodeMap;
+    /**
+     * @inner
+     */
+    private _addConnectTargetToCanvasMap;
+    /**
+     * @inner
+     */
+    unregisterConnectTarget(targetId: string): void;
+    private _removedConnectTargetMap;
+    /**
+     * @inner
+     */
+    private reuseConnectTarget;
+}

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

@@ -0,0 +1,35 @@
+import { RGFakeLine, RGFakeLineTargetRender, RGGenerateLineConfig, RGLine, RGLineTarget, RGOptionsFull } from '../../types';
+import { RelationGraphWith2Data4ConnectTarget } from './RelationGraphWith2Data4ConnectTarget';
+/**
+ * API class for generating line configuration and line connection point information in relation-graph component, providing data support for drawing lines
+ */
+export declare class RelationGraphWith2Data5LineConfig extends RelationGraphWith2Data4ConnectTarget {
+    constructor();
+    /**
+     * @inner
+     */
+    generateCreatingLineConfig(options?: RGOptionsFull): RGGenerateLineConfig;
+    /**
+     *  Generate configuration information for drawing lines based on line information
+     * @param line
+     */
+    generateLineConfig(line: RGLine): RGGenerateLineConfig | false;
+    /**
+     * Generate configuration information for drawing fake lines based on fake line information
+     * @param fakeLine
+     */
+    generateFakeLineConfig(fakeLine: RGFakeLine): RGGenerateLineConfig | false;
+    private fakeLineTargetRender;
+    /**
+     * Set a custom render method for fake line targets, to provide more types of target rendering capabilities for fake lines
+     * @param fakeLineTargetRender
+     */
+    setFakeLineTargetRender(fakeLineTargetRender: RGFakeLineTargetRender): void;
+    /**
+     * Get the target information of a fake line based on the target type and target ID
+     * @param targetType
+     * @param targetId
+     * @param fakeLine
+     */
+    getFakeLineTarget(targetType: string, targetId: string, fakeLine: RGFakeLine): RGLineTarget | undefined;
+}

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

@@ -0,0 +1,75 @@
+import { RGLine, RGNode, RGOptions } from '../../types';
+import { RelationGraphWith2Data5LineConfig } from './RelationGraphWith2Data5LineConfig';
+/**
+ * Class related to options data update of relation-graph component
+ */
+export declare class RelationGraphWith3Options1Update extends RelationGraphWith2Data5LineConfig {
+    constructor();
+    /**
+     * @inner
+     */
+    protected _updateOptions(options: RGOptions): void;
+    /**
+     * When the size of the parent element of the relation-graph component changes, you can call this method to recalculate the view size
+     * @param zoomTo100
+     * @protected
+     * @inner
+     */
+    protected resetViewSize(zoomTo100?: boolean): void;
+    /**
+     * Lock the graph component screen and display a piece of text
+     * @param graphLoadingText The text to display
+     */
+    loading(graphLoadingText?: string): void;
+    /**
+     * Clear the lock on the graph component screen
+     */
+    clearLoading(): void;
+    /**
+     * Set the checked node
+     * @param node
+     */
+    setCheckedNode(node: string | RGNode): void;
+    /**
+     * Set the checked line
+     * @param line
+     */
+    setCheckedLine(line: string | RGLine): void;
+    /**
+     * Clear all checked nodes and lines
+     */
+    clearChecked(): void;
+    /**
+     * Clear all selected nodes and lines
+     */
+    clearSelected(): void;
+    /**
+     * Set the canvas offset, used when dragging the canvas
+     * @param x
+     * @param y
+     */
+    setCanvasOffset(x: number, y: number): void;
+    /**
+     * Set the current canvas to move mode
+     * @param newValue
+     * @protected
+     * @inner
+     */
+    protected setCanvasMoveMode(newValue: boolean): void;
+    /**
+     * @inner
+     */
+    onMiniViewMounted(): void;
+    /**
+     * @inner
+     */
+    onMiniViewUnMounted(): void;
+    /**
+     * @inner
+     */
+    onReferenceLineMounted(adsorption: boolean): void;
+    /**
+     * @inner
+     */
+    onReferenceLineUnMounted(): void;
+}

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

@@ -0,0 +1,39 @@
+import { JsonLine, JsonNode, RGLineTarget, RGOptionsFull } from '../../types';
+import { RelationGraphWith3Options1Update } from './RelationGraphWith3Options1Update';
+/**
+ * API class to obtain some derived or abstract information from options data
+ */
+export declare class RelationGraphWith3Options2API extends RelationGraphWith3Options1Update {
+    constructor();
+    /**
+     * Get the currently creating line information through data options
+     *  - This method is only for Hook (useCreatingLine). When using it, it should be obtained through the hook:
+     *  ```ts
+     *  import { RGHooks } from 'relation-graph-react';
+     *  const creatingLine = RGHooks.useCreatingLine(graphInstance);
+     *  ```
+     * @param options
+     * @inner
+     *
+     */
+    getCreatingLine(options?: RGOptionsFull): {
+        creating: boolean;
+        fromTarget?: RGLineTarget;
+        toTarget?: RGLineTarget;
+        lineJson?: JsonLine;
+    };
+    /**
+     * Get the currently creating node information through data options
+     *  - This method is only for Hook (useCreatingNode). When using it, it should be obtained through the hook:
+     *  ```ts
+     *  import { RGHooks } from 'relation-graph-react';
+     *  const creatingNode = RGHooks.useCreatingNode();
+     *  ```
+     * @param options
+     * @inner
+     */
+    getCreatingNode(options?: RGOptionsFull): {
+        creating: boolean;
+        nodeJson?: JsonNode;
+    };
+}