mirror of
https://github.com/konvajs/konva.git
synced 2025-11-24 08:46:44 +08:00
merge with upstream
This commit is contained in:
eugenesqr
36
CHANGELOG.md
36
CHANGELOG.md
@@ -4,6 +4,42 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## [Not released][Not released]
|
||||
|
||||
## [1.6.3][2017-05-24]
|
||||
|
||||
### Fixed
|
||||
- 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
|
||||
|
||||
## [1.6.1][2017-04-25]
|
||||
|
||||
### Fixed
|
||||
- Fix pointer position detection
|
||||
|
||||
|
||||
### Changed
|
||||
- moved `globalCompositeOperation` property to `Konva.Node`
|
||||
|
||||
## [1.6.0][2017-04-21]
|
||||
|
||||
### Added
|
||||
- support of globalCompositeOperation for `Konva.Shape`
|
||||
|
||||
### Fixed
|
||||
- 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
|
||||
|
||||
|
||||
## [1.5.0][2017-03-20]
|
||||
|
||||
### Added
|
||||
- support for `lineDashOffset` property for `Konva.Shape`.
|
||||
|
||||
## [1.4.0][2017-02-07]
|
||||
|
||||
## Added
|
||||
|
||||
28
README.md
28
README.md
@@ -20,7 +20,7 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github
|
||||
# Quick Look
|
||||
|
||||
```html
|
||||
<script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
|
||||
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
var stage = new Konva.Stage({
|
||||
@@ -62,15 +62,15 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github
|
||||
|
||||
Konva supports UMD loading. So you can use all possible variants to load the framework into your project:
|
||||
|
||||
###1 Load Konva via classical `<script>` tag:
|
||||
### 1 Load Konva via classical `<script>` tag:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script>
|
||||
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script>
|
||||
```
|
||||
|
||||
You can use CDN: [https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js](https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js)
|
||||
You can use CDN: [https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js](https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js)
|
||||
|
||||
###2 Load via AMD (requirejs):
|
||||
### 2 Load via AMD (requirejs):
|
||||
|
||||
```javascript
|
||||
define(['./konva'], function(Konva) {
|
||||
@@ -78,7 +78,7 @@ define(['./konva'], function(Konva) {
|
||||
});
|
||||
```
|
||||
|
||||
###3 CommonJS style with npm:
|
||||
### 3 CommonJS style with npm:
|
||||
|
||||
```bash
|
||||
npm install konva --save
|
||||
@@ -96,7 +96,7 @@ import Konva from 'konva';
|
||||
import * as Konva from 'konva';
|
||||
```
|
||||
|
||||
###4 Minimal bundle
|
||||
### 4 Minimal bundle
|
||||
|
||||
If you are using webpack or browserfy you can use this approach to load only required Konva's parts:
|
||||
|
||||
@@ -111,7 +111,7 @@ import 'konva/src/shapes/rect';
|
||||
//now Konva.Rect is available to use
|
||||
```
|
||||
|
||||
###5 NodeJS
|
||||
### 5 NodeJS
|
||||
|
||||
You have to install some deps manually to use Konva in nodejs env.
|
||||
|
||||
@@ -126,23 +126,23 @@ See file `resources/nodejs-demo.js` for example.
|
||||
|
||||
Last tested with node@5.10.1, canvas@1.3.14, jsdom@8.5.0
|
||||
|
||||
#Change log
|
||||
# Change log
|
||||
|
||||
See [CHANGELOG.md](https://github.com/konvajs/konva/blob/master/CHANGELOG.md).
|
||||
|
||||
#Dev environment
|
||||
# Dev environment
|
||||
|
||||
Before doing all dev stuff make sure you have node installed. After that, run `npm install` in the main directory to install the node module dependencies.
|
||||
|
||||
Run `gulp -T` to see all build options.
|
||||
|
||||
##Building the Konva Framework
|
||||
## Building the Konva Framework
|
||||
|
||||
To build a development version of the framework, run `gulp dev-build`. To run a full build, which also produces the minified version run `gulp build`.
|
||||
|
||||
If you add a file in the src directory, be sure to add the filename to the sourceFiles array variable in `gulpfile.js`.
|
||||
|
||||
##Testing
|
||||
## Testing
|
||||
|
||||
Konva uses Mocha for testing.
|
||||
|
||||
@@ -152,11 +152,11 @@ Konva uses Mocha for testing.
|
||||
Konva is covered with hundreds of tests and well over a thousand assertions.
|
||||
Konva uses TDD (test driven development) which means that every new feature or bug fix is accompanied with at least one new test.
|
||||
|
||||
##Generate documentation
|
||||
## Generate documentation
|
||||
|
||||
Run `gulp api` which will build the documentation files and place them in the `api` folder.
|
||||
|
||||
|
||||
#Pull Requests
|
||||
# Pull Requests
|
||||
I'd be happy to review any pull requests that may better the Konva project,
|
||||
in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the tests pass (`gulp lint test`).
|
||||
|
||||
613
konva.d.ts
vendored
613
konva.d.ts
vendored
@@ -1,297 +1,297 @@
|
||||
declare module Konva {
|
||||
|
||||
var pixelRatio : number;
|
||||
var pixelRatio: number;
|
||||
var dragDistance: number;
|
||||
var isDragging : () => boolean;
|
||||
var isDragReady : () => boolean;
|
||||
var DD : any;
|
||||
var isDragging: () => boolean;
|
||||
var isDragReady: () => boolean;
|
||||
var DD: any;
|
||||
|
||||
export class Util {
|
||||
static getRandomColor() : string;
|
||||
static getRGB(color: string) : string;
|
||||
static getRandomColor(): string;
|
||||
static getRGB(color: string): string;
|
||||
}
|
||||
|
||||
export class Easings {
|
||||
static BackEaseIn() : any;
|
||||
static BackEaseInOut() : any;
|
||||
static BackEaseOut() : any;
|
||||
static BounceEaseIn() : any;
|
||||
static BounceEaseInOut() : any;
|
||||
static BounceEaseOut() : any;
|
||||
static EaseIn() : any;
|
||||
static EaseInOut() : any;
|
||||
static EaseOut() : any;
|
||||
static ElasticEaseIn() : any;
|
||||
static ElasticEaseInOut() : any;
|
||||
static ElasticEaseOut() : any;
|
||||
static Linear() : any;
|
||||
static StrongEaseIn() : any;
|
||||
static StrongEaseInOut() : any;
|
||||
static StrongEaseOut() : any;
|
||||
static BackEaseIn(): any;
|
||||
static BackEaseInOut(): any;
|
||||
static BackEaseOut(): any;
|
||||
static BounceEaseIn(): any;
|
||||
static BounceEaseInOut(): any;
|
||||
static BounceEaseOut(): any;
|
||||
static EaseIn(): any;
|
||||
static EaseInOut(): any;
|
||||
static EaseOut(): any;
|
||||
static ElasticEaseIn(): any;
|
||||
static ElasticEaseInOut(): any;
|
||||
static ElasticEaseOut(): any;
|
||||
static Linear(): any;
|
||||
static StrongEaseIn(): any;
|
||||
static StrongEaseInOut(): any;
|
||||
static StrongEaseOut(): any;
|
||||
}
|
||||
|
||||
class Filter {
|
||||
}
|
||||
|
||||
export class Filters {
|
||||
static Blur(imageData : any): Filter;
|
||||
static Brighten(imageData : any): Filter;
|
||||
static Emboss(imageData : any): Filter;
|
||||
static Enhance(imageData : any): Filter;
|
||||
static Grayscale(imageData : any): Filter;
|
||||
static HSV(imageData : any): Filter;
|
||||
static Invert(imageData : any): Filter;
|
||||
static Mask(imageData : any): Filter;
|
||||
static Noise(imageData : any): Filter;
|
||||
static Pixelate(imageData : any): Filter;
|
||||
static Posterize(imageData : any): Filter;
|
||||
static RGB(imageData : any): Filter;
|
||||
static RGA(imageData : any): Filter;
|
||||
static Sepia(imageData : any): Filter;
|
||||
static Solarize(imageData : any): Filter;
|
||||
static Threshold(imageData : any): Filter;
|
||||
static Blur(imageData: any): Filter;
|
||||
static Brighten(imageData: any): Filter;
|
||||
static Emboss(imageData: any): Filter;
|
||||
static Enhance(imageData: any): Filter;
|
||||
static Grayscale(imageData: any): Filter;
|
||||
static HSV(imageData: any): Filter;
|
||||
static Invert(imageData: any): Filter;
|
||||
static Mask(imageData: any): Filter;
|
||||
static Noise(imageData: any): Filter;
|
||||
static Pixelate(imageData: any): Filter;
|
||||
static Posterize(imageData: any): Filter;
|
||||
static RGB(imageData: any): Filter;
|
||||
static RGA(imageData: any): Filter;
|
||||
static Sepia(imageData: any): Filter;
|
||||
static Solarize(imageData: any): Filter;
|
||||
static Threshold(imageData: any): Filter;
|
||||
}
|
||||
|
||||
export class Animation {
|
||||
constructor(func: Function, layers?: Layer[]);
|
||||
constructor(func: Function, layer?: Layer);
|
||||
|
||||
addLayer(layer: Layer) : boolean;
|
||||
getLayers() : Layer[];
|
||||
isRunning() : boolean;
|
||||
setLayers(layers : Layer[]) : Animation;
|
||||
setLayers(layer : Layer) : Animation;
|
||||
start() : Animation;
|
||||
stop() : Animation;
|
||||
addLayer(layer: Layer): boolean;
|
||||
getLayers(): Layer[];
|
||||
isRunning(): boolean;
|
||||
setLayers(layers: Layer[]): Animation;
|
||||
setLayers(layer: Layer): Animation;
|
||||
start(): Animation;
|
||||
stop(): Animation;
|
||||
}
|
||||
|
||||
interface NodeConfig {
|
||||
x?: number;
|
||||
y?: number;
|
||||
width? : number;
|
||||
height? : number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
visible?: boolean;
|
||||
listening?: boolean;
|
||||
id?: string;
|
||||
name?: string;
|
||||
opacity?: Number;
|
||||
scale?: Vector2d;
|
||||
scaleX? : number;
|
||||
scaleY? : number;
|
||||
scaleX?: number;
|
||||
scaleY?: number;
|
||||
rotation?: number;
|
||||
rotationDeg?: number;
|
||||
offset?: Vector2d;
|
||||
offsetX? : number;
|
||||
offsetY? : number;
|
||||
offsetX?: number;
|
||||
offsetY?: number;
|
||||
draggable?: boolean;
|
||||
dragBoundFunc?: Function;
|
||||
}
|
||||
|
||||
interface SizeConfig {
|
||||
x? : number;
|
||||
y? : number;
|
||||
width? : number;
|
||||
height? : number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
interface ToDataURLConfig extends SizeConfig {
|
||||
callback : Function;
|
||||
mimeType? : string;
|
||||
quality? : number;
|
||||
callback: Function;
|
||||
mimeType?: string;
|
||||
quality?: number;
|
||||
}
|
||||
|
||||
interface CacheConfig extends SizeConfig{
|
||||
drawBorder? : boolean;
|
||||
interface CacheConfig extends SizeConfig {
|
||||
drawBorder?: boolean;
|
||||
}
|
||||
|
||||
interface ClearConfig extends SizeConfig{
|
||||
interface ClearConfig extends SizeConfig {
|
||||
}
|
||||
|
||||
class Node {
|
||||
constructor (config: NodeConfig);
|
||||
static create<T>(data: any, container?: HTMLElement) : T;
|
||||
constructor(config: NodeConfig);
|
||||
static create<T>(data: any, container?: HTMLElement): T;
|
||||
|
||||
blue() : number;
|
||||
blue(blue: number) : Node;
|
||||
brightness() : number;
|
||||
brightness(brightness: number) : Node;
|
||||
blurRadius() : number;
|
||||
blurRadius(radius: number) : Node;
|
||||
cache(config?: CacheConfig) : Node;
|
||||
clearCache() : Node;
|
||||
clear(bounds?: ClearConfig) : Node;
|
||||
clone(attrs? : NodeConfig): Node;
|
||||
destroy() : void;
|
||||
blue(): number;
|
||||
blue(blue: number): Node;
|
||||
brightness(): number;
|
||||
brightness(brightness: number): Node;
|
||||
blurRadius(): number;
|
||||
blurRadius(radius: number): Node;
|
||||
cache(config?: CacheConfig): Node;
|
||||
clearCache(): Node;
|
||||
clear(bounds?: ClearConfig): Node;
|
||||
clone(attrs?: NodeConfig): Node;
|
||||
destroy(): void;
|
||||
|
||||
dragBoundFunc() : Function;
|
||||
dragBoundFunc(dragBoundFunc: Function) : Node;
|
||||
draggable() : boolean;
|
||||
draggable(draggable: boolean) : Node;
|
||||
draw() : Node;
|
||||
embossBlend() : boolean;
|
||||
embossBlend(embossBlend: boolean) : Node;
|
||||
embossDirection() : string;
|
||||
embossDirection(embossDirection: string) : Node;
|
||||
embossStrength() : number;
|
||||
embossStrength(level: number) : Node;
|
||||
embossWhiteLevel() : number;
|
||||
embossWhiteLevel(embossWhiteLevel: number) : Node;
|
||||
enhance() : number;
|
||||
enhance(enhance: number) : Node;
|
||||
filters() : Filter[];
|
||||
filters(filters : Filter) : Node;
|
||||
fire(eventType: string, evt?: any, bubble?: boolean) : Node;
|
||||
dragBoundFunc(): Function;
|
||||
dragBoundFunc(dragBoundFunc: Function): Node;
|
||||
draggable(): boolean;
|
||||
draggable(draggable: boolean): Node;
|
||||
draw(): Node;
|
||||
embossBlend(): boolean;
|
||||
embossBlend(embossBlend: boolean): Node;
|
||||
embossDirection(): string;
|
||||
embossDirection(embossDirection: string): Node;
|
||||
embossStrength(): number;
|
||||
embossStrength(level: number): Node;
|
||||
embossWhiteLevel(): number;
|
||||
embossWhiteLevel(embossWhiteLevel: number): Node;
|
||||
enhance(): number;
|
||||
enhance(enhance: number): Node;
|
||||
filters(): Filter[];
|
||||
filters(filters: Filter): Node;
|
||||
fire(eventType: string, evt?: any, bubble?: boolean): Node;
|
||||
getAbsoluteOpacity(): number;
|
||||
getAbsolutePosition(): Vector2d;
|
||||
getAbsoluteTransform(): Transform;
|
||||
getAbsoluteZIndex(): number;
|
||||
getAncestors() : Collection;
|
||||
getAncestors(): Collection;
|
||||
getAttr(attr: string): any;
|
||||
getAttrs(): NodeConfig;
|
||||
// CHECK
|
||||
getCanvas() : Canvas;
|
||||
getClassName() : string;
|
||||
getCanvas(): Canvas;
|
||||
getClassName(): string;
|
||||
getClientRect(): SizeConfig;
|
||||
getContext() : Context;
|
||||
getDepth() : number;
|
||||
getHeight() : number;
|
||||
getHitCanvas() : Canvas;
|
||||
getLayer() : Layer;
|
||||
getParent() : Container;
|
||||
getContext(): Context;
|
||||
getDepth(): number;
|
||||
getHeight(): number;
|
||||
getHitCanvas(): Canvas;
|
||||
getLayer(): Layer;
|
||||
getParent(): Container;
|
||||
// CHECK
|
||||
getSize() : {
|
||||
width : number;
|
||||
height : number;
|
||||
getSize(): {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
getStage() : Stage;
|
||||
getTransform() : Transform;
|
||||
getType() : String;
|
||||
getWidth() : number;
|
||||
getStage(): Stage;
|
||||
getTransform(): Transform;
|
||||
getType(): String;
|
||||
getWidth(): number;
|
||||
getZIndex(): number;
|
||||
green() : number;
|
||||
green(green: number) : Node;
|
||||
height() : number;
|
||||
height(height: number) : Node;
|
||||
green(): number;
|
||||
green(green: number): Node;
|
||||
height(): number;
|
||||
height(height: number): Node;
|
||||
hide(): void;
|
||||
hue() : number;
|
||||
hue(hue: number) : Node;
|
||||
id() : string;
|
||||
id(id: string) : Node;
|
||||
hue(): number;
|
||||
hue(hue: number): Node;
|
||||
id(): string;
|
||||
id(id: string): Node;
|
||||
isDragging(): boolean;
|
||||
isListening(): boolean;
|
||||
isVisible(): boolean;
|
||||
kaleidoscopeAngle() : number;
|
||||
kaleidoscopeAngle(kaleidoscopeAngle: number) : Node;
|
||||
kaleidoscopePower() : number;
|
||||
kaleidoscopePower(kaleidoscopePower: number) : Node;
|
||||
levels() : number;
|
||||
levels(levels: number) : Node;
|
||||
listening() : any;
|
||||
listening(listening: boolean) : Node;
|
||||
listening(listening : string) : Node;
|
||||
move(move : Vector2d) : Node;
|
||||
moveDown() : boolean;
|
||||
kaleidoscopeAngle(): number;
|
||||
kaleidoscopeAngle(kaleidoscopeAngle: number): Node;
|
||||
kaleidoscopePower(): number;
|
||||
kaleidoscopePower(kaleidoscopePower: number): Node;
|
||||
levels(): number;
|
||||
levels(levels: number): Node;
|
||||
listening(): any;
|
||||
listening(listening: boolean): Node;
|
||||
listening(listening: string): Node;
|
||||
move(move: Vector2d): Node;
|
||||
moveDown(): boolean;
|
||||
moveTo(newContainer: Container): Node;
|
||||
moveToBottom(): boolean;
|
||||
moveToTop(): boolean;
|
||||
moveUp(): boolean;
|
||||
name() : string;
|
||||
name(name: string) : Node;
|
||||
noise() : number;
|
||||
noise(noise: number) : Node;
|
||||
off(evtStr : string) : Node;
|
||||
offset() : Vector2d;
|
||||
offset(offset: Vector2d) : Node;
|
||||
offsetX() : number;
|
||||
offsetX(offsetX: number) : Node;
|
||||
offsetY() : number;
|
||||
offsetY(offsetY: number) : Node;
|
||||
on(evtStr : string, handler: Function) : Node;
|
||||
opacity() : number;
|
||||
opacity(opacity: number) : Node;
|
||||
pixelSize() : number;
|
||||
pixelSize(pixelSize: number) : Node;
|
||||
position() : Vector2d;
|
||||
position(position: Vector2d) : Node;
|
||||
name(): string;
|
||||
name(name: string): Node;
|
||||
noise(): number;
|
||||
noise(noise: number): Node;
|
||||
off(evtStr: string): Node;
|
||||
offset(): Vector2d;
|
||||
offset(offset: Vector2d): Node;
|
||||
offsetX(): number;
|
||||
offsetX(offsetX: number): Node;
|
||||
offsetY(): number;
|
||||
offsetY(offsetY: number): Node;
|
||||
on(evtStr: string, handler: Function): Node;
|
||||
opacity(): number;
|
||||
opacity(opacity: number): Node;
|
||||
pixelSize(): number;
|
||||
pixelSize(pixelSize: number): Node;
|
||||
position(): Vector2d;
|
||||
position(position: Vector2d): Node;
|
||||
preventDefault(): boolean;
|
||||
preventDefault(preventDefault: boolean): Node;
|
||||
red() : number;
|
||||
red(red: number) : Node;
|
||||
remove() : Node;
|
||||
rotate(theta : number) : Node;
|
||||
rotation() : number;
|
||||
rotation(rotation: number) : Node;
|
||||
saturation() : number;
|
||||
saturation(saturation: number) : Node;
|
||||
scale() : Vector2d;
|
||||
scale(scale: Vector2d) : Node;
|
||||
scaleX() : number;
|
||||
scaleX(scaleX: number) : Node;
|
||||
scaleY() : number;
|
||||
scaleY(scaleY: number) : Node;
|
||||
setAbsolutePosition(pos : Vector2d) : Node;
|
||||
setAttr(attr: string, val : any): Node;
|
||||
setAttrs(attrs: NodeConfig) : void;
|
||||
setId(id: string) : Node;
|
||||
setSize(size: {width:number; height: number}) : Node;
|
||||
red(): number;
|
||||
red(red: number): Node;
|
||||
remove(): Node;
|
||||
rotate(theta: number): Node;
|
||||
rotation(): number;
|
||||
rotation(rotation: number): Node;
|
||||
saturation(): number;
|
||||
saturation(saturation: number): Node;
|
||||
scale(): Vector2d;
|
||||
scale(scale: Vector2d): Node;
|
||||
scaleX(): number;
|
||||
scaleX(scaleX: number): Node;
|
||||
scaleY(): number;
|
||||
scaleY(scaleY: number): Node;
|
||||
setAbsolutePosition(pos: Vector2d): Node;
|
||||
setAttr(attr: string, val: any): Node;
|
||||
setAttrs(attrs: NodeConfig): void;
|
||||
setId(id: string): Node;
|
||||
setSize(size: { width: number; height: number }): Node;
|
||||
setZIndex(zIndex: number): void;
|
||||
shouldDrawHit() : boolean;
|
||||
show() : Node;
|
||||
skew() : Vector2d;
|
||||
skew(skew: Vector2d) : Node;
|
||||
skewX() : number;
|
||||
skewX(skewX: number) : Node;
|
||||
skewY() : number;
|
||||
skewY(skewY: number) : Node;
|
||||
startDrag() : void;
|
||||
stopDrag() : void;
|
||||
threshold() : number;
|
||||
threshold(threshold: number) : Node;
|
||||
toDataURL(config: ToDataURLConfig) : string;
|
||||
toImage(config: ToDataURLConfig) : HTMLImageElement;
|
||||
toJSON() : string;
|
||||
toObject() : any;
|
||||
transformsEnabled() : string;
|
||||
transformsEnabled(transformsEnabled: string) : Node;
|
||||
value() : number;
|
||||
value(value: number) : Node;
|
||||
visible() : any;
|
||||
visible(visible: boolean) : Node;
|
||||
visible(visible: string) : Node;
|
||||
width() : number;
|
||||
width(width: number) : Node;
|
||||
x() : number;
|
||||
x(x: number) : Node;
|
||||
y() : number;
|
||||
y(y: number) : Node;
|
||||
shouldDrawHit(): boolean;
|
||||
show(): Node;
|
||||
skew(): Vector2d;
|
||||
skew(skew: Vector2d): Node;
|
||||
skewX(): number;
|
||||
skewX(skewX: number): Node;
|
||||
skewY(): number;
|
||||
skewY(skewY: number): Node;
|
||||
startDrag(): void;
|
||||
stopDrag(): void;
|
||||
threshold(): number;
|
||||
threshold(threshold: number): Node;
|
||||
toDataURL(config: ToDataURLConfig): string;
|
||||
toImage(config: ToDataURLConfig): HTMLImageElement;
|
||||
toJSON(): string;
|
||||
toObject(): any;
|
||||
transformsEnabled(): string;
|
||||
transformsEnabled(transformsEnabled: string): Node;
|
||||
value(): number;
|
||||
value(value: number): Node;
|
||||
visible(): any;
|
||||
visible(visible: boolean): Node;
|
||||
visible(visible: string): Node;
|
||||
width(): number;
|
||||
width(width: number): Node;
|
||||
x(): number;
|
||||
x(x: number): Node;
|
||||
y(): number;
|
||||
y(y: number): Node;
|
||||
}
|
||||
|
||||
interface ContainerConfig extends NodeConfig {
|
||||
clearBeforeDraw?: boolean;
|
||||
clipFunc?: Function;
|
||||
clipFunc?: (ctx: CanvasRenderingContext2D) => void;
|
||||
}
|
||||
|
||||
class Container extends Node {
|
||||
constructor(params?: ContainerConfig);
|
||||
add(child : Node): Container;
|
||||
getChildren(filterfunc?: Function) : Collection;
|
||||
add(child: Node): Container;
|
||||
getChildren(filterfunc?: Function): Collection;
|
||||
clip(): SizeConfig;
|
||||
clip(clip: SizeConfig) : Container;
|
||||
clip(clip: SizeConfig): Container;
|
||||
clipHeight(): number;
|
||||
clipHeight(clipHeight: number) : Container;
|
||||
clipHeight(clipHeight: number): Container;
|
||||
clipWidth(): number;
|
||||
clipWidth(clipWidth: number) : Container;
|
||||
clipWidth(clipWidth: number): Container;
|
||||
clipX(): number;
|
||||
clipX(clipX: number) : Container;
|
||||
clipX(clipX: number): Container;
|
||||
clipY(): number;
|
||||
clipY(clipY: number) : Container;
|
||||
clipFunct(): number;
|
||||
clipFunct(clipFunc: Function) : Container;
|
||||
destroyChildren() : void;
|
||||
find(selector? : string): Collection;
|
||||
clipY(clipY: number): Container;
|
||||
clipFunc(): (ctx: CanvasRenderingContext2D) => void;
|
||||
clipFunc(ctx: CanvasRenderingContext2D): void;
|
||||
destroyChildren(): void;
|
||||
find(selector?: string): Collection;
|
||||
getAllIntersections(pos: Vector2d): Node[];
|
||||
hasChildren() : boolean;
|
||||
removeChildren() : void;
|
||||
hasChildren(): boolean;
|
||||
removeChildren(): void;
|
||||
}
|
||||
|
||||
interface ShapeConfig extends NodeConfig {
|
||||
@@ -310,14 +310,14 @@ declare module Konva {
|
||||
fillLinearGradientStartPoint?: Vector2d;
|
||||
fillLinearGradientStartPointX?: number;
|
||||
fillLinearGradientStartPointY?: number;
|
||||
fillLinearGradientEndPoint? : Vector2d;
|
||||
fillLinearGradientEndPoint?: Vector2d;
|
||||
fillLinearGradientEndPointX?: number;
|
||||
fillLinearGradientEndPointY?: number;
|
||||
fillLinearGradientColorStops?: Array<number | string>;
|
||||
fillLinearRadialStartPoint?: Vector2d;
|
||||
fillLinearRadialStartPointX?: number;
|
||||
fillLinearRadialStartPointY?: number;
|
||||
fillLinearRadialEndPoint? : Vector2d;
|
||||
fillLinearRadialEndPoint?: Vector2d;
|
||||
fillLinearRadialEndPointX?: number;
|
||||
fillLinearRadialEndPointY?: number;
|
||||
fillRadialGradientStartRadius?: number;
|
||||
@@ -331,14 +331,14 @@ declare module Konva {
|
||||
strokeEnabled?: boolean;
|
||||
lineJoin?: string;
|
||||
lineCap?: string;
|
||||
sceneFunc? : (con : Context) => void;
|
||||
hitFunc? : (con : Context) => void;
|
||||
drawFunc? : (con : Context) => void;
|
||||
sceneFunc?: (con: Context) => void;
|
||||
hitFunc?: (con: Context) => void;
|
||||
drawFunc?: (con: Context) => void;
|
||||
shadowColor?: string;
|
||||
shadowBlur?: number;
|
||||
shadowOffset? : Vector2d;
|
||||
shadowOffsetX? : number;
|
||||
shadowOffsetY? : number;
|
||||
shadowOffset?: Vector2d;
|
||||
shadowOffsetX?: number;
|
||||
shadowOffsetY?: number;
|
||||
shadowOpacity?: number;
|
||||
shadowEnabled?: boolean;
|
||||
dash?: number[];
|
||||
@@ -346,26 +346,26 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Shape extends Node {
|
||||
constructor(ShapeConfig : ShapeConfig);
|
||||
dash() : number[];
|
||||
constructor(ShapeConfig: ShapeConfig);
|
||||
dash(): number[];
|
||||
dash(dash: number[]): Shape;
|
||||
dashEnabled() : boolean;
|
||||
dashEnabled(): boolean;
|
||||
dashEnabled(dashEnabled: boolean): Shape;
|
||||
drawHitFromCache(alphaThreshold: number): Shape;
|
||||
fill() : string;
|
||||
fill(): string;
|
||||
fill(fill: string): Shape;
|
||||
fillEnabled() : boolean;
|
||||
fillEnabled(): boolean;
|
||||
fillEnabled(fillEnabled: boolean): Shape;
|
||||
fillLinearGradientColorStops() : Array<number|string>;
|
||||
fillLinearGradientColorStops(colors: Array<number|string>): Shape;
|
||||
fillLinearGradientColorStops(): Array<number | string>;
|
||||
fillLinearGradientColorStops(colors: Array<number | string>): Shape;
|
||||
fillLinearGradientStartPoint(): Vector2d;
|
||||
fillLinearGradientStartPoint(point: Vector2d): Vector2d;
|
||||
fillLinearGradientStartPointX(): number;
|
||||
fillLinearGradientStartPointX(x: number): Shape;
|
||||
fillLinearGradientStartPointY(): number;
|
||||
fillLinearGradientStartPointY(y: number): Shape;
|
||||
fillLinearGradientEndPoint() : Vector2d;
|
||||
fillLinearGradientEndPoint(point: Vector2d) : Shape;
|
||||
fillLinearGradientEndPoint(): Vector2d;
|
||||
fillLinearGradientEndPoint(point: Vector2d): Shape;
|
||||
fillLinearGradientEndPointX(): number;
|
||||
fillLinearGradientEndPointX(x: number): Shape;
|
||||
fillLinearGradientEndPointY(): number;
|
||||
@@ -376,8 +376,8 @@ declare module Konva {
|
||||
fillLinearRadialStartPointX(x: number): Shape;
|
||||
fillLinearRadialStartPointY(): number;
|
||||
fillLinearRadialStartPointY(y: number): Shape;
|
||||
fillLinearRadialEndPoint() : Vector2d;
|
||||
fillLinearRadialEndPoint(point: Vector2d) : Vector2d;
|
||||
fillLinearRadialEndPoint(): Vector2d;
|
||||
fillLinearRadialEndPoint(point: Vector2d): Vector2d;
|
||||
fillLinearRadialEndPointX(): number;
|
||||
fillLinearRadialEndPointX(x: number): Shape;
|
||||
fillLinearRadialEndPointY(): number;
|
||||
@@ -388,20 +388,20 @@ declare module Konva {
|
||||
fillRadialGradientStartRadius(radius: number): Shape;
|
||||
fillRadialGradientEndRadius(): number;
|
||||
fillRadialGradientEndRadius(radius: number): Shape;
|
||||
fillRadialGradientColorStops(): Array<number|string>;
|
||||
fillRadialGradientColorStops(color: Array<number|string>): Shape;
|
||||
fillRadialGradientColorStops(): Array<number | string>;
|
||||
fillRadialGradientColorStops(color: Array<number | string>): Shape;
|
||||
fillPatternOffset(): Vector2d;
|
||||
fillPatternOffset(offset: Vector2d) : Shape;
|
||||
fillPatternOffset(offset: Vector2d): Shape;
|
||||
fillPatternOffsetX(): number;
|
||||
fillPatternOffsetX(x: number): Shape;
|
||||
fillPatternOffsetY(): number;
|
||||
fillPatternOffsetY(y: number): Shape;
|
||||
fillPatternRepeat() : string;
|
||||
fillPatternRepeat(): string;
|
||||
fillPatternRepeat(repeat: string): Shape;
|
||||
fillPatternRotation(): number;
|
||||
fillPatternRotation(rotation: number): Shape;
|
||||
fillPatternScale(): Vector2d;
|
||||
fillPatternScale(scale: Vector2d) : Shape;
|
||||
fillPatternScale(scale: Vector2d): Shape;
|
||||
fillPatternScaleX(): number;
|
||||
fillPatternScaleX(x: number): Shape;
|
||||
fillPatternScaleY(): number;
|
||||
@@ -418,35 +418,35 @@ declare module Konva {
|
||||
hitFunc(): Function;
|
||||
hitFunc(func: Function): Shape;
|
||||
intersects(point: Vector2d): boolean;
|
||||
lineCap() : string;
|
||||
lineCap(): string;
|
||||
lineCap(lineCap: string): Shape;
|
||||
lineJoin() : string;
|
||||
lineJoin(): string;
|
||||
lineJoin(lineJoin: string): Shape;
|
||||
sceneFunc(): Function;
|
||||
sceneFunc(func: (con : Context) => {}): Shape;
|
||||
shadowColor() : string;
|
||||
sceneFunc(func: (con: Context) => {}): Shape;
|
||||
shadowColor(): string;
|
||||
shadowColor(shadowColor: string): Shape;
|
||||
shadowEnabled() : boolean;
|
||||
shadowEnabled(): boolean;
|
||||
shadowEnabled(shadowEnabled: boolean): Shape;
|
||||
shadowOffset() : Vector2d;
|
||||
shadowOffset(): Vector2d;
|
||||
shadowOffset(shadowOffset: Vector2d): Shape;
|
||||
shadowOffsetX() : number;
|
||||
shadowOffsetX(): number;
|
||||
shadowOffsetX(shadowOffsetX: number): Shape;
|
||||
shadowOffsetY() : number;
|
||||
shadowOffsetY(): number;
|
||||
shadowOffsetY(shadowOffsetY: number): Shape;
|
||||
shadowOpacity() : number;
|
||||
shadowOpacity(): number;
|
||||
shadowOpacity(shadowOpacity: number): Shape;
|
||||
shadowBlur() : number;
|
||||
shadowBlur(): number;
|
||||
shadowBlur(blur: number): Shape;
|
||||
stroke() : string;
|
||||
stroke(): string;
|
||||
stroke(stroke: string): Shape;
|
||||
strokeEnabled() : boolean;
|
||||
strokeEnabled(): boolean;
|
||||
strokeEnabled(strokeEnabled: boolean): Shape;
|
||||
strokeScaleEnabled() : boolean;
|
||||
strokeScaleEnabled(): boolean;
|
||||
strokeScaleEnabled(strokeScaleEnabled: boolean): Shape;
|
||||
strokeHitEnabled() : boolean;
|
||||
strokeHitEnabled(): boolean;
|
||||
strokeHitEnabled(strokeHitEnabled: boolean): Shape;
|
||||
strokeWidth() : number;
|
||||
strokeWidth(): number;
|
||||
strokeWidth(strokeWidth: number): Shape;
|
||||
}
|
||||
|
||||
@@ -455,35 +455,43 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Stage extends Container {
|
||||
constructor(StageConfig : StageConfig);
|
||||
constructor(StageConfig: StageConfig);
|
||||
add(layer: Layer): Stage;
|
||||
add(layer: FastLayer): Stage;
|
||||
batchDraw(): void;
|
||||
container(): HTMLElement;
|
||||
destroy() : void;
|
||||
destroy(): void;
|
||||
drawHit(): void;
|
||||
getIntersection(pos: Vector2d) : Shape;
|
||||
getIntersection(pos: Vector2d): Shape;
|
||||
getLayers(): Layer[];
|
||||
getPointerPosition(): Vector2d;
|
||||
setContainer(con: HTMLElement): void;
|
||||
setHeight(height: number) : void;
|
||||
setWidth(width: number) : void;
|
||||
setHeight(height: number): void;
|
||||
setWidth(width: number): void;
|
||||
}
|
||||
|
||||
interface LayerConfig extends ContainerConfig {
|
||||
clearBeforeDraw?: boolean;
|
||||
}
|
||||
|
||||
class FastLayer extends Container {
|
||||
constructor (config?: ContainerConfig);
|
||||
drawScene(): void;
|
||||
hitGraphEnabled(val: boolean): FastLayer;
|
||||
batchDraw(): void;
|
||||
}
|
||||
|
||||
class Layer extends Container {
|
||||
constructor (config?: LayerConfig);
|
||||
constructor(config?: LayerConfig);
|
||||
getIntersection(pos: Vector2d): Shape;
|
||||
enableHitGraph(): Layer;
|
||||
disableHitGraph(): Layer;
|
||||
clearBeforeDraw() : boolean;
|
||||
clearBeforeDraw(): boolean;
|
||||
clearBeforeDraw(val: boolean): Layer;
|
||||
hitGraphEnabled(): boolean;
|
||||
hitGraphEnabled(val: boolean): Layer;
|
||||
batchDraw(): void;
|
||||
drawScene() : void;
|
||||
drawScene(): void;
|
||||
}
|
||||
|
||||
class Group extends Container {
|
||||
@@ -497,32 +505,32 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Canvas {
|
||||
constructor(CanvasConfig : CanvasConfig);
|
||||
constructor(CanvasConfig: CanvasConfig);
|
||||
getContext(): CanvasRenderingContext2D;
|
||||
getHeight(): number;
|
||||
getWidth(): number;
|
||||
getPixelRatio(): number;
|
||||
setHeight(val: number) : void;
|
||||
setWidth(val: number) : void ;
|
||||
setPixelRatio(val: number) : void;
|
||||
setSize(size: {width:number; height: number}) : void;
|
||||
toDataURL(mimeType: string, quality: number) : string;
|
||||
public _canvas : HTMLElement;
|
||||
setHeight(val: number): void;
|
||||
setWidth(val: number): void;
|
||||
setPixelRatio(val: number): void;
|
||||
setSize(size: { width: number; height: number }): void;
|
||||
toDataURL(mimeType: string, quality: number): string;
|
||||
public _canvas: HTMLElement;
|
||||
}
|
||||
|
||||
class Context {
|
||||
clear(bounds?: ClearConfig) : Context;
|
||||
clear(bounds?: ClearConfig): Context;
|
||||
clearTrace(): void;
|
||||
fillShape(shape: Shape): void;
|
||||
fillStrokeShape(shape: Shape): void;
|
||||
getCanvas() : Canvas;
|
||||
getCanvas(): Canvas;
|
||||
getTrace(relaxed: boolean): string;
|
||||
reset(): void;
|
||||
moveTo(x : number, y : number) : void;
|
||||
lineTo(x : number, y : number) : void;
|
||||
beginPath() : void;
|
||||
setAttr(attr : string, value : any) : void;
|
||||
closePath() : void;
|
||||
moveTo(x: number, y: number): void;
|
||||
lineTo(x: number, y: number): void;
|
||||
beginPath(): void;
|
||||
setAttr(attr: string, value: any): void;
|
||||
closePath(): void;
|
||||
strokeShape(shape: Shape): void;
|
||||
}
|
||||
|
||||
@@ -546,23 +554,30 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Ring extends Shape {
|
||||
constructor(RingConfig : RingConfig);
|
||||
angle(): number;
|
||||
angle(angle: number): Ring;
|
||||
constructor(RingConfig: RingConfig);
|
||||
innerRadius(): number;
|
||||
innerRadius(innerRadius: number): Ring;
|
||||
outerRadius(): number;
|
||||
outerRadius(outerRadius: number): Ring;
|
||||
}
|
||||
|
||||
interface ArcConfig extends RingConfig {
|
||||
interface ArcConfig extends ShapeConfig {
|
||||
angle: number;
|
||||
innerRadius: number;
|
||||
outerRadius: number;
|
||||
clockwise?: boolean;
|
||||
}
|
||||
|
||||
class Arc extends Shape {
|
||||
constructor(ArcConfig : ArcConfig);
|
||||
constructor(ArcConfig: ArcConfig);
|
||||
angle(): number;
|
||||
angle(angle: number): Ring;
|
||||
clockwise(): boolean;
|
||||
clockwise(clockwise: boolean): Arc;
|
||||
innerRadius(): number;
|
||||
innerRadius(innerRadius: number): Arc;
|
||||
outerRadius(): number;
|
||||
outerRadius(outerRadius: number): Arc;
|
||||
}
|
||||
|
||||
interface CircleConfig extends ShapeConfig {
|
||||
@@ -570,7 +585,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Circle extends Shape {
|
||||
constructor(CircleConfig : CircleConfig);
|
||||
constructor(CircleConfig: CircleConfig);
|
||||
radius(): number;
|
||||
radius(radius: number): Circle;
|
||||
}
|
||||
@@ -580,7 +595,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Ellipse extends Shape {
|
||||
constructor(EllipseConfig : EllipseConfig);
|
||||
constructor(EllipseConfig: EllipseConfig);
|
||||
radius(): any;
|
||||
radius(radius: any): Ellipse;
|
||||
radiusX(): number;
|
||||
@@ -595,7 +610,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Image extends Shape {
|
||||
constructor(ImageConfig : ImageConfig);
|
||||
constructor(ImageConfig: ImageConfig);
|
||||
image(): HTMLImageElement;
|
||||
image(image: HTMLImageElement): Image;
|
||||
crop(): SizeConfig;
|
||||
@@ -617,7 +632,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Line extends Shape {
|
||||
constructor(LineConfig : LineConfig);
|
||||
constructor(LineConfig: LineConfig);
|
||||
closed(): boolean;
|
||||
closed(closed: boolean): Line;
|
||||
tension(): number;
|
||||
@@ -635,7 +650,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Arrow extends Shape {
|
||||
constructor(ArrowConfig : ArrowConfig);
|
||||
constructor(ArrowConfig: ArrowConfig);
|
||||
closed(): boolean;
|
||||
closed(closed: boolean): Arrow;
|
||||
tension(): number;
|
||||
@@ -653,7 +668,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Rect extends Shape {
|
||||
constructor(RectConfig : RectConfig);
|
||||
constructor(RectConfig: RectConfig);
|
||||
cornerRadius(): number;
|
||||
cornerRadius(cornerRadius: number): Rect;
|
||||
}
|
||||
@@ -666,7 +681,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Sprite extends Shape {
|
||||
constructor(SpriteConfig : SpriteConfig);
|
||||
constructor(SpriteConfig: SpriteConfig);
|
||||
start(): void;
|
||||
stop(): void;
|
||||
animation(): string;
|
||||
@@ -693,7 +708,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Text extends Shape {
|
||||
constructor(TextConfig : TextConfig);
|
||||
constructor(TextConfig: TextConfig);
|
||||
getTextWidth(): number;
|
||||
getTextHeight(): number;
|
||||
text(): string;
|
||||
@@ -723,7 +738,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Wedge extends Shape {
|
||||
constructor(WedgeConfig : WedgeConfig);
|
||||
constructor(WedgeConfig: WedgeConfig);
|
||||
angle(): number;
|
||||
angle(angle: number): Wedge;
|
||||
radius(): number;
|
||||
@@ -737,11 +752,11 @@ declare module Konva {
|
||||
pointerDirection?: string;
|
||||
pointerWidth?: number;
|
||||
pointerHeight?: number;
|
||||
cornerRadius?:number;
|
||||
cornerRadius?: number;
|
||||
}
|
||||
|
||||
class Tag extends Shape {
|
||||
constructor(config : TagConfig);
|
||||
constructor(config: TagConfig);
|
||||
pointerDirection(): string;
|
||||
pointerDirection(pointerDirection: string): Tag;
|
||||
pointerWidth(): number;
|
||||
@@ -757,7 +772,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Label extends Group {
|
||||
constructor(LabelInterface : LabelInterface);
|
||||
constructor(LabelInterface: LabelInterface);
|
||||
getText(): Text;
|
||||
getTag(): Rect;
|
||||
}
|
||||
@@ -767,7 +782,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Path extends Shape {
|
||||
constructor(PathConfig : PathConfig);
|
||||
constructor(PathConfig: PathConfig);
|
||||
data(): string;
|
||||
data(data: string): Path;
|
||||
}
|
||||
@@ -778,7 +793,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class RegularPolygon extends Shape {
|
||||
constructor(RegularPolygonConfig : RegularPolygonConfig);
|
||||
constructor(RegularPolygonConfig: RegularPolygonConfig);
|
||||
sides(): number;
|
||||
sides(sides: number): RegularPolygon;
|
||||
radius(): number;
|
||||
@@ -792,7 +807,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class Star extends Shape {
|
||||
constructor(StarConfig : StarConfig);
|
||||
constructor(StarConfig: StarConfig);
|
||||
numPoints(): number;
|
||||
numPoints(numPoints: number): Star;
|
||||
innerRadius(): number;
|
||||
@@ -810,7 +825,7 @@ declare module Konva {
|
||||
}
|
||||
|
||||
class TextPath extends Shape {
|
||||
constructor(TextPathConfig : TextPathConfig);
|
||||
constructor(TextPathConfig: TextPathConfig);
|
||||
getTextWidth(): number;
|
||||
getTextHeight(): number;
|
||||
setText(text: string): void;
|
||||
@@ -826,25 +841,25 @@ declare module Konva {
|
||||
|
||||
|
||||
class Collection {
|
||||
[i : number] : any;
|
||||
[i: number]: any;
|
||||
static toCollection(arr: any[]): Collection;
|
||||
each(f: (el : Node) => void): void;
|
||||
toArray() : any[];
|
||||
each(f: (el: Node) => void): void;
|
||||
toArray(): any[];
|
||||
length: number;
|
||||
}
|
||||
|
||||
class Transform {
|
||||
copy(): Transform;
|
||||
getMatrix(): any[];
|
||||
getTranslation() : Vector2d;
|
||||
invert() : void;
|
||||
getTranslation(): Vector2d;
|
||||
invert(): void;
|
||||
multiply(matrix: any[]): void;
|
||||
point(point: Vector2d): Vector2d;
|
||||
rotate(deg: number) : void;
|
||||
scale(x: number, y: Number) : void;
|
||||
setAbsolutePosition() : void;
|
||||
skew(x: number, y: Number) : void;
|
||||
translate(x: number, y: Number) : void;
|
||||
rotate(deg: number): void;
|
||||
scale(x: number, y: Number): void;
|
||||
setAbsolutePosition(): void;
|
||||
skew(x: number, y: Number): void;
|
||||
translate(x: number, y: Number): void;
|
||||
}
|
||||
|
||||
|
||||
|
||||
14
konva.min.js
vendored
14
konva.min.js
vendored
File diff suppressed because one or more lines are too long
15
package.json
15
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "konva",
|
||||
"version": "1.4.0",
|
||||
"version": "1.6.3",
|
||||
"author": "Anton Lavrenov",
|
||||
"files": [
|
||||
"README.md",
|
||||
@@ -13,9 +13,11 @@
|
||||
"typings": "./konva.d.ts",
|
||||
"scripts": {
|
||||
"start": "gulp",
|
||||
"lint": "gulp lint",
|
||||
"build": "gulp build",
|
||||
"full-build": "gulp lint test build",
|
||||
"test": "gulp test"
|
||||
"test": "gulp test",
|
||||
"prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "3.5.0",
|
||||
@@ -25,12 +27,13 @@
|
||||
"gulp-eslint": "^3.0.1",
|
||||
"gulp-jscpd": "0.0.7",
|
||||
"gulp-jsdoc": "^0.1.5",
|
||||
"gulp-mocha-phantomjs": "^0.12.0",
|
||||
"gulp-mocha-phantomjs": "^0.12.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-replace": "^0.5.4",
|
||||
"gulp-uglify": "^2.0.0",
|
||||
"gulp-util": "^3.0.7",
|
||||
"mocha": "3.2.0"
|
||||
"gulp-uglify": "^2.1.2",
|
||||
"gulp-util": "^3.0.8",
|
||||
"mocha": "3.3.0",
|
||||
"prettier": "^1.2.2"
|
||||
},
|
||||
"keywords": [
|
||||
"canvas",
|
||||
|
||||
1134
src/Context.js
1134
src/Context.js
File diff suppressed because it is too large
Load Diff
2696
src/Node.js
2696
src/Node.js
File diff suppressed because it is too large
Load Diff
1077
src/Shape.js
1077
src/Shape.js
File diff suppressed because it is too large
Load Diff
1247
src/Stage.js
1247
src/Stage.js
File diff suppressed because it is too large
Load Diff
@@ -1,34 +1,25 @@
|
||||
suite('TouchEvents', function() {
|
||||
|
||||
// ======================================================
|
||||
test('stage content touch events', function() {
|
||||
// ======================================================
|
||||
test('stage content touch events', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var circleTouchstart =
|
||||
circleTouchend =
|
||||
stageContentTouchstart =
|
||||
stageContentTouchend =
|
||||
stageContentTouchmove =
|
||||
stageContentTap =
|
||||
stageContentDbltap =
|
||||
0;
|
||||
var circleTouchstart = (circleTouchend = stageContentTouchstart = stageContentTouchend = stageContentTouchmove = stageContentTap = stageContentDbltap = 0);
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
|
||||
circle.on('touchstart', function() {
|
||||
circleTouchstart++;
|
||||
});
|
||||
@@ -58,14 +49,16 @@ suite('TouchEvents', function() {
|
||||
});
|
||||
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
}]
|
||||
touches: [
|
||||
{
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
stage._touchend({
|
||||
touches: []
|
||||
touches: []
|
||||
});
|
||||
|
||||
assert.equal(circleTouchstart, 1, 1);
|
||||
@@ -75,219 +68,219 @@ suite('TouchEvents', function() {
|
||||
assert.equal(stageContentDbltap, 0, 5);
|
||||
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}]
|
||||
touches: [
|
||||
{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
stage._touchend({
|
||||
touches: []
|
||||
touches: []
|
||||
});
|
||||
|
||||
assert.equal(stageContentTouchstart, 2, 6);
|
||||
assert.equal(stageContentTouchend, 2, 7);
|
||||
assert.equal(stageContentDbltap, 1, 8);
|
||||
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('touchstart touchend touchmove tap dbltap', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
|
||||
// ======================================================
|
||||
test('touchstart touchend touchmove tap dbltap', function(done) {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
y: stage.getHeight() / 2,
|
||||
radius: 70,
|
||||
fill: 'red',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4
|
||||
});
|
||||
// mobile events
|
||||
var touchstart = false;
|
||||
var touchend = false;
|
||||
var tap = false;
|
||||
var touchmove = false;
|
||||
var dbltap = false;
|
||||
|
||||
|
||||
// mobile events
|
||||
var touchstart = false;
|
||||
var touchend = false;
|
||||
var tap = false;
|
||||
var touchmove = false;
|
||||
var dbltap = false;
|
||||
|
||||
|
||||
/*
|
||||
/*
|
||||
* mobile
|
||||
*/
|
||||
circle.on('touchstart', function() {
|
||||
touchstart = true;
|
||||
//log('touchstart');
|
||||
//alert('touchstart')
|
||||
});
|
||||
|
||||
circle.on('touchend', function() {
|
||||
touchend = true;
|
||||
//alert('touchend')
|
||||
//log('touchend');
|
||||
});
|
||||
|
||||
circle.on('touchmove', function() {
|
||||
touchmove = true;
|
||||
//log('touchmove');
|
||||
});
|
||||
|
||||
circle.on('tap', function(evt) {
|
||||
tap = true;
|
||||
//log('tap');
|
||||
});
|
||||
|
||||
circle.on('dbltap', function() {
|
||||
dbltap = true;
|
||||
//log('dbltap');
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
// reset inDoubleClickWindow
|
||||
Konva.inDblClickWindow = false;
|
||||
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 289,
|
||||
clientY: 100 + top,
|
||||
}],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
|
||||
assert(touchstart, '8) touchstart should be true');
|
||||
assert(!touchmove, '8) touchmove should be false');
|
||||
assert(!touchend, '8) touchend should be false');
|
||||
assert(!tap, '8) tap should be false');
|
||||
assert(!dbltap, '8) dbltap should be false');
|
||||
|
||||
// touchend circle
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '9) touchstart should be true');
|
||||
assert(!touchmove, '9) touchmove should be false');
|
||||
assert(touchend, '9) touchend should be true');
|
||||
assert(tap, '9) tap should be true');
|
||||
assert(!dbltap, '9) dbltap should be false');
|
||||
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 289,
|
||||
clientY: 100 + top,
|
||||
}],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
|
||||
assert(touchstart, '10) touchstart should be true');
|
||||
assert(!touchmove, '10) touchmove should be false');
|
||||
assert(touchend, '10) touchend should be true');
|
||||
assert(tap, '10) tap should be true');
|
||||
assert(!dbltap, '10) dbltap should be false');
|
||||
|
||||
// touchend circle to triger dbltap
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '11) touchstart should be true');
|
||||
assert(!touchmove, '11) touchmove should be false');
|
||||
assert(touchend, '11) touchend should be true');
|
||||
assert(tap, '11) tap should be true');
|
||||
assert(dbltap, '11) dbltap should be true');
|
||||
|
||||
setTimeout(function() {
|
||||
// touchmove circle
|
||||
stage._touchmove({
|
||||
touches: [{
|
||||
clientX: 290,
|
||||
clientY: 100 + top,
|
||||
}],
|
||||
preventDefault: function() {
|
||||
}
|
||||
});
|
||||
|
||||
assert(touchstart, '12) touchstart should be true');
|
||||
assert(touchmove, '12) touchmove should be true');
|
||||
assert(touchend, '12) touchend should be true');
|
||||
assert(tap, '12) tap should be true');
|
||||
assert(dbltap, '12) dbltap should be true');
|
||||
|
||||
done();
|
||||
}, 17);
|
||||
circle.on('touchstart', function() {
|
||||
touchstart = true;
|
||||
//log('touchstart');
|
||||
//alert('touchstart')
|
||||
});
|
||||
|
||||
// test for https://github.com/konvajs/konva/issues/156
|
||||
test("touchstart out of shape, then touch end inside shape", function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
});
|
||||
circle.on('touchend', function() {
|
||||
touchend = true;
|
||||
//alert('touchend')
|
||||
//log('touchend');
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
circle.on('touchmove', function() {
|
||||
touchmove = true;
|
||||
//log('touchmove');
|
||||
});
|
||||
|
||||
var circleTouchend =
|
||||
stageContentTouchstart =
|
||||
stageContentTouchend =
|
||||
0;
|
||||
circle.on('tap', function(evt) {
|
||||
tap = true;
|
||||
//log('tap');
|
||||
});
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
circle.on('dbltap', function() {
|
||||
dbltap = true;
|
||||
//log('dbltap');
|
||||
});
|
||||
|
||||
circle.on('touchend', function() {
|
||||
circleTouchend++;
|
||||
});
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
stage.on('contentTouchstart', function() {
|
||||
stageContentTouchstart++;
|
||||
});
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
stage.on('contentTouchend', function() {
|
||||
stageContentTouchend++;
|
||||
});
|
||||
// reset inDoubleClickWindow
|
||||
Konva.inDblClickWindow = false;
|
||||
|
||||
stage._touchstart({
|
||||
touches: [{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}]
|
||||
});
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [
|
||||
{
|
||||
clientX: 289,
|
||||
clientY: 100 + top
|
||||
}
|
||||
],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
|
||||
stage._touchend({
|
||||
touches: [{
|
||||
clientX: 100,
|
||||
assert(touchstart, '8) touchstart should be true');
|
||||
assert(!touchmove, '8) touchmove should be false');
|
||||
assert(!touchend, '8) touchend should be false');
|
||||
assert(!tap, '8) tap should be false');
|
||||
assert(!dbltap, '8) dbltap should be false');
|
||||
|
||||
// touchend circle
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '9) touchstart should be true');
|
||||
assert(!touchmove, '9) touchmove should be false');
|
||||
assert(touchend, '9) touchend should be true');
|
||||
assert(tap, '9) tap should be true');
|
||||
assert(!dbltap, '9) dbltap should be false');
|
||||
|
||||
// touchstart circle
|
||||
stage._touchstart({
|
||||
touches: [
|
||||
{
|
||||
clientX: 289,
|
||||
clientY: 100 + top
|
||||
}
|
||||
],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
|
||||
assert(touchstart, '10) touchstart should be true');
|
||||
assert(!touchmove, '10) touchmove should be false');
|
||||
assert(touchend, '10) touchend should be true');
|
||||
assert(tap, '10) tap should be true');
|
||||
assert(!dbltap, '10) dbltap should be false');
|
||||
|
||||
// touchend circle to triger dbltap
|
||||
stage._touchend({
|
||||
touches: [],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
// end drag is tied to document mouseup and touchend event
|
||||
// which can't be simulated. call _endDrag manually
|
||||
//Konva.DD._endDrag();
|
||||
|
||||
assert(touchstart, '11) touchstart should be true');
|
||||
assert(!touchmove, '11) touchmove should be false');
|
||||
assert(touchend, '11) touchend should be true');
|
||||
assert(tap, '11) tap should be true');
|
||||
assert(dbltap, '11) dbltap should be true');
|
||||
|
||||
setTimeout(function() {
|
||||
// touchmove circle
|
||||
stage._touchmove({
|
||||
touches: [
|
||||
{
|
||||
clientX: 290,
|
||||
clientY: 100 + top
|
||||
}]
|
||||
}
|
||||
],
|
||||
preventDefault: function() {}
|
||||
});
|
||||
|
||||
assert.equal(stageContentTouchstart, 1);
|
||||
assert.equal(stageContentTouchend, 1);
|
||||
assert.equal(circleTouchend, 1);
|
||||
assert(touchstart, '12) touchstart should be true');
|
||||
assert(touchmove, '12) touchmove should be true');
|
||||
assert(touchend, '12) touchend should be true');
|
||||
assert(tap, '12) tap should be true');
|
||||
assert(dbltap, '12) dbltap should be true');
|
||||
|
||||
done();
|
||||
}, 17);
|
||||
});
|
||||
|
||||
// test for https://github.com/konvajs/konva/issues/156
|
||||
test('touchstart out of shape, then touch end inside shape', function() {
|
||||
var stage = addStage();
|
||||
var layer = new Konva.Layer();
|
||||
var circle = new Konva.Circle({
|
||||
x: 100,
|
||||
y: 100,
|
||||
radius: 70,
|
||||
fill: 'green',
|
||||
stroke: 'black',
|
||||
strokeWidth: 4,
|
||||
name: 'myCircle'
|
||||
});
|
||||
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var circleTouchend = (stageContentTouchstart = stageContentTouchend = 0);
|
||||
|
||||
var top = stage.content.getBoundingClientRect().top;
|
||||
|
||||
circle.on('touchend', function() {
|
||||
circleTouchend++;
|
||||
});
|
||||
|
||||
stage.on('contentTouchstart', function() {
|
||||
stageContentTouchstart++;
|
||||
});
|
||||
|
||||
stage.on('contentTouchend', function() {
|
||||
stageContentTouchend++;
|
||||
});
|
||||
|
||||
stage._touchstart({
|
||||
touches: [
|
||||
{
|
||||
clientX: 1,
|
||||
clientY: 1 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
stage._touchend({
|
||||
touches: [
|
||||
{
|
||||
clientX: 100,
|
||||
clientY: 100 + top
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
assert.equal(stageContentTouchstart, 1);
|
||||
assert.equal(stageContentTouchend, 1);
|
||||
assert.equal(circleTouchend, 1);
|
||||
});
|
||||
});
|
||||
|
||||
277
test/runner.js
277
test/runner.js
@@ -1,23 +1,25 @@
|
||||
mocha.ui('tdd');
|
||||
mocha.setup("bdd");
|
||||
mocha.setup('bdd');
|
||||
var assert = chai.assert,
|
||||
konvaContainer = document.getElementById('konva-container'),
|
||||
origAssertEqual = assert.equal,
|
||||
origAssert = assert,
|
||||
origNotEqual = assert.notEqual,
|
||||
origDeepEqual = assert.deepEqual,
|
||||
assertionCount = 0,
|
||||
assertions = document.createElement('em');
|
||||
konvaContainer = document.getElementById('konva-container'),
|
||||
origAssertEqual = assert.equal,
|
||||
origAssert = assert,
|
||||
origNotEqual = assert.notEqual,
|
||||
origDeepEqual = assert.deepEqual,
|
||||
assertionCount = 0,
|
||||
assertions = document.createElement('em');
|
||||
|
||||
window.requestAnimFrame = (function(callback){
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback){
|
||||
window.requestAnimFrame = (function(callback) {
|
||||
return (
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback) {
|
||||
window.setTimeout(callback, 1000 / 30);
|
||||
};
|
||||
}
|
||||
);
|
||||
})();
|
||||
|
||||
function init() {
|
||||
@@ -35,10 +37,10 @@ function init() {
|
||||
assertions.innerHTML = ++assertionCount;
|
||||
};
|
||||
|
||||
assert.deepEqual = function() {
|
||||
origDeepEqual.apply(this, arguments);
|
||||
assertions.innerHTML = ++assertionCount;
|
||||
};
|
||||
assert.deepEqual = function() {
|
||||
origDeepEqual.apply(this, arguments);
|
||||
assertions.innerHTML = ++assertionCount;
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var mochaStats = document.getElementById('mocha-stats');
|
||||
@@ -55,132 +57,133 @@ function init() {
|
||||
li.appendChild(assertions);
|
||||
mochaStats.appendChild(li);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//addStats();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Konva.enableTrace = true;
|
||||
Konva.showWarnings = true;
|
||||
//Konva.pixelRatio = 2;
|
||||
window.isPhantomJS = /PhantomJS/.test(window.navigator.userAgent);
|
||||
|
||||
function addStats() {
|
||||
stats = new Stats();
|
||||
stats.setMode(0);
|
||||
stats.domElement.style.position = 'fixed';
|
||||
stats.domElement.style.left = '0px';
|
||||
stats.domElement.style.top = '0px';
|
||||
document.getElementsByTagName('body')[0].appendChild( stats.domElement );
|
||||
stats = new Stats();
|
||||
stats.setMode(0);
|
||||
stats.domElement.style.position = 'fixed';
|
||||
stats.domElement.style.left = '0px';
|
||||
stats.domElement.style.top = '0px';
|
||||
document.getElementsByTagName('body')[0].appendChild(stats.domElement);
|
||||
|
||||
function animate(lastTime) {
|
||||
stats.begin();
|
||||
|
||||
function animate(lastTime){
|
||||
stats.begin();
|
||||
requestAnimFrame(function() {
|
||||
stats.end();
|
||||
animate(lastTime);
|
||||
});
|
||||
}
|
||||
|
||||
requestAnimFrame(function(){
|
||||
stats.end();
|
||||
animate(lastTime);
|
||||
});
|
||||
}
|
||||
|
||||
animate();
|
||||
animate();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function addStage() {
|
||||
var container = document.createElement('div'),
|
||||
stage = new Konva.Stage({
|
||||
container: container,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
stage = new Konva.Stage({
|
||||
container: container,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
|
||||
konvaContainer.appendChild(container);
|
||||
return stage;
|
||||
}
|
||||
|
||||
function createCanvas() {
|
||||
var canvas = document.createElement('canvas');
|
||||
var ratio = (Konva.pixelRatio || window.devicePixelRatio);
|
||||
canvas.width = 578 * ratio;
|
||||
canvas.height = 200 * ratio;
|
||||
canvas.getContext('2d').scale(ratio, ratio);
|
||||
canvas.ratio = ratio;
|
||||
return canvas;
|
||||
var canvas = document.createElement('canvas');
|
||||
var ratio = Konva.pixelRatio || window.devicePixelRatio;
|
||||
canvas.width = 578 * ratio;
|
||||
canvas.height = 200 * ratio;
|
||||
canvas.getContext('2d').scale(ratio, ratio);
|
||||
canvas.ratio = ratio;
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function get (element, content) {
|
||||
element = document.createElement(element);
|
||||
if (element && content) {
|
||||
element.innerHTML = content;
|
||||
}
|
||||
return element;
|
||||
function get(element, content) {
|
||||
element = document.createElement(element);
|
||||
if (element && content) {
|
||||
element.innerHTML = content;
|
||||
}
|
||||
return element;
|
||||
}
|
||||
function compareCanvases(canvas1, canvas2, tol) {
|
||||
// don't test in PhantomJS as it use old chrome engine
|
||||
// it it has opacity + shadow bug
|
||||
var equal = imagediff.equal(canvas1, canvas2, tol);
|
||||
if (!equal) {
|
||||
var
|
||||
div = get('div'),
|
||||
b = get('div', '<div>Expected:</div>'),
|
||||
c = get('div', '<div>Diff:</div>'),
|
||||
diff = imagediff.diff(canvas1, canvas2),
|
||||
diffCanvas = get('canvas'),
|
||||
context;
|
||||
// don't test in PhantomJS as it use old chrome engine
|
||||
// it it has opacity + shadow bug
|
||||
var equal = imagediff.equal(canvas1, canvas2, tol);
|
||||
if (!equal) {
|
||||
var div = get('div'),
|
||||
b = get('div', '<div>Expected:</div>'),
|
||||
c = get('div', '<div>Diff:</div>'),
|
||||
diff = imagediff.diff(canvas1, canvas2),
|
||||
diffCanvas = get('canvas'),
|
||||
context;
|
||||
|
||||
diffCanvas.height = diff.height;
|
||||
diffCanvas.width = diff.width;
|
||||
diffCanvas.height = diff.height;
|
||||
diffCanvas.width = diff.width;
|
||||
|
||||
div.style.overflow = 'hidden';
|
||||
b.style.float = 'left';
|
||||
c.style.float = 'left';
|
||||
div.style.overflow = 'hidden';
|
||||
b.style.float = 'left';
|
||||
c.style.float = 'left';
|
||||
|
||||
canvas2.style.position = '';
|
||||
canvas2.style.display = '';
|
||||
canvas2.style.position = '';
|
||||
canvas2.style.display = '';
|
||||
|
||||
context = diffCanvas.getContext('2d');
|
||||
context.putImageData(diff, 0, 0);
|
||||
context = diffCanvas.getContext('2d');
|
||||
context.putImageData(diff, 0, 0);
|
||||
|
||||
b.appendChild(canvas2);
|
||||
c.appendChild(diffCanvas);
|
||||
b.appendChild(canvas2);
|
||||
c.appendChild(diffCanvas);
|
||||
|
||||
div.appendChild(b);
|
||||
div.appendChild(c);
|
||||
konvaContainer.appendChild(div);
|
||||
}
|
||||
assert.equal(equal, true, 'Result from Konva is different with canvas result');
|
||||
div.appendChild(b);
|
||||
div.appendChild(c);
|
||||
konvaContainer.appendChild(div);
|
||||
}
|
||||
assert.equal(
|
||||
equal,
|
||||
true,
|
||||
'Result from Konva is different with canvas result'
|
||||
);
|
||||
}
|
||||
|
||||
function compareLayerAndCanvas(layer, canvas, tol) {
|
||||
compareCanvases(layer.getCanvas()._canvas, canvas, tol);
|
||||
compareCanvases(layer.getCanvas()._canvas, canvas, tol);
|
||||
}
|
||||
|
||||
function compareLayers(layer1, layer2, tol) {
|
||||
compareLayerAndCanvas(layer1, layer2.getCanvas()._canvas, tol);
|
||||
compareLayerAndCanvas(layer1, layer2.getCanvas()._canvas, tol);
|
||||
}
|
||||
|
||||
function cloneAndCompareLayer(layer, tol) {
|
||||
var layer2 = layer.clone();
|
||||
layer.getStage().add(layer2);
|
||||
layer2.hide();
|
||||
compareLayers(layer, layer2, tol);
|
||||
var layer2 = layer.clone();
|
||||
layer.getStage().add(layer2);
|
||||
layer2.hide();
|
||||
compareLayers(layer, layer2, tol);
|
||||
}
|
||||
|
||||
function cloneAndCompareLayerWithHit(layer, tol) {
|
||||
var layer2 = layer.clone();
|
||||
layer.getStage().add(layer2);
|
||||
layer2.hide();
|
||||
compareLayers(layer, layer2, tol);
|
||||
compareCanvases(layer.getHitCanvas()._canvas, layer2.getHitCanvas()._canvas, tol);
|
||||
var layer2 = layer.clone();
|
||||
layer.getStage().add(layer2);
|
||||
layer2.hide();
|
||||
compareLayers(layer, layer2, tol);
|
||||
compareCanvases(
|
||||
layer.getHitCanvas()._canvas,
|
||||
layer2.getHitCanvas()._canvas,
|
||||
tol
|
||||
);
|
||||
}
|
||||
|
||||
function compareSceneAndHit(layer) {
|
||||
compareLayerAndCanvas(layer, layer.getHitCanvas()._canvas, 254);
|
||||
compareLayerAndCanvas(layer, layer.getHitCanvas()._canvas, 254);
|
||||
}
|
||||
|
||||
function addContainer() {
|
||||
@@ -203,66 +206,62 @@ function showHit(layer) {
|
||||
konvaContainer.appendChild(canvas);
|
||||
}
|
||||
|
||||
beforeEach(function(){
|
||||
var title = document.createElement('h2'),
|
||||
test = this.currentTest;
|
||||
beforeEach(function() {
|
||||
var title = document.createElement('h2'), test = this.currentTest;
|
||||
|
||||
title.innerHTML = test.parent.title + ' - ' + test.title;
|
||||
title.className = 'konva-title';
|
||||
konvaContainer.appendChild(title);
|
||||
title.innerHTML = test.parent.title + ' - ' + test.title;
|
||||
title.className = 'konva-title';
|
||||
konvaContainer.appendChild(title);
|
||||
|
||||
// resets
|
||||
Konva.inDblClickWindow = false;
|
||||
Konva.DD && (Konva.DD.isDragging = false);
|
||||
Konva.DD && (Konva.DD.node = undefined);
|
||||
// resets
|
||||
Konva.inDblClickWindow = false;
|
||||
Konva.DD && (Konva.DD.isDragging = false);
|
||||
Konva.DD && (Konva.DD.node = undefined);
|
||||
});
|
||||
|
||||
Konva.UA.mobile = false;
|
||||
|
||||
afterEach(function(){
|
||||
// Konva.stages.forEach(function(stage) {
|
||||
// stage.destroy();
|
||||
// });
|
||||
afterEach(function() {
|
||||
// Konva.stages.forEach(function(stage) {
|
||||
// stage.destroy();
|
||||
// });
|
||||
});
|
||||
|
||||
Konva.Stage.prototype.simulateMouseDown = function(pos) {
|
||||
var clientRect = this.content.getBoundingClientRect();
|
||||
var top = this.content.getBoundingClientRect().top;
|
||||
|
||||
this._mousedown({
|
||||
clientX: pos.x + clientRect.left,
|
||||
clientY: pos.y + clientRect.top,
|
||||
button: pos.button
|
||||
});
|
||||
this._mousedown({
|
||||
clientX: pos.x,
|
||||
clientY: pos.y + top,
|
||||
button: pos.button
|
||||
});
|
||||
};
|
||||
|
||||
Konva.Stage.prototype.simulateMouseMove = function(pos) {
|
||||
var clientRect = this.content.getBoundingClientRect();
|
||||
var top = this.content.getBoundingClientRect().top;
|
||||
|
||||
var evt = {
|
||||
clientX: pos.x + clientRect.left,
|
||||
clientY: pos.y + clientRect.top,
|
||||
button: pos.button
|
||||
};
|
||||
var evt = {
|
||||
clientX: pos.x,
|
||||
clientY: pos.y + top,
|
||||
button: pos.button
|
||||
};
|
||||
|
||||
this._mousemove(evt);
|
||||
Konva.DD._drag(evt);
|
||||
this._mousemove(evt);
|
||||
Konva.DD._drag(evt);
|
||||
};
|
||||
|
||||
Konva.Stage.prototype.simulateMouseUp = function(pos) {
|
||||
"use strict";
|
||||
var clientRect = this.content.getBoundingClientRect();
|
||||
var top = this.content.getBoundingClientRect().top;
|
||||
|
||||
var evt = {
|
||||
clientX: pos.x,
|
||||
clientY: pos.y + top,
|
||||
button: pos.button
|
||||
};
|
||||
|
||||
var evt = {
|
||||
clientX: pos.x + clientRect.left,
|
||||
clientY: pos.y + clientRect.top,
|
||||
button: pos.button
|
||||
};
|
||||
|
||||
|
||||
Konva.DD._endDragBefore(evt);
|
||||
this._mouseup(evt);
|
||||
Konva.DD._endDragAfter(evt);
|
||||
}
|
||||
Konva.DD._endDragBefore(evt);
|
||||
this._mouseup(evt);
|
||||
Konva.DD._endDragAfter(evt);
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user