Skip to content

Commit

Permalink
Merge pull request #1328 from VisActor/feat/label-line
Browse files Browse the repository at this point in the history 
Feat/label line
  • Loading branch information
@xile611
xile611 authored Aug 2, 2024
2 parents 9322829 + e794ee4 commit d643586
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 41 deletions.
10 changes: 10 additions & 0 deletions common/changes/@visactor/vrender-components/feat-label-line_2024-08-01-16-05.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vrender-components",
"comment": "feat: label line support custom path. feat @VisActor/VChart#3000",
"type": "none"
}
],
"packageName": "@visactor/vrender-components"
}
96 changes: 64 additions & 32 deletions packages/vrender-components/__tests__/browser/examples/label-arc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import '@visactor/vrender';
import { createGroup, Stage, createArc } from '@visactor/vrender';
import { createRenderer } from '../../util/render';
import { ArcLabel } from '../../../src';
import { IPointLike } from '@visactor/vutils';

const pieGenerator = () => {
const spec: any = {
Expand Down Expand Up @@ -1266,7 +1267,8 @@ function createContent(stage: Stage) {
baseMarkGroupName: pieSpec.name,
data: pieSpec.children.map((c, index) => {
return {
// // text: 'test122344556778891234550987665544'
text: 'xx'
// text: 'test122344556778891234550987665544',
// text: latestData[index] ? latestData[index]?.type : undefined
// // text: originData[index].id
// // fill: c.attribute.fill,
Expand All @@ -1276,30 +1278,30 @@ function createContent(stage: Stage) {
// // lineWidth: 0
// // ...latestData[index]

textType: 'rich',
text: [
// {
// text: `NO.${index}🐾`,
// fontSize: 15,
// textAlign: 'right',
// textDecoration: 'underline',
// stroke: '#0f51b5'
// }
// textType: 'rich',
// text: [
// // {
// // text: `NO.${index}🐾`,
// // fontSize: 15,
// // textAlign: 'right',
// // textDecoration: 'underline',
// // stroke: '#0f51b5'
// // }

{
text: 'Mapbox',
fontWeight: 'bold',
fontSize: 25,
fill: '#3f51b5'
},
// {
// text: 'Mapbox',
// fontWeight: 'bold',
// fontSize: 25,
// fill: '#3f51b5'
// },

{
text: '替代方案',
fontStyle: 'italic',
textDecoration: 'underline',
fill: '#3f51b5'
}
]
// {
// text: '替代方案',
// fontStyle: 'italic',
// textDecoration: 'underline',
// fill: '#3f51b5'
// }
// ]

// type: 'html',
// text: '<p>这是一个html字符串</p>'
Expand All @@ -1315,22 +1317,52 @@ function createContent(stage: Stage) {
},
width: 800,
height: 500,
position: 'inside',
position: 'outside',

// position: 'inside-outer',

// textStyle: {
// // angle: 0
// fontSize: 16
// },
// line: {
// line1MinLength: 30,
// smooth: true,
// style: {
// lineWidth: 2,
// stroke: 'red'
// }
// },
line: {
line1MinLength: 40,
line2MinLength: 60,
// smooth: true,
customShape: (text, attrs, path) => {
console.log('attrs', text, attrs, path);
let points = attrs.points as IPointLike[];
// 绘制带圆角的折线(暂时用小转折拟合)
const direction = points[points.length - 1].x - points[0].x > 0 ? -1 : 1;
path.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length - 1; i++) {
const p1 = points[i - 1];
const p2 = points[i % points.length];
const p3 = points[(i + 1) % points.length];
const { x: x1, y: y1 } = p1;
const { x: x2, y: y2 } = p2;
const { x: x3, y: y3 } = p3;

const k1 = (y2 - y1) / (x2 - x1);
const k2 = (y3 - y2) / (x3 - x2);
const deltaX = 3;
const deltaY1 = k1 * deltaX;
const deltaY2 = k2 * deltaX;

path.lineTo(p2.x + direction * deltaX, p2.y + direction * deltaY1); // 到点p1的上方
path.lineTo(p2.x - direction * deltaX, p2.y - direction * deltaY2); // 绘制圆弧
// path.quadraticCurveTo(p2.x - deltaX, p2.y - deltaY1, p2.x + deltaX, p2.y + deltaY2)
// path.quadraticCurveTo(p2.x - deltaX, p2.y - deltaY1, p2.x + deltaX, p2.y + deltaY2, 2)
}

path.lineTo(points[points.length - 1].x, points[points.length - 1].y);
return path;
},
style: {
lineWidth: 1,
stroke: 'red'
}
},
layout: {
// align: 'edge'
tangentConstraint: false
Expand Down
10 changes: 8 additions & 2 deletions packages/vrender-components/src/interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import type { ICustomPath2D, IGraphicAttribute, IRectGraphicAttribute } from '@visactor/vrender-core';
import type {
ICustomPath2D,
IGraphicAttribute,
IRectGraphicAttribute,
IRichTextAttribute,
ITextGraphicAttribute
} from '@visactor/vrender-core';
import type { TextContent } from './core/type';

export type Direction = 'horizontal' | 'vertical';
Expand All @@ -15,7 +21,7 @@ export type BackgroundAttributes = {
* @since 0.19.19
*/
customShape?: (
text: Pick<TextContent, 'text'>,
text: ITextGraphicAttribute | IRichTextAttribute,
attrs: Partial<IGraphicAttribute>,
path: ICustomPath2D
) => ICustomPath2D;
Expand Down
12 changes: 11 additions & 1 deletion packages/vrender-components/src/label/arc.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import type { IAABBBounds, IBoundsLike } from '@visactor/vutils';
// eslint-disable-next-line no-duplicate-imports
import { merge, isValidNumber, isNil, isLess, isGreater, isNumberClose as isClose } from '@visactor/vutils';
import { LabelBase } from './base';
import type { ArcLabelAttrs, IPoint, Quadrant, BaseLabelAttrs, LabelItem, IArcLabelLineSpec } from './type';
import type { ILineGraphicAttribute } from '@visactor/vrender-core';
// eslint-disable-next-line no-duplicate-imports
import {
type IRichText,
type IText,
type IArcGraphicAttribute,
type IGraphic,
type ILine,
graphicCreator
graphicCreator,
CustomPath2D
} from '@visactor/vrender-core';
import {
circlePoint,
Expand Down Expand Up @@ -944,6 +948,12 @@ export class ArcLabel extends LabelBase<ArcLabelAttrs> {
})
: undefined;
if (labelLine) {
if (line?.customShape) {
const customShape = line.customShape;
labelLine.pathProxy = (attrs: Partial<ILineGraphicAttribute>) => {
return customShape(text.attribute, attrs, new CustomPath2D());
};
}
this._setStatesOfLabelLine(labelLine);
}
return labelLine;
Expand Down
14 changes: 12 additions & 2 deletions packages/vrender-components/src/label/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,13 @@ import type {
IColor,
ILine,
IArea,
IRichText
IRichText,
ILineGraphicAttribute
} from '@visactor/vrender-core';
import { graphicCreator, AttributeUpdateType, IContainPointMode } from '@visactor/vrender-core';
// eslint-disable-next-line no-duplicate-imports
import { graphicCreator, AttributeUpdateType, IContainPointMode, CustomPath2D } from '@visactor/vrender-core';
import type { IAABBBounds, IBoundsLike, IPointLike } from '@visactor/vutils';
// eslint-disable-next-line no-duplicate-imports
import {
isFunction,
isEmpty,
Expand All @@ -31,6 +34,7 @@ import { labelSmartInvert, contrastAccessibilityChecker, smartInvertStrategy } f
import { createTextGraphicByType, getMarksByName, getNoneGroupMarksByName, traverseGroup } from '../util';
import { StateValue } from '../constant';
import type { Bitmap } from './overlap';
// eslint-disable-next-line no-duplicate-imports
import { bitmapTool, boundToRange, canPlace, clampText, place } from './overlap';
import type {
BaseLabelAttrs,
Expand Down Expand Up @@ -126,6 +130,12 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
const line = graphicCreator.line({
points
});
if (line?.customShape) {
const customShape = line.customShape;
line.pathProxy = (attrs: Partial<ILineGraphicAttribute>) => {
return customShape(text.attribute, attrs, new CustomPath2D());
};
}

if (baseMark && baseMark.attribute.fill) {
line.setAttribute('stroke', baseMark.attribute.fill);
Expand Down
12 changes: 11 additions & 1 deletion packages/vrender-components/src/label/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import type {
ILineGraphicAttribute,
IRichTextCharacter,
IRichText,
ILine
ILine,
ICustomPath2D
} from '@visactor/vrender-core';
import type { BoundsAnchorType, IPointLike, InsideBoundsAnchorType } from '@visactor/vutils';

Expand Down Expand Up @@ -420,6 +421,15 @@ export interface ILabelLineSpec {
* @default true
*/
visible?: boolean;
/**
* 自定义路径
* @since 0.19.21
*/
customShape?: (
text: ITextGraphicAttribute,
attrs: Partial<ILineGraphicAttribute>,
path: ICustomPath2D
) => ICustomPath2D;
/**
* 引导线样式
*/
Expand Down
6 changes: 3 additions & 3 deletions packages/vrender-components/src/tag/tag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export class Tag extends AbstractComponent<Required<TagAttributes>> {
tagWidth += symbolPlaceWidth;
textX += symbolPlaceWidth;

let textShape;
let textShape: IRichText | IText;
const isRich = isRichText({ text } as TextContent) || type === 'rich';
if (isRich) {
const richTextAttrs = {
Expand Down Expand Up @@ -144,7 +144,7 @@ export class Tag extends AbstractComponent<Required<TagAttributes>> {
if (backgroundStyle.customShape) {
const customShape = backgroundStyle.customShape;
bgRect.pathProxy = (attrs: Partial<IGraphicAttribute>) => {
return customShape(text as Pick<TextContent, 'text'>, attrs, new CustomPath2D());
return customShape(textShape.attribute, attrs, new CustomPath2D());
};
}
this._bgRect = bgRect;
Expand Down Expand Up @@ -320,7 +320,7 @@ export class Tag extends AbstractComponent<Required<TagAttributes>> {
if (backgroundStyle.customShape) {
const customShape = backgroundStyle.customShape;
bgRect.pathProxy = (attrs: Partial<IGraphicAttribute>) => {
return customShape(text as Pick<TextContent, 'text'>, attrs, new CustomPath2D());
return customShape(textShape.attribute, attrs, new CustomPath2D());
};
}
this._bgRect = bgRect;
Expand Down

0 comments on commit d643586

Please sign in to comment.