new anchorStyleFunc for transformer. close #1552

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+### 9.1.0 (2023-05-14)
+
+- New `anchorStyleFunc` for `Konva.Transformer` to customize anchor style
+
 ### 9.0.2 (2023-05-14)
 
 - Better text rendering when it has stroke

src/shapes/Transformer.ts

@@ -59,6 +59,7 @@ var ATTR_CHANGE_LIST = [
   'anchorFillChange',
   'anchorCornerRadiusChange',
   'ignoreStrokeChange',
+  'anchorStyleFuncChange',
 ]
   .map((e) => e + `.${EVENTS_NAME}`)
   .join(' ');
@@ -1134,7 +1135,8 @@ export class Transformer extends Group {
     var padding = this.padding();
 
     var anchorSize = this.anchorSize();
-    this.find('._anchor').forEach((node) => {
+    const anchors = this.find<Rect>('._anchor');
+    anchors.forEach((node) => {
       node.setAttrs({
         width: anchorSize,
         height: anchorSize,
@@ -1216,6 +1218,13 @@ export class Transformer extends Group {
       x: 0,
       y: 0,
     });
+
+    const styleFunc = this.anchorStyleFunc();
+    if (styleFunc) {
+      anchors.forEach((node) => {
+        styleFunc(node);
+      });
+    }
     this.getLayer()?.batchDraw();
   }
   /**
@@ -1299,6 +1308,7 @@ export class Transformer extends Group {
     (oldPos: Vector2d, newPos: Vector2d, e: MouseEvent) => Vector2d,
     this
   >;
+  anchorStyleFunc: GetSet<null | ((Node: Rect) => void), this>;
   shouldOverdrawWholeArea: GetSet<boolean, this>;
   useSingleNodeRotation: GetSet<boolean, this>;
 }
@@ -1740,6 +1750,29 @@ Factory.addGetterSetter(Transformer, 'boundBoxFunc');
  */
 Factory.addGetterSetter(Transformer, 'anchorDragBoundFunc');
 
+/**
+ * get/set styling function for transformer anchors to overwrite default styles
+ * @name Konva.Transformer#anchorStyleFunc
+ * @method
+ * @param {Function} func
+ * @returns {Function}
+ * @example
+ * // get
+ * var anchorStyleFunc = transformer.anchorStyleFunc();
+ *
+ * // set
+ * transformer.anchorStyleFunc(function(anchor) {
+ *  // anchor is a simple Konva.Rect instance
+ *  // it will be executed AFTER all attributes are set, like 'anchorStrokeWidth' or 'anchorFill'
+ *  if (anchor.hasName('.rotater')) {
+ *    // make rotater anchor filled black and looks like a circle
+ *    anchor.fill('black');
+ *    anchor.cornerRadius(anchor.width() / 2);
+ *  }
+ * });
+ */
+Factory.addGetterSetter(Transformer, 'anchorStyleFunc');
+
 /**
  * using this setting you can drag transformer group by dragging empty space between attached nodes
  * shouldOverdrawWholeArea = true may temporary disable all events on attached nodes

test/unit/Transformer-test.ts

@@ -4782,4 +4782,37 @@ describe('Transformer', function () {
     tr.nodes([layer]);
     assert.equal(tr.nodes().length, 0);
   });
+
+  it('anchorStyleFunc', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 100,
+      y: 60,
+      draggable: true,
+      width: 100,
+      height: 100,
+      fill: 'yellow',
+    });
+    layer.add(rect);
+
+    var tr = new Konva.Transformer({
+      nodes: [rect],
+    });
+    layer.add(tr);
+    // manual check of correct position of node
+    var handler = tr.findOne<Konva.Rect>('.bottom-right');
+    assert.equal(handler.fill(), 'white');
+
+    tr.anchorStyleFunc((anchor) => {
+      if (anchor.hasName('bottom-right')) {
+        anchor.fill('red');
+      }
+    });
+    assert.equal(handler.fill(), 'red');
+    tr.anchorStyleFunc(null);
+    assert.equal(handler.fill(), 'white');
+  });
 });