feat: selection's pointerEvents support function type (#4067)

* feat: selection's pointerEvents support function type * fix: extracting function getPointerEventsValue --------- Co-authored-by: yuyang <[email protected]>
antvis · Jan 24, 2024 · 6decb75 · 6decb75
1 parent a769284
commit 6decb75
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/packages/x6-plugin-selection/src/selection.ts b/packages/x6-plugin-selection/src/selection.ts
@@ -126,7 +126,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
     const { ui, selection, translateBy, snapped } = options
 
     const allowTranslating =
-      (showNodeSelectionBox !== true || pointerEvents === 'none') &&
+      (showNodeSelectionBox !== true || (pointerEvents && this.getPointerEventsValue(pointerEvents) === 'none')) &&
       !this.translating &&
       !selection
 
@@ -807,6 +807,12 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
     )
   }
 
+  protected getPointerEventsValue(pointerEvents: 'none' | 'auto' | ((cells: Cell[]) => 'none' | 'auto')) {
+    return typeof pointerEvents === 'string'
+      ? pointerEvents
+      : pointerEvents(this.cells)
+  }
+
   protected createSelectionBox(cell: Cell) {
     this.addCellSelectedClassName(cell)
 
@@ -819,6 +825,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
 
         const className = this.boxClassName
         const box = document.createElement('div')
+        const pointerEvents = this.options.pointerEvents
         Dom.addClass(box, className)
         Dom.addClass(box, `${className}-${cell.isNode() ? 'node' : 'edge'}`)
         Dom.attr(box, 'data-cell-id', cell.id)
@@ -828,7 +835,9 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
           top: bbox.y,
           width: bbox.width,
           height: bbox.height,
-          pointerEvents: this.options.pointerEvents || 'auto',
+          pointerEvents: pointerEvents
+            ? this.getPointerEventsValue(pointerEvents)
+            : 'auto',
         })
         Dom.appendTo(box, this.container)
         this.showSelected()
@@ -978,7 +987,7 @@ export namespace SelectionImpl {
     rubberEdge?: boolean
 
     // Whether to respond event on the selectionBox
-    pointerEvents?: 'none' | 'auto'
+    pointerEvents?: 'none' | 'auto' | ((cells: Cell[]) => 'none' | 'auto')
 
     // with which mouse button the selection can be started
     eventTypes?: SelectionEventType[]