update stage events flow, rename resizer to transformer

This commit is contained in:
Anton Lavrenov 2018-01-04 10:59:14 +07:00
parent 323fd2505f
commit ac8e682738
9 changed files with 766 additions and 431 deletions

View File

@ -198,7 +198,7 @@
],
"spaced-comment": 0,
"spaced-line-comment": [0, "always"],
"strict": [2, "function"],
"strict": [0, "function"],
"use-isnan": 2,
"valid-jsdoc": 0,
"valid-typeof": 2,

View File

@ -1,323 +1,381 @@
# Change Log
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
## [Not released][Not released]
## [Not released][not released]
### Added
* new `Konva.Transformer` group that allow simple resize, and rotate of a shape.
## Changed
* stage events are slightly changed. `mousedown`, `click`, `mouseup`, `dblclick`, `touchstart`, `touchend`, `tap`, `dbltap` will be triggered when clicked on empty areas.
## Fixed
- Some typescript fixes
* Some typescript fixes
## [1.7.6][2017-11-01]
## Fixed
- Some typescript fixes
* Some typescript fixes
## [1.7.4][2017-10-30]
## Fixed
- `isBrowser` detection for electron
* `isBrowser` detection for electron
## [1.7.3][2017-10-19]
### Changed
- Changing size of a stage will redraw it in synchronous way
* Changing size of a stage will redraw it in synchronous way
### Fixed
- Some fixes special for nodejs
* Some fixes special for nodejs
## [1.7.2][2017-10-11]
### Fixed
- Fixed `Konva.document is undefined`
* Fixed `Konva.document is undefined`
## [1.7.1][2017-10-11]
### Changed
- Konva for browser env and Konva for nodejs env are separate packages now. You can use `konva-node` for NodeJS env.
* Konva for browser env and Konva for nodejs env are separate packages now. You can use `konva-node` for NodeJS env.
## [1.7.0][2017-10-08]
### Fixed
- Several typescript fixes
* Several typescript fixes
### Changed
- Default value for `dragDistance` is changed to 3px.
- Fix rare error throw on drag
- Caching with height = 0 or width = 0 with throw async error. Caching will be ignored.
* Default value for `dragDistance` is changed to 3px.
* Fix rare error throw on drag
* Caching with height = 0 or width = 0 with throw async error. Caching will be ignored.
## [1.6.8][2017-08-19]
### Changed
- The `node.getClientRect()` calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs.
- Upgrade nodejs deps
* The `node.getClientRect()` calculation is changed a bit. It is more powerfull and correct. Also it takes parent transform into account. See docs.
* Upgrade nodejs deps
## [1.6.7][2017-07-28]
### Fixed
- Fix bug with double trigger wheel in Firefox
- Fix `node.getClientRect()` calculation in a case of Group + invisible child
- Fix dblclick issue https://github.com/konvajs/konva/issues/252
* Fix bug with double trigger wheel in Firefox
* Fix `node.getClientRect()` calculation in a case of Group + invisible child
* Fix dblclick issue https://github.com/konvajs/konva/issues/252
## [1.6.3][2017-05-24]
### Fixed
- Fixed bug with pointer detection. css 3d transformed stage will not work now.
* Fixed bug with pointer detection. css 3d transformed stage will not work now.
## [1.6.2][2017-05-08]
### Fixed
- Fixed bug with automatic shadow for negative scale values
* Fixed bug with automatic shadow for negative scale values
## [1.6.1][2017-04-25]
### Fixed
- Fix pointer position detection
* Fix pointer position detection
### Changed
- moved `globalCompositeOperation` property to `Konva.Node`
* moved `globalCompositeOperation` property to `Konva.Node`
## [1.6.0][2017-04-21]
### Added
- support of globalCompositeOperation for `Konva.Shape`
* support of globalCompositeOperation for `Konva.Shape`
### Fixed
- getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)
* getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)
### Changed
- Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. https://github.com/konvajs/konva/pull/215
* Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. https://github.com/konvajs/konva/pull/215
## [1.5.0][2017-03-20]
### Added
- support for `lineDashOffset` property for `Konva.Shape`.
* support for `lineDashOffset` property for `Konva.Shape`.
## [1.4.0][2017-02-07]
## Added
- `textDecoration` of `Konva.Text` now supports `line-through`
* `textDecoration` of `Konva.Text` now supports `line-through`
## [1.3.0][2017-01-10]
## Added
- new align value for `Konva.Text` and `Konva.TextPath`: `justify`
- new property for `Konva.Text` and `Konva.TextPath`: `textDecoration`. Right now it sports only '' (no decoration) and 'underline' values.
- new property for `Konva.Text`: `letterSpacing`
- new event `contentContextmenu` for `Konva.Stage`
- `align` support for `Konva.TextPath`
- new method `toCanvas()` for converting a node into canvas element
* new align value for `Konva.Text` and `Konva.TextPath`: `justify`
* new property for `Konva.Text` and `Konva.TextPath`: `textDecoration`. Right now it sports only '' (no decoration) and 'underline' values.
* new property for `Konva.Text`: `letterSpacing`
* new event `contentContextmenu` for `Konva.Stage`
* `align` support for `Konva.TextPath`
* new method `toCanvas()` for converting a node into canvas element
### Changed
- changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).
- `shadowOffset` respect pixel ratio now
* changing a size of `Konva.Stage` will update it in async way (via `batchDraw`).
* `shadowOffset` respect pixel ratio now
### Fixed
- Fixed bug when `Konva.Tag` width was not changing its width dynamically
- Fixed "calling remove() for dragging shape will throw an error"
- Fixed wrong opacity level for cached group with opacity
- More consistent shadows on HDPI screens
- Fixed memory leak for nodes with several names
* Fixed bug when `Konva.Tag` width was not changing its width dynamically
* Fixed "calling remove() for dragging shape will throw an error"
* Fixed wrong opacity level for cached group with opacity
* More consistent shadows on HDPI screens
* Fixed memory leak for nodes with several names
## [1.2.2][2016-09-15]
### Fixed
- refresh stage hit and its `dragend`
- `getClientRect` calculations
* refresh stage hit and its `dragend`
* `getClientRect` calculations
## [1.2.0][2016-09-15]
## Added
- new properties for `Konva.TextPath`: `letterSpacing` and `textBaseline`.
* new properties for `Konva.TextPath`: `letterSpacing` and `textBaseline`.
## [1.1.4][2016-09-13]
### Fixed
- Prevent throwing an error when text property of `Konva.Text` = undefined or null
* Prevent throwing an error when text property of `Konva.Text` = undefined or null
## [1.1.3][2016-09-12]
### Changed
- Better hit function for `TextPath`.
- Validation of `Shape` filters.
* Better hit function for `TextPath`.
* Validation of `Shape` filters.
## [1.1.2][2016-09-10]
### Fixed
- Fixed "Dragging Group on mobile view throws "missing preventDefault" error" #169
* Fixed "Dragging Group on mobile view throws "missing preventDefault" error" #169
## [1.1.1][2016-08-30]
### Fixed
- Fixed #166 bug of drag&drop
* Fixed #166 bug of drag&drop
## [1.1.0][2016-08-21]
## Added
- new property of `Konva.Shape` - `preventDefault`.
* new property of `Konva.Shape` - `preventDefault`.
## [1.0.3][2016-08-14]
### Fixed
- Fixed some typescript definitions
* Fixed some typescript definitions
## [1.0.2][2016-07-08]
## Changed
- `Konva.Text` will interpret undefined `width` and `height` as `AUTO`
* `Konva.Text` will interpret undefined `width` and `height` as `AUTO`
## [1.0.1][2016-07-05]
### Changed
- you can now unset property by `node.x(undefined)` or `node.setAttr('x', null)`
* you can now unset property by `node.x(undefined)` or `node.setAttr('x', null)`
### Fixed
- Bug fix for case when `touchend` event throws error
* Bug fix for case when `touchend` event throws error
## [1.0.0][2016-07-05]
### Fixed
- Bug fix for case when `touchend` event throws error
* Bug fix for case when `touchend` event throws error
## [0.15.0][2016-06-18]
## Added
- Custom clip function
* Custom clip function
## [0.14.0][2016-06-17]
### Fixed
- fixes in typescript definitions
- fixes for bug with `mouseenter` event on deep nesting case
* fixes in typescript definitions
* fixes for bug with `mouseenter` event on deep nesting case
## [0.13.9][2016-05-14]
### Changed
- typescript definition in npm package
- node@5.10.1, canvas@1.3.14, jsdom@8.5.0 support
- `Konva.Path` will be filled when it is not closed
- `Animation.start()` will not not immediate sync draw. This should improve performance a little.
- Warning when node for `Tween` is not in layer yet.
- `removeChildren()` remove only first level children. So it will not remove grandchildren.
* typescript definition in npm package
* node@5.10.1, canvas@1.3.14, jsdom@8.5.0 support
* `Konva.Path` will be filled when it is not closed
* `Animation.start()` will not not immediate sync draw. This should improve performance a little.
* Warning when node for `Tween` is not in layer yet.
* `removeChildren()` remove only first level children. So it will not remove grandchildren.
## [0.12.4][2016-04-19]
### Changed
- `batchDraw` will do not immediate `draw()`
* `batchDraw` will do not immediate `draw()`
### Fixed
- fix incorrect shadow offset on rotation
* fix incorrect shadow offset on rotation
## [0.12.3][2016-04-07]
### Fixed
- `batchDraw` function works less time now
- lighter npm package
* `batchDraw` function works less time now
* lighter npm package
## [0.12.2][2016-03-31]
### Fixed
- repair `cancelBubble` event property behaviour
- fix wrong `Path` `getClientRect()` calculation
- better HDPI support
- better typescript definitions
- node 0.12 support
* repair `cancelBubble` event property behaviour
* fix wrong `Path` `getClientRect()` calculation
* better HDPI support
* better typescript definitions
* node 0.12 support
### Changed
- more universal stage container selector
- `mousewheel` event changed to `wheel`
* more universal stage container selector
* `mousewheel` event changed to `wheel`
## [0.11.1][2016-01-16]
### Fixed
- correct `Konva.Arrow` drawing. Now it works better.
- Better support for dragging when mouse out of stage
- Better corner radius for `Label` shape
- `contentTap` event for stage
* correct `Konva.Arrow` drawing. Now it works better.
* Better support for dragging when mouse out of stage
* Better corner radius for `Label` shape
* `contentTap` event for stage
### Added
- event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
- new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
- optional selector parameter for `stage.getIntersection` and `layer.getIntersection`
- show warning message if several instances of Konva are added to page.
* event delegation. You can use it in this way: `layer.on('click', 'Circle', handler);`
* new `node.findAncestors(selector)` and `node.findAncestor(selector)` functions
* optional selector parameter for `stage.getIntersection` and `layer.getIntersection`
* show warning message if several instances of Konva are added to page.
### Changed
- `moveTo` and some other methods return `this`
- `getAbsolutePosition` support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
- `change` event will be not fired if changed value is the same as old value
* `moveTo` and some other methods return `this`
* `getAbsolutePosition` support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
* `change` event will be not fired if changed value is the same as old value
## [0.10.0][2015-10-27]
### Added
- RGBA filter. Thanks to [@codefo](https://github.com/codefo)
- `stroke` and `fill` support for `Konva.Sprite`
* RGBA filter. Thanks to [@codefo](https://github.com/codefo)
* `stroke` and `fill` support for `Konva.Sprite`
### Fixed
- Correct calculation in `getClientRect` method of `Konva.Line` and `Konva.Container`.
- Correct `toObject()` behaviour for node with attrs with extended native prototypes
- Fixed bug for caching where buffer canvas is required
* Correct calculation in `getClientRect` method of `Konva.Line` and `Konva.Container`.
* Correct `toObject()` behaviour for node with attrs with extended native prototypes
* Fixed bug for caching where buffer canvas is required
### Changed
- Dragging works much better. If your pointer is out of stage content dragging will still continue.
- `Konva.Node.create` now works with objects.
- `Konva.Tween` now supports tweening points to state with different length
* Dragging works much better. If your pointer is out of stage content dragging will still continue.
* `Konva.Node.create` now works with objects.
* `Konva.Tween` now supports tweening points to state with different length
## [0.9.5][2015-05-28]
### Fixed
- `to` will not throw error if no `onFinish` callback
- HDPI support for desktop
- Fix bug when filters are not correct for HDPI
- Fix bug when hit area is not correct for HDPI
- Fix bug for incorrect `getClientRect` calculation
- Repair fill gradient for text
* `to` will not throw error if no `onFinish` callback
* HDPI support for desktop
* Fix bug when filters are not correct for HDPI
* Fix bug when hit area is not correct for HDPI
* Fix bug for incorrect `getClientRect` calculation
* Repair fill gradient for text
### Changed
- context wrapper is more capable with native context.
* context wrapper is more capable with native context.
So you can use `context.fillStyle` property in your `sceneFunc` without accessing native context.
- `toDataURL` now handles pixelRatio. you can pass `config.pixelRatio` argument
- Correct `clone()` for custom nodes
- `FastLayer` can now have transforms
- `stage.toDataURL()` method now works synchronously. So `callback` argument is not required.
- `container.find(selector)` method now has a validation step. So if you forgot to add `#` or `.` you will see a warning message in the console.
* `toDataURL` now handles pixelRatio. you can pass `config.pixelRatio` argument
* Correct `clone()` for custom nodes
* `FastLayer` can now have transforms
* `stage.toDataURL()` method now works synchronously. So `callback` argument is not required.
* `container.find(selector)` method now has a validation step. So if you forgot to add `#` or `.` you will see a warning message in the console.
### Added
- new `Konva.Image.fromURL` method
* new `Konva.Image.fromURL` method
### Deprecated
- `fillRed`, `fillGreen`, `fillBlue`, `fillAlpha` are deprecated. Use `fill` instead.
- `strokeRed`, `strokeGreen`, `strokeBlue`, `strokeAlpha` are deprecated. Use `stroke` instead.
- `shadowRed`, `shadowGreen`, `shadowBlue`, `shadowAlpha` are deprecated. Use `shadow` instead.
- `dashArray` is deprecated. Use `dash` instead.
- `drawFunc` is deprecated. Use `sceneFunc` instead.
- `drawHitFunc` is deprecated. Use `hitFunc` instead.
- `rotateDeg` is deprecated. Use `rotate` instead.
* `fillRed`, `fillGreen`, `fillBlue`, `fillAlpha` are deprecated. Use `fill` instead.
* `strokeRed`, `strokeGreen`, `strokeBlue`, `strokeAlpha` are deprecated. Use `stroke` instead.
* `shadowRed`, `shadowGreen`, `shadowBlue`, `shadowAlpha` are deprecated. Use `shadow` instead.
* `dashArray` is deprecated. Use `dash` instead.
* `drawFunc` is deprecated. Use `sceneFunc` instead.
* `drawHitFunc` is deprecated. Use `hitFunc` instead.
* `rotateDeg` is deprecated. Use `rotate` instead.
## [0.9.0][2015-02-27]
### Fixed
- cache algorithm has A LOT OF updates.
* cache algorithm has A LOT OF updates.
### Changed
- `scale` now affects `shadowOffset`
- performance optimization (remove some unnecessary draws)
- more expected drawing when shape has opacity, stroke and shadow
- HDPI for caching.
- Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to `cache` method for all buildin Konva shapes. (only for your custom `Konva.Shape` instance).
- `Tween` now supports color properties (`fill`, `stroke`, `shadowColor`)
* `scale` now affects `shadowOffset`
* performance optimization (remove some unnecessary draws)
* more expected drawing when shape has opacity, stroke and shadow
* HDPI for caching.
* Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to `cache` method for all buildin Konva shapes. (only for your custom `Konva.Shape` instance).
* `Tween` now supports color properties (`fill`, `stroke`, `shadowColor`)
### Added
- new methods for working with node's name: `addName`, `removeName`, `hasName`.
- new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
- new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
- new `getClientRect` method.
- new `to` method for every node for shorter tweening
* new methods for working with node's name: `addName`, `removeName`, `hasName`.
* new `perfectDrawEnabled` property for shape. See [http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html](http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html)
* new `shadowForStrokeEnabled` property for shape. See [http://konvajs.github.io/docs/performance/All_Performance_Tips.html](http://konvajs.github.io/docs/performance/All_Performance_Tips.html)
* new `getClientRect` method.
* new `to` method for every node for shorter tweening
## [0.8.0][2015-02-04]
@ -329,11 +387,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* new `strokeHitEnabled` property. Useful for performance optimizations
* typescript definitions. see `/resources/konva.d.ts`
## Rebranding release 2015-01-28
Differences from last official `KineticJS` release
* Bug Fixes
* `strokeScaleEnabled = false` is disabled for text as I can not find a way to implement this
* `strokeScaleEnabled = false` for Line now creates a correct hit graph
* working "this-example" as name for nodes

View File

@ -81,7 +81,7 @@ var sourceFiles = [
'src/shapes/Star.js',
'src/shapes/Label.js',
'src/shapes/Arrow.js',
'src/shapes/Resizer.js'
'src/shapes/Transformer.js'
];
function build() {

View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Wed Jan 03 2018
* Date: Thu Jan 04 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@ -10353,6 +10353,12 @@
if (shape && shape.isListening()) {
this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, { evt: evt });
} else {
this._fire(MOUSEDOWN, {
evt: evt,
target: this,
currentTarget: this
});
}
// content event
@ -10412,6 +10418,16 @@
shape._fireAndBubble(DBL_CLICK, { evt: evt });
}
}
} else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
if (fireDblClick) {
this._fire(DBL_CLICK, {
evt: evt,
target: this,
currentTarget: this
});
}
}
// content events
this._fire(CONTENT_MOUSEUP, { evt: evt });
@ -10452,6 +10468,12 @@
) {
evt.preventDefault();
}
} else {
this._fire(TOUCHSTART, {
evt: evt,
target: this,
currentTarget: this
});
}
// content event
this._fire(CONTENT_TOUCHSTART, { evt: evt });
@ -10495,6 +10517,16 @@
) {
evt.preventDefault();
}
} else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
if (fireDblClick) {
this._fire(DBL_TAP, {
evt: evt,
target: this,
currentTarget: this
});
}
}
// content events
this._fire(CONTENT_TOUCHEND, { evt: evt });
@ -18223,16 +18255,16 @@
(function(Konva) {
'use strict';
Konva.Resizer = function(config) {
Konva.Transformer = function(config) {
this.____init(config);
};
Konva.Resizer.prototype = {
Konva.Transformer.prototype = {
_centroid: false,
____init: function(config) {
// call super constructor
Konva.Group.call(this, config);
this.className = 'Resizer';
this.className = 'Transformer';
this._createElements();
this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
@ -18622,11 +18654,11 @@
window.removeEventListener('touchend', this.handleMouseUp);
}
};
Konva.Util.extend(Konva.Resizer, Konva.Group);
Konva.Util.extend(Konva.Transformer, Konva.Group);
Konva.Factory.addGetterSetter(Konva.Resizer, 'keepRatio', false);
Konva.Factory.addGetterSetter(Konva.Resizer, 'resizeEnabled', true);
Konva.Factory.addGetterSetter(Konva.Resizer, 'rotationSnaps', []);
Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', false);
Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
Konva.Collection.mapMethods(Konva.Resizer);
Konva.Collection.mapMethods(Konva.Transformer);
})(Konva);

6
konva.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -512,6 +512,12 @@
if (shape && shape.isListening()) {
this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, { evt: evt });
} else {
this._fire(MOUSEDOWN, {
evt: evt,
target: this,
currentTarget: this
});
}
// content event
@ -571,6 +577,16 @@
shape._fireAndBubble(DBL_CLICK, { evt: evt });
}
}
} else {
this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });
this._fire(CLICK, { evt: evt, target: this, currentTarget: this });
if (fireDblClick) {
this._fire(DBL_CLICK, {
evt: evt,
target: this,
currentTarget: this
});
}
}
// content events
this._fire(CONTENT_MOUSEUP, { evt: evt });
@ -611,6 +627,12 @@
) {
evt.preventDefault();
}
} else {
this._fire(TOUCHSTART, {
evt: evt,
target: this,
currentTarget: this
});
}
// content event
this._fire(CONTENT_TOUCHSTART, { evt: evt });
@ -654,6 +676,16 @@
) {
evt.preventDefault();
}
} else {
this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });
this._fire(TAP, { evt: evt, target: this, currentTarget: this });
if (fireDblClick) {
this._fire(DBL_TAP, {
evt: evt,
target: this,
currentTarget: this
});
}
}
// content events
this._fire(CONTENT_TOUCHEND, { evt: evt });

View File

@ -1,15 +1,15 @@
(function(Konva) {
'use strict';
Konva.Resizer = function(config) {
Konva.Transformer = function(config) {
this.____init(config);
};
Konva.Resizer.prototype = {
Konva.Transformer.prototype = {
_centroid: false,
____init: function(config) {
// call super constructor
Konva.Group.call(this, config);
this.className = 'Resizer';
this.className = 'Transformer';
this._createElements();
this.handleMouseMove = this.handleMouseMove.bind(this);
this.handleMouseUp = this.handleMouseUp.bind(this);
@ -399,11 +399,11 @@
window.removeEventListener('touchend', this.handleMouseUp);
}
};
Konva.Util.extend(Konva.Resizer, Konva.Group);
Konva.Util.extend(Konva.Transformer, Konva.Group);
Konva.Factory.addGetterSetter(Konva.Resizer, 'keepRatio', false);
Konva.Factory.addGetterSetter(Konva.Resizer, 'resizeEnabled', true);
Konva.Factory.addGetterSetter(Konva.Resizer, 'rotationSnaps', []);
Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', false);
Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);
Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);
Konva.Collection.mapMethods(Konva.Resizer);
Konva.Collection.mapMethods(Konva.Transformer);
})(Konva);

View File

@ -207,7 +207,8 @@ function showHit(layer) {
}
beforeEach(function() {
var title = document.createElement('h2'), test = this.currentTest;
var title = document.createElement('h2'),
test = this.currentTest;
title.innerHTML = test.parent.title + ' - ' + test.title;
title.className = 'konva-title';

View File

@ -733,6 +733,217 @@ suite('Stage', function() {
assert.equal(Konva.DD.node, undefined);
});
test('test can listen click on empty areas', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var dblicks = 0;
var clicks = 0;
var mousedowns = 0;
var mouseups = 0;
stage.on('mousedown', function(e) {
mousedowns += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
stage.on('mouseup', function(e) {
mouseups += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
stage.on('click', function(e) {
clicks += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
stage.on('dblclick', function(e) {
dblicks += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
// simulate dragging
stage.simulateMouseDown({
x: 60,
y: 10
});
stage.simulateMouseUp({
x: 65,
y: 10
});
assert.equal(mousedowns, 1, 'first mousedown registered');
assert.equal(mouseups, 1, 'first mouseup registered');
assert.equal(clicks, 1, 'first click registered');
assert.equal(dblicks, 0, 'no dbclicks registered');
stage.simulateMouseDown({
x: 60,
y: 10
});
stage.simulateMouseUp({
x: 65,
y: 10
});
assert.equal(mousedowns, 2, 'second mousedown registered');
assert.equal(mouseups, 2, 'seconds mouseup registered');
assert.equal(clicks, 2, 'seconds click registered');
assert.equal(dblicks, 1, 'first dbclick registered');
});
test('test can listen taps on empty areas', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var dbltaps = 0;
var taps = 0;
var touchstarts = 0;
var touchends = 0;
stage.on('touchstart', function(e) {
touchstarts += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
stage.on('touchend', function(e) {
touchends += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
stage.on('tap', function(e) {
taps += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
stage.on('dbltap', function(e) {
dbltaps += 1;
assert.equal(e.target, stage);
assert.equal(e.currentTarget, stage);
});
var top = stage.content.getBoundingClientRect().top;
// simulate dragging
stage._touchstart({
touches: [
{
clientX: 100,
clientY: 100 + top
}
]
});
stage._touchend({
touches: []
});
assert.equal(touchstarts, 1, 'first touchstart registered');
assert.equal(touchends, 1, 'first touchends registered');
assert.equal(taps, 1, 'first tap registered');
assert.equal(dbltaps, 0, 'no dbltap registered');
stage._touchstart({
touches: [
{
clientX: 100,
clientY: 100 + top
}
]
});
stage._touchend({
touches: []
});
assert.equal(touchstarts, 2, 'first touchstart registered');
assert.equal(touchends, 2, 'first touchends registered');
assert.equal(taps, 2, 'first tap registered');
assert.equal(dbltaps, 1, 'dbltap registered');
});
test('make sure it does not trigger too many events', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
width: stage.width(),
height: stage.height()
});
layer.add(rect);
layer.draw();
var dblicks = 0;
var clicks = 0;
var mousedowns = 0;
var mouseups = 0;
stage.on('mousedown', function(e) {
mousedowns += 1;
assert.equal(e.target, rect);
assert.equal(e.currentTarget, stage);
});
stage.on('mouseup', function(e) {
mouseups += 1;
assert.equal(e.target, rect);
assert.equal(e.currentTarget, stage);
});
stage.on('click', function(e) {
clicks += 1;
assert.equal(e.target, rect);
assert.equal(e.currentTarget, stage);
});
stage.on('dblclick', function(e) {
dblicks += 1;
assert.equal(e.target, rect);
assert.equal(e.currentTarget, stage);
});
// simulate dragging
stage.simulateMouseDown({
x: 60,
y: 10
});
stage.simulateMouseUp({
x: 65,
y: 10
});
assert.equal(mousedowns, 1, 'first mousedown registered');
assert.equal(mouseups, 1, 'first mouseup registered');
assert.equal(clicks, 1, 'first click registered');
assert.equal(dblicks, 0, 'no dbclicks registered');
stage.simulateMouseDown({
x: 60,
y: 10
});
stage.simulateMouseUp({
x: 65,
y: 10
});
assert.equal(mousedowns, 2, 'second mousedown registered');
assert.equal(mouseups, 2, 'seconds mouseup registered');
assert.equal(clicks, 2, 'seconds click registered');
assert.equal(dblicks, 1, 'first dbclick registered');
});
test.skip('toDataURL + HDPI', function(done) {
Konva.pixelRatio = 2;