@relation-graph/react 3.0.0 → 3.0.1

package/types/packages/platforms/vue3/src/relation-graph/src/core4vue3/editing/RGConnectSource.vue.d.ts

@@ -14,10 +14,10 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     onConnectStart: (fromNode?: RGNode | RGLineTarget | undefined, newLineTemplate?: Partial<JsonLine> | undefined, event?: RGUserEvent | undefined) => void;
-    onLineConnectEnd: (fromNode: RGNode | RGLineTarget, toNode: import('packages/relation-graph-models/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => void;
+    onLineConnectEnd: (fromNode: RGNode | RGLineTarget, toNode: import('packages/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {}>>> & Readonly<{
     onOnConnectStart?: ((fromNode?: RGNode | RGLineTarget | undefined, newLineTemplate?: Partial<JsonLine> | undefined, event?: RGUserEvent | undefined) => any) | undefined;
-    onOnLineConnectEnd?: ((fromNode: RGNode | RGLineTarget, toNode: import('packages/relation-graph-models/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => any) | undefined;
+    onOnLineConnectEnd?: ((fromNode: RGNode | RGLineTarget, toNode: import('packages/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/types/packages/platforms/vue3/src/relation-graph/src/core4vue3/editing/RGConnectTarget.vue.d.ts

@@ -20,13 +20,13 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    onLineVertexBeDropped: (fromNode: RGNode | RGLineTarget, toNode: import('packages/relation-graph-models/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => void;
+    onLineVertexBeDropped: (fromNode: RGNode | RGLineTarget, toNode: import('packages/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => void;
     onDragConnectStart: (newLineTemplate: Partial<JsonLine>, event: RGUserEvent) => void;
-    onDragConnectEnd: (fromNode: RGNode | RGLineTarget, toNode: import('packages/relation-graph-models/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => void;
+    onDragConnectEnd: (fromNode: RGNode | RGLineTarget, toNode: import('packages/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & Readonly<{
-    onOnLineVertexBeDropped?: ((fromNode: RGNode | RGLineTarget, toNode: import('packages/relation-graph-models/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => any) | undefined;
+    onOnLineVertexBeDropped?: ((fromNode: RGNode | RGLineTarget, toNode: import('packages/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => any) | undefined;
     onOnDragConnectStart?: ((newLineTemplate: Partial<JsonLine>, event: RGUserEvent) => any) | undefined;
-    onOnDragConnectEnd?: ((fromNode: RGNode | RGLineTarget, toNode: import('packages/relation-graph-models/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => any) | undefined;
+    onOnDragConnectEnd?: ((fromNode: RGNode | RGLineTarget, toNode: import('packages/types').RGCoordinate | RGNode | RGLineTarget, newLineJson?: JsonLine | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/types/packages/platforms/vue3/src/relation-graph/src/core4vue3/editing/RGEditingLineController.vue.d.ts

@@ -17,7 +17,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     textEditable: boolean;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     moveLineVertexStart: (type: RGLineEditPoint, line: RGLine) => void;
-    moveLineVertexEnd: (from: RGNode, to: import('packages/relation-graph-models/types').RGCoordinate | RGNode, newLineJson: JsonLine) => void;
+    moveLineVertexEnd: (from: RGNode, to: import('packages/types').RGCoordinate | RGNode, newLineJson: JsonLine) => void;
     onLineTextDragEnd: (line: RGLine) => void;
     onLineTextChanged: (line: RGLine) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
@@ -25,7 +25,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>>> & Readonly<{
     onMoveLineVertexStart?: ((type: RGLineEditPoint, line: RGLine) => any) | undefined;
     onOnLineTextChanged?: ((line: RGLine) => any) | undefined;
-    onMoveLineVertexEnd?: ((from: RGNode, to: import('packages/relation-graph-models/types').RGCoordinate | RGNode, newLineJson: JsonLine) => any) | undefined;
+    onMoveLineVertexEnd?: ((from: RGNode, to: import('packages/types').RGCoordinate | RGNode, newLineJson: JsonLine) => any) | undefined;
     onOnLineTextDragEnd?: ((line: RGLine) => any) | undefined;
 }>, {
     textEditable: boolean;

package/types/packages/platforms/vue3/src/relation-graph/src/hooks/RGHooks.d.ts

@@ -1,7 +1,32 @@
-import { useGraphInstance, useCreatingLine, useCreatingNode, useGraphInstanceGetter } from './useGraphInstance';
+import { useGraphInstance } from './useGraphInstance';
+import { useRelationGraph } from './useRelationGraph';
+import { useGraphOptions, useGraphStore, useCreatingLine, useCreatingNode, useEditingNodes, useEditingLine, useViewInformation, useSelection, useConnectingNode, useCheckedItem } from './useGraphStore';
+import { useGraphData } from './useGraphData';
+/**
+ *  By introducing graphStoreMixin through mixins here, you can get the following objects in the options component through this
+ * - this.graphInstance : Used to call various APIs provided by the graph
+ * The following are reactive state objects that allow you to interact with your UI
+ * - this.creatingLine : The line object currently being created
+ * - this.creatingNode : The node object currently being created
+ * - this.editingNodes : The list of node objects currently being edited
+ * - this.editingLine : The line object currently being edited
+ * - this.connectingNode : The node object currently being connected
+ * - this.viewInformation : The current view information object
+ * - this.selectionView : The current selected area view object
+ * - this.checkedItem : The currently selected graphic object
+ */
 export declare const RGHooks: {
     useGraphInstance: typeof useGraphInstance;
-    useGraphInstanceGetter: typeof useGraphInstanceGetter;
+    useRelationGraph: typeof useRelationGraph;
+    useGraphStore: typeof useGraphStore;
+    useGraphData: typeof useGraphData;
+    useGraphOptions: typeof useGraphOptions;
     useCreatingLine: typeof useCreatingLine;
     useCreatingNode: typeof useCreatingNode;
+    useEditingNodes: typeof useEditingNodes;
+    useEditingLine: typeof useEditingLine;
+    useViewInformation: typeof useViewInformation;
+    useSelection: typeof useSelection;
+    useConnectingNode: typeof useConnectingNode;
+    useCheckedItem: typeof useCheckedItem;
 };

package/types/packages/platforms/vue3/src/relation-graph/src/hooks/useGraphData.d.ts

@@ -0,0 +1,2 @@
+import { RGDataStore } from '../../../types-vue3';
+export declare function useGraphData(): RGDataStore;

package/types/packages/platforms/vue3/src/relation-graph/src/hooks/useGraphInstance.d.ts

@@ -1,13 +1,2 @@
-import { JsonLine, JsonNode, RelationGraphInstance, RGLineTarget } from '../../../../../../relation-graph-models/types';
+import { RelationGraphInstance } from '../../../../../../types';
 export declare function useGraphInstance<InstanceType extends RelationGraphInstance>(): InstanceType;
-export declare function useGraphInstanceGetter<InstanceType extends RelationGraphInstance>(): () => InstanceType;
-export declare function useCreatingLine(graphInstance: RelationGraphInstance): {
-    creating: boolean;
-    fromTarget?: RGLineTarget;
-    toTarget?: RGLineTarget;
-    lineJson?: JsonLine;
-};
-export declare function useCreatingNode(graphInstance: RelationGraphInstance): {
-    creating: boolean;
-    nodeJson?: JsonNode;
-};

package/types/packages/platforms/vue3/src/relation-graph/src/hooks/useGraphStore.d.ts

@@ -0,0 +1,16 @@
+import { Ref } from 'vue';
+import { RGCheckedItem, RGConnectingNode, RGCreatingLine, RGCreatingNode, RGEditingLine, RGEditingNodes, RGOptionsFull, RGSelectionView, RGViewInformation } from '../../../../../../types';
+export declare function useGraphStore(): {
+    optionsRef: Ref<RGOptionsFull>;
+};
+export declare function useGraphOptions(): Ref<RGOptionsFull>;
+export declare function useCreatingLine(): Ref<RGCreatingLine>;
+export declare function useCreatingNode(): Ref<RGCreatingNode>;
+export declare function useEditingNodes(): Ref<RGEditingNodes>;
+export declare function useEditingLine(): Ref<RGEditingLine>;
+export declare function useConnectingNode(): Ref<RGConnectingNode>;
+export declare function useViewInformation(): Ref<RGViewInformation>;
+export declare function useSelection(): Ref<RGSelectionView & {
+    show: boolean;
+}>;
+export declare function useCheckedItem(): Ref<RGCheckedItem>;

package/types/packages/platforms/vue3/src/relation-graph/src/hooks/useRGDataProvider.d.ts

@@ -0,0 +1,17 @@
+import { RGOptions } from '../../../../../../types';
+import { RelationGraphCore } from '../../../../../../relation-graph-models/models/RelationGraphCore';
+export declare function generateNewRGInstance(relationGraphCore?: new (...args: any[]) => RelationGraphCore, forLinker?: boolean): import('vue').Raw<RelationGraphCore>;
+export declare function getOrGenerateRGInstance(relationGraphCore?: new (...args: any[]) => RelationGraphCore, forLinker?: boolean): RelationGraphCore;
+export declare function defineRGDataProviderComponent(graphInstance: RelationGraphCore): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    options: {
+        required: false;
+        type: () => RGOptions;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    options: {
+        required: false;
+        type: () => RGOptions;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/types/packages/platforms/vue3/src/relation-graph/src/hooks/useRelationGraph.d.ts

@@ -0,0 +1,131 @@
+import { RGJsonData, RGOptions } from '../../../../../../types';
+import { RelationGraphCore } from '../../../../../../relation-graph-models/models/RelationGraphCore';
+/**
+ * This is a sophisticated and decoupled pattern:
+ *
+ * `useRGDataProvider`: Uses `provide`/`inject` (Vue's Context API) to "provide" a single, markRaw-marked `graphInstance` instance.
+ *
+ * `useRelationGraph`: A Hook that dynamically creates and returns a `graphInstance` instance and a `<RelationGraph>` component bound to that instance.
+ * @param emitProxy
+ * @param relationGraphCore
+ */
+export declare function useRelationGraph({ relationGraphCore }?: {
+    relationGraphCore?: new (...args: any[]) => RelationGraphCore;
+}): {
+    RelationGraph: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        options: {
+            required: false;
+            type: () => RGOptions;
+        };
+        initialData: {
+            required: false;
+            type: () => RGJsonData;
+        };
+        emitProxy: {
+            required: false;
+            type: () => (any | void);
+        };
+    }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        onReady: (graphInstance: RelationGraphCore) => boolean;
+        onNodeClick: (node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onNodeExpand: (node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onNodeCollapse: (node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onLineClick: (line: import('../../../../../../types').RGLine, link: import('../../../../../../types').RGLink, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onNodeDragStart: (node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onNodeDragEnd: (node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent, x_buff: number, y_buff: number) => boolean;
+        onNodeDragging: (node: import('../../../../../../types').RGNode, newX: number, newY: number, buffX: number, buffY: number, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onCanvasDragEnd: (event: import('../../../../../../types').RGUserEvent) => boolean;
+        onCanvasDragging: (newX: number, newY: number, buffX: number, buffY: number) => boolean;
+        onContextmenu: (event: import('../../../../../../types').RGUserEvent, objectType: import('../../../../../../types').RGEventTargetType, object: import('../../../../../../types').RGNode | import('../../../../../../types').RGLine | undefined, eventPositionOnCanvas: import('../../../../../../types').RGCoordinate, eventPositionOnView: import('../../../../../../types').RGCoordinate) => boolean;
+        onFullscreen: (newValue: boolean, defaultFullscreen: () => Promise<void>) => boolean;
+        onCanvasClick: (event: import('../../../../../../types').RGUserEvent) => boolean;
+        onCanvasSelectionEnd: (selectionView: import('../../../../../../types').RGSelectionView, event: import('../../../../../../types').RGUserEvent) => boolean;
+        beforeZoomStart: () => boolean;
+        onZoomEnd: () => boolean;
+        onViewResize: () => boolean;
+        onResizeStart: (nodes: import('../../../../../../types').RGNode[], event: import('../../../../../../types').RGUserEvent) => boolean;
+        beforeNodeResize: (node: import('../../../../../../types').RGNode, newX: number, newY: number, newW: number, newH: number) => boolean;
+        onResizeEnd: (nodes: import('../../../../../../types').RGNode[], buffX: number, buffY: number, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onLineVertexDropped: (lineInfo: {
+            newLineTemplate: import('../../../../../../types').JsonLine;
+            fromNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+            toNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+        }) => boolean;
+        beforeCreateLine: (lineInfo: {
+            lineJson: import('../../../../../../types').JsonLine;
+            fromNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+            toNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+        }) => boolean;
+        onLineBeCreated: (lineInfo: {
+            lineJson: import('../../../../../../types').JsonLine;
+            fromNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+            toNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+        }) => boolean;
+        beforeAddNodes: (nodes: import('../../../../../../types').JsonNode[]) => boolean;
+        beforeAddLines: (lines: import('../../../../../../types').JsonLine[]) => boolean;
+        onKeyboardDown: (event: KeyboardEvent) => boolean;
+        onKeyboardUp: (event: KeyboardEvent) => boolean;
+        onCanvasDragStart: (canvasMoveStartPosition: import('../../../../../../types').RGCoordinate, eventClientStartPosition: import('../../../../../../types').RGCoordinate, event: import('../../../../../../types').RGUserEvent) => boolean;
+        onForceLayoutFinish: () => boolean;
+        beforeScrollStart: (buffX: number, buffY: number, event: Event) => boolean;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        options: {
+            required: false;
+            type: () => RGOptions;
+        };
+        initialData: {
+            required: false;
+            type: () => RGJsonData;
+        };
+        emitProxy: {
+            required: false;
+            type: () => (any | void);
+        };
+    }>> & Readonly<{
+        onOnReady?: ((graphInstance: RelationGraphCore) => any) | undefined;
+        onOnNodeClick?: ((node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnNodeExpand?: ((node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnNodeCollapse?: ((node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnLineClick?: ((line: import('../../../../../../types').RGLine, link: import('../../../../../../types').RGLink, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnNodeDragStart?: ((node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnNodeDragEnd?: ((node: import('../../../../../../types').RGNode, event: import('../../../../../../types').RGUserEvent, x_buff: number, y_buff: number) => any) | undefined;
+        onOnNodeDragging?: ((node: import('../../../../../../types').RGNode, newX: number, newY: number, buffX: number, buffY: number, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnCanvasDragEnd?: ((event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnCanvasDragging?: ((newX: number, newY: number, buffX: number, buffY: number) => any) | undefined;
+        onOnContextmenu?: ((event: import('../../../../../../types').RGUserEvent, objectType: import('../../../../../../types').RGEventTargetType, object: import('../../../../../../types').RGNode | import('../../../../../../types').RGLine | undefined, eventPositionOnCanvas: import('../../../../../../types').RGCoordinate, eventPositionOnView: import('../../../../../../types').RGCoordinate) => any) | undefined;
+        onOnFullscreen?: ((newValue: boolean, defaultFullscreen: () => Promise<void>) => any) | undefined;
+        onOnCanvasClick?: ((event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnCanvasSelectionEnd?: ((selectionView: import('../../../../../../types').RGSelectionView, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onBeforeZoomStart?: (() => any) | undefined;
+        onOnZoomEnd?: (() => any) | undefined;
+        onOnViewResize?: (() => any) | undefined;
+        onOnResizeStart?: ((nodes: import('../../../../../../types').RGNode[], event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onBeforeNodeResize?: ((node: import('../../../../../../types').RGNode, newX: number, newY: number, newW: number, newH: number) => any) | undefined;
+        onOnResizeEnd?: ((nodes: import('../../../../../../types').RGNode[], buffX: number, buffY: number, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnLineVertexDropped?: ((lineInfo: {
+            newLineTemplate: import('../../../../../../types').JsonLine;
+            fromNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+            toNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+        }) => any) | undefined;
+        onBeforeCreateLine?: ((lineInfo: {
+            lineJson: import('../../../../../../types').JsonLine;
+            fromNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+            toNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+        }) => any) | undefined;
+        onOnLineBeCreated?: ((lineInfo: {
+            lineJson: import('../../../../../../types').JsonLine;
+            fromNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+            toNode: import('../../../../../../types').RGNode | import('../../../../../../types').RGLineTarget;
+        }) => any) | undefined;
+        onBeforeAddNodes?: ((nodes: import('../../../../../../types').JsonNode[]) => any) | undefined;
+        onBeforeAddLines?: ((lines: import('../../../../../../types').JsonLine[]) => any) | undefined;
+        onOnKeyboardDown?: ((event: KeyboardEvent) => any) | undefined;
+        onOnKeyboardUp?: ((event: KeyboardEvent) => any) | undefined;
+        onOnCanvasDragStart?: ((canvasMoveStartPosition: import('../../../../../../types').RGCoordinate, eventClientStartPosition: import('../../../../../../types').RGCoordinate, event: import('../../../../../../types').RGUserEvent) => any) | undefined;
+        onOnForceLayoutFinish?: (() => any) | undefined;
+        onBeforeScrollStart?: ((buffX: number, buffY: number, event: Event) => any) | undefined;
+    }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    graphInstance: RelationGraphCore;
+};

package/types/packages/platforms/vue3/src/relation-graph/src/hooks/useRelationLinker.d.ts

@@ -0,0 +1,39 @@
+import { ShortEmitsToObject } from 'vue';
+import { RGLine, RGOptions } from '../../../../../../types';
+import { RelationGraphCore } from '../../../../../../relation-graph-models/models/RelationGraphCore';
+import { RGEventEmits } from '../../../types-vue3';
+export declare function useRelationLinker({ relationGraphCore, options, emitProxy }?: {
+    options?: RGOptions;
+    relationGraphCore?: new (...args: any[]) => RelationGraphCore;
+    emitProxy?: ShortEmitsToObject<RGEventEmits>;
+}): {
+    RGProvider: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        options: {
+            required: false;
+            type: () => Partial<import('../../../../../../types').RGOptionsInited>;
+        };
+    }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>[] | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        options: {
+            required: false;
+            type: () => Partial<import('../../../../../../types').RGOptionsInited>;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    RelationLinker: import('vue').DefineComponent<{
+        lines: RGLine[];
+    }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        lines: RGLine[];
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    VueLinker: import('vue').DefineComponent<{
+        lines: RGLine[];
+    }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+        lines: RGLine[];
+    }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    graphInstance: RelationGraphCore;
+};
+export declare const useVueLinker: typeof useRelationLinker;

package/types/packages/platforms/vue3/src/types-vue3.d.ts

@@ -1,8 +1,7 @@
-import { VueElement, VNode } from 'vue';
-import { RelationGraphProps, RelationGraphInstance, RGJsonData, RGRefreshCallback } from './types';
+import { VNode, ShallowRef, VueElement } from 'vue';
+import { JsonLine, JsonNode, RelationGraphInstance, RelationGraphProps, RGCoordinate, RGEventTargetType, RGFakeLine, RGLine, RGLineTarget, RGLink, RGNode, RGOptionsFull, RGPosition, RGSelectionView, RGUserEvent } from './types';
 export declare class RelationGraphComponent extends VueElement {
     getInstance(): RelationGraphInstance;
-    setJsonData(jsonData: RGJsonData, reLayoutOrCallback?: boolean | RGRefreshCallback, callback?: (graphInstance: RelationGraphInstance) => void): any;
     $props: RelationGraphProps;
     $slots: {
         default: VNode[];
@@ -11,7 +10,6 @@ export declare class RelationGraphComponent extends VueElement {
         miniViewPanel: VNode[];
         nodeExpandHolder: VNode[];
         graphPlug: VNode[];
-        svgDefs: VNode[];
         node: VNode[];
         line: VNode[];
     };
@@ -20,3 +18,105 @@ export type RGProviderData = {
     graphInstance: RelationGraphInstance;
 };
 export declare const version: string;
+export type RGDataStore = {
+    optionsRef: ShallowRef<RGOptionsFull>;
+    shouldRenderNodesRef: ShallowRef<RGNode[]>;
+    shouldRenderLinesRef: ShallowRef<RGLine[]>;
+    shouldRenderFakeLinesRef: ShallowRef<RGFakeLine[]>;
+};
+/**
+ * This is a type definition specifically for the emits option of vue3 defineComponent components. It describes all the events supported by the relation-graph component and their parameter types. The content expressed is exactly the same as RGListeners.
+ * @inner
+ */
+export declare const RGEventsDefine4Vue3: {
+    onReady: (graphInstance: RelationGraphInstance) => boolean;
+    onNodeClick: (node: RGNode, event: RGUserEvent) => boolean;
+    onNodeExpand: (node: RGNode, event: RGUserEvent) => boolean;
+    onNodeCollapse: (node: RGNode, event: RGUserEvent) => boolean;
+    onLineClick: (line: RGLine, link: RGLink, event: RGUserEvent) => boolean;
+    onNodeDragStart: (node: RGNode, event: RGUserEvent) => boolean;
+    onNodeDragEnd: (node: RGNode, event: RGUserEvent, x_buff: number, y_buff: number) => boolean;
+    onNodeDragging: (node: RGNode, newX: number, newY: number, buffX: number, buffY: number, event: RGUserEvent) => boolean;
+    onCanvasDragEnd: (event: RGUserEvent) => boolean;
+    onCanvasDragging: (newX: number, newY: number, buffX: number, buffY: number) => boolean;
+    onContextmenu: (event: RGUserEvent, objectType: RGEventTargetType, object: RGNode | RGLine | undefined, eventPositionOnCanvas: RGCoordinate, eventPositionOnView: RGCoordinate) => boolean;
+    onFullscreen: (newValue: boolean, defaultFullscreen: () => Promise<void>) => boolean;
+    onCanvasClick: (event: RGUserEvent) => boolean;
+    onCanvasSelectionEnd: (selectionView: RGSelectionView, event: RGUserEvent) => boolean;
+    beforeZoomStart: () => boolean;
+    onZoomEnd: () => boolean;
+    onViewResize: () => boolean;
+    onResizeStart: (nodes: RGNode[], event: RGUserEvent) => boolean;
+    beforeNodeResize: (node: RGNode, newX: number, newY: number, newW: number, newH: number) => boolean;
+    onResizeEnd: (nodes: RGNode[], buffX: number, buffY: number, event: RGUserEvent) => boolean;
+    onLineVertexDropped: (lineInfo: {
+        newLineTemplate: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }) => boolean;
+    beforeCreateLine: (lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }) => boolean;
+    onLineBeCreated: (lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }) => boolean;
+    beforeAddNodes: (nodes: JsonNode[]) => boolean;
+    beforeAddLines: (lines: JsonLine[]) => boolean;
+    onKeyboardDown: (event: KeyboardEvent) => boolean;
+    onKeyboardUp: (event: KeyboardEvent) => boolean;
+    onCanvasDragStart: (canvasMoveStartPosition: RGPosition, eventClientStartPosition: RGPosition, event: RGUserEvent) => boolean;
+    onForceLayoutFinish: () => boolean;
+    beforeScrollStart: (buffX: number, buffY: number, event: Event) => boolean;
+};
+/**
+ * This is a type definition specifically for the emits option of vue3 setup components. It describes all the events supported by the relation-graph component and their parameter types. The content expressed is exactly the same as RGListeners.
+ * @inner
+ */
+export type RGEventEmits = {
+    (e: 'onReady', graphInstance: RelationGraphInstance): void;
+    (e: 'onNodeClick', node: RGNode, event: RGUserEvent): void;
+    (e: 'onNodeExpand', node: RGNode, event: RGUserEvent): void;
+    (e: 'onNodeCollapse', node: RGNode, event: RGUserEvent): void;
+    (e: 'onLineClick', line: RGLine, link: RGLink, event: RGUserEvent): void;
+    (e: 'onNodeDragStart', node: RGNode, event: RGUserEvent): void;
+    (e: 'onNodeDragEnd', node: RGNode, event: RGUserEvent, x_buff: number, y_buff: number): void;
+    (e: 'onNodeDragging', node: RGNode, newX: number, newY: number, buffX: number, buffY: number, event: RGUserEvent): void;
+    (e: 'onCanvasDragEnd', event: RGUserEvent): void;
+    (e: 'onCanvasDragging', newX: number, newY: number, buffX: number, buffY: number): void;
+    (e: 'onContextmenu', event: RGUserEvent, objectType: RGEventTargetType, object: RGNode | RGLine | undefined, eventPositionOnCanvas: RGCoordinate, eventPositionOnView: RGCoordinate): void;
+    (e: 'onFullscreen', newValue: boolean, defaultFullscreen: () => Promise<void>): void;
+    (e: 'onCanvasClick', event: RGUserEvent): void;
+    (e: 'onCanvasSelectionEnd', selectionView: RGSelectionView, event: RGUserEvent): void;
+    (e: 'beforeZoomStart'): void;
+    (e: 'onZoomEnd'): void;
+    (e: 'onViewResize'): void;
+    (e: 'onResizeStart', nodes: RGNode[], event: RGUserEvent): void;
+    (e: 'beforeNodeResize', node: RGNode, newX: number, newY: number, newW: number, newH: number): void;
+    (e: 'onResizeEnd', nodes: RGNode[], buffX: number, buffY: number, event: RGUserEvent): void;
+    (e: 'onLineVertexDropped', lineInfo: {
+        newLineTemplate: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }): void;
+    (e: 'beforeCreateLine', lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }): void;
+    (e: 'onLineBeCreated', lineInfo: {
+        lineJson: JsonLine;
+        fromNode: RGLineTarget | RGNode;
+        toNode: RGLineTarget | RGNode;
+    }): void;
+    (e: 'beforeAddNodes', nodes: JsonNode[]): void;
+    (e: 'beforeAddLines', lines: JsonLine[]): void;
+    (e: 'onKeyboardDown', event: KeyboardEvent): void;
+    (e: 'onKeyboardUp', event: KeyboardEvent): void;
+    (e: 'onCanvasDragStart', canvasMoveStartPosition: RGPosition, eventClientStartPosition: RGPosition, event: RGUserEvent): void;
+    (e: 'onForceLayoutFinish'): void;
+    (e: 'beforeScrollStart', buffX: number, buffY: number, event: Event): true | undefined | void;
+};

package/types/packages/platforms/vue3/src/types.d.ts

@@ -1 +1,3 @@
-export * from '../../../relation-graph-models/types';
+export * from '../../../types';
+export { RGEventsDefine4Vue3 } from './types-vue3';
+export type { RGEventEmits } from './types-vue3';

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

@@ -1,21 +1,23 @@
-import { default as BaseLayouter } from './layouters/RGBaseLayouter';
-import { default as BidirectionalTreeLayouter } from './layouters/RGTreeLayouter';
-import { default as CenterLayouter } from './layouters/RGCenterLayouter';
-import { default as CircleLayouter } from './layouters/RGCircleLayouter';
-import { default as FixedLayouter } from './layouters/RGFixedLayouter';
-import { default as ForceLayouter } from './layouters/RGForceLayouter';
-import { default as RGFolderLayouter } from './layouters/RGFolderLayouter';
-import * as RGOptionsDataUtils from "./models/RGOptionsDataUtils";
-import * as RGLineDataUtils from "./models/RGLineDataUtils";
-import * as RGNodeDataUtils from "./models/RGNodeDataUtils";
-export declare const RGLayout: {
-    BaseLayouter: typeof BaseLayouter;
-    BidirectionalTreeLayouter: typeof BidirectionalTreeLayouter;
-    CenterLayouter: typeof CenterLayouter;
-    CircleLayouter: typeof CircleLayouter;
-    FixedLayouter: typeof FixedLayouter;
-    ForceLayouter: typeof ForceLayouter;
-    RGFolderLayouter: typeof RGFolderLayouter;
+import { default as BaseLayout } from './layouts/RGBaseLayout';
+import { default as BidirectionalTreeLayout } from './layouts/RGTreeLayout';
+import { default as CenterLayout } from './layouts/RGCenterLayout';
+import { default as CircleLayout } from './layouts/RGCircleLayout';
+import { default as FixedLayout } from './layouts/RGFixedLayout';
+import { default as ForceLayout } from './layouts/RGForceLayout';
+import { default as RGFolderLayout } from './layouts/RGFolderLayout';
+import { RGNetworkAnalyzer as _RGNetworkAnalyzer } from './layouts/analyzers/RGNetworkAnalyzer';
+import * as RGOptionsDataUtils from "./data/RGOptionsDataUtils";
+import * as RGLineDataUtils from "./data/RGLineDataUtils";
+import * as RGNodeDataUtils from "./data/RGNodeDataUtils";
+export type RGNetworkAnalyzer = _RGNetworkAnalyzer;
+export declare const RGLayouts: {
+    BaseLayout: typeof BaseLayout;
+    BidirectionalTreeLayout: typeof BidirectionalTreeLayout;
+    CenterLayout: typeof CenterLayout;
+    CircleLayout: typeof CircleLayout;
+    FixedLayout: typeof FixedLayout;
+    ForceLayout: typeof ForceLayout;
+    RGFolderLayout: typeof RGFolderLayout;
 };
 export declare const RGUtils: {
     RGOptionsDataUtils: typeof RGOptionsDataUtils;
@@ -56,6 +58,10 @@ export declare const RGUtils: {
             y: number;
         };
         getRectHorizontalLineJoinPoint(params: import('./utils/RGGraphMath').CreateJunctionPointParams): {
+            y: number;
+            x: number;
+        };
+        getRectVerticalLineLineJoinPoint(params: import('./utils/RGGraphMath').CreateJunctionPointParams): {
             x: number;
             y: number;
         };
@@ -91,26 +97,28 @@ export declare const RGUtils: {
             x: number;
             y: number;
         };
+        getRotatedPoint(x: number, y: number, c_x: number, c_y: number, rotateDeg: number): {
+            x: number;
+            y: number;
+        };
+        getFlippedX(x: number, c_x: number): number;
+        getFlippedY(y: number, c_y: number): number;
         getAngleType(buffer_x: number, buffer_y: number): 1 | 2 | 3 | 4 | undefined;
         getTextAngle(fx: number, fy: number, tx: number, ty: number): number;
     };
     RGNodesAnalyticUtils: {
-        getDescendantNodes(node: import('packages/platforms/vue2/src').RGNode, collectList?: import('packages/platforms/vue2/src').RGNode[]): import('packages/platforms/vue2/src').RGNode[];
-        conductStrengthToParents(node: import('packages/platforms/vue2/src').RGNode): void;
-        analysisDataTree(thisLevelNodes: import('packages/platforms/vue2/src').RGNode[], thisDeep: number, levelDirect?: import('./utils/RGNodesAnalytic').RGLevelDirection): void;
-        conductStrengthToParents4Folder(node: import('packages/platforms/vue2/src').RGNode): void;
-        analysisDataFolder(thisLevelNodes: import('packages/platforms/vue2/src').RGNode[], thisDeep: number, levelDirect: import('./utils/RGNodesAnalytic').RGLevelDirection): void;
-        isVisibleNode(thisNode: import('packages/platforms/vue2/src').RGNode, deep?: number): boolean;
-        isAllowShowNode(thisNode: import('packages/platforms/vue2/src').RGNode, deep?: number): boolean;
-        getNodeWidth(thisNode: import('packages/platforms/vue2/src').RGNode): number;
-        getNodeHeight(thisNode: import('packages/platforms/vue2/src').RGNode): number;
+        getDescendantNodes(node: import('../types').RGNode, collectList?: import('../types').RGNode[]): import('../types').RGNode[];
+        isVisibleNode(thisNode: import('../types').RGNode, deep?: number): boolean;
+        isAllowShowNode(thisNode: import('../types').RGNode, deep?: number): boolean;
+        getNodeWidth(thisNode: import('../types').RGNode): number;
+        getNodeHeight(thisNode: import('../types').RGNode): number;
         getNodeXByLotX(nodeAlignOption: {
             alignItemsX: "start" | "center" | "end";
-        }, thisNode: import('packages/platforms/vue2/src').RGNode): number;
+        }, thisNode: import('../types').RGNode): number;
         getNodeYByLotY(nodeAlignOption: {
             alignItemsY: "start" | "center" | "end";
-        }, thisNode: import('packages/platforms/vue2/src').RGNode): number;
-        getNodeLotXY(nodeAlignOption: import('packages/platforms/vue2/src').RGLayoutOptions4Alignable, node: import('packages/platforms/vue2/src').RGNode): {
+        }, thisNode: import('../types').RGNode): number;
+        getNodeLotXY(nodeAlignOption: import('../types').RGLayoutOptions4Alignment, node: import('../types').RGNode): {
             x: number;
             y: number;
         };
@@ -122,10 +130,10 @@ export declare const RGUtils: {
             x: any;
             y: any;
         };
-        flatNodeData(orign_nodes: import('packages/platforms/vue2/src').JsonNode[], parentNode: import('packages/platforms/vue2/src').JsonNode | null, nodes_collect: import('packages/platforms/vue2/src').JsonNode[], links_collect: import('packages/platforms/vue2/src').JsonLine[]): void;
+        flatNodeData(orignNodes: import('../types').JsonNode[], parentNode: import('../types').JsonNode | null, nodesCollect: import('../types').JsonNode[], linksCollect: import('../types').JsonLine[]): void;
     };
     RGEffectUtils: {
-        startDrag(e: MouseEvent | TouchEvent, startPositionModel: import('./utils/RGDragUtils').RGDataModelWithPosition, ondraged: import('./utils/RGDragUtils').RGDragedCallback, ondragging: import('./utils/RGDragUtils').RGDraggingCallback | undefined): void;
+        startDrag(e: MouseEvent | TouchEvent, startPositionOrModel: import('../types').RGCoordinate, onDragged: import('./utils/RGDragUtils').RGDraggedCallback, onDragging?: import('./utils/RGDragUtils').RGDraggingCallback | undefined): void;
         onNodeMove(e: MouseEvent | TouchEvent): void;
         onNodeDragend(e: MouseEvent | TouchEvent): void;
     };

package/types/packages/relation-graph-models/data/RGDataDefine.d.ts

@@ -0,0 +1,23 @@
+import { RGGraphData, RGNode, RGLine, RGLink, RGOptionsFull, RGFakeLine, RGConnectTarget4NodePoint, RGLineTarget } from '../../types';
+/**
+ * 数据提供者
+ * 专门负责数据的增删改查，并自动触发视图更新
+ */
+export declare class RGDataDefine {
+    constructor();
+    /**
+     * All data managed in RelationGraph, including all nodes RGNode, all relationships RGLink, the current root node, and all element lines elementLines
+     */
+    protected graphData: RGGraphData;
+    protected options: RGOptionsFull;
+    protected runtimeDATA4NodeMap: Map<string, RGNode>;
+    protected runtimeDATA4Links: RGLink[];
+    protected runtimeDATA4LinkMap: Map<string, RGLink>;
+    protected runtimeDATA4ConnectTargets: RGConnectTarget4NodePoint[];
+    protected runtimeDATA4ElLineTargets: RGLineTarget[];
+    protected runtimeDATA4ShouldRenderItems: {
+        nodes: RGNode[];
+        lines: RGLine[];
+        fakeLines: RGFakeLine[];
+    };
+}