@relation-graph/vue3 3.0.4

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

@@ -0,0 +1,259 @@
+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;
+    private _nodesElSizeMap;
+    private backupNodesElSize;
+    /**
+     * @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 { RGConnectTargetData, 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: RGConnectTargetData[]): 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>): RGConnectTargetData | 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;
+    };
+}

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

@@ -0,0 +1,112 @@
+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;
+    private _getLineDefaultOptions;
+    /**
+     * 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;
+    /**
+     * @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;
+            transformOrigin: string;
+        };
+        text?: undefined;
+    } | {
+        text: string;
+        cssStyles: {
+            transform: string;
+            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
+     *
+     */
+    generateLineTextStyle4TextOnPath(lineConfig: RGGenerateLineConfig): {
+        text: string;
+        textOffset: {
+            x: number;
+            y: number;
+        };
+        textAnchor: string;
+        onPathStartOffset: string;
+        textRotate: number;
+    } | null;
+}

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

@@ -0,0 +1,29 @@
+import { RGCoordinate } from '../../types';
+import { RelationGraphWith4Line } from './RelationGraphWith4Line';
+export type RGClientXy = RGCoordinate;
+/**
+ * Class related to zoom functionality in the relation-graph component
+ */
+export declare class RelationGraphWith5Zoom extends RelationGraphWith4Line {
+    constructor();
+    /**
+     * 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
+     *
+     */
+    zoom(buff: number, userZoomCenter?: RGClientXy, e?: WheelEvent): void;
+    /**
+     * @inner
+     * @protected
+     */
+    protected _performanceModeLogicHook(oldZoomValue: number, newZoomValue: number): void;
+    /**
+     * 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
+     *
+     */
+    setZoom(finalZoom: number, userZoomCenter?: RGClientXy): void;
+}