feat: support specific and set cursor (#6160)

Co-authored-by: antv <[email protected]>
antvis · Aug 9, 2024 · 77558e7 · 77558e7
1 parent e7b38eb
commit 77558e7
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 5 deletions.
diff --git a/packages/g6/__tests__/demos/animation-element-edge-line.ts b/packages/g6/__tests__/demos/animation-element-edge-line.ts
@@ -10,6 +10,7 @@ export const animationEdgeLine: TestCase = async (context) => {
       ],
       edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
     },
+    cursor: 'grab',
     edge: {
       style: {
         lineWidth: 2,

diff --git a/packages/g6/__tests__/demos/canvas-cursor.ts b/packages/g6/__tests__/demos/canvas-cursor.ts
@@ -0,0 +1,62 @@
+import { Graph } from '@antv/g6';
+
+export const canvasCursor: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],
+    },
+    cursor: 'progress',
+  });
+
+  await graph.render();
+
+  canvasCursor.form = (panel) => {
+    return [
+      panel
+        .add({ cursor: 'progress' }, 'cursor', [
+          'auto',
+          'default',
+          'none',
+          'context-menu',
+          'help',
+          'pointer',
+          'progress',
+          'wait',
+          'cell',
+          'crosshair',
+          'text',
+          'vertical-text',
+          'alias',
+          'copy',
+          'move',
+          'no-drop',
+          'not-allowed',
+          'grab',
+          'grabbing',
+          'all-scroll',
+          'col-resize',
+          'row-resize',
+          'n-resize',
+          'e-resize',
+          's-resize',
+          'w-resize',
+          'ne-resize',
+          'nw-resize',
+          'se-resize',
+          'sw-resize',
+          'ew-resize',
+          'ns-resize',
+          'nesw-resize',
+          'nwse-resize',
+          'zoom-in',
+          'zoom-out',
+        ])
+        .onChange((cursor: any) => {
+          graph.setOptions({ cursor });
+        }),
+    ];
+  };
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts
@@ -19,6 +19,7 @@ export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorOptimizeViewportTransform } from './behavior-optimize-viewport-transform';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
+export { canvasCursor } from './canvas-cursor';
 export { caseDecisionTree } from './case-decision-tree';
 export { caseIndentedTree } from './case-indented-tree';
 export { caseMindmap } from './case-mindmap';

diff --git a/packages/g6/__tests__/unit/runtime/canvas.spec.ts b/packages/g6/__tests__/unit/runtime/canvas.spec.ts
@@ -1,4 +1,4 @@
-import { createGraphCanvas } from '@@/utils';
+import { createGraph, createGraphCanvas } from '@@/utils';
 
 describe('Canvas', () => {
   const svg = createGraphCanvas(null, 500, 500, 'svg');
@@ -88,4 +88,14 @@ describe('Canvas', () => {
     expect([...camera.getFocalPoint()]).toBeCloseTo([150, 150, 0]);
     expect([...camera.getPosition()]).toBeCloseTo([150, 150, 500]);
   });
+
+  it('cursor', async () => {
+    const graph = createGraph({
+      cursor: 'progress',
+    });
+
+    await graph.draw();
+
+    expect(graph.getCanvas().getConfig().cursor).toEqual('progress');
+  });
 });
diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts
@@ -117,7 +117,8 @@ export class Graph extends EventEmitter {
    * @apiCategory option
    */
   public setOptions(options: GraphOptions): void {
-    const { behaviors, combo, data, edge, height, layout, node, plugins, theme, transforms, width, renderer } = options;
+    const { behaviors, combo, data, edge, height, layout, node, plugins, theme, transforms, width, cursor, renderer } =
+      options;
 
     if (renderer) {
       const canvas = this.context.canvas;
@@ -130,6 +131,7 @@ export class Graph extends EventEmitter {
 
     Object.assign(this.options, options);
 
+    if (cursor) this.context.canvas?.setCursor(cursor);
     if (behaviors) this.setBehaviors(behaviors);
     if (combo) this.setCombo(combo);
     if (data) this.setData(data);
@@ -1013,10 +1015,10 @@ export class Graph extends EventEmitter {
   private async initCanvas() {
     if (this.context.canvas) return await this.context.canvas.ready;
 
-    const { container = 'container', width, height, renderer, background } = this.options;
-
+    const { container = 'container', width, height, renderer, cursor, background } = this.options;
     if (container instanceof Canvas) {
       this.context.canvas = container;
+      if (cursor) container.setCursor(cursor);
       await container.ready;
     } else {
       const $container = isString(container) ? document.getElementById(container!) : container;
@@ -1030,6 +1032,7 @@ export class Graph extends EventEmitter {
         height: height || containerSize[1],
         background,
         renderer,
+        cursor,
       });
 
       this.context.canvas = canvas;

diff --git a/packages/g6/src/spec/canvas.ts b/packages/g6/src/spec/canvas.ts
@@ -1,4 +1,4 @@
-import type { IRenderer } from '@antv/g';
+import type { Cursor, IRenderer } from '@antv/g';
 import type { Canvas } from '../runtime/canvas';
 
 /**
@@ -51,4 +51,10 @@ export interface CanvasOptions {
    * <en/> device pixel ratio
    */
   devicePixelRatio?: number;
+  /**
+   * <zh/> 指针样式
+   *
+   * <en/> cursor style
+   */
+  cursor?: Cursor;
 }