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

remove inherit from listening property, deprecate FastLayer, font fixes.

Browse Source
This commit is contained in:
Anton Lavrenov 2020-05-14 11:13:47 -05:00
parent 6cc3224769
commit ee99044baa
23 changed files with 17529 additions and 18942 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -5,11 +5,17 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
* `inherit` option is removed from `visible` and `listening`. They now just have boolean values `true` or `false`. If you do `group.listeng(false);` then whole group and all its children will be removed from the hitgraph (and they will not listen to events);
* `layer.hitGraphEnabled()` is deprecated. Just use `layer.listening()` instead
* Some performance fixes and code size optimizations
* Better support for fonts with spaces inside (like `Font Awesome 5`).
## 6.0.0 - 2020-05-08
* **BREAKING!** `boundBoxFunc` of `Konva.Transformer` works in absolute coordinates of whole transformer. Previously in was working in local coordinates of transforming node.
* Many `Konva.Transformer` fixes. Now it works correctly when you transform several rotated shapes.
* Fix for wrong `mouseleave` and `mouseout` fire on shape remove/destroy;
* Fix for wrong `mouseleave` and `mouseout` fire on shape remove/destroy.
## 5.0.3 - 2020-05-01

34878
konva.js
View File

File diff suppressed because it is too large Load Diff

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

331
src/BaseLayer.ts
View File

@ -1,331 +0,0 @@
import { Util, Collection } from './Util';
import { Container, ContainerConfig } from './Container';
import { Node } from './Node';
import { Factory } from './Factory';
import { SceneCanvas, HitCanvas } from './Canvas';
import { Stage } from './Stage';
import { GetSet, Vector2d } from './types';
import { Group } from './Group';
import { Shape } from './Shape';
export interface LayerConfig extends ContainerConfig {
clearBeforeDraw?: boolean;
hitGraphEnabled?: boolean;
imageSmoothingEnabled?: boolean;
}
/**
* BaseLayer constructor.
* @constructor
* @memberof Konva
* @augments Konva.Container
* @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
* @@nodeParams
* @@containerParams
*/
export abstract class BaseLayer extends Container<Group | Shape> {
canvas = new SceneCanvas();
hitCanvas: HitCanvas;
_waitingForDraw = false;
constructor(config?: LayerConfig) {
super(config);
this.on('visibleChange', this._checkVisibility);
this._checkVisibility();
this.on('imageSmoothingEnabledChange', this._setSmoothEnabled);
this._setSmoothEnabled();
}
// for nodejs?
createPNGStream() {
const c = this.canvas._canvas as any;
return c.createPNGStream();
}
/**
* get layer canvas wrapper
* @method
* @name Konva.BaseLayer#getCanvas
*/
getCanvas() {
return this.canvas;
}
/**
* get layer hit canvas
* @method
* @name Konva.BaseLayer#getHitCanvas
*/
getHitCanvas() {
return this.hitCanvas;
}
/**
* get layer canvas context
* @method
* @name Konva.BaseLayer#getContext
*/
getContext() {
return this.getCanvas().getContext();
}
/**
* clear scene and hit canvas contexts tied to the layer.
* This function doesn't remove any nodes. It just clear canvas element.
* @method
* @name Konva.BaseLayer#clear
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
* @example
* layer.clear();
* layer.clear({
* x : 0,
* y : 0,
* width : 100,
* height : 100
* });
*/
clear(bounds?) {
this.getContext().clear(bounds);
return this;
}
// extend Node.prototype.setZIndex
setZIndex(index) {
super.setZIndex(index);
var stage = this.getStage();
if (stage) {
stage.content.removeChild(this.getCanvas()._canvas);
if (index < stage.children.length - 1) {
stage.content.insertBefore(
this.getCanvas()._canvas,
stage.children[index + 1].getCanvas()._canvas
);
} else {
stage.content.appendChild(this.getCanvas()._canvas);
}
}
return this;
}
moveToTop() {
Node.prototype.moveToTop.call(this);
var stage = this.getStage();
if (stage) {
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.appendChild(this.getCanvas()._canvas);
}
return true;
}
moveUp() {
var moved = Node.prototype.moveUp.call(this);
if (!moved) {
return false;
}
var stage = this.getStage();
if (!stage) {
return false;
}
stage.content.removeChild(this.getCanvas()._canvas);
if (this.index < stage.children.length - 1) {
stage.content.insertBefore(
this.getCanvas()._canvas,
stage.children[this.index + 1].getCanvas()._canvas
);
} else {
stage.content.appendChild(this.getCanvas()._canvas);
}
return true;
}
// extend Node.prototype.moveDown
moveDown() {
if (Node.prototype.moveDown.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(
this.getCanvas()._canvas,
children[this.index + 1].getCanvas()._canvas
);
}
return true;
}
return false;
}
// extend Node.prototype.moveToBottom
moveToBottom() {
if (Node.prototype.moveToBottom.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(
this.getCanvas()._canvas,
children[1].getCanvas()._canvas
);
}
return true;
}
return false;
}
getLayer() {
return this;
}
hitGraphEnabled() {
return true;
}
remove() {
var _canvas = this.getCanvas()._canvas;
Node.prototype.remove.call(this);
if (_canvas && _canvas.parentNode && Util._isInDocument(_canvas)) {
_canvas.parentNode.removeChild(_canvas);
}
return this;
}
getStage() {
return this.parent as Stage;
}
setSize({ width, height }) {
this.canvas.setSize(width, height);
this._setSmoothEnabled();
return this;
}
_toKonvaCanvas(config) {
config = config || {};
config.width = config.width || this.getWidth();
config.height = config.height || this.getHeight();
config.x = config.x !== undefined ? config.x : this.x();
config.y = config.y !== undefined ? config.y : this.y();
return Node.prototype._toKonvaCanvas.call(this, config);
}
_checkVisibility() {
const visible = this.visible();
if (visible) {
this.canvas._canvas.style.display = 'block';
} else {
this.canvas._canvas.style.display = 'none';
}
}
_setSmoothEnabled() {
this.getContext()._context.imageSmoothingEnabled = this.imageSmoothingEnabled();
}
/**
* get/set width of layer. getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);`
* @name Konva.BaseLayer#width
* @method
* @returns {Number}
* @example
* var width = layer.width();
*/
getWidth() {
if (this.parent) {
return this.parent.width();
}
}
setWidth() {
Util.warn(
'Can not change width of layer. Use "stage.width(value)" function instead.'
);
}
/**
* get/set height of layer.getter return height of stage. setter doing nothing.
* if you want change height use `stage.height(value);`
* @name Konva.BaseLayer#height
* @method
* @returns {Number}
* @example
* var height = layer.height();
*/
getHeight() {
if (this.parent) {
return this.parent.height();
}
}
setHeight() {
Util.warn(
'Can not change height of layer. Use "stage.height(value)" function instead.'
);
}
getIntersection(pos: Vector2d, selector?: string) {
return null;
}
/**
* batch draw. this function will not do immediate draw
* but it will schedule drawing to next tick (requestAnimFrame)
* @method
* @name Konva.BaseLayer#batchDraw
* @return {Konva.Layer} this
*/
batchDraw() {
if (!this._waitingForDraw) {
this._waitingForDraw = true;
Util.requestAnimFrame(() => {
this.draw();
this._waitingForDraw = false;
});
}
return this;
}
// the apply transform method is handled by the Layer and FastLayer class
// because it is up to the layer to decide if an absolute or relative transform
// should be used
_applyTransform(shape, context, top) {
var m = shape.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
clearBeforeDraw: GetSet<boolean, this>;
imageSmoothingEnabled: GetSet<boolean, this>;
}
BaseLayer.prototype.nodeType = 'BaseLayer';
/**
* get/set imageSmoothingEnabled flag
* For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
* @name Konva.BaseLayer#imageSmoothingEnabled
* @method
* @param {Boolean} imageSmoothingEnabled
* @returns {Boolean}
* @example
* // get imageSmoothingEnabled flag
* var imageSmoothingEnabled = layer.imageSmoothingEnabled();
*
* layer.imageSmoothingEnabled(false);
*
* layer.imageSmoothingEnabled(true);
*/
Factory.addGetterSetter(BaseLayer, 'imageSmoothingEnabled', true);
/**
* get/set clearBeforeDraw flag which determines if the layer is cleared or not
* before drawing
* @name Konva.BaseLayer#clearBeforeDraw
* @method
* @param {Boolean} clearBeforeDraw
* @returns {Boolean}
* @example
* // get clearBeforeDraw flag
* var clearBeforeDraw = layer.clearBeforeDraw();
*
* // disable clear before draw
* layer.clearBeforeDraw(false);
*
* // enable clear before draw
* layer.clearBeforeDraw(true);
*/
Factory.addGetterSetter(BaseLayer, 'clearBeforeDraw', true);
Collection.mapMethods(BaseLayer);

134
src/Container.ts
View File

@ -7,6 +7,7 @@ import { Konva } from './Global';
import { GetSet, IRect } from './types';
import { Shape } from './Shape';
import { HitCanvas, SceneCanvas } from './Canvas';
export interface ContainerConfig extends NodeConfig {
clearBeforeDraw?: boolean;
@ -53,7 +54,7 @@ export abstract class Container<ChildType extends Node> extends Node<
}
var results = new Collection();
this.children.each(function(child) {
this.children.each(function (child) {
if (filterFunc(child)) {
results.push(child);
}
@ -70,7 +71,8 @@ export abstract class Container<ChildType extends Node> extends Node<
return this.getChildren().length > 0;
}
/**
* remove all children
* remove all children. Children will be still in memory.
* If you want to completely destroy all children please use "destroyChildren" method instead
* @method
* @name Konva.Container#removeChildren
*/
@ -87,7 +89,7 @@ export abstract class Container<ChildType extends Node> extends Node<
return this;
}
/**
* destroy all children
* destroy all children nodes.
* @method
* @name Konva.Container#destroyChildren
*/
@ -135,7 +137,7 @@ export abstract class Container<ChildType extends Node> extends Node<
child.parent = this;
_children.push(child);
this._fire('add', {
child: child
child: child,
});
// chainable
return this;
@ -227,7 +229,7 @@ export abstract class Container<ChildType extends Node> extends Node<
) {
var retArr: Array<Node> = [];
this._descendants(node => {
this._descendants((node) => {
const valid = node._isMatch(selector);
if (valid) {
retArr.push(node);
@ -295,7 +297,7 @@ export abstract class Container<ChildType extends Node> extends Node<
// call super method
var node = Node.prototype.clone.call(this, obj);
this.getChildren().each(function(no) {
this.getChildren().each(function (no) {
node.add(no.clone());
});
return node;
@ -315,7 +317,7 @@ export abstract class Container<ChildType extends Node> extends Node<
getAllIntersections(pos) {
var arr = [];
this.find('Shape').each(function(shape: Shape) {
this.find('Shape').each(function (shape: Shape) {
if (shape.isVisible() && shape.intersects(pos)) {
arr.push(shape);
}
@ -324,73 +326,65 @@ export abstract class Container<ChildType extends Node> extends Node<
return arr;
}
_setChildrenIndices() {
this.children.each(function(child, n) {
this.children.each(function (child, n) {
child.index = n;
});
}
drawScene(can, top, caching) {
drawScene(can?: SceneCanvas, top?: Node) {
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas()),
context = canvas && canvas.getContext(),
cachedCanvas = this._getCanvasCache(),
cachedSceneCanvas = cachedCanvas && cachedCanvas.scene;
if (this.isVisible() || caching) {
if (!caching && cachedSceneCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedSceneCanvas(context);
context.restore();
} else {
// TODO: comment all arguments here
// describe why we use false for caching
// and why we use caching for skipBuffer, skipComposition
this._drawChildren(canvas, 'drawScene', top, false, caching, caching);
}
var caching = canvas && canvas.isCache;
if (!this.isVisible() && !caching) {
return this;
}
if (cachedSceneCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedSceneCanvas(context);
context.restore();
} else {
this._drawChildren('drawScene', canvas, top);
}
return this;
}
drawHit(can, top, caching) {
drawHit(can?: HitCanvas, top?: Node) {
if (!this.shouldDrawHit(top)) {
return this;
}
var layer = this.getLayer(),
canvas = can || (layer && layer.hitCanvas),
context = canvas && canvas.getContext(),
cachedCanvas = this._getCanvasCache(),
cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
if (this.shouldDrawHit(canvas) || caching) {
if (!caching && cachedHitCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedHitCanvas(context);
context.restore();
} else {
// TODO: comment all arguments here
// describe why we use false for caching
// and why we use caching for skipBuffer, skipComposition
this._drawChildren(canvas, 'drawHit', top, false, caching, caching);
}
if (cachedHitCanvas) {
context.save();
layer._applyTransform(this, context, top);
this._drawCachedHitCanvas(context);
context.restore();
} else {
this._drawChildren('drawHit', canvas, top);
}
return this;
}
// TODO: create ClipContainer
_drawChildren(
canvas,
drawMethod,
top,
caching?,
skipBuffer?,
skipComposition?
) {
_drawChildren(drawMethod, canvas, top) {
var layer = this.getLayer(),
context = canvas && canvas.getContext(),
clipWidth = this.clipWidth(),
clipHeight = this.clipHeight(),
clipFunc = this.clipFunc(),
hasClip = (clipWidth && clipHeight) || clipFunc,
clipX,
clipY;
hasClip = (clipWidth && clipHeight) || clipFunc;
if (hasClip && layer) {
const selfCache = top === this;
if (hasClip) {
context.save();
var transform = this.getAbsoluteTransform(top);
var m = transform.getMatrix();
@ -399,53 +393,37 @@ export abstract class Container<ChildType extends Node> extends Node<
if (clipFunc) {
clipFunc.call(this, context, this);
} else {
clipX = this.clipX();
clipY = this.clipY();
var clipX = this.clipX();
var clipY = this.clipY();
context.rect(clipX, clipY, clipWidth, clipHeight);
}
context.clip();
m = transform
.copy()
.invert()
.getMatrix();
m = transform.copy().invert().getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
var hasComposition =
!selfCache &&
this.globalCompositeOperation() !== 'source-over' &&
!skipComposition &&
drawMethod === 'drawScene';
if (hasComposition && layer) {
if (hasComposition) {
context.save();
context._applyGlobalCompositeOperation(this);
}
this.children.each(function(child) {
child[drawMethod](canvas, top, caching, skipBuffer);
this.children.each(function (child) {
child[drawMethod](canvas, top);
});
if (hasComposition && layer) {
if (hasComposition) {
context.restore();
}
if (hasClip && layer) {
if (hasClip) {
context.restore();
}
}
shouldDrawHit(canvas?) {
if (canvas && canvas.isCache) {
return true;
}
var layer = this.getLayer();
var layerUnderDrag = false;
DD._dragElements.forEach(elem => {
if (elem.dragStatus === 'dragging' && elem.node.getLayer() === layer) {
layerUnderDrag = true;
}
});
var dragSkip = !Konva.hitOnDragEnabled && layerUnderDrag;
return layer && layer.hitGraphEnabled() && this.isVisible() && !dragSkip;
}
getClientRect(config?: {
skipTransform?: boolean;
skipShadow?: boolean;
@ -461,10 +439,10 @@ export abstract class Container<ChildType extends Node> extends Node<
x: Infinity,
y: Infinity,
width: 0,
height: 0
height: 0,
};
var that = this;
this.children.each(function(child) {
this.children.each(function (child) {
// skip invisible children
if (!child.visible()) {
return;
@ -473,7 +451,7 @@ export abstract class Container<ChildType extends Node> extends Node<
var rect = child.getClientRect({
relativeTo: that,
skipShadow: config.skipShadow,
skipStroke: config.skipStroke
skipStroke: config.skipStroke,
});
// skip invisible children (like empty groups)
@ -510,14 +488,14 @@ export abstract class Container<ChildType extends Node> extends Node<
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY
height: maxY - minY,
};
} else {
selfRect = {
x: 0,
y: 0,
width: 0,
height: 0
height: 0,
};
}
@ -545,7 +523,7 @@ Factory.addComponentsGetterSetter(Container, 'clip', [
'x',
'y',
'width',
'height'
'height',
]);
/**
* get/set clip

24
src/Context.ts
View File

@ -44,7 +44,7 @@ var COMMA = ',',
'stroke',
'strokeText',
'transform',
'translate'
'translate',
];
var CONTEXT_PROPERTIES = [
@ -64,7 +64,7 @@ var CONTEXT_PROPERTIES = [
'textBaseline',
'globalAlpha',
'globalCompositeOperation',
'imageSmoothingEnabled'
'imageSmoothingEnabled',
];
const traceArrMax = 100;
@ -260,8 +260,8 @@ export class Context {
this.setAttr('globalAlpha', absOpacity);
}
}
_applyLineJoin(shape) {
var lineJoin = shape.getLineJoin();
_applyLineJoin(shape: Shape) {
var lineJoin = shape.lineJoin();
if (lineJoin) {
this.setAttr('lineJoin', lineJoin);
}
@ -593,17 +593,17 @@ export class Context {
args;
// to prevent creating scope function at each loop
var func = function(methodName) {
var func = function (methodName) {
var origMethod = that[methodName],
ret;
that[methodName] = function() {
that[methodName] = function () {
args = _simplifyArray(Array.prototype.slice.call(arguments, 0));
ret = origMethod.apply(that, arguments);
that._trace({
method: methodName,
args: args
args: args,
});
return ret;
@ -615,7 +615,7 @@ export class Context {
}
// attrs
that.setAttr = function() {
that.setAttr = function () {
origSetter.apply(that, arguments);
var prop = arguments[0];
var val = arguments[1];
@ -628,7 +628,7 @@ export class Context {
}
that._trace({
property: prop,
val: val
val: val,
});
};
}
@ -640,14 +640,14 @@ export class Context {
}
}
CONTEXT_PROPERTIES.forEach(function(prop) {
CONTEXT_PROPERTIES.forEach(function (prop) {
Object.defineProperty(Context.prototype, prop, {
get() {
return this._context[prop];
},
set(val) {
this._context[prop] = val;
}
},
});
});
@ -798,7 +798,7 @@ export class SceneContext extends Context {
blur = util.get(shape.getShadowBlur(), 5),
offset = util.get(shape.getShadowOffset(), {
x: 0,
y: 0
y: 0,
}),
scale = shape.getAbsoluteScale(),
ratio = this.canvas.getPixelRatio(),

44
src/FastLayer.ts
View File

@ -1,53 +1,25 @@
import { Util, Collection } from './Util';
import { Container } from './Container';
import { BaseLayer } from './BaseLayer';
import { Layer } from './Layer';
import { _registerNode } from './Global';
/**
* FastLayer constructor. Layers are tied to their own canvas element and are used
* FastLayer constructor. **DEPRECATED!** Please use `Konva.Layer({ listening: false})` instead. Layers are tied to their own canvas element and are used
* to contain shapes only. If you don't need node nesting, mouse and touch interactions,
* or event pub/sub, you should use FastLayer instead of Layer to create your layers.
* It renders about 2x faster than normal layers.
*
* @constructor
* @memberof Konva
* @augments Konva.BaseLayer
* @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
* @param {Boolean} [config.visible]
* @param {String} [config.id] unique id
* @param {String} [config.name] non-unique name
* @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1
* @augments Konva.Layer
* @@containerParams
* @example
* var layer = new Konva.FastLayer();
*/
export class FastLayer extends BaseLayer {
_validateAdd(child) {
var type = child.getType();
if (type !== 'Shape') {
Util.throw('You may only add shapes to a fast layer.');
}
}
hitGraphEnabled() {
return false;
}
drawScene(can?) {
var layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());
if (this.clearBeforeDraw()) {
canvas.getContext().clear();
}
Container.prototype.drawScene.call(this, canvas);
return this;
}
draw() {
this.drawScene();
return this;
export class FastLayer extends Layer {
constructor(attrs) {
super(attrs);
this.listening(false);
}
}

365
src/Layer.ts
View File

@ -1,13 +1,21 @@
import { Util, Collection } from './Util';
import { Container } from './Container';
import { Container, ContainerConfig } from './Container';
import { Node } from './Node';
import { Factory } from './Factory';
import { BaseLayer } from './BaseLayer';
import { HitCanvas } from './Canvas';
import { shapes } from './Shape';
import { SceneCanvas, HitCanvas } from './Canvas';
import { Stage } from './Stage';
import { getBooleanValidator } from './Validators';
import { _registerNode } from './Global';
import { GetSet, Vector2d } from './types';
import { Group } from './Group';
import { Shape, shapes } from './Shape';
import { _registerNode } from './Global';
export interface LayerConfig extends ContainerConfig {
clearBeforeDraw?: boolean;
hitGraphEnabled?: boolean;
imageSmoothingEnabled?: boolean;
}
// constants
var HASH = '#',
@ -25,7 +33,7 @@ var HASH = '#',
{ x: -1, y: -1 }, // 2
{ x: 1, y: -1 }, // 4
{ x: 1, y: 1 }, // 6
{ x: -1, y: 1 } // 8
{ x: -1, y: 1 }, // 8
],
INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length;
@ -34,7 +42,7 @@ var HASH = '#',
* to contain groups or shapes.
* @constructor
* @memberof Konva
* @augments Konva.BaseLayer
* @augments Konva.Container
* @param {Object} config
* @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want
* to clear the canvas before each layer draw. The default value is true.
@ -45,14 +53,176 @@ var HASH = '#',
* stage.add(layer);
* // now you can add shapes, groups into the layer
*/
export class Layer extends BaseLayer {
export abstract class Layer extends Container<Group | Shape> {
canvas = new SceneCanvas();
hitCanvas = new HitCanvas({
pixelRatio: 1
pixelRatio: 1,
});
_waitingForDraw = false;
constructor(config?: LayerConfig) {
super(config);
this.on('visibleChange', this._checkVisibility);
this._checkVisibility();
this.on('imageSmoothingEnabledChange', this._setSmoothEnabled);
this._setSmoothEnabled();
}
// for nodejs?
createPNGStream() {
const c = this.canvas._canvas as any;
return c.createPNGStream();
}
/**
* get layer canvas wrapper
* @method
* @name Konva.Layer#getCanvas
*/
getCanvas() {
return this.canvas;
}
/**
* get layer hit canvas
* @method
* @name Konva.Layer#getHitCanvas
*/
getHitCanvas() {
return this.hitCanvas;
}
/**
* get layer canvas context
* @method
* @name Konva.Layer#getContext
*/
getContext() {
return this.getCanvas().getContext();
}
/**
* clear scene and hit canvas contexts tied to the layer.
* This function doesn't remove any nodes. It just clear canvas element.
* @method
* @name Konva.Layer#clear
* @param {Object} [bounds]
* @param {Number} [bounds.x]
* @param {Number} [bounds.y]
* @param {Number} [bounds.width]
* @param {Number} [bounds.height]
* @example
* layer.clear();
* layer.clear({
* x : 0,
* y : 0,
* width : 100,
* height : 100
* });
*/
clear(bounds?) {
this.getContext().clear(bounds);
this.getHitCanvas().getContext().clear(bounds);
return this;
}
// extend Node.prototype.setZIndex
setZIndex(index) {
super.setZIndex(index);
var stage = this.getStage();
if (stage) {
stage.content.removeChild(this.getCanvas()._canvas);
if (index < stage.children.length - 1) {
stage.content.insertBefore(
this.getCanvas()._canvas,
stage.children[index + 1].getCanvas()._canvas
);
} else {
stage.content.appendChild(this.getCanvas()._canvas);
}
}
return this;
}
moveToTop() {
Node.prototype.moveToTop.call(this);
var stage = this.getStage();
if (stage) {
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.appendChild(this.getCanvas()._canvas);
}
return true;
}
moveUp() {
var moved = Node.prototype.moveUp.call(this);
if (!moved) {
return false;
}
var stage = this.getStage();
if (!stage) {
return false;
}
stage.content.removeChild(this.getCanvas()._canvas);
if (this.index < stage.children.length - 1) {
stage.content.insertBefore(
this.getCanvas()._canvas,
stage.children[this.index + 1].getCanvas()._canvas
);
} else {
stage.content.appendChild(this.getCanvas()._canvas);
}
return true;
}
// extend Node.prototype.moveDown
moveDown() {
if (Node.prototype.moveDown.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(
this.getCanvas()._canvas,
children[this.index + 1].getCanvas()._canvas
);
}
return true;
}
return false;
}
// extend Node.prototype.moveToBottom
moveToBottom() {
if (Node.prototype.moveToBottom.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(
this.getCanvas()._canvas,
children[1].getCanvas()._canvas
);
}
return true;
}
return false;
}
getLayer() {
return this;
}
remove() {
var _canvas = this.getCanvas()._canvas;
Node.prototype.remove.call(this);
if (_canvas && _canvas.parentNode && Util._isInDocument(_canvas)) {
_canvas.parentNode.removeChild(_canvas);
}
return this;
}
getStage() {
return this.parent as Stage;
}
setSize({ width, height }) {
super.setSize({ width, height });
this.canvas.setSize(width, height);
this.hitCanvas.setSize(width, height);
this._setSmoothEnabled();
return this;
}
_validateAdd(child) {
@ -61,6 +231,94 @@ export class Layer extends BaseLayer {
Util.throw('You may only add groups and shapes to a layer.');
}
}
_toKonvaCanvas(config) {
config = config || {};
config.width = config.width || this.getWidth();
config.height = config.height || this.getHeight();
config.x = config.x !== undefined ? config.x : this.x();
config.y = config.y !== undefined ? config.y : this.y();
return Node.prototype._toKonvaCanvas.call(this, config);
}
_checkVisibility() {
const visible = this.visible();
if (visible) {
this.canvas._canvas.style.display = 'block';
} else {
this.canvas._canvas.style.display = 'none';
}
}
_setSmoothEnabled() {
this.getContext()._context.imageSmoothingEnabled = this.imageSmoothingEnabled();
}
/**
* get/set width of layer. getter return width of stage. setter doing nothing.
* if you want change width use `stage.width(value);`
* @name Konva.Layer#width
* @method
* @returns {Number}
* @example
* var width = layer.width();
*/
getWidth() {
if (this.parent) {
return this.parent.width();
}
}
setWidth() {
Util.warn(
'Can not change width of layer. Use "stage.width(value)" function instead.'
);
}
/**
* get/set height of layer.getter return height of stage. setter doing nothing.
* if you want change height use `stage.height(value);`
* @name Konva.Layer#height
* @method
* @returns {Number}
* @example
* var height = layer.height();
*/
getHeight() {
if (this.parent) {
return this.parent.height();
}
}
setHeight() {
Util.warn(
'Can not change height of layer. Use "stage.height(value)" function instead.'
);
}
/**
* batch draw. this function will not do immediate draw
* but it will schedule drawing to next tick (requestAnimFrame)
* @method
* @name Konva.Layer#batchDraw
* @return {Konva.Layer} this
*/
batchDraw() {
if (!this._waitingForDraw) {
this._waitingForDraw = true;
Util.requestAnimFrame(() => {
this.draw();
this._waitingForDraw = false;
});
}
return this;
}
// the apply transform method is handled by the Layer and FastLayer class
// because it is up to the layer to decide if an absolute or relative transform
// should be used
// TODO: remove that method
_applyTransform(shape, context, top) {
var m = shape.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
/**
* get visible intersection shape. This is the preferred
* method for determining if a point intersects a shape or not
@ -80,7 +338,7 @@ export class Layer extends BaseLayer {
getIntersection(pos: Vector2d, selector?: string) {
var obj, i, intersectionOffset, shape;
if (!this.hitGraphEnabled() || !this.isVisible()) {
if (!this.isListening() || !this.isVisible()) {
return null;
}
// in some cases antialiased area may be bigger than 1px
@ -92,7 +350,7 @@ export class Layer extends BaseLayer {
intersectionOffset = INTERSECTION_OFFSETS[i];
obj = this._getIntersection({
x: pos.x + intersectionOffset.x * spiralSearchDistance,
y: pos.y + intersectionOffset.y * spiralSearchDistance
y: pos.y + intersectionOffset.y * spiralSearchDistance,
});
shape = obj.shape;
if (shape && selector) {
@ -133,16 +391,16 @@ export class Layer extends BaseLayer {
shape = shapes[HASH + colorKey];
if (shape) {
return {
shape: shape
shape: shape,
};
}
return {
antialiased: true
antialiased: true,
};
} else if (p3 > 0) {
// antialiased pixel
return {
antialiased: true
antialiased: true,
};
}
// empty pixel
@ -153,7 +411,7 @@ export class Layer extends BaseLayer {
canvas = can || (layer && layer.getCanvas());
this._fire(BEFORE_DRAW, {
node: this
node: this,
});
if (this.clearBeforeDraw()) {
@ -163,7 +421,7 @@ export class Layer extends BaseLayer {
Container.prototype.drawScene.call(this, canvas, top);
this._fire(DRAW, {
node: this
node: this,
});
return this;
@ -173,24 +431,14 @@ export class Layer extends BaseLayer {
canvas = can || (layer && layer.hitCanvas);
if (layer && layer.clearBeforeDraw()) {
layer
.getHitCanvas()
.getContext()
.clear();
layer.getHitCanvas().getContext().clear();
}
Container.prototype.drawHit.call(this, canvas, top);
return this;
}
clear(bounds?) {
BaseLayer.prototype.clear.call(this, bounds);
this.getHitCanvas()
.getContext()
.clear(bounds);
return this;
}
/**
* enable hit graph
* enable hit graph. **DEPRECATED!** Use `layer.listening(true)` instead.
* @name Konva.Layer#enableHitGraph
* @method
* @returns {Layer}
@ -200,7 +448,7 @@ export class Layer extends BaseLayer {
return this;
}
/**
* disable hit graph
* disable hit graph. **DEPRECATED!** Use `layer.listening(false)` instead.
* @name Konva.Layer#disableHitGraph
* @method
* @returns {Layer}
@ -210,6 +458,20 @@ export class Layer extends BaseLayer {
return this;
}
setHitGraphEnabled(val) {
Util.warn(
'hitGraphEnabled method is deprecated. Please use layer.listening() instead.'
);
this.listening(val);
}
getHitGraphEnabled(val) {
Util.warn(
'hitGraphEnabled method is deprecated. Please use layer.listening() instead.'
);
return this.listening();
}
/**
* Show or hide hit canvas over the stage. May be useful for debugging custom hitFunc
* @name Konva.Layer#toggleHitCanvas
@ -229,14 +491,54 @@ export class Layer extends BaseLayer {
}
hitGraphEnabled: GetSet<boolean, this>;
clearBeforeDraw: GetSet<boolean, this>;
imageSmoothingEnabled: GetSet<boolean, this>;
}
Layer.prototype.nodeType = 'Layer';
_registerNode(Layer);
/**
* get/set imageSmoothingEnabled flag
* For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
* @name Konva.Layer#imageSmoothingEnabled
* @method
* @param {Boolean} imageSmoothingEnabled
* @returns {Boolean}
* @example
* // get imageSmoothingEnabled flag
* var imageSmoothingEnabled = layer.imageSmoothingEnabled();
*
* layer.imageSmoothingEnabled(false);
*
* layer.imageSmoothingEnabled(true);
*/
Factory.addGetterSetter(Layer, 'imageSmoothingEnabled', true);
/**
* get/set clearBeforeDraw flag which determines if the layer is cleared or not
* before drawing
* @name Konva.Layer#clearBeforeDraw
* @method
* @param {Boolean} clearBeforeDraw
* @returns {Boolean}
* @example
* // get clearBeforeDraw flag
* var clearBeforeDraw = layer.clearBeforeDraw();
*
* // disable clear before draw
* layer.clearBeforeDraw(false);
*
* // enable clear before draw
* layer.clearBeforeDraw(true);
*/
Factory.addGetterSetter(Layer, 'clearBeforeDraw', true);
Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
/**
* get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase
* get/set hitGraphEnabled flag. **DEPRECATED!** Use `layer.listening(false)` instead.
* Disabling the hit graph will greatly increase
* draw performance because the hit graph will not be redrawn each time the layer is
* drawn. This, however, also disables mouse/touch event detection
* @name Konva.Layer#hitGraphEnabled
@ -253,4 +555,5 @@ Factory.addGetterSetter(Layer, 'hitGraphEnabled', true, getBooleanValidator());
* // enable hit graph
* layer.hitGraphEnabled(true);
*/
Collection.mapMethods(Layer);

113
src/Node.ts
View File

@ -13,7 +13,7 @@ import {
import { Stage } from './Stage';
import { Context } from './Context';
import { Shape } from './Shape';
import { BaseLayer } from './BaseLayer';
import { Layer } from './Layer';
export const ids: any = {};
export const names: any = {};
@ -407,6 +407,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
hitContext = cachedHitCanvas.getContext();
cachedHitCanvas.isCache = true;
cachedSceneCanvas.isCache = true;
this._cache.delete('canvas');
this._filterUpToDate = false;
@ -427,8 +428,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
this.drawScene(cachedSceneCanvas, this, true);
this.drawHit(cachedHitCanvas, this, true);
this.drawScene(cachedSceneCanvas, this);
this.drawHit(cachedHitCanvas, this);
this._isUnderCache = false;
sceneContext.restore();
@ -468,18 +469,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return this._cache.has('canvas');
}
abstract drawScene(
canvas?: Canvas,
top?: Node,
caching?: boolean,
skipBuffer?: boolean
): void;
abstract drawHit(
canvas?: Canvas,
top?: Node,
caching?: boolean,
skipBuffer?: boolean
): void;
abstract drawScene(canvas?: Canvas, top?: Node): void;
abstract drawHit(canvas?: Canvas, top?: Node): void;
/**
* Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
* The rectangle position is relative to parent container.
@ -926,7 +917,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
*/
getAncestors() {
var parent = this.getParent(),
ancestors = new Collection();
ancestors = new Collection<Node>();
while (parent) {
ancestors.push(parent);
@ -985,12 +976,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* ----------+-----------+------------
* T | T | T
* T | F | F
* F | T | T
* F | T | F
* F | F | F
* ----------+-----------+------------
* T | I | T
* F | I | F
* I | I | T
*
* @method
* @name Konva.Node#isListening
@ -999,20 +986,16 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
isListening() {
return this._getCache(LISTENING, this._isListening);
}
_isListening() {
var listening = this.listening(),
parent = this.getParent();
// the following conditions are a simplification of the truth table above.
// please modify carefully
if (listening === 'inherit') {
if (parent) {
return parent.isListening();
} else {
return true;
}
_isListening(relativeTo?: Node) {
const listening = this.listening();
if (!listening) {
return false;
}
const parent = this.getParent();
if (parent && parent !== relativeTo && this !== relativeTo) {
return parent._isListening(relativeTo);
} else {
return listening;
return true;
}
}
/**
@ -1038,30 +1021,28 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return false;
}
const parent = this.getParent();
if (parent && parent !== relativeTo) {
if (parent && parent !== relativeTo && this !== relativeTo) {
return parent._isVisible(relativeTo);
} else {
return true;
}
}
/**
* determine if listening is enabled by taking into account descendants. If self or any children
* have _isListeningEnabled set to true, then self also has listening enabled.
* @method
* @name Konva.Node#shouldDrawHit
* @returns {Boolean}
*/
shouldDrawHit() {
shouldDrawHit(top?: Node) {
if (top) {
return this._isVisible(top) && this._isListening(top);
}
var layer = this.getLayer();
var layerUnderDrag = false;
DD._dragElements.forEach((elem) => {
if (elem.dragStatus === 'dragging' && elem.node.getLayer() === layer) {
layerUnderDrag = true;
}
});
return (
(!layer && this.isListening() && this.isVisible()) ||
(layer &&
layer.hitGraphEnabled() &&
this.isListening() &&
this.isVisible())
);
var dragSkip = !Konva.hitOnDragEnabled && layerUnderDrag;
return this.isListening() && this.isVisible() && !dragSkip;
}
/**
* show node. set visible = true
* @method
@ -1615,7 +1596,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @name Konva.Node#getLayer
* @returns {Konva.Layer}
*/
getLayer(): BaseLayer | null {
getLayer(): Layer | null {
var parent = this.getParent();
return parent ? parent.getLayer() : null;
}
@ -2479,7 +2460,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
id: GetSet<string, this>;
listening: GetSet<boolean | 'inherit', this>;
listening: GetSet<boolean, this>;
name: GetSet<string, this>;
offset: GetSet<Vector2d, this>;
offsetX: GetSet<number, this>;
@ -2500,7 +2481,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
transformsEnabled: GetSet<string, this>;
visible: GetSet<boolean | 'inherit', this>;
visible: GetSet<boolean, this>;
width: GetSet<number, this>;
height: GetSet<number, this>;
@ -2950,40 +2931,28 @@ Factory.addGetterSetter(Node, 'height', 0, getNumberValidator());
* node.height(100);
*/
Factory.addGetterSetter(Node, 'listening', 'inherit', function (val) {
var isValid = val === true || val === false || val === 'inherit';
if (!isValid) {
Util.warn(
val +
' is a not valid value for "listening" attribute. The value may be true, false or "inherit".'
);
}
return val;
});
Factory.addGetterSetter(Node, 'listening', true, getBooleanValidator());
/**
* get/set listenig attr. If you need to determine if a node is listening or not
* get/set listening attr. If you need to determine if a node is listening or not
* by taking into account its parents, use the isListening() method
* @name Konva.Node#listening
* @method
* @param {Boolean|String} listening Can be "inherit", true, or false. The default is "inherit".
* @returns {Boolean|String}
* @param {Boolean} listening Can be true, or false. The default is true.
* @returns {Boolean}
* @example
* // get listening attr
* var listening = node.listening();
*
* // stop listening for events
* // stop listening for events, remove node and all its children from hit graph
* node.listening(false);
*
* // listen for events
* node.listening(true);
*
* // listen to events according to the parent
* node.listening('inherit');
* node.listening(true);
*/
/**
* get/set preventDefault
* By default all shapes will prevent default behaviour
* By default all shapes will prevent default behavior
* of a browser on a pointer move or tap.
* that will prevent native scrolling when you are trying to drag&drop a node
* but sometimes you may need to enable default actions

207
src/Shape.ts
View File

@ -5,14 +5,16 @@ import {
getNumberValidator,
getNumberOrAutoValidator,
getStringValidator,
getBooleanValidator
getBooleanValidator,
} from './Validators';
import { Context } from './Context';
import { Context, SceneContext } from './Context';
import { _registerNode } from './Global';
import * as PointerEvents from './PointerEvents';
import { GetSet, Vector2d } from './types';
import { HitCanvas, SceneCanvas, Canvas } from './Canvas';
import { Container } from './Container';
// hack from here https://stackoverflow.com/questions/52667959/what-is-the-purpose-of-bivariancehack-in-typescript-types/52668133#52668133
export type ShapeConfigHandler<TTarget> = {
@ -422,15 +424,33 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
// why do we need buffer canvas?
// it give better result when a shape has
// stroke with fill and with some opacity
_useBufferCanvas(caching): boolean {
return !!(
(!caching || this.hasShadow()) &&
this.perfectDrawEnabled() &&
this.getAbsoluteOpacity() !== 1 &&
this.hasFill() &&
this.hasStroke() &&
this.getStage()
);
_useBufferCanvas(forceFill?: boolean): boolean {
// image and sprite still has "fill" as image
// so they use that method with forced fill
// it probably will be simpler, then copy/paste the code
// buffer canvas is available only inside the stage
if (!this.getStage()) {
return false;
}
// force skip buffer canvas
if (!this.perfectDrawEnabled()) {
return false;
}
const hasFill = forceFill || this.hasFill();
const hasStroke = this.hasStroke();
const isTransparent = this.getAbsoluteOpacity() !== 1;
if (hasFill && hasStroke && isTransparent) {
return true;
}
const hasShadow = this.hasShadow();
const strokeForShadow = this.shadowForStrokeEnabled();
if (hasFill && hasStroke && hasShadow && strokeForShadow) {
return true;
}
return false;
}
setStrokeHitEnabled(val: number) {
Util.warn(
@ -467,7 +487,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
x: this._centroid ? -size.width / 2 : 0,
y: this._centroid ? -size.height / 2 : 0,
width: size.width,
height: size.height
height: size.height,
};
}
getClientRect(attrs) {
@ -513,17 +533,23 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
y:
-Math.round(strokeWidth / 2 + blurRadius) +
Math.min(shadowOffsetY, 0) +
fillRect.y
fillRect.y,
};
if (!skipTransform) {
return this._transformedRect(rect, relativeTo);
}
return rect;
}
drawScene(can, top, caching, skipBuffer) {
drawScene(can?: SceneCanvas, top?: Node) {
// basically there are 4 drawing modes
// 1 - simple drawing when nothing is cached.
// 2 - when we are caching current
// 3 - when node is cached and we need to draw it into layer
// 4 - ??
var layer = this.getLayer(),
canvas = can || layer.getCanvas(),
context = canvas.getContext(),
context = canvas.getContext() as SceneContext,
cachedCanvas = this._getCanvasCache(),
drawFunc = this.sceneFunc(),
hasShadow = this.hasShadow(),
@ -532,9 +558,14 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
bufferCanvas,
bufferContext;
var caching = canvas.isCache;
var skipBuffer = canvas.isCache;
var cachingSelf = top === this;
if (!this.isVisible() && !caching) {
return this;
}
// if node is cached we just need to draw from cache
if (cachedCanvas) {
context.save();
layer._applyTransform(this, context, top);
@ -542,12 +573,14 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
context.restore();
return this;
}
if (!drawFunc) {
return this;
}
context.save();
// if buffer canvas is needed
if (this._useBufferCanvas(caching) && !skipBuffer) {
if (this._useBufferCanvas() && !skipBuffer) {
stage = this.getStage();
bufferCanvas = stage.bufferCanvas;
bufferContext = bufferCanvas.getContext();
@ -555,95 +588,70 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
bufferContext.save();
bufferContext._applyLineJoin(this);
// layer might be undefined if we are using cache before adding to layer
if (!caching) {
if (layer) {
layer._applyTransform(this, bufferContext, top);
} else {
var m = this.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
}
var o = this.getAbsoluteTransform(top).getMatrix();
bufferContext.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
drawFunc.call(this, bufferContext, this);
bufferContext.restore();
var ratio = bufferCanvas.pixelRatio;
if (hasShadow && !canvas.hitCanvas) {
context.save();
if (hasShadow) {
context._applyShadow(this);
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(
bufferCanvas._canvas,
0,
0,
bufferCanvas.width / ratio,
bufferCanvas.height / ratio
);
context.restore();
} else {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(
bufferCanvas._canvas,
0,
0,
bufferCanvas.width / ratio,
bufferCanvas.height / ratio
);
}
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(
bufferCanvas._canvas,
0,
0,
bufferCanvas.width / ratio,
bufferCanvas.height / ratio
);
} else {
// if buffer canvas is not needed
context._applyLineJoin(this);
// layer might be undefined if we are using cache before adding to layer
if (!caching) {
if (layer) {
layer._applyTransform(this, context, top);
} else {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
if (!cachingSelf) {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
if (hasShadow && hasStroke && !canvas.hitCanvas) {
context.save();
// apply shadow
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
if (hasShadow) {
context._applyShadow(this);
}
drawFunc.call(this, context, this);
context.restore();
// if shape has stroke we need to redraw shape
// otherwise we will see a shadow under stroke (and over fill)
// but I think this is unexpected behavior
if (this.hasFill() && this.shadowForStrokeEnabled()) {
drawFunc.call(this, context, this);
}
} else if (hasShadow && !canvas.hitCanvas) {
context.save();
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
context._applyShadow(this);
drawFunc.call(this, context, this);
context.restore();
} else {
if (!caching) {
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
}
drawFunc.call(this, context, this);
// if shape has stroke we need to redraw shape
// otherwise we will see a shadow under stroke (and over fill)
// but I think this is unexpected behavior
if (
hasShadow &&
hasStroke &&
this.hasFill() &&
this.shadowForStrokeEnabled() &&
false
) {
// TODO: are there any ways to avoid double draw?
// hint: https://stackoverflow.com/questions/13470101/getting-single-shadow-for-fill-and-stroke-on-html-canvas
// clear the shadow
context.setAttr('shadowColor', 0);
context.setAttr('shadowOffsetX', 0);
context.setAttr('shadowOffsetY', 0);
context.setAttr('shadowBlur', 0);
drawFunc.call(this, context, this);
}
}
context.restore();
return this;
}
drawHit(can, top?, caching?) {
drawHit(can?: HitCanvas, top?: Node) {
if (!this.shouldDrawHit(top)) {
return this;
}
var layer = this.getLayer(),
canvas = can || layer.hitCanvas,
context = canvas && canvas.getContext(),
@ -658,9 +666,6 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
);
}
if (!this.shouldDrawHit() && !caching) {
return this;
}
if (cachedHitCanvas) {
context.save();
layer._applyTransform(this, context, top);
@ -673,13 +678,11 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
}
context.save();
context._applyLineJoin(this);
if (!caching) {
if (layer) {
layer._applyTransform(this, context, top);
} else {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
const selfCache = this === top;
if (!selfCache) {
var o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
}
drawFunc.call(this, context, this);
context.restore();
@ -1580,7 +1583,7 @@ Factory.addGetterSetter(Shape, 'fillPatternScaleY', 1, getNumberValidator());
Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientStartPoint', [
'x',
'y'
'y',
]);
/**
@ -1604,7 +1607,7 @@ Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientStartPoint', [
Factory.addComponentsGetterSetter(Shape, 'strokeLinearGradientStartPoint', [
'x',
'y'
'y',
]);
/**
@ -1691,7 +1694,7 @@ Factory.addGetterSetter(Shape, 'strokeLinearGradientStartPointY', 0);
Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientEndPoint', [
'x',
'y'
'y',
]);
/**
@ -1715,7 +1718,7 @@ Factory.addComponentsGetterSetter(Shape, 'fillLinearGradientEndPoint', [
Factory.addComponentsGetterSetter(Shape, 'strokeLinearGradientEndPoint', [
'x',
'y'
'y',
]);
/**
@ -1799,7 +1802,7 @@ Factory.addGetterSetter(Shape, 'strokeLinearGradientEndPointY', 0);
Factory.addComponentsGetterSetter(Shape, 'fillRadialGradientStartPoint', [
'x',
'y'
'y',
]);
/**
@ -1853,7 +1856,7 @@ Factory.addGetterSetter(Shape, 'fillRadialGradientStartPointY', 0);
Factory.addComponentsGetterSetter(Shape, 'fillRadialGradientEndPoint', [
'x',
'y'
'y',
]);
/**
@ -1932,7 +1935,7 @@ Factory.backCompat(Shape, {
drawHitFunc: 'hitFunc',
getDrawHitFunc: 'getHitFunc',
setDrawHitFunc: 'setHitFunc'
setDrawHitFunc: 'setHitFunc',
});
Collection.mapMethods(Shape);

78
src/Stage.ts
View File

@ -5,7 +5,7 @@ import { Konva } from './Global';
import { SceneCanvas, HitCanvas } from './Canvas';
import { GetSet, Vector2d } from './types';
import { Shape } from './Shape';
import { BaseLayer } from './BaseLayer';
import { Layer } from './Layer';
import { DD } from './DragAndDrop';
import { _registerNode } from './Global';
import * as PointerEvents from './PointerEvents';
@ -80,7 +80,7 @@ var STAGE = 'Stage',
POINTERMOVE,
POINTERUP,
POINTERCANCEL,
LOSTPOINTERCAPTURE
LOSTPOINTERCAPTURE,
],
// cached variables
eventsLength = EVENTS.length;
@ -88,7 +88,7 @@ var STAGE = 'Stage',
function addEvent(ctx, eventName) {
ctx.content.addEventListener(
eventName,
function(evt) {
function (evt) {
ctx[UNDERSCORE + eventName](evt);
},
false
@ -124,7 +124,7 @@ function checkNoClip(attrs: any = {}) {
* });
*/
export class Stage extends Container<BaseLayer> {
export class Stage extends Container<Layer> {
content: HTMLDivElement;
pointerPos: Vector2d | null;
_pointerPositions: (Vector2d & { id?: number })[] = [];
@ -259,11 +259,11 @@ export class Stage extends Container<BaseLayer> {
}
return {
x: pos.x,
y: pos.y
y: pos.y,
};
}
_getPointerById(id?: number) {
return this._pointerPositions.find(p => p.id === id);
return this._pointerPositions.find((p) => p.id === id);
}
getPointersPositions() {
return this._pointerPositions;
@ -282,7 +282,7 @@ export class Stage extends Container<BaseLayer> {
canvas = new SceneCanvas({
width: config.width || this.width(),
height: config.height || this.height(),
pixelRatio: config.pixelRatio || 1
pixelRatio: config.pixelRatio || 1,
}),
_context = canvas.getContext()._context,
layers = this.children;
@ -291,7 +291,7 @@ export class Stage extends Container<BaseLayer> {
_context.translate(-1 * x, -1 * y);
}
layers.each(function(layer) {
layers.each(function (layer) {
if (!layer.isVisible()) {
return;
}
@ -354,7 +354,7 @@ export class Stage extends Container<BaseLayer> {
this.bufferHitCanvas.setSize(width, height);
// set layer dimensions
this.children.each(layer => {
this.children.each((layer) => {
layer.setSize({ width, height });
layer.draw();
});
@ -446,12 +446,12 @@ export class Stage extends Container<BaseLayer> {
this._fire(MOUSELEAVE, {
evt: evt,
target: this,
currentTarget: this
currentTarget: this,
});
this._fire(MOUSEOUT, {
evt: evt,
target: this,
currentTarget: this
currentTarget: this,
});
}
this.pointerPos = undefined;
@ -509,7 +509,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId
pointerId,
});
this.targetShape = null;
}
@ -517,7 +517,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId
pointerId,
});
}
@ -551,7 +551,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId
pointerId,
});
}
@ -587,7 +587,7 @@ export class Stage extends Container<BaseLayer> {
clearTimeout(this.dblTimeout);
}
this.dblTimeout = setTimeout(function() {
this.dblTimeout = setTimeout(function () {
Konva.inDblClickWindow = false;
}, Konva.dblClickWindow);
@ -612,14 +612,14 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId
pointerId,
});
if (Konva.listenClickTap) {
this._fire(CLICK, {
evt: evt,
target: this,
currentTarget: this,
pointerId
pointerId,
});
}
@ -628,7 +628,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId
pointerId,
});
}
}
@ -659,7 +659,7 @@ export class Stage extends Container<BaseLayer> {
this._fire(CONTEXTMENU, {
evt: evt,
target: this,
currentTarget: this
currentTarget: this,
});
}
this._fire(CONTENT_CONTEXTMENU, { evt: evt });
@ -667,7 +667,7 @@ export class Stage extends Container<BaseLayer> {
_touchstart(evt) {
this.setPointersPositions(evt);
var triggeredOnShape = false;
this._changedPointerPositions.forEach(pos => {
this._changedPointerPositions.forEach((pos) => {
var shape = this.getIntersection(pos);
Konva.listenClickTap = true;
DD.justDragged = false;
@ -695,7 +695,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId: this._changedPointerPositions[0].id
pointerId: this._changedPointerPositions[0].id,
});
}
@ -708,7 +708,7 @@ export class Stage extends Container<BaseLayer> {
if (eventsEnabled) {
var triggeredOnShape = false;
var processedShapesIds = {};
this._changedPointerPositions.forEach(pos => {
this._changedPointerPositions.forEach((pos) => {
const shape =
PointerEvents.getCapturedShape(pos.id) || this.getIntersection(pos);
@ -733,7 +733,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId: this._changedPointerPositions[0].id
pointerId: this._changedPointerPositions[0].id,
});
}
@ -758,7 +758,7 @@ export class Stage extends Container<BaseLayer> {
clearTimeout(this.dblTimeout);
}
this.dblTimeout = setTimeout(function() {
this.dblTimeout = setTimeout(function () {
Konva.inDblClickWindow = false;
}, Konva.dblClickWindow);
@ -767,7 +767,7 @@ export class Stage extends Container<BaseLayer> {
var tapTriggered = false;
var dblTapTriggered = false;
this._changedPointerPositions.forEach(pos => {
this._changedPointerPositions.forEach((pos) => {
var shape =
(PointerEvents.getCapturedShape(pos.id) as Shape) ||
this.getIntersection(pos);
@ -811,7 +811,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId: this._changedPointerPositions[0].id
pointerId: this._changedPointerPositions[0].id,
});
}
@ -820,7 +820,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId: this._changedPointerPositions[0].id
pointerId: this._changedPointerPositions[0].id,
});
}
if (fireDblClick && !dblTapTriggered) {
@ -828,7 +828,7 @@ export class Stage extends Container<BaseLayer> {
evt: evt,
target: this,
currentTarget: this,
pointerId: this._changedPointerPositions[0].id
pointerId: this._changedPointerPositions[0].id,
});
}
// content events
@ -853,7 +853,7 @@ export class Stage extends Container<BaseLayer> {
this._fire(WHEEL, {
evt: evt,
target: this,
currentTarget: this
currentTarget: this,
});
}
this._fire(CONTENT_WHEEL, { evt: evt });
@ -955,7 +955,7 @@ export class Stage extends Container<BaseLayer> {
this._pointerPositions.push({
id: touch.identifier,
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY,
});
});
@ -965,7 +965,7 @@ export class Stage extends Container<BaseLayer> {
this._changedPointerPositions.push({
id: touch.identifier,
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY,
});
}
);
@ -975,11 +975,11 @@ export class Stage extends Container<BaseLayer> {
y = (evt.clientY - contentPosition.top) / contentPosition.scaleY;
this.pointerPos = {
x: x,
y: y
y: y,
};
this._pointerPositions = [{ x, y, id: Util._getFirstPointerId(evt) }];
this._changedPointerPositions = [
{ x, y, id: Util._getFirstPointerId(evt) }
{ x, y, id: Util._getFirstPointerId(evt) },
];
}
}
@ -995,7 +995,7 @@ export class Stage extends Container<BaseLayer> {
top: 0,
left: 0,
scaleX: 1,
scaleY: 1
scaleY: 1,
};
}
@ -1007,18 +1007,18 @@ export class Stage extends Container<BaseLayer> {
// sometimes clientWidth can be equals to 0
// i saw it in react-konva test, looks like it is because of hidden testing element
scaleX: rect.width / this.content.clientWidth || 1,
scaleY: rect.height / this.content.clientHeight || 1
scaleY: rect.height / this.content.clientHeight || 1,
};
}
_buildDOM() {
this.bufferCanvas = new SceneCanvas({
width: this.width(),
height: this.height()
height: this.height(),
});
this.bufferHitCanvas = new HitCanvas({
pixelRatio: 1,
width: this.width(),
height: this.height()
height: this.height(),
});
if (!Konva.isBrowser) {
@ -1056,11 +1056,11 @@ export class Stage extends Container<BaseLayer> {
/**
* batch draw
* @method
* @name Konva.BaseLayer#batchDraw
* @name Konva.Layer#batchDraw
* @return {Konva.Stage} this
*/
batchDraw() {
this.children.each(function(layer) {
this.children.each(function (layer) {
layer.batchDraw();
});
return this;

16
src/Validators.ts
View File

@ -35,7 +35,7 @@ export function alphaComponent(val: number) {
export function getNumberValidator() {
if (Konva.isUnminified) {
return function<T>(val: T, attr: string): T|void {
return function <T>(val: T, attr: string): T | void {
if (!Util._isNumber(val)) {
Util.warn(
_formatValue(val) +
@ -50,7 +50,7 @@ export function getNumberValidator() {
}
export function getNumberOrAutoValidator() {
if (Konva.isUnminified) {
return function<T extends string>(val: T, attr: string): T|void {
return function <T extends string>(val: T, attr: string): T | void {
var isNumber = Util._isNumber(val);
var isAuto = val === 'auto';
@ -68,7 +68,7 @@ export function getNumberOrAutoValidator() {
}
export function getStringValidator() {
if (Konva.isUnminified) {
return function(val: any, attr: string) {
return function (val: any, attr: string) {
if (!Util._isString(val)) {
Util.warn(
_formatValue(val) +
@ -83,7 +83,7 @@ export function getStringValidator() {
}
export function getFunctionValidator() {
if (Konva.isUnminified) {
return function(val: any, attr: string) {
return function (val: any, attr: string) {
if (!Util._isFunction(val)) {
Util.warn(
_formatValue(val) +
@ -98,7 +98,7 @@ export function getFunctionValidator() {
}
export function getNumberArrayValidator() {
if (Konva.isUnminified) {
return function(val: any, attr: string) {
return function (val: any, attr: string) {
if (!Util._isArray(val)) {
Util.warn(
_formatValue(val) +
@ -107,7 +107,7 @@ export function getNumberArrayValidator() {
'" attribute. The value should be a array of numbers.'
);
} else {
val.forEach(function(item: any) {
val.forEach(function (item: any) {
if (!Util._isNumber(item)) {
Util.warn(
'"' +
@ -125,7 +125,7 @@ export function getNumberArrayValidator() {
}
export function getBooleanValidator() {
if (Konva.isUnminified) {
return function(val: any, attr: string) {
return function (val: any, attr: string) {
var isBool = val === true || val === false;
if (!isBool) {
Util.warn(
@ -141,7 +141,7 @@ export function getBooleanValidator() {
}
export function getComponentValidator(components: any) {
if (Konva.isUnminified) {
return function(val: any, attr: string) {
return function (val: any, attr: string) {
if (!Util.isObject(val)) {
Util.warn(
_formatValue(val) +

4
src/index-types.d.ts vendored
View File

@ -60,7 +60,7 @@ declare namespace Konva {
export const Collection: typeof import('./Util').Collection;
export type Collection<Node> = import('./Util').Collection<Node>;
export const Util: typeof import('./Util').Util;
export const Context: typeof import('./Context').Context;
export type Context = import('./Context').Context;
@ -70,7 +70,7 @@ declare namespace Konva {
export const Layer: typeof import('./Layer').Layer;
export type Layer = import('./Layer').Layer;
export type LayerConfig = import('./BaseLayer').LayerConfig;
export type LayerConfig = import('./Layer').LayerConfig;
export const FastLayer: typeof import('./FastLayer').FastLayer;
export type FastLayer = import('./FastLayer').FastLayer;

12
src/shapes/Image.ts
View File

@ -36,11 +36,7 @@ export interface ImageConfig extends ShapeConfig {
*/
export class Image extends Shape<ImageConfig> {
_useBufferCanvas() {
return !!(
(this.hasShadow() || this.getAbsoluteOpacity() !== 1) &&
this.hasStroke() &&
this.getStage()
);
return super._useBufferCanvas(true);
}
_sceneFunc(context) {
var width = this.width(),
@ -63,7 +59,7 @@ export class Image extends Shape<ImageConfig> {
0,
0,
width,
height
height,
];
} else {
params = [image, 0, 0, width, height];
@ -114,9 +110,9 @@ export class Image extends Shape<ImageConfig> {
*/
static fromURL(url, callback) {
var img = Util.createImageElement();
img.onload = function() {
img.onload = function () {
var image = new Image({
image: img
image: img,
});
callback(image);
};

14
src/shapes/Sprite.ts
View File

@ -74,15 +74,15 @@ export class Sprite extends Shape<SpriteConfig> {
this._updated = false;
return updated;
});
this.on('animationChange.konva', function() {
this.on('animationChange.konva', function () {
// reset index when animation changes
this.frameIndex(0);
});
this.on('frameIndexChange.konva', function() {
this.on('frameIndexChange.konva', function () {
this._updated = true;
});
// smooth change for frameRate
this.on('frameRateChange.konva', function() {
this.on('frameRateChange.konva', function () {
if (!this.anim.isRunning()) {
return;
}
@ -152,14 +152,12 @@ export class Sprite extends Shape<SpriteConfig> {
}
_useBufferCanvas() {
return (
(this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke()
);
return super._useBufferCanvas(true);
}
_setInterval() {
var that = this;
this.interval = setInterval(function() {
this.interval = setInterval(function () {
that._updateIndex();
}, 1000 / this.frameRate());
}
@ -367,7 +365,7 @@ Factory.addGetterSetter(Sprite, 'frameRate', 17, getNumberValidator());
Factory.backCompat(Sprite, {
index: 'frameIndex',
getIndex: 'getFrameIndex',
setIndex: 'setFrameIndex'
setIndex: 'setFrameIndex',
});
Collection.mapMethods(Sprite);

20
src/shapes/Text.ts
View File

@ -5,7 +5,7 @@ import { Konva } from '../Global';
import {
getNumberValidator,
getStringValidator,
getNumberOrAutoValidator
getNumberOrAutoValidator,
} from '../Validators';
import { _registerNode } from '../Global';
@ -60,7 +60,7 @@ var AUTO = 'auto',
'height',
'wrap',
'ellipsis',
'letterSpacing'
'letterSpacing',
],
// cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length;
@ -94,13 +94,6 @@ function checkDefaultFill(config) {
return config;
}
// polyfill for IE11
const trimRight =
String.prototype.trimRight ||
function polyfill() {
return this.replace(/[\s\xa0]+$/, '');
};
/**
* Text constructor
* @constructor
@ -351,7 +344,7 @@ export class Text extends Shape<TextConfig> {
_context.restore();
return {
width: metrics.width,
height: fontSize
height: fontSize,
};
}
_getContextFont() {
@ -375,7 +368,10 @@ export class Text extends Shape<TextConfig> {
SPACE +
this.fontSize() +
PX_SPACE +
this.fontFamily()
// wrap font family into " so font families with spaces works ok
+'"' +
this.fontFamily() +
'"'
);
}
_addTextLine(line) {
@ -553,7 +549,7 @@ Text.prototype._attrsAffectingSize = [
'fontSize',
'padding',
'wrap',
'lineHeight'
'lineHeight',
];
_registerNode(Text);

21
test/performance/bunnies.html
View File

@ -28,7 +28,7 @@
var maxY = height - 10;
var minY = 0;
var startBunnyCount = 1000;
var startBunnyCount = 2000;
var isAdding = false;
var count = 0;
var container;
@ -40,14 +40,14 @@
var stage = new Konva.Stage({
container: 'container',
width: width - 10,
height: height - 10
height: height - 10,
});
layer = new Konva.FastLayer();
layer = new Konva.Layer({ listening: false });
stage.add(layer);
stats = new Stats();
wabbitTexture = new Image();
wabbitTexture.onload = function() {
wabbitTexture.onload = function () {
_handleTextureLoaded();
};
wabbitTexture.src = '../assets/bunny.png';
@ -71,11 +71,11 @@
container = stage;
// stage.addChild(container);
stage.on('mousedown', function() {
stage.on('mousedown', function () {
isAdding = true;
});
stage.on('mouseup', function() {
stage.on('mouseup', function () {
isAdding = false;
});
@ -87,9 +87,8 @@
var bunny = new Konva.Image({
image: wabbitTexture,
transformsEnabled: 'position',
hitGraphEnabled: false,
x: 10,
y: 10
y: 10,
});
bunny.speedX = Math.random() * 10;
@ -97,8 +96,6 @@
bunnys.push(bunny);
layer.add(bunny);
}
layer.draw();
}
@ -121,7 +118,7 @@
image: wabbitTexture,
transformsEnabled: 'position',
x: 0,
y: 0
y: 0,
});
bunny.speedX = Math.random() * 10;
bunny.speedY = Math.random() * 10 - 5;
@ -157,7 +154,7 @@
bunny.setY(minY);
}
}
layer.drawScene();
layer.draw();
requestAnimationFrame(update);
stats.end();
}

64
test/unit/Node-cache-test.js
View File

@ -30,6 +30,7 @@ suite('Caching', function () {
compareLayerAndCanvas(layer, canvas, 10);
cloneAndCompareLayer(layer);
showHit(layer);
});
test('cache simple rectangle with transform', function () {
@ -751,6 +752,34 @@ suite('Caching', function () {
cloneAndCompareLayer(layer, 210);
});
test('test group with opacity', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var group = new Konva.Group({
x: 100,
y: 100,
draggable: true,
});
layer.add(group);
var circle = new Konva.Circle({
radius: 10,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndRadius: 10,
fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'black'],
opacity: 0.4,
strokeHitEnabled: false,
stroke: 'rgba(0,0,0,0)',
});
group.add(circle);
group.cache();
stage.draw();
cloneAndCompareLayer(layer, 100);
});
test('test rect with float dimensions', function () {
var stage = addStage();
var layer = new Konva.Layer();
@ -843,6 +872,40 @@ suite('Caching', function () {
assert.equal(stage.getIntersection({ x: 150, y: 100 }), rect);
});
test('even if parent is not listening cache and hit should be created', function () {
var stage = addStage();
var layer = new Konva.Layer({
listening: false,
});
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 100,
fill: 'green',
});
layer.add(rect);
stage.add(layer);
rect.cache();
layer.listening(true);
layer.draw();
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.beginPath();
context.rect(100, 50, 100, 100);
context.closePath();
context.fillStyle = 'green';
context.fill();
showHit(layer);
compareLayerAndCanvas(layer, canvas, 5);
assert.equal(stage.getIntersection({ x: 150, y: 100 }), rect);
});
// hard to fix
test.skip('even if parent is not visible cache should be created - test for group', function () {
var stage = addStage();
@ -1269,7 +1332,6 @@ suite('Caching', function () {
layer.add(circle);
circle.cache();
console.log(circle._cache.get('canvas'));
assert.equal(circle._cache.get('canvas').filter.width, 0);
circle.filters([Konva.Filters.Blur]);
layer.draw();

22
test/unit/Node-test.js
View File

@ -404,7 +404,7 @@ suite('Node', function () {
layer.add(rect).add(rect2);
stage.add(layer);
assert.equal(rect.getListening(), 'inherit');
assert.equal(rect.getListening(), true);
assert.equal(rect.isListening(), true);
rect.setListening(false);
@ -1836,7 +1836,7 @@ suite('Node', function () {
rect.setListening(false);
assert.equal(rect.isListening(), false);
rect.setListening('inherit');
rect.setListening(true);
assert.equal(rect.isListening(), true);
layer.setListening(false);
@ -1846,14 +1846,7 @@ suite('Node', function () {
layer.setListening(true);
assert.equal(rect.isListening(), true);
// even though we set stage listening to false, since the layer
// listening is set to try, rect listening will be true
stage.setListening(false);
assert.equal(rect.isListening(), true);
// setting layer listening to inherit means that the layer listening
// will inherit the stage listening, which is false
layer.setListening('inherit');
assert.equal(rect.isListening(), false);
});
@ -3133,14 +3126,14 @@ suite('Node', function () {
showHit(layer);
assert.equal(rect.isListening(), true);
assert.equal(rect.shouldDrawHit(), true);
assert.equal(rect.isListening(), false);
assert.equal(rect.shouldDrawHit(), false);
assert.equal(group.isListening(), false);
assert.equal(group.shouldDrawHit(), true, 'hit graph for group');
assert.equal(group.shouldDrawHit(), false, 'hit graph for group');
assert.equal(layer.isListening(), false);
assert.equal(layer.shouldDrawHit(), true, 'hit graph for layer');
assert.equal(layer.shouldDrawHit(), false, 'hit graph for layer');
var layerClick = 0;
var groupClick = 0;
@ -3156,7 +3149,6 @@ suite('Node', function () {
layerClick += 1;
});
showHit(layer);
var top = stage.content.getBoundingClientRect().top;
stage.simulateMouseDown({
x: 150,
@ -3167,7 +3159,7 @@ suite('Node', function () {
y: 75,
});
assert.equal(rectClick, 1, 'click on rectangle');
assert.equal(rectClick, 0, 'click on rectangle');
assert.equal(groupClick, 0, 'no click on group');
assert.equal(layerClick, 0, 'no click on layer');
});

101
test/unit/Shape-test.js
View File

@ -510,7 +510,7 @@ suite('Shape', function () {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();restore();'
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();'
);
});
@ -601,7 +601,7 @@ suite('Shape', function () {
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();restore();'
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();'
);
});
@ -678,30 +678,26 @@ suite('Shape', function () {
context.rect(100, 50, 100, 50);
context.closePath();
context.fillStyle = 'green';
context.shadowColor = 'grey';
context.shadowBlur = 10 * canvas.ratio;
context.shadowOffsetX = 20 * canvas.ratio;
context.shadowOffsetY = 20 * canvas.ratio;
context.lineWidth = 10;
context.stroke();
context.fill();
// clear the shadow
context.shadowColor = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
// restroke without the shaodw
context.stroke();
compareLayerAndCanvas(layer, canvas, 50);
var c2 = createCanvas();
var ctx2 = c2.getContext('2d');
ctx2.shadowColor = 'grey';
ctx2.shadowBlur = 10 * canvas.ratio;
ctx2.shadowOffsetX = 20 * canvas.ratio;
ctx2.shadowOffsetY = 20 * canvas.ratio;
ctx2.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
// compareLayerAndCanvas(layer, c2, 50);
var trace = layer.getContext().getTrace();
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();'
'clearRect(0,0,578,200);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
});
@ -769,16 +765,12 @@ suite('Shape', function () {
context.fill();
context.restore();
// // don't test in PhantomJS as it use old chrome engine
// // it it has opacity + shadow bug
// if (!window.mochaPhantomJS) {
// compareLayerAndCanvas(layer, canvas, 260);
// }
compareLayerAndCanvas(layer, canvas, 260);
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();save();shadowColor=rgba(128,128,128,1);shadowBlur=5;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();restore();'
'clearRect(0,0,578,200);save();shadowColor=rgba(128,128,128,1);shadowBlur=5;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
});
@ -796,7 +788,7 @@ suite('Shape', function () {
fill: 'green',
stroke: 'black',
strokeWidth: 2,
shadowColor: 'grey',
shadowColor: 'black',
shadowBlur: 2,
shadowOffset: {
x: 20,
@ -811,7 +803,7 @@ suite('Shape', function () {
var context = canvas.getContext('2d');
context.save();
context.shadowColor = 'grey';
context.shadowColor = 'black';
context.shadowBlur = 2 * canvas.ratio;
context.shadowOffsetX = 20 * canvas.ratio;
context.shadowOffsetY = 20 * canvas.ratio;
@ -1211,7 +1203,7 @@ suite('Shape', function () {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(0.5,0,0,0.5,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,100,100);closePath();fillStyle=green;fill();restore();restore();'
'clearRect(0,0,578,200);save();transform(0.5,0,0,0.5,100,100);shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,100,100);closePath();fillStyle=green;fill();restore();'
);
});
@ -1306,7 +1298,7 @@ suite('Shape', function () {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(0.25,0,0,0.25,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,200,200);closePath();fillStyle=green;fill();restore();restore();'
'clearRect(0,0,578,200);save();transform(0.25,0,0,0.25,100,100);shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,200,200);closePath();fillStyle=green;fill();restore();'
);
});
@ -1354,6 +1346,57 @@ suite('Shape', function () {
);
});
test('check lineJoin in buffer canvas', function () {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 100,
y: 50,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 10,
opacity: 0.5,
lineJoin: 'round',
});
layer.add(rect);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
// stroke
context.beginPath();
context.rect(100, 50, 100, 50);
context.closePath();
context.lineWidth = 10;
context.strokeStyle = 'black';
context.fillStyle = 'green';
context.lineJoin = 'round';
context.fill();
context.stroke();
var canvas2 = createCanvas();
var context2 = canvas2.getContext('2d');
context2.globalAlpha = 0.5;
context2.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2);
compareLayerAndCanvas(layer, canvas2, 150);
var trace = layer.getContext().getTrace();
console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
});
// ======================================================
test('optional disable shadow for stroke', function () {
var stage = addStage();
@ -1401,7 +1444,7 @@ suite('Shape', function () {
var trace = layer.getContext().getTrace();
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;shadowColor=rgba(0,0,0,0);strokeStyle=black;stroke();restore();restore();'
'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;shadowColor=rgba(0,0,0,0);strokeStyle=black;stroke();restore();'
);
});

5
test/unit/shapes/Circle-test.js
View File

@ -34,7 +34,10 @@ suite('Circle', function () {
assert.equal(circle.getClassName(), 'Circle');
var trace = layer.getContext().getTrace();
//console.log(trace);
// console.log(trace);
// console.log(
// 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'
// );
assert.equal(
trace,
'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'

4
test/unit/shapes/Image-test.js
View File

@ -270,7 +270,7 @@ suite('Image', function () {
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();'
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();'
);
done();
@ -309,7 +309,7 @@ suite('Image', function () {
//console.log(trace);
assert.equal(
trace,
'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();restore();'
'clearRect(0,0,578,200);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
done();

2
test/unit/shapes/Line-test.js
View File

@ -165,7 +165,7 @@ suite('Line', function () {
assert.equal(
trace,
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();'
'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();'
);
});