fix: size支持px (#1975)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>

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

@@ -13,7 +13,7 @@ import { ChartChildProps } from '../../chart';
 import Selection, { SelectionProps, SelectionState } from './selection';
 import { Adjust, Dodge, Jitter, Stack, Symmetric } from '../../deps/f2-adjust/src';
 import { toTimeStamp } from '../../util/index';
-import AttrController from '../../controller/attr';
+import AttrController, { ATTRS } from '../../controller/attr';
 import { Scale } from '../../deps/f2-scale/src';
 import { AnimationProps, isEqual } from '@antv/f-engine';
 import { AdjustType, AdjustProps } from './Adjust';
@@ -116,26 +116,39 @@ class Geometry<
     super(props, context);
     mix(this, this.getDefaultCfg());
 
-    const { chart, coord } = props;
+    const { chart } = props;
 
     const attrsRange = this._getThemeAttrsRange();
     this.attrController = new AttrController(chart.scale, attrsRange);
-    const { attrController, justifyContent } = this;
+    const { attrController } = this;
 
-    const attrOptions = attrController.getAttrOptions(props, !coord.isCyclic() || justifyContent);
+    const attrOptions = this.getAttrOptions(props);
     attrController.create(attrOptions);
   }
 
+  getAttrOptions(props) {
+    const { coord } = props;
+    const { attrController, justifyContent } = this;
+    const justifyContentCenter = !coord.isCyclic() || justifyContent;
+
+    const args = {};
+    ATTRS.forEach((d) => (args[d] = props[d]));
+
+    const attrOptions = attrController.getAttrOptions(
+      this.context.px2hd(args),
+      justifyContentCenter
+    );
+    return attrOptions;
+  }
+
   willReceiveProps(nextProps) {
-    const { props: lastProps, attrController, justifyContent } = this;
-    const { data: nextData, adjust: nextAdjust, coord, selection } = nextProps;
+    const { props: lastProps, attrController } = this;
+    const { data: nextData, adjust: nextAdjust, selection } = nextProps;
     const { data: lastData, adjust: lastAdjust, selection: lastSelection } = lastProps;
 
-    const justifyContentCenter = !coord.isCyclic() || justifyContent;
-    const lastAttrOptions = attrController.getAttrOptions(lastProps, justifyContentCenter);
-
+    const lastAttrOptions = this.getAttrOptions(lastProps);
     attrController.attrsRange = this._getThemeAttrsRange();
-    const nextAttrOptions = attrController.getAttrOptions(nextProps, justifyContentCenter);
+    const nextAttrOptions = this.getAttrOptions(nextProps);
 
     if (!isEqual(nextAttrOptions, lastAttrOptions)) {
       attrController.update(nextAttrOptions);
@@ -516,6 +529,7 @@ class Geometry<
     const defaultAttrValues = attrController.getDefaultAttrValues();
 
     const mappedRecords = [];
+
     for (let i = 0, len = records.length; i < len; i++) {
       const record = records[i];
       const { children } = record;

packages/f2/src/components/interval/withInterval.tsx

@@ -75,7 +75,6 @@ export default (Views) => {
 
     mapping() {
       const records = super.mapping();
-
       const { props } = this;
       const { coord, sizeZoom } = props;
       const y0 = this.getY0Value();

packages/f2/src/controller/attr.ts

@@ -18,7 +18,7 @@ type AttrsRange = {
 
 const { Identity, Linear, Category } = Attrs;
 // 需要映射的属性名
-const ATTRS = ['x', 'y', 'color', 'size', 'shape'];
+export const ATTRS = ['x', 'y', 'color', 'size', 'shape'];
 // 分组处理的属性
 const GROUP_ATTRS = ['color', 'size', 'shape'];
 
@@ -86,6 +86,7 @@ class AttrController {
     }
     const options = {};
     const ranges = this.attrsRange;
+
     ATTRS.forEach((attrName: Attr) => {
       if (!props[attrName]) return;
       const option = this.parseOption(props[attrName], attrName);

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

@@ -456,6 +456,27 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[1].children[0].size).toBe(16);
   });
 
+  it('size 支持 px', async () => {
+    const ref = {};
+    const context = createContext('size 支持px');
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="year" />
+          <Axis field="sales" />
+          <Interval x="year" y="sales" size={'10px'}></Interval>
+          <Line x="year" y="sales" size={'5px'} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('size = {field}  用size大小来做分类', async () => {
     const context = createContext('size = {field}  用size大小来做分类', { width: '380px' });
     const geometryRef = { current: null };
@@ -477,6 +498,33 @@ describe('Geometry - Attr', () => {
     expect(geometryRef.current.records[1].children[0].size).toBe(3);
   });
 
+  it('size = {{ field, range }} 支持px', async () => {
+    const ref = {};
+    const context = createContext('size = {{ field, range }} 支持px');
+    const { type, props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="year" />
+          <Axis field="sales" />
+          <Point
+            x="year"
+            y="sales"
+            size={{
+              field: 'sales',
+              range: ['5px', '30px'],
+            }}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('size = {{ field, range }} 用size大小来做分类', async () => {
     const context = createContext('size = {{ field, range }} 用size大小来做分类', {
       width: '380px',