@knotx/plugins-connection-line 0.0.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.
Files changed (7) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.cjs +496 -0
  3. package/dist/index.d.cts +152 -0
  4. package/dist/index.d.mts +152 -0
  5. package/dist/index.d.ts +152 -0
  6. package/dist/index.mjs +490 -0
  7. package/package.json +63 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,152 @@
1
+ import { NodeData, EdgeData, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
2
+
3
+ interface ConnectionLineOptions {
4
+ /**
5
+ * 是否允许连接到画布空白处并创建新节点
6
+ * @default false
7
+ */
8
+ allowCreateNodeOnBlankArea?: boolean;
9
+ /**
10
+ * 当连接到画布空白处时创建的节点类型
11
+ * @default 'default'
12
+ */
13
+ newNodeType?: string;
14
+ /**
15
+ * 新创建的边的类型
16
+ * @default 'bezier'
17
+ */
18
+ edgeType?: string;
19
+ /**
20
+ * 临时连接线的类名
21
+ * @default 'knotx-connection-line'
22
+ */
23
+ connectionLineClassName?: string;
24
+ /**
25
+ * 是否支持从多个选中节点同时拖拽连接线
26
+ * @default true
27
+ */
28
+ allowMultiDrag?: boolean;
29
+ }
30
+ interface ConnectionValidateContext {
31
+ sourceNodeId: string;
32
+ sourceNode: NodeData;
33
+ targetNodeId?: string;
34
+ targetNode?: NodeData;
35
+ isValid: boolean;
36
+ }
37
+ type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
38
+ declare module '@knotx/core' {
39
+ interface PluginData {
40
+ connectionLine: {
41
+ options: ConnectionLineOptions;
42
+ registerValidator: (validator: ConnectionValidator) => () => void;
43
+ registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
44
+ node: NodeData;
45
+ edges: EdgeData[];
46
+ }) | false) => () => void;
47
+ /**
48
+ * 获取连接点的属性
49
+ * @param nodeId 节点ID
50
+ * @param type 连接点类型，可选值为 'source' 或 'target'
51
+ * @param index 连接点索引，多个连接点时使用
52
+ * @returns 连接点属性对象
53
+ */
54
+ getConnectHandleAttributes: (nodeId: string, type: 'source' | 'target', index?: number) => Record<string, string>;
55
+ };
56
+ }
57
+ }
58
+ /**
59
+ * 连接线插件
60
+ * 允许从指定DOM元素拖拽出连接线，连接到其他节点
61
+ */
62
+ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
63
+ name: "connectionLine";
64
+ getNode: (id: string) => NodeData | undefined;
65
+ dispatchNodeOperation: (operation: NodeOperation) => void;
66
+ dispatchEdgeOperation: (operation: EdgeOperation) => void;
67
+ startInteraction: (pluginId: string, type: string, priority: InteractionPriority) => void;
68
+ endInteraction: (pluginId: string, type: string) => void;
69
+ canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
70
+ selectedNodeIds: string[];
71
+ getConnectHandleAttributes: (nodeId: string, type: "source" | "target", id?: number) => {
72
+ className: string;
73
+ 'data-plugin-id': string;
74
+ 'data-node-id': string;
75
+ 'data-connector-id': string;
76
+ 'data-connector-type': "source" | "target";
77
+ };
78
+ private classNames;
79
+ private connectionLines;
80
+ private startScale;
81
+ private currentDragNodeId;
82
+ private subscription?;
83
+ private dragInteractable?;
84
+ private dropInteractable?;
85
+ private blankAreaDropInteractable?;
86
+ private validators$;
87
+ private creators$;
88
+ constructor(options?: ConnectionLineOptions);
89
+ options: ConnectionLineOptions;
90
+ registerValidator: (validator: ConnectionValidator) => () => void;
91
+ registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
92
+ node: NodeData;
93
+ edges: EdgeData[];
94
+ }) | false) => () => void;
95
+ containerRender(): JSX.Element;
96
+ /**
97
+ * 获取容器大小
98
+ */
99
+ private getContainerSize;
100
+ /**
101
+ * 应用所有验证器，检查连接是否有效
102
+ */
103
+ private validateConnection;
104
+ private getContainerElement;
105
+ /**
106
+ * 获取需要为其创建连接线的源节点ID列表
107
+ * 根据当前拖拽的节点和选中的节点决定
108
+ */
109
+ private getSourceNodeIdsForDrag;
110
+ /**
111
+ * 创建临时连接线
112
+ */
113
+ private createConnectionLine;
114
+ /**
115
+ * 更新临时连接线的路径
116
+ */
117
+ private updateConnectionLine;
118
+ /**
119
+ * 更新所有连接线的当前位置
120
+ */
121
+ private updateAllConnectionLines;
122
+ /**
123
+ * 清除所有临时连接线
124
+ */
125
+ private clearAllConnectionLines;
126
+ /**
127
+ * 创建新节点
128
+ */
129
+ createNodeAndEdge(sourceNodeIds: string[], position: {
130
+ x: number;
131
+ y: number;
132
+ }): EdgeOperation[];
133
+ /**
134
+ * 创建新的边
135
+ */
136
+ createEdge(sourceNodeId: string, targetNodeId: string): EdgeOperation[];
137
+ /**
138
+ * 批量创建新的边
139
+ */
140
+ createEdges(sourceNodeIds: string[], targetNodeId: string): EdgeOperation[];
141
+ /**
142
+ * 批量创建新节点和边
143
+ */
144
+ createNodesAndEdges(sourceNodeIds: string[], position: {
145
+ x: number;
146
+ y: number;
147
+ }): EdgeOperation[];
148
+ init(): void;
149
+ destroy(): void;
150
+ }
151
+
152
+ export { ConnectionLine, type ConnectionLineOptions, type ConnectionValidateContext, type ConnectionValidator };
package/dist/index.d.ts ADDED
@@ -0,0 +1,152 @@
1
+ import { NodeData, EdgeData, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
2
+
3
+ interface ConnectionLineOptions {
4
+ /**
5
+ * 是否允许连接到画布空白处并创建新节点
6
+ * @default false
7
+ */
8
+ allowCreateNodeOnBlankArea?: boolean;
9
+ /**
10
+ * 当连接到画布空白处时创建的节点类型
11
+ * @default 'default'
12
+ */
13
+ newNodeType?: string;
14
+ /**
15
+ * 新创建的边的类型
16
+ * @default 'bezier'
17
+ */
18
+ edgeType?: string;
19
+ /**
20
+ * 临时连接线的类名
21
+ * @default 'knotx-connection-line'
22
+ */
23
+ connectionLineClassName?: string;
24
+ /**
25
+ * 是否支持从多个选中节点同时拖拽连接线
26
+ * @default true
27
+ */
28
+ allowMultiDrag?: boolean;
29
+ }
30
+ interface ConnectionValidateContext {
31
+ sourceNodeId: string;
32
+ sourceNode: NodeData;
33
+ targetNodeId?: string;
34
+ targetNode?: NodeData;
35
+ isValid: boolean;
36
+ }
37
+ type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
38
+ declare module '@knotx/core' {
39
+ interface PluginData {
40
+ connectionLine: {
41
+ options: ConnectionLineOptions;
42
+ registerValidator: (validator: ConnectionValidator) => () => void;
43
+ registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
44
+ node: NodeData;
45
+ edges: EdgeData[];
46
+ }) | false) => () => void;
47
+ /**
48
+ * 获取连接点的属性
49
+ * @param nodeId 节点ID
50
+ * @param type 连接点类型，可选值为 'source' 或 'target'
51
+ * @param index 连接点索引，多个连接点时使用
52
+ * @returns 连接点属性对象
53
+ */
54
+ getConnectHandleAttributes: (nodeId: string, type: 'source' | 'target', index?: number) => Record<string, string>;
55
+ };
56
+ }
57
+ }
58
+ /**
59
+ * 连接线插件
60
+ * 允许从指定DOM元素拖拽出连接线，连接到其他节点
61
+ */
62
+ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
63
+ name: "connectionLine";
64
+ getNode: (id: string) => NodeData | undefined;
65
+ dispatchNodeOperation: (operation: NodeOperation) => void;
66
+ dispatchEdgeOperation: (operation: EdgeOperation) => void;
67
+ startInteraction: (pluginId: string, type: string, priority: InteractionPriority) => void;
68
+ endInteraction: (pluginId: string, type: string) => void;
69
+ canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
70
+ selectedNodeIds: string[];
71
+ getConnectHandleAttributes: (nodeId: string, type: "source" | "target", id?: number) => {
72
+ className: string;
73
+ 'data-plugin-id': string;
74
+ 'data-node-id': string;
75
+ 'data-connector-id': string;
76
+ 'data-connector-type': "source" | "target";
77
+ };
78
+ private classNames;
79
+ private connectionLines;
80
+ private startScale;
81
+ private currentDragNodeId;
82
+ private subscription?;
83
+ private dragInteractable?;
84
+ private dropInteractable?;
85
+ private blankAreaDropInteractable?;
86
+ private validators$;
87
+ private creators$;
88
+ constructor(options?: ConnectionLineOptions);
89
+ options: ConnectionLineOptions;
90
+ registerValidator: (validator: ConnectionValidator) => () => void;
91
+ registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
92
+ node: NodeData;
93
+ edges: EdgeData[];
94
+ }) | false) => () => void;
95
+ containerRender(): JSX.Element;
96
+ /**
97
+ * 获取容器大小
98
+ */
99
+ private getContainerSize;
100
+ /**
101
+ * 应用所有验证器，检查连接是否有效
102
+ */
103
+ private validateConnection;
104
+ private getContainerElement;
105
+ /**
106
+ * 获取需要为其创建连接线的源节点ID列表
107
+ * 根据当前拖拽的节点和选中的节点决定
108
+ */
109
+ private getSourceNodeIdsForDrag;
110
+ /**
111
+ * 创建临时连接线
112
+ */
113
+ private createConnectionLine;
114
+ /**
115
+ * 更新临时连接线的路径
116
+ */
117
+ private updateConnectionLine;
118
+ /**
119
+ * 更新所有连接线的当前位置
120
+ */
121
+ private updateAllConnectionLines;
122
+ /**
123
+ * 清除所有临时连接线
124
+ */
125
+ private clearAllConnectionLines;
126
+ /**
127
+ * 创建新节点
128
+ */
129
+ createNodeAndEdge(sourceNodeIds: string[], position: {
130
+ x: number;
131
+ y: number;
132
+ }): EdgeOperation[];
133
+ /**
134
+ * 创建新的边
135
+ */
136
+ createEdge(sourceNodeId: string, targetNodeId: string): EdgeOperation[];
137
+ /**
138
+ * 批量创建新的边
139
+ */
140
+ createEdges(sourceNodeIds: string[], targetNodeId: string): EdgeOperation[];
141
+ /**
142
+ * 批量创建新节点和边
143
+ */
144
+ createNodesAndEdges(sourceNodeIds: string[], position: {
145
+ x: number;
146
+ y: number;
147
+ }): EdgeOperation[];
148
+ init(): void;
149
+ destroy(): void;
150
+ }
151
+
152
+ export { ConnectionLine, type ConnectionLineOptions, type ConnectionValidateContext, type ConnectionValidator };