Custom transformer rotate cursor.

Add tests for and ability to change rotate anchor cursor for transformer
konvajs · Jul 6, 2023 · 5d506ad · 5d506ad
1 parent c1ba974
commit 5d506ad
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 3 deletions.
diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
@@ -21,6 +21,7 @@ export interface TransformerConfig extends ContainerConfig {
   rotationSnaps?: Array<number>;
   rotationSnapTolerance?: number;
   rotateAnchorOffset?: number;
+  rotateAnchorCursor?: string,
   borderEnabled?: boolean;
   borderStroke?: string;
   borderStrokeWidth?: number;
@@ -93,9 +94,9 @@ var ANGLES = {
 
 const TOUCH_DEVICE = 'ontouchstart' in Konva._global;
 
-function getCursor(anchorName, rad) {
+function getCursor(anchorName, rad, rotateCursor) {
   if (anchorName === 'rotater') {
-    return 'crosshair';
+    return rotateCursor;
   }
 
   rad += Util.degToRad(ANGLES[anchorName] || 0);
@@ -207,6 +208,7 @@ function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
  * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is []
  * @param {Number} [config.rotationSnapTolerance] Snapping tolerance. If closer than this it will snap. Default is 5
  * @param {Number} [config.rotateAnchorOffset] Default is 50
+ * @param {String} [config.rotateAnchorCursor] Default is crosshair
  * @param {Number} [config.padding] Default is 0
  * @param {Boolean} [config.borderEnabled] Should we draw border? Default is true
  * @param {String} [config.borderStroke] Border stroke color
@@ -581,7 +583,8 @@ export class Transformer extends Group {
     // add hover styling
     anchor.on('mouseenter', () => {
       var rad = Konva.getAngle(this.rotation());
-      var cursor = getCursor(name, rad);
+      var rotateCursor = this.rotateAnchorCursor();
+      var cursor = getCursor(name, rad, rotateCursor);
       anchor.getStage().content &&
         (anchor.getStage().content.style.cursor = cursor);
       this._cursorChange = true;
@@ -1289,6 +1292,7 @@ export class Transformer extends Group {
   rotateEnabled: GetSet<boolean, this>;
   rotateAnchorOffset: GetSet<number, this>;
   rotationSnapTolerance: GetSet<number, this>;
+  rotateAnchorCursor: GetSet<string, this>;
   padding: GetSet<number, this>;
   borderEnabled: GetSet<boolean, this>;
   borderStroke: GetSet<string, this>;
@@ -1454,6 +1458,21 @@ Factory.addGetterSetter(
   getNumberValidator()
 );
 
+/**
+ * get/set rotation anchor cursor
+ * @name Konva.Transformer#rotateAnchorCursor
+ * @method
+ * @param {String} cursorName
+ * @returns {String}
+ * @example
+ * // get
+ * var currentRotationAnchorCursor = transformer.rotateAnchorCursor();
+ *
+ * // set
+ * transformer.rotateAnchorCursor('grab');
+ */
+Factory.addGetterSetter(Transformer, 'rotateAnchorCursor', 'crosshair');
+
 /**
  * get/set distance for rotation tolerance
  * @name Konva.Transformer#rotationSnapTolerance

diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts
@@ -2334,6 +2334,69 @@ describe('Transformer', function () {
     assert.equal(stage.content.style.cursor, 'nwse-resize');
   });
 
+  it('check default cursor transformer', function () {
+    if (isNode) {
+      return;
+    }
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect]
+    });
+    layer.add(tr);
+    layer.draw();
+
+    sm(stage, {
+      x: 100,
+      y: 0,
+    });
+    assert.equal(stage.content.style.cursor, 'crosshair');
+  });
+
+  it('using custom cursor on configured transformer should show custom cursor instead of crosshair', function () {
+    if (isNode) {
+      return;
+    }
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect],
+      rotateAnchorCursor: 'grab'
+    });
+    layer.add(tr);
+    layer.draw();
+
+    sm(stage, {
+      x: 100,
+      y: 0,
+    });
+    assert.equal(stage.content.style.cursor, 'grab');
+  });
+
   it('changing parent transform should recalculate transformer attrs', function () {
     var stage = addStage();
     var layer = new Konva.Layer();