lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 21:34:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

autodraw

Browse Source
This commit is contained in:
Anton Lavrenov
2021-05-04 08:57:03 -05:00
parent ca1de3a351
commit 1c6bc48c83
15 changed files with 22753 additions and 11759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
test/performance/bunnies.html
View File

@@ -11,12 +11,13 @@
<body>
<div id="container"></div>
<!-- this line for dev version -->
<script src="../../"></script>
<script src="../../src/index.ts"></script>
<!-- this line for old version -->
<!-- <script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script> -->
<script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
<script defer="defer">
Konva.isUnminified = false;
// Konva.autoDrawEnabled = trye;
var lastTime = 0;
var width = window.innerWidth;
@@ -189,7 +190,10 @@
y: pos.y,
});
}
layer.draw();
if (!Konva.autoDrawEnabled) {
layer.draw();
}
requestAnimationFrame(update);
stats.end();
}

1
test/unit-tests.html
View File

@@ -44,6 +44,7 @@
import './unit/Shape-test.ts';
import './unit/Node-test.ts';
import './unit/Node-cache-test.ts';
import './unit/AutoDraw-test.ts';
// SHAPES
import './unit/Rect-test.ts';

137
test/unit/AutoDraw-test.ts Normal file
View File

@@ -0,0 +1,137 @@
import { assert } from 'chai';
import { addStage, isNode, Konva } from './utis';
describe('AutoDraw', function () {
// ======================================================
it('schedule draw on shape add/change/remove', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
let callCount = 0;
layer.batchDraw = function () {
callCount += 1;
Konva.Layer.prototype.batchDraw.call(this);
return layer;
};
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
});
layer.add(circle);
assert.equal(callCount, 1);
circle.radius(50);
assert.equal(callCount, 2);
circle.destroy();
assert.equal(callCount, 3);
});
// ======================================================
it('schedule draw on order change', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
});
layer.add(circle);
var circle2 = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
});
layer.add(circle2);
let callCount = 0;
layer.batchDraw = function () {
callCount += 1;
Konva.Layer.prototype.batchDraw.call(this);
return layer;
};
circle.moveToTop();
assert.equal(callCount, 1);
});
// ======================================================
it('schedule draw on cache', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
});
layer.add(circle);
let callCount = 0;
layer.batchDraw = function () {
callCount += 1;
Konva.Layer.prototype.batchDraw.call(this);
return layer;
};
circle.cache();
assert.equal(callCount, 1);
circle.clearCache();
assert.equal(callCount, 2);
});
// ======================================================
it.only('redraw for images', function (done) {
// don't test on node, because of specific url access
if (isNode) {
return;
}
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
const { src } = document.getElementById(
'darth-vader.jpg'
) as HTMLImageElement;
const img = new Image();
img.src = src;
const image = new Konva.Image({
image: img,
});
layer.add(image);
let callCount = 0;
layer.batchDraw = function () {
callCount += 1;
Konva.Layer.prototype.batchDraw.call(this);
return layer;
};
img.onload = () => {
assert.equal(callCount, 1);
done();
};
});
});

2
test/unit/Layer-test.ts
View File

@@ -302,7 +302,7 @@ describe('Layer', function () {
stage.add(layer);
assert(layer.getCanvasElement().style.display === 'none');
assert(layer.getNativeCanvasElement().style.display === 'none');
});
// ======================================================

13
test/unit/utis.ts
View File

@@ -15,7 +15,7 @@ import { Stage } from '../../src/Stage';
// reset some data
beforeEach(function () {
Konva.inDblClickWindow = false;
Konva['inDblClickWindow'] = false;
});
export const isNode = typeof global.document === 'undefined';
@@ -120,7 +120,7 @@ export function compareCanvases(canvas1, canvas2, tol?, secondTol?) {
}
export function compareLayerAndCanvas(layer: Layer, canvas, tol?, secondTol?) {
compareCanvases(layer.getCanvasElement(), canvas, tol, secondTol);
compareCanvases(layer.getNativeCanvasElement(), canvas, tol, secondTol);
}
export function cloneAndCompareLayer(layer: Layer, tol?, secondTol?) {
@@ -131,7 +131,12 @@ export function cloneAndCompareLayer(layer: Layer, tol?, secondTol?) {
}
export function compareLayers(layer1: Layer, layer2: Layer, tol?, secondTol?) {
compareLayerAndCanvas(layer1, layer2.getCanvasElement(), tol, secondTol);
compareLayerAndCanvas(
layer1,
layer2.getNativeCanvasElement(),
tol,
secondTol
);
}
export function createCanvas() {
@@ -152,7 +157,7 @@ export function showHit(layer) {
getContainer().appendChild(canvas);
}
Konva.UA.mobile = false;
Konva['UA'].mobile = false;
export function simulateMouseDown(stage, pos) {
var top = isNode ? 0 : stage.content.getBoundingClientRect().top;