feat: 修改tooltip & zoom事件监听 (#1720)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Feb 10, 2023 · 00c082b · 00c082b
1 parent f741414
commit 00c082b
Show file tree

Hide file tree

Showing 13 changed files with 461 additions and 461 deletions.
diff --git a/packages/f2/src/components/scrollBar/index.tsx b/packages/f2/src/components/scrollBar/index.tsx
@@ -1,5 +1,6 @@
 import withScrollBar, { ScrollBarProps } from './withScrollBar';
 import ScrollBarView from './scrollBarView';
+import withZoom from '../zoom';
 
 export { ScrollBarProps, withScrollBar, ScrollBarView };
-export default withScrollBar(ScrollBarView);
+export default withZoom(withScrollBar(ScrollBarView));
diff --git a/packages/f2/src/components/scrollBar/withScrollBar.tsx b/packages/f2/src/components/scrollBar/withScrollBar.tsx
@@ -1,5 +1,6 @@
-import { jsx } from '@antv/f-engine';
+import { Component, jsx } from '@antv/f-engine';
 import Zoom, { ZoomProps } from '../zoom';
+import { ChartChildProps } from '../../chart';
 
 export interface ScrollBarProps extends ZoomProps {
   /**
@@ -17,7 +18,7 @@ export interface ScrollBarProps extends ZoomProps {
 }
 
 export default (View) => {
-  return class ScrollBar extends Zoom<ScrollBarProps> {
+  return class ScrollBar extends Component<ScrollBarProps & ChartChildProps> {
     willMount() {
       super.willMount();
       const { context, props } = this;

diff --git a/packages/f2/src/components/tooltip/withTooltip.tsx b/packages/f2/src/components/tooltip/withTooltip.tsx
@@ -104,7 +104,6 @@ export default (View) => {
 
     didMount() {
       this._initShow();
-      this._initEvent();
     }
 
     willReceiveProps(nextProps) {
@@ -117,17 +116,6 @@ export default (View) => {
       }
     }
 
-    didUnmount(): void {
-      this._clearEvents();
-    }
-
-    _clearEvents() {
-      const { props, context } = this;
-      const { triggerOn = 'press', triggerOff = 'pressend' } = props;
-      // 解绑事件
-      context.gesture.off(triggerOn, this._triggerOn);
-      context.gesture.off(triggerOff, this._triggerOff);
-    }
     _initShow() {
       const { props } = this;
       const { defaultItem } = props;
@@ -156,20 +144,6 @@ export default (View) => {
         this.hide();
       }
     };
-    _initEvent() {
-      const { context, props } = this;
-      const { triggerOn = 'press', triggerOff = 'pressend', alwaysShow = false } = props;
-      context.gesture.on(triggerOn, (ev) => {
-        const { points } = ev;
-        this.show(points[0], ev);
-      });
-
-      context.gesture.on(triggerOff, (_ev) => {
-        if (!alwaysShow) {
-          this.hide();
-        }
-      });
-    }
 
     show(point, _ev?) {
       const { props } = this;
@@ -225,14 +199,48 @@ export default (View) => {
 
     render() {
       const { props, state } = this;
-      const { visible } = props;
+      const {
+        visible,
+        coord,
+        triggerOn = 'press',
+        triggerOff = 'pressend',
+        alwaysShow = false,
+      } = props;
       if (visible === false) {
         return null;
       }
       const { records } = state;
-      if (!records || !records.length) return null;
-
-      return <View {...props} records={records} />;
+      const { width, height, left, top } = coord;
+
+      return (
+        <group>
+          <rect
+            style={{
+              zIndex: 10,
+              x: left,
+              y: top,
+              width,
+              height,
+              fill: 'transparent',
+            }}
+            onPress={(ev) => {
+              if (triggerOn !== 'press') return;
+              const { points } = ev;
+              this.show(points[0], ev);
+            }}
+            onPressEnd={() => {
+              if (alwaysShow || triggerOff !== 'pressend') this.hide();
+            }}
+            onClick={(ev) => {
+              if (triggerOn !== 'click') return;
+              const { points } = ev;
+              this.show(points[0], ev);
+            }}
+          ></rect>
+
+          {records && records.length && <View {...props} records={records} />}
+        </group>
+      );
     }
   };
 };