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

Commit

Permalink
Merge 7521bd1 into 3479f5e
Browse files Browse the repository at this point in the history
  • Loading branch information
@visiky
visiky committed Jul 11, 2021
2 parents 3479f5e + 7521bd1 commit 0b34c8c
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 80 deletions.
27 changes: 15 additions & 12 deletions __tests__/unit/ui/scrollbar/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,45 +46,46 @@ describe('scrollbar', () => {
expect(scrollbar.getValue()).toBe(0.5);

const { padding } = scrollbar.attributes;
const verticalPadding = padding.top + padding.bottom;
const [top, , bottom] = padding;
const verticalPadding = top + bottom;

let value = 0.2;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
padding.top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = 0.1;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
padding.top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = 0.9;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
padding.top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = 10;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
padding.top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = -10086;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
padding.top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
1
);

Expand Down Expand Up @@ -123,45 +124,47 @@ describe('scrollbar', () => {
expect(scrollbar.getValue()).toBe(0.5);

const { padding } = scrollbar.attributes;
const horizonPadding = padding.left + padding.right;
const [, right, , left] = padding;

const horizonPadding = left + right;

let value = 0.2;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
padding.left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = 0.1;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
padding.left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = 0.9;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
padding.left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = 10;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
padding.left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
1
);

value = -10086;
scrollbar.setValue(value);
expect(scrollbar.getValue()).toBe(value);
expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
padding.left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
1
);

Expand Down
3 changes: 2 additions & 1 deletion src/ui/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ export { Arrow, ArrowOptions } from './arrow';
export { Axis, AxisOptions } from './axis';
export { Button, ButtonOptions } from './button';
export { Legend, LegendOptions } from './legend';
export { Scrollbar, ScrollbarOptions } from './scrollbar';
export { Scrollbar } from './scrollbar';
export type { ScrollbarOptions, ScrollbarAttrs } from './scrollbar';
export { Sheet, SheetOptions } from './sheet';
export { Slider, SliderOptions } from './slider';
export { Sparkline, SparklineOptions } from './sparkline';
Expand Down
29 changes: 14 additions & 15 deletions src/ui/scrollbar/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Rect } from '@antv/g';
import { clamp, deepMix } from '@antv/util';
import { ScrollbarOptions } from './types';
import type { ScrollbarOptions, ScrollbarAttrs } from './types';
import { applyAttrs, isPC } from '../../util';
import { CustomElement, DisplayObject } from '../../types';

export { ScrollbarOptions };
export type { ScrollbarOptions, ScrollbarAttrs };

export class Scrollbar extends CustomElement {
/**
Expand Down Expand Up @@ -47,13 +47,8 @@ export class Scrollbar extends CustomElement {
// 滑块长度
thumbLen: 20,

// 滑块内边距
padding: {
top: 2,
right: 2,
bottom: 2,
left: 2,
},
// 滚动条内边距，影响滑轨的实际可用空间
padding: [2, 2, 2, 2],

trackStyle: {
default: {
Expand Down Expand Up @@ -85,7 +80,8 @@ export class Scrollbar extends CustomElement {
if (name === 'value') {
const { padding } = this.attributes;
const thumbOffset = this.valueOffset(value);
this.setThumbOffset(thumbOffset + this.getOrientVal([padding.left, padding.top]));
const [top, , , left] = padding;
this.setThumbOffset(thumbOffset + this.getOrientVal([left, top]));
}
}

Expand Down Expand Up @@ -161,11 +157,13 @@ export class Scrollbar extends CustomElement {
*/
private getAvailableSpace() {
const { width, height, padding } = this.attributes;
const [top, right, bottom, left] = padding;

return {
x: padding.left,
y: padding.top,
width: width - (padding.left + padding.right),
height: height - (padding.top + padding.bottom),
x: left,
y: top,
width: width - (left + right),
height: height - (top + bottom),
};
}

Expand Down Expand Up @@ -258,7 +256,8 @@ export class Scrollbar extends CustomElement {
*/
private onTrackClick = (e) => {
const { x, y, padding, thumbLen } = this.attributes;
const basePos = this.getOrientVal([x + padding.left, y + padding.top]);
const [top, , , left] = padding;
const basePos = this.getOrientVal([x + left, y + top]);
const clickPos = this.getOrientVal([e.x, e.y]) - thumbLen / 2;
const value = this.valueOffset(clickPos - basePos, true);
this.setValue(value);
Expand Down
115 changes: 63 additions & 52 deletions src/ui/scrollbar/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,56 +7,67 @@ export interface ScrollStyle {

export type Orient = 'horizontal' | 'vertical';

export type ScrollbarOptions = ShapeCfg & {
attrs: {
/**
* 滑条朝向
*/
orient?: Orient;

/**
* 轨道宽度
*/
width?: number;

/**
* 轨道高度
*/
height?: number;

/**
* 滚动条的值
*/
value?: number;

/**
* 可滚动范围的值的上限
*/
min?: number;

/**
* 可滚动范围的值的下限
*/
max?: number;

/**
* 滑块是否圆角
*/
isRound?: boolean;

/**
* 滑块长度
*/
thumbLen?: number;

/**
* 滑轨样式
*/
trackStyle?: ScrollStyle;

/**
* 滑块样式
*/
thumbStyle?: ScrollStyle;
};
/**
* 滚动条组件的属性配置
*/
export type ScrollbarAttrs = {
/**
* 滑条朝向
*/
orient?: Orient;

/**
* 轨道宽度
*/
width?: number;

/**
* 轨道高度
*/
height?: number;

/**
* 滚动条的值
*/
value?: number;

/**
* 可滚动范围的值的上限
*/
min?: number;

/**
* 可滚动范围的值的下限
*/
max?: number;

/**
* 滑块是否圆角
*/
isRound?: boolean;

/**
* 滑块长度
*/
thumbLen?: number;

/**
* 滚动条内边距，影响滑轨的实际可用空间 [top, right, bottom, left]
*/
padding?: [number, number, number, number];

/**
* 滑轨样式
*/
trackStyle?: ScrollStyle;

/**
* 滑块样式
*/
thumbStyle?: ScrollStyle;
};

/**
* 滚动条组件的配置项
*/
export type ScrollbarOptions = ShapeCfg & { attrs: ScrollbarAttrs };

0 comments on commit 0b34c8c

Please sign in to comment.