update CHANGELOG with new version

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/).
 
+## 8.3.0 (2021-12-15)
+
+- new `transformer.anchorDragBoundFunc` method.
+
 ## 8.2.4 (2021-12-15)
 
 - Fix not working `Konva.Transformer` when several transformers were used

konva.js

@@ -14977,13 +14977,17 @@
           var stage = anchorNode.getStage();
           stage.setPointersPositions(e);
           const pp = stage.getPointerPosition();
-          var newNodePos = {
+          let newNodePos = {
               x: pp.x - this._anchorDragOffset.x,
               y: pp.y - this._anchorDragOffset.y,
           };
           const oldAbs = anchorNode.getAbsolutePosition();
+          if (this.anchorDragBoundFunc()) {
+              newNodePos = this.anchorDragBoundFunc()(oldAbs, newNodePos, e);
+          }
           anchorNode.setAbsolutePosition(newNodePos);
           const newAbs = anchorNode.getAbsolutePosition();
+          // console.log(oldAbs, newNodePos, newAbs);
           if (oldAbs.x === newAbs.x && oldAbs.y === newAbs.y) {
               return;
           }
@@ -15792,6 +15796,25 @@
    * });
    */
   Factory.addGetterSetter(Transformer, 'boundBoxFunc');
+  /**
+   * get/set dragging func for transformer anchors
+   * @name Konva.Transformer#anchorDragBoundFunc
+   * @method
+   * @param {Function} func
+   * @returns {Function}
+   * @example
+   * // get
+   * var anchorDragBoundFunc = transformer.anchorDragBoundFunc();
+   *
+   * // set
+   * transformer.anchorDragBoundFunc(function(oldAbsPos, newAbsPos, event) {
+   *  return {
+   *   x: 0,
+   *   y: newAbsolutePosition.y
+   *  }
+   * });
+   */
+  Factory.addGetterSetter(Transformer, 'anchorDragBoundFunc');
   /**
    * 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

src/shapes/Transformer.ts

@@ -662,14 +662,20 @@ export class Transformer extends Group {
     stage.setPointersPositions(e);
 
     const pp = stage.getPointerPosition();
-    var newNodePos = {
+    let newNodePos = {
       x: pp.x - this._anchorDragOffset.x,
       y: pp.y - this._anchorDragOffset.y,
     };
     const oldAbs = anchorNode.getAbsolutePosition();
+
+    if (this.anchorDragBoundFunc()) {
+      newNodePos = this.anchorDragBoundFunc()(oldAbs, newNodePos, e);
+    }
     anchorNode.setAbsolutePosition(newNodePos);
     const newAbs = anchorNode.getAbsolutePosition();
 
+    // console.log(oldAbs, newNodePos, newAbs);
+
     if (oldAbs.x === newAbs.x && oldAbs.y === newAbs.y) {
       return;
     }
@@ -1235,6 +1241,10 @@ export class Transformer extends Group {
   flipEnabled: GetSet<boolean, this>;
   ignoreStroke: GetSet<boolean, this>;
   boundBoxFunc: GetSet<(oldBox: Box, newBox: Box) => Box, this>;
+  anchorDragBoundFunc: GetSet<
+    (oldPos: Vector2d, newPos: Vector2d, e: MouseEvent) => Box,
+    this
+  >;
   shouldOverdrawWholeArea: GetSet<boolean, this>;
   useSingleNodeRotation: GetSet<boolean, this>;
 }
@@ -1641,6 +1651,26 @@ Factory.addGetterSetter(Transformer, 'nodes');
  */
 Factory.addGetterSetter(Transformer, 'boundBoxFunc');
 
+/**
+ * get/set dragging func for transformer anchors
+ * @name Konva.Transformer#anchorDragBoundFunc
+ * @method
+ * @param {Function} func
+ * @returns {Function}
+ * @example
+ * // get
+ * var anchorDragBoundFunc = transformer.anchorDragBoundFunc();
+ *
+ * // set
+ * transformer.anchorDragBoundFunc(function(oldAbsPos, newAbsPos, event) {
+ *  return {
+ *   x: 0,
+ *   y: newAbsolutePosition.y
+ *  }
+ * });
+ */
+Factory.addGetterSetter(Transformer, 'anchorDragBoundFunc');
+
 /**
  * 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/sandbox.html

@@ -34,41 +34,77 @@
       const layer = new Konva.Layer();
       stage.add(layer);
 
-      for (var i = 0; i < 1; i++) {
-        const group = new Konva.Group();
-        layer.add(group);
-        for (var j = 0; j < 1; j++) {
-          const shape = new Konva.Circle({
-            x: stage.width() / 2,
-            y: stage.height() / 2,
-            radius: 50,
-            fill: 'green',
-          });
-          group.add(shape);
-        }
+      const cellWidth = stage.width() / 10;
+      const cellHeight = stage.width() / 10;
+
+      for (var i = 0; i < 10; i++) {
+        layer.add(
+          new Konva.Line({
+            x: i * cellWidth,
+            points: [0, 0, 0, stage.height()],
+            stroke: 'black',
+            strokeWidth: 1,
+          })
+        );
       }
 
-      stage.on('click', () => {
-        console.time('rect');
-        for (var i = 0; i < 50; i++) {
-          stage.getClientRect();
-        }
-        console.timeEnd('rect');
-        console.log('click');
+      for (var i = 0; i < 10; i++) {
+        layer.add(
+          new Konva.Line({
+            y: i * cellHeight,
+            points: [0, 0, stage.width(), 0],
+            stroke: 'black',
+            strokeWidth: 1,
+          })
+        );
+      }
+
+      const rect = new Konva.Rect({
+        x: 90,
+        y: 90,
+        width: 100,
+        height: 100,
+        fill: 'red',
+        draggable: true,
       });
+      layer.add(rect);
 
-      // document.querySelector('canvas').addEventListener('pointerdown', (e) => {
-      //   e.target.setPointerCapture(e.pointerId);
-      // });
+      const tr = new Konva.Transformer({
+        nodes: [rect],
+        anchorDragBoundFunc: function (oldPos, pos, event) {
+          const closestX = Math.round(pos.x / cellWidth) * cellWidth;
+          const diffX = Math.abs(pos.x - closestX);
 
-      stage.on('pointerup', () => {
-        console.log('stage pointer up');
+          const closestY = Math.round(pos.y / cellHeight) * cellHeight;
+          const diffY = Math.abs(pos.y - closestY);
+
+          const snappedX = diffX < 10;
+          const snappedY = diffY < 10;
+
+          if (snappedX && !snappedY) {
+            return {
+              x: closestX,
+              y: oldPos.y,
+            };
+          } else if (snappedY && !snappedX) {
+            return {
+              x: oldPos.x,
+              y: closestY,
+            };
+          } else if (snappedX && snappedY) {
+            return {
+              x: closestX,
+              y: closestY,
+            };
+          } else {
+            return {
+              x: pos.x,
+              y: pos.y,
+            };
+          }
+        },
       });
-      window.onpointerup = () => {
-        console.log('window pointer up');
-      };
-
-      window.stage = stage;
+      layer.add(tr);
     </script>
   </body>
 </html>