From ad38d32042ea8eb06742e32e1a596733e2178239 Mon Sep 17 00:00:00 2001
From: xuying <33517362+tangying1027@users.noreply.github.com>
Date: Thu, 16 May 2024 19:56:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20image=E3=80=81tag=E3=80=81rect=20guide?=
 =?UTF-8?q?=20=E8=A1=A5=E5=85=85=E5=AD=97=E6=AE=B5=20(#1962)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* feat: tag guide透传animation

* feat: rect gudie 增加offsetXoffsetY

---------

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
---
 .../f2/src/components/guide/views/Image.tsx   |  13 +--
 .../f2/src/components/guide/views/Rect.tsx    |  19 +++--
 .../f2/src/components/guide/views/Tag.tsx     |  19 +++--
 ...\201px\344\274\240\345\205\245-1-snap.png" | Bin 0 -> 10173 bytes
 ...guide-test-tsx-guide-rect-guide-1-snap.png | Bin 0 -> 9305 bytes
 .../f2/test/components/guide/guide.test.tsx   |  79 +++++++++++++++++-
 6 files changed, 110 insertions(+), 20 deletions(-)
 create mode 100644 "packages/f2/test/components/guide/__image_snapshots__/guide-test-tsx-guide-image-guide\346\224\257\346\214\201px\344\274\240\345\205\245-1-snap.png"
 create mode 100644 packages/f2/test/components/guide/__image_snapshots__/guide-test-tsx-guide-rect-guide-1-snap.png

diff --git a/packages/f2/src/components/guide/views/Image.tsx b/packages/f2/src/components/guide/views/Image.tsx
index 028a64d65..bc5f6c5c8 100644
--- a/packages/f2/src/components/guide/views/Image.tsx
+++ b/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);
diff --git a/packages/f2/src/components/guide/views/Rect.tsx b/packages/f2/src/components/guide/views/Rect.tsx
index ed18174f9..f96bd6b11 100644
--- a/packages/f2/src/components/guide/views/Rect.tsx
+++ b/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,
diff --git a/packages/f2/src/components/guide/views/Tag.tsx b/packages/f2/src/components/guide/views/Tag.tsx
index 97e88a0e0..834e7c3c0 100644
--- a/packages/f2/src/components/guide/views/Tag.tsx
+++ b/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>
     );
diff --git "a/packages/f2/test/components/guide/__image_snapshots__/guide-test-tsx-guide-image-guide\346\224\257\346\214\201px\344\274\240\345\205\245-1-snap.png" "b/packages/f2/test/components/guide/__image_snapshots__/guide-test-tsx-guide-image-guide\346\224\257\346\214\201px\344\274\240\345\205\245-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4bb6c08814fade02402cafecc9399845cc02ced4
GIT binary patch
literal 10173
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
X_0_e0>UV`Y2>4S`)I?UxTSfdYsOTag

literal 0
HcmV?d00001

diff --git a/packages/f2/test/components/guide/__image_snapshots__/guide-test-tsx-guide-rect-guide-1-snap.png b/packages/f2/test/components/guide/__image_snapshots__/guide-test-tsx-guide-rect-guide-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0194fcfd2d4777ee5a3ac140297fb62025a5c6a
GIT binary patch
literal 9305
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

literal 0
HcmV?d00001

diff --git a/packages/f2/test/components/guide/guide.test.tsx b/packages/f2/test/components/guide/guide.test.tsx
index e19760aff..afad0e818 100644
--- a/packages/f2/test/components/guide/guide.test.tsx
+++ b/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>
     );