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

Commit

Permalink
feat(handle): rotate label for vertical (#294)
Browse files Browse the repository at this point in the history
pearmini authored Jul 4, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 2c83915 commit da94ef9
Showing 4 changed files with 18 additions and 5 deletions.
Binary file modified __tests__/integration/snapshots/Slider2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __tests__/integration/snapshots/Slider7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/ui/slider/handle.ts
Original file line number Diff line number Diff line change
@@ -79,15 +79,17 @@ export class Handle extends GUI<HandleStyleProps> {

private renderLabel(container: Group) {
const { showLabel } = this.attributes;
const style = subStyleProps(this.attributes, 'label');
const { transform, ...style } = subStyleProps(this.attributes, 'label');
const [labelStyle, groupStyle] = splitStyle(style, []);

const labelGroup = select(container).maybeAppendByClassName(CLASS_NAMES.labelGroup, 'g').styles(groupStyle);

// @ts-ignore
const { text, ...rest } = { ...HANDLE_LABEL_DEFAULT_CFG, ...labelStyle };
ifShow(!!showLabel, labelGroup, (group) => {
this.label = group.maybeAppendByClassName(CLASS_NAMES.label, 'text').styles({
...rest,
transform,
text: `${text}`,
});

19 changes: 15 additions & 4 deletions src/ui/slider/index.ts
Original file line number Diff line number Diff line change
@@ -296,6 +296,14 @@ export class Slider extends GUI<SliderStyleProps> {
};
}

private inferTextStyle(handleType: HandleType): Record<string, any> {
const { orientation } = this.attributes;
if (orientation === 'horizontal') return {};
if (handleType === 'start') return { transform: 'rotate(90)', textAlign: 'start' };
if (handleType === 'end') return { transform: 'rotate(90)', textAlign: 'end' };
return {};
}

/**
* 计算手柄应当处于的位置
* @param handleType start手柄还是end手柄
@@ -315,6 +323,7 @@ export class Slider extends GUI<SliderStyleProps> {
const temp = new Text({
style: {
...labelStyle,
...this.inferTextStyle(handleType),
text,
},
});
@@ -332,8 +341,8 @@ export class Slider extends GUI<SliderStyleProps> {
// 相对于获取两端可用空间
const { width: iW, height: iH } = this.availableSpace;
const { x: fX, y: fY, width: fW, height: fH } = this.calcMask();
const totalSpacing = spacing + size;
if (orientation === 'horizontal') {
const totalSpacing = spacing + size;
const finalWidth = totalSpacing + textWidth / 2;
if (handleType === 'start') {
const left = fX - totalSpacing - textWidth;
@@ -343,11 +352,12 @@ export class Slider extends GUI<SliderStyleProps> {
x = sign ? finalWidth : -finalWidth;
}
} else {
const finalWidth = spacing + size;
const positiveSize = totalSpacing;
const negativeSize = textHeight + totalSpacing;
if (handleType === 'start') {
y = fY - size > textHeight ? -finalWidth : finalWidth;
y = fY - size > textHeight ? -negativeSize : positiveSize;
} else {
y = iH - fY - fH - size > textHeight ? finalWidth : -finalWidth;
y = iH - (fY + fH) - size > textHeight ? negativeSize : -positiveSize;
}
}
return { x, y, text };
@@ -360,6 +370,7 @@ export class Slider extends GUI<SliderStyleProps> {
return {
...style,
...this.calcHandleText(handleType),
...this.inferTextStyle(handleType),
};
}

0 comments on commit da94ef9

Please sign in to comment.