feat: 调整部分代码

packages/fund-components/src/guide/guideView.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 
 export default (props: any) => {
-  const { points, height } = props;
+  const { points, height, triggerRef } = props;
   if (!points || !points.length) {
     return null;
   }
@@ -37,6 +37,7 @@ export default (props: any) => {
       }}
       />
       <circle
+        ref={ triggerRef }
         attrs={{
           x,
           y,

packages/fund-components/src/guide/withGuide.tsx

@@ -1,12 +1,26 @@
 // @ts-nocheck
 import { Component } from '@ali/f2-components';
 
+function isInBBox(bbox, point) {
+  const { minX, maxX, minY, maxY } = bbox;
+  const { x, y } = point;
+  return minX <= x && maxX >= x && minY <= y && maxY >= y;
+}
+
 export default View => {
   return class Guide extends Component {
     mount() {
-      const { chart } = this;
+      const { chart, props } = this;
+      const { onClick } = props;
       const canvas = chart.get('canvas');
       canvas.on('click', ev => {
+        const { points } = ev;
+        const shape = this.triggerRef.current;
+        const bbox = shape.getBBox();
+        if (isInBBox(bbox, points[0])) {
+          ev.shape = shape;
+          onClick && onClick(ev);
+        }
       });
     }
     parsePoint(record) {
@@ -28,7 +42,10 @@ export default View => {
       const width = canvas.get('width');
       const height = canvas.get('height');
       const points = records.map(record => this.parsePoint(record));
-      return <View points={ points } coord={ coord } width={ width } height={ height } />
+
+      const triggerRef = {};
+      this.triggerRef = triggerRef;
+      return <View points={ points } coord={ coord } width={ width } height={ height } triggerRef={ triggerRef }/>
     }
   }
 }

packages/jsx/jsx-runtime.js

@@ -1,2 +1,2 @@
 "use strict";
-module.exports = require('./lib/index.js');
+module.exports = require('./src/index.ts');

packages/jsx/src/render.ts

@@ -58,7 +58,7 @@ function createElement(node: any, container: any, parentLayout: any) {
     }
     return element;
   }
-  return container.addShape(type, {
+  const element = container.addShape(type, {
     ...props,
     attrs: {
       x: left,
@@ -68,6 +68,10 @@ function createElement(node: any, container: any, parentLayout: any) {
       ...attrs,
     },
   });
+  if (props.ref) {
+    props.ref.current = element;
+  }
+  return element;
 }
 
 export default (node: any, container: any) => {

packages/react/package.json

@@ -9,6 +9,7 @@
     "@antv/f2": "^3.8.1"
   },
   "devDependencies": {
+    "enzyme": "^3.11.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

packages/react/src/model.ts

@@ -2,7 +2,7 @@ import { useEffect, Children } from 'react';
 import Chart from '@ali/f2-components';
 
 export default ({ canvasRef, pixelRatio, data, children }: any) => {
-
+  
   useEffect(() => {
     // 构造component的json描述
     const components: any = [];

packages/react/test/chart.test.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource react */
 
 // @ts-nocheck
-import { useRef } from 'react';
+import { useRef, useState, Component } from 'react';
 import ReactDOM from 'react-dom';
 import Chart from '../src';
 
@@ -36,32 +36,74 @@ const eventData = event.map(eventRecord => {
   return records;
 });
 
-
-const App = () => {
-  return (
-    <Chart
-      pixelRatio={ window.devicePixelRatio }
-      data={ data }
-    >
-      <Axis visible={false} field="reportDateTimestamp" type="timeCat" tickCount={ 3 } range={ [ 0, 1 ] }/>
-      <Axis field="rate" dimType="y" tickCount={ 5 } range={ [ 0, 1 ] }/>
-      <Line position="reportDateTimestamp*rate" color="codeType"/>
-      {
-        eventData.map((records, index) => {
-          return <Guide
-          key={ index }
-          records={ records }
-          />
-        })
-      }
-    </Chart>
-  );
+class App extends Component {
+  state = {
+    activeIndex: 0,
+  }
+  guideClick = (index) => {
+    this.setState({
+      activeIndex: index,
+    });
+  }
+  render() {
+    const { activeIndex } = this.state;
+    return (
+      <Chart
+        pixelRatio={ window.devicePixelRatio }
+        data={ data }
+      >
+        <Axis visible={false} field="reportDateTimestamp" type="timeCat" tickCount={ 3 } range={ [ 0, 1 ] }/>
+        <Axis field="rate" dimType="y" tickCount={ 5 } range={ [ 0, 1 ] }/>
+        <Line position="reportDateTimestamp*rate" color="codeType" />
+        {
+          eventData.map((records, index) => {
+            return <Guide
+              key={ index }
+              active={ activeIndex === index }
+              records={ records }
+              onClick={ () => this.guideClick(index) }
+            />
+          })
+        }
+      </Chart>
+    );
+  }
 }
 
-describe('test', () => {
-  it('test', () => {
-    expect(true).toBe(true);
-  });
-});
+
+// const App = () => {
+//   const [activeIndex, setActiveIndex] = useState(0);
+
+//   const guideClick = (index) => {
+//     setActiveIndex(index)
+//   }
+
+//   return (
+//     <Chart
+//       pixelRatio={ window.devicePixelRatio }
+//       data={ data }
+//     >
+//       <Axis visible={false} field="reportDateTimestamp" type="timeCat" tickCount={ 3 } range={ [ 0, 1 ] }/>
+//       <Axis field="rate" dimType="y" tickCount={ 5 } range={ [ 0, 1 ] }/>
+//       <Line position="reportDateTimestamp*rate" color="codeType" />
+//       {
+//         eventData.map((records, index) => {
+//           return <Guide
+//             key={ index }
+//             active={ activeIndex === index }
+//             records={ records }
+//             onClick={ () => guideClick(index) }
+//           />
+//         })
+//       }
+//     </Chart>
+//   );
+// }
+
+// describe('test', () => {
+//   it('test', () => {
+//     expect(true).toBe(true);
+//   });
+// });
 
 ReactDOM.render(<App />, root);