refactor: snapline and brush-select keep lineWidth after canvas zoom

packages/g6/__tests__/demos/plugin-snapline.ts

@@ -19,7 +19,7 @@ export const pluginSnapline: TestCase = async (context) => {
         labelText: (datum) => datum.id,
       },
     },
-    behaviors: ['drag-element', 'drag-canvas'],
+    behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
     plugins: [
       {
         type: 'snapline',
@@ -36,6 +36,7 @@ export const pluginSnapline: TestCase = async (context) => {
   const config = {
     filter: false,
     offset: 20,
+    autoSnap: false,
   };
 
   pluginSnapline.form = (panel) => {
@@ -48,7 +49,6 @@ export const pluginSnapline: TestCase = async (context) => {
             key: 'snapline',
             filter: (node: Node) => (filter ? node.id !== 'node3' : true),
           });
-          graph.render();
         }),
       panel
         .add(config, 'offset', [0, 20, Infinity])
@@ -58,7 +58,15 @@ export const pluginSnapline: TestCase = async (context) => {
             key: 'snapline',
             offset,
           });
-          graph.render();
+        }),
+      panel
+        .add(config, 'autoSnap')
+        .name('Auto Snap')
+        .onChange((autoSnap: boolean) => {
+          graph.updatePlugin({
+            key: 'snapline',
+            autoSnap,
+          });
         }),
     ];
   };

packages/g6/__tests__/unit/behaviors/brush-select.spec.ts

@@ -128,6 +128,14 @@ describe('behavior brush select', () => {
 
     graph.emit(CanvasEvent.CLICK);
     await expect(graph).toMatchSnapshot(__filename, 'brush-clear-mode-intersect');
+
+    // zoom to test line width
+    graph.zoomTo(5);
+    graph.emit(CommonEvent.POINTER_DOWN, { canvas: { x: 100, y: 100 }, targetType: 'canvas' });
+    graph.emit(CommonEvent.POINTER_MOVE, { canvas: { x: 250, y: 400 } });
+
+    await expect(graph).toMatchSnapshot(__filename, 'brush-selecting-zoom');
+    graph.emit(CommonEvent.POINTER_UP, { canvas: { x: 250, y: 400 } });
   });
 
   afterAll(() => {

packages/g6/__tests__/unit/plugins/snapline.spec.ts

@@ -1,4 +1,5 @@
-import { Node, NodeEvent, type Graph } from '@/src';
+import type { Graph, Node } from '@/src';
+import { NodeEvent } from '@/src';
 import { pluginSnapline } from '@@/demos';
 import { createDemoGraph } from '../../utils';
 
@@ -75,6 +76,16 @@ describe('plugin snapline', () => {
     graph.emit(NodeEvent.DRAG, { target: node, dx: 0, dy: 0 });
     await expect(graph).toMatchSnapshot(__filename, `auto-snap`);
     graph.emit(NodeEvent.DRAG_END, { target: node });
+
+    // zoom to test lineWidth
+    graph.zoomTo(5, false, [300, 300]);
+    graph.updatePlugin({ key: 'snapline', autoSnap: false });
+    graph.updateNodeData([{ id: 'node3', style: { x: 260, y: 300 } }]);
+    graph.render();
+    graph.emit(NodeEvent.DRAG_START, { target: node, targetType: 'node' });
+    graph.emit(NodeEvent.DRAG, { target: node, dx: 0, dy: 0 });
+    await expect(graph).toMatchSnapshot(__filename, 'zoom-5');
+    graph.emit(NodeEvent.DRAG_END, { target: node });
   });
 
   afterAll(() => {

packages/g6/__tests__/unit/utils/shortcut.spec.ts

@@ -80,6 +80,24 @@ describe('shortcut', () => {
     expect(drag).toHaveBeenCalledTimes(1);
     expect(drag.mock.calls[0][0].deltaX).toBe(10);
     expect(drag.mock.calls[0][0].deltaY).toBe(0);
+
+    drag.mockClear();
+
+    // shift drag
+    emitter.emit(CommonEvent.KEY_DOWN, { key: 'Shift' });
+    emitter.emit(CommonEvent.DRAG, { deltaX: 10, deltaY: 0 });
+    emitter.emit(CommonEvent.KEY_UP, { key: 'Shift' });
+    expect(drag).toHaveBeenCalledTimes(0);
+
+    shortcut.unbindAll();
+    shortcut.bind(['Shift', 'drag'], drag);
+
+    emitter.emit(CommonEvent.KEY_DOWN, { key: 'Shift' });
+    emitter.emit(CommonEvent.DRAG, { deltaX: 10, deltaY: 0 });
+    emitter.emit(CommonEvent.KEY_UP, { key: 'Shift' });
+    expect(drag).toHaveBeenCalledTimes(1);
+    expect(drag.mock.calls[0][0].deltaX).toBe(10);
+    expect(drag.mock.calls[0][0].deltaY).toBe(0);
   });
 
   it('focus', () => {

packages/g6/src/behaviors/brush-select.ts

@@ -144,9 +144,16 @@ export class BrushSelect extends BaseBehavior<BrushSelectOptions> {
    */
   protected onPointerDown(event: IPointerEvent) {
     if (!this.validate(event) || !this.isKeydown() || this.startPoint) return;
-    const { canvas } = this.context;
+    const { canvas, graph } = this.context;
+    const style = { ...this.options.style };
 
-    this.rectShape = new Rect({ id: 'g6-brush-select', style: this.options.style });
+    // 根据缩放比例调整 lineWidth
+    // Adjust lineWidth according to the zoom ratio
+    if (this.options.style.lineWidth) {
+      style.lineWidth = +this.options.style.lineWidth / graph.getZoom();
+    }
+
+    this.rectShape = new Rect({ id: 'g6-brush-select', style });
     canvas.appendChild(this.rectShape);
 
     this.startPoint = [event.canvas.x, event.canvas.y];
@@ -327,8 +334,7 @@ export class BrushSelect extends BaseBehavior<BrushSelectOptions> {
   protected isKeydown(): boolean {
     const { trigger } = this.options;
     const keys = (Array.isArray(trigger) ? trigger : [trigger]) as string[];
-    if (!trigger || keys.includes('drag')) return true;
-    return this.shortcut!.match(keys);
+    return this.shortcut!.match(keys.filter((key) => key !== 'drag'));
   }
 
   /**
@@ -348,7 +354,6 @@ export class BrushSelect extends BaseBehavior<BrushSelectOptions> {
 
   private bindEvents() {
     const { graph } = this.context;
-    this.unbindEvents();
 
     graph.on(CommonEvent.POINTER_DOWN, this.onPointerDown);
     graph.on(CommonEvent.POINTER_MOVE, this.onPointerMove);
@@ -373,7 +378,9 @@ export class BrushSelect extends BaseBehavior<BrushSelectOptions> {
    * @internal
    */
   public update(options: Partial<BrushSelectOptions>) {
+    this.unbindEvents();
     this.options = deepMix(this.options, options);
+    this.bindEvents();
   }
 
   /**