feat(brush): user can provide cursor style. close #13712

src/component/brush/BrushModel.ts

@@ -31,6 +31,8 @@ import {
 import { ModelFinderObject } from '../../util/model';
 
 const DEFAULT_OUT_OF_BRUSH_COLOR = '#ddd';
+const DEFAULT_OUT_OF_BRUSH_CURSOR = 'crosshair';
+const DEFAULT_BRUSH_IN_CURSOR = 'move';
 
 /**
  * The input to define brush areas.
@@ -134,6 +136,12 @@ class BrushModel extends ComponentModel<BrushOption> {
         brushType: 'rect',
         brushMode: 'single',
         transformable: true,
+        inBrush: {
+            cursor: DEFAULT_BRUSH_IN_CURSOR
+        },
+        outOfBrush: {
+            cursor: DEFAULT_OUT_OF_BRUSH_CURSOR
+        },
         brushStyle: {
             borderWidth: 1,
             color: 'rgba(210,219,238,0.3)',
@@ -177,7 +185,10 @@ class BrushModel extends ComponentModel<BrushOption> {
 
         const inBrush = thisOption.inBrush = thisOption.inBrush || {};
         // Always give default visual, consider setOption at the second time.
-        thisOption.outOfBrush = thisOption.outOfBrush || {color: DEFAULT_OUT_OF_BRUSH_COLOR};
+        thisOption.outOfBrush = thisOption.outOfBrush || {
+            color: DEFAULT_OUT_OF_BRUSH_COLOR,
+            cursor: DEFAULT_OUT_OF_BRUSH_CURSOR
+        };
 
         if (!inBrush.hasOwnProperty('liftZ')) {
             // Bigger than the highlight z lift, otherwise it will
@@ -234,6 +245,8 @@ function generateBrushOption(
             brushType: option.brushType,
             brushMode: option.brushMode,
             transformable: option.transformable,
+            outOfBrushCursor: option.outOfBrush.cursor,
+            inBrushCursor: option.inBrush.cursor,
             brushStyle: new Model(option.brushStyle).getItemStyle(),
             removeOnClick: option.removeOnClick,
             z: option.z

src/component/helper/BrushController.ts

@@ -76,6 +76,11 @@ export interface BrushCoverConfig {
     transformable?: boolean;
     removeOnClick?: boolean;
     z?: number;
+
+    // Cursor style when mouse is outside the brush
+    outOfBrushCursor?: string;
+    // Cursor style when mouse is inside the brush
+    inBrushCursor?: string;
 }
 
 /**
@@ -84,7 +89,7 @@ export interface BrushCoverConfig {
  */
 export interface BrushCoverCreatorConfig extends Pick<
     BrushCoverConfig,
-    'brushMode' | 'transformable' | 'removeOnClick' | 'brushStyle' | 'z'
+    'brushMode' | 'transformable' | 'removeOnClick' | 'brushStyle' | 'z' | 'outOfBrushCursor' | 'inBrushCursor'
 > {
     brushType: BrushTypeUncertain;
 }
@@ -153,6 +158,8 @@ const CURSOR_MAP = {
     se: 'nwse'
 } as const;
 const DEFAULT_BRUSH_OPT = {
+    outOfBrushCursor: 'crosshair',
+    inBrushCursor: 'move',
     brushStyle: {
         lineWidth: 2,
         stroke: 'rgba(210,219,238,0.3)',
@@ -602,7 +609,7 @@ function createBaseRectCover(
         style: makeStyle(brushOption),
         silent: true,
         draggable: true,
-        cursor: 'move',
+        cursor: brushOption.inBrushCursor,
         drift: curry(driftRect, rectRangeConverter, controller, cover, ['n', 's', 'w', 'e']),
         ondragend: curry(trigger, controller, {isEnd: true})
     }));
@@ -669,7 +676,7 @@ function updateCommon(controller: BrushController, cover: BrushCover): void {
     mainEl.useStyle(makeStyle(brushOption));
     mainEl.attr({
         silent: !transformable,
-        cursor: transformable ? 'move' : 'default'
+        cursor: transformable ? cover.__brushOption.inBrushCursor : 'default'
     });
 
     each(
@@ -849,7 +856,7 @@ function resetCursor(
         }
     }
 
-    currPanel && zr.setCursorStyle('crosshair');
+    currPanel && zr.setCursorStyle(controller._brushOption.outOfBrushCursor);
 }
 
 function preventDefault(e: ElementEvent): void {

src/util/types.ts

@@ -1002,6 +1002,7 @@ export interface VisualOptionUnit {
     colorSaturation?: number
     colorHue?: number
     decal?: DecalObject
+    cursor?: string,
 
     // Not exposed?
     liftZ?: number

src/visual/VisualMapping.ts

@@ -335,6 +335,25 @@ class VisualMapping<VisualOption
         symbolSize: {
             applyVisual: makeApplyVisual('symbolSize'),
             _normalizedToVisual: createNormalizedToNumericVisual([0, 1])
+        },
+
+        cursor: {
+            applyVisual: function (value, getter, setter) {
+                const symbolCfg = this.mapValueToVisual(value);
+                setter('symbol', symbolCfg as string);
+            },
+            _normalizedToVisual: {
+                linear: doMapToArray,
+                category: doMapCategory,
+                piecewise: function (normalized, value) {
+                    let result = getSpecifiedVisual.call(this, value);
+                    if (result == null) {
+                        result = doMapToArray.call(this, normalized);
+                    }
+                    return result;
+                },
+                fixed: doMapFixed
+            }
         }
     };