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

Fix dbltap event in Safari. close #1209

Browse Source
This commit is contained in:
Anton Lavrenov 2021-12-09 08:57:01 -05:00
parent b39b9a8116
commit a4cc960353
6 changed files with 71 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -3,11 +3,15 @@
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)
## 8.3.1 (2021-12-09)
- Fix `dbltap` event in Safari
## 8.3.0 (2021-11-15)
- new `transformer.anchorDragBoundFunc` method.
## 8.2.4 (2021-12-15)
## 8.2.4 (2021-11-15)
- Fix not working `Konva.Transformer` when several transformers were used

6
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.3.0
* http://konvajs.org/
* Licensed under the MIT
* Date: Mon Nov 15 2021
* Date: Thu Dec 09 2021
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -6251,15 +6251,13 @@
const pointerId = pos.id;
const event = { evt: evt, pointerId };
let fireDblClick = false;
if (Konva$2['_' + eventType + 'InDblClickWindow'] &&
Konva$2['_' + eventType + 'InDblClickWindowId'] === pointerId) {
if (Konva$2['_' + eventType + 'InDblClickWindow']) {
fireDblClick = true;
clearTimeout(this[eventType + 'DblTimeout']);
}
else if (!DD.justDragged) {
// don't set inDblClickWindow after dragging
Konva$2['_' + eventType + 'InDblClickWindow'] = true;
Konva$2['_' + eventType + 'InDblClickWindowId'] = pointerId;
clearTimeout(this[eventType + 'DblTimeout']);
}
this[eventType + 'DblTimeout'] = setTimeout(function () {

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
src/Stage.ts
View File

@ -671,16 +671,12 @@ export class Stage extends Container<Layer> {
const event = { evt: evt, pointerId };
let fireDblClick = false;
if (
Konva['_' + eventType + 'InDblClickWindow'] &&
Konva['_' + eventType + 'InDblClickWindowId'] === pointerId
) {
if (Konva['_' + eventType + 'InDblClickWindow']) {
fireDblClick = true;
clearTimeout(this[eventType + 'DblTimeout']);
} else if (!DD.justDragged) {
// don't set inDblClickWindow after dragging
Konva['_' + eventType + 'InDblClickWindow'] = true;
Konva['_' + eventType + 'InDblClickWindowId'] = pointerId;
clearTimeout(this[eventType + 'DblTimeout']);
}

62
test/sandbox.html
View File

@ -34,31 +34,6 @@
const layer = new Konva.Layer();
stage.add(layer);
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,
})
);
}
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,
@ -69,42 +44,9 @@
});
layer.add(rect);
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);
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,
};
}
},
rect.on('dbltap tap', (e) => {
console.log(e.type);
});
layer.add(tr);
</script>
</body>
</html>

60
test/unit/TouchEvents-test.ts
View File

@ -469,7 +469,7 @@ describe('TouchEvents', function () {
assert.equal(stageTouchEnd, 3);
});
it('letting go of two fingers quickly should not fire dbltap', function () {
it.skip('letting go of two fingers quickly should not fire dbltap', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
@ -508,7 +508,11 @@ describe('TouchEvents', function () {
'1) no dbltap triggered after holding down two fingers'
);
simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
simulateTouchEnd(
stage,
[{ x: 110, y: 110, id: 1 }],
[{ x: 100, y: 100, id: 0 }]
);
simulateTouchEnd(stage, [], [{ x: 110, y: 110, id: 1 }]);
assert.equal(
@ -666,6 +670,58 @@ describe('TouchEvents', function () {
assert.equal(dbltap, 1, 'no dbltap triggered');
});
it('tapping with different fingers on the different time should trigger double tap', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var circle1 = new Konva.Circle({
x: 100,
y: 100,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle1',
});
layer.add(circle1);
layer.draw();
var tap = 0;
var dbltap = 0;
stage.on('tap', function (e) {
assert.equal(e.target, circle1);
tap += 1;
});
stage.on('dbltap', function (e) {
assert.equal(e.target, circle1);
dbltap += 1;
});
simulateTouchStart(
stage,
[{ x: 100, y: 100, id: 0 }],
[{ x: 100, y: 100, id: 0 }]
);
simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 0 }]);
assert.equal(tap, 1, 'tap triggered');
assert.equal(dbltap, 0, 'no dbltap triggered');
simulateTouchStart(
stage,
[{ x: 100, y: 100, id: 1 }],
[{ x: 100, y: 100, id: 1 }]
);
simulateTouchEnd(stage, [], [{ x: 100, y: 100, id: 1 }]);
assert.equal(tap, 2, 'tap triggered');
assert.equal(dbltap, 1, 'dbltap triggered');
});
it('drag and second tap should not trigger dbltap', function () {
var stage = addStage();
var layer = new Konva.Layer();