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 some event behaviour

Browse Source
This commit is contained in:
Anton Lavrenov 2018-05-07 11:57:10 +09:00
parent 3e9d9b4f18
commit 566dd7e2f0
5 changed files with 163 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.0.3
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Fri May 04 2018
* Date: Mon May 07 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -10636,6 +10636,7 @@
} else if (!dd || !dd.justDragged) {
// don't set inDblClickWindow after dragging
Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout);
} else if (dd) {
dd.justDragged = false;
}
@ -10743,6 +10744,7 @@
// Konva.inDblClickWindow = false;
} else {
Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout);
}
this.dblTimeout = setTimeout(function() {
@ -18706,7 +18708,6 @@
* primitives and shapes.
* @constructor
* @memberof Konva
* @augments Konva.Container
* @param {Object} config
* @param {Boolean} [config.resizeEnabled] Default is true
* @param {Boolean} [config.rotateEnabled] Default is true
@ -18716,33 +18717,6 @@
* @param {Number} [config.lineEnabled] Should we draw border? Default is true
* @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
* @param {Array} [config.enabledHandlers] Array of names of enabled handles
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Boolean} [config.visible]
* @param {Boolean} [config.listening] whether or not the node is listening for events
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @param {Object} [config.scale] set scale
* @param {Number} [config.scaleX] set scale x
* @param {Number} [config.scaleY] set scale y
* @param {Number} [config.rotation] rotation in degrees
* @param {Object} [config.offset] offset from center point and rotation point
* @param {Number} [config.offsetX] set offset x
* @param {Number} [config.offsetY] set offset y
* @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop
* the entire stage by dragging any portion of the stage
* @param {Number} [config.dragDistance]
* @param {Function} [config.dragBoundFunc]
* * @param {Object} [config.clip] set clip
* @param {Number} [config.clipX] set clip x
* @param {Number} [config.clipY] set clip y
* @param {Number} [config.clipWidth] set clip width
* @param {Number} [config.clipHeight] set clip height
* @param {Function} [config.clipFunc] set clip func
* @example
* var transformer = new Konva.Transformer({
* node: rectangle,
@ -18801,6 +18775,14 @@
this.setNode(node);
},
/**
* attach transformer to a Konva.Node. Transformer will adapt it its size and listed events
* @method
* @memberof Konva.Transformer.prototype
* @returns {Konva.Transformer}
* @example
* transformer.attachTo(shape);
*/
setNode: function(node) {
if (this._node) {
this.detach();
@ -18816,19 +18798,27 @@
this._clearSelfAndDescendantCache('absoluteTransform');
}.bind(this)
);
// node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
// node.on('dragmove.resizer', this.requestUpdate.bind(this));
// TODO: why do we need this?
var elementsCreated = !!this.findOne('.top-left');
if (elementsCreated) {
this.update();
}
return this;
},
getNode: function() {
return this._node;
},
/**
* detach transformer from a attached node
* @method
* @memberof Konva.Transformer.prototype
* @returns {Konva.Transformer}
* @example
* transformer.detach();
*/
detach: function() {
if (this.getNode()) {
this.getNode().off('.resizer');
@ -19245,21 +19235,9 @@
this.update();
this.getLayer().batchDraw();
},
requestUpdate: function() {
if (this.timeout) {
return;
}
this.timeout = setTimeout(
function() {
this.timeout = null;
this.update();
}.bind(this)
);
},
/**
* force update of Transformer
* force update of Konva.Transformer.
* Use it when you updated attached Konva.Group and now you need to reset transformer size
* @method
* @memberof Konva.Transformer.prototype
*/
@ -19329,9 +19307,21 @@
visible: this.lineEnabled()
});
},
/**
* determine if transformer is in active transform
* @method
* @memberof Konva.Transformer.prototype
* @returns {Boolean}
*/
isTransforming: function() {
return this._transforming;
},
/**
* Stop active transform action
* @method
* @memberof Konva.Transformer.prototype
* @returns {Boolean}
*/
stopTransform: function() {
if (this._transforming) {
this._removeEvents();

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/Stage.js
View File

@ -539,6 +539,7 @@
} else if (!dd || !dd.justDragged) {
// don't set inDblClickWindow after dragging
Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout);
} else if (dd) {
dd.justDragged = false;
}
@ -646,6 +647,7 @@
// Konva.inDblClickWindow = false;
} else {
Konva.inDblClickWindow = true;
clearTimeout(this.dblTimeout);
}
this.dblTimeout = setTimeout(function() {

51
src/shapes/Transformer.js
View File

@ -84,7 +84,6 @@
* primitives and shapes.
* @constructor
* @memberof Konva
* @augments Konva.Container
* @param {Object} config
* @param {Boolean} [config.resizeEnabled] Default is true
* @param {Boolean} [config.rotateEnabled] Default is true
@ -94,8 +93,6 @@
* @param {Number} [config.lineEnabled] Should we draw border? Default is true
* @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true
* @param {Array} [config.enabledHandlers] Array of names of enabled handles
* @@nodeParams
* @@containerParams
* @example
* var transformer = new Konva.Transformer({
* node: rectangle,
@ -154,6 +151,14 @@
this.setNode(node);
},
/**
* attach transformer to a Konva.Node. Transformer will adapt it its size and listed events
* @method
* @memberof Konva.Transformer.prototype
* @returns {Konva.Transformer}
* @example
* transformer.attachTo(shape);
*/
setNode: function(node) {
if (this._node) {
this.detach();
@ -169,19 +174,27 @@
this._clearSelfAndDescendantCache('absoluteTransform');
}.bind(this)
);
// node.on(TRANSFORM_CHANGE_STR, this.requestUpdate.bind(this));
// node.on('dragmove.resizer', this.requestUpdate.bind(this));
// TODO: why do we need this?
var elementsCreated = !!this.findOne('.top-left');
if (elementsCreated) {
this.update();
}
return this;
},
getNode: function() {
return this._node;
},
/**
* detach transformer from a attached node
* @method
* @memberof Konva.Transformer.prototype
* @returns {Konva.Transformer}
* @example
* transformer.detach();
*/
detach: function() {
if (this.getNode()) {
this.getNode().off('.resizer');
@ -598,21 +611,9 @@
this.update();
this.getLayer().batchDraw();
},
requestUpdate: function() {
if (this.timeout) {
return;
}
this.timeout = setTimeout(
function() {
this.timeout = null;
this.update();
}.bind(this)
);
},
/**
* force update of Transformer
* force update of Konva.Transformer.
* Use it when you updated attached Konva.Group and now you need to reset transformer size
* @method
* @memberof Konva.Transformer.prototype
*/
@ -682,9 +683,21 @@
visible: this.lineEnabled()
});
},
/**
* determine if transformer is in active transform
* @method
* @memberof Konva.Transformer.prototype
* @returns {Boolean}
*/
isTransforming: function() {
return this._transforming;
},
/**
* Stop active transform action
* @method
* @memberof Konva.Transformer.prototype
* @returns {Boolean}
*/
stopTransform: function() {
if (this._transforming) {
this._removeEvents();

97
test/functional/MouseEvents-test.js
View File

@ -1,7 +1,4 @@
suite('MouseEvents', function() {
// NOTE: disable throttling so these tests can run synchronously
Konva.enableThrottling = false;
// ======================================================
test('stage content mouse events', function(done) {
var stage = addStage();
@ -1864,7 +1861,97 @@ suite('MouseEvents', function() {
assert.equal(smallDblClicks, 1, 'single dblclick on small rect');
done();
}, 200);
}, 200);
});
});
});
it('double click after drag should trigger event', function(done) {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var bigRect = new Konva.Rect({
x: 0,
y: 0,
width: 200,
height: 200,
fill: 'yellow',
draggable: true
});
layer.add(bigRect);
var smallShape = new Konva.Circle({
x: 100,
y: 100,
width: 100,
fill: 'red'
});
layer.add(smallShape);
layer.draw();
var bigClicks = 0;
var smallClicks = 0;
var smallDblClicks = 0;
bigRect.on('click', function() {
bigClicks += 1;
});
smallShape.on('click', function() {
smallClicks += 1;
});
smallShape.on('dblclick', function() {
smallDblClicks += 1;
});
stage.simulateMouseDown({
x: 10,
y: 10
});
stage.simulateMouseMove({
x: 15,
y: 15
});
stage.simulateMouseUp({
x: 15,
y: 15
});
assert.equal(bigClicks, 0, 'single click on big rect');
assert.equal(smallClicks, 0, 'no click on small rect');
assert.equal(smallDblClicks, 0, 'no dblclick on small rect');
setTimeout(function() {
stage.simulateMouseDown({
x: 100,
y: 100
});
stage.simulateMouseUp({
x: 100,
y: 100
});
assert.equal(bigClicks, 0, 'single click on big rect');
assert.equal(smallClicks, 1, 'single click on small rect');
assert.equal(smallDblClicks, 0, 'no dblclick on small rect');
setTimeout(function() {
stage.simulateMouseDown({
x: 100,
y: 100
});
stage.simulateMouseUp({
x: 100,
y: 100
});
assert.equal(bigClicks, 0, 'single click on big rect');
assert.equal(smallClicks, 2, 'second click on small rect');
assert.equal(smallDblClicks, 1, 'single dblclick on small rect');
done();
});
});
});
});