@relation-graph/react 3.0.0 → 3.0.1

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

@@ -0,0 +1,91 @@
+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;
+    /**
+     * 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;
+    };
+    /**
+     * 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

@@ -1,398 +1,51 @@
-import { JsonLine, JsonNode, RGConnectTarget4NodePoint, RGFakeLine, RGFakeLineTargetRender, RGGenerateLineConfig, RGGraphData, RGGraphReactiveData, RGJsonData, RGJunctionPoint, RGLine, RGLineTarget, RGLink, RGListeners, RGNode, RGRectTarget, RGOptions, RGPosition } from '../types';
-import { RelationGraphWith1Dom } from './RelationGraphWith1Dom';
-export declare class RelationGraphWith2Data extends RelationGraphWith1Dom {
-    /**
-     * All data managed in RelationGraph, including all nodes RGNode, all relationships RGLink, the current root node, and all element lines elementLines
-     */
-    graphData: RGGraphData;
-    runtimeDATA4Links: RGLink[];
-    runtimeDATA4NodeMap: Record<string, RGNode>;
-    runtimeDATA4ConnectTargets: RGConnectTarget4NodePoint[];
-    /**
-     * [Used internally by relation-graph] The reactive data object of the current RelationGraph component
-     */
-    reactiveData: RGGraphReactiveData;
-    constructor(options: RGOptions, listeners: RGListeners);
+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, reactiveData: RGGraphReactiveData, runtimeData: any): void;
-    runtimeDATA4ShouldRenderGraphData: {
-        nodes: RGLineTarget[];
-        lines: RGLine[];
-    };
+    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
-     */
-    setReactiveData4Vue3(graphData: RGGraphData, reactiveData: RGGraphReactiveData, runtimeData: any): void;
-    protected _setOptions(options: RGOptions): void;
-    protected _setJsonData(jsonData: RGJsonData, resetViewSize?: boolean): void;
+     * @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;
+    };
     /**
-     * Clear all data in RelationGraph, including nodes, lines, element lines, and the root node
+     * @inner
+     * @param dataStores
+     * @param updaters
      */
-    clearGraph(): void;
-    clearFakeLines(): void;
-    clearElementLines(): void;
+    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;
-    /**
-     * 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;
-    protected prevAddNodeTimestamp: number;
-    /**
-     * Convert JsonNode to RGNode object and add it to the graph
-     * @param _nodes
-     * @protected
-     */
-    protected loadNodes(_nodes: JsonNode[]): void;
-    /**
-     * Convert JsonLine to RGLine object and add it to the graph
-     * @param _lines
-     * @protected
-     */
-    protected loadLines(_lines: JsonLine[]): void;
-    private updateLinks;
-    /**
-     * 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;
-    protected loadGraphJsonData(jsonData: RGJsonData): void;
-    protected getLineArrow(_color: string | undefined, isStartArrow?: boolean, checked?: boolean): string;
-    /**
-     * Get all node objects
-     */
-    getNodes(): RGNode[];
-    getShouldRenderNodes(): RGNode[] | RGLineTarget[];
-    protected calcShouldRenderNodes(): RGNode[];
-    getShouldRenderLines(): RGLine[];
-    protected calcShouldRenderLines(): RGLine[];
-    private mutationObserver4Nodes?;
-    private mutationObserver4CanvasSlotBehind?;
-    private mutationObserver4CanvasSlotAbove?;
-    private canvasConnectTargetsMap;
-    private reinitMutationObservers;
-    protected destroyMutationObserver(): void;
-    private updateConnectTargetsOnCanvas;
-    /**
-     * 供外部调用，更新指定节点的连接点位置，不适用于高频次调用
-     * @param nodeId
-     */
-    updateConnectTargetsByNodeId(nodeId: string): void;
-    private updateConnectTargetsOnNode;
-    private updateConnectTargetList;
-    private updateConnectTargetOffset;
-    private _onConnectTargetMounted;
-    private nodeConnectTargetsMap;
-    private getNodeElByNodeId;
-    private getNodeElByChildrenTarget;
-    getConnectTargetById(targetId: string): RGConnectTarget4NodePoint | undefined;
-    registerConnectTarget(connectTargetEl: HTMLDivElement, targetId: string, targetType: string, junctionPoint: RGJunctionPoint, targetData?: {}): RGConnectTarget4NodePoint | undefined;
-    unregisterConnectTarget(targetId: string): void;
-    private fakeLineTargetRender;
-    setFakeLineTargetRender(fakeLineTargetRender: RGFakeLineTargetRender): void;
-    generateCreatingLineConfig(): RGGenerateLineConfig;
-    private getFakeLineTargetNode;
-    private runtimeDATA4ElLineTargets;
-    getFakeLineTarget(targetType: string, targetId: string, fakeLine: RGFakeLine): RGLineTarget | undefined;
-    generateLineConfig(line: RGLine): RGGenerateLineConfig | false;
-    generateFakeLineConfig(fakeLine: RGFakeLine): RGGenerateLineConfig | false;
-    getShouldRenderFakeLines(): RGFakeLine[];
-    /**
-     * Get all relationship objects, note that here Link is not a line.
-     * Line: The lines refer to the connections between nodes, and the graph will generate lines based on these lines.
-     * Relationship (Link): The graph will also generate a Link to summarize the associations between nodes based on the lines (there is only one Link between two directly related nodes, and all relationship lines (Line[]) between nodes will be placed in link.relations).
-     * You can traverse and get all lines like this:
-     * const allLines: RGLine[] = [];
-     * for (const link of graphInstance.getLinks()) {
-     *    allLines.push(link.line);
-     * }
-     * // The Line object has all the properties of JsonLine, you can change these properties. For example, change the color of all lines to red:
-     * for (const line of allLines) {
-     *    line.color = 'red';
-     * }
-     */
-    getLinks(): RGLink[];
-    getRelatedLinesByNode(node: RGNode): RGLine[];
-    getLinesBetweenNodes(nodes: RGNode[]): RGLine[];
-    /**
-     * Convert an RGNode object to a JSON-serializable object
-     * @param nodeJson: JsonNode
-     */
-    transRGNodeToJsonObject(node: RGNode): JsonNode;
-    /**
-     * Convert an RGLink object to a JSON-serializable object
-     * @param lines: JsonLine[]
-     */
-    transRGLinkToJsonObject(link: RGLink): JsonLine[];
-    /**
-     * Convert an RGLine object to a JSON-serializable object
-     * @param lineJson: JsonLine
-     */
-    transRGLineToJsonObject(line: RGLine): JsonLine;
-    /**
-     * Get all nodes and lines data in the current graph.
-     * @param graphJsonData: RGJsonData
-     */
-    getGraphJsonData(): RGJsonData;
-    /**
-     * Get the configuration information of the current graph
-     */
-    getGraphJsonOptions(): {};
-    /**
-     * Print the current graph configuration and JSON data to the console
-     */
-    printGraphJsonData(): void;
-    /**
-     * Get the node object by node id
-     * @param nodeId: RGNode
-     */
-    getNodeById(nodeId: string): RGNode | undefined;
-    /**
-     * Add node
-     * @param node: JsonNode
-     */
-    addNode(node: JsonNode): void;
-    /**
-     * Add multiple nodes
-     * @param nodes: JsonNode[]
-     */
-    addNodes(nodes: JsonNode[]): void;
-    /**
-     * Get the RGLink object by relationship id
-     * @param linkId: string
-     */
-    getLinkById(linkId: string): RGLink | undefined;
-    /**
-     * Get the RGLink object by line id
-     * @param line: RGLine
-     */
-    getLinkByLineId(lineId: string): RGLink | undefined;
-    /**
-     * Get the RGLink object by line
-     * @param line: RGLine
-     */
-    getLinkByLine(line: RGLine): RGLink | undefined;
-    /**
-     * Get the RGLine object by line id
-     * @param line: RGLine
-     */
-    getLineById(lineId: string): RGLine | undefined;
-    getLines(): RGLine[];
-    /**
-     * Add line
-     * @param line: JsonLine
-     */
-    addLine(line: JsonLine): void;
-    /**
-     * Add multiple lines
-     * @param lines: JsonLine[]
-     */
-    addLines(lines: JsonLine[]): void;
-    /**
-     * Remove the specified RGLine object
-     * @param line
-     */
-    removeLine(line: RGLine): void;
-    /**
-     * Remove the specified RGLine object by line id
-     * @param lineId
-     */
-    removeLineById(lineId: string): void;
-    /**
-     * Remove the RGLink object from the graph
-     * @param link
-     */
-    removeLink(link: RGLink): void;
-    /**
-     * Delete the Link object by its id, usually used to delete all lines and data relationships between two nodes
-     * @param linkId
-     */
-    removeLinkById(linkId: string): void;
-    getFakeLines(): RGFakeLine[];
-    /**
-     * Add multiple lines
-     * @param lines: JsonLine[]
-     */
-    addFakeLines(lines: RGFakeLine[]): void;
-    /**
-     * Remove the specified RGLine object
-     * @param line
-     */
-    removeFakeLine(line: RGFakeLine): void;
-    getFakeLineById(lineId: string): RGFakeLine | undefined;
-    /**
-     * Remove the specified RGLine object by line id
-     * @param lineId
-     */
-    removeFakeLineById(lineId: string): void;
-    /**
-     * Add multiple element lines
-     * @param lines: JsonLine[]
-     */
-    addElementLines(lines: JsonLine[]): void;
-    /**
-     * 根据元素连线id获取元素连线
-     * @param elLink: RGLink
-     */
-    getElementLineById(elLineId: string): RGFakeLine | undefined;
-    /**
-     * Get all element lines
-     */
-    getElementLines(): RGLine[];
-    /**
-     * Delete element line by element line id
-     * @param elementLineId: string Element line id
-     */
-    removeELementLineById(elementLineId: string): void;
-    private elLineUpdating;
-    /**
-     * Update the position information of all element lines
-     */
-    updateElementLines(): void;
-    private _updateElementLines;
-    private updateCanvasBoxInfo;
-    private updateElementTarget;
-    private _canvasBoxXY;
-    private _updateElementLinePosition;
-    getElementPosition(elementId: string): {
-        x: number;
-        y: number;
-    };
-    /**
-     * Remove a node from the graph
-     * @param nodeId
-     */
-    removeNodeById(nodeId: string): void;
-    /**
-     * Remove a node from the graph
-     * @param node
-     */
-    removeNode(node: RGNode): void;
-    getNodeRelatedNodes(node: RGNode): RGNode[];
-    getNodeRelatedNodes4From(node: RGNode): RGNode[];
-    getNodeRelatedNodes4To(node: RGNode): RGNode[];
-    private beforeNodeBeRemove;
-    /**
-     * Set the coordinates of a node. Generally, you do not need to call this method; you can directly modify the x and y properties of the node.
-     * @param node
-     * @param x
-     * @param y
-     */
-    setNodePosition(node: RGNode, x: number, y: number): void;
-    getGraphOffet(): {
-        offset_x: number;
-        offset_y: number;
-    };
-    /**
-     * Display the specified canvas coordinates in the center of the visible area
-     * @param x
-     * @param y
-     */
-    setCanvasCenter(x: number, y: number): void;
-    private canvasDragging;
-    /**
-     * Set the canvas offset, used when dragging the canvas
-     * @param x
-     * @param y
-     */
-    setCanvasOffset(x: number, y: number): void;
-    /**
-     * Oh my, this seems to be a duplicate method, it seems to have the same effect as the getGroupNodesByNode method
-     * @param node
-     * @param groupNodes
-     */
-    findGroupNodes(node: RGNode, groupNodes?: RGNode[]): RGNode[];
-    /**
-     * Get all nodes that have a direct or indirect relationship with a given node
-     * @param node
-     * @param groupNodes Used to collect the found nodes
-     * @return All nodes that have a direct or indirect relationship with the node, including the node itself
-     */
-    getGroupNodesByNode(node: RGNode, groupNodes?: RGNode[]): RGNode[];
-    getNetworkNodesByNode(node: RGNode, networkNodes?: RGNode[]): RGNode[];
-    getDescendantNodes(node: RGNode): RGNode[];
-    /**
-     * 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
-     */
-    resetViewSize(zoomTo100?: boolean): void;
-    /**
-     * This is an internal method, generally not needed to be called
-     */
-    updateViewBoxInfo(): void;
-    /**
-     * Calculate the plane space information occupied by all nodes
-     * @param nodes Optional, if not specified, it will be calculated based on all nodes
-     */
-    protected getStuffSize(nodes?: (RGNode | RGRectTarget)[]): {
-        width: number;
-        height: number;
-        minX: number;
-        minY: number;
-        maxX: number;
-        maxY: number;
-    };
-    getNodesViewInfo(nodes?: (RGNode | RGRectTarget)[]): {
-        width: number;
-        height: number;
-        minX: number;
-        minY: number;
-        maxX: number;
-        maxY: number;
-    };
-    /**
-     * 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;
-    };
-    /**
-     * Print the current graph configuration information to the console
-     */
-    printOptions(): void;
-    /**
-     * Print all data of the current graph to the console
-     */
-    printData(): 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;
-    /**
-     * Recalculate all visible nodes
-     * @param force
-     */
-    updateShouldRenderGraphData(force?: boolean): void;
-    protected _updateShouldRenderGraphData(): void;
-    updateNodesVisibleProperty(): void;
-    setCanvasMoveMode(newValue: boolean): void;
-    defaultLineConnectEndHandler(from: RGNode | RGLineTarget, to: RGNode | RGLineTarget | RGPosition, newLine?: JsonLine): void;
-    /**
-     * 在线条的起点或者终点发生变化后，重新修正 isReverse，因为在开始拖动线条端点时，有可能会修改这个属性。这一步完成后才会触发 onLineBeCreated事件，在onLineBeCreated事件中可以无需考虑 isReverse属性，直接添加线条
-     * @param from
-     * @param to
-     * @param newLine
-     */
-    defaultLineVertexBeChangedHandler(from: RGNode, to: RGNode | RGPosition, newLine?: JsonLine): void;
 }

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

@@ -0,0 +1,77 @@
+import { RGFakeLine, RGLine } 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): import('../../types').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): import('../../types').RGLink | undefined;
+    /**
+     * Get link by line
+     * @param line
+     * @return RGLink | undefined
+     */
+    getLinkByLine(line: RGLine): import('../../types').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(): import('../../types').RGNode[];
+    /**
+     * Get all links
+     * @return RGLink[]
+     */
+    getLinks(): import('../../types').RGLink[];
+    /**
+     * Get all connect targets
+     * @return RGLineTarget[]
+     */
+    getConnectTargets(): import('../../types').RGConnectTarget4NodePoint[];
+}