chore: add test case for tag, marker

__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;
 }

__tests__/integration/components/index.ts

@@ -17,3 +17,4 @@ export * from './marker';
 export * from './text';
 export * from './timebar';
 export * from './select';
+export * from './tag';

__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;
 };

__tests__/integration/components/tag/index.ts

@@ -0,0 +1 @@
+export * from './tag-1';

__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;
+};

src/ui/marker/index.ts

@@ -87,6 +87,13 @@ export class Marker extends Component<MarkerStyleProps> {
   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 */

src/ui/switch/index.ts

@@ -46,7 +46,7 @@ export class Switch extends Component<SwitchStyleProps> {
   public static tag = 'switch';
 
   /**
-   *  开关
+   * 开关
    */
   private checked!: boolean;
 

src/ui/tag/index.ts

@@ -59,14 +59,14 @@ export class Tag extends Component<TagStyleProps> {
       .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);