improve: mouse event listener option #1010

docs/en/guide/command-get.md

@@ -275,7 +275,8 @@ const {
   pageNo: number
   element: IElement | null
   rangeRect: RangeRect | null
-}[] = await instance.command.getPositionContextByEvent(evt: MouseEvent)
+  tableInfo: ITableInfoByEvent | null
+}[] = await instance.command.getPositionContextByEvent(evt: MouseEvent, options?: IPositionContextByEventOption)
 ```
 
 demo:

docs/en/guide/eventbus.md

@@ -160,6 +160,36 @@ Usage:
 instance.eventBus.on('mouseleave', (evt: MouseEvent) => void)
 ```
 
+## mousedown
+
+Feature: Editor mousedown event
+
+Usage:
+
+```javascript
+instance.eventBus.on('mousedown', (evt: MouseEvent) => void)
+```
+
+## mouseup
+
+Feature: Editor mouseup event
+
+Usage:
+
+```javascript
+instance.eventBus.on('mouseup', (evt: MouseEvent) => void)
+```
+
+## click
+
+Feature: Editor click event
+
+Usage:
+
+```javascript
+instance.eventBus.on('click', (evt: MouseEvent) => void)
+```
+
 ## positionContextChange
 
 Feature: The position context change

docs/guide/command-get.md

@@ -275,7 +275,8 @@ const {
   pageNo: number
   element: IElement | null
   rangeRect: RangeRect | null
-}[] = await instance.command.getPositionContextByEvent(evt: MouseEvent)
+  tableInfo: ITableInfoByEvent | null
+}[] = await instance.command.getPositionContextByEvent(evt: MouseEvent, options?: IPositionContextByEventOption)
 ```
 
 示例：

docs/guide/eventbus.md

@@ -160,6 +160,36 @@ instance.eventBus.on('mouseenter', (evt: MouseEvent) => void)
 instance.eventBus.on('mouseleave', (evt: MouseEvent) => void)
 ```
 
+## mousedown
+
+功能：编辑器 mousedown 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mousedown', (evt: MouseEvent) => void)
+```
+
+## mouseup
+
+功能：编辑器 mouseup 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('mouseup', (evt: MouseEvent) => void)
+```
+
+## click
+
+功能：编辑器 click 事件监听
+
+用法：
+
+```javascript
+instance.eventBus.on('click', (evt: MouseEvent) => void)
+```
+
 ## positionContextChange
 
 功能：上下文内容发生改变

src/editor/core/command/CommandAdapt.ts

@@ -69,7 +69,9 @@ import {
 import {
   ICopyOption,
   IPasteOption,
-  IPositionContextByEvent
+  IPositionContextByEventOption,
+  IPositionContextByEventResult,
+  ITableInfoByEvent
 } from '../../interface/Event'
 import { IMargin } from '../../interface/Margin'
 import { ILocationPosition } from '../../interface/Position'
@@ -2242,10 +2244,12 @@ export class CommandAdapt {
   }
 
   public getPositionContextByEvent(
-    evt: MouseEvent
-  ): IPositionContextByEvent | null {
+    evt: MouseEvent,
+    options: IPositionContextByEventOption = {}
+  ): IPositionContextByEventResult | null {
     const pageIndex = (<HTMLElement>evt.target)?.dataset.index
     if (!pageIndex) return null
+    const { isMustDirectHit = true } = options
     const pageNo = Number(pageIndex)
     const positionContext = this.position.getPositionByXY({
       x: evt.offsetX,
@@ -2262,8 +2266,14 @@ export class CommandAdapt {
       zone
     } = positionContext
     // 非直接命中或选区不一致时返回空值
-    if (!isDirectHit || (zone && zone !== this.zone.getZone())) return null
+    if (
+      (isMustDirectHit && !isDirectHit) ||
+      (zone && zone !== this.zone.getZone())
+    ) {
+      return null
+    }
     // 命中元素信息
+    let tableInfo: ITableInfoByEvent | null = null
     let element: IElement | null = null
     const elementList = this.draw.getOriginalElementList()
     let position: IElementPosition | null = null
@@ -2272,6 +2282,11 @@ export class CommandAdapt {
       const td = elementList[index!].trList?.[trIndex!].tdList[tdIndex!]
       element = td?.value[tdValueIndex!] || null
       position = td?.positionList?.[tdValueIndex!] || null
+      tableInfo = {
+        element: elementList[index!],
+        trIndex: trIndex!,
+        tdIndex: tdIndex!
+      }
     } else {
       element = elementList[index] || null
       position = positionList[index] || null
@@ -2296,7 +2311,8 @@ export class CommandAdapt {
     return {
       pageNo,
       element,
-      rangeRect
+      rangeRect,
+      tableInfo
     }
   }
 

src/editor/core/observer/MouseObserver.ts

@@ -19,6 +19,9 @@ export class MouseObserver {
       'mouseleave',
       this._mouseleave.bind(this)
     )
+    this.pageContainer.addEventListener('mousedown', this._mousedown.bind(this))
+    this.pageContainer.addEventListener('mouseup', this._mouseup.bind(this))
+    this.pageContainer.addEventListener('click', this._click.bind(this))
   }
 
   private _mousemove(evt: MouseEvent) {
@@ -35,4 +38,19 @@ export class MouseObserver {
     if (!this.eventBus.isSubscribe('mouseleave')) return
     this.eventBus.emit('mouseleave', evt)
   }
+
+  private _mousedown(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('mousedown')) return
+    this.eventBus.emit('mousedown', evt)
+  }
+
+  private _mouseup(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('mouseup')) return
+    this.eventBus.emit('mouseup', evt)
+  }
+
+  private _click(evt: MouseEvent) {
+    if (!this.eventBus.isSubscribe('click')) return
+    this.eventBus.emit('click', evt)
+  }
 }

src/editor/interface/Event.ts

@@ -5,10 +5,21 @@ export interface IPasteOption {
   isPlainText: boolean
 }
 
-export interface IPositionContextByEvent {
+export interface ITableInfoByEvent {
+  element: IElement
+  trIndex: number
+  tdIndex: number
+}
+
+export interface IPositionContextByEventResult {
   pageNo: number
   element: IElement | null
   rangeRect: RangeRect | null
+  tableInfo: ITableInfoByEvent | null
+}
+
+export interface IPositionContextByEventOption {
+  isMustDirectHit?: boolean
 }
 
 export interface ICopyOption {

src/editor/interface/EventBus.ts

@@ -29,5 +29,8 @@ export interface EventBusMap {
   mousemove: IMouseEventChange
   mouseleave: IMouseEventChange
   mouseenter: IMouseEventChange
+  mousedown: IMouseEventChange
+  mouseup: IMouseEventChange
+  click: IMouseEventChange
   positionContextChange: IPositionContextChange
 }