rendx-connect-plugin 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/main.cjs +546 -0
- package/dist/main.d.cts +155 -0
- package/dist/main.d.ts +155 -0
- package/dist/main.js +519 -0
- package/package.json +49 -0
package/dist/main.d.cts
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { Graphics, Node, Plugin, App } from 'rendx-engine';
|
|
2
|
+
import { Point } from 'rendx-core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 纯引擎模式下维护的连接记录。
|
|
6
|
+
* connect 插件自身创建的 line Node 及其两端 Graphics 引用。
|
|
7
|
+
*/
|
|
8
|
+
interface ConnectionRecord {
|
|
9
|
+
/** 连接唯一 ID */
|
|
10
|
+
id: string;
|
|
11
|
+
/** 连接线节点 */
|
|
12
|
+
line: Node;
|
|
13
|
+
/** 起点 Graphics */
|
|
14
|
+
source: Graphics;
|
|
15
|
+
/** 终点 Graphics */
|
|
16
|
+
target: Graphics;
|
|
17
|
+
}
|
|
18
|
+
/** connect:start 事件负载 */
|
|
19
|
+
interface ConnectStartEvent {
|
|
20
|
+
/** 起点 Graphics */
|
|
21
|
+
source: Graphics;
|
|
22
|
+
/** 鼠标按下位置（世界坐标） */
|
|
23
|
+
origin: Point;
|
|
24
|
+
}
|
|
25
|
+
/** connect:move 事件负载 */
|
|
26
|
+
interface ConnectMoveEvent {
|
|
27
|
+
/** 起点 Graphics */
|
|
28
|
+
source: Graphics;
|
|
29
|
+
/** 当前鼠标位置（世界坐标） */
|
|
30
|
+
cursor: Point;
|
|
31
|
+
/** 当前吸附到的目标（null 表示未吸附） */
|
|
32
|
+
snapTarget: Graphics | null;
|
|
33
|
+
}
|
|
34
|
+
/** connect:complete 事件负载 */
|
|
35
|
+
interface ConnectCompleteEvent {
|
|
36
|
+
/** 起点 Graphics */
|
|
37
|
+
source: Graphics;
|
|
38
|
+
/** 终点 Graphics */
|
|
39
|
+
target: Graphics;
|
|
40
|
+
}
|
|
41
|
+
/** connect:cancel 事件负载 */
|
|
42
|
+
interface ConnectCancelEvent {
|
|
43
|
+
/** 起点 Graphics */
|
|
44
|
+
source: Graphics;
|
|
45
|
+
}
|
|
46
|
+
interface ConnectPluginOptions {
|
|
47
|
+
/**
|
|
48
|
+
* 可连接的 className 标记。
|
|
49
|
+
* 只有 `hasClassName(className)` 为 true 的 Graphics 才响应连接交互。
|
|
50
|
+
* @default 'connectable'
|
|
51
|
+
*/
|
|
52
|
+
className?: string;
|
|
53
|
+
/**
|
|
54
|
+
* 自定义验证：是否可以从 source 连接到 target。
|
|
55
|
+
* 返回 false 阻止连接完成。
|
|
56
|
+
*/
|
|
57
|
+
canConnect?: (source: Graphics, target: Graphics) => boolean;
|
|
58
|
+
/**
|
|
59
|
+
* 是否允许自环（source === target）。
|
|
60
|
+
* @default false
|
|
61
|
+
*/
|
|
62
|
+
allowSelfLoop?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* 自定义连接点坐标计算。
|
|
65
|
+
* 接收 Graphics，返回世界坐标 [x, y]。
|
|
66
|
+
* 默认取 Node.getWorldBBox() 中心，Group 取 translation。
|
|
67
|
+
*/
|
|
68
|
+
anchor?: (target: Graphics) => Point;
|
|
69
|
+
/**
|
|
70
|
+
* graph-plugin 中注册的 edge 类型名。
|
|
71
|
+
* 设置后连接完成时自动调用 `graph.add(edgeType, edgeData)`。
|
|
72
|
+
* 未设置则走纯引擎模式（自行创建 line）。
|
|
73
|
+
*/
|
|
74
|
+
edgeType?: string;
|
|
75
|
+
/**
|
|
76
|
+
* 自定义 edge 数据工厂。
|
|
77
|
+
* 接收两个端点 Graphics，返回传给 `graph.add` 的完整 data。
|
|
78
|
+
* 未提供时使用默认工厂（自动溯源 element ID）。
|
|
79
|
+
*/
|
|
80
|
+
edgeFactory?: (source: Graphics, target: Graphics) => Record<string, unknown>;
|
|
81
|
+
/**
|
|
82
|
+
* 无 graph-plugin 时，自行创建的连接线样式。
|
|
83
|
+
*/
|
|
84
|
+
lineStyle?: {
|
|
85
|
+
stroke?: string;
|
|
86
|
+
strokeWidth?: number;
|
|
87
|
+
};
|
|
88
|
+
/** 预览线描边颜色 @default '#1890ff' */
|
|
89
|
+
previewStroke?: string;
|
|
90
|
+
/** 预览线描边宽度 @default 2 */
|
|
91
|
+
previewStrokeWidth?: number;
|
|
92
|
+
/** 预览线虚线模式 @default [6, 4] */
|
|
93
|
+
previewDash?: number[];
|
|
94
|
+
/**
|
|
95
|
+
* 自定义预览路径生成器。
|
|
96
|
+
* 接收起点和终点坐标，返回 SVG path data 字符串。
|
|
97
|
+
* 未设置则使用直线 (`M x1 y1 L x2 y2`)。
|
|
98
|
+
* @example
|
|
99
|
+
* ```typescript
|
|
100
|
+
* previewPath: ([sx, sy], [tx, ty]) => {
|
|
101
|
+
* const mx = (sx + tx) / 2;
|
|
102
|
+
* return `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ty}, ${tx} ${ty}`;
|
|
103
|
+
* }
|
|
104
|
+
* ```
|
|
105
|
+
*/
|
|
106
|
+
previewPath?: (source: Point, target: Point) => string;
|
|
107
|
+
/**
|
|
108
|
+
* 吸附半径（像素），鼠标接近可连接目标多少像素时高亮。
|
|
109
|
+
* @default 20
|
|
110
|
+
*/
|
|
111
|
+
snapRadius?: number;
|
|
112
|
+
/** 连接交互中的光标样式 @default 'crosshair' */
|
|
113
|
+
cursor?: string;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
declare class ConnectPlugin implements Plugin {
|
|
117
|
+
#private;
|
|
118
|
+
readonly name = "connect";
|
|
119
|
+
readonly state: ({
|
|
120
|
+
key: string;
|
|
121
|
+
description: string;
|
|
122
|
+
initial: boolean;
|
|
123
|
+
} | {
|
|
124
|
+
key: string;
|
|
125
|
+
description: string;
|
|
126
|
+
initial: Graphics | null;
|
|
127
|
+
})[];
|
|
128
|
+
readonly layers: {
|
|
129
|
+
name: string;
|
|
130
|
+
zIndex: number;
|
|
131
|
+
}[];
|
|
132
|
+
constructor(options?: ConnectPluginOptions);
|
|
133
|
+
install(app: App): void;
|
|
134
|
+
resize(_w: number, _h: number): void;
|
|
135
|
+
serialize(): Record<string, unknown>;
|
|
136
|
+
dispose(): void;
|
|
137
|
+
/** 当前是否正在连接 */
|
|
138
|
+
isConnecting(): boolean;
|
|
139
|
+
/** 获取当前连接起点 */
|
|
140
|
+
getSource(): Graphics | null;
|
|
141
|
+
/** 编程式取消当前连接 */
|
|
142
|
+
cancel(): void;
|
|
143
|
+
/** 获取纯引擎模式下的所有连接记录（只读） */
|
|
144
|
+
getConnections(): readonly ConnectionRecord[];
|
|
145
|
+
/** 移除纯引擎模式下的连接 */
|
|
146
|
+
removeConnection(id: string): boolean;
|
|
147
|
+
/**
|
|
148
|
+
* 同步纯引擎模式下的连接线位置。
|
|
149
|
+
* 在 render 前调用，更新所有 line 端点为最新的 anchor 坐标。
|
|
150
|
+
*/
|
|
151
|
+
syncConnections(): void;
|
|
152
|
+
}
|
|
153
|
+
declare function connectPlugin(options?: ConnectPluginOptions): ConnectPlugin;
|
|
154
|
+
|
|
155
|
+
export { type ConnectCancelEvent, type ConnectCompleteEvent, type ConnectMoveEvent, ConnectPlugin, type ConnectPluginOptions, type ConnectStartEvent, type ConnectionRecord, connectPlugin };
|
package/dist/main.d.ts
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { Graphics, Node, Plugin, App } from 'rendx-engine';
|
|
2
|
+
import { Point } from 'rendx-core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 纯引擎模式下维护的连接记录。
|
|
6
|
+
* connect 插件自身创建的 line Node 及其两端 Graphics 引用。
|
|
7
|
+
*/
|
|
8
|
+
interface ConnectionRecord {
|
|
9
|
+
/** 连接唯一 ID */
|
|
10
|
+
id: string;
|
|
11
|
+
/** 连接线节点 */
|
|
12
|
+
line: Node;
|
|
13
|
+
/** 起点 Graphics */
|
|
14
|
+
source: Graphics;
|
|
15
|
+
/** 终点 Graphics */
|
|
16
|
+
target: Graphics;
|
|
17
|
+
}
|
|
18
|
+
/** connect:start 事件负载 */
|
|
19
|
+
interface ConnectStartEvent {
|
|
20
|
+
/** 起点 Graphics */
|
|
21
|
+
source: Graphics;
|
|
22
|
+
/** 鼠标按下位置（世界坐标） */
|
|
23
|
+
origin: Point;
|
|
24
|
+
}
|
|
25
|
+
/** connect:move 事件负载 */
|
|
26
|
+
interface ConnectMoveEvent {
|
|
27
|
+
/** 起点 Graphics */
|
|
28
|
+
source: Graphics;
|
|
29
|
+
/** 当前鼠标位置（世界坐标） */
|
|
30
|
+
cursor: Point;
|
|
31
|
+
/** 当前吸附到的目标（null 表示未吸附） */
|
|
32
|
+
snapTarget: Graphics | null;
|
|
33
|
+
}
|
|
34
|
+
/** connect:complete 事件负载 */
|
|
35
|
+
interface ConnectCompleteEvent {
|
|
36
|
+
/** 起点 Graphics */
|
|
37
|
+
source: Graphics;
|
|
38
|
+
/** 终点 Graphics */
|
|
39
|
+
target: Graphics;
|
|
40
|
+
}
|
|
41
|
+
/** connect:cancel 事件负载 */
|
|
42
|
+
interface ConnectCancelEvent {
|
|
43
|
+
/** 起点 Graphics */
|
|
44
|
+
source: Graphics;
|
|
45
|
+
}
|
|
46
|
+
interface ConnectPluginOptions {
|
|
47
|
+
/**
|
|
48
|
+
* 可连接的 className 标记。
|
|
49
|
+
* 只有 `hasClassName(className)` 为 true 的 Graphics 才响应连接交互。
|
|
50
|
+
* @default 'connectable'
|
|
51
|
+
*/
|
|
52
|
+
className?: string;
|
|
53
|
+
/**
|
|
54
|
+
* 自定义验证：是否可以从 source 连接到 target。
|
|
55
|
+
* 返回 false 阻止连接完成。
|
|
56
|
+
*/
|
|
57
|
+
canConnect?: (source: Graphics, target: Graphics) => boolean;
|
|
58
|
+
/**
|
|
59
|
+
* 是否允许自环（source === target）。
|
|
60
|
+
* @default false
|
|
61
|
+
*/
|
|
62
|
+
allowSelfLoop?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* 自定义连接点坐标计算。
|
|
65
|
+
* 接收 Graphics，返回世界坐标 [x, y]。
|
|
66
|
+
* 默认取 Node.getWorldBBox() 中心，Group 取 translation。
|
|
67
|
+
*/
|
|
68
|
+
anchor?: (target: Graphics) => Point;
|
|
69
|
+
/**
|
|
70
|
+
* graph-plugin 中注册的 edge 类型名。
|
|
71
|
+
* 设置后连接完成时自动调用 `graph.add(edgeType, edgeData)`。
|
|
72
|
+
* 未设置则走纯引擎模式（自行创建 line）。
|
|
73
|
+
*/
|
|
74
|
+
edgeType?: string;
|
|
75
|
+
/**
|
|
76
|
+
* 自定义 edge 数据工厂。
|
|
77
|
+
* 接收两个端点 Graphics，返回传给 `graph.add` 的完整 data。
|
|
78
|
+
* 未提供时使用默认工厂（自动溯源 element ID）。
|
|
79
|
+
*/
|
|
80
|
+
edgeFactory?: (source: Graphics, target: Graphics) => Record<string, unknown>;
|
|
81
|
+
/**
|
|
82
|
+
* 无 graph-plugin 时，自行创建的连接线样式。
|
|
83
|
+
*/
|
|
84
|
+
lineStyle?: {
|
|
85
|
+
stroke?: string;
|
|
86
|
+
strokeWidth?: number;
|
|
87
|
+
};
|
|
88
|
+
/** 预览线描边颜色 @default '#1890ff' */
|
|
89
|
+
previewStroke?: string;
|
|
90
|
+
/** 预览线描边宽度 @default 2 */
|
|
91
|
+
previewStrokeWidth?: number;
|
|
92
|
+
/** 预览线虚线模式 @default [6, 4] */
|
|
93
|
+
previewDash?: number[];
|
|
94
|
+
/**
|
|
95
|
+
* 自定义预览路径生成器。
|
|
96
|
+
* 接收起点和终点坐标，返回 SVG path data 字符串。
|
|
97
|
+
* 未设置则使用直线 (`M x1 y1 L x2 y2`)。
|
|
98
|
+
* @example
|
|
99
|
+
* ```typescript
|
|
100
|
+
* previewPath: ([sx, sy], [tx, ty]) => {
|
|
101
|
+
* const mx = (sx + tx) / 2;
|
|
102
|
+
* return `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ty}, ${tx} ${ty}`;
|
|
103
|
+
* }
|
|
104
|
+
* ```
|
|
105
|
+
*/
|
|
106
|
+
previewPath?: (source: Point, target: Point) => string;
|
|
107
|
+
/**
|
|
108
|
+
* 吸附半径（像素），鼠标接近可连接目标多少像素时高亮。
|
|
109
|
+
* @default 20
|
|
110
|
+
*/
|
|
111
|
+
snapRadius?: number;
|
|
112
|
+
/** 连接交互中的光标样式 @default 'crosshair' */
|
|
113
|
+
cursor?: string;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
declare class ConnectPlugin implements Plugin {
|
|
117
|
+
#private;
|
|
118
|
+
readonly name = "connect";
|
|
119
|
+
readonly state: ({
|
|
120
|
+
key: string;
|
|
121
|
+
description: string;
|
|
122
|
+
initial: boolean;
|
|
123
|
+
} | {
|
|
124
|
+
key: string;
|
|
125
|
+
description: string;
|
|
126
|
+
initial: Graphics | null;
|
|
127
|
+
})[];
|
|
128
|
+
readonly layers: {
|
|
129
|
+
name: string;
|
|
130
|
+
zIndex: number;
|
|
131
|
+
}[];
|
|
132
|
+
constructor(options?: ConnectPluginOptions);
|
|
133
|
+
install(app: App): void;
|
|
134
|
+
resize(_w: number, _h: number): void;
|
|
135
|
+
serialize(): Record<string, unknown>;
|
|
136
|
+
dispose(): void;
|
|
137
|
+
/** 当前是否正在连接 */
|
|
138
|
+
isConnecting(): boolean;
|
|
139
|
+
/** 获取当前连接起点 */
|
|
140
|
+
getSource(): Graphics | null;
|
|
141
|
+
/** 编程式取消当前连接 */
|
|
142
|
+
cancel(): void;
|
|
143
|
+
/** 获取纯引擎模式下的所有连接记录（只读） */
|
|
144
|
+
getConnections(): readonly ConnectionRecord[];
|
|
145
|
+
/** 移除纯引擎模式下的连接 */
|
|
146
|
+
removeConnection(id: string): boolean;
|
|
147
|
+
/**
|
|
148
|
+
* 同步纯引擎模式下的连接线位置。
|
|
149
|
+
* 在 render 前调用，更新所有 line 端点为最新的 anchor 坐标。
|
|
150
|
+
*/
|
|
151
|
+
syncConnections(): void;
|
|
152
|
+
}
|
|
153
|
+
declare function connectPlugin(options?: ConnectPluginOptions): ConnectPlugin;
|
|
154
|
+
|
|
155
|
+
export { type ConnectCancelEvent, type ConnectCompleteEvent, type ConnectMoveEvent, ConnectPlugin, type ConnectPluginOptions, type ConnectStartEvent, type ConnectionRecord, connectPlugin };
|