feat: rect gudie 增加offsetXoffsetY

Author: xuying.xu

packages/f2/src/components/guide/views/Rect.tsx

@@ -8,21 +8,26 @@ export interface RectGuideProps extends GuideProps {
   theme?: any;
 }
 
-export default (props: RectGuideProps) => {
+export default (props: RectGuideProps, context) => {
   const { theme = {} } = props;
-  const { points, style, animation } = deepMix({ ...theme.rect }, props);
-  const checkNaN = points.some((d)=> isNaN(d.x) || isNaN(d.y));
-  if(checkNaN) return null;
-  
+  const { points, style, animation, offsetX, offsetY } = deepMix({ ...theme.rect }, props);
+  const checkNaN = points.some((d) => isNaN(d.x) || isNaN(d.y));
+  if (checkNaN) return null;
+
   const start = points[0] || {};
   const end = points[1] || {};
 
+  const offsetXNum = context.px2hd(offsetX);
+  const offsetYNum = context.px2hd(offsetY);
+  const posX = Math.min(start.x, end.x) + (offsetXNum || 0);
+  const posY = Math.min(start.y, end.y) + (offsetYNum || 0);
+
   return (
     <group>
       <rect
         style={{
-          x: Math.min(start.x, end.x),
-          y: Math.min(start.y, end.y),
+          x: posX,
+          y: posY,
           width: Math.abs(end.x - start.x),
           height: Math.abs(start.y - end.y),
           ...style,

packages/f2/test/components/guide/__image_snapshots__/guide-test-tsx-guide-rect-guide-1-snap.png

@@ -5,6 +5,7 @@ import {
   LineGuide,
   PointGuide,
   TextGuide,
+  RectGuide,
   withGuide,
   LottieGuide,
   withLegend,
@@ -239,6 +240,26 @@ describe('Guide ', () => {
   });
   it('tag', () => {});
 
+  it('rect guide', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Line x="genre" y="sold" color="type" />
+          <RectGuide
+            records={[data[0], data[1]]}
+            style={{ fill: 'yellow', fillOpacity: 0.5 }}
+            offsetX="-24px"
+            offsetY="24px"
+          />
+        </Chart>
+      </Canvas>
+    );
+    const chart = new Canvas(props);
+    chart.render();
+    await delay(50);
+    expect(context).toMatchImageSnapshot();
+  });
   it('guide 超出范围', async () => {
     const context = createContext();
     const { props } = (