fix: fix category item that cannot handle itemMarker correctly

__tests__/integration/charts/legend/category-item-5.ts

@@ -21,6 +21,8 @@ export const CategoryItem5 = () => {
         marker: () =>
           new Rect({
             style: {
+              x: -5,
+              y: -5,
               width: 10,
               height: 10,
               transformOrigin: 'center',

__tests__/integration/charts/legend/category-item-marker-1.ts

@@ -23,6 +23,8 @@ export const CategoryItemMarker1 = () => {
             ? () =>
                 new Rect({
                   style: {
+                    x: -5,
+                    y: -5,
                     width: 10,
                     height: 10,
                     transformOrigin: 'center',

__tests__/integration/charts/legend/category-item-marker-2.ts

@@ -0,0 +1,99 @@
+import { Group, Rect, Circle, Path } from '@antv/g';
+import { colors, flowItemData } from './data';
+import { Category } from './utils';
+
+export const CategoryItemMarker2 = () => {
+  const group = new Group({
+    style: {
+      width: 750,
+      height: 50,
+    },
+  });
+
+  const paths: any = [
+    [['M', -10, 0], ['A', 10, 10, 0, 1, 0, 10, 0], ['A', 10, 10, 0, 1, 0, -10, 0], ['Z']],
+    [['M', -6.18, 0], ['L', 0, -10], ['L', 6.18, 0], ['L', 0, 10], ['Z']],
+    [
+      ['M', 0, -10],
+      ['L', 8.660254037844386, -5],
+      ['L', 8.660254037844386, 5],
+      ['L', 0, 10],
+      ['L', -8.660254037844386, 5],
+      ['L', -8.660254037844386, -5],
+      ['Z'],
+    ],
+    [['M', -10, -10], ['L', 10, -10], ['L', 10, 10], ['L', -10, 10], ['Z']],
+    [['M', -10, -8.660254037844386], ['L', 10, -8.660254037844386], ['L', 0, 8.660254037844386], ['Z']],
+    [['M', -10, 8.660254037844386], ['L', 0, -8.660254037844386], ['L', 10, 8.660254037844386], ['Z']],
+    [['M', -10, -8.5], ['L', 10, 8.5], ['L', 10, -8.5], ['L', -10, 8.5], ['Z']],
+    [['M', -10, 0], ['A', 10, 10, 0, 1, 0, 10, 0], ['A', 10, 10, 0, 1, 0, -10, 0], ['Z']],
+    [
+      ['M', -10, 0],
+      ['L', 10, 0],
+      ['M', 0, -10],
+      ['L', 0, 10],
+    ],
+    [['M', -6.18, 0], ['L', 0, -10], ['L', 6.18, 0], ['L', 0, 10], ['Z']],
+    [['M', -10, -10], ['L', 10, -10], ['L', 10, 10], ['L', -10, 10], ['Z']],
+    [['M', -10, 8.660254037844386], ['L', 0, -8.660254037844386], ['L', 10, 8.660254037844386], ['Z']],
+    [
+      ['M', 0, -10],
+      ['L', 8.660254037844386, -5],
+      ['L', 8.660254037844386, 5],
+      ['L', 0, 10],
+      ['L', -8.660254037844386, 5],
+      ['L', -8.660254037844386, -5],
+      ['Z'],
+    ],
+    [
+      ['M', -10, -10],
+      ['L', 10, 10],
+      ['M', 10, -10],
+      ['L', -10, 10],
+    ],
+    [['M', -10, -8.5], ['L', 10, 8.5], ['L', 10, -8.5], ['L', -10, 8.5], ['Z']],
+    [
+      ['M', -10, 0],
+      ['L', 10, 0],
+    ],
+    [
+      ['M', 0, 10],
+      ['L', 0, -10],
+    ],
+    [
+      ['M', -5, -10],
+      ['L', 5, -10],
+      ['M', 0, -10],
+      ['L', 0, 10],
+      ['M', -5, 10],
+      ['L', 5, 10],
+    ],
+    [['M', -10, -8.660254037844386], ['L', 10, -8.660254037844386], ['L', 0, 8.660254037844386], ['Z']],
+  ];
+
+  group.appendChild(
+    new Category({
+      style: {
+        layout: 'grid',
+        gridCol: 10,
+        height: 40,
+        data: paths.map((path: any, i: number) => ({ label: i, color: 'red' })),
+        titleText: 'Legend Title',
+        width: 500,
+        itemMarker: (d: any, i: number) => () =>
+          new Path({
+            style: {
+              path: paths[i],
+            },
+          }),
+        itemMarkerStroke: 'red',
+        itemMarkerFill: (_: any, i: number) => colors[i % colors.length],
+        itemValue: '',
+      },
+    })
+  );
+
+  return group;
+};
+
+CategoryItemMarker2.tags = ['分类图例', '图标', '自定义'];

__tests__/integration/charts/legend/category-items-3.ts

@@ -16,7 +16,7 @@ export const CategoryItems3 = () => {
         navDuration: 10000,
         itemMarker: (_: any, index: number) =>
           index % 2 === 0
-            ? () => new Rect({ style: { width: 16, height: 16, fill: 'red' } })
+            ? () => new Rect({ style: { x: -8, y: -8, width: 16, height: 16, fill: 'red' } })
             : () => new Circle({ style: { cx: 0, cy: 0, r: 8, fill: 'red' } }),
         itemMarkerFill: (_: any, index: number) => (index % 2 === 0 ? 'red' : 'green'),
 

__tests__/integration/charts/legend/category-items-4.ts

@@ -27,6 +27,8 @@ export const CategoryItems4 = () => {
         itemMarker: (_: any) => () =>
           new Image({
             style: {
+              x: -8,
+              y: -8,
               width: 16,
               height: 16,
               src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',

__tests__/integration/charts/legend/category-layout-3.ts

@@ -1,4 +1,4 @@
-import { Group } from '@antv/g';
+import { Group, Path } from '@antv/g';
 import { flowItemData, colors } from './data';
 import { Category, smooth } from './utils';
 
@@ -26,7 +26,12 @@ export const CategoryLayout3 = () => {
         itemMarkerLineWidth: 3,
         itemMarkerFill: 'transparent',
         itemValue: '',
-        itemMarkerD: smooth(6, 3, 6),
+        itemMarker: () => () =>
+          new Path({
+            style: {
+              path: smooth(0, 0, 6),
+            },
+          }),
       },
     })
   );

__tests__/integration/charts/legend/category-layout-7.ts

@@ -1,4 +1,4 @@
-import { Group } from '@antv/g';
+import { Group, Path } from '@antv/g';
 import { Category, createItemData, smooth } from './utils';
 import { colors } from './data';
 
@@ -25,7 +25,12 @@ export const CategoryLayout7 = () => {
         itemMarkerLineWidth: 3,
         itemMarkerFill: 'transparent',
         itemValue: '',
-        itemMarkerD: smooth(6, 3, 6),
+        itemMarker: () => () =>
+          new Path({
+            style: {
+              path: smooth(0, 0, 6),
+            },
+          }),
       },
     })
   );

__tests__/integration/charts/legend/index.ts

@@ -53,6 +53,7 @@ export { CategoryPosition1 } from './category-position-1';
 export { CategoryPosition2 } from './category-position-2';
 export { CategoryPosition3 } from './category-position-3';
 export { CategoryItemMarker1 } from './category-item-marker-1';
+export { CategoryItemMarker2 } from './category-item-marker-2';
 export { ContinuousDemo } from './continuous';
 export { Continuous1 } from './continuous-1';
 export { Continuous2 } from './continuous-2';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/gui",
-  "version": "0.4.3-alpha.66",
+  "version": "0.4.3-alpha.67",
   "description": "UI components for AntV G.",
   "license": "MIT",
   "main": "lib/index.js",

src/ui/layout/index.ts

@@ -1 +1,2 @@
 export { Layout } from './layout';
+export type { LayoutOptions, LayoutStyleProps } from './layout';

src/ui/legend/category/item.ts

@@ -1,12 +1,13 @@
-import type {
-  Text,
+import {
+  Circle,
   DisplayObject,
   DisplayObjectConfig,
   Group,
   GroupStyleProps,
+  PathStyleProps,
   RectStyleProps,
+  Text,
   TextStyleProps,
-  PathStyleProps,
 } from '@antv/g';
 import { isNumber, isString } from '@antv/util';
 import { GUI } from '../../../core/gui';
@@ -15,16 +16,15 @@ import {
   classNames,
   deepAssign,
   ellipsisIt,
-  subObject,
   ifShow,
   normalSeriesAttr,
-  SeriesAttr,
   renderExtDo,
+  scaleToPixel,
   select,
   Selection,
-  scaleToPixel,
+  SeriesAttr,
+  subObject,
 } from '../../../util';
-import { circle } from '../../marker/symbol';
 
 type ItemMarkerStyle = { size?: number } & PathStyleProps;
 type ItemTextStyle = Omit<TextStyleProps, 'text'>;
@@ -68,8 +68,7 @@ const CLASS_NAMES = classNames(
 
 const DEFAULT_ITEM_CFG: Partial<CategoryItemStyleProps> = {
   span: [1, 1],
-  marker: 'path',
-  markerD: circle(6, 6, 6),
+  marker: () => new Circle({ style: { r: 6 } }),
   markerFill: '#d3d2d3',
   markerSize: 10,
   labelFill: '#646464',
@@ -172,7 +171,7 @@ export class CategoryItem extends GUI<CategoryItemStyleProps> {
     const style = subObject(this.attributes, 'marker');
     this.markerGroup = container.maybeAppendByClassName(CLASS_NAMES.markerGroup, 'g');
     ifShow(!!marker, this.markerGroup, () => {
-      this.markerGroup.maybeAppendByClassName(CLASS_NAMES.marker, marker!).styles({ anchor: '0.5 0.5', ...style });
+      this.markerGroup.maybeAppendByClassName(CLASS_NAMES.marker, marker!).styles(style).node();
       scaleToPixel(this.markerGroup.node(), markerSize!, true);
     });
   }