mirror of
https://github.com/konvajs/konva.git
synced 2025-09-18 09:50:05 +08:00
758adcd502
Update approach of dealing with file extensions differences between typescript & node. Leverages `rewriteRelativeImportExtensions` that was added in typescript 5.7 [1], and that is recommended path by node to run typescript in the future [2] [1] https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-7.html#path-rewriting-for-relative-paths [2] https://nodejs.org/api/typescript.html#type-stripping
131 lines
2.9 KiB
TypeScript
131 lines
2.9 KiB
TypeScript
import { assert } from 'chai';
|
|
|
|
import { addStage, Konva } from './test-utils.ts';
|
|
|
|
describe('Animation', function () {
|
|
// ======================================================
|
|
it('test start and stop', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var rect = new Konva.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var amplitude = 150;
|
|
var period = 1000;
|
|
// in ms
|
|
var centerX = stage.width() / 2 - 100 / 2;
|
|
|
|
var anim = new Konva.Animation(function (frame) {
|
|
rect.x(
|
|
amplitude * Math.sin((frame.time * 2 * Math.PI) / period) + centerX
|
|
);
|
|
}, layer);
|
|
var a = Konva.Animation.animations;
|
|
var startLen = a.length;
|
|
|
|
assert.equal(a.length, startLen, '1should be no animations running');
|
|
|
|
anim.start();
|
|
assert.equal(a.length, startLen + 1, '2should be 1 animation running');
|
|
|
|
anim.stop();
|
|
assert.equal(a.length, startLen, '3should be no animations running');
|
|
|
|
anim.start();
|
|
assert.equal(a.length, startLen + 1, '4should be 1 animation running');
|
|
|
|
anim.start();
|
|
assert.equal(a.length, startLen + 1, '5should be 1 animation runningg');
|
|
|
|
anim.stop();
|
|
assert.equal(a.length, startLen, '6should be no animations running');
|
|
|
|
anim.stop();
|
|
assert.equal(a.length, startLen, '7should be no animations running');
|
|
});
|
|
|
|
// ======================================================
|
|
it('layer batch draw', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var rect = new Konva.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var draws = 0;
|
|
|
|
layer.on('draw', function () {
|
|
//console.log('draw')
|
|
draws++;
|
|
});
|
|
|
|
layer.draw();
|
|
layer.draw();
|
|
layer.draw();
|
|
|
|
assert.equal(draws, 3, 'draw count should be 3');
|
|
|
|
layer.batchDraw();
|
|
layer.batchDraw();
|
|
layer.batchDraw();
|
|
|
|
assert.notEqual(draws, 6, 'should not be 6 draws');
|
|
});
|
|
|
|
// ======================================================
|
|
it('stage batch draw', function () {
|
|
var stage = addStage();
|
|
var layer = new Konva.Layer();
|
|
var rect = new Konva.Rect({
|
|
x: 200,
|
|
y: 100,
|
|
width: 100,
|
|
height: 50,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: 4,
|
|
});
|
|
|
|
layer.add(rect);
|
|
stage.add(layer);
|
|
|
|
var draws = 0;
|
|
|
|
layer.on('draw', function () {
|
|
//console.log('draw')
|
|
draws++;
|
|
});
|
|
|
|
stage.draw();
|
|
stage.draw();
|
|
stage.draw();
|
|
|
|
assert.equal(draws, 3, 'draw count should be 3');
|
|
|
|
stage.batchDraw();
|
|
stage.batchDraw();
|
|
stage.batchDraw();
|
|
|
|
assert.notEqual(draws, 6, 'should not be 6 draws');
|
|
});
|
|
});
|