@relation-graph/vue3 3.0.4

package/types/packages/relation-graph-models/layouts/analyzers/RGNetworkAnalyzer.d.ts

@@ -0,0 +1,27 @@
+import { RGNode } from '../../../types';
+export type NodesAnalyticLevel = {
+    level: number;
+    all_size: number;
+    all_strength: number;
+};
+export type NodesAnalyticResult = {
+    direct: number;
+    max_deep: number;
+    min_deep: number;
+    max_length: number;
+    max_strength: number;
+    levels: Map<number, NodesAnalyticLevel>;
+};
+export type RGLevelDirection = -1 | 0 | 1;
+export interface RGNetworkAnalyzer {
+    analyzeNetwork(nodes: RGNode[], rootNode: RGNode, bothWay?: boolean, deepBothWay?: boolean): {
+        tree: {
+            networkNodes: RGNode[];
+            analyticResult: NodesAnalyticResult;
+        };
+        reverseTree: {
+            networkNodes: RGNode[];
+            analyticResult: NodesAnalyticResult;
+        };
+    };
+}

package/types/packages/relation-graph-models/layouts/tmp/old.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,80 @@
+import { RGEventEmitHook, RGEventHandler, RGEventNames, RGListeners, RGOptionsFull } from '../../types';
+import { RGDataProvider } from '../data/RGDataProvider';
+/**
+ * relation-graph component base class, providing common API methods
+ */
+export declare class RelationGraphBase {
+    listeners: RGListeners;
+    private useReactiveDataToAutoUpdateView;
+    protected instanceId: string;
+    dataProvider: RGDataProvider;
+    options: RGOptionsFull;
+    constructor();
+    /**
+     * Generate a highly likely unique id, the probability of non-duplication depends on the parameter idLength (the length of the id)
+     * @param idLength The length of the id, default is 5
+     */
+    generateNewUUID(idLength?: number): string;
+    /**
+     * * Enable or disable logging functionality
+     * @param enable
+     */
+    enableDebugLog(enable: boolean): void;
+    /**
+     * Request view update
+     * Used to update canvas drawing, subsequent canvas drawing will be upgraded to use WebGL to improve performance
+     * @protected
+     */
+    protected _dataUpdated(): void;
+    private _dataUpdatedRequested;
+    /**
+     * @inner
+     * Reuqest Trigger view update
+     * @private
+     */
+    protected _requestDataUpdate(): void;
+    /**
+     * Trigger view update for React/Svelte/Canvas
+     * @private
+     */
+    private _doSomethingAfterDataUpdated;
+    protected eventHandlers: RGEventHandler[];
+    /**
+     * * Register event handler
+     * @param handler: RGEventHandler
+     */
+    addEventHandler(handler: RGEventHandler): void;
+    /**
+     * * Remove event handler
+     * @param handler: RGEventHandler
+     */
+    removeEventHandler(handler: RGEventHandler): void;
+    protected _emitHook: RGEventEmitHook;
+    /**
+     * * Set the event hook, For Vue2,Vue3 only
+     * @param emitHook
+     */
+    setEventEmitHook(emitHook: RGEventEmitHook): void;
+    /**
+     * Trigger event
+     * @param eventName Name of the event
+     * @param object Parameters passed to the event handler
+     */
+    protected emitEvent(eventName: RGEventNames, ...args: any[]): false | import('../../types').RGCoordinate | undefined;
+    /**
+     * Protected Method to trigger the default event handler, i.e., trigger the events set in jsx
+     * @param eventName
+     * @param args
+     * @protected
+     */
+    protected defaultEventHandler(eventName: RGEventNames, ...args: any[]): {
+        result: false | void | import('../../types').RGCoordinate;
+        handled: boolean;
+    };
+    /**
+     * * Set event listeners
+     * @param handler
+     * @inner
+     */
+    setEventListener(handler: RGListeners): void;
+}

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

@@ -0,0 +1,46 @@
+import { RGListeners } from '../../types';
+import { RelationGraphWith99API } from './RelationGraphWith99API';
+/**
+ * The final instance class of the relation-graph component, the class that is actually instantiated
+ * - Each <RGProvider><RelationGraph /></RGProvider> component creates and binds a RelationGraphCore instance, which allows the component UI and user to call the API for data logic and interaction
+ * - It will have all the capabilities of the following classes through integration:
+ *      - RelationGraphBase.ts
+ *      - RelationGraphWith1View.ts
+ *      - RelationGraphWith2Data.ts
+ *      - RelationGraphWith2Data1Getter.ts
+ *      - RelationGraphWith2Data2Analysis.ts
+ *      - RelationGraphWith2Data3Update.ts
+ *      - RelationGraphWith2Data4ConnectTarget.ts
+ *      - RelationGraphWith2Data5LineConfig.ts
+ *      - RelationGraphWith3Options1Update.ts
+ *      - RelationGraphWith3Options2API.ts
+ *      - RelationGraphWith4Line.ts
+ *      - RelationGraphWith5Zoom.ts
+ *      - RelationGraphWith6Effect.ts
+ *      - RelationGraphWith6Layout.ts
+ *      - RelationGraphWith7Event.ts
+ *      - RelationGraphWith9EasyView.ts
+ *      - RelationGraphWith91Editing.ts
+ *      - RelationGraphWith92MiniView.ts
+ *      - RelationGraphWith93Image.ts
+ *      - RelationGraphWith95Dom.ts
+ *      - RelationGraphWith99API.ts
+ *
+ */
+export declare class RelationGraphCore extends RelationGraphWith99API {
+    constructor();
+    setListeners(listeners: RGListeners): void;
+    /**
+     * [Used internally by relation-graph], this method will be called to initialize some configurations based on options (such as creating a layoutor based on the options.layout configuration), and to obtain information such as viewport size.
+     * @inner
+     */
+    ready(): void;
+    /**
+     * @inner
+     */
+    viewComponentUnmounted: boolean;
+    /**
+     * @inner
+     */
+    beforeUnmount(): void;
+}

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

@@ -0,0 +1,96 @@
+import { RGLine, RGUserEvent, RGCoordinate, RGNode, RGLink } from '../../types';
+import { RelationGraphBase } from './RelationGraphBase';
+/**
+ * Relation-graph component view related class
+ */
+export declare class RelationGraphWith1View extends RelationGraphBase {
+    $dom: HTMLDivElement;
+    $canvasDom: HTMLDivElement;
+    /**
+     * @inner
+     */
+    _rgAsConnectArea: boolean;
+    /**
+     * @inner
+     */
+    private $lineTextContainer4NormalLine;
+    /**
+     * @inner
+     */
+    private $lineTextContainer4FakeLine;
+    /**
+     * @inner
+     */
+    getLineTextContainer(line: RGLine): HTMLDivElement | undefined;
+    private viewBoundingClientRect;
+    /**
+     * Get the RelationGraph component DOM
+     * @return relationGraphDom:HTMLDivElement RelationGraph container DOM
+     */
+    getViewBoundingClientRect(): DOMRect | null;
+    /**
+     * @deprecated Please use getViewBoundingClientRect instead of getBoundingClientRect, this method is compatible with older api versions.
+     */
+    getBoundingClientRect(): DOMRect | null;
+    /**
+     * Compatible with older api versions
+     * @param e
+     * @protected
+     * @inner
+     */
+    protected _getEventPoint(e: RGUserEvent): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get the coordinates mapped on the "relation-graph Component viewport" from the Event
+     * @param e
+     */
+    getViewXyByEvent(e: RGUserEvent): {
+        x: number;
+        y: number;
+    };
+    getViewXyByClientXy(clientXY: RGCoordinate): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get the coordinates mapped on the "relation-graph Component viewport" from the canvas coordinates
+     * @param clientXY = {x: e.clientX, y: e.clientY}
+     */
+    getCanvasXyByClientXy(clientXY: RGCoordinate): RGCoordinate;
+    /**
+     * 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}
+     */
+    getCanvasXyByViewXy(viewXy: RGCoordinate): RGCoordinate;
+    /**
+     * Get the coordinates mapped on the canvas from the "relation-graph Component viewport" coordinates
+     * @param canvasCoordinate = {x: node.x, y: node.y}
+     */
+    getViewXyByCanvasXy(canvasCoordinate: RGCoordinate): RGCoordinate;
+    /**
+     * @deprecated Please use getCanvasXyByClientXy instead of getCanvasCoordinateByClientCoordinate, this method is compatible with older api versions.
+     * @param clientXY
+     */
+    getCanvasCoordinateByClientCoordinate(clientXY: RGCoordinate): RGCoordinate;
+    /**
+     * Check if el is a node element, if so, return the corresponding node object
+     * - You can use this method to determine if the element currently under the mouse is a node element, and get the corresponding node object
+     * @param el
+     * @return RGNode | undefined
+     */
+    isNode(el: HTMLElement): RGNode | undefined;
+    /**
+     * Check if el is a line element, if so, return the corresponding line object
+     * - You can use this method to determine if the element currently under the mouse is a line element, and get the corresponding line object
+     * @param el
+     * @return RGLine | undefined
+     */
+    isLine(el: HTMLElement): RGLine | undefined;
+    /**
+     * @deprecated Please use isLine instead of isLink, this method is compatible with older api versions.
+     * @param el
+     */
+    isLink(el: HTMLElement): RGLink | undefined;
+}

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

@@ -0,0 +1,53 @@
+import { ReactiveDataStores, ReactiveDataUpdaters, RGGraphData, RGOptions } from '../../types';
+import { RelationGraphWith1View } from './RelationGraphWith1View';
+/**
+ * Data handling class for relation-graph component integrated with different data reactive frameworks
+ */
+export declare class RelationGraphWith2Data extends RelationGraphWith1View {
+    constructor();
+    private _initRawPropertyFn;
+    /**
+     * [Used internally by relation-graph] Set reactive data objects
+     * @param graphData
+     * @param reactiveData
+     * @inner
+     */
+    setReactiveData4Vue2(graphData: RGGraphData, reactiveOptions: RGOptions, runtimeData: any, initRawPropertyFn: (item: any, propertyName: string, initialValue: any) => void): void;
+    /**
+     * [Used internally by relation-graph] Set reactive data objects
+     * @param graphData
+     * @param reactiveData
+     * @inner
+     */
+    setReactiveData4Vue3(dataStores: ReactiveDataStores, graphData: RGGraphData, reactiveOptions: RGOptions, runtimeData: any, initRawPropertyFn: (item: any, propertyName: string, initialValue: any) => void): void;
+    /**
+     *
+     * @inner
+     * @param dataStores
+     * @param updateViewHook
+     */
+    setReactiveData4React(dataStores: ReactiveDataStores, updateViewHook: () => void): void;
+    dataStores: {
+        optionsStore: any;
+        shouldRenderNodesStore: any;
+        shouldRenderLinesStore: any;
+        shouldRenderFakeLinesStore: any;
+        optionsRef?: any;
+        shouldRenderNodesRef?: any;
+        shouldRenderLinesRef?: any;
+        shouldRenderFakeLinesRef?: any;
+        textContainer4NormalRef?: any;
+        textContainer4FakeLineRef?: any;
+    };
+    /**
+     * @inner
+     * @param dataStores
+     * @param updaters
+     */
+    setReactiveData4Svelte(dataStores: ReactiveDataStores, updaters: ReactiveDataUpdaters): void;
+    /**
+     * Generate a unique Node id relative to the current existing nodes
+     * @param idLength The minimum length of the id, default is 5
+     */
+    generateNewNodeId(idLength?: number): string;
+}

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

@@ -0,0 +1,85 @@
+import { RGFakeLine, RGLine, RGLink, RGNode } from '../../types';
+import { RelationGraphWith2Data } from './RelationGraphWith2Data';
+/**
+ * The instance class of the relation-graph component, providing read-only API methods based on data
+ */
+export declare class RelationGraphWith2Data1Getter extends RelationGraphWith2Data {
+    constructor();
+    /**
+     * Get current options
+     * @return options RGOptionsFull
+     */
+    getOptions(): import('../../types').RGOptionsFull;
+    /**
+     * Get node by nodeId
+     * @param nodeId
+     * @return RGNode | undefined
+     */
+    getNodeById(nodeId: string): RGNode | undefined;
+    /**
+     * Get line by lineId
+     * @param lineId
+     * @return RGLine | undefined
+     */
+    getLineById(lineId: string): RGLine | undefined;
+    /**
+     * Get link by lineId
+     * @param lineId
+     * @return RGLink | undefined
+     */
+    getLinkByLineId(lineId: string): RGLink | undefined;
+    /**
+     * Get link by line
+     * @param line
+     * @return RGLink | undefined
+     */
+    getLinkByLine(line: RGLine): RGLink | undefined;
+    /**
+     * Get all lines
+     * @return RGLine[]
+     */
+    getLines(): RGLine[];
+    /**
+     * @deprecated Please use getFakeLineById instead of getElementLineById, this method is compatible with older api versions.
+     * @param elLineId
+     */
+    getElementLineById(elLineId: string): RGFakeLine | undefined;
+    /**
+     * @deprecated Please use getFakeLines instead of getElementLines, this method is compatible with older api versions.
+     */
+    getElementLines(): RGLine[];
+    /**
+     * Get all fake lines
+     * @return RGFakeLine[]
+     */
+    getFakeLines(): RGFakeLine[];
+    /**
+     * Get fake line by lineId
+     * @param lineId
+     * @return RGFakeLine | undefined
+     */
+    getFakeLineById(lineId: string): RGFakeLine | undefined;
+    /**
+     * Get all nodes
+     * @return RGNode[]
+     */
+    getNodes(): RGNode[];
+    /**
+     * Get all links
+     * @return RGLink[]
+     */
+    getLinks(): RGLink[];
+    /**
+     * Get all links, Inlcuding fakeLine links
+     * @return RGLink[]
+     */
+    protected _getAllLinks(): RGLink[];
+    private getNodeByTargetId;
+    protected _getFakeLineLinks(): RGLink[];
+    /**
+     * Get all connect targets
+     * @return RGLineTarget[]
+     */
+    getConnectTargets(): import('../../types').RGConnectTargetData[];
+    getConnectTargetById(targetId: string): import('../../types').RGConnectTargetData | undefined;
+}

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

@@ -0,0 +1,177 @@
+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
+     * @param options
+     * @return RGNode[]
+     */
+    getNodeRelatedNodes(node: RGNode, options?: {
+        incoming: boolean;
+        outgoing: boolean;
+    }): 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[];
+}