mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
update stage events flow, rename resizer to transformer
This commit is contained in:
Anton Lavrenov
parent
323fd2505f
commit
ac8e682738
@ -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,
|
||||
|
||||
375
CHANGELOG.md
375
CHANGELOG.md
@ -1,366 +1,425 @@
|
||||
# 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]
|
||||
|
||||
* Bug Fixes
|
||||
* browser crashing on pointer events fixed
|
||||
* optimized `getIntersection` function
|
||||
* browser crashing on pointer events fixed
|
||||
* optimized `getIntersection` function
|
||||
* Enhancements
|
||||
* `container.findOne()` method
|
||||
* new `strokeHitEnabled` property. Useful for performance optimizations
|
||||
* typescript definitions. see `/resources/konva.d.ts`
|
||||
|
||||
* `container.findOne()` method
|
||||
* 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
|
||||
* Konva.Text() with no config will not throw exception
|
||||
* Konva.Line() with no config will not throw exception
|
||||
* Correct stage resizing with `FastLayer`
|
||||
* `batchDraw` method for `FastLayer`
|
||||
* Correct mouseover/mouseout/mouseenter/mouseleave events for groups
|
||||
* cache node before adding to layer
|
||||
* `intersects` function now works for shapes with shadow
|
||||
|
||||
* `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
|
||||
* Konva.Text() with no config will not throw exception
|
||||
* Konva.Line() with no config will not throw exception
|
||||
* Correct stage resizing with `FastLayer`
|
||||
* `batchDraw` method for `FastLayer`
|
||||
* Correct mouseover/mouseout/mouseenter/mouseleave events for groups
|
||||
* cache node before adding to layer
|
||||
* `intersects` function now works for shapes with shadow
|
||||
|
||||
* Enhancements
|
||||
* `cornerRadius` of Rect is limited by `width/2` and `height/2`
|
||||
* `black` is default fill for text
|
||||
* true class extending. Now `rect instanceOf Konva.Shape` will return true
|
||||
* while dragging you can redraw layer that is not under drag. hit graph will be updated in this case
|
||||
* now you can move object that is dragging into another layer.
|
||||
* new `frameOffsets` attribute for `Konva.Sprite`
|
||||
* much better dragging performance
|
||||
* `browserify` support
|
||||
* applying opacity to cached node
|
||||
* remove all events with `node.off()`
|
||||
* mouse dragging only with left button
|
||||
* opacity now affects cached shapes
|
||||
* Label corner radius
|
||||
* smart changing `width`, `height`, `radius` attrs for circle, start, ellipse, ring.
|
||||
* `mousewheel` support. Thanks [@vmichnowicz](https://github.com/vmichnowicz)
|
||||
* new Arrow plugin
|
||||
* multiple names: `node.name('foo bar'); container.find('.foo');` (thanks [@mattslocum](https://github.com/mattslocum))
|
||||
* `Container.findOne()`
|
||||
* `cornerRadius` of Rect is limited by `width/2` and `height/2`
|
||||
* `black` is default fill for text
|
||||
* true class extending. Now `rect instanceOf Konva.Shape` will return true
|
||||
* while dragging you can redraw layer that is not under drag. hit graph will be updated in this case
|
||||
* now you can move object that is dragging into another layer.
|
||||
* new `frameOffsets` attribute for `Konva.Sprite`
|
||||
* much better dragging performance
|
||||
* `browserify` support
|
||||
* applying opacity to cached node
|
||||
* remove all events with `node.off()`
|
||||
* mouse dragging only with left button
|
||||
* opacity now affects cached shapes
|
||||
* Label corner radius
|
||||
* smart changing `width`, `height`, `radius` attrs for circle, start, ellipse, ring.
|
||||
* `mousewheel` support. Thanks [@vmichnowicz](https://github.com/vmichnowicz)
|
||||
* new Arrow plugin
|
||||
* multiple names: `node.name('foo bar'); container.find('.foo');` (thanks [@mattslocum](https://github.com/mattslocum))
|
||||
* `Container.findOne()`
|
||||
|
||||
@ -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() {
|
||||
|
||||
300
konva.js
300
konva.js
@ -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)
|
||||
@ -9889,13 +9889,13 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Stage constructor. A stage is used to contain multiple layers
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Container
|
||||
* @param {Object} config
|
||||
* @param {String|Element} config.container Container selector or DOM element
|
||||
* @param {Number} [config.x]
|
||||
* Stage constructor. A stage is used to contain multiple layers
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Container
|
||||
* @param {Object} config
|
||||
* @param {String|Element} config.container Container selector or DOM element
|
||||
* @param {Number} [config.x]
|
||||
* @param {Number} [config.y]
|
||||
* @param {Number} [config.width]
|
||||
* @param {Number} [config.height]
|
||||
@ -9915,13 +9915,13 @@
|
||||
* the entire stage by dragging any portion of the stage
|
||||
* @param {Number} [config.dragDistance]
|
||||
* @param {Function} [config.dragBoundFunc]
|
||||
* @example
|
||||
* var stage = new Konva.Stage({
|
||||
* width: 500,
|
||||
* height: 800,
|
||||
* container: 'containerId' // or "#containerId" or ".containerClass"
|
||||
* });
|
||||
*/
|
||||
* @example
|
||||
* var stage = new Konva.Stage({
|
||||
* width: 500,
|
||||
* height: 800,
|
||||
* container: 'containerId' // or "#containerId" or ".containerClass"
|
||||
* });
|
||||
*/
|
||||
Konva.Stage = function(config) {
|
||||
this.___init(config);
|
||||
};
|
||||
@ -9943,11 +9943,11 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* set container dom element which contains the stage wrapper div element
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {DomElement} container can pass in a dom element or id string
|
||||
*/
|
||||
* set container dom element which contains the stage wrapper div element
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {DomElement} container can pass in a dom element or id string
|
||||
*/
|
||||
setContainer: function(container) {
|
||||
if (typeof container === STRING) {
|
||||
if (container.charAt(0) === '.') {
|
||||
@ -9977,46 +9977,46 @@
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* draw layer scene graphs
|
||||
* @name draw
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* draw layer scene graphs
|
||||
* @name draw
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* draw layer hit graphs
|
||||
* @name drawHit
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* draw layer hit graphs
|
||||
* @name drawHit
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
* set height
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
setHeight: function(height) {
|
||||
Konva.Node.prototype.setHeight.call(this, height);
|
||||
this._resizeDOM();
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* set width
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
* set width
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
setWidth: function(width) {
|
||||
Konva.Node.prototype.setWidth.call(this, width);
|
||||
this._resizeDOM();
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* clear all layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* clear all layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
clear: function() {
|
||||
var layers = this.children,
|
||||
len = layers.length,
|
||||
@ -10035,10 +10035,10 @@
|
||||
return Konva.Container.prototype.clone.call(this, obj);
|
||||
},
|
||||
/**
|
||||
* destroy stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* destroy stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
destroy: function() {
|
||||
var content = this.content;
|
||||
Konva.Container.prototype.destroy.call(this);
|
||||
@ -10053,11 +10053,11 @@
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get pointer position which can be a touch position or mouse position
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {Object}
|
||||
*/
|
||||
* get pointer position which can be a touch position or mouse position
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {Object}
|
||||
*/
|
||||
getPointerPosition: function() {
|
||||
return this.pointerPos;
|
||||
},
|
||||
@ -10065,30 +10065,30 @@
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get stage content div element which has the
|
||||
* the class name "konvajs-content"
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* get stage content div element which has the
|
||||
* the class name "konvajs-content"
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
getContent: function() {
|
||||
return this.content;
|
||||
},
|
||||
/**
|
||||
* Creates a composite data URL
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} [config.callback] function executed when the composite has completed. Deprecated as method is sync now.
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
* Creates a composite data URL
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} [config.callback] function executed when the composite has completed. Deprecated as method is sync now.
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
toDataURL: function(config) {
|
||||
config = config || {};
|
||||
|
||||
@ -10129,21 +10129,21 @@
|
||||
return src;
|
||||
},
|
||||
/**
|
||||
* converts stage into an image.
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} config.callback function executed when the composite has completed
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
* converts stage into an image.
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} config.callback function executed when the composite has completed
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
toImage: function(config) {
|
||||
var cb = config.callback;
|
||||
|
||||
@ -10155,20 +10155,20 @@
|
||||
this.toDataURL(config);
|
||||
},
|
||||
/**
|
||||
* get visible intersection shape. This is the preferred
|
||||
* method for determining if a point intersects a shape or not
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Number} pos.y
|
||||
* @param {String} [selector]
|
||||
* @returns {Konva.Node}
|
||||
* @example
|
||||
* var shape = stage.getIntersection({x: 50, y: 50});
|
||||
* // or if you interested in shape parent:
|
||||
* var group = stage.getIntersection({x: 50, y: 50}, 'Group');
|
||||
*/
|
||||
* get visible intersection shape. This is the preferred
|
||||
* method for determining if a point intersects a shape or not
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Number} pos.y
|
||||
* @param {String} [selector]
|
||||
* @returns {Konva.Node}
|
||||
* @example
|
||||
* var shape = stage.getIntersection({x: 50, y: 50});
|
||||
* // or if you interested in shape parent:
|
||||
* var group = stage.getIntersection({x: 50, y: 50}, 'Group');
|
||||
*/
|
||||
getIntersection: function(pos, selector) {
|
||||
var layers = this.getChildren(),
|
||||
len = layers.length,
|
||||
@ -10210,13 +10210,13 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* add layer or layers to stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {...Konva.Layer} layer
|
||||
* @example
|
||||
* stage.add(layer1, layer2, layer3);
|
||||
*/
|
||||
* add layer or layers to stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {...Konva.Layer} layer
|
||||
* @example
|
||||
* stage.add(layer1, layer2, layer3);
|
||||
*/
|
||||
add: function(layer) {
|
||||
if (arguments.length > 1) {
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
@ -10244,10 +10244,10 @@
|
||||
return null;
|
||||
},
|
||||
/**
|
||||
* returns a {@link Konva.Collection} of layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* returns a {@link Konva.Collection} of layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
getLayers: function() {
|
||||
return this.getChildren();
|
||||
},
|
||||
@ -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 });
|
||||
@ -10631,19 +10663,19 @@
|
||||
Konva.Factory.addOverloadedGetterSetter(Konva.Stage, 'container');
|
||||
|
||||
/**
|
||||
* get container DOM element
|
||||
* @name container
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {DomElement} container
|
||||
* @example
|
||||
* // get container
|
||||
* var container = stage.container();
|
||||
* // set container
|
||||
* var container = document.createElement('div');
|
||||
* body.appendChild(container);
|
||||
* stage.container(container);
|
||||
*/
|
||||
* get container DOM element
|
||||
* @name container
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {DomElement} container
|
||||
* @example
|
||||
* // get container
|
||||
* var container = stage.container();
|
||||
* // set container
|
||||
* var container = document.createElement('div');
|
||||
* body.appendChild(container);
|
||||
* stage.container(container);
|
||||
*/
|
||||
})();
|
||||
|
||||
(function(Konva) {
|
||||
@ -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
6
konva.min.js
vendored
File diff suppressed because one or more lines are too long
282
src/Stage.js
282
src/Stage.js
@ -67,20 +67,20 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Stage constructor. A stage is used to contain multiple layers
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Container
|
||||
* @param {Object} config
|
||||
* @param {String|Element} config.container Container selector or DOM element
|
||||
* @@nodeParams
|
||||
* @example
|
||||
* var stage = new Konva.Stage({
|
||||
* width: 500,
|
||||
* height: 800,
|
||||
* container: 'containerId' // or "#containerId" or ".containerClass"
|
||||
* });
|
||||
*/
|
||||
* Stage constructor. A stage is used to contain multiple layers
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Container
|
||||
* @param {Object} config
|
||||
* @param {String|Element} config.container Container selector or DOM element
|
||||
* @@nodeParams
|
||||
* @example
|
||||
* var stage = new Konva.Stage({
|
||||
* width: 500,
|
||||
* height: 800,
|
||||
* container: 'containerId' // or "#containerId" or ".containerClass"
|
||||
* });
|
||||
*/
|
||||
Konva.Stage = function(config) {
|
||||
this.___init(config);
|
||||
};
|
||||
@ -102,11 +102,11 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* set container dom element which contains the stage wrapper div element
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {DomElement} container can pass in a dom element or id string
|
||||
*/
|
||||
* set container dom element which contains the stage wrapper div element
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {DomElement} container can pass in a dom element or id string
|
||||
*/
|
||||
setContainer: function(container) {
|
||||
if (typeof container === STRING) {
|
||||
if (container.charAt(0) === '.') {
|
||||
@ -136,46 +136,46 @@
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* draw layer scene graphs
|
||||
* @name draw
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* draw layer scene graphs
|
||||
* @name draw
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* draw layer hit graphs
|
||||
* @name drawHit
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* draw layer hit graphs
|
||||
* @name drawHit
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
|
||||
/**
|
||||
* set height
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
* set height
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} height
|
||||
*/
|
||||
setHeight: function(height) {
|
||||
Konva.Node.prototype.setHeight.call(this, height);
|
||||
this._resizeDOM();
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* set width
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
* set width
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Number} width
|
||||
*/
|
||||
setWidth: function(width) {
|
||||
Konva.Node.prototype.setWidth.call(this, width);
|
||||
this._resizeDOM();
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* clear all layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* clear all layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
clear: function() {
|
||||
var layers = this.children,
|
||||
len = layers.length,
|
||||
@ -194,10 +194,10 @@
|
||||
return Konva.Container.prototype.clone.call(this, obj);
|
||||
},
|
||||
/**
|
||||
* destroy stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* destroy stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
destroy: function() {
|
||||
var content = this.content;
|
||||
Konva.Container.prototype.destroy.call(this);
|
||||
@ -212,11 +212,11 @@
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get pointer position which can be a touch position or mouse position
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {Object}
|
||||
*/
|
||||
* get pointer position which can be a touch position or mouse position
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {Object}
|
||||
*/
|
||||
getPointerPosition: function() {
|
||||
return this.pointerPos;
|
||||
},
|
||||
@ -224,30 +224,30 @@
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get stage content div element which has the
|
||||
* the class name "konvajs-content"
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* get stage content div element which has the
|
||||
* the class name "konvajs-content"
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
getContent: function() {
|
||||
return this.content;
|
||||
},
|
||||
/**
|
||||
* Creates a composite data URL
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} [config.callback] function executed when the composite has completed. Deprecated as method is sync now.
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
* Creates a composite data URL
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} [config.callback] function executed when the composite has completed. Deprecated as method is sync now.
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
toDataURL: function(config) {
|
||||
config = config || {};
|
||||
|
||||
@ -288,21 +288,21 @@
|
||||
return src;
|
||||
},
|
||||
/**
|
||||
* converts stage into an image.
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} config.callback function executed when the composite has completed
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
* converts stage into an image.
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} config
|
||||
* @param {Function} config.callback function executed when the composite has completed
|
||||
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
|
||||
* "image/png" is the default
|
||||
* @param {Number} [config.x] x position of canvas section
|
||||
* @param {Number} [config.y] y position of canvas section
|
||||
* @param {Number} [config.width] width of canvas section
|
||||
* @param {Number} [config.height] height of canvas section
|
||||
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
|
||||
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
|
||||
* is very high quality
|
||||
*/
|
||||
toImage: function(config) {
|
||||
var cb = config.callback;
|
||||
|
||||
@ -314,20 +314,20 @@
|
||||
this.toDataURL(config);
|
||||
},
|
||||
/**
|
||||
* get visible intersection shape. This is the preferred
|
||||
* method for determining if a point intersects a shape or not
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Number} pos.y
|
||||
* @param {String} [selector]
|
||||
* @returns {Konva.Node}
|
||||
* @example
|
||||
* var shape = stage.getIntersection({x: 50, y: 50});
|
||||
* // or if you interested in shape parent:
|
||||
* var group = stage.getIntersection({x: 50, y: 50}, 'Group');
|
||||
*/
|
||||
* get visible intersection shape. This is the preferred
|
||||
* method for determining if a point intersects a shape or not
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {Object} pos
|
||||
* @param {Number} pos.x
|
||||
* @param {Number} pos.y
|
||||
* @param {String} [selector]
|
||||
* @returns {Konva.Node}
|
||||
* @example
|
||||
* var shape = stage.getIntersection({x: 50, y: 50});
|
||||
* // or if you interested in shape parent:
|
||||
* var group = stage.getIntersection({x: 50, y: 50}, 'Group');
|
||||
*/
|
||||
getIntersection: function(pos, selector) {
|
||||
var layers = this.getChildren(),
|
||||
len = layers.length,
|
||||
@ -369,13 +369,13 @@
|
||||
}
|
||||
},
|
||||
/**
|
||||
* add layer or layers to stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {...Konva.Layer} layer
|
||||
* @example
|
||||
* stage.add(layer1, layer2, layer3);
|
||||
*/
|
||||
* add layer or layers to stage
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @param {...Konva.Layer} layer
|
||||
* @example
|
||||
* stage.add(layer1, layer2, layer3);
|
||||
*/
|
||||
add: function(layer) {
|
||||
if (arguments.length > 1) {
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
@ -403,10 +403,10 @@
|
||||
return null;
|
||||
},
|
||||
/**
|
||||
* returns a {@link Konva.Collection} of layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
* returns a {@link Konva.Collection} of layers
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
*/
|
||||
getLayers: function() {
|
||||
return this.getChildren();
|
||||
},
|
||||
@ -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 });
|
||||
@ -790,17 +822,17 @@
|
||||
Konva.Factory.addOverloadedGetterSetter(Konva.Stage, 'container');
|
||||
|
||||
/**
|
||||
* get container DOM element
|
||||
* @name container
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {DomElement} container
|
||||
* @example
|
||||
* // get container
|
||||
* var container = stage.container();
|
||||
* // set container
|
||||
* var container = document.createElement('div');
|
||||
* body.appendChild(container);
|
||||
* stage.container(container);
|
||||
*/
|
||||
* get container DOM element
|
||||
* @name container
|
||||
* @method
|
||||
* @memberof Konva.Stage.prototype
|
||||
* @returns {DomElement} container
|
||||
* @example
|
||||
* // get container
|
||||
* var container = stage.container();
|
||||
* // set container
|
||||
* var container = document.createElement('div');
|
||||
* body.appendChild(container);
|
||||
* stage.container(container);
|
||||
*/
|
||||
})();
|
||||
|
||||
@ -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);
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user