fix: guide超出范围不显示 (#1944)

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

Author: tangying1027

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

@@ -11,6 +11,8 @@ export interface ArcGuideProps extends GuideProps {
 export default (props: ArcGuideProps) => {
   const { theme = {} } = props;
   const { coord, points, style, animation } = deepMix({ ...theme.line }, props);
+  const checkNaN = points.some((d)=> isNaN(d.x) || isNaN(d.y));
+  if(checkNaN) return null;
 
   const start = points[0] || {};
   const end = points[1] || {};

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

@@ -22,6 +22,8 @@ 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;
+  
   const { height = 0, width = 0 } = { ...attrs, ...style };
   const heightNum = context.px2hd(height + 'px');
   const widthNum = context.px2hd(width + 'px');

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

@@ -13,6 +13,9 @@ export interface LineGuideProps extends GuideProps {
 export default (props: LineGuideProps, context) => {
   const { theme = {} } = props;
   const { points, style, offsetX, offsetY, animation } = deepMix({ ...theme.line }, props);
+  const checkNaN = points.some((d)=> isNaN(d.x) || isNaN(d.y));
+  if(checkNaN) return;
+
   const { x: x1, y: y1 } = points[0] || {};
   const { x: x2, y: y2 } = points[1] || {};
 

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

@@ -28,6 +28,8 @@ export default (props: LottieGuideProps, context) => {
   const cfg = deepMix({}, defaultProps, props);
   const { points, style, offsetX, offsetY, lottieJson, animation, options } = cfg;
   const { x, y } = points[0] || {};
+  if(isNaN(x) || isNaN(y)) return null;
+  
   const { height = 0, width = 0 } = style;
 
   const offsetXNum = context.px2hd(offsetX);

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

@@ -14,7 +14,8 @@ export default (props: PointGuideProps, context) => {
   const { theme } = props;
   const { points, style, offsetX, offsetY, animation } = deepMix({ ...theme.point }, props);
   const { x, y } = points[0] || {};
-
+  if(isNaN(x) || isNaN(y)) return null;
+  
   const offsetXNum = context.px2hd(offsetX);
   const offsetYNum = context.px2hd(offsetY);
   const posX = x + (offsetXNum || 0);

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

@@ -11,7 +11,9 @@ export interface RectGuideProps extends GuideProps {
 export default (props: RectGuideProps) => {
   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 start = points[0] || {};
   const end = points[1] || {};
 

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

@@ -95,7 +95,8 @@ export default class Tag extends Component<TagGuideProps> {
       textStyle,
     } = px2hd(cfg);
     const { x, y } = points[0] || {};
-
+    if(isNaN(x) || isNaN(y)) return null;
+    
     const offsetXNum = context.px2hd(offsetX);
     const offsetYNum = context.px2hd(offsetY);
     let posX = x + (offsetXNum || 0);

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

@@ -16,6 +16,7 @@ export default (props: TextGuideProps, context) => {
   const { points, style, offsetX, offsetY, content, animation } = deepMix({ ...theme.text }, props);
   const { x, y } = points[0] || {};
 
+  if(isNaN(x) || isNaN(y)) return null;
   const offsetXNum = context.px2hd(offsetX);
   const offsetYNum = context.px2hd(offsetY);
   const posX = x + (offsetXNum || 0);

packages/f2/src/components/guide/withGuide.tsx

@@ -81,8 +81,6 @@ export default function<IProps extends GuideProps = GuideProps>(
       const { width, height } = context;
       const points = this.convertPoints(records);
       const theme = this.getGuideTheme();
-      const checkNaN = points.some((d)=> isNaN(d.x) || isNaN(d.y))
-      if(checkNaN) return;
 
       return (
         <group