diff --git a/src/Global.ts b/src/Global.ts index e68715df..48e5f686 100644 --- a/src/Global.ts +++ b/src/Global.ts @@ -155,6 +155,9 @@ export const Konva = { isDragging() { return Konva['DD'].isDragging; }, + isTransforming() { + return Konva['Transformer']?.isTransforming(); + }, /** * returns whether or not a drag and drop operation is ready, but may * not necessarily have started diff --git a/src/Node.ts b/src/Node.ts index 1cf0c38d..281601c7 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -1029,7 +1029,10 @@ export abstract class Node { } }); - var dragSkip = !skipDragCheck && !Konva.hitOnDragEnabled && layerUnderDrag; + var dragSkip = + !skipDragCheck && + !Konva.hitOnDragEnabled && + (layerUnderDrag || Konva.isTransforming()); return this.isListening() && this.isVisible() && !dragSkip; } diff --git a/src/Stage.ts b/src/Stage.ts index 4740d796..6b4d8b26 100644 --- a/src/Stage.ts +++ b/src/Stage.ts @@ -507,7 +507,8 @@ export class Stage extends Container { this.setPointersPositions(evt); var targetShape = this._getTargetShape(eventType); - var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled; + var eventsEnabled = + !(Konva.isDragging() || Konva.isTransforming()) || Konva.hitOnDragEnabled; if (targetShape && eventsEnabled) { targetShape._fireAndBubble(events.pointerout, { evt: evt }); targetShape._fireAndBubble(events.pointerleave, { evt: evt }); @@ -590,12 +591,13 @@ export class Stage extends Container { if (!events) { return; } - if (DD.isDragging && DD.node!.preventDefault() && evt.cancelable) { + if (Konva.isDragging() && DD.node!.preventDefault() && evt.cancelable) { evt.preventDefault(); } this.setPointersPositions(evt); - var eventsEnabled = !DD.isDragging || Konva.hitOnDragEnabled; + var eventsEnabled = + !(Konva.isDragging() || Konva.isTransforming()) || Konva.hitOnDragEnabled; if (!eventsEnabled) { return; } diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts index 3585326c..0c979620 100644 --- a/src/shapes/Transformer.ts +++ b/src/shapes/Transformer.ts @@ -203,6 +203,7 @@ function getSnap(snaps: Array, newRotationRad: number, tol: number) { return snapped; } +let activeTransformersCount = 0; /** * Transformer constructor. Transformer is a special type of group that allow you transform Konva * primitives and shapes. Transforming tool is not changing `width` and `height` properties of nodes @@ -244,7 +245,6 @@ function getSnap(snaps: Array, newRotationRad: number, tol: number) { * }); * layer.add(transformer); */ - export class Transformer extends Group { _nodes: Array; _movingAnchorName: string | null = null; @@ -254,6 +254,10 @@ export class Transformer extends Group { cos: number; _cursorChange: boolean; + static isTransforming = () => { + return activeTransformersCount > 0; + }; + constructor(config?: TransformerConfig) { // call super constructor super(config); @@ -690,6 +694,7 @@ export class Transformer extends Group { x: pos.x - ap.x, y: pos.y - ap.y, }; + activeTransformersCount++; this._fire('transformstart', { evt: e.evt, target: this.getNode() }); this._nodes.forEach((target) => { target._fire('transformstart', { evt: e.evt, target }); @@ -955,6 +960,7 @@ export class Transformer extends Group { window.removeEventListener('touchend', this._handleMouseUp, true); } var node = this.getNode(); + activeTransformersCount--; this._fire('transformend', { evt: e, target: node }); if (node) { diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts index 4d1ef829..af3321a9 100644 --- a/test/unit/Transformer-test.ts +++ b/test/unit/Transformer-test.ts @@ -4967,40 +4967,46 @@ describe('Transformer', function () { simulateMouseUp(tr, { x: 110, y: 2 }); }); - // it('skip render on hit graph while transforming', function () { - // var stage = addStage(); - // var layer = new Konva.Layer(); - // stage.add(layer); + it('skip render on hit graph while transforming', function () { + var stage = addStage(); + var layer = new Konva.Layer(); + stage.add(layer); - // var rect = new Konva.Rect({ - // x: 55, - // y: 55, - // draggable: true, - // width: 100, - // height: 100, - // fill: 'yellow', - // }); - // layer.add(rect); + var rect = new Konva.Rect({ + x: 55, + y: 55, + draggable: true, + width: 100, + height: 100, + fill: 'yellow', + }); + layer.add(rect); - // var tr = new Konva.Transformer({ - // nodes: [rect], - // }); - // layer.add(tr); - // layer.draw(); + var tr = new Konva.Transformer({ + nodes: [rect], + }); + layer.add(tr); + layer.draw(); - // simulateMouseDown(tr, { - // x: 100, - // y: 2, - // }); - // simulateMouseMove(tr, { - // x: 110, - // y: 2, - // }); - // const shape = layer.getIntersection({ - // x: 100, - // y: 100, - // }); - // assert.equal(shape, null); - // simulateMouseUp(tr, { x: 110, y: 2 }); - // }); + simulateMouseDown(tr, { + x: 100, + y: 2, + }); + simulateMouseMove(tr, { + x: 110, + y: 2, + }); + let shape = layer.getIntersection({ + x: 100, + y: 100, + }); + assert.equal(shape, null); + simulateMouseUp(tr, { x: 110, y: 2 }); + layer.draw(); + shape = layer.getIntersection({ + x: 100, + y: 100, + }); + assert.equal(shape, rect); + }); });