@oceanbase/ui 1.0.0-alpha.5 → 1.0.0-alpha.7
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/dist/static/Inter-Medium.ea234620.woff2 +0 -0
- package/dist/static/Inter-Regular.34ba43c9.woff2 +0 -0
- package/dist/static/Inter-SemiBold.95439fb4.woff2 +0 -0
- package/dist/ui.min.css +1 -1
- package/dist/ui.min.js +1 -1
- package/es/BasicLayout/locale/ja-JP.js +6 -6
- package/es/Boundary/locale/en-US.js +1 -1
- package/es/Boundary/locale/ja-JP.js +4 -4
- package/es/Boundary/locale/zh-CN.js +1 -1
- package/es/Boundary/locale/zh-TW.js +1 -1
- package/es/DateRanger/locale/ja-JP.js +3 -3
- package/es/Dialog/locale/ja-JP.js +2 -2
- package/es/Dialog/locale/zh-CN.js +1 -1
- package/es/Dialog/locale/zh-TW.js +1 -1
- package/es/Login/locale/ja-JP.js +11 -11
- package/es/Login/locale/zh-CN.js +2 -2
- package/es/PageContainer/index.d.ts +2 -0
- package/es/PageContainer/index.js +74 -23
- package/es/PageContainer/locale/en-US.d.ts +1 -0
- package/es/PageContainer/locale/en-US.js +2 -1
- package/es/PageContainer/locale/ja-JP.d.ts +1 -0
- package/es/PageContainer/locale/ja-JP.js +2 -1
- package/es/PageContainer/locale/zh-CN.d.ts +1 -0
- package/es/PageContainer/locale/zh-CN.js +2 -1
- package/es/PageContainer/locale/zh-TW.d.ts +1 -0
- package/es/PageContainer/locale/zh-TW.js +2 -1
- package/es/PageContainer/style/index.js +16 -2
- package/es/Password/locale/ja-JP.js +6 -6
- package/es/ProTable/style/index.js +8 -4
- package/es/_util/genComponentStyleHook.d.ts +2 -2
- package/es/_util/genComponentStyleHook.js +1 -1
- package/es/index.d.ts +0 -4
- package/es/index.js +0 -2
- package/es/locale/en-US.js +0 -4
- package/es/locale/ja-JP.js +0 -4
- package/es/locale/zh-CN.js +0 -4
- package/es/locale/zh-TW.js +0 -4
- package/lib/BasicLayout/locale/ja-JP.js +6 -6
- package/lib/Boundary/locale/en-US.js +1 -1
- package/lib/Boundary/locale/ja-JP.js +4 -4
- package/lib/Boundary/locale/zh-CN.js +1 -1
- package/lib/Boundary/locale/zh-TW.js +1 -1
- package/lib/DateRanger/locale/ja-JP.js +3 -3
- package/lib/Dialog/locale/ja-JP.js +2 -2
- package/lib/Dialog/locale/zh-CN.js +1 -1
- package/lib/Dialog/locale/zh-TW.js +1 -1
- package/lib/Login/locale/ja-JP.js +11 -11
- package/lib/Login/locale/zh-CN.js +2 -2
- package/lib/PageContainer/index.d.ts +2 -0
- package/lib/PageContainer/index.js +49 -2
- package/lib/PageContainer/locale/en-US.d.ts +1 -0
- package/lib/PageContainer/locale/en-US.js +2 -1
- package/lib/PageContainer/locale/ja-JP.d.ts +1 -0
- package/lib/PageContainer/locale/ja-JP.js +2 -1
- package/lib/PageContainer/locale/zh-CN.d.ts +1 -0
- package/lib/PageContainer/locale/zh-CN.js +2 -1
- package/lib/PageContainer/locale/zh-TW.d.ts +1 -0
- package/lib/PageContainer/locale/zh-TW.js +2 -1
- package/lib/PageContainer/style/index.js +17 -1
- package/lib/Password/locale/ja-JP.js +6 -6
- package/lib/ProTable/style/index.js +11 -1
- package/lib/_util/genComponentStyleHook.d.ts +2 -2
- package/lib/_util/genComponentStyleHook.js +1 -1
- package/lib/index.d.ts +0 -4
- package/lib/index.js +0 -6
- package/lib/locale/en-US.js +16 -20
- package/lib/locale/ja-JP.js +16 -20
- package/lib/locale/zh-CN.js +17 -21
- package/lib/locale/zh-TW.js +15 -19
- package/package.json +4 -4
- package/dist/static/Inter.f6bcdfb6.woff2 +0 -0
- package/es/GraphToolbar/index.d.ts +0 -25
- package/es/GraphToolbar/index.js +0 -149
- package/es/GraphToolbar/locale/en-US.d.ts +0 -9
- package/es/GraphToolbar/locale/en-US.js +0 -8
- package/es/GraphToolbar/locale/ja-JP.d.ts +0 -9
- package/es/GraphToolbar/locale/ja-JP.js +0 -8
- package/es/GraphToolbar/locale/zh-CN.d.ts +0 -9
- package/es/GraphToolbar/locale/zh-CN.js +0 -8
- package/es/GraphToolbar/locale/zh-TW.d.ts +0 -9
- package/es/GraphToolbar/locale/zh-TW.js +0 -8
- package/es/GraphToolbar/style/index.d.ts +0 -10
- package/es/GraphToolbar/style/index.js +0 -60
- package/es/TaskGraph/Graph/style/index.d.ts +0 -10
- package/es/TaskGraph/Graph/style/index.js +0 -28
- package/es/TaskGraph/Graph.d.ts +0 -23
- package/es/TaskGraph/Graph.js +0 -287
- package/es/TaskGraph/index.d.ts +0 -15
- package/es/TaskGraph/index.js +0 -181
- package/es/TaskGraph/locale/en-US.d.ts +0 -13
- package/es/TaskGraph/locale/en-US.js +0 -12
- package/es/TaskGraph/locale/ja-JP.d.ts +0 -13
- package/es/TaskGraph/locale/ja-JP.js +0 -12
- package/es/TaskGraph/locale/zh-CN.d.ts +0 -13
- package/es/TaskGraph/locale/zh-CN.js +0 -12
- package/es/TaskGraph/locale/zh-TW.d.ts +0 -13
- package/es/TaskGraph/locale/zh-TW.js +0 -12
- package/es/TaskGraph/register.d.ts +0 -7
- package/es/TaskGraph/register.js +0 -200
- package/es/TaskGraph/style/index.d.ts +0 -10
- package/es/TaskGraph/style/index.js +0 -102
- package/lib/GraphToolbar/index.d.ts +0 -25
- package/lib/GraphToolbar/index.js +0 -169
- package/lib/GraphToolbar/locale/en-US.d.ts +0 -9
- package/lib/GraphToolbar/locale/en-US.js +0 -32
- package/lib/GraphToolbar/locale/ja-JP.d.ts +0 -9
- package/lib/GraphToolbar/locale/ja-JP.js +0 -32
- package/lib/GraphToolbar/locale/zh-CN.d.ts +0 -9
- package/lib/GraphToolbar/locale/zh-CN.js +0 -32
- package/lib/GraphToolbar/locale/zh-TW.d.ts +0 -9
- package/lib/GraphToolbar/locale/zh-TW.js +0 -32
- package/lib/GraphToolbar/style/index.d.ts +0 -10
- package/lib/GraphToolbar/style/index.js +0 -91
- package/lib/TaskGraph/Graph/style/index.d.ts +0 -10
- package/lib/TaskGraph/Graph/style/index.js +0 -56
- package/lib/TaskGraph/Graph.d.ts +0 -23
- package/lib/TaskGraph/Graph.js +0 -275
- package/lib/TaskGraph/index.d.ts +0 -15
- package/lib/TaskGraph/index.js +0 -171
- package/lib/TaskGraph/locale/en-US.d.ts +0 -13
- package/lib/TaskGraph/locale/en-US.js +0 -36
- package/lib/TaskGraph/locale/ja-JP.d.ts +0 -13
- package/lib/TaskGraph/locale/ja-JP.js +0 -36
- package/lib/TaskGraph/locale/zh-CN.d.ts +0 -13
- package/lib/TaskGraph/locale/zh-CN.js +0 -36
- package/lib/TaskGraph/locale/zh-TW.d.ts +0 -13
- package/lib/TaskGraph/locale/zh-TW.js +0 -36
- package/lib/TaskGraph/register.d.ts +0 -7
- package/lib/TaskGraph/register.js +0 -205
- package/lib/TaskGraph/style/index.d.ts +0 -10
- package/lib/TaskGraph/style/index.js +0 -143
package/es/TaskGraph/register.js
DELETED
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
import G6 from '@antv/g6';
|
|
8
|
-
import { token } from '@oceanbase/design';
|
|
9
|
-
import { findByValue } from '@oceanbase/util';
|
|
10
|
-
import { toLower } from 'lodash';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* 计算字符串的长度
|
|
14
|
-
* @param {string} str 指定的字符串
|
|
15
|
-
* @return {number} 字符串长度
|
|
16
|
-
*/
|
|
17
|
-
var calcStrLen = function calcStrLen(str) {
|
|
18
|
-
var len = 0;
|
|
19
|
-
// eslint-disable-next-line
|
|
20
|
-
for (var i = 0; i < str.length; i++) {
|
|
21
|
-
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
|
22
|
-
// eslint-disable-next-line
|
|
23
|
-
len++;
|
|
24
|
-
} else {
|
|
25
|
-
len += 2;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
return len;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* 计算显示的字符串
|
|
33
|
-
* @param {string} str 要裁剪的字符串
|
|
34
|
-
* @param {number} maxWidth 最大宽度
|
|
35
|
-
* @param {number} fontSize 字体大小
|
|
36
|
-
* @return {string} 处理后的字符串
|
|
37
|
-
*/
|
|
38
|
-
var fittingString = function fittingString(str, maxWidth, fontSize) {
|
|
39
|
-
var fontWidth = fontSize * 1.3; // 字号+边距
|
|
40
|
-
maxWidth *= 2; // 需要根据自己项目调整
|
|
41
|
-
var width = calcStrLen(str) * fontWidth;
|
|
42
|
-
var ellipsis = '…';
|
|
43
|
-
if (width > maxWidth) {
|
|
44
|
-
var actualLen = Math.floor((maxWidth - 10) / fontWidth);
|
|
45
|
-
var result = str.substring(0, actualLen) + ellipsis;
|
|
46
|
-
return result;
|
|
47
|
-
}
|
|
48
|
-
return str;
|
|
49
|
-
};
|
|
50
|
-
export default function (statusList, assetsPath) {
|
|
51
|
-
G6.registerNode('subTaskNode', {
|
|
52
|
-
drawShape: function drawShape(cfg, group) {
|
|
53
|
-
var defaultNodeWidth = 200;
|
|
54
|
-
var nodeWidth = defaultNodeWidth;
|
|
55
|
-
var offsetX = 0;
|
|
56
|
-
// 任务名
|
|
57
|
-
if (cfg.name) {
|
|
58
|
-
// 使用 ellipsisName 字段用于超长文本截断
|
|
59
|
-
var ellipsisName = fittingString(cfg.name, 180, 12);
|
|
60
|
-
var nameShape = group.addShape('text', {
|
|
61
|
-
attrs: {
|
|
62
|
-
// 使用裁剪后的 name
|
|
63
|
-
text: ellipsisName,
|
|
64
|
-
x: -30,
|
|
65
|
-
y: -5,
|
|
66
|
-
fill: token.colorText,
|
|
67
|
-
fontSize: 14,
|
|
68
|
-
fontFamily: 'SFProText-Medium'
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
var nameBBox = nameShape.getBBox();
|
|
72
|
-
nodeWidth = nameBBox.width + 100;
|
|
73
|
-
if (nodeWidth > 280) {
|
|
74
|
-
// 节点宽度最大为 280
|
|
75
|
-
nodeWidth = 280;
|
|
76
|
-
} else if (nodeWidth < 200) {
|
|
77
|
-
// 节点宽度最小为 200
|
|
78
|
-
nodeWidth = 200;
|
|
79
|
-
}
|
|
80
|
-
offsetX = -(nodeWidth - defaultNodeWidth) / 2;
|
|
81
|
-
nameShape.translate(offsetX, 0);
|
|
82
|
-
}
|
|
83
|
-
var rect = group.addShape('rect', {
|
|
84
|
-
name: 'rect',
|
|
85
|
-
attrs: {
|
|
86
|
-
x: -nodeWidth / 2,
|
|
87
|
-
y: -34,
|
|
88
|
-
width: nodeWidth,
|
|
89
|
-
height: 62,
|
|
90
|
-
radius: 30,
|
|
91
|
-
fill: '#fff',
|
|
92
|
-
lineWidth: 3,
|
|
93
|
-
shadowColor: '#e1e3e6',
|
|
94
|
-
shadowBlur: 10,
|
|
95
|
-
shadowOffsetX: 0,
|
|
96
|
-
shadowOffsetY: 10
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
// 状态图片
|
|
101
|
-
group.addShape('image', {
|
|
102
|
-
name: 'statusImage',
|
|
103
|
-
attrs: {
|
|
104
|
-
x: -89 + offsetX,
|
|
105
|
-
y: -23,
|
|
106
|
-
width: 42,
|
|
107
|
-
height: 42,
|
|
108
|
-
// 任务状态图标的命名需要与状态名保持一致
|
|
109
|
-
img: "".concat(assetsPath, "/task_").concat(toLower(cfg.status), ".svg")
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
// 任务状态
|
|
114
|
-
group.addShape('text', {
|
|
115
|
-
name: 'statusName',
|
|
116
|
-
attrs: {
|
|
117
|
-
text: findByValue(statusList, cfg.status).label,
|
|
118
|
-
x: -30 + offsetX,
|
|
119
|
-
y: 15,
|
|
120
|
-
fill: token.colorTextTertiary,
|
|
121
|
-
fontSize: 12,
|
|
122
|
-
fontFamily: 'PingFangSC-Regular'
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
var moreGroup = group.addGroup({
|
|
126
|
-
name: 'moreGroup'
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
// ellipsis 图片
|
|
130
|
-
moreGroup.addShape('image', {
|
|
131
|
-
attrs: {
|
|
132
|
-
// 右边距为 34
|
|
133
|
-
x: nodeWidth / 2 - 34 - 16,
|
|
134
|
-
y: 8,
|
|
135
|
-
width: 16,
|
|
136
|
-
height: 2.5,
|
|
137
|
-
cursor: 'pointer',
|
|
138
|
-
img: "".concat(assetsPath, "/icon_ellipsis.svg")
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
moreGroup.addShape('rect', {
|
|
142
|
-
attrs: {
|
|
143
|
-
x: nodeWidth / 2 - 34 - 16,
|
|
144
|
-
y: 0,
|
|
145
|
-
width: 16,
|
|
146
|
-
height: 16,
|
|
147
|
-
cursor: 'pointer',
|
|
148
|
-
fill: 'transparent'
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
// rect 在节点名称之后渲染,需要对 rect 进行置底操作
|
|
153
|
-
rect.toBack();
|
|
154
|
-
return rect;
|
|
155
|
-
},
|
|
156
|
-
update: function update(cfg, node) {
|
|
157
|
-
var group = node.get('group');
|
|
158
|
-
var statusImage = group.findAllByName('statusImage') && group.findAllByName('statusImage')[0];
|
|
159
|
-
var statusName = group.findAllByName('statusName') && group.findAllByName('statusName')[0];
|
|
160
|
-
// 更新状态图标
|
|
161
|
-
if (statusImage) {
|
|
162
|
-
statusImage.attr('img', "".concat(assetsPath, "/task_").concat(toLower(cfg.status), ".svg"));
|
|
163
|
-
}
|
|
164
|
-
// 更新状态文本
|
|
165
|
-
if (statusName) {
|
|
166
|
-
statusName.attr('text', findByValue(statusList, cfg.status).label);
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}, 'single-node');
|
|
170
|
-
G6.registerEdge('subTaskEdge', {
|
|
171
|
-
curvePosition: [9 / 10, 1 / 10],
|
|
172
|
-
getShapeStyle: function getShapeStyle(cfg) {
|
|
173
|
-
var targetNodeModel = cfg.targetNode && cfg.targetNode.get('model') || {};
|
|
174
|
-
var status = targetNodeModel.status;
|
|
175
|
-
var startPoint = cfg.startPoint,
|
|
176
|
-
endPoint = cfg.endPoint;
|
|
177
|
-
var controlPoints = this.getControlPoints(cfg);
|
|
178
|
-
var points = [startPoint]; // 添加起始点
|
|
179
|
-
// 添加控制点
|
|
180
|
-
if (controlPoints) {
|
|
181
|
-
points = points.concat(controlPoints);
|
|
182
|
-
}
|
|
183
|
-
// 添加结束点
|
|
184
|
-
points.push(endPoint);
|
|
185
|
-
var path = this.getPath(points, cfg);
|
|
186
|
-
var statusColor = findByValue(statusList, status).color;
|
|
187
|
-
var style = _objectSpread(_objectSpread({}, G6.Global.defaultEdge.style), {}, {
|
|
188
|
-
path: path,
|
|
189
|
-
// 自定义结束箭头,箭头的边长为 10,夹角为 60 度
|
|
190
|
-
endArrow: {
|
|
191
|
-
path: "M".concat(10 * Math.cos(Math.PI / 6), ",").concat(10 * Math.sin(Math.PI / 6), " L0,0 L").concat(10 * Math.cos(Math.PI / 6), ",-").concat(10 * Math.sin(Math.PI / 6)),
|
|
192
|
-
fill: statusColor
|
|
193
|
-
},
|
|
194
|
-
lineWidth: 2,
|
|
195
|
-
stroke: statusColor
|
|
196
|
-
}, cfg.style);
|
|
197
|
-
return style;
|
|
198
|
-
}
|
|
199
|
-
}, 'cubic-vertical');
|
|
200
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { GenerateStyle } from '@oceanbase/design/es/theme';
|
|
3
|
-
import type { OBToken } from '../../_util/genComponentStyleHook';
|
|
4
|
-
export type TaskGraphToken = OBToken;
|
|
5
|
-
export declare const genTaskGraphStyle: GenerateStyle<TaskGraphToken>;
|
|
6
|
-
declare const _default: (prefixCls: string) => {
|
|
7
|
-
wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
|
|
8
|
-
hashId: string;
|
|
9
|
-
};
|
|
10
|
-
export default _default;
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
3
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
4
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
5
|
-
import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
|
|
6
|
-
export var genTaskGraphStyle = function genTaskGraphStyle(token) {
|
|
7
|
-
var componentCls = token.componentCls,
|
|
8
|
-
proComponentsCls = token.proComponentsCls,
|
|
9
|
-
antCls = token.antCls,
|
|
10
|
-
colorText = token.colorText,
|
|
11
|
-
colorTextSecondary = token.colorTextSecondary,
|
|
12
|
-
fontWeightStrong = token.fontWeightStrong;
|
|
13
|
-
return {
|
|
14
|
-
'#container': _defineProperty(_defineProperty(_defineProperty({
|
|
15
|
-
position: 'relative',
|
|
16
|
-
paddingBottom: '0 !important'
|
|
17
|
-
}, "".concat(antCls, "-page-header"), {
|
|
18
|
-
paddingTop: 12,
|
|
19
|
-
paddingBottom: 12
|
|
20
|
-
}), "".concat(proComponentsCls, "-page-container-header-inner"), _defineProperty({
|
|
21
|
-
backgroundColor: '#fafbff'
|
|
22
|
-
}, "".concat(antCls, "-page-header-heading ").concat(antCls, "-page-header-heading-title"), {
|
|
23
|
-
fontSize: 16
|
|
24
|
-
})), "".concat(componentCls, "-split-pane"), _defineProperty(_defineProperty({
|
|
25
|
-
top: 'auto !important',
|
|
26
|
-
height: 'calc(100% - 36px) !important',
|
|
27
|
-
minHeight: 'calc(100% - 36px) !important',
|
|
28
|
-
margin: -24
|
|
29
|
-
}, "".concat(componentCls, "-tabs-wrapper"), {
|
|
30
|
-
width: '100%'
|
|
31
|
-
}), "".concat(antCls, "-tabs"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
32
|
-
height: '100%'
|
|
33
|
-
}, "".concat(antCls, "-tabs-nav-container"), {
|
|
34
|
-
height: 32,
|
|
35
|
-
paddingTop: 4
|
|
36
|
-
}), "".concat(antCls, "-tabs-bar"), {
|
|
37
|
-
marginBottom: 0,
|
|
38
|
-
backgroundColor: '#fff',
|
|
39
|
-
borderBottom: 'none'
|
|
40
|
-
}), "".concat(antCls, "-tabs-tab"), {
|
|
41
|
-
minWidth: 120,
|
|
42
|
-
height: 28,
|
|
43
|
-
margin: 0,
|
|
44
|
-
padding: 0,
|
|
45
|
-
fontSize: 12,
|
|
46
|
-
lineHeight: 28,
|
|
47
|
-
backgroundColor: '#fff',
|
|
48
|
-
border: 'none',
|
|
49
|
-
borderBottom: '1px solid #e8e8e8',
|
|
50
|
-
borderRadius: 0,
|
|
51
|
-
transition: 'none',
|
|
52
|
-
'&:hover': {
|
|
53
|
-
color: colorTextSecondary
|
|
54
|
-
},
|
|
55
|
-
div: {
|
|
56
|
-
display: 'flex',
|
|
57
|
-
alignItems: 'center',
|
|
58
|
-
justifyContent: 'space-between',
|
|
59
|
-
height: 20,
|
|
60
|
-
marginTop: 4,
|
|
61
|
-
padding: '0 8px',
|
|
62
|
-
borderLeft: '1px solid #e8e8e8'
|
|
63
|
-
}
|
|
64
|
-
}), "".concat(antCls, "-tabs-tab:last-child"), {
|
|
65
|
-
div: {
|
|
66
|
-
borderLeft: 'none'
|
|
67
|
-
}
|
|
68
|
-
}), "".concat(antCls, "-tabs-tab-active"), _defineProperty({
|
|
69
|
-
color: colorText,
|
|
70
|
-
fontWeight: fontWeightStrong,
|
|
71
|
-
backgroundColor: '#f7f8fc',
|
|
72
|
-
borderBottom: 'none',
|
|
73
|
-
borderLeft: 'none',
|
|
74
|
-
borderRadius: 2,
|
|
75
|
-
div: {
|
|
76
|
-
borderLeft: 'none'
|
|
77
|
-
}
|
|
78
|
-
}, "& + ".concat(antCls, "-tabs-tab"), {
|
|
79
|
-
div: {
|
|
80
|
-
borderLeft: 'none'
|
|
81
|
-
}
|
|
82
|
-
})), "".concat(antCls, "-tabs-extra-content"), {
|
|
83
|
-
marginRight: 16,
|
|
84
|
-
lineHeight: 32
|
|
85
|
-
}), "".concat(antCls, "-tabs-content"), {
|
|
86
|
-
height: 'calc(100% - 64px)',
|
|
87
|
-
padding: 16,
|
|
88
|
-
overflow: 'scroll',
|
|
89
|
-
color: colorTextSecondary,
|
|
90
|
-
lineHeight: 22,
|
|
91
|
-
whiteSpace: 'pre-wrap',
|
|
92
|
-
wordBreak: 'break-all',
|
|
93
|
-
backgroundColor: '#f7f8fc'
|
|
94
|
-
})))
|
|
95
|
-
};
|
|
96
|
-
};
|
|
97
|
-
export default (function (prefixCls) {
|
|
98
|
-
var useStyle = genComponentStyleHook('TaskGraph', function (token) {
|
|
99
|
-
return [genTaskGraphStyle(token)];
|
|
100
|
-
});
|
|
101
|
-
return useStyle(prefixCls);
|
|
102
|
-
});
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { Graph } from '@antv/g6';
|
|
2
|
-
import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
|
|
3
|
-
export declare function getCenterPointByGraph(graph: any): {
|
|
4
|
-
x: number;
|
|
5
|
-
y: number;
|
|
6
|
-
};
|
|
7
|
-
export interface GraphToolbarLocale {
|
|
8
|
-
fullscreen: string;
|
|
9
|
-
shrink: string;
|
|
10
|
-
enlarge: string;
|
|
11
|
-
reset: string;
|
|
12
|
-
fitView: string;
|
|
13
|
-
refresh: string;
|
|
14
|
-
}
|
|
15
|
-
export interface GraphToolbarProps extends LocaleWrapperProps {
|
|
16
|
-
mode?: 'fixed' | 'embed';
|
|
17
|
-
graph?: Graph;
|
|
18
|
-
showFullscreen?: boolean;
|
|
19
|
-
onFullscreen?: () => void;
|
|
20
|
-
onReload?: () => void;
|
|
21
|
-
locale?: GraphToolbarLocale;
|
|
22
|
-
className?: string;
|
|
23
|
-
}
|
|
24
|
-
declare const _default: any;
|
|
25
|
-
export default _default;
|
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __export = (target, all) => {
|
|
8
|
-
for (var name in all)
|
|
9
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
-
};
|
|
11
|
-
var __copyProps = (to, from, except, desc) => {
|
|
12
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
-
for (let key of __getOwnPropNames(from))
|
|
14
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
-
}
|
|
17
|
-
return to;
|
|
18
|
-
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
-
|
|
29
|
-
// src/GraphToolbar/index.tsx
|
|
30
|
-
var GraphToolbar_exports = {};
|
|
31
|
-
__export(GraphToolbar_exports, {
|
|
32
|
-
default: () => GraphToolbar_default,
|
|
33
|
-
getCenterPointByGraph: () => getCenterPointByGraph
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(GraphToolbar_exports);
|
|
36
|
-
var import_icons = require("@oceanbase/icons");
|
|
37
|
-
var import_util = require("@oceanbase/util");
|
|
38
|
-
var import_design = require("@oceanbase/design");
|
|
39
|
-
var import_lodash = require("lodash");
|
|
40
|
-
var import_react = require("react");
|
|
41
|
-
var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
|
|
42
|
-
var import_style = __toESM(require("./style"));
|
|
43
|
-
var import_zh_CN = __toESM(require("./locale/zh-CN"));
|
|
44
|
-
var import_graph_fit_view_icon = __toESM(require("../assets/graph_fit_view_icon.svg"));
|
|
45
|
-
var import_graph_reset_icon = __toESM(require("../assets/graph_reset_icon.svg"));
|
|
46
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
47
|
-
function getCenterPointByGraph(graph) {
|
|
48
|
-
const group = graph == null ? void 0 : graph.get("group");
|
|
49
|
-
if (group) {
|
|
50
|
-
const { minX, minY, maxX, maxY } = group.getCanvasBBox();
|
|
51
|
-
return {
|
|
52
|
-
x: (minX + maxX) / 2,
|
|
53
|
-
y: (minY + maxY) / 2
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
return void 0;
|
|
57
|
-
}
|
|
58
|
-
var GraphToolbar = ({
|
|
59
|
-
mode = "fixed",
|
|
60
|
-
graph,
|
|
61
|
-
showFullscreen,
|
|
62
|
-
onFullscreen,
|
|
63
|
-
onReload,
|
|
64
|
-
locale,
|
|
65
|
-
className
|
|
66
|
-
}) => {
|
|
67
|
-
const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
|
|
68
|
-
const prefixCls = getPrefixCls("graph-toolbar");
|
|
69
|
-
const { wrapSSR } = (0, import_style.default)(prefixCls);
|
|
70
|
-
const [zoom, setZoom] = (0, import_react.useState)(0);
|
|
71
|
-
(0, import_react.useEffect)(() => {
|
|
72
|
-
const initialZoom = (graph == null ? void 0 : graph.getZoom()) > 2 ? 2 : graph == null ? void 0 : graph.getZoom();
|
|
73
|
-
graph == null ? void 0 : graph.zoomTo(initialZoom, getCenterPointByGraph(graph));
|
|
74
|
-
setZoom(initialZoom);
|
|
75
|
-
graph == null ? void 0 : graph.on(
|
|
76
|
-
"wheelzoom",
|
|
77
|
-
// 使用防抖函数,避免状态改变过于频繁,影响页面交互流畅
|
|
78
|
-
// 设置延迟时间为 16ms,为渲染一帧所需时间
|
|
79
|
-
(0, import_lodash.debounce)(() => {
|
|
80
|
-
setZoom(graph == null ? void 0 : graph.getZoom());
|
|
81
|
-
}, 16)
|
|
82
|
-
);
|
|
83
|
-
}, [graph]);
|
|
84
|
-
return wrapSSR(
|
|
85
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_design.Space, { size: 16, className: `${prefixCls} ${`${prefixCls}-${mode}`} ${className || ""}`, children: [
|
|
86
|
-
showFullscreen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.fullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
87
|
-
import_icons.FullscreenOutlined,
|
|
88
|
-
{
|
|
89
|
-
className: `${prefixCls}-pointable`,
|
|
90
|
-
onClick: () => {
|
|
91
|
-
if (onFullscreen) {
|
|
92
|
-
onFullscreen();
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
) }),
|
|
97
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `${prefixCls}-zoom-wrapper`, children: [
|
|
98
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.shrink, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
-
import_icons.MinusOutlined,
|
|
100
|
-
{
|
|
101
|
-
className: zoom >= 0.3 ? `${prefixCls}-pointable` : `${prefixCls}-disabled`,
|
|
102
|
-
onClick: () => {
|
|
103
|
-
if (zoom >= 0.3) {
|
|
104
|
-
const newZoom = zoom - 0.1;
|
|
105
|
-
setZoom(newZoom);
|
|
106
|
-
graph == null ? void 0 : graph.zoomTo(newZoom, getCenterPointByGraph(graph));
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
) }),
|
|
111
|
-
(0, import_util.toPercent)(zoom),
|
|
112
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.enlarge, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
-
import_icons.PlusOutlined,
|
|
114
|
-
{
|
|
115
|
-
className: zoom <= 0.9 ? `${prefixCls}-pointable` : `${prefixCls}-disabled`,
|
|
116
|
-
onClick: () => {
|
|
117
|
-
if (zoom <= 0.9) {
|
|
118
|
-
const newZoom = zoom + 0.1;
|
|
119
|
-
setZoom(newZoom);
|
|
120
|
-
graph == null ? void 0 : graph.zoomTo(newZoom, getCenterPointByGraph(graph));
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
) })
|
|
125
|
-
] }),
|
|
126
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.reset, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
127
|
-
"img",
|
|
128
|
-
{
|
|
129
|
-
src: import_graph_reset_icon.default,
|
|
130
|
-
alt: "",
|
|
131
|
-
className: `${prefixCls}-pointable`,
|
|
132
|
-
onClick: () => {
|
|
133
|
-
setZoom(1);
|
|
134
|
-
graph == null ? void 0 : graph.zoomTo(1, getCenterPointByGraph(graph));
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
) }),
|
|
138
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.fitView, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
139
|
-
"img",
|
|
140
|
-
{
|
|
141
|
-
src: import_graph_fit_view_icon.default,
|
|
142
|
-
alt: "",
|
|
143
|
-
className: `${prefixCls}-pointable`,
|
|
144
|
-
onClick: () => {
|
|
145
|
-
graph == null ? void 0 : graph.fitView();
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
) }),
|
|
149
|
-
onReload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Divider, { type: "vertical", className: `${prefixCls}-divider` }) }),
|
|
150
|
-
onReload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Tooltip, { title: locale.refresh, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
151
|
-
import_icons.SyncOutlined,
|
|
152
|
-
{
|
|
153
|
-
className: `${prefixCls}-pointable`,
|
|
154
|
-
onClick: () => {
|
|
155
|
-
onReload();
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
) }) })
|
|
159
|
-
] })
|
|
160
|
-
);
|
|
161
|
-
};
|
|
162
|
-
var GraphToolbar_default = (0, import_LocaleWrapper.default)({
|
|
163
|
-
componentName: "GraphToolbar",
|
|
164
|
-
defaultLocale: import_zh_CN.default
|
|
165
|
-
})(GraphToolbar);
|
|
166
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
167
|
-
0 && (module.exports = {
|
|
168
|
-
getCenterPointByGraph
|
|
169
|
-
});
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
-
};
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
-
|
|
19
|
-
// src/GraphToolbar/locale/en-US.ts
|
|
20
|
-
var en_US_exports = {};
|
|
21
|
-
__export(en_US_exports, {
|
|
22
|
-
default: () => en_US_default
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(en_US_exports);
|
|
25
|
-
var en_US_default = {
|
|
26
|
-
fullscreen: "Fullscreen",
|
|
27
|
-
shrink: "Shrink",
|
|
28
|
-
enlarge: "Enlarge",
|
|
29
|
-
reset: "Reset",
|
|
30
|
-
fitView: "Fit view",
|
|
31
|
-
refresh: "Refresh"
|
|
32
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
-
};
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
-
|
|
19
|
-
// src/GraphToolbar/locale/ja-JP.ts
|
|
20
|
-
var ja_JP_exports = {};
|
|
21
|
-
__export(ja_JP_exports, {
|
|
22
|
-
default: () => ja_JP_default
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(ja_JP_exports);
|
|
25
|
-
var ja_JP_default = {
|
|
26
|
-
fullscreen: "フルスクリーン",
|
|
27
|
-
shrink: "縮小",
|
|
28
|
-
enlarge: "拡大",
|
|
29
|
-
reset: "元の比率を表示",
|
|
30
|
-
fitView: "キャンバスに合わせる",
|
|
31
|
-
refresh: "更新"
|
|
32
|
-
};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
-
};
|
|
9
|
-
var __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
-
|
|
19
|
-
// src/GraphToolbar/locale/zh-CN.ts
|
|
20
|
-
var zh_CN_exports = {};
|
|
21
|
-
__export(zh_CN_exports, {
|
|
22
|
-
default: () => zh_CN_default
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(zh_CN_exports);
|
|
25
|
-
var zh_CN_default = {
|
|
26
|
-
fullscreen: "进入全屏",
|
|
27
|
-
shrink: "缩小",
|
|
28
|
-
enlarge: "放大",
|
|
29
|
-
reset: "显示原始比例",
|
|
30
|
-
fitView: "自适应画布",
|
|
31
|
-
refresh: "刷新"
|
|
32
|
-
};
|