lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 13:26:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

New property useSingleNodeRotation for Konva.Transformer

Browse Source
This commit is contained in:
Anton Lavrenov
2021-06-29 11:44:22 +07:00
parent 0236496cd7
commit 51371a8140
4 changed files with 76 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Shape.ts
View File

@@ -199,12 +199,12 @@ export class Shape<
getContext() {
Util.warn(
'shape.getContext() method is deprecated. Please don not use it.'
'shape.getContext() method is deprecated. Please do not use it.'
);
return this.getLayer().getContext();
}
getCanvas() {
Util.warn('shape.getCanvas() method is deprecated. Please don not use it.');
Util.warn('shape.getCanvas() method is deprecated. Please do not use it.');
return this.getLayer().getCanvas();
}

42
src/shapes/Transformer.ts
View File

@@ -37,6 +37,8 @@ export interface TransformerConfig extends ContainerConfig {
node?: Rect;
ignoreStroke?: boolean;
boundBoxFunc?: (oldBox: Box, newBox: Box) => Box;
useSingleNodeRotation?: boolean;
shouldOverdrawWholeArea?: boolean;
}
var EVENTS_NAME = 'tr-konva';
@@ -221,7 +223,8 @@ function getSnap(snaps: Array<number>, newRotationRad: number, tol: number) {
* @param {Boolean} [config.flipEnabled] Can we flip/mirror shape on transform?. True by default
* @param {Function} [config.boundBoxFunc] Bounding box function
* @param {Function} [config.ignoreStroke] Should we ignore stroke size? Default is false
*
* @param {Boolean} [config.useSingleNodeRotation] When just one node attached, should we use its rotation for transformer?
* @param {Boolean} [config.shouldOverdrawWholeArea] Should we fill whole transformer area with fake transparent shape to enable dragging from empty spaces?
* @example
* var transformer = new Konva.Transformer({
* nodes: [rectangle],
@@ -284,7 +287,7 @@ export class Transformer extends Group {
this.detach();
}
this._nodes = nodes;
if (nodes.length === 1) {
if (nodes.length === 1 && this.useSingleNodeRotation()) {
this.rotation(nodes[0].getAbsoluteRotation());
} else {
this.rotation(0);
@@ -295,8 +298,7 @@ export class Transformer extends Group {
.join(' ');
const onChange = () => {
//
if (this.nodes().length === 1) {
if (this.nodes().length === 1 && this.useSingleNodeRotation()) {
this.rotation(this.nodes()[0].getAbsoluteRotation());
}
@@ -1225,6 +1227,7 @@ export class Transformer extends Group {
ignoreStroke: GetSet<boolean, this>;
boundBoxFunc: GetSet<(oldBox: Box, newBox: Box) => Box, this>;
shouldOverdrawWholeArea: GetSet<boolean, this>;
useSingleNodeRotation: GetSet<boolean, this>;
}
function validateAnchors(val) {
@@ -1629,8 +1632,39 @@ Factory.addGetterSetter(Transformer, 'nodes');
*/
Factory.addGetterSetter(Transformer, 'boundBoxFunc');
/**
* 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
* @name Konva.Transformer#shouldOverdrawWholeArea
* @method
* @param {Boolean} shouldOverdrawWholeArea
* @returns {Boolean}
* @example
* // get
* var shouldOverdrawWholeArea = transformer.shouldOverdrawWholeArea();
*
* // set
* transformer.shouldOverdrawWholeArea(true);
*/
Factory.addGetterSetter(Transformer, 'shouldOverdrawWholeArea', false);
/**
* If you have just one attached node to Transformer it will set its initial rotation to the rotation of that node.
* In some cases you may need to set a different rotation.
* @name Konva.Transformer#useSingleNodeRotation
* @method
* @param {Boolean} useSingleNodeRotation
* @returns {Boolean}
* @example
* // set flag to false
* transformer.useSingleNodeRotation(false);
* // attach a shape
* transformer.nodes([shape]);
* transformer.rotation(45);
* transformer.update();
*/
Factory.addGetterSetter(Transformer, 'useSingleNodeRotation', true);
Factory.backCompat(Transformer, {
lineEnabled: 'borderEnabled',
rotateHandlerOffset: 'rotateAnchorOffset',