opt: opt overlay event trigger display

Author: liihuu

src/Event.ts

@@ -193,7 +193,9 @@ export default class Event implements EventHandler {
           const consumed = widget.dispatchEvent('mouseMoveEvent', event)
           let crosshair: Crosshair | undefined = { x: event.x, y: event.y, paneId: pane?.getId() }
           if (consumed) {
-            crosshair = undefined
+            if (widget.getForceCursor() !== 'pointer') {
+              crosshair = undefined
+            }
             widget.setCursor('pointer')
           } else {
             widget.setCursor('crosshair')
@@ -231,9 +233,11 @@ export default class Event implements EventHandler {
           let crosshair: Crosshair | undefined
           const consumed = widget.dispatchEvent('pressedMouseMoveEvent', event)
           if (!consumed) {
-            crosshair = { x: event.x, y: event.y, paneId: pane?.getId() }
             this._processMainScrollingEvent(widget as Widget<DrawPane<YAxis>>, event)
           }
+          if (!consumed || widget.getForceCursor() === 'pointer') {
+            crosshair = { x: event.x, y: event.y, paneId: pane?.getId() }
+          }
           this._chart.getChartStore().setCrosshair(crosshair, { forceInvalidate: true })
           return consumed
         }

src/Store.ts

@@ -1416,23 +1416,18 @@ export default class StoreImp implements Store {
 
   setClickOverlayInfo (
     info: EventOverlayInfo,
-    processOnClickEvent: ProcessOverlayEventCallback,
     processOnSelectedEvent: ProcessOverlayEventCallback,
     processOnDeselectedEvent: ProcessOverlayEventCallback
   ): void {
     const { paneId, overlay, figureType, figure, figureIndex } = this._clickOverlayInfo
     const infoOverlay = info.overlay
-    const infoOverlayValid = isValid(infoOverlay)
-    if (infoOverlayValid) {
-      processOnClickEvent(infoOverlay, info.figure)
-    }
     if (overlay?.id !== infoOverlay?.id || figureType !== info.figureType || figureIndex !== info.figureIndex) {
       this._clickOverlayInfo = info
       if (overlay?.id !== infoOverlay?.id) {
         if (isValid(overlay)) {
           processOnDeselectedEvent(overlay, figure)
         }
-        if (infoOverlayValid) {
+        if (isValid(infoOverlay)) {
           processOnSelectedEvent(infoOverlay, info.figure)
         }
         this._chart.updatePane(UpdateLevel.Overlay, info.paneId)

src/component/Overlay.ts

@@ -48,6 +48,7 @@ export interface OverlayEventCollection<E> {
   onPressedMoveStart: Nullable<OverlayEventCallback<E>>
   onPressedMoving: Nullable<OverlayEventCallback<E>>
   onPressedMoveEnd: Nullable<OverlayEventCallback<E>>
+  onMouseMove: Nullable<OverlayEventCallback<E>>
   onMouseEnter: Nullable<OverlayEventCallback<E>>
   onMouseLeave: Nullable<OverlayEventCallback<E>>
   onSelected: Nullable<OverlayEventCallback<E>>
@@ -253,6 +254,7 @@ export default class OverlayImp<E = unknown> implements Overlay<E> {
   onPressedMoveStart: Nullable<OverlayEventCallback<E>> = null
   onPressedMoving: Nullable<OverlayEventCallback<E>> = null
   onPressedMoveEnd: Nullable<OverlayEventCallback<E>> = null
+  onMouseMove: Nullable<OverlayEventCallback<E>> = null
   onMouseEnter: Nullable<OverlayEventCallback<E>> = null
   onMouseLeave: Nullable<OverlayEventCallback<E>> = null
   onRemoved: Nullable<OverlayEventCallback<E>> = null

src/view/CrosshairFeatureView.ts

@@ -23,7 +23,6 @@ import type { YAxis } from '../component/YAxis'
 import type DrawPane from '../pane/DrawPane'
 import type DrawWidget from '../widget/DrawWidget'
 import View from './View'
-import type { EventName, MouseTouchEvent } from '../common/SyntheticEvent'
 
 interface FeatureInfo {
   crosshair: Crosshair
@@ -54,13 +53,6 @@ export default class CrosshairFeatureView extends View<YAxis> {
     })
   }
 
-  override dispatchEvent (name: EventName, event: MouseTouchEvent): boolean {
-    if (this.dispatchEventToChildren(name, event)) {
-      return false
-    }
-    return this.onEvent(name, event)
-  }
-
   override drawImp (ctx: CanvasRenderingContext2D): void {
     const widget = this.getWidget()
     const pane = widget.getPane()

src/view/OverlayView.ts

@@ -40,7 +40,8 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
   }
 
   private _initEvent (): void {
-    const pane = this.getWidget().getPane()
+    const widget = this.getWidget()
+    const pane = widget.getPane()
     const paneId = pane.getId()
     const chart = pane.getChart()
     const chartStore = chart.getChartStore()
@@ -76,6 +77,7 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
         (o, f) => this._processOverlayMouseEnterEvent(o, f, event),
         (o, f) => this._processOverlayMouseLeaveEvent(o, f, event)
       )
+      widget.setForceCursor(null)
       return false
     }).registerEvent('mouseClickEvent', event => {
       const progressOverlayInfo = chartStore.getProgressOverlayInfo()
@@ -115,7 +117,6 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
           figureIndex: -1,
           figure: null
         },
-        (o, f) => this._processOverlayClickEvent(o, f, event),
         (o, f) => this._processOverlaySelectedEvent(o, f, event),
         (o, f) => this._processOverlayDeselectedEvent(o, f, event)
       )
@@ -184,18 +185,22 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
       if (overlay !== null) {
         if (checkOverlayFigureEvent('onPressedMoving', figure)) {
           if (!overlay.lock) {
-            if (!(overlay.onPressedMoving?.({ chart, overlay, figure: figure ?? undefined, ...event }) ?? false)) {
-              const point = this._coordinateToPoint(overlay, event)
-              if (figureType === 'point') {
-                overlay.eventPressedPointMove(point, figureIndex)
-              } else {
-                overlay.eventPressedOtherMove(point, this.getWidget().getPane().getChart().getChartStore())
-              }
+            const point = this._coordinateToPoint(overlay, event)
+            if (figureType === 'point') {
+              overlay.eventPressedPointMove(point, figureIndex)
+            } else {
+              overlay.eventPressedOtherMove(point, this.getWidget().getPane().getChart().getChartStore())
+            }
+            if (overlay.onPressedMoving?.({ chart, overlay, figure: figure ?? undefined, ...event }) ?? false) {
+              this.getWidget().setForceCursor(null)
+            } else {
+              this.getWidget().setForceCursor('pointer')
             }
           }
           return true
         }
       }
+      this.getWidget().setForceCursor(null)
       return false
     })
   }
@@ -234,14 +239,6 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
     return false
   }
 
-  private _processOverlayClickEvent (overlay: OverlayImp, figure: Nullable<OverlayFigure>, event: MouseTouchEvent): boolean {
-    if ((!(overlay.isDrawing())) && checkOverlayFigureEvent('onClick', figure)) {
-      overlay.onClick?.({ chart: this.getWidget().getPane().getChart(), overlay, figure: figure ?? undefined, ...event })
-      return true
-    }
-    return false
-  }
-
   private _processOverlaySelectedEvent (overlay: OverlayImp, figure: Nullable<OverlayFigure>, event: MouseTouchEvent): boolean {
     if (checkOverlayFigureEvent('onSelected', figure)) {
       overlay.onSelected?.({ chart: this.getWidget().getPane().getChart(), overlay, figure: figure ?? undefined, ...event })
@@ -261,12 +258,21 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
   private _figureMouseMoveEvent (overlay: OverlayImp, figureType: EventOverlayInfoFigureType, figureIndex: number, figure: OverlayFigure): MouseTouchEventCallback {
     return (event: MouseTouchEvent) => {
       const pane = this.getWidget().getPane()
+      const check = !overlay.isDrawing() && checkOverlayFigureEvent('onMouseMove', figure)
+      if (check) {
+        if (overlay.onMouseMove?.({ chart: pane.getChart(), overlay, figure, ...event }) ?? false) {
+          this.getWidget().setForceCursor(null)
+        } else {
+          this.getWidget().setForceCursor('pointer')
+        }
+      }
+
       pane.getChart().getChartStore().setHoverOverlayInfo(
         { paneId: pane.getId(), overlay, figureType, figure, figureIndex },
         (o, f) => this._processOverlayMouseEnterEvent(o, f, event),
         (o, f) => this._processOverlayMouseLeaveEvent(o, f, event)
       )
-      return checkOverlayFigureEvent('onMouseEnter', figure) && !overlay.isDrawing()
+      return check
     }
   }
 
@@ -288,13 +294,16 @@ export default class OverlayView<C extends Axis = YAxis> extends View<C> {
     return (event: MouseTouchEvent) => {
       const pane = this.getWidget().getPane()
       const paneId = pane.getId()
+      const check = !overlay.isDrawing() && checkOverlayFigureEvent('onClick', figure)
+      if (check) {
+        overlay.onClick?.({ chart: this.getWidget().getPane().getChart(), overlay, figure, ...event })
+      }
       pane.getChart().getChartStore().setClickOverlayInfo(
         { paneId, overlay, figureType, figureIndex, figure },
-        (o, f) => this._processOverlayClickEvent(o, f, event),
         (o, f) => this._processOverlaySelectedEvent(o, f, event),
         (o, f) => this._processOverlayDeselectedEvent(o, f, event)
       )
-      return checkOverlayFigureEvent('onClick', figure) && !overlay.isDrawing()
+      return check
     }
   }
 

src/widget/SeparatorWidget.ts

@@ -60,10 +60,6 @@ export default class SeparatorWidget extends Widget<SeparatorPane> {
     return WidgetNameConstants.SEPARATOR
   }
 
-  override checkEventOn (): boolean {
-    return true
-  }
-
   private _mouseDownEvent (event: MouseTouchEvent): boolean {
     this._dragFlag = true
     this._dragStartY = event.pageY

src/widget/Widget.ts

@@ -89,6 +89,10 @@ export default abstract class Widget<P extends Pane = Pane> extends Eventful imp
     }
   }
 
+  getForceCursor (): Nullable<string> {
+    return this._forceCursor
+  }
+
   update (level?: UpdateLevel): void {
     this.updateImp(this._container, this._bounding, level ?? UpdateLevel.Drawer)
   }