Skip to content

Commit 8b13376

Browse files
pepper-nicepepper-nice
authored
feat: 交换框选和拖动位置 (#295)
1 parent f7c8443 commit 8b13376

File tree

5 files changed

+72
-23
lines changed

5 files changed

+72
-23
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@antv/component",
3-
"version": "0.9.2",
3+
"version": "0.9.3",
44
"description": "The component module for antv",
55
"author": "https://github.com/orgs/antvis/people",
66
"license": "MIT",

‎src/slider/constant.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,17 @@ export const FOREGROUND_STYLE = {
4242
export const SLIDER_BAR_LINE_GAP = 4;
4343
export const SLIDER_BAR_HEIGHT = 6;
4444
export const BAR_STYLE = {
45-
fill: '#DEE6F2',
4645
height: SLIDER_BAR_HEIGHT,
46+
fill: '#DEE6F2',
4747
highLightFill: '#CBDEF8',
4848
stroke: '#FFF',
4949
lineWidth: 1.2,
5050
cursor: 'move',
51+
radius: [2, 2, 0, 0],
5152
};
5253

5354
export const DEFAULT_HANDLER_WIDTH = 6;
5455
export const DEFAULT_HANDLER_HEIGHT = 12;
55-
5656
export const HANDLER_STYLE = {
5757
width: DEFAULT_HANDLER_WIDTH,
5858
height: DEFAULT_HANDLER_HEIGHT,

‎src/slider/foreground.ts‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -39,37 +39,37 @@ export class Foreground extends GroupComponent<ForegroundCfg> {
3939
protected renderInner(group: IGroup) {
4040
const { x, height, width, foregroundStyle, barStyle } = this.cfg;
4141

42-
// 上方brush区域
42+
// 上方移动区域
4343
this.addShape(group, {
44-
id: this.getElementId('foreground-brush'),
45-
name: 'foreground-brush',
44+
id: this.getElementId('foreground-scroll'),
45+
name: 'foreground-scroll',
4646
type: 'rect',
4747
attrs: {
4848
x,
4949
y: 0,
5050
width,
51-
height: (height * 3) / 5,
52-
cursor: 'crosshair',
51+
height: (height * 2) / 5,
52+
cursor: 'move',
5353
...omit(foregroundStyle, ['stroke']),
5454
},
5555
});
5656

57-
// 下方移动区域
57+
// 下方brush区域
5858
this.addShape(group, {
59-
id: this.getElementId('foreground-scroll'),
60-
name: 'foreground-scroll',
59+
id: this.getElementId('foreground-brush'),
60+
name: 'foreground-brush',
6161
type: 'rect',
6262
attrs: {
6363
x,
64-
y: (height * 3) / 5,
64+
y: (height * 2) / 5,
6565
width,
66-
height: (height * 2) / 5,
67-
cursor: 'move',
66+
height: (height * 3) / 5,
67+
cursor: 'crosshair',
6868
...omit(foregroundStyle, ['stroke']),
6969
},
7070
});
7171

72-
// 下方Bar区域
72+
// 上方Bar区域
7373
const barGroup = this.addGroup(group, {
7474
id: this.getElementId('foreground-bar'),
7575
name: 'foreground-bar',
@@ -81,19 +81,19 @@ export class Foreground extends GroupComponent<ForegroundCfg> {
8181
type: 'rect',
8282
attrs: {
8383
x,
84-
y: height,
84+
y: -barStyle.height,
8585
width,
8686
height: barStyle.height,
8787
cursor: 'move',
88-
...barStyle,
88+
...omit(barStyle, ['stroke']),
8989
},
9090
});
9191
// 三条小竖线
9292
const centerX = width / 2 + x;
9393
const leftX = centerX - SLIDER_BAR_LINE_GAP;
9494
const rightX = centerX + SLIDER_BAR_LINE_GAP;
95-
const y1 = height + (1 / 4) * barStyle.height;
96-
const y2 = height + (3 / 4) * barStyle.height;
95+
const y1 = -(1 / 4) * barStyle.height;
96+
const y2 = -(3 / 4) * barStyle.height;
9797
const publicAttrs = {
9898
y1,
9999
y2,
@@ -103,6 +103,7 @@ export class Foreground extends GroupComponent<ForegroundCfg> {
103103
this.drawBarLine(group, x, publicAttrs);
104104
});
105105

106+
// 背景边框
106107
this.addShape(group, {
107108
id: this.getElementId('foreground-border'),
108109
name: 'foreground-border',
@@ -122,7 +123,7 @@ export class Foreground extends GroupComponent<ForegroundCfg> {
122123
private drawBarLine(group: IGroup, x: number, attrs: LooseObject) {
123124
this.addShape(group, {
124125
id: this.getElementId(`line-${x}`),
125-
name: `line-${x}`,
126+
name: `foreground-line`,
126127
type: 'line',
127128
attrs: {
128129
x1: x,
@@ -143,10 +144,18 @@ export class Foreground extends GroupComponent<ForegroundCfg> {
143144
barRectShape.attr('fill', highLightFill);
144145
this.draw();
145146
});
147+
this.get('group').on('foreground-scroll:mouseenter', () => {
148+
barRectShape.attr('fill', highLightFill);
149+
this.draw();
150+
});
146151
this.get('group').on('foreground-bar:mouseleave', () => {
147152
barRectShape.attr('fill', fill);
148153
this.draw();
149154
});
155+
this.get('group').on('foreground-scroll:mouseleave', () => {
156+
barRectShape.attr('fill', fill);
157+
this.draw();
158+
});
150159
}
151160

152161
private draw() {

‎src/slider/handler.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface IStyle {
1010
opacity?: number;
1111
cursor?: string;
1212
highLightFill?: string;
13+
highLightStroke?: string;
1314
}
1415

1516
export interface HandlerCfg extends GroupComponentCfg {
@@ -64,6 +65,7 @@ export class Handler extends GroupComponent<HandlerCfg> {
6465

6566
this.addShape(group, {
6667
id: this.getElementId('line-left'),
68+
name: 'handler-line',
6769
type: 'line',
6870
attrs: {
6971
x1,
@@ -77,6 +79,7 @@ export class Handler extends GroupComponent<HandlerCfg> {
7779

7880
this.addShape(group, {
7981
id: this.getElementId('line-right'),
82+
name: 'handler-line',
8083
type: 'line',
8184
attrs: {
8285
x1: x2,

‎src/slider/slider.ts‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
304304
}
305305

306306
private updateUI(minTextShape: IShape, maxTextShape: IShape) {
307-
const { start, end, width, minText, maxText, handlerStyle, height } = this.cfg as SliderCfg;
307+
const { start, end, width, minText, maxText, handlerStyle, height, barStyle } = this.cfg;
308308
const min = start * width;
309309
const max = end * width;
310310

@@ -319,27 +319,37 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
319319
}
320320

321321
if (this.foreground) {
322+
const newBarStyle = ['foreground-bar', 'foreground'].includes(this.currentTarget)
323+
? { ...barStyle, fill: barStyle.highLightFill }
324+
: barStyle;
322325
this.foreground.update({
323326
x: min,
324327
width: max - min,
328+
barStyle: newBarStyle,
325329
});
326330
if (!this.get('updateAutoRender')) {
327331
this.foreground.render();
328332
}
329333
}
330-
331334
// 滑块相关的大小信息
332335
const handlerWidth = get(handlerStyle, 'width', DEFAULT_HANDLER_WIDTH);
333336

334337
// 设置文本
335338
minTextShape.attr('text', minText);
336339
maxTextShape.attr('text', maxText);
337-
338340
const [minAttrs, maxAttrs] = this._dodgeText([min, max], minTextShape, maxTextShape);
339341
// 2. 左侧滑块和文字位置
340342
if (this.minHandler) {
343+
const newStyle =
344+
this.currentTarget === 'minHandler'
345+
? {
346+
...handlerStyle,
347+
stroke: handlerStyle.highLightStroke,
348+
}
349+
: handlerStyle;
341350
this.minHandler.update({
342351
x: min - handlerWidth / 2,
352+
style: newStyle,
343353
});
344354
if (!this.get('updateAutoRender')) {
345355
this.minHandler.render();
@@ -349,8 +359,16 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
349359

350360
// 3. 右侧滑块和文字位置
351361
if (this.maxHandler) {
362+
const newStyle =
363+
this.currentTarget === 'maxHandler'
364+
? {
365+
...handlerStyle,
366+
stroke: handlerStyle.highLightStroke,
367+
}
368+
: handlerStyle;
352369
this.maxHandler.update({
353370
x: max - handlerWidth / 2,
371+
style: newStyle,
354372
});
355373
if (!this.get('updateAutoRender')) {
356374
this.maxHandler.render();
@@ -459,6 +477,25 @@ export class Slider extends GroupComponent<SliderCfg> implements ISlider {
459477
this.currentTarget = undefined;
460478
}
461479

480+
// 清空handler的高亮状态
481+
const { handlerStyle } = this.cfg;
482+
if (this.minHandler && this.minHandler.cfg.style.stroke === handlerStyle.highLightStroke) {
483+
this.minHandler.update({
484+
style: handlerStyle,
485+
});
486+
if (!this.get('updateAutoRender')) {
487+
this.minHandler.render();
488+
}
489+
}
490+
if (this.maxHandler && this.maxHandler.cfg.style.stroke === handlerStyle.highLightStroke) {
491+
this.maxHandler.update({
492+
style: handlerStyle,
493+
});
494+
if (!this.get('updateAutoRender')) {
495+
this.maxHandler.render();
496+
}
497+
}
498+
462499
const containerDOM = this.getContainerDOM();
463500
if (containerDOM) {
464501
containerDOM.removeEventListener('mousemove', this.onMouseMove);

0 commit comments

Comments
 (0)