lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 04:42:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added modifier for shift behavior while transforming

Browse Source
This commit is contained in:
Pranav Dudhane 2022-11-17 15:41:42 +05:30 committed by GitHub
parent 763a7be0f9
commit 6c16ce2809
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/shapes/Transformer.ts
View File

@ -31,6 +31,7 @@ export interface TransformerConfig extends ContainerConfig {
anchorSize?: number; anchorSize?: number;
anchorCornerRadius?: number; anchorCornerRadius?: number;
keepRatio?: boolean; keepRatio?: boolean;
shiftBehavior?: string;
centeredScaling?: boolean; centeredScaling?: boolean;
enabledAnchors?: Array<string>; enabledAnchors?: Array<string>;
flipEnabled?: boolean; 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.anchorStrokeWidth] Anchor stroke size
* @param {Number} [config.anchorSize] Default is 10 * @param {Number} [config.anchorSize] Default is 10
* @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true * @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 {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 {Array} [config.enabledAnchors] Array of names of enabled handles
* @param {Boolean} [config.flipEnabled] Can we flip/mirror shape on transform?. True by default * @param {Boolean} [config.flipEnabled] Can we flip/mirror shape on transform?. True by default
@ -706,7 +708,17 @@ export class Transformer extends Group {
return; 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; var centeredScaling = this.centeredScaling() || e.altKey;
if (this._movingAnchorName === 'top-left') { if (this._movingAnchorName === 'top-left') {
@ -1247,6 +1259,7 @@ export class Transformer extends Group {
anchorCornerRadius: GetSet<number, this>; anchorCornerRadius: GetSet<number, this>;
anchorStrokeWidth: GetSet<number, this>; anchorStrokeWidth: GetSet<number, this>;
keepRatio: GetSet<boolean, this>; keepRatio: GetSet<boolean, this>;
shiftBehavior: GetSet<string, this>;
centeredScaling: GetSet<boolean, this>; centeredScaling: GetSet<boolean, this>;
flipEnabled: GetSet<boolean, this>; flipEnabled: GetSet<boolean, this>;
ignoreStroke: GetSet<boolean, this>; ignoreStroke: GetSet<boolean, this>;
@ -1570,6 +1583,21 @@ Factory.addGetterSetter(Transformer, 'borderDash');
*/ */
Factory.addGetterSetter(Transformer, 'keepRatio', true); 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? * get/set should we resize relative to node's center?
* @name Konva.Transformer#centeredScaling * @name Konva.Transformer#centeredScaling