fix: 修复 point 的 shape 类型不生效 (#1361)

packages/f2/src/components/geometry/index.tsx

@@ -397,12 +397,14 @@ class Geometry<T extends GeometryProps = GeometryProps> extends Component<T> {
         });
 
         // 获取shape的style
-        const shape = this._getShapeStyle(attrValues.shape, child.origin);
+        const shapeName = attrValues.shape;
+        const shape = this._getShapeStyle(shapeName, child.origin);
 
         mix(child, attrValues, {
           normalized,
           x,
           y,
+          shapeName,
           shape,
         });
       }

packages/f2/src/components/point/pointView.tsx

@@ -10,14 +10,41 @@ export default (props) => {
         return (
           <group key={key}>
             {children.map((item) => {
-              const { x, y, size, color, shape } = item;
+              const { x, y, size, color, shapeName, shape } = item;
+              if (shapeName === 'rect') {
+                const rectSize = isNil(size) ? shape.size : size;
+                return (
+                  <rect
+                    attrs={{
+                      x: x - rectSize,
+                      y: y - rectSize,
+                      fill: color,
+                      stroke: color,
+                      ...shape,
+                      width: rectSize * 2,
+                      height: rectSize * 2,
+                    }}
+                    animation={{
+                      appear: {
+                        easing: 'linear',
+                        duration: 450,
+                      },
+                      update: {
+                        easing: 'linear',
+                        duration: 450,
+                        property: ['x', 'y', 'width', 'height', 'fill'],
+                      },
+                    }}
+                  />
+                );
+              }
               return (
                 <circle
                   attrs={{
                     x,
                     y,
-                    fill: color,
-                    stroke: '#fff',
+                    fill: shapeName === 'circle' ? color : null,
+                    stroke: shapeName === 'hollowCircle' ? color : null,
                     ...shape,
                     r: isNil(size) ? shape.size : size,
                   }}

packages/f2/src/theme.ts

@@ -106,14 +106,16 @@ const Theme = {
         smooth: true,
       },
       dash: {
-        lineDash: ['4px', '4px'],
+        lineDash: ['8px', '8px'],
       },
     },
     point: {
       default: {
-        lineWidth: '2px',
         size: '6px',
       },
+      hollowCircle: {
+        lineWidth: '2px',
+      },
     },
     area: {
       default: {

packages/f2/test/components/geometry/attr.test.tsx

@@ -688,7 +688,7 @@ describe('Geometry - Attr', () => {
       lineCap: 'round',
       lineJoin: 'round',
       lineWidth: 2,
-      lineDash: [2, 2],
+      lineDash: [4, 4],
     });
   });
   it('shape = {{ field, range }}', () => {
@@ -723,7 +723,7 @@ describe('Geometry - Attr', () => {
       lineCap: 'round',
       lineJoin: 'round',
       lineWidth: 2,
-      lineDash: [2, 2],
+      lineDash: [4, 4],
     });
     expect(geometryRef.current.records[1].children[0].shape).toEqual({
       lineCap: 'round',
@@ -767,7 +767,7 @@ describe('Geometry - Attr', () => {
       lineCap: 'round',
       lineJoin: 'round',
       lineWidth: 2,
-      lineDash: [2, 2],
+      lineDash: [4, 4],
     });
   });
   it('shape = {{ type, field, callback }}', () => {
@@ -812,7 +812,7 @@ describe('Geometry - Attr', () => {
       lineCap: 'round',
       lineJoin: 'round',
       lineWidth: 2,
-      lineDash: [2, 2],
+      lineDash: [4, 4],
     });
   });
 });

packages/f2/test/components/point/shape.test.tsx

@@ -0,0 +1,86 @@
+import { jsx } from '../../../src';
+import { Canvas, Chart, Point, Axis } from '../../../src';
+import { createContext, delay } from '../../util';
+
+const data = [
+  {
+    day: '周一',
+    value: 300,
+  },
+  {
+    day: '周二',
+    value: 400,
+  },
+  {
+    day: '周三',
+    value: 350,
+  },
+  {
+    day: '周四',
+    value: 500,
+  },
+  {
+    day: '周五',
+    value: 490,
+  },
+  {
+    day: '周六',
+    value: 600,
+  },
+  {
+    day: '周日',
+    value: 900,
+  },
+];
+
+describe('shape 类型', () => {
+  it('default', async () => {
+    const context = createContext('default');
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Point x="day" y="value" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
+  });
+  it('hollowCircle', async () => {
+    const context = createContext('hollowCircle');
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Point x="day" y="value" shape="hollowCircle" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('rect', async () => {
+    const context = createContext('rect');
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Point x="day" y="value" shape="rect" />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
+  });
+});