feat: ✨ add batch for selection

packages/x6/src/addon/selection/index.ts

@@ -173,22 +173,27 @@ export class Selection extends View<Selection.EventArgs> {
     return this.collection.toArray()
   }
 
-  select(cells: Cell | Cell[], options: Collection.AddOptions = {}) {
+  select(cells: Cell | Cell[], options: Selection.AddOptions = {}) {
     options.dryrun = true
     const items = this.filter(Array.isArray(cells) ? cells : [cells])
     this.collection.add(items, options)
     return this
   }
 
-  unselect(cells: Cell | Cell[], options: Collection.RemoveOptions = {}) {
+  unselect(cells: Cell | Cell[], options: Selection.RemoveOptions = {}) {
     // dryrun to prevent cell be removed from graph
     options.dryrun = true
     this.collection.remove(Array.isArray(cells) ? cells : [cells], options)
     return this
   }
 
-  reset(cells?: Cell | Cell[], options: Collection.SetOptions = {}) {
+  reset(cells?: Cell | Cell[], options: Selection.SetOptions = {}) {
     if (cells) {
+      if (options.batch) {
+        this.collection.reset(cells, { ...options, ui: true })
+        return this
+      }
+
       const prev = this.cells
       const next = this.filter(Array.isArray(cells) ? cells : [cells])
       const prevMap: KeyValue<Cell> = {}
@@ -226,9 +231,13 @@ export class Selection extends View<Selection.EventArgs> {
     return this.clean(options)
   }
 
-  clean(options: Collection.SetOptions = {}) {
+  clean(options: Selection.SetOptions = {}) {
     if (this.length) {
-      this.collection.reset([], { ...options, ui: true })
+      if (options.batch === false) {
+        this.unselect(this.cells, options)
+      } else {
+        this.collection.reset([], { ...options, ui: true })
+      }
     }
     return this
   }
@@ -314,7 +323,7 @@ export class Selection extends View<Selection.EventArgs> {
         height /= scale.sy
         const rect = new Rectangle(origin.x, origin.y, width, height)
         const cells = this.getCellViewsInArea(rect).map((view) => view.cell)
-        this.collection.reset(cells, { ui: true })
+        this.reset(cells, { batch: true })
         this.hideRubberband()
         break
       }
@@ -1066,6 +1075,14 @@ export namespace Selection {
     | null
     | (string | { id: string })[]
     | ((this: Graph, cell: Cell) => boolean)
+
+  export interface SetOptions extends Collection.SetOptions {
+    batch?: boolean
+  }
+
+  export interface AddOptions extends Collection.AddOptions {}
+
+  export interface RemoveOptions extends Collection.RemoveOptions {}
 }
 
 export namespace Selection {

packages/x6/src/graph/graph.ts

@@ -1757,13 +1757,16 @@ export class Graph extends Basecoat<EventArgs> {
     return this.selection.isEmpty()
   }
 
-  cleanSelection() {
-    this.selection.clean()
+  cleanSelection(options?: Selection.SetOptions) {
+    this.selection.clean(options)
     return this
   }
 
-  resetSelection(cells?: Cell | string | (Cell | string)[]) {
-    this.selection.reset(cells)
+  resetSelection(
+    cells?: Cell | string | (Cell | string)[],
+    options?: Selection.SetOptions,
+  ) {
+    this.selection.reset(cells, options)
     return this
   }
 
@@ -1781,15 +1784,15 @@ export class Graph extends Basecoat<EventArgs> {
 
   select(
     cells: Cell | string | (Cell | string)[],
-    options: Collection.AddOptions = {},
+    options?: Selection.AddOptions,
   ) {
     this.selection.select(cells, options)
     return this
   }
 
   unselect(
     cells: Cell | string | (Cell | string)[],
-    options: Collection.RemoveOptions = {},
+    options?: Selection.RemoveOptions,
   ) {
     this.selection.unselect(cells, options)
     return this

packages/x6/src/graph/selection.ts

@@ -1,6 +1,5 @@
 import { ModifierKey } from '../types'
 import { Selection } from '../addon/selection'
-import { Collection } from '../model/collection'
 import { Cell } from '../model/cell'
 import { EventArgs } from './events'
 import { Base } from './base'
@@ -138,7 +137,7 @@ export class SelectionManager extends Base {
 
   select(
     cells: Cell | string | (Cell | string)[],
-    options: Collection.AddOptions = {},
+    options: Selection.AddOptions = {},
   ) {
     const selected = this.getCells(cells)
     if (selected.length) {
@@ -153,22 +152,22 @@ export class SelectionManager extends Base {
 
   unselect(
     cells: Cell | string | (Cell | string)[],
-    options: Collection.RemoveOptions = {},
+    options: Selection.RemoveOptions = {},
   ) {
     this.widget.unselect(this.getCells(cells), options)
     return this
   }
 
   reset(
     cells?: Cell | string | (Cell | string)[],
-    options: Collection.SetOptions = {},
+    options: Selection.SetOptions = {},
   ) {
     this.widget.reset(cells ? this.getCells(cells) : [], options)
     return this
   }
 
-  clean() {
-    this.widget.clean()
+  clean(options: Selection.SetOptions = {}) {
+    this.widget.clean(options)
     return this
   }
 
@@ -264,4 +263,8 @@ export namespace SelectionManager {
 
   export type Filter = Selection.Filter
   export type Content = Selection.Content
+
+  export type SetOptions = Selection.SetOptions
+  export type AddOptions = Selection.AddOptions
+  export type RemoveOptions = Selection.RemoveOptions
 }