diff --git a/packages/x6-plugin-selection/src/selection.ts b/packages/x6-plugin-selection/src/selection.ts index 243b604e422..349e846509a 100644 --- 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 { 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 { ) } + 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 { 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 { 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[]