feat: magnifier组件增加offsetX和offsetY属性 (#2088)

Author: tangying1027

packages/f2/src/components/magnifier/withMagnifier.tsx

@@ -32,16 +32,20 @@ export default (View) => {
   return class Magnifier extends Component<MagnifierProps> {
     static defaultProps = {
       radius: '50px',
+      offsetX: 0,
+      offsetY: 0,
     };
 
     getPositionAndRadius() {
       const { coord } = this.props;
       const { right, top } = coord;
-      const { radius, position: propsPosition } = this.context.px2hd(this.props);
+      const { radius, position: propsPosition, offsetX, offsetY } = this.context.px2hd(this.props);
 
       // 计算默认 position
       const calculatedPosition = [right - radius, top + radius];
-      const position = propsPosition || calculatedPosition;
+      let position = propsPosition || calculatedPosition;
+
+      position = [position[0] + offsetX, position[1] + offsetY];
 
       return { position, radius };
     }

packages/f2/test/components/magnifier/__image_snapshots__/magnifier-test-tsx-magnifier-offset-x-and-offset-y-1-snap.png

@@ -477,4 +477,38 @@ describe('Magnifier', () => {
 
     expect(context).toMatchImageSnapshot();
   });
+
+  it('offsetX and offsetY', async () => {
+    const context = createContext('Magnifier offsetX/offsetY', {
+      width: '500px',
+      height: '200px',
+    });
+    const magnifierRef = { current: null };
+    const { props } = (
+      <Canvas context={context}>
+        <Chart
+          data={data}
+          style={{
+            padding: ['50px', '50px', '50px', '50px'],
+          }}
+        >
+          <Line x="date" y="value" color="rgb(208,178,136)" />
+          <Magnifier
+            ref={magnifierRef}
+            focusRange={[data.length - 8, data.length - 1]}
+            offsetX={'-100px'}
+            offsetY={'20px'}
+            frameStyle={{
+              background: '#fff',
+              boxShadow: '0 2px 8px rgba(24,144,255,0.15)',
+            }}
+          ></Magnifier>
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    await canvas.render();
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
 });