Skip to content
This repository was archived by the owner on Oct 7, 2023. It is now read-only.

Commit e309f6b

Browse files
Aarebeccayangtao.yangtao
Aarebecca
and
yangtao.yangtao
authored
抽象了Component基类 (#34)
* chore: changed ./github/build.yml runs on macos * chore: 修复了scripts build * feat(slider): 创建了没有minimap的slider * test(text): 设置了合适的精度 * feat(slider): 创建了基本slider * test(slider): slider的基本单测 * chore: 设置编译目标为ES2019以支持可选链 * fix(sparkline): 修正了sparkline的baseline计算方法，修正了sparkline的定位 * feat(slider): 加入了sparkline * refactor(slider): 暂存 * docs(slider): 添加了slider的example * docs(slider): 添加了slider的文档 * refactor(slider): slider 支持缩略图 * refactor(slider): 更新了参数类型 * test(slider): 添加了slider 单测 * fix(sparkline): 修正了sparkline data参数为空时不显示 * refactor(util): 抽取了取得数字精度的方法 * refactor(slider): 手柄尺寸自适应 * docs(slider): 修改了案例 * fix(slider): 修复了纵向布局下的slider 手柄尺寸 * Update index.ts refactor(slider): rename type Image to image * refactor: 移除了applyAttrs * refactor(sparkline): 调整了类型定义 * refactor(sparkline): sparkline添加了update方法 * refactor: 重构了slider 和 sparkline代码，具有update功能 * refactor(sparkline): 调整了代码结构 * refactor(slider): 使用了padding[]代替{} * refactor: 从index导出component * refactor(component): 添加了getStyle方法 * refactor(scrollbar): 改写了scrollbar * refactor(marker): 改写了marker * refactor(icon): 改写了icon * test(sparkline): 更新了单测 * refactor(icon): 更新了访问权限 * refactor(sparkline): 修正了lines * test(sparkline): 更新了path单测 * refactor(slider): 更新了slider types * refactor(soparkline): 更新了sparkline types * refactor: 修改了type * refactor: 更新了update方法 * refactor: 更新了访问权限及types * refactor(slider): 更新了slider handle * test: 更新了单测 * refactor(sparkline): 更新了sparkline的update方法 * test(sparkline): 更新了sparkline单测 * refactor(slider): 更新了slider的update方法参数 * refactor: 更新了types attrs * test: 移除了调试输出 * refactor: 移除了attributeChangedCallback中无用代码 Co-authored-by: yangtao.yangtao <yangtao.yangtao@alibaba-inc.com>
1 parent 00e09a2 commit e309f6b

File tree

29 files changed

+1181
-1384
lines changed

29 files changed

+1181
-1384
lines changed

‎__tests__/unit/ui/icon/index.spec.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,15 @@ describe('icon', () => {
3434
});
3535

3636
canvas.appendChild(icon);
37+
38+
icon.update({
39+
size: 16,
40+
spacing: 10,
41+
symbol:
42+
'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
43+
});
44+
45+
icon.destroy();
46+
canvas.destroy();
3747
});
3848
});

‎__tests__/unit/ui/marker/index.spec.ts‎

Lines changed: 29 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,28 @@ const renderer = new CanvasRenderer({
99
enableDirtyRectangleRendering: true,
1010
});
1111

12-
describe('marker', () => {
13-
test('basic', async () => {
14-
const div = createDiv();
15-
16-
// @ts-ignore
17-
const canvas = new Canvas({
18-
container: div,
19-
width: 300,
20-
height: 300,
21-
renderer,
22-
});
23-
24-
const marker = new Marker({
25-
attrs: {
26-
symbol: 'triangle-down',
27-
x: 50,
28-
y: 50,
29-
r: 16,
30-
fill: 'green',
31-
},
32-
});
33-
34-
canvas.appendChild(marker);
12+
const div = createDiv();
13+
14+
// @ts-ignore
15+
const canvas = new Canvas({
16+
container: div,
17+
width: 300,
18+
height: 300,
19+
renderer,
20+
});
3521

36-
expect(marker.getPathShape().getBounds().center[0]).toBe(100);
37-
expect(marker.getPathShape().getBounds().center[1]).toBe(100);
38-
});
22+
const marker = new Marker({
23+
attrs: {
24+
symbol: 'triangle-down',
25+
x: 50,
26+
y: 50,
27+
size: 16,
28+
fill: 'green',
29+
},
30+
});
31+
canvas.appendChild(marker);
3932

33+
describe('marker', () => {
4034
test('customize marker', async () => {
4135
Marker.registerSymbol(
4236
'star',
@@ -45,26 +39,15 @@ describe('marker', () => {
4539
)
4640
);
4741

48-
const div = createDiv();
49-
50-
// @ts-ignore
51-
const canvas = new Canvas({
52-
container: div,
53-
width: 300,
54-
height: 300,
55-
renderer,
42+
marker.update({
43+
symbol: 'star',
44+
x: 50,
45+
y: 50,
46+
size: 16,
47+
stroke: 'red',
5648
});
57-
58-
const marker = new Marker({
59-
attrs: {
60-
symbol: 'star',
61-
x: 50,
62-
y: 50,
63-
r: 16,
64-
stroke: 'red',
65-
},
66-
});
67-
68-
canvas.appendChild(marker);
6949
});
7050
});
51+
52+
marker.destroy();
53+
canvas.destroy();

‎__tests__/unit/ui/scrollbar/index.spec.ts‎

Lines changed: 48 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -19,30 +19,33 @@ const renderer = new CanvasRenderer({
1919
enableDirtyRectangleRendering: true,
2020
});
2121

22+
const div = createDiv();
23+
24+
// @ts-ignore
25+
const canvas = new Canvas({
26+
container: div,
27+
width: 300,
28+
height: 300,
29+
renderer,
30+
});
31+
32+
const height = 100;
33+
const thumbLen = 30;
34+
const scrollbar = new Scrollbar({
35+
attrs: {
36+
height,
37+
thumbLen,
38+
x: 100,
39+
y: 5,
40+
value: 0.5,
41+
width: 20,
42+
},
43+
});
44+
45+
canvas.appendChild(scrollbar);
46+
2247
describe('scrollbar', () => {
2348
test('basic', async () => {
24-
const div = createDiv();
25-
26-
// @ts-ignore
27-
const canvas = new Canvas({
28-
container: div,
29-
width: 300,
30-
height: 300,
31-
renderer,
32-
});
33-
34-
const height = 100;
35-
const thumbLen = 30;
36-
const scrollbar = new Scrollbar({
37-
attrs: {
38-
height,
39-
thumbLen,
40-
x: 100,
41-
y: 5,
42-
value: 0.5,
43-
width: 20,
44-
},
45-
});
4649
expect(scrollbar.getValue()).toBe(0.5);
4750

4851
const { padding } = scrollbar.attributes;
@@ -52,128 +55,111 @@ describe('scrollbar', () => {
5255
let value = 0.2;
5356
scrollbar.setValue(value);
5457
expect(scrollbar.getValue()).toBe(value);
55-
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
58+
59+
expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
5660
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
5761
1
5862
);
5963

6064
value = 0.1;
6165
scrollbar.setValue(value);
6266
expect(scrollbar.getValue()).toBe(value);
63-
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
67+
expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
6468
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
6569
1
6670
);
6771

6872
value = 0.9;
6973
scrollbar.setValue(value);
7074
expect(scrollbar.getValue()).toBe(value);
71-
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
75+
expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
7276
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
7377
1
7478
);
7579

7680
value = 10;
7781
scrollbar.setValue(value);
7882
expect(scrollbar.getValue()).toBe(value);
79-
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
83+
expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
8084
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
8185
1
8286
);
8387

8488
value = -10086;
8589
scrollbar.setValue(value);
8690
expect(scrollbar.getValue()).toBe(value);
87-
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
91+
expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
8892
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
8993
1
9094
);
91-
92-
canvas.appendChild(scrollbar);
93-
94-
// scrollbar.destroy();
95-
// canvas.destroy();
9695
});
9796

9897
test('horizontal', async () => {
99-
const div = createDiv();
100-
101-
// @ts-ignore
102-
const canvas = new Canvas({
103-
container: div,
104-
width: 300,
105-
height: 300,
106-
renderer,
107-
});
108-
10998
const width = 100;
11099
const thumbLen = 30;
111-
112-
const scrollbar = new Scrollbar({
113-
attrs: {
114-
width,
115-
thumbLen,
116-
x: 10,
117-
y: 50,
118-
orient: 'horizontal',
119-
height: 20,
120-
value: 0.5,
121-
},
100+
scrollbar.update({
101+
width,
102+
thumbLen,
103+
x: 10,
104+
y: 50,
105+
orient: 'horizontal',
106+
height: 20,
107+
value: 0.5,
122108
});
123109

124110
expect(scrollbar.getValue()).toBe(0.5);
125111

126112
const { padding } = scrollbar.attributes;
127113
const [, right, , left] = padding;
128-
129114
const horizonPadding = left + right;
130115

131116
let value = 0.2;
132117
scrollbar.setValue(value);
133118
expect(scrollbar.getValue()).toBe(value);
134-
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
119+
expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
135120
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
136121
1
137122
);
138123

139124
value = 0.1;
140125
scrollbar.setValue(value);
141126
expect(scrollbar.getValue()).toBe(value);
142-
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
127+
expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
143128
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
144129
1
145130
);
146131

147132
value = 0.9;
148133
scrollbar.setValue(value);
149134
expect(scrollbar.getValue()).toBe(value);
150-
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
135+
expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
151136
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
152137
1
153138
);
154139

155140
value = 10;
156141
scrollbar.setValue(value);
157142
expect(scrollbar.getValue()).toBe(value);
158-
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
143+
expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
159144
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
160145
1
161146
);
162147

163148
value = -10086;
164149
scrollbar.setValue(value);
165150
expect(scrollbar.getValue()).toBe(value);
166-
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
151+
expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
167152
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
168153
1
169154
);
170155

171156
scrollbar.addEventListener('valuechange', (e) => {
172-
console.log('scroll: ', e);
157+
e;
173158
});
174159

175160
canvas.appendChild(scrollbar);
176-
// scrollbar.destroy();
177-
// canvas.destroy();
178161
});
179162
});
163+
164+
// scrollbar.destroy();
165+
// canvas.destroy();

0 commit comments

Comments
 (0)