diff --git a/__tests__/integration/components/checkbox/checkbox1.ts b/__tests__/integration/components/checkbox/checkbox1.ts index 9ba2f8c28..9e876c76a 100644 --- a/__tests__/integration/components/checkbox/checkbox1.ts +++ b/__tests__/integration/components/checkbox/checkbox1.ts @@ -14,7 +14,7 @@ export function Checkbox1() { }) ); - group.appendChild( + const ck = group.appendChild( new Checkbox({ style: { x: 10, @@ -25,5 +25,11 @@ export function Checkbox1() { }) ); + ck.addEventListener('click', () => { + ck.update({ + checked: !ck.attr('checked'), + }); + }); + return group; } diff --git a/__tests__/integration/components/index.ts b/__tests__/integration/components/index.ts index a701c283a..ace4e41b3 100644 --- a/__tests__/integration/components/index.ts +++ b/__tests__/integration/components/index.ts @@ -17,3 +17,4 @@ export * from './marker'; export * from './text'; export * from './timebar'; export * from './select'; +export * from './tag'; diff --git a/__tests__/integration/components/marker/marker-1.ts b/__tests__/integration/components/marker/marker-1.ts index b4f098137..be35f115b 100644 --- a/__tests__/integration/components/marker/marker-1.ts +++ b/__tests__/integration/components/marker/marker-1.ts @@ -4,17 +4,22 @@ import { Marker } from '../../../../src'; export const Marker1 = () => { const group = new Group(); - group.appendChild( - new Marker({ - style: { - x: 150, - y: 150, - symbol: 'circle', - size: 10, - fill: 'red', - }, - }) - ); + const markers = Marker.getSymbols(); + + markers.forEach((marker, index) => { + group.appendChild( + new Marker({ + style: { + x: 20 + (index % 10) * 50, + y: 150 + Math.floor(index / 10) * 50, + symbol: marker, + size: 16, + stroke: 'blue', + lineWidth: 2, + }, + }) + ); + }); return group; }; diff --git a/__tests__/integration/components/tag/index.ts b/__tests__/integration/components/tag/index.ts new file mode 100644 index 000000000..ca95ad28e --- /dev/null +++ b/__tests__/integration/components/tag/index.ts @@ -0,0 +1 @@ +export * from './tag-1'; diff --git a/__tests__/integration/components/tag/tag-1.ts b/__tests__/integration/components/tag/tag-1.ts new file mode 100644 index 000000000..89c71c1bf --- /dev/null +++ b/__tests__/integration/components/tag/tag-1.ts @@ -0,0 +1,59 @@ +import { Group } from '@antv/g'; +import { Tag } from '../../../../src'; + +export const Tag1 = () => { + const group = new Group(); + + group.appendChild( + new Tag({ + style: { + x: 100, + y: 100, + text: 'G2', + }, + }) + ); + + group.appendChild( + new Tag({ + style: { + x: 200, + y: 100, + text: 'G6', + backgroundFill: '#DBF1B7', + labelFill: 'red', + marker: { + size: 8, + symbol: 'diamond', + stroke: '#5B8FF9', + }, + }, + }) + ); + + const tag = group.appendChild( + new Tag({ + style: { + x: 300, + y: 100, + text: 'L7', + radius: 6, + padding: [6, 24], + }, + }) + ); + + tag.addEventListener('mouseenter', () => { + tag.update({ + backgroundFill: '#5B8FF9', + }); + }); + + tag.addEventListener('mouseleave', () => { + tag.update({ + backgroundFill: '#DBF1B7', + }); + }); + + return group; +}; diff --git a/__tests__/integration/snapshots/Marker1.png b/__tests__/integration/snapshots/Marker1.png index 0191a9a9a..6a5e8e5b0 100644 Binary files a/__tests__/integration/snapshots/Marker1.png and b/__tests__/integration/snapshots/Marker1.png differ diff --git a/__tests__/integration/snapshots/Tag1.png b/__tests__/integration/snapshots/Tag1.png new file mode 100644 index 000000000..f351247e3 Binary files /dev/null and b/__tests__/integration/snapshots/Tag1.png differ diff --git a/src/ui/marker/index.ts b/src/ui/marker/index.ts index 9bc18899a..ba3f95be9 100644 --- a/src/ui/marker/index.ts +++ b/src/ui/marker/index.ts @@ -87,6 +87,13 @@ export class Marker extends Component { public static getSymbol = (type: string): FunctionalSymbol | undefined => { return Marker.MARKER_SYMBOL_MAP.get(type); }; + + /** + * @returns 获取已经注册的 icon 的类型 + */ + public static getSymbols = () => { + return Array.from(Marker.MARKER_SYMBOL_MAP.keys()); + }; } /** Shapes for Point Geometry */ diff --git a/src/ui/switch/index.ts b/src/ui/switch/index.ts index d47e4a284..08e76ba78 100644 --- a/src/ui/switch/index.ts +++ b/src/ui/switch/index.ts @@ -46,7 +46,7 @@ export class Switch extends Component { public static tag = 'switch'; /** - * 开关 + * 开关 */ private checked!: boolean; diff --git a/src/ui/tag/index.ts b/src/ui/tag/index.ts index d5fa87650..a37225d28 100644 --- a/src/ui/tag/index.ts +++ b/src/ui/tag/index.ts @@ -59,14 +59,14 @@ export class Tag extends Component { .attr('className', 'tag-content') .style('zIndex', 0) .node(); - const style = marker ? { marker } : { symbol: 'triangle', size: 0 }; + const markerStyle = marker || { symbol: 'triangle', size: 0 }; // @ts-ignore - const markerShape = maybeAppend(group, '.tag-marker', () => new Marker({ style })) + const markerShape = maybeAppend(group, '.tag-marker', () => new Marker({ style: markerStyle })) .attr('className', 'tag-marker') .call((selection) => { (selection.node() as Marker).clear(); }) - .update(style) + .update(markerStyle) .node() as Marker; const { x, y } = getTextPosition(markerShape, spacing);