feat(#2246): 给多选框增加整体rotate 和 resize

examples/src/pages/case/bpmn.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Graph, Cell } from '@antv/x6'
+import { Graph, Cell, Selection } from '@antv/x6'
 import '../index.less'
 
 Graph.registerNode(
@@ -226,6 +226,16 @@ export const CaseBpmnExample: React.FC = () => {
       },
     })
 
+    graph.use(
+      new Selection({
+        multiple: true,
+        rubberband: true,
+        showNodeSelectionBox: true,
+        resizable: true,
+        rotatable: { grid: 15 },
+      }),
+    )
+
     const cells: Cell[] = []
     data.forEach((item) => {
       if (item.shape === 'bpmn-edge') {

examples/src/pages/case/class.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Graph, Cell, ObjectExt } from '@antv/x6'
+import { Graph, Cell, ObjectExt, Selection } from '@antv/x6'
 import '../index.less'
 
 Graph.registerNode(
@@ -348,6 +348,16 @@ export const CaseClassExample: React.FC = () => {
       height: 600,
     })
 
+    graph.use(
+      new Selection({
+        multiple: true,
+        rubberband: true,
+        showNodeSelectionBox: true,
+        resizable: true,
+        rotatable: { grid: 15 },
+      }),
+    )
+
     const cells: Cell[] = []
     const edgeShapes = [
       'extends',

examples/src/pages/case/dag.tsx

@@ -388,6 +388,9 @@ export const CaseDagExample: React.FC = () => {
       rubberNode: true,
       modifiers: 'shift',
       rubberband: true,
+      showNodeSelectionBox: true,
+      resizable: true,
+      rotatable: { grid: 15 },
     })
     graph.use(selection)
     graph.use(new Snapline())

examples/src/pages/case/elk.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import ELK, { ElkNode, ElkEdge } from 'elkjs/lib/elk-api.js'
 import elkWorker from 'elkjs/lib/elk-worker.js'
-import { Graph, Cell } from '@antv/x6'
+import { Graph, Cell, Selection } from '@antv/x6'
 import elkdata from './elkdata.json'
 import '../index.less'
 
@@ -83,9 +83,18 @@ export const CaseElkExample: React.FC = () => {
       container: containerRef.current,
       width: 1000,
       height: 600,
-      interacting: false,
     })
 
+    graph.use(
+      new Selection({
+        multiple: true,
+        rubberband: true,
+        showNodeSelectionBox: true,
+        resizable: true,
+        rotatable: { grid: 15 },
+      }),
+    )
+
     const portIdToNodeIdMap: Record<string, string> = {}
     const cells: Cell[] = []
 

examples/src/pages/case/er.tsx

@@ -1,4 +1,4 @@
-import { Graph, Shape, Edge } from '@antv/x6'
+import { Graph, Shape, Edge, Selection } from '@antv/x6'
 import React, { useEffect, useRef } from 'react'
 import './er.less'
 import './tableNode'
@@ -262,6 +262,16 @@ export const ErDiagram: React.FC<ErDiagramProps> = ({ tables }) => {
     const graph = createErGraph(containerRef.current)
     graphRef.current = graph
 
+    graph.use(
+      new Selection({
+        multiple: true,
+        rubberband: true,
+        showNodeSelectionBox: true,
+        resizable: true,
+        rotatable: { grid: 15 },
+      }),
+    )
+
     graph.on('edge:click', ({ edge }) => {
       toggleType(edge)
     })

examples/src/pages/case/mind.tsx

@@ -183,7 +183,13 @@ export const CaseMindExample: React.FC = () => {
         connectionPoint: 'anchor',
       },
     })
-    const selection = new Selection()
+    const selection = new Selection({
+      multiple: true,
+      rubberband: true,
+      showNodeSelectionBox: true,
+      resizable: true,
+      rotatable: { grid: 15 },
+    })
     graph.use(selection)
     const keyboard = new Keyboard()
     graph.use(keyboard)

examples/src/pages/case/swimlane.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Graph, Cell, CellView, Node } from '@antv/x6'
+import { Graph, Cell, CellView, Node, Selection } from '@antv/x6'
 import '../index.less'
 
 Graph.registerNode(
@@ -337,6 +337,16 @@ export const CaseSwimlaneExample: React.FC = () => {
       },
     })
 
+    graph.use(
+      new Selection({
+        multiple: true,
+        rubberband: true,
+        showNodeSelectionBox: true,
+        resizable: true,
+        rotatable: { grid: 15 },
+      }),
+    )
+
     const cells: Cell[] = []
     data.forEach((item) => {
       if (item.shape === 'lane-edge') {

examples/src/pages/plugins/selection/index.tsx

@@ -23,6 +23,8 @@ export const SelectionExample: React.FC = () => {
       strict: true,
       showNodeSelectionBox: true,
       showEdgeSelectionBox: true,
+      resizable: true,
+      rotatable: { grid: 15 },
     }
     const selection = new Selection(selectionOptions)
     graph.use(keyboard)

src/model/model.ts

@@ -1547,5 +1547,7 @@ export type BatchName =
   | 'move-segment'
   | 'move-arrowhead'
   | 'move-selection'
+  | 'group-rotate'
+  | 'group-resize'
 
 export interface ToJSONOptions extends CellToJSONOptions {}