feat: image、tag、rect guide 补充字段 (#1962)

* feat: image guide宽高支持px单位

* feat: tag guide透传animation

* feat: rect gudie 增加offsetXoffsetY

---------

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

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

@@ -1,5 +1,5 @@
 import { jsx, ImageStyleProps } from '@antv/f-engine';
-import { deepMix } from '@antv/util';
+import { deepMix, isNumber } from '@antv/util';
 import { GuideProps } from '../withGuide';
 
 export interface ImageGuideProps extends GuideProps {
@@ -11,7 +11,7 @@ export interface ImageGuideProps extends GuideProps {
   offsetY?: number | string;
 }
 
-const defaultProps: Omit<ImageGuideProps, "records"> = {
+const defaultProps: Omit<ImageGuideProps, 'records'> = {
   offsetX: 0,
   offsetY: 0,
   points: [],
@@ -22,11 +22,12 @@ export default (props: ImageGuideProps, context) => {
   const cfg = deepMix({}, defaultProps, props);
   const { points, style, attrs, offsetX, offsetY, src, animation } = cfg;
   const { x, y } = points[0] || {};
-  if(isNaN(x) || isNaN(y)) return null;
-  
+  if (isNaN(x) || isNaN(y)) return null;
+
   const { height = 0, width = 0 } = { ...attrs, ...style };
-  const heightNum = context.px2hd(height + 'px');
-  const widthNum = context.px2hd(width + 'px');
+
+  const heightNum = isNumber(height) ? context.px2hd(height + 'px') : context.px2hd(height);
+  const widthNum = isNumber(width) ? context.px2hd(width + 'px') : context.px2hd(width);
 
   const offsetXNum = context.px2hd(offsetX);
   const offsetYNum = context.px2hd(offsetY);

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/src/components/guide/views/Tag.tsx

@@ -30,7 +30,7 @@ export interface TagGuideProps extends GuideProps {
   textStyle?: any;
 }
 
-const defaultProps: Omit<TagGuideProps, "records"> = {
+const defaultProps: Omit<TagGuideProps, 'records'> = {
   offsetX: 0,
   offsetY: 0,
   points: [],
@@ -54,7 +54,7 @@ const defaultStyle = {
   },
 };
 
-const Label = ({ content, background, textStyle }) => {
+const Label = ({ content, background, textStyle, animation = {} }) => {
   return (
     <rect
       style={{
@@ -64,6 +64,7 @@ const Label = ({ content, background, textStyle }) => {
         radius: defaultStyle.container.radius,
         ...background,
       }}
+      animation={animation}
     >
       <text
         style={{
@@ -72,6 +73,7 @@ const Label = ({ content, background, textStyle }) => {
           fill: defaultStyle.text.fill,
           ...textStyle,
         }}
+        animation={animation}
       />
     </rect>
   );
@@ -93,10 +95,11 @@ export default class Tag extends Component<TagGuideProps> {
       canvasHeight,
       background,
       textStyle,
+      animation,
     } = px2hd(cfg);
     const { x, y } = points[0] || {};
-    if(isNaN(x) || isNaN(y)) return null;
-    
+    if (isNaN(x) || isNaN(y)) return null;
+
     const offsetXNum = context.px2hd(offsetX);
     const offsetYNum = context.px2hd(offsetY);
     let posX = x + (offsetXNum || 0);
@@ -220,12 +223,18 @@ export default class Tag extends Component<TagGuideProps> {
           y: posY,
         }}
       >
-        <Label content={content} background={background} textStyle={textStyle} />
+        <Label
+          content={content}
+          background={background}
+          textStyle={textStyle}
+          animation={animation}
+        />
         <polygon
           style={{
             points: arrowPoints.map((d) => [d.x, d.y]),
             fill: background?.fill || defaultStyle.arrow.fill,
           }}
+          animation={animation}
         />
       </group>
     );

packages/f2/test/components/guide/guide.test.tsx

@@ -5,6 +5,7 @@ import {
   LineGuide,
   PointGuide,
   TextGuide,
+  RectGuide,
   withGuide,
   LottieGuide,
   withLegend,
@@ -131,6 +132,56 @@ describe('Guide ', () => {
     expect(context).toMatchImageSnapshot();
   });
 
+  it('image guide支持px传入', async () => {
+    const context = createContext();
+    const { props } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Line x="genre" y="sold" color="type" />
+
+          {data.map((item) => {
+            const { sold } = item;
+            return (
+              <ImageGuide
+                records={[item]}
+                src={imageBianzu}
+                style={() => {
+                  return {
+                    height: 24,
+                    width: 24,
+                  };
+                }}
+              />
+            );
+          })}
+
+          {/* 图片Guide */}
+          {data.map((item, key) => {
+            return (
+              <ImageGuide
+                records={[item]}
+                src={imageBianzu}
+                style={() => {
+                  return {
+                    height: '24px',
+                    width: '24px',
+                  };
+                }}
+                offsetX="0px"
+                offsetY="-24px"
+              />
+            );
+          })}
+        </Chart>
+      </Canvas>
+    );
+    const chart = new Canvas(props);
+    await chart.render();
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
+
   it('point', async () => {
     const context = createContext();
     const { props } = (
@@ -189,13 +240,37 @@ describe('Guide ', () => {
   });
   it('tag', () => {});
 
-  it('guide 超出范围', async() => {
+  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" />
-           <PointGuide records={[{ genre: 'test', sold: 450, type: 'a' }]} offsetX="0px" offsetY="0px" />
+          <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 } = (
+      <Canvas context={context} pixelRatio={1} animate={false}>
+        <Chart data={data}>
+          <Line x="genre" y="sold" color="type" />
+          <PointGuide
+            records={[{ genre: 'test', sold: 450, type: 'a' }]}
+            offsetX="0px"
+            offsetY="0px"
+          />
         </Chart>
       </Canvas>
     );