From 6c16ce28092e7af1b698bd86cc4ae1753c026afa Mon Sep 17 00:00:00 2001
From: Pranav Dudhane <pranavsd152@gmail.com>
Date: Thu, 17 Nov 2022 15:41:42 +0530
Subject: [PATCH] Added modifier for shift behavior while transforming

---
 src/shapes/Transformer.ts | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts
index 51a0224b..0bb489a1 100644
--- a/src/shapes/Transformer.ts
+++ b/src/shapes/Transformer.ts
@@ -31,6 +31,7 @@ export interface TransformerConfig extends ContainerConfig {
   anchorSize?: number;
   anchorCornerRadius?: number;
   keepRatio?: boolean;
+  shiftBehavior?: string;
   centeredScaling?: boolean;
   enabledAnchors?: Array<string>;
   flipEnabled?: boolean;
@@ -216,6 +217,7 @@ function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
  * @param {Number} [config.anchorStrokeWidth] Anchor stroke size
  * @param {Number} [config.anchorSize] Default is 10
  * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
+ * @param {String} [config.shiftBehavior] How does transformer react on shift key press when we are moving edges? Default is "default"
  * @param {Boolean} [config.centeredScaling] Should we resize relative to node's center? Default is false
  * @param {Array} [config.enabledAnchors] Array of names of enabled handles
  * @param {Boolean} [config.flipEnabled] Can we flip/mirror shape on transform?. True by default
@@ -706,7 +708,17 @@ export class Transformer extends Group {
       return;
     }
 
-    var keepProportion = this.keepRatio() || e.shiftKey;
+    var keepProportions;
+    switch(this.shiftBehavior) {
+      case 'inverted':
+          keepProportions = this.keepRatio() && !e.shiftKey;
+      case 'none':
+          keepProportions = this.keepRatio();
+      default:
+          keepProportions = this.keepRatio() || e.shiftKey;
+          break;
+    }
+    
     var centeredScaling = this.centeredScaling() || e.altKey;
 
     if (this._movingAnchorName === 'top-left') {
@@ -1247,6 +1259,7 @@ export class Transformer extends Group {
   anchorCornerRadius: GetSet<number, this>;
   anchorStrokeWidth: GetSet<number, this>;
   keepRatio: GetSet<boolean, this>;
+  shiftBehavior: GetSet<string, this>;
   centeredScaling: GetSet<boolean, this>;
   flipEnabled: GetSet<boolean, this>;
   ignoreStroke: GetSet<boolean, this>;
@@ -1570,6 +1583,21 @@ Factory.addGetterSetter(Transformer, 'borderDash');
  */
 Factory.addGetterSetter(Transformer, 'keepRatio', true);
 
+/**
+ * get/set how to react on skift key while resizing anchors at corners
+ * @name Konva.Transformer#shiftBehavior
+ * @method
+ * @param {String} shiftBehavior
+ * @returns {String}
+ * @example
+ * // get
+ * var shiftBehavior = transformer.shiftBehavior();
+ *
+ * // set
+ * transformer.shiftBehavior("none");
+ */
+Factory.addGetterSetter(Transformer, 'shiftBehavior', "default");
+
 /**
  * get/set should we resize relative to node's center?
  * @name Konva.Transformer#centeredScaling