Merge pull request #320 from antvis/fix-issue-319

feat(g-base): add getCursor() and setCursor(cursor) method for Canvas

docs/api/canvas.en.md

@@ -33,6 +33,10 @@ export type Renderer = 'canvas' | 'svg';
 
 - 画布大小和所占 DOM 宽高的比例，一般可以使用 `window.devicePixelRatio`，通常情况下无需手动设置该属性；
 
+### cursor: Cursor
+
+- 画布的 cursor 样式，其中 `Cursor` 为样式类型，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)。
+
 ## 方法
 
 ### 通用的 [元素方法](/zh/docs/api/element#通用方法)
@@ -49,6 +53,14 @@ export type Renderer = 'canvas' | 'svg';
 export type Renderer = 'canvas' | 'svg';
 ```
 
+## getCursor(): Cursor
+
+- 获取画布的 cursor 样式，其中 `Cursor` 为样式类型，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)。
+
+## setCursor(cursor: Cursor)
+
+- 设置画布的 cursor 样式，其中 `Cursor` 为样式类型，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)。
+
 ### getShapeBase()
 
 - 获取图形的基类；

docs/api/canvas.zh.md

@@ -33,6 +33,10 @@ export type Renderer = 'canvas' | 'svg';
 
 - 画布大小和所占 DOM 宽高的比例，一般可以使用 `window.devicePixelRatio`，通常情况下无需手动设置该属性；
 
+### cursor: Cursor
+
+- 画布的 cursor 样式，其中 `Cursor` 为样式类型，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)。
+
 ## 方法
 
 ### 通用的 [元素方法](/zh/docs/api/element#通用方法)
@@ -49,6 +53,14 @@ export type Renderer = 'canvas' | 'svg';
 export type Renderer = 'canvas' | 'svg';
 ```
 
+## getCursor(): Cursor
+
+- 获取画布的 cursor 样式，其中 `Cursor` 为样式类型，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)。
+
+## setCursor(cursor: Cursor)
+
+- 设置画布的 cursor 样式，其中 `Cursor` 为样式类型，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)。
+
 ### getShapeBase()
 
 - 获取图形的基类；

packages/g-base/src/abstract/canvas.ts

@@ -1,6 +1,6 @@
 import Container from './container';
 import { ICanvas } from '../interfaces';
-import { CanvasCfg, Point, Renderer } from '../types';
+import { CanvasCfg, Point, Renderer, Cursor } from '../types';
 import { isBrowser, isString, isObject } from '../util/util';
 import Timeline from '../animate/timeline';
 
@@ -15,6 +15,13 @@ abstract class Canvas extends Container implements ICanvas {
     this.initTimeline();
   }
 
+  getDefaultCfg() {
+    const cfg = super.getDefaultCfg();
+    // set default cursor style for canvas
+    cfg['cursor'] = 'default';
+    return cfg;
+  }
+
   /**
    * @protected
    * 初始化容器
@@ -92,6 +99,22 @@ abstract class Canvas extends Container implements ICanvas {
     return this.get('renderer');
   }
 
+  /**
+   * 获取画布的 cursor 样式
+   * @return {Cursor}
+   */
+  getCursor(): Cursor {
+    return this.get('cursor');
+  }
+
+  /**
+   * 设置画布的 cursor 样式
+   * @param {Cursor} cursor  cursor 样式
+   */
+  setCursor(cursor: Cursor) {
+    this.set('cursor', cursor);
+  }
+
   // 实现接口
   getPointByClient(clientX: number, clientY: number): Point {
     const el = this.get('el');

packages/g-base/src/event/event-contoller.ts

@@ -231,7 +231,7 @@ class EventController {
     this.currentShape = shape;
     // 当鼠标从画布移动到 shape 或者从 preShape 移动到 shape 时，应用 shape 上的鼠标样式
     if (shape && !shape.get('destroyed')) {
-      el.style.cursor = shape.attr('cursor') || 'default';
+      el.style.cursor = shape.attr('cursor') || canvas.get('cursor');
     }
   }
   // 记录下点击的位置、图形，便于拖拽事件、click 事件的判定
@@ -252,7 +252,7 @@ class EventController {
         this._emitEvent('mouseleave', event, pointInfo, fromShape, fromShape, toShape);
         // 当鼠标从 fromShape 移动到画布上时，重置鼠标样式
         if (!toShape || toShape.get('destroyed')) {
-          el.style.cursor = 'default';
+          el.style.cursor = this.canvas.get('cursor');
         }
       }
       if (toShape) {

packages/g-base/src/interfaces.ts

@@ -11,6 +11,7 @@ import {
   ShapeBase,
   BBox,
   ElementFilterFn,
+  Cursor,
 } from './types';
 import GraphEvent from './event/graph-event';
 
@@ -445,6 +446,18 @@ export interface ICanvas extends IContainer {
    */
   getParent(): IContainer;
 
+  /**
+   * 获取画布的 cursor 样式
+   * @return {Cursor}
+   */
+  getCursor(): Cursor;
+
+  /**
+   * 设置画布的 cursor 样式
+   * @param {Cursor} cursor  cursor 样式
+   */
+  setCursor(cursor: Cursor);
+
   /**
    * 改变画布大小
    * @param {number} width  宽度

packages/g-base/src/types.ts

@@ -87,6 +87,46 @@ export type ClipCfg = {
 
 export type Renderer = 'canvas' | 'svg';
 
+// Cursor style
+// See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+export type 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';
+
 export type CanvasCfg = {
   /**
    * 容器
@@ -113,6 +153,12 @@ export type CanvasCfg = {
    * @type {string}
    */
   renderer?: Renderer;
+
+  /**
+   * 画布的 cursor 样式
+   * @type {Cursor}
+   */
+  cursor?: Cursor;
   [key: string]: any;
 };
 

packages/g-canvas/tests/bugs/issue-319-spec.js

@@ -0,0 +1,63 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+import { simulateMouseEvent, getClientPoint } from '../util';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+dom.style.border = '1px solid black';
+dom.style.width = '600px';
+dom.style.height = '600px';
+
+describe('#319', () => {
+  const canvas = new Canvas({
+    container: dom,
+    width: 600,
+    height: 600,
+    // cursor: 'default',
+  });
+  const el = canvas.get('el');
+
+  it('getCursor and setCursor for canvas should work', () => {
+    canvas.addShape('circle', {
+      attrs: {
+        x: 100,
+        y: 100,
+        r: 50,
+        fill: 'red',
+        cursor: 'pointer',
+      },
+    });
+    canvas.addShape('circle', {
+      attrs: {
+        x: 180,
+        y: 100,
+        r: 50,
+        fill: 'blue',
+        cursor: 'move',
+      },
+    });
+    expect(canvas.getCursor()).eqls('default');
+    expect(canvas.setCursor('crosshair'));
+    expect(canvas.getCursor()).eqls('crosshair');
+    // circle1
+    const { clientX, clientY } = getClientPoint(canvas, 100, 100);
+    simulateMouseEvent(el, 'mousemove', {
+      clientX,
+      clientY,
+    });
+    expect(el.style.cursor).eqls('pointer');
+    // circle2
+    simulateMouseEvent(el, 'mousemove', {
+      clientX: clientX + 80,
+      clientY,
+    });
+    expect(el.style.cursor).eqls('move');
+    // canvas
+    simulateMouseEvent(el, 'mousemove', {
+      clientX: clientX + 200,
+      clientY,
+    });
+    expect(el.style.cursor).eqls('crosshair');
+  });
+});