@knotx/plugins-minimap 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 (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +11 -0
  3. package/dist/index.cjs +527 -0
  4. package/dist/index.d.cts +146 -0
  5. package/dist/index.d.mts +146 -0
  6. package/dist/index.d.ts +146 -0
  7. package/dist/index.mjs +521 -0
  8. package/package.json +57 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,146 @@
1
+ import { NodeData, BasePlugin, Container } from '@knotx/core';
2
+ import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
3
+
4
+ interface MinimapProps {
5
+ /**
6
+ * 小地图宽度
7
+ * @default 200
8
+ */
9
+ width?: number;
10
+ /**
11
+ * 小地图高度
12
+ * @default 150
13
+ */
14
+ height?: number;
15
+ /**
16
+ * 节点颜色
17
+ * @default '#AB7BFE'
18
+ */
19
+ nodeColor?: string | ((node: NodeData) => string);
20
+ /**
21
+ * 视图区域背景颜色
22
+ * @default 'rgba(240, 240, 240, 0.6)'
23
+ */
24
+ maskColor?: string;
25
+ /**
26
+ * 视图区域边框颜色
27
+ * @default '#4752E6'
28
+ */
29
+ viewBoxColor?: string;
30
+ /**
31
+ * 显示小地图控制按钮
32
+ * @default true
33
+ */
34
+ showControls?: boolean;
35
+ /**
36
+ * 是否可缩放
37
+ * @default true
38
+ */
39
+ zoomable?: boolean;
40
+ /**
41
+ * 是否可平移
42
+ * @default true
43
+ */
44
+ pannable?: boolean;
45
+ /**
46
+ * 与容器的内边距
47
+ * @default 12
48
+ */
49
+ padding?: number;
50
+ /**
51
+ * 节点圆角
52
+ * @default 2
53
+ */
54
+ nodeBorderRadius?: number;
55
+ /**
56
+ * 节点描边宽度
57
+ * @default 1
58
+ */
59
+ nodeStrokeWidth?: number;
60
+ /**
61
+ * 节点描边颜色
62
+ * @default 'transparent'
63
+ */
64
+ nodeStrokeColor?: string | ((node: NodeData) => string);
65
+ /**
66
+ * 缩放步长
67
+ * @default 0.2
68
+ */
69
+ zoomStep?: number;
70
+ }
71
+ /**
72
+ * Minimap 插件 - 提供画布内容的缩略图预览和交互
73
+ */
74
+ declare class Minimap extends BasePlugin<'minimap'> {
75
+ private props;
76
+ name: "minimap";
77
+ private options;
78
+ private subscription?;
79
+ private currentInteractable?;
80
+ private dragStart$;
81
+ private dragMove$;
82
+ private dragEnd$;
83
+ constructor(props?: MinimapProps);
84
+ container: Container;
85
+ transform: CanvasTransformState;
86
+ canvasRef: CanvasRef | null;
87
+ nodes: NodeData[];
88
+ get classNames(): {
89
+ wrapper: string;
90
+ svg: string;
91
+ viewBox: string;
92
+ mask: string;
93
+ node: string;
94
+ control: string;
95
+ zoomIn: string;
96
+ zoomOut: string;
97
+ reset: string;
98
+ };
99
+ /**
100
+ * 计算视图变换和缩放
101
+ */
102
+ private getViewTransform;
103
+ /**
104
+ * 计算节点颜色
105
+ */
106
+ private getNodeColor;
107
+ /**
108
+ * 计算节点边框颜色
109
+ */
110
+ private getNodeStrokeColor;
111
+ /**
112
+ * 从SVG坐标转换为流程图坐标
113
+ */
114
+ private getSvgToGraphCoordinates;
115
+ /**
116
+ * 处理小地图上的点击事件，移动视图
117
+ */
118
+ private handleMinimapClick;
119
+ /**
120
+ * 处理缩放按钮点击事件
121
+ */
122
+ private handleZoom;
123
+ /**
124
+ * 重置视图
125
+ */
126
+ private handleReset;
127
+ /**
128
+ * 初始化拖拽功能
129
+ */
130
+ init(): void;
131
+ /**
132
+ * 设置拖拽流
133
+ */
134
+ private setupDragStream;
135
+ /**
136
+ * 初始化 interact.js 的拖拽功能
137
+ */
138
+ private setupInteractable;
139
+ /**
140
+ * 清理资源
141
+ */
142
+ destroy(): void;
143
+ render(): JSX.Element | null;
144
+ }
145
+
146
+ export { Minimap, type MinimapProps };
package/dist/index.d.mts ADDED
@@ -0,0 +1,146 @@
1
+ import { NodeData, BasePlugin, Container } from '@knotx/core';
2
+ import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
3
+
4
+ interface MinimapProps {
5
+ /**
6
+ * 小地图宽度
7
+ * @default 200
8
+ */
9
+ width?: number;
10
+ /**
11
+ * 小地图高度
12
+ * @default 150
13
+ */
14
+ height?: number;
15
+ /**
16
+ * 节点颜色
17
+ * @default '#AB7BFE'
18
+ */
19
+ nodeColor?: string | ((node: NodeData) => string);
20
+ /**
21
+ * 视图区域背景颜色
22
+ * @default 'rgba(240, 240, 240, 0.6)'
23
+ */
24
+ maskColor?: string;
25
+ /**
26
+ * 视图区域边框颜色
27
+ * @default '#4752E6'
28
+ */
29
+ viewBoxColor?: string;
30
+ /**
31
+ * 显示小地图控制按钮
32
+ * @default true
33
+ */
34
+ showControls?: boolean;
35
+ /**
36
+ * 是否可缩放
37
+ * @default true
38
+ */
39
+ zoomable?: boolean;
40
+ /**
41
+ * 是否可平移
42
+ * @default true
43
+ */
44
+ pannable?: boolean;
45
+ /**
46
+ * 与容器的内边距
47
+ * @default 12
48
+ */
49
+ padding?: number;
50
+ /**
51
+ * 节点圆角
52
+ * @default 2
53
+ */
54
+ nodeBorderRadius?: number;
55
+ /**
56
+ * 节点描边宽度
57
+ * @default 1
58
+ */
59
+ nodeStrokeWidth?: number;
60
+ /**
61
+ * 节点描边颜色
62
+ * @default 'transparent'
63
+ */
64
+ nodeStrokeColor?: string | ((node: NodeData) => string);
65
+ /**
66
+ * 缩放步长
67
+ * @default 0.2
68
+ */
69
+ zoomStep?: number;
70
+ }
71
+ /**
72
+ * Minimap 插件 - 提供画布内容的缩略图预览和交互
73
+ */
74
+ declare class Minimap extends BasePlugin<'minimap'> {
75
+ private props;
76
+ name: "minimap";
77
+ private options;
78
+ private subscription?;
79
+ private currentInteractable?;
80
+ private dragStart$;
81
+ private dragMove$;
82
+ private dragEnd$;
83
+ constructor(props?: MinimapProps);
84
+ container: Container;
85
+ transform: CanvasTransformState;
86
+ canvasRef: CanvasRef | null;
87
+ nodes: NodeData[];
88
+ get classNames(): {
89
+ wrapper: string;
90
+ svg: string;
91
+ viewBox: string;
92
+ mask: string;
93
+ node: string;
94
+ control: string;
95
+ zoomIn: string;
96
+ zoomOut: string;
97
+ reset: string;
98
+ };
99
+ /**
100
+ * 计算视图变换和缩放
101
+ */
102
+ private getViewTransform;
103
+ /**
104
+ * 计算节点颜色
105
+ */
106
+ private getNodeColor;
107
+ /**
108
+ * 计算节点边框颜色
109
+ */
110
+ private getNodeStrokeColor;
111
+ /**
112
+ * 从SVG坐标转换为流程图坐标
113
+ */
114
+ private getSvgToGraphCoordinates;
115
+ /**
116
+ * 处理小地图上的点击事件，移动视图
117
+ */
118
+ private handleMinimapClick;
119
+ /**
120
+ * 处理缩放按钮点击事件
121
+ */
122
+ private handleZoom;
123
+ /**
124
+ * 重置视图
125
+ */
126
+ private handleReset;
127
+ /**
128
+ * 初始化拖拽功能
129
+ */
130
+ init(): void;
131
+ /**
132
+ * 设置拖拽流
133
+ */
134
+ private setupDragStream;
135
+ /**
136
+ * 初始化 interact.js 的拖拽功能
137
+ */
138
+ private setupInteractable;
139
+ /**
140
+ * 清理资源
141
+ */
142
+ destroy(): void;
143
+ render(): JSX.Element | null;
144
+ }
145
+
146
+ export { Minimap, type MinimapProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,146 @@
1
+ import { NodeData, BasePlugin, Container } from '@knotx/core';
2
+ import { CanvasTransformState, CanvasRef } from '@knotx/plugins-canvas';
3
+
4
+ interface MinimapProps {
5
+ /**
6
+ * 小地图宽度
7
+ * @default 200
8
+ */
9
+ width?: number;
10
+ /**
11
+ * 小地图高度
12
+ * @default 150
13
+ */
14
+ height?: number;
15
+ /**
16
+ * 节点颜色
17
+ * @default '#AB7BFE'
18
+ */
19
+ nodeColor?: string | ((node: NodeData) => string);
20
+ /**
21
+ * 视图区域背景颜色
22
+ * @default 'rgba(240, 240, 240, 0.6)'
23
+ */
24
+ maskColor?: string;
25
+ /**
26
+ * 视图区域边框颜色
27
+ * @default '#4752E6'
28
+ */
29
+ viewBoxColor?: string;
30
+ /**
31
+ * 显示小地图控制按钮
32
+ * @default true
33
+ */
34
+ showControls?: boolean;
35
+ /**
36
+ * 是否可缩放
37
+ * @default true
38
+ */
39
+ zoomable?: boolean;
40
+ /**
41
+ * 是否可平移
42
+ * @default true
43
+ */
44
+ pannable?: boolean;
45
+ /**
46
+ * 与容器的内边距
47
+ * @default 12
48
+ */
49
+ padding?: number;
50
+ /**
51
+ * 节点圆角
52
+ * @default 2
53
+ */
54
+ nodeBorderRadius?: number;
55
+ /**
56
+ * 节点描边宽度
57
+ * @default 1
58
+ */
59
+ nodeStrokeWidth?: number;
60
+ /**
61
+ * 节点描边颜色
62
+ * @default 'transparent'
63
+ */
64
+ nodeStrokeColor?: string | ((node: NodeData) => string);
65
+ /**
66
+ * 缩放步长
67
+ * @default 0.2
68
+ */
69
+ zoomStep?: number;
70
+ }
71
+ /**
72
+ * Minimap 插件 - 提供画布内容的缩略图预览和交互
73
+ */
74
+ declare class Minimap extends BasePlugin<'minimap'> {
75
+ private props;
76
+ name: "minimap";
77
+ private options;
78
+ private subscription?;
79
+ private currentInteractable?;
80
+ private dragStart$;
81
+ private dragMove$;
82
+ private dragEnd$;
83
+ constructor(props?: MinimapProps);
84
+ container: Container;
85
+ transform: CanvasTransformState;
86
+ canvasRef: CanvasRef | null;
87
+ nodes: NodeData[];
88
+ get classNames(): {
89
+ wrapper: string;
90
+ svg: string;
91
+ viewBox: string;
92
+ mask: string;
93
+ node: string;
94
+ control: string;
95
+ zoomIn: string;
96
+ zoomOut: string;
97
+ reset: string;
98
+ };
99
+ /**
100
+ * 计算视图变换和缩放
101
+ */
102
+ private getViewTransform;
103
+ /**
104
+ * 计算节点颜色
105
+ */
106
+ private getNodeColor;
107
+ /**
108
+ * 计算节点边框颜色
109
+ */
110
+ private getNodeStrokeColor;
111
+ /**
112
+ * 从SVG坐标转换为流程图坐标
113
+ */
114
+ private getSvgToGraphCoordinates;
115
+ /**
116
+ * 处理小地图上的点击事件，移动视图
117
+ */
118
+ private handleMinimapClick;
119
+ /**
120
+ * 处理缩放按钮点击事件
121
+ */
122
+ private handleZoom;
123
+ /**
124
+ * 重置视图
125
+ */
126
+ private handleReset;
127
+ /**
128
+ * 初始化拖拽功能
129
+ */
130
+ init(): void;
131
+ /**
132
+ * 设置拖拽流
133
+ */
134
+ private setupDragStream;
135
+ /**
136
+ * 初始化 interact.js 的拖拽功能
137
+ */
138
+ private setupInteractable;
139
+ /**
140
+ * 清理资源
141
+ */
142
+ destroy(): void;
143
+ render(): JSX.Element | null;
144
+ }
145
+
146
+ export { Minimap, type MinimapProps };