relation-graph-react - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

package.json

 {
   "name": "relation-graph-react",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "relation-graph，Vue 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。Vue component for relationship graph , which can display knowledge graphs, such as organization graph, equity structure graph, group relationship graph, etc.",
@@ -5,0 +5,0 @@ "main": "./relation-graph.umd.js",

types/react.d.ts

@@ -54,2 +54,3 @@ /**
   canvasPlugSlot?: React.FC<{relationGraph: RelationGraphInstance}> | React.ReactNode
+  canvasPlugAboveSlot?: React.FC<{relationGraph: RelationGraphInstance}> | React.ReactNode
   expandHolderSlot?: React.FC<RGNodeExpandHolderProps> | React.ReactNode
@@ -56,0 +57,0 @@ children?: React.ReactNode

types/types/relation-graph-models/layouters/SeeksForceLayouter.d.ts

 import SeeksBaseLayouter from './SeeksBaseLayouter';
-import { RGForceLayoutOptions, RGLayoutOptions, RGNode, RGOptionsFull } from '../types';
-import { RelationGraphFinal } from "../models/RelationGraphFinal";
+import { RGEventNames, RGForceLayoutOptions, RGLayoutOptions, RGNode, RGOptionsFull } from '../types';
+import { RelationGraphFinal } from '../models/RelationGraphFinal';
 type CalcNode = {
@@ -39,8 +39,11 @@ rgNode: RGNode;
     autoLayout(forceLayout?: boolean): void;
-    private layoutFinished;
+    protected layoutFinished(): void;
     protected resetCalcNodes(): void;
-    private calcNodeMap;
-    private forCalcNodes;
+    protected calcNodeMap: WeakMap<RGNode, CalcNode>;
+    protected forCalcNodes: CalcNode[];
     doForceLayout(useTime: number): void;
-    setGraphInstance(graphInstance: RelationGraphFinal): void;
+    protected graphEventHandle(eventName: RGEventNames, ...args: any[]): void;
+    protected _graphEventHandler: any;
+    protected connectToGraphInstance(): void;
+    protected disConnectToGraphInstance(): void;
     calcNodesPosition(): void;
@@ -47,0 +50,0 @@ stop(): void;

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

@@ -1,2 +0,2 @@
-import { RGEventHandler, RGListeners, RGOptions, RGOptionsFull } from '../types';
+import { RGEventEmitHook, RGEventHandler, RGEventNames, RGListeners, RGOptions, RGOptionsFull } from '../types';
 export declare class RelationGraphBase {
@@ -7,15 +7,40 @@ options: RGOptionsFull;
     constructor(options: RGOptions, listeners: RGListeners);
+    /**
+     * 开启或关闭日志打印功能
+     * @param enable
+     */
     enableDebugLog(enable: boolean): void;
-    updateViewHook: () => void;
+    /**
+     * 用于触发更新视图的外部函数（目前仅用于React）
+     */
+    protected updateViewHook: () => void;
+    /**
+     * 用于触发更新视图的外部函数（目前仅用于React）
+     * @param hook
+     */
     setUpdateViewHook(hook: () => void): void;
-    _dataUpdating: boolean;
-    _dataUpdatingNext: boolean;
+    protected _dataUpdating: boolean;
+    protected _dataUpdatingNext: boolean;
     protected _dataUpdated(): void;
     private _doSomethingAfterDataUpdated;
-    eventHandlers: RGEventHandler[];
+    protected eventHandlers: RGEventHandler[];
+    /**
+     * 注册事件处理函数
+     * @param handler: RGEventHandler
+     */
     addEventListener(handler: RGEventHandler): void;
+    /**
+     * 移除事件处理函数
+     * @param handler: RGEventHandler
+     */
     removeEventListener(handler: RGEventHandler): void;
-    emitEvent(eventName: string, object: {
-        [option: string]: any;
-    }): void;
+    protected _hook: RGEventEmitHook;
+    setEventEmitHook(hook: RGEventEmitHook): void;
+    /**
+     * 触发事件
+     * @param eventName 事件名称
+     * @param object 传递给事件处理函数的参数
+     */
+    emitEvent(eventName: RGEventNames, ...args: any[]): boolean | void | import("../types").RGPosition;
+    protected defaultEventHandler(eventName: RGEventNames, ...args: any[]): boolean | void | import("../types").RGPosition;
 }

types/types/relation-graph-models/models/RelationGraphFinal.d.ts

@@ -5,3 +5,6 @@ import { RGListeners, RGOptions } from '../types';
     constructor(options: RGOptions, listeners: RGListeners);
+    /**
+     * [relation-graph内部使用]，这个方法会被调用，用于根据options来初始化一些配置（比如根据options.layout的配置来创建布局器）、获取视口大小等信息。
+     */
     ready(): void;
 }

types/types/relation-graph-models/models/RelationGraphWith1Dom.d.ts

@@ -6,14 +6,35 @@ import { RelationGraphBase } from './RelationGraphBase';
     $canvasDom: HTMLDivElement;
-    resizeObserver: ResizeObserver;
-    resizeListenerMap: WeakMap<WeakKey, any>;
-    nodeMap: WeakMap<WeakKey, any>;
+    protected resizeObserver: ResizeObserver;
+    protected resizeListenerMap: WeakMap<WeakKey, any>;
+    protected nodeMap: WeakMap<WeakKey, any>;
     constructor(options: RGOptions, listeners: RGListeners);
+    /**
+     * [relation-graph内部使用]当RelationGraph组件被挂载后，会调用这个方法，用于在js实例对象中方便对dom进行操作（这里仅仅会获取dom视觉信息并监测器大小位置信息的变化）
+     * @param relationGraphDom:HTMLDivElement RelationGraph容器dom
+     */
     setDom(relationGraphDom: HTMLDivElement): void;
+    /**
+     * [relation-graph内部使用]当RelationGraph组件的画布元素被挂载后，会调用这个方法，用于在js实例对象中方便对画布dom进行操作（这里仅仅会获取dom视觉信息并监测器大小位置信息的变化）
+     * @param relationGraphDom:HTMLDivElement 画布dom
+     */
     setCanvasDom(canvasDom: HTMLDivElement): void;
+    /**
+     * 获取RelationGraph组件dom
+     * @return relationGraphDom:HTMLDivElement RelationGraph容器dom
+     */
     getBoundingClientRect(): DOMRect;
-    addResizeListener(dom: HTMLElement, callback: (width: number, height: number) => void): void;
+    protected addResizeListener(dom: HTMLElement, callback: (width: number, height: number) => void): void;
     private _onNodeResize;
+    /**
+     * [relation-graph内部使用]用于Node组件在挂载完成时，调用此方法可以将Node的dom大小变化监测起来。
+     * @param dom Node组件对应的dom元素
+     * @param node Node的js数据对象
+     */
     addNodeResizeListener(dom: HTMLElement, node: RGNode): void;
+    /**
+     * [relation-graph内部使用]在Node 组件被销毁时，调用此方法移除对Node对应的dom元素的监测
+     * @param dom Node组件对应的dom元素
+     */
     removeNodeResizeListener(dom: HTMLElement): void;
-    removeResizeListener(dom: HTMLElement): void;
+    protected removeResizeListener(dom: HTMLElement): void;
 }

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

 import { JsonLine, JsonNode, RGElementLine, RGGraphData, RGGraphReactiveData, RGJsonData, RGLayouter, RGLayoutOptions, RGLine, RGLineColorItem, RGLink, RGListeners, RGNode, RGOptions } from '../types';
 import { RelationGraphWith1Dom } from './RelationGraphWith1Dom';
 export declare class RelationGraphWith2Data extends RelationGraphWith1Dom {
+    /**
+     * RelationGraph 中管理的所有数据，包括所有节点RGNode、所有关系RGLink、当前的根节点、所有的元素连线elementLines
+     */
     graphData: RGGraphData;
-    seeksNodeIdIndex: number;
+    protected seeksNodeIdIndex: number;
+    /**
+     * [relation-graph内部使用]当前所有线条涉及的颜色
+     */
     allLineColors: RGLineColorItem[];
     userLayouerClass?: RGLayouter;
+    /**
+     * [relation-graph内部使用]当前的布局器
+     */
     layouter: RGLayouter;
+    /**
+     * [relation-graph内部使用]当前RelationGraph组件的响应式数据对象
+     */
     reactiveData: RGGraphReactiveData;
     constructor(options: RGOptions, listeners: RGListeners);
+    /**
+     * [relation-graph内部使用]设置响应式数据对象
+     * @param graphData
+     * @param reactiveData
+     */
     setReactiveData(graphData: RGGraphData, reactiveData: RGGraphReactiveData): void;
+    /**
+     * [relation-graph内部使用]设置响应式数据对象
+     * @param graphData
+     * @param reactiveData
+     */
     setReactiveDataVue3(graphData: RGGraphData, reactiveData: RGGraphReactiveData): void;
@@ -16,38 +38,138 @@ disableNextLayoutAnimation: boolean;
     protected _initLayoutByLayoutOptions(layoutOptions: RGLayoutOptions): void;
-    initLayouter(): void;
+    protected initLayouter(): void;
     protected _setJsonData(jsonData: RGJsonData, resetViewSize?: boolean): Promise<void>;
+    /**
+     * 清空RelationGraph中的所有数据，包括节点、线条、元素连线、根节点
+     */
     clearGraph(): Promise<void>;
+    /**
+     * 清空所有元素连线elementLines
+     */
     clearElementLines(): Promise<void>;
+    /**
+     * 生成一个相对于当前已有节点不重复的Node id
+     * @param idLength id的最小长度 默认为5
+     */
     generateNewNodeId(idLength?: number): string;
-    generateNewUUID(): string;
-    loadNodes(_nodes: JsonNode[]): void;
-    loadLines(_lines: JsonLine[]): void;
+    /**
+     * 生成一个大概率不重复的 id，不重复的概率取决于参数idLength(id的长度)
+     * @param idLength id的长度 默认为5
+     */
+    generateNewUUID(idLength?: number): string;
+    protected loadNodes(_nodes: JsonNode[]): void;
+    protected loadLines(_lines: JsonLine[]): void;
     protected nextLineId: number;
-    protected getNextLineId(thisLink: RGLink): any;
+    protected getNextLineId(thisLink: RGLink): string;
+    /**
+     * 将树状结构的数据展开为扁平化的数据
+     * @param orign_nodes 树状结构数据，如：[{id:'a',children:[{id:'a-1'},{id:'a-1', children: [{id:'a-1-1'}]}]}]
+     * @param parentNode 请传递null
+     * @param nodes_collect 被展开的所有节点将会被存到这里
+     * @param lines_collect 被展开的所有线条将会被存到这里
+     */
     flatNodeData(orign_nodes: JsonNode[], parentNode: JsonNode | null, nodes_collect: JsonNode[], lines_collect: JsonLine[]): void;
-    loadGraphJsonData(jsonData: RGJsonData): void;
-    getLineArrow(_color: string | undefined, isStartArrow?: boolean, checked?: boolean): string;
+    protected loadGraphJsonData(jsonData: RGJsonData): void;
+    protected getLineArrow(_color: string | undefined, isStartArrow?: boolean, checked?: boolean): string;
+    /**
+     * 获取所有节点对象
+     */
     getNodes(): RGNode[];
+    /**
+     * 获取所有关系对象，注意这里的Link不是线条
+     * 线条(Line)：其中的lines是指节点之间的连线，图谱会根据这些line来生成线条。
+     * 关系(Link)：同时图谱会根据line来生成用于总结节点之间的关联的Link(两个有直接关联的节点之间有且只有一个Link，节点之间的所有关系线(Line[])，都会被放在link.relations中)。
+     * 你可以这样来遍历并获取所有线条Line:
+     * const allLines: RGLine[] = [];
+     * for (const link of graphInstance.getLinks()) {
+     *    for (const line of link.relations) {
+     *         allLines.push(line);
+     *    }
+     * }
+     * // Line对象拥有JsonLine的所有属性，你可以更改这些属性。如：更改所有线条颜色为红色：
+     * for (const line of allLines) {
+     *    line.color = 'red';
+     * }
+     */
     getLinks(): RGLink[];
+    /**
+     * 将一个节点对象RGNode转换为可被Json序列化的对象
+     * @param nodeJson:JsonNode
+     */
     transRGNodeToJsonObject(node: RGNode): JsonNode;
+    /**
+     * 将一个关系对象RGLink转换为可被Json序列化的对象
+     * @param lines: JsonLine[]
+     */
     transRGLinkToJsonObject(link: RGLink): JsonLine[];
+    /**
+     * 将一个线条对象RGLine转换为可被Json序列化的对象
+     * @param lineJson: JsonLine
+     */
     transRGLineToJsonObject(line: RGLine): JsonLine;
-    getGraphJsonData(): {
-        rootId: string;
-        nodes: JsonNode[];
-        lines: JsonLine[];
-    };
+    /**
+     * 获取当前图谱中的所有节点和线条数据。
+     * @param graphJsonData: RGJsonData
+     */
+    getGraphJsonData(): RGJsonData;
+    /**
+     * 获取当前图谱的配置信息
+     */
     getGraphJsonOptions(): {};
+    /**
+     * 将当前图谱的配置信息和json数据打印到控制台
+     */
     printGraphJsonData(): void;
+    /**
+     * 根据节点id获取节点对象
+     * @param nodeId: RGNode
+     */
     getNodeById(nodeId: string): RGNode;
+    /**
+     * 根据关系id获取关系RGLink对象
+     * @param link: RGLink
+     */
     getLinkById(linkId: string): RGLink;
+    /**
+     * 根据线条id获取线条RGLine对象
+     * @param line: RGLine
+     */
     getLinkByLineId(lineId: string): RGLink;
+    /**
+     * 新增多个节点
+     * @param nodes: JsonNode[]
+     */
     addNodes(nodes: JsonNode[]): void;
+    /**
+     * 新增多个线条
+     * @param lines: JsonLine[]
+     */
     addLines(lines: JsonLine[]): void;
+    /**
+     * 新增多个元素连线
+     * @param lines:JsonLine[]
+     */
     addElementLines(lines: JsonLine[]): void;
+    /**
+     * 根据元素连线id获取元素连线
+     * @param elLink: RGLink
+     */
     getElementLineById(elLineId: string): RGLink;
+    /**
+     * 获取所有元素连线的线条
+     */
     getElementLines(): RGLine[];
+    /**
+     * 删除元素连线
+     * @param elementLine: RGElementLine
+     */
     removeElementLine(elementLine: RGElementLine): void;
+    /**
+     * 根据删除元素连线id删除元素连线
+     * @param elementLineId: string 元素连线id
+     */
     removeELementLineById(elementLineId: string): void;
     private elLineUpdating;
+    /**
+     * 跟新所有元素连线的位置信息
+     */
     updateElementLines(): void;
@@ -77,3 +199,3 @@ private _updateElementLines;
     findGroupNodes(node: RGNode, childs: RGNode[]): void;
-    resetViewSize(): void;
+    protected resetViewSize(zoomTo100?: boolean): void;
     refreshNVAnalysisInfo(): void;
@@ -80,0 +202,0 @@ getStuffSize(nodes?: RGNode[]): {

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

@@ -1,25 +0,3 @@
-import { JsonLine, JsonNode, RGJunctionPoint, RGLine, RGLineShape, RGLink, RGListeners, RGNode, RGOptions, RGPosition, RGSelectionView, RGUserEvent } from '../types';
+import { CreatingLinePlotOptions, CreatingNodePlotOptions, RGJunctionPoint, RGLine, RGLineShape, RGLink, RGListeners, RGNode, RGOnCreateLineCallback, RGOptions, RGPosition, RGSelectionView, RGUserEvent } from '../types';
 import { RelationGraphWith6Effect } from './RelationGraphWith6Effect';
-export type RGOnCreateLineCallback = (from: RGNode, to: RGNode | RGPosition, lineTemplate?: JsonLine) => void;
-export interface JsonLineTemplate extends JsonLine {
-    from?: string;
-    to?: string;
-}
-export interface JsonNodeTemplate extends JsonNode {
-    id?: string;
-}
-export type CreatingLinePlotOptions = {
-    onCreateLine: RGOnCreateLineCallback | undefined;
-    template?: JsonLineTemplate;
-    fromNode?: JsonNodeTemplate;
-};
-export type RGOnCreateNodeCallback = (from: RGNode, to: RGNode | RGPosition, lineTemplate: JsonLine) => void;
-export type CreatingNodePlotOptions = {
-    disableClickCreate?: boolean;
-    templateText?: string;
-    templateStyleClass?: string;
-    templateNode?: JsonNode;
-    templateMove?: (x: number, y: number) => void;
-    onCreateNode: (x: number, y: number) => void;
-};
 export declare class RelationGraphWith7Event extends RelationGraphWith6Effect {
@@ -26,0 +4,0 @@ constructor(options: RGOptions, listeners: RGListeners);

types/types/relation-graph-models/models/RelationGraphWith91Editing.d.ts

 import { RelationGraphWith9EasyView } from './RelationGraphWith9EasyView';
-import { JsonLine, RGJunctionPoint, RGLine, RGLink, RGNode, RGResizeHandlePosition, RGSelectionView, RGUserEvent, RGWidgetPosition } from '../types';
+import { JsonLineTemplate, RGJunctionPoint, RGLine, RGLink, RGNode, RGResizeHandlePosition, RGSelectionView, RGUserEvent, RGWidgetPosition } from '../types';
 export declare class RelationGraphWith91Editing extends RelationGraphWith9EasyView {
@@ -43,5 +43,5 @@ setEditingNodes(nodes: RGNode[]): void;
     startMoveLineVertex(type: 'start' | 'end', $event: RGUserEvent): void;
-    startCreateLineByTemplate(type: RGWidgetPosition, lineTemplate: JsonLine | undefined, $event: RGUserEvent): void;
+    startCreateLineByTemplate(type: RGWidgetPosition, lineTemplate: JsonLineTemplate | undefined, $event: RGUserEvent): void;
     onLineVertexBeDropped(type: RGJunctionPoint, $event: RGUserEvent): void;
     startMoveLineText($event: RGUserEvent): void;
 }

types/types/relation-graph-models/types.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { RelationGraphFinal } from "./models/RelationGraphFinal";
+import { RelationGraphFinal } from './models/RelationGraphFinal';
 export type RGJunctionPoint = 'border' | 'lr' | 'tb' | 'ltrb' | 'left' | 'top' | 'right' | 'bottom';
@@ -95,2 +95,3 @@ export type RGResizeHandlePosition = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'bl' | 'br';
     invisiable?: boolean;
+    zIndex?: number;
     flashing?: boolean;
@@ -350,5 +351,30 @@ dragging?: boolean;
 }
-export type RGEventHandler = (eventName: string, object: {
-    [option: string]: any;
-}) => void;
+export declare enum RGEventNames {
+    onNodeClick = "onNodeClick",
+    onNodeExpand = "onNodeExpand",
+    onNodeCollapse = "onNodeCollapse",
+    onLineClick = "onLineClick",
+    onImageDownload = "onImageDownload",
+    onImageSaveAsFile = "onImageSaveAsFile",
+    onNodeDragStart = "onNodeDragStart",
+    onNodeDragEnd = "onNodeDragEnd",
+    onNodeDragging = "onNodeDragging",
+    onCanvasDragEnd = "onCanvasDragEnd",
+    onContextmenu = "onContextmenu",
+    onFullscreen = "onFullscreen",
+    onCanvasClick = "onCanvasClick",
+    onCanvasSelectionEnd = "onCanvasSelectionEnd",
+    onZoomEnd = "onZoomEnd",
+    viewResize = "viewResize",
+    nodeDragStart = "nodeDragStart",
+    nodeDragging = "nodeDragging",
+    nodeDragEnd = "nodeDragEnd",
+    fullscreen = "fullscreen",
+    onResizeStart = "onResizeStart",
+    onResizeEnd = "onResizeEnd",
+    onLineVertexDropped = "onLineVertexDropped",
+    beforeChangeLayout = "beforeChangeLayout"
+}
+export type RGEventHandler = (eventName: RGEventNames, ...args: any[]) => void | any;
+export type RGEventEmitHook = (eventName: RGEventNames, ...args: any[]) => void | any;
 export interface RGV2Options extends RGOptions {
@@ -531,10 +557,6 @@ useHorizontalView?: boolean;
     getInstance(): RelationGraphInstance;
-    setOptions(options: RGOptions, callback?: (graphInstance: RelationGraphInstance) => void): void;
     setJsonData(jsonData: RGJsonData, reLayoutOrCallback?: boolean | RGRefreshCallback, callback?: (graphInstance: RelationGraphInstance) => void): void;
     appendJsonData(jsonData: RGJsonData, reLayout?: boolean | RGRefreshCallback, callback?: (graphInstance: RelationGraphInstance) => void): void;
-    onGraphResize(): void;
-    refresh(callback?: RGRefreshCallback): void;
 }
-export interface RelationGraphComponent extends RelationGraphExpose {
-}
+export type RelationGraphComponent = RelationGraphExpose;
 export interface RGNodeSlotProps {
@@ -567,6 +589,25 @@ node: RGNode;
 }
-export interface JsonLineLike extends JsonLine {
+export type RGOnCreateLineCallback = (from: RGNode, to: RGNode | RGPosition, lineTemplate?: JsonLine) => void;
+export interface JsonLineTemplate extends JsonLine {
     from?: string;
     to?: string;
 }
+export interface JsonNodeTemplate extends JsonNode {
+    id?: string;
+}
+export type JsonLineLike = JsonLineTemplate;
+export type CreatingLinePlotOptions = {
+    onCreateLine: RGOnCreateLineCallback | undefined;
+    template?: JsonLineTemplate;
+    fromNode?: JsonNodeTemplate;
+};
+export type RGOnCreateNodeCallback = (from: RGNode, to: RGNode | RGPosition, lineTemplate: JsonLine) => void;
+export type CreatingNodePlotOptions = {
+    disableClickCreate?: boolean;
+    templateText?: string;
+    templateStyleClass?: string;
+    templateNode?: JsonNodeTemplate;
+    templateMove?: (x: number, y: number) => void;
+    onCreateNode: (x: number, y: number, nodeTemplate?: JsonNodeTemplate) => void;
+};
 export interface RGCreateLineHandleProps {
@@ -573,0 +614,0 @@ lineTemplate?: JsonLineLike;

types/types/relation-graph-models/utils/RGCommon.d.ts

@@ -9,9 +9,17 @@ export declare const getScreenWidth: () => number;
 export declare const getClientCoordinate: (e: MouseEvent | TouchEvent) => {
-    clientX: number;
-    clientY: number;
+    clientX: any;
+    clientY: any;
 };
 export declare const devLog: (...args: any[]) => void;
+export declare const deprecatedWaring: (...args: any[]) => void;
 export declare const findParentByClassName: (el: HTMLElement | null, clasName: string, stopClass: string) => HTMLElement | null;
 export declare const sleep: (time: number) => Promise<void>;
 export declare const getNumberOption: (v: any) => any;
+/**
+ * 注意：
+ *    根据MIT许可证的规定，允许您自由地使用、修改和分发源代码。您可以根据自己的需求对源代码进行更改。
+ *    然而，您仍然需要遵守MIT许可证的其他规定，如保留版权声明和免责声明等
+ *    relation-graph和relation-graph的网址是它的版权声明，请勿注释掉这一行信息
+ * @param platform
+ */
 export declare const relationGraphVersionInfo: (platform?: string) => void;

No alert changes

Improved metrics

Total package byte prevSize

684804

increased by3.06%

Lines of code

9511

increased by3.62%

No dependency changes