Skip to content

Commit

Permalink
fix: tagGuide 小三角形计算逻辑 (#1524)
Browse files Browse the repository at this point in the history
  • Loading branch information
@El-Chiang
El-Chiang committed Jun 22, 2022
1 parent 3f8200f commit de1889b
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 29 deletions.
60 changes: 34 additions & 26 deletions packages/f2/src/components/guide/views/Tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ interface TagGuideProps {
* 文字样式
*/
textStyle?: any;
/**
* tagGuide ref
*/
triggerRef?: any;
}

const defaultProps: TagGuideProps = {
Expand Down Expand Up @@ -69,6 +73,7 @@ export default (props: TagGuideProps, context) => {
guideBBox,
background,
textStyle,
triggerRef,
} = cfg;
const { x, y } = points[0] || {};
const { width: guideWidth, height: guideHeight } = guideBBox || {};
Expand Down Expand Up @@ -111,64 +116,66 @@ export default (props: TagGuideProps, context) => {

const _getArrowPoints = (direct) => {
let arrowPoints = [];
const { minX, minY } = guideBBox || {};
// const { minX, minY } = guideBBox || {};
if (direct === 'tl') {
arrowPoints = [
{ x: minX, y: minY - 1 }, // 这个 1 是为了防止出现白边
{ x: minX, y: minY + side },
{ x: minX - side - 1, y: minY - 1 },
{ x: posX, y: posY - side - 1 },
{ x: posX, y: posY },
{ x: posX - side, y: posY - side - 1 },
];
posX -= (guideWidth || 0);
posY = posY - (guideHeight || 0) - side;
} else if (direct === 'cl') {
arrowPoints = [
{ x: minX - 1, y: minY - 1 - side / 2 },
{ x: minX - 1, y: minY + 1 + side / 2 },
{ x: minX + side, y: minY },
{ x: posX - side - 1, y: posY - side },
{ x: posX - side - 1, y: posY + side },
{ x: posX, y: posY },
];
posX = posX - (guideWidth || 0) - side;
posY -= (guideHeight / 2 || 0);
} else if (direct === 'bl') {
arrowPoints = [
{ x: minX, y: -side + minY },
{ x: minX - side - 1, y: minY + 1 },
{ x: minX, y: minY + 1 },
{ x: posX, y: posY },
{ x: posX, y: posY + side + 1 },
{ x: posX - side, y: posY + side + 1 },
];
posX = posX - (guideWidth || 0);
posY += side;
} else if (direct === 'bc') {
} else if (direct === 'bc') { // 有问题
arrowPoints = [
{ x: guideWidth / 2 + minX, y: -side + minY },
{ x: (guideWidth - side) / 2 + minX - 1, y: minY + 1 },
{ x: (guideWidth + side) / 2 + minX + 1, y: minY + 1 },
{ x: posX, y: posY },
{ x: posX - side, y: posY + side + 1 },
{ x: posX + side, y: posY + side + 1 },
];
posX = posX - (guideWidth / 2 || 0);
posY = posY + side;
} else if (direct === 'br') {
arrowPoints = [
{ x: minX, y: minY - side },
{ x: minX, y: minY + 1 },
{ x: minX + side + 1, y: minY + 1 },
{ x: posX, y: posY },
{ x: posX, y: posY + side + 1 },
{ x: posX + side, y: posY + side + 1 },
];
posY += side;
} else if (direct === 'cr') {
arrowPoints = [
{ x: minX - side, y: minY },
{ x: minX + 1, y: minY - 1 - side / 2 },
{ x: minX + 1, y: minY + 1 + side / 2 },
{ x: posX, y: posY },
{ x: posX + side, y: posY - side },
{ x: posX + side, y: posY + side },
];
posX += side;
posY -= (guideHeight / 2 || 0);
} else if (direct === 'tr') {
arrowPoints = [
{ x: minX, y: minY + side },
{ x: minX, y: minY - 1 },
{ x: side + minX + 1, y: minY - 1 },
{ x: posX, y: posY },
{ x: posX, y: posY - side - 1 },
{ x: posX + side, y: posY - side - 1 },
];
posY = posY - (guideHeight || 0) - side;
} else if (direct === 'tc') {
arrowPoints = [
{ x: minX - 1 - side / 2, y: minY - 1 },
{ x: minX + 1 + side / 2, y: minY - 1 },
{ x: minX, y: minY + side },
{ x: posX, y: posY },
{ x: posX - side, y: posY - side - 1 },
{ x: posX + side, y: posY - side - 1 },
];
posX -= (guideWidth / 2 || 0);
posY = posY - (guideHeight || 0) - side;
Expand All @@ -193,6 +200,7 @@ export default (props: TagGuideProps, context) => {
padding: defaultStyle.container.padding,
...background,
}}
ref={triggerRef}
>
<text
attrs={{
Expand Down
22 changes: 19 additions & 3 deletions packages/f2/src/components/guide/withGuide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,24 @@ export default (View) => {
});
}

didUpdate() {
super.didUpdate();
const shape = this.triggerRef.current;
if (!shape || shape.isDestroyed()) return;
const { x, y, width, height } = shape.get('attrs');
const bbox = {
minX: x,
minY: y,
maxX: x + width,
maxY: y + height,
width,
height,
};
this.setState({
guideBBox: bbox,
});
}

getGuideBBox() {
const shape = renderShape(this, this.render(), false);
const { x, y, width, height } = shape.get('attrs');
Expand Down Expand Up @@ -116,7 +134,7 @@ export default (View) => {
const { width, height } = context;
const points = this.convertPoints(records);
const theme = this.getGuideTheme();
const { guideWidth, guideHeight, guideBBox } = this.state;
const { guideBBox } = this.state;

let animationCfg = animation;
if (isFunction(animation)) {
Expand All @@ -133,8 +151,6 @@ export default (View) => {
{...props}
canvasWidth={width}
canvasHeight={height}
guideWidth={guideWidth}
guideHeight={guideHeight}
guideBBox={guideBBox}
animation={animationCfg}
/>
Expand Down
Binary file added ...nents/guide/__image_snapshots__/type-test-tsx-guide-tag-guide-update-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...nents/guide/__image_snapshots__/type-test-tsx-guide-tag-guide-update-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...mponents/guide/__image_snapshots__/type-test-tsx-guide-tag-guide不同方向-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions packages/f2/test/components/guide/type.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,61 @@ describe('Guide', () => {
expect(context).toMatchImageSnapshot();
});

it('TagGuide不同方向', async () => {
const context = createContext('TagGuide不同方向');
const { props } = (
<Canvas context={context} animate={false} pixelRatio={1}>
<Chart data={data}>
<Line x="genre" y="sold" />
<TagGuide records={[{ genre: 'Sports', sold: 5 }]} direct="tc" content="tag" />
<TagGuide records={[{ genre: 'Strategy', sold: 10 }]} direct="tl" content="tag" />
<TagGuide records={[{ genre: 'Action', sold: 20 }]} direct="tr" content="tag" />
<TagGuide records={[{ genre: 'Shooter', sold: 20 }]} direct="cl" content="tag" />
<TagGuide records={[{ genre: 'Other', sold: 40 }]} direct="cr" content="tag" />
<TagGuide records={[{ genre: 'Action', sold: 20 }]} direct="bl" content="tag" />
<TagGuide records={[{ genre: 'Sports', sold: 5 }]} direct="bc" content="tag" />
<TagGuide records={[{ genre: 'Strategy', sold: 10 }]} direct="br" content="tag" />
</Chart>
</Canvas>
);

const canvas = new Canvas(props);
canvas.render();

await delay(500);
expect(context).toMatchImageSnapshot();
});

it('TagGuide update', async () => {
const context = createContext('TagGuide update');
const { props } = (
<Canvas context={context} animate={false} pixelRatio={1}>
<Chart data={data}>
<Line x="genre" y="sold" />
<TagGuide records={[{ genre: 'Action', sold: 20 }]} direct="tl" content="long long" />
</Chart>
</Canvas>
);

const canvas = new Canvas(props);
canvas.render();

await delay(1000);
expect(context).toMatchImageSnapshot();
canvas.update(
(
<Canvas context={context} pixelRatio={1}>
<Chart data={data}>
<Line x="genre" y="sold" />
<TagGuide records={[{ genre: 'Action', sold: 20 }]} direct="tl" content="short" />
</Chart>
</Canvas>
).props
);
await delay(500);
expect(context).toMatchImageSnapshot();
});

it('LineGuide in Category', async () => {
const context = createContext('LineGuideInCategory');
const data = [
Expand Down

0 comments on commit de1889b

Please sign in to comment.