lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-22 21:02:26 +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
Download Patch File Download Diff File Expand all files Collapse all files

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();'
);
});